/* ============================================================
   VOIX CALL CENTERS — Sistema de diseño «Papel y navy»
   Un fotograma oscuro arriba, documento en papel cálido debajo.
   Profundidad por filetes de 1px, nunca por sombras.
   El cian es señal, no relleno: sólo sobre superficies oscuras.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Planchas — las zonas de fondo oscuro del sitio.
     EN MODO CLARO son azul marino CLARO, de la familia azur: la banda de
     sectores, el cierre, el pie, las cabeceras interiores, la cita, la cinta,
     el menú móvil y la fila de servicio invertida salen todas de aquí.
     El modo oscuro las redefine más abajo, hundiéndolas a casi negro. */
  --ink-900:var(--azure-700);   /* #123A6B — planchas y pie */
  --ink-800:var(--azure-500);   /* #1C4E90 — planchas de segundo nivel */
  --ink-700:#0F3260;            /* un punto más hondo, para el botón sobre papel */
  --ink-600:#0B2F6B;
  --ink-500:#17458F;

  /* Zonas que hoy no cambiaban al alternar de modo. Ahora sí. */
  /* AZUR — la tonalidad nueva. Es un color de marca, no una superficie de
     tema: vale igual en claro y en oscuro, como el cian. Vive aquí para
     poder usarla en cualquier sitio, no sólo en la portada. */
  --azure-300:#3074BE;   /* el más claro — luces y degradados */
  --azure-500:#1C4E90;   /* el medio — fondos de bloque */
  --azure-700:#123A6B;   /* el profundo — bases y velos */
  --azure-rgb:18,58,107; /* el 700 en componentes, para usarlo con alfa */
  --azure-soft:rgba(48,116,190,.12);

  /* Costura: alto de la banda difuminada y fuerza del desenfoque */
  --seam-h:84px;
  --seam-blur:18px;

  --hero-grad:radial-gradient(120% 105% at 72% 48%, var(--azure-300) 0%, var(--azure-500) 45%, var(--azure-700) 100%);
  --scrim-rgb:var(--azure-rgb);
  --glow-tint:rgba(10,63,176,.10);
  /* El canto cian marca «la figura»: en claro, las planchas oscuras. */
  --edge-plate:inset 0 1px 0 rgba(11,192,255,.30);
  --edge-panel:inset 0 0 0 rgba(0,0,0,0);

  /* Blanco hueso — el lienzo del cuerpo. */
  --paper:#FCFBF9;
  --paper-50:#F6F4F0;
  --paper-100:#EEEBE5;
  --paper-200:#E0DCD3;
  --surface:#FFFFFF;      /* superficie elevada, sólo para el formulario */
  --bone:#F4F1EA;         /* blanco marfil — texto sobre azul */

  /* Azul marino de marca, en tres pesos */
  --navy-deep:#02102A;
  --navy-mid:#17335F;
  --navy-soft:#2A4C82;

  /* Texto — tinta navy sobre el hueso. El secundario es gris neutro, no
     gris azulado: eso era lo que teñía de azul la página. */
  --text:#0A1B33;
  --text-2:#5A5E66;
  --text-3:#8E8B84;
  --text-inv:#FFFFFF;
  --text-inv-2:rgba(255,255,255,.84);
  --text-inv-3:rgba(255,255,255,.62);

  /* Cian del logotipo — SÓLO sobre superficies oscuras (sobre papel no se lee) */
  --accent:#0BC0FF;
  --accent-soft:rgba(11,192,255,.12);
  --accent-glow:rgba(11,192,255,.30);

  /* Azul del logotipo — el acento legible sobre papel */
  --deep:#0A3FB0;
  --deep-600:#0C51D0;
  --deep-soft:rgba(10,63,176,.10);
  --accent-600:var(--deep-600);   /* iconos de comprobación sobre papel */
  --accent-700:var(--deep);       /* cejas, enlaces y flechas sobre papel */

  /* Líneas — grises cálidos, a juego con el papel */
  --line:rgba(20,18,14,.11);
  --line-strong:rgba(20,18,14,.20);
  --line-inv:rgba(255,255,255,.14);

  /* Tipografía — serif sólo en titulares grandes; todo lo demás en Inter */
  --font-display:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:var(--font-ui);

  /* Métrica */
  --maxw:1080px;
  --gutter:clamp(20px, 5vw, 48px);
  --r-sm:6px;
  --r:8px;
  --r-lg:10px;
  --r-xl:14px;

  /* Sombras — reservadas a lo que flota. Nunca en tarjetas ni en filas. */
  --shadow-sm:0 1px 2px rgba(4,20,46,.05);
  --shadow:0 4px 12px rgba(4,20,46,.06);
  --shadow-lg:0 12px 32px rgba(4,20,46,.10);

  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --invert-bg:var(--ink-900);
  --invert-fg:#FFFFFF;
  --hover-wash:rgba(20,18,14,.02);
  --pain-mark:#B4503F;
  --header-stuck:rgba(252,251,249,.90);
  --sheet-shadow:0 -22px 60px rgba(2,12,31,.34);

  color-scheme:light;
}

/* ---------- 1b. Modo oscuro ----------
   El papel se vuelve navy templado, nunca negro puro: el negro puro rompe
   la calidez del sistema. Las bandas oscuras bajan un escalón más para que
   el ritmo claro/oscuro de la portada no se aplane.
   Se activa con [data-theme="dark"] en <html>, que escribe el JS a partir
   de la preferencia guardada o del sistema. */
:root[data-theme="dark"]{
  --paper:#141D31;
  --paper-50:#1A2540;
  --paper-100:#20304F;
  --paper-200:#2B3D60;
  --surface:#1A2540;

  --text:#F2F1EC;
  --text-2:#C6CEDC;
  --text-3:#95A0B2;

  /* Sobre fondo oscuro el acento legible vuelve a ser el cian del logotipo */
  --accent-700:#5AD4FF;
  --accent-600:#5AD4FF;
  --deep-soft:rgba(11,192,255,.14);

  --line:rgba(255,255,255,.17);
  --line-strong:rgba(255,255,255,.30);

  /* Las planchas se hunden hasta casi negro: así se distinguen del panel
     iluminado, y así el modo oscuro no se confunde con el claro. */
  --ink-900:#03060E;
  --ink-800:#060C18;

  /* Las mismas zonas, con otra receta */
  --hero-grad:radial-gradient(120% 105% at 72% 48%, #06203F 0%, #030E22 45%, #03060E 100%);
  --scrim-rgb:3,6,14;
  --glow-tint:rgba(11,192,255,.15);
  /* Aquí la figura es el panel de papel, no la plancha: el canto se muda. */
  --edge-plate:inset 0 0 0 rgba(0,0,0,0);
  --edge-panel:inset 0 1px 0 rgba(11,192,255,.20);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:0 12px 32px rgba(0,0,0,.55);

  /* En oscuro la fila no se invierte a negro: sube a un navy elevado. */
  --invert-bg:#1B2942;
  --invert-fg:#FFFFFF;
  --hover-wash:rgba(255,255,255,.035);
  --pain-mark:#FF9A8A;
  --header-stuck:rgba(16,24,40,.92);
  --sheet-shadow:0 -22px 60px rgba(0,0,0,.55);

  color-scheme:dark;
}

/* Cambio de tema animado. La clase la pone el JS al pulsar el interruptor,
   nunca en la carga: si estuviera siempre activa, el primer pintado
   arrastraría una transición de medio segundo en toda la página. */
html.theme-anim,
html.theme-anim body,
html.theme-anim .site-header,
html.theme-anim section,
html.theme-anim .card,html.theme-anim .sector,html.theme-anim .doorway,
html.theme-anim .svc,html.theme-anim .step,html.theme-anim .pain,
html.theme-anim .form-card,html.theme-anim .field input,
html.theme-anim .field select,html.theme-anim .field textarea,
html.theme-anim .btn,html.theme-anim .theme-btn,html.theme-anim .lang,
html.theme-anim .stat,html.theme-anim .contact-item,html.theme-anim .faq details{
  transition:background-color .38s var(--ease), color .38s var(--ease),
             border-color .38s var(--ease), box-shadow .38s var(--ease) !important;
}

/* El icono del interruptor gira al cambiar, no salta. */
.theme-btn svg{transition:transform .4s var(--ease-out), opacity .25s var(--ease)}
.theme-btn .ic-sun{transform:rotate(-70deg) scale(.6); opacity:0}
:root[data-theme="dark"] .theme-btn .ic-sun{transform:none; opacity:1}
:root[data-theme="dark"] .theme-btn .ic-moon{transform:rotate(70deg) scale(.6); opacity:0}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}

  /* Se quita lo que puede marear: desplazamientos grandes, parallax,
     entradas con recorrido y barridos. NO se mata todo con un comodín —
     la preferencia es contra el vértigo, no contra que la página respire. */
  .js [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important}
  .hero-inner{opacity:1 !important; transform:none !important}
  .js .hero .eyebrow,.js .hero h1 > span,.js .hero .lede,
  .js .hero .hero-cta,.js .hero-strip > div{animation:none !important; opacity:1 !important; transform:none !important}
  .hero .btn-primary{animation:none !important}
  .js .sweep{-webkit-mask-image:none !important; mask-image:none !important}
  .svc::after{transition:none !important; transform:scaleX(1) !important}
  .proc-item{opacity:1 !important}
  .bg-fixed{--par:0px !important}
  .btn:hover svg,.link-arrow:hover svg{transform:none !important}

  /* Esto se queda, pero calmado: son movimientos pequeños y continuos que
     no disparan el vértigo, y sin ellos la página parece rota. */
  .ribbon-track{animation-duration:180s !important}
  .wave-pulse{animation-duration:14s !important}
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip y no hidden: hidden crea un contenedor de scroll y rompe el
     position:sticky de la portada. */
  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{margin:0}
/* La serif sólo asoma en los titulares grandes. Por debajo lee a decorativa. */
h1,h2{font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.018em}
h3,h4{font-family:var(--font-ui); font-weight:600; line-height:1.25; letter-spacing:-.015em}
/* Disciplina de cifras: todo número tabular, nunca proporcional. */
.num{font-family:var(--font-ui); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--deep); outline-offset:3px; border-radius:4px}
.on-dark :focus-visible,.hero :focus-visible,.ribbon :focus-visible,.site-footer :focus-visible,.mobile-nav :focus-visible{outline-color:var(--accent)}

/* ---------- 3. Utilidades ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-narrow{max-width:820px}
.section{padding-block:clamp(60px, 7.5vw, 100px)}
.section-tight{padding-block:clamp(48px, 5.5vw, 72px)}
.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}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-ui);
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-700); margin-bottom:22px;
}
.eyebrow::before{content:""; width:24px; height:1px; background:currentColor}
.on-dark .eyebrow{color:var(--accent)}

/* Escala con más contraste: la serif entra a lo grande, el resto se queda pequeño. */
.h-xl{font-size:clamp(2.55rem, 5.4vw, 4.05rem)}
.h-lg{font-size:clamp(2rem, 3.9vw, 3rem)}
.h-md{font-family:var(--font-ui); font-weight:600; font-size:clamp(1.3rem, 2vw, 1.6rem); letter-spacing:-.015em}
.h-sm{font-family:var(--font-ui); font-weight:600; font-size:1.1rem; letter-spacing:-.012em}

.lede{font-size:clamp(1.04rem, 1.4vw, 1.18rem); line-height:1.64; color:var(--text-2); max-width:62ch}
.on-dark .lede{color:var(--text-inv-2)}
.muted{color:var(--text-2)}
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3{color:var(--text-inv)}
.on-dark,.bg-fixed,.cta-band,.quote,.bg-dark,.bg-dark-2{--clip-bg:rgba(255,255,255,.07)}
.on-dark .muted{color:var(--text-inv-2)}

.section-head{max-width:720px; margin-bottom:clamp(34px,4vw,52px)}
.section-head .lede{margin-top:18px}
.center{text-align:center; margin-inline:auto}

/* ---------- 3b. Azur — utilidades ----------
   Para usar la tonalidad nueva en cualquier bloque sin tocar el CSS.
   `.bg-azure` va siempre acompañada de `.on-dark`, que es quien pone el
   texto en claro:  <section class="section bg-azure on-dark">          */
.bg-azure{background:var(--azure-500); color:var(--bone); position:relative; overflow:hidden}
.bg-azure-deep{background:var(--azure-700); color:var(--bone); position:relative; overflow:hidden}
.bg-azure-grad{
  background:linear-gradient(140deg, var(--azure-300) 0%, var(--azure-500) 52%, var(--azure-700) 100%);
  color:var(--bone); position:relative; overflow:hidden;
}
.bg-azure .wrap,.bg-azure-deep .wrap,.bg-azure-grad .wrap{position:relative; z-index:2}
/* Sobre azur el texto claro es marfil y el acento, el cian claro. */
.bg-azure,.bg-azure-deep,.bg-azure-grad{--text-inv:var(--bone); --ribbon-bg:var(--azure-700)}
.bg-azure .eyebrow,.bg-azure-deep .eyebrow,.bg-azure-grad .eyebrow{color:#8FE6FF}
.bg-azure .lede,.bg-azure-deep .lede,.bg-azure-grad .lede{color:rgba(244,241,234,.86)}

/* Botón en azur, para cuando el cian sea demasiado grito. */
.btn-azure{background:var(--azure-500); color:var(--bone)}
.btn-azure:hover{background:var(--azure-300)}

/* ---------- 3c. Costura difuminada entre secciones ----------
   El corte entre dos fondos pasa de ser una línea recta a una franja que
   se emborrona: los dos colores se mezclan antes de cambiar del todo.

   Va en su propio elemento y no en un ::before de la sección porque
   .bg-dark lleva overflow:hidden (recortaría la banda) y .glow-tl ya
   ocupa ese pseudoelemento.

       <div class="seam" aria-hidden="true"></div>

   Se pone ENTRE dos secciones. No ocupa alto (height:0), así que no
   mueve nada de lo que ya está maquetado.                              */
.seam{
  position:relative; z-index:6;
  height:0; pointer-events:none;
}
.seam::before{
  content:"";
  position:absolute; left:0; right:0;
  top:calc(var(--seam-h) / -2);
  height:var(--seam-h);
  -webkit-backdrop-filter:blur(var(--seam-blur)) saturate(118%);
  backdrop-filter:blur(var(--seam-blur)) saturate(118%);
  /* La propia banda se desvanece por arriba y por abajo: si tuviera
     bordes duros, se cambiaría un corte por otros dos. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
}
/* Variantes por si una costura concreta pide más o menos */
.seam-soft{--seam-h:120px; --seam-blur:26px}
.seam-tight{--seam-h:52px; --seam-blur:12px}

/* Sin soporte de backdrop-filter la banda no se pinta y queda el corte
   limpio de siempre: se degrada sin romper nada. */
@media (prefers-reduced-motion: reduce){
  .seam::before{-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
}

/* ---------- 3d. Fondo fijo con velo ----------
   La imagen se queda quieta y la sección se desliza por encima: al bajar,
   el bloque descubre la foto. El velo la sujeta detrás del texto.

       <section class="section bg-fixed bg-equipo on-dark">

   El velo NO es decorativo: sin él, el texto claro sobre una foto de
   oficina bien iluminada se queda en 2:1 y no se lee.                  */
.bg-fixed{
  position:relative; overflow:hidden;
  color:var(--bone);
  background-image:var(--fixed-img);
  background-size:cover;
  background-position:center calc(var(--fixed-y, 50%) + var(--par, 0px));
  background-repeat:no-repeat;
  background-attachment:fixed;
  /* La cinta deja de ser opaca para que la foto la atraviese. */
  --ribbon-bg:rgba(var(--azure-rgb),.55);
}
.bg-fixed::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--fixed-tint, rgba(var(--azure-rgb),.86));
}
.bg-fixed > .wrap,.bg-fixed > .ribbon{position:relative; z-index:2}
/* En oscuro el velo se hunde, para que la sección no se ilumine de más. */
:root[data-theme="dark"]{
  /* Al 88% la foto no se notaba. Al 76% se ve y el texto sigue en ~7,8:1
     incluso contra las ventanas, que es la zona más clara de la imagen. */
  --fixed-tint-dark:rgba(6,12,26,.76);
}
:root[data-theme="dark"] .bg-fixed::before{background:var(--fixed-tint-dark)}
/* En táctil `background-attachment:fixed` no funciona — iOS lo ignora y
   Android da tirones. La imagen se ancla a la sección y el desplazamiento
   lo mueve el JS sobre --par, que así se ve igual que en escritorio. */
/* Zoom al bajar, en vez de deslizamiento. La imagen se muda a su propia
   capa (::after) y se escala con transform: eso lo compone la GPU, mientras
   que animar background-size obliga a repintar el fondo en cada cuadro.
   En táctil el ::after de .glow-follow está apagado, así que queda libre. */
@media (hover:none){
  .bg-zoom{background-image:none}
  .bg-zoom::after{
    content:""; display:block; position:absolute; inset:0; z-index:0;
    background:var(--fixed-img) center var(--fixed-y, 50%) / cover no-repeat;
    transform:scale(var(--zoom, 1));
    transform-origin:50% 50%;
    will-change:transform;
  }
  .bg-zoom::before{z-index:1}
  .bg-zoom > .wrap,.bg-zoom > .ribbon{z-index:2}
}
@media (prefers-reduced-motion:reduce){
  .bg-zoom::after{transform:none !important}
}

@media (hover:none){
  .bg-fixed{
    background-attachment:scroll;
    /* Con `cover` la imagen queda clavada al alto de la sección y no hay
       por dónde moverla. Al 165% sobra un 65% de alto: ése es el recorrido
       que el JS aprovecha para el desplazamiento. */
    background-size:auto 185%;
    /* Bandera que lee el JS. Así la decisión la toma el CSS en un único
       sitio, y el camino táctil se puede probar forzando esta variable. */
    --par-on:1;
  }
}
@media (prefers-reduced-motion:reduce){
  .bg-fixed{background-attachment:scroll; --par:0px !important}
}

/* Velo en cuña, para fondos con un retrato: opaco a la izquierda, donde
   cae el texto, y transparente a la derecha, donde está la persona. */
.bg-retrato::before{
  background:linear-gradient(94deg,
    rgba(var(--azure-rgb),.95) 0%,
    rgba(var(--azure-rgb),.88) 34%,
    rgba(var(--azure-rgb),.54) 68%,
    rgba(var(--azure-rgb),.46) 100%) !important;
}
:root[data-theme="dark"] .bg-retrato::before{
  background:linear-gradient(94deg,
    rgba(6,12,26,.94) 0%,
    rgba(6,12,26,.86) 34%,
    rgba(6,12,26,.56) 68%,
    rgba(6,12,26,.48) 100%) !important;
}

/* Biblioteca de fondos fijos. Una por página: el efecto vive de ser
   variado; repetir la misma foto en siete sitios lo mata.
   --fixed-pos sube o baja el encuadre dentro de la franja visible. */
.bg-trio     {--fixed-img:url("../img/fondo-equipo-llamada.jpg");   --fixed-y:35%}
.bg-traje    {--fixed-img:url("../img/fondo-agente-traje.jpg");    --fixed-y:30%}
/* Cierre de la portada: la misma foto en espejo, para que la agente mire
   hacia el texto (izquierda) y no hacia fuera. */
.bg-escucha  {--fixed-img:url("../img/fondo-agente-escucha-izq.jpg");  --fixed-y:32%}
/* La misma agente, encuadrada más abajo: en Nosotros se reconoce a la
   misma persona sin que parezca la misma imagen repetida. */
.bg-escucha-b{--fixed-img:url("../img/fondo-agente-escucha.jpg");  --fixed-y:62%}
.bg-equipo2  {--fixed-img:url("../img/fondo-reunion-voix.jpg");    --fixed-y:40%}
.bg-cliente  {--fixed-img:url("../img/fondo-cliente.jpg");         --fixed-y:36%}
.bg-diadema  {--fixed-img:url("../img/fondo-diadema.jpg");         --fixed-y:50%}
.bg-consultorio{--fixed-img:url("../img/fondo-consultorio.jpg");   --fixed-y:50%}

/* ---------- 4. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:100px; border:1px solid transparent;
  font-family:var(--font-ui); font-size:15px; font-weight:600; letter-spacing:-.005em;
  cursor:pointer; white-space:nowrap;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
/* Sin elevación al pasar el cursor: el botón cambia de color, no de sitio. */
.btn svg{width:16px; height:16px; flex:none; transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* Sobre papel el botón es navy. El cian a ese tamaño sobre papel no se lee. */
.btn-primary{background:var(--ink-700); color:#fff}
.btn-primary:hover{background:var(--ink-800)}
:root[data-theme="dark"] .btn-primary{background:var(--accent); color:#03203D}
:root[data-theme="dark"] .btn-primary:hover{background:#3ACEFF}

/* Sobre oscuro el cian sí es la voz: un único botón saturado por pantalla. */
.on-dark .btn-primary,.hero .btn-primary,.cta-band .btn-primary,.mobile-nav .btn-primary{background:var(--accent); color:#03203D}
.on-dark .btn-primary:hover,.hero .btn-primary:hover,.cta-band .btn-primary:hover,.mobile-nav .btn-primary:hover{background:#3ACEFF}

.btn-dark{background:var(--ink-800); color:#fff}
.btn-dark:hover{background:var(--ink-700)}

.btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--text)}
.btn-ghost:hover{border-color:var(--text); background:var(--paper-50)}

.on-dark .btn-ghost, .btn-ghost-inv{background:transparent; border-color:rgba(255,255,255,.24); color:#fff}
.on-dark .btn-ghost:hover, .btn-ghost-inv:hover{border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.07)}

.btn-sm{padding:10px 20px; font-size:14px}
.btn-lg{padding:17px 34px; font-size:16px}

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-ui); font-weight:600; font-size:15px; color:var(--accent-700);
  padding-bottom:3px; border-bottom:1px solid currentColor;
}
.link-arrow svg{width:15px; height:15px; transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.on-dark .link-arrow{color:var(--accent)}

/* ---------- 5. Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:12px;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .wrap{display:flex; align-items:center; gap:clamp(16px,3vw,40px)}

/* Estado sobre hero oscuro */
.site-header[data-mode="over"]{color:#fff}
.site-header[data-mode="over"] .nav-link{color:rgba(255,255,255,.78)}
.site-header[data-mode="over"] .nav-link:hover,
.site-header[data-mode="over"] .nav-link[aria-current="page"]{color:#fff}
.site-header[data-mode="over"] .lang-btn{color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.2)}
.site-header[data-mode="over"] .lang-btn.is-active{color:#fff; background:rgba(255,255,255,.14)}
.site-header[data-mode="over"] .burger span{background:#fff}

/* Estado pegado / fondo claro */
.site-header.is-stuck{
  background:var(--header-stuck);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
  padding-block:9px;
  color:var(--text);
}
.site-header.is-stuck .nav-link{color:var(--text-2)}
.site-header.is-stuck .nav-link:hover,
.site-header.is-stuck .nav-link[aria-current="page"]{color:var(--text)}
.site-header.is-stuck .lang-btn{color:var(--text-3); border-color:var(--line)}
.site-header.is-stuck .lang-btn.is-active{color:var(--text); background:var(--paper-100)}
.site-header.is-stuck .burger span{background:var(--text)}
.site-header.is-stuck{--mark:70px}
.site-header.is-stuck .brand-mark{margin-bottom:-20px; filter:drop-shadow(0 8px 18px rgba(2,16,42,.34))}

/* Logo */
.brand{display:flex; align-items:center; gap:13px; flex:none}
/* El logotipo pesa más que el menú del que cuelga: crece y se descuelga
   por debajo de la barra. Los márgenes negativos hacen que su caja de
   maquetación sea más baja que su tamaño real, así que la cabecera NO
   crece ni empuja al resto del menú. El reparto asimétrico (-6 arriba,
   -26 abajo) es lo que le da el centro de gravedad bajo. */
.brand-mark{
  width:var(--mark, 84px); height:var(--mark, 84px); flex:none; display:block;
  margin-top:-6px; margin-bottom:-26px;
  position:relative; z-index:2;
  filter:drop-shadow(0 12px 26px rgba(2,16,42,.42));
  transition:transform .35s var(--ease), filter .35s var(--ease);
}
.brand:hover .brand-mark{transform:translateY(2px) scale(1.04)}
.brand-mark img{width:100%; height:100%}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--font-ui); font-weight:700; font-size:22px; letter-spacing:-.03em}
.brand-sub{font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-700); margin-top:4px}
.site-header[data-mode="over"] .brand-sub,.site-footer .brand-sub,.mobile-nav .brand-sub{color:var(--accent)}
.site-footer .brand-mark,.mobile-nav .brand-mark{--mark:56px; margin:0; filter:none}

/* Nav */
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav-link{
  position:relative; padding:9px 14px; border-radius:9px;
  font-size:14.5px; font-weight:550; letter-spacing:-.005em;
  transition:color .22s var(--ease), background-color .22s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:1.5px;
  background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}

.header-actions{display:flex; align-items:center; gap:12px; flex:none}

/* Selector de idioma */
.lang{display:flex; align-items:center; gap:2px; padding:3px; border-radius:100px; border:1px solid var(--line)}
.lang-btn{
  padding:5px 11px; border-radius:100px; border:0; background:transparent;
  font-family:var(--font-ui); font-size:12.5px; font-weight:700; letter-spacing:.03em; cursor:pointer;
  transition:all .22s var(--ease);
}
.site-header[data-mode="over"] .lang{border-color:rgba(255,255,255,.18)}

/* Interruptor claro / oscuro */
.theme-btn{
  width:36px; height:36px; flex:none; padding:0; cursor:pointer;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:100px; background:transparent;
  color:var(--text-2);
  transition:color .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.theme-btn:hover{color:var(--text); border-color:var(--line-strong)}
.theme-btn svg{width:17px; height:17px; grid-area:1/1}
/* En claro se ofrece la luna (lo que va a pasar); en oscuro, el sol. */

.site-header[data-mode="over"] .theme-btn{color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.2)}
.site-header[data-mode="over"] .theme-btn:hover{color:#fff; border-color:rgba(255,255,255,.5)}
.site-header.is-stuck .theme-btn{color:var(--text-2); border-color:var(--line)}

/* Versión ancha, dentro del menú móvil */
.theme-btn-wide{
  width:100%; height:auto; gap:11px; margin-top:12px;
  grid-template-columns:auto auto; justify-content:center; align-items:center;
  padding:12px 16px; border-radius:100px;
  border:1px solid rgba(255,255,255,.18); background:transparent;
  color:rgba(255,255,255,.72); font-size:14px; font-weight:600;
}
/* Los dos iconos comparten celda (se funden uno en otro); la etiqueta va al lado. */
.theme-btn-wide svg{grid-column:1; grid-row:1}
.theme-btn-wide span[data-theme-label]{grid-column:2; grid-row:1}
.theme-btn-wide:hover{color:#fff; border-color:rgba(255,255,255,.45)}

/* Burger */
.burger{
  display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:10px;
}
.burger span{display:block; width:20px; height:2px; border-radius:2px; background:var(--text); transition:transform .3s var(--ease), opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menú móvil */
.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--ink-900);
  padding:104px var(--gutter) 40px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .34s var(--ease), transform .34s var(--ease), visibility .34s;
  overflow-y:auto;
}
.mobile-nav.is-open{opacity:1; visibility:visible; transform:translateY(0)}
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-ui); font-size:26px; font-weight:700; letter-spacing:-.03em;
  color:#fff; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.09);
}
.mobile-nav a > span:last-child{font-size:13px; font-weight:600; color:var(--accent); opacity:.7; font-family:var(--font-body); letter-spacing:0}
.mobile-nav .mobile-cta{margin-top:32px; display:flex; flex-direction:column; gap:12px}
.mobile-nav .mobile-cta .btn{width:100%}
.mobile-nav .mobile-meta{margin-top:auto; padding-top:32px; color:var(--text-inv-3); font-size:14px; display:flex; flex-direction:column; gap:6px}
.mobile-nav .mobile-meta a{font-size:15px; font-weight:600; font-family:var(--font-body); color:var(--text-inv-2); border:0; padding:0; display:inline}
.mobile-menu-links{display:flex; flex-direction:column}
.mobile-menu-media{
  position:relative; isolation:isolate; overflow:hidden; pointer-events:none;
  height:clamp(154px,42vw,194px);
  margin:-34px calc(-1 * var(--gutter)) -108px;
  opacity:.82;
  /* El clip se disuelve dentro del azul del menú: no hay tarjeta ni borde
     que marque dónde empieza o termina. Safari usa el prefijo webkit. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 68%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 68%,transparent 100%);
}
.mobile-menu-media video{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.045); filter:saturate(.84) brightness(.66) contrast(.94);
}
.mobile-menu-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(8,33,66,.54),rgba(8,33,66,.12) 52%,rgba(8,33,66,.46));
}
.mobile-menu-links,.mobile-nav .mobile-cta,.mobile-nav .mobile-meta{position:relative; z-index:1}

/* En escritorio las fotos siguen siendo fondos. En teléfono una imagen
   panorámica con `cover` se convierte en una tira ampliada: se oculta el
   fondo y se muestra la misma escena, completa, dentro del contenido. */
.mobile-scene{display:none}

body.nav-open{overflow:hidden}

/* ---------- 6. Hero ----------
   MOMENTO 1 — La portada no corta, se desliza.
   La escena oscura queda fija arriba y el documento en papel sube por
   encima de ella. Sin JS: basta con que lo que va debajo sea opaco
   y tenga un z-index mayor (.over-hero). */
.hero{
  position:sticky; top:0; z-index:0;
  min-height:100svh;
  display:flex; align-items:center;
  background:var(--hero-grad);
  color:#fff; overflow:hidden;
  padding-block:132px 76px;
}
/* Todo lo que va después de la portada viaja por encima de ella. */
.over-hero{position:relative; z-index:2}
.bg-paper{background-color:var(--paper); box-shadow:var(--edge-panel)}

/* La primera hoja de papel se apoya sobre la escena: canto redondeado,
   filete arriba y una sombra hacia arriba. Es lo que hace que el paso de
   la portada al documento se lea como una hoja y no como un corte. */
.sheet-top{
  border-radius:clamp(0px, 2.2vw, 28px) clamp(0px, 2.2vw, 28px) 0 0;
  box-shadow:var(--sheet-shadow), var(--edge-panel);
  border-top:1px solid var(--line);
}
/* La portada se retira mientras la hoja sube: se apaga y cede unos píxeles.
   --hero-out lo escribe el JS a partir del scroll (0 arriba, 1 fuera). */
.hero-inner{
  opacity:calc(1 - var(--hero-out, 0) * 1.08);
  transform:translateY(calc(var(--hero-out, 0) * -46px));
  will-change:opacity, transform;
}
@media (prefers-reduced-motion: reduce){
  .hero-inner{opacity:1; transform:none}
}

/* Entrada de la portada: las tres líneas del titular y lo que las rodea
   suben escalonadas al cargar. Sin JS — es lo primero que se ve y no
   puede depender de que un script termine. */
.js .hero h1 > span{display:block}
.js .hero .eyebrow,
.js .hero h1 > span,
.js .hero .lede,
.js .hero .hero-cta,
.js .hero-strip > div{
  opacity:0; transform:translateY(20px);
  animation:heroIn .95s var(--ease-out) forwards;
}
.js .hero .eyebrow{animation-delay:.10s}
.js .hero h1 > span:nth-of-type(1){animation-delay:.20s}
.js .hero h1 > span:nth-of-type(2){animation-delay:.31s}
.js .hero h1 > span:nth-of-type(3){animation-delay:.42s}
.js .hero .lede{animation-delay:.56s}
.js .hero .hero-cta{animation-delay:.68s}
.js .hero-strip > div:nth-child(1){animation-delay:.80s}
.js .hero-strip > div:nth-child(2){animation-delay:.87s}
.js .hero-strip > div:nth-child(3){animation-delay:.94s}
.js .hero-strip > div:nth-child(4){animation-delay:1.01s}
@keyframes heroIn{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .js .hero .eyebrow,.js .hero h1 > span,.js .hero .lede,
  .js .hero .hero-cta,.js .hero-strip > div{animation:none; opacity:1; transform:none}
}

/* El botón principal de la portada respira: un halo cian muy lento.
   Se para al pasar el cursor, para no competir con el clic. */
.hero .btn-primary{box-shadow:0 0 0 0 var(--accent-glow); animation:ctaPulse 3.6s var(--ease) infinite}
.hero .btn-primary:hover{animation-play-state:paused; box-shadow:0 0 0 10px rgba(11,192,255,0)}
@keyframes ctaPulse{
  0%{box-shadow:0 0 0 0 rgba(11,192,255,.34)}
  70%{box-shadow:0 0 0 14px rgba(11,192,255,0)}
  100%{box-shadow:0 0 0 0 rgba(11,192,255,0)}
}
@media (prefers-reduced-motion: reduce){.hero .btn-primary{animation:none}}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media canvas,.hero-media video{width:100%; height:100%; object-fit:cover}
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(92deg, rgba(var(--scrim-rgb),.94) 0%, rgba(var(--scrim-rgb),.80) 32%, rgba(var(--scrim-rgb),.12) 62%, rgba(var(--scrim-rgb),.34) 100%),
    linear-gradient(180deg, rgba(var(--scrim-rgb),.52) 0%, transparent 22%, transparent 68%, rgba(var(--scrim-rgb),.78) 100%);
}
.hero-inner{position:relative; z-index:2; width:100%}
.hero-content{max-width:740px}
.hero h1{margin-bottom:24px}
.hero h1 .accent{
  background:linear-gradient(96deg, var(--accent) 10%, #8FE6FF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lede{max-width:560px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}

/* Tira de credenciales: filetes, no rejilla de tarjetas. */
.hero-strip{
  position:relative; z-index:2;
  margin-top:clamp(40px, 6vw, 72px); padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
  display:grid; grid-template-columns:repeat(4, 1fr);
}
.hero-strip div{min-width:0; padding-inline:clamp(16px,2.4vw,30px)}
.hero-strip div:first-child{padding-left:0}
.hero-strip div + div{border-left:1px solid rgba(255,255,255,.13)}
.hero-strip dt{
  font-family:var(--font-ui); font-size:clamp(1.35rem,2.1vw,1.72rem); font-weight:600;
  letter-spacing:-.025em; color:#fff; font-variant-numeric:tabular-nums;
}
.hero-strip dd{margin:7px 0 0; font-size:12.5px; color:var(--text-inv-3); line-height:1.5; max-width:26ch}

.scroll-hint{
  position:absolute; left:50%; bottom:26px; z-index:3; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-inv-3);
}
.scroll-hint i{display:block; width:1px; height:34px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.5)); animation:scrollPulse 2.4s var(--ease) infinite}
@keyframes scrollPulse{0%,100%{opacity:.25; transform:scaleY(.5)} 50%{opacity:1; transform:scaleY(1)}}

/* Texto de la portada en blanco marfil, no en blanco puro: sobre el azul
   claro el marfil es más cálido y no vibra. */
.hero{color:var(--bone)}
/* El cian de marca sobre el azul claro se queda en 4:1 y a 11px no llega.
   En la portada el antetítulo sube a un cian claro: 6:1. */
.hero .eyebrow{color:#8FE6FF}
.hero h1{color:var(--bone)}
.hero .lede{color:var(--bone); opacity:.94}
.hero-strip dt{color:var(--bone)}
.hero-strip dd{color:rgba(244,241,234,.66)}
.hero .btn-ghost-inv{color:var(--bone); border-color:rgba(244,241,234,.34)}
.hero .btn-ghost-inv:hover{border-color:rgba(244,241,234,.70); background:rgba(244,241,234,.10)}

/* Cualquier superficie con foto o plancha oscura redefine los tokens de
   texto y de filete en local. Así .lede, .eyebrow, .link-arrow y las
   líneas se aclaran solos, sin tener que acordarse de poner .on-dark.
   Era el fallo de .page-hero: su entradilla usaba el gris de texto sobre
   papel (#5A5E66) y sobre azul se quedaba en 2:1. */
.page-hero,.bg-fixed,.bg-azure,.bg-azure-deep,.bg-azure-grad,.cta-band,.quote{
  --text-2:var(--text-inv-2);
  --text-3:var(--text-inv-3);
  --accent-700:#8FE6FF;
  --accent-600:#8FE6FF;
  --line:var(--line-inv);
  --line-strong:rgba(255,255,255,.34);
  color:var(--text-inv);
}
.page-hero h1,.page-hero h2,.bg-fixed h1,.bg-fixed h2,.bg-fixed h3,.cta-band h2,.cta-band h3{color:var(--text-inv)}
.page-hero .crumbs{color:rgba(255,255,255,.72)}
.page-hero .crumbs a:hover{color:#fff}

/* Hero interno (páginas secundarias) */
.page-hero{
  /* background-COLOR, no el atajo: el atajo reseteaba la imagen que pone
     .bg-fixed, que se declara antes en el archivo. */
  position:relative; background-color:var(--ink-900); color:#fff; overflow:hidden;
  padding:clamp(140px,15vw,190px) 0 clamp(64px,8vw,92px);
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 100% at 82% 0%, rgba(11,192,255,.16) 0%, transparent 60%),
    radial-gradient(60% 90% at 10% 100%, rgba(46,107,232,.07) 0%, transparent 60%);
}
.page-hero::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent);
  mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.page-hero .wrap{position:relative; z-index:2}
.page-hero h1{max-width:16ch; margin-bottom:22px}
.page-hero .lede{max-width:62ch}

/* .page-hero define su propio ::before más abajo en el archivo y le ganaba
   a .bg-fixed, dejando la cabecera sin velo. Esta regla lo devuelve. */
.page-hero.bg-fixed::before{
  background:var(--fixed-tint, rgba(var(--azure-rgb),.86));
  z-index:1;
}
:root[data-theme="dark"] .page-hero.bg-fixed::before{background:var(--fixed-tint-dark)}
.page-hero.bg-fixed::after{display:none}

.crumbs{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-inv-3); margin-bottom:26px}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.4}

/* ---------- 7. Secciones oscuras / claras ---------- */
.bg-dark{background-color:var(--ink-900); color:#fff; position:relative; overflow:hidden; box-shadow:var(--edge-plate)}
.bg-dark-2{background-color:var(--ink-800); color:#fff; position:relative; overflow:hidden; box-shadow:var(--edge-plate)}
.bg-soft{background-color:var(--paper-50); box-shadow:var(--edge-panel)}
.bg-tint{background:linear-gradient(180deg, var(--paper) 0%, var(--paper-50) 100%)}

.glow-tl::before{content:""; position:absolute; top:-25%; left:-10%; width:60%; height:80%; background:radial-gradient(circle, rgba(11,192,255,.13) 0%, transparent 65%); pointer-events:none}
.glow-br::after{content:""; position:absolute; bottom:-30%; right:-8%; width:55%; height:85%; background:radial-gradient(circle, rgba(46,107,232,.08) 0%, transparent 65%); pointer-events:none}
.bg-dark .wrap, .bg-dark-2 .wrap{position:relative; z-index:2}

/* ---------- 8. Grids ---------- */
.grid{display:grid; gap:clamp(18px,2.4vw,28px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center}
.split-wide{grid-template-columns:1.05fr .95fr}
/* Alineado arriba: con align-items:center y una columna mucho más alta que
   la otra, la corta queda flotando en medio de un hueco. */
.split-top{align-items:start}

/* ---------- 9. Tarjetas ---------- */
/* Planas: la profundidad sale del filete y del tono del papel, nunca de una sombra. */
.card{
  position:relative; padding:clamp(24px,2.8vw,32px);
  background:transparent; border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.card:hover{border-color:var(--line-strong); background:var(--hover-wash)}
.card h3{margin-bottom:11px}
.card p{color:var(--text-2); font-size:15.5px; line-height:1.62}

/* El icono va suelto, en azul de marca. Sin chip de color: el chip celeste
   descolorido era la marca de agua de la plantilla. */
.card-icon{
  width:auto; height:26px; border-radius:0; display:flex; align-items:center; margin-bottom:18px;
  background:none; color:var(--accent-700);
  transition:color .35s var(--ease);
}
.card-icon svg{width:23px; height:23px}
.card-icon.deep{background:none; color:var(--accent-700)}

.card-dark{
  background:rgba(255,255,255,.035); border-color:var(--line-inv);
}
.card-dark h3{color:#fff}
.card-dark p{color:var(--text-inv-2)}
.card-dark:hover{background:rgba(255,255,255,.06); border-color:rgba(11,192,255,.38)}
.card-dark .card-icon{background:none; color:var(--accent)}

/* Tarjeta de sector */
.sector{
  position:relative; overflow:hidden;
  padding:clamp(26px,2.8vw,34px);
  border:1px solid var(--line); border-radius:var(--r-lg); background:transparent;
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
  display:flex; flex-direction:column; min-height:100%;
}
.sector::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--accent-700);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out);
}
.sector:hover{border-color:var(--line-strong); background:var(--hover-wash)}
.sector:hover::before{transform:scaleX(1)}
.sector .card-icon{margin-bottom:22px}
.sector h3{margin-bottom:10px; font-size:clamp(1.2rem,1.65vw,1.42rem)}
.sector p{color:var(--text-2); font-size:15.5px; margin-bottom:20px}
.sector ul{margin-top:auto; display:flex; flex-direction:column; gap:9px; padding-top:4px; border-top:1px solid var(--line)}
.sector ul li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--text-2); padding-top:9px}
.sector ul li svg{width:16px; height:16px; flex:none; margin-top:3px; color:var(--accent-600)}

/* ---------- 10. Lista de problemas ----------
   Sobre papel: filetes y una aspa fina. Sin chip de color de fondo. */
.pain-list{display:flex; flex-direction:column; margin-top:4px}
.pain{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.pain:first-child{border-top:1px solid var(--line)}
.pain-x{
  width:18px; height:18px; flex:none; margin-top:4px;
  display:grid; place-items:center;
  background:none; color:var(--pain-mark);
}
.pain-x svg{width:12px; height:12px}
.pain b{display:block; font-family:var(--font-ui); font-weight:600; font-size:16px; color:var(--text); margin-bottom:4px; letter-spacing:-.012em}
.pain span{font-size:15px; color:var(--text-2); line-height:1.58}
/* Y si alguna vez vuelve a una banda oscura, sigue funcionando. */
.on-dark .pain{border-color:var(--line-inv)}
.on-dark .pain:first-child{border-top-color:var(--line-inv)}
.on-dark .pain-x{color:#FF8A8A}
.on-dark .pain b{color:#fff}
.on-dark .pain span{color:var(--text-inv-2)}

/* ---------- 10b. Clip ----------
   Sin marco: ni fondo, ni relleno, ni borde, ni sombra, ni redondeo. El
   vídeo se apoya solo sobre el papel. El tope es 432px porque ése es el
   ancho real del archivo: estirarlo más sólo lo emborrona. */
.clip{margin:clamp(28px,3.4vw,40px) 0 0; max-width:432px}
.clip-frame{
  position:relative; overflow:hidden;
  aspect-ratio:9 / 5;
  /* Relleno mientras carga. Se hereda de la superficie: sobre papel es el
     tono de papel, sobre una plancha oscura es un velo claro. Antes era
     siempre gris papel y flotaba como un recuadro sobre el cierre. */
  background:var(--clip-bg, var(--paper-100));
}
.clip-frame video{width:100%; height:100%; object-fit:cover; display:block}
/* Con «reducir movimiento» el clip no arranca solo: se marca que se puede
   tocar, para que quien quiera verlo pueda. */
.clip-pulsable .clip-frame::before{
  content:""; position:absolute; z-index:2; left:50%; top:50%;
  width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  background:rgba(2,16,42,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center/22px;
  pointer-events:none; transition:opacity .25s ease;
}
.clip-pulsable.is-playing .clip-frame::before{opacity:0}
@media (max-width:900px){.clip{max-width:432px}}

/* Encabezado de sección con clip al lado. El texto manda; el vídeo acompaña. */
.head-clip{
  display:grid; grid-template-columns:minmax(0,1fr) 432px; gap:clamp(28px,4vw,60px);
  align-items:start; margin-bottom:clamp(34px,4vw,52px);
}
/* La pista del clip va fija en 432px (el ancho real del archivo). Con `auto`
   el texto de al lado la aplastaba hasta 168px y el vídeo salía diminuto. */
.head-clip > .section-head{min-width:0}
.head-clip .section-head{margin-bottom:0}
.head-clip .clip{margin:0}
@media (max-width:1080px){
  .head-clip,.closing-top{grid-template-columns:1fr}
  .head-clip .clip,.closing-top .clip{margin-top:clamp(24px,3vw,32px)}
}
@media (max-width:900px){
  .head-clip{grid-template-columns:1fr}
  .head-clip .clip{margin-top:clamp(24px,3vw,32px)}
}

/* Cierre: la cita a la izquierda, el clip a la derecha. */
.closing-top{
  display:grid; grid-template-columns:minmax(0,1fr) 432px; gap:clamp(30px,4vw,64px); align-items:center;
}
@media (max-width:900px){
  .closing-top{grid-template-columns:1fr}
  .closing-top .clip{margin-top:clamp(26px,3vw,34px)}
}

/* Clip dentro de una tarjeta de sector: ocupa todo el ancho de la tarjeta y
   sustituye al icono. */
.sector .clip{max-width:none; margin:0 0 20px}

/* ---------- 11. Proceso ---------- */
/* Banda de pasos: un filete real encima de cada uno y la cifra debajo.
   Columnas de periódico, no tarjetas. */
.steps{counter-reset:step; display:grid; gap:clamp(22px,2.6vw,32px); grid-template-columns:repeat(4,1fr)}
.step{position:relative; padding-top:20px; border-top:1px solid var(--line)}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  display:block; margin-bottom:14px;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; letter-spacing:.12em;
  font-variant-numeric:tabular-nums; color:var(--accent-700);
}
.step h3{font-size:1.08rem; margin-bottom:9px}
.step p{font-size:14.5px; color:var(--text-2); line-height:1.6}
.steps-3{grid-template-columns:repeat(3,1fr)}
.on-dark .step{border-top-color:var(--line-inv)}
.on-dark .step::before{color:var(--accent)}
.on-dark .step p{color:var(--text-inv-2)}

/* ---------- 11b. Puertas a Sectores y Cómo trabajamos ----------
   Las dos secciones que salieron del menú entran aquí, dentro de Servicios. */
.doorways{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px)}
.doorway{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(26px,3vw,36px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.doorway:hover{border-color:var(--line-strong); background:var(--paper-50)}
.doorway h2{margin-bottom:12px}
.doorway p{color:var(--text-2); font-size:15.5px; line-height:1.62; margin-bottom:22px}
.doorway .link-arrow{margin-top:auto}
@media (max-width:760px){.doorways{grid-template-columns:1fr}}

/* La línea que absorbe lo que antes eran tres tarjetas más. */
.sol-rest{
  margin-top:clamp(32px,4vw,48px); padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px clamp(22px,3vw,40px);
  font-size:15.5px; color:var(--text-2); line-height:1.62;
}
.sol-rest > span{flex:1 1 34ch; min-width:0; max-width:64ch}
.sol-rest .link-arrow{flex:none}

/* ---------- 12. Servicios (lista numerada grande) ----------
   MOMENTO 3 — El filete de cada fila se dibuja de izquierda a derecha al
   entrar en pantalla, escalonado. Al pasar el cursor la fila entera se
   invierte a navy y la flecha cian entra desde la izquierda.
   En móvil, .is-near hace lo mismo con la fila centrada en la pantalla. */
.svc-list{border-top:1px solid var(--line)}
.svc{
  position:relative;
  display:grid; grid-template-columns:56px 1fr auto; gap:clamp(18px,2.6vw,36px); align-items:center;
  padding:clamp(22px,2.7vw,30px) clamp(12px,2vw,22px);
  margin-inline:calc(-1 * clamp(12px,2vw,22px));
  border-radius:var(--r);
  transition:background-color .45s var(--ease-out), color .45s var(--ease-out);
}
.svc::after{
  content:""; position:absolute; left:clamp(12px,2vw,22px); right:clamp(12px,2vw,22px); bottom:0; height:1px;
  background:var(--line); transform:scaleX(0); transform-origin:left;
  transition:transform .75s var(--ease-out);
}
.svc-list.is-in .svc::after{transform:scaleX(1)}
.svc-list.is-in .svc:nth-child(1)::after{transition-delay:.08s}
.svc-list.is-in .svc:nth-child(2)::after{transition-delay:.16s}
.svc-list.is-in .svc:nth-child(3)::after{transition-delay:.24s}
.svc-list.is-in .svc:nth-child(4)::after{transition-delay:.32s}
.svc-list.is-in .svc:nth-child(5)::after{transition-delay:.40s}
.svc-list.is-in .svc:nth-child(6)::after{transition-delay:.48s}

.svc-num{
  font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--text-3);
  letter-spacing:.1em; font-variant-numeric:tabular-nums;
  transition:color .45s var(--ease-out);
}
.svc-body h3{margin-bottom:7px; transition:color .45s var(--ease-out)}
.svc-body p{color:var(--text-2); font-size:15.5px; max-width:62ch; transition:color .45s var(--ease-out)}

/* Inversión de la fila */
.svc:hover,.svc.is-near{background:var(--invert-bg); color:var(--invert-fg)}
.svc:hover .svc-body h3,.svc.is-near .svc-body h3{color:var(--invert-fg)}
.svc:hover .svc-body p,.svc.is-near .svc-body p{color:var(--text-inv-2)}
.svc:hover .svc-num,.svc.is-near .svc-num{color:var(--accent)}
.svc:hover::after,.svc.is-near::after{background:transparent}

/* La flecha entra desde la izquierda, sin círculo alrededor. */
.svc-go{
  width:26px; height:26px; border:0; border-radius:0; background:none;
  display:grid; place-items:center; color:var(--accent); flex:none;
  opacity:0; transform:translateX(-12px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.svc-go svg{width:20px; height:20px}
.svc:hover .svc-go,.svc.is-near .svc-go{opacity:1; transform:translateX(0)}

/* ---------- 13. Cita / testimonio ----------
   MOMENTO 6 — La frase se revela con un barrido de izquierda a derecha.
   Va con una máscara CSS y no tocando el DOM: así el cambio ES/EN, que
   reescribe el innerHTML, no rompe nada. Si el navegador no soporta
   máscaras, el texto sale entero — que es el fallo correcto. */
.quote{
  position:relative; padding:clamp(34px,4.5vw,56px);
  border-radius:var(--r-xl); background:var(--ink-800); color:#fff; overflow:hidden;
}
.quote::before{
  content:""; position:absolute; top:-40%; right:-10%; width:55%; height:150%;
  background:radial-gradient(circle, rgba(11,192,255,.16) 0%, transparent 62%);
}
.quote blockquote{
  position:relative; z-index:2; margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.3; letter-spacing:-.012em;
}
.quote figcaption{position:relative; z-index:2; margin-top:26px; display:flex; align-items:center; gap:13px; color:var(--text-inv-2); font-size:14.5px}
.quote figcaption i{width:34px; height:1px; background:var(--accent); display:block; flex:none}

/* El barrido */
.js .sweep{
  --sweep:linear-gradient(95deg, #000 0 30%, rgba(0,0,0,.16) 52% 100%);
  -webkit-mask-image:var(--sweep); mask-image:var(--sweep);
  -webkit-mask-size:320% 100%; mask-size:320% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  transition:-webkit-mask-position 1.7s var(--ease-out), mask-position 1.7s var(--ease-out);
}
.js .is-in .sweep,.js .sweep.is-in{-webkit-mask-position:0% 0; mask-position:0% 0}
@media (prefers-reduced-motion: reduce){
  .js .sweep{-webkit-mask-image:none; mask-image:none}
}

/* ---------- 13b. Cinta de sectores ----------
   MOMENTO 4 — Banda navy metida dentro de la zona de papel, con los
   sectores desplazándose despacio. Sustituye a la rejilla de 3 tarjetas.
   El contenido va duplicado en el HTML: por eso el bucle es -50%. */
.ribbon{
  position:relative; overflow:hidden;
  background:var(--ribbon-bg, var(--ink-900)); color:#fff;
  padding-block:clamp(24px,3vw,34px);
}
.ribbon-track{display:flex; width:max-content; animation:ribbonSlide 52s linear infinite}
.ribbon:hover .ribbon-track,.ribbon:focus-within .ribbon-track{animation-play-state:paused}
.ribbon-item{
  display:inline-flex; align-items:center; gap:clamp(22px,2.8vw,40px);
  padding-right:clamp(22px,2.8vw,40px);
  font-family:var(--font-ui); font-size:clamp(12.5px,1.2vw,14px); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.82); white-space:nowrap;
}
.ribbon-item::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none}
@keyframes ribbonSlide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* Los bordes se desvanecen: la cinta no debe cortarse en seco. */
.ribbon::before,.ribbon::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(36px,7vw,110px); z-index:2; pointer-events:none;
}
.ribbon::before{left:0; background:linear-gradient(90deg, var(--ribbon-bg, var(--ink-900)), transparent)}
.ribbon::after{right:0; background:linear-gradient(270deg, var(--ribbon-bg, var(--ink-900)), transparent)}


/* ---------- 13c. Onda de marca ----------
   MOMENTO 5 — El logotipo de Voix ya es una onda de sonido. Aquí es el
   divisor recurrente: un filete con un pulso que lo recorre. */
.wave-rule{display:block; width:100%; height:24px; overflow:hidden}
.wave-rule svg{width:100%; height:100%; display:block}
.wave-base{fill:none; stroke:var(--line-strong); stroke-width:1; vector-effect:non-scaling-stroke}
.wave-pulse{
  fill:none; stroke:var(--accent-700); stroke-width:1.8; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:110 2600; stroke-dashoffset:2710;
  animation:wavePulse 7.5s linear infinite;
}
@keyframes wavePulse{to{stroke-dashoffset:0}}
.on-dark .wave-base,.ribbon + .wave-rule .wave-base{stroke:var(--line-inv)}
.on-dark .wave-pulse{stroke:var(--accent)}


/* ---------- 13d. Barra de lectura ----------
   Un filete de 3px arriba del todo que avanza con el scroll. Cuesta nada y
   hace que la página se sienta viva desde el primer píxel. */
.read-bar{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:120;
  pointer-events:none; background:transparent;
}
.read-bar i{
  display:block; height:100%; width:100%; transform-origin:left;
  transform:scaleX(var(--read, 0));
  background:linear-gradient(90deg, var(--deep) 0%, var(--accent) 100%);
}

/* ---------- 13e. Resplandor que sigue al cursor ----------
   Sólo en las bandas oscuras y sólo con ratón. Es el detalle que separa
   «fondo de color» de «superficie viva». */
.glow-follow{position:relative}
.glow-follow::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%), var(--glow-tint), transparent 62%);
  opacity:0; transition:opacity .5s var(--ease);
}
.glow-follow.is-lit::after{opacity:1}
@media (hover:none){.glow-follow::after{display:none}}

/* ---------- 13f. Proceso fijado ----------
   MOMENTO 7 — La columna izquierda se queda quieta con la cifra grande
   mientras los cuatro pasos pasan por la derecha. Es el momento largo de
   la portada: el que se recuerda. */
.proc-stage{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(32px,5vw,72px); align-items:start}
.proc-sticky{position:sticky; top:clamp(96px,14vh,140px)}
.proc-big{
  display:block; margin-top:clamp(24px,3vw,38px);
  font-family:var(--font-ui); font-weight:600; font-variant-numeric:tabular-nums;
  font-size:clamp(1.9rem,2.6vw,2.4rem); line-height:1; letter-spacing:-.03em;
  color:var(--accent-700); opacity:.22;   /* apenas una referencia: el protagonista es la escena */
}
.proc-big span{display:inline-block; transition:transform .5s var(--ease-out), opacity .35s var(--ease)}
.proc-track{display:flex; flex-direction:column; gap:clamp(56px,9vh,110px); padding-block:clamp(24px,6vh,70px) clamp(80px,22vh,220px)}
.proc-item{
  padding-top:22px; border-top:1px solid var(--line);
  opacity:.46; transition:opacity .5s var(--ease), border-color .5s var(--ease);
}
.proc-item.is-on{opacity:1; border-top-color:var(--accent-700)}
.proc-item h3{font-size:clamp(1.15rem,1.9vw,1.42rem); margin-bottom:10px}
.proc-item p{color:var(--text-2); font-size:15.5px; line-height:1.62; max-width:46ch}
.proc-item .proc-n{
  display:block; margin-bottom:12px;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; letter-spacing:.12em;
  font-variant-numeric:tabular-nums; color:var(--accent-700);
}
/* Y si alguna vez vuelve a una plancha oscura, sigue funcionando. */
.on-dark .proc-item{border-top-color:var(--line-inv)}
.on-dark .proc-item.is-on{border-top-color:var(--accent)}
.on-dark .proc-item p{color:var(--text-inv-2)}
.on-dark .proc-item .proc-n,.on-dark .proc-big{color:var(--accent)}

@media (max-width:900px){
  .proc-stage{grid-template-columns:1fr; gap:28px}
  .proc-sticky{position:static}
  .proc-big{display:none}
  .proc-track{gap:34px; padding-block:8px 0}
  .proc-item{opacity:1}
}

/* ---------- 13g. Franja de logotipos de clientes ---------- */
.logos{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(26px,4.5vw,60px);
}
.logos img{
  height:clamp(20px,2.3vw,28px); width:auto;
  opacity:.5; filter:grayscale(1);
  transition:opacity .3s var(--ease), filter .3s var(--ease);
}
.logos img:hover{opacity:1; filter:grayscale(0)}
:root[data-theme="dark"] .logos img{filter:grayscale(1) invert(1) brightness(1.7); opacity:.45}
.logos-note{
  text-align:center; margin-bottom:clamp(22px,3vw,32px);
  font-family:var(--font-ui); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
}

/* ---------- 14. Franja de números ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.stat{background:var(--surface); padding:clamp(24px,2.8vw,32px)}
.stat dt{font-family:var(--font-ui); font-size:clamp(2rem,3.4vw,2.7rem); font-weight:700; letter-spacing:-.04em; color:var(--text); line-height:1}
.stat dd{margin:10px 0 0; font-size:14.5px; color:var(--text-2); line-height:1.45}

/* ---------- 15. CTA final ---------- */
.cta-band{position:relative; overflow:hidden; background:var(--ink-900); color:#fff; border-radius:var(--r-xl)}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(75% 130% at 88% 15%, rgba(11,192,255,.22) 0%, transparent 58%),
    radial-gradient(60% 110% at 6% 92%, rgba(46,107,232,.11) 0%, transparent 58%);
}
.cta-inner{position:relative; z-index:2; padding:clamp(40px,5.5vw,68px); display:grid; grid-template-columns:1.6fr auto; gap:clamp(28px,4vw,56px); align-items:center}
.cta-inner h2{margin-bottom:16px; font-size:clamp(1.7rem,2.8vw,2.35rem)}
.cta-inner .lede{max-width:52ch}
.cta-actions{display:flex; flex-direction:column; gap:12px; min-width:230px}
.cta-actions .btn{width:100%}
.cta-note{font-size:13px; color:var(--text-inv-3); text-align:center; margin-top:2px}

/* ---------- 15b. Cierre de la portada ----------
   La cita y el CTA fundidos en un solo bloque: la frase ES el titular. */
.closing blockquote{
  margin:0; max-width:19ch;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2rem,4.2vw,3.25rem); line-height:1.14; letter-spacing:-.016em; color:#fff;
}
.closing blockquote cite{
  display:flex; align-items:center; gap:13px; margin-top:26px;
  font-family:var(--font-ui); font-style:normal; font-size:14px; color:var(--text-inv-3);
}
.closing blockquote cite::before{content:""; width:30px; height:1px; background:var(--accent); flex:none}
.closing-foot{
  margin-top:clamp(44px,5.5vw,68px); padding-top:clamp(28px,3.4vw,40px);
  border-top:1px solid var(--line-inv);
  display:grid; grid-template-columns:1fr auto; gap:clamp(26px,4vw,56px); align-items:end;
}
.closing-foot .lede{max-width:46ch; margin:0}
.closing-actions{display:flex; flex-direction:column; gap:12px; min-width:250px}
.closing-actions .btn{width:100%}
.closing-meta{
  margin-top:4px; font-size:13px; color:var(--text-inv-3); line-height:1.6;
  display:flex; flex-direction:column; gap:3px; text-align:center;
}

/* ---------- 16. Formulario ---------- */
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(28px,3.6vw,44px)}
.field{margin-bottom:20px}
.field label{display:block; font-size:13.5px; font-weight:600; color:var(--text-2); margin-bottom:8px}
.field .req{color:var(--accent-700)}
.field input,.field select,.field textarea{
  width:100%; padding:13px 16px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--paper-50);
  font-size:15.5px; transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{min-height:130px; resize:vertical; line-height:1.6}
.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='%238894A6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:17px; padding-right:44px; cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--deep); background:var(--surface); box-shadow:0 0 0 3px var(--deep-soft);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-consent{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--text-2); line-height:1.5; margin-bottom:22px}
.form-consent input{width:17px; height:17px; margin-top:2px; flex:none; accent-color:var(--accent-600)}
.form-consent a{color:var(--accent-700); text-decoration:underline; text-underline-offset:2px}
.form-status{margin-top:16px; padding:13px 16px; border-radius:var(--r-sm); font-size:14.5px; display:none}
.form-status.ok{display:block; background:var(--accent-soft); color:var(--accent-700)}
.form-status.err{display:block; background:rgba(255,109,109,.12); color:#B4342F}

/* Datos de contacto */
.contact-list{display:flex; flex-direction:column; gap:4px; margin-top:34px}
.contact-item{display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line)}
.contact-item:first-child{border-top:1px solid var(--line)}
.contact-item .ci-icon{width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--paper-100); color:var(--text-2)}
.contact-item .ci-icon svg{width:18px; height:18px}
.contact-item b{display:block; font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:4px}
.contact-item a,.contact-item span{font-family:var(--font-ui); font-weight:700; font-size:16.5px; letter-spacing:-.015em; color:var(--text)}
.contact-item a:hover{color:var(--accent-700)}

/* ---------- 17. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; cursor:pointer; list-style:none;
  font-family:var(--font-ui); font-weight:700; font-size:17.5px; letter-spacing:-.018em;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-700)}
.faq summary i{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong); flex:none;
  display:grid; place-items:center; position:relative; transition:all .3s var(--ease);
}
.faq summary i::before,.faq summary i::after{content:""; position:absolute; background:currentColor; border-radius:2px; transition:transform .3s var(--ease)}
.faq summary i::before{width:11px; height:1.6px}
.faq summary i::after{width:1.6px; height:11px}
.faq details[open] summary i{background:var(--accent); border-color:var(--accent); color:#03203D}
.faq details[open] summary i::after{transform:rotate(90deg) scaleX(0)}
.faq details p{padding:0 0 26px; max-width:76ch; color:var(--text-2); font-size:15.5px}

/* ---------- 18. Footer ---------- */
.site-footer{background:var(--ink-900); color:#fff; padding-block:clamp(56px,7vw,80px) 32px; position:relative; overflow:hidden}
/* Resplandor del pie: closest-side hace que se desvanezca DENTRO de su caja.
   Con «circle» se cortaba en los bordes y en móvil (pie alto y estrecho)
   dejaba una columna recta más clara. */
.site-footer::before{content:""; position:absolute; top:-50%; left:35%; width:50%; height:120%; pointer-events:none; background:radial-gradient(closest-side, rgba(11,192,255,.07) 0%, transparent 100%)}
.site-footer .wrap{position:relative; z-index:2}
.footer-top{display:grid; grid-template-columns:1.35fr .85fr 1.05fr 1.15fr; gap:clamp(28px,4vw,52px); padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.10)}
.footer-brand .brand{margin-bottom:20px}
.footer-brand p{color:var(--text-inv-2); font-size:15px; max-width:34ch; margin-bottom:24px}
.footer-col h4{font-family:var(--font-ui); font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-inv-3); margin-bottom:18px}
.footer-col ul{display:flex; flex-direction:column; gap:11px}
.footer-col a{font-size:15px; color:var(--text-inv-2); transition:color .22s var(--ease)}
.footer-col li span{display:block; font-size:14.5px; color:var(--text-inv-3); line-height:1.5}
.footer-col a:hover{color:var(--accent)}
.socials{display:flex; gap:9px}
.socials a{width:38px; height:38px; border-radius:11px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:var(--text-inv-2); transition:all .28s var(--ease)}
.socials a svg{width:17px; height:17px}
.socials a:hover{background:var(--accent); border-color:var(--accent); color:#03203D; transform:translateY(-2px)}
.footer-bottom{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; padding-top:26px; font-size:13.5px; color:var(--text-inv-3)}
.footer-bottom nav{display:flex; gap:22px; flex-wrap:wrap}
.footer-bottom a:hover{color:var(--text-inv-2)}
/* Crédito de autoría: ocupa toda la línea para no descuadrar el
   space-between de la fila de copyright. */
.footer-credit{flex-basis:100%; margin:0; font-size:12.5px; color:var(--text-inv-3)}
.footer-credit a{color:var(--text-inv-3); text-decoration:underline; text-underline-offset:2px}
.footer-credit a:hover{color:var(--text-inv-2)}

/* ---------- 19. Revelado al hacer scroll ---------- */
.js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.js [data-reveal].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.js [data-reveal]{opacity:1; transform:none}}

/* ---------- 20. Responsive ----------
   Cuatro escalones, cada uno con su intención:

     · ≥1600  Escritorio grande — se ocupa el espacio lateral que sobra
     · ≥1920  Escritorio muy grande — además crece la tipografía
     · ≤1080  Tablet apaisada
     · ≤900   Tablet vertical — cae el menú, una sola columna
     · ≤640   Teléfono
   ------------------------------------------------------------------ */

/* ── Escritorio grande ─────────────────────────────────────────────
   Hasta ahora todo se quedaba en 1080px y en una pantalla de 1920
   sobraban 400px a cada lado. La caja crece y el aire lateral también. */
@media (min-width:1600px){
  :root{
    --maxw:1280px;
    --gutter:clamp(48px, 4vw, 80px);
    --seam-h:104px;
  }
  .section{padding-block:clamp(88px, 6.5vw, 124px)}
  .section-head{max-width:800px}
  /* El clip sigue topado a su ancho real: estirarlo lo emborrona. */
  .head-clip,.closing-top{gap:clamp(48px,5vw,88px)}
}

/* ── Escritorio muy grande ─────────────────────────────────────────
   Aquí ya no basta con ensanchar: si el cuerpo se queda en 17px, el
   texto se ve pequeño a la distancia a la que se mira una pantalla así. */
@media (min-width:1920px){
  :root{ --maxw:1400px; }
  body{font-size:18px}
  .h-xl{font-size:clamp(3.6rem, 4vw, 5rem)}
  .h-lg{font-size:clamp(2.7rem, 2.9vw, 3.6rem)}
  .lede{font-size:1.24rem}
  .hero-strip dt{font-size:2rem}
  .svc-body p,.step p,.card p{font-size:16.5px}
}

/* ── Tablet apaisada ─────────────────────────────────────────────── */
@media (max-width:1080px){
  :root{ --gutter:clamp(28px, 4.5vw, 52px) }
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr); gap:32px 28px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero-strip{grid-template-columns:repeat(2,1fr); row-gap:22px}
  .hero-strip div{padding-inline:0 clamp(16px,3vw,28px)}
  .hero-strip div + div{border-left:0}
  .hero-strip div:nth-child(2n){padding-left:clamp(16px,3vw,28px); border-left:1px solid rgba(255,255,255,.13)}
}
/* ── Tablet vertical ─────────────────────────────────────────────── */
@media (max-width:900px){
  /* En teléfono una cabecera fija no puede quedarse encima del contenido
     durante toda la lectura. El JS añade esta clase al bajar y la devuelve
     inmediatamente al subir o al abrir el menú. */
  .site-header{will-change:transform; transition:transform .26s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease)}
  .site-header.is-mobile-hidden{transform:translateY(-115%); pointer-events:none}
  body.nav-open .site-header{transform:none; pointer-events:auto}
  :root{ --seam-h:64px; --seam-blur:14px }
  /* La cinta apretada en 390px no se leía: más aire, más despacio y con
     los bordes desvaneciéndose antes. */
  .ribbon-track{animation-duration:78s}
  .ribbon-item{
    gap:26px; padding-right:26px;
    font-size:12px; letter-spacing:.12em;
  }
  .ribbon::before,.ribbon::after{width:34px}
  /* La portada deja de ir fija: su contenido es más alto que la pantalla y
     con sticky se quedaría cortado por abajo. */
  .hero{position:static; min-height:auto}
  /* En pantallas estrechas la escena queda como textura, nunca compite con el texto */
  .hero-media{opacity:.55}
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(var(--scrim-rgb),.90) 0%, rgba(var(--scrim-rgb),.84) 38%,
      rgba(var(--scrim-rgb),.88) 66%, rgba(var(--scrim-rgb),.97) 100%);
  }
  /* Los resplandores radiales, en vertical, se recortan en un panel a media
     anchura que se ve como un fallo. Fuera. */
  .glow-tl::before,.glow-br::after{display:none}
  .closing-foot{grid-template-columns:1fr; align-items:start; gap:30px}
  .closing-actions{min-width:0}
  .closing blockquote{max-width:none}
  .bg-retrato{--fixed-y:12%}
  .bg-retrato::before{
    background:linear-gradient(180deg,
      rgba(var(--azure-rgb),.72) 0%,
      rgba(var(--azure-rgb),.88) 42%,
      rgba(var(--azure-rgb),.95) 100%) !important;
  }
  /* El equipo necesita verse entero en móvil, por eso sale del fondo. El
     retrato del cierre sí puede vivir como textura translúcida detrás del
     texto: no añade una segunda foto ni compite con el clip médico. */
  .bg-trio{background-image:none; --fixed-img:none}
  .bg-trio::after{display:none}
  .bg-escucha{
    --fixed-img:url("../img/fondo-agente-escucha-izq.jpg");
    background-image:var(--fixed-img); background-size:cover;
    background-position:58% 14%; --par-on:0;
  }
  .bg-escucha::before{
    background:linear-gradient(180deg,
      rgba(var(--azure-rgb),.82) 0%,
      rgba(var(--azure-rgb),.88) 48%,
      rgba(var(--azure-rgb),.94) 100%) !important;
  }
  .mobile-scene{
    display:block; margin:0; overflow:hidden;
    aspect-ratio:16 / 9; background:var(--ink-800);
  }
  .mobile-scene img{display:block; width:100%; height:100%; object-fit:cover; object-position:center}
  .bg-trio .mobile-scene{margin-top:clamp(4px,2vw,12px)}
  .nav{display:none}
  .lang{display:none}
  .header-actions .btn{display:none}
  .burger{display:flex}
  .header-actions{margin-left:auto}
  .split,.split-wide{grid-template-columns:1fr; gap:40px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .cta-inner{grid-template-columns:1fr}
  .cta-actions{min-width:0}
  .footer-top{grid-template-columns:1fr 1fr; gap:36px}
  .footer-brand{grid-column:1/-1}
}
/* ── Teléfono ────────────────────────────────────────────────────── */
@media (max-width:640px){
  body{font-size:16px}
  /* El interruptor medía 36 y el botón de menú 42: juntos se veían
     desparejados. Mismo tamaño y mismo tratamiento — leen como un par. */
  .theme-btn{width:42px; height:42px}
  /* Esta regla viene después de `.theme-btn`: sin ella el interruptor del
     menú heredaba 42px y comprimía icono + etiqueta en un círculo. */
  .mobile-nav .theme-btn-wide{
    width:100%; min-height:52px; height:52px; padding:12px 16px;
    display:grid; grid-template-columns:18px max-content;
    justify-content:center; align-items:center; gap:11px;
  }
  .mobile-nav .theme-btn-wide svg{width:17px; height:17px}
  .mobile-nav .theme-btn-wide span[data-theme-label]{white-space:nowrap}
  .burger{border:1px solid var(--line); border-radius:100px}
  .site-header[data-mode="over"] .burger{border-color:rgba(255,255,255,.2)}
  .site-header.is-stuck .burger{border-color:var(--line)}
  .header-actions{gap:10px}
  :root{ --gutter:20px; --seam-h:48px; --seam-blur:11px }
  .brand-mark{--mark:62px; margin-top:-4px; margin-bottom:-16px}
  .brand-name{font-size:19px}
  .brand-sub{font-size:9.5px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:30px}
  .stats{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr; gap:12px; align-items:flex-start}
  .svc-go{display:none}
  .svc-num{margin-bottom:-4px}
  .hero{min-height:auto; padding-block:120px 64px}
  .hero-strip{grid-template-columns:repeat(2,1fr); gap:20px 0}
  .hero-strip div:nth-child(2n){padding-left:20px}
  .hero-strip dd{font-size:12px}
  .scroll-hint{display:none}
  .closing blockquote{font-size:clamp(1.75rem,8vw,2.2rem)}
  /* El clip vuelve, pero el retrato se reencuadra alto y el velo pasa a
     vertical: así la cara queda detrás del titular y no debajo del vídeo. */
  .closing .clip{display:block}
  .footer-top{grid-template-columns:1fr}
  .mobile-nav{padding:96px var(--gutter) 28px; text-align:center}
  .mobile-nav a{position:relative; justify-content:center; font-size:22px; text-align:center}
  .mobile-nav a > span:last-child{position:absolute; right:0}
  .mobile-nav .mobile-meta{align-items:center; text-align:center}
}

/* ---------- 21. Impresión ---------- */
@media print{
  .site-header,.mobile-nav,.hero-media,.scroll-hint,.cta-band,.ribbon,.wave-rule,.seam{display:none !important}
  body{color:#000; background:#fff}
  .bg-dark,.bg-dark-2,.page-hero,.site-footer,.hero{background:#fff !important; color:#000 !important}
  .hero{position:static !important}
  .sweep{-webkit-mask-image:none !important; mask-image:none !important}
}

/* ---------- 22. Lista de comprobación reutilizable ---------- */
.check-list{margin-top:14px; display:flex; flex-direction:column}
.check-list li{display:flex; gap:11px; align-items:flex-start; padding:9px 0; font-size:15px; color:var(--text-2); line-height:1.55}
.check-list li + li{border-top:1px solid var(--line)}
.check-list svg{width:16px; height:16px; flex:none; margin-top:4px; color:var(--accent-600)}
.on-dark .check-list li{color:var(--text-inv-2); border-color:rgba(255,255,255,.10)}
.on-dark .check-list svg{color:var(--accent)}

/* Separador de secciones */
.rule{border:0; border-top:1px solid var(--line); margin-block:clamp(48px,6vw,80px)}
.anchor{scroll-margin-top:112px}

/* ---------- 23. Páginas legales ---------- */
.legal h2{font-size:1.2rem; margin:38px 0 12px; letter-spacing:-.02em}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--text-2); font-size:16px; line-height:1.72; margin-bottom:14px}
.legal a{color:var(--accent-700); text-decoration:underline; text-underline-offset:2px}
.legal h2{scroll-margin-top:112px}
.legal ul{margin:0 0 16px; padding-left:22px; list-style:disc}
.legal li{
  color:var(--text-2); font-size:16px; line-height:1.72;
  margin-bottom:9px; padding-left:4px;
}
.legal li::marker{color:var(--accent-600)}
.legal li strong,.legal p strong{color:var(--text); font-weight:600}
.legal em{font-style:italic}
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em; padding:1px 6px; border-radius:5px;
  background:var(--accent-soft); color:var(--text);
}

/* Dato que el titular debe completar antes de publicar. Se ve, a propósito:
   es un recordatorio, no una decoración. */
.legal-todo{
  background:rgba(214,158,46,.16); color:var(--text);
  border-bottom:1px dashed rgba(214,158,46,.75);
  padding:1px 5px; border-radius:4px; font-size:.94em;
}

/* Índice de la página legal */
.legal-toc{
  margin-bottom:44px; padding:24px 26px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--accent-soft);
}
.legal-toc h2{
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-2); margin:0 0 14px; font-weight:600;
}
.legal-toc ol{margin:0; padding-left:20px; list-style:decimal}
.legal-toc li{margin-bottom:7px; color:var(--text-2); font-size:15px; line-height:1.5}
.legal-toc li::marker{color:var(--text-3); font-size:13px}
.legal-toc a{color:var(--text); text-decoration:none}
.legal-toc a:hover{color:var(--accent-700); text-decoration:underline; text-underline-offset:2px}
@media (max-width:560px){
  .legal-toc{padding:20px 18px}
  .legal-toc ol{padding-left:18px}
}
.legal-note{
  margin-top:44px; padding:22px 24px; border-radius:var(--r);
  background:var(--accent-soft); border:1px solid rgba(11,192,255,.28);
  font-size:14.5px; line-height:1.62; color:var(--text-2);
}
.legal-note strong{color:var(--text); display:block; margin-bottom:6px}

/* Selector de idioma dentro del menú móvil (en el encabezado se oculta bajo 900px) */
.mobile-lang{display:flex; gap:8px; margin-top:28px}
.mobile-lang .lang-btn{
  flex:1; padding:12px 16px; border-radius:100px;
  border:1px solid rgba(255,255,255,.18); background:transparent;
  color:rgba(255,255,255,.62); font-size:14px; letter-spacing:0;
}
.mobile-lang .lang-btn.is-active{background:rgba(11,192,255,.14); border-color:var(--accent); color:#fff}
@media (max-width:900px){
  /* Selector compacto, alineado al lado izquierdo superior del menú. */
  .mobile-nav .mobile-lang{align-self:flex-start; gap:2px; margin:0 0 14px; padding:2px; border:1px solid rgba(255,255,255,.18); border-radius:100px}
  .mobile-nav .mobile-lang .lang-btn{flex:none; min-width:34px; padding:6px 8px; border:0; border-radius:100px; font-size:11px; letter-spacing:.08em}
  .mobile-nav .mobile-lang .lang-btn.is-active{background:rgba(11,192,255,.22); color:#fff}
}

/* ============================================================
   EN ACCIÓN — una llamada, de principio a fin, en 3D
   ------------------------------------------------------------
   Escenario oscuro al estilo de las fichas de producto: el objeto
   (un teléfono) gira mientras la sección queda fija al bajar.
   Por defecto se ve estático (sin JS o con «reducir movimiento»);
   assets/js/flow.js añade .is-live y mueve la plataforma.
   ============================================================ */
.flow{
  --dw:260px; --dh:530px; --dr:40px;
  --k:1;                       /* escala de la órbita de etiquetas */
  --panel:#123A6B;
  position:relative;
  overflow-anchor:none;   /* las etapas cambian de alto: que el navegador no «corrija» el scroll */
  /* El mismo azul de la portada: la sección pertenece al sitio, no a otro estilo */
  background:var(--hero-grad);
  color:var(--bone);
}
.flow-pin{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(80px,9vw,120px) var(--gutter);
  gap:24px;
}
.flow-copy{grid-column:1; grid-row:1; padding:0; max-width:none}
.flow-stage{grid-column:2; grid-row:1; position:relative; height:640px; perspective:1500px; perspective-origin:50% 40%}
.flow-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none}

/* Suelo de rejilla en perspectiva y halo bajo el objeto */
.flow-floor{
  position:absolute; left:-50%; right:-50%; bottom:-38%; height:90%;
  background:
    repeating-linear-gradient(90deg, rgba(11,192,255,.16) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(11,192,255,.16) 0 1px, transparent 1px 72px);
  transform:perspective(620px) rotateX(74deg);
  transform-origin:50% 0;
  -webkit-mask-image:radial-gradient(50% 60% at 50% 0%, #000 0%, transparent 100%);
  mask-image:radial-gradient(50% 60% at 50% 0%, #000 0%, transparent 100%);
  opacity:.8;
}
.flow-halo{
  position:absolute; left:var(--hx,66%); top:54%;
  width:620px; height:620px; margin:-310px 0 0 -310px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(11,192,255,calc(.20 + var(--glow,0) * .16)), rgba(11,192,255,0));
  filter:blur(6px);
}

/* El objeto */
.flow-rig{
  position:absolute; left:50%; top:50%;
  width:var(--dw); height:var(--dh);
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(10deg) rotateY(-24deg);
}
.flow-device{position:absolute; inset:0; transform-style:preserve-3d}
.fd-layer,.fd-front,.fd-back{position:absolute; inset:0; border-radius:var(--dr)}
.fd-layer{
  background:linear-gradient(160deg, #2A4C82 0%, #102443 55%, #0A1730 100%);
  border:1px solid rgba(143,230,255,.14);
  transform:translateZ(calc(var(--z) * 1px));
}
.fd-front{
  transform:translateZ(8px);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:radial-gradient(120% 70% at 50% 0%, #0F2A52 0%, #061126 60%);
  border:9px solid #0B1A33;
  box-shadow:inset 0 0 0 1px rgba(11,192,255,.22), 0 0 60px rgba(11,192,255,.18);
  overflow:hidden;
}
.fd-front::after{ /* reflejo del cristal */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05) 100%);
}
.fd-notch{position:absolute; top:10px; left:50%; width:74px; height:20px; margin-left:-37px; border-radius:20px; background:#030914; z-index:2}
.fd-back{
  transform:translateZ(-8px) rotateY(180deg);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  display:grid; place-items:center;
  background:
    radial-gradient(70% 50% at 50% 42%, rgba(11,192,255,.22), transparent 70%),
    linear-gradient(160deg, #1C4E90 0%, #123A6B 50%, #0A2448 100%);
  border:1px solid rgba(143,230,255,.22);
}
.fd-back img{width:96px; height:96px; filter:drop-shadow(0 8px 24px rgba(11,192,255,.45))}

/* Pantallas */
.scr{
  position:absolute; inset:0; padding:46px 18px 22px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--font-ui); color:#EAF4FF; text-align:center;
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .45s var(--ease), transform .6s var(--ease-out);
}
.scr.is-on{opacity:1; transform:none}
.flow:not(.is-live) .scr[data-scr="1"]{opacity:1; transform:none}
.scr-tag{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8FE6FF}
.scr-tag.is-live{display:inline-flex; align-items:center; gap:7px}
.scr-tag.is-live > i{width:7px; height:7px; border-radius:50%; background:#3BE38B; box-shadow:0 0 10px #3BE38B; animation:flowBlink 1.2s steps(2) infinite}
.scr-name{font-size:19px; font-weight:600; margin-top:4px}
.scr-sub{font-size:13px; color:rgba(234,244,255,.7); font-variant-numeric:tabular-nums}
.scr-line{font-size:11.5px; color:rgba(234,244,255,.55); margin-top:auto}

.scr-ring{position:relative; width:120px; height:120px; margin-top:36px; display:grid; place-items:center}
.scr-ring b{position:relative; width:78px; height:78px; border-radius:50%; display:grid; place-items:center; font-size:24px; font-weight:600;
  background:linear-gradient(150deg, #3074BE, #0A3FB0); box-shadow:0 0 0 1px rgba(143,230,255,.4)}
.scr-ring i{position:absolute; inset:21px; border-radius:50%; border:1.5px solid rgba(11,192,255,.7); animation:flowRing 2.2s var(--ease-out) infinite}
.scr-ring i:nth-child(2){animation-delay:.7s}
.scr-ring i:nth-child(3){animation-delay:1.4s}
.scr-btns{display:flex; gap:64px; margin-top:10px}
.scr-btns i{width:48px; height:48px; border-radius:50%}
.scr-btns .no{background:#E5484D; opacity:.85}
.scr-btns .yes{background:#30C06E; box-shadow:0 0 0 0 rgba(48,192,110,.6); animation:flowAns 1.6s var(--ease) infinite}

.bub{max-width:92%; margin:0; padding:10px 12px; border-radius:14px; font-size:13px; line-height:1.42; text-align:left}
.bub-a{align-self:flex-start; background:rgba(11,192,255,.16); border:1px solid rgba(11,192,255,.34); border-bottom-left-radius:4px}
.bub-c{align-self:flex-end; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-bottom-right-radius:4px}
.scr.is-on .bub{animation:flowPop .5s var(--ease-out) both}
.scr.is-on .bub-c{animation-delay:.45s}
.scr-wave{display:flex; align-items:center; gap:4px; height:46px; margin-top:auto}
.scr-wave i{width:4px; height:100%; border-radius:4px; background:linear-gradient(#8FE6FF,#0BC0FF); transform:scaleY(.25); animation:flowWave 1.1s var(--ease) infinite alternate}
.scr-wave i:nth-child(3n){animation-delay:-.3s}
.scr-wave i:nth-child(3n+1){animation-delay:-.62s}
.scr-wave i:nth-child(4n){animation-duration:.8s}
.scr-chip{font-size:11px; font-weight:600; letter-spacing:.1em; padding:5px 10px; border-radius:20px; border:1px solid rgba(143,230,255,.35); color:#8FE6FF}

.cal{width:100%; margin-top:6px}
.cal-h{display:grid; grid-template-columns:repeat(5,1fr); font-size:10.5px; color:rgba(234,244,255,.6); margin-bottom:6px}
.cal-g{display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(6,38px); gap:4px;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px); padding:2px}
.cal-g i{grid-column:var(--c); grid-row:var(--r); border-radius:6px}
.cal-g .b{background:rgba(143,230,255,.12); border:1px solid rgba(143,230,255,.16)}
.cal-g .new{background:linear-gradient(150deg,#0BC0FF,#0A3FB0); box-shadow:0 0 18px rgba(11,192,255,.6)}
.scr.is-on .cal-g .new{animation:flowDrop .7s .25s var(--ease-out) both}
.scr-ok{display:inline-flex; align-items:center; gap:8px; margin-top:auto; font-size:13px; font-weight:600;
  padding:9px 12px; border-radius:10px; background:rgba(48,192,110,.14); border:1px solid rgba(48,192,110,.4)}
.scr-ok svg{width:16px; height:16px; color:#3BE38B}

.rec{width:100%; margin:8px 0 0; display:grid; gap:8px; text-align:left}
.rec > div{padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(143,230,255,.14)}
.rec dt{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#8FE6FF}
.rec dd{margin:2px 0 0; font-size:13.5px}
.scr.is-on .rec > div{animation:flowPop .45s var(--ease-out) both}
.scr.is-on .rec > div:nth-child(2){animation-delay:.12s}
.scr.is-on .rec > div:nth-child(3){animation-delay:.24s}
.scr.is-on .rec > div:nth-child(4){animation-delay:.36s}

.sum{width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.sum > div{padding:16px 8px 12px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(143,230,255,.16); display:grid; gap:2px}
.sum b{font-size:32px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums}
.sum span{font-size:11.5px; color:rgba(234,244,255,.66)}
.sum .z{background:rgba(11,192,255,.14); border-color:rgba(11,192,255,.5)}
.sum .z b{color:#8FE6FF}

/* Etiquetas que orbitan el objeto, a distinta profundidad */
.flow-chip{
  position:absolute; left:50%; top:50%; white-space:nowrap;
  transform:translate(-50%,-50%) translate3d(calc(var(--x) * var(--k)), calc(var(--y) * var(--k)), var(--cz));
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  font:600 12.5px/1 var(--font-ui); letter-spacing:.02em; color:#DDF6FF;
  padding:10px 14px; border-radius:8px;
  background:rgba(8,26,54,.78); border:1px solid rgba(11,192,255,.30);
  opacity:.22; transition:opacity .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.flow.is-live .flow-chip:not(.is-hot){opacity:.14}
.flow-chip.is-hot{opacity:1; border-color:rgba(11,192,255,.85); box-shadow:0 0 24px rgba(11,192,255,.35)}
.flow:not(.is-live) .flow-chip{opacity:.7}

/* Texto: cabecera y etapas */
.flow .eyebrow{color:#8FE6FF}
.flow-head h2{color:var(--bone); max-width:15ch}
.flow-steps{list-style:none; margin:32px 0 0; padding:0; display:grid; gap:10px}
.flow-step{
  --ch:14px;
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:36px 1fr; column-gap:10px; align-items:baseline;
  padding:16px 20px;
  clip-path:polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  background:rgba(143,230,255,.16);
}
.flow-step::before{
  content:""; position:absolute; inset:1px; z-index:-1;
  clip-path:inherit; background:var(--panel);
}
.flow-n{font:600 12px/1 var(--font-ui); letter-spacing:.12em; color:#8FE6FF; font-variant-numeric:tabular-nums}
.flow-step h3{margin:0; font-size:1.05rem; color:var(--bone)}
.flow-step p{grid-column:2; margin:6px 0 0; font-size:14.5px; line-height:1.55; color:rgba(244,241,234,.78)}
.flow-hud{display:none}

/* ---------- Modo vivo: la sección se fija y el objeto gira ---------- */
.flow.is-live{height:460vh; height:460svh}
.flow.is-live .flow-pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:block; max-width:none; padding:0; overflow:hidden;
}
.flow.is-live .flow-stage{position:absolute; inset:0; height:auto}
.flow.is-live .flow-rig{left:66%; top:52%; will-change:transform}
.flow.is-live .flow-copy{
  position:absolute; inset:0; margin-inline:auto; max-width:var(--maxw);
  padding:clamp(96px,12vh,140px) var(--gutter) 56px;
  display:flex; flex-direction:column; pointer-events:none;
}
.flow.is-live .flow-steps{margin-top:clamp(20px,4vh,40px); width:min(420px,46%); gap:8px}
.flow.is-live .flow-step{background:rgba(143,230,255,.10); transition:background .4s var(--ease), transform .5s var(--ease-out)}
.flow.is-live .flow-step h3{color:rgba(244,241,234,.5); transition:color .4s var(--ease)}
.flow.is-live .flow-step p{
  max-height:0; margin-top:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease-out), opacity .4s var(--ease), margin .5s var(--ease-out);
}
.flow.is-live .flow-step.is-active{background:rgba(11,192,255,.75); transform:translateX(8px)}
.flow.is-live .flow-step.is-active h3{color:var(--bone)}
.flow.is-live .flow-step.is-active p{max-height:120px; margin-top:6px; opacity:1}
.flow.is-live .flow-hud{
  display:flex; align-items:center; gap:16px; margin-top:auto;
  font:600 12px/1 var(--font-ui); letter-spacing:.14em; color:rgba(244,241,234,.6);
}
.flow-count b{color:var(--bone); font-variant-numeric:tabular-nums}
.flow-bar{position:relative; width:160px; height:2px; background:rgba(143,230,255,.2)}
.flow-bar i{position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(var(--p,0)); background:var(--accent); box-shadow:0 0 10px var(--accent)}

@keyframes flowRing{from{transform:scale(1); opacity:.9} to{transform:scale(1.9); opacity:0}}
@keyframes flowAns{0%{box-shadow:0 0 0 0 rgba(48,192,110,.6)} 100%{box-shadow:0 0 0 16px rgba(48,192,110,0)}}
@keyframes flowWave{from{transform:scaleY(.2)} to{transform:scaleY(1)}}
@keyframes flowPop{from{opacity:0; transform:translateY(10px) scale(.96)} to{opacity:1; transform:none}}
@keyframes flowDrop{from{opacity:0; transform:translateY(-40px) scale(1.25)} to{opacity:1; transform:none}}
@keyframes flowBlink{50%{opacity:.25}}

@media (max-width:900px){
  .flow{--k:.52; --panel:#123A6B}
  .flow-pin{grid-template-columns:1fr; padding-block:72px}
  .flow-stage{grid-column:1; grid-row:2; height:560px}
  .flow-stage .flow-rig{transform:translate(-50%,-50%) scale(.9) rotateX(8deg) rotateY(-18deg)}
  .flow-head h2{max-width:none}

  .flow.is-live{height:420vh; height:420svh}
  .flow.is-live .flow-rig{left:50%; top:50%}
  .flow.is-live .flow-copy{padding:76px var(--gutter) 22px}
  .flow.is-live .flow-head{text-align:center}
  .flow.is-live .flow-head .eyebrow{margin-bottom:10px}
  .flow.is-live .flow-head h2{font-size:clamp(1.45rem,6vw,1.9rem); margin-inline:auto; max-width:18ch}
  .flow.is-live .flow-steps{position:relative; width:auto; margin-top:auto; display:block; min-height:118px}
  .flow.is-live .flow-step{position:absolute; left:0; right:0; bottom:0; opacity:0; transform:translateY(12px); transition:opacity .35s var(--ease), transform .45s var(--ease-out)}
  .flow.is-live .flow-step.is-active{opacity:1; transform:none; background:rgba(11,192,255,.75)}
  .flow.is-live .flow-hud{margin-top:14px; justify-content:center}
  .flow-halo{--hx:50%}
  .flow.is-live .flow-chip:not(.is-hot){opacity:0}
}
@media (max-width:560px){
  /* Deja libre la esquina del botón del asistente. */
  .flow.is-live .flow-copy{padding-bottom:88px}
}
@media (prefers-reduced-motion: reduce){
  .scr-ring i,.scr-btns .yes,.scr-wave i,.scr-tag.is-live > i{animation:none}
}

/* ============================================================
   ASISTENTE VOIX — botón flotante y panel de respuestas
   Lo monta assets/js/asistente.js; aquí sólo vive el aspecto.
   ============================================================ */
.vx-launch{
  position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); z-index:90;
  width:62px; height:62px; border-radius:50%; padding:0; cursor:pointer;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, #1C4E90, #0B2346 70%);
  border:1px solid rgba(143,230,255,.45);
  box-shadow:0 12px 32px rgba(2,12,31,.38), 0 0 0 0 rgba(11,192,255,.45);
  animation:vxPulse 3.2s var(--ease) infinite;
  transition:transform .3s var(--ease-out);
}
.vx-launch:hover{transform:translateY(-2px) scale(1.04)}
.vx-launch:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.vx-launch img{width:40px; height:40px; transition:opacity .2s, transform .3s var(--ease-out)}
.vx-launch-x{position:absolute; inset:0; margin:auto; width:20px; height:20px; opacity:0; transform:rotate(-45deg); transition:opacity .2s, transform .3s var(--ease-out)}
.vx-launch-x::before,.vx-launch-x::after{content:""; position:absolute; left:50%; top:0; width:2px; height:20px; margin-left:-1px; border-radius:2px; background:#fff}
.vx-launch-x::before{transform:rotate(45deg)}
.vx-launch-x::after{transform:rotate(-45deg)}
.vx-launch.is-open{animation:none}
.vx-launch.is-open img{opacity:0; transform:scale(.6)}
.vx-launch.is-open .vx-launch-x{opacity:1; transform:none}
body.nav-open .vx-launch, body.nav-open .vx-teaser, body.nav-open .vx-panel{display:none}

.vx-teaser{
  position:fixed; right:max(94px, calc(env(safe-area-inset-right) + 74px)); bottom:max(30px, calc(env(safe-area-inset-bottom) + 10px)); z-index:89;
  max-width:240px; padding:12px 16px; border-radius:14px 14px 4px 14px;
  font:500 14px/1.4 var(--font-ui); text-align:left; color:var(--text); cursor:pointer;
  background:var(--surface); border:1px solid var(--line-strong);
  box-shadow:0 14px 34px rgba(2,12,31,.18);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease-out);
}
.vx-teaser.is-on{opacity:1; transform:none; pointer-events:auto}

.vx-panel{
  position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:96px; z-index:91;
  width:min(380px, calc(100vw - 32px)); height:min(580px, calc(100vh - 128px)); height:min(580px, calc(100dvh - 128px));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:18px; background:var(--surface); color:var(--text);
  border:1px solid var(--line-strong);
  box-shadow:0 30px 80px rgba(2,12,31,.34);
  /* Cerrado: recogido dentro del botón. Abierto (.is-open): tamaño real.
     El origen es el centro del botón, así nace y vuelve a él. */
  transform-origin:calc(100% - 31px) calc(100% + 45px);
  opacity:0; transform:scale(.12); pointer-events:none;
  /* Salida (sin .is-open) algo más rápida que la entrada */
  transition:transform .62s cubic-bezier(.4,0,.2,1), opacity .45s var(--ease);
}
.vx-panel.is-open{opacity:1; transform:none; pointer-events:auto;
  transition:transform .85s cubic-bezier(.22,.85,.25,1.04), opacity .6s var(--ease)}
.vx-panel[hidden]{display:none}
/* El botón «recoge» el panel con un latido */
.vx-launch.is-catch{animation:vxCatch .7s var(--ease-out) .45s}
@keyframes vxCatch{0%{transform:scale(1)} 35%{transform:scale(1.16); box-shadow:0 12px 32px rgba(2,12,31,.38), 0 0 0 10px rgba(11,192,255,.25)} 100%{transform:scale(1)}}
.vx-head{
  display:flex; align-items:center; gap:12px; padding:14px 14px 14px 16px;
  background:linear-gradient(135deg, #1C4E90 0%, #123A6B 55%, #0B2346 100%); color:#fff;
  box-shadow:inset 0 -1px 0 rgba(143,230,255,.25);
}
.vx-ava{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(143,230,255,.3)}
.vx-id{display:grid; gap:2px; flex:1; min-width:0}
.vx-id b{font:600 15px/1.2 var(--font-ui)}
.vx-id small{white-space:nowrap; display:flex; align-items:center; gap:6px; font:500 12px/1.2 var(--font-ui); color:rgba(255,255,255,.72)}
.vx-id small i{width:7px; height:7px; border-radius:50%; background:#3BE38B}
.vx-x{width:38px; height:38px; border-radius:50%; border:0; background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center}
.vx-x:hover{background:rgba(255,255,255,.1)}
.vx-x svg{width:18px; height:18px}

.vx-log{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:18px 14px 8px; display:flex; flex-direction:column; gap:10px; background:var(--paper)}
.vx-msg{margin:0; max-width:88%; padding:10px 13px; font:400 14.5px/1.5 var(--font-ui); border-radius:14px; white-space:pre-line}
.vx-bot{display:flex; flex-direction:column; align-items:flex-start; gap:8px; animation:vxMsg .35s var(--ease-out)}
.vx-bot .vx-msg{background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px}
.vx-user{align-self:flex-end; background:var(--ink-700); color:#fff; border-bottom-right-radius:4px}
.vx-link{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px; text-decoration:none;
  font:600 13.5px/1.2 var(--font-ui); color:var(--accent-700); background:var(--deep-soft);
  border:1px solid color-mix(in srgb, var(--accent-700) 28%, transparent); transition:background .2s, transform .25s var(--ease-out);
}
.vx-link::after{content:"→"; transition:transform .25s var(--ease-out)}
.vx-link:hover{transform:translateY(-1px)}
.vx-link:hover::after{transform:translateX(3px)}
.vx-chips{display:flex; flex-wrap:wrap; gap:6px; max-width:100%}
.vx-chip{
  padding:8px 12px; border-radius:100px; cursor:pointer;
  font:500 13px/1.2 var(--font-ui); color:var(--accent-700);
  background:var(--deep-soft); border:1px solid color-mix(in srgb, var(--accent-700) 30%, transparent);
  transition:background .2s, border-color .2s;
}
.vx-chip:hover{border-color:var(--accent-700)}
.vx-acts{display:grid; gap:6px; width:88%}
.vx-act{
  display:block; padding:10px 14px; border-radius:10px; text-align:center; text-decoration:none;
  font:600 13.5px/1.25 var(--font-ui); color:var(--text);
  border:1px solid var(--line-strong); background:var(--surface);
}
.vx-act:hover{border-color:var(--accent-700)}
.vx-act.is-primary{background:#1FA855; border-color:#1FA855; color:#fff}
.vx-act.is-primary:hover{background:#19954B}
.vx-typing{display:flex; gap:4px; padding:12px 14px; width:max-content; border-radius:14px; border-bottom-left-radius:4px; background:var(--surface); border:1px solid var(--line)}
.vx-typing i{width:6px; height:6px; border-radius:50%; background:var(--text-3); animation:vxDot 1s var(--ease) infinite}
.vx-typing i:nth-child(2){animation-delay:.15s}
.vx-typing i:nth-child(3){animation-delay:.3s}

.vx-form{display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:var(--surface)}
.vx-in{
  flex:1; min-width:0; padding:11px 14px; border-radius:100px;
  font:400 16px/1.2 var(--font-ui); color:var(--text);
  background:var(--paper); border:1px solid var(--line-strong);
}
.vx-in:focus{outline:none; border-color:var(--accent-700); box-shadow:0 0 0 3px var(--deep-soft)}
.vx-send{width:44px; height:44px; flex:none; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; background:var(--ink-700); color:#fff}
:root[data-theme="dark"] .vx-send{background:var(--accent); color:#03203D}
:root[data-theme="dark"] .vx-user{background:#1C4E90}
.vx-send svg{width:18px; height:18px}
.vx-note{margin:0; padding:0 14px 10px; font:400 11px/1.4 var(--font-ui); color:var(--text-3); background:var(--surface)}

@keyframes vxPulse{0%,70%{box-shadow:0 12px 32px rgba(2,12,31,.38), 0 0 0 0 rgba(11,192,255,.45)} 100%{box-shadow:0 12px 32px rgba(2,12,31,.38), 0 0 0 14px rgba(11,192,255,0)}}
@keyframes vxIn{from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none}}
@keyframes vxMsg{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes vxDot{0%,100%{opacity:.3; transform:none} 50%{opacity:1; transform:translateY(-3px)}}

@media (max-width:560px){
  .vx-launch{width:56px; height:56px; right:16px; bottom:max(16px, env(safe-area-inset-bottom))}
  .vx-launch img{width:36px; height:36px}
  .vx-teaser{right:82px; bottom:max(22px, calc(env(safe-area-inset-bottom) + 6px)); max-width:200px}
  /* En teléfono el panel es una hoja inferior a todo lo ancho. */
  .vx-panel{left:0; right:0; bottom:0; width:auto; height:86vh; height:86dvh; border-radius:18px 18px 0 0; border-width:1px 0 0;
    /* En teléfono sube desde abajo y baja al cerrarse */
    transform:translateY(104%); transform-origin:50% 100%; opacity:1;
    transition:transform .62s cubic-bezier(.4,0,.2,1)}
  .vx-panel.is-open{transform:none; transition:transform .85s cubic-bezier(.22,.85,.25,1)}
  body.vx-open .vx-launch{display:none}
  body.vx-open{overflow:hidden}
  .vx-form{padding-bottom:max(10px, env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion: reduce){
  .vx-launch,.vx-launch.is-catch,.vx-panel,.vx-bot,.vx-typing i{animation:none}
  .vx-panel{transition:none}
}
@media print{.vx-launch,.vx-teaser,.vx-panel{display:none}}

/* ============================================================
   CÓMO TRABAJAMOS · 04 — la llamada, en cuatro planos
   .cd-shot[data-shot] se apilan y se funden: sólo el activo
   (.is-on) se ve. El 4 es una computadora dibujada —monitor con
   marco y pie— con el programa de Voix dentro. JS: flow.js.
   ============================================================ */
.call-demo{
  position:relative; margin:26px 0 0; aspect-ratio:16/10;
  border-radius:16px; overflow:hidden; isolation:isolate;
  background:#0A1830; border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(2,12,31,.24);
  font-family:var(--font-ui);
}
.cd-shot{position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease)}
.cd-shot.is-on{opacity:1}
.cd-shot > video,.cd-shot > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cd-shot.is-on > img{animation:cdKen 3s var(--ease) both}  /* leve acercamiento en los planos fijos */
.cd-who{
  position:absolute; left:12px; top:12px; z-index:1;
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:20px;
  font-size:12px; font-weight:600; color:#fff; background:rgba(3,10,25,.7);
}
.cd-who > i{position:relative; width:7px; height:7px; border-radius:50%; background:#3BE38B}
.cd-ring{background:#8FE6FF !important}
.cd-shot.is-on .cd-ring::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #8FE6FF; animation:flowRing 1.1s var(--ease-out) infinite}

/* Plano 4: el escritorio y la computadora */
.cd-desk{
  background:
    radial-gradient(90% 60% at 50% 20%, rgba(48,116,190,.35), transparent 70%),
    linear-gradient(180deg, #DDE6F0 0%, #C9D5E3 72%, #AEBBCB 72.2%, #9FAEC0 100%);
}
.cd-monitor{
  position:absolute; left:6%; right:6%; top:5%; height:74%;
  padding:7px; border-radius:10px; background:#10151F;
  box-shadow:0 18px 40px rgba(2,12,31,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}
.cd-stand{position:absolute; left:50%; top:79%; width:9%; height:10%; margin-left:-4.5%; background:linear-gradient(90deg,#8C97A6,#C3CCD7,#8C97A6)}
.cd-foot{position:absolute; left:50%; top:88.5%; width:26%; height:3.2%; margin-left:-13%; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#C3CCD7,#8C97A6); box-shadow:0 6px 12px rgba(2,12,31,.25)}
.cd-screen{
  position:relative; height:100%; display:flex; flex-direction:column; overflow:hidden;
  border-radius:4px; background:#F4F7FB; color:#0A1B33;
}
.cd-bar{display:flex; align-items:center; gap:10px; padding:6px 10px; font-size:10.5px; background:#0B2346; color:#DDF6FF}
.cd-bar b{font-weight:700; letter-spacing:.02em; white-space:nowrap}
.cd-bar span{opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cd-bar time{margin-left:auto; font-variant-numeric:tabular-nums; color:#8FE6FF}
.cd-app{flex:1; min-height:0; display:grid; grid-template-columns:30% 1fr}
.cd-card{display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px; text-align:center; border-right:1px solid #E1E7EF; background:#fff; font-size:10.5px; color:#5A5E66}
.cd-card b{font-size:11.5px; color:#0A1B33}
.cd-av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:12px; color:#fff; background:linear-gradient(150deg,#3074BE,#0A3FB0); margin-bottom:2px}
.cd-lang{margin-top:2px; padding:2px 7px; border-radius:10px; font-size:9.5px; font-weight:700; color:#0A3FB0; background:rgba(10,63,176,.1)}
.cd-saved{margin-top:auto; display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border-radius:6px; font-size:9.5px; font-weight:700; color:#fff; background:#1FA855; opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease-out)}
.cd-saved.is-on{opacity:1; transform:none}
.cd-saved svg{width:11px; height:11px}
.cd-chat{
  list-style:none; margin:0; padding:8px 10px; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 26px);
  mask-image:linear-gradient(180deg, transparent 0, #000 26px);
}
.cd-chat li{display:none; max-width:88%; padding:5px 8px; border-radius:8px; font-size:10.5px; line-height:1.32}
.cd-chat li.is-on{display:block; animation:flowPop .4s var(--ease-out) both}
.cd-chat b{display:block; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:#0A3FB0; margin-bottom:1px}
.cd-chat span{display:block; margin-top:2px; font-size:.9em; font-style:italic; color:#5A5E66}
.cd-chat .a{align-self:flex-start; background:#E4EEFB; border-bottom-left-radius:2px}
.cd-chat .c{align-self:flex-end; background:#fff; border:1px solid #E1E7EF; border-bottom-right-radius:2px}
.cd-chat .ok{align-self:center; max-width:none; text-align:center; font-weight:700; color:#136B37; background:rgba(31,168,85,.12); border:1px solid rgba(31,168,85,.4)}
.cd-chat .ok svg{display:inline-block; width:11px; height:11px; vertical-align:-1px; margin-right:4px}

/* Sin movimiento: directamente la computadora con la conversación completa */
.call-demo.is-static .cd-shot{opacity:0}
.call-demo.is-static .cd-desk{opacity:1}
.call-demo.is-static .cd-chat li{display:block; animation:none}
.call-demo.is-static .cd-saved{opacity:1; transform:none}

@keyframes cdKen{from{transform:scale(1)} to{transform:scale(1.05)}}

@media (max-width:560px){
  .call-demo{aspect-ratio:4/5}
  .cd-monitor{left:3%; right:3%; top:4%; height:80%}
  .cd-stand{top:84%; height:7%}
  .cd-foot{top:90.5%}
  .cd-app{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .cd-card{flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:6px; padding:6px 8px; border-right:0; border-bottom:1px solid #E1E7EF; text-align:left}
  .cd-av{width:24px; height:24px; font-size:10px; margin:0}
  .cd-saved{margin:0 0 0 auto}
  .cd-chat li{font-size:10px}
}

/* ============================================================
   CÓMO TRABAJAMOS · 01–03 — escenas bajo cada paso
   Imagen o clip + una capa que dibuja el sitio (ficha, guion,
   pizarra). La capa se anima sólo con .is-play (flow.js la pone
   al entrar en pantalla) y se repite cada 10 s.
   ============================================================ */
.proc-scene{
  position:relative; margin:26px 0 0; aspect-ratio:16/10; overflow:hidden;
  border-radius:16px; background:#0A1830;
  border:1px solid var(--line); box-shadow:0 24px 60px rgba(2,12,31,.2);
  font-family:var(--font-ui);
}
.ps-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.proc-scene::after{ /* velo inferior para que las capas se lean */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,10,25,0) 45%, rgba(3,10,25,.45) 100%);
}
.ps-card{
  position:absolute; z-index:2; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.94); color:#0A1B33;
  box-shadow:0 14px 34px rgba(2,12,31,.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.ps-card-h{display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#0A3FB0; margin-bottom:8px}

/* 01 · Ficha que se rellena */
.ps-notes .ps-card{left:14px; bottom:14px; width:min(250px, 56%)}
.ps-notes dl{margin:0; display:grid; gap:5px}
.ps-notes dl > div{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding-bottom:5px; border-bottom:1px solid rgba(10,27,51,.08)}
.ps-notes dl > div:last-child{border-bottom:0; padding-bottom:0}
.ps-notes dt{color:#5A5E66}
.ps-notes dd{margin:0; font-weight:600; text-align:right}

/* 02 · Videollamada + guion */
.ps-pip{position:absolute; z-index:2; top:12px; right:12px; width:28%; aspect-ratio:16/10; border-radius:9px; overflow:hidden; border:2px solid rgba(255,255,255,.85); box-shadow:0 8px 20px rgba(2,12,31,.35)}
.ps-pip video{width:100%; height:100%; object-fit:cover; object-position:70% 30%; display:block}
.ps-pip i{position:absolute; left:6px; bottom:5px; font:600 10px/1 var(--font-ui); font-style:normal; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7)}
.ps-rec{position:absolute; z-index:2; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:20px; background:rgba(3,10,25,.66); color:#fff; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums}
.ps-rec i{width:7px; height:7px; border-radius:50%; background:#E5484D}
.ps-doc{left:14px; bottom:14px; width:min(270px, 60%)}
.ps-doc ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.ps-doc li{position:relative; padding-left:22px; font-size:12.5px; line-height:1.3}
.ps-doc li::before{content:""; position:absolute; left:0; top:0; width:14px; height:14px; border-radius:4px; border:1.5px solid rgba(10,63,176,.4)}
.ps-doc li::after{
  content:""; position:absolute; left:4px; top:2px; width:5px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
}

/* 03 · Pizarra tipo tablet */
.ps-tablet{
  position:absolute; z-index:2; right:14px; bottom:14px; width:min(250px, 48%);
  padding:10px; border-radius:14px; background:#F7F9FC;
  border:6px solid #1A2130; box-shadow:0 16px 36px rgba(2,12,31,.4);
}
.ps-tablet svg{display:block; width:100%; height:auto}
.ps-draw > *{stroke:#0A3FB0; stroke-width:2}
.ps-words text{font:italic 600 11px var(--font-display); fill:#0A1B33; text-anchor:middle}

/* Estado final, sin animación (reducir movimiento o antes de entrar) */
.ps-doc li::after{transform:rotate(45deg) scale(1)}
.ps-doc li::before{background:#0A3FB0; border-color:#0A3FB0}

/* Animación en bucle de 10 s, sólo en pantalla */
@media (prefers-reduced-motion: no-preference){
  .ps-notes.is-play dl > div{animation:psRow 10s var(--ease-out) infinite both}
  .ps-notes.is-play dl > div:nth-child(2){animation-delay:.7s}
  .ps-notes.is-play dl > div:nth-child(3){animation-delay:1.4s}
  .ps-notes.is-play dl > div:nth-child(4){animation-delay:2.1s}

  .ps-meet.is-play .ps-doc li::before{animation:psBox 10s var(--ease) infinite both}
  .ps-meet.is-play .ps-doc li::after{animation:psTick 10s var(--ease-out) infinite both}
  .ps-meet.is-play .ps-doc li:nth-child(2)::before,.ps-meet.is-play .ps-doc li:nth-child(2)::after{animation-delay:.9s}
  .ps-meet.is-play .ps-doc li:nth-child(3)::before,.ps-meet.is-play .ps-doc li:nth-child(3)::after{animation-delay:1.8s}
  .ps-meet.is-play .ps-doc li:nth-child(4)::before,.ps-meet.is-play .ps-doc li:nth-child(4)::after{animation-delay:2.7s}
  .ps-meet.is-play .ps-doc li:nth-child(5)::before,.ps-meet.is-play .ps-doc li:nth-child(5)::after{animation-delay:3.6s}
  .ps-meet.is-play .ps-rec i{animation:flowBlink 1.2s steps(2) infinite}

  .ps-board .ps-draw > *{stroke-dasharray:1; stroke-dashoffset:0}
  .ps-board.is-play .ps-draw > *{animation:psDraw 10s var(--ease) infinite both; animation-delay:var(--d)}
  .ps-board.is-play .ps-words text{animation:psWord 10s var(--ease) infinite both; animation-delay:var(--d)}
}
@keyframes psRow{0%{opacity:0; transform:translateX(-8px)} 6%,88%{opacity:1; transform:none} 96%,100%{opacity:0}}
@keyframes psBox{0%,4%{background:transparent; border-color:rgba(10,63,176,.4)} 8%,90%{background:#0A3FB0; border-color:#0A3FB0} 98%,100%{background:transparent; border-color:rgba(10,63,176,.4)}}
@keyframes psTick{0%,5%{transform:rotate(45deg) scale(0)} 9%,90%{transform:rotate(45deg) scale(1)} 98%,100%{transform:rotate(45deg) scale(0)}}
@keyframes psDraw{0%{stroke-dashoffset:1} 7%,88%{stroke-dashoffset:0} 96%,100%{stroke-dashoffset:1}}
@keyframes psWord{0%,2%{opacity:0} 7%,88%{opacity:1} 96%,100%{opacity:0}}

@media (max-width:560px){
  .proc-scene{aspect-ratio:4/5}
  .ps-media{object-position:60% 50%}
  .ps-card,.ps-tablet{left:10px; right:10px; bottom:10px; width:auto}
}

/* ============================================================
   CIERRE — secuencia en el marco del clip
   .seq-shot se funden uno tras otro (flow.js, data-dur). El último
   es la agenda llena y la curva que sube: panel pequeño, en el azul
   de la propia sección, sobre la escena del doctor desenfocada.
   Sin JS o con «reducir movimiento» se queda el primer plano.
   ============================================================ */
.seq .clip-frame{position:relative}
.seq-shot{position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease)}
.seq-shot.is-on,.seq:not(.is-live) .seq-shot:first-child{opacity:1}
.seq-shot > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sa-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(7px) saturate(.85); transform:scale(1.1)}
.sa-shot::before{content:""; position:absolute; inset:0; z-index:1; background:rgba(var(--azure-rgb),.5)}
:root[data-theme="dark"] .sa-shot::before{background:rgba(6,12,26,.55)}
.sa-wrap{
  position:absolute; z-index:2; inset:11% 10%;
  display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 12px;
  border-radius:12px; background:rgba(var(--azure-rgb),.78);
  border:1px solid rgba(143,230,255,.3); box-shadow:0 12px 30px rgba(2,12,31,.3);
  font-family:var(--font-ui); color:#EAF4FF;
}
:root[data-theme="dark"] .sa-wrap{background:rgba(10,22,44,.82)}
.sa-h{display:block; font-size:8.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8FE6FF; margin-bottom:5px}
.sa-cal,.sa-chart{position:relative; display:flex; flex-direction:column; min-width:0}
.sa-days{display:grid; grid-template-columns:repeat(5,1fr); gap:3px; font-size:7.5px; color:rgba(234,244,255,.65); margin-bottom:3px; text-align:center}
.sa-grid{flex:1; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,1fr); gap:3px}
.sa-grid i{border-radius:3px; background:linear-gradient(150deg,#3AD0FF,#1C4E90); box-shadow:0 0 6px rgba(11,192,255,.3)}
.sa-full{
  position:absolute; left:50%; top:58%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:5px 9px; border-radius:20px; font-size:10px; font-weight:700;
  background:#1FA855; color:#fff; box-shadow:0 6px 16px rgba(31,168,85,.45);
}
.sa-full svg{width:11px; height:11px}
.sa-chart svg{flex:1; width:100%; min-height:0; overflow:visible}
.sa-gridl{stroke:rgba(143,230,255,.16); stroke-width:1; vector-effect:non-scaling-stroke}
.sa-area{fill:rgba(143,230,255,.16)}
.sa-line{fill:none; stroke:#8FE6FF; stroke-width:2.2; vector-effect:non-scaling-stroke; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(11,192,255,.6))}
.sa-dot{fill:#fff; stroke:#0BC0FF; stroke-width:2; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center}
.sa-up{display:inline-flex; align-items:center; gap:4px; margin-top:5px; font-size:9.5px; font-weight:600; color:#6BF0A6}
.sa-up svg{width:12px; height:12px; flex:none}
.sa-note{position:absolute; right:10px; top:9px; font-size:7.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(234,244,255,.5)}

@media (prefers-reduced-motion: no-preference){
  .sa-shot.is-on .sa-grid i{animation:saCell 8.2s var(--ease-out) both; animation-delay:calc(.3s + var(--i) * .1s)}
  .sa-shot.is-on .sa-full{animation:saBadge 8.2s var(--ease-out) both}
  .sa-shot.is-on .sa-line{stroke-dasharray:1; animation:saLine 8.2s var(--ease) both}
  .sa-shot.is-on .sa-area,.sa-shot.is-on .sa-up{animation:saArea 8.2s var(--ease) both}
  .sa-shot.is-on .sa-dot{animation:saDot 8.2s var(--ease-out) both}
}
@keyframes saCell{0%{opacity:0; transform:scale(.4)} 5%,100%{opacity:1; transform:none}}
@keyframes saBadge{0%,36%{opacity:0; transform:translate(-50%,-50%) scale(.7)} 42%,100%{opacity:1; transform:translate(-50%,-50%)}}
@keyframes saLine{0%,8%{stroke-dashoffset:1} 50%,100%{stroke-dashoffset:0}}
@keyframes saArea{0%,32%{opacity:0} 52%,100%{opacity:1}}
@keyframes saDot{0%,48%{opacity:0; transform:scale(0)} 54%,100%{opacity:1; transform:none}}

/* ============================================================
   HERO — la agente de Voix conversando, a la derecha
   El clip se funde con el azul por la izquierda y por abajo, para
   que no se lea como un recuadro pegado. Con «reducir movimiento»
   el vídeo no arranca solo y queda el póster (misma pose).
   ============================================================ */
.hero-agent{
  position:absolute; top:0; right:0; bottom:0; width:min(58%, 900px);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 34%, #000 100%), linear-gradient(180deg, #000 72%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:linear-gradient(90deg, transparent 0%, #000 34%, #000 100%), linear-gradient(180deg, #000 72%, transparent 100%);
}
.hero-agent-video{width:100%; height:100%; object-fit:cover; object-position:58% 22%; filter:saturate(.92)}
/* Un velo azul muy ligero la integra en la paleta de la portada */
.hero-agent::after{content:""; position:absolute; inset:0; background:rgba(var(--azure-rgb),.16); mix-blend-mode:multiply}
@media (max-width:900px){
  /* En teléfono queda detrás del texto como textura, igual que antes la escena */
  .hero-agent{width:100%; -webkit-mask-image:linear-gradient(180deg, #000 40%, transparent 100%); mask-image:linear-gradient(180deg, #000 40%, transparent 100%)}
  .hero-agent-video{object-position:62% 18%}
}

/* ============================================================
   CIERRE — la escena de llamadas de fondo (hero.js), bajo un velo
   en cuña: opaco a la izquierda, donde va el texto.
   ============================================================ */
.closing-net{position:relative; overflow:hidden; background:var(--hero-grad); color:var(--bone); --clip-bg:rgba(255,255,255,.07)}
.closing-media{position:absolute; inset:0; z-index:0}
.closing-media canvas{width:100%; height:100%; display:block}
.closing-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Más claro en el centro, donde vive ahora la escena; firme bajo el texto */
  background:radial-gradient(30% 60% at 50.5% 50%, rgba(var(--scrim-rgb),.18) 0%, rgba(var(--scrim-rgb),.62) 100%);
}
.closing-net > .wrap{position:relative; z-index:2}
@media (max-width:900px){
  .closing-media{opacity:.5}
  .closing-scrim{background:rgba(var(--scrim-rgb),.8)}
}

/* ============================================================
   IDIOMA SIN SALTOS — los elementos que cambian de texto al pasar
   de ES a EN tienen un ancho fijo, medido para el idioma más largo.
   Así al cambiar de idioma sólo cambia el texto: nada se desplaza.
   ============================================================ */
.nav-link{min-width:96px; text-align:center; justify-content:center}
.header-actions > .btn{min-width:134px; justify-content:center}
.hero-cta .btn-primary{min-width:204px; justify-content:center}
.hero-cta .btn-ghost-inv{min-width:244px; justify-content:center}
.closing-actions .btn{justify-content:center}
@media (min-width:901px){
  .closing-actions{width:296px; min-width:0}
}

/* Nosotros: la misma agente conversando, a la derecha de la cabecera */
.page-hero-agent{background:var(--hero-grad)}
/* Páginas interiores: la escena de cada página ocupa toda la cabecera y el azul
   queda encima, semitransparente — más denso a la izquierda, donde va el texto. */
.page-hero-agent .hero-agent{width:min(70%, 1100px); z-index:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 24%); mask-image:linear-gradient(90deg, transparent 0%, #000 24%)}
.page-hero-agent.cab-nosotros .hero-agent{width:min(56%, 860px)}   /* su clip es vertical: más estrecho, sin acercarse de más */
.page-hero-agent img.hero-agent-video{filter:none}                    /* las fijas no llevan filtro: menos carga al pintar */
.page-hero-agent::before{z-index:1; background:linear-gradient(92deg, rgba(var(--scrim-rgb),.88) 0%, rgba(var(--scrim-rgb),.74) 38%, rgba(var(--scrim-rgb),.38) 66%, rgba(var(--scrim-rgb),.28) 100%) !important}
.page-hero-agent > .wrap{position:relative; z-index:2}
@media (max-width:900px){
  .page-hero-agent .hero-agent{width:100%; opacity:.5}
  .page-hero-agent::before{background:rgba(var(--scrim-rgb),.78) !important}
}

/* Aviso de ejemplo ilustrativo (escenas con nombres ficticios) */
.ex-note{margin:12px 0 0; font-size:12.5px; line-height:1.5; font-style:italic; color:var(--text-3)}
.flow .ex-note{color:rgba(244,241,234,.6)}
/* La agente realista es un plano ancho (16:9): ella ocupa la mitad derecha
   del cuadro, mirando a la izquierda. Con 55 % su cara cae hacia el centro de
   la zona visible (medido a 1280, 1440 y 1905 px), fuera del degradado. */
.hero-agent-real{object-position:55% 30%}
@media (max-width:900px){.hero-agent-real{object-position:72% 20%}}

/* ¿Por qué escogernos?: piezas de las pantallas */
.scr[data-scr="0"] .scr-ring{margin-top:6px; width:100px; height:100px}
.scr[data-scr="0"] .scr-ring b{width:64px; height:64px}
.scr.is-on .bub-3{animation-delay:.9s}
.chk{list-style:none; margin:10px 0 0; padding:0; width:100%; display:grid; gap:8px; text-align:left}
.chk li{position:relative; padding:10px 12px 10px 38px; border-radius:10px; font-size:13px; background:rgba(255,255,255,.06); border:1px solid rgba(143,230,255,.16)}
.chk li::before{content:""; position:absolute; left:12px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:5px; background:#0BC0FF}
.chk li::after{content:""; position:absolute; left:17px; top:50%; width:5px; height:9px; margin-top:-6px; border:solid #03203D; border-width:0 2px 2px 0; transform:rotate(45deg)}
.scr.is-on .chk li{animation:flowPop .45s var(--ease-out) both}
.scr.is-on .chk li:nth-child(2){animation-delay:.15s}
.scr.is-on .chk li:nth-child(3){animation-delay:.3s}
.scr.is-on .chk li:nth-child(4){animation-delay:.45s}

/* ============================================================
   TRANSICIONES — páginas que se funden, iconos que responden y
   fondos que se mueven apenas. Todo se apaga con «reducir movimiento».
   ============================================================ */

/* Cambio de página: fundido nativo (Chrome, Edge, Safari recientes) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .4s var(--ease) both}
::view-transition-new(root){animation:vtIn .7s var(--ease) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* Resto de navegadores (.no-vt): la página sale y entra con un fundido */
.no-vt body{animation:vtIn .7s var(--ease) both}
.is-leaving body{opacity:0; transition:opacity .35s var(--ease)}

/* Si la página va en inglés, no se enseña en español mientras se traduce */
.i18n-wait body{opacity:0}
body{transition:opacity .3s var(--ease)}

/* Saltos dentro de la misma página: desplazamiento suave */
html{scroll-behavior:smooth}

/* Iconos que reaccionan al pasar el ratón */
@media (hover:hover){
  .pain-x,.svc-go,.socials a svg,.theme-btn svg,.link-arrow svg,.btn svg,.brand-mark img,.vx-launch img,.cd-who,.ps-rec{
    transition:transform .3s var(--ease-out)
  }
  .pain:hover .pain-x{transform:scale(1.22)}
  .svc:hover .svc-go{transform:scale(1.18) translateX(3px)}
  .socials a:hover svg{transform:scale(1.2)}
  .theme-btn:hover svg{transform:scale(1.18)}
  .link-arrow:hover svg,.btn:hover svg{transform:translateX(3px) scale(1.15)}
  .brand:hover .brand-mark img{transform:scale(1.08) rotate(-4deg)}
  .vx-launch:hover img{transform:scale(1.12)}
  .flow-step:hover .flow-n{transform:scale(1.15)}
  .flow-n{display:inline-block; transition:transform .3s var(--ease-out)}
}

/* Fondos fijos que se desplazan muy despacio («medianamente móviles»).
   La imagen se dibuja un poco mayor que la ventana para que el vaivén no
   destape los bordes. Sólo en escritorio: en táctil ya hay su propio efecto. */
@property --dx{syntax:'<length>'; inherits:false; initial-value:0px}
@property --dy{syntax:'<length>'; inherits:false; initial-value:0px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .bg-fixed{
    background-size:max(110vw, calc(110vh * 16 / 9)) auto;
    background-position:calc(50% + var(--dx)) calc(var(--fixed-y, 50%) + var(--dy));
    animation:bgDrift 26s ease-in-out infinite alternate;
  }
}
@keyframes bgDrift{
  0%{--dx:-1.8vw; --dy:-1.2vh}
  50%{--dx:1.2vw; --dy:1vh}
  100%{--dx:1.8vw; --dy:-.6vh}
}

@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  .no-vt body,.is-leaving body{animation:none; opacity:1}
}

/* Bocadillo de bienvenida, estilo cómic: óvalo y cono en un solo trazado SVG.
   Sustituye a la apertura automática del panel en la portada. */
.vx-teaser{
  right:max(70px, calc(env(safe-area-inset-right) + 50px)); bottom:max(58px, calc(env(safe-area-inset-bottom) + 38px));
  width:300px; height:130px; max-width:none; padding:0; border:0; border-radius:0;
  background:none; box-shadow:none; color:var(--text);
  filter:drop-shadow(0 14px 22px rgba(2,12,31,.22));
  transform:translateY(10px) scale(.55); transform-origin:99% 97%;
  transition:opacity .3s var(--ease), transform .6s cubic-bezier(.34,1.56,.64,1);
}
.vx-bub{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.vx-bub path{
  fill:var(--surface); stroke:var(--ink-700); stroke-width:2.5; vector-effect:non-scaling-stroke;
  stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; fill-opacity:1;
}
.vx-bub-txt{
  position:absolute; left:26px; right:58px; top:16px; bottom:30px;
  display:flex; flex-wrap:wrap; align-content:center; justify-content:center; text-align:center;
  font:600 14.5px/1.36 var(--font-ui);
}
.vx-bub-txt span{display:inline-block; white-space:pre}
.vx-teaser.is-on{transform:none; animation:vxFloat 3.6s ease-in-out 1.8s infinite}
/* Entrada: se dibuja el contorno, se rellena y llegan las palabras */
.vx-teaser.is-on .vx-bub path{animation:vxDraw .7s var(--ease-out) both, vxFill .35s var(--ease) .45s both}
.vx-teaser.is-on .vx-bub-txt span{animation:vxWord .35s var(--ease-out) both; animation-delay:calc(.55s + var(--w) * .07s)}
@keyframes vxDraw{from{stroke-dashoffset:1}}
@keyframes vxFill{from{fill-opacity:0}}
@keyframes vxWord{from{opacity:0; transform:translateY(6px)}}
@keyframes vxFloat{0%,100%{translate:0 0; rotate:0deg} 50%{translate:0 -4px; rotate:-.6deg}}
:root[data-theme="dark"] .vx-bub path{stroke:var(--accent)}
@media (max-width:560px){
  .vx-teaser{right:58px; bottom:max(52px, calc(env(safe-area-inset-bottom) + 36px)); width:250px; height:118px}
  .vx-bub-txt{left:20px; right:48px; top:12px; bottom:28px; font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  .vx-teaser{transition:opacity .2s; transform:none}
  .vx-teaser.is-on,.vx-teaser.is-on .vx-bub path,.vx-teaser.is-on .vx-bub-txt span{animation:none}
}

/* Acabado fotográfico de las agentes (hero y Nosotros): un grano fino que se
   mueve como el de una cámara real y algo menos de saturación. Quita el
   brillo «demasiado perfecto» que delata una imagen generada. */
.hero-agent-video{filter:saturate(.84) contrast(1.03) brightness(.98)}
.hero-agent::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.07;
}
  60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,2%)} 100%{transform:translate(0,0)}
}

/* El mismo acabado fotográfico en todos los clips del sitio: algo menos de
   saturación y un grano fino de cámara. Unifica el aspecto y les quita el
   brillo «demasiado limpio» de la imagen generada. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.clip-frame video,.ps-media,.ps-pip video,.cd-shot > video,.cd-shot > img,.seq-shot > video{filter:saturate(.88) contrast(1.03)}
.clip-frame::after,.proc-scene::before,.cd-shot::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grain); opacity:.06;
}
.cd-shot.cd-desk::after{display:none}      /* la computadora dibujada no lleva grano */
.clip-frame{isolation:isolate}

/* Cabeceras vivas de las páginas interiores: el mismo sistema que la portada y
   Nosotros, con una escena distinta en cada página. Cada una ajusta el encuadre. */
.cab-servicios .hero-agent-video{object-position:78% 35%}
.cab-sectores .hero-agent-video{object-position:60% 40%}
.cab-contacto .hero-agent-video{object-position:70% 30%}
.cab-privacidad .hero-agent-video,.cab-terminos .hero-agent-video{object-position:55% 50%}

/* ============================================================
   CABECERA FIJA DETRÁS DE TODA LA PÁGINA (páginas interiores)
   La escena de la cabecera queda fija en pantalla, con el degradado
   azul de la marca detrás. Las secciones blancas la tapan al pasar;
   las de color (bandas azules, recuadros de contacto, pie) son
   semitransparentes y la dejan ver. Un solo vídeo hace todo el efecto.
   ============================================================ */
.has-fixed-hero::before{   /* base: el azul de la portada, fijo */
  content:""; position:fixed; inset:0; z-index:-2; background:var(--hero-grad); pointer-events:none;
}
.has-fixed-hero .page-hero-agent{background:transparent}
.has-fixed-hero .page-hero-agent .hero-agent{position:fixed; top:0; right:0; bottom:auto; height:100vh; height:100svh; z-index:-1}
/* Secciones blancas o grises: opacas (especificidad 0 para no pisar .bg-soft) */
:where(.has-fixed-hero main > section:not(.page-hero)){background-color:var(--paper)}
/* Secciones de color: semitransparentes */
.has-fixed-hero .bg-dark{background-color:rgba(var(--azure-rgb),.74)}
:root[data-theme="dark"] .has-fixed-hero .bg-dark{background-color:rgba(6,12,26,.72)}
.has-fixed-hero .site-footer{background-color:rgba(var(--azure-rgb),.84)}
:root[data-theme="dark"] .has-fixed-hero .site-footer{background-color:rgba(3,8,18,.86)}
/* La banda «Cuéntenos…» es una ventana de verdad: su sección se vuelve
   transparente y una sombra del color del papel tapa todo lo que queda
   fuera de la banda. Así se ve la MISMA escena fija (vídeo incluido), sin
   una copia de la imagen agrandada al tamaño de la pantalla. */
.has-fixed-hero main > section:has(> .wrap > .cta-band){background-color:transparent; clip-path:inset(0)}
.has-fixed-hero .cta-band{
  background:linear-gradient(100deg, rgba(var(--scrim-rgb),.90) 0%, rgba(var(--scrim-rgb),.78) 50%, rgba(var(--scrim-rgb),.58) 100%);
  box-shadow:0 0 0 100vmax var(--paper);
}
/* Páginas cuya cabecera es una foto fija (Cómo trabajamos): la misma foto
   hace de fondo fijo de toda la página. */
.has-fixed-hero.fx-photo::before{background:var(--fixed-img) center var(--fixed-y,50%) / cover no-repeat, var(--hero-grad)}

/* ---- Index: la agente de la portada queda fija detrás de toda la página
   en escritorio; el 3D y el pie la dejan ver (el cierre es papel). En móvil la
   portada no es sticky (§6) y todo vuelve a ser opaco. */
@media (min-width:901px){
  [data-page="inicio"] .hero-media{position:fixed; inset:0; background:var(--hero-grad)}
  [data-page="inicio"] .site-footer{background-color:rgba(var(--azure-rgb),.86)}
  :root[data-theme="dark"] [data-page="inicio"] .site-footer{background-color:rgba(3,8,18,.88)}
}
/* Su sombra de papel tapa la escena: si la banda entrara con fundido, la
   escena asomaría por todo el blanco durante la entrada. Sólo sube. */
.js .has-fixed-hero .cta-band[data-reveal]{opacity:1}
/* Index: la portada queda detrás de todo; la sección 3D deja de ser opaca
   y la mujer del hero se ve a través de su azul. */
.flow{
  background:radial-gradient(120% 105% at 72% 48%, rgba(var(--scrim-rgb),.62) 0%, rgba(var(--scrim-rgb),.80) 55%, rgba(var(--scrim-rgb),.90) 100%);
}
/* En móvil la portada no es sticky (ver §6): detrás no hay escena, así que
   la sección vuelve a su azul opaco. */
@media (max-width:900px){ .flow{background:var(--hero-grad)} }

/* Cierre del index en papel: misma composición (cita · secuencia · CTA),
   en tinta sobre blanco. La hoja termina con canto redondeado y sombra
   sobre el pie, como la primera hoja empieza sobre la portada. */
.closing-light blockquote{color:var(--text)}
.closing-light blockquote cite,.closing-light .closing-meta{color:var(--text-3)}
.closing-light .closing-foot{border-top-color:var(--line)}
.closing-light .clip-frame{box-shadow:0 26px 60px -28px rgba(2,12,31,.42), 0 0 0 1px var(--line)}
.sheet-bottom{
  border-radius:0 0 clamp(0px, 2.2vw, 28px) clamp(0px, 2.2vw, 28px);
  box-shadow:0 22px 60px rgba(2,12,31,.30);
}
.closing-light .closing-foot{align-items:center}


/* ---- Cita en cristal (Nosotros y el index, antes del cierre) ----
   Misma técnica que la banda «Cuéntenos»: la sección es transparente y
   una sombra de papel tapa todo menos la cita, que es azul translúcido
   con un leve desenfoque: se ve la escena fija detrás, como un cristal. */
.glass-window{position:relative; background-color:var(--paper)}
.has-fixed-hero .glass-window{background-color:transparent; clip-path:inset(0)}
.has-fixed-hero .glass-window .quote{
  background:linear-gradient(100deg, rgba(var(--scrim-rgb),.86) 0%, rgba(var(--scrim-rgb),.72) 55%, rgba(var(--scrim-rgb),.56) 100%);
  -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15);
  box-shadow:0 0 0 100vmax var(--paper);
}
.js .has-fixed-hero .glass-window .quote[data-reveal]{opacity:1}
@media (min-width:901px){
  [data-page="inicio"] .glass-window{background-color:transparent; clip-path:inset(0)}
  [data-page="inicio"] .glass-window .quote{
    background:linear-gradient(100deg, rgba(var(--scrim-rgb),.86) 0%, rgba(var(--scrim-rgb),.72) 55%, rgba(var(--scrim-rgb),.56) 100%);
    -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15);
    box-shadow:0 0 0 100vmax var(--paper);
  }
  .js [data-page="inicio"] .glass-window .quote[data-reveal]{opacity:1}
}
/* El <figure> trae 40px de margen lateral del navegador: en móvil se lo
   come todo y la cita queda en una columna estrecha. */
@media (max-width:600px){ .quote{margin-inline:0} }

/* Nosotros: la banda «Cuéntenos» se queda con la FOTO ESTÁTICA en azul
   medio (no ventana): contrasta con la agente en movimiento de la cabecera
   y de la cita. Decisión del cliente; no unificar con las demás páginas. */
.fx-nosotros main > section:has(> .wrap > .cta-band){background-color:var(--paper); clip-path:none}
.fx-nosotros .cta-band{
  background:linear-gradient(rgba(var(--azure-rgb),.78), rgba(var(--azure-rgb),.78)),
             url("../img/poster/nosotros-agente-auricular.jpg") center 30% / cover fixed;
  box-shadow:none;
}
@media (hover:none){ .fx-nosotros .cta-band{background-attachment:scroll} }
#contact-form{scroll-margin-top:110px}

/* ---- Contacto: carrusel de clientes en la cabecera ----
   Cuatro escenas de 6 s con fundido de ~1 s y un acercamiento lento.
   Retrasos negativos: la primera ya está visible al cargar. */
.cc-stack{position:absolute; inset:0}
.cc-slide{position:absolute; inset:0; opacity:0; animation:ccFade 24s linear infinite both}
.cc-slide:nth-child(1){animation-delay:-1s}
.cc-slide:nth-child(2){animation-delay:5s}
.cc-slide:nth-child(3){animation-delay:11s}
.cc-slide:nth-child(4){animation-delay:17s}
@keyframes ccFade{
  0%{opacity:0; transform:scale(1.07)}
  4.5%{opacity:1}
  25%{opacity:1}
  29.5%{opacity:0; transform:scale(1)}
  100%{opacity:0; transform:scale(1)}
}
/* Con .cab-contacto delante: si no, la regla general de la cabecera
   (.cab-contacto .hero-agent-video) impone el mismo encuadre a todas. */
.cab-contacto .cc-medico{object-position:70% 30%}
.cab-contacto .cc-abogado{object-position:70% 30%}
.cab-contacto .cc-construccion{object-position:28% 30%}
.cab-contacto .cc-gerente{object-position:70% 30%}
@media (prefers-reduced-motion: reduce){
  .cc-slide{animation:none}
  .cc-slide:nth-child(1){opacity:1}
}
/* Aviso de imágenes generadas con IA (AI Act art. 50; publicidad no engañosa) */
.footer-ai{flex-basis:100%; margin:0; font-size:12.5px; line-height:1.5; color:var(--text-inv-3)}
/* La escena fija se encuadra para la altura de la cabecera, no para toda la
   pantalla: en monitores altos (1080 px o más) la cabecera sigue midiendo
   ~700 px y una escena de 100vh quedaba cortada por la mitad (cara fuera). */
.has-fixed-hero .page-hero-agent .hero-agent{height:min(100svh, 780px)}
/* Portada en pantallas altas: el recuadro de la agente crecía en alto pero
   no en ancho (tope de 900px) y el vídeo se recortaba hasta dejarla fuera.
   Ahora el ancho acompaña a la altura (proporción ~1:1, la de 1440×900). */
@media (min-width:901px){
  .hero .hero-agent{width:min(58%, max(900px, 100svh))}
}
@media (min-width:901px){ .hero .hero-agent-real{object-position:62% 30%} }

/* Sectores en móvil: la foto del equipo va recortada a la fila de agentes
   (fuera la agente que, a pantalla completa, parece mirar al compañero de
   enfrente) y bajo el mismo velo azul translúcido que en escritorio. */
@media (max-width:900px){
  .bg-trio .mobile-scene{position:relative; aspect-ratio:4 / 3; max-width:560px; border-radius:var(--r-md, 14px)}
  .bg-trio .mobile-scene img{object-position:50% 45%}
  .bg-trio .mobile-scene::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(var(--azure-rgb),.30) 0%, rgba(var(--azure-rgb),.48) 100%);
  }
}
/* Firefox: sin perspectiva heredada (la lleva el teléfono, ver flow.js) y
   sin will-change, que le hacía reutilizar una textura estirada. */
.flow.is-gecko .flow-stage{perspective:none}
.flow.is-gecko .flow-rig{will-change:auto}

/* ============================================================
   MÓVIL — la persona de la cabecera se ve, no queda de textura
   En vertical, la escena ocupa la parte de arriba de la pantalla
   (nítida) y el texto va debajo sobre un degradado azul. La escena
   sigue fija detrás de las secciones de color, como en escritorio.
   ============================================================ */
@media (max-width:900px){
  /* Portada */
  .hero{padding-top:calc(min(52svh, 470px) + 24px)}
  .hero-media{opacity:1}
  .hero .hero-agent{
    width:100%; height:min(62svh, 560px); bottom:auto;
    -webkit-mask-image:linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .hero .hero-agent::after{background:rgba(var(--azure-rgb),.10)}
  .hero .hero-agent-real{object-position:70% 22%}
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(var(--scrim-rgb),.38) 0%, rgba(var(--scrim-rgb),.10) 22%,
      rgba(var(--scrim-rgb),.20) 38%, rgba(var(--scrim-rgb),.86) 56%,
      rgba(var(--scrim-rgb),.96) 70%, rgba(var(--scrim-rgb),.98) 100%);
  }

  /* Páginas interiores */
  .page-hero-agent{padding-top:calc(min(46svh, 420px) + 20px)}
  .page-hero-agent .hero-agent{
    width:100%; opacity:1;
    -webkit-mask-image:linear-gradient(180deg, #000 58%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 58%, transparent 100%);
  }
  .has-fixed-hero .page-hero-agent .hero-agent{height:min(62svh, 560px)}
  .page-hero-agent::before{
    background:linear-gradient(180deg,
      rgba(var(--scrim-rgb),.42) 0%, rgba(var(--scrim-rgb),.08) 20%,
      rgba(var(--scrim-rgb),.18) 36%, rgba(var(--scrim-rgb),.86) 52%,
      rgba(var(--scrim-rgb),.95) 66%, rgba(var(--scrim-rgb),.97) 100%) !important;
  }
  .cab-servicios .hero-agent-video{object-position:74% 30%}
  .cab-sectores .hero-agent-video{object-position:58% 35%}
  .cab-nosotros .hero-agent-video{object-position:62% 30%}
  .cab-contacto .cc-medico{object-position:76% 25%}
  .cab-contacto .cc-abogado{object-position:72% 25%}
  .cab-contacto .cc-construccion{object-position:44% 25%}
  .cab-contacto .cc-gerente{object-position:70% 25%}

  /* Sección 3D: la agente de la portada detrás, bajo azul translúcido.
     El panel fijo (.flow-pin) ocupa la pantalla mientras dura la sección,
     así que la escena se queda quieta como en escritorio. */
  .flow-pin{isolation:isolate}
  .flow-scene{display:block}
}
@media (max-width:900px){
  /* Nosotros: su clip es casi cuadrado; en vertical debe cubrir todo el ancho */
  .page-hero-agent.cab-nosotros .hero-agent{width:100%}
  .cab-nosotros .hero-agent-video{object-position:60% 18%}
  .cab-sectores .hero-agent-video{object-position:64% 35%}
  /* La barra superior sobre la foto: un poco más de sombra arriba para leer el logo */
  .hero-scrim{background:linear-gradient(180deg,
      rgba(var(--scrim-rgb),.62) 0%, rgba(var(--scrim-rgb),.12) 20%,
      rgba(var(--scrim-rgb),.20) 38%, rgba(var(--scrim-rgb),.86) 56%,
      rgba(var(--scrim-rgb),.96) 70%, rgba(var(--scrim-rgb),.98) 100%)}
  .page-hero-agent::before{background:linear-gradient(180deg,
      rgba(var(--scrim-rgb),.62) 0%, rgba(var(--scrim-rgb),.10) 20%,
      rgba(var(--scrim-rgb),.18) 36%, rgba(var(--scrim-rgb),.86) 52%,
      rgba(var(--scrim-rgb),.95) 66%, rgba(var(--scrim-rgb),.97) 100%) !important}
}
/* Bocadillo del asistente en teléfono: más compacto, tapa menos texto */
@media (max-width:560px){
  .vx-teaser{width:206px; height:98px; right:60px}
  .vx-bub-txt{left:16px; right:38px; top:10px; bottom:24px; font-size:11.5px; line-height:1.3}
}
/* Encuadre calculado para centrar la cara (posición medida en cada imagen):
   p = (f·Wimg − Wcaja/2) / (Wimg − Wcaja). Teléfonos y tabletas por separado. */
@media (max-width:560px){
  .hero .hero-agent-real{object-position:76% 30%}
  .cab-servicios .hero-agent-video{object-position:85% 25%}
  .cab-sectores .hero-agent-video{object-position:100% 30%}
  .cab-nosotros .hero-agent-video{object-position:47% 26%}
  .cab-contacto .cc-medico{object-position:59% 22%}
  .cab-contacto .cc-abogado{object-position:71% 26%}
  .cab-contacto .cc-construccion{object-position:36% 22%}
  .cab-contacto .cc-gerente{object-position:76% 22%}
}
@media (min-width:561px) and (max-width:900px){
  .hero .hero-agent-real{object-position:100% 30%}
  .cab-servicios .hero-agent-video{object-position:100% 25%}
  .cab-sectores .hero-agent-video{object-position:100% 30%}
  .cab-nosotros .hero-agent-video{object-position:50% 24%}
  .cab-contacto .cc-medico{object-position:72% 22%}
  .cab-contacto .cc-abogado{object-position:99% 26%}
  .cab-contacto .cc-construccion{object-position:15% 22%}
  .cab-contacto .cc-gerente{object-position:100% 22%}
}

/* Escena viva detrás del 3D (sólo móvil; en escritorio se ve la portada fija) */
.flow-scene{display:none; position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.flow-scene-video{width:100%; height:100%; object-fit:cover; object-position:76% 30%}
.flow-scene::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--scrim-rgb),.86) 0%, rgba(var(--scrim-rgb),.60) 40%, rgba(var(--scrim-rgb),.68) 70%, rgba(var(--scrim-rgb),.92) 100%)}
@media (min-width:561px) and (max-width:900px){ .flow-scene-video{object-position:100% 30%} }
@media (max-width:900px){ .flow-scene{display:block} }
@media (max-width:560px){ .flow-scene-video{object-position:70% 30%} }
@media (min-width:561px) and (max-width:900px){ .flow-scene-video{object-position:75% 30%} }

/* ============================================================
   MÓVIL Y TABLETA — el mismo efecto que en escritorio
   Una sola escena animada, FIJA y a pantalla completa detrás de toda
   la página; las secciones transparentes son ventanas hacia ella.
   (Sustituye a la escena recortada arriba y al vídeo propio del 3D.)
   ============================================================ */
@media (max-width:900px){
  /* Portada: la escena se queda fija; la sección hace scroll por encima */
  .hero{background:transparent}
  [data-page="inicio"]::before{content:""; position:fixed; inset:0; z-index:-2; background:var(--hero-grad); pointer-events:none}
  .hero .hero-media{position:fixed; inset:0; z-index:-1; opacity:1}
  .hero .hero-agent{width:100%; height:100%; -webkit-mask-image:none; mask-image:none}
  /* Interiores: escena fija a pantalla completa, sin recorte ni fundido */
  .has-fixed-hero .page-hero-agent .hero-agent{height:100vh; height:100svh;
    -webkit-mask-image:none; mask-image:none}
  /* El 3D, el cierre y el pie del inicio vuelven a ser cristal */
  .flow-scene{display:none}
  .flow{background:radial-gradient(120% 105% at 50% 40%, rgba(var(--scrim-rgb),.60) 0%, rgba(var(--scrim-rgb),.78) 55%, rgba(var(--scrim-rgb),.90) 100%)}
  [data-page="inicio"] .site-footer{background-color:rgba(var(--azure-rgb),.86)}
  :root[data-theme="dark"] [data-page="inicio"] .site-footer{background-color:rgba(3,8,18,.88)}
  [data-page="inicio"] .glass-window{background-color:transparent; clip-path:inset(0)}
  [data-page="inicio"] .glass-window .quote{
    background:linear-gradient(100deg, rgba(var(--scrim-rgb),.86) 0%, rgba(var(--scrim-rgb),.70) 100%);
    box-shadow:0 0 0 100vmax var(--paper)}
  .js [data-page="inicio"] .glass-window .quote[data-reveal]{opacity:1}
}
/* Encuadre para una caja de pantalla completa: p = (f·Wimg − Wcaja/2)/(Wimg − Wcaja) */
@media (max-width:560px){
  .hero .hero-agent-real{object-position:70% 30%}
  .cab-servicios .hero-agent-video{object-position:77% 30%}
  .cab-sectores .hero-agent-video{object-position:90% 30%}
  .cab-nosotros .hero-agent-video{object-position:76% 30%}
  .cab-contacto .cc-medico{object-position:57% 25%}
  .cab-contacto .cc-abogado{object-position:66% 25%}
  .cab-contacto .cc-construccion{object-position:39% 25%}
  .cab-contacto .cc-gerente{object-position:70% 25%}
}
@media (min-width:561px) and (max-width:900px){
  .hero .hero-agent-real{object-position:75% 30%}
  .cab-servicios .hero-agent-video{object-position:83% 30%}
  .cab-sectores .hero-agent-video{object-position:99% 30%}
  .cab-nosotros .hero-agent-video{object-position:90% 30%}
  .cab-contacto .cc-medico{object-position:58% 25%}
  .cab-contacto .cc-abogado{object-position:70% 25%}
  .cab-contacto .cc-construccion{object-position:37% 25%}
  .cab-contacto .cc-gerente{object-position:75% 25%}
}
@media (max-width:560px){ .cab-nosotros .hero-agent-video{object-position:33% 30%} }
@media (min-width:561px) and (max-width:900px){ .cab-nosotros .hero-agent-video{object-position:23% 30%} }
@media (max-width:900px){ .bg-fixed::before{background:var(--fixed-tint, rgba(var(--azure-rgb),.74))} }
/* Portada móvil: el velo se mide desde arriba en píxeles (no en % de una
   portada muy alta): foto despejada arriba y azul translúcido desde el texto. */
@media (max-width:900px){
  .hero-scrim{background:linear-gradient(180deg,
    rgba(var(--scrim-rgb),.62) 0px, rgba(var(--scrim-rgb),.12) 110px,
    rgba(var(--scrim-rgb),.18) calc(min(52svh, 470px) - 90px),
    rgba(var(--scrim-rgb),.84) calc(min(52svh, 470px) + 30px),
    rgba(var(--scrim-rgb),.86) 100%)}
}
/* Sin esto el velo (.hero-scrim, absoluto) se medía contra la ventana y sólo
   cubría la primera pantalla de una portada que en móvil mide ~1400px. */
@media (max-width:900px){ .hero{position:relative} }
/* Inicio en teléfono: la pared clara a la derecha de la agente queda fuera
   de la pantalla (formaba una «columna» vertical bajo el azul del pie). */
@media (max-width:560px){ .hero .hero-agent-real{object-position:62% 30%} }
@media (max-width:900px){ .hero .hero-media,.has-fixed-hero .page-hero-agent .hero-agent{will-change:transform} }
/* iPhone (WebKit): mix-blend-mode sobre un vídeo dentro de una capa fija se
   compone por bloques y deja franjas rectas sin teñir (la «columna» clara del
   pie). En móvil, velo normal sin fusión: mismo tono, sin ese fallo. */
@media (max-width:900px){
  .hero-agent::after{mix-blend-mode:normal; background:rgba(var(--azure-rgb),.12)}
}

/* Móvil y tableta: SIN la «ventana» por sombra de 100vmax (cita del inicio y
   banda «Cuéntenos»). Safari de iPhone no recorta bien esas sombras enormes
   y pintaba un rectángulo suelto visible a través del pie. Aquí la sección
   entera es la banda de cristal azul, como el 3D. */
@media (max-width:900px){
  [data-page="inicio"] .glass-window,
  .has-fixed-hero .glass-window,
  .has-fixed-hero:not(.fx-nosotros) main > section:has(> .wrap > .cta-band){
    clip-path:none;
    background:linear-gradient(180deg, rgba(var(--scrim-rgb),.84) 0%, rgba(var(--scrim-rgb),.70) 50%, rgba(var(--scrim-rgb),.84) 100%);
  }
  [data-page="inicio"] .glass-window .quote,
  .has-fixed-hero .glass-window .quote,
  .has-fixed-hero:not(.fx-nosotros) .cta-band{
    box-shadow:none; background:transparent; border-radius:0;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .site-footer::before{display:none}
}
@media (max-width:900px){ .has-fixed-hero:not(.fx-nosotros) .cta-band::before{display:none} }