/* ═══════════════════════════════════════════════════════════════════════════
   Cairos · sistema de diseño de la web pública
   ───────────────────────────────────────────────────────────────────────────
   Los mismos tokens que el ERP (`erp/tailwind.config.ts`), y por el mismo
   motivo: que la web y el producto se parezcan. Quien llega desde Google y
   entra en la aplicación tiene que reconocer que es el mismo sitio.

   Las tres reglas del sistema, que aquí no se negocian:

     · **Esquinas rectas en todo lo que es una caja.** Tarjetas, campos,
       paneles, tablas: radio 0. Los botones llevan el borde apenas afilado,
       2 px. Y lo redondo —un avatar, un punto de estado— es redondo.
     · **Un solo color de marca**: la escala `brand`, anclada en el azul
       corporativo #07056d. Los semánticos (verde, ámbar, rojo, azul) sólo
       indican estado; nunca decoran.
     · **Sin sombra en tarjetas y bloques.** La sombra se reserva para lo que
       flota de verdad: menús desplegables y modales.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Marca: el azul corporativo es el 900 */
  --b50:#eef0fb;--b100:#dce0f6;--b200:#bcc3ee;--b300:#949edd;--b400:#6b76cc;
  --b500:#4a52b4;--b600:#333a97;--b700:#242a7c;--b800:#161a66;--b900:#07056d;

  /* Neutros */
  --ink:#141622;--muted:#646a7a;--line:#e8eaee;--line-fuerte:#d3d7de;
  --surface:#fff;--canvas:#f7f8fa;

  /* Semánticos: sólo estado */
  --success:#12a150;--success-soft:#e7f6ee;--success-txt:#0a7038;
  --warning:#c2790a;--warning-soft:#fbf1e0;--warning-txt:#8a5606;
  --apagado:#767c88;
  --danger:#dc2626;--danger-soft:#fdecec;
  --info:#2563eb;--info-soft:#e9f0fe;

  /* Radios: cajas rectas, botón apenas afilado */
  --r:0px;--r-btn:2px;

  /* Sombras: sólo para lo que flota */
  --pop:0 8px 24px -8px rgba(16,24,40,.18),0 2px 6px rgba(16,24,40,.08);
  --modal:0 24px 48px -12px rgba(16,24,40,.28);

  --wrap:1180px;
  --suave:cubic-bezier(.22,1,.36,1);
}

/* El menú móvil cerrado vive en translateX(100%), fuera de la pantalla, y eso
   generaba barra horizontal en cuanto la ventana era estrecha. `clip` recorta
   sin crear un contenedor de scroll; `hidden` queda de reserva para navegadores
   que no lo entiendan. */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--ink);background:var(--surface);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.021em;line-height:1.12}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
strong,b{font-weight:600}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--b500)}
.eyebrow.light{color:var(--b200)}
/* Sobre fondo azul el eyebrow corporativo se funde con el fondo: dentro de
   una sección oscura toma siempre la variante clara, sin tener que acordarse
   de escribir la clase en cada llamada. */
.hero .eyebrow,.hero-page .eyebrow,.final .eyebrow,.sec-navy .eyebrow,.demo-strip .eyebrow{color:var(--b200)}
.center{text-align:center}
/* Existe para el esquema de encabezados y para los lectores de pantalla, pero
   no se ve. No se usa `display:none` a propósito: eso también lo esconde de
   quien navega con lector. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tnum{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--b900);padding:12px 20px;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(74,82,180,.35);position:relative;z-index:1}

/* ── BOTONES ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:600;font-size:15px;padding:13px 22px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,color .16s;white-space:nowrap;line-height:1.2}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--b900);color:#fff}
.btn-primary:hover{background:var(--b700)}
.btn-mint{background:var(--b900);color:#fff}          /* alias heredado */
.btn-mint:hover{background:var(--b700)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn-light{background:#fff;color:var(--b900)}
.btn-light:hover{background:var(--b50)}
.btn-outline{background:transparent;color:var(--b900);border-color:var(--line-fuerte)}
.btn-outline:hover{border-color:var(--b900);background:var(--b50)}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-sm{padding:9px 16px;font-size:14px}
/* Sobre fondo azul, un botón azul no existe. Dentro del héroe, de la tira de
   llamada a la acción y del cierre, el botón principal se invierte: blanco con
   la tinta de marca. Es la misma jerarquía, leída al revés. */
.hero .btn-primary,.hero .btn-mint,
.hero-page .btn-primary,.hero-page .btn-mint,
.demo-strip .btn-primary,.demo-strip .btn-mint,
.final .btn-primary,.final .btn-mint,
.sec-navy .btn-primary,.sec-navy .btn-mint{background:#fff;color:var(--b900)}
.hero .btn-primary:hover,.hero .btn-mint:hover,
.hero-page .btn-primary:hover,.hero-page .btn-mint:hover,
.demo-strip .btn-primary:hover,.demo-strip .btn-mint:hover,
.final .btn-primary:hover,.final .btn-mint:hover,
.sec-navy .btn-primary:hover,.sec-navy .btn-mint:hover{background:var(--b50)}
/* Y el secundario, que ahí es el fantasma, se lee sobre el azul. */
.hero .btn-outline,.hero-page .btn-outline,.final .btn-outline,.sec-navy .btn-outline{color:#fff;border-color:rgba(255,255,255,.34)}
.hero .btn-outline:hover,.hero-page .btn-outline:hover,.final .btn-outline:hover,.sec-navy .btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}

/* ── NAVEGACIÓN ────────────────────────────────────────────────────────── */
/* Sólo la barra superior. Escrito como `nav` a secas alcanzaba también a
   las migas de pan y al índice lateral, que son elementos `nav` igualmente:
   las migas salían fijas sobre el logotipo en todas las páginas. */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .2s,box-shadow .2s;padding:14px 0}
#nav.scrolled,#nav.solid{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 var(--line);padding:10px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:28px;width:auto}
.nav-logo .l-light{display:block}.nav-logo .l-dark{display:none}
#nav.scrolled .nav-logo .l-light,#nav.solid .nav-logo .l-light{display:none}
#nav.scrolled .nav-logo .l-dark,#nav.solid .nav-logo .l-dark{display:block}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a.nl,.nav-links button.nl{font-size:15px;font-weight:500;color:rgba(255,255,255,.86);transition:color .15s;background:none;border:none;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0}
.nav-links a.nl:hover,.nav-links button.nl:hover{color:#fff}
#nav.scrolled .nav-links a.nl,#nav.solid .nav-links a.nl,
#nav.scrolled .nav-links button.nl,#nav.solid .nav-links button.nl{color:var(--muted)}
#nav.scrolled .nav-links a.nl:hover,#nav.solid .nav-links a.nl:hover,
#nav.scrolled .nav-links button.nl:hover,#nav.solid .nav-links button.nl:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-login{font-size:15px;font-weight:600;color:#fff}
#nav.scrolled .nav-login,#nav.solid .nav-login{color:var(--b900)}
.nav-btn{background:#fff;color:var(--b900);padding:10px 18px;border-radius:var(--r-btn);font-weight:600;font-size:15px;transition:background .16s}
.nav-btn:hover{background:var(--b50)}
#nav.scrolled .nav-btn,#nav.solid .nav-btn{background:var(--b900);color:#fff}
#nav.scrolled .nav-btn:hover,#nav.solid .nav-btn:hover{background:var(--b700)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.burger span{width:22px;height:2px;background:#fff;transition:background .15s}
#nav.scrolled .burger span,#nav.solid .burger span{background:var(--b900)}
.nav-caret{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform .18s}
.has-mega.open .nav-caret{transform:rotate(180deg)}

/* Megamenú */
.has-mega{position:relative}
.mega{position:fixed;left:0;right:0;top:62px;background:#fff;border-top:1px solid var(--line);box-shadow:var(--pop);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s var(--suave);z-index:99}
.has-mega.open .mega{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:var(--wrap);margin:0 auto;padding:32px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.mega-col .mega-t{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--b500);margin-bottom:12px}
.mega-col a{display:block;padding:7px 0;font-size:15px;color:var(--muted);transition:color .15s}
.mega-col a:hover{color:var(--b900)}
.mega-col a b{display:block;color:var(--ink);font-weight:600}
.mega-col a span{font-size:13px;color:var(--muted)}
.mega-foot{border-top:1px solid var(--line);background:var(--canvas)}
.mega-foot-in{max-width:var(--wrap);margin:0 auto;padding:14px 24px;display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.mega-foot-in a{font-weight:600;color:var(--b900)}

/* ── MENÚ MÓVIL ────────────────────────────────────────────────────────── */
.mobile-menu{position:fixed;inset:0;background:#fff;z-index:150;transform:translateX(100%);transition:transform .26s var(--suave);overflow-y:auto;padding:20px 0 60px}
.mobile-menu.open{transform:none}
.mm-top{display:flex;align-items:center;justify-content:space-between;padding:0 24px 18px;border-bottom:1px solid var(--line)}
.mm-top img{height:26px;width:auto}
.mm-close{background:none;border:none;cursor:pointer;padding:8px}
.mm-close svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2}
.mm-group{border-bottom:1px solid var(--line);padding:4px 24px}
.mm-group .mm-t{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--b500);margin:18px 0 6px}
.mm-group a{display:block;padding:10px 0;font-size:16px;font-weight:500;color:var(--ink)}
.mm-cta{padding:24px;display:flex;flex-direction:column;gap:10px}
.mm-cta .btn{justify-content:center}

/* ── MIGAS ─────────────────────────────────────────────────────────────── */
.crumbs{padding:96px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted)}
.crumbs li::after{content:'/';margin-left:8px;opacity:.45}
.crumbs li:last-child::after{content:''}
.crumbs a:hover{color:var(--b900)}
.crumbs .on{color:var(--ink);font-weight:500}

/* ── SECCIONES ─────────────────────────────────────────────────────────── */
section{position:relative}
.sec{padding:92px 0}
.sec-sm{padding:60px 0}
.sec-cream{background:var(--canvas)}
.sec-navy{background:var(--b900);color:#fff}
.sec-head{max-width:760px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0 14px}
.sec-head p{font-size:18px;color:var(--muted)}
.sec-navy .sec-head p{color:rgba(255,255,255,.74)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--suave),transform .6s var(--suave)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}.d5{transition-delay:.35s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ── HÉROES ────────────────────────────────────────────────────────────── */
.hero,.hero-page{position:relative;background:var(--b900);color:#fff;overflow:hidden}
.hero{padding:150px 0 100px}
.hero-page{padding:124px 0 72px}
/* Una retícula finísima sobre el azul: da textura sin meter otro color. */
.hero::before,.hero-page::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(120% 90% at 70% 0%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(120% 90% at 70% 0%,#000 20%,transparent 75%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;position:relative;z-index:2}
.hero-page .hero-grid{grid-template-columns:1.12fr .88fr;align-items:start}
.hero-page .crumbs{padding:0 0 20px}
.hero-page .crumbs ol{color:rgba(255,255,255,.62)}
.hero-page .crumbs .on{color:#fff}
.hero-page .crumbs a:hover{color:#fff}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--b200);margin-bottom:18px;border:1px solid rgba(255,255,255,.2);padding:6px 12px}
.hero h1{font-size:clamp(36px,5vw,60px)}
.hero-page h1{font-size:clamp(30px,4.2vw,48px);max-width:900px}
.hero h1 em,.hero-page h1 em{font-style:normal;color:var(--b200)}
.hero-sub{font-size:clamp(16px,1.9vw,19px);color:rgba(255,255,255,.78);margin:22px 0 30px;max-width:580px}
.hero-sub strong{color:#fff;font-weight:600}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:rgba(255,255,255,.66)}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust svg{width:15px;height:15px;stroke:var(--b200);fill:none;stroke-width:2.5}
.hero-wave{display:none}
.orb{display:none}

/* ── TARJETAS ──────────────────────────────────────────────────────────── */
/* Dos usos distintos que antes se pisaban. Las clases «grid-2/3/4» son
   maquetado: dos o tres columnas de contenido, con aire entre ellas. La clase
   «rejilla» es una cuadrícula de tarjetas continua, con un píxel de línea entre
   celdas, como las tablas del ERP. Meter el fondo de línea en las primeras
   hacía que cualquier bloque a dos columnas saliera con un fondo gris que nadie
   había pedido. */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rejilla{gap:1px;background:var(--line);border:1px solid var(--line)}
.sec-navy .rejilla{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16)}
.grid-2>.card,.grid-3>.card,.grid-4>.card{border:1px solid var(--line)}
/* Va después a propósito: dentro de una rejilla la línea la pone la propia
   rejilla, así que la tarjeta no lleva borde o se vería doble. */
.rejilla>.card{border:none}
.card{background:var(--surface);padding:28px;transition:background .16s}
.card:hover{background:var(--b50)}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:15px;color:var(--muted)}
.card-ico{width:40px;height:40px;background:var(--b50);display:flex;align-items:center;justify-content:center;margin-bottom:16px;border:1px solid var(--b100)}
.card-ico svg{width:20px;height:20px;stroke:var(--b700);fill:none;stroke-width:2}
.card-ico.g{background:var(--success-soft);border-color:rgba(18,161,80,.2)}.card-ico.g svg{stroke:var(--success)}
.card-ico.c{background:var(--danger-soft);border-color:rgba(220,38,38,.2)}.card-ico.c svg{stroke:var(--danger)}
.card-ico.a{background:var(--warning-soft);border-color:rgba(194,121,10,.2)}.card-ico.a svg{stroke:var(--warning)}
.sec-cream .card{background:var(--surface)}
.sec-navy .grid-2>.card,.sec-navy .grid-3>.card,.sec-navy .grid-4>.card{border-color:rgba(255,255,255,.16)}
.sec-navy .card{background:var(--b900)}
.sec-navy .card:hover{background:var(--b800)}
.sec-navy .card p{color:rgba(255,255,255,.68)}
.sec-navy .card-ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.sec-navy .card-ico svg{stroke:var(--b200)}

a.card-link{display:block;position:relative}
a.card-link::after{content:'→';position:absolute;right:26px;bottom:24px;color:var(--b500);font-size:18px;opacity:0;transform:translateX(-5px);transition:.18s var(--suave)}
a.card-link:hover::after{opacity:1;transform:none}
a.card-link .cl-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--b700);background:var(--b50);border:1px solid var(--b100);padding:3px 9px;margin-bottom:12px}

/* ── IMÁGENES ──────────────────────────────────────────────────────────── */
figure.fig{margin:0;background:var(--canvas);border:1px solid var(--line)}
figure.fig-pendiente{border-style:dashed;border-color:var(--b200)}
/* Hueco de foto pendiente. El texto es HTML y se puede seleccionar: es la
   descripción de la foto que hay que conseguir, y está para copiarla. */
.fig-hueco{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;padding:24px 28px;background:var(--b50);text-align:center;background-image:linear-gradient(135deg,transparent 49.6%,#dce0f6 49.6%,#dce0f6 50.4%,transparent 50.4%),linear-gradient(45deg,transparent 49.6%,#dce0f6 49.6%,#dce0f6 50.4%,transparent 50.4%)}
.fig-hueco .fh-que{max-width:46ch;margin:0;font-size:15px;line-height:1.5;color:var(--b800);font-weight:600;background:var(--b50);padding:6px 10px;user-select:all;cursor:text}
.fig-hueco .fh-meta{margin:0;font-size:12.5px;color:var(--b700);background:var(--b50);padding:3px 8px}
.fig-hueco .fh-meta code{font-family:ui-monospace,'SF Mono',monospace;font-size:12px;user-select:all}
.sec-navy .fig-hueco,.hero .fig-hueco,.hero-page .fig-hueco{background:rgba(255,255,255,.06)}
.sec-navy .fig-hueco .fh-que,.hero .fig-hueco .fh-que,.hero-page .fig-hueco .fh-que{color:#fff;background:transparent}
.sec-navy .fig-hueco .fh-meta,.hero .fig-hueco .fh-meta,.hero-page .fig-hueco .fh-meta{color:var(--b200);background:transparent}
figure.fig img{width:100%;height:auto;display:block}
figure.fig figcaption{font-size:13.5px;color:var(--muted);padding:12px 16px;border-top:1px solid var(--line);background:var(--surface)}
.fig-full{margin:36px 0}
.sec-navy figure.fig{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.sec-navy figure.fig figcaption{background:transparent;color:rgba(255,255,255,.66);border-color:rgba(255,255,255,.14)}
/* Retrato de persona: cuadrado y en escala de grises, para que ninguna foto
   se coma el azul de la marca. */
.fig-retrato img{aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.fig-ancha img{aspect-ratio:16/9;object-fit:cover}

/* ── LISTA DE VENTAJAS ─────────────────────────────────────────────────── */
.ticks{list-style:none}
.ticks li{display:flex;gap:12px;padding:10px 0;font-size:16px;border-top:1px solid var(--line)}
.ticks li:first-child{border-top:none}
.ticks svg{width:19px;height:19px;stroke:var(--success);fill:none;stroke-width:2.5;flex-shrink:0;margin-top:3px}
.sec-navy .ticks li{border-color:rgba(255,255,255,.14)}
.sec-navy .ticks svg{stroke:var(--b200)}

/* ── DOLOR → SOLUCIÓN ──────────────────────────────────────────────────── */
.pains{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.pains>div{padding:32px;background:var(--surface)}
.pain-bad{background:var(--canvas)}
.pains h3{font-size:16px;margin-bottom:16px;display:flex;align-items:center;gap:9px;letter-spacing:0}
.pains h3 svg{width:18px;height:18px;fill:none;stroke-width:2.5}
.pain-bad h3{color:var(--danger)}.pain-bad h3 svg{stroke:var(--danger)}
.pain-good h3{color:var(--success)}.pain-good h3 svg{stroke:var(--success)}
.pains ul{list-style:none}
.pains li{padding:9px 0;font-size:15.5px;color:var(--muted);border-top:1px solid var(--line)}
.pains li:first-child{border-top:none}
.pain-good li{color:var(--ink)}

/* ── TABLA ─────────────────────────────────────────────────────────────── */
.tabla-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
table.tabla{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
table.tabla th{text-align:left;padding:13px 18px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--canvas);border-bottom:1px solid var(--line);white-space:nowrap}
table.tabla td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.tabla tr:last-child td{border-bottom:none}
table.tabla td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tabla .si{color:var(--success-txt);font-weight:700}
table.tabla .no{color:var(--apagado)}
table.tabla tbody tr:hover{background:var(--b50)}
/* Un enlace dentro de una tabla tiene que parecer un enlace: la regla base
   pone `color:inherit` para que el menú y los botones manden sobre el color,
   y eso dejaba los enlaces de las celdas indistinguibles del texto normal. */
table.tabla a,.tabla-nota a,.aviso a{color:var(--b600);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
table.tabla a:hover,.tabla-nota a:hover,.aviso a:hover{color:var(--b900)}
/* Rótulo de un panel de interfaz —el resultado de una calculadora, por
   ejemplo—. Se lee como un encabezado y no lo es: no titula una sección del
   documento, así que no entra en el esquema de encabezados. */
.fac-rot{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
/* Sobre el azul, el rótulo del panel se lee en blanco. */
.sec-navy .panel-t,.demo-strip .panel-t,.final .panel-t,.calc-out .panel-t{color:#fff}
.panel-t{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px;color:var(--ink)}
.tabla-nota{font-size:14px;color:var(--muted);margin-top:12px}

/* ── AVISO ─────────────────────────────────────────────────────────────── */
.aviso{border-left:3px solid var(--b500);background:var(--b50);padding:20px 24px;margin:24px 0;font-size:16px}
.aviso .aviso-t{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px;color:var(--ink)}
.aviso.ok{border-color:var(--success);background:var(--success-soft)}
.aviso.warn{border-color:var(--warning);background:var(--warning-soft)}
.aviso.bad{border-color:var(--danger);background:var(--danger-soft)}
.aviso p+p{margin-top:10px}
.sec-navy .aviso{background:rgba(255,255,255,.06);border-color:var(--b200);color:rgba(255,255,255,.82)}
.sec-navy .aviso .aviso-t{color:#fff}

/* ── PROSA ─────────────────────────────────────────────────────────────── */
.prosa{font-size:17px;line-height:1.72;color:var(--ink)}
.prosa h2{font-size:clamp(24px,3vw,32px);margin:46px 0 15px;scroll-margin-top:96px}
.prosa h3{font-size:20px;margin:30px 0 11px;scroll-margin-top:96px}
.prosa h2:first-child,.prosa h3:first-child{margin-top:0}
.prosa p{margin-bottom:17px;color:var(--muted)}
.prosa p strong{color:var(--ink)}
.prosa ul,.prosa ol{margin:0 0 19px 22px;color:var(--muted)}
.prosa li{margin-bottom:8px}
.prosa a{color:var(--b600);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prosa a:hover{color:var(--b900)}
.prosa blockquote{border-left:3px solid var(--b500);padding:4px 0 4px 20px;margin:22px 0;font-size:18px;color:var(--ink)}
.prosa .tabla-wrap,.prosa .aviso,.prosa figure.fig{margin:26px 0}
/* La entradilla de un artículo: el párrafo que resume de qué va, más grande
   que el cuerpo y en tinta principal. */
.prosa .lead-articulo{font-size:19.5px;line-height:1.6;color:var(--ink);margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
/* BETA: marcador de estado, no de marca. Por eso ámbar y no azul, igual
   que el «en camino» de los planes. Nunca sustituye a la explicación:
   allí donde aparece, la página dice también qué significa. */
a.card-link .cl-tag.beta,.cl-tag.beta{color:var(--warning);background:#fdf6e7;border-color:#f0d9a8}
.beta{display:inline-block;vertical-align:middle;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--warning);background:#fdf6e7;border:1px solid #f0d9a8;padding:2px 7px;line-height:1.4;white-space:nowrap}
/* Sobre fondo azul —hero, menú, cierres— el ámbar sobre crema no llega
   al contraste que hace falta, así que se invierte a hueco claro. */
.hero .beta,.hero-page .beta,.final .beta,.sec-navy .beta,.mega .beta,.demo-strip .beta{color:#f7c96b;background:rgba(247,201,107,.13);border-color:rgba(247,201,107,.42)}
.hero-badge .beta{margin-left:9px}
h1 .beta,h2 .beta,h3 .beta{margin-left:10px;position:relative;top:-2px}
.prosa .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--b700);background:var(--b50);border:1px solid var(--b100);padding:3px 9px}
.prosa code{font-family:ui-monospace,'SF Mono',monospace;font-size:.9em;background:var(--canvas);border:1px solid var(--line);padding:1px 5px}

.doc{display:grid;grid-template-columns:240px 1fr;gap:52px;align-items:start}
.toc{position:sticky;top:92px}
.toc .toc-t{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc a{display:block;padding:7px 0 7px 14px;font-size:14.5px;color:var(--muted);border-left:2px solid var(--line);transition:.15s}
.toc a:hover{color:var(--b900);border-color:var(--b400)}
.toc a.on{color:var(--b900);font-weight:600;border-color:var(--b900)}
.fuente{font-size:14px;color:var(--muted);border-top:1px solid var(--line);margin-top:44px;padding-top:20px}
.fuente a{color:var(--b600)}

/* ── PRECIOS ───────────────────────────────────────────────────────────── */
.price-toggle{display:inline-flex;background:var(--canvas);border:1px solid var(--line);padding:3px;margin:0 auto 18px}
.price-toggle button{border:none;background:transparent;font-family:inherit;font-weight:600;font-size:14px;color:var(--muted);padding:9px 20px;cursor:pointer;transition:.15s}
.price-toggle button.on{background:#fff;color:var(--b900);box-shadow:inset 0 0 0 1px var(--line)}
.price-toggle .save{font-size:11px;color:var(--b600);font-weight:700;margin-left:5px}
/* Los planes van en un carril que se desplaza, no en una rejilla. Con cinco
   tarjetas la rejilla parte la fila y la última cae sola debajo; el carril
   aguanta los planes que hagan falta y en pantalla ancha, si caben todos, las
   flechas se esconden solas. */
.price-carro{position:relative}
/* Cuatro tarjetas justas, ni una apretada de más. El ancho sale de dividir el
   carril entre cuatro descontando las tres juntas de 1 px, así que la cuarta
   acaba exactamente en el borde y no asoma media quinta pidiendo scroll.
   `--vista` la bajan las media queries y todo lo demás va detrás sola. */
.price-carril{--vista:4;
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--vista) - 1) * 1px) / var(--vista));
  gap:1px;background:var(--line);border:1px solid var(--line);align-items:stretch;
  /* Se desplaza, pero sin barras: se pasa con las flechas, y en el móvil con
     el dedo. Una barra dentro de un bloque de precios se ve a medio hacer.
     `overflow-y` va explícito porque al declarar sólo `overflow-x:auto` el
     navegador convierte el vertical en `auto` y aparece la otra barra. */
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.price-carril::-webkit-scrollbar{width:0;height:0;display:none}
.price-carril > *{scroll-snap-align:start;min-width:0}
@media (max-width:1080px){.price-carril{--vista:3}}
@media (max-width:820px){.price-carril{--vista:2}}
@media (max-width:560px){.price-carril{--vista:1}}
.pc-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:var(--surface);border:1px solid var(--line);border-radius:2px;
  cursor:pointer;color:var(--b900);box-shadow:0 2px 10px rgba(7,5,109,.13);transition:background .15s}
.pc-flecha:hover{background:var(--b50)}
.pc-flecha[hidden]{display:none}
.pc-flecha svg{width:20px;height:20px;stroke:currentColor;stroke-width:2}
.pc-izq{left:-20px}
.pc-der{right:-20px}
@media (max-width:900px){.pc-izq{left:4px}.pc-der{right:4px}}
/* La rejilla antigua sigue viva para otras tablas de planes. */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);align-items:stretch}
.plan{background:var(--surface);padding:28px 24px;display:flex;flex-direction:column}
.plan.pop{background:var(--b900);color:#fff}
.plan-pop-tag{display:inline-block;background:rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;margin-bottom:12px}
.plan h3{font-size:19px;margin-bottom:6px}
.plan .plan-d{font-size:13px;color:var(--muted);margin-bottom:18px;min-height:36px}
.plan.pop .plan-d{color:rgba(255,255,255,.7)}
.plan-price{font-size:38px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan-price .pp-c{font-size:17px;font-weight:600}
.plan-per{font-size:13px;color:var(--muted);margin:7px 0 4px;font-weight:600}
.plan.pop .plan-per{color:rgba(255,255,255,.78)}
.plan-bill{font-size:12px;color:var(--muted);margin-bottom:20px}
.plan.pop .plan-bill{color:rgba(255,255,255,.58)}
.plan ul{list-style:none;margin-bottom:22px;flex:1}
.plan ul li{display:flex;gap:9px;padding:6px 0;font-size:13.5px;line-height:1.42}
.plan ul svg{width:16px;height:16px;stroke:var(--success);fill:none;stroke-width:2.5;flex-shrink:0;margin-top:3px}
.plan.pop ul svg{stroke:var(--b200)}
/* «En camino»: está comprado y todavía no está. Ni verde ni tachado. */
.plan ul li.camino{color:var(--muted)}
.plan ul li.camino svg{stroke:var(--warning)}
.plan ul li.camino b{font-weight:600;color:var(--warning-txt)}
.plan.pop ul li.camino{color:rgba(255,255,255,.72)}
.plan.pop ul li.camino svg,.plan.pop ul li.camino b{stroke:var(--b200);color:var(--b200)}
.camino-t{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warning);background:var(--warning-soft);border:1px solid rgba(194,121,10,.25);padding:1px 6px;vertical-align:middle;margin-left:6px}
.plan ul li.no{color:var(--apagado)}
.plan ul li.no svg{stroke:#cfd3db}
.plan .btn{width:100%;justify-content:center}
.price-foot{text-align:center;margin-top:30px;font-size:15px;color:var(--muted)}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-wrap{max-width:820px;margin:0 auto;border:1px solid var(--line);background:var(--surface)}
.faq{border-bottom:1px solid var(--line)}
.faq:last-child{border-bottom:none}
.faq-q{width:100%;text-align:left;padding:20px 24px;font-weight:600;font-size:17px;font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background .15s}
.faq-q:hover{background:var(--b50)}
.faq-q svg{width:20px;height:20px;stroke:var(--b500);fill:none;stroke-width:2.5;flex-shrink:0;transition:transform .22s}
.faq.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a div{padding:0 24px 22px;color:var(--muted);font-size:16px}
.faq-a p+p{margin-top:12px}
.faq-a a{color:var(--b600);font-weight:600}

/* ── PASOS ─────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14)}
.steps>.step{background:var(--b900);padding:28px 24px}
.sec-cream .steps,.sec:not(.sec-navy) .steps{background:var(--line)}
.sec:not(.sec-navy) .steps>.step{background:var(--surface)}
.step-n{width:34px;height:34px;border:1px solid rgba(255,255,255,.28);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-variant-numeric:tabular-nums}
.sec:not(.sec-navy) .step-n{border-color:var(--line-fuerte);color:var(--b900)}
.step h3{font-size:17px;margin-bottom:7px}
.step p{font-size:14.5px;color:rgba(255,255,255,.68)}
.sec:not(.sec-navy) .step p{color:var(--muted)}
.steps-line{display:none}

/* ── CIFRAS ────────────────────────────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14)}
.stat-big{background:var(--b900);padding:30px 24px;text-align:center}
.stat-big .sb-v{font-size:clamp(32px,4.2vw,48px);font-weight:700;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.stat-big .sb-l{font-size:14px;color:rgba(255,255,255,.66);margin-top:6px}

/* ── TIRA DE CTA ───────────────────────────────────────────────────────── */
.demo-strip{background:var(--b900);color:#fff;padding:44px 46px;display:flex;align-items:center;justify-content:space-between;gap:28px;position:relative;overflow:hidden}
.demo-strip h3{font-size:clamp(22px,2.8vw,30px);position:relative;z-index:2}
.demo-strip p{color:rgba(255,255,255,.74);margin-top:8px;position:relative;z-index:2;font-size:16px}
.demo-strip .ds-btns{display:flex;gap:10px;position:relative;z-index:2;flex-shrink:0;flex-wrap:wrap}

/* ── BENTO ─────────────────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(170px,auto);gap:1px;background:var(--line);border:1px solid var(--line)}
.bento .b{background:var(--surface);padding:28px;position:relative;overflow:hidden;transition:background .16s}
.bento .b:hover{background:var(--b50)}
.b-ico{width:40px;height:40px;background:var(--b50);border:1px solid var(--b100);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.b-ico svg{width:20px;height:20px;stroke:var(--b700);fill:none;stroke-width:2}
.bento h3{font-size:20px;margin-bottom:8px}
.bento p{font-size:15px;color:var(--muted)}
.b-lg{grid-column:span 4}.b-md{grid-column:span 2}.b-sm{grid-column:span 2}.b-full{grid-column:span 6}
.bento .b-dark{background:var(--b900);color:#fff}
.bento .b-dark:hover{background:var(--b800)}
.bento .b-dark .b-ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.bento .b-dark .b-ico svg{stroke:var(--b200)}
.bento .b-dark p{color:rgba(255,255,255,.7)}
.b-mint{background:var(--b50)}
.b-mint:hover{background:var(--b100)}
.b-mint .b-ico{background:#fff;border-color:var(--b200)}

/* ── MARQUESINA ────────────────────────────────────────────────────────── */
.marquee-sec{padding:34px 0;background:var(--surface);border-bottom:1px solid var(--line)}
.marquee-lbl{text-align:center;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.marquee-mask{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee{display:flex;gap:44px;width:max-content;animation:marquee 78s linear infinite;align-items:center}
@keyframes marquee{to{transform:translateX(-50%)}}
.mq-item{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.mq-item img{height:30px;width:auto;flex-shrink:0;filter:grayscale(1);opacity:.72}
.mq-item span{font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap}

/* ── TESTIMONIOS ───────────────────────────────────────────────────────── */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.test{background:var(--surface);padding:28px}
.test-stars{color:var(--warning);font-size:15px;margin-bottom:14px;letter-spacing:2px}
.test p{font-size:16px;margin-bottom:20px}
.test-who{display:flex;align-items:center;gap:12px}
.test-av{width:42px;height:42px;border-radius:9999px;overflow:hidden;background:var(--b100);color:var(--b900);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.test-av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.test-who .tw-n{font-weight:700;font-size:15px}.test-who .tw-r{font-size:13px;color:var(--muted)}

/* ── PANTALLAZO DEL ERP ────────────────────────────────────────────────── */
/* El pantallazo es un documento blanco, y como tal fija su propia tinta: si
   la hereda de la sección, dentro del héroe azul los importes salían en blanco
   sobre blanco y no se veían. Es la misma idea que la clase `paper` del ERP. */
.app-mock{background:#fff;color:var(--ink);border:1px solid var(--line);overflow:hidden}
.sec-navy .app-mock,.hero .app-mock,.hero-page .app-mock{border-color:rgba(255,255,255,.2)}
.app-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--canvas)}
.app-dot{width:9px;height:9px;border-radius:9999px}
.app-url{margin-left:12px;background:#fff;border:1px solid var(--line);padding:4px 14px;font-size:12px;color:var(--muted);flex:1;max-width:300px}
.app-body{display:grid;grid-template-columns:184px 1fr;min-height:340px}
.app-side{background:var(--canvas);border-right:1px solid var(--line);padding:12px 8px}
.app-ni{display:flex;align-items:center;gap:9px;padding:7px 11px;font-size:13px;font-weight:500;color:var(--muted)}
.app-ni.on{background:var(--b50);color:var(--b900);font-weight:600}
.app-ni svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.app-side .app-grupo{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 11px 6px}
.app-main{padding:20px}
/* Cuatro cifras en fila sólo caben si el pantallazo es ancho. Dentro del
   héroe la columna es estrecha y se quedaban en 90 px: los importes partían en
   dos líneas. Con auto-fit se reparten solas en 4, en 2 o en 1. */
.app-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:16px}
.app-stat{background:#fff;padding:13px}
.app-stat .as-v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.app-stat .as-l{font-size:11px;color:var(--muted);margin-top:2px}
.app-stat.g .as-v{color:var(--success)}
.app-stat.c .as-v{color:var(--danger)}
.app-rows{border:1px solid var(--line)}
.app-row{display:flex;align-items:center;gap:10px;padding:10px 13px;font-size:13px;border-bottom:1px solid var(--line)}
.app-row:last-child{border-bottom:none}
.app-row .ar-n{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;flex-shrink:0}
.app-row .ar-t{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.app-row .ar-a{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
/* El pantallazo vive en la columna estrecha del héroe, donde cuatro columnas
   de fila no caben y todo parte en dos líneas. Con una consulta de contenedor
   se recorta el nombre del cliente y, si aún así no cabe, desaparece: es el
   dato menos importante de la fila. */
.app-mock{container-type:inline-size}
/* Los umbrales salen de medir, no de intuir: con el menú lateral de 184 px y
   el relleno, por debajo de 620 px la fila ya no cabe entera. */
@container (max-width:620px){
  .app-row .ar-t{display:none}
  .app-main{padding:14px}
  .app-stat{padding:11px}
  .app-stat .as-v{font-size:19px}
}
@container (max-width:430px){
  .app-side{display:none}
  .app-body{grid-template-columns:1fr}
}
.app-chip{font-size:11px;font-weight:600;padding:3px 9px;background:var(--success-soft);color:var(--success-txt);white-space:nowrap}
.app-chip.w{background:var(--warning-soft);color:var(--warning-txt)}
.app-chip.n{background:var(--canvas);color:var(--muted);border:1px solid var(--line)}

/* ── FINAL ─────────────────────────────────────────────────────────────── */
.final{background:var(--b900);color:#fff;text-align:center;padding:96px 0;position:relative;overflow:hidden}
.final::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(80% 70% at 50% 0%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(80% 70% at 50% 0%,#000 10%,transparent 70%)}
.final .wrap{position:relative;z-index:2}
.final h2{font-size:clamp(30px,4.4vw,50px);margin-bottom:18px}
.final p{font-size:19px;color:rgba(255,255,255,.78);max-width:620px;margin:0 auto 30px}
.final .fc-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.final-note{margin-top:20px;font-size:14px;color:rgba(255,255,255,.56)}

/* ── RELACIONADAS ──────────────────────────────────────────────────────── */
.rel{background:var(--canvas);padding:60px 0;border-top:1px solid var(--line)}
.rel h2{font-size:22px;margin-bottom:22px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.rel-grid a{background:var(--surface);padding:18px 20px;font-size:15px;font-weight:500;transition:background .15s;display:flex;justify-content:space-between;align-items:center;gap:12px}
.rel-grid a:hover{background:var(--b50);color:var(--b900)}
.rel-grid a span{color:var(--b500);flex-shrink:0}

/* ── PIE ───────────────────────────────────────────────────────────────── */
footer{background:var(--b900);color:rgba(255,255,255,.62);padding:60px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;margin-bottom:40px}
.foot-logo img{height:28px;width:auto;margin-bottom:16px}
.foot-logo p{font-size:14px;max-width:280px}
.foot-col .foot-t{color:#fff;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px}
.foot-col a{display:block;font-size:14px;padding:6px 0;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-bot{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .doc{grid-template-columns:1fr;gap:0}
  .toc{position:static;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--line)}
  .toc a{display:inline-block;border-left:none;border-bottom:2px solid var(--line);margin-right:10px;padding:6px 0}
}
@media(max-width:900px){
  .nav-links,.nav-cta .nav-login{display:none}
  .burger{display:flex}
  .hero-grid,.hero-page .hero-grid{grid-template-columns:1fr}
  .grid-4,.grid-3,.stats-row,.test-grid,.rel-grid,.steps{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr 1fr}.b-lg,.b-md,.b-sm,.b-full{grid-column:span 2}
  .app-body{grid-template-columns:1fr}.app-side{display:none}
  .demo-strip{flex-direction:column;text-align:center;align-items:flex-start}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-visual{margin-top:34px}
  .pains{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .sec{padding:64px 0}
  .grid-2,.grid-3,.grid-4,.test-grid,.bento,.price-grid,.rel-grid,.steps{grid-template-columns:1fr}
  .b-lg,.b-md,.b-sm,.b-full{grid-column:span 1}
  .stats-row{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .demo-strip{padding:30px 24px}
  .prosa{font-size:16px}
  .card,.bento .b,.plan{padding:24px 20px}
}

/* ── IMPRESIÓN ─────────────────────────────────────────────────────────── */
@media print{
  /* Imprimir la factura de ejemplo: sólo el documento, a folio, sin la web
     alrededor. Se activa desde el botón, que marca el <body>. */
  body.imprimiendo-factura>*{display:none!important}
  body.imprimiendo-factura #contenido,
  body.imprimiendo-factura #contenido *{display:revert!important}
  body.imprimiendo-factura #contenido>*:not(:has(#facturaEjemplo)){display:none!important}
  body.imprimiendo-factura .fac-marca,
  body.imprimiendo-factura .calc-pie,
  body.imprimiendo-factura form,
  body.imprimiendo-factura #imprimirFactura{display:none!important}
  body.imprimiendo-factura .fac{border:none;padding:0;margin:0;max-width:100%}
  body.imprimiendo-factura .sec{padding:0}

  #nav,.mega,.mobile-menu,.final,.rel,.demo-strip,footer{display:none}
  .hero,.hero-page{background:none;color:var(--ink);padding:0 0 20px}
  .hero::before,.hero-page::before{display:none}
  .hero-sub,.hero-page .hero-sub{color:var(--muted)}
  .hero h1 em,.hero-page h1 em{color:var(--b900)}
  body{font-size:12pt}
}

/* Píldoras de estado: el tono de marca se mantiene en el fondo y en el
   borde, pero el texto usa la variante oscura, que es la que tiene que
   leerse a 11 px sobre un fondo ya teñido. */
.cl-tag.beta{color:var(--warning-txt)}

/* Subida de fotos, sólo en local (ver web/subir.mjs). Nace oculta. */
.fh-subir[hidden]{display:none}
.fh-subir{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:4px}
.fh-subir label{display:inline-block;cursor:pointer;background:var(--b900);color:#fff;font-size:13px;font-weight:600;padding:7px 15px;border-radius:2px}
.fh-subir label:hover{background:var(--b800)}
.fh-subir output{font-size:12px;color:var(--b700);min-height:1em}
.fh-subir output.mal{color:var(--danger)}
.fh-subir output.bien{color:var(--success-txt)}