/* =========================================================
   1. VARIABLES DE DISEÑO
   ========================================================= */
:root {
  --ink:#0a0a0a;
  --line:#e6e5e2;
  --surface:#f1f0ee;
  --accent:#b15f2c;
  --card:2rem;
  --sm:1.25rem
}

/* =========================================================
   2. RESET Y ESTILOS BASE
   ========================================================= */
* {
  box-sizing:border-box;
  margin:0;
  padding:0
}

html {
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth
}

body {
  background:#fff;
  color:#111;
  font-family:'Onest',sans-serif;
  overflow-x:hidden
}

a {
  color:inherit;
  text-decoration:none
}

button,input,textarea {
  font:inherit;
  color:inherit
}

button {
  background:none;
  border:0;
  cursor:pointer
}

ul {
  list-style:none
}

img {
  display:block
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px
}

.shell {
  max-width:88rem;
  margin-inline:auto
}

.pad {
  padding-inline:1.25rem
}

.icon {
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:middle
}

.skip {
  position:fixed;
  left:1rem;
  top:1rem;
  z-index:200;
  transform:translateY(-150%);
  border-radius:.875rem;
  background:var(--ink);
  padding:.5rem 1rem;
  font-size:.875rem;
  color:#fff
}

.skip:focus {
  transform:none
}

/* =========================================================
   3. ESCALA ADAPTATIVA GLOBAL
   ========================================================= */
@media(max-width:1920px) {
  html {
    font-size:.833333vw
  }
}

@media(max-width:1440px) {
  html {
    font-size:1.111111vw
  }
}

@media(max-width:1024px) {
  html {
    font-size:1.5625vw
  }
}

@media(max-width:640px) {
  html {
    font-size:4.444444vw
  }
}

@media(min-width:640px) {
  .pad {
    padding-inline:2rem
  }
}

/* =========================================================
   4. PANTALLA DE CARGA
   ========================================================= */
.loader {
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  background:var(--ink);
  color:#fff;
  border-radius:0 0 2rem 2rem;
  transition:transform .72s cubic-bezier(.22,1,.36,1)
}

.loader.out {
  transform:translateY(-100%)
}

.loader-center {
  text-align:center;
  display:grid;
  gap:1.25rem;
  transition:.55s ease
}

.loader.out .loader-center {
  opacity:0;
  transform:translateY(-12px)
}

.loader-brand {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-weight:600;
  font-size:1.5rem
}

.loader-brand svg {
  font-size:1.875rem;
  color:#cf8047
}

.loader-copy {
  max-width:24ch;
  font-size:.875rem;
  color:#ffffff8c
}

.progress {
  width:min(22rem,72vw);
  display:grid;
  gap:.75rem
}

.track {
  height:1px;
  background:#ffffff26
}

.fill {
  height:100%;
  width:0;
  background:#cf8047;
  transition:width .1s ease-out
}

.progress-meta {
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#ffffff73
}

.count {
  color:#fffc;
  font-variant-numeric:tabular-nums
}

/* =========================================================
   5. HEADER Y NAVEGACIÓN PRINCIPAL
   ========================================================= */
.header {
  position:absolute;
  inset-inline:0;
  top:0;
  z-index:50;
  opacity:0;
  transform:translateY(-14px);
  transition:.7s cubic-bezier(.22,1,.36,1)
}

.header.ready {
  opacity:1;
  transform:none
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.25rem
}

.brand {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1.125rem;
  font-weight:600;
  letter-spacing:-.01em
}

.brand svg {
  font-size:1.25rem;
  color:var(--accent)
}

.desktop-nav {
  display:none
}

.header-actions {
  display:flex;
  gap:.75rem
}

.glass {
  display:flex;
  align-items:center;
  border:1px solid #e6e5e2cc;
  background:#fff6;
  backdrop-filter:blur(4px);
  border-radius:.875rem
}

.clock {
  display:none;
  padding:.5rem .75rem;
  gap:.75rem;
  font-size:.75rem;
  color:#111b3
}

.clock .live {
  min-width:3.5rem;
  font-weight:500;
  color:#111;
  font-variant-numeric:tabular-nums
}

.menu-btn {
  padding:.5rem 1rem;
  gap:.5rem;
  font-size:.75rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.05em
}

.menu-word {
  display:none
}

/* =========================================================
   6. HERO Y EFECTO DE IMAGEN
   ========================================================= */
.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:0 0 2rem 2rem;
  background:#c9c9c9
}

.liquid,.liquid img,.liquid canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.liquid {
  z-index:0
}

.liquid img {
  object-fit:cover
}

.liquid canvas {
  pointer-events:none
}

.vignette {
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(#ffffff59,transparent,#ffffff59);
  pointer-events:none
}

.watermark {
  position:absolute;
  inset-inline:0;
  bottom:7rem;
  z-index:1;
  text-align:center;
  pointer-events:none;
  user-select:none;
  font-weight:700;
  line-height:1;
  font-size:13rem;
  color:#fff0;
  transform:translateY(20px);
  transition:1s .3s cubic-bezier(.22,1,.36,1)
}

.ready .watermark {
  color:#fff6;
  transform:none
}

.hero-grid {
  position:relative;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:2rem;
  padding:7rem 1.25rem 5rem
}

.hero-left {
  display:flex;
  flex-direction:column;
  gap:1.75rem
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.875rem;
  font-weight:500;
  color:#111b3
}

.eyebrow:before {
  content:"";
  width:.375rem;
  height:.375rem;
  border-radius:50%;
  background:#1118
}

.hero h1 {
  max-width:18ch;
  font-size:2.25rem;
  font-weight:600;
  line-height:.98;
  letter-spacing:-.02em
}

.clip {
  display:block;
  overflow:hidden
}

.clip>span {
  display:block;
  transform:translateY(110%);
  opacity:0;
  transition:transform .9s cubic-bezier(.215,.61,.355,1),opacity .9s
}

.ready .hero-title .clip>span,.revealed .clip>span {
  transform:none;
  opacity:1
}

.hero-title .clip:nth-child(2)>span {
  transition-delay:.12s
}

.hero-title .clip:nth-child(3)>span {
  transition-delay:.24s
}

.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:.8s cubic-bezier(.16,1,.3,1)
}

.reveal.seen,.ready .hero-reveal {
  opacity:1;
  transform:none
}

.rating {
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.875rem;
  font-weight:500;
  color:#111b3
}

.stars {
  display:flex;
  color:var(--accent)
}

.stars svg {
  font-size:1rem
}

.cta-row {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem
}

.pill {
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  border-radius:9999px;
  font-size:.875rem;
  font-weight:500;
  transition:.35s cubic-bezier(.2,.8,.2,1)
}

.pill:hover {
  transform:scale(1.04)
}

.pill.arrow {
  padding:.375rem .375rem .375rem 1.5rem
}

.pill.noarrow {
  padding:.875rem 1.75rem
}

.pill.dark {
  background:var(--ink);
  color:#fff
}

.pill.light {
  background:var(--surface);
  color:#111
}

.pill.outline {
  border:1px solid var(--line)
}

.pill .arrow-badge {
  width:2.25rem;
  height:2.25rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#fff
}

.pill.dark .arrow-badge {
  background:#fff;
  color:var(--ink)
}

.pill:hover .arrow-badge svg {
  transform:translateX(3px)
}

.pill .arrow-badge svg {
  transition:.35s
}

.hero-right {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2rem
}

.hero-card {
  width:100%;
  max-width:24rem;
  border-radius:var(--sm);
  background:#ffffffb3;
  padding:.5rem;
  box-shadow:0 3px 15px #0001,0 0 0 1px #e6e5e2b3;
  backdrop-filter:blur(12px)
}

.card-row {
  display:flex;
  gap:.5rem;
  border-radius:.875rem
}

.brand-tile {
  aspect-ratio:1;
  width:6rem;
  display:grid;
  place-items:center;
  border-radius:.875rem;
  background:var(--ink);
  font-size:1.875rem;
  color:#cf8047
}

.carousel-panel {
  flex:1;
  border-radius:.875rem;
  background:#f1f0eeb3;
  padding:.75rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.carousel-caption {
  font-size:.65rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#1117
}

.carousel-title {
  max-width:8rem;
  font-size:.875rem;
  font-weight:500;
  line-height:1.35
}

.carousel-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.dots {
  display:flex;
  gap:.3rem
}

.dots i {
  display:block;
  width:.375rem;
  height:.25rem;
  border-radius:99px;
  background:#1113;
  transition:.3s
}

.dots i.active {
  width:1rem;
  background:#111b
}

.carousel-buttons {
  display:flex;
  gap:.35rem
}

.round {
  width:1.75rem;
  height:1.75rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1px var(--line)
}

.round.prev svg {
  transform:rotate(180deg)
}

.partners {
  width:100%;
  max-width:24rem
}

.partners-label {
  margin-bottom:.75rem;
  font-size:.75rem;
  font-weight:500;
  color:#1117
}

.partner-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.75rem 1rem
}

.partner-grid li {
  display:flex;
  align-items:center;
  gap:.375rem;
  font-size:.75rem;
  color:#111b
}

.partner-grid svg {
  font-size:.875rem;
  color:#1116
}

.status {
  position:relative;
  z-index:20;
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  border-top:1px solid #1112;
  padding:1.25rem;
  font-size:.75rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.025em;
  color:#111a
}

.status .mid {
  display:none
}

/* =========================================================
   7. SECCIÓN ABOUT
   ========================================================= */
.section-grid {
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:3rem;
  padding-block:5rem
}

.globe-block {
  position:relative;
  min-height:14rem
}

.big-globe {
  position:absolute;
  left:-1rem;
  top:50%;
  transform:translateY(-50%);
  font-size:12rem;
  color:#1111a
}

.globe-bottom {
  position:absolute;
  left:0;
  bottom:0;
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.875rem;
  color:#111b
}

.globe-bottom svg {
  font-size:1.5rem;
  color:#111
}

.globe-bottom span {
  max-width:14rem
}

.about-copy {
  display:flex;
  flex-direction:column;
  gap:2.5rem
}

.about-copy h2 {
  font-size:1.5rem;
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.01em
}

.muted {
  color:#8d8d8d
}

.word {
  display:inline-block;
  opacity:0;
  transform:translateY(24px);
  transition:.7s cubic-bezier(.165,.84,.44,1)
}

.revealed .word {
  opacity:1;
  transform:none
}

.about-foot {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  border-top:1px solid var(--line);
  padding-top:1.5rem
}

.small-label {
  font-size:.875rem;
  color:#1117
}

.socials {
  display:flex;
  gap:.5rem;
  margin-top:.5rem
}

.social {
  width:2.25rem;
  height:2.25rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--surface);
  color:#111b
}

.social:first-child {
  background:var(--accent);
  color:#fff
}

/* =========================================================
   8. BANDA "WE BUILD BETTER"
   ========================================================= */
.create-list {
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding-block:2.5rem
}

.create-tile {
  display:grid;
  place-items:center;
  height:6rem;
  border-radius:9999px;
  font-size:1.875rem;
  font-weight:500;
  transition:.35s
}

.create-tile:hover {
  transform:scale(1.03)
}

.create-tile.light {
  background:var(--surface)
}

.create-tile.accent {
  background:linear-gradient(to bottom right,#cf8047,#97501f);
  color:#fff
}

.create-tile.dark {
  background:var(--ink);
  color:#fff
}

.create-tile.ghost {
  background:#f1f0ee99;
  color:#1116
}

/* =========================================================
   9. PORTFOLIO / SELECTED WORK
   ========================================================= */
.work-mark img {
  width:4.5rem;
  height:4.5rem
}

.pill.outline .arrow-badge img,.pill.light .arrow-badge img,.badge img,.service-row .go img,.close-dark img,.social:first-child img {
  filter:invert(1)
}

.section {
  padding-block:5rem
}

.section-head {
  text-align:center
}

.section-head .eyebrow {
  border:1px solid var(--line);
  border-radius:9999px;
  padding:.375rem 1rem
}

.section-head h2,.services h2 {
  font-size:2.25rem;
  font-weight:600;
  letter-spacing:-.02em
}

.section-head h2 {
  margin:1.25rem auto 3rem
}

.work-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem
}

.work-card {
  position:relative;
  min-height:22rem;
  overflow:hidden;
  border-radius:2rem;
  background:var(--ink);
  padding:1.5rem;
  color:#fff;
  transition:.45s cubic-bezier(.2,.8,.2,1)
}

.work-card:hover {
  transform:translateY(-8px) scale(1.012)
}

.work-meta {
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.025em;
  color:#ffffff73
}

.badge {
  width:2.75rem;
  height:2.75rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ffffff1a;
  box-shadow:0 0 0 1px #ffffff26;
  transition:.35s
}

.work-card:hover .badge {
  transform:rotate(45deg) scale(1.08)
}

.work-mark {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  font-size:4.5rem;
  color:#ffffffe6
}

.work-mark sup {
  font-size:.75rem;
  color:#fff9
}

.work-bottom {
  position:absolute;
  inset-inline:1.5rem;
  bottom:1.5rem
}

.work-bottom h3 {
  font-size:1.5rem;
  font-weight:500
}

.work-bottom p {
  margin-top:.5rem;
  max-width:28rem;
  font-size:.875rem;
  color:#ffffff8c
}

.tags {
  margin-top:1.25rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem
}

.tag {
  border:1px solid #ffffff40;
  border-radius:99px;
  padding:.5rem 1rem;
  font-size:.875rem
}

/* =========================================================
   10. SERVICIOS
   ========================================================= */
.services h2 {
  margin:1.25rem 0 3rem;
  max-width:16ch
}

.service-row {
  display:flex;
  align-items:center;
  gap:1rem;
  border-top:1px solid var(--line);
  border-radius:1.25rem;
  padding:1.5rem;
  transition:.4s
}

.service-row:hover {
  background:var(--surface);
  padding-left:2rem;
  padding-right:1.25rem
}

.service-row .index {
  width:1.75rem;
  font-size:.875rem;
  font-weight:500;
  color:#1116
}

.service-row h3 {
  flex:1;
  font-size:1.5rem;
  font-weight:500
}

.service-row p {
  display:none;
  max-width:20rem;
  font-size:.875rem;
  color:#1118
}

.service-row .go {
  width:2.5rem;
  height:2.5rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#fff
}

.service-row:hover .go {
  transform:translateX(5px)
}

/* =========================================================
   11. ESTADÍSTICAS
   ========================================================= */
.stats-wrap {
  padding-bottom:5rem
}

.stats-panel {
  border-radius:2rem;
  background:var(--ink);
  padding:3rem 1.5rem;
  color:#fff
}

.eyebrow.light {
  color:#ffffffb3
}

.eyebrow.light:before {
  background:#fff9
}

.stats-panel h2 {
  margin-top:1rem;
  max-width:20ch;
  font-size:1.875rem;
  font-weight:500
}

.stats-grid {
  margin-top:3.5rem;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:3rem 2rem
}

.stat-num {
  font-size:3rem;
  font-weight:600;
  letter-spacing:-.02em
}

.stat-label {
  margin-top:.75rem;
  font-size:.875rem;
  color:#ffffff8c
}

/* =========================================================
   12. FOOTER
   ========================================================= */
.footer {
  position:relative;
  overflow:hidden;
  border-radius:2rem 2rem 0 0;
  background:var(--ink);
  color:#fff
}

.footer-inner {
  position:relative;
  z-index:10;
  padding-block:5rem 2.5rem
}

.footer-cta {
  display:flex;
  flex-direction:column;
  gap:2rem;
  border-bottom:1px solid #ffffff1a;
  padding-bottom:4rem
}

.footer-cta h2 {
  max-width:16ch;
  font-size:2.25rem;
  font-weight:600;
  letter-spacing:-.02em
}

.footer-cols {
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  padding-block:4rem
}

.footer-brand p {
  max-width:20rem;
  margin-top:1rem;
  font-size:.875rem;
  color:#ffffff8c
}

.col-title {
  margin-bottom:1rem;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.025em;
  color:#ffffff66
}

.footer-links {
  display:grid;
  gap:.75rem;
  font-size:.875rem
}

.footer-links a {
  color:#ffffffa6;
  transition:.3s
}

.footer-links a:hover {
  color:#fff;
  transform:translateX(4px)
}

.legal {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid #ffffff1a;
  padding-top:2rem;
  font-size:.75rem;
  color:#ffffff73
}

.legal-links {
  display:flex;
  gap:1.5rem
}

.footer-watermark {
  position:absolute;
  inset-inline:0;
  bottom:-1.5rem;
  text-align:center;
  font-size:13rem;
  font-weight:700;
  line-height:1;
  color:#ffffff0d;
  pointer-events:none
}

/* =========================================================
   13. MENÚ DE NAVEGACIÓN SUPERPUESTO
   ========================================================= */
.overlay {
  position:fixed;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:.45s;
  z-index:115
}

.overlay.open {
  opacity:1;
  visibility:visible
}

.nav-overlay {
  display:flex;
  flex-direction:column;
  background:var(--ink);
  color:#fff
}

.overlay-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:1.25rem
}

.close-dark {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid #ffffff26;
  border-radius:.875rem;
  padding:.5rem 1rem;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#ffffffb3
}

.overlay-nav {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.overlay-nav ul {
  display:grid;
  gap:.25rem
}

.overlay-link {
  display:flex;
  align-items:baseline;
  gap:1rem;
  width:100%;
  padding:.5rem 0;
  text-align:left;
  font-size:2.25rem;
  font-weight:600;
  letter-spacing:-.02em;
  color:#ffffffb3
}

.overlay-link small {
  font-size:1rem;
  font-weight:400;
  color:#ffffff4d
}

.overlay-link:hover {
  color:#fff
}

.overlay-bottom {
  display:flex;
  flex-direction:column;
  gap:.75rem;
  border-top:1px solid #ffffff1a;
  padding-block:1.5rem;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.025em;
  color:#ffffff73
}

.overlay-bottom button {
  color:#ffffffb3;
  text-align:left
}

/* =========================================================
   14. MODAL DE CONTACTO
   ========================================================= */
.modal {
  z-index:110;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:1rem;
  background:#1115;
  backdrop-filter:blur(16px)
}

.modal-panel {
  position:relative;
  width:100%;
  max-width:32rem;
  border-radius:2rem;
  background:#fff;
  padding:1.5rem;
  box-shadow:0 25px 60px #0003;
  transform:translateY(28px);
  transition:.45s
}

.modal.open .modal-panel {
  transform:none
}

.modal-close {
  position:absolute;
  right:1rem;
  top:1rem;
  width:2.25rem;
  height:2.25rem;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:var(--surface)
}

.modal-kicker {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.875rem;
  font-weight:500;
  color:#111a
}

.modal-kicker:before {
  content:"";
  width:.375rem;
  height:.375rem;
  border-radius:50%;
  background:var(--accent)
}

.modal h2 {
  margin-top:.375rem;
  font-size:1.5rem
}

.form {
  display:grid;
  gap:1rem;
  margin-top:1.5rem
}

.field {
  display:grid;
  gap:.4rem;
  font-size:.75rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.025em;
  color:#1118
}

.field input,.field textarea {
  width:100%;
  border:1px solid var(--line);
  background:#f1f0ee80;
  border-radius:.875rem;
  padding:.75rem 1rem;
  font-size:.875rem;
  text-transform:none;
  letter-spacing:0;
  outline:0
}

.field input:focus,.field textarea:focus {
  border-color:#1115;
  background:#fff
}

.field textarea {
  resize:none
}

.form-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:.5rem
}

.form-note {
  font-size:.75rem;
  color:#1117
}

.success {
  text-align:center;
  padding-block:2rem;
  display:none
}

.success-badge {
  width:3.5rem;
  height:3.5rem;
  margin:0 auto 1rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#cf8047;
  font-size:1.5rem
}

.success p {
  max-width:32ch;
  margin:1rem auto;
  color:#111a;
  font-size:.875rem
}

/* =========================================================
   15. RESPONSIVE — TABLET PEQUEÑA (640 PX)
   ========================================================= */
@media(min-width:640px) {
  .loader-brand {
    font-size:1.875rem
  }
  .header-inner {
    padding:1.5rem 2rem
  }
  .menu-word {
    display:inline
  }
  .hero-grid {
    padding-inline:2rem
  }
  .hero h1 {
    font-size:3rem
  }
  .status {
    padding-inline:2rem
  }
  .status .mid {
    display:block
  }
  .create-list {
    flex-direction:row;
    gap:1rem
  }
  .create-list li {
    flex:1
  }
  .create-tile {
    height:10rem;
    font-size:2.25rem
  }
  .work-card {
    min-height:26rem;
    padding:2rem
  }
  .work-bottom {
    inset-inline:2rem;
    bottom:2rem
  }
  .work-bottom h3 {
    font-size:1.875rem
  }
  .stats-panel {
    padding:4rem 2rem
  }
  .stat-num {
    font-size:3.75rem
  }
  .footer-cta h2 {
    font-size:3rem
  }
  .overlay-link {
    font-size:3.75rem
  }
  .overlay-bottom {
    flex-direction:row;
    justify-content:space-between
  }
  .modal {
    align-items:center
  }
  .modal-panel {
    padding:2rem
  }
  .legal {
    flex-direction:row
  }
}

/* =========================================================
   16. RESPONSIVE — TABLET (768 PX)
   ========================================================= */
@media(min-width:768px) {
  .clock {
    display:flex
  }
  .work-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .stats-panel {
    padding-inline:4rem
  }
  .stat-num {
    font-size:4.5rem
  }
  .footer-cols {
    grid-template-columns:repeat(2,1fr)
  }
  .footer-cta h2 {
    font-size:3.75rem
  }
}

/* =========================================================
   17. RESPONSIVE — ESCRITORIO (1024 PX)
   ========================================================= */
@media(min-width:1024px) {
  .desktop-nav {
    display:flex
  }
  .desktop-nav ul {
    display:flex;
    gap:2rem;
    font-size:.875rem;
    font-weight:500
  }
  .desktop-nav button {
    transition:.3s;
    opacity:.8
  }
  .desktop-nav button:hover {
    transform:translateY(-2px);
    opacity:1
  }
  .hero-grid {
    display:grid;
    min-height:100lvh;
    grid-template-columns:repeat(12,1fr);
    gap:2.5rem;
    padding:9rem 2rem 7rem
  }
  .hero-left {
    grid-column:span 7
  }
  .hero-right {
    grid-column:span 5;
    align-items:flex-end
  }
  .hero-card,.partners {
    max-width:19rem
  }
  .partners-label {
    text-align:right
  }
  .section-grid {
    grid-template-columns:1fr 1fr;
    padding-block:7rem
  }
  .globe-block {
    min-height:20rem
  }
  .big-globe {
    left:-1.5rem;
    font-size:20rem
  }
  .section {
    padding-block:7rem
  }
  .service-row {
    gap:1.5rem;
    padding-block:2rem
  }
  .service-row .index {
    width:2.5rem
  }
  .service-row h3 {
    font-size:2.25rem
  }
  .service-row p {
    display:block
  }
  .service-row .go {
    width:3rem;
    height:3rem
  }
  .stats-wrap {
    padding-bottom:7rem
  }
  .stats-grid {
    grid-template-columns:repeat(4,1fr)
  }
  .footer-inner {
    padding-top:6rem
  }
  .footer-cta {
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between
  }
  .footer-cols {
    grid-template-columns:repeat(4,1fr)
  }
}

/* =========================================================
   18. ACCESIBILIDAD — MOVIMIENTO REDUCIDO
   ========================================================= */
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important
  }
  .liquid canvas {
    display:none
  }
}

@media screen and (max-width: 640px) {
  .hero-grid {
    padding-top: 20rem !important;
  }
}

@media screen and (max-width: 640px) {
  .liquid img {
    object-position: 5%;
  }
}