/* ===========================================================================
   Zenith GES — hoja de estilos de la web pública
   ---------------------------------------------------------------------------
   Rediseño 2026-09-22. Un solo archivo, sin framework ni build: el sitio se
   despliega subiendo la carpeta (ver guias/despliegue/landing_page.md).

   La paleta y la tipografía NO son una decisión de esta página: son las
   mismas de las dos aplicaciones ("terminal de banca privada",
   referencia/rediseno_premium.md), con sus contrastes ya validados contra
   WCAG AA. Lo que cambia aquí es la maquetación: registro editorial, escala
   tipográfica fluida y una retícula de secciones numeradas.

   Orden del archivo:
     1. Fuentes           5. Cabecera        9. Módulos y bloques
     2. Tokens            6. Botones        10. Precios
     3. Base              7. Portada        11. Preguntas
     4. Utilidades        8. Modos          12. Pie · 13. Movimiento
   =========================================================================== */

/* ------------------------------------------------------------- 1. Fuentes
   Locales y subseteadas: ninguna petición a terceros, igual que en las apps. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrainsmono-var.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------- 2. Tokens */
:root {
  color-scheme: light dark;

  /* Superficies — neutro CÁLIDO, no el gris-azul de medio internet. */
  --paper: #FAF9F7;
  --surface: #FFFFFF;
  --sunken: #F4F2EE;
  --hairline: #E8E5E0;
  --border: #DDD8D0;
  --border-strong: #C4BDB2;

  /* Tinta — los cuatro niveles validados en la app. */
  --ink: #14120F;
  --ink-2: #4A453D;
  --muted: #6B655B;
  --faint: #8C857A;

  /* Marca y estados. `--primary-fill` existe porque en oscuro el azul de
     texto no sirve como relleno de botón (blanco encima reprueba AA). */
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-fill: #2563EB;
  --primary-light: #EEF3FF;
  --on-primary: #FFFFFF;
  --positive: #047857;
  --positive-light: #E7F5EF;
  --warning: #A65F14;
  --warning-light: #FBF0E2;
  --error: #C62B2B;
  --info: #0F6FA8;

  /* Tipografía */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala fluida: un solo juego de tamaños de 375 px a 1440 px. */
  --t-display: clamp(2.05rem, 1.45rem + 2.5vw, 3.4rem);
  --t-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.45rem);
  --t-h3: clamp(1.15rem, 1.02rem + 0.5vw, 1.35rem);
  --t-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-eyebrow: 0.75rem;

  /* Espacio */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --gutter: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  /* Sombras: muy contenidas — el peso visual lo llevan los filetes. */
  --shadow-sm: 0 1px 2px rgba(20, 18, 15, .05);
  --shadow: 0 2px 8px rgba(20, 18, 15, .06), 0 12px 32px -12px rgba(20, 18, 15, .10);
  --shadow-lg: 0 8px 24px rgba(20, 18, 15, .08), 0 40px 80px -32px rgba(20, 18, 15, .22);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Oscuro: por preferencia del sistema, salvo que el visitante haya elegido
   claro a mano (`data-theme`, que gana siempre). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0E0D0C;
    --surface: #171614;
    --sunken: #211F1C;
    --hairline: #2A2724;
    --border: #38332E;
    --border-strong: #4A443D;
    --ink: #F5F3F0;
    --ink-2: #B5AFA5;
    --muted: #918B81;
    --faint: #6F6960;
    --primary: #5B8DEF;
    --primary-hover: #7BA4F2;
    --primary-fill: #2C6BE0;
    --primary-light: #1A2338;
    --positive: #34D399;
    --positive-light: #10261F;
    --warning: #F0B357;
    --warning-light: #2A2013;
    --error: #F0716E;
    --info: #5AB4E8;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5), 0 40px 80px -32px rgba(0, 0, 0, .75);
  }
}

/* El mismo bloque, pero forzado por el conmutador de la cabecera. */
:root[data-theme='dark'] {
  --paper: #0E0D0C;
  --surface: #171614;
  --sunken: #211F1C;
  --hairline: #2A2724;
  --border: #38332E;
  --border-strong: #4A443D;
  --ink: #F5F3F0;
  --ink-2: #B5AFA5;
  --muted: #918B81;
  --faint: #6F6960;
  --primary: #5B8DEF;
  --primary-hover: #7BA4F2;
  --primary-fill: #2C6BE0;
  --primary-light: #1A2338;
  --positive: #34D399;
  --positive-light: #10261F;
  --warning: #F0B357;
  --warning-light: #2A2013;
  --error: #F0716E;
  --info: #5AB4E8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5), 0 40px 80px -32px rgba(0, 0, 0, .75);
}

/* ---------------------------------------------------------------- 3. Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 640;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg { max-width: 100%; }
img { height: auto; }

ul { margin: 0; padding: 0; list-style: none; }

strong { font-weight: 640; color: var(--ink); }

/* Cifras: siempre monoespaciadas y tabulares. Es la misma regla de las apps
   —una columna de pesos tiene que alinearse— y de paso da el registro de
   "terminal" que separa esta página de un landing genérico. */
.num {
  font-family: var(--mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.02em;
}

::selection { background: var(--primary-light); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.saltar:focus { left: 12px; top: 12px; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- 4. Utilidades */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }

.sec { padding-block: clamp(56px, 8vw, 104px); }
.sec--sunken {
  background: var(--sunken);
  border-block: 1px solid var(--hairline);
}
.sec--tight { padding-block: clamp(40px, 5vw, 64px); }

.sec__head { max-width: 700px; margin-bottom: clamp(32px, 4vw, 56px); }
.sec__head--wide { max-width: 860px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--border-strong);
}

.sec__title { font-size: var(--t-h2); }

.sec__lead {
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-2);
}

.grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}

.card__title {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
}

.card__text { color: var(--ink-2); font-size: var(--t-small); line-height: 1.6; }

.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--sm { width: 16px; height: 16px; }
.ico--lg { width: 26px; height: 26px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-4); }
.tag {
  padding: 3px 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--sunken);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ------------------------------------------------------------ 5. Cabecera
   Fija, con un filete inferior que solo aparece al bajar (clase `.top--fija`
   desde main.js). Sin JS la barra sigue siendo usable: queda con el filete
   permanente, que es el estado por defecto de abajo. */
.top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.top--fija {
  border-bottom-color: var(--hairline);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

.top__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 680;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand__mark { width: 28px; height: 28px; border-radius: 7px; }
.brand__ges {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 2px;
}

.nav { display: none; margin-left: auto; align-items: center; gap: 2px; }
@media (min-width: 1000px) { .nav { display: flex; } }

.nav__link {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 560;
  white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav__link:hover {
  color: var(--ink);
  background: var(--sunken);
  text-decoration: none;
}

.top__acciones { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
@media (min-width: 1000px) { .top__acciones { margin-left: var(--s-4); } }

/* En un teléfono, marca + tema + "Descargar" + menú no caben en 375px y la
   página se desbordaba de lado. Por debajo de 520px el botón de la cabecera
   queda solo con el ícono (cuadrado, mismo alto que los demás); el texto
   completo sigue en el menú lateral. */
@media (max-width: 519px) {
  .top__inner { gap: var(--s-3); }
  /* `.btn.` para ganarle a `.btn`, que está declarado más abajo. */
  .btn.top__descargar { width: 44px; padding: 0; gap: 0; flex: none; }
  .top__descargar-txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.iconbtn:hover { border-color: var(--border-strong); color: var(--ink); }
@media (min-width: 1000px) { .iconbtn--menu { display: none; } }

/* Conmutador de tema: se muestra el icono del tema al que se va a cambiar. */
.tema__sol { display: none; }
:root[data-theme='dark'] .tema__sol { display: block; }
:root[data-theme='dark'] .tema__luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tema__sol { display: block; }
  :root:not([data-theme='light']) .tema__luna { display: none; }
}

/* Cajón de navegación en móvil */
.drawer {
  position: fixed;
  inset: 68px 0 auto 0;
  z-index: 55;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  padding: var(--s-4) var(--gutter) var(--s-6);
  display: none;
}
.drawer[data-abierto='true'] { display: block; }
@media (min-width: 1000px) { .drawer { display: none !important; } }

.drawer__link {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 560;
}
.drawer__link:hover { text-decoration: none; color: var(--primary); }
.drawer .btn { margin-top: var(--s-5); width: 100%; }

/* ------------------------------------------------------------- 6. Botones
   Altura mínima 44 px en todos: es el objetivo táctil mínimo, y la página se
   usa tanto desde el computador del mostrador como desde el celular. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: 620;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform .14s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--primary-fill);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--primary-hover); box-shadow: var(--shadow); }
:root[data-theme='dark'] .btn--primary:hover { background: #3B78E8; }

.btn--ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--border-strong); background: var(--sunken); }

.btn--plain {
  background: transparent;
  color: var(--ink-2);
  padding-inline: 12px;
}
.btn--plain:hover { color: var(--ink); background: var(--sunken); }

.btn--lg { min-height: 52px; padding: 14px 26px; font-size: 1rem; border-radius: 13px; }
.btn--full { width: 100%; }

.btn--wa {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}
.btn--wa:hover { border-color: #25D366; color: var(--ink); background: var(--sunken); }
.btn--wa .ico { color: #1EA952; }
:root[data-theme='dark'] .btn--wa .ico { color: #25D366; }

/* ------------------------------------------------------------- 7. Portada */
.hero {
  position: relative;
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: clamp(48px, 6vw, 88px);
  overflow: hidden;
}

/* Resplandor de marca, muy tenue. Decorativo: no lleva contenido ni afecta
   al contraste de ningún texto encima (va detrás de todo). */
.hero::before {
  content: '';
  position: absolute;
  top: -320px;
  left: 50%;
  width: min(1100px, 130vw);
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--primary) 13%, transparent) 0%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 1040px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr); }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
}
.pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 18%, transparent);
}

.hero__title {
  margin-top: var(--s-5);
  font-size: var(--t-display);
  font-weight: 660;
  letter-spacing: -0.032em;
}
.hero__title em {
  font-style: normal;
  color: var(--primary);
}

.hero__lead {
  margin-top: var(--s-5);
  max-width: 34ch;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-2);
}
@media (min-width: 1040px) { .hero__lead { max-width: 42ch; } }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* En un teléfono los botones de acción se apilan, y cada uno medía lo que su
   texto: "Descargar y probar gratis" quedaba más ancho que "Ver los cuatro
   modos" y el par se veía desalineado. Por debajo de 560 px todos los
   grupos de acciones (portada y cierres) van a ancho completo e iguales. */
@media (max-width: 559px) {
  .hero__cta, .cierre__cta { flex-direction: column; align-items: stretch; }
  .hero__cta > .btn, .cierre__cta > .btn { width: 100%; }
}

.hero__nota {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  color: var(--muted);
}

/* La captura. Se inclina muy poco: lo justo para leerse como pantalla y no
   como imagen pegada. En pantallas pequeñas se endereza. */
.shot {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.shot img { display: block; width: 100%; }

.shot__barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--sunken);
  border-bottom: 1px solid var(--hairline);
}
.shot__sem { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.shot__ruta {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}

@media (min-width: 1040px) {
  .hero__shot { transform: perspective(1600px) rotateY(-3.5deg) rotateX(1.2deg); }
}

.hero__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
.marca {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 220px;
}
.marca .ico { color: var(--primary); margin-top: 2px; }
.marca__t { font-size: var(--t-small); font-weight: 620; color: var(--ink); }
.marca__d { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------------- 8. Modos
   Las cuatro tarjetas de tipo de negocio. Es la sección que explica el
   producto mejor que ninguna otra, así que ocupa el ancho completo y cada
   tarjeta lleva lo que SÍ trae y lo que NO. */
.modos { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .modos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1160px) { .modos { grid-template-columns: repeat(4, 1fr); } }

.modo {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.modo:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.modo__top { display: flex; align-items: center; gap: 11px; margin-bottom: var(--s-4); }
.modo__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
}
.modo__nombre { font-size: var(--t-h3); }
.modo__para {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 560;
  margin-top: 2px;
}

.modo__texto { font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; }

.modo__lista { margin-top: var(--s-4); display: grid; gap: 7px; }
.modo__lista li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.modo__lista .ico { margin-top: 2px; color: var(--positive); }
.modo__lista li[data-no] { color: var(--muted); }
.modo__lista li[data-no] .ico { color: var(--faint); }

.modo__pie {
  margin-top: auto;
  padding-top: var(--s-4);
  margin-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  /* Borde uniforme: el antiguo `border-left: 3px` azul, con la esquina
     redondeada, se leía como una sombra azul pegada al lado izquierdo del
     recuadro. El acento queda en el ícono. */
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.6;
}
.aviso .ico { color: var(--primary); margin-top: 2px; }

/* ------------------------------------------------------- 9. Menudeo y DIAN
   Bloque a dos columnas: explicación a un lado, demostración al otro. */
.split { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 980px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split--inverso > :first-child { order: 2; }
@media (max-width: 979px) { .split--inverso > :first-child { order: 0; } }

/* Demostración del menudeo: no es una imagen, es HTML — así escala, se lee
   con lector de pantalla y no se pixela en ninguna pantalla. */
.stock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stock__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 14px 18px;
  background: var(--sunken);
  border-bottom: 1px solid var(--hairline);
}
.stock__prod { font-size: var(--t-small); font-weight: 640; }
.stock__ref {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--faint);
  letter-spacing: 0.04em;
}

.stock__cifras { display: grid; grid-template-columns: 1fr 1fr; }
.stock__cifra { padding: 18px; }
.stock__cifra + .stock__cifra { border-left: 1px solid var(--hairline); }
.stock__etq {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.stock__val {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 680;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stock__uni { font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-left: 4px; }

.stock__linea {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--hairline);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.stock__linea .ico { color: var(--primary); flex: none; }
.stock__linea--ok { background: var(--positive-light); color: var(--ink-2); }
.stock__linea--ok .ico { color: var(--positive); }

.stock__pie {
  padding: 12px 18px;
  border-top: 1px solid var(--hairline);
  background: var(--sunken);
  font-size: 0.76rem;
  color: var(--muted);
}

/* Lista de argumentos con viñeta de filete numerado */
.puntos { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.punto { display: flex; gap: 14px; }
.punto__n {
  flex: none;
  width: 30px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary);
  padding-top: 3px;
  letter-spacing: 0.04em;
}
.punto__t { font-size: var(--t-body); font-weight: 620; }
.punto__d { margin-top: 5px; font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; }

/* Tarjeta de facturación electrónica */
.dian {
  display: grid;
  gap: var(--s-5);
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) { .dian { grid-template-columns: repeat(3, 1fr); } }
.dian__item { display: flex; gap: 12px; }
.dian__item .ico { color: var(--primary); flex: none; margin-top: 2px; }

/* Factura de ejemplo, en monoespaciada */
.factura {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-5);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--ink-2);
}
.factura__fila { display: flex; justify-content: space-between; gap: var(--s-4); }
.factura__fila--total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--ink);
  font-weight: 700;
}
.factura__etq { color: var(--faint); }
.factura__cufe {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--border);
  font-size: 0.68rem;
  color: var(--faint);
  word-break: break-all;
  line-height: 1.7;
}
.factura__sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--s-4);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--positive-light);
  color: var(--positive);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Equipos / dónde funciona */
.equipo { display: flex; flex-direction: column; height: 100%; }
.equipo__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  margin-bottom: var(--s-4);
}
.equipo__so { display: flex; gap: 8px; margin-top: var(--s-4); flex-wrap: wrap; }
.so {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--sunken);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-2);
}
.so .ico { width: 14px; height: 14px; }

/* ------------------------------------------------------------- 10. Precios */
.planes { display: grid; gap: var(--s-4); }
@media (min-width: 680px) { .planes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .planes { grid-template-columns: repeat(4, 1fr); } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.plan--destacado {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow);
}

.plan__sello {
  position: absolute;
  top: -11px;
  left: var(--s-5);
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--primary-fill);
  color: var(--on-primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan__nombre {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan__precio {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: var(--s-3);
}
.plan__valor {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan__periodo { font-size: 0.82rem; color: var(--muted); font-weight: 560; }

.plan__equivale {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}
.plan__equivale strong { color: var(--ink-2); }

.plan__detalle {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}
.plan__detalle div { display: flex; justify-content: space-between; gap: var(--s-3); }
.plan__detalle strong { color: var(--ink); font-weight: 640; }

.plan .btn { margin-top: var(--s-5); }

/* Lo que incluye — una sola lista, porque todos los planes incluyen lo mismo */
.incluye {
  display: grid;
  gap: 10px var(--s-5);
  margin-top: var(--s-5);
}
@media (min-width: 600px) { .incluye { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .incluye { grid-template-columns: repeat(4, 1fr); } }
.incluye li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.incluye .ico { color: var(--positive); flex: none; }

/* ----------------------------------------------------------- 11. Preguntas
   `<details>` nativo: funciona sin JavaScript y el navegador ya le da
   semántica y teclado. El JS solo cierra las demás al abrir una. */
.faq { display: grid; gap: 10px; }

.faq__item {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .18s var(--ease);
}
.faq__item[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-body);
  font-weight: 620;
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--sunken); }

.faq__signo {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  color: var(--muted);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.faq__item[open] .faq__signo { transform: rotate(45deg); color: var(--primary); }

.faq__a {
  padding: 0 18px 18px;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-2);
}
.faq__a p + p { margin-top: 12px; }

/* Cierre / llamada final */
.cierre {
  position: relative;
  padding: clamp(36px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  text-align: center;
  overflow: hidden;
}
.cierre::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%,
    color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.cierre > * { position: relative; }
.cierre__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-6);
}

/* ------------------------------------------------------------------ 12. Pie */
.foot {
  background: var(--sunken);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(40px, 5vw, 64px) var(--s-6);
}
.foot__grid { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.foot__lema {
  margin-top: var(--s-4);
  max-width: 38ch;
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.6;
}
.foot__t {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--s-4);
}
.foot__lista { display: grid; gap: 9px; }
.foot__lista a { color: var(--ink-2); font-size: var(--t-small); }
.foot__lista a:hover { color: var(--primary); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--faint);
}

/* ---------------------------------------------------- 13. Descargas (SO) */
.sugerencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-sm);
  border-radius: var(--radius);
  margin-bottom: var(--s-6);
}
.sugerencia__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
}
.sugerencia__txt { flex: 1 1 260px; }
.sugerencia__t { font-size: var(--t-h3); }
.sugerencia__d { margin-top: 5px; font-size: var(--t-small); color: var(--ink-2); line-height: 1.55; }
.sugerencia .btn { flex: none; }

.descarga { display: flex; flex-direction: column; height: 100%; }
.descarga__top { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-4); }
.descarga__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 11px;
  background: var(--sunken);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.descarga__meta {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--faint);
  letter-spacing: 0.03em;
}
.descarga .btn { margin-top: var(--s-5); }
.descarga--sugerida { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-sm); }

.pasos { counter-reset: paso; display: grid; gap: var(--s-4); }
.paso {
  display: flex;
  gap: 14px;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.paso__n {
  counter-increment: paso;
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.paso__n::before { content: counter(paso); }
.paso__t { font-weight: 620; font-size: var(--t-small); }
.paso__d { margin-top: 4px; font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; }

/* ------------------------------------------------------------ 14. Movimiento
   Se anima SOLO si el visitante no pidió menos movimiento: `main.js` añade
   `.js-anim` al <html> únicamente en ese caso, así que sin JS —o con
   `prefers-reduced-motion`— todo nace visible. */
.js-anim [data-rev] {
  opacity: 0;
  transform: translateY(18px);
}
.js-anim [data-rev].es-visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: var(--retraso, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-rev] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .top, .drawer, .hero::before, .cierre::before { display: none !important; }
  body { background: #fff; color: #000; }
}