/* Puntea · sitio estático. Sin dependencias externas: fuentes locales (OFL), sin rastreadores.
   Todo sale de las variables de :root. El sistema está descrito en DESIGN.md. */

@font-face { font-family: "Plex Sans"; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Color (DESIGN.md · Color) */
  --tinta: #0B1F27;
  --tinta-2: #102A33;
  --tinta-3: #183844;
  --tinta-borde: #2E4C58;
  --papel: #F6F7F5;
  --papel-2: #ECEFEC;
  --blanco: #FFFFFF;
  --menta: #3DDC97;
  --menta-hover: #6CE8B3;
  --menta-clara: #9FE9C6;
  --verde: #1F7A52;
  --verde-osc: #14573A;
  --verde-fondo: #E3F1EA;
  --ambar: #A86412;
  --ambar-osc: #7A480C;
  --ambar-fondo: #F7ECDD;
  --ambar-claro: #F2B25C;
  --rojo: #B42318;
  --rojo-fondo: #FDECEA;
  --azul-fondo: #E6EDF0;
  --gris-2: #3A5260;
  --gris-3: #4F6570;
  --claro: #C9D4D8;
  --claro-2: #A9BCC2;
  --borde: #D9DED9;
  --linea: #E6EAE7;
  --foco: var(--verde);

  /* Tipografía (DESIGN.md · Escala) */
  --sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, Consolas, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --t-chica: .9375rem;                                   /* 15 */
  --t-etiqueta: .9375rem;                                /* 15 */
  --t-cuerpo: clamp(1.0625rem, 1rem + .2vw, 1.125rem);   /* 17 → 18 */
  --t-entrada: clamp(1.125rem, .9rem + .55vw, 1.375rem); /* 18 → 22 */
  --t-h3: clamp(1.25rem, 1.05rem + .45vw, 1.625rem);     /* 20 → 26 */
  --t-h2-chico: clamp(1.75rem, 1.2rem + 1.15vw, 2.375rem);  /* 28 → 38 */
  --t-h2: clamp(2rem, 1.15rem + 1.85vw, 3.125rem);          /* 32 → 50 */
  --t-h2-grande: clamp(2.25rem, 1.05rem + 2.75vw, 4rem);    /* 36 → 64 */
  --t-h1: clamp(2.875rem, .9rem + 4.4vw, 5.25rem);          /* 46 → 84 */
  --t-monto: clamp(1.875rem, 1.2rem + 1.4vw, 2.75rem);      /* 30 → 44 */

  /* Espacio, radios, sombras */
  --gutter: clamp(1rem, .4rem + 2.2vw, 2rem);
  --seccion: clamp(4.5rem, 1.5rem + 4.6vw, 7.5rem);
  --alto-barra: 68px;
  --r-chico: 8px;
  --r-control: 12px;
  --r-tarjeta: 16px;
  --r-pieza: 20px;
  --r-banda: 32px;
  --sombra-1: 0 1px 2px rgba(11,31,39,.06), 0 2px 6px rgba(11,31,39,.05);
  --sombra-2: 0 2px 4px rgba(11,31,39,.05), 0 12px 24px -8px rgba(11,31,39,.12);
  --sombra-3: 0 4px 8px rgba(11,31,39,.06), 0 24px 48px -16px rgba(11,31,39,.22), 0 48px 96px -32px rgba(11,31,39,.2);
  --sombra-oscura: 0 0 0 1px rgba(159,233,198,.18), 0 32px 64px -24px rgba(0,0,0,.55);

  /* Movimiento */
  --salida: cubic-bezier(.23, 1, .32, 1);
  --en-pantalla: cubic-bezier(.77, 0, .175, 1);
  --dur-rapida: 150ms;
  --dur-media: 250ms;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-barra) + 16px); }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--papel); color: var(--tinta-2); font-family: var(--sans); font-size: var(--t-cuerpo); line-height: 1.6; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, video { max-width: 100%; }
a { color: var(--verde); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--dur-rapida) ease; }
a:hover { color: var(--verde-osc); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.der { text-align: right; }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: .75rem 1rem; background: var(--menta); color: var(--tinta); font-weight: 600; border-radius: 10px; text-decoration: none; }
.saltar:focus { top: 1rem; }

.envoltura { width: 100%; max-width: calc(1320px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.seccion { padding-block: var(--seccion); }
.seccion-tono { background: var(--papel-2); }

/* ---------- Títulos y etiquetas ---------- */
h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.06; letter-spacing: -0.03em; }
.h2-chico { font-size: var(--t-h2-chico); line-height: 1.1; letter-spacing: -0.025em; }
.h2-grande { font-size: var(--t-h2-grande); line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.h3-grande { font-size: var(--t-h2-chico); letter-spacing: -0.025em; line-height: 1.1; }
h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.entrada { font-size: var(--t-entrada); line-height: 1.55; color: var(--gris-2); max-width: 36em; }
.nota { font-size: var(--t-chica); color: var(--gris-3); }
.letra-chica { font-size: var(--t-chica); color: var(--gris-3); }

.etiqueta { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: .01em; line-height: 1.3; color: var(--verde); }
.etiqueta::before { content: ""; flex: none; width: 1.05em; height: 1.05em; border-radius: 5px; background: currentColor url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 L10.5 17 L18.5 8'/%3E%3C/svg%3E") no-repeat center / 70%; }
.etiqueta-clara { color: var(--menta-clara); }
.etiqueta-clara::before { background-color: var(--menta); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F27' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 L10.5 17 L18.5 8'/%3E%3C/svg%3E"); }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: 0 1.4rem; border-radius: var(--r-control); border: 1.5px solid transparent; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-rapida) ease, border-color var(--dur-rapida) ease, color var(--dur-rapida) ease, transform 160ms var(--salida); }
.boton:active { transform: scale(.97); }
.boton .icono { flex: none; }
.boton-principal { background: var(--menta); color: var(--tinta); }
.boton-principal:hover { background: var(--menta-hover); color: var(--tinta); }
.boton-secundario, .boton-contorno { border-color: var(--tinta-borde); color: var(--papel); background: transparent; }
.boton-secundario:hover, .boton-contorno:hover { border-color: var(--menta-clara); color: var(--menta-clara); background: rgba(61,220,151,.06); }
.boton-oscuro { background: var(--tinta-2); color: var(--blanco); }
.boton-oscuro:hover { background: var(--tinta-3); color: var(--blanco); }
.boton-chico { min-height: 44px; padding: 0 1.1rem; font-size: 1rem; }
.boton-grande { min-height: 56px; padding: 0 1.75rem; font-size: 1.125rem; }
@media (hover: hover) and (pointer: fine) {
  .boton-principal:hover, .boton-oscuro:hover { transform: translateY(-1px); }
  .boton:active { transform: scale(.97); }
}

/* Contextos oscuros: el foco va en menta */
.barra, .hero, .banda-oscura, .cierre, .calc-resultado, .plan-destacado, .whatsapp { --foco: var(--menta); }

/* ---------- Barra fija ---------- */
.barra { position: sticky; top: 0; z-index: 40; background: var(--tinta); transition: box-shadow var(--dur-media) ease; }
.barra.con-borde { box-shadow: 0 1px 0 rgba(159,233,198,.12), 0 10px 24px -16px rgba(0,0,0,.6); }
.barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--alto-barra); }
.marca { display: inline-flex; align-items: center; min-height: 44px; gap: .6rem; color: var(--papel); text-decoration: none; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; }
.marca:hover { color: var(--papel); }
.nav { display: flex; align-items: center; gap: .25rem 1.6rem; }
.nav a:not(.boton) { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--claro); text-decoration: none; font-size: 1rem; padding: .5rem 0; }
.nav a:not(.boton)::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; border-radius: 2px; background: var(--menta); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-media) var(--salida); }
.nav a:not(.boton):hover, .nav a.actual { color: var(--blanco); }
.nav a:not(.boton):hover::after, .nav a.actual::after { transform: scaleX(1); }
.nav .boton { margin-left: .4rem; }
.menu-boton { display: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--tinta-borde); border-radius: 10px; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-raya { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--papel); transition: transform var(--dur-media) var(--salida), opacity var(--dur-rapida) ease; }
.menu-boton[aria-expanded="true"] .menu-raya:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-raya:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] .menu-raya:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 1 · Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--tinta); color: var(--papel); }
.hero-fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(0,0,0,.6) 58%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(0,0,0,.6) 58%, #000 100%); }
.hero-fondo .renglon { fill: rgba(159,233,198,.07); }
.hero-fondo .caja { fill: none; stroke: rgba(159,233,198,.16); stroke-width: 1.5; }
.hero-fondo .tic-fondo { fill: none; stroke: var(--menta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .38; }
.hero-cuerpo { position: relative; display: grid; grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.2fr); gap: clamp(2.5rem, 1rem + 3.5vw, 4.5rem); align-items: center; padding-block: clamp(2rem, 4.5vh, 4.5rem) clamp(2.75rem, 6vh, 5.5rem); min-height: min(calc(100svh - var(--alto-barra)), 900px); }
.hero-texto { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hero .etiqueta { margin-bottom: 1.1rem; }
h1 { font-size: var(--t-h1); font-weight: 600; line-height: .98; letter-spacing: -0.04em; margin-bottom: 1.4rem; }
h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: -0.01em; color: var(--menta); }
.hero-sub { max-width: 30em; font-size: var(--t-entrada); line-height: 1.55; color: var(--claro); margin-bottom: 1.75rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.acciones-centro { justify-content: center; }
.respaldo { margin-top: .9rem; font-size: var(--t-chica); color: var(--claro-2); }
.respaldo a { color: var(--menta-clara); }
.respaldo a:hover { color: var(--blanco); }
.sellos { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.5rem; font-size: var(--t-chica); color: var(--claro); }
.sellos li, .lista-palomas li { position: relative; padding-left: 1.6rem; }
.sellos li::before, .lista-palomas li::before { content: ""; position: absolute; left: 0; top: .22em; width: 1.1em; height: 1.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DDC97' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7'/%3E%3C/svg%3E") no-repeat center / contain; }

/* Entrada del hero: con CSS (no depende de que cargue el JS ni parpadea) */
@keyframes entra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes entra-pieza { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
.hero-texto > * { animation: entra .7s var(--salida) both; }
.hero-texto > :nth-child(2) { animation-delay: 70ms; }
.hero-texto > :nth-child(3) { animation-delay: 140ms; }
.hero-texto > :nth-child(4) { animation-delay: 210ms; }
.hero-texto > :nth-child(5) { animation-delay: 260ms; }
.hero-texto > :nth-child(6) { animation-delay: 300ms; }
.hero .demo { animation: entra-pieza .9s var(--salida) .2s both; }

/* ---------- Demo del punteo (pieza de la app) ---------- */
.demo { position: relative; min-width: 0; }
.demo-marco { border-radius: var(--r-pieza); background: var(--papel); color: var(--tinta-2); overflow: hidden; box-shadow: var(--sombra-oscura); }
.demo-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.25rem; background: var(--blanco); border-bottom: 1px solid var(--borde); }
.demo-cuenta { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--t-chica); font-weight: 600; }
.estado { padding: .3rem .8rem; border-radius: 999px; font-size: .875rem; font-weight: 600; background: var(--azul-fondo); color: var(--tinta-2); transition: background-color .3s ease, color .3s ease; }
.estado.listo { background: var(--verde-fondo); color: var(--verde-osc); }
.estado.pend { background: var(--ambar-fondo); color: var(--ambar-osc); }
.demo-resumen { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem .6rem; }
.demo-dif { display: flex; flex-direction: column; gap: .1rem; }
.demo-etiqueta { font-size: var(--t-chica); font-weight: 600; color: var(--gris-3); }
.monto { font-family: var(--mono); font-weight: 500; font-size: var(--t-monto); line-height: 1.1; font-variant-numeric: tabular-nums; transition: color .3s ease; }
.monto.listo { color: var(--verde); }
.monto.pend { color: var(--ambar); }
.demo-avance { flex: 1 1 12rem; max-width: 19rem; display: flex; flex-direction: column; gap: .45rem; font-size: var(--t-chica); }
.demo-avance-fila { display: flex; justify-content: space-between; gap: .75rem; color: var(--gris-2); font-variant-numeric: tabular-nums; }
.riel { display: flex; gap: 3px; height: 8px; }
.riel-seg { flex: 1; border-radius: 999px; background: var(--linea); position: relative; overflow: hidden; }
.riel-seg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--seg, var(--verde)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--salida); }
.riel-seg.lleno::after { transform: none; }
.riel-seg[data-tipo="reg"] { --seg: var(--tinta-2); }
.riel-seg[data-tipo="rev"] { --seg: var(--ambar); }
.riel-seg[data-tipo="tr"] { --seg: var(--gris-3); }
.por-atender { color: var(--ambar-osc); font-weight: 600; }
.demo-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-chica); margin-bottom: .4rem; }
.demo-tabla th { padding: .55rem .6rem; text-align: left; font-size: .875rem; font-weight: 600; color: var(--gris-3); }
.demo-tabla td { padding: .5rem .6rem; border-top: 1px solid var(--linea); vertical-align: middle; transition: background-color .4s ease; }
.demo-tabla th:first-child, .demo-tabla td:first-child { width: 2.4rem; padding-left: 1.25rem; }
.demo-tabla .der { white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-tabla .res { width: 8.5rem; }
.demo-tabla tr.leyendo td { background: rgba(61,220,151,.13); }
.tic::before { content: ""; display: inline-block; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #B8C3BD; vertical-align: middle; }
.res:empty::before { content: "…"; color: #7E928A; }
tr.hecho .tic::before { border: 0; width: 20px; height: 20px; background: var(--tic, var(--verde)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7'/%3E%3C/svg%3E") no-repeat center / 12px; animation: aparece-pop .4s var(--salida) both; }
.pill-demo { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .875rem; font-weight: 600; white-space: nowrap; background: var(--pill-fondo); color: var(--pill-texto); animation: aparece-pop .35s var(--salida) both; }
tr[data-tipo="ok"] { --tic: var(--verde); --pill-fondo: var(--verde-fondo); --pill-texto: var(--verde-osc); }
tr[data-tipo="reg"] { --tic: var(--tinta-2); --pill-fondo: var(--azul-fondo); --pill-texto: var(--tinta-2); }
tr[data-tipo="rev"] { --tic: var(--ambar); --pill-fondo: var(--ambar-fondo); --pill-texto: var(--ambar-osc); }
tr[data-tipo="tr"] { --tic: var(--gris-3); --pill-fondo: var(--papel-2); --pill-texto: var(--gris-2); }
@keyframes aparece-pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.demo-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem 1.25rem; background: var(--blanco); border-top: 1px solid var(--borde); font-size: .875rem; color: var(--gris-3); }
.boton-repetir { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border-radius: 10px; border: 1.5px solid var(--borde); background: var(--papel); color: var(--tinta-2); font-size: var(--t-chica); font-weight: 600; cursor: pointer; transition: border-color var(--dur-rapida) ease, transform 160ms var(--salida); }
.boton-repetir:hover { border-color: var(--verde); }
.boton-repetir:active { transform: scale(.97); }
.boton-repetir svg { transition: transform .5s var(--salida); }
.boton-repetir:hover svg { transform: rotate(-200deg); }
.demo-nota { position: relative; z-index: 1; width: fit-content; margin: -.6rem 0 0 -1.75rem; display: flex; align-items: flex-start; gap: .65rem; max-width: 19rem; padding: .85rem 1.1rem; border-radius: var(--r-tarjeta); background: var(--blanco); color: var(--tinta-2); box-shadow: var(--sombra-3); font-size: var(--t-chica); font-weight: 500; line-height: 1.4; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s var(--salida), transform .45s var(--salida); }
.demo-nota svg { flex: none; margin-top: .1rem; }
.demo-nota b { font-weight: 500; }
.demo.con-nota .demo-nota { opacity: 1; transform: none; }

/* ---------- 2 · Bancos y sistemas ---------- */
.franja { background: var(--blanco); padding-block: clamp(3.5rem, 1.5rem + 3.5vw, 5.5rem); }
.franja-cuerpo { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.franja-texto { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.franja-texto p:not(.etiqueta) { color: var(--gris-2); max-width: 32em; }
.franja-listas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 2.5rem; }
.lista-marcas h3 { font-size: var(--t-chica); font-weight: 600; color: var(--gris-3); letter-spacing: 0; margin-bottom: 1rem; }
.bancos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.bancos li { padding: .55rem .9rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--tinta-2); border-radius: var(--r-chico); }
.bancos li:nth-child(4n+1), .bancos li:nth-child(4n+2) { background: var(--papel); }
.sistemas { display: flex; flex-direction: column; gap: .6rem; }
.sistemas li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-radius: var(--r-control); background: var(--papel); }
.sistemas b { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.sistemas span { font-size: var(--t-chica); color: var(--gris-3); text-align: right; }
.nota-legal { grid-column: 1 / -1; font-size: var(--t-chica); color: var(--gris-3); }

/* ---------- 3 · Cómo funciona ---------- */
.como-cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; margin-bottom: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); }
.como-titulo { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.hoy { padding: 1.5rem 1.75rem; border-radius: var(--r-tarjeta); background: var(--papel-2); }
.hoy h3 { font-size: 1.0625rem; color: var(--gris-3); margin-bottom: .8rem; letter-spacing: 0; }
.lista-tache { display: flex; flex-direction: column; gap: .5rem; }
.lista-tache li { position: relative; padding-left: 1.6rem; color: var(--gris-2); }
.lista-tache li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1em; height: 1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A86412' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") no-repeat center / contain; }

.flujo { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-pieza); background: var(--blanco); }
.flujo-diagrama { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(48px, .55fr) minmax(0, .85fr) minmax(48px, .55fr) minmax(0, 1.15fr); align-items: center; padding: clamp(1rem, .5rem + 1.5vw, 2rem) clamp(.5rem, 1.5vw, 1.5rem); border-radius: var(--r-tarjeta); background: var(--papel); }
.flujo-entradas { display: flex; flex-direction: column; gap: 1.5rem; }
.doc { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-radius: var(--r-tarjeta); background: var(--blanco); }
.doc svg { flex: none; }
.doc span { display: flex; flex-direction: column; min-width: 0; }
.doc b { font-family: var(--mono); font-weight: 500; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; }
.doc small { font-size: var(--t-chica); color: var(--gris-3); }
.doc-xlsx { background: #EAF5EF; }
.flujo-lineas { width: 100%; height: 120px; overflow: visible; }
.linea-base { fill: none; stroke: var(--borde); stroke-width: 2; vector-effect: non-scaling-stroke; }
.linea-viva { fill: none; stroke: var(--verde); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.flujo-centro { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.flujo-centro p { font-size: var(--t-chica); color: var(--gris-3); }
.compu { display: flex; flex-direction: column; align-items: center; }
.compu-pantalla { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; width: 140px; height: 96px; border-radius: 12px; background: var(--tinta-2); color: var(--blanco); font-weight: 600; font-size: .9375rem; border: 3px solid var(--tinta-3); }
.compu-base { width: 64px; height: 10px; margin-top: 4px; border-radius: 0 0 8px 8px; background: var(--tinta-3); }

.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); margin-top: clamp(1.75rem, 1rem + 1.5vw, 2.5rem); counter-reset: paso; }
.paso { display: flex; flex-direction: column; gap: .5rem; counter-increment: paso; }
.paso h3 { display: flex; align-items: center; gap: .7rem; font-size: var(--t-h3); }
.paso h3::before { content: counter(paso); display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 999px; background: var(--verde-fondo); color: var(--verde-osc); font-family: var(--mono); font-size: 1rem; font-weight: 500; }
.paso p { color: var(--gris-2); padding-left: 2.7rem; }

.excel { margin-top: clamp(3.5rem, 2rem + 3vw, 5.5rem); }
.excel-cabeza { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: end; margin-bottom: 1.75rem; }
.excel-cabeza p { color: var(--gris-2); max-width: 34em; }
.libro { display: flex; flex-direction: column; border-radius: var(--r-pieza); overflow: hidden; background: var(--blanco); box-shadow: var(--sombra-3); }
.libro-barra { display: flex; align-items: center; gap: .6rem; padding: .75rem 1.25rem; background: var(--verde-osc); color: var(--blanco); }
.libro-nombre { font-family: var(--mono); font-size: var(--t-chica); }
.libro-hojas { min-height: 30.5rem; }
.hoja { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3.2fr); align-items: start; }
.hoja:focus-visible { outline-offset: -4px; }
.hoja-tabla { overflow-x: auto; padding: .25rem 0 .75rem; }
.tabla-hoja { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 1rem; }
.tabla-hoja th, .tabla-hoja td { padding: .7rem 1.4rem; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla-hoja thead th { font-size: var(--t-chica); color: var(--gris-3); font-weight: 600; background: #FAFBFA; }
.tabla-hoja tbody th { font-weight: 500; }
.tabla-hoja .der { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-hoja tr.sub th { padding-left: 2.6rem; color: var(--gris-2); font-weight: 400; }
.tabla-hoja tr.total th, .tabla-hoja tr.total td { font-weight: 600; border-top: 1.5px solid var(--tinta-2); }
.tabla-hoja tr.nota td { color: var(--gris-3); font-size: var(--t-chica); }
.tabla-hoja tr.total.pend td { color: var(--ambar-osc); }
.tabla-hoja tr.estado-fila th, .tabla-hoja tr.estado-fila td { border-top: 0; border-bottom: 0; padding-top: .9rem; }
.hoja-nota { display: flex; flex-direction: column; gap: .7rem; margin: 1.25rem 1.25rem 1.25rem 0; padding: 1.4rem 1.5rem; border-radius: var(--r-tarjeta); background: var(--papel); font-size: 1rem; color: var(--gris-2); }
.hoja-nota h4 { color: var(--tinta-2); font-size: 1.125rem; }
.suma { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-family: var(--mono); font-size: .9375rem; color: var(--tinta-2); }
.suma span { padding: .3rem .5rem; border-radius: 6px; background: var(--blanco); }
.suma span:nth-child(even) { background: none; padding-inline: 0; color: var(--gris-3); }
.suma .total { background: var(--verde); color: var(--blanco); }
.comparar-montos { display: flex; flex-wrap: wrap; gap: .6rem; }
.comparar-montos span { flex: 1 1 8rem; display: flex; flex-direction: column; gap: .1rem; padding: .8rem 1rem; border-radius: var(--r-control); background: var(--tinta-2); color: var(--papel); }
.comparar-montos small { font-size: .875rem; color: var(--claro-2); }
.comparar-montos b { font-weight: 500; font-size: 1.125rem; }
.comparar-montos mark { background: none; }
mark.ok { color: var(--menta); }
mark.alerta { color: var(--ambar-claro); }
.libro-pestanas { order: 3; position: relative; display: flex; gap: 2px; padding: 0 .75rem; background: var(--papel-2); border-top: 1px solid var(--borde); overflow-x: auto; }
.libro-pestanas [role="tab"] { flex: none; min-height: 48px; padding: 0 1.2rem; border: 0; background: transparent; color: var(--gris-2); font-size: 1rem; font-weight: 600; cursor: pointer; transition: color var(--dur-rapida) ease, background-color var(--dur-rapida) ease; }
.libro-pestanas [role="tab"]:hover { color: var(--tinta-2); background: rgba(255,255,255,.6); }
.libro-pestanas [role="tab"][aria-selected="true"] { background: var(--blanco); color: var(--verde-osc); }
.libro-pestanas [role="tab"]:focus-visible { outline-offset: -3px; }
.pestana-indicador { position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--verde); transform-origin: left; pointer-events: none; transition: transform var(--dur-media) var(--en-pantalla); }
.no-js .pestana-indicador { display: none; }
.descarga { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.75rem; }

/* ---------- 4 · Varias cuentas ---------- */
.varias { display: grid; grid-template-columns: minmax(0, 6.6fr) minmax(0, 5fr); gap: clamp(2.5rem, 1rem + 4vw, 5.5rem); align-items: center; }
.varias-texto { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.lista-palomas { display: flex; flex-direction: column; gap: .7rem; margin-top: .4rem; }
.lista-palomas li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A52' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7'/%3E%3C/svg%3E"); }
.panel { display: flex; flex-direction: column; gap: .9rem; padding: 1.4rem; border-radius: var(--r-pieza); background: var(--papel); box-shadow: var(--sombra-3); }
.panel-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.panel-kpis span { padding: .75rem .9rem; border-radius: var(--r-control); background: var(--blanco); font-size: .875rem; line-height: 1.3; color: var(--gris-3); }
.panel-kpis b { display: block; font-family: var(--mono); font-weight: 500; font-size: 1.625rem; color: var(--verde-osc); }
.panel-kpis b.ambar, .panel-fila .ambar { color: var(--ambar-osc); }
.panel-kpis b.gris, .panel-fila .gris { color: var(--gris-3); }
.panel-kpis b.rojo, .panel-fila .rojo { color: var(--rojo); }
.panel-cliente { border-radius: var(--r-tarjeta); background: var(--blanco); overflow: hidden; }
.panel-nombre { padding: .75rem 1.1rem; font-weight: 600; font-size: 1rem; border-bottom: 1px solid var(--linea); }
.panel-nombre small { margin-left: .4rem; font-weight: 400; font-size: .875rem; color: var(--gris-3); }
.panel-banco { padding: .5rem 1.1rem .25rem; font-size: .875rem; font-weight: 600; color: var(--gris-2); background: #FAFBFA; }
.panel-fila { display: grid; grid-template-columns: 1fr 7rem 12rem; align-items: center; gap: .75rem; padding: .5rem 1.1rem; font-size: .9375rem; border-top: 1px solid var(--linea); }
.panel-fila span:nth-child(2) { text-align: right; }
.panel-fila .pill { justify-self: end; }
.pill { display: inline-block; padding: .3rem .75rem; border-radius: 999px; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.pill-ok { background: var(--verde-fondo); color: var(--verde-osc); }
.pill-rev { background: var(--ambar-fondo); color: var(--ambar-osc); }
.pill-pend { background: var(--papel-2); color: var(--gris-2); }
.pill-no { background: var(--rojo-fondo); color: var(--rojo); }

/* ---------- 5 · Seguridad ---------- */
.banda-oscura { background: var(--tinta); color: var(--papel); }
.seguridad { display: grid; grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); gap: clamp(2.5rem, 1rem + 4vw, 5.5rem); align-items: center; }
.seguridad-texto { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.banda-oscura .entrada { color: var(--claro); }
.enlace-claro { color: var(--menta-clara); font-weight: 600; }
.enlace-claro:hover { color: var(--blanco); }
.seguridad-diagrama { display: flex; flex-direction: column; min-width: 0; }
.oficina { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.75rem; border-radius: var(--r-pieza); background: rgba(61,220,151,.07); box-shadow: inset 0 0 0 1.5px var(--menta); }
.oficina-etiqueta { font-size: var(--t-chica); font-weight: 600; color: var(--menta-clara); }
.flujo-chico { display: flex; align-items: center; gap: .7rem; }
.flujo-chico-entradas { display: flex; flex-direction: column; gap: .5rem; }
.flujo-chico .flecha { flex: none; }
.archivo { padding: .5rem .8rem; border-radius: 10px; background: var(--tinta-3); color: var(--papel); font-family: var(--mono); font-size: .875rem; }
.chip-puntea { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: var(--r-control); background: var(--menta); color: var(--tinta); font-size: var(--t-chica); font-weight: 600; white-space: nowrap; }
.muro { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.75rem; }
.muro span { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--tinta-borde) 0 8px, transparent 8px 14px); }
.nube { padding: 1.25rem 1.6rem; border-radius: var(--r-tarjeta); background: var(--tinta-2); color: var(--claro-2); }
.nube-titulo { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--claro); margin-bottom: .8rem; }
.no-sale { display: flex; flex-wrap: wrap; gap: .5rem; }
.no-sale li { padding: .3rem .8rem; border-radius: 999px; background: var(--tinta-3); font-size: .875rem; text-decoration: line-through; text-decoration-color: rgba(242,178,92,.85); }
.datos-seguridad { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); margin-top: clamp(1rem, 2vw, 2rem); padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.datos-seguridad h3 { font-size: var(--t-h3); color: var(--blanco); margin-bottom: .4rem; }
.datos-seguridad p { color: var(--claro); max-width: 30em; }

/* ---------- 6 · Precios con calculadora ---------- */
.precios-cabeza { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; max-width: 50rem; margin-bottom: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); }
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.calc-campos { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 1rem + 1vw, 2rem); border-radius: var(--r-pieza); background: var(--blanco); }
.calc-campos h3 { margin-bottom: -.4rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo span { font-size: 1rem; font-weight: 600; }
.campo input { min-height: 52px; padding: 0 1rem; border: 1.5px solid #7A8C93; border-radius: var(--r-control); background: var(--papel); color: var(--tinta-2); font-family: var(--mono); font-size: 1.125rem; transition: border-color var(--dur-rapida) ease, background-color var(--dur-rapida) ease; }
.campo input:hover { border-color: var(--gris-3); }
.campo input:focus { border-color: var(--verde); background: var(--blanco); outline: 3px solid rgba(31,122,82,.25); outline-offset: 1px; }
.campo input::placeholder { color: #5F737B; }
.calc-resultado { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(1.75rem, 1rem + 1.5vw, 2.5rem); border-radius: var(--r-pieza); background: var(--tinta-2); color: var(--papel); }
.calc-vacio { color: var(--claro); font-size: var(--t-entrada); max-width: 28em; }
.calc-resultado.vacio .calc-cifra { color: var(--claro-2); }
.calc-resultado.vacio .calc-linea b { color: var(--claro-2); font-weight: 500; }
.calc-cifra { font-family: var(--mono); font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); font-weight: 500; line-height: 1.05; color: var(--menta); }
.calc-linea { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--tinta-borde); font-size: 1rem; color: var(--claro); }
.calc-linea b { color: var(--blanco); font-weight: 600; text-align: right; }
.calc-error { color: var(--ambar-claro); font-size: var(--t-entrada); }
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.plan { display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.5rem, 1rem + 1vw, 2rem); border-radius: var(--r-pieza); background: var(--blanco); transition: box-shadow var(--dur-media) var(--salida), transform var(--dur-media) var(--salida); }
.plan h3 { font-size: 1.125rem; color: var(--gris-2); font-weight: 600; letter-spacing: 0; }
.precio { font-size: 1rem; color: var(--gris-2); }
.cifra { display: block; font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.anual { font-size: var(--t-chica); color: var(--verde-osc); font-weight: 600; }
.plan-para { margin-top: auto; padding-top: 1rem; font-size: 1rem; color: var(--gris-2); }
.plan-destacado { background: var(--tinta-2); }
.plan-destacado h3, .plan-destacado .precio, .plan-destacado .plan-para { color: var(--claro); }
.plan-destacado .cifra { color: var(--blanco); }
.plan-destacado .anual { color: var(--menta-clara); }
.plan.elegido { box-shadow: 0 0 0 3px var(--verde), var(--sombra-2); }
.plan-destacado.elegido { box-shadow: 0 0 0 3px var(--menta), var(--sombra-2); }
.precios-nota { margin-top: 1.25rem; }

/* ---------- 7 · Fundador + Preguntas ---------- */
.fundador-preguntas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.fundador { position: sticky; top: calc(var(--alto-barra) + 2rem); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.fundador > p:not(.etiqueta):not(.fundador-cargo) { color: var(--gris-2); }
.fundador-foto { width: 100%; max-width: 20rem; }
.foto-pendiente { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--r-pieza); background: var(--blanco); color: var(--gris-3); font-family: var(--mono); font-size: 1.125rem; box-shadow: inset 0 0 0 2px var(--borde); }
.fundador-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-pieza); }
.fundador-cargo { margin-top: -.6rem; font-weight: 500; color: var(--verde-osc); }
/* Video de la demo: sección propia a todo lo ancho, marco 16:9 exacto */
.seccion-video { background: var(--papel-2); }
.video-cabeza { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.video-cabeza .entrada { max-width: 40em; }
.video-demo { width: 100%; max-width: 1180px; margin: 0 auto; }
.video-marco { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-pieza); overflow: hidden; background: var(--tinta); box-shadow: var(--sombra-3); }
.video-marco video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: var(--tinta); }
.video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; border: 0; padding: 0; cursor: pointer; color: var(--tinta);
  background: radial-gradient(ellipse at center, rgba(11,31,39,.15), rgba(11,31,39,.55)); }
.video-play[hidden] { display: none; }
.video-play-circulo { display: grid; place-items: center; width: clamp(84px, 6vw + 40px, 120px); aspect-ratio: 1; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 10px rgba(61,220,151,.22), 0 20px 50px -10px rgba(0,0,0,.6); transition: transform var(--dur-media) var(--salida); }
.video-play-circulo svg { margin-left: 6px; }
.video-play-texto { padding: .35rem .9rem; border-radius: 999px; background: rgba(11,31,39,.8); color: var(--blanco); font-weight: 600; font-size: 1rem; }
.video-play:hover .video-play-circulo, .video-play:focus-visible .video-play-circulo { transform: scale(1.06); }
.video-play:focus-visible { outline: 3px solid var(--menta); outline-offset: -6px; }
.video-demo figcaption { margin-top: .75rem; text-align: center; font-size: var(--t-chica); color: var(--gris-3); }
.ver-demo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.ver-demo .icono { flex: none; }
.respaldo .separador { margin: 0 .55rem; }
.testimonio { padding: 1.25rem 1.4rem; border-radius: var(--r-tarjeta); background: var(--blanco); }
.testimonio blockquote p { font-size: 1.125rem; line-height: 1.5; }
.testimonio figcaption { margin-top: .6rem; font-size: var(--t-chica); color: var(--gris-3); }
.preguntas-col { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.preguntas { display: flex; flex-direction: column; gap: .6rem; width: 100%; margin-top: 1rem; }
.preguntas details { border-radius: var(--r-tarjeta); background: var(--blanco); overflow: hidden; }
.preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: 1.15rem 1.5rem; font-size: 1.125rem; font-weight: 600; cursor: pointer; list-style: none; transition: color var(--dur-rapida) ease; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A52' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform var(--dur-media) var(--salida); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas summary:hover { color: var(--verde-osc); }
.preguntas summary:focus-visible { outline-offset: -3px; }
.respuesta { overflow: hidden; }
.respuesta p { padding: 0 1.5rem 1.35rem; max-width: 66ch; color: var(--gris-2); }

/* ---------- 8 · Cierre ---------- */
.cierre-caja { padding-bottom: var(--seccion); padding-top: var(--seccion); }
.cierre { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; padding: clamp(3.5rem, 2rem + 4.5vw, 6rem) clamp(1.25rem, .5rem + 3vw, 3rem); border-radius: var(--r-banda); background: var(--tinta); color: var(--papel); text-align: center; }
.cierre h2 { max-width: 17ch; }
.cierre > p:not(.etiqueta):not(.respaldo) { max-width: 34em; font-size: var(--t-entrada); color: var(--claro); }
.cierre .acciones { margin-top: .4rem; }
.cierre .respaldo { margin-top: 0; }

/* ---------- Pie ---------- */
.pie { background: var(--papel); }
.pie .envoltura { border-top: 1px solid var(--borde); padding-inline: 0; width: calc(100% - 2 * var(--gutter)); max-width: 1320px; }
.pie-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; padding-block: 2rem 6rem; font-size: var(--t-chica); color: var(--gris-2); }
.pie-marca { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; }
.pie-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.pie-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gris-2); }
.pie-nav a:hover { color: var(--verde-osc); }

/* ---------- WhatsApp flotante ---------- */
.whatsapp { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: .5rem; min-height: 56px; padding: 0 1.2rem 0 1rem; border-radius: 999px; background: #1D7A4C; color: var(--blanco); font-weight: 600; text-decoration: none; box-shadow: var(--sombra-3); transition: transform var(--dur-media) var(--salida), background-color var(--dur-rapida) ease; }
.whatsapp:hover { background: #166640; color: var(--blanco); }
.whatsapp:active { transform: scale(.96); }
.js .whatsapp:not(.visible) { opacity: 0; visibility: hidden; transform: translateY(12px); }
.js .whatsapp { transition: opacity .3s ease, transform .3s var(--salida), visibility 0s linear .3s, background-color .2s ease; }
.js .whatsapp.visible { transition: opacity .3s ease, transform .3s var(--salida), visibility 0s, background-color .2s ease; }

/* ---------- Aviso flotante (enlaces pendientes) ---------- */
.aviso-flotante { position: fixed; left: 50%; bottom: 6rem; z-index: 50; max-width: min(92vw, 32rem); padding: 1rem 1.25rem; border-radius: var(--r-tarjeta); background: var(--tinta-2); color: var(--papel); font-size: 1rem; box-shadow: var(--sombra-3); opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .25s ease, transform .25s var(--salida); }
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Páginas legales ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: calc(var(--alto-barra) + 2.5rem) var(--gutter) 5rem; }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.1; margin-bottom: 1rem; }
.legal h2 { font-size: 1.375rem; margin: 2.25rem 0 .75rem; letter-spacing: -0.015em; }
.legal p, .legal li { font-size: 1.0625rem; line-height: 1.7; color: var(--gris-2); }
.legal p + p { margin-top: .9rem; }
.legal ul { list-style: disc; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.legal ul + p { margin-top: .9rem; }
.borrador { margin-bottom: 2rem; padding: 1rem 1.25rem; border-radius: 14px; background: var(--ambar-fondo); box-shadow: inset 0 0 0 1px #EBD6B8; color: var(--ambar-osc); font-weight: 600; }
.pendiente { padding: 0 .3rem; border-radius: 4px; background: var(--ambar-fondo); color: var(--ambar-osc); font-family: var(--mono); font-size: .95em; }
.legal-barra { position: fixed; top: 0; left: 0; right: 0; }
.no-encontrada { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; }

/* ---------- Pantallas grandes (1600+) ---------- */
/* Lectura de Puntea + asistente beta (en "Cómo funciona") */
.lectura-web { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem 2.5rem; align-items: start; margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.lectura-web-texto { display: flex; flex-direction: column; gap: .9rem; }
.lectura-web-texto h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; color: var(--tinta-2); }
.lectura-web-texto p:not(.etiqueta) { color: var(--gris-2); }
.lectura-tarjeta { grid-row: span 2; margin: 0; padding: 1.5rem 1.6rem; border-radius: var(--r-pieza); background: var(--blanco); box-shadow: var(--sombra-3); border: 1px solid var(--linea); }
.lectura-tarjeta figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--t-chica); color: var(--gris-3); margin-bottom: .9rem; }
.lectura-marca { width: 1.1em; height: 1.1em; border-radius: 5px; background: var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F27' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 L10.5 17 L18.5 8'/%3E%3C/svg%3E") no-repeat center / 70%; }
.lectura-cuerpo { font-size: 1.0625rem; line-height: 1.55; color: var(--tinta-2); }
.lectura-cuerpo .lectura-estado { font-weight: 600; color: var(--ambar-osc); margin-bottom: .4rem; }
.lectura-cuerpo ol { margin: 0; padding-left: 1.5rem; display: grid; gap: .35rem; list-style: decimal; }
.lectura-cuerpo ol li::marker { font-weight: 600; color: var(--gris-3); }
.lectura-cuerpo .lec-num { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.lectura-cuerpo .lectura-siguiente { margin-top: .8rem; }
.lectura-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); }
#lectura-copiado { font-weight: 600; color: var(--verde-osc); }
.ia-beta { position: relative; padding: 1.4rem 1.5rem; border-radius: var(--r-tarjeta); background: var(--tinta); color: var(--claro); box-shadow: var(--sombra-oscura); display: flex; flex-direction: column; gap: .6rem; }
.ia-beta h3 { color: var(--blanco); font-size: 1.25rem; }
.ia-beta .nota { color: var(--claro-2); }
.insignia-beta { align-self: flex-start; padding: .15rem .6rem; border-radius: 999px; background: rgba(61,220,151,.14); color: var(--menta-clara); font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(159,233,198,.35); }
@media (max-width: 960px) {
  .lectura-web { grid-template-columns: 1fr; }
  .lectura-tarjeta { grid-row: auto; }
}

@media (min-width: 1600px) {
  .hero-cuerpo { grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); }
}

/* ---------- Laptops con poca altura (1366×768 con barras del navegador) ---------- */
@media (min-width: 961px) and (max-height: 820px) {
  :root { --t-h1: clamp(2.875rem, .9rem + 3.9vw, 4.5rem); }
  .hero-cuerpo { padding-block: 1.75rem 2.5rem; }
  .hero .etiqueta { margin-bottom: .8rem; }
  h1 { margin-bottom: 1.1rem; }
  .hero-sub { margin-bottom: 1.35rem; }
  .sellos { margin-top: 1.1rem; }
  .demo-tabla td { padding-block: .42rem; }
  .demo-resumen { padding-top: .9rem; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  .datos-seguridad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flujo-diagrama { grid-template-columns: minmax(0, 1fr); gap: .5rem; justify-items: stretch; }
  .flujo-lineas { height: 48px; width: 48px; justify-self: center; transform: rotate(90deg); }
  .flujo-centro { padding: .5rem 0; }
  .hoja { grid-template-columns: minmax(0, 1fr); }
  .hoja-nota { margin: 0 1.25rem 1.25rem; }
  .libro-hojas { min-height: 0; }
}
@media (max-width: 1080px) {
  .nav { gap: .25rem 1.1rem; }
  .nav a:not(.boton) { font-size: .9375rem; }
}
@media (max-width: 960px) {
  .hero-cuerpo, .seguridad, .varias, .calc, .franja-cuerpo, .como-cabeza, .excel-cabeza, .fundador-preguntas { grid-template-columns: minmax(0, 1fr); }
  .hero-cuerpo { min-height: 0; padding-block: 2.5rem 4rem; }
  .hero-fondo { display: none; }
  .varias-texto { order: -1; }
  .fundador { position: static; }
  .demo-nota { position: static; margin-top: .9rem; max-width: none; box-shadow: var(--sombra-2); }
  .planes { grid-template-columns: minmax(0, 1fr); }
  .datos-seguridad { grid-template-columns: minmax(0, 1fr); }
  .pasos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .menu-boton { display: inline-flex; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.25rem; background: var(--tinta); box-shadow: 0 1px 0 rgba(159,233,198,.14), 0 18px 30px -18px rgba(0,0,0,.6); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s var(--salida), visibility 0s linear .25s; }
  .nav.abierto { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .25s var(--salida), visibility 0s; }
  .nav a:not(.boton) { padding: .9rem .25rem; font-size: 1.0625rem; border-bottom: 1px solid rgba(159,233,198,.1); }
  .nav a:not(.boton)::after { display: none; }
  .nav .boton { margin: 1rem 0 0; }
}
@media (max-width: 720px) {
  .franja-listas { grid-template-columns: minmax(0, 1fr); }
  .acciones .boton { flex: 1 1 100%; }
  .whatsapp { padding: 0; width: 56px; justify-content: center; }
  .whatsapp-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .boton { white-space: normal; text-align: center; }
}
@media (max-width: 560px) {
  .col-fecha { display: none; }
  .demo-tabla th, .demo-tabla td { padding-inline: .45rem; }
  .demo-tabla th:first-child, .demo-tabla td:first-child { padding-left: .9rem; width: 2rem; }
  .demo-tabla .res { width: auto; }
  .demo-tabla td:nth-child(3) { font-size: .875rem; line-height: 1.3; }
  .pill-demo { font-size: .75rem; padding: .15rem .5rem; }
  .demo-avance { max-width: none; }
  .panel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-kpis b { font-size: 1.375rem; }
  .panel-fila { grid-template-columns: 1fr auto; }
  .panel-fila span:nth-child(2) { display: none; }
  .flujo-chico { flex-direction: column; align-items: flex-start; }
  .flujo-chico .flecha { transform: rotate(90deg); margin-left: 1rem; }
  .muro { padding-inline: .5rem; }
  .paso p { padding-left: 0; }
  .sistemas li { flex-direction: column; gap: .1rem; }
  .sistemas span { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}