/* =====================================================================
   Tondato Traslados — hoja de estilos
   1. Fuentes            7. Marquesina        13. Formulario
   2. Tokens             8. Métricas          14. Testimonios
   3. Base               9. Servicios         15. Clientes
   4. Utilidades        10. Proceso           16. FAQ
   5. Navegación        11. Cobertura         17. Contacto / footer
   6. Hero 3D           12. Diferenciales     18. Flotantes / motion
   ===================================================================== */

/* ============================== 1. Fuentes ========================== */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================== 2. Tokens =========================== */
:root {
  /* Marca — muestreada del logotipo y de las luces de las fotografías */
  --brand-300: #FF8FC8;
  --brand-400: #FF4FA8;
  --brand-500: #ED2B90;
  --brand-600: #D0197A;
  --brand-700: #9E0F5C;

  /* Superficies */
  --ink-900: #07060B;
  --ink-850: #0B0A11;
  --ink-800: #100E18;
  --ink-700: #171420;
  --ink-600: #211C2D;
  --ink-500: #2E2740;

  /* Texto */
  --fg:       #F5F3F9;
  --fg-muted: #ADA5BD;
  --fg-dim:   #7E7691;

  --line:       rgba(255, 255, 255, .09);
  --line-strong:rgba(255, 255, 255, .16);
  --glass:      rgba(255, 255, 255, .04);
  --glass-2:    rgba(255, 255, 255, .07);

  --glow-brand: 0 0 0 1px rgba(237, 43, 144, .35), 0 12px 40px -12px rgba(237, 43, 144, .55);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md:  0 18px 46px -18px rgba(0, 0, 0, .8);
  --shadow-lg:  0 40px 90px -30px rgba(0, 0, 0, .9);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --nav-h: 76px;
  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 44px);

  --step-display: clamp(2.25rem, 1.15rem + 4.1vw, 4.15rem);
  --step-h2:      clamp(1.95rem, 1.2rem + 2.6vw, 3.3rem);
  --step-h3:      clamp(1.15rem, 1.02rem + .55vw, 1.5rem);
  --step-body:    clamp(1rem, .97rem + .16vw, 1.075rem);
  --step-sm:      .875rem;
}

/* ============================== 3. Base ============================= */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  overflow-x: hidden;      /* respaldo para navegadores sin `clip` */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
}

body {
  min-height: 100svh;
  background: var(--ink-900);
  color: var(--fg);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--step-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

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

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

h1, h2, h3, h4 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brand-500); color: #fff; }

/* Barra de scroll discreta, en tono de marca */
@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--ink-500) var(--ink-900); scrollbar-width: thin; }
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 10px;
  translate: -50% -160%;
  z-index: 2000;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--brand-500);
  color: #fff;
  font-weight: 700;
  transition: translate .25s var(--ease-out);
}
.skip-link:focus-visible { translate: -50% 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============================ 4. Utilidades ========================= */
.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.section { position: relative; padding-block: clamp(52px, 6.4vw, 94px) clamp(72px, 9vw, 132px); }
.section--tight { padding-block: clamp(40px, 4.4vw, 64px) clamp(56px, 6vw, 88px); }

.section__head { max-width: 62ch; margin-bottom: clamp(30px, 3.6vw, 52px); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-400);
  box-shadow: 0 0 0 4px rgba(237, 43, 144, .18);
}

h2.section__title { font-size: var(--step-h2); }
.section__title .accent {
  background: linear-gradient(100deg, var(--brand-300), var(--brand-500) 55%, var(--brand-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section__lead {
  margin-top: 20px;
  color: var(--fg-muted);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
}

/* Resplandor ambiental reutilizable */
.aura {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
}
.aura--brand { background: radial-gradient(circle, rgba(237, 43, 144, .5), transparent 68%); }
.aura--cool  { background: radial-gradient(circle, rgba(88, 60, 190, .38), transparent 68%); }

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

/* ============================== Botones ============================= */
.btn {
  --btn-bg: var(--brand-500);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: 'Montserrat', sans-serif;
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              background-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.btn .icon { width: 19px; height: 19px; flex: none; }

.btn--primary {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  box-shadow: 0 10px 30px -10px rgba(237, 43, 144, .75);
}
/* Barrido de luz al pasar el cursor */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  translate: -120% 0;
  transition: translate .7s var(--ease-out);
}
.btn--primary:hover::after { translate: 120% 0; }
.btn--primary:hover { box-shadow: 0 16px 44px -12px rgba(237, 43, 144, .9); }

.btn--ghost {
  background: var(--glass-2);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); }

.btn--wa { background: #1FAF54; box-shadow: 0 10px 30px -12px rgba(31, 175, 84, .8); }
.btn--wa:hover { background: #189745; }

.btn--lg { padding: 18px 34px; font-size: 1.02rem; }
@media (max-width: 430px) { .btn--lg { padding: 16px 22px; font-size: .95rem; } }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

/* Enlace con subrayado que se dibuja */
.link-underline {
  position: relative;
  font-weight: 700;
  color: var(--brand-300);
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: currentColor;
  scale: 0 1;
  transform-origin: right;
  transition: scale .4s var(--ease-out);
}
.link-underline:hover::after { scale: 1 1; transform-origin: left; }

/* Tarjeta de cristal, base de casi todas las superficies */
.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--glass-2), rgba(255, 255, 255, .015));
  overflow: hidden;
}
/* Halo que sigue al cursor (posición inyectada por JS) */
.card--spot::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(237, 43, 144, .22), transparent 62%);
  opacity: 0;
  transition: opacity .4s var(--ease-soft);
  pointer-events: none;
}
.card--spot:hover::before, .card--spot:focus-within::before { opacity: 1; }

/* ============================ 5. Navegación ========================= */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  height: var(--nav-h);
  transition: height .4s var(--ease-out), background-color .4s var(--ease-soft),
              border-color .4s var(--ease-soft), backdrop-filter .4s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  height: 100%;
}

/* Al hacer scroll la barra se compacta y se vuelve opaca */
.nav.is-stuck {
  height: 64px;
  background: rgba(9, 8, 14, .78);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.nav__logo { flex: none; margin-right: auto; }
.nav__logo { min-width: 0; }
.nav__logo img {
  height: clamp(32px, 2.9vw, 42px);
  width: auto;
  transition: height .4s var(--ease-out);
}
.nav.is-stuck .nav__logo img { height: 32px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  flex: none;          /* sin esto los ítems se encogen y el texto parte en dos líneas */
}
.nav__links a {
  position: relative;
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-size: .94rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--fg-muted);
  transition: color .3s var(--ease-soft), background-color .3s var(--ease-soft);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-400);
  scale: 0 1;
  transition: scale .35s var(--ease-out);
}
.nav__links a:hover { color: var(--fg); background: var(--glass); }
.nav__links a[aria-current="true"] { color: var(--fg); }
.nav__links a[aria-current="true"]::after { scale: 1 1; }

.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--fg);
  transition: border-color .3s, background-color .3s;
}
.nav__tel:hover { background: var(--glass); border-color: rgba(255, 255, 255, .28); }
.nav__tel .icon { width: 17px; height: 17px; color: var(--brand-400); }

/* Indicador de progreso de lectura */
.nav__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: left;
  scale: var(--progress, 0) 1;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400), var(--brand-300));
}

/* Botón hamburguesa animado */
.nav__burger {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--glass);
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: var(--fg);
  transition: transform .4s var(--ease-back), opacity .25s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panel móvil a pantalla completa */
.nav__panel {
  position: fixed;
  inset: 0;
  z-index: 890;
  display: grid;
  align-content: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  background: linear-gradient(170deg, var(--ink-850), var(--ink-900));
  clip-path: circle(0% at calc(100% - 46px) 42px);
  transition: clip-path .6s var(--ease-out), visibility .6s;
  visibility: hidden;
}
.nav__panel.is-open { clip-path: circle(150% at calc(100% - 46px) 42px); visibility: visible; }
.nav__panel ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.nav__panel a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  opacity: 0;
  translate: 0 24px;
}
.nav__panel a .num {
  font-size: .8rem;
  font-weight: 700;
  color: var(--brand-400);
  font-family: 'Manrope', sans-serif;
}
.nav__panel.is-open a { animation: navIn .55s var(--ease-out) forwards; }
.nav__panel.is-open li:nth-child(1) a { animation-delay: .08s; }
.nav__panel.is-open li:nth-child(2) a { animation-delay: .14s; }
.nav__panel.is-open li:nth-child(3) a { animation-delay: .20s; }
.nav__panel.is-open li:nth-child(4) a { animation-delay: .26s; }
.nav__panel.is-open li:nth-child(5) a { animation-delay: .32s; }
.nav__panel.is-open li:nth-child(6) a { animation-delay: .38s; }
.nav__panel.is-open li:nth-child(7) a { animation-delay: .44s; }
@keyframes navIn { to { opacity: 1; translate: 0 0; } }

.nav__panel-foot { display: grid; gap: 12px; margin-top: 34px; }
/* En el panel los botones ocupan el ancho: el texto puede partirse si hace falta */
.nav__panel-foot .btn { white-space: normal; padding-inline: 20px; font-size: .92rem; }

body.is-locked { overflow: hidden; }
/* Con el menú abierto, los flotantes estorban */
body.is-locked .floaters { opacity: 0; pointer-events: none; }
.floaters { transition: opacity .3s var(--ease-soft); }

/* Con seis enlaces más teléfono y botón, por debajo de esto ya no entra cómodo */
@media (max-width: 1260px) {
  .nav__links, .nav__tel { display: none; }
  .nav__burger { display: block; }
}
@media (max-width: 560px) {
  .nav__actions .btn { display: none; }
}

/* ============================== 6. Hero 3D ========================== */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink-900);
  isolation: isolate;
}
@media (max-width: 780px) {
  .hero { min-height: 94svh; }
}

/* Escenario en perspectiva: la escena rota, cada plano vive a su propia Z */
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  container-type: size;
  perspective: 1400px;
  perspective-origin: 50% 44%;
}
.hero__scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--tilt-y, 0) * 1deg)) rotateY(calc(var(--tilt-x, 0) * 1deg))
             scale(var(--dolly, 1));
  will-change: transform;
}

.hero__plane {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* --d  desplazamiento horizontal por puntero · --dv el vertical, mucho menor
     para que las capas no parezcan levantarse · --ds arrastre por scroll
     --z  profundidad · --k corrige la escala que introduce translateZ, para
     que las capas sigan calzando como en la fotografía original            */
  transform:
    translate3d(calc(var(--mx, 0px) * var(--d)),
                calc(var(--my, 0px) * var(--dv) + var(--sy, 0px) * var(--ds)),
                var(--z))
    scale(var(--k));
}
.hero__plane--city   { --d: .22; --dv: .10; --ds: .10; --z: -200px; --k: 1.1429; }
.hero__plane--trails { --d: .55; --dv: .22; --ds: .30; --z:  -70px; --k: 1.05;   }
.hero__plane--pin    { --d: 1.1; --dv: .80; --ds: .70; --z:   60px; --k: .9571;  }
/* El auto acompaña al asfalto en vertical (mismo --ds que la ciudad): así su
   único movimiento propio es el de alejarse, que es el escalado de más abajo */
.hero__plane--car    { --d: 1.5; --dv: .16; --ds: .10; --z:  170px; --k: .8786;  }

/* Marco 16:9 recortado en «cover»: fija el sistema de coordenadas para que
   el auto y el pin se anclen al mismo sitio en cualquier pantalla. */
.hero__frame {
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, 177.7778vh);
  aspect-ratio: 16 / 9;
  translate: -50% -50%;
}
@supports (width: 1cqw) {
  .hero__frame { width: max(100cqw, 177.7778cqh); }
}

.hero__city { width: 100%; height: 100%; object-fit: cover; }
.hero__trails { width: 100%; height: 100%; opacity: .95; }

/* Anclajes medidos sobre el original de 1920 × 1080 */
.hero__pin { position: absolute; left: 63.698%; top: 18.796%; width: 11.198%; }
.hero__car { position: absolute; left: 10.573%; top: 48.241%; width: 27.813%; }

/* El auto se aleja por la calle en lugar de subir: al reducir su escala tomando
   como centro el punto de fuga de la avenida (que cae justo sobre su borde
   derecho), se desplaza hacia el fondo siguiendo la dirección del asfalto. */
.hero__car {
  transform-origin: 100% 40.9%;
  transform: scale(var(--drive, 1));
  will-change: transform;
}
.hero__pin img, .hero__car img { width: 100%; }

.hero__pin img {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 26px rgba(237, 43, 144, .55));
  animation: pinFloat 7s var(--ease-soft) infinite;
}
@keyframes pinFloat {
  0%, 100% { translate: 0 0; opacity: .93; }
  50%      { translate: 0 -2.4%; opacity: 1; }
}

/* Degradados de legibilidad, fuera de la escena 3D para no deformarse */
.hero__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(78% 52% at 50% 38%, rgba(7, 6, 11, .68), transparent 72%),
    linear-gradient(180deg, rgba(7, 6, 11, .72) 0%, transparent 22%),
    linear-gradient(0deg, var(--ink-900) 0%, rgba(7, 6, 11, .45) 13%, transparent 38%);
}
/* Grano fino de película: quita el aspecto «digital plano» del degradado */
.hero__grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(4) infinite;
}
@keyframes grain {
  0%   { translate: 0 0; }
  25%  { translate: -3% 2%; }
  50%  { translate: 2% -3%; }
  75%  { translate: -2% -2%; }
  100% { translate: 0 0; }
}

.hero__content > * { min-width: 0; }
.hero__content {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + 28px) clamp(96px, 14vh, 150px);
  text-align: center;
}
@media (max-width: 780px) { .hero__content { min-height: 94svh; } }

.hero__title {
  max-width: 17ch;
  margin-inline: auto;
  font-size: var(--step-display);
  font-weight: 900;
  letter-spacing: -.035em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .6);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: block;
  translate: 0 108%;
  rotate: x -55deg;
  transform-origin: top center;
  opacity: 0;
}
.hero.is-ready .hero__title .line > span {
  animation: lineUp 1.15s var(--ease-out) forwards;
}
.hero.is-ready .hero__title .line:nth-child(2) > span { animation-delay: .12s; }
@keyframes lineUp { to { translate: 0 0; rotate: x 0deg; opacity: 1; } }

.hero__title .accent {
  background: linear-gradient(100deg, var(--brand-300) 0%, var(--brand-400) 40%, var(--brand-600) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 50ch;
  margin: 24px auto 0;
  color: rgba(245, 243, 249, .84);
  font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .7);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

/* Aparición escalonada del bloque de texto */
.hero__lead, .hero__cta, .hero__trust, .hero .eyebrow {
  opacity: 0;
  translate: 0 26px;
}
.hero.is-ready .hero .eyebrow,
.hero.is-ready .hero__lead,
.hero.is-ready .hero__cta,
.hero.is-ready .hero__trust { animation: fadeUp .9s var(--ease-out) forwards; }
.hero.is-ready .eyebrow    { animation-delay: .05s; }
.hero.is-ready .hero__lead { animation-delay: .34s; }
.hero.is-ready .hero__cta  { animation-delay: .44s; }
.hero.is-ready .hero__trust{ animation-delay: .56s; }
@keyframes fadeUp { to { opacity: 1; translate: 0 0; } }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-top: 40px;
  list-style: none;
  padding: 0;
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(10, 8, 15, .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .86rem;
  font-weight: 600;
  color: rgba(245, 243, 249, .9);
}
.hero__trust .icon { width: 16px; height: 16px; color: var(--brand-400); }

/* Indicador de scroll */
.hero__cue {
  position: absolute;
  left: 50%; bottom: 26px;
  z-index: 4;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.hero__cue i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(180deg, transparent, var(--brand-400));
  transform-origin: top;
  animation: cue 2.2s var(--ease-soft) infinite;
}
@keyframes cue {
  0%        { scale: 1 0; opacity: 0; }
  35%       { scale: 1 1; opacity: 1; }
  70%, 100% { scale: 1 1; opacity: 0; transform-origin: bottom; }
}
@media (max-height: 640px), (max-width: 560px) { .hero__cue { display: none; } }

/* --- Hero en pantallas verticales --------------------------------------
   En vertical el encuadre 16:9 se vuelve tan ancho que el auto queda fuera
   de cuadro. Aquí el marco se ancla abajo y se corre a la derecha para que
   el auto entre en el tercio inferior y el texto respire arriba. El ancho
   y el corrimiento se calculan para dejar el auto sobre el 35 % del ancho
   de pantalla en cada rango.                                              */
@media (max-aspect-ratio: 5/4) {
  .hero { min-height: auto; }

  /* El marco 16:9 anclado abajo dejaba media pantalla de negro liso arriba.
     Se rellena con la misma fotografía, desenfocada y oscurecida, para que el
     degradado lea como atmósfera y no como un hueco. */
  .hero::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 0;
    /* Estirada a todo el alto, no recortada: así el fondo sigue la progresión
       vertical real de la foto (cielo arriba, edificios, asfalto abajo). Con el
       desenfoque la deformación es invisible. */
    background: url('../../img/hero-city-640.webp') center / 100% 100% no-repeat;
    filter: blur(30px) brightness(.78) saturate(1.1);
    opacity: .95;
    pointer-events: none;
  }
  .hero__stage { z-index: 1; }
  .hero__grade { z-index: 2; }
  .hero__grain { z-index: 3; }
  .hero__content { z-index: 4; }

  .hero__content {
    min-height: auto;
    align-content: start;
    padding-block: calc(var(--nav-h) + 26px) clamp(230px, 38vw, 400px);
  }
  .hero__frame {
    width: 135%;
    left: 68.4%;
    top: auto;
    bottom: 0;
    translate: -50% 0;
  }
  @supports (width: 1cqw) { .hero__frame { width: 135cqw; } }

  .hero__title { max-width: 15ch; }

  /* El marco anclado abajo deja un canto recto arriba: se funde con el fondo */
  .hero__city {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
            mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  }

  /* Degradado pensado para leer arriba y dejar ver el auto abajo */
  .hero__grade {
    background:
      linear-gradient(180deg, rgba(7, 6, 11, .74) 0%, rgba(7, 6, 11, .5) 40%, transparent 68%),
      linear-gradient(0deg, var(--ink-900) 0%, transparent 22%);
  }
}

@media (max-aspect-ratio: 5/4) and (max-width: 780px) {
  /* El bloque de texto era tan alto que empujaba la fotografía fuera de la
     primera pantalla. Acá se compacta para que la foto entre sin scroll. */
  .hero__content { padding-block: calc(var(--nav-h) + 22px) clamp(220px, 44vw, 320px); }
  .hero__frame { width: 190%; left: 83.5%; }
  @supports (width: 1cqw) { .hero__frame { width: 190cqw; } }

  .hero .eyebrow { display: none; }
  .hero__title { max-width: 14ch; }
  .hero__lead { margin-top: 16px; font-size: .98rem; max-width: 34ch; }
  .hero__cta { margin-top: 24px; gap: 10px; }
  .hero__cta .btn { width: 100%; padding-block: 15px; }

  /* Una sola fila que se desplaza, en lugar de dos que roban alto */
  .hero__trust {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .hero__trust::-webkit-scrollbar { display: none; }
  .hero__trust li { flex: none; padding: 7px 13px; font-size: .78rem; }
}

@media (max-aspect-ratio: 5/4) and (max-width: 430px) {
  .hero__frame { width: 235%; left: 94.9%; }
  @supports (width: 1cqw) { .hero__frame { width: 235cqw; } }
}

/* =========================== 7. Marquesina ========================== */
.marquee {
  position: relative;
  padding-block: 20px;
  border-block: 1px solid var(--line);
  background: var(--ink-850);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: 42px;
  padding-right: 42px;
}
.marquee__group span {
  display: inline-flex;
  align-items: center;
  gap: 42px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.92rem, .86rem + .3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--fg-muted);
  white-space: nowrap;
}
.marquee__group span::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
}
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }

/* =========================== 8. Métricas ============================ */
.stats { background: var(--ink-850); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--line);
  overflow: hidden;
}
.stat {
  position: relative;
  padding: clamp(30px, 4vw, 46px) clamp(14px, 1.8vw, 24px);
  background: var(--ink-850);
  text-align: center;
  transition: background-color .45s var(--ease-soft);
}
.stat:hover { background: var(--ink-800); }
.stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-family: 'Montserrat', sans-serif;
  /* Ajustado para que «1.000.000+» entre completo en su columna */
  font-size: clamp(1.9rem, 1.05rem + 2.5vw, 3.1rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, #fff 20%, var(--brand-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { margin-top: 14px; color: var(--fg-muted); font-size: .95rem; }
.stat__bar {
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
  transition: width 1.1s var(--ease-out);
}
.stat.is-in .stat__bar { width: 72%; }

/* =========================== 9. Servicios =========================== */
.services { background: var(--ink-900); }
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}

.service {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s var(--ease-out);
}
.service:hover { border-color: rgba(237, 43, 144, .35); box-shadow: var(--shadow-lg); }

.service__media {
  position: relative;
  /* 5:4 y el foco casi arriba: el pin de neón de las fotos arranca a 23 px del
     borde superior y con un recorte centrado quedaba cortado por la mitad. */
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--ink-800);
}
.service__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 14%;
  scale: 1.02;
  transform-origin: center 14%;
  transition: scale 1s var(--ease-out), filter .6s var(--ease-soft);
}
.service:hover .service__media img { scale: 1.09; filter: saturate(1.12); }
.service__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(7, 6, 11, .92));
}
.service__tag {
  position: absolute;
  left: 18px; top: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(7, 6, 11, .6);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.service__tag .icon { width: 14px; height: 14px; color: var(--brand-400); }

.service__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 30px);
}
.service__body h3 { font-size: var(--step-h3); }
.service__body p { color: var(--fg-muted); font-size: .98rem; }
.service__list {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: .92rem;
  color: var(--fg-muted);
}
.service__list li { display: flex; gap: 9px; align-items: flex-start; }
.service__list .icon { width: 16px; height: 16px; margin-top: 4px; flex: none; color: var(--brand-400); }
.service__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--brand-300);
}
.service__go .icon { width: 16px; height: 16px; transition: translate .35s var(--ease-out); }
.service:hover .service__go .icon { translate: 4px 0; }

/* ============================ 10. Proceso =========================== */
.process { background: var(--ink-850); }
.process__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(22px, 3vw, 34px);
  counter-reset: step;
}
.step { position: relative; padding-top: 28px; }
/* Línea que une los pasos, se dibuja al entrar en pantalla */
.step::before {
  content: "";
  position: absolute;
  left: 0; top: 27px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--brand-600), transparent);
  transform-origin: left;
  scale: 0 1;
  transition: scale 1s var(--ease-out);
}
.step.is-in::before { scale: 1 1; }
.step:last-child::before { background: linear-gradient(90deg, var(--brand-600), transparent 60%); }

.step__num {
  counter-increment: step;
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--ink-800);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand-300);
}
.step__num::after { content: "0" counter(step); }
.step__body { padding-top: 44px; }
.step h3 { margin-bottom: 10px; font-size: 1.22rem; }
.step p { color: var(--fg-muted); font-size: .97rem; }

/* =========================== 11. Cobertura ========================== */
.coverage { background: var(--ink-900); }
.coverage__layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 900px) { .coverage__layout { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.chips li {
  padding: 11px 19px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-size: .93rem;
  font-weight: 600;
  color: var(--fg-muted);
  transition: transform .35s var(--ease-back), border-color .3s, color .3s, background-color .3s;
}
.chips li:hover {
  transform: translateY(-3px);
  border-color: rgba(237, 43, 144, .45);
  background: rgba(237, 43, 144, .1);
  color: var(--fg);
}
.chips li.is-strong {
  border-color: rgba(237, 43, 144, .4);
  background: rgba(237, 43, 144, .12);
  color: var(--fg);
}

/* ========================= 12. Diferenciales ======================== */
.why { background: var(--ink-850); }
.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
/* Seis diferenciales: en pantallas anchas quedan 3 + 3, no 4 + 2 sueltos */
@media (min-width: 1000px) { .why__grid { grid-template-columns: repeat(3, 1fr); } }
.feature { padding: clamp(24px, 2.8vw, 32px); }
.feature__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 18px;
  border: 1px solid rgba(237, 43, 144, .28);
  border-radius: 15px;
  background: linear-gradient(150deg, rgba(237, 43, 144, .2), rgba(237, 43, 144, .04));
  color: var(--brand-300);
  transition: transform .5s var(--ease-back), background-color .4s;
}
.feature__icon .icon { width: 24px; height: 24px; }
.feature:hover .feature__icon { transform: translateY(-3px) rotate(-6deg); }
.feature h3 { margin-bottom: 9px; font-size: 1.13rem; }
.feature p { color: var(--fg-muted); font-size: .95rem; }

/* ========================== 13. Formulario ========================== */
.quote { position: relative; background: var(--ink-900); overflow: hidden; }
.quote__layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(34px, 4.6vw, 68px);
  align-items: start;
}
@media (max-width: 940px) { .quote__layout { grid-template-columns: 1fr; } }

.quote__aside { position: relative; z-index: 1; }
.quote__perks { display: grid; gap: 16px; margin-top: 30px; padding: 0; list-style: none; }
.quote__perks li { display: flex; gap: 13px; align-items: flex-start; color: var(--fg-muted); font-size: .97rem; }
.quote__perks .icon { width: 20px; height: 20px; margin-top: 3px; flex: none; color: var(--brand-400); }

.quote__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.quote__alt p { font-size: .92rem; color: var(--fg-dim); }

.form {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 3.2vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  box-shadow: var(--shadow-md);
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .form__grid { grid-template-columns: 1fr; } }
.field--full { grid-column: 1 / -1; }

.field { position: relative; display: grid; gap: 7px; }
.field label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg-muted);
}
.field label .req { color: var(--brand-400); }

.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(7, 6, 11, .55);
  color: var(--fg);
  font-size: .97rem;
  transition: border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft),
              background-color .3s var(--ease-soft);
}
.field textarea { resize: vertical; min-height: 108px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADA5BD' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
  cursor: pointer;
}
.field select option { background: var(--ink-700); color: var(--fg); }

.field input::placeholder, .field textarea::placeholder { color: var(--fg-dim); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(255, 255, 255, .26); }
.field :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--brand-500);
  background: rgba(7, 6, 11, .8);
  box-shadow: 0 0 0 4px rgba(237, 43, 144, .16);
}

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: #FF7A9C;
}
.field__error .icon { width: 14px; height: 14px; }
.field.has-error :is(input, textarea, select) { border-color: #E8436B; }
.field.has-error :is(input, textarea, select):focus { box-shadow: 0 0 0 4px rgba(232, 67, 107, .16); }
.field.has-error .field__error { display: flex; }

/* Trampa antispam: invisible para personas, tentadora para bots */
.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__foot { display: grid; gap: 14px; margin-top: 22px; }
.form__submit { width: 100%; }
.form__submit[aria-busy="true"] { pointer-events: none; opacity: .82; }
.form__submit .spinner {
  display: none;
  width: 17px; height: 17px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.form__submit[aria-busy="true"] .spinner { display: block; }
.form__submit[aria-busy="true"] .icon { display: none; }
@keyframes spin { to { rotate: 360deg; } }

.form__note { font-size: .82rem; color: var(--fg-dim); text-align: center; }

.form__status {
  display: none;
  gap: 11px;
  align-items: flex-start;
  padding: 15px 17px;
  border-radius: var(--r-md);
  font-size: .93rem;
  font-weight: 600;
}
.form__status .icon { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.form__status.is-ok {
  display: flex;
  border: 1px solid rgba(31, 175, 84, .4);
  background: rgba(31, 175, 84, .12);
  color: #7DE3A4;
}
.form__status.is-error {
  display: flex;
  border: 1px solid rgba(232, 67, 107, .4);
  background: rgba(232, 67, 107, .12);
  color: #FF9BB4;
}

/* ========================= 14. Testimonios ========================== */
.testimonials { background: var(--ink-850); }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.quote-card { padding: clamp(24px, 2.8vw, 32px); }
.quote-card__mark {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.4rem;
  font-weight: 900;
  line-height: .7;
  color: rgba(237, 43, 144, .28);
}
.quote-card blockquote {
  margin: 14px 0 20px;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--fg);
}
.quote-card__foot { display: flex; align-items: center; gap: 13px; }
.quote-card__avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: .96rem;
  color: #fff;
}
.quote-card__who cite { display: block; font-style: normal; font-weight: 700; font-size: .95rem; }
.quote-card__who span { font-size: .8rem; color: var(--fg-dim); }
.stars { display: flex; gap: 3px; margin-bottom: 4px; color: #FFC53D; }
.stars .icon { width: 14px; height: 14px; }

.rating-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 34px;
  padding: 18px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  width: fit-content;
  margin-inline: auto;
  font-size: .93rem;
  color: var(--fg-muted);
}
.rating-strip strong { color: var(--fg); font-size: 1.15rem; }

/* =========================== 15. Clientes =========================== */
.clients { background: var(--ink-900); }
.clients__title {
  font-family: 'Manrope', sans-serif;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.clients__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.clients__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(42px, 6vw, 84px);
  animation: slide 38s linear infinite;
}
.clients__viewport:hover .clients__track { animation-play-state: paused; }
.clients__track picture { display: block; }
/* Caja de tamaño fijo: los logotipos vienen en blanco y con anchos muy distintos,
   así todos ocupan lo mismo y el conjunto se lee parejo. */
.clients__track img {
  height: clamp(44px, 5.2vw, 62px);
  width: clamp(120px, 15vw, 178px);
  object-fit: contain;
  opacity: .5;
  transition: opacity .4s var(--ease-soft), scale .4s var(--ease-out);
}
.clients__track img:hover { opacity: 1; scale: 1.07; }

/* ============================== 16. FAQ ============================= */
.faq { background: var(--ink-850); }
.faq__list {
  max-width: 880px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  overflow: hidden;
}
.faq__item + .faq__item { border-top: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px clamp(20px, 2.4vw, 30px);
  border: 0;
  background: none;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  font-weight: 700;
  letter-spacing: -.012em;
  cursor: pointer;
  transition: background-color .3s var(--ease-soft), color .3s;
}
.faq__q:hover { background: var(--glass-2); }
.faq__q span { flex: 1; }
.faq__q i {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: background-color .35s, border-color .35s, rotate .45s var(--ease-out);
}
.faq__q i::before, .faq__q i::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  background: var(--fg);
  transition: opacity .3s, background-color .3s;
}
.faq__q i::before { width: 10px; height: 1.6px; }
.faq__q i::after  { width: 1.6px; height: 10px; }
.faq__q[aria-expanded="true"] i { background: var(--brand-500); border-color: var(--brand-500); rotate: 180deg; }
.faq__q[aria-expanded="true"] i::after { opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 clamp(20px, 2.4vw, 30px) 24px;
  color: var(--fg-muted);
  font-size: .97rem;
}

/* ===================== 17. Contacto · CTA · footer =================== */
.contact { background: var(--ink-900); }
.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 3.4vw, 48px);
  align-items: stretch;
}
@media (max-width: 900px) { .contact__layout { grid-template-columns: 1fr; } }

.contact__cards { display: grid; gap: 14px; align-content: start; }
.contact-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  transition: transform .4s var(--ease-out), border-color .35s;
}
.contact-card:hover { transform: translateX(4px); border-color: rgba(237, 43, 144, .35); }
.contact-card__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  background: rgba(237, 43, 144, .14);
  color: var(--brand-300);
}
.contact-card__icon .icon { width: 21px; height: 21px; }
.contact-card h3 {
  font-family: 'Manrope', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.contact-card p, .contact-card a { margin-top: 5px; font-size: 1rem; font-weight: 600; }
.contact-card a:hover { color: var(--brand-300); }
.contact-card small { display: block; margin-top: 3px; font-size: .82rem; color: var(--fg-dim); font-weight: 500; }

.map {
  position: relative;
  min-height: 340px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.map iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  /* Adapta el mapa de Google al modo oscuro del sitio */
  filter: invert(.92) hue-rotate(185deg) saturate(.55) contrast(.92) brightness(.95);
  transition: filter .5s var(--ease-soft);
}
.map:hover iframe { filter: invert(.9) hue-rotate(185deg) saturate(.8) contrast(.95); }
.map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(7, 6, 11, .65);
  border-radius: inherit;
}

/* Banda final de conversión */
.cta-band { position: relative; overflow: hidden; background: var(--ink-850); }
.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
  padding: clamp(42px, 6vw, 80px) clamp(26px, 4vw, 64px);
  border: 1px solid rgba(237, 43, 144, .26);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(237, 43, 144, .24), transparent 62%),
    linear-gradient(150deg, var(--ink-700), var(--ink-850));
  text-align: center;
  justify-items: center;
  overflow: hidden;
}
.cta-band__inner h2 { font-size: var(--step-h2); max-width: 18ch; }
.cta-band__inner p { max-width: 52ch; color: var(--fg-muted); }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.footer {
  position: relative;
  padding-block: clamp(52px, 6vw, 76px) 0;
  border-top: 1px solid var(--line);
  background: var(--ink-900);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand img { height: 42px; width: auto; margin-bottom: 18px; }
.footer__brand p { max-width: 38ch; color: var(--fg-muted); font-size: .94rem; }
.footer h3 {
  margin-bottom: 16px;
  font-family: 'Manrope', sans-serif;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer ul a, .footer address a {
  font-size: .94rem;
  color: var(--fg-muted);
  transition: color .3s var(--ease-soft), translate .3s var(--ease-out);
}
.footer ul a:hover { color: var(--brand-300); translate: 3px 0; }
.footer address { font-style: normal; display: grid; gap: 10px; font-size: .94rem; color: var(--fg-muted); }

.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--fg-muted);
  transition: transform .4s var(--ease-back), color .3s, border-color .3s, background-color .3s;
}
.socials a:hover {
  transform: translateY(-3px);
  color: #fff;
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.socials .icon { width: 18px; height: 18px; }

.footer__bottom a { color: var(--fg-muted); transition: color .3s var(--ease-soft); }
.footer__bottom a:hover { color: var(--brand-300); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: clamp(40px, 5vw, 62px);
  padding-block: 24px;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--fg-dim);
}

/* ==================== 18. Flotantes · movimiento ==================== */
.floaters {
  position: fixed;
  right: clamp(16px, 2.4vw, 26px);
  bottom: clamp(16px, 2.4vw, 26px);
  z-index: 950;
  display: grid;
  gap: 12px;
  justify-items: end;
}
.float-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .4s var(--ease-back), box-shadow .4s;
}
.float-btn:hover { transform: scale(1.08); }
.float-btn .icon { width: 27px; height: 27px; }

.float-btn--wa { background: #25D366; color: #05240F; }
.float-btn--wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: ripple 2.6s var(--ease-out) infinite;
}
@keyframes ripple {
  0%        { scale: 1; opacity: .7; }
  70%, 100% { scale: 1.65; opacity: 0; }
}

.float-btn--top {
  width: 46px; height: 46px;
  background: var(--glass-2);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  translate: 0 14px;
  pointer-events: none;
  transition: opacity .4s var(--ease-soft), translate .4s var(--ease-out), transform .4s var(--ease-back);
}
.float-btn--top.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.float-btn--top .icon { width: 20px; height: 20px; }

/* Revelado al entrar en pantalla */
[data-reveal] {
  opacity: 0;
  transition: opacity .9s var(--ease-out), translate .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--delay, 0ms);
  filter: blur(6px);
}
[data-reveal="up"]    { translate: 0 34px; }
[data-reveal="left"]  { translate: -40px 0; }
[data-reveal="right"] { translate: 40px 0; }
[data-reveal="zoom"]  { translate: 0 18px; scale: .96; transition-property: opacity, translate, scale, filter; }
[data-reveal].is-in { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }

/* Accesibilidad: sin movimiento cuando el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; translate: none; scale: 1; filter: none; }
  .hero__grain, .hero__cue { display: none; }
  .hero__scene { transform: none !important; }
  .hero__plane { transform: translateZ(var(--z)) scale(var(--k)) !important; }
  .hero.is-ready .hero__title .line > span { animation: none; translate: 0; rotate: none; opacity: 1; }
  .hero .eyebrow, .hero__lead, .hero__cta, .hero__trust { opacity: 1; translate: none; }
  .marquee__track, .clients__track { animation: none; }
}

/* Sin JavaScript: nada queda invisible */
.no-js [data-reveal] { opacity: 1; translate: none; scale: 1; filter: none; }
.no-js .hero__title .line > span { translate: 0; rotate: none; opacity: 1; }
.no-js :is(.hero .eyebrow, .hero__lead, .hero__cta, .hero__trust) { opacity: 1; translate: none; }

/* ===================== 19. Páginas internas ========================= */
.page-hero {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(56px, 8vw, 96px)) clamp(40px, 5vw, 64px);
  overflow: hidden;
  background: radial-gradient(90% 130% at 18% 0%, rgba(237, 43, 144, .17), transparent 62%), var(--ink-900);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -.035em;
}
.page-hero p { max-width: 62ch; margin-top: 18px; color: var(--fg-muted); font-size: 1.08rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  padding: 0;
  list-style: none;
  font-size: .84rem;
  color: var(--fg-dim);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a:hover { color: var(--brand-300); }

.prose { max-width: 74ch; }
.prose > * + * { margin-top: 20px; }
.prose h2 {
  margin-top: clamp(40px, 5vw, 60px);
  font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem);
}
.prose h3 { margin-top: 32px; font-size: 1.14rem; }
.prose p, .prose li { color: var(--fg-muted); }
.prose strong { color: var(--fg); font-weight: 700; }
.prose a { color: var(--brand-300); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-400); }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 10px; }
.prose li::marker { color: var(--brand-500); }
.prose hr { margin-block: clamp(36px, 4vw, 52px); }

.callout {
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--r-md);
  background: var(--glass);
}
.callout p { color: var(--fg-muted); font-size: .95rem; }

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: clamp(34px, 5vw, 70px);
  align-items: start;
}
@media (max-width: 900px) { .page-layout { grid-template-columns: 1fr; } }
.page-aside { display: grid; gap: 14px; position: sticky; top: calc(var(--nav-h) + 20px); }
@media (max-width: 900px) { .page-aside { position: static; } }