/* La página pública. Todo el estilo vive aquí: la CSP del servidor es style-src 'self' sin
   'unsafe-inline', así que un atributo style= en el HTML no es un estilo, es un adorno que
   el navegador descarta en silencio. Los colores son los del sistema (dist/portal/style.css)
   para que quien entra desde aquí reconozca la misma marca adentro. */
:root{
  --navy-900:#0a1930;--navy-800:#0f2340;--navy-700:#16304f;
  /* El gris de lectura estaba tan claro que el texto se veía deslavado sobre blanco. Éstos
     pasan holgados el contraste mínimo para texto normal, y se notan al leer, no al medir. */
  --ink:#0d1a2b;--ink-soft:#3a4c63;--ink-faint:#5b6d84;
  --line:#e3eaf3;--bg:#f6f9fd;--bg-alt:#eaf1fb;--card:#fff;--icon-bg:#e6f4fb;
  --cyan-400:#4fc3f0;--cyan-500:#29abe2;--cyan-600:#1b8dbd;--cyan-brand:#00bfff;
  /* Una sola familia: del azul marino de la marca al cian, pasando por los azules de en
     medio. Los degradados y los realces salen de aquí; no hay un segundo color que explicar. */
  --blue-800:#0f2a55;--blue-700:#12456e;--blue-600:#166a9e;--blue-300:#8ad7f5;
  --ok:#0f9d58;
  --glow:0 10px 30px #29abe240;
  --radius:14px;
  --shadow:0 1px 2px #0f1c2e0f,0 8px 24px #0f1c2e0f;
  --shadow-up:0 2px 6px #0f1c2e14,0 18px 40px #0f1c2e1a;
  --max:1120px;--gutter:16px;--seccion:clamp(52px,7vw,88px);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);font-size:16px;line-height:1.55;
  color-scheme:light dark;
}
/* El modo oscuro cambia el papel, no la marca: el azul del encabezado y de las secciones
   oscuras es el mismo, y lo que se aclara es lo que en papel sería blanco. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8eef6;--ink-soft:#b7c3d3;--ink-faint:#8797ab;
    --line:#22344e;--bg:#0a1930;--bg-alt:#0d2039;--card:#0f2340;--icon-bg:#16304f;
    --shadow:0 1px 2px #00000040,0 8px 24px #00000040;
    --shadow-up:0 2px 6px #00000055,0 18px 40px #00000055;
  }
}
:root[data-theme="dark"]{
  --ink:#e8eef6;--ink-soft:#b7c3d3;--ink-faint:#8797ab;
  --line:#22344e;--bg:#0a1930;--bg-alt:#0d2039;--card:#0f2340;--icon-bg:#16304f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink)}
a{color:var(--cyan-600)}
img,svg{max-width:100%;height:auto}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Quien navega con el teclado tiene que ver dónde está parado. */
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:2px solid var(--cyan-500);
  outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ---- encabezado ---- */
/* Pegado arriba sólo donde cabe en una línea. En el teléfono el menú es una segunda tira, y
   pegar las dos se come ciento diez pixeles de una pantalla de ochocientos: se lee peor de lo
   que ayuda. Ahí se queda arriba de la página y se va con ella. */
.top{background:var(--navy-900);color:#fff;border-bottom:1px solid #ffffff14}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;min-height:64px}
/* El logotipo es un archivo con las letras en trazos, no texto ni un cubo dibujado aparte.
   Va como imagen y no en línea: la política de la página permite imágenes propias, y así el
   logo se cambia sin tocar el marcado de tres páginas. */
.brand{display:flex;align-items:center;color:#fff;text-decoration:none}
/* El archivo trae margen alrededor del dibujo —el cubo ocupa poco más de la mitad del
   alto—, así que la altura de la caja va por encima de lo que se quiere ver. */
.brand img{height:54px;width:auto;display:block}
@media (max-width:520px){.brand img{height:44px}}
/* Debajo de mil pixeles el menú no desaparece: se vuelve una tira que se desliza. Esconderlo
   dejaba a quien entra desde el teléfono —que son casi todos— sin manera de saltar a lo suyo. */
.nav{order:3;width:100%;display:flex;gap:18px;font-size:.88rem;overflow-x:auto;
  padding:2px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{color:#c2d4e8;text-decoration:none;white-space:nowrap;padding-bottom:2px;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:#fff;border-color:var(--cyan-500)}
.top .actions{display:flex;gap:8px;align-items:center}
.top .actions .btn{padding:9px 14px;font-size:.9rem}
.top .short{display:none}
@media (max-width:520px){.top .long{display:none}.top .short{display:inline}}
@media (min-width:1000px){
  .top{position:sticky;top:0;z-index:5}
  .top .wrap{flex-wrap:nowrap}
  .nav{order:0;width:auto;overflow:visible;padding:0;gap:16px}
}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:10px;
  font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;white-space:nowrap;
  cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.btn.primary{background:linear-gradient(135deg,var(--cyan-500) 0%,var(--blue-600) 140%);
  color:#fff;border-color:transparent;box-shadow:var(--glow)}
.btn.primary:hover{background:linear-gradient(135deg,var(--cyan-600) 0%,var(--blue-700) 140%);
  box-shadow:0 12px 34px #29abe259}
.btn.ghost{background:transparent;color:#fff;border-color:#ffffff40}
.btn.ghost:hover{border-color:#fff}
.btn.outline{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.outline:hover{border-color:var(--cyan-500)}
.btn.big{padding:14px 24px;font-size:1.02rem}
.btn.big:hover{transform:translateY(-1px)}

/* ---- portada ---- */
.hero{background:
    radial-gradient(90% 70% at 85% 0%,#29abe23d 0%,transparent 60%),
    radial-gradient(70% 60% at 0% 100%,#166a9e40 0%,transparent 65%),
    linear-gradient(155deg,#0a1930 0%,#0f2a55 55%,#12456e 100%);
  color:#fff;padding:clamp(44px,6vw,72px) 0 clamp(52px,7vw,80px);position:relative;overflow:hidden}
/* Una retícula finísima encima del degradado. Da textura sin pesar un solo byte de imagen. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(#ffffff0a 1px,transparent 1px),
    linear-gradient(90deg,#ffffff0a 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 75%);
  mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 75%)}
.hero::after{content:"";position:absolute;inset:auto -15% -45% auto;width:55%;height:120%;
  background:radial-gradient(closest-side,#00bfff26,transparent 70%);pointer-events:none}
.hero .wrap{position:relative;display:grid;gap:36px}
.eyebrow{color:var(--cyan-400);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;margin-bottom:14px}
.hero h1{font-weight:700}
.hero .lead{color:#d5e2f0;font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:52ch;margin-top:18px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .fine{color:#8ba3bd;font-size:.85rem;margin-top:18px;max-width:46ch}
.flow{display:grid;gap:10px;align-content:start}
@media (min-width:880px){.hero .wrap{grid-template-columns:1.12fr .88fr;align-items:center;gap:48px}}

/* ---- la revisión previa del hero ---- */
/* ---- el recuadro de la portada: un periodo, no una lista de siglas ------------------
   Era una lista de comprobaciones —NSS, CLABE, RFC, CURP, catálogo del SAT— y en la portada
   eso es un muro de siglas: enumera sin contar nada y deja fuera a quien todavía no sabe si
   esto es para él. Ahora cuenta el recorrido de un periodo en cuatro tiempos, cada uno con lo
   que pasa y con lo que sale. El último es el que importa y se ve distinto. */
.mock{background:#fff;color:var(--navy-900);border-radius:16px;padding:22px 22px 18px;
  box-shadow:0 30px 70px #00000066;border:1px solid #ffffff22}
.mock-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-weight:700;font-size:1.05rem;padding-bottom:16px;border-bottom:1px solid #e3eaf3}
.mock-head small{color:#5b6d84;font-weight:500;font-size:.8rem;white-space:nowrap}
.mock-pasos{counter-reset:beat;list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0}
.mock-pasos li{position:relative;padding:0 0 22px 38px}
.mock-pasos li:last-child{padding-bottom:4px}
/* El punto de cada tiempo y la línea que los encadena: de un vistazo se ve que es un camino. */
.mock-pasos li::before{counter-increment:beat;content:counter(beat);position:absolute;left:0;top:0;
  width:24px;height:24px;border-radius:50%;background:#e6f4fb;color:var(--cyan-600);
  display:grid;place-items:center;font-size:.78rem;font-weight:700}
.mock-pasos li::after{content:"";position:absolute;left:11px;top:26px;bottom:6px;width:2px;
  background:linear-gradient(#cfe6f5,#e3eaf3)}
.mock-pasos li:last-child::after{display:none}
.mock-pasos strong{display:block;font-size:1rem;line-height:1.3}
.mock-pasos span{display:block;color:#3a4c63;font-size:.9rem;margin-top:3px}
/* La rama: lo que pasa del lado del trabajador mientras el periodo sigue su curso. */
.mock-pasos .rama{position:relative;margin-top:8px;padding-left:16px;color:#5b6d84;
  font-size:.84rem}
.mock-pasos .rama::before{content:"↳";position:absolute;left:0;color:var(--cyan-600)}
.mock-pasos .fin::before{background:linear-gradient(140deg,var(--cyan-500),var(--blue-700));
  color:#fff;content:"✓";font-size:.8rem}
.mock-pasos .fin strong{color:var(--cyan-600)}
.mock-note{display:block;margin-top:18px;padding-top:14px;border-top:1px solid #e3eaf3;
  color:#5b6d84;font-size:.78rem;line-height:1.45}

/* ---- secciones ---- */
section{padding:var(--seccion) 0;scroll-margin-top:16px}
@media (min-width:1000px){section{scroll-margin-top:76px}}
section h2{font-size:clamp(1.55rem,3vw,2.15rem);font-weight:700;max-width:24ch}
.tema{color:var(--cyan-600);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;
  font-weight:700;margin-bottom:10px}
.trust .tema{color:var(--cyan-400)}
.sub{color:var(--ink-soft);margin-top:14px;max-width:62ch;font-size:1.12rem;line-height:1.6}
/* La sección alterna lleva una luz arriba y otra abajo: el mismo truco de la portada, en
   claro. Un gris plano detrás de seis tarjetas blancas es lo que hacía ver la página apagada. */
.alt{background:
    radial-gradient(70% 55% at 12% 0%,#29abe226 0%,transparent 60%),
    radial-gradient(60% 55% at 95% 100%,#166a9e1a 0%,transparent 60%),
    linear-gradient(180deg,var(--bg-alt) 0%,var(--bg) 100%)}
.grid{display:grid;gap:16px;margin-top:30px}
@media (min-width:700px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-up);border-color:#b9d6ef}
.card h3{font-size:1.22rem;margin-bottom:10px;line-height:1.25}
.card p{color:var(--ink-soft);font-size:1.02rem;line-height:1.6}
.icon{width:46px;height:46px;border-radius:12px;background:var(--icon-bg);color:var(--cyan-600);
  display:grid;place-items:center;margin-bottom:16px;flex:none}
.icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip{display:inline-block;margin-top:14px;font-size:.73rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cyan-600);background:var(--icon-bg);padding:5px 9px;border-radius:6px}
.sub.closing{margin-top:28px;font-size:.98rem}

/* ---- un periodo, de principio a fin ---- */
.steps{counter-reset:paso;display:grid;gap:14px;margin:30px 0 0;padding:0}
.steps li{list-style:none;display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow)}
.steps li::before{counter-increment:paso;content:counter(paso);width:40px;height:40px;border-radius:50%;
  background:linear-gradient(140deg,var(--cyan-500),var(--blue-600));color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:1.02rem;box-shadow:0 6px 16px #29abe23d}
.steps strong{display:block;font-size:1.04rem;margin-bottom:5px}
.steps p{color:var(--ink-soft);font-size:1.02rem;line-height:1.55}
.steps .who{display:inline-block;margin-top:10px;font-size:.74rem;color:var(--cyan-600);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;background:var(--icon-bg);padding:4px 8px;border-radius:5px}
@media (min-width:880px){.steps{grid-template-columns:1fr 1fr}}

/* ---- secciones oscuras ---- */
.trust{background:var(--navy-900);color:#fff;border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14}
.trust h2{color:#fff}
.trust .sub{color:#d9e5f2}
.trust .card{background:#ffffff0d;border-color:#ffffff1a;box-shadow:none}
.trust .card:hover{border-color:#ffffff33;box-shadow:none}
.trust .card h3{color:#fff;font-size:1.1rem}
.trust .card p{color:#d5e2f0}
.trust .icon{background:#16304f;color:var(--cyan-400)}
.trust .chip{color:var(--cyan-400);background:#16304f}

/* ---- lista de validaciones ---- */
.checks{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.checks li{display:flex;gap:16px;align-items:flex-start;padding:20px;background:#ffffff0d;
  border:1px solid #ffffff1a;border-radius:12px;color:#d5e2f0;font-size:1.02rem;line-height:1.55}
.checks li .icon{margin:0;background:#16304f;color:var(--cyan-400);width:42px;height:42px}
.checks li strong{color:#fff;display:block;font-size:1.04rem;margin-bottom:3px}
@media (min-width:880px){.checks{grid-template-columns:1fr 1fr}}

/* ---- preguntas ------------------------------------------------------------------
   Eran diez cajas blancas apiladas en media pantalla, con la otra media vacía: pesadas de
   ver y aburridas de leer. Ahora el título y el recado se quedan a la izquierda y las
   preguntas corren a la derecha como una lista con líneas finas. Sin cajas, sin sombras. */
.preguntas{display:grid;gap:28px}
@media (min-width:900px){
  .preguntas{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
  .faq-intro{position:sticky;top:96px}
}
.faq-intro .sub{font-size:1.02rem;margin-bottom:20px}
.faq-intro .btn{margin-top:4px}
.faq{display:grid;gap:0;max-width:none;margin-top:0;border-top:1px solid var(--line)}
.faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0}
.faq summary{cursor:pointer;padding:20px 0;font-weight:600;font-size:1.08rem;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--ink);
  transition:color .15s}
.faq summary:hover{color:var(--cyan-600)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--cyan-600);
  border-bottom:2px solid var(--cyan-600);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s}
.faq details[open] summary{color:var(--cyan-600)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details p{color:var(--ink-soft);padding:0 0 22px;font-size:1.04rem;line-height:1.65;max-width:68ch}

/* ---- cierre ---- */
.close{text-align:center;color:#fff;
  background:
    radial-gradient(70% 80% at 20% 0%,#29abe23d 0%,transparent 60%),
    radial-gradient(60% 80% at 90% 100%,#166a9e3d 0%,transparent 60%),
    linear-gradient(150deg,#0a1930 0%,#0f2a55 60%,#12456e 100%)}
.close h2{color:#fff}
.close .sub{color:#c2d4e8}
.close .btn.outline{background:transparent;color:#fff;border-color:#ffffff4d}
.close .btn.outline:hover{border-color:#fff}
.close h2{margin-left:auto;margin-right:auto;max-width:28ch}
.close .sub{margin-left:auto;margin-right:auto}
.close .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

/* ---- pie ---- */
footer{border-top:1px solid var(--line);padding:32px 0 44px;color:var(--ink-faint);font-size:.88rem}
footer .wrap{display:grid;gap:16px}
footer .links{display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--cyan-600)}
/* La liga de los portales es una frase, no un enlace de menú: en la misma fila rompía el pie. */
footer .aparte{display:block;margin-top:4px;color:var(--ink-faint)}
footer .arriba{font-weight:600}
@media (min-width:820px){footer .wrap{grid-template-columns:1fr auto;align-items:start}
  footer .links{justify-content:flex-end}}

/* ---- páginas de texto (aviso de privacidad) ---- */
.legal{padding:clamp(40px,6vw,64px) 0}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;margin:0}
.legal h2{font-size:1.15rem;font-weight:700;margin:34px 0 8px}
.legal p{margin:0 0 12px;color:var(--ink-soft)}
.legal a{color:var(--cyan-600)}

/* ---- lo nuevo de 2026: menos adorno, más jerarquía ----------------------------------
   Tres cosas que sí cambian cómo se lee una página de producto y que aquí faltaban: una
   tipografía que mande en la portada, bloques de distinto tamaño en vez de una reja pareja
   («bento»), y una muestra del producto de verdad en vez de una ilustración. Lo que no se
   copia: logos de clientes y números de uso que no tenemos. En su lugar van hechos que se
   pueden comprobar —la tarifa, la versión del comprobante, el PAC—, que es lo que un
   contador revisa antes de creerle a nadie. */

/* La portada manda con el tamaño del titular, no con un adorno. */
/* El titular creció de tres palabras a nueve: con el cuerpo de antes se comía la
   pantalla y dejaba los botones abajo del doblez. */
.hero h1{font-size:clamp(2.05rem,4.4vw,3.15rem);letter-spacing:-.03em;line-height:1.08;
  max-width:22ch}
.brillo{background:linear-gradient(100deg,var(--cyan-brand) 0%,var(--cyan-400) 40%,var(--blue-300) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Si el navegador no sabe recortar el fondo al texto, la palabra se queda en cian y se lee. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .brillo{color:var(--cyan-400);background:none}
}
.hero .lead{max-width:54ch;margin-top:20px}

/* Donde otros ponen logos de clientes: con qué cumple, dicho de manera comprobable. */
.hechos{list-style:none;margin:22px 0 0;padding:16px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;
  border-top:1px solid #ffffff1f}
.hechos li{position:relative;padding-left:20px;color:#9fb6cf;font-size:.82rem;letter-spacing:.01em}
.hechos li::before{content:"✓";position:absolute;left:0;color:var(--cyan-400);font-weight:700}

/* ---- la banda del cambio ----------------------------------------------------------
   Eran dos columnas de una tabla, y se leía como hoja de cálculo: gris sobre blanco, con la
   columna de la izquierda tan clara que costaba leerla. Ahora son dos tarjetas que se
   contradicen a la vista: la de hoy apagada y tachada, la nuestra oscura y con palomas. */
.contraste{background:
    radial-gradient(60% 50% at 8% 0%,#166a9e1a 0%,transparent 60%),
    linear-gradient(180deg,var(--bg-alt) 0%,var(--bg) 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Dos listas paralelas nunca quedan a la misma altura: el tercer punto de la izquierda cae
   frente al cuarto de la derecha y deja de leerse como una comparación. Esto es una reja de
   pares: cada renglón es una celda clara y una oscura, y las dos miden lo mismo. El degradado
   vive en el contenedor, no en cada celda, para que la columna oscura no salga a bandas. */
.comparativa{display:grid;grid-template-columns:1fr;margin-top:30px;border-radius:var(--radius);
  overflow:hidden;background:linear-gradient(155deg,#0a1930 0%,#0f2a55 55%,#12456e 100%);
  /* El marco azul y su halo: el bloque deja de ser un recuadro blanco pegado a la página. */
  border:1px solid var(--blue-600);
  box-shadow:0 0 0 5px #29abe214,0 20px 48px #0f1c2e2e}
.comparativa .antes,.comparativa .despues{padding:20px 22px;font-size:1.02rem;line-height:1.55;
  position:relative}
/* La columna de hoy no es blanca a secas: lleva un papel azulado, una retícula finísima y un
   filo de color a la izquierda, para que se vea del mismo mundo que la columna oscura. */
.comparativa .antes{color:var(--ink-soft);padding-left:52px;
  background-color:#f7fafe;
  background-image:linear-gradient(#0a19300a 1px,transparent 1px),
    linear-gradient(90deg,#0a19300a 1px,transparent 1px);
  background-size:34px 34px;
  box-shadow:inset 3px 0 0 #cfe2f5}
.comparativa .despues{color:#d5e2f0;padding-left:52px}
.comparativa .antes::before,.comparativa .despues::before{position:absolute;left:20px;top:19px;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;
  font-weight:700}
.comparativa .antes::before{content:"✕";background:#e4ecf6;color:#6a83a0}
.comparativa .despues::before{content:"✓";background:#ffffff1f;color:var(--cyan-400)}
/* Los encabezados no llevan marca ni sangría. */
.comparativa .cabeza{font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;padding:18px 22px}
.comparativa .cabeza::before{content:none}
.comparativa .cabeza.antes{color:var(--ink-faint)}
.comparativa .cabeza.despues{color:var(--cyan-400)}
@media (min-width:860px){
  .comparativa{grid-template-columns:1fr 1fr}
  /* Cada par en su renglón: las dos celdas crecen juntas y quedan frente a frente. Las líneas
     que los separan se ven —una línea de un píxel al cuatro por ciento no separa nada— y hay
     una vertical que parte las dos columnas. */
  .comparativa .antes{border-bottom:1px solid #cddcee;border-right:1px solid #b9d0e8}
  .comparativa .despues{border-bottom:1px solid #ffffff2e}
  .comparativa>.antes:last-of-type,.comparativa>.despues:last-of-type{border-bottom:0}
  /* Un renglón sí y otro no, con un tono más: el ojo sigue el par sin contar líneas. */
  .comparativa .antes:nth-child(4n+3){background-color:#eef4fc}
  .comparativa .despues:nth-child(4n+4){background-color:#ffffff0a}
}
:root:not([data-theme="light"]) .comparativa .antes{border-bottom-color:#1d3f63;
  border-right-color:#1d3f63}
:root:not([data-theme="light"]) .comparativa .antes:nth-child(4n+3){background-color:#122a4b}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .comparativa .antes{border-bottom-color:#cddcee;
    border-right-color:#b9d0e8}
  :root:not([data-theme="dark"]) .comparativa .antes:nth-child(4n+3){background-color:#eef4fc}
}
/* En el teléfono no hay dos columnas que emparejar: cada punto de hoy va seguido del suyo. */
:root:not([data-theme="light"]) .comparativa .antes{background-color:#0f2340;
  box-shadow:inset 3px 0 0 #1d3f63}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .comparativa .antes{background-color:#f7fafe;
    box-shadow:inset 3px 0 0 #cfe2f5}
}
@media (max-width:859px){
  .comparativa .cabeza{display:none}
  .comparativa .antes{border-bottom:1px solid #cddcee}
  .comparativa .despues{border-bottom:2px solid #ffffff33}
  .comparativa>.despues:last-of-type{border-bottom:0}
}

/* ---- bento: bloques de distinto peso, y dos de ellos en oscuro ---------------------
   Seis tarjetas blancas del mismo tamaño no tienen jerarquía: el ojo no sabe por dónde
   empezar. Las dos que mandan —la primera de cada renglón— van en el azul de la marca, con la
   misma retícula de la portada; las otras cuatro quedan claras. De lejos se lee el ritmo antes
   que el texto. */
@media (min-width:900px){
  .grid.bento{grid-template-columns:repeat(6,1fr)}
  .grid.bento>.card:nth-child(1){grid-column:span 4}
  .grid.bento>.card:nth-child(2),.grid.bento>.card:nth-child(3){grid-column:span 2}
  .grid.bento>.card:nth-child(4){grid-column:span 4}
  .grid.bento>.card:nth-child(5),.grid.bento>.card:nth-child(6){grid-column:span 3}
  .grid.bento>.card:nth-child(1),.grid.bento>.card:nth-child(4){padding:34px}
  .grid.bento>.card:nth-child(1) h3,.grid.bento>.card:nth-child(4) h3{font-size:1.6rem}
  .grid.bento>.card:nth-child(1) p,.grid.bento>.card:nth-child(4) p{font-size:1.06rem;max-width:52ch}
  .grid.bento>.card:nth-child(1) .icon,.grid.bento>.card:nth-child(4) .icon{width:54px;height:54px}
  .grid.bento>.card:nth-child(1) .icon svg,.grid.bento>.card:nth-child(4) .icon svg{width:28px;height:28px}
}
@media (min-width:700px) and (max-width:899px){.grid.bento{grid-template-columns:1fr 1fr}}
/* ---- tarjetas en oscuro ------------------------------------------------------------
   Las que mandan en el bento y, en las rejas de tres, una sí y una no. Una reja pareja de
   blancos se lee como una lista; alternando, se lee como una composición. */
.grid.bento>.card:nth-child(1),.grid.bento>.card:nth-child(4),
main section:not(.trust) .grid.three>.card:nth-child(even),
main section:not(.trust) .grid.two>.card:nth-child(even){
  color:#fff;border-color:transparent;
  background-color:#0a1930;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),
    linear-gradient(90deg,#ffffff08 1px,transparent 1px),
    radial-gradient(70% 60% at 100% 0%,#29abe230 0%,transparent 60%),
    linear-gradient(150deg,#0a1930 0%,#0f2a55 60%,#12456e 100%);
  background-size:40px 40px,40px 40px,auto,auto;
  box-shadow:0 20px 48px #0f1c2e2e}
.grid.bento>.card:nth-child(1) h3,.grid.bento>.card:nth-child(4) h3,
main section:not(.trust) .grid.three>.card:nth-child(even) h3,
main section:not(.trust) .grid.two>.card:nth-child(even) h3{color:#fff}
.grid.bento>.card:nth-child(1) p,.grid.bento>.card:nth-child(4) p,
main section:not(.trust) .grid.three>.card:nth-child(even) p,
main section:not(.trust) .grid.two>.card:nth-child(even) p{color:#d5e2f0}
.grid.bento>.card:nth-child(1) .icon,.grid.bento>.card:nth-child(4) .icon,
main section:not(.trust) .grid.three>.card:nth-child(even) .icon,
main section:not(.trust) .grid.two>.card:nth-child(even) .icon{
  background:#ffffff1a;color:var(--cyan-400)}
main section:not(.trust) .grid.three>.card:nth-child(even) .chip,
main section:not(.trust) .grid.two>.card:nth-child(even) .chip{color:var(--cyan-400);background:#ffffff14}
.grid.bento>.card:nth-child(1):hover,.grid.bento>.card:nth-child(4):hover,
main section:not(.trust) .grid.three>.card:nth-child(even):hover,
main section:not(.trust) .grid.two>.card:nth-child(even):hover{
  border-color:var(--cyan-600);box-shadow:0 24px 56px #0f1c2e3d}
/* Las claras: el azulejo del ícono con degradado y un filo de color arriba. */
.grid.bento>.card{border-top:3px solid var(--blue-600)}
.grid.bento>.card:nth-child(1),.grid.bento>.card:nth-child(4){border-top:0}
.grid.bento>.card .icon{background:linear-gradient(140deg,#e6f4fb,#dbe9fa)}
:root:not([data-theme="light"]) .grid.bento>.card .icon{background:#16304f}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .grid.bento>.card .icon{background:linear-gradient(140deg,#e6f4fb,#dbe9fa)}
}
.grid.bento>.card:nth-child(1) .icon,.grid.bento>.card:nth-child(4) .icon{
  background:#ffffff1a}

/* ---- el panel del producto: lo que de verdad sale de una corrida ---- */
.panel{margin-top:30px;background:var(--navy-900);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px #0f1c2e2e;border:1px solid var(--navy-700)}
.panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;
  padding:16px 20px;color:#fff;font-weight:700;border-bottom:1px solid #ffffff1a}
.panel-head small{color:#8ba3bd;font-weight:500;font-size:.8rem}
.panel-tabla{display:grid;font-variant-numeric:tabular-nums}
.panel-tabla .fila{display:grid;gap:2px 14px;padding:14px 20px;border-bottom:1px solid #ffffff12;
  color:#c2d4e8;font-size:.9rem}
.panel-tabla .fila:last-child{border-bottom:0}
.panel-tabla .fila span{display:flex;flex-direction:column}
.panel-tabla .fila span small{color:#8ba3bd;font-size:.76rem;margin-top:2px}
.panel-tabla .fila strong{color:#fff}
.panel-tabla .encabezado{display:none}
/* En el teléfono cada cifra dice de qué columna es: una tabla de cinco columnas no cabe. */
.panel-tabla .fila:not(.encabezado) span:not(:first-child)::before{content:attr(data-col);
  color:#7b93ad;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.panel-pie{padding:16px 20px;color:#9fb6cf;font-size:.86rem;line-height:1.5;background:#ffffff08;
  border-top:1px solid #ffffff12}
.panel-pie strong{color:#fff;font-weight:600}
@media (min-width:760px){
  .panel-tabla .fila{grid-template-columns:1.3fr repeat(6,1fr);align-items:center}
  .panel-tabla .encabezado{display:grid;color:#7b93ad;font-size:.72rem;letter-spacing:.08em;
    text-transform:uppercase;padding:12px 20px}
  .panel-tabla .fila:not(.encabezado) span:not(:first-child)::before{content:none}
  .panel-tabla .fila span:not(:first-child){text-align:right;align-items:flex-end}
}

/* ---- el llamado a la mano, donde el encabezado no se queda pegado ---- */
.barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:#0a1930e6;backdrop-filter:blur(10px);border-top:1px solid #ffffff1f;color:#fff}
.barra-fija span{font-size:.86rem;color:#c2d4e8}
.barra-fija .btn{padding:9px 16px;font-size:.9rem}
@media (min-width:1000px){.barra-fija{display:none}}
@media (max-width:999px){body{padding-bottom:64px}}

/* ---- la portada: cinco cosas, en dos renglones que cierran ---- */
.grid.hace .card h3{font-size:1.3rem}
.grid.hace .card p{font-size:.98rem}
@media (min-width:700px) and (max-width:999px){.grid.hace{grid-template-columns:1fr 1fr}}
/* Seis: tres arriba y tres abajo. */
@media (min-width:1000px){.grid.hace{grid-template-columns:repeat(3,1fr)}}
/* Cinco azules, del más hondo al más claro: se distinguen sin meter otro color. */
.grid.hace .card:nth-child(1) .icon{background:#dceefb;color:var(--navy-800)}
.grid.hace .card:nth-child(2) .icon{background:#dceefb;color:var(--blue-700)}
.grid.hace .card:nth-child(3) .icon{background:#e0f2fc;color:var(--blue-600)}
.grid.hace .card:nth-child(4) .icon{background:#e6f6fd;color:var(--cyan-500)}
.grid.hace .card:nth-child(5) .icon{background:#e6f6fd;color:var(--cyan-600)}
.grid.hace .card:nth-child(6) .icon{background:#e6f6fd;color:var(--cyan-500)}
.grid.hace .card:nth-child(1){border-top:3px solid var(--navy-800)}
.grid.hace .card:nth-child(2){border-top:3px solid var(--blue-700)}
.grid.hace .card:nth-child(3){border-top:3px solid var(--blue-600)}
.grid.hace .card:nth-child(4){border-top:3px solid var(--cyan-500)}
.grid.hace .card:nth-child(5){border-top:3px solid var(--cyan-400)}
.grid.hace .card:nth-child(6){border-top:3px solid var(--cyan-500)}
:root:not([data-theme="light"]) .grid.hace .card .icon{background:#16304f}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .grid.hace .card:nth-child(-n+2) .icon{background:#dceefb}
  :root:not([data-theme="dark"]) .grid.hace .card:nth-child(3) .icon{background:#e0f2fc}
  :root:not([data-theme="dark"]) .grid.hace .card:nth-child(n+4) .icon{background:#e6f6fd}
}
/* Los pasos de la portada son un renglón cada uno: sin párrafo debajo, el número manda. */
.steps.breve li{align-items:center;padding:16px 20px}
.steps.breve strong{margin-bottom:0;font-size:1.05rem}
.steps.breve .who{margin-top:6px}
@media (min-width:880px){.steps.breve{grid-template-columns:1fr 1fr}}
/* La portada de la página de detalle no lleva ilustración, así que no parte en dos. */
.hero.corta{padding:clamp(40px,5vw,64px) 0 clamp(36px,5vw,56px)}
.hero.corta .wrap{grid-template-columns:1fr}
.hero.corta h1{max-width:18ch}
.faq-intro .otra{margin-top:20px;font-size:.98rem}
.faq-intro .otra a{color:var(--cyan-600);text-decoration:none;font-weight:600}
.faq-intro .otra a:hover{text-decoration:underline}