/* Hoja de estilos del sitio navala.ai.
 *
 * Vivía embebida en un <style> dentro de `index.html`. Se extrajo el 2026-09-09
 * al sumar `contact.html`, que necesita el mismo encabezado, el mismo pie y los
 * mismos tokens: dejarla adentro obligaba a duplicarlos, y dos copias del mismo
 * pie divergen sin que nadie se entere.
 *
 * `assets/legal.css` sigue siendo otra cosa: cubre las páginas legales, que
 * tienen un diseño propio más angosto. No se unificaron.
 *
 * La CSP del sitio (`_headers`) declara `style-src 'self'`, así que servir esto
 * como archivo del mismo origen ya estaba permitido. Y es un paso hacia lo que
 * ese archivo anota como pendiente: sacar `'unsafe-inline'` de style-src exige
 * que ningún HTML lleve estilos en línea — falta `404.html`.
 */

  /* ══════════ tokens ══════════
     La landing tiene un solo aspecto: no sigue el tema del lector. */
  :root{
    --bone:#F4F1EA; --bone-2:#EBE7DD; --white:#FFFFFF;
    --navy:#1C3255; --navy-deep:#132340; --navy-foot:#0E1B31;
    --ink:#1C3255; --ink-2:#5A6476; --ink-3:#5F6776;   /* ver nota de contraste al pie de los tokens */ --ink-body:#3E4C63;
    --on-navy:#F4F1EA; --on-navy-2:#BCCADF; --on-navy-3:#93A7C6;
    --teal:#35C8B4; --teal-soft:#7BE3D3; --green:#00695B;
    --border:#E7E3DA; --border-2:#DCD9D0;
    --sans:"Nunito Sans",-apple-system,BlinkMacSystemFont,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
    /* Sombras en capas: anillo + contacto + media + ambiente. Una sola sombra
       difusa deja las tarjetas pegadas al fondo; cuatro las despegan. */
    /* --ink-3 despeja 4,5:1 sobre las TRES superficies claras: hueso (5,05),
   --bone-2 (4,61) y blanco (5,52). Era #616978, calibrado contra dos, y
   al aparecer --bone-2 —más oscura que ambas— caía a 4,48. Un token al
   límite no avisa cuando le cambian el suelo: si se agrega una superficie
   más oscura que #EBE7DD, hay que volver a medirlo. */
    --sh-card:0 0 0 1px rgba(28,50,85,.04),0 1px 2px rgba(28,50,85,.06),
              0 6px 12px -4px rgba(28,50,85,.09),0 24px 44px -20px rgba(28,50,85,.22);
    --sh-card-hover:0 0 0 1px rgba(28,50,85,.06),0 2px 4px rgba(28,50,85,.07),
              0 12px 22px -6px rgba(28,50,85,.13),0 44px 70px -26px rgba(28,50,85,.3);
    --sh-shot:0 0 0 1px rgba(28,50,85,.09),0 4px 10px -3px rgba(28,50,85,.14),
              0 14px 26px -12px rgba(28,50,85,.2);
    --sh-shot-navy:0 0 0 1px rgba(244,241,234,.14),0 2px 4px rgba(6,15,32,.4),
              0 14px 28px -8px rgba(6,15,32,.5),0 56px 90px -30px rgba(6,15,32,.8);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--sans);
    font-size:17px;line-height:1.6;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility}
  img{max-width:100%}
  a{color:var(--green);text-decoration:none}
  a:hover{color:var(--navy)}

  /* Container queries en vez de media queries: el marco angosto reflowa de
     verdad, no solo la ventana. */
  .page{container-type:inline-size}
  .in{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}

  /* ══════════ tipografía ══════════
     Escala contenida a propósito. El aire entre secciones hace el trabajo que
     antes intentaba hacer el tamaño de letra: si todo grita, nada resalta. */
  .h1{font-size:clamp(2.05rem,3.9cqw,3.25rem);line-height:1.08;letter-spacing:-.032em;
    font-weight:600;margin:0;max-width:19ch;text-wrap:balance}
  .h2{font-size:clamp(1.55rem,2.5cqw,2.1rem);line-height:1.16;letter-spacing:-.026em;
    font-weight:600;margin:0;max-width:22ch;text-wrap:balance}
  .h3{font-size:1rem;font-weight:600;letter-spacing:-.015em;margin:0}
  .p{font-size:1.01rem;line-height:1.65;color:var(--ink-2);margin:0;max-width:56ch}
  .p-lg{font-size:1.06rem;line-height:1.62}
  .kicker{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.72rem;
    font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0 0 18px}
  .kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto}
  .fine{font-size:.9rem;color:var(--ink-3)}

  .blk{padding:clamp(60px,7cqw,104px) 0}
  .blk-tight{padding:clamp(56px,7cqw,96px) 0}

  /* ══════════ navegación ══════════ */
  .nav{position:sticky;top:0;z-index:40;background:rgba(244,241,234,.82);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(28,50,85,.08);
    box-shadow:0 1px 3px rgba(28,50,85,.05),0 8px 24px -14px rgba(28,50,85,.22)}
  .nav-in{max-width:1180px;margin:0 auto;padding:14px clamp(20px,5vw,48px);
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .brand{display:inline-flex;align-items:center}
  .brand img{display:block;width:auto;height:26px}
  .navlinks{display:flex;align-items:center;gap:28px;font-size:.94rem;font-weight:600;color:var(--ink-2)}
  .navlinks a{color:var(--ink-2);white-space:nowrap}
  .navlinks a:hover{color:var(--navy)}
  .navright{display:flex;align-items:center;gap:14px}
  .navlogin{font-size:.94rem;font-weight:600;color:var(--navy);white-space:nowrap}

  /* ══════════ botones ══════════
     Relieve: highlight interno arriba + sombra de contacto corta + ambiente. */
  .btn{display:inline-flex;align-items:center;gap:10px;font-size:.97rem;font-weight:600;
    letter-spacing:-.008em;padding:13px 24px;border-radius:12px;white-space:nowrap;
    transition:transform .2s cubic-bezier(.22,.68,.28,1),background .2s ease}
  .btn-navy{background:var(--navy);color:var(--on-navy);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(28,50,85,.4),
      0 8px 16px -6px rgba(28,50,85,.4),0 22px 40px -16px rgba(28,50,85,.55)}
  .btn-navy:hover{background:#122544;color:var(--on-navy);transform:translateY(-2px)}
  .btn-teal{background:var(--teal);color:#0E2038;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(6,15,32,.3),
      0 8px 16px -6px rgba(53,200,180,.5),0 22px 40px -14px rgba(53,200,180,.6)}
  .btn-teal:hover{background:#4FD8C5;color:#0E2038;transform:translateY(-2px)}
  .btn-ghost{color:var(--on-navy);border:1px solid rgba(244,241,234,.24);padding:13px 18px}
  .btn-ghost:hover{background:rgba(244,241,234,.08);color:var(--on-navy)}
  .btn-sm{font-size:.88rem;padding:9px 15px;border-radius:10px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(28,50,85,.3),
      0 6px 14px -6px rgba(28,50,85,.45)}
  .btn-sm:hover{transform:translateY(-1px)}
  .cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px}

  /* ══════════ bandas navy ══════════
     El corte diagonal es lo que rompe la sensación de bloques apilados. */
  .navy{position:relative;overflow:hidden;background:var(--navy-deep);color:var(--on-navy)}
  .navy .p{color:var(--on-navy-2)}
  .navy .kicker{color:var(--teal-soft)}
  .navy .fine{color:var(--on-navy-3)}
  .navy .h1,.navy .h2{color:var(--on-navy)}
  .navy-flat{background:var(--navy)}
  .hero{padding:clamp(56px,7cqw,104px) 0 clamp(78px,10cqw,150px);
    clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 5.5cqw))}
  .close-blk{padding:clamp(94px,11cqw,164px) 0 clamp(72px,8cqw,120px);
    clip-path:polygon(0 5.5cqw,100% 0,100% 100%,0 100%);text-align:center}
  .close-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
  .close-in .h2{font-size:clamp(1.7rem,2.9cqw,2.45rem);line-height:1.12;letter-spacing:-.03em;max-width:26ch}
  .glow-a,.glow-b,.grid-fade,.grain,.gl{position:absolute;pointer-events:none}
  /* Grano. No es animación: es lo que rompe el degradado liso del navy. Un
     degradado grande sin textura se lee como plástico y el ojo detecta las
     bandas de compresión; el ruido las tapa y el fondo pasa a sentirse como
     una superficie. Procedural (feTurbulence en data-URI): ni un pedido de red
     ni un archivo que mantener.
     Sin `mix-blend-mode`. `overlay` sobre un navy casi negro equivale a un
     multiply, así que no aportaba nada; el ruido gris aplicado directo aclara
     apenas las zonas oscuras, que es justo lo que se quiere ver. */
  .grain{inset:0;opacity:.06;    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    background-size:200px 200px}
  .glow{inset:-10% -5% 0}
  /* Dos manchas independientes en vez de una sola capa que se traslada entera.
     Con duraciones distintas (26s y 34s), direcciones cruzadas y un desfase
     negativo, las dos nunca están en la misma posición relativa: la luz MUTA
     en lugar de desplazarse. Los recorridos son de ~2%, así que mirando fijo
     no se ve moverse — se nota al volver a la página y encontrarla distinta. */
  /* Tamaños en % y no en px, para que escalen con el hero en cualquier ancho.
     Y sobredimensionados a propósito (105-125%): la caída a `transparent` tiene
     que terminar FUERA del cuadro. Si el degradado se apaga adentro, su borde
     entra en pantalla al desplazarse y se lee como una costura que se corre. */
  .glow-a{inset:-10% -5% 0;will-change:transform,opacity;background:
    radial-gradient(92% 96% at 4% 0%, rgba(53,200,180,.2), transparent 54%)}
  .glow-b{inset:-10% -5% 0;will-change:transform,opacity;background:
    radial-gradient(88% 104% at 96% 8%, rgba(76,116,182,.32), transparent 56%)}
  @media (prefers-reduced-motion:no-preference){
    .glow-a{animation:driftA 22s ease-in-out infinite alternate}
    .glow-b{animation:driftB 29s ease-in-out infinite alternate -11s}
  }
  /* La amplitud va en ESCALA y OPACIDAD, no en desplazamiento. Un degradado
     radial no tiene contorno, así que moverlo es invisible hasta que el
     recorrido es tan grande que arrastra su propio borde a la pantalla — y ahí
     deja de leerse como luz y se lee como una mancha corriéndose. El traslado
     queda en 4%, apenas para descentrar el crecimiento. */
  @keyframes driftA{
    from{transform:translate3d(-2%,1%,0) scale(1);opacity:.62}
    to{transform:translate3d(3%,-2%,0) scale(1.16);opacity:1}}
  @keyframes driftB{
    from{transform:translate3d(2%,-1%,0) scale(1.15);opacity:1}
    to{transform:translate3d(-3%,2%,0) scale(1);opacity:.6}}
  /* La grilla estaba al 6% con una máscara de 72%x62% anclada arriba a la
     izquierda: en pantallas anchas quedaba concentrada en una esquina y era
     invisible. Al 11% y con la máscara cubriendo casi todo el ancho, se lee
     como un plano técnico detrás del titular sin competir con el texto. */
  .grid-fade{inset:0;background-image:
    linear-gradient(rgba(244,241,234,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,234,.075) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(126% 86% at 32% 4%,#000 26%,transparent 88%);
    mask-image:radial-gradient(126% 86% at 32% 4%,#000 26%,transparent 88%)}
  /* Las bandas navy usan el mismo material que la portada, no un degradado
     propio cada una: dos manchas que MUTAN por escala y opacidad (la deriva se
     reusa, con duraciones y desfases distintos para que no latan juntas) y
     grano encima. La grilla se queda solo en la portada — repetirla en cada
     banda la vuelve decoración y deja de leerse como el plano técnico detrás
     del titular.
     Medidas en % y sobredimensionadas por la misma razón que en el hero: la
     caída a `transparent` tiene que terminar fuera del cuadro. Las de antes
     estaban en px (760x420, 820x460) y en pantalla ancha quedaban chicas y
     descentradas, justo el error que ya estaba anotado. */
  .gl{inset:-10% -5% 0;will-change:transform,opacity}
  @media (prefers-reduced-motion:no-preference){
    .gl-1{animation:driftA 24s ease-in-out infinite alternate}
    .gl-2{animation:driftB 31s ease-in-out infinite alternate -13s}
  }
  /* banda 4 · la última palabra */
  .side-1{background:radial-gradient(106% 120% at 88% 2%, rgba(53,200,180,.14), transparent 72%)}
  .side-2{background:radial-gradient(112% 118% at 4% 98%, rgba(76,116,182,.2), transparent 74%)}
  /* banda 8 · cierre. Las manchas se apoyan en el corte diagonal. */
  .close-1{background:radial-gradient(116% 124% at 50% 118%, rgba(53,200,180,.18), transparent 70%)}
  .close-2{background:radial-gradient(110% 126% at 8% -12%, rgba(76,116,182,.26), transparent 72%)}
  /* La grilla también baja a las dos bandas, con la máscara movida en cada una
     para que la ventana de luz caiga donde está el texto y no repita el mismo
     encuadre tres veces: en la banda 4 el contenido pesa a la izquierda, y el
     cierre está centrado y bajo. */
  .grid-4{-webkit-mask-image:radial-gradient(108% 104% at 20% 14%,#000 16%,transparent 78%);
    mask-image:radial-gradient(108% 104% at 20% 14%,#000 16%,transparent 78%)}
  .grid-8{-webkit-mask-image:radial-gradient(104% 118% at 50% 92%,#000 14%,transparent 76%);
    mask-image:radial-gradient(104% 118% at 50% 92%,#000 14%,transparent 76%)}
  .rel{position:relative}

  /* ══════════ portada ══════════ */
  .hero-grid{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(32px,5cqw,64px)}
  .hero-copy{flex:1 1 440px;min-width:0}
  .hero-shot{flex:1 1 460px;min-width:0;position:relative}
  .pill{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;padding:7px 14px 7px 11px;
    border:1px solid rgba(53,200,180,.32);background:rgba(53,200,180,.1);border-radius:999px;
    font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--teal-soft);white-space:nowrap}
  .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);
    box-shadow:0 0 0 4px rgba(53,200,180,.22);flex:0 0 auto}
  .ticks{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;
    gap:10px 26px;font-size:.92rem;color:var(--on-navy-3)}
  .ticks li{display:flex;align-items:center;gap:8px}
  .ticks li::before{content:"✓";color:var(--teal);font-weight:600}

  /* Ventana de producto: cromo + sombra en cinco capas. Nada flota suelto. */
  .win{position:relative;border-radius:14px;overflow:hidden;background:var(--white);
    box-shadow:0 0 0 1px rgba(244,241,234,.14),0 2px 4px rgba(6,15,32,.4),
      0 12px 24px -8px rgba(6,15,32,.5),0 40px 70px -20px rgba(6,15,32,.7),
      0 90px 130px -50px rgba(6,15,32,.9)}
  .win::after{content:"";position:absolute;inset:0;border-radius:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5);pointer-events:none}
  .win-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;
    background:#E9E5DC;border-bottom:1px solid #DAD5CA}
  .win-bar i{width:9px;height:9px;border-radius:50%;background:#C9C3B6}
  .win-url{margin-left:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:#6B6759}
  .win img{display:block;width:100%;height:auto}
  /* Anotación sobre el mockup. Pastilla esmerilada: el mismo lenguaje que la
     barra de navegación y los chips del hero, así que no introduce un material
     nuevo. Un check, no un punto que late: lo que se afirma es «ya está
     escrita», no «está pasando ahora». */
  .chip{position:absolute;left:-18px;bottom:-20px;margin:0;display:inline-flex;align-items:center;gap:10px;
    padding:9px 16px 9px 12px;border-radius:999px;background:rgba(14,27,49,.82);
    backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(244,241,234,.14),
      0 10px 24px -8px rgba(6,15,32,.7),0 24px 48px -20px rgba(6,15,32,.9)}
  .chip-ico{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
    border-radius:50%;background:rgba(53,200,180,.18);flex:0 0 auto}
  .chip-ico::before{content:"";width:8px;height:4px;border-left:1.5px solid var(--teal);
    border-bottom:1.5px solid var(--teal);transform:rotate(-45deg) translate(1px,-1px)}
  .chip b{font-size:.88rem;font-weight:600;letter-spacing:-.01em;color:var(--on-navy);white-space:nowrap}
  .chip-sep{width:1px;height:13px;background:rgba(244,241,234,.22);flex:0 0 auto}
  .chip small{font-size:.84rem;color:var(--on-navy-2);white-space:nowrap}

  .channels{margin-top:clamp(48px,6cqw,84px);border-top:1px solid rgba(244,241,234,.14);
    padding:26px 0 30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
  .channels-label{margin:0;font-family:var(--mono);font-size:.68rem;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--teal-soft)}
  .tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
  .tags li{font-size:.9rem;font-weight:600;color:#DCE5F1;background:rgba(244,241,234,.08);
    border:1px solid rgba(244,241,234,.14);border-radius:999px;padding:8px 16px}
  .tags li.soon{color:var(--on-navy-3);background:transparent;border:1px dashed rgba(244,241,234,.22)}

  /* rotador — mismo mecanismo que ya tenías */
  /* El subrayado va como FONDO de cada palabra, no como `text-decoration`.
     El rotador necesita `overflow:hidden` para recortar las palabras que entran
     y salen — y ese recorte se llevaba también el subrayado, que vive por debajo
     de la línea base: entero en teléfono, y todo salvo una franja en escritorio,
     que lo hacía parecer intencional. Un fondo se pinta sobre la caja del propio
     elemento y el `overflow` del padre no lo toca.
     `justify-self:start` suelta las palabras del ancho de la grilla para que la
     barra mida lo que mide cada una, como hacía el subrayado. */
  .rot{display:inline-grid;vertical-align:baseline;overflow:hidden}
  .rot > span{grid-area:1/1;justify-self:start;opacity:0;transform:translateY(.44em);
    white-space:nowrap;
    background:linear-gradient(var(--teal),var(--teal)) bottom left/100% .115em no-repeat}
  /* El grosor va en `em`, no en px: el titular escala de 33px en teléfono a
     52px en escritorio, y con 6px fijos la barra ocupaba 18,3% de la letra
     en el chico contra 11,5% en el grande — la misma barra leyéndose como
     dos pesos distintos. `.115em` mantiene la proporción del escritorio,
     que es donde se diseñó. */
  .rot > span.on{opacity:1;transform:translateY(0)}
  @media (prefers-reduced-motion:no-preference){
    .rot > span{transition:opacity .4s ease,transform .4s cubic-bezier(.22,.68,.28,1)}
    .rot > span.off{opacity:0;transform:translateY(-.44em)}
  }
  @media (prefers-reduced-motion:reduce){
    .rot > span{transition:none} .rot > span:not(.on){display:none}
  }
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* ══════════ declaración ══════════ */
  .stmt-row{display:flex;flex-wrap:wrap;gap:clamp(28px,4cqw,56px);align-items:flex-start;
    border-left:4px solid var(--teal);padding-left:clamp(20px,3cqw,36px)}
  .stmt-row .h2{flex:1 1 380px;max-width:none}
  .stmt-row .p{flex:1 1 340px;font-size:1.02rem;max-width:none}

  /* ══════════ secciones claras ══════════
     Tinte radial para que el hueso no quede liso. En % y sobredimensionados,
     por la misma razón que las manchas del navy: en px (1100x620, 800x520) en
     pantalla ancha la mancha quedaba chica y su caída a `transparent` terminaba
     ADENTRO del cuadro, así que se leía como un parche con contorno en vez de
     un tinte parejo.
     La primera capa es un desvanecido de hueso sobre los primeros 140px: sin
     él, el tinte arranca a intensidad plena justo en el borde superior y —ahora
     que cubre todo el ancho— contra la sección de arriba, que es hueso puro,
     dibuja una línea recta de lado a lado. Con el desvanecido entra desde cero.
     El borde inferior no lo necesita: abajo hay navy. */
  .tint-a{position:relative;background:
    linear-gradient(180deg,var(--bone),rgba(244,241,234,0) 140px),
    radial-gradient(96% 108% at 84% -6%, rgba(53,200,180,.13), transparent 68%),
    radial-gradient(88% 104% at 0% 96%, rgba(28,50,85,.07), transparent 70%),
    var(--bone)}
  .tint-b{position:relative;background:
    radial-gradient(92% 110% at 6% -4%, rgba(53,200,180,.12), transparent 66%),var(--bone)}
  /* Plano en #EBE7DD, sin rampa. La rampa arrancaba en #F4F1EA — el mismo hueso
     de la sección de arriba — y el cambio de color recién llegaba al 34% de
     alto, así que el borde superior no existía. Plano, el escalón contra la
     banda de arriba es el mismo que el de abajo contra preguntas, en espejo: la
     zona de precios queda delimitada por color en sus dos aristas. */
  .tint-c{position:relative;background:var(--bone-2);
    box-shadow:inset 0 1px 0 rgba(28,50,85,.06)}

  /* Paneles quietos, no losas elevadas. La sombra en 4 capas y el radio de 18px
     les daban el mismo peso que las tarjetas de precios — y esas tienen que
     pesar, porque ahí se decide algo. Acá el contenido es descriptivo: la
     elevación baja a un borde y un realce interno, el blanco se transluce sobre
     el tinte de la sección en vez de taparlo, y el cuerpo baja de .96 a .9rem.
     El filete pasa de degradado verde→turquesa a una línea turquesa corta: el
     degradado era el detalle más decorativo de la página. */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
    gap:16px;margin-top:40px}
  .card{background:rgba(255,255,255,.66);border:1px solid rgba(28,50,85,.08);
    border-radius:14px;padding:24px 24px 26px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
    transition:background .25s ease,border-color .25s ease}
  .card:hover{background:var(--white);border-color:rgba(28,50,85,.14)}
  .card-rule{display:block;width:22px;height:2px;border-radius:2px;
    background:var(--teal);margin-bottom:16px}
  /* `.card p.ct` y no `.ct`: la descripción se estila con `.card p`, que es
     clase + tipo y le gana a una clase sola. Con `.ct` el label salía a 14.4px
     y sin margen inferior — mono en mayúsculas al tamaño del cuerpo y pegado a
     la descripción. */
  .card p.ct{margin:0 0 8px;font-family:var(--mono);font-size:.64rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
  .card p{margin:0;font-size:.9rem;line-height:1.62;color:var(--ink-body)}

  /* ══════════ banda de la última palabra ══════════ */
  .split{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(32px,5cqw,60px)}
  .split > div:first-child{flex:1 1 400px;min-width:0}
  .split > div:last-child{flex:1 1 420px;min-width:0}
  .shot-navy{border-radius:14px;overflow:hidden;background:var(--white);box-shadow:var(--sh-shot-navy)}
  .shot-navy img{display:block;width:100%;height:auto}
  .support{list-style:none;margin:clamp(36px,4cqw,56px) 0 0;padding:0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
  .support li{background:rgba(244,241,234,.05);border:1px solid rgba(244,241,234,.13);
    border-radius:14px;padding:20px 22px;font-size:.94rem;line-height:1.56;color:#CBD7E9}

  /* ══════════ pasos ══════════ */
  /* Mismo lenguaje que las tarjetas de producto: panel translúcido, borde y
     realce interno en vez de la sombra en 4 capas, radio 14px, cuerpo a .9rem.
     Los planes NO entran en esto — ahí se decide algo y tienen que pesar. */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
    gap:16px;margin-top:40px}
  .step{background:rgba(255,255,255,.66);border:1px solid rgba(28,50,85,.08);
    border-radius:14px;padding:20px 20px 24px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
    transition:background .25s ease,border-color .25s ease}
  .step:hover{background:var(--white);border-color:rgba(28,50,85,.14)}
  /* La captura sí conserva su sombra: es la única cosa del bloque que tiene que
     leerse como un objeto y no como una superficie. */
  .step-shot{border-radius:10px;overflow:hidden;background:var(--white);
    box-shadow:var(--sh-shot);margin-bottom:18px}
  .step-shot img{display:block;width:100%;height:auto}
  .step-h{margin:0 0 7px;display:flex;align-items:baseline;gap:9px}
  .step-n{font-family:var(--mono);font-size:1rem;font-weight:600;color:var(--green);line-height:1}
  .step-h .h3{font-size:.95rem}
  .step p{margin:0;font-size:.9rem;line-height:1.62;color:var(--ink-2)}

  /* ══════════ planes ══════════ */
  .price-notes{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}
  .price-notes p{margin:0;font-size:.98rem;color:var(--ink-body);display:flex;align-items:center;gap:9px}
  .price-notes p::before{content:"✓";color:var(--green);font-weight:600}
  .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
    gap:20px;align-items:start;margin-top:48px}
  .plan{background:var(--white);border:1px solid var(--border-2);border-radius:18px;
    padding:30px 28px 32px;display:flex;flex-direction:column;gap:16px;
    box-shadow:0 1px 2px rgba(28,50,85,.05),0 8px 16px -6px rgba(28,50,85,.09),
      0 28px 48px -24px rgba(28,50,85,.2)}
  /* El plan del medio sobresale: es la decisión que queremos que se lea primero. */
  .plan.mid{position:relative;background:var(--navy);color:var(--on-navy);border-color:var(--navy);
    border-radius:20px;padding:34px 28px 36px;transform:translateY(-10px);
    box-shadow:0 2px 4px rgba(28,50,85,.2),0 14px 28px -8px rgba(28,50,85,.34),
      0 48px 80px -30px rgba(28,50,85,.6)}
  .plan-n{margin:0;font-size:.98rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
  .plan.mid .plan-n{color:var(--on-navy)}
  .tag{position:absolute;top:-12px;left:28px;font-family:var(--mono);font-size:.62rem;
    font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--teal);
    color:#0E2038;border-radius:6px;padding:5px 9px;
    box-shadow:0 4px 12px -4px rgba(53,200,180,.7)}
  .plan-price{margin:0;font-size:1.95rem;font-weight:600;letter-spacing:-.032em;
    line-height:1;color:var(--ink)}
  .plan.mid .plan-price{font-size:2.2rem;color:var(--on-navy)}
  .plan-price small{font-size:.86rem;font-weight:600;letter-spacing:0;color:#6E7788}
  .plan.mid .plan-price small{color:var(--on-navy-3)}
  .plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
  .plan li{font-size:.93rem;line-height:1.5;color:var(--ink-body);display:flex;gap:11px}
  .plan li::before{content:"·";color:var(--green);font-weight:600;flex:0 0 auto}
  .plan.mid li{color:#DCE5F1}
  .plan.mid li::before{color:var(--teal)}
  .plan li.x{color:var(--ink);font-weight:600}
  .plan li.x::before{content:"+"}
  .plan.mid li.x{color:var(--on-navy)}
  .plan li:not(.x) + li.x{margin-top:6px;padding-top:14px;border-top:1px solid #E6E2D9}
  .plan.mid li:not(.x) + li.x{border-top-color:rgba(244,241,234,.16)}
  .plan .extra{margin:auto 0 0;padding-top:22px;font-size:.9rem;color:var(--ink-3)}
  .plan.mid .extra{color:var(--on-navy-3)}
  .notes{display:flex;flex-wrap:wrap;gap:20px;margin-top:32px;align-items:stretch}
  .notes p{flex:1 1 380px;margin:0;font-size:.95rem;line-height:1.62;color:var(--ink-2);
    background:var(--bone);border:1px solid var(--border-2);border-radius:16px;padding:22px 24px}
  .notes p.dashed{color:var(--ink-body);border:1px dashed #C9C3B6}
  .plancta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px}

  /* ══════════ preguntas ══════════ */
  /* Título y descripción ARRIBA, preguntas abajo a todo el ancho. En dos
     columnas la aside quedaba fija mientras el acordeón se recorría: dos
     líneas de texto flotando al lado de una lista larga, y medio ancho muerto
     bajo el título. Apilado no hay nada que se quede atrás, y las respuestas
     igual se frenan en 68ch, así que la línea no se vuelve ilegible. */
  .faq-grid{display:block}
  .faq-aside{margin-bottom:clamp(28px,3cqw,40px)}
  .faq-aside .h2{font-size:clamp(1.45rem,2.3cqw,1.9rem);line-height:1.18;max-width:24ch}
  .faq-aside .p{margin-top:14px;font-size:1rem;line-height:1.62}
  .faq{display:flex;flex-direction:column;gap:12px}
  details{background:var(--white);border:1px solid var(--border);border-radius:12px;
    padding:4px 22px;box-shadow:0 1px 2px rgba(28,50,85,.05),0 4px 10px -4px rgba(28,50,85,.08);
    transition:box-shadow .3s ease,border-color .3s ease}
  /* La abierta se levanta un poco: marca dónde estás parado sin mover nada de
     lugar. Solo sombra y borde — cualquier transform correría el texto. */
  details[open]{border-color:#D8D3C7;
    box-shadow:0 0 0 1px rgba(28,50,85,.04),0 2px 4px rgba(28,50,85,.06),
      0 10px 20px -6px rgba(28,50,85,.12),0 28px 48px -22px rgba(28,50,85,.24)}
  summary{list-style:none;cursor:pointer;padding:18px 0;font-size:.99rem;font-weight:600;
    letter-spacing:-.01em;line-height:1.45;color:var(--ink);position:relative;padding-right:34px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;
    border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
    transform:translateY(-70%) rotate(45deg);transition:transform .22s ease}
  details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
  details .a{margin:0;padding:0 0 20px;font-size:.95rem;line-height:1.65;
    color:var(--ink-2);max-width:68ch}

  /* ══════════ pie ══════════ */
  /* El pie es la única banda navy sin manchas: mide 44px de alto útil, no hay
     lugar para que una mancha crezca sin verse como un halo pegado al borde.
     Lleva grano, que es lo que le saca el plano al navy liso. */
  .foot{position:relative;overflow:hidden;background:var(--navy-foot);color:var(--on-navy-3);padding:44px 0}
  .foot-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
  .foot-brand{display:flex;align-items:center;gap:14px}
  .foot-brand img{display:block;height:22px;width:auto}
  .foot-name{font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:var(--on-navy)}
  .foot-legal{font-size:.86rem;color:#7488A6}
  .foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:22px;font-size:.92rem;font-weight:600}
  /* La opacidad se eligió mirando la línea dentro del pie, no en una muestra
     aislada: a .2 quedaba en 1.81:1 contra el navy — por debajo del texto más
     tenue de la misma banda, que está en 4.77:1 — y no se veía. */
  .foot-sep{width:1px;height:15px;background:rgba(244,241,234,.29);flex:0 0 auto}
  /* El grupo existe con un solo ícono a propósito: su `gap` es el que va a
     separar al segundo cuando llegue. El ícono toma el color con `currentColor`,
     así que acompaña el hover del enlace sin una regla aparte, y `display:block`
     en el svg saca el hueco de línea base que deja un elemento en línea. */
  .foot-social{display:flex;align-items:center;gap:15px}
  .foot-ig{display:inline-flex;align-items:center;color:var(--on-navy-2)}
  .foot-ig:hover{color:var(--on-navy)}
  .foot-ig svg{display:block}
  .foot-links a{color:var(--on-navy-2)}
  .foot-links a:hover{color:var(--on-navy)}

  /* ══════════ foco y saltos ══════════ */
  .saltar{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--on-navy);
    padding:12px 18px;border-radius:0 0 8px 0;font-weight:600;z-index:99}
  .saltar:focus{left:0}
  a:focus-visible,summary:focus-visible,.saltar:focus-visible{
    outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
  .navy a:focus-visible,.foot a:focus-visible{outline-color:var(--teal)}

  /* ─── teléfono ─── */
  @container (max-width: 760px){
    /* En teléfono los tintes se van: están en % de los DOS ejes, y con la
       sección de ~2000px de alto la elipse se vuelve una banda pegada al borde
       izquierdo que baja a la vista. Hueso liso y punto — sin tinte no hace
       falta el desvanecido de arriba de `tint-a`. */
    .tint-a,.tint-b{background:var(--bone)}
    /* Los cuatro enlaces se quedan y se acomodan en dos líneas. Antes se
       ocultaban detrás de un «☰» que no abría nada, así que el visitante en
       teléfono perdía la navegación entera. Dos líneas de enlaces cuestan
       28px de alto; un menú desplegable cuesta estado, foco atrapado y una
       tecla Escape que alguien se olvida de cablear. */
    .nav-in{gap:10px 16px}
    .navlinks{order:3;flex-basis:100%;justify-content:flex-start;gap:8px 20px;
      flex-wrap:wrap;font-size:.9rem}
    .hero{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 8cqw))}
    .close-blk{clip-path:polygon(0 8cqw,100% 0,100% 100%,0 100%)}
    .chip{left:auto;right:8px;bottom:-16px;padding:8px 13px 8px 10px;gap:8px}
    .chip small,.chip-sep{display:none}
    .stmt-row{border-left-width:3px}
    .plan.mid{transform:none}
    .cta{flex-direction:column;align-items:stretch}
    .btn{justify-content:center}
    .ticks{gap:8px 18px;font-size:.88rem}
    .channels{gap:12px 18px}
  }