/*!
 * Facturero App EC — hoja de estilos del sitio oficial
 * Construida sobre los tokens del Manual de Marca v1.0
 * Sin dependencias externas. Tipografías autoalojadas con rutas relativas.
 */

/* ============================================================
   1. TIPOGRAFÍAS
   Rutas RELATIVAS a este archivo (css/), no absolutas de raíz:
   así el sitio funciona igual en la raíz del dominio o en un subdirectorio.
   ============================================================ */
@font-face{font-family:"Metropolis";src:url("../assets/fonts/metropolis/Metropolis-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Metropolis";src:url("../assets/fonts/metropolis/Metropolis-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Metropolis";src:url("../assets/fonts/metropolis/Metropolis-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Metropolis";src:url("../assets/fonts/metropolis/Metropolis-800.woff") format("woff");font-weight:800;font-style:normal;font-display:swap}
/* Inter cubre las cifras (tabulares) y los signos que Metropolis no trae */
@font-face{font-family:"InterNum";src:url("../assets/fonts/inter/Inter-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"InterNum";src:url("../assets/fonts/inter/Inter-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}

/* ============================================================
   2. TOKENS DE MARCA
   ============================================================ */
:root{
  --blue-50:#f0f9ff;  --blue-100:#dcf1fe; --blue-200:#b4e1fd; --blue-300:#7dcbfc;
  --blue-400:#41b3fb; --blue-500:#0477bf; --blue-600:#0470b4; --blue-700:#035a91;
  --blue-800:#02446e; --blue-900:#022f4b;
  --cyan-50:#f0fcff;  --cyan-100:#dcf8fe; --cyan-200:#b4f0fe; --cyan-300:#7de5fd;
  --cyan-400:#41d9fb; --cyan-500:#04b2d9; --cyan-600:#0394b4; --cyan-700:#037791;
  --cyan-800:#025a6e; --cyan-900:#013e4b;

  --ink-0:#ffffff;  --ink-50:#f7f9fb; --ink-100:#eef3f6; --ink-200:#dee7ed;
  --ink-300:#c3d4df; --ink-400:#95a7b2; --ink-500:#6b8494; --ink-600:#566a76;
  --ink-700:#375162; --ink-800:#253641; --ink-900:#162127; --ink-950:#0d1317;

  --ok-fg:#0f7a4d;   --ok-bg:#e6f5ee;
  --warn-fg:#8a5a00; --warn-bg:#fdf3e0;
  --bad-fg:#b3261e;  --bad-bg:#fdeceb;

  --bg:var(--ink-0);
  --bg-soft:var(--ink-50);
  --bg-dark:var(--ink-950);
  --text:var(--ink-900);
  --text-2:var(--ink-700);
  --text-3:var(--ink-600);
  --line:var(--ink-200);
  --action:var(--blue-500);
  --action-hover:var(--blue-700);
  --accent:var(--cyan-500);

  /* Bandas de color, calibradas para que TODO texto encima pase WCAG AA.
     Dos decisiones medidas, no estéticas:
       · la última parada es cyan-700 (#037791) y no cyan-500: con #0394b4
         el extremo claro daba 3,56:1 contra blanco y fallaba;
       · la parada media es #03649c y no el azul de acción #0477bf, porque
         ese solo daba 4,78:1 con blanco PURO, sin margen para atenuar nada.
     Con #03649c el peor punto da 6,35:1 con blanco y 5,13:1 al 86 %,
     así el texto secundario puede seguir siendo translúcido. */
  --band:linear-gradient(135deg,#02446e 0%,#03649c 48%,#037791 100%);
  --band-soft:linear-gradient(135deg,var(--blue-50) 0%,var(--cyan-50) 100%);

  --font:"Metropolis","InterNum",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-num:"InterNum",ui-sans-serif,system-ui,sans-serif;

  --t-display:clamp(2.25rem,4.8vw,3.5rem);
  --t-h1:clamp(1.875rem,4vw,2.75rem);
  --t-h2:clamp(1.5rem,3vw,2.125rem);
  --t-h3:1.25rem;
  --t-body:1rem;
  --t-sm:.875rem;
  --t-xs:.75rem;
  --t-label:.6875rem;

  --pad-section:clamp(3.5rem,8vw,6rem);
  --radius:16px;      /* formas más suaves que la versión anterior */
  --radius-lg:24px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(13,19,23,.04),0 10px 30px -14px rgba(13,19,23,.18);
  --shadow-lift:0 2px 6px rgba(13,19,23,.05),0 26px 50px -22px rgba(4,119,191,.36);
  --maxw:1200px;
}

/* ============================================================
   3. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Pie pegajoso. Sin esto, cualquier página más corta que la ventana deja el pie
   a media altura con blanco debajo; se veía sobre todo en la confirmación del
   registro, que al ocultar el formulario mide 1095 px y dejaba 205 px de hueco
   en una ventana de 1300. No es `position:fixed`: el pie sigue en el flujo y
   solo baja hasta el borde inferior cuando sobra sitio.
   dvh además descuenta la barra del navegador en móvil; vh queda de reserva.
   Los <script> no llegan a ser ítems flex porque el UA los pone en display:none,
   y .skip es absoluto, así que ninguno de los dos cuenta. */
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
}
main{flex:1 0 auto}
.footer{flex-shrink:0}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.024em;text-wrap:balance;font-weight:800}
h3,h4{font-weight:700;letter-spacing:-.012em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--action-hover);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cyan-500);outline-offset:2px;border-radius:4px}

.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.section{padding-block:var(--pad-section)}
.section--soft{background:var(--bg-soft)}
.section--tint{background:var(--band-soft)}
.section--dark{background:var(--bg-dark);color:var(--ink-50)}

.eyebrow{
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;color:var(--cyan-700);margin:0 0 .75rem;
}
.section--dark .eyebrow{color:var(--cyan-400)}

.sec-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head h2{font-size:var(--t-h2)}
.sec-head p{margin-top:.9rem;font-size:1.0625rem;color:var(--text-2)}
.section--dark .sec-head p{color:var(--ink-300)}
.sec-head--center{margin-inline:auto;text-align:center}

/* ============================================================
   4. BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:var(--t-sm);cursor:pointer;text-decoration:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s ease;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* Relleno de acción = azul. El cyan nunca lleva texto encima (2,51:1). */
.btn--primary{background:var(--action);color:#fff;box-shadow:0 10px 22px -12px rgba(4,119,191,.9)}
.btn--primary:hover{background:var(--action-hover);color:#fff}
.btn--ghost{background:#fff;color:var(--action-hover);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--action);background:var(--blue-50)}
.btn--onDark{background:#fff;color:var(--blue-700)}
.btn--onDark:hover{background:var(--cyan-50);color:var(--blue-800)}
.btn--ghostDark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.34)}
.btn--ghostDark:hover{border-color:#fff;background:rgba(255,255,255,.16)}
.btn--lg{padding:1rem 1.9rem;font-size:1rem}
.btn--xs{padding:.32rem .85rem;font-size:var(--t-xs);gap:.35rem}
.btn--block{width:100%}

/* ============================================================
   5. BARRA SUPERIOR + NAV
   ============================================================ */
.topbar{background:var(--ink-950);color:var(--ink-300);font-size:var(--t-xs)}
.topbar__in{display:flex;align-items:center;gap:1rem;min-height:44px;flex-wrap:wrap;padding-block:.3rem}
/* :not(.btn) evita que esta regla le gane en especificidad al color del botón.
   min-height 24px cumple WCAG 2.2 AA 2.5.8: el texto no se mueve, crece el área
   pulsable, que antes medía 19 px de alto. */
.topbar a:not(.btn){
  color:var(--ink-300);font-weight:600;
  display:inline-flex;align-items:center;min-height:24px;
}
.topbar a:not(.btn):hover{color:#fff;text-decoration:none}
.topbar__sep{margin-left:auto;display:flex;gap:1rem;align-items:center}
.topbar__phone{display:inline-flex;align-items:center;gap:.4rem;color:var(--cyan-300)}

.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.nav__in{display:flex;align-items:center;gap:1.5rem;height:72px}
.nav__brand{display:flex;align-items:center;flex-shrink:0}
.nav__brand img{height:36px;width:auto}
.nav__links{display:none;gap:1.6rem;margin-left:auto;align-items:center}
.nav__links a{
  color:var(--text-2);font-size:var(--t-sm);font-weight:600;
  display:inline-flex;align-items:center;min-height:24px;   /* WCAG 2.2 · 2.5.8 */
}
.nav__links a:hover{color:var(--action-hover);text-decoration:none}
.nav__cta{display:none;gap:.6rem;align-items:center}

/* El acceso al sistema no se repite: mientras la barra superior está en
   pantalla manda su botón, y el del nav aparece recién cuando esa barra
   sale. La clase .is-top la pone facturero.js con un IntersectionObserver;
   si el JS no corre, el botón simplemente queda siempre visible. */
.nav__login{
  overflow:hidden;white-space:nowrap;max-width:14rem;opacity:1;
  transition:max-width .24s ease,opacity .16s ease,padding .24s ease,margin .24s ease;
}
.is-top .nav__login{
  max-width:0;opacity:0;padding-inline:0;border-width:0;
  margin-right:-.6rem;pointer-events:none;
}
.nav__toggle{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:transparent;border:1.5px solid var(--line);
  border-radius:12px;cursor:pointer;
}
.nav__toggle span{display:block;width:18px;height:2px;background:var(--text);position:relative;border-radius:2px}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text);border-radius:2px;
}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav__panel{display:none;border-top:1px solid var(--line);padding:1rem 0 1.5rem}
.nav__panel.is-open{display:block}
.nav__panel ul{display:flex;flex-direction:column;gap:.25rem}
.nav__panel a{display:block;padding:.7rem .25rem;font-weight:600;color:var(--text-2)}
.nav__panel .btn{margin-top:.75rem}
@media(min-width:1000px){
  .nav__links,.nav__cta{display:flex}
  .nav__toggle{display:none}
  .nav__panel{display:none !important}
}

/* ============================================================
   6. HERO — banda degradada + avatar de marca
   ============================================================ */
.hero{background:var(--band);color:#fff;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto auto;width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(65,217,251,.28),transparent 62%);pointer-events:none;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;
  background:var(--bg);
  clip-path:polygon(0 100%,100% 0,100% 100%);
  pointer-events:none;
}
.hero__in{
  display:grid;gap:clamp(2.5rem,5vw,3.5rem);
  padding-block:clamp(3rem,7vw,5rem) clamp(5rem,9vw,7rem);
  position:relative;z-index:1;align-items:center;
}
@media(min-width:980px){.hero__in{grid-template-columns:1.08fr .92fr}}

.hero__hook{
  display:inline-flex;align-items:baseline;gap:.5rem;padding:.45rem 1rem .45rem .8rem;
  border-radius:999px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);margin-bottom:1.25rem;
  font-size:var(--t-sm);font-weight:600;
}
.hero__hook b{font-family:var(--font-num);font-size:1.0625rem;font-weight:600;color:var(--cyan-300)}
.hero h1{font-size:var(--t-display);color:#fff;max-width:15ch}
.hero__lede{margin-top:1.15rem;font-size:1.125rem;color:rgba(255,255,255,.86);max-width:50ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero__note{margin-top:1.1rem;font-size:var(--t-sm);color:rgba(255,255,255,.82)}
.hero__facts{display:flex;flex-wrap:wrap;gap:0 2.5rem;margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.18)}
.hero__facts div{padding:.35rem 0}
.hero__facts dt{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.82);font-weight:700}
.hero__facts dd{margin:.2rem 0 0;font-size:1.375rem;font-weight:800;color:#fff}

/* ---- escenario del avatar ---- */
.stage{position:relative;display:grid;place-items:center;min-height:360px}
.stage__glow{
  position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);
}
.avatar-btn{
  background:none;border:0;padding:0;margin:0;display:block;cursor:pointer;
  width:min(340px,80%);position:relative;z-index:2;border-radius:20px;
}
.avatar-btn:focus-visible{outline:3px solid #fff;outline-offset:8px}

/* ---- Facti: mascota ----
   El dibujo sale de assets/img/svg/facti-*.svg y va INCRUSTADO en el HTML, no
   con <img>: esos archivos no llevan CSS y sus clases (.flota, .brazos, .lid…)
   son ganchos vacíos, así que servidos como imagen quedarían quietos.
   Al incrustarlos desapareció el <symbol>/<use>, y con él toda la maniobra de
   custom properties que hacía falta para animar dentro de un shadow tree:
   ahora son elementos normales y los alcanza cualquier selector. */
.facti{width:100%;overflow:visible;display:block}

/* .flota es un grupo INTERNO, no la raíz. La sombra queda fuera de él, así que
   ya no sube con el cuerpo y no hay que bajarla para compensar. Qué pose flota
   lo decide el propio dibujo: duda y rechazado no traen el grupo. */
.facti .flota{animation:flotar 5s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* la sombra se queda en el suelo: solo se cierra y se aclara cuando el cuerpo
   sube, que es lo que se lee como altura */
.facti--flota .sombra{
  transform-box:fill-box;transform-origin:center;
  animation:sombraFlota 5s ease-in-out infinite;
}
@keyframes sombraFlota{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.84);opacity:.5}
}

/* Arranca y termina en el mismo fotograma a propósito: el killswitch global de
   prefers-reduced-motion (sección 18) deja congelado el último, y ese tiene
   que ser el estado visible o las líneas desaparecen.
   El escalonado viene en un style en línea del propio dibujo; gana al atajo
   `animation` de aquí porque el estilo en línea manda por propiedad. */
.facti--flota .estela rect{
  transform-box:fill-box;
  animation:estela 5s ease-in-out infinite;
}
@keyframes estela{
  0%,100%{transform:translateX(0);opacity:.95}
  50%{transform:translateX(-13px);opacity:.3}
}

/* Párpados. transform-box:fill-box es imprescindible: sin él el origen se
   calcula contra el viewport del SVG y el párpado se cierra en diagonal.
   Los archivos traían estas tres declaraciones en un style en línea, que ganaba
   a la hoja y habría dejado el ojo cerrado para siempre; se quitan al incrustar
   y viven aquí. */
.facti .lid{
  transform-box:fill-box;transform-origin:center;
  transform:scaleY(0);transition:transform .09s ease;
}
.facti.is-blinking .lid{transform:scaleY(1)}
/* grupo añadido al incrustar: el dibujo original no separa los brillos, y el JS
   necesita moverlos sin arrastrar el ojo entero */
.facti__pupilas{transition:transform .12s ease-out}

/* brazos: medio tiempo por detrás del cuerpo. Esa inercia es lo que separa un
   muñeco articulado de un recorte que sube y baja entero. */
.facti--flota .brazos{
  transform-box:fill-box;transform-origin:center;
  animation:brazos 5s ease-in-out infinite;
}
@keyframes brazos{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(5px) rotate(-2.6deg)}
}

/* ---- sello ----
   El trazo mide 42,46 u (getTotalLength) y se declara 44. Si el path cambia hay
   que recalcular: con un dash corto el trazo retrae de menos y deja un muñón,
   que es el fallo que ya tuvo la línea de tendencia de los iconos. La base es
   0 —dibujado— para que con movimiento reducido, que salta al último fotograma,
   el sello quede completo. */
.facti .sello{transform-box:fill-box;transform-origin:center;transition:transform .2s ease}
.facti .trazo{stroke-dasharray:44;stroke-dashoffset:0}
.facti--flota .trazo{animation:trazoCheck .75s ease-out}
@keyframes trazoCheck{from{stroke-dashoffset:44}to{stroke-dashoffset:0}}

/* micro-reacción al puntero: antes no había nada entre quieto y emitiendo */
.avatar-btn:hover .sello{transform:scale(1.09)}

/* ---- boca ----
   Al emitir, la sonrisa deja paso a una "o" de sorpresa. */
.facti__boca-o{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.stage.is-emitting .facti__boca{animation:bocaCede .75s ease}
.stage.is-emitting .facti__boca-o{animation:bocaOh .75s ease}
@keyframes bocaCede{0%,100%{opacity:1}22%,68%{opacity:0}}
@keyframes bocaOh{
  0%,100%{opacity:0;transform:scale(.4)}
  22%,68%{opacity:1;transform:scale(1)}
}

/* ---- pose dudosa (FAQ): signos que suben ----
   El dibujo no da ni color ni tipografía a los <text>: sin esto saldrían negros
   y en la fuente por defecto. La opacidad base es 1, no 0: mientras el bucle
   corre nunca se ve porque la animación es infinita y siempre manda, pero con
   movimiento reducido —que la colapsa a una sola pasada— es la base la que
   queda, y tres signos quietos leen mejor que ninguno. */
.facti .duda text{
  font-family:var(--font);font-weight:800;fill:var(--cyan-500);opacity:1;
  transform-box:fill-box;transform-origin:center;
  animation:duda 3.6s ease-in-out infinite;
}
.facti .duda text:nth-child(2){animation-delay:1.2s}
.facti .duda text:nth-child(3){animation-delay:2.4s}
@keyframes duda{
  0%{opacity:0;transform:translateY(10px) scale(.8)}
  22%{opacity:1;transform:translateY(0) scale(1)}
  62%{opacity:1;transform:translateY(-10px) scale(1)}
  100%{opacity:0;transform:translateY(-26px) scale(.9)}
}

/* ---- Facti en formato avatar: assets/img/svg/facti-av-*.svg ----
   200×200, con anillo de color y chapa de estado. Se incrustan por lo mismo que
   los de cuerpo entero, y aquí importa más: un spinner detenido dice justo lo
   contrario de lo que tiene que decir.
   Ojo con los .lid de estos archivos: llegan con un style en línea que fija
   scaleY(0) y origen abajo. Como el estilo en línea gana a la hoja, no se les
   pone parpadeo; si algún día hace falta, hay que quitarles el style al
   incrustar, igual que se hizo con los de cuerpo entero. */
.panel__titulo{display:flex;align-items:center;gap:.7rem;min-width:0}
.facti-av{width:46px;height:46px;flex:none;display:block}

.facti-av .fl{animation:avFlota 3.4s ease-in-out infinite}
@keyframes avFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* el aro exterior y el spinner de la chapa giran sobre sus propios centros;
   view-box porque las dos coordenadas son del sistema del dibujo */
.facti-av .orbit{transform-box:view-box;transform-origin:100px 100px;animation:avGira 1.5s linear infinite}
.facti-av .spin{transform-box:view-box;transform-origin:160px 160px;animation:avGira 1s linear infinite}
@keyframes avGira{to{transform:rotate(360deg)}}

/* la barra de progreso: base llena, que es el fotograma que deja congelado el
   killswitch de movimiento reducido */
.facti-av .bar{transform-box:fill-box;transform-origin:left center;animation:avBarra 1.8s ease-in-out infinite}
@keyframes avBarra{0%,100%{transform:scaleX(1)}25%{transform:scaleX(.15)}}

/* boca que habla: dos formas turnándose. m1 es la base, así que quieto queda
   con la boca abierta y no sin boca. */
.facti-av .m1{animation:avBoca1 .9s steps(1) infinite}
.facti-av .m2{opacity:0;animation:avBoca2 .9s steps(1) infinite}
@keyframes avBoca1{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes avBoca2{0%,50%{opacity:0}50.01%,100%{opacity:1}}

.facti-av .look{transform-box:fill-box;transform-origin:center;animation:avMira 3s ease-in-out infinite}
@keyframes avMira{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}65%{transform:translateX(3px)}}

.facti-av .spark{transform-box:fill-box;transform-origin:center;animation:avChispa 2.4s ease-in-out infinite}
@keyframes avChispa{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.5);opacity:.35}}

/* Entrada de la chapa de resultado. El panel llega con hidden, así que estas
   animaciones no arrancan hasta que se muestra: son de una sola pasada y se
   ven justo cuando el comprobante queda autorizado.
   El trazo mide 37,57 u y se declara 39; base 0 —dibujado— por lo de siempre. */
.facti-av .pop{transform-box:fill-box;transform-origin:center;animation:avPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes avPop{from{transform:scale(.4)}to{transform:scale(1)}}
/* El dash es un parámetro, no una constante: el check mide 37,57 u y la X de la
   devolución 50,91 (dos trazos de 25,46). Misma convención que los iconos de
   #beneficios: cada trazo declara su propio --dash o retrae de menos y deja
   muñón. La X lo lleva en un style en línea. */
.facti-av .draw{stroke-dasharray:var(--dash,39);stroke-dashoffset:0;animation:avTrazo .5s ease-out .18s backwards}
@keyframes avTrazo{from{stroke-dashoffset:var(--dash,39)}to{stroke-dashoffset:0}}

/* devolución: un temblor corto de una pasada y la boca hacia abajo */
.facti-av .shake{transform-box:fill-box;transform-origin:center;animation:avTiembla .5s ease-in-out .1s}
@keyframes avTiembla{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-3px)}
  40%,80%{transform:translateX(3px)}
}
.facti-av .wobble{transform-box:fill-box;transform-origin:center;animation:avMueca 2.6s ease-in-out infinite}
@keyframes avMueca{0%,100%{transform:translateY(0)}50%{transform:translateY(1.5px)}}

/* alerta: el aro late y la chapa con él. La ceja fruncida no se anima. */
.facti-av .halo{transform-box:view-box;transform-origin:100px 100px;animation:avLate 2s ease-in-out infinite}
@keyframes avLate{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.06;transform:scale(1.03)}}
.facti-av .pulse{transform-box:fill-box;transform-origin:center;animation:avChapa 2s ease-in-out infinite}
@keyframes avChapa{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.facti-av .grow{transform-box:fill-box;transform-origin:center top;animation:avSonrisa .45s ease-out .12s backwards}
@keyframes avSonrisa{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* el brazo que saluda. El origen es el hombro, abajo del rect, no su centro:
   girando por el centro el brazo se despega del cuerpo. */
.facti-av .wave{transform-box:fill-box;transform-origin:center bottom;animation:avSaluda 1.6s ease-in-out infinite}
@keyframes avSaluda{
  0%,60%,100%{transform:rotate(0deg)}
  15%,45%{transform:rotate(-16deg)}
  30%{transform:rotate(4deg)}
}

/* fichas flotantes alrededor del avatar */
.chip-float{
  position:absolute;z-index:3;background:#fff;color:var(--text);
  border-radius:999px;padding:.5rem .9rem;display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--t-xs);font-weight:700;box-shadow:0 12px 30px -12px rgba(2,47,75,.6);
  white-space:nowrap;
}
.chip-float svg{flex-shrink:0}
.chip-float--a{top:6%;left:-2%;animation:flotar 6s ease-in-out infinite}
.chip-float--b{bottom:16%;right:-4%;animation:flotar 6.8s ease-in-out .6s infinite}
.chip-float--c{bottom:2%;left:6%;animation:flotar 7.4s ease-in-out 1.2s infinite}
.chip-float .ok{color:var(--ok-fg)}

/* Estado "emitiendo" que dispara el botón del hero. Antes rebotaba solo el chip
   del medio; ahora los tres se encienden en el orden real del trámite —firmado,
   autorizado, enviado— y el adorno pasa a contar lo que hace el producto.
   `both` congela el fotograma inicial durante el retardo, de modo que cada chip
   se queda quieto hasta que le toca en vez de seguir flotando. */
/* El sello se rehace al emitir: es el momento en que el comprobante queda
   autorizado, así que el check se redibuja en vez de estar ya puesto. */
.stage.is-emitting .sello{animation:selloPop .6s ease-out .1s}
.stage.is-emitting .trazo{animation:trazoCheck .55s ease-out .15s backwards}
@keyframes selloPop{0%,100%{transform:scale(1)}40%{transform:scale(1.17)}}

.stage.is-emitting .chip-float{animation:saltar .52s cubic-bezier(.34,1.56,.64,1) both}
.stage.is-emitting .chip-float--a{animation-delay:0s}
.stage.is-emitting .chip-float--b{animation-delay:.28s}
.stage.is-emitting .chip-float--c{animation-delay:.56s}
@keyframes saltar{
  0%{transform:scale(1) translateY(0);box-shadow:0 12px 30px -12px rgba(2,47,75,.6)}
  38%{transform:scale(1.14) translateY(-6px);box-shadow:0 18px 40px -12px rgba(4,178,217,.65)}
  100%{transform:scale(1) translateY(0);box-shadow:0 12px 30px -12px rgba(2,47,75,.6)}
}

/* ============================================================
   7. BENEFICIOS (4 puntos)
   ============================================================ */
/* el hueco entre tarjetas debe superar el padding interno; si no, las
   columnas se leen como un bloque continuo en vez de piezas separadas */
.benefits{display:grid;gap:1.5rem}
@media(min-width:640px){.benefits{grid-template-columns:repeat(2,1fr);gap:1.75rem}}
@media(min-width:1040px){.benefits{grid-template-columns:repeat(4,1fr)}}
.benefit{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.9rem 1.7rem 1.6rem;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.benefit:hover{
  border-color:var(--blue-200);transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(13,19,23,.05),0 22px 44px -20px rgba(4,119,191,.34);
}
.benefit__ico{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--band);color:#fff;margin-bottom:1.1rem;
  box-shadow:0 10px 20px -10px rgba(3,100,156,.75);
}
/* min-height de dos líneas: sin esto los títulos de una y dos líneas
   arrancan los párrafos a alturas distintas y la fila se ve desalineada */
.benefit h3{font-size:1.0625rem;min-height:2.3em;display:flex;align-items:flex-start}
.benefit p{font-size:var(--t-sm);color:var(--text-2);margin-top:.35rem}

/* ancla el pie de la tarjeta: elimina el hueco muerto y añade un dato real */
.benefit__dato{
  margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--t-xs);font-weight:700;color:var(--cyan-800);min-height:24px;
}
.benefit__dato svg{transition:transform .18s ease}
.benefit:hover .benefit__dato svg{transform:translateX(3px)}
.benefit__dato:hover{text-decoration:none;color:var(--blue-700)}
@media(max-width:1039px){.benefit h3{min-height:0}}

/* ============================================================
   7b. ICONOS ANIMADOS
   Cada icono tiene dos capas de movimiento: una de reposo, lenta y
   discreta, y otra al pasar el cursor o enfocar con teclado, más marcada.
   Con prefers-reduced-motion no se mueve ninguno y todos quedan en su
   estado final legible.
   ============================================================ */
.ico{width:22px;height:22px;display:block;overflow:visible}
.mod__ico .ico{width:21px;height:21px}
.ico > *{transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:no-preference){

  /* --- escalones: los tres crecen desde la base --- */
  .ico--escalones .esc{transform-origin:bottom center;animation:escCrece 5.5s ease-in-out infinite}
  .ico--escalones .e2{animation-delay:.18s}
  .ico--escalones .e3{animation-delay:.36s}
  .ico--escalones .flecha{stroke-dasharray:22;stroke-dashoffset:0;animation:flechaSube 5.5s ease-in-out infinite}
  .benefit:hover .ico--escalones .esc{animation-duration:1.6s}

  /* --- caja: la tapa respira --- */
  .ico--caja .tapa{animation:tapaFlota 5.5s ease-in-out infinite}
  .benefit:hover .ico--caja .tapa{animation:tapaAbre .7s ease-out}

  /* --- sync: las ondas laten hacia el móvil --- */
  .ico--sync .onda{animation:ondaLate 3.4s ease-in-out infinite;opacity:.25}
  .ico--sync .o2{animation-delay:.5s}
  .benefit:hover .ico--sync .onda{animation-duration:1.3s}
  .benefit:hover .ico--sync .movil{animation:movilLate .8s ease-out}

  /* --- chat: los puntos escriben --- */
  .ico--chat .punto{animation:puntoEscribe 2.2s ease-in-out infinite}
  .ico--chat .d2{animation-delay:.18s}
  .ico--chat .d3{animation-delay:.36s}

  /* --- factura: el visto se dibuja --- */
  .ico--factura .visto{--dash:16;stroke-dasharray:16;stroke-dashoffset:16;animation:trazo 5s ease-in-out infinite}
  .ico--factura .ren{animation:renglon 5s ease-in-out infinite}
  .ico--factura .r2{animation-delay:.2s}
  .mod:hover .ico--factura .visto{animation:trazo 1.1s ease-out}

  /* --- kardex: el contador de stock pulsa --- */
  .ico--kardex .pulso{animation:pulsoStock 3.6s ease-in-out infinite}
  .mod:hover .ico--kardex .tapa{animation:tapaAbre .7s ease-out}

  /* --- personas: la flecha va y viene --- */
  .ico--personas .intercambio{animation:vaViene 3.2s ease-in-out infinite}
  .ico--personas .i2{animation-delay:.06s}
  .mod:hover .ico--personas .c-izq,
  .mod:hover .ico--personas .c-der{animation:cabezaSaluda .8s ease-out}
  .mod:hover .ico--personas .c-der{animation-delay:.12s}

  /* --- reportes: las barras suben --- */
  .ico--reportes .barra{transform-origin:bottom center;animation:barraSube 5s ease-in-out infinite}
  .ico--reportes .v2{animation-delay:.14s}
  .ico--reportes .v3{animation-delay:.28s}
  .ico--reportes .tendencia{--dash:20;stroke-dasharray:20;stroke-dashoffset:20;animation:trazo 5s ease-in-out infinite;animation-delay:.4s}
  .mod:hover .ico--reportes .barra{animation-duration:1.4s}

  /* --- punto de venta: la tarjeta entra en la ranura --- */
  .ico--pos .tarjeta{animation:tarjetaEntra 4.4s ease-in-out infinite}
  .mod:hover .ico--pos .tarjeta{animation:tarjetaEntra 1.4s ease-in-out}

  /* --- api: las llaves se abren --- */
  .ico--api .k-izq{animation:llaveIzq 4s ease-in-out infinite}
  .ico--api .k-der{animation:llaveDer 4s ease-in-out infinite}
  .ico--api .barra-med{animation:barraMedia 4s ease-in-out infinite}
  .mod:hover .ico--api .k-izq,
  .mod:hover .ico--api .k-der{animation-duration:1.2s}
}

@keyframes escCrece{
  0%,58%{transform:scaleY(1)}
  68%{transform:scaleY(.72)}
  82%,100%{transform:scaleY(1)}
}
@keyframes flechaSube{
  0%,50%{transform:translateY(0);opacity:.85}
  62%{transform:translateY(-1.6px);opacity:1}
  78%,100%{transform:translateY(0);opacity:.85}
}
@keyframes tapaFlota{
  0%,60%{transform:translateY(0)}
  72%{transform:translateY(-1.4px)}
  86%,100%{transform:translateY(0)}
}
@keyframes tapaAbre{
  0%{transform:translateY(0)}
  45%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}
@keyframes ondaLate{
  0%{opacity:.18;transform:scale(.9)}
  45%{opacity:.9;transform:scale(1)}
  100%{opacity:.18;transform:scale(.9)}
}
@keyframes movilLate{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.09)}
}
@keyframes puntoEscribe{
  0%,60%,100%{transform:translateY(0);opacity:.55}
  30%{transform:translateY(-2.2px);opacity:1}
}
/* --dash lo fija cada trazo: así el retraído siempre cubre su propio largo */
@keyframes trazo{
  0%{stroke-dashoffset:var(--dash,16)}
  22%,74%{stroke-dashoffset:0}
  92%,100%{stroke-dashoffset:var(--dash,16)}
}
@keyframes renglon{
  0%,100%{opacity:.45}
  30%,70%{opacity:1}
}
@keyframes pulsoStock{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.18);opacity:1}
}
@keyframes vaViene{
  0%,100%{transform:translateX(-1.6px)}
  50%{transform:translateX(1.6px)}
}
@keyframes cabezaSaluda{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2.2px)}
}
@keyframes barraSube{
  0%,55%{transform:scaleY(1)}
  70%{transform:scaleY(.68)}
  86%,100%{transform:scaleY(1)}
}
@keyframes tarjetaEntra{
  0%,12%{transform:translateY(-2.4px)}
  38%,58%{transform:translateY(2.6px)}
  84%,100%{transform:translateY(-2.4px)}
}
@keyframes llaveIzq{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-1.5px)}
}
@keyframes llaveDer{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(1.5px)}
}
@keyframes barraMedia{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* ============================================================
   8. MULTI-DISPOSITIVO
   ============================================================ */
.devices{display:grid;gap:1.5rem}
@media(min-width:820px){.devices{grid-template-columns:repeat(3,1fr)}}
.device{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:.75rem;box-shadow:var(--shadow);
}
.device__art{
  width:100%;height:210px;border-radius:var(--radius);background:var(--band-soft);
  display:grid;place-items:center;margin-bottom:.5rem;border:1px solid var(--blue-100);
  overflow:hidden;
}
.device h3{font-size:1.0625rem}
.device p{font-size:var(--t-sm);color:var(--text-2)}

/* ---- maquetas de interfaz, dibujadas en CSS: sin imágenes ni librerías ---- */
.mock{position:relative}
.mock__pantalla{background:#fff;overflow:hidden;position:relative}
.mock__barra{
  height:15px;background:var(--blue-700);display:flex;align-items:center;gap:3px;
  padding-inline:5px;flex-shrink:0;
}
.mock__barra i{width:3.5px;height:3.5px;border-radius:50%;background:rgba(255,255,255,.55)}
.mock__barra b{
  margin-left:5px;font-size:5.5px;font-weight:700;color:rgba(255,255,255,.9);
  letter-spacing:.04em;text-transform:uppercase;
}

/* ============ LAPTOP ============ */
.mock--laptop{width:min(250px,88%)}
.mock--laptop .mock__pantalla{
  height:150px;border-radius:6px 6px 0 0;display:flex;flex-direction:column;
  box-shadow:0 10px 24px -12px rgba(2,47,75,.5);
}
/* la base es 112 % de la pantalla y se centra con -6 %: proporcional,
   así nunca se recorta por angosta que sea la tarjeta */
.mock__base{
  width:112%;margin-left:-6%;height:9px;border-radius:0 0 9px 9px;
  background:linear-gradient(180deg,var(--ink-300),var(--ink-400));
}
.mock__cuerpo{flex:1;display:flex;min-height:0}
.mock__menu{
  width:34px;background:var(--ink-950);padding:7px 5px;display:flex;
  flex-direction:column;gap:6px;flex-shrink:0;
}
.mock__menu i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.mock__menu i.on{background:var(--cyan-400)}
.mock__panel{flex:1;padding:7px;display:flex;flex-direction:column;gap:6px;min-width:0}
.mock__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mock__kpis span{
  background:var(--ink-50);border:1px solid var(--ink-100);border-radius:3px;
  padding:4px;display:flex;flex-direction:column;gap:3px;
}
.mock__kpis u{display:block;height:3px;width:60%;border-radius:2px;background:var(--ink-300);text-decoration:none}
.mock__kpis s{display:block;height:5px;width:80%;border-radius:2px;background:var(--blue-500);text-decoration:none}
.mock__kpis span:nth-child(2) s{background:var(--cyan-500);width:64%}
.mock__kpis span:nth-child(3) s{background:var(--ok-fg);width:72%}
.mock__filas{display:flex;flex-direction:column;gap:4px;margin-top:1px}
.mock__filas li{
  display:flex;align-items:center;gap:5px;padding:4px 5px;
  background:var(--ink-50);border-radius:3px;
}
.mock__filas i{display:block;height:4px;border-radius:2px;background:var(--ink-300)}
.mock__filas .f1{width:38%}
.mock__filas .f2{width:26%;background:var(--ink-200)}
.mock__filas .pt{width:6px;height:6px;border-radius:50%;margin-left:auto;background:var(--ok-fg)}
.mock__filas .pt--esp{background:var(--ink-300)}

/* ============ TABLET / PUNTO DE VENTA ============ */
.mock--tablet{width:136px}
.mock--tablet .mock__pantalla{
  height:186px;border-radius:11px;border:4px solid var(--ink-900);
  display:flex;flex-direction:column;box-shadow:0 10px 24px -12px rgba(2,47,75,.5);
}
.mock__barra--pos{justify-content:flex-start}
.mock__barra--pos b{margin-left:0}
.pos{flex:1;display:flex;min-height:0}
.pos__grid{
  flex:1;padding:5px;display:grid;grid-template-columns:repeat(2,1fr);
  gap:4px;align-content:start;
}
.pos__prod{
  display:block;height:20px;border-radius:3px;background:var(--blue-50);
  border:1px solid var(--blue-100);
}
.pos__carrito{
  width:52px;background:var(--ink-50);border-left:1px solid var(--ink-200);
  padding:5px;display:flex;flex-direction:column;gap:4px;flex-shrink:0;
}
/* visibles por defecto: si el sistema pide menos movimiento, el carrito
   se ve completo en vez de vacío. La animación arranca desde oculto. */
.pos__carrito i{display:block;height:4px;border-radius:2px;background:var(--ink-300)}
.pos__carrito .l1{width:88%}.pos__carrito .l2{width:70%}.pos__carrito .l3{width:80%}
.pos__total{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.pos__total u{display:block;height:3px;width:50%;border-radius:2px;background:var(--ink-300);text-decoration:none}
.pos__total s{display:block;height:7px;width:90%;border-radius:2px;background:var(--blue-700);text-decoration:none}
.pos__cobrar{height:13px;border-radius:3px;background:var(--ok-fg);margin-top:3px}

/* ============ CELULAR ============ */
.mock--celular{width:92px}
.mock--celular .mock__pantalla{
  height:186px;border-radius:13px;border:4px solid var(--ink-900);
  display:flex;flex-direction:column;box-shadow:0 10px 24px -12px rgba(2,47,75,.5);
}
.mock__barra--cel{height:13px;position:relative}
.mock__barra--cel::after{
  content:"";position:absolute;left:50%;top:3px;transform:translateX(-50%);
  width:22px;height:4px;border-radius:3px;background:rgba(0,0,0,.45);
}
.cel{flex:1;padding:7px;display:flex;flex-direction:column;gap:6px;position:relative}
.cel i{display:block;height:9px;border-radius:3px;background:var(--ink-100);border:1px solid var(--ink-200)}
.cel__boton{height:12px;border-radius:3px;background:var(--blue-500);margin-top:2px}
.cel__ok{
  position:absolute;inset:0;background:rgba(255,255,255,.94);
  display:grid;place-items:center;opacity:0;
}
.cel__ok svg{width:30px;height:30px;color:var(--ok-fg)}

/* ============ ANIMACIÓN ============
   Un ciclo de 7 s compartido: la laptop autoriza un comprobante, la tablet
   arma el carrito y cobra, el celular emite. Se detiene por completo si el
   sistema pide menos movimiento. */
@media (prefers-reduced-motion:no-preference){
  .mock__filas li{animation:filaEntra 7s ease-in-out infinite}
  .mock__filas li:nth-child(1){animation-delay:.1s}
  .mock__filas li:nth-child(2){animation-delay:.35s}
  .mock__filas li:nth-child(3){animation-delay:.6s}
  .mock__filas li:nth-child(4){animation-delay:.85s}
  .pt--cambia{animation:puntoCambia 7s ease-in-out infinite}
  .mock__kpis s{animation:barraCrece 7s ease-out infinite;transform-origin:left center}

  .pos__prod{animation:prodLatir 7s ease-in-out infinite}
  .pos__prod.p2{animation-delay:1.1s}
  .pos__prod.p5{animation-delay:2.2s}
  .pos__prod.p1,.pos__prod.p3,.pos__prod.p4,.pos__prod.p6{animation:none}
  .pos__carrito i{animation:lineaEntra 7s ease-out infinite}
  .pos__carrito .l1{animation-delay:.5s}
  .pos__carrito .l2{animation-delay:1.5s}
  .pos__carrito .l3{animation-delay:2.6s}
  .pos__total s{animation:totalSube 7s ease-out infinite;transform-origin:left center}
  .pos__cobrar{animation:cobrarLatir 7s ease-in-out infinite}

  .cel i{animation:campoLlena 7s ease-out infinite}
  .cel .c1{animation-delay:.3s}
  .cel .c2{animation-delay:.9s}
  .cel .c3{animation-delay:1.5s}
  .cel .c4{animation-delay:2.1s}
  .cel__boton{animation:cobrarLatir 7s ease-in-out 2.6s infinite}
  .cel__ok{animation:okAparece 7s ease-out infinite}
}

@keyframes filaEntra{
  0%,4%{opacity:0;transform:translateY(5px)}
  12%,92%{opacity:1;transform:translateY(0)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes puntoCambia{
  0%,44%{background:var(--warn-fg)}
  52%,100%{background:var(--ok-fg)}
}
@keyframes barraCrece{
  0%,6%{transform:scaleX(.15)}
  30%,100%{transform:scaleX(1)}
}
@keyframes prodLatir{
  0%,6%{background:var(--blue-50);transform:scale(1)}
  10%{background:var(--cyan-200);transform:scale(1.07)}
  16%,100%{background:var(--blue-50);transform:scale(1)}
}
@keyframes lineaEntra{
  0%,6%{opacity:0;transform:translateX(-4px)}
  14%,92%{opacity:1;transform:translateX(0)}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes totalSube{
  0%,8%{transform:scaleX(.35)}
  22%{transform:scaleX(.6)}
  38%{transform:scaleX(.82)}
  52%,100%{transform:scaleX(1)}
}
@keyframes cobrarLatir{
  0%,56%{transform:scale(1);filter:brightness(1)}
  62%{transform:scale(1.06);filter:brightness(1.18)}
  70%,100%{transform:scale(1);filter:brightness(1)}
}
@keyframes campoLlena{
  0%,6%{background:var(--ink-100)}
  14%,88%{background:var(--cyan-50);border-color:var(--cyan-200)}
  100%{background:var(--ink-100)}
}
@keyframes okAparece{
  0%,68%{opacity:0;transform:scale(.9)}
  76%,92%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.98)}
}

/* ============================================================
   9. AFILIACIÓN EN 3 PASOS
   ============================================================ */
/* Es una secuencia real, así que la progresión se dibuja: una línea une los
   tres pasos por detrás de las tarjetas. Solo en escritorio; apilados en
   móvil el orden ya lo da la lectura vertical. */
.steps{display:grid;gap:1.75rem;position:relative;list-style:none;margin:0;padding:0}
@media(min-width:860px){
  .steps{grid-template-columns:repeat(3,1fr);gap:2rem}
  .steps::before{
    content:"";position:absolute;top:2px;left:16%;right:16%;height:2px;
    background:linear-gradient(90deg,var(--blue-200),var(--cyan-300),var(--blue-200));
    border-radius:2px;
  }
}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:2.6rem 1.7rem 1.6rem;display:flex;flex-direction:column;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.step:hover{
  border-color:var(--blue-200);transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(13,19,23,.05),0 22px 44px -20px rgba(4,119,191,.34);
}
.step__n{
  position:absolute;top:-22px;left:1.5rem;width:46px;height:46px;border-radius:15px;
  background:var(--band);color:#fff;display:grid;place-items:center;
  font-family:var(--font-num);font-size:1.25rem;font-weight:600;
  box-shadow:0 10px 22px -10px rgba(3,100,156,.85);
  border:3px solid #fff;   /* corta la línea de progresión bajo el número */
}
/* dos líneas reservadas: los párrafos de los tres pasos arrancan a la misma altura */
.step h3{font-size:1.0625rem;margin-top:.5rem;min-height:2.3em;display:flex;align-items:flex-start}
.step p{font-size:var(--t-sm);color:var(--text-2);margin-top:.35rem}

/* ancla el pie y dice qué cuesta cada paso: es lo que baja la fricción */
.step__meta{
  margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--t-xs);font-weight:700;color:var(--cyan-800);min-height:24px;
}
.step__meta b,.step__meta .num{font-weight:700}
.step__meta--ok{color:var(--ok-fg)}
@media(max-width:859px){.step h3{min-height:0}}

/* separado del grupo de tarjetas por espacio y un filete: sin eso el cierre
   se lee como una cuarta pieza pegada a la fila */
.steps__cierre{
  margin-top:clamp(2.75rem,5vw,4rem);padding-top:clamp(1.75rem,3vw,2.25rem);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;
  align-items:center;justify-content:center;text-align:center;
}
.steps__cierre p{font-size:1.0625rem;color:var(--text-2)}

/* ============================================================
   10. MÓDULOS
   ============================================================ */
/* mismo sistema que .benefits y .steps: hueco externo mayor que el interno */
.mods{display:grid;gap:1.5rem}
@media(min-width:640px){.mods{grid-template-columns:repeat(2,1fr);gap:1.75rem}}
@media(min-width:980px){.mods{grid-template-columns:repeat(3,1fr)}}
.mod{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.9rem 1.7rem 1.6rem;display:flex;flex-direction:column;
  box-shadow:var(--shadow);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.mod:hover{
  border-color:var(--blue-200);transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(13,19,23,.05),0 22px 44px -20px rgba(4,119,191,.34);
}
/* degradado de marca, igual que .benefit__ico: el cyan-100 plano quedaba
   mucho más débil que los iconos de las otras dos secciones */
.mod__ico{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--band);color:#fff;margin-bottom:1.1rem;
  box-shadow:0 10px 20px -10px rgba(3,100,156,.75);
}
.mod h3{font-size:1.0625rem;min-height:2.3em;display:flex;align-items:flex-start}
/* margin-bottom garantiza aire antes de la pastilla incluso cuando el texto
   llena la tarjeta; el margin-top:auto de la pastilla solo añade el sobrante */
.mod p{font-size:var(--t-sm);color:var(--text-2);margin-top:.35rem;margin-bottom:1.15rem}

/* la disponibilidad por plan ahora es una pastilla que lleva a los precios */
.mod__tag{
  align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .7rem;border-radius:999px;min-height:24px;
  background:var(--cyan-50);color:var(--cyan-800);
  font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  transition:background-color .16s ease,color .16s ease;
}
.mod__tag svg{transition:transform .18s ease}
.mod:hover .mod__tag svg{transform:translateX(3px)}
.mod__tag:hover{background:var(--blue-50);color:var(--blue-700);text-decoration:none}
@media(max-width:979px){.mod h3{min-height:0}}

/* ============================================================
   11. PERFILES
   ============================================================ */
/* mismo sistema que .benefits, .steps y .mods: hueco externo mayor que el
   interno, tarjeta con sombra y elevación al pasar el puntero */
.profiles{display:grid;gap:1.5rem}
@media(min-width:760px){.profiles{grid-template-columns:repeat(2,1fr);gap:1.75rem}}
@media(min-width:1040px){.profiles{grid-template-columns:repeat(4,1fr)}}
.profile{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.9rem 1.7rem 1.6rem;display:flex;flex-direction:column;
  box-shadow:var(--shadow);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.profile:hover{
  border-color:var(--blue-200);transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(13,19,23,.05),0 22px 44px -20px rgba(4,119,191,.34);
}
/* era la única de las cuatro rejillas sin icono; el degradado de marca la
   alinea con .benefit__ico y .mod__ico */
.profile__ico{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--band);color:#fff;margin-bottom:1.1rem;
  box-shadow:0 10px 20px -10px rgba(3,100,156,.75);
}
.profile__ico svg{width:26px;height:26px}
.profile__who{
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--cyan-800);
}
/* min-height alinea los cuatro párrafos aunque el título ocupe una o dos líneas */
.profile h3{font-size:1.0625rem;min-height:2.3em;display:flex;align-items:flex-start;margin-top:.45rem}
.profile p{font-size:var(--t-sm);color:var(--text-2);margin-top:.35rem;margin-bottom:1.15rem}

/* el plan sugerido ahora es un enlace a la tabla de precios */
.profile__plan{
  margin-top:auto;padding-top:1.05rem;border-top:1px solid var(--line);
  display:inline-flex;align-items:center;gap:.4rem;min-height:24px;
  font-size:var(--t-sm);font-weight:700;color:var(--cyan-800);
  transition:color .16s ease;
}
.profile__plan svg{transition:transform .18s ease}
.profile:hover .profile__plan svg{transform:translateX(3px)}
.profile__plan:hover{color:var(--blue-700);text-decoration:none}
@media(max-width:759px){.profile h3{min-height:0}}
/* a cuatro columnas la tarjeta mide 259 px y "Plan Básico o Emprendedor" pide
   190,7 px de los 185,2 disponibles: envuelve. Reservar las dos líneas mantiene
   los cuatro filetes a la misma altura. Padding + 2 líneas de 1,65em: 1,6em es
   el interlineado, pero la caja flex mide 1 px más que dos interlineados. */
@media(min-width:1040px){.profile__plan{min-height:calc(1.05rem + 3.3em)}}

/* ============================================================
   12. PRECIOS
   ============================================================ */
.toggle{
  display:inline-flex;align-items:center;gap:.3rem;padding:.3rem;
  background:#fff;border:1px solid var(--line);border-radius:999px;margin:0 auto 2.5rem;
}
.toggle button{
  border:0;background:transparent;padding:.55rem 1.2rem;border-radius:999px;
  font-size:var(--t-sm);font-weight:600;color:var(--text-3);cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.toggle button[aria-pressed="true"]{background:var(--action);color:#fff}
.toggle__save{font-size:var(--t-xs);font-weight:700;margin-left:.4rem;opacity:.9}

.plans{display:grid;gap:1rem;align-items:stretch}
@media(min-width:660px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.plans{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.plans{grid-template-columns:repeat(5,1fr);gap:.85rem}}

.plan{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.3rem;
}
.plan--entry{background:var(--band-soft);border-color:var(--blue-200)}
.plan--featured{border:2px solid var(--action);box-shadow:var(--shadow-lift);position:relative}
.plan__flag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--action);color:#fff;font-size:var(--t-label);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;padding:.3rem .8rem;border-radius:999px;
  white-space:nowrap;
}
.plan__name{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em}
.plan__for{font-size:var(--t-xs);color:var(--text-3);margin-top:.3rem;min-height:2.8em}
.plan__price{display:flex;align-items:baseline;gap:.25rem;margin-top:1rem}
.plan__cur{font-family:var(--font-num);font-size:1rem;font-weight:600;color:var(--text-3)}
.plan__amount{font-family:var(--font-num);font-size:2.25rem;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
/* Los importes llevan IVA y por tanto centavos. A 2,25rem, "563,50" no cabe
   en una tarjeta de cinco columnas; los centavos bajan a .46em y se elevan,
   que además es como se leen los precios. */
.plan__cents{font-size:.46em;letter-spacing:0;vertical-align:.95em;margin-left:.06em}
.plan__per{font-size:var(--t-xs);color:var(--text-3)}
.plan__billed{font-size:var(--t-xs);color:var(--text-3);margin-top:.4rem;min-height:2.6em}
.plan .btn{margin-top:1rem}
.plan__limit{
  margin-top:1rem;padding:.55rem .7rem;background:var(--bg-soft);
  border-radius:var(--radius-sm);font-size:var(--t-xs);color:var(--text-3);
}
.plan--entry .plan__limit{background:#fff}
.plan__limit strong{color:var(--text);font-family:var(--font-num);font-variant-numeric:tabular-nums}
.plan__feats{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.55rem}
.plan__feats li{display:flex;gap:.5rem;font-size:var(--t-xs);color:var(--text-2);align-items:flex-start}
.plan__feats svg{flex-shrink:0;margin-top:3px;color:var(--ok-fg)}
.plan__feats .is-new{color:var(--text);font-weight:600}

.price-note{
  margin-top:1.75rem;text-align:center;font-size:var(--t-sm);color:var(--text-3);
  max-width:66ch;margin-inline:auto;
}
/* El precio grande ya trae IVA: hay que decirlo antes de la rejilla, no
   después, o el visitante compara contra un competidor que lo excluye. */
.price-iva{
  margin:.9rem auto 0;width:max-content;max-width:100%;
  display:flex;align-items:center;gap:.45rem;min-height:24px;
  padding:.34rem .8rem;border-radius:999px;
  background:var(--cyan-50);color:var(--cyan-800);
  font-size:var(--t-xs);font-weight:700;text-align:center;
}
.price-iva svg{flex:none}

/* ---- plan contador ----
   El panel es azul, pero todo lo que lleva dato va en superficie blanca
   sólida: así la sección deja de leerse como un bloque de un solo color. */
.contador{
  background:var(--band);color:#fff;border-radius:var(--radius-lg);
  padding:clamp(1.75rem,4vw,3rem);display:grid;gap:clamp(2rem,4vw,3rem);
  position:relative;overflow:hidden;
}
/* textura de puntos: rompe el degradado plano */
.contador::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.22) 1.2px,transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 90% at 85% 15%,#000 20%,transparent 70%);
  mask-image:radial-gradient(120% 90% at 85% 15%,#000 20%,transparent 70%);
}
.contador::after{
  content:"";position:absolute;inset:auto auto -45% -12%;width:44%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(65,217,251,.34),transparent 66%);pointer-events:none;
}
@media(min-width:1000px){.contador{grid-template-columns:.85fr 1.15fr;align-items:center}}
.contador > *{position:relative;z-index:1;min-width:0}
/* el panel es oscuro pero no lleva .section--dark, así que el antetítulo
   heredaba cyan-700 y quedaba en 1,37:1 sobre el degradado */
.contador .eyebrow{color:var(--cyan-300)}
.contador h2{font-size:var(--t-h2);color:#fff}
.contador__lede{margin-top:1rem;color:rgba(255,255,255,.86);font-size:1.0625rem}
.contador__list{margin-top:1.5rem;display:flex;flex-direction:column;gap:.65rem}
.contador__list li{display:flex;gap:.6rem;font-size:var(--t-sm);color:rgba(255,255,255,.94);align-items:flex-start}
.contador__list svg{flex-shrink:0;margin-top:4px;color:var(--cyan-300)}

.contador__lado{display:flex;flex-direction:column;gap:1.25rem}
.contador__cta{align-self:flex-start}

/* --- selector de empresa: el plan explicado con el propio producto --- */
.switcher{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 20px 44px -22px rgba(2,47,75,.75);
}
.switcher__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1rem;background:var(--ink-50);border-bottom:1px solid var(--line);
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.11em;
  font-weight:700;color:var(--text-3);
}
.switcher__list{display:flex;flex-direction:column}
.switcher__list li{
  display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--ink-100);
}
.switcher__list li.is-active{background:var(--blue-50)}
.switcher__ini{
  flex-shrink:0;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--band);color:#fff;font-size:var(--t-xs);font-weight:700;letter-spacing:.02em;
}
.switcher__nom{
  flex:1;min-width:0;font-size:var(--t-sm);font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.switcher__nom b{display:block;font-weight:400;font-size:var(--t-xs);color:var(--text-3);margin-top:.1rem}
.switcher__ok{flex-shrink:0;color:var(--ok-fg)}
.switcher__pie{
  padding:.6rem 1rem;font-size:var(--t-xs);color:var(--text-3);
  background:var(--ink-50);font-weight:600;
}

/* --- paquetes: tarjetas blancas sólidas --- */
.packs{display:grid;gap:.85rem}
@media(min-width:560px){.packs{grid-template-columns:repeat(3,1fr)}}
.pack{
  position:relative;background:#fff;border:1px solid transparent;
  border-radius:var(--radius);padding:1.25rem 1.1rem;
  display:flex;flex-direction:column;gap:.3rem;
  box-shadow:0 14px 32px -18px rgba(2,47,75,.7);
}
.pack--best{
  border-color:var(--cyan-500);
  box-shadow:0 18px 40px -16px rgba(4,178,217,.75);
}
/* cyan-800 y no cyan-600: blanco sobre #0394b4 da 3,56:1 y falla AA.
   Sobre #025a6e da 7,81:1 sin salirse de la familia cyan. */
.pack__flag{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--cyan-800);color:#fff;font-size:.625rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;padding:.24rem .6rem;
  border-radius:999px;white-space:nowrap;
}
.pack__ruc{font-size:2rem;font-weight:600;color:var(--blue-700);line-height:1}
.pack__label{font-size:var(--t-label);color:var(--text-3);text-transform:uppercase;letter-spacing:.11em;font-weight:700}
.pack__price{margin-top:.6rem;padding-top:.7rem;border-top:1px solid var(--line)}
.pack__price b{font-size:1.5rem;font-weight:600;color:var(--text);display:block;line-height:1.1}
.pack__price span{font-size:var(--t-xs);color:var(--text-3);display:block;margin-top:.15rem}
.pack__each{
  margin-top:.5rem;font-size:var(--t-xs);color:var(--cyan-800);font-weight:700;
  background:var(--cyan-50);border-radius:999px;padding:.22rem .55rem;align-self:flex-start;
}

/* ============================================================
   13. TABLA COMPARATIVA
   ============================================================ */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.cmp{width:100%;border-collapse:collapse;min-width:820px;font-size:var(--t-sm)}
table.cmp th,table.cmp td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
table.cmp thead th{
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.11em;
  color:var(--text-3);font-weight:700;background:var(--bg-soft);white-space:nowrap;
}
table.cmp thead th:first-child{width:32%}
table.cmp tbody th{font-weight:600;color:var(--text);width:32%}
table.cmp td{text-align:center;color:var(--text-2)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
table.cmp .grp th{
  background:var(--band-soft);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:.11em;color:var(--cyan-800);font-weight:700;
}
.tick{color:var(--ok-fg);font-weight:600}
.dash{color:var(--ink-300)}
.cmp .val{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}

/* ============================================================
   14. FAQ
   ============================================================ */
.faq-grid{display:grid;gap:2.5rem;align-items:start}
@media(min-width:980px){.faq-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.faq-grid > *{min-width:0}

.faq-lado{display:flex;flex-direction:column;gap:1.5rem;align-items:center}
@media(min-width:980px){.faq-lado{position:sticky;top:100px}}
.faq-facti{width:min(260px,72%);margin-inline:auto}
@media(min-width:980px){.faq-facti{width:100%;max-width:250px}}

.faq-ayuda{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.35rem;text-align:center;width:100%;box-shadow:var(--shadow);
}
.faq-ayuda h3{font-size:1.0625rem;margin-bottom:.5rem}
.faq-ayuda p{font-size:var(--t-sm);color:var(--text-2);margin-bottom:1.1rem}
.faq-ayuda__mail{
  display:inline-flex;align-items:center;justify-content:center;min-height:24px;
  margin-top:.85rem;font-size:var(--t-sm);font-weight:600;
}

.faq{display:grid;gap:.75rem}
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.faq details[open]{border-color:var(--blue-200);box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 3rem 1.15rem 1.25rem;position:relative;
  font-weight:600;font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.25rem;top:1.4rem;width:9px;height:9px;
  border-right:2px solid var(--action);border-bottom:2px solid var(--action);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.6rem}
.faq summary:hover{color:var(--action-hover)}
.faq p{padding:0 1.5rem 1.35rem 1.25rem;color:var(--text-2);max-width:70ch}

/* ============================================================
   15. CTA FINAL
   ============================================================ */
.cta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.15rem}
.cta h2{font-size:var(--t-h1);color:#fff;max-width:20ch}
.cta p{color:var(--ink-300);max-width:52ch;font-size:1.0625rem}
.cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:.5rem}
.cta__fine{font-size:var(--t-sm);color:var(--ink-400);margin-top:.5rem}

/* ============================================================
   16. PIE
   ============================================================ */
.footer{background:var(--ink-950);color:var(--ink-300);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.footer__top{display:grid;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:820px){.footer__top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer__brand img{height:38px;width:auto;margin-bottom:1rem}
.footer__brand p{font-size:var(--t-sm);color:var(--ink-400);max-width:34ch}
.footer h3,.footer h4{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:1rem;font-weight:700}
/* gap menor porque cada enlace ya aporta 24 px de alto (WCAG 2.2 · 2.5.8) */
.footer ul{display:flex;flex-direction:column;gap:.25rem}
.footer a{
  color:var(--ink-300);font-size:var(--t-sm);
  display:inline-flex;align-items:center;min-height:24px;
}
.footer a:hover{color:#fff;text-decoration:none}
.footer li > span{display:inline-flex;align-items:center;min-height:24px}
.footer__bot{
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  align-items:center;padding-top:1.75rem;font-size:var(--t-xs);color:var(--ink-500);
}
/* los enlaces del pie inferior también deben llegar a 24 px (WCAG 2.2 · 2.5.8) */
.footer__bot a{display:inline-flex;align-items:center;min-height:24px}
.footer__credito a{
  color:var(--ink-300);font-weight:700;border-bottom:1px solid var(--ink-700);
  padding-bottom:1px;
}
.footer__credito a:hover{color:var(--cyan-300);border-bottom-color:var(--cyan-400);text-decoration:none}

/* ============================================================
   17. WHATSAPP FLOTANTE
   ============================================================ */
.wa{
  position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;
  border-radius:50%;background:#25d366;display:grid;place-items:center;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.5);color:#fff;
}
.wa:hover{text-decoration:none;transform:scale(1.05)}
.wa svg{width:30px;height:30px}

/* ============================================================
   18. UTILIDADES / ACCESIBILIDAD
   ============================================================ */
.skip{
  position:absolute;left:-9999px;top:0;background:var(--action);color:#fff;
  padding:.7rem 1.1rem;z-index:100;border-radius:0 0 var(--radius-sm) 0;font-weight:600;
}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  /* Ya no hace falta apagar nada dentro de un shadow tree: al incrustar los
     dibujos, el `*` de arriba alcanza todas las piezas de Facti. Esto solo
     detiene los bucles largos en seco en vez de dejarlos dar una pasada. */
  .facti .flota,.chip-float{animation:none !important}
}

@media print{
  .nav,.topbar,.hero__actions,.cta__actions,.toggle,.wa{display:none}
  body{background:#fff;color:#000}
  .hero,.section--dark,.contador,.footer{background:#fff !important;color:#000 !important}
}