/* PaperNext · hoja compartida (copiada de la portada). */

/* ═══════════════════════════════════════════════════════════════
   PaperNext — sistema visual
   Blanco y negro absolutos. El acento NO es fijo: lo define el rubro
   elegido, y con él cambia la página entera.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --tinta:   #1D1D1F;
  --tinta-2: #6E6E73;
  --tinta-3: #A1A1A6;
  --lienzo:  #FFFFFF;
  --nivel:   #F5F5F7;
  --nivel-2: #EBEBEF;
  --filo:    rgba(0,0,0,.08);
  --filo-2:  rgba(0,0,0,.14);

  /* Acento del rubro (lo reescribe el selector) */
  --ac:   #2563EB;
  --ac-2: #5B8DF7;
  --ac-3: 37,99,235;

  --sombra:   0 4px 14px rgba(0,0,0,.05), 0 24px 60px -32px rgba(0,0,0,.24);
  --sombra-a: 0 10px 30px rgba(0,0,0,.07), 0 60px 110px -50px rgba(0,0,0,.35);
  --r-g: 30px; --r-m: 20px; --r-s: 14px;
  --borde: clamp(20px, 5vw, 40px);
  --col: 1160px;
  --e: cubic-bezier(.22,1,.32,1);
  --e-suave: cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #F5F5F7; --tinta-2: #98989D; --tinta-3: #636366;
    --lienzo: #000000; --nivel: #0E0E10; --nivel-2: #1A1A1D;
    --filo: rgba(255,255,255,.10); --filo-2: rgba(255,255,255,.18);
    --sombra: 0 4px 14px rgba(0,0,0,.6), 0 24px 60px -32px rgba(0,0,0,1);
    --sombra-a: 0 10px 30px rgba(0,0,0,.7), 0 60px 110px -50px rgba(0,0,0,1);
  }
}
[data-theme="dark"] {
  --tinta: #F5F5F7; --tinta-2: #98989D; --tinta-3: #636366;
  --lienzo: #000000; --nivel: #0E0E10; --nivel-2: #1A1A1D;
  --filo: rgba(255,255,255,.10); --filo-2: rgba(255,255,255,.18);
  --sombra: 0 4px 14px rgba(0,0,0,.6), 0 24px 60px -32px rgba(0,0,0,1);
  --sombra-a: 0 10px 30px rgba(0,0,0,.7), 0 60px 110px -50px rgba(0,0,0,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--lienzo); color: var(--tinta);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.5; letter-spacing: -.011em;
  overflow-x: hidden;

  /*
   * EL SUAVIZADO VA AL REVÉS SEGÚN EL FONDO.
   *
   * `antialiased` estaba puesto para toda la página y adelgaza el texto
   * OSCURO SOBRE FONDO CLARO en macOS: está pensado justo para lo contrario.
   * A 13-15 px —el pie, la lista de los planes, las descripciones— las letras
   * quedaban grises y sin filo, y se leía como una imagen mal escalada.
   *
   * La regla correcta es por contraste, no por gusto:
   *   · tinta oscura sobre fondo claro → suavizado del sistema (subpíxeles)
   *   · texto claro sobre fondo oscuro → `antialiased` (escala de grises)
   *
   * Por eso acá va `auto` y más abajo se devuelve `antialiased` a las
   * secciones negras y al tema oscuro, que son los dos casos de texto claro.
   */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

/* Texto claro sobre fondo oscuro: ahí sí manda la escala de grises. */
.negro, .negro * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[data-theme="dark"] body, [data-theme="dark"] body * {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body, :root:not([data-theme="light"]) body * {
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }
}
::selection { background: var(--ac); color: #fff; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 4px; border-radius: 8px; }
svg { display: block; }

/* ── Tipografía ─────────────────────────────────────────────── */
h1,h2,h3,h4 { margin: 0; font-weight: 800; text-wrap: balance; }
.t-mega { font-size: clamp(58px, 12.4vw, 168px); line-height: .9; letter-spacing: -.05em; }
.t-gr   { font-size: clamp(34px, 5.8vw, 72px);  line-height: 1.02; letter-spacing: -.036em; }
.t-md   { font-size: clamp(23px, 2.9vw, 34px);  line-height: 1.12; letter-spacing: -.027em; font-weight: 700; }
.t-sm   { font-size: 20px; line-height: 1.26; letter-spacing: -.02em; font-weight: 700; }
.sub    { font-size: clamp(18px, 2.05vw, 24px); line-height: 1.42; letter-spacing: -.014em;
          font-weight: 400; color: var(--tinta-2); max-width: 36ch; }
.p      { font-size: 17px; line-height: 1.56; color: var(--tinta-2); margin: 0; max-width: 48ch; }
.p-s    { font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); margin: 0; }
.ojo    { font-size: 13px; font-weight: 700; color: var(--ac); letter-spacing: -.005em; margin: 0 0 16px; }
/* La cita iba en una serif itálica que desentonaba con todo lo demás. Su
   peso ahora lo da el TAMAÑO y un trazo muy fino de la misma familia: se
   lee como una declaración, no como un adorno de otra época. */
.cita { font-weight: 200; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.22;
  letter-spacing: -.032em; margin: 0; }
.cita em { font-style: normal; font-weight: 500; }


.env { max-width: var(--col); margin: 0 auto; padding: 0 var(--borde); }
.env--a { max-width: 840px; }
.aire   { padding: clamp(78px, 11vw, 150px) 0; }
.aire-b { padding: clamp(58px, 8vw, 108px) 0; }
.centro { text-align: center; }
.centro .sub, .centro .p { margin-left: auto; margin-right: auto; }

/* ── Botones y enlaces ──────────────────────────────────────── */
.link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--ac); font-size: 17px; font-weight: 600; }
.link svg { width: 15px; height: 15px; transition: transform .34s var(--e); }
.link:hover svg { transform: translateX(4px); }
.link:hover span { text-decoration: underline; text-underline-offset: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.012em;
  padding: 14px 28px; border-radius: 980px; border: 0; cursor: pointer;
  background: var(--ac); color: #fff; position: relative; overflow: hidden;
  transition: transform .3s var(--e), box-shadow .3s var(--e);
  box-shadow: 0 6px 22px -10px rgba(var(--ac-3), .85);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(var(--ac-3), .95); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 17px; height: 17px; }
/* WhatsApp lleva SU verde, no el del rubro: es una marca ajena y la gente la
   reconoce por el color antes que por el texto. */
.btn--wa { background: #25D366; color: #08301A; box-shadow: 0 6px 22px -10px rgba(37,211,102,.9); }
.btn--wa:hover { background: #1FBE5B; box-shadow: 0 14px 34px -12px rgba(37,211,102,.95); }
/* Doble clase a propósito: `.nav__cta` se declara más abajo con el color del
   rubro y, a igual especificidad, ganaba por orden. WhatsApp va SIEMPRE en su
   verde, cambie el rubro que cambie. */
.nav__cta.nav__cta--wa { background: #25D366; color: #08301A;
  display: inline-flex; align-items: center; gap: 7px; }
.nav__cta.nav__cta--wa:hover { background: #1FBE5B; }
.nav__cta.nav__cta--wa svg { width: 14px; height: 14px; }
.btn--linea { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--filo-2); }
.btn--linea:hover { box-shadow: inset 0 0 0 1.5px var(--ac); color: var(--ac); transform: translateY(-2px); }

/* ── Barra de progreso de lectura ───────────────────────────── */
.progreso {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 90; width: 0;
  background: linear-gradient(90deg, var(--ac), var(--ac-2));
  transition: width .1s linear;
}

/* ── Navegación ─────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 70; height: 56px;
  background: color-mix(in srgb, var(--lienzo) 74%, transparent);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.abajo { border-bottom-color: var(--filo); }
.nav__in { max-width: var(--col); margin: 0 auto; padding: 0 var(--borde); height: 100%;
  display: flex; align-items: center; gap: 26px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.logo__pn { display: block; height: 44px; width: auto; flex: none; }
.logo__pn--osc { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo__pn--cla { display: none; }
  :root:not([data-theme="light"]) .logo__pn--osc { display: block; }
}
[data-theme="dark"] .logo__pn--cla { display: none; }
[data-theme="dark"] .logo__pn--osc { display: block; }
.pie .logo__pn { height: 74px; margin-bottom: 4px; }
@media (max-width: 760px) { .logo__pn { height: 36px; } }
.logo u { text-decoration: none; font-size: 10.5px; font-weight: 700; color: var(--tinta-3);
  letter-spacing: -.01em; align-self: center; padding-left: 1px; }
@media (max-width: 480px) { .logo u { display: none; } }
.nav__m { display: flex; gap: 28px; margin: 0 auto; }
.nav__m a { font-size: 13px; font-weight: 600; text-decoration: none; opacity: .78;
  white-space: nowrap; transition: opacity .2s; }
.nav__m a:hover { opacity: 1; }
.nav__d { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.nav__rubro {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700;
  padding: 6px 13px 6px 9px; border-radius: 980px; background: rgba(var(--ac-3), .12);
  color: var(--ac); border: 0; cursor: pointer; font-family: inherit;
  transition: background-color .25s;
}
.nav__rubro:hover { background: rgba(var(--ac-3), .2); }
.nav__rubro svg { width: 16px; height: 16px; flex: none; }
/* Menú del rubro: se abre desde la propia pastilla, con las opciones
   entrando escalonadas. Es el segundo camino para cambiar de rubro —el
   primero es el selector del héroe— y sirve cuando ya bajaste. */
.rmenu { position: relative; }
.nav__rubro .chev { width: 12px; height: 12px; opacity: .7;
  transition: transform .34s var(--e); }
.nav__rubro[aria-expanded="true"] .chev { transform: rotate(180deg); }
.rlista {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 80;
  min-width: 232px; padding: 7px; border-radius: 20px;
  /* Sólido a propósito: sobre el tablero del héroe, un panel translúcido
     dejaba ver las filas de la tabla y las opciones se volvían ilegibles. */
  background: var(--lienzo);
  box-shadow: inset 0 0 0 1px var(--filo), var(--sombra-a);
  opacity: 0; transform: translateY(-10px) scale(.96); transform-origin: top right;
  pointer-events: none; visibility: hidden;
  transition: opacity .3s var(--e), transform .38s var(--e), visibility 0s .38s;
}
.rlista.abierta { opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .28s var(--e), transform .42s var(--e), visibility 0s; }
.op {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 14px; background: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; letter-spacing: -.014em; color: var(--tinta); text-align: left;
  opacity: 0; transform: translateY(-6px);
  transition: background-color .2s, opacity .34s var(--e), transform .34s var(--e);
}
.rlista.abierta .op { opacity: 1; transform: none; }
/* Escalonado: cada opción entra un poco después que la anterior, lo que da
   la sensación de que el menú se despliega en vez de aparecer de golpe. */
.rlista.abierta .op:nth-child(1) { transition-delay: .02s; }
.rlista.abierta .op:nth-child(2) { transition-delay: .05s; }
.rlista.abierta .op:nth-child(3) { transition-delay: .08s; }
.rlista.abierta .op:nth-child(4) { transition-delay: .11s; }
.rlista.abierta .op:nth-child(5) { transition-delay: .14s; }
.rlista.abierta .op:nth-child(6) { transition-delay: .17s; }
.op:hover { background: var(--nivel); }
.op > svg:first-child { width: 18px; height: 18px; flex: none; color: var(--tinta-2); }
.op b { flex: 1; font-weight: 700; }
.op .tic { width: 15px; height: 15px; color: var(--ac); opacity: 0; transform: scale(.6);
  transition: opacity .3s var(--e), transform .3s var(--e); }
.op[aria-checked="true"] { color: var(--ac); }
.op[aria-checked="true"] > svg:first-child { color: var(--ac); }
.op[aria-checked="true"] .tic { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rlista, .rlista .op { transition: none; }
}

.nav__cta { font-size: 13px; font-weight: 700; text-decoration: none; color: #fff;
  background: var(--ac); padding: 8px 16px; border-radius: 980px; transition: background-color .25s; }
.nav__cta:hover { background: var(--ac-2); }
.tema { width: 32px; height: 32px; border: 0; background: none; color: var(--tinta-2); cursor: pointer;
  padding: 0; display: grid; place-items: center; border-radius: 50%; transition: color .2s, background-color .2s; }
.tema:hover { color: var(--tinta); background: var(--nivel); }
.tema svg { width: 16px; height: 16px; }
.ico-sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sol { display: block; }
  :root:not([data-theme="light"]) .ico-luna { display: none; }
}
[data-theme="dark"] .ico-sol { display: block; }
[data-theme="dark"] .ico-luna { display: none; }
[data-theme="light"] .ico-sol { display: none; }
[data-theme="light"] .ico-luna { display: block; }
@media (max-width: 1000px) { .nav__m { display: none; } }
@media (max-width: 560px) { .nav__rubro span { display: none; } }

/* ── Héroe ──────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 0; text-align: center; overflow: hidden; }
/* Hojas que se van: pocas piezas grandes, a trazo, subiendo en diagonal.
   OJO CON EL NOMBRE: esta clase se llamaba «campo», igual que las etiquetas
   del formulario de contacto, y les imponía position:absolute y 780px de
   alto. El formulario aparecía roto y vacío. Un nombre por cosa.
   Dice lo mismo que el titular sin escribirlo. La máscara abre un claro en
   el centro para que el texto nunca compita con el fondo. */
.hojas {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  width: min(1600px, 132vw); height: 780px; z-index: 0; pointer-events: none;
  /* La banda visible termina justo debajo del titular: la hoja emerge desde
     detrás del texto, sube y se tritura arriba. Sin este recorte, una hoja
     blanca y opaca cruzaba por encima del párrafo y se leía como un error. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 80%);
}
.hero__in { position: relative; z-index: 1; }

.insignia {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 8px;
  border-radius: 980px; background: color-mix(in srgb, var(--lienzo) 62%, transparent);
  box-shadow: inset 0 0 0 1px var(--filo); backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 600; color: var(--tinta-2); margin-bottom: 26px;
}
.insignia u { text-decoration: none; color: var(--ac); font-weight: 800; }
.insignia s { text-decoration: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ac); display: grid; place-items: center; color: #fff; }
.insignia s svg { width: 11px; height: 11px; }

/* ── Coreografía del titular ──────────────────────────────────
   Dos entradas con carácter opuesto, que es lo que hace la escena:
     0.15s  «Paper?» viene DESDE EL FONDO: empieza pequeño y desenfocado
            y avanza hacia el frente hasta quedar nítido.
     1.50s  se apaga y retrocede: queda descartado.
     1.70s  «NEXT!» ENTRA CORRIENDO de izquierda a derecha, con estelas
            detrás, pasa de largo un poco y frena en seco.
   Dura menos de tres segundos y no se repite. */
.titular { position: relative; }
.titular .linea { display: block; }

/* — Acto 1: el fondo se acerca — */
.titular .pal { display: inline-block; }
.titular .pal > i {
  display: inline-block; font-style: normal;
  transform: scale(.28); opacity: 0; filter: blur(14px);
  animation: acercarse 1s cubic-bezier(.2,.75,.25,1) .15s forwards;
}
@keyframes acercarse {
  60%  { opacity: 1; filter: blur(2px); }
  100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* Cumplida su función, la pregunta se retira. */
.titular .linea--1 { animation: descartar .8s var(--e) 1.5s forwards; transform-origin: center center; }
@keyframes descartar {
  to { opacity: .3; transform: scale(.88) translateY(-.04em); }
}

/* — Acto 2: la respuesta llega corriendo — */
.titular .linea--2 { color: var(--ac); letter-spacing: -.04em; position: relative;
  display: block; padding-bottom: .08em; }
.corre { display: inline-block; position: relative;
  transform: translateX(-135%); opacity: 0;
  animation: entrarCorriendo .9s cubic-bezier(.14,.86,.2,1.03) 1.7s forwards; }
/* Pasa de largo un 4 % y frena: sin ese exceso la llegada se siente
   amortiguada, no una frenada. */
/* NOMBRE PROPIO: más abajo hay otra animación llamada «correr», la de la cinta que
   se desplaza. Al declararse después, ganaba él —las reglas de animación no
   tienen especificidad, manda la última— y NEXT! terminaba invisible. */
@keyframes entrarCorriendo {
  0%   { transform: translateX(-135%); opacity: 0; }
  22%  { opacity: 1; }
  78%  { transform: translateX(4%); }
  100% { transform: translateX(0); opacity: 1; }
}
.palabra { display: inline-block; }

/* Estelas: cuatro filetes que salen por detrás y se borran al frenar. Son
   lo que convierte un desplazamiento en una carrera. */
.estelas { position: absolute; right: 100%; top: 0; bottom: 0; width: 46vw;
  pointer-events: none; display: flex; flex-direction: column;
  justify-content: center; gap: .09em; padding-right: .1em; }
.estelas i { display: block; height: .055em; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ac));
  transform-origin: right center; transform: scaleX(0); opacity: 0;
  animation: estela .78s cubic-bezier(.2,.8,.3,1) 1.72s forwards; }
.estelas i:nth-child(1) { width: 52%; animation-delay: 1.70s; }
.estelas i:nth-child(2) { width: 88%; animation-delay: 1.74s; }
.estelas i:nth-child(3) { width: 66%; animation-delay: 1.78s; }
.estelas i:nth-child(4) { width: 40%; animation-delay: 1.82s; }
@keyframes estela {
  0%   { transform: scaleX(0); opacity: 0; }
  35%  { transform: scaleX(1); opacity: .75; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* En línea, «Adiós» y la palabra que rota no se alineaban: un contenedor
   con overflow:hidden deja de exponer su línea base y el navegador la
   sintetiza en el borde inferior. La solución no es tocar vertical-align,
   es sacar ambos de la línea de texto y centrarlos en una fila. */
.ticker { display: flex; justify-content: center; align-items: center; gap: .3em;
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; color: var(--tinta-2);
  margin: 0 0 24px; letter-spacing: -.02em; line-height: 1.3;
  opacity: 0; animation: aparecer .8s var(--e) .5s forwards; }
@keyframes aparecer { to { opacity: 1; } }
/* El ancho lo fija el JS midiendo la frase más larga. Sin eso, «Adiós» se
   desplazaría en cada cambio y la línea nunca quedaría quieta. */
.ticker__c { position: relative; display: block; height: 1.3em; overflow: hidden;
  color: var(--tinta); font-weight: 600; flex: none; }
.ticker__c > span { position: absolute; inset: 0; display: flex; align-items: center;
  white-space: nowrap; }
.ticker__c > span { grid-area: 1 / 1; transition: transform .6s var(--e), opacity .6s var(--e);
  text-decoration: line-through; text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(var(--ac-3), .85); }
.ticker__c > span.sale { transform: translateY(-105%); opacity: 0; }
.ticker__c > span.entra { transform: translateY(105%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .titular .pal > i { animation: none; transform: none; opacity: 1; filter: none; }
  .raya-a, .raya-b { animation: none; stroke-dashoffset: 0; }
  .titular .linea--1 { animation: none; opacity: .3; }
  .corre { animation: none; transform: none; opacity: 1; }
  .estelas { display: none; }
  .ticker { animation: none; opacity: 1; }
  .ticker__c > span { transition: none; }
}
.hero h1 .ac, .hero h1 .ac > i { color: var(--ac); transition: color .6s var(--e-suave); }
.hero__acc { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* Carrusel de letras: la palabra del rubro cambia sola */
.rueda { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1em; }
.rueda > span { grid-area: 1/1; transition: opacity .5s var(--e), transform .5s var(--e); }
.rueda > span[aria-hidden="true"] { opacity: 0; transform: translateY(-.85em); }

/* Una línea con una flecha que baja: sin ella, la fila de rubros se leía
   como una lista de a quién sirve el producto, no como algo que se toca. La
   flecha se mueve despacio y en bucle —es el único elemento del héroe que
   no para— porque su trabajo es justamente llamar la atención. */
.pista-rubro { display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 40px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ac);
  letter-spacing: -.01em; }
.pista-rubro svg { width: 15px; height: 15px; animation: bajar 1.9s ease-in-out infinite; }
@keyframes bajar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3.5px); }
}
/* Al pasar el ratón por la fila, la pista se apaga: ya cumplió su función.
   El combinador va en este sentido porque la pista está ANTES del selector;
   `.selector:hover + .pista-rubro` no habría casado con nada. */
.pista-rubro { transition: opacity .4s var(--e-suave); }
.pista-rubro:has(+ .selector:hover) { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .pista-rubro svg { animation: none; } }

/* Selector de rubro: UNA sola fila, como un control segmentado. En dos
   filas las seis opciones se leían como etiquetas sueltas; en una, se leen
   como un conmutador y se entiende de inmediato que son excluyentes.
   En pantallas estrechas la fila se desliza en horizontal con encaje, que
   es el gesto natural del móvil y no necesita JavaScript. */
.selector {
  margin: 12px auto 0; display: flex; gap: 4px; width: max-content; max-width: 100%;
  padding: 5px; border-radius: 980px; background: var(--nivel);
  box-shadow: inset 0 0 0 1px var(--filo);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.selector::-webkit-scrollbar { display: none; }
.rb {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; flex: none;
  border-radius: 980px; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.014em; color: var(--tinta-2);
  background: transparent; scroll-snap-align: center;
  transition: color .3s var(--e), background-color .35s var(--e), box-shadow .35s var(--e);
}
.rb svg { width: 17px; height: 17px; opacity: .6; transition: opacity .3s; }
.rb:hover { color: var(--tinta); background: var(--lienzo); box-shadow: var(--sombra); }
.rb:hover svg { opacity: .9; }
.rb[aria-pressed="true"] {
  color: #fff; background: var(--ac); box-shadow: 0 6px 18px -8px rgba(var(--ac-3), .9);
}
.rb[aria-pressed="true"] svg { opacity: 1; }
@media (max-width: 900px) {
  .selector { width: 100%; justify-content: flex-start; border-radius: 22px; }
}

/* ── Escena de dispositivos ─────────────────────────────────── */
.escena { position: relative; max-width: 1060px; margin: clamp(46px, 6vw, 80px) auto 0;
  padding-bottom: clamp(10px, 2vw, 22px); }
.ventana { border-radius: var(--r-g); overflow: hidden; box-shadow: var(--sombra-a);
  background: var(--lienzo); border: 1px solid var(--filo); }
.ventana__b { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px;
  background: var(--nivel); border-bottom: 1px solid var(--filo); }
.ventana__b i { width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-3); opacity: .4; }
.ventana__u { margin: 0 auto; font-size: 11.5px; font-weight: 600; color: var(--tinta-3);
  background: var(--lienzo); padding: 5px 16px; border-radius: 980px; display: flex; align-items: center; gap: 6px; }
.ventana__u svg { width: 10px; height: 10px; }

.tablero { display: grid; grid-template-columns: 186px 1fr; min-height: 372px; text-align: left; }
@media (max-width: 760px) { .tablero { grid-template-columns: 1fr; } .tablero__lat { display: none; } }
.tablero__lat { padding: 18px 14px; border-right: 1px solid var(--filo); background: var(--nivel); }
.mnu { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--tinta-2); transition: background-color .3s, color .3s; }
.mnu svg { width: 16px; height: 16px; flex: none; opacity: .6; }
.mnu.on { background: var(--lienzo); color: var(--tinta); box-shadow: var(--sombra); }
.mnu.on svg { color: var(--ac); opacity: 1; }
.tablero__cue { padding: 20px 22px 22px; }
.tablero__cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.kpis { display: flex; gap: 8px; }
.kpi { background: var(--nivel); border-radius: 12px; padding: 8px 13px; }
.kpi b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.kpi span { font-size: 10.5px; font-weight: 600; color: var(--tinta-3); }
.tr { display: grid; grid-template-columns: 26px 1.4fr 1fr auto; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--filo); font-size: 13.5px; }
.tr:last-child { border-bottom: 0; }
.tr > b { font-weight: 700; letter-spacing: -.015em; }
.tr > span { color: var(--tinta-2); font-weight: 500; }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; color: #fff; letter-spacing: 0; }
.tag { font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 980px; white-space: nowrap;
  letter-spacing: -.005em; transition: background-color .4s var(--e-suave), color .4s var(--e-suave); }
/* Ancho reservado: al pasar de "Enviando" a "Listo" la etiqueta encoge y
   arrastraría consigo la columna del medio. Con un mínimo fijo, el texto
   de al lado no se reacomoda nunca. */
.reng .tag { min-width: 64px; text-align: center; font-size: 9.5px; padding: 4px 7px; }
.tag--ok  { background: rgba(30,158,90,.13);  color: #1B8F52; }
.tag--pre { background: rgba(198,124,16,.15); color: #B06E0C; }
.tag--mal { background: rgba(210,69,63,.13);  color: #C63B35; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag--ok  { background: rgba(52,199,120,.16); color: #48D18C; }
  :root:not([data-theme="light"]) .tag--pre { background: rgba(240,170,60,.16);  color: #F0AA3C; }
  :root:not([data-theme="light"]) .tag--mal { background: rgba(255,110,100,.16); color: #FF7A70; }
}
[data-theme="dark"] .tag--ok  { background: rgba(52,199,120,.16); color: #48D18C; }
[data-theme="dark"] .tag--pre { background: rgba(240,170,60,.16);  color: #F0AA3C; }
[data-theme="dark"] .tag--mal { background: rgba(255,110,100,.16); color: #FF7A70; }

/* ── Teléfono Android ───────────────────────────────────────── */
.droid { width: 252px; border-radius: 30px; padding: 3px;
  background: linear-gradient(155deg, #4A4A50 0%, #17171A 34%, #0B0B0D 68%, #35353A 100%);
  box-shadow: var(--sombra-a), 0 0 0 1px rgba(0,0,0,.4); position: relative; }
.droid::before, .droid::after {           /* botones laterales */
  content: ""; position: absolute; right: -2px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #3A3A40, #1A1A1D);
}
.droid::before { top: 92px; height: 26px; }
.droid::after  { top: 128px; height: 46px; }
/* Alto FIJO y único. Con `min-height`, el del héroe crecía con su contenido
   —quedaba larguísimo— mientras el de la pista, recortado, quedaba corto:
   dos aparatos distintos. 252 × 500 es la proporción de un teléfono real. */
.droid__p { background: var(--lienzo); border-radius: 27px; overflow: hidden; position: relative;
  display: flex; flex-direction: column; height: 500px; text-align: left; }
.droid__ojo { position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #08080A;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); z-index: 4; }
.droid__estado { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 15px 4px; font-size: 10.5px; font-weight: 700; color: var(--tinta); }
.droid__estado .sig { display: flex; align-items: center; gap: 4px; }
.droid__estado svg { width: 12px; height: 12px; }
.droid__barra { display: flex; align-items: center; gap: 10px; padding: 8px 15px 12px; }
.droid__barra svg { width: 19px; height: 19px; color: var(--tinta); }
.droid__barra b { font-size: 15px; font-weight: 800; letter-spacing: -.028em; }
.droid__cue { padding: 4px 15px 12px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.droid__gesto { height: 18px; display: grid; place-items: center; flex: none; }
.droid__gesto i { width: 92px; height: 4px; border-radius: 980px; background: var(--tinta); opacity: .28; }
.fab { transition: opacity .4s var(--e-suave); position: absolute; right: 14px; bottom: 30px; width: 44px; height: 44px; border-radius: 15px;
  background: var(--ac); display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 20px -6px rgba(var(--ac-3), .8); z-index: 3; }
.fab svg { width: 19px; height: 19px; }

.tarj { background: var(--nivel); border-radius: var(--r-s); padding: 13px 14px; }
.tarj__t { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tarj__t b { font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
/* `minmax(0,1fr)` es lo que impide que la columna del medio empuje: sin
   eso, un nombre largo ensancha la fila, la etiqueta se corre y las filas
   quedan desalineadas entre sí —se veían torcidas—. */
.reng { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px;
  align-items: center; padding: 6px 0; }
.reng > div { min-width: 0; }
.reng b, .reng span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reng em { font-style: normal; width: 30px; height: 30px; border-radius: 10px; background: var(--lienzo);
  display: grid; place-items: center; color: var(--ac); box-shadow: var(--sombra); }
.reng em svg { width: 16px; height: 16px; }
.reng b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.015em; }
.reng span { font-size: 11px; color: var(--tinta-2); font-weight: 500; }
.barrita { height: 6px; border-radius: 980px; background: var(--nivel-2); overflow: hidden; }
.barrita i { display: block; height: 100%; border-radius: 980px; background: var(--ac);
  transition: width .8s var(--e); }

/* El teléfono flota sobre la ventana en el héroe */
/* El aparato NO se mueve: ni flota ni acompaña al scroll. Lo que se anima
   es lo que ocurre DENTRO de la pantalla, que es donde está el mensaje.
   Un teléfono que se balancea distrae de lo único que hay que mirar. */
/* Abajo y al centro, en flujo normal con un margen negativo que lo monta
   sobre el borde de la ventana. Posicionarlo en absoluto y centrado le
   habría tapado la tabla justo por la mitad. */
.flota { position: relative; z-index: 3; width: 252px; margin: -76px auto 0; }
.flota .droid { width: 100%; }
@media (max-width: 900px) { .flota { width: 252px; margin: -60px auto 0; } }

/* ── Cinta de lo que desaparece ─────────────────────────────── */
.cinta { overflow: hidden; padding: 20px 0; border-top: 1px solid var(--filo); border-bottom: 1px solid var(--filo);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cinta__p { display: flex; width: max-content; animation: correr 44s linear infinite; }
/* El MISMO tachado del héroe: `text-decoration: line-through`.
   Estuvo un tiempo dibujado con un SVG encima para poder animarlo, pero un
   trazo puesto a mano nunca cae donde el navegador pone el suyo —la fuente
   trae su propia posición de tachado— y siempre se veía alto o bajo. Aquí
   manda la tipografía y queda exactamente al centro de las letras. */
.cinta__p span { display: flex; align-items: center; gap: 22px; padding: 0 22px;
  font-size: clamp(22px, 3vw, 34px); font-weight: 800; letter-spacing: -.035em;
  color: var(--tinta); white-space: nowrap; }
.cinta__p span::after { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ac); flex: none; opacity: .45; }
.cinta__p b { display: inline-block; font-weight: 800; color: var(--tinta-2);
  text-decoration: line-through;
  text-decoration-thickness: 2.5px;
  text-decoration-color: rgba(var(--ac-3), .9);
  text-underline-offset: 0; }
@keyframes correr { to { transform: translateX(-50%); } }
.cinta:hover .cinta__p { animation-play-state: paused; }

/* ── Sección negra ──────────────────────────────────────────── */
.negro { background: #000; color: #F5F5F7; }
.negro .p, .negro .sub, .negro .p-s { color: #98989D; }
.negro .btn--linea { color: #F5F5F7; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }

/* ── Razones ──────────────────────────────────────────────────
   Tres por fila en escritorio, dos en tableta, una en móvil. Sin caja ni
   borde: sobre negro basta el aire y el filete superior para separarlas, y
   así la sección no se convierte en otra pared de tarjetas. */
.razones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 46px) clamp(26px, 3vw, 52px); }
@media (max-width: 940px) { .razones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .razones { grid-template-columns: 1fr; } }
.razon { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.razon__i { display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; background: rgba(var(--ac-3), .2); color: var(--ac-2); margin-bottom: 16px; }
.razon__i svg { width: 19px; height: 19px; }
.razon h3 { margin-bottom: 9px; }
.razon .p-s { color: #98989D; max-width: 34ch; }

/* ── Cifras ─────────────────────────────────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 58px); }
@media (max-width: 820px) { .cifras { grid-template-columns: 1fr; } }
.cifra__n { font-size: clamp(54px, 7vw, 88px); font-weight: 800; letter-spacing: -.05em; line-height: .94;
  font-variant-numeric: tabular-nums; }
.cifra__n sub { font-size: .32em; vertical-align: baseline; font-weight: 700; color: var(--tinta-3); margin-left: 6px; }

/* ── Antes / después ─────────────────────────────────────────
   Dos versiones de LO MISMO, no dos listas de frases: a la izquierda los
   siete documentos como pila de papel; a la derecha los siete en una tabla.
   Antes esta sección eran dos columnas de texto y se veía vacía —el
   argumento estaba escrito, pero no mostrado—. */
.comparador { position: relative; display: grid; border-radius: var(--r-g); overflow: hidden;
  box-shadow: var(--sombra-a); user-select: none; touch-action: pan-y;
  min-height: clamp(430px, 46vw, 600px); background: var(--nivel); }
/* Las dos caras ocupan la MISMA celda: la altura la impone la más alta y
   ninguna se corta cuando el contenido se reparte distinto en móvil. */
.cara { grid-area: 1 / 1; position: relative; z-index: 0; isolation: isolate;
  padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; }
.cara--a { background: var(--nivel); }
.cara--b { clip-path: inset(0 0 0 50%); background: var(--lienzo);
  align-items: flex-end; text-align: right; }
.cara__et { position: relative; z-index: 2; align-self: flex-start;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 980px; }
.cara__et--a { background: var(--nivel-2); color: var(--tinta-2); }
.cara__et--b { background: var(--ac); color: #fff; }
/* La etiqueta trae `align-self: flex-start`, que gana sobre el `align-items`
   de la cara: sin esto se queda en el borde izquierdo, justo bajo el recorte,
   y no se ve nunca. */
.cara--b .cara__et { align-self: flex-end; }
.cara__pie { position: relative; z-index: 2; margin: auto 0 0; font-size: 15px;
  font-weight: 600; color: var(--tinta-2); }

/* La pila: papelería de verdad, absoluta, cada pieza con su posición y su
   giro. Antes eran siete tarjetitas apaisadas del mismo tamaño y se leían
   como fichas de una app, no como papel. Ahora hay TRES objetos distintos
   —hoja carta, carpeta y talonario— porque un escritorio de papel nunca
   tiene una sola forma, y es esa variedad la que lo hace reconocible. */
.pila { position: absolute; inset: 0; overflow: hidden; }
.pieza-p { position: absolute; left: var(--x); top: var(--y);
  transform: rotate(var(--r)); }

/* — Hoja tamaño carta — la proporción es la real: 8,5 × 11 pulgadas. */
.hoja-p { width: clamp(124px, 13.4vw, 178px); aspect-ratio: 17 / 22;
  padding: 13px 14px; background: var(--lienzo); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.07), 0 16px 32px -20px rgba(0,0,0,.45); }
.dark .hoja-p, [data-theme="dark"] .hoja-p { background: #F7F8FA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hoja-p { background: #F7F8FA; } }
.hoja-p b { display: block; font-size: 11px; font-weight: 800; color: #2A2E36;
  letter-spacing: -.01em; margin-bottom: 10px; }
.hoja-p i { display: block; height: 4px; border-radius: 2px; background: #D9DDE4; margin-bottom: 7px; }
/* La firma al pie: una hoja sin nada abajo se lee como plantilla vacía. */
.hoja-p u { position: absolute; left: 14px; right: 14px; bottom: 15px;
  text-decoration: none; display: block; height: 1px; background: #C8CDD6; }
.hoja-p u::after { content: ''; position: absolute; left: 0; bottom: 2px; width: 46%;
  height: 8px; border-bottom: 1.5px solid #AFB6C2;
  border-radius: 0 0 60% 20%; transform: skewX(-12deg); }
.hoja-p .sello { position: absolute; right: 9px; bottom: 34px; transform: rotate(-11deg);
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #C0392F; border: 2px solid #C0392F; border-radius: 3px; padding: 2px 6px; opacity: .82; }

/* — Carpeta colgante — la pestaña arriba es lo que la delata como carpeta y
     no como un rectángulo de color; el papel que asoma, lo que la llena. */
.carpeta-p { width: clamp(150px, 16.4vw, 218px); aspect-ratio: 5 / 4; }
/* El papel asoma por encima del lomo, a la derecha de la pestaña: es ESO lo
   que distingue una carpeta llena de un rectángulo de color. Los renglones
   van dentro de la franja que queda a la vista, no debajo del cartón. */
.carpeta-p__papel { position: absolute; left: 11%; right: 4%; top: 3%; bottom: 14%;
  background: #FCFCFD; border-radius: 2px 2px 0 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.16); }
.carpeta-p__papel::before, .carpeta-p__papel::after {
  content: ''; position: absolute; left: 8%; height: 2.5px; border-radius: 2px; background: #D3D8E0; }
.carpeta-p__papel::before { top: 22%; width: 58%; }
.carpeta-p__papel::after  { top: 44%; width: 38%; }
.carpeta-p__cuerpo { position: absolute; inset: 19% 0 0; background: #E3C079;
  border-radius: 2px 2px 5px 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.09), 0 18px 34px -20px rgba(0,0,0,.5);
  background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(0,0,0,0) 22%),
                    linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,0) 9%); }
/* La pestaña: sale del lomo hacia arriba, un tono más clara y con el lado
   derecho en diagonal, que es como está troquelada de verdad. */
.carpeta-p__tab { position: absolute; left: 0; top: 4%; width: 44%; height: 16%;
  background: #EBCB8A; border-radius: 3px 3px 0 0;
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%); }
.carpeta-p b { position: absolute; left: 7%; top: 7.5%; z-index: 2;
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: #6F5214;
  text-transform: uppercase; }
.carpeta-p em { position: absolute; left: 10%; right: 10%; bottom: 9%; z-index: 2;
  font-style: normal; font-size: 10.5px; font-weight: 700; color: #8A6620; }

/* — Talonario — el bloque de boletas: lomo engomado arriba, línea de
     troquel y el correlativo impreso en rojo. Los pliegos de debajo se
     dibujan con dos sombras desplazadas, no con más elementos. */
.talon-p { width: clamp(108px, 11.6vw, 152px); aspect-ratio: 3 / 4;
  background: #FFFDF4; border-radius: 3px;
  box-shadow: 3px 4px 0 -1px #F2EEDF, 6px 8px 0 -2px #E8E3D0,
              0 1px 2px rgba(0,0,0,.08), 0 18px 32px -20px rgba(0,0,0,.5); }
.talon-p__lomo { position: absolute; inset: 0 0 auto; height: 13%;
  background: linear-gradient(180deg, #C9BE94, #B8AC7E);
  border-radius: 3px 3px 0 0; }
.talon-p b { position: absolute; left: 10px; top: 18%; font-size: 9.5px; font-weight: 800;
  letter-spacing: .02em; color: #4A4636; text-transform: uppercase; }
.talon-p s { position: absolute; right: 10px; top: 17.5%; text-decoration: none;
  font-size: 10px; font-weight: 800; color: #C0392F; letter-spacing: .02em; }
/* El troquel: una línea de puntos, que es lo que se ve de verdad. */
.talon-p__corte { position: absolute; left: 0; right: 0; top: 46%; height: 1px;
  background: repeating-linear-gradient(90deg, #C5C0AC 0 4px, transparent 4px 9px); }
.talon-p i { position: absolute; left: 10px; height: 3px; border-radius: 2px; background: #DDD8C6; }
.talon-p i:nth-of-type(1) { top: 30%; width: 58%; }
.talon-p i:nth-of-type(2) { top: 38%; width: 40%; }
.talon-p i:nth-of-type(3) { top: 60%; width: 52%; }
.talon-p i:nth-of-type(4) { top: 68%; width: 34%; }

/* El panel: los mismos documentos, alineados. */
/* Anclado a la derecha y con ancho de media caja: con el tirador al centro
   la tabla se ve COMPLETA. Si ocupara todo el ancho, la columna de nombres
   quedaría siempre bajo la cara de papel y se leería como una tabla rota. */
.panel { position: absolute; right: clamp(22px, 3vw, 34px); width: min(46%, 430px);
  top: 72px; bottom: 62px; text-align: left; background: var(--lienzo); border-radius: var(--r-m);
  box-shadow: inset 0 0 0 1px var(--filo), var(--sombra); overflow: hidden;
  display: flex; flex-direction: column; }
.panel__busca { display: flex; align-items: center; gap: 9px; padding: 12px 16px;
  border-bottom: 1px solid var(--filo); color: var(--tinta-3); font-size: 13px; font-weight: 600; }
.panel__busca svg { width: 14px; height: 14px; }
.panel__fila { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 0 16px; flex: 1; border-bottom: 1px solid var(--filo); font-size: 13.5px; min-height: 0; }
.panel__fila:last-child { border-bottom: 0; }
.panel__fila b { font-weight: 700; letter-spacing: -.015em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.panel__fila span { color: var(--tinta-3); font-size: 12px; font-weight: 600; }
.panel__fila em { font-style: normal; }

.tirador { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--ac); z-index: 3;
  transform: translateX(-1px); }
.tirador i { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--ac); display: grid; place-items: center;
  color: #fff; box-shadow: 0 8px 24px -8px rgba(var(--ac-3),.9); cursor: ew-resize; }
.tirador i svg { width: 20px; height: 20px; }
.comparador input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; z-index: 4; -webkit-appearance: none; appearance: none; background: none; }
/* Mientras se hace la demostración el tirador late: el movimiento solo dice
   «esto se mueve», el latido dice «esto lo mueves tú». Se apaga en cuanto la
   persona toca, que es justo cuando ya no hace falta explicar nada. */
.tirador i::before { content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--ac); opacity: 0; pointer-events: none; }
.tirador.enseñando i::before { animation: latido 1.6s ease-out infinite; }
@keyframes latido {
  0%   { transform: scale(.82); opacity: .55; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .tirador.enseñando i::before { animation: none; } }

@media (max-width: 700px) {
  .comparador { min-height: 380px; }
  /* En móvil se encoge la papelería, no se cambia de forma: la proporción
     carta y la pestaña de la carpeta son justo lo que la hace reconocible
     de un vistazo, y a 375 px ese vistazo es todo lo que hay. */
  .hoja-p { width: 84px; padding: 8px 9px; }
  .hoja-p b { font-size: 8.5px; margin-bottom: 6px; }
  .hoja-p i { height: 3px; margin-bottom: 5px; }
  .hoja-p u { left: 9px; right: 9px; bottom: 9px; }
  .hoja-p u::after { height: 6px; }
  .hoja-p .sello { font-size: 7.5px; border-width: 1.5px; right: 5px; bottom: 20px; padding: 1px 4px; }
  .carpeta-p { width: 104px; }
  .carpeta-p b { font-size: 7.5px; }
  .carpeta-p em { font-size: 8px; }
  .talon-p { width: 72px; }
  .talon-p b { font-size: 7.5px; left: 6px; }
  /* El correlativo se pisa con el nombre: a 72 px no caben los dos en la
     misma línea. Se cae el número, que es el detalle; el lomo y el troquel
     siguen diciendo que es un talonario. */
  .talon-p s { display: none; }
  .talon-p i { left: 6px; height: 2.5px; }
  /* Las dos frases de pie viven en la misma banda, una alineada a cada lado:
     a 375 px se pisan en el centro y quedan ilegibles. En móvil manda la
     imagen; las etiquetas de arriba ya dicen qué lado es cuál. */
  .cara__pie { display: none; }
  .cara__et { font-size: 9.5px; padding: 5px 10px; }
  .panel { top: 52px; bottom: 18px; width: 50%; }
  .panel__busca { padding: 9px 11px; font-size: 11px; }
  .panel__fila span { display: none; }
  .panel__fila { padding: 0 11px; font-size: 11.5px; gap: 8px; }
  .panel__fila em { font-size: 9px; padding: 3px 7px; }
  .tirador i { width: 38px; height: 38px; }
}

/* ── Bento ──────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.caja { background: var(--nivel); border-radius: var(--r-g); padding: clamp(24px, 2.9vw, 36px);
  display: flex; flex-direction: column; gap: 11px; position: relative; overflow: hidden;
  transition: transform .55s var(--e), box-shadow .55s var(--e); }
.caja:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.caja--3 { grid-column: span 3; } .caja--2 { grid-column: span 2; } .caja--6 { grid-column: span 6; }
/* A dos columnas, las TRES tarjetas medianas dejaban a la del QR sola en su
   fila. Se pasa a una sola columna antes de que eso ocurra: una tarjeta
   huérfana ensucia más que una fila de más. */
@media (max-width: 940px) { .bento { grid-template-columns: 1fr; }
  .caja { grid-column: span 1 !important; } }

/* Tarjeta de plazos: texto a la izquierda y la cuenta atrás a la derecha,
   como una línea de tiempo real. */
.caja--plazo { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 3vw, 48px);
  align-items: center; }
@media (max-width: 780px) { .caja--plazo { grid-template-columns: 1fr; } }
.plazo__txt { display: flex; flex-direction: column; gap: 10px; }
.plazo__linea { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.plazo__linea::before { content: ""; position: absolute; left: 8%; right: 8%; top: 21px;
  height: 2px; background: var(--filo-2); }
.plazo__linea li { position: relative; text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: 9px; }
.plazo__linea b { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; background: var(--lienzo); color: var(--tinta-2);
  box-shadow: inset 0 0 0 2px var(--filo-2); position: relative; z-index: 1;
  font-variant-numeric: tabular-nums; }
.plazo__linea span { font-size: 11px; font-weight: 600; color: var(--tinta-3); line-height: 1.3; }
.plazo__linea .hoy b { background: var(--ac); color: #fff; box-shadow: 0 6px 18px -8px rgba(var(--ac-3), .9); }
.plazo__linea .hoy span { color: var(--ac); }
.caja__i { width: 40px; height: 40px; border-radius: 13px; background: rgba(var(--ac-3), .12);
  display: grid; place-items: center; color: var(--ac); margin-bottom: 6px; flex: none; }
.caja__i svg { width: 21px; height: 21px; }
/* La tarjeta destacada iba en var(--tinta): en claro salía negra y en oscuro
   se volvía blanca, invirtiéndose sola y peleando con el resto. Ahora lleva
   el color del rubro, que es el mismo en los dos temas y la señala como lo
   que es: la pieza importante del bloque. */
.caja--destacada { background: linear-gradient(152deg, var(--ac), color-mix(in srgb, var(--ac) 58%, #10151C));
  color: #fff; box-shadow: 0 10px 34px -18px rgba(var(--ac-3), .9); }
.caja--destacada::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% -8%, rgba(255,255,255,.24), transparent 58%); }
.caja--destacada > * { position: relative; z-index: 1; }
.caja--destacada .p { color: rgba(255,255,255,.84); }
.caja--destacada .caja__i { background: rgba(255,255,255,.18); color: #fff; }
.caja--destacada:hover { box-shadow: 0 18px 44px -18px rgba(var(--ac-3), 1); }


/* ── La pista anclada de "La solución" ────────────────────────
   La pista mide tres pantallas de alto y su interior queda pegado arriba.
   Mientras se recorre, la página no se mueve visualmente: lo que avanza es
   el paso. Antes esto iba con un observador sobre tres bloques de texto, y
   al entrar a la sección el navegador consideraba visible el TERCERO, así
   que la escena arrancaba por el final. Con la pista, el progreso empieza
   siempre en cero porque se calcula desde el borde superior. */
.pista { position: relative; height: 320vh; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.pin__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 76px);
  align-items: center; width: 100%; }
.pin__texto { max-width: 46ch; }
.pin__cuenta { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pin__cuenta b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; background: var(--nivel); color: var(--tinta-3);
  transition: background-color .45s var(--e), color .45s var(--e), transform .45s var(--e); }
.pin__cuenta b.on { background: var(--ac); color: #fff; transform: scale(1.08); }
.pin__cuenta i { width: 22px; height: 1.5px; background: var(--filo-2); }
#pinEtiqueta, #pinTitulo, #pinDesc { transition: opacity .32s var(--e-suave), transform .32s var(--e-suave); }
.pin.cambiando #pinEtiqueta, .pin.cambiando #pinTitulo,
.pin.cambiando #pinDesc { opacity: 0; transform: translateY(10px); }
/* La etiqueta va pegada al título: es su antetítulo, no un párrafo aparte. */
.pin__et { margin-bottom: 10px; }

.pin__fono { position: relative; display: grid; place-items: center; min-height: 520px; }


/* Las tres pantallas ocupan el mismo hueco y se cruzan entre sí. El marco
   del teléfono nunca se toca, así que el cambio se lee como si la app
   navegara sola, no como si apareciera otro aparato. */
.droid__lienzo { position: relative; flex: 1; min-height: 0; }
.capa { position: absolute; inset: 0; padding: 4px 15px 12px;
  display: flex; flex-direction: column; gap: 11px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .42s var(--e-suave), transform .42s var(--e-suave); }
.capa.viva { opacity: 1; transform: none; }
.capa .p-s { font-size: 12px; line-height: 1.42; }
.firma-caja { height: 46px; display: grid; place-items: center; }
.firma-caja svg { width: 100%; max-width: 150px; height: 42px; }
.pie-legal { font-size: 10px; text-align: center; margin-top: auto; }
/* Aviso de tratamiento de datos del formulario: presente y legible, pero sin
   competir con el botón. */
.aviso-datos { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--tinta-3, #64748B); text-align: center; }
.aviso-datos a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.aviso-datos a:hover { color: var(--ac); }
/* El título de la app se cruza con la pantalla: si cambiara de golpe, el
   ojo lo notaría antes que el contenido. */
#pinApp { transition: opacity .3s var(--e-suave); }
.pin.cambiando #pinApp { opacity: 0; }

.pin__riel { height: 2px; background: var(--filo); margin-top: clamp(22px, 3vw, 40px);
  max-width: var(--col); width: calc(100% - var(--borde) * 2); align-self: center; }
.pin__riel i { display: block; height: 100%; width: 0; background: var(--ac);
  border-radius: 999px; transition: width .12s linear; }

.trazo { stroke: var(--tinta); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 340; stroke-dashoffset: 340; }
/* La firma del héroe se dibuja por transición, no por keyframes: así el
   bucle puede rebobinarla y volver a empezar cuando quiera. */
.fh-firma { transition: stroke-dashoffset 2s var(--e-suave); }
.fh-firma.trazada { stroke-dashoffset: 0; }
.fh-boton { margin-top: 2px; background: var(--ac); color: #fff; text-align: center; padding: 11px;
  border-radius: 14px; font-size: 13px; font-weight: 800;
  transition: background-color .45s var(--e-suave); }
.fh-boton.listo { background: #1B9E5F; }
#fhBarra { transition: width 1.5s var(--e-suave); }
.droid.viva .trazo { animation: firmar 1.6s var(--e) .3s forwards; }
@keyframes firmar { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .pista { height: 300vh; }
  .pin__in { grid-template-columns: 1fr; gap: 22px; justify-items: center; text-align: center; }
  .pin__texto { max-width: 40ch; order: 2; }
  /* El teléfono va en posición absoluta: si el contenedor no reserva su
     alto, se sale y se monta encima del texto. Reserva exacta. */
  .pin__fono { order: 1; min-height: 388px; }
  .droid { width: 224px; }
  .droid__p { height: 444px; }
  .pin__fono { min-height: 456px; }
  .pin__cuenta { justify-content: center; }
}

/* ── Detalle del rubro elegido ──────────────────────────────
   Antes aquí había una segunda batería de botones de rubro: el mismo
   gesto dos veces en la misma página. El selector vive solo en el héroe
   y esta sección muestra qué cambia para el rubro ya elegido. */
.detalle { display: grid; grid-template-columns: .92fr 1.08fr; gap: 14px; }
@media (max-width: 900px) { .detalle { grid-template-columns: 1fr; } }
.detalle__vis { border-radius: var(--r-g); padding: clamp(26px, 3.2vw, 38px); color: #fff;
  min-height: 340px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  isolation: isolate; transition: background .6s var(--e-suave); }
.detalle__vis::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(130% 95% at 14% -6%, rgba(255,255,255,.28), transparent 60%); }
.detalle__vis .ic { width: 44px; height: 44px; margin-bottom: auto; }
.detalle__vis h3 { font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.035em; margin-bottom: 10px; }
.detalle__vis p { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.85); margin: 0; max-width: 34ch; }
.detalle__vis ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.detalle__vis li { font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 980px;
  background: rgba(255,255,255,.2); }
.detalle__rej { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .detalle__rej { grid-template-columns: 1fr; } }
.dt { background: var(--nivel); border-radius: var(--r-m); padding: clamp(20px, 2.4vw, 26px);
  display: flex; flex-direction: column; gap: 9px; transition: transform .5s var(--e); }
.dt:hover { transform: translateY(-4px); }
.dt__i { width: 36px; height: 36px; border-radius: 12px; background: rgba(var(--ac-3), .12);
  display: grid; place-items: center; color: var(--ac); flex: none; }
.dt__i svg { width: 19px; height: 19px; }
.cambiar { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0;
  cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ac); padding: 0; }
.cambiar svg { width: 15px; height: 15px; transition: transform .34s var(--e); }
.cambiar:hover svg { transform: translateX(-4px) rotate(180deg); }
.cambiar svg { transform: rotate(180deg); }

/* ── Implementación ─────────────────────────────────────────── */
.ruta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 900px) { .ruta { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ruta { grid-template-columns: 1fr; } }
.hito { padding: 26px 24px 30px 0; position: relative; }
.hito::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--filo); }
.hito::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--ac);
  transition: width .9s var(--e); }
.hito.vista::after { width: 100%; }
.hito:nth-child(2)::after { transition-delay: .12s; }
.hito:nth-child(3)::after { transition-delay: .24s; }
.hito:nth-child(4)::after { transition-delay: .36s; }
.hito b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ac); margin: 18px 0 8px; }

/* ── Preguntas ──────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--filo); }
.faq details { border-bottom: 1px solid var(--filo); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; font-size: clamp(17px, 1.9vw, 21px); font-weight: 700;
  letter-spacing: -.022em; transition: color .25s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ac); }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--ac);
  transition: transform .4s var(--e); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq__c { padding: 0 0 24px; max-width: 62ch; }

/* ── Contacto ─────────────────────────────────────────────────
   Una sola columna centrada. Antes eran dos mitades y la de la izquierda
   repetía los datos de contacto que ya están en el pie: la mirada se
   partía en dos y el formulario dejaba de ser el protagonista. Ahora hay
   un solo camino hacia abajo. */
.tarjeta-forma { background: #131316; border-radius: var(--r-g); padding: clamp(24px, 3.2vw, 40px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 90px -50px rgba(0,0,0,1);
  margin-top: clamp(34px, 4.5vw, 52px); text-align: left; }
.rej2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .rej2 { grid-template-columns: 1fr; } }
.campo { display: block; margin-bottom: 16px; }
.campo span { display: block; font-size: 12.5px; font-weight: 700; color: #98989D; margin-bottom: 8px; }
.campo span i { font-style: normal; font-weight: 500; color: #6E6E73; }
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: #F5F5F7;
  background: #1C1C20; border: 1.5px solid transparent; border-radius: 14px; padding: 14px 16px;
  transition: border-color .22s, background-color .22s;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input::placeholder, .campo textarea::placeholder { color: #5C5C63; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--ac); background: #232328;
}
.campo input.mal { border-color: #E1746D; }
/* El desplegable nativo trae su propia flecha en cada sistema: se apaga y se
   dibuja una, para que los cinco campos se vean iguales. */
.sel { position: relative; }
.sel select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.sel__f { position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #98989D; pointer-events: none; }
.error { margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: #E1746D; }
.btn--ancho { width: 100%; }
/* Separador con la etiqueta encajada en la línea: divide el formulario de
   las dos vías directas sin meter otro bloque de fondo dentro de la tarjeta. */
.separa { display: flex; align-items: center; gap: 14px; margin: 26px 0 20px; }
.separa::before, .separa::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.separa span { font-size: 12px; font-weight: 700; color: #6E6E73; white-space: nowrap; }
.negro .btn--linea { color: #F5F5F7; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.negro .btn--linea:hover { box-shadow: inset 0 0 0 1.5px var(--ac); color: var(--ac); }

/* Dos caminos con el mismo peso y una «O» que respira entre ellos. Al
   apilarse en móvil, los filetes se alargan para seguir leyéndose como
   una elección y no como un adorno suelto. */
.acciones { display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; margin-top: 6px; }
.o { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 800;
  letter-spacing: .1em; color: #6E6E73; user-select: none; }
.o::before, .o::after { content: ""; width: 24px; height: 1px; background: rgba(255,255,255,.2); }
@media (max-width: 560px) {
  .acciones { flex-direction: column; gap: 14px; }
  .acciones .btn { width: 100%; }
  .o::before, .o::after { width: 56px; }
}

/* ── Pie ────────────────────────────────────────────────────── */
/*
 * EL PIE SE VEÍA LAVADO, Y NO ERA EL TAMAÑO.
 *
 * Iba en 13 px con `--tinta-2` (#6E6E73) sobre el gris del pie: 4,9 de
 * contraste, justo lo mínimo, y encima con `-webkit-font-smoothing:
 * antialiased` heredado del body. Ese suavizado ADELGAZA el texto oscuro sobre
 * fondo claro en macOS —está pensado para lo contrario, claro sobre oscuro— y
 * a 13 px las letras quedan grises y sin filo.
 *
 * Tres cambios que van juntos: medio punto más de cuerpo, tinta más oscura
 * (7,3 de contraste) y el suavizado del sistema, que en claro sobre oscuro usa
 * subpíxeles y devuelve el borde nítido. En modo oscuro se vuelve a
 * `antialiased`, que ahí sí es lo correcto.
 */
.pie { background: var(--nivel); font-size: 13.5px; color: #55565B; padding: 50px 0 32px; }
.pie a { font-weight: 500; }
[data-theme="dark"] .pie { color: var(--tinta-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pie { color: var(--tinta-2); }
}
.pie__rej { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 30px 24px; }
@media (max-width: 1080px) { .pie__rej { grid-template-columns: 1.4fr repeat(3, 1fr); } }
@media (max-width: 820px)  { .pie__rej { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .pie__rej { grid-template-columns: 1fr; gap: 26px; } }
.pie h4 { font-size: 13px; font-weight: 800; color: var(--tinta); margin: 0 0 13px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pie a { text-decoration: none; transition: color .2s; }
.pie a:hover { color: var(--ac); }
.pie__fin { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--filo);
  display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }
.pie__fin p { margin: 0; line-height: 1.6; font-size: 12px; }
.firma-in { font-weight: 800; color: var(--tinta); border-bottom: 1.5px solid var(--ac);
  padding-bottom: 1px; transition: color .2s; }
.firma-in:hover { color: var(--ac); }
.wa { display: inline-flex; align-items: center; gap: 9px; }
.wa svg { width: 18px; height: 18px; }

/* ── Movimiento ─────────────────────────────────────────────── */
/* El ocultamiento se activa con la clase `revelando`, que el script pone
   JUSTO al instalar el observador. Antes dependía de `js`, puesta al inicio
   del script: cuando el script falló más abajo, media página quedó en
   opacity 0 sin nada que volviera a mostrarla. Así, si algo se rompe, lo
   peor que puede pasar es que no haya animación. */
/* ── Planes ─────────────────────────────────────────────────────
   Tres tarjetas y un conmutador mensual/anual. El precio anual NO se calcula
   en el navegador: los dos importes van escritos en el HTML y el conmutador
   sólo decide cuál se ve. Si el guion no corre, la página sigue mostrando
   precios —los mensuales— en vez de una tarjeta vacía. */
.plan__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(30px, 4vw, 46px); }

/* Conmutador: un segmentado, no dos botones sueltos. La pastilla que se
   desliza dice cuál está activo sin depender del color. */
.ciclo { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ciclo__sw { position: relative; display: inline-flex; background: var(--nivel-2);
  border-radius: 980px; padding: 4px; }
.ciclo__sw button { position: relative; z-index: 1; border: 0; background: transparent;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.012em;
  color: var(--tinta-2); padding: 9px 20px; border-radius: 980px; cursor: pointer;
  transition: color .3s var(--e); }
.ciclo__sw button[aria-pressed="true"] { color: var(--tinta); }
.ciclo__pastilla { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 50%;
  background: var(--lienzo); border-radius: 980px; box-shadow: 0 2px 8px rgba(0,0,0,.10);
  transition: transform .38s var(--e); }
.planes--anual .ciclo__pastilla { transform: translateX(100%); }
.ciclo__ahorro { font-size: 13.5px; font-weight: 700; color: var(--ac);
  background: rgba(var(--ac-3), .10); padding: 7px 13px; border-radius: 980px; }

/* Las tres tarjetas. */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .planes { grid-template-columns: 1fr; } }

.plan { background: var(--nivel); border-radius: var(--r-g); padding: clamp(26px, 2.6vw, 34px);
  display: flex; flex-direction: column; gap: 18px; position: relative;
  transition: transform .55s var(--e), box-shadow .55s var(--e); }
.plan:hover { transform: translateY(-5px); box-shadow: var(--sombra); }

/* El del medio es el que se quiere vender: fondo propio y un rótulo. No lleva
   color de acento en todo el bloque —eso lo convierte en un anuncio—, sólo el
   contorno y la etiqueta. */
.plan--destacado { background: var(--lienzo); box-shadow: inset 0 0 0 2px var(--ac), var(--sombra); }
.plan--destacado:hover { box-shadow: inset 0 0 0 2px var(--ac), var(--sombra-a); }
.plan__tag { position: absolute; top: -13px; left: clamp(26px, 2.6vw, 34px);
  background: var(--ac); color: #fff; font-size: 12.5px; font-weight: 800;
  letter-spacing: -.01em; padding: 6px 14px; border-radius: 980px; }

.plan__n { font-size: 21px; font-weight: 800; letter-spacing: -.022em; margin: 0; }
/*
 * CONTRASTE MEDIDO, no elegido a ojo.
 *
 * La letra chica de las tarjetas iba en `--tinta-2` (4,66 sobre el gris del
 * bloque) y el pie de precio en `--tinta-3`, que da **2,36**: por debajo del
 * mínimo legal de accesibilidad y muy por debajo de lo legible. Sumado al
 * suavizado que adelgaza —ya corregido arriba— el resultado era el texto
 * lavado que se veía.
 *
 * Los tonos nuevos dan 6,72 y 5,48. Sólo se fijan para el tema claro: en
 * oscuro mandan los tokens, que ahí sí tienen contraste de sobra.
 */
.plan__q { font-size: 14.5px; line-height: 1.45; color: #55565B; margin: 0; min-height: 2.9em; }

.plan__precio { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.plan__monto { font-size: clamp(34px, 3.8vw, 44px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; }
.plan__mes { font-size: 15px; font-weight: 600; color: var(--tinta-2); }
/* Los dos importes conviven en el HTML; se ve el del ciclo elegido. */
.plan__monto .anual, .planes--anual .plan__monto .mensual { display: none; }
.planes--anual .plan__monto .anual { display: inline; }

.plan__pie { font-size: 13.5px; line-height: 1.5; color: #636369; margin: 0; min-height: 2.6em; }
.plan__pie .anual, .planes--anual .plan__pie .mensual { display: none; }
.planes--anual .plan__pie .anual { display: inline; }
.plan__pie b { color: var(--ac); font-weight: 700; }

.plan .btn { width: 100%; }
.plan--destacado .btn { box-shadow: 0 6px 22px -10px rgba(var(--ac-3), .85); }

.plan__lista { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--filo);
  display: flex; flex-direction: column; gap: 11px; }
.plan__lista li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45;
  color: #55565B; }
.plan__lista li b { color: var(--tinta); font-weight: 700; }
.plan__lista svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--ac); }

/* Franja de cierre: lo que llevan los tres, para no repetirlo tres veces. */
.plan__todos { margin-top: 16px; background: var(--nivel); border-radius: var(--r-g);
  padding: clamp(24px, 2.6vw, 34px); display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 3vw, 44px); align-items: center; }
@media (max-width: 860px) { .plan__todos { grid-template-columns: 1fr; } }
.plan__todos h3 { margin: 0 0 8px; }
.plan__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plan__chips li { font-size: 13.5px; font-weight: 600; color: #55565B;
  background: var(--lienzo); border-radius: 980px; padding: 7px 13px; }
.plan__nota { font-size: 13.5px; color: #636369; margin: 18px 0 0; text-align: center; }

/* En tema oscuro los tonos fijos de arriba serían ilegibles: manda el token. */
[data-theme="dark"] .plan__q,
[data-theme="dark"] .plan__lista li,
[data-theme="dark"] .plan__chips li { color: var(--tinta-2); }
[data-theme="dark"] .plan__pie,
[data-theme="dark"] .plan__nota { color: var(--tinta-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan__q,
  :root:not([data-theme="light"]) .plan__lista li,
  :root:not([data-theme="light"]) .plan__chips li,
  :root:not([data-theme="light"]) .plan__pie,
  :root:not([data-theme="light"]) .plan__nota { color: var(--tinta-2); }
}

.revelando .up { opacity: 0; transform: translateY(30px); }
@media (prefers-reduced-motion: no-preference) {
  .revelando .up { transition: opacity .85s var(--e), transform .85s var(--e); }
}
.revelando .up.vista { opacity: 1; transform: none; }
.revelando .up[data-r="1"] { transition-delay: .09s; }
.revelando .up[data-r="2"] { transition-delay: .18s; }
.revelando .up[data-r="3"] { transition-delay: .27s; }
.revelando .up[data-r="4"] { transition-delay: .36s; }

/* Cambio de rubro: la página parpadea y vuelve, no salta */
.mutando .mut { opacity: 0; transform: translateY(8px); filter: blur(3px); }
.mut { transition: opacity .28s var(--e-suave), transform .28s var(--e-suave), filter .28s var(--e-suave); }

@media (prefers-reduced-motion: reduce) {
  .revelando .up { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .cinta__p { animation: none; }
  .droid.viva .trazo { animation: none; stroke-dashoffset: 0; }
  .mut, .mutando .mut { transition: none; filter: none; transform: none; }
}
section[id] { scroll-margin-top: 66px; }

/* ── Teléfono en mano ────────────────────────────────────────
   No es "que quepa": es que a 390px de ancho la jerarquía siga
   siendo la misma. Se recorta el aire, nunca el contenido. */
@media (max-width: 720px) {
  .hero { padding-top: 34px; }
  .hero__acc { gap: 10px; }
  .hero__acc .btn { flex: 1 1 100%; }
  .selector { gap: 7px; margin-top: 28px; }
  .rb { font-size: 13px; padding: 9px 14px 9px 10px; }
  .rb svg { width: 17px; height: 17px; }
  .escena { margin-top: 38px; padding-bottom: 8px; }
  .ventana__u { font-size: 10.5px; padding: 4px 12px; }
  .tablero__cue { padding: 16px 16px 18px; }
  .tablero__cab { gap: 10px; }
  .kpis { gap: 6px; }
  /* La columna de la hora estorba más de lo que aporta en pantalla chica:
     el nombre y el estado bastan para entender la fila. */
  .tr { grid-template-columns: 24px 1fr auto; row-gap: 2px; font-size: 13px; }
  .tr > span:not(.av):not(.tag) { grid-column: 2; font-size: 11.5px; }
  .av { width: 24px; height: 24px; font-size: 9.5px; }
  .cifra__n { font-size: clamp(46px, 15vw, 62px); }
  .cara { padding: 24px 20px; }
  .cara li { font-size: 14.5px; }
  .tirador i { width: 38px; height: 38px; }
  .caja { padding: 22px; }
  .hito { padding: 22px 16px 26px 0; }
  .faq summary { padding: 18px 0; gap: 14px; }
  .pie__rej { gap: 26px; }
  .cinta__p span { padding: 0 16px; gap: 16px; }
}
@media (max-width: 430px) {
  .nav__in { gap: 10px; }
  .nav__cta { padding: 7px 13px; }
  .insignia { font-size: 12px; padding: 6px 13px 6px 6px; }
  .droid { width: 100%; max-width: 260px; }
  .flota { width: min(258px, 82vw); }
  .detalle__vis { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Secciones de la propuesta transversal (2026-10)
   Reutilizan los tokens y piezas del sistema: --ac, .caja, .ojo,
   .t-gr, .p. No traen colores propios salvo el semáforo.
   ═══════════════════════════════════════════════════════════════ */
.hero__h1 { margin: 22px auto 0; max-width: 22ch; font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1; letter-spacing: -.032em; font-weight: 800; color: var(--tinta); }
.hero__sub { margin: 16px auto 0; max-width: 40ch; }

.pilares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 980px) { .pilares { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pilares { grid-template-columns: 1fr; } }
.pilar { background: var(--nivel); border-radius: var(--r-g); padding: clamp(22px, 2.6vw, 32px); }
.pilar__n { font-size: 13px; font-weight: 800; color: var(--ac); letter-spacing: -.005em; margin: 0 0 12px; }
.pilar h3 { margin: 0 0 10px; }
.pilar .p-s { max-width: 34ch; }
.pilar .caja__i { margin-bottom: 16px; }

.caminos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .caminos { grid-template-columns: 1fr; } }
.camino { display: flex; flex-direction: column; gap: 14px; background: var(--nivel);
  border-radius: var(--r-g); padding: clamp(26px, 3vw, 40px); border: 1px solid var(--filo); }
.camino h3 { margin: 0; }
.camino .p { max-width: none; }
.camino__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.camino__chips li { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px;
  background: var(--lienzo); border: 1px solid var(--filo); color: var(--tinta-2); }
.camino__acc { margin-top: auto; padding-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }

.soluciona { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 64px); text-align: left; }
@media (max-width: 860px) { .soluciona { grid-template-columns: 1fr; } }
.lista-reduce { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-reduce li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; color: #E5E5EA; }
.lista-reduce li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--ac); }
.lista-reduce__t { font-size: 13px; font-weight: 700; color: #98989D; margin: 0 0 14px; }
.lista-reduce--op li::before { background: #FF9F0A; }

.mas { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 860px) { .mas { grid-template-columns: 1fr; } }
.mas__acciones { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mas__acciones li { font-size: 15px; font-weight: 700; padding: 10px 16px; border-radius: 14px;
  background: rgba(var(--ac-3), .1); color: var(--ac); }

.flujo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: paso; }
@media (max-width: 900px) { .flujo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .flujo { grid-template-columns: 1fr; } }
.flujo li { list-style: none; background: var(--nivel); border-radius: var(--r-m); padding: 20px 20px 22px; position: relative; }
.flujo li::before { counter-increment: paso; content: counter(paso); display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 9px; background: var(--ac); color: #fff; font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.flujo b { display: block; font-size: 17px; letter-spacing: -.015em; margin-bottom: 6px; }
.flujo span { font-size: 14px; color: var(--tinta-2); line-height: 1.5; }
.estados { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.estados li { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; padding: 8px 12px; border-radius: 10px; color: #fff; }
.estados .ok { background: #10553A; } .estados .ojo-e { background: #7A3D1B; } .estados .mal { background: #86231C; }
.nota-op { font-size: 13.5px; color: var(--tinta-2); margin: 16px 0 0; max-width: 64ch; }

.plan__corp { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; margin-top: 16px;
  padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-g); border: 1.5px dashed var(--filo-2); }
@media (max-width: 760px) { .plan__corp { grid-template-columns: 1fr; } }
.plan__corp p { margin: 0; }
.plan__corp b { color: var(--tinta); }

.corp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .corp { grid-template-columns: 1fr; } }
.corp__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
@media (max-width: 520px) { .corp__lista { grid-template-columns: 1fr; } }
.corp__lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: #E5E5EA; }
.corp__lista svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ac-2); }
.corp__acomp { margin-top: 26px; padding: 22px 24px; border-radius: var(--r-m); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.corp__acomp h3 { margin: 0 0 8px; color: #fff; }

.rubros-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
@media (max-width: 980px) { .rubros-links { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .rubros-links { grid-template-columns: repeat(2, 1fr); } }
.rubros-links a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px;
  background: var(--nivel); text-decoration: none; color: var(--tinta); font-weight: 700; font-size: 14.5px;
  border: 1px solid transparent; transition: border-color .2s, transform .3s var(--e); }
.rubros-links a:hover { border-color: rgba(var(--ac-3), .5); transform: translateY(-2px); }
.rubros-links svg { width: 19px; height: 19px; color: var(--ac); flex: none; }
.rubros-links__t { font-size: 13px; font-weight: 700; color: var(--tinta-2); margin: 34px 0 0; }

.cierre__acc { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 28px 0 8px; }