/* ═══════════════════════════════════════════════════════════════════════════
   YilmerPOS — SISTEMA DE DISEÑO WEB  ·  "Enterprise Light"  ·  v5.0
   ───────────────────────────────────────────────────────────────────────────
   Hermano directo del sistema de la app Electron y del panel admin:
   mismos acentos (verde #16A34A + azul #1A6EC5), misma familia tipográfica
   (Inter), misma escala de radios y la misma lógica de superficies.
   La diferencia es el punto de partida: aquí el lienzo SIEMPRE es blanco.

   Reglas del sistema — leerlas antes de tocar nada:
     1. Blanco por defecto. El oscuro es opt-in y solo entra con el toggle.
     2. Un solo color de acción: el verde de marca. El azul es informativo
        (datos, enlaces dentro del texto, gráficas). Todo lo demás es neutro.
     3. La profundidad se construye con hairlines de 1px + sombras suaves
        en capas. Nunca con glow, nunca con sombras duras desplazadas.
     4. Los botones no brillan. Cambian de tono y suben 1px. Nada más.
     5. Las secciones alternan blanco puro y tinte neutro (--bg-subtle).
        Nunca dos tintes seguidos.
     6. Jerarquía tipográfica por peso y tracking, no por color chillón.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. RESET ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img, video, svg, canvas { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
/* Salvavidas: un SVG inline sin tamaño explícito se estira y rompe el layout. */
svg:not([width]) { width: 1em; height: 1em; flex-shrink: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
/* `[hidden]` tiene que ganarle a cualquier `display` de componente. Sin esto,
   el widget de soporte mostraba los dos modos —IA y persona— a la vez,
   porque `.sup-body { display: flex }` pisaba el `display:none` del atributo. */
[hidden] { display: none !important; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══ 2. TOKENS — CLARO (predeterminado, siempre) ═══════════════════════ */
:root {
  /* ── Superficies ──────────────────────────────────────────────────────
     El lienzo es blanco puro. --bg-subtle es el gris de sección alterna;
     --surface es la tarjeta (blanca sobre tinte, tintada sobre blanco). */
  --bg           : #FFFFFF;
  --bg-subtle    : #F7F9FB;
  --bg-deep      : #F1F4F8;
  --surface      : #FFFFFF;
  --surface-2    : #F7F9FB;
  --surface-3    : #EEF2F6;
  /* Bloque oscuro intencional (CTA de cierre, calculadora, código, pasos).
     OJO: este token NO se invierte en el tema oscuro — todo lo que lo usa
     pinta texto blanco encima. Si algún día se vuelve claro en dark, esos
     bloques quedan blanco sobre blanco. Ya pasó una vez. */
  --surface-inv  : #0D1420;

  /* ── Trazo ────────────────────────────────────────────────────────── */
  --border       : #E4E9EF;
  --border-2     : #D3DBE4;
  --border-strong: #B9C4D0;

  /* ── Texto — contraste verificado AA sobre blanco ─────────────────── */
  --text-1 : #0C1626;   /* titulares            — 16.8:1 */
  --text-2 : #38455C;   /* cuerpo               —  9.1:1 */
  --text-3 : #5C6B82;   /* secundario           —  5.5:1 */
  --text-4 : #8593A8;   /* terciario / meta     —  3.3:1 (solo >=16px) */
  --text-inv: #FFFFFF;

  /* ── Acento de marca: verde. Es el UNICO color de accion ──────────── */
  --accent      : #16A34A;
  --accent-hover: #15803D;
  --accent-press: #126A34;
  --accent-light: #22C55E;
  --accent-soft : #ECFAF1;
  --accent-line : #BFE9CE;
  --accent-text : #0F7038;   /* verde legible sobre blanco (AA) */
  --on-accent   : #FFFFFF;

  /* ── Secundario: azul. Informativo — datos, graficas, enlaces ─────── */
  --brand-900: #0A3D78;
  --brand-700: #0D52A0;
  --brand-500: #1A6EC5;
  --brand-400: #3D8FDF;
  --brand-soft: #EEF5FD;
  --brand-line: #C9DFF7;

  /* ── Semanticos ───────────────────────────────────────────────────── */
  --ok      : #16A34A;  --ok-soft   : #ECFAF1;  --ok-line   : #BFE9CE;
  --warn    : #B45309;  --warn-soft : #FEF6E7;  --warn-line : #F6DFAE;
  --danger  : #C62828;  --danger-soft:#FDEDED;  --danger-line:#F5C2C2;
  --amber   : #D97706;

  /* ── Tipografia ───────────────────────────────────────────────────── */
  --font-sans   : 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono   : 'JetBrains Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;

  /* ── Radios — misma escala que la app ─────────────────────────────── */
  --r-xs  : 4px;
  --r-sm  : 6px;
  --r-md  : 10px;
  --r-lg  : 14px;
  --r-xl  : 18px;
  --r-2xl : 24px;
  --r-pill: 999px;

  /* ── Sombras — suaves, en capas, jamas de color ───────────────────── */
  --sh-xs: 0 1px 2px rgba(12, 22, 38, .05);
  --sh-sm: 0 1px 3px rgba(12, 22, 38, .07), 0 1px 2px rgba(12, 22, 38, .04);
  --sh-md: 0 4px 12px -2px rgba(12, 22, 38, .09), 0 2px 4px -2px rgba(12, 22, 38, .05);
  --sh-lg: 0 12px 28px -8px rgba(12, 22, 38, .14), 0 4px 10px -4px rgba(12, 22, 38, .07);
  --sh-xl: 0 28px 60px -20px rgba(12, 22, 38, .22), 0 10px 24px -12px rgba(12, 22, 38, .10);
  --sh-in: inset 0 1px 0 rgba(255, 255, 255, .70);

  /* ── Layout ───────────────────────────────────────────────────────── */
  --wrap    : 1200px;
  --wrap-nar: 880px;
  --gutter  : 24px;
  --bar-h   : 66px;
  --prog-h  : 2px;

  /* ── Movimiento ───────────────────────────────────────────────────── */
  --tr     : .16s cubic-bezier(.2, .8, .3, 1);
  --tr-mid : .26s cubic-bezier(.2, .8, .3, 1);
  --tr-slow: .42s cubic-bezier(.2, .8, .3, 1);

  /* ── Cristal (header y modales) ───────────────────────────────────── */
  --glass    : rgba(255, 255, 255, .82);
  --glass-blur: 16px;

  color-scheme: light;
}

/* ═══ 3. TOKENS — OSCURO (opt-in) ═══════════════════════════════════════
   No se sigue `prefers-color-scheme`: el claro es el predeterminado para
   todo el mundo. El oscuro solo entra si la persona lo pide con el toggle.

   Grises NEUTROS PUROS, sin tinte azul, siguiendo la escala «Dark Theme
   Foundation» — la misma que usa el Modo Noche de la app Electron y el
   panel admin. Si un gris de aquí sale con componentes distintos entre sí
   (#0F1115 y parecidos), está mal: la escala es #101010 → #2F2F2F.
   ═════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --bg           : #111111;   /* lienzo */
  --bg-subtle    : #161616;   /* .section.alt */
  --bg-deep      : #1A1A1A;   /* .section.deep */
  --surface      : #1C1C1C;   /* tarjetas */
  --surface-2    : #202020;   /* superficie interna */
  --surface-3    : #282828;   /* hover / chips */
  /* El bloque oscuro sigue siendo oscuro: se hunde respecto al lienzo. */
  --surface-inv  : #0A0A0A;

  --border       : rgba(255, 255, 255, .07);
  --border-2     : rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .20);

  --text-1 : #F2F2F2;
  --text-2 : #C6C6C6;
  --text-3 : #9A9A9A;
  --text-4 : #6E6E6E;
  --text-inv: #111111;

  --accent      : #22C55E;
  --accent-hover: #16A34A;
  --accent-press: #12833E;
  --accent-soft : rgba(34, 197, 94, .13);
  --accent-line : rgba(34, 197, 94, .30);
  --accent-text : #4ADE80;
  --on-accent   : #06180D;

  --brand-500: #3D8FDF;
  --brand-400: #5AABF0;
  --brand-soft: rgba(61, 143, 223, .13);
  --brand-line: rgba(61, 143, 223, .28);

  --ok-soft   : rgba(34, 197, 94, .13);   --ok-line   : rgba(34, 197, 94, .28);
  --warn      : #FBBF24;
  --warn-soft : rgba(251, 191, 36, .13);  --warn-line : rgba(251, 191, 36, .28);
  --danger    : #F87171;
  --danger-soft: rgba(248, 113, 113, .13);--danger-line: rgba(248, 113, 113, .28);
  --amber     : #FBBF24;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, .48), 0 1px 2px rgba(0, 0, 0, .30);
  --sh-md: 0 4px 12px -2px rgba(0, 0, 0, .55), 0 2px 4px -2px rgba(0, 0, 0, .35);
  --sh-lg: 0 12px 28px -8px rgba(0, 0, 0, .62), 0 4px 10px -4px rgba(0, 0, 0, .40);
  --sh-xl: 0 28px 60px -20px rgba(0, 0, 0, .75), 0 10px 24px -12px rgba(0, 0, 0, .50);
  --sh-in: inset 0 1px 0 rgba(255, 255, 255, .05);

  --glass: rgba(17, 17, 17, .82);

  color-scheme: dark;
}

/* ═══ 4. BASE ═══════════════════════════════════════════════════════════ */
body {
  background: var(--bg);
  color      : var(--text-2);
  font-family: var(--font-sans);
  font-size  : 16px;
  line-height: 1.6;
  min-height : 100vh;
  padding-top: calc(var(--bar-h) + var(--prog-h));
  overflow-x : hidden;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--tr-mid), color var(--tr-mid);
}
body.is-locked { overflow: hidden; }

::selection { background: var(--accent); color: var(--on-accent); }

/* Barra de scroll discreta — igual que en la app */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border: 3px solid var(--bg);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ═══ 5. TIPOGRAFIA ═════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color      : var(--text-1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.021em;
}
h1 { font-size: clamp(2.25rem, 1.55rem + 2.9vw, 3.75rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);  letter-spacing: -.028em; }
h3 { font-size: clamp(1.2rem, 1.08rem + .55vw, 1.5rem); }
h4 { font-size: 1.0625rem; letter-spacing: -.014em; }
p  { color: var(--text-2); }
strong, b { color: var(--text-1); font-weight: 650; }
em { font-style: normal; }

.mono { font-family: var(--font-mono); font-feature-settings: 'zero'; }
.tnum { font-variant-numeric: tabular-nums; }

/* Enlace dentro de texto corrido — azul informativo, subrayado sutil */
.prose a, a.link {
  color: var(--brand-500);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-color: var(--brand-line);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--tr), color var(--tr);
}
.prose a:hover, a.link:hover {
  color: var(--brand-700);
  text-decoration-color: currentColor;
}

/* ═══ 6. LAYOUT ═════════════════════════════════════════════════════════ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-nar); }

.section { padding: clamp(64px, 7vw, 108px) 0; position: relative; }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }

/* Alternancia de fondo. Nunca dos tintes seguidos. */
.section.alt {
  background: var(--bg-subtle);
  border-block: 1px solid var(--border);
}
.section.deep {
  background: var(--bg-deep);
  border-block: 1px solid var(--border);
}

/* Encabezado de seccion — el patron que abre casi todas las secciones */
.sec-hdr { max-width: 720px; margin-bottom: clamp(36px, 4vw, 56px); }
.sec-hdr.center { margin-inline: auto; text-align: center; }

.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.sec-label::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.sec-hdr.center .sec-label { justify-content: center; }

.sec-title { margin-bottom: 14px; }
.sec-sub {
  font-size: 1.0625rem;
  color: var(--text-3);
  line-height: 1.7;
  max-width: 64ch;
}
.sec-hdr.center .sec-sub { margin-inline: auto; }

/* Rejillas reutilizables */
.grid    { display: grid; gap: 20px; }
.grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Malla de fondo — se usa detras del hero y de bloques destacados.
   Es decorativa: baja opacidad, sin interaccion. */
.mesh { position: relative; isolation: isolate; }
.mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  opacity: .85;
  pointer-events: none;
}
/* Halo suave de marca — el unico gradiente de color del sistema */
.halo { position: relative; isolation: isolate; }
.halo::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -220px;
  left: 50%;
  width: min(1100px, 100%);   /* nunca mas ancho que el viewport: si no, el documento reporta scroll horizontal fantasma */
  height: 620px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 46% 52% at 32% 42%, rgba(22, 163, 74, .10), transparent 68%),
    radial-gradient(ellipse 44% 48% at 72% 34%, rgba(26, 110, 197, .085), transparent 66%);
  pointer-events: none;
  filter: blur(6px);
}
:root[data-theme="dark"] .halo::after {
  background:
    radial-gradient(ellipse 46% 52% at 32% 42%, rgba(34, 197, 94, .13), transparent 68%),
    radial-gradient(ellipse 44% 48% at 72% 34%, rgba(61, 143, 223, .11), transparent 66%);
}

/* ═══ 7. BOTONES ════════════════════════════════════════════════════════
   Sin brillo, sin glow. Cambio de tono + 1px de elevacion. Nada mas.
   ═════════════════════════════════════════════════════════════════════ */
/* La base se aplica también a cada variante por separado: el checkout
   server-rendered (routes/wompi.js) escribe `class="btn-p btn--lg"` sin la
   clase base, y así no hay que sincronizar dos repositorios de markup. */
.btn,
.btn-p, .btn-s, .btn-ol, .btn-gh, .btn-sl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.006em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--tr), border-color var(--tr),
              color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.btn svg, .btn-p svg, .btn-s svg, .btn-ol svg, .btn-gh svg, .btn-sl svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(0); }

/* Primario — accion principal, uno por vista */
.btn-p {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--sh-sm);
}
.btn-p:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-p:active { background: var(--accent-press); box-shadow: var(--sh-xs); }

/* Secundario — misma jerarquia visual, menos peso */
.btn-s {
  background: var(--surface);
  color: var(--text-1);
  border-color: var(--border-2);
  box-shadow: var(--sh-xs);
}
.btn-s:hover { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-1px); }

/* Contorno / fantasma */
.btn-ol {
  background: transparent;
  color: var(--text-1);
  border-color: var(--border-2);
}
.btn-ol:hover { background: var(--surface-2); border-color: var(--border-strong); }

.btn-gh { background: transparent; color: var(--text-2); }
.btn-gh:hover { background: var(--surface-3); color: var(--text-1); }

/* Sobre fondo oscuro (bloques .on-dark) */
.btn-sl {
  background: rgba(255, 255, 255, .10);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}
.btn-sl:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); transform: translateY(-1px); }

/* Tamanos */
.btn--sm { padding: 8px 13px; font-size: .8125rem; border-radius: var(--r-sm); gap: 7px; }
.btn--sm svg { width: 15px; height: 15px; }
.btn--lg { padding: 15px 26px; font-size: 1rem; border-radius: var(--r-lg); }
.btn--lg svg { width: 19px; height: 19px; }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-busy { opacity: .55; pointer-events: none; }

/* Grupo de acciones */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row.center { justify-content: center; }

/* Enlace con flecha que se desplaza al pasar el cursor */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--accent-text);
  transition: gap var(--tr), color var(--tr);
}
.arrow-link svg { width: 16px; height: 16px; transition: transform var(--tr); }
.arrow-link:hover { color: var(--accent-hover); gap: 11px; }

/* ═══ 8. INSIGNIAS, PILDORAS Y ETIQUETAS ════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
}
.badge svg { width: 13px; height: 13px; }
.badge--ok    { background: var(--ok-soft);    border-color: var(--ok-line);    color: var(--accent-text); }
.badge--info  { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-700); }
.badge--warn  { background: var(--warn-soft);  border-color: var(--warn-line);  color: var(--warn); }
.badge--solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Punto de estado que late — para "en linea" / "activo" */
.dot-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  position: relative;
}
.dot-live::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: pulse-ring 2.4s cubic-bezier(.2,.8,.3,1) infinite;
}
@keyframes pulse-ring {
  0%   { opacity: .7; transform: scale(.6); }
  70%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* Pildora del eyebrow del hero */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  font-size: .8125rem;
  font-weight: 550;
  color: var(--text-2);
}
.eyebrow b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: .8125rem;
  font-weight: 550;
  transition: border-color var(--tr), background var(--tr), color var(--tr);
}
.chip svg { width: 14px; height: 14px; color: var(--text-4); }
a.chip:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
a.chip:hover svg { color: var(--accent); }

/* ═══ 9. TARJETAS ═══════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color var(--tr-mid), box-shadow var(--tr-mid), transform var(--tr-mid);
}
.card--pad { padding: 30px; }
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--sh-sm); }
.card--hover:hover {
  border-color: var(--border-2);
  box-shadow: var(--sh-lg);
  transform: translateY(-3px);
}
.section.alt .card, .section.deep .card { background: var(--surface); }

/* Icono cuadrado de tarjeta — el patron visual repetido del sitio */
.ico-box {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.ico-box svg { width: 20px; height: 20px; }
.ico-box--accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.ico-box--brand  { background: var(--brand-soft);  border-color: var(--brand-line);  color: var(--brand-700); }
.ico-box--warn   { background: var(--warn-soft);   border-color: var(--warn-line);   color: var(--warn); }
.ico-box--solid  { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ico-box--lg { width: 52px; height: 52px; border-radius: var(--r-lg); }
.ico-box--lg svg { width: 24px; height: 24px; }

/* Titulo + descripcion dentro de una tarjeta */
.card h3, .card h4 { margin-bottom: 8px; }
.card p { font-size: .9375rem; color: var(--text-3); line-height: 1.65; }

/* Bloque oscuro intencional — CTA final, cifras destacadas.
   Es oscuro en LOS DOS temas: todo lo que va adentro pinta texto blanco.
   Nunca hacer que `--surface-inv` se vuelva claro en dark. */
.on-dark {
  background: var(--surface-inv);
  color: rgba(255, 255, 255, .78);
  border-radius: var(--r-2xl);
  border: 1px solid rgba(255, 255, 255, .07);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
:root[data-theme="dark"] .on-dark { border-color: rgba(255, 255, 255, .10); }
.on-dark h2, .on-dark h3, .on-dark h4, .on-dark strong { color: #FFFFFF; }
.on-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 60% at 18% 0%, rgba(22, 163, 74, .26), transparent 62%),
    radial-gradient(ellipse 45% 55% at 88% 100%, rgba(26, 110, 197, .22), transparent 60%);
  pointer-events: none;
}
.on-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 78%);
  pointer-events: none;
}

/* ═══ 10. HEADER ════════════════════════════════════════════════════════ */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
}
.hdr-bar {
  height: var(--bar-h);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tr-mid), box-shadow var(--tr-mid), background var(--tr-mid);
}
.hdr.is-scrolled .hdr-bar {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 20px -6px rgba(12, 22, 38, .12);
}
:root[data-theme="dark"] .hdr.is-scrolled .hdr-bar { box-shadow: 0 1px 20px -6px rgba(0, 0, 0, .6); }

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Marca */
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent-light), var(--accent-hover));
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.03em;
  box-shadow: var(--sh-sm);
  flex-shrink: 0;
}
.brand-mark svg { width: 17px; height: 17px; }
.brand-mark-img { width: 19px; height: 19px; object-fit: contain; display: block; }
.brand-txt {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: -.028em;
  color: var(--text-1);
  white-space: nowrap;
}
.brand-txt em { color: var(--accent-text); font-weight: 750; }

/* Enlaces de escritorio */
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-a {
  padding: 8px 13px;
  border-radius: var(--r-sm);
  font-size: .9063rem;
  font-weight: 550;
  color: var(--text-3);
  transition: color var(--tr), background var(--tr);
  white-space: nowrap;
}
.nav-a:hover { color: var(--text-1); background: var(--surface-3); }
.nav-a.active { color: var(--text-1); font-weight: 600; }

.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
  border: 1px solid transparent;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text-1); }
.icon-btn svg { width: 18px; height: 18px; }

/* Toggle de tema: se muestra el icono del tema al que se cambiaria */
.ico-sun  { display: none; }
:root[data-theme="dark"] .ico-moon { display: none; }
:root[data-theme="dark"] .ico-sun  { display: block; }

.nav-cta {
  background: var(--accent);
  color: var(--on-accent) !important;
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  box-shadow: var(--sh-sm);
  transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
}
.nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--sh-md); }

.nav-burger { display: none; }
.burger-box { width: 17px; height: 12px; position: relative; }
.burger-box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--tr-mid), opacity var(--tr);
}
.burger-box span:nth-child(1) { top: 0; }
.burger-box span:nth-child(2) { top: 5.1px; }
.burger-box span:nth-child(3) { top: 10.2px; }
.nav-burger[aria-expanded="true"] .burger-box span:nth-child(1) { transform: translateY(5.1px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-box span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-box span:nth-child(3) { transform: translateY(-5.1px) rotate(-45deg); }

/* Barra de progreso de lectura */
.hdr-prog { height: var(--prog-h); background: transparent; }
.hdr-prog span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transition: width .1s linear;
}

/* Menu movil */
.nav-mobile {
  display: none;
  overflow: hidden;
  max-height: 0;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: max-height var(--tr-slow), border-color var(--tr);
}
.nav-mobile.open { max-height: 460px; border-bottom-color: var(--border); box-shadow: var(--sh-lg); }
.nav-mobile-pad { padding: 12px var(--gutter) 20px; display: flex; flex-direction: column; gap: 2px; }
.nav-mobile .nav-a { padding: 12px 12px; font-size: 1rem; border-radius: var(--r-md); }
.nav-mobile .nav-cta { margin-top: 10px; text-align: center; padding: 13px; }

@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .nav-mobile { display: block; }
  .nav-dl { display: none; }
}

/* ═══ 11. FOOTER ════════════════════════════════════════════════════════ */
.footer {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  padding: clamp(48px, 5vw, 72px) 0 28px;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 40px 28px;
  padding-bottom: 40px;
}
.footer-brand p {
  font-size: .875rem;
  color: var(--text-3);
  line-height: 1.7;
  margin: 14px 0 18px;
  max-width: 34ch;
}
.footer-contact { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.footer-contact a {
  font-size: .875rem;
  font-weight: 550;
  color: var(--text-2);
  transition: color var(--tr);
}
.footer-contact a:hover { color: var(--accent-text); }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
  transition: color var(--tr), border-color var(--tr), transform var(--tr);
}
.footer-social a:hover { color: var(--accent-text); border-color: var(--accent-line); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; }

.footer-col h4 {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: .875rem;
  color: var(--text-3);
  padding: 5px 0;
  transition: color var(--tr), padding-left var(--tr);
}
.footer-col a:hover { color: var(--text-1); padding-left: 3px; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copy { font-size: .8125rem; color: var(--text-4); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { font-size: .8125rem; color: var(--text-4); transition: color var(--tr); }
.footer-links a:hover { color: var(--text-2); }

@media (max-width: 940px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } }

/* ═══ 12. VOLVER ARRIBA ═════════════════════════════════════════════════ */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 96px;
  z-index: 700;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--tr-mid), transform var(--tr-mid), visibility var(--tr-mid), color var(--tr);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { color: var(--accent-text); border-color: var(--accent-line); }
.to-top svg { width: 17px; height: 17px; }

/* ═══ 13. REVELADO AL HACER SCROLL ══════════════════════════════════════ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--tr-slow), transform var(--tr-slow);
  will-change: opacity, transform;
}
.js [data-reveal].in { opacity: 1; transform: none; }

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

/* ═══ 14. FORMULARIOS ═══════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label, .lbl {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
}
.input, .textarea, .select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-1);
  font-size: .9375rem;
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--text-4); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input.is-err, .textarea.is-err { border-color: var(--danger); }
.select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B82' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.form-err {
  font-size: .8125rem;
  color: var(--danger);
  min-height: 18px;
}
.form-ok {
  font-size: .8125rem;
  color: var(--accent-text);
  font-weight: 550;
}
.hint { font-size: .8125rem; color: var(--text-4); }

/* Checkbox oscuro — nunca el control nativo claro del navegador */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: .875rem;
  color: var(--text-3);
  line-height: 1.5;
}
.check input {
  appearance: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  border-radius: var(--r-xs);
  border: 1.5px solid var(--border-strong);
  background: var(--surface-3);
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr);
  position: relative;
}
.check input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.check input:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1.5px;
  width: 5px; height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ═══ 15. TABLAS ════════════════════════════════════════════════════════ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table.tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
table.tbl th {
  text-align: left;
  padding: 13px 18px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.tbl td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
}
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background var(--tr); }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td strong, table.tbl th:first-child { color: var(--text-1); }

/* Marcas de si / no en tablas comparativas */
.cmp-y, .cmp-n {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: .8125rem;
  font-weight: 700;
  flex-shrink: 0;
}
.cmp-y { background: var(--ok-soft); color: var(--accent-text); border: 1px solid var(--ok-line); }
.cmp-n { background: var(--surface-3); color: var(--text-4); border: 1px solid var(--border); }
.cmp-txt { display: inline-flex; align-items: center; gap: 9px; }

/* ═══ 16. FAQ ═══════════════════════════════════════════════════════════ */
.faq-list {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.0313rem;
  font-weight: 600;
  letter-spacing: -.016em;
  color: var(--text-1);
  transition: background var(--tr), color var(--tr);
}
.faq-btn:hover { background: var(--surface-2); }
.faq-ico {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  color: var(--text-3);
  transition: transform var(--tr-mid), background var(--tr), color var(--tr), border-color var(--tr);
}
.faq-ico svg { width: 13px; height: 13px; }
.faq-item.open .faq-btn { color: var(--accent-text); }
.faq-item.open .faq-ico {
  transform: rotate(180deg);
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
}
.faq-ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--tr-slow);
}
.faq-item.open .faq-ans { max-height: 520px; }
.faq-ans p {
  padding: 0 22px 21px;
  font-size: .9375rem;
  color: var(--text-3);
  line-height: 1.75;
  max-width: 78ch;
}

/* ═══ 17. PRECIOS ═══════════════════════════════════════════════════════ */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 24px 24px;
  transition: border-color var(--tr-mid), box-shadow var(--tr-mid), transform var(--tr-mid);
}
.price-card:hover { border-color: var(--border-2); box-shadow: var(--sh-lg); transform: translateY(-3px); }
/* Plan destacado */
.price-card.ft {
  border-color: var(--accent);
  box-shadow: var(--sh-lg), 0 0 0 1px var(--accent);
}
.price-card.ft:hover { box-shadow: var(--sh-xl), 0 0 0 1px var(--accent); }
.price-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 13px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
}
.price-plan {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--text-1);
  margin-bottom: 4px;
}
.price-note { font-size: .8125rem; color: var(--text-4); margin-bottom: 18px; }
.price-val {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--text-1);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.price-val small { font-size: .9375rem; font-weight: 600; color: var(--text-4); letter-spacing: 0; }
.price-per { font-size: .8125rem; color: var(--text-4); margin-top: 6px; }
.plan-ahorro {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
  font-size: .75rem;
  font-weight: 650;
}
.price-feats {
  margin: 20px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.price-feats li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .875rem;
  color: var(--text-3);
  line-height: 1.5;
}
.price-feats li svg { width: 15px; height: 15px; margin-top: 2px; color: var(--accent); flex-shrink: 0; }
.price-feats li.off { color: var(--text-4); }
.price-feats li.off svg { color: var(--text-4); opacity: .6; }
.btn-plan { width: 100%; }
.wompi-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 11px;
  font-size: .75rem;
  color: var(--text-4);
}
.wompi-badge svg { width: 12px; height: 12px; }

/* ═══ 18. ESTADISTICAS ══════════════════════════════════════════════════ */
.stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  background: var(--surface);
  padding: 26px 22px;
  text-align: center;
}
.stat-v {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.stat-v em { color: var(--accent-text); }
.stat-l {
  font-size: .8125rem;
  color: var(--text-4);
  margin-top: 7px;
  font-weight: 500;
}

/* ═══ 19. PROSA / PAGINAS LEGALES Y DOCUMENTACION ═══════════════════════ */
.prose { max-width: 76ch; }
.prose h2 { font-size: 1.5rem; margin: 42px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.125rem; margin: 30px 0 10px; }
.prose p, .prose li { font-size: .9688rem; line-height: 1.8; color: var(--text-2); }
.prose p { margin-bottom: 15px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 4px; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.prose ol { counter-reset: n; }
.prose ol li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 9px;
  counter-increment: n;
}
.prose ol li::before {
  content: counter(n);
  position: absolute;
  left: 0; top: 2px;
  width: 21px; height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
  font-size: .6875rem;
  font-weight: 700;
}
.prose code {
  font-family: var(--font-mono);
  font-size: .875em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-1);
}
.prose pre {
  background: var(--surface-inv);
  color: #E6EDF3;
  border-radius: var(--r-lg);
  padding: 18px 20px;
  overflow-x: auto;
  margin-bottom: 18px;
  font-size: .8125rem;
  line-height: 1.65;
}
.prose pre code { background: none; border: none; padding: 0; color: inherit; }
.prose blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.prose blockquote p { margin: 0; color: var(--text-2); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 34px 0; }

/* ═══ 20. NOTAS / CALLOUTS ══════════════════════════════════════════════ */
.note {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .9063rem;
  line-height: 1.65;
  color: var(--text-2);
}
.note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--text-4); }
.note--ok   { background: var(--ok-soft);    border-color: var(--ok-line); }
.note--ok svg { color: var(--accent); }
.note--info { background: var(--brand-soft); border-color: var(--brand-line); }
.note--info svg { color: var(--brand-500); }
.note--warn { background: var(--warn-soft);  border-color: var(--warn-line); }
.note--warn svg { color: var(--warn); }

/* ═══ 21. 404 ═══════════════════════════════════════════════════════════ */
.nf { text-align: center; padding: 120px 0 140px; }
.nf-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--text-1);
  margin-bottom: 12px;
}
.nf p { color: var(--text-3); margin-bottom: 26px; font-size: 1.0625rem; }

/* ═══ 22. UTILIDADES ════════════════════════════════════════════════════ */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.muted { color: var(--text-4); }
.divider { height: 1px; background: var(--border); border: none; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PARTE 2 — COMPONENTES DE PRODUCTO
   Vista previa de la app, widgets, modales, resenas y utilidades de vista.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 23. VISTA PREVIA DE LA APP — "SHOT" ═══════════════════════════════
   Reconstruccion fiel de la interfaz real de YilmerPOS hecha en HTML/CSS
   con los MISMOS tokens que usa la app Electron (renderer/src/styles/
   tokens.css). No es una imagen: es vectorial, pesa cero, se ve nitida en
   cualquier pantalla y respeta el tema que elija la persona.

   Si algun dia cambian los tokens de la app, hay que reflejarlo aqui.
   ═════════════════════════════════════════════════════════════════════ */

/* Tokens de la app, encapsulados. Predeterminado: Modo Noche (#111),
   que es como arranca la app instalada. */
.ui {
  --u-bg      : #111111;
  --u-surface : #161616;
  --u-surface2: #1C1C1C;
  --u-side    : #101010;
  --u-top     : #111111;
  --u-border  : rgba(255, 255, 255, .07);
  --u-border2 : rgba(255, 255, 255, .11);
  --u-t1      : #E8EAF0;
  --u-t2      : #9A9CA8;
  --u-t3      : #6E7280;
  --u-t4      : #4B4F5C;
  --u-acc     : #16A34A;
  --u-acc-l   : #22C55E;
  --u-acc-dim : rgba(22, 163, 74, .14);
  --u-blue    : #3D8FDF;
  --u-blue-dim: rgba(61, 143, 223, .14);
  --u-amber   : #F59E0B;
  --u-amber-dim: rgba(245, 158, 11, .14);
  --u-red     : #EF4444;
  --u-red-dim : rgba(239, 68, 68, .14);
  --u-glass   : rgba(255, 255, 255, .04);
}
/* Modo claro de la app — los mismos valores de [data-theme="light"] */
.ui[data-ui="light"] {
  --u-bg      : #F3F6FA;
  --u-surface : #FFFFFF;
  --u-surface2: #F0F4F9;
  --u-side    : #FFFFFF;
  --u-top     : #FFFFFF;
  --u-border  : rgba(0, 0, 0, .09);
  --u-border2 : rgba(0, 0, 0, .14);
  --u-t1      : #0E1B2D;
  --u-t2      : #2A3C55;
  --u-t3      : #496480;
  --u-t4      : #677893;
  --u-acc-dim : rgba(22, 163, 74, .12);
  --u-blue-dim: rgba(26, 110, 197, .12);
  --u-amber-dim: rgba(245, 158, 11, .13);
  --u-red-dim : rgba(239, 68, 68, .11);
  --u-glass   : rgba(0, 0, 0, .03);
}

/* ── Marco de ventana de escritorio ─────────────────────────────────── */
.shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--sh-xl);
  position: relative;
  isolation: isolate;
}
:root[data-theme="dark"] .shot { border-color: var(--border-2); }

.shot-bar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.shot-dots { display: flex; gap: 6px; }
.shot-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.shot-dots i:nth-child(1) { background: #FF5F57; }
.shot-dots i:nth-child(2) { background: #FEBC2E; }
.shot-dots i:nth-child(3) { background: #28C840; }
.shot-title {
  flex: 1;
  text-align: center;
  font-size: .75rem;
  font-weight: 550;
  color: var(--text-4);
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shot-tag {
  font-family: var(--font-mono);
  font-size: .625rem;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
  flex-shrink: 0;
}

/* ── Cuerpo: shell de la app ────────────────────────────────────────── */
.ui-shell {
  display: grid;
  grid-template-columns: 152px 1fr;
  background: var(--u-bg);
  min-height: 372px;
  font-size: 11px;
  line-height: 1.45;
}

/* Sidebar */
.ui-side {
  background: var(--u-side);
  border-right: 1px solid var(--u-border);
  padding: 0 0 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.ui-side::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--u-acc) 58%, transparent);
  opacity: .55;
}
.ui-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 11px 12px;
  border-bottom: 1px solid var(--u-border);
}
.ui-brand-ico {
  width: 25px; height: 25px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--u-acc-l), #15803D);
  color: #FFFFFF;
  flex-shrink: 0;
}
.ui-brand-ico svg { width: 13px; height: 13px; }
.ui-brand-name { font-size: 10.5px; font-weight: 800; color: var(--u-t1); letter-spacing: -.01em; line-height: 1.1; }
.ui-brand-sub { font-size: 7.5px; font-weight: 600; color: var(--u-t4); letter-spacing: .09em; text-transform: uppercase; margin-top: 2px; }

.ui-nav { padding: 7px 7px 0; display: flex; flex-direction: column; gap: 1px; }
.ui-nav-group {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--u-t4);
  padding: 9px 7px 3px;
}
.ui-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--u-t2);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.ui-link svg { width: 12px; height: 12px; opacity: .8; flex-shrink: 0; }
.ui-link.on {
  background: var(--u-acc-dim);
  color: var(--u-acc-l);
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--u-acc);
}
.ui[data-ui="light"] .ui-link.on { color: #15803D; }
.ui-link.on svg { opacity: 1; }

/* Topbar */
.ui-main { display: flex; flex-direction: column; min-width: 0; }
.ui-top {
  height: 38px;
  background: var(--u-top);
  border-bottom: 1px solid var(--u-border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  flex-shrink: 0;
}
.ui-crumb { font-size: 11px; font-weight: 650; color: var(--u-t1); letter-spacing: -.01em; }
.ui-search {
  flex: 1;
  max-width: 210px;
  height: 22px;
  border-radius: 6px;
  background: var(--u-glass);
  border: 1px solid var(--u-border);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 9.5px;
  color: var(--u-t4);
}
.ui-search svg { width: 10px; height: 10px; }
.ui-top-right { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 650;
  background: var(--u-acc-dim);
  color: var(--u-acc-l);
  border: 1px solid rgba(22, 163, 74, .28);
}
.ui[data-ui="light"] .ui-pill { color: #15803D; }
.ui-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: block; }
.ui-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--u-blue-dim);
  color: var(--u-blue);
  font-size: 8.5px;
  font-weight: 800;
  border: 1px solid var(--u-border2);
}

/* Contenido */
.ui-content { padding: 13px; overflow: hidden; }
.ui-h {
  font-size: 12px;
  font-weight: 700;
  color: var(--u-t1);
  letter-spacing: -.015em;
  margin-bottom: 2px;
}
.ui-sub { font-size: 9.5px; color: var(--u-t3); margin-bottom: 11px; }
.ui-sect {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--u-t4);
  margin: 13px 0 7px;
}
.ui-sect:first-child { margin-top: 0; }

/* KPI cards */
.ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ui-kpi {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 9px;
  padding: 9px 10px;
  position: relative;
  overflow: hidden;
}
.ui-kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--k, var(--u-acc));
}
.ui-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ui-kpi-l { font-size: 8.5px; color: var(--u-t3); font-weight: 500; }
.ui-kpi-i {
  width: 17px; height: 17px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--kd, var(--u-acc-dim));
  color: var(--k, var(--u-acc));
}
.ui-kpi-i svg { width: 9px; height: 9px; }
.ui-kpi-v {
  font-size: 14px;
  font-weight: 800;
  color: var(--u-t1);
  letter-spacing: -.03em;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.ui-kpi-d { font-size: 8px; color: var(--u-acc-l); font-weight: 600; margin-top: 2px; }
.ui[data-ui="light"] .ui-kpi-d { color: #15803D; }
.ui-kpi-d.down { color: var(--u-red); }

/* Fila de tarjetas: grafica + lista */
.ui-row { display: grid; grid-template-columns: 1.45fr 1fr; gap: 8px; }
.ui-card {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 9px;
  padding: 10px 11px;
  min-width: 0;
}
.ui-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
.ui-card-t { font-size: 9.5px; font-weight: 700; color: var(--u-t1); letter-spacing: -.01em; }
.ui-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 6px;
  background: var(--u-glass);
  border: 1px solid var(--u-border);
  gap: 1px;
}
.ui-seg span {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 600;
  color: var(--u-t3);
}
.ui-seg span.on { background: var(--u-surface2); color: var(--u-t1); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }

/* Grafica de barras — puro CSS, sin canvas */
.ui-chart {
  height: 88px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding-top: 4px;
}
.ui-chart i {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--u-acc-l), var(--u-acc));
  opacity: .92;
  display: block;
  min-height: 4px;
  animation: ui-grow .9s cubic-bezier(.2, .8, .3, 1) backwards;
}
.ui-chart i:nth-child(7) { background: linear-gradient(180deg, var(--u-blue), #1A6EC5); }
@keyframes ui-grow { from { transform: scaleY(.05); transform-origin: bottom; opacity: 0; } }
.ui-chart-x { display: flex; gap: 5px; margin-top: 5px; }
.ui-chart-x span { flex: 1; text-align: center; font-size: 7.5px; color: var(--u-t4); }

/* Lista top productos */
.ui-list { display: flex; flex-direction: column; gap: 1px; }
.ui-li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid var(--u-border);
}
.ui-li:last-child { border-bottom: none; }
.ui-li-n {
  width: 15px; height: 15px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: var(--u-glass);
  border: 1px solid var(--u-border);
  font-size: 7.5px;
  font-weight: 800;
  color: var(--u-t3);
  flex-shrink: 0;
}
.ui-li:nth-child(1) .ui-li-n { background: var(--u-acc-dim); color: var(--u-acc-l); border-color: rgba(22, 163, 74, .3); }
.ui-li-t { flex: 1; font-size: 9px; color: var(--u-t2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-li-v { font-size: 9px; font-weight: 700; color: var(--u-t1); font-variant-numeric: tabular-nums; }

/* Alertas */
.ui-alert {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 550;
}
.ui-alert i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: block; }
.ui-alert--amber { background: var(--u-amber-dim); color: var(--u-amber); }
.ui-alert--amber i { background: var(--u-amber); }
.ui-alert--red { background: var(--u-red-dim); color: var(--u-red); }
.ui-alert--red i { background: var(--u-red); }
.ui-alert b { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Tabla dentro de la app */
.ui-tbl { width: 100%; border-collapse: collapse; font-size: 9px; }
.ui-tbl th {
  text-align: left;
  padding: 5px 7px;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--u-t4);
  border-bottom: 1px solid var(--u-border);
}
.ui-tbl td { padding: 6px 7px; border-bottom: 1px solid var(--u-border); color: var(--u-t2); }
.ui-tbl tr:last-child td { border-bottom: none; }
.ui-tbl td b { color: var(--u-t1); font-weight: 650; }
.ui-tag {
  display: inline-block;
  padding: 1.5px 6px;
  border-radius: 999px;
  font-size: 7.5px;
  font-weight: 700;
}
.ui-tag--ok { background: var(--u-acc-dim); color: var(--u-acc-l); }
.ui[data-ui="light"] .ui-tag--ok { color: #15803D; }
.ui-tag--warn { background: var(--u-amber-dim); color: var(--u-amber); }
.ui-tag--red  { background: var(--u-red-dim);   color: var(--u-red); }

/* Panel de cobro (modulo caja) */
.ui-pos { display: grid; grid-template-columns: 1fr 168px; gap: 8px; }
.ui-scan {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--u-glass);
  border: 1px dashed var(--u-border2);
  font-size: 9px;
  color: var(--u-t3);
  margin-bottom: 8px;
}
.ui-scan svg { width: 11px; height: 11px; color: var(--u-acc); }
.ui-cart { display: flex; flex-direction: column; gap: 5px; }
.ui-cart-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
}
.ui-cart-q {
  width: 17px; height: 17px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--u-acc-dim);
  color: var(--u-acc-l);
  font-size: 8px;
  font-weight: 800;
  flex-shrink: 0;
}
.ui[data-ui="light"] .ui-cart-q { color: #15803D; }
.ui-cart-t { flex: 1; font-size: 9px; color: var(--u-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-cart-p { font-size: 9px; font-weight: 700; color: var(--u-t1); font-variant-numeric: tabular-nums; }
.ui-total {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 9px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ui-total-row { display: flex; justify-content: space-between; font-size: 9px; color: var(--u-t3); }
.ui-total-big {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 7px;
  border-top: 1px solid var(--u-border);
}
.ui-total-big span { font-size: 9px; color: var(--u-t3); }
.ui-total-big b { font-size: 15px; font-weight: 800; color: var(--u-t1); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ui-pay {
  height: 26px;
  border-radius: 7px;
  background: var(--u-acc);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-weight: 700;
  margin-top: 2px;
}
.ui-pays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ui-pays span {
  height: 20px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--u-glass);
  border: 1px solid var(--u-border);
  font-size: 7.5px;
  font-weight: 600;
  color: var(--u-t3);
}
.ui-pays span.on { background: var(--u-acc-dim); border-color: rgba(22,163,74,.3); color: var(--u-acc-l); }
.ui[data-ui="light"] .ui-pays span.on { color: #15803D; }

/* ── Selector de tema de la vista previa ────────────────────────────── */
.shot-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.shot-switch button {
  padding: 5px 13px;
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-3);
  transition: background var(--tr), color var(--tr);
}
.shot-switch button.on { background: var(--surface); color: var(--text-1); box-shadow: var(--sh-xs); }

/* ── Telefono (PWA) ─────────────────────────────────────────────────── */
.phone {
  width: 208px;
  border-radius: 30px;
  padding: 8px;
  background: linear-gradient(160deg, #2B303B, #14171E);
  box-shadow: var(--sh-xl), inset 0 0 0 1px rgba(255, 255, 255, .10);
  flex-shrink: 0;
  position: relative;
}
.phone::before {
  content: '';
  position: absolute;
  top: 15px; left: 50%;
  transform: translateX(-50%);
  width: 62px; height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  z-index: 3;
}
.phone-screen {
  border-radius: 23px;
  overflow: hidden;
  background: var(--u-bg, #F3F6FA);
  aspect-ratio: 200 / 400;
  display: flex;
  flex-direction: column;
}
.mob { display: flex; flex-direction: column; height: 100%; font-size: 10px; }
.mob-top {
  padding: 24px 13px 11px;
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-border);
}
.mob-hi { font-size: 8.5px; color: var(--u-t3); }
.mob-name { font-size: 12px; font-weight: 750; color: var(--u-t1); letter-spacing: -.02em; }
.mob-body { flex: 1; padding: 11px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.mob-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mob-kpi {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 9px;
  padding: 8px 9px;
}
.mob-kpi-l { font-size: 7.5px; color: var(--u-t3); }
.mob-kpi-v { font-size: 12px; font-weight: 800; color: var(--u-t1); letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mob-card {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 9px;
  padding: 9px;
  flex: 1;
  min-height: 0;
}
.mob-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--u-border);
  background: var(--u-surface);
  padding: 7px 0 11px;
}
.mob-nav span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 7px;
  color: var(--u-t4);
  font-weight: 600;
}
.mob-nav span svg { width: 13px; height: 13px; }
.mob-nav span.on { color: var(--u-acc); }
.ui[data-ui="light"] .mob-nav span.on { color: #15803D; }

/* ═══ 24. TIRA DE CONFIANZA ═════════════════════════════════════════════ */
.trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 48px);
  flex-wrap: wrap;
  padding: 22px 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: -.005em;
}
.trust-item svg { width: 17px; height: 17px; color: var(--text-4); }
.trust-sep { width: 1px; height: 20px; background: var(--border); }
@media (max-width: 720px) { .trust-sep { display: none; } }

/* ═══ 25. BENTO — REJILLA DE CAPACIDADES ════════════════════════════════ */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.bento-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color var(--tr-mid), box-shadow var(--tr-mid), transform var(--tr-mid);
  position: relative;
  overflow: hidden;
}
.bento-card:hover { border-color: var(--border-2); box-shadow: var(--sh-lg); transform: translateY(-3px); }
.bento-card.w3 { grid-column: span 3; }
.bento-card.w4 { grid-column: span 4; }
.bento-card.w6 { grid-column: span 6; }
.bc-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--text-1);
}
.bc-body { font-size: .9063rem; color: var(--text-3); line-height: 1.65; }
.bc-list { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: 4px; }
.bc-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8438rem;
  color: var(--text-3);
}
.bc-list li svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento-card, .bento-card.w3 { grid-column: span 2; }
  .bento-card.w4, .bento-card.w6 { grid-column: span 4; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-card, .bento-card.w3, .bento-card.w4, .bento-card.w6 { grid-column: span 1; }
}

/* ═══ 26. FILAS DE FUNCION ALTERNADAS ═══════════════════════════════════ */
.frow {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.frow + .frow { margin-top: clamp(56px, 7vw, 96px); }
.frow.flip .frow-media { order: -1; }
.frow-txt h3 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); margin: 12px 0 14px; letter-spacing: -.028em; }
.frow-txt p { font-size: 1rem; line-height: 1.75; color: var(--text-3); }
.frow-list { display: flex; flex-direction: column; gap: 11px; margin-top: 22px; }
.frow-list li { display: flex; gap: 11px; align-items: flex-start; font-size: .9375rem; color: var(--text-2); }
.frow-list li svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.frow-list li b { display: block; color: var(--text-1); font-weight: 600; }
.frow-list li span { color: var(--text-3); font-size: .875rem; }
@media (max-width: 900px) {
  .frow { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .frow.flip .frow-media { order: 0; }
}

/* ═══ 27. PASOS ═════════════════════════════════════════════════════════ */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.step {
  position: relative;
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  counter-increment: s;
}
.step-num {
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--surface-inv);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.step h4 { margin-bottom: 7px; font-size: 1.0625rem; }
.step p { font-size: .9063rem; color: var(--text-3); line-height: 1.65; }
/* Conector entre pasos */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 43px;
  right: -20px;
  width: 20px;
  height: 1px;
  background: var(--border-2);
}
@media (max-width: 860px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step:not(:last-child)::after { display: none; }
}

/* ═══ 27b. LINEA DE TIEMPO ══════════════════════════════════════════════
   El recorrido vertical con el hilo y los puntos. Nació en /nosotros («El
   camino») y se promovió a componente para reusarlo en el home.
   Marcar el hito en curso con `.now`.
   ═════════════════════════════════════════════════════════════════════ */
.timeline {
  position: relative;
  padding-left: 44px;
  max-width: 760px;
}
.timeline--wide { max-width: none; }
.timeline::before {
  content: '';
  position: absolute;
  left: 15px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute;
  left: -37px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  transition: background var(--tr), border-color var(--tr);
}
/* El hito en curso lleva halo, para que siga distinguiéndose cuando todos
   los puntos se hayan encendido al hacer scroll. */
.tl-item.now::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
/* El punto se enciende cuando el hito entra en pantalla. */
.js .tl-item[data-reveal].in::before { background: var(--accent); border-color: var(--accent); }
.tl-step {
  display: block;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 5px;
}
.tl-item h4 { font-size: 1.0625rem; margin-bottom: 6px; }
.tl-item p { font-size: .9375rem; color: var(--text-3); line-height: 1.7; }
.tl-item .badge { margin-top: 10px; }

/* ═══ 28. RESENAS / TESTIMONIOS ═════════════════════════════════════════ */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.testi {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: border-color var(--tr-mid), box-shadow var(--tr-mid), transform var(--tr-mid);
}
.testi:hover { border-color: var(--border-2); box-shadow: var(--sh-md); transform: translateY(-2px); }
.testi-stars { display: flex; gap: 2px; color: var(--amber); }
.testi-stars svg { width: 15px; height: 15px; }
.testi-stars .off { color: var(--border-2); }
.testi-body {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--text-2);
  flex: 1;
}
.testi-body::before { content: '\201C'; }
.testi-body::after  { content: '\201D'; }
.testi-author { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--border); }
.testi-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 750;
  flex-shrink: 0;
}
.testi-name { font-size: .9063rem; font-weight: 650; color: var(--text-1); line-height: 1.3; }
.testi-role { font-size: .8125rem; color: var(--text-4); }
.testi-vf {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .6875rem;
  font-weight: 650;
  color: var(--accent-text);
}
.testi-vf svg { width: 13px; height: 13px; }

/* Resumen de calificacion */
.rating-sum {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 26px;
}
.rating-big {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rating-meta { display: flex; flex-direction: column; gap: 5px; }
.rating-bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.rating-bar { display: flex; align-items: center; gap: 9px; font-size: .75rem; color: var(--text-4); }
.rating-bar .track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.rating-bar .track i { display: block; height: 100%; border-radius: 999px; background: var(--amber); }

/* Formulario de resena */
.rev-form { display: grid; gap: 16px; }
.rev-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .rev-2 { grid-template-columns: 1fr; } }
.star-pick { display: flex; gap: 4px; }
.star-pick button {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--border-2);
  transition: color var(--tr), background var(--tr), transform var(--tr);
}
.star-pick button svg { width: 24px; height: 24px; }
.star-pick button:hover { transform: scale(1.12); }
.star-pick button.on { color: var(--amber); }

/* Estado vacio */
.empty {
  text-align: center;
  padding: 52px 24px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  color: var(--text-4);
}
.empty svg { width: 34px; height: 34px; margin: 0 auto 14px; color: var(--text-4); opacity: .6; }
.empty p { color: var(--text-4); font-size: .9375rem; }

/* ═══ 29. CALCULADORA DE AHORRO ═════════════════════════════════════════ */
.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-md);
}
.calc-in  { padding: clamp(24px, 3vw, 34px); display: grid; gap: 22px; align-content: start; }
.calc-out {
  padding: clamp(24px, 3vw, 34px);
  background: var(--surface-inv);
  color: rgba(255, 255, 255, .78);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.calc-out::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 78% 8%, rgba(22, 163, 74, .28), transparent 62%);
}
.calc-out h4 { color: rgba(255, 255, 255, .62); font-size: .75rem; letter-spacing: .10em; text-transform: uppercase; font-weight: 700; }
.calc-big {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: #FFFFFF;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.calc-note { font-size: .8438rem; line-height: 1.6; color: rgba(255, 255, 255, .58); }
.calc-lines { display: flex; flex-direction: column; gap: 9px; }
.calc-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  font-size: .875rem;
}
.calc-line:last-child { border-bottom: none; }
.calc-line b { color: #FFFFFF; font-weight: 700; font-variant-numeric: tabular-nums; }
.range {
  width: 100%;
  appearance: none;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-3);
  outline: none;
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: var(--sh-sm);
  cursor: pointer;
}
.range::-moz-range-thumb {
  width: 20px; height: 20px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.calc-row-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.calc-row-h b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 750; color: var(--text-1); font-variant-numeric: tabular-nums; }
@media (max-width: 780px) { .calc { grid-template-columns: minmax(0, 1fr); } }

/* ═══ 30. PESTANAS DE MODULOS ═══════════════════════════════════════════ */
.tabs-bar {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 26px;
}
.tabs-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--r-md);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  transition: background var(--tr), color var(--tr), box-shadow var(--tr);
}
.tab-btn svg { width: 15px; height: 15px; }
.tab-btn:hover { color: var(--text-1); }
.tab-btn.on {
  background: var(--surface);
  color: var(--text-1);
  box-shadow: var(--sh-sm);
}
.tab-panel { display: none; }
.tab-panel.on { display: block; animation: fade-in .3s cubic-bezier(.2, .8, .3, 1); }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }

/* ═══ 31. INDICE LATERAL (funciones / documentacion) ════════════════════ */
.sidenav {
  position: sticky;
  top: calc(var(--bar-h) + 24px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: calc(100vh - var(--bar-h) - 48px);
  overflow-y: auto;
  padding-right: 4px;
}
.sidenav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 550;
  color: var(--text-3);
  transition: background var(--tr), color var(--tr);
  border-left: 2px solid transparent;
}
.sidenav a:hover { background: var(--surface-2); color: var(--text-1); }
.sidenav a.on { color: var(--accent-text); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.sidenav a svg { width: 15px; height: 15px; opacity: .75; }
.sidenav-h {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 14px 11px 6px;
}
.doc-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 900px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sidenav { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .sidenav a { border-left: none; border: 1px solid var(--border); border-radius: var(--r-pill); }
  .sidenav a.on { border-color: var(--accent-line); }
  .sidenav-h { display: none; }
}

/* ═══ 32. LISTA DE VERSIONES (GitHub) ═══════════════════════════════════ */
.rel-list { display: flex; flex-direction: column; gap: 18px; padding: 0 0 20px; }
.rel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color var(--tr-mid), box-shadow var(--tr-mid);
}
.rel-card:hover { border-color: var(--border-2); box-shadow: var(--sh-md); }
.rel-card.latest { border-color: var(--accent-line); box-shadow: var(--sh-md); }
.rc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.rel-ver { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rel-tag {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.02em;
}
.latest-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
  font-size: .6875rem;
  font-weight: 700;
}
.rc-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  color: var(--text-4);
}
.rc-date svg { width: 14px; height: 14px; }
.rc-notes {
  font-size: .9063rem;
  color: var(--text-3);
  line-height: 1.75;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 18px;
  max-height: 320px;
  overflow-y: auto;
}
.rc-notes strong { display: block; color: var(--text-1); margin: 12px 0 6px; font-size: .9375rem; }
.rc-notes strong:first-child { margin-top: 0; }
.rc-notes ul { display: flex; flex-direction: column; gap: 5px; }
.rc-notes li { position: relative; padding-left: 18px; }
.rc-notes li::before {
  content: '';
  position: absolute;
  left: 3px; top: 10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.rc-footer { display: flex; flex-wrap: wrap; gap: 10px; }
.asset-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--r-md);
  font-size: .9063rem;
  font-weight: 600;
  transition: background var(--tr), border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.asset-btn svg { width: 16px; height: 16px; }
.asset-btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-sm); }
.asset-btn.primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--sh-md); }
.asset-btn.ghost {
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border-2);
  font-family: var(--font-mono);
  font-size: .8125rem;
}
.asset-btn.ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.asset-sz { opacity: .7; font-weight: 500; font-size: .8125rem; }

/* Esqueleto de carga */
.skel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}
.skel-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.skel-body { margin-bottom: 18px; }
.skel {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: var(--r-xs);
}
@keyframes skel { to { background-position: -200% 0; } }
.load-err { color: var(--text-4); font-size: .9375rem; padding: 28px 0; text-align: center; }
.load-err a { color: var(--accent-text); font-weight: 600; }

/* ═══ 33. MODAL DE DESCARGA ═════════════════════════════════════════════ */
.gate-ov {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 14, 24, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade-in .2s ease;
}
.gate-box {
  position: relative;
  width: 100%;
  max-width: 424px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  padding: 36px 32px 28px;
  text-align: center;
  animation: gate-in .28s cubic-bezier(.2, .8, .3, 1);
}
@keyframes gate-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.gate-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-4);
  transition: background var(--tr), color var(--tr);
}
.gate-close:hover { background: var(--surface-3); color: var(--text-1); }
.gate-close svg { width: 17px; height: 17px; }
.gate-icon {
  width: 52px; height: 52px;
  margin: 0 auto 18px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
}
.gate-icon svg { width: 24px; height: 24px; }
.gate-box h2 { font-size: 1.375rem; margin-bottom: 9px; }
.gate-box > p { font-size: .9063rem; color: var(--text-3); line-height: 1.6; margin-bottom: 22px; }
.gate-input {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  font-size: .9375rem;
  text-align: center;
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.gate-input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.gate-err { min-height: 20px; font-size: .8125rem; color: var(--danger); padding-top: 7px; }
.gate-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font-size: .9375rem;
  font-weight: 650;
  box-shadow: var(--sh-sm);
  transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
}
.gate-submit svg { width: 17px; height: 17px; }
.gate-submit:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--sh-md); }
.gate-submit:disabled { opacity: .6; pointer-events: none; }
.gate-legal { font-size: .75rem; color: var(--text-4); margin-top: 15px; line-height: 1.5; }
.gate-legal a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }

/* ═══ 34. WIDGET DE SOPORTE ═════════════════════════════════════════════ */
.sup-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 20px 0 14px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #FFFFFF;
  font-size: .9063rem;
  font-weight: 650;
  box-shadow: var(--sh-lg);
  transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
}
.sup-launcher:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--sh-xl); }
.sup-launcher-ico { width: 22px; height: 22px; display: grid; place-items: center; }
.sup-launcher-ico svg { width: 21px; height: 21px; stroke-width: 2; }
.sup-ico-x { display: none; }
.sup-launcher.is-open .sup-ico-chat { display: none; }
.sup-launcher.is-open .sup-ico-x { display: block; }
.sup-launcher.is-open .sup-launcher-txt { display: none; }
.sup-launcher.is-open { padding: 0; width: 50px; justify-content: center; }
.sup-dot {
  position: absolute;
  top: 11px; right: 15px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--accent);
  display: none;
}
.sup-launcher.has-new .sup-dot { display: block; }

.sup-panel {
  position: fixed;
  right: 22px;
  bottom: 84px;
  z-index: 1200;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity var(--tr-mid), transform var(--tr-mid), visibility var(--tr-mid);
}
.sup-panel.is-open { opacity: 1; visibility: visible; transform: none; }

.sup-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.sup-head-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent-light), var(--accent-hover));
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9375rem;
  flex-shrink: 0;
}
.sup-head-txt { flex: 1; min-width: 0; line-height: 1.3; }
.sup-head-txt b { display: block; font-size: .9063rem; color: var(--text-1); font-weight: 650; }
.sup-head-txt span { font-size: .75rem; color: var(--text-4); }
.sup-close {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-4);
  transition: background var(--tr), color var(--tr);
}
.sup-close:hover { background: var(--surface-3); color: var(--text-1); }
.sup-close svg { width: 16px; height: 16px; }

.sup-tabs { display: flex; padding: 8px 10px 0; gap: 4px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.sup-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 8px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-4);
  border-bottom: 2px solid transparent;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
}
.sup-tab svg { width: 15px; height: 15px; }
.sup-tab:hover { color: var(--text-2); }
.sup-tab.is-on { color: var(--accent-text); border-bottom-color: var(--accent); background: var(--surface); }

.sup-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sup-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sup-msg { display: flex; flex-direction: column; gap: 3px; max-width: 86%; }
.sup-msg--yo { align-self: flex-end; align-items: flex-end; }
.sup-msg time { font-size: .6875rem; color: var(--text-4); padding: 0 4px; }
.sup-bub {
  padding: 10px 13px;
  border-radius: var(--r-lg);
  font-size: .875rem;
  line-height: 1.55;
  background: var(--surface-3);
  color: var(--text-2);
  border-bottom-left-radius: var(--r-xs);
  word-break: break-word;
}
.sup-msg--yo .sup-bub {
  background: var(--accent);
  color: #FFFFFF;
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-xs);
}
.sup-bub a { color: inherit; text-decoration: underline; }
.sup-bub.is-err { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); }
.sup-typing .sup-bub { display: flex; gap: 4px; padding: 13px; }
.sup-typing .sup-bub span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-4);
  animation: typing 1.2s infinite;
}
.sup-typing .sup-bub span:nth-child(2) { animation-delay: .15s; }
.sup-typing .sup-bub span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.sup-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; }
.sup-chips button {
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  background: var(--surface);
  font-size: .75rem;
  font-weight: 550;
  color: var(--text-3);
  transition: border-color var(--tr), background var(--tr), color var(--tr);
}
.sup-chips button:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }

.sup-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.sup-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  background: var(--surface);
  font-size: .875rem;
}
.sup-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sup-send, .sup-mic {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  transition: background var(--tr), transform var(--tr);
}
.sup-send:hover { background: var(--accent-hover); transform: scale(1.05); }
.sup-send svg, .sup-mic svg { width: 16px; height: 16px; stroke-width: 2; }
.sup-mic { background: var(--surface-3); color: var(--text-3); }
.sup-mic:hover { background: var(--surface); color: var(--text-1); }
.sup-mic.is-rec { background: var(--danger); color: #FFFFFF; }

.sup-alta { padding: 16px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.sup-alta-intro { font-size: .8125rem; color: var(--text-3); line-height: 1.6; margin-bottom: 8px; }
.sup-alta label { font-size: .75rem; font-weight: 600; color: var(--text-2); margin-top: 8px; }
.sup-alta input, .sup-alta textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  font-size: .875rem;
  resize: vertical;
}
.sup-alta input:focus, .sup-alta textarea:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sup-err { font-size: .75rem; color: var(--danger); padding-top: 6px; }
.sup-alta-btn {
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #FFFFFF;
  font-size: .875rem;
  font-weight: 650;
  transition: background var(--tr);
}
.sup-alta-btn:hover { background: var(--accent-hover); }

.sup-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.sup-foot a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-3);
  transition: color var(--tr);
}
.sup-foot a:hover { color: var(--accent-text); }
.sup-foot svg { width: 14px; height: 14px; }

@media (max-width: 520px) {
  .sup-panel { right: 8px; left: 8px; width: auto; bottom: 78px; height: min(540px, calc(100vh - 110px)); }
  .sup-launcher { right: 14px; bottom: 14px; }
  .to-top { right: 14px; bottom: 78px; }
}

/* ═══ 35. CONTACTO ══════════════════════════════════════════════════════ */
.ct-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }
.ct-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
}
.ct-via {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}
.ct-via:last-child { border-bottom: none; }
.ct-via:first-child { padding-top: 0; }
.ct-via-ico {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  flex-shrink: 0;
}
.ct-via-ico svg { width: 18px; height: 18px; }
.ct-via-tag { flex: 1; min-width: 0; }
.ct-via-tag b { display: block; font-size: .9375rem; color: var(--text-1); font-weight: 650; }
.ct-via-tag span { font-size: .8438rem; color: var(--text-3); }
.ct-hours { font-size: .8438rem; color: var(--text-4); line-height: 1.65; }

/* ═══ 36. COMPARATIVA "ANTES / DESPUES" ═════════════════════════════════ */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 780px) { .vs { grid-template-columns: minmax(0, 1fr); } }
.vs-col {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 26px;
  background: var(--surface);
}
.vs-col.bad { background: var(--surface-2); }
.vs-col.good { border-color: var(--accent-line); background: var(--accent-soft); }
:root[data-theme="dark"] .vs-col.good { background: var(--surface); }
.vs-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.018em;
}
.vs-h .ico-box { width: 34px; height: 34px; border-radius: var(--r-sm); }
.vs-h .ico-box svg { width: 17px; height: 17px; }
.vs-list { display: flex; flex-direction: column; gap: 12px; }
.vs-list li { display: flex; gap: 11px; font-size: .9063rem; line-height: 1.6; color: var(--text-3); }
.vs-list li svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.vs-col.bad li svg { color: var(--text-4); }
.vs-col.good li svg { color: var(--accent); }
.vs-col.good li { color: var(--text-2); }

/* ═══ 37. CTA FINAL ═════════════════════════════════════════════════════ */
/* El CTA de cierre siempre va dentro de `.on-dark`: `class="on-dark cta-box"`.
   Los colores blancos van SCOPED a esa combinación a propósito — un
   `.cta-box` suelto sobre fondo claro quedaría con texto blanco invisible,
   que fue justo el bug de /documentacion en v5.0.0. */
.cta-box {
  padding: clamp(38px, 5vw, 62px);
  text-align: center;
}
.cta-box h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); margin-bottom: 14px; }
.cta-box > p {
  font-size: 1.0625rem;
  color: var(--text-3);
  max-width: 56ch;
  margin: 0 auto 30px;
  line-height: 1.7;
}
.cta-actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
.cta-note { margin-top: 20px; font-size: .8438rem; color: var(--text-4); }

.on-dark.cta-box > p  { color: rgba(255, 255, 255, .70); }
.on-dark.cta-box .cta-note { color: rgba(255, 255, 255, .52); }
.on-dark.cta-box .btn-p { background: #FFFFFF; color: #0C1626; }
.on-dark.cta-box .btn-p:hover { background: #F1F4F8; }

/* ═══ 38. HERO ══════════════════════════════════════════════════════════ */
.hero { padding: clamp(48px, 6vw, 84px) 0 clamp(48px, 5vw, 72px); position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
}
.hero h1 { margin: 22px 0 0; }
.hero h1 em { color: var(--accent-text); }
.hero-sub {
  font-size: clamp(1.0313rem, .97rem + .3vw, 1.1875rem);
  color: var(--text-3);
  line-height: 1.7;
  max-width: 52ch;
  margin: 20px 0 30px;
}
.hero-cta { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-proof { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatars span {
  width: 32px; height: 32px;
  margin-right: -9px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 750;
  flex-shrink: 0;
}
.avatars span:nth-child(1) { background: var(--accent-soft); color: var(--accent-text); }
.avatars span:nth-child(2) { background: var(--brand-soft); color: var(--brand-700); }
.avatars span:nth-child(3) { background: var(--warn-soft); color: var(--warn); }
.avatars span svg { width: 15px; height: 15px; }
.hero-proof-txt { font-size: .8438rem; color: var(--text-3); line-height: 1.5; }
.hero-proof-txt b { color: var(--text-1); font-weight: 650; }
.hero-proof-stars { color: var(--amber); letter-spacing: 1px; font-size: .8125rem; margin-right: 6px; }

.hero-media { position: relative; }
/* El teléfono cuelga de la esquina inferior derecha de la vista previa.
   Se deja caer por fuera del marco a propósito: así se lee como un segundo
   dispositivo y no como un recorte encima del tablero. */
.hero-phone {
  position: absolute;
  right: -30px;
  bottom: -52px;
  z-index: 3;
  transform: scale(.80);
  transform-origin: bottom right;
}
@media (max-width: 1060px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-media { margin-top: 12px; }
  .hero-phone { display: none; }
}

/* Franja flotante bajo la vista previa.
   El ancho se recorta para que las insignias nunca queden debajo del
   teléfono, que ocupa la esquina derecha. */
.hero-badges {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 22px;
  max-width: calc(100% - 205px);
}
@media (max-width: 1060px) { .hero-badges { max-width: none; } }

/* ═══ 39. AJUSTES DE VISTA PREVIA EN PANTALLAS PEQUENAS ═════════════════ */
@media (max-width: 720px) {
  .ui-shell { grid-template-columns: 1fr; min-height: 0; }
  .ui-side { display: none; }
  .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-row { grid-template-columns: minmax(0, 1fr); }
  .ui-pos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  :root { --gutter: 18px; }
  .ui-content { padding: 10px; }
}