@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   El sistema visual de atenai-landing, portado a la landing única.
   Reglas de la marca que aquí se respetan:
     · Cero gradientes y cero sombras de elevación. La elevación es el salto
       de superficie: lienzo → hundido → blanco.
     · Radio 50px en tarjetas, 10px en botones y chips.
     · La raíz va en 17px: toda la escala en rem cae en su píxel exacto.
     · Ningún hex fuera de este bloque. Lo demás sale de color-mix.
   ============================================================ */

:root{
  --marca:#4D25E4;
  --tinta:#190F54;
  --lima:#A9E937;
  --sobre:#FFFFFF;

  --lienzo:#F4F2F9;
  --hondo:#E5E0F0;
  --hundido:#EDEAF5;
  --superficie:#FFFFFF;

  --texto:#2C2E2A;
  --texto-2:#5C5E59;
  --tinta-2:#C3BEDD;
  --tinta-borde:#2F2470;
  --borde:#E4E1EE;

  /* Los estados de un cobro. Las versiones pálidas salen de color-mix, así
     que cambiar el tono aquí arrastra la etiqueta, el punto y la barra. */
  --wa:#25D366;
  --verde:#059669;
  --azul:#1D4ED8;
  --ambar:#B45309;
  --rojo:#DC2626;

  /* WhatsApp de verdad: el fondo del hilo y la burbuja del que escribe. */
  --wa-fondo:#EFEAE2;
  --wa-burbuja:#E2EFD9;

  --r-pildora:50px;
  --r-tarjeta:50px;
  --r-chico:10px;

  /* Las curvas de MindMarket, medidas de su CSS. */
  --ease-suave:cubic-bezier(.5,0,0,1);
  --ease-rebote:cubic-bezier(.17,.67,.3,1.33);
}

html{font-size:17px}
@media (min-width:2400px){html{font-size:21.5px}}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:1rem;line-height:1.55;color:var(--texto);background:var(--lienzo);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.hero :focus-visible,.cierre :focus-visible{outline-color:var(--lima)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* El tope va en rem, no en px: con la raíz de 17 son los 1400px de siempre, y
   en pantallas de 2400 para arriba crece igual que la tipografía. El margen se
   descuenta del ancho en vez de ir de padding, que es lo que antes dejaba el
   contenido más angosto en un monitor grande que en uno normal. */
.container{width:min(100% - 15vw,82.35rem);margin-inline:auto}
@media (max-width:900px){.container{width:min(100% - 3rem,82.35rem)}}

/* Escala de MindMarket: peso 500 y tracking muy cerrado. Es lo que separa un
   titular de la marca de un texto grande cualquiera. */
.h-xl{font-size:clamp(2.125rem,3.9vw,3.375rem);font-weight:500;letter-spacing:-.055em;line-height:1.04}
.h-lg{font-size:clamp(2rem,3.7vw,3.125rem);font-weight:500;letter-spacing:-.06em;line-height:1.15}
h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.lead{font-size:1.1875rem;line-height:1.6;color:var(--texto-2)}
.on-dark{color:var(--sobre)}
.on-dark .lead{color:var(--tinta-2)}

.eyebrow{display:inline-block;margin-bottom:.75rem;font-size:.875rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--marca)}
.on-dark .eyebrow{color:var(--lima)}

/* Aquí vivía la ola de lima bajo una palabra del titular. Fuera: una línea
   ondulada bajo una sola palabra es el subrayado del corrector ortográfico, y
   se leía como "esta palabra está mal escrita". El lima sigue en los chips del
   hero, las rayas del costo, las cifras y el botón del cierre. */

/* ============================================================
   El botón de tres capas del taller
   ref: uiverse.io · PriyanshuGupta28 · brave-mole-100. El canto va de
   box-shadow y no de tres spans. La cara sube y el canto crece lo mismo, así
   el filo de abajo nunca se mueve.
   ============================================================ */
.btn{
  --color-primary:var(--wa);
  --at-canto:color-mix(in oklab,var(--color-primary) 58%,black);
  --at-alto:4px;
  --at-sombra:rgba(25,15,84,.20);
  display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  padding:1rem 1.75rem;border:1px solid var(--color-primary);border-radius:var(--r-chico);
  background:var(--color-primary);color:var(--sobre);
  font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 var(--at-alto) 0 var(--at-canto),0 calc(var(--at-alto) + 3px) 8px -2px var(--at-sombra);
  transition:transform .25s cubic-bezier(.3,.7,.4,1),box-shadow .25s cubic-bezier(.3,.7,.4,1),
    background-color .16s ease,border-color .16s ease;
}
.btn:hover{
  transform:translateY(-2px);
  background-color:color-mix(in oklab,var(--color-primary) 86%,black);
  border-color:color-mix(in oklab,var(--color-primary) 86%,black);
  box-shadow:0 calc(var(--at-alto) + 2px) 0 var(--at-canto),0 calc(var(--at-alto) + 9px) 14px -3px var(--at-sombra);
}
.btn:active{
  transform:translateY(2px);
  box-shadow:0 calc(var(--at-alto) - 2px) 0 var(--at-canto),0 var(--at-alto) 4px -2px var(--at-sombra);
  transition-duration:34ms;
}
.btn--sm{--at-alto:3px;padding:.625rem 1.125rem;font-size:.9375rem}
.btn--lg{padding:1.125rem 2.25rem;font-size:1.0625rem}
.btn svg{width:20px;height:20px;flex:none}
.cta-nota{margin-top:.875rem;font-size:.875rem;color:var(--texto-2)}
.on-dark .cta-nota{color:var(--tinta-2)}

/* La barra va pegada al borde, como en la versión aprobada: blanca translúcida
   con desenfoque y una línea abajo. 4rem son 68px exactos con la raíz de 17. */
.top{position:sticky;top:0;z-index:80;background:color-mix(in oklab,var(--sobre) 94%,transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--borde)}
.top__inner{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;height:4rem}
.logo{display:inline-flex;align-items:center;gap:.625rem;color:var(--marca)}
.logo__word{font-size:1.5rem;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--texto)}

/* Secciones: la elevación es el salto de superficie, nunca una sombra. */
.section{padding:5.5rem 0}
.section--mist{background:var(--hundido)}
.section--dark{background:var(--tinta);color:var(--sobre)}
.section--dark h2,.section--dark h3{color:var(--sobre)}
.section__head{max-width:45rem;margin-bottom:3rem}
.section__head--center{margin-inline:auto;text-align:center}
.section__head .lead{margin-top:1.125rem}

/* ============================================================
   El hero
   Va con el color de marca a sangre, que es el gesto que define al sistema: el
   violeta abre la página y la cierra, y todo lo de en medio respira en lienzo.
   Sin ese ancla la página entera se ve lavada.
   ============================================================ */
.hero{background:var(--marca);color:var(--sobre);padding:5rem 0 4.5rem}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:3.5rem;align-items:center}
.hero h1{color:var(--sobre)}
.hero .lead{margin-top:1.5rem;max-width:34rem;color:color-mix(in oklab,white 84%,var(--marca))}
.hero .cta-nota{color:color-mix(in oklab,white 74%,var(--marca))}
.hero .btn{margin-top:1.75rem}
/* Sobre el violeta la tarjeta blanca ya se separa sola: el borde la ensuciaba. */
.hero .app{border-color:transparent}

.prueba{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.625rem}
.prueba li{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:500;
  padding:.4375rem .9375rem;border-radius:var(--r-pildora);
  background:color-mix(in oklab,var(--sobre) 15%,transparent);
  color:color-mix(in oklab,white 93%,var(--marca))}
.prueba li::before{content:"";flex:none;width:.3125rem;height:.5625rem;margin-top:-.1875rem;
  border-right:2px solid var(--lima);border-bottom:2px solid var(--lima);transform:rotate(42deg)}

/* Las tarjetas flotantes: blanco sobre violeta, sin sombra. El aire de abajo es
   para que quepan sin taparle datos al mockup. */
.hero__figura{position:relative;padding-bottom:3.5rem}
.flotas{display:contents}
.flota{position:absolute;z-index:3;display:flex;align-items:center;gap:.6875rem;width:13rem;
  padding:.75rem .9375rem;border:1px solid var(--borde);border-radius:var(--r-chico);
  background:var(--superficie);color:var(--texto)}
.flota b{display:block;font-size:.8125rem;font-weight:600;line-height:1.3}
.flota small{display:block;font-size:.75rem;color:var(--texto-2);line-height:1.35;margin-top:1px}
/* Montadas en la esquina, no encima de los datos: cruzan el cromo del
   navegador y el aire de abajo, nunca las cifras del tablero. */
.flota--pago{top:-1.25rem;right:-1.75rem}
.flota--aviso{bottom:.75rem;left:-1.75rem}
.flota__ico{display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%}
.flota__ico--ok{background:color-mix(in oklab,var(--lima) 45%,white);position:relative}
.flota__ico--ok::after{content:"";position:absolute;left:10px;top:8px;width:6px;height:10px;
  border-right:2.2px solid color-mix(in oklab,var(--lima) 55%,black);
  border-bottom:2.2px solid color-mix(in oklab,var(--lima) 55%,black);transform:rotate(42deg)}
.flota__ico--wa{background:color-mix(in oklab,var(--wa) 22%,white);color:color-mix(in oklab,var(--wa) 74%,black)}
.flota__ico--wa svg{width:15px;height:15px}

/* Banda de disciplinas */
.band{background:var(--hondo);padding:1.625rem 0}
.band__inner{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.band__label{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}
.band__lista{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.875rem}
.band__item{font-weight:600;color:var(--texto)}

/* ============================================================
   Los mockups
   Borde y superficie, sin sombra. Llevan datos con nombre y monto porque un
   mockup vacío no prueba nada; es la pieza que más se mira de la página.
   ============================================================ */
.app,.tel{color:var(--texto)}
.app{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-chico);overflow:hidden}
.section--dark .app{border-color:var(--tinta-borde)}
.app__bar{display:flex;align-items:center;gap:.4375rem;padding:.6875rem .875rem;background:var(--hundido);border-bottom:1px solid var(--borde)}
.app__dot{width:.5rem;height:.5rem;border-radius:50%;background:color-mix(in oklab,var(--marca) 18%,var(--hondo))}
.app__url{margin-left:.5rem;font-size:.6875rem;color:var(--texto-2);background:var(--superficie);
  border-radius:var(--r-pildora);padding:.1875rem .75rem;border:1px solid var(--borde)}
.app__body{display:grid;grid-template-columns:9rem minmax(0,1fr);min-height:20rem}
.app__side{background:var(--tinta);padding:1rem .5rem}
.app__side .brand{padding:.125rem .375rem 1rem;display:flex;align-items:center;gap:.5rem;color:var(--sobre)}
.app__side .brand span{font-weight:600;font-size:.9375rem;letter-spacing:-.045em}
.app__nav li{display:flex;align-items:center;gap:.4375rem;padding:.4375rem;border-radius:6px;
  font-size:.75rem;color:var(--tinta-2);white-space:nowrap}
.app__nav li.on{background:var(--marca);color:var(--sobre);font-weight:600}
.app__nav .ic{width:.75rem;height:.75rem;border-radius:3.5px;background:currentColor;opacity:.55;flex:none}
.app__nav li.on .ic{opacity:.9}
.app__main{padding:1rem;background:var(--lienzo)}
.app__title{display:flex;align-items:center;justify-content:space-between;margin-bottom:.875rem}
.app__title h4{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.app__pill{font-size:.6875rem;color:var(--texto-2);background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--r-pildora);padding:.1875rem .6875rem}

.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5625rem}
.kpi{background:var(--superficie);border:1px solid var(--borde);border-radius:8px;padding:.625rem;
  min-width:0;container-type:inline-size}
.kpi small{display:block;font-size:.6563rem;color:var(--texto-2);margin-bottom:.25rem;line-height:1.3}
/* La cifra se mide contra su caja, no contra la pantalla: así $124,850 nunca
   se sale por más que el mockup encoja. */
.kpi b{display:block;font-size:min(1.0625rem,15cqw);font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi i{font-style:normal;font-size:.6563rem;font-weight:600;color:var(--verde)}
.kpi i.down{color:var(--rojo)}

.panels{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:.6875rem;margin-top:.6875rem}
.panel{background:var(--superficie);border:1px solid var(--borde);border-radius:8px;padding:.8125rem .875rem;
  display:flex;flex-direction:column}
.panel--suelto{margin-top:.6875rem}
.panel h5{margin:0 0 .625rem;font-size:.75rem;font-weight:600}
/* Barras de CSS y no una gráfica de SVG: el trazo de un SVG estirado a lo
   ancho se deforma, y con las barras el panel se ve igual de bien a 250px que
   a 600. Las alturas van por nth-child para no meter un style inline. */
.barras{display:flex;align-items:flex-end;gap:.3125rem;flex:1;min-height:3.75rem}
.barras i{flex:1;border-radius:3px 3px 0 0;background:color-mix(in oklab,var(--marca) 20%,white)}
.barras i:nth-child(1){height:38%}
.barras i:nth-child(2){height:47%}
.barras i:nth-child(3){height:43%}
.barras i:nth-child(4){height:62%}
.barras i:nth-child(5){height:71%}
.barras i:nth-child(6){height:86%}
.barras i:nth-child(7){height:100%;background:var(--marca)}
/* Las proporciones van en el flex-grow de cada tramo, no en un ancho fijo. */
.barra{display:flex;height:.5rem;border-radius:var(--r-pildora);overflow:hidden;margin-bottom:.75rem}
.barra i{display:block}
.barra__ok{flex:65;background:var(--marca)}
.barra__wait{flex:25;background:var(--ambar)}
.barra__late{flex:10;background:var(--rojo)}
.legend{display:flex;flex-direction:column;gap:.375rem;font-size:.6875rem;color:var(--texto-2)}
.legend span{display:flex;align-items:center;gap:.4375rem}
.dot{width:.5rem;height:.5rem;border-radius:50%;flex:none}
.dot--ok{background:var(--marca)}
.dot--wait{background:var(--ambar)}
.dot--late{background:var(--rojo)}

.pay{display:flex;align-items:center;gap:.6875rem;padding:.6875rem 0;border-bottom:1px solid var(--borde)}
.pay:last-child{border-bottom:0}
.pay__av{width:1.875rem;height:1.875rem;border-radius:50%;background:color-mix(in oklab,var(--marca) 11%,white);
  color:var(--marca);display:grid;place-items:center;font-size:.6875rem;font-weight:600;flex:none}
.pay__n{flex:1;min-width:0}
.pay__n b{display:block;font-size:.8125rem;font-weight:600}
.pay__n small{display:block;font-size:.6875rem;color:var(--texto-2)}
.pay__meta{display:flex;align-items:center;gap:.6875rem;flex:none}
.pay__amt{font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.tag{font-size:.6875rem;font-weight:500;padding:.1875rem .5625rem;border-radius:var(--r-pildora);
  white-space:nowrap;border:1px solid}
.tag--ok{background:color-mix(in oklab,var(--verde) 9%,white);
  border-color:color-mix(in oklab,var(--verde) 28%,white);color:color-mix(in oklab,var(--verde) 72%,black)}
.tag--wait{background:color-mix(in oklab,var(--azul) 8%,white);
  border-color:color-mix(in oklab,var(--azul) 26%,white);color:color-mix(in oklab,var(--azul) 74%,black)}
.tag--late{background:color-mix(in oklab,var(--rojo) 8%,white);
  border-color:color-mix(in oklab,var(--rojo) 26%,white);color:color-mix(in oklab,var(--rojo) 72%,black)}

/* ============================================================
   El teléfono
   El único mockup enmarcado de la página, y va enmarcado porque WhatsApp se
   lee en un teléfono: el marco dice de un vistazo dónde aterriza el mensaje.
   Los otros dos son la app web y llevan cromo de navegador, que es la verdad.
   ============================================================ */
.tel{position:relative;max-width:19.5rem;margin-inline:auto;padding:.6875rem .5rem .5rem;
  background:var(--tinta);border-radius:2.5rem}
.tel::before{content:"";position:absolute;top:.3125rem;left:50%;transform:translateX(-50%);
  width:3.25rem;height:.25rem;border-radius:var(--r-pildora);
  background:color-mix(in oklab,var(--sobre) 24%,var(--tinta))}
.tel__pantalla{background:var(--wa-fondo);border-radius:2rem;overflow:hidden}
.tel__estado{display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .9375rem .25rem;background:var(--superficie);font-size:.6875rem;font-weight:600}
.tel__iconos{display:flex;align-items:flex-end;gap:.1875rem;opacity:.5}
.tel__barra{width:.1875rem;height:.3125rem;border-radius:1px;background:currentColor}
.tel__barra--alta{height:.5rem}
.tel__bat{width:1.0625rem;height:.5625rem;margin-left:.125rem;border:1.5px solid currentColor;border-radius:2.5px}

.wa__head{display:flex;align-items:center;gap:.625rem;padding:.5rem .875rem .625rem;
  background:var(--superficie);border-bottom:1px solid var(--borde)}
.wa__av{width:2rem;height:2rem;border-radius:50%;background:var(--superficie);color:var(--marca);
  border:1px solid var(--borde);display:grid;place-items:center;flex:none}
.wa__quien b{display:block;font-size:.875rem;font-weight:600;letter-spacing:-.01em}
.wa__quien small{font-size:.75rem;color:color-mix(in oklab,var(--wa) 74%,black)}
.wa__hilo{padding:.875rem .6875rem 1rem}
.bub{max-width:88%;padding:.5625rem .75rem;border-radius:.875rem;font-size:.8125rem;line-height:1.5;margin-bottom:.4375rem}
.bub--in{background:var(--superficie);border-top-left-radius:.25rem}
.bub--out{background:var(--wa-burbuja);margin-left:auto;border-top-right-radius:.25rem}
.bub time{display:block;font-size:.625rem;color:var(--texto-2);text-align:right;margin-top:.125rem}
.wa__auto{display:block;width:fit-content;margin:.75rem auto 0;font-size:.6875rem;font-weight:600;
  color:var(--marca);background:var(--superficie);border-radius:var(--r-pildora);padding:.3125rem .75rem}

/* ============================================================
   Tarjetas
   Radio de 50px y sin sombra. La elevación es el blanco sobre el lienzo, no un
   halo debajo. El relleno va por encima del radio: con menos, el texto se mete
   en la curva de la esquina y la tarjeta se ve mal cortada.
   ============================================================ */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-tarjeta);padding:2.125rem}
.card h3{margin-bottom:.625rem}
.card p{color:var(--texto-2);line-height:1.6}
.card--dark{background:color-mix(in oklab,var(--tinta) 88%,white);border-color:var(--tinta-borde);color:var(--sobre)}
.card--dark h3{color:var(--sobre)}
.card--dark p{color:var(--tinta-2)}
.card__num{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--r-chico);
  margin-bottom:1rem;background:color-mix(in oklab,var(--marca) 9%,white);color:var(--marca);font-weight:600}

/* El costo: columnas separadas por una línea, sin caja. Dibujarlo como el
   problema dejaba seis tarjetas idénticas seguidas y el ojo las salta. */
.costos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.costo{padding:.5rem 2.5rem;border-left:1px solid var(--tinta-borde)}
.costo:first-child{border-left:0;padding-left:0}
.costo:last-child{padding-right:0}
.costo h3{margin-bottom:.75rem;padding-top:1.125rem;position:relative}
.costo h3::before{content:"";position:absolute;top:0;left:0;width:2rem;height:3px;
  border-radius:var(--r-pildora);background:var(--lima)}
.costo p{color:var(--tinta-2);line-height:1.6}

.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem;align-items:center}
.split--flip .split__media{order:-1}
.split__body h2{margin-bottom:1.125rem}
.feat{margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem}
.feat li{display:flex;gap:.75rem;line-height:1.5;color:var(--texto-2)}
.on-dark .feat li{color:var(--tinta-2)}
.feat .bullet{width:1.25rem;height:1.25rem;flex:none;border-radius:var(--r-pildora);margin-top:.125rem;
  background:color-mix(in oklab,var(--marca) 12%,white);position:relative}
.feat .bullet::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;
  border-right:2px solid var(--marca);border-bottom:2px solid var(--marca);transform:rotate(42deg)}
.on-dark .feat .bullet{background:color-mix(in oklab,var(--marca) 30%,var(--tinta))}
.on-dark .feat .bullet::after{border-color:var(--lima)}

.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.vs__col{border-radius:var(--r-tarjeta);padding:2.25rem;border:1px solid var(--borde);background:var(--superficie)}
.vs__col--us{background:var(--tinta);border-color:var(--tinta);color:var(--sobre)}
.vs__col .sub{margin-top:.25rem;font-size:.875rem;color:var(--texto-2);margin-bottom:1.5rem}
.vs__col--us .sub{color:var(--tinta-2)}
.vs__list li{display:flex;gap:.6875rem;padding:.6875rem 0;border-top:1px solid var(--borde);
  line-height:1.5;color:var(--texto-2)}
.vs__col--us .vs__list li{color:var(--tinta-2);border-top-color:var(--tinta-borde)}
.vs__list li::before{content:"—";flex:none;color:color-mix(in oklab,var(--marca) 30%,var(--hondo))}
.vs__col--us .vs__list li::before{content:"→";color:var(--lima)}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.stat{background:color-mix(in oklab,var(--tinta) 88%,white);border:1px solid var(--tinta-borde);
  border-radius:var(--r-tarjeta);padding:2.125rem}
.stat b{display:block;font-size:3rem;font-weight:600;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--lima)}
.stat span{display:block;margin-top:.875rem;color:var(--tinta-2);line-height:1.5}

.oferta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:3.5rem;align-items:center}
.oferta h2{margin-bottom:1.125rem}
.tarjeta-wa{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-tarjeta);padding:2.25rem}
.tarjeta-wa__label{font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--texto-2)}
.tarjeta-wa .btn{width:100%;margin-top:1rem}
.tarjeta-wa__datos{margin:1.375rem 0 0;padding-top:1.25rem;border-top:1px solid var(--borde);
  display:flex;flex-direction:column;gap:.6875rem;font-size:.875rem}
.tarjeta-wa__datos>div{display:flex;justify-content:space-between;gap:1rem}
.tarjeta-wa__datos dt{flex:none;color:var(--texto-2)}
.tarjeta-wa__datos dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.tarjeta-wa__nota{font-size:.8125rem;color:var(--texto-2);margin-top:1rem;text-align:center;line-height:1.5}

/* Preguntas: <details> nativo, con el chevron girando en la curva de rebote. */
.faq{max-width:48rem;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--borde)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.375rem 0;
  font-size:1.1875rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--marca)}
.faq__q .pm{width:1.25rem;height:1.25rem;flex:none;position:relative}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;background:var(--marca);border-radius:2px;
  transition:transform .4s var(--ease-rebote)}
.faq__q .pm::before{left:0;top:9px;width:20px;height:2px}
.faq__q .pm::after{left:9px;top:0;width:2px;height:20px}
.faq__item[open] .pm::after{transform:rotate(90deg)}
.faq__a{padding-bottom:1.375rem;line-height:1.7;color:var(--texto-2);max-width:70ch}

/* El cierre: el color de marca a sangre, como en la landing de siempre. */
.cierre{background:var(--marca);color:var(--sobre);text-align:center;padding:5.5rem 0}
.cierre h2{max-width:47rem;margin-inline:auto}
.cierre .lead{max-width:35rem;margin:1.25rem auto 0;color:color-mix(in oklab,white 82%,var(--marca))}
.cierre .btn{margin-top:2rem;--color-primary:var(--lima);color:var(--texto)}
.cierre__firma{margin-top:1rem;font-size:.875rem;font-variant-numeric:tabular-nums;
  color:color-mix(in oklab,white 78%,var(--marca))}

.foot{background:var(--tinta);color:var(--tinta-2);padding:2.25rem 0;font-size:.875rem}
.foot__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.foot a:hover{color:var(--sobre);text-decoration:underline}
.foot__links{display:flex;flex-wrap:wrap;gap:1.25rem}

/* Páginas legales */
.legal{padding:4rem 0 5.5rem;max-width:48rem}
.legal h1{font-size:clamp(2rem,3.7vw,3.125rem);font-weight:500;letter-spacing:-.06em;line-height:1.15}
.legal .fecha{margin-top:.875rem;color:var(--texto-2);font-size:.9375rem}
.legal h2{font-size:1.1875rem;font-weight:600;margin:2.75rem 0 .875rem}
.legal p{color:var(--texto-2);line-height:1.75;margin-bottom:.875rem}
.legal ul{margin:0 0 .875rem;padding-left:1.375rem;list-style:disc;color:var(--texto-2);line-height:1.75}
.legal li{margin-bottom:.4375rem}
.legal a{color:var(--marca);font-weight:500}
.legal a:hover{text-decoration:underline}
.legal .volver{display:inline-flex;gap:.5rem;font-weight:600;color:var(--marca);margin-bottom:1.75rem}

/* ============================================================
   La entrada
   Corta y corta de recorrido: medio segundo y 10px. La anterior duraba 800ms y
   subía 21px, y como cada tarjeta tenía su propio observador, el renglón se
   veía a media entrada con las tres en estados distintos. Ahora se observa la
   fila entera y las tarjetas se encadenan de a 60ms desde el mismo disparo.
   ============================================================ */
.at-fila>*{opacity:0;transform:translate3d(0,.625rem,0);
  transition:opacity .5s var(--ease-suave),transform .5s var(--ease-suave)}
.at-fila.-dentro>*{opacity:1;transform:none}
.at-fila.-dentro>*:nth-child(2){transition-delay:.06s}
.at-fila.-dentro>*:nth-child(3){transition-delay:.12s}

@media (max-width:1024px){
  .hero{padding:3.5rem 0 3.5rem}
  .hero__grid{grid-template-columns:1fr;gap:2.75rem}
  .hero .lead{max-width:none}
  .flota--pago{right:0}
  .flota--aviso{left:0}
  .split{gap:2.75rem}
  .oferta{grid-template-columns:1fr;gap:2.25rem}
  .costo{padding:.5rem 1.75rem}
}

/* ============================================================
   El celular
   Casi todo el tráfico llega de campañas de WhatsApp, así que esto no es el
   plan B: el sidebar se va entero en vez de volverse una tira que se desliza,
   y el título del panel se queda diciendo en qué pantalla estás.
   ============================================================ */
@media (max-width:900px){
  .section{padding:4rem 0}
  .split,.grid-2,.grid-3,.vs,.stats{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .app__side{display:none}
  .app__body{grid-template-columns:minmax(0,1fr);min-height:0}
  .app__main{padding:.875rem}
  .costos{grid-template-columns:1fr}
  .costo{padding:0;border-left:0}
  .costo+.costo{margin-top:2rem}
}
@media (max-width:700px){
  /* Las dos tarjetas de prueba bajan del mockup a su propio renglón. Flotando
     encima de una pantalla de 350px tapaban justo los datos que venden. */
  .hero__figura{padding-bottom:0}
  .flotas{display:grid;gap:.625rem;margin-top:.75rem}
  .flota{position:static;width:auto}
}
@media (max-width:640px){
  .section{padding:3.25rem 0}
  .cierre{padding:3.25rem 0}
  .hero{padding:2.75rem 0 3rem}
  .vs__col,.card,.tarjeta-wa{padding:1.75rem}
  .stat{padding:1.75rem}
  .top__inner{gap:.75rem}
  .top .btn{padding:.5625rem .875rem;font-size:.875rem;gap:.4375rem}
  .top .btn svg{width:17px;height:17px}
  .logo__word{font-size:1.25rem}
  .logo svg{width:31px;height:31px}
  .btn--lg{padding:1rem 1.75rem;font-size:1rem}
  /* Los tres indicadores se quedan en un renglón: partirlos 2+1 dejaba el
     tercero solo y el mockup dejaba de parecer un tablero. */
  .kpis{gap:.375rem}
  .kpi{padding:.5rem .4375rem}
  /* Dos renglones fijos de etiqueta: si uno solo ocupa uno, las tres cifras
     quedan a distinta altura y el tablero se ve mal cuadrado. */
  .kpi small{font-size:.625rem;margin-bottom:.1875rem;min-height:1.625rem}
  .kpi i{display:none}
  .panels{grid-template-columns:1fr}
  .pay{gap:.5625rem}
  .pay__meta{flex-direction:column;align-items:flex-end;gap:.1875rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .at-fila>*{opacity:1;transform:none}
  .btn:hover{transform:none}
}