/* ============================================================
   AGRUPA — EL SITIO (agrupa.co)
   La landing y el alta. Va DESPUÉS de `agrupa.css`, que trae la
   Inter vendorizada y los tokens de marca.

   Por qué existe esta hoja aparte: es la única superficie del
   despliegue con esta piel — crema cálida, titulares enormes y
   manchas pastel. El ERP no la usa, y meterla en `agrupa.css`
   sería cargarla en cada petición de la flota.

   La tipografía de títulos es Gabarito, la misma que el POS ya
   vendoriza. Ni una fuente nueva, ni un CDN: un ERP no depende
   de un tercero en runtime, y esta página tampoco.

   El arte (la mancha del hero, las tres ilustraciones) se generó
   UNA vez y vive commiteado en `img/site/`. La página no llama a
   ningún servicio para pintarse.
   ============================================================ */

@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/gabarito-latin.9b32370280ab.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/gabarito-latin-ext.63c8fe7d1053.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.site {
    /* El lienzo es crema CÁLIDA, no blanco: el blanco puro con tinta negra
       es papel de oficina; la crema es papel de libro. La tinta no es negra
       pura sino negra con el morado de la marca adentro — se nota en los
       titulares grandes, que es donde vive. */
    --site-paper: #f6f4ef;
    --site-ink: #17141f;
    --site-dim: #5c5769;
    --site-faint: #8b8595;
    --site-line: rgba(23, 20, 31, .10);
    --site-line-hi: rgba(23, 20, 31, .22);
    --site-card: #fffdfa;
    --site-display: 'Gabarito', var(--font);

    background: var(--site-paper);
    color: var(--site-ink);
}

/* `:not(.site-btn)`: `body.site a` pesa (0,1,2) y sin la exclusión le gana
   el color a `.site-btn-primary` (0,1,0) — tinta sobre tinta. En el sitio
   oscuro nunca se vio porque la tinta era blanca, que era lo que el botón
   quería de todos modos. */
body.site a:not(.site-btn) { color: inherit; }

.site h1, .site h2, .site h3 {
    font-family: var(--site-display);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
}

/* Solo para lectores de pantalla: el rotor del hero es decoración y la
   lista completa se lee acá. */
.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;
}

/* ── El listón de arriba: VIDRIO LÍQUIDO ─────────────────────────────────
   AHORA SÍ SE PEGA al hacer scroll, y eso revierte la decisión de antes
   —«una barra fija se come 60px de un móvil para un menú que nadie
   vuelve a usar»—. La razón del cambio: Renzo pidió el efecto
   (2026-08-10), y un vidrio con nada pasando por detrás no es un vidrio,
   es un panel gris. La objeción vieja se paga con la FORMA: una píldora
   que flota separada del borde, no una barra de lado a lado.

   El efecto son tres capas, y ninguna sobra:
   1. `blur + saturate` — el esmerilado de siempre. La saturación es la
      que hace que el color de abajo se vea VIVO a través del vidrio en
      vez de lavado.
   2. `url(#vidrio-liquido)` — la refracción del referente. Va en una
      SEGUNDA declaración a propósito: el navegador que no sepa parsearla
      se queda con la línea de arriba (esmerilado sin refracción) en vez
      de perder el `backdrop-filter` entero.
   3. Los `inset` del `box-shadow` — el brillo especular del canto, que
      es lo que se lee como vidrio y no como rectángulo translúcido.

   El fondo lleva alfa ALTO (.74 → .56) a propósito y no por miedo: la
   píldora pasa por encima de la franja negra del tunnel, y con menos
   opacidad la tinta oscura sobre negro dejaría de leerse. Es la nota de
   accesibilidad del referente, la única que no es cosmética.

   El desenfoque es de 8px por pedido de Renzo (2026-08-10): a 18 el
   fondo se disolvía en una pasta y el vidrio dejaba de dejar VER —a
   este radio todavía se reconoce lo que pasa por detrás, que es lo que
   lo hace vidrio y no papel calcante. */
.site-nav {
    position: sticky; top: 10px; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    max-width: 1180px;
    /* Ancho con aire a los lados: pegada al filo, la píldora se lee como
       una barra recortada. */
    width: calc(100% - clamp(20px, 5vw, 40px));
    margin: 10px auto 0;
    padding: 10px 12px 10px 22px;
    border-radius: 999px;
    /* El degradado vertical es lo que lo hace leer como un CANTO de
       vidrio y no como un panel translúcido: más luz arriba, donde
       pegaría el reflejo. El alfa de abajo no baja de .55 y eso no es
       gusto — es el piso al que la tinta sigue pasando AA sobre la
       franja negra del tunnel. */
    background: linear-gradient(180deg,
                rgba(255, 255, 255, .74), rgba(255, 253, 250, .56));
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),
        inset 0 -1px 1px rgba(23, 20, 31, .05),
        0 22px 45px -28px rgba(23, 20, 31, .55);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    backdrop-filter: blur(8px) saturate(180%);
    backdrop-filter: blur(8px) saturate(180%) url(#vidrio-liquido);
}
/* Sin esmerilado no hay vidrio: el fondo se vuelve sólido para que la
   tinta se lea igual sobre la franja negra. */
@supports not ((backdrop-filter: blur(2px)) or
               (-webkit-backdrop-filter: blur(2px))) {
    .site-nav { background: var(--site-card); }
}
/* El filtro vive en el documento pero no ocupa lugar. */
.vidrio-defs { position: absolute; width: 0; height: 0; }
.site-nav-brand { display: flex; align-items: center; color: var(--site-ink); }
/* El logo es la pieza de la casa (`ui/_brand.html`), inline: el wordmark en
   la tinta del sitio y el isotipo con sus puntos al alcance de la hoja. */
.site-nav-brand .brand-logo { height: 26px; }
/* Al pasar el puntero, el isotipo hace el gesto del que piensa (`isocheck`):
   el anillo de puntos da un tercio de vuelta apretándose y el centro late. Un
   tercio de vuelta deja los seis puntos donde estaban: no hay salto al final.
   `g:first-of-type` es el grupo de los siete puntos y el último, el centro. */
.site-nav-brand .brand-logo g:first-of-type circle {
    transform-box: view-box; transform-origin: 330.93px 330.93px;
}
.site-nav-brand:hover .brand-logo g:first-of-type circle:not(:last-child) {
    animation: marca-anillo .9s cubic-bezier(.65, 0, .35, 1);
}
.site-nav-brand:hover .brand-logo g:first-of-type circle:last-child {
    animation: marca-centro .9s ease-in-out;
}
@keyframes marca-anillo {
    0%   { transform: rotate(0deg) scale(1); }
    45%  { transform: rotate(75deg) scale(.86); }
    100% { transform: rotate(120deg) scale(1); }
}
@keyframes marca-centro {
    0%, 100% { transform: scale(1); }
    40%      { transform: scale(.55); }
}
.site-nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); }
/* `:not(.site-btn)`: sin la exclusión, esta regla de contexto (0,1,1) le
   gana a `.site-btn-primary` (0,1,0) y pinta tinta sobre tinta — la MISMA
   forma de defecto que ya cazaron dos veces las pruebas de cascada. */
/* TINTA PLENA y no el gris apagado del resto de la página: el listón es
   ahora vidrio y pasa por encima de la franja NEGRA del tunnel. Ahí, el
   gris (`--site-dim`) sobre el vidrio da 2,5:1 —ilegible, y es justo la
   trampa que el referente advierte de los contenedores refractivos—
   mientras que la tinta da 6,5:1. Sobre crema se lee un punto más firme
   que antes, que en una barra de cuatro enlaces no sobra. */
.site-nav-links > a:not(.site-btn) { color: var(--site-ink); font-size: var(--fs-body); }
.site-nav-links > a:not(.site-btn):hover { color: var(--primary); }
/* Los enlaces de sección se van en móvil: el botón de crear cuenta es lo
   único que tiene que sobrevivir al ancho de un teléfono. */
@media (max-width: 640px) {
    .site-nav-links > a:not(.site-btn) { display: none; }
    /* Y el listón se APRIETA. Ahora que se pega, tiene que caber en una
       sola línea: con el tamaño de escritorio «Crear mi empresa» se
       partía en dos y la píldora subía a 90px, que es exactamente lo que
       la decisión vieja no quería regalarle a un teléfono. */
    .site-nav { padding: 8px 8px 8px 16px; gap: 10px; }
    .site-nav .site-btn {
        padding: 10px 15px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* ── Botones ─────────────────────────────────────────────────────────────
   Tres pesos y no más: uno que empuja, uno que acompaña, uno que casi no
   está. El primario es la píldora NEGRA — sobre crema, el negro es el color
   que más grita — y el morado de marca aparece al tocarla. */
.site-btn {
    display: inline-flex; align-items: baseline; gap: 9px;
    padding: 13px 24px; border-radius: 999px;
    font-size: var(--fs-body); font-weight: 600;
    border: 1px solid transparent;
    transition: transform .16s ease, background .16s ease,
                border-color .16s ease, box-shadow .16s ease,
                color .16s ease;
}
.site-btn:hover { transform: translateY(-1px); }
.site-btn:active { transform: translateY(0); }
/* Los del header se quedan quietos (Renzo, 2026-10-23): la barra es fija y un
   botón que se mueve en ella se lee como un salto de la barra entera. */
.site-nav .site-btn:hover, .site-nav .site-btn:active { transform: none; }

.site-btn-primary {
    background: var(--site-ink); color: #fff;
    box-shadow: 0 14px 30px -16px rgba(23, 20, 31, .55);
}
.site-btn-primary:hover { background: var(--primary); }
.site-btn-note {
    font-weight: 500; font-size: var(--fs-small, 12px);
    color: rgba(255, 255, 255, .68);
}

.site-btn-ghost {
    border-color: var(--site-line-hi); color: var(--site-ink);
    background: var(--site-card);
}
.site-btn-ghost:hover { border-color: var(--site-ink); }

.site-btn-quiet { color: var(--site-dim); padding-left: 6px; padding-right: 6px; }
.site-btn-quiet:hover { color: var(--site-ink); }

.site :is(a, button, input, select):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ── El titular ──────────────────────────────────────────────────────────
   Centrado y ENORME, con la mancha pastel respirando detrás. La entrada es
   UNA coreografía escalonada y no seis micro-animaciones sueltas: el ojo
   lee de arriba abajo una sola vez, y ése es el momento. */
.hero {
    position: relative; z-index: 1;
    /* SIN max-width: el campo de metaballs es de borde a borde de la
       pantalla. El texto no lo extraña — cada pieza trae su propio ancho
       (el titular 20ch, el lede 56ch) y el flex las centra. */
    margin: 0 auto;
    padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 40px) clamp(56px, 8vw, 100px);
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    /* La mancha sangra un 10% por cada lado; sin esto, ese sangrado es una
       barra de scroll horizontal en cualquier pantalla entre 900 y 1100. */
    overflow: hidden;
}
/* La rejilla de puntos, como papel milimetrado: se apaga hacia los bordes
   con la máscara para no volverse textura de fondo de toda la página. */
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background-image: radial-gradient(var(--site-line-hi) 1px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .6;
    -webkit-mask-image: radial-gradient(85% 95% at 50% 40%, #000 40%, transparent 85%);
            mask-image: radial-gradient(85% 95% at 50% 40%, #000 40%, transparent 85%);
}
/* La mancha es una imagen generada una vez, no un filtro en vivo: un blur
   de 90px sobre toda la cabecera es lo que hace que un teléfono caliente.
   La máscara la funde con la crema para que no se le vean los bordes. */
.hero-art {
    position: absolute; inset: -6% -10% auto; z-index: -1;
    margin: 0; pointer-events: none;
}
.hero-art img {
    width: 100%; height: auto; display: block;
    -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 96%);
            mask-image: radial-gradient(closest-side, #000 40%, transparent 96%);
    transition: opacity .8s ease;
}
/* El canvas de metaballs vive ENCIMA de la foto con la misma máscara; el
   módulo apaga la foto solo cuando ya está pintando (`.hero-live`). La foto
   se esconde con opacity y no con display: es ella la que le da tamaño a la
   figura. */
.hero-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    /* La elipse va MÁS ANCHA que el propio canvas: a pantalla completa los
       costados quedan llenos y la máscara solo funde el campo contra la
       crema por arriba y por abajo. */
    -webkit-mask-image: radial-gradient(140% 105% at 50% 45%, #000 55%, transparent 98%);
            mask-image: radial-gradient(140% 105% at 50% 45%, #000 55%, transparent 98%);
}
.hero-live .hero-art img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .hero-canvas { display: none; }
}

.hero > * {
    animation: site-rise .7s cubic-bezier(.22, .8, .3, 1) backwards;
}
.hero > :nth-child(2) { animation-delay: .02s; }
.hero > :nth-child(3) { animation-delay: .10s; }
.hero > :nth-child(4) { animation-delay: .20s; }
.hero > :nth-child(5) { animation-delay: .30s; }
.hero > :nth-child(6) { animation-delay: .38s; }
.hero > :nth-child(7) { animation-delay: .44s; }

@keyframes site-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 26px;
    font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--site-dim);
}
.eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(124, 92, 240, .18);
}

.hero-title {
    /* Grande pero no protagonista único: a 100px con `max-width: 14ch` el
       titular metía saltos EXTRA a los del <br> y se comía la pantalla
       entera. El ancho en 20ch deja mandar a los <br> — tres líneas. */
    font-size: clamp(36px, 5.2vw, 68px);
    line-height: 1;
    letter-spacing: -.035em;
    font-weight: 800;
    max-width: 20ch;
}
/* La línea del medio es la que carga el argumento, y por eso es la única
   que cambia de color. Tres acentos en un titular no acentúan nada. */
.hero-title em {
    font-style: normal;
    color: var(--primary);
}

.hero-lede {
    max-width: 56ch; margin: 26px auto 0;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.62;
    color: var(--site-dim);
}

/* ── «Hecho para …» ──────────────────────────────────────────────────────
   El rotor de Pulze: la palabra cambia sola. Es CSS puro — un carril de
   palabras apiladas que sube con pausas—, y el carril termina repitiendo
   la primera para que el salto de vuelta no se vea. Quien apagó las
   animaciones ve la primera palabra quieta, que por eso es la genérica.

   Las paradas del keyframe están escritas para SEIS palabras: si
   `AUDIENCES` cambia de cantidad, esto se reescribe (el aviso está allá). */
/* Dos renglones y no uno (Renzo, 2026-10-07): en la misma línea, la caja
   del rotor mide lo que la palabra más larga y las cortas quedaban
   pegadas a su izquierda —«Hecho para tiendas» se veía corrido—. Debajo,
   cada palabra se centra sola. */
.hero-made {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px;
    margin: 22px 0 0;
    font-size: clamp(16px, 1.8vw, 21px);
    color: var(--site-dim);
}
.rotor {
    display: inline-block; overflow: hidden;
    height: 1.35em;
    text-align: center;
}
.rotor-track {
    display: block;
    animation: rotor 14.4s cubic-bezier(.7, 0, .2, 1) infinite;
}
.rotor-word {
    display: block; height: 1.35em; line-height: 1.35;
    font-family: var(--site-display);
    font-weight: 700;
    color: var(--site-ink);
}
@keyframes rotor {
    0%, 13%      { transform: translateY(0); }
    16.6%, 29.6% { transform: translateY(-1.35em); }
    33.3%, 46.3% { transform: translateY(-2.7em); }
    50%, 63%     { transform: translateY(-4.05em); }
    66.6%, 79.6% { transform: translateY(-5.4em); }
    83.3%, 96.3% { transform: translateY(-6.75em); }
    100%         { transform: translateY(-8.1em); }
}

.hero-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 14px;
    margin: 36px 0 0;
}
.hero-fine { margin: 20px 0 0; font-size: 13px; color: var(--site-faint); }

/* ── Las secciones ───────────────────────────────────────────────────────
   Numeradas, como un documento técnico. Es la decisión de tono de la
   página: Agrupa no es una app alegre, es el sistema donde va a vivir la
   contabilidad de alguien. */
.strip {
    position: relative; z-index: 1;
    max-width: 1180px; margin: 0 auto;
    padding: clamp(52px, 8vw, 96px) clamp(20px, 5vw, 40px);
    border-top: 1px solid var(--site-line);
}
.section-head { max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 48px); }
.section-num {
    margin: 0 0 14px;
    font-family: var(--site-display);
    font-size: 12px; font-weight: 700; letter-spacing: .22em;
    color: var(--primary);
}
/* `agrupa.css` también tiene un `.section-title` (el rótulo uppercase gris
   de las fichas del ERP) y comparte especificidad: hay que declarar TODO lo
   que él toca —color, transform, margen— o el del ERP se cuela por debajo. */
.section-title {
    font-size: clamp(28px, 4vw, 46px); line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--site-ink);
    text-transform: none;
    margin: 0;
    /* El corte lo decide el navegador y NO el texto. Los titulares traían
       su salto a mano, escrito mirando una pantalla ancha, y en un
       teléfono peleaba con el salto natural: «Nadie debería necesitar un
       / curso / para vender un café», con el renglón del medio de una
       palabra (Renzo lo cazó en el móvil). `balance` reparte los renglones
       parejo en CUALQUIER ancho — y donde no exista, el texto simplemente
       fluye, que ya es mejor que el salto fijo. */
    text-wrap: balance;
}
.section-lede {
    margin: 16px 0 0; font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.6; color: var(--site-dim);
}

/* ── El índice de los dolores ────────────────────────────────────────────
   Ocupa el lugar que tenían las cifras bajo el hero. Es una fila de cinco
   con filete arriba, del mismo lenguaje que la rejilla de módulos: la
   página se lee como un documento, no como un folleto.

   `auto-fit` con mínimo de 168px y no cinco columnas fijas: a 1180px caben
   los cinco holgados, y al angostarse se parten en 3+2 y luego en 2+2+1
   solos. Con `repeat(5, 1fr)` el quinto rótulo —el más largo— se partía en
   cuatro renglones antes de que la fila se dignara a quebrarse. */
.pain-index {
    max-width: 1180px; margin: 0 auto;
    /* Más aire arriba y abajo (Renzo, 2026-10-23: «lo sigo viendo muy
       peque»): más del doble de lo que tenía. */
    padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 40px) clamp(28px, 4.6vw, 56px);
}
/* El encabezado del índice (Renzo, 2026-10-07): el título manda —morado,
   grande, sin versalitas— y a su lado el isotipo que piensa y resuelve. */
.pain-index-cabeza {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 24px;
}
.pain-index-title {
    margin: 0;
    font-family: var(--site-display);
    font-size: clamp(24px, 2.6vw, 34px); font-weight: 800;
    letter-spacing: -.02em; line-height: 1.1;
    color: var(--primary);
}

/* El isotipo que piensa y resuelve: un ciclo de 6 s. El logo quieto
   (0–12 %), piensa —el anillo gira como el loader y el centro late—
   (12–50 %), recoge los puntos (50–62 %), dibuja el chulo (62–74 %), lo
   sostiene y vuelve al logo. Con menos movimiento: el logo quieto. */
.isocheck { width: clamp(40px, 4vw, 52px); height: auto; flex: none; }
.isocheck-disco { fill: var(--primary); }
.isocheck-anillo, .isocheck-centro {
    fill: #fff;
    transform-box: view-box; transform-origin: 50% 50%;
}
.isocheck-anillo { animation: isocheck-anillo 6s cubic-bezier(.65, 0, .35, 1) infinite; }
.isocheck-centro { animation: isocheck-centro 6s ease-in-out infinite; }
.isocheck-chulo {
    fill: none; stroke: #fff; stroke-width: 70;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: isocheck-chulo 6s ease-in-out infinite;
}
@keyframes isocheck-anillo {
    0%, 12%   { transform: rotate(0deg) scale(1); }
    30%       { transform: rotate(240deg) scale(.86); }
    50%       { transform: rotate(480deg) scale(1); }
    62%, 92%  { transform: rotate(600deg) scale(0); }
    100%      { transform: rotate(720deg) scale(1); }
}
@keyframes isocheck-centro {
    0%, 12%   { transform: scale(1); }
    22%       { transform: scale(.55); }
    32%       { transform: scale(1); }
    42%       { transform: scale(.55); }
    56%, 92%  { transform: scale(0); }
    100%      { transform: scale(1); }
}
@keyframes isocheck-chulo {
    0%, 62%   { stroke-dashoffset: 1; }
    74%, 90%  { stroke-dashoffset: 0; }
    97%, 100% { stroke-dashoffset: 1; }
}
/* Ocho dolores en 4 + 4 (2026-10-07): con `auto-fit` salían 5 + 3 y el
   hueco de la derecha se leía como un error. En angosto, 2 + 2 + 2 + 2. */
.pain-index-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 760px) {
    .pain-index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pain-index-item { border-top: 1px solid var(--site-line-hi); }
/* El área de clic es el `<a>` entero y no el rótulo: en un teléfono, un
   enlace de 13px de alto es un blanco que se falla. */
.pain-index-item > a {
    display: grid; gap: 8px;
    padding: 16px 0 22px;
    text-decoration: none;
}
.pain-index-num {
    font-family: var(--site-display);
    font-size: 12px; font-weight: 700; letter-spacing: .18em;
    color: var(--primary);
}
.pain-index-name {
    font-family: var(--site-display);
    font-size: clamp(15px, 1.5vw, 17px); font-weight: 700;
    line-height: 1.25; letter-spacing: -.01em;
    color: var(--site-ink);
}
.pain-index-item > a:hover .pain-index-name { color: var(--primary); }
/* La línea que explica el nombre corto (2026-10-07): el nombre solo era
   ambiguo. Una frase chica, en tinta apagada: el nombre sigue mandando. */
.pain-index-hint {
    font-size: 14px; line-height: 1.4;
    color: var(--site-dim);
}

/* ── La franja OSCURA de la apertura ─────────────────────────────────────
   Negra de borde a borde (el body queda crema siempre); adentro, la columna
   de las demás secciones. Hasta el 2026-10-23 alojaba el túnel de datos;
   desde entonces, la ronda del equipo, armada por el motor como cualquier
   escena (`data-escena` en la sección, el grid de `.escena` en
   `.tunnel-inner`). */
.strip-tunnel {
    max-width: none;
    padding: 0;
    background: #0f0f0f;
    border-top: 0;
}
.tunnel-inner {
    max-width: 1180px;
    margin-left: auto; margin-right: auto;
    padding-inline: clamp(20px, 5vw, 40px);
}
.strip-tunnel .escena-dolor { color: #fffdfa; }
/* El texto un poco más arriba que el centro (Renzo, 2026-10-23): una fila
   vacía arriba y otra del doble abajo se reparten lo que sobra del alto de
   la ronda. */
@media (min-width: 761px) {
    .strip-tunnel .escena {
        grid-template-areas: ". lienzo" "num lienzo" "dolor lienzo" "promesa lienzo" ". lienzo";
        grid-template-rows: 1fr auto auto auto 2fr;
    }
}
.strip-tunnel .section-title { color: #fffdfa; }
.strip-tunnel .section-lede { color: #b3aecb; }
body.site .strip-tunnel .escena-modulos a { color: #c9b4ff; }

/* ── La ronda del equipo (2026-10-23) ────────────────────────────────────
   El Jefe al centro y seis agentes, cada uno con su pastilla colgando
   debajo; cada agente se ubica por el centro de su caja (`--x`/`--y`, en %
   de la ronda). En escritorio la red que los une la dibuja `site-ronda.js`
   en el lienzo de atrás (`.ronda-viva`, más abajo).

   VIDRIO LÍQUIDO SIN `backdrop-filter`: encima del lienzo animado, cada
   desenfoque se recalcula en cada cuadro (fue lo que congeló el núcleo del
   hero, 2026-10-23). El vidrio se arma con capas: relleno translúcido
   teñido, brillo especular, filo de luz, sombra y halo. */
.ronda {
    /* La ronda es un círculo (Renzo: «más circular»): `--radio` es la
       distancia de cada agente al Jefe, la misma de lado que de alto, y deja
       arriba y abajo lugar para el avatar y su pastilla. */
    --alto: clamp(460px, calc(100svh - 180px), 620px);
    --radio: min(220px, calc(var(--alto) / 2 - 100px));
    position: relative;
    width: 100%; max-width: 640px; margin-inline: auto;
    height: var(--alto);
}
/* El lienzo de la red cubre la sección entera (`site-ronda.js` lo pone de
   primer hijo): la rejilla llega hasta el texto, que va encima. */
.ronda-cables {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
}
.strip-tunnel .tunnel-inner { position: relative; z-index: 1; }
/* Las burbujas que flotan al fondo. */
.ronda-burbuja {
    position: absolute; left: var(--bx, 50%); top: var(--by, 50%);
    width: var(--bs, 8px); height: var(--bs, 8px); border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(140, 170, 255, .25) 45%, rgba(40, 50, 90, .2));
    box-shadow: 0 0 10px rgba(140, 170, 255, .35);
    animation: ronda-flota 7s ease-in-out infinite var(--bd, 0s);
}
@keyframes ronda-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* El Jefe: su esfera grande con anillos y, debajo, «Procesando…». La caja
   es SOLO la esfera: `translate(-50%, -50%)` la centra en el medio. */
.ronda-jefe {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.ronda-jefe-orbe {
    position: relative;
    width: clamp(130px, 14vw, 170px); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center;
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .16), transparent 34%),
        radial-gradient(circle at 50% 55%, rgba(124, 92, 240, .28), rgba(16, 12, 30, .55) 70%);
    border: 1px solid rgba(201, 180, 255, .3);
    box-shadow:
        0 0 70px rgba(124, 92, 240, .35),
        inset 0 0 40px rgba(167, 139, 250, .18),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.ronda-jefe-cara { display: block; width: 74%; height: auto; aspect-ratio: 1; }
.ronda-jefe-pie {
    position: absolute; left: 50%; top: 100%;
    transform: translateX(-50%);
    margin-top: 12px;
    display: grid; justify-items: center; gap: 8px;
    white-space: nowrap;
}
.ronda-jefe-nombre {
    margin: 0;
    font-family: var(--site-display); font-size: 17px; font-weight: 700;
    color: #fffdfa;
}
.ronda-piensa {
    margin: 0; display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 12px 4px 10px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    font-size: 12px; color: #cfc8ea;
}
.ronda-piensa::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 8px #4ade80;
}
.ronda-piensa span { animation: ronda-piensa 1.2s ease-in-out infinite; }
.ronda-piensa span:nth-child(2) { animation-delay: .2s; }
.ronda-piensa span:nth-child(3) { animation-delay: .4s; }
@keyframes ronda-piensa { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* Cada agente: la caja es su avatar, centrado en (--x, --y), sin círculo
   alrededor (Renzo, 2026-10-23); la pastilla cuelga debajo. */
.ronda-agentes { list-style: none; margin: 0; padding: 0; }
.ronda-agente {
    position: absolute;
    left: calc(50% + cos(var(--a, 0deg)) * var(--radio, 200px));
    top: calc(50% + sin(var(--a, 0deg)) * var(--radio, 200px));
    transform: translate(-50%, -50%);
}
.ronda-orbe { position: relative; z-index: 2; display: grid; place-items: center; width: 64px; }
.ronda-cara { display: block; width: 64px; height: 64px; }

/* LA PASTILLA (Renzo, 2026-10-23: «tipo pills como lo que tenemos ya en la
   primera sección», «no con colores»): la de las pastillas del núcleo del
   hero (`.nucleo-pastilla`, en site-nucleo.css) —fondo morado casi opaco,
   filo lila, sombra morada, 13 px—, con el nombre y lo que hizo en una
   línea. Cuelga debajo del avatar, centrada. */
.ronda-pastilla {
    position: absolute; top: calc(100% + 6px); left: 50%; z-index: 1;
    transform: translateX(var(--abre, -50%));
    display: inline-flex; align-items: center; gap: 8px;
    width: max-content; max-width: 250px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(24, 16, 48, .94); color: #f4f1ff;
    border: 1px solid rgba(185, 140, 255, .45);
    box-shadow: 0 10px 30px -10px rgba(124, 92, 240, .7);
    font-size: 13px; font-weight: 600; white-space: nowrap;
}
.ronda-nombre { flex: none; color: #f4f1ff; }
/* Las dos frases en la misma celda: el ancho es el de la más larga y nada
   salta. Sin movimiento queda la primera. */
.ronda-frases { display: grid; min-width: 0; font-weight: 500; color: #c9b4ff; }
.ronda-frase { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; }
.ronda-frase:first-child { animation: ronda-frase-1 9s ease-in-out infinite var(--d, 0s); }
.ronda-frase:last-child {
    opacity: 0;
    animation: ronda-frase-2 9s ease-in-out infinite var(--d, 0s);
}
/* Una sale ANTES de que entre la otra: cruzadas, se leían encimadas. */
@keyframes ronda-frase-1 { 0%, 40% { opacity: 1; } 45%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes ronda-frase-2 { 0%, 45% { opacity: 0; } 50%, 89% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* LA RED DE LA RONDA (2026-10-23): cuando `site-ronda.js` arranca, marca la
   ronda `ronda-viva` y la rejilla de puntos del hero, con sus conexiones y
   su latido, queda de fondo. Sin burbujas, y el Jefe sin su esfera: la red
   le hace de fondo. Los avatares son los de siempre, del tamaño que tenían
   los personajes de puntos, para que la red quede igual. */
@media (min-width: 761px) {
    .ronda-viva .ronda-burbuja { display: none; }
    .ronda-viva .ronda-jefe-orbe { background: none; border: 0; box-shadow: none; }
    .ronda-viva .ronda-jefe-cara { width: 92%; }
    /* El pie, pegado a su cabeza: los agentes de abajo pasan cerca. */
    .ronda-viva .ronda-jefe-pie { margin-top: 0; gap: 6px; }
    .ronda-viva .ronda-orbe { width: 88px; }
    .ronda-viva .ronda-cara { width: 88px; height: 88px; }

    /* Viva, la ronda se arma siempre a su tamaño (620 de alto, radio 210)
       y en pantallas bajas `site-ronda.js` la escala entera (`--escala`):
       encogida a lo alto, los agentes de abajo pisaban al Jefe. El margen
       negativo le devuelve a la escena lo que la escala achica. */
    .ronda-viva {
        --alto: 620px;
        --radio: 210px;
        margin-block: calc((var(--escala, 1) - 1) * 310px);
        transform: scale(var(--escala, 1));
    }
    /* EL VÓRTICE: cada agente vive en su órbita, más atrás que la anterior,
       y la cámara gira con el mouse (`site-ronda.js`). El motor pone a cada
       agente donde cae su punto en 3D (`left`/`top`, en px), lo
       ordena por hondura (`z-index`). No se achican con la distancia: el
       avatar escalado en cada cuadro se veía borroso en Chrome (Renzo,
       2026-10-23: «que no tengan desenfoque»);
       al Jefe, el sol, también lo mueve: es la cabeza del cometa. La pastilla sube con su avatar
       y se achica menos, para que se siga leyendo. */
    /* Sin pastilla: cada agente lleva su NOMBRE, siempre visible, pegado a
       la cabeza (`.ronda-dice`, lo crea `site-ronda.js`); sube y baja con el
       avatar. Lo que hacen lo cuenta el Jefe sobre su cabeza
       (`.ronda-jefe-dice`), ya sin nombres: la frase escrita a máquina, de a
       una, un poco metida en su cabeza. El nombre del que habla se enciende. */
    .ronda-viva .ronda-pastilla { display: none; }
    .ronda-viva .ronda-dice {
        position: absolute; left: 50%; bottom: calc(100% + 4px);
        translate: -50% 0;
        display: block; margin: 0; white-space: nowrap; pointer-events: none;
    }
    /* Los de abajo, bajo la cabeza: arriba chocaban con el «Procesando». */
    .ronda-viva .ronda-dice.is-abajo {
        bottom: auto; top: calc(100% + 4px);
        translate: -50% 0;
    }
    .ronda-viva .ronda-dice .ronda-dice-quien { transition: color .3s ease, text-shadow .3s ease; }
    .ronda-viva .ronda-dice.is-hablando .ronda-dice-quien {
        color: #fff; text-shadow: 0 0 12px rgba(196, 181, 253, .95);
    }
    .ronda-viva .ronda-jefe-dice {
        position: absolute; left: 50%; bottom: calc(100% - 24px);
        translate: -50% 0;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        width: max-content; max-width: 340px; margin: 0;
        text-align: center; white-space: nowrap; pointer-events: none;
        opacity: 0; transition: opacity .3s ease;
    }
    .ronda-viva .ronda-jefe-dice.is-hablando { opacity: 1; }
}

.ronda-dice, .ronda-jefe-dice { display: none; }

/* LOS EQUIPOS (2026-10-23): un botón por departamento debajo de la ronda;
   el que se ve, encendido. Con la cara de las pastillas del hero. Al
   cambiar, los agentes que están se van (`is-fuera`) y los puestos que el
   equipo no usa quedan vacíos (`is-vacio`). */
.ronda-equipos {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-top: 18px;
}
/* En escritorio, en una sola línea y al centro de la sección, abajo
   (Renzo: «en el centro, una sola línea»): en la columna de la ronda no
   cabían y se partían en dos. */
@media (min-width: 761px) {
    .strip-tunnel .ronda-equipos {
        position: absolute; left: 50%; bottom: clamp(20px, 4vh, 44px);
        translate: -50% 0;
        flex-wrap: nowrap; margin: 0;
    }
    .strip-tunnel .ronda-equipo { white-space: nowrap; }
}
/* De VIDRIO y discretos (Renzo: «más elegantes, tipo liquid glass», y
   después «más discretos aún: sin gradient, sin bevel»): un relleno apenas
   claro, plano, con el fondo desenfocado detrás y un filo fino; sin sombra
   ni brillo. El elegido, un poco más claro. Son cinco botones chicos: el
   desenfoque cuesta poco aun con el lienzo animado detrás (el que congeló
   el hero fue un racimo de 55). */
.ronda-equipo {
    padding: 8px 16px; border-radius: 999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, .04);
    color: #cfc8ea;
    border: 1px solid rgba(255, 255, 255, .12);
    font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .01em;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ronda-equipo:hover { border-color: rgba(255, 255, 255, .26); color: #f4f1ff; }
.ronda-equipo:focus-visible { outline: 2px solid #c9b4ff; outline-offset: 2px; }
.ronda-equipo[aria-pressed="true"] {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.ronda-agente.is-vacio { display: none; }
.ronda-orbe, .ronda-dice, .ronda-pastilla { transition: opacity .35s ease; }
.ronda-agente.is-fuera .ronda-orbe,
.ronda-agente.is-fuera .ronda-dice,
.ronda-agente.is-fuera .ronda-pastilla { opacity: 0; }
.ronda-viva .ronda-dice-quien {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #b9a6f5;
}
.ronda-viva .ronda-dice-texto {
    min-height: 1.3em;
    font-size: 14px; font-weight: 600; color: #f6f2ff;
    text-shadow: 0 0 14px rgba(124, 92, 240, .9), 0 1px 2px rgba(0, 0, 0, .8);
}
.ronda-viva .ronda-dice-texto::after {
    content: ''; display: inline-block;
    width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px;
    background: #c9b4ff;
    animation: ronda-cursor 1s steps(1) infinite;
}
@keyframes ronda-cursor { 50% { opacity: 0; } }

/* En angosto la ronda se vuelve UN PANEL (Renzo, 2026-10-25: «muchos pills,
   como desorden»): el Jefe arriba y los agentes en filas dentro de una sola
   caja, separadas por un filo; sin la red ni burbujas. La pastilla se
   deshace (`display: contents`) y su nombre y su frase caen en la rejilla
   de la caja: con `subgrid` todos los nombres miden lo que el más largo y
   las frases arrancan a la misma altura. Los equipos, una fila sin bordes
   que se desliza de lado; centrada si cabe. */
@media (max-width: 760px) {
    .ronda { height: auto; max-width: 520px; }
    .ronda-cables, .ronda-burbuja { display: none; }
    .ronda-jefe {
        position: relative; z-index: 1; left: auto; top: auto; transform: none;
        display: grid; justify-items: center; margin: 0 auto 24px;
    }
    /* El Jefe sin su esfera (Renzo, 2026-10-25: «quitarle el círculo»): el
       personaje solo, sobre la rejilla de puntos. */
    .ronda-jefe-orbe { width: 112px; background: none; border: 0; box-shadow: none; }
    .ronda-jefe-cara { width: 100%; }
    .ronda-agentes { position: relative; z-index: 1; }

    /* LA REJILLA Y SU LATIDO, sin three: la misma de escritorio (un punto
       cada 26 px, tenue, que se difumina hacia los bordes) y, encima, sus
       mismos puntos en lila que solo se ven donde pasa la onda que suelta
       el Jefe cada 2,6 s (el `LATIDO` de `site-ronda.js`). Centradas en el
       personaje: 56 px es la mitad de su caja. */
    .ronda::before, .ronda::after {
        content: ''; position: absolute; z-index: 0; pointer-events: none;
        inset-inline: 0; top: calc(56px - 150px); height: 300px;
        background-position: center;
        background-size: 26px 26px;
    }
    .ronda::before {
        background-image: radial-gradient(circle, rgba(245, 242, 255, .3) 1px, transparent 1.6px);
        -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
        mask-image: radial-gradient(closest-side, #000 35%, transparent);
    }
    .ronda::after {
        background-image: radial-gradient(circle, #d4b8ff 1.9px, transparent 2.6px);
        -webkit-mask-image: radial-gradient(circle, transparent calc(var(--onda) - 26px), #000 var(--onda), transparent calc(var(--onda) + 26px));
        mask-image: radial-gradient(circle, transparent calc(var(--onda) - 26px), #000 var(--onda), transparent calc(var(--onda) + 26px));
        opacity: 0;
        animation: ronda-latido 2.6s ease-out infinite;
    }
    .ronda-jefe-pie { position: static; transform: none; margin-top: 14px; gap: 6px; }
    .ronda-piensa { padding: 0; background: none; border: 0; box-shadow: none; }

    /* El panel guarda el alto de los seis puestos aunque el equipo traiga
       menos (Renzo, 2026-10-25: «que no se reduzca, hace un salto maluco»):
       cada fila mide `--fila` y los puestos vacíos dejan su hueco abajo. */
    .ronda-agentes {
        --fila: 61px;
        display: grid; grid-template-columns: auto auto minmax(0, 1fr);
        align-content: start;
        box-sizing: content-box; min-height: calc(var(--fila) * 6);
        column-gap: 12px; padding: 4px 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, .035);
        border: 1px solid rgba(255, 255, 255, .08);
    }
    .ronda-agente {
        position: static; transform: none;
        grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
        align-items: center; padding: 10px 0;
        box-sizing: border-box; min-height: var(--fila);
    }
    .ronda-agente + .ronda-agente { border-top: 1px solid rgba(255, 255, 255, .06); }
    .ronda-orbe { width: 40px; }
    .ronda-cara { width: 40px; height: 40px; }
    .ronda-pastilla { display: contents; }
    .ronda-nombre { font-size: 15px; font-weight: 600; }
    .ronda-frases { font-size: 14px; color: #a59cc8; }
    .ronda-frase { white-space: nowrap; }
    /* Deshecha la pastilla no tiene opacidad propia: al cambiar de equipo se
       van su nombre y su frase. */
    .ronda-nombre, .ronda-frases { transition: opacity .35s ease; }
    .ronda-agente.is-fuera .ronda-nombre,
    .ronda-agente.is-fuera .ronda-frases { opacity: 0; }

    .ronda-equipos {
        flex-wrap: nowrap; justify-content: flex-start; gap: 4px;
        margin-top: 14px; padding-inline: 12px;
        overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 28px), transparent);
    }
    .ronda-equipos::-webkit-scrollbar { display: none; }
    .ronda-equipo:first-child { margin-left: auto; }
    .ronda-equipo:last-child { margin-right: auto; }
    .ronda-equipo {
        flex: none; white-space: nowrap; padding: 7px 12px;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        background: none; border-color: transparent; color: #8c84aa;
    }
    .ronda-equipo[aria-pressed="true"] { background: rgba(255, 255, 255, .1); border-color: transparent; }
}
/* La onda se anima por su radio: registrado, el navegador sabe interpolarlo. */
@property --onda { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes ronda-latido {
    0%   { --onda: 0px;   opacity: 1; }
    40%  { opacity: 1; }
    75%  { --onda: 200px; opacity: 0; }
    100% { --onda: 200px; opacity: 0; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
    .ronda::after { display: none; }
}

/* El clic del índice no deja el titular pegado al filo. */
.strip-dolor { scroll-margin-top: clamp(16px, 4vw, 40px); }

/* ── Las escenas: del 02 al 06 (2026-10-06) ──────────────────────────────
   Cada dolor ocupa la pantalla: el dolor GIGANTE en la voz del cliente,
   el dibujo que se arma, la promesa y los módulos al pie. Lo que escribe
   el HTML es el estado final; `site-escenas.js` lo esconde y lo devuelve
   atado al scroll, así que nada de acá se anima con CSS (la píldora y el
   sello de la DIAN traen lo suyo). Los dibujos son ilustraciones de la
   idea, NO capturas del ERP. */
/* En escritorio la escena es UNA pantalla, porque se fija mientras se
   arma: si algo queda por debajo del filo, no se ve nunca. Por eso dos
   columnas —el dolor y la promesa a la izquierda, el dibujo a la derecha—
   y no una pila: apilados, un dolor de cinco renglones empujaba la promesa
   fuera de la pantalla (se vio a 1280×800). `display: contents` en el
   cuerpo deja que sus dos hijos caigan en las áreas de la sección. */
.escena {
    min-height: 100svh;
    padding-block: clamp(40px, 7vh, 72px);
    display: grid; align-content: center;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "num lienzo" "dolor lienzo" "promesa lienzo";
    gap: 18px clamp(32px, 5vw, 72px);
    /* Las piezas que entran «desde la derecha» esperan corridas 80px hasta
       que su escena llega: sin recorte ensanchaban la página del teléfono.
       `clip` y no `hidden`: no crea un contenedor de scroll. */
    overflow-x: clip;
}
.escena > .section-num { grid-area: num; margin: 0; }
.escena-dolor {
    grid-area: dolor;
    margin: 0; max-width: 20ch;
    font-family: var(--site-display);
    font-size: clamp(30px, 3.6vw, 52px);
    font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
    color: var(--site-ink);
    text-wrap: balance;
}
.escena-cuerpo { display: contents; }
/* El dolor TACHADO de una escena de dos actos (2026-10-07). Este es el
   estado final —el de sin JS—: tinta apagada y la línea morada encima. El
   fondo de un `<span>` en línea se reparte entre sus renglones como una
   sola tira, así que el motor, al crecer su ancho de 0 a 100 %, lo tacha
   renglón por renglón. */
.escena-dolor-texto {
    color: var(--site-faint);
    background: linear-gradient(var(--primary), var(--primary)) no-repeat 0 58% / 100% .08em;
}
/* EL AVANCE de una escena fijada (`data-avance`, lo arma `site-escenas.js`;
   2026-10-23): a la derecha, una barra vertical que se llena con la escena
   y, debajo, el porcentaje que lleva. Toma el color del texto de su escena. */
[data-escena] { position: relative; }
.escena-avance {
    position: absolute; right: clamp(16px, 2.6vw, 40px); top: 50%; z-index: 3;
    translate: 0 -50%;
    display: grid; justify-items: center; gap: 10px;
    pointer-events: none;
}
.escena-avance-riel {
    position: relative; width: 3px; height: clamp(120px, 22vh, 200px);
    border-radius: 3px; overflow: hidden;
    background: color-mix(in srgb, currentColor 18%, transparent);
}
.escena-avance-lleno {
    position: absolute; inset: 0; border-radius: inherit;
    background: currentColor;
    transform: scaleY(0); transform-origin: 50% 0;
}
.escena-avance-cifra {
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
    opacity: .8;
}
.strip-tunnel .escena-avance { color: #e9e2ff; }

/* Lo que solo existe antes del giro: sin el motor andando, no se pinta. */
html:not(.escenas-vivas) [data-antes] { display: none; }
.escena-lienzo { grid-area: lienzo; align-self: center; }
.escena-promesa { grid-area: promesa; }
.escena-promesa .section-title { font-size: clamp(24px, 2.6vw, 34px); }
.escena-modulos {
    margin: 20px 0 0;
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
/* `body.site a` pesa (0,1,2): sin subir a (0,2,2) el morado no llega. */
body.site .escena-modulos a { color: var(--primary); text-decoration: none; }
body.site .escena-modulos a:hover { text-decoration: underline; }

/* 02 — El hilo. Las burbujas son del mismo papel; el canal lo dice el
   punto de color, no la burbuja entera: el hilo es UNO. */
.escena-hilo {
    display: grid; gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
    align-items: start;
}
/* La bandeja de todos los canales (2026-10-07): cada mensaje con su dueño y
   su estado; arriba, lo que importa, «Sin responder: 0». */
.bandeja {
    border-radius: 18px; overflow: hidden;
    background: var(--site-card); border: 1px solid var(--site-line);
    box-shadow: 0 18px 40px -30px rgba(23, 20, 31, .45);
}
.bandeja-titulo {
    margin: 0; padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--site-line);
    font-family: var(--site-display); font-size: 15px; font-weight: 700;
}
.bandeja-cero {
    padding: 3px 10px; border-radius: 999px;
    background: #dcfce7; color: #166534;
    font-size: 12px; font-weight: 800;
}
.bandeja-lista { list-style: none; margin: 0; padding: 0; }
.bandeja-fila {
    display: grid; gap: 2px 12px; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--site-line);
}
.bandeja-fila:last-child { border-bottom: 0; }
.bandeja-fila .hilo-canal { grid-column: 1 / -1; }
.bandeja-quien { font-size: 15px; font-weight: 600; color: var(--site-ink); }
.bandeja-estado { font-size: 13px; color: var(--site-dim); }
.bandeja-ok { color: #166534; font-weight: 600; }
.hilo-msg {
    display: grid; gap: 4px; max-width: 34ch;
    margin: 0; padding: 12px 16px;
    border-radius: 16px 16px 16px 4px;
    background: var(--site-card);
    border: 1px solid var(--site-line);
    box-shadow: 0 18px 40px -30px rgba(23, 20, 31, .45);
    font-size: 15px; line-height: 1.4;
}
.hilo-canal {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--site-faint);
}
.hilo-canal::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--canal, var(--primary));
}
.hilo-ficha {
    padding: 18px; border-radius: 18px;
    background: var(--site-ink); color: #fffdfa;
}
.hilo-ficha-nombre {
    margin: 0 0 12px;
    font-family: var(--site-display); font-size: 18px; font-weight: 700;
}
.hilo-ficha-datos { margin: 0; display: grid; gap: 10px; }
.hilo-ficha-datos dt {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: #a9a3bd;
}
.hilo-ficha-datos dd { margin: 2px 0 0; font-size: 14px; }

/* 03 — Dos actos en la misma celda: lo que pasa mal y, encima, el equipo
   que lo resuelve. */
.escena-actos { display: grid; }
/* Las capas FIJAS: lo de «antes» siempre abajo. Sin esto, mientras se
   desvanecía (opacidad y movimiento lo suben de capa) se pintaba encima de
   la tarjeta del Jefe, ya quieta: el glitch del giro (2026-10-07). */
.escena-actos > * { grid-area: 1 / 1; min-width: 0; position: relative; z-index: 2; }
.escena-actos > [data-antes] { z-index: 1; }
.acto-dolor { display: grid; gap: 12px; align-content: center; max-width: 520px; }
.acto-yo { justify-self: end; border-radius: 16px 16px 4px 16px; }
.acto-golpe {
    display: grid; gap: 6px;
    padding: 18px 20px; border-radius: 20px;
    background: var(--site-ink); color: #fffdfa;
}
.acto-golpe-dato {
    margin: 0;
    font-family: var(--site-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700;
}
.acto-golpe-dato strong { color: #ffd84d; }
.acto-golpe-nota { margin: 0; font-size: 14px; color: #b7b1c9; }

/* Los dibujos de «lo que pasa mal» (acto 1) de cada escena (2026-10-07).
   Dibujos de la idea, no capturas: el Excel, la cuenta en dólares, la
   pantalla vieja, los avisos en inglés. */
.excel {
    border: 1px solid var(--site-line-hi); border-radius: 12px;
    background: #fff; overflow: hidden;
    box-shadow: 0 18px 40px -30px rgba(23, 20, 31, .45);
}
.excel-archivo {
    margin: 0; padding: 8px 12px;
    background: #1d6f42; color: #fff;
    font-size: 12px; font-weight: 600;
}
.excel-hoja { width: 100%; border-collapse: collapse; font-size: 13px; }
.excel-hoja th, .excel-hoja td {
    padding: 7px 10px; border: 1px solid #e3e3e3; text-align: left;
}
.excel-hoja th { background: #f3f3f3; font-weight: 600; color: var(--site-dim); }
.excel-mal { color: #c2410c; font-weight: 600; background: #fff4ec; }
.ui-vieja {
    border: 2px solid #9a9a9a; background: #d9d9d9;
    font-family: 'Courier New', monospace; font-size: 12px; color: #222;
}
.ui-vieja-barra { margin: 0; padding: 4px 8px; background: #1f3a8a; color: #fff; font-weight: 700; }
.ui-vieja-menu {
    list-style: none; margin: 0; padding: 8px;
    display: grid; gap: 2px 10px; grid-template-columns: repeat(4, max-content);
}
.ui-vieja-botones { margin: 0; padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ui-vieja-botones span { padding: 2px 6px; border: 1px outset #bbb; background: #ececec; }
.papel-grande .papel-tipo { font-size: 18px; }
/* La búsqueda (03, 2026-10-07): la caja con lo que alguien busca y, en el
   acto 2, el resultado como lo pinta un buscador —dirección, título y la
   línea con estrellas, precio y existencia—. Sin logos de nadie. */
.busqueda {
    display: grid; gap: 8px;
    padding: 16px 18px; border-radius: 16px;
    background: var(--site-card); border: 1px solid var(--site-line);
}
.busqueda-caja {
    margin: 0; padding: 10px 16px; border-radius: 999px;
    border: 1px solid var(--site-line-hi); background: #fff;
    font-size: 15px; color: var(--site-ink);
}
.busqueda-pagina { margin: 0; font-size: 14px; font-weight: 600; color: #c2410c; }
.busqueda-rica { gap: 4px; }
.busqueda-url { margin: 0; font-size: 13px; color: #166534; }
.busqueda-titulo { margin: 0; font-size: 19px; font-weight: 600; color: #1a0dab; }
.busqueda-meta { margin: 0; font-size: 14px; color: var(--site-dim); }
.papel-apagado { filter: grayscale(1); opacity: .75; }
.papel-error { border-color: rgba(194, 65, 12, .35); background: #fff7f2; }
.papel-error .papel-tipo { color: #c2410c; font-family: var(--font); font-size: 14px; }
.equipo-pregunta {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border-radius: 16px;
    background: var(--site-card); border: 1px solid var(--site-line);
}
.equipo-pregunta .equipo-hizo { margin: 4px 0 0; }

/* 03 — El equipo que no duerme (2026-10-07). Arriba el Jefe con la
   pregunta y su respuesta; abajo los cuatro especialistas. Los personajes
   son los de la casa (`compi`, que `agrupa-avatar.js` vuelve 3D): acá solo
   se les da tamaño. */
.escena-equipo { display: grid; gap: 14px; max-width: 560px; }
.equipo-jefe-card {
    display: grid; gap: 12px;
    padding: 18px 20px 20px; border-radius: 22px;
    background: var(--site-card); border: 1px solid var(--site-line);
    box-shadow: 0 30px 60px -44px rgba(67, 56, 202, .45);
}
.equipo-cabeza { display: flex; align-items: center; gap: 12px; }
.equipo-jefe { width: 96px; height: 96px; flex: none; margin: -8px 0 -8px -6px; }
.equipo-nombre {
    margin: 0;
    font-family: var(--site-display); font-size: 16px; font-weight: 700;
    color: var(--site-ink);
}
.equipo-turno {
    margin-left: auto;
    padding: 4px 10px; border-radius: 999px;
    background: var(--site-ink); color: #fffdfa;
    font-family: var(--site-display); font-size: 12px; font-weight: 800;
    letter-spacing: .06em;
}
.pregunta-caja {
    margin: 0; min-height: 1.4em; padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--site-line-hi);
    background: var(--site-paper);
    font-size: 15px; color: var(--site-dim);
}
.pregunta-cifra {
    margin: 0;
    font-family: var(--site-display);
    font-size: clamp(30px, 3.4vw, 44px); font-weight: 800;
    letter-spacing: -.03em; color: var(--site-ink);
}
.pregunta-detalle { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: var(--site-dim); }
.equipo-agentes {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.equipo-agente {
    display: grid; gap: 2px 10px; align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 10px 12px; border-radius: 16px;
    background: var(--site-card); border: 1px solid var(--site-line);
}
.equipo-cara { grid-row: span 2; flex: none; width: 56px; height: 56px; }
.equipo-hizo { font-size: 13px; line-height: 1.35; color: var(--site-dim); }
/* A dos columnas, en un teléfono cada tarjeta partía «IVA bimestral listo
   para firmar» en cuatro renglones. */
@media (max-width: 480px) {
    .equipo-agentes { grid-template-columns: minmax(0, 1fr); }
}

/* 04 — La tarjeta del cliente. */
.escena-tarjeta { display: grid; gap: 14px; max-width: 460px; }
.tarjeta-cliente {
    display: grid; gap: 16px;
    padding: 22px; border-radius: 22px;
    background: linear-gradient(135deg, #24133d, #4a2f8f);
    color: #fffdfa;
}
.tarjeta-nombre { margin: 0; font-family: var(--site-display); font-size: 17px; font-weight: 700; }
.tarjeta-compras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tarjeta-compra {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(255, 253, 250, .08);
    font-size: 14px; color: #d9d1f5;
}
.tarjeta-compra strong { color: #ffd84d; font-weight: 700; white-space: nowrap; }
/* El 80 % de la barra es 1.200 de 1.500: el mismo dato que el texto. */
.tarjeta-barra {
    display: block; height: 8px; border-radius: 999px;
    background: rgba(255, 253, 250, .16); overflow: hidden;
}
.tarjeta-barra-lleno {
    display: block; width: 80%; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #bda9ff, #ffd84d);
}
.tarjeta-puntos { margin: 0; font-size: 14px; color: #d9d1f5; }
.tarjeta-puntos strong {
    margin-right: 6px;
    font-family: var(--site-display); font-size: 28px; color: #fffdfa;
}
.tarjeta-premio {
    margin: 0; padding: 12px 16px; border-radius: 14px;
    background: #ffd84d; color: var(--site-ink);
    font-size: 15px; font-weight: 700;
}
.tarjeta-aviso { justify-self: end; }

/* 05 — Los papeles de acá. El sello es la pieza de la casa. */
.escena-papeles {
    display: grid; gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}
.papel-factura { min-width: 0; }
.papel-otros { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.papel {
    display: grid; gap: 3px;
    padding: 14px 16px; border-radius: 14px;
    background: var(--site-card); border: 1px solid var(--site-line);
}
.papel-tipo { font-family: var(--site-display); font-size: 15px; font-weight: 700; }
.papel-dato { font-size: 13px; color: var(--site-dim); }

/* 06 — Un teléfono, un botón. */
.escena-telefono { display: grid; place-items: center; }
.telefono {
    position: relative;
    width: min(260px, 100%); aspect-ratio: 9 / 17;
    display: grid; align-content: end; gap: 14px;
    padding: 28px 20px;
    border: 10px solid var(--site-ink); border-radius: 38px;
    background: var(--site-card);
    box-shadow: 0 40px 80px -50px rgba(23, 20, 31, .6);
}
.telefono-total {
    margin: 0; display: flex; justify-content: space-between; align-items: baseline;
    font-size: 14px; color: var(--site-dim);
}
.telefono-total strong { font-family: var(--site-display); font-size: 22px; color: var(--site-ink); }
.telefono-boton {
    margin: 0; padding: 18px; border-radius: 18px;
    background: var(--primary); color: #fff; text-align: center;
    font-family: var(--site-display); font-size: 20px; font-weight: 800;
}
.telefono-dedo {
    position: absolute; left: 50%; bottom: 74px;
    width: 46px; height: 46px; margin-left: -23px;
    border-radius: 50%;
    background: rgba(23, 20, 31, .18);
    box-shadow: 0 0 0 10px rgba(124, 92, 240, .18);
}
.telefono-listo {
    margin: 0; text-align: center;
    font-size: 13px; font-weight: 600; color: var(--ok-text);
}

/* En angosto todo va en una columna y la escena deja de medir una
   pantalla: sin `pin`, una escena de 100svh es un hueco que hay que
   cruzar con el dedo. */
@media (max-width: 760px) {
    .escena {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "num" "dolor" "lienzo" "promesa";
    }
    .escena-dolor { font-size: clamp(28px, 7.4vw, 44px); }
}
@media (max-width: 560px) {
    .escena-hilo, .escena-papeles { grid-template-columns: 1fr; }
    .tarjeta-aviso { justify-self: stretch; }
}

/* ── La guía de los dolores ──────────────────────────────────────────────
   Al PIE y no bajo el listón: arriba ya hay una barra pegada (el vidrio
   del header), y dos barras arriba se comen la pantalla de un teléfono. */
.dolor-guia {
    position: fixed; left: 50%; z-index: 30;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 10px 16px 12px; border-radius: 999px;
    background: rgba(23, 20, 31, .86); color: #fffdfa;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font-size: 13px; white-space: nowrap; overflow: hidden;
}
.dolor-guia[hidden] { display: none; }
.dolor-guia-num { font-family: var(--site-display); font-weight: 800; color: #bda9ff; }
.dolor-guia-de { color: #8b86a6; }
.dolor-guia-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.dolor-guia-barra {
    position: absolute; left: 16px; right: 16px; bottom: 5px;
    height: 2px; border-radius: 2px;
    background: rgba(255, 253, 250, .15);
}
.dolor-guia-barra::after {
    content: ''; position: absolute; inset: 0;
    transform-origin: left; transform: scaleX(var(--avance, 0));
    background: #bda9ff;
    transition: transform .3s ease;
}

/* ── El catálogo de módulos ──────────────────────────────────────────────
   Una REJILLA de celdas con filete, no tarjetas flotando. La página dice
   «esto es un sistema, y estas son sus piezas»; catorce tarjetas con sombra
   dirían «esto es un folleto». */
/* Filetes POR CELDA y no por hueco de rejilla (2026-10-06): con el fondo
   gris asomando por el `gap`, una fila incompleta —Vender son ocho en tres
   columnas— dejaba un bloque gris donde no hay módulo. Así el hueco queda
   en papel. */
.modules {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    border-top: 1px solid var(--site-line);
    border-left: 1px solid var(--site-line);
}
.module {
    background: var(--site-paper);
    border-right: 1px solid var(--site-line);
    border-bottom: 1px solid var(--site-line);
    padding: 20px 20px 22px;
    transition: background .18s ease, opacity .25s ease;
}
.module:hover { background: var(--site-card); }
.module-name {
    display: block;
    font-family: var(--site-display);
    font-size: 18px; font-weight: 700; letter-spacing: -.01em;
}
.module-what {
    display: block; margin-top: 5px;
    font-size: 13px; line-height: 1.5; color: var(--site-dim);
}
/* El punto del módulo que viene puesto. `::before` y no un elemento: es
   decoración, y el lector de pantalla ya tiene la frase del pie. */
.module-core .module-name::before {
    content: ''; display: inline-block;
    width: 6px; height: 6px; margin-right: 8px;
    vertical-align: middle; border-radius: 50%;
    background: var(--primary);
}
.modules-foot {
    margin: 16px 0 0; font-size: 13px; color: var(--site-faint);
    display: flex; align-items: center; gap: 8px;
}
.dot-core {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary); flex: none;
}

/* Las pestañas por tipo de negocio (2026-10-07): la pieza de la casa
   (`ui/_tabs.html`) vestida de píldoras para el sitio. El módulo que el
   perfil no suele usar se apaga, no se esconde: se puede encender igual. */
.catalogo-perfiles .tabs {
    flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(24px, 3vw, 36px);
    border-bottom: 0;
}
.catalogo-perfiles .tab {
    /* Píldoras que saltan de renglón: cada una mide su rótulo. Repartir el
       ancho, como hace la pieza en un panel, cortaba «Vendo por suscripción». */
    flex: 0 0 auto;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--site-line-hi);
    background: var(--site-card); color: var(--site-dim);
    font-size: 14px; font-weight: 600;
}
.catalogo-perfiles .tab.is-active {
    background: var(--site-ink); border-color: var(--site-ink); color: #fffdfa;
}
.module-fuera { opacity: .25; }

/* Las familias (2026-10-06): el nombre grande a la izquierda y sus módulos
   a la derecha; el nombre acompaña mientras su rejilla pasa. En angosto se
   apilan y el nombre deja de pegarse: pegado taparía la rejilla entera. */
.catalogo-familias { display: grid; gap: clamp(28px, 4vw, 52px); }
.catalogo-familia {
    display: grid; gap: 16px 32px;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    align-items: start;
}
.catalogo-familia-nombre {
    position: sticky; top: 96px;
    margin: 0;
    font-family: var(--site-display);
    font-size: clamp(26px, 3.2vw, 40px); font-weight: 800;
    line-height: 1; letter-spacing: -.035em;
    color: var(--site-ink);
}
@media (max-width: 760px) {
    .catalogo-familia { grid-template-columns: 1fr; }
    .catalogo-familia-nombre { position: static; }
}

/* ── La calculadora de ahorro (2026-10-07) ───────────────────────────────
   Del referente de Renzo: tarjetas blancas sobre el papel, cada una con su
   baldosa de glifo; las entradas a la izquierda y, a la derecha, el
   resultado que acompaña mientras se recorre la lista. La cifra grande es lo
   único que compite con el título. En angosto todo se apila y el resultado
   va DESPUÉS de las entradas, como se lee. */
.calc { --calc-tinte: rgba(124, 92, 240, .08); --calc-borde: rgba(124, 92, 240, .5); }

/* Las pestañas de la casa (`ui/_tabs.html`) vestidas de tarjeta: glifo,
   rótulo y, la elegida, borde y chulo morados. */
.calc .tabs {
    flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(20px, 3vw, 28px);
    border-bottom: 0;
}
.calc .tab {
    position: relative; flex: 1 1 150px; justify-content: flex-start; gap: 12px;
    min-height: 64px; padding: 12px 16px; margin: 0;
    border: 1px solid var(--site-line-hi); border-radius: 14px;
    background: var(--site-card); color: var(--site-ink);
    font-size: 14px; font-weight: 500; text-align: left;
}
.calc .tab svg { width: 26px; height: 26px; }
.calc .tab span { white-space: normal; }
/* La línea del negocio debajo del rótulo (2026-10-18). */
.calc .tab .tab-rotulo { font-size: 15px; font-weight: 600; }
.calc .tab .tab-detalle { color: var(--site-dim); }
.calc .tab.is-active .tab-detalle { color: var(--primary); }
.calc .tab.is-active {
    border-color: var(--calc-borde); background: var(--calc-tinte);
    color: var(--primary-dark, var(--primary));
    box-shadow: 0 0 0 1px var(--calc-borde);
}
.calc .tab.is-active::after {
    content: ''; position: absolute; top: -7px; right: -7px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary) 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.calc-cuerpo {
    display: grid; gap: clamp(16px, 2.4vw, 24px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    align-items: start;
}
.calc-entradas, .calc-lado { display: grid; gap: clamp(16px, 2.4vw, 20px); min-width: 0; }
.calc-lado { position: sticky; top: 96px; }

.calc-tarjeta {
    padding: 18px 20px 20px;
    border: 1px solid var(--site-line); border-radius: 18px;
    background: var(--site-card);
}
.calc-cabeza {
    display: flex; align-items: center; gap: 12px;
    width: 100%; margin: 0 0 14px; padding: 0;
}
.calc-baldosa {
    flex: none; display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--site-paper); color: var(--site-ink);
}
.calc-baldosa svg { width: 20px; height: 20px; }
.calc-cabeza-texto { min-width: 0; flex: 1 1 auto; }
.calc-cabeza-titulo {
    flex: 1 1 auto; margin: 0;
    font-family: var(--site-display); font-size: 17px; font-weight: 700;
    letter-spacing: -.01em; color: var(--site-ink);
}
.calc-cabeza-sub { margin: 2px 0 0; font-size: 13px; color: var(--site-dim); }
.calc-cifra-caja {
    flex: none; display: grid; justify-items: center;
    min-width: 92px; padding: 6px 14px; border-radius: 10px;
    background: var(--site-paper);
}
.calc-cifra-caja strong {
    font-family: var(--site-display); font-size: 22px; font-weight: 800;
    line-height: 1.1; color: var(--site-ink); font-variant-numeric: tabular-nums;
}
.calc-cifra-caja span { font-size: 11px; color: var(--site-faint); }
.calc-cabeza-cifra {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--site-display); font-size: 18px; font-weight: 800;
    color: var(--primary); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.calc-cabeza-cifra svg { width: 20px; height: 20px; }
.calc-solo {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--site-dim); cursor: pointer;
}

.calc-programas { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.calc-programa {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 14px;
    border: 1px solid var(--site-line); border-radius: 12px;
    background: var(--site-card);
    transition: opacity .2s;
}
.calc-programa.is-fuera { opacity: .45; }
.calc-programa-nombre {
    display: flex; align-items: center; gap: 14px; min-width: 0;
    cursor: pointer;
}
.calc-programa-glifo { flex: none; display: grid; color: var(--site-ink); }
.calc-programa-glifo svg { width: 20px; height: 20px; }
.calc-programa-texto { display: grid; min-width: 0; }
.calc-programa-titulo { font-size: 14px; font-weight: 500; color: var(--site-ink); }
.calc-programa-detalle { font-size: 12px; color: var(--site-faint); }
.calc-programa-monto {
    flex: none; font-size: 14px; font-weight: 600; color: var(--site-ink);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Las apps (rediseño del 2026-10-18): el campo de fichas de la casa, con
   el logo de cada app en su cuadrito. El logo va CONTENIDO y sobre blanco —el
   cuadrito del buscador recorta fotos de personas—, y la que no tiene logo
   lleva su inicial sobre el papel, no sobre el morado de las caras. */
.calc-apps { margin: 0; padding: 0; border: 0; min-width: 0; }
/* En la leyenda el título y su línea son `span`: van uno sobre otro. */
.calc-apps legend .calc-cabeza-texto { display: grid; gap: 2px; }
.calc-apps .tokens { min-height: 48px; border-radius: 14px; }
.calc-apps .finder-thumb { object-fit: contain; padding: 5px; background: var(--site-card); }
.calc-apps .token .token-cara { padding: 3px; }
.calc-apps .finder-thumb-letter {
    padding: 0; background: var(--site-paper); color: var(--site-ink);
    border-color: var(--site-line-hi);
}

/* Los equipos de agentes en fichas (2026-10-18): tres lado a lado, una
   debajo de otra en angosto. Marcada se pinta como la app marcada. La
   casilla invisible cubre SOLO la cabeza: el − y + no marcan la ficha. */
.calc-agentes {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    margin: 0; padding: 0; list-style: none;
}
.calc-agente {
    display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
    padding: 14px; border-radius: 14px;
    border: 1px solid var(--site-line-hi); background: var(--site-card);
    transition: border-color .15s, background .15s;
}
/* Cada área con su color (el rediseño, 2026-10-18): la baldosa del glifo
   siempre, y la ficha entera teñida cuando está marcada. */
.calc-agente[data-area="servicio"] { --area: #7c5cf0; --area-tinte: rgba(124, 92, 240, .12); }
.calc-agente[data-area="marketing"] { --area: #ea7a1a; --area-tinte: rgba(234, 122, 26, .12); }
.calc-agente[data-area="contabilidad"] { --area: #2f74e0; --area-tinte: rgba(47, 116, 224, .12); }
.calc-agente.is-marcada { border-color: var(--area); background: var(--area-tinte); }
.calc-agente-icono {
    flex: none; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--site-card); color: var(--area);
    box-shadow: 0 1px 2px rgba(23, 20, 31, .08);
}
.calc-agente-icono svg { width: 20px; height: 20px; }
.calc-agente-cabeza {
    position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
.calc-agente-cabeza input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.calc-agente-cabeza:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 8px; }
/* Sin `flex: none` la cabeza encoge la cara a 15 px y el dibujo pisa el nombre. */
.calc-agente-texto { display: grid; gap: 3px; min-width: 0; }
.calc-agente-nombre { font-size: 14px; font-weight: 700; color: var(--site-ink); }
.calc-agente-frase { font-size: 12.5px; line-height: 1.35; color: var(--site-dim); }
.calc-agente-gente {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--site-dim);
}
.calc-agente-gente .stepper { flex: none; }
.calc-agente:not(.is-marcada) .calc-agente-gente { opacity: .45; }
.calc-agentes-pie { margin: 12px 0 0; font-size: 13px; color: var(--site-dim); }
@media (max-width: 700px) {
    .calc-agentes { grid-template-columns: minmax(0, 1fr); }
}
.calc-apps-cuenta { margin: 12px 0 0; font-size: 12px; color: var(--site-faint); }

/* El resultado: la tarjeta morada del referente. */
.calc-resultado {
    display: grid; gap: 12px;
    padding: 20px 20px 18px;
    border: 1px solid var(--calc-borde); border-radius: 18px;
    background: linear-gradient(180deg, rgba(124, 92, 240, .10), transparent 60%), var(--site-card);
    box-shadow: 0 30px 60px -38px rgba(124, 92, 240, .55);
}
.calc-resultado > [aria-live] { position: relative; }
/* La gráfica junto a la cifra: adorno, no botón. */
.calc-titular-glifo {
    position: absolute; top: 0; right: 0;
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--site-card); color: var(--primary);
    box-shadow: 0 1px 2px rgba(23, 20, 31, .08);
}
.calc-titular-glifo svg { width: 22px; height: 22px; }
/* Las tres promesas en fila (2026-10-18). */
.calc-promesas {
    list-style: none; margin: 0; padding: 10px 12px; border-radius: 14px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
    background: var(--site-card); border: 1px solid var(--site-line);
}
/* Cada promesa en UN renglón (Renzo, 2026-10-19: «menos texto»): si no caben
   las tres, baja una entera, no se parte. */
.calc-promesas li {
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 11.5px; line-height: 1.3; color: var(--site-dim);
}
.calc-promesas svg { flex: none; width: 15px; height: 15px; color: var(--site-ink); }
.calc-titular-rotulo {
    margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--site-dim);
}
.calc-titular {
    margin: 4px 0 0;
    font-family: var(--site-display);
    font-size: clamp(34px, 4.2vw, 44px); font-weight: 800;
    line-height: 1; letter-spacing: -.035em;
    color: var(--primary); font-variant-numeric: tabular-nums;
}
.calc-titular-texto { font-size: clamp(28px, 3.6vw, 36px); }
.calc-ano { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--site-dim); }
/* La cuenta en dos bloques: lo de hoy en rojo y lo de Agrupa en verde, con
   los tonos de estado de la casa. */
.calc-cuenta { padding: 10px 0 0; border-top: 1px solid var(--site-line); display: grid; gap: 4px; }
.calc-cuenta-rotulo {
    margin: 4px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--site-dim);
}
.calc-cuenta dl { margin: 0; display: grid; gap: 5px; padding: 8px 12px; border-radius: 12px; }
.calc-cuenta dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.calc-cuenta dt { color: var(--site-dim); }
.calc-cuenta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-cuenta-hoy { background: var(--danger-bg); }
.calc-cuenta-hoy dd { color: var(--danger-text); }
.calc-cuenta-agrupa { background: var(--ok-bg); }
.calc-cuenta-agrupa dd { color: var(--ok-text); }
.calc-cuenta-total { padding-top: 5px; border-top: 1px solid rgba(23, 20, 31, .08); }
/* El plan solo es su propio total: sin raya. «Total con Agrupa», debajo de la
   IA, sí la lleva (2026-10-18). */
.calc-cuenta-agrupa .calc-cuenta-total:first-child { padding-top: 0; border-top: 0; }
.calc-cuenta dl > .calc-cuenta-detalle { padding-left: 12px; font-size: 12px; }
.calc-cuenta-detalle dt, .calc-cuenta-detalle dd { color: var(--site-faint); font-weight: 500; }
.calc-cuenta-total dt { font-weight: 600; color: var(--site-ink); }
.calc-cuenta-total dd { font-size: 15px; }
.calc-cta { justify-content: center; gap: 10px; min-height: 46px; font-size: 15px; }
.calc-cta svg { width: 18px; height: 18px; }
.calc-detalle { justify-self: center; }
.calc-nota { margin: 0; font-size: 12px; line-height: 1.5; color: var(--site-faint); }

/* El tiempo, en una frase con la cifra en negrita que no se parte. Más
   aire que las demás: es la tarjeta que cierra la columna. */
.calc-lado > .calc-tarjeta { padding: 22px 22px 24px; }
.calc-tiempo { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--site-dim); }
.calc-tiempo strong {
    font-family: var(--site-display); font-size: 18px; color: var(--site-ink);
    white-space: nowrap;
}

.calc-fuentes {
    margin-top: clamp(28px, 4vw, 44px); padding-top: 20px;
    border-top: 1px solid var(--site-line);
    font-size: 14px; line-height: 1.6; color: var(--site-dim);
}
.calc-fuentes summary { cursor: pointer; font-weight: 600; color: var(--site-ink); }
.calc-fuentes-tabla { width: 100%; margin: 14px 0; border-collapse: collapse; font-size: 13px; }
.calc-fuentes-tabla th, .calc-fuentes-tabla td {
    padding: 7px 10px 7px 0; text-align: left; border-bottom: 1px solid var(--site-line);
}
.calc-fuentes-tabla th { font-weight: 600; color: var(--site-ink); }

@media (max-width: 900px) {
    .calc-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .calc-lado { position: static; }
}
@media (max-width: 560px) {
    .calc .tab { flex-basis: calc(50% - 5px); min-height: 56px; padding: 10px 12px; }
    .calc-tarjeta { padding: 16px 14px; }
    .calc-cabeza { flex-wrap: wrap; }
    .calc-cabeza-texto { flex-basis: 0; }
    .calc-cifra-caja { min-width: 72px; padding: 6px 10px; }
    .calc-solo { flex-basis: 100%; }
    /* La cifra de la cabeza baja a su renglón: al lado apretaba el título a
       tres renglones (2026-10-18). */
    .calc-cabeza-cifra { flex-basis: 100%; }
    .calc-programa { padding: 9px 10px; }
    .calc-programa-nombre { gap: 10px; }
    .calc-fuentes-tabla th:nth-child(4), .calc-fuentes-tabla td:nth-child(4) { display: none; }
}

/* ── Planes ──────────────────────────────────────────────────────────────*/
.plans {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    align-items: start;
}
.plan {
    display: flex; flex-direction: column; gap: 14px;
    padding: 28px 26px 30px;
    border: 1px solid var(--site-line);
    border-radius: 18px;
    background: var(--site-card);
}
/* El destacado NO es más grande ni se sale de la fila: se distingue por
   color y por el rótulo. Escalar una tarjeta rompe la línea de base de las
   tres y en móvil no se nota en absoluto. */
.plan-featured {
    border-color: rgba(124, 92, 240, .5);
    background:
        linear-gradient(180deg, rgba(124, 92, 240, .08), transparent 58%),
        var(--site-card);
    box-shadow: 0 30px 60px -38px rgba(124, 92, 240, .55);
}
.plan-flag {
    margin: 0; align-self: flex-start;
    padding: 4px 11px; border-radius: 999px;
    background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase;
}
.plan-name { font-size: 20px; }
.plan-price { margin: 0; display: flex; align-items: baseline; gap: 7px; }
.plan-amount {
    font-family: var(--site-display);
    font-size: 32px; font-weight: 800; letter-spacing: -.03em;
}
/* «A convenir» son diez caracteres donde el monto son ocho dígitos: a 32px
   desborda la tarjeta angosta de tres columnas. Baja de tamaño, no de peso,
   para que siga leyéndose como el precio de la tarjeta y no como una nota. */
.plan-amount-quote { font-size: 25px; }
.plan-per { font-size: 13px; color: var(--site-faint); }
.plan-for { margin: 0; font-size: 13px; line-height: 1.55; color: var(--site-dim); }
.plan-list {
    margin: 4px 0 auto; padding: 0; list-style: none;
    display: grid; gap: 9px;
    font-size: 13px; color: var(--site-dim);
}
.plan-list li { display: flex; gap: 9px; align-items: flex-start; }
.plan-list li::before {
    content: '';
    flex: none; width: 5px; height: 5px; margin-top: 7px;
    border-radius: 50%; background: var(--primary);
}
.plan .site-btn { justify-content: center; margin-top: 18px; }

.planes-argumento {
    margin: 16px 0 0;
    font-family: var(--site-display);
    font-size: clamp(22px, 2.8vw, 34px); font-weight: 700;
    line-height: 1.15; letter-spacing: -.02em;
    color: var(--primary);
    text-wrap: balance;
}

/* ── Pasarte es fácil (2026-10-18) ──────────────────────────────────────
   Los sistemas de hoy en píldoras, como las apps de la calculadora; los
   pasos con la piel de «Así de fácil se empieza» (`.pasos-lista`); lo que
   te traes en fichas moradas. */
.migrar-sistemas {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.migrar-sistema {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px 10px 12px; border-radius: 999px;
    border: 1px solid var(--site-line-hi); background: var(--site-card);
    font-family: var(--site-display); font-size: 16px; font-weight: 700; color: var(--site-ink);
}
.migrar-inicial {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--site-paper); font-size: 12px; font-weight: 700;
}
.migrar-flecha {
    margin: 18px 0 clamp(24px, 3vw, 36px);
    font-size: 14px; color: var(--site-dim);
}
.migrar-traes {
    margin-top: clamp(16px, 2.4vw, 28px); padding: clamp(18px, 2.2vw, 26px);
    border-radius: 22px; background: var(--site-card); border: 1px solid var(--site-line);
}
.migrar-traes-titulo {
    margin: 0 0 12px; font-family: var(--site-display); font-size: 17px;
    font-weight: 800; color: var(--site-ink);
}
.migrar-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.migrar-chip {
    padding: 7px 14px; border-radius: 999px;
    background: rgba(124, 92, 240, .14); color: var(--primary-dark, var(--primary));
    font-size: 14px; font-weight: 600;
}
.migrar-chip::before { content: "✓ "; }
.migrar-pie { margin: 16px 0 0; font-size: 14px; color: var(--site-dim); }

/* ── Así de fácil se empieza (2026-10-07) ────────────────────────────────
   Tres pasos con el número GIGANTE en contorno, como un cartel: el número
   es lo que se ve primero y dice «son solo tres». Una escena del motor:
   cabe en una pantalla porque se fija. */
.pasos { min-height: 100svh; display: grid; align-content: center; }
.pasos-lista {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: clamp(16px, 2.4vw, 28px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.paso {
    display: grid; gap: 10px; align-content: start;
    padding: clamp(20px, 2.4vw, 30px);
    border-radius: 22px;
    background: var(--site-card); border: 1px solid var(--site-line);
}
.paso-num {
    font-family: var(--site-display);
    font-size: clamp(64px, 8vw, 120px); font-weight: 800; line-height: .9;
    letter-spacing: -.05em;
    color: transparent; -webkit-text-stroke: 2px var(--primary);
}
.paso-titulo {
    margin: 0;
    font-family: var(--site-display); font-size: clamp(20px, 2vw, 26px);
    font-weight: 800; letter-spacing: -.02em; color: var(--site-ink);
}
.paso-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--site-dim); }
.pasos-cta { justify-self: start; margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 760px) {
    .pasos { min-height: 0; }
    .pasos-lista { grid-template-columns: minmax(0, 1fr); }
}

/* ── El cierre: la franja negra del final ────────────────────────────────
   El negro abre con el túnel y cierra acá (2026-10-06). De borde a borde,
   con un resplandor morado detrás del titular. */
.closer {
    position: relative; z-index: 1; overflow: hidden;
    padding: clamp(90px, 14vw, 180px) clamp(20px, 5vw, 40px);
    background: #0d0d0d; color: #fffdfa;
    text-align: center;
}
.closer::before {
    content: ''; position: absolute; inset: 15% 22%; z-index: -1;
    background: radial-gradient(closest-side, rgba(124, 92, 240, .45), transparent);
    filter: blur(24px);
}
body.site .closer h2 {
    margin: 0 auto; max-width: 12ch;
    font-size: clamp(40px, 8vw, 112px); line-height: .95;
    letter-spacing: -.045em;
    color: #fffdfa;
    text-wrap: balance;
}
.closer p { margin: 22px 0 36px; color: #b7b1c9; }
/* El botón de tinta desaparece sobre el negro: acá se invierte. */
.closer .site-btn-primary {
    background: #fffdfa; color: var(--site-ink);
    box-shadow: 0 18px 40px -18px rgba(124, 92, 240, .7);
}
.closer .site-btn-primary:hover { background: var(--primary); color: #fff; }
.site-btn-grande { padding: 18px 30px; font-size: 18px; }

/* ── El pie ──────────────────────────────────────────────────────────────*/
.site-foot {
    max-width: 1180px; margin: 0 auto;
    padding: clamp(36px, 5vw, 56px) clamp(20px, 5vw, 40px) 40px;
    border-top: 1px solid var(--site-line);
    font-size: 13px; color: var(--site-faint);
}
.site-foot-cols {
    display: flex; flex-wrap: wrap; gap: 28px 60px;
    justify-content: space-between;
    margin: 0 0 34px;
}
.site-foot-brand { max-width: 34ch; }
.site-foot-brand img { display: block; margin-bottom: 12px; }
.site-foot-brand p { margin: 0; line-height: 1.6; color: var(--site-dim); }
.site-foot-col { display: grid; gap: 10px; align-content: start; }
.site-foot-col strong {
    font-family: var(--site-display);
    font-size: 13px; font-weight: 700; color: var(--site-ink);
}
.site-foot-col a { color: var(--site-dim); }
.site-foot-col a:hover { color: var(--site-ink); }
.site-foot-legal {
    margin: 0; padding-top: 22px;
    border-top: 1px solid var(--site-line);
    display: flex; flex-wrap: wrap; gap: 8px 26px;
}

/* ── El cielo reciclado ──────────────────────────────────────────────────
   El alta y la puerta de entrada van bajo el MISMO cielo del hero: mancha,
   metaballs en vivo y la rejilla de puntos (el ::before de .hero ya la
   dibuja). Acá el hero es solo una capa de fondo: sin padding, sin
   coreografía, y sorda al puntero para no taparle el clic al formulario
   que vive encima. */
/* Del borde de arriba hasta la línea del pie (Renzo, 2026-10-07: «que
   lleguen hasta la línea de abajo»): la capa llena el `main` entero —que
   por eso se vuelve la referencia— y la mancha llena la capa en vez de
   medir lo que su imagen. */
main:has(> .hero-fondo) { position: relative; }
.hero-fondo {
    position: absolute; inset: 0;
    padding: 0; margin: 0;
    z-index: 0;
    pointer-events: none;
}
.hero-fondo .hero-art { inset: 0; }
.hero-fondo .hero-art img { height: 100%; object-fit: cover; }
/* La rejilla que responde al puntero (`site-rejilla.js`): el lienzo con
   los puntos que toca y la capa de sus pastillas, encima de la mancha y
   debajo del contenido. */
.rejilla-lienzo, .rejilla-pastillas { position: absolute; inset: 0; pointer-events: none; }
.rejilla-lienzo { z-index: 1; }
.rejilla-pastillas { z-index: 2; }
/* En el alta, en CREMA y no en morado (Renzo, 2026-10-24: «que los
   colores de ese efecto no sean morados, sino cremitas, como el look and
   feel de esta pantalla»): los puntos en arena y las pastillas del color de
   la tarjeta, con su filo suave. Solo con `.en-crema` en el fondo: el
   2026-10-24 Renzo quiso probar todo en morado, como el inicio (y sin la
   clase lo está); para volver, la clase y la `paleta` crema de
   `data-nucleo-ajustes` (en el historial de `signup.html`). */
.hero-fondo[data-rejilla].en-crema { --rejilla-tinta: #b3a58c; }
/* La esfera del inicio en el alta (`site-nucleo.js`). Su lienzo trae su
   propia rejilla, pero sobre el crema es casi invisible y se apaga lejos de
   la bola: los puntos de siempre (el `::before`) se quedan, en los mismos
   píxeles (Renzo, 2026-10-24: «los punticos normales no se ven»), y un
   poco más marcados que en el resto del sitio. */
.hero-fondo[data-rejilla]::before { opacity: 1; }
.hero-fondo .nucleo-lienzo {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; display: block; pointer-events: none;
}
.hero-fondo.en-crema .rejilla-pastillas .nucleo-pastilla {
    background: var(--site-card); color: var(--site-ink);
    border-color: var(--site-line);
    box-shadow: 0 10px 24px -14px rgba(60, 48, 30, .35);
}
.hero-fondo.en-crema .rejilla-pastillas .nucleo-pastilla svg { color: #9a8b70; }
/* En morado (lo que quedó, 2026-10-24: «el grid con un morado muy oscuro,
   que sea más coherente con el núcleo»): los lilas claros de la esfera y no
   el morado casi negro de las pastillas del inicio, que viven sobre fondo
   oscuro. */
.hero-fondo[data-rejilla]:not(.en-crema) { --rejilla-tinta: #b48cff; }
.hero-fondo:not(.en-crema) .rejilla-pastillas .nucleo-pastilla {
    background: #f6f1ff; color: #3b2a6b;
    border-color: #ddcbff;
    box-shadow: 0 10px 24px -14px rgba(124, 92, 240, .45);
}
.hero-fondo:not(.en-crema) .rejilla-pastillas .nucleo-pastilla svg { color: #9a6bf5; }

/* LAS PASTILLAS DE LOS PUNTOS: lo que esconde cada punto de una rejilla —las
   funcionalidades en el núcleo del hero (`site-nucleo.js`), los beneficios en
   la rejilla del alta (`site-rejilla.js`)—. Mudadas de `site-nucleo.css` el
   2026-10-24, cuando las necesitó el alta.
   Cerca del puntero: ícono y nombre, encima del punto. Más afuera: solo el
   ícono, en una burbuja sobre su punto. --s y --o los pone el script. */
.nucleo-pastilla {
    position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px; border-radius: 999px;
    background: rgba(24, 16, 48, .94); color: #f4f1ff;
    border: 1px solid rgba(185, 140, 255, .45);
    box-shadow: 0 10px 30px -10px rgba(124, 92, 240, .7);
    font-size: 13px; font-weight: 600; white-space: nowrap;
    opacity: 0; transform: translate(-50%, -50%) scale(.3);
    transition: opacity .16s ease, transform .16s ease-out, padding .16s ease;
}
.nucleo-pastilla span { display: none; }
.nucleo-pastilla.visible { opacity: var(--o, 1); transform: translate(-50%, -50%) scale(var(--s, 1)); }
.nucleo-pastilla.con-nombre { padding: 7px 14px 7px 9px; transform-origin: 50% 100%; }
.nucleo-pastilla.con-nombre span { display: inline; }
.nucleo-pastilla.con-nombre.visible { transform: translate(-50%, calc(-100% - 6px)) scale(var(--s, 1)); }
.nucleo-pastilla svg { width: 16px; height: 16px; flex: none; color: #c9b4ff; }
/* Las marcas (WhatsApp, Instagram, TikTok): su logo como silueta, en la misma
   tinta que los glifos, igual que la pieza `ui/_logo_marca.html`. */
.nucleo-pastilla .nucleo-logo {
    width: 16px; height: 16px; flex: none; background: #c9b4ff;
    -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.nucleo-logo--whatsapp { --logo: url("../img/apps/whatsapp.4a48b157ce7c.svg"); }
.nucleo-logo--instagram { --logo: url("../img/apps/instagram.3f07175f9d0f.svg"); }
.nucleo-logo--tiktok { --logo: url("../img/apps/tiktok.daa22ae4a0ca.svg"); }
@media (prefers-reduced-motion: reduce) { .nucleo-pastilla { transition: none; } }

/* ── El alta: dos columnas ───────────────────────────────────────────────
   El argumento a la izquierda, el formulario a la derecha. La columna de
   texto no es relleno: en un alta de cuatro casillas, lo que hace que
   alguien las llene es saber qué recibe al terminar.

   Con más acabado (Renzo, 2026-10-24, con un referente; el fondo, el de
   siempre): el título grande con su punto morado, una bajada, tres razones
   con su glifo en un círculo, y la tarjeta blanca con su encabezado y cada
   casilla con su glifo adelante. Las puertas de entrada (`login_gate`,
   `pos_gate`) usan la misma tarjeta y las mismas casillas. */
.pane {
    position: relative; z-index: 1;
    max-width: 1120px; margin: 0 auto;
    padding: clamp(30px, 6vw, 76px) clamp(20px, 5vw, 40px) 90px;
    display: grid; gap: clamp(32px, 6vw, 88px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
}
@media (max-width: 820px) {
    /* El formulario PRIMERO en angosto: quien llegó acá ya se convenció, y
       hacerlo pasar por tres viñetas para llegar a la primera casilla es
       cobrarle el scroll a quien ya dijo que sí. */
    .pane { grid-template-columns: 1fr; }
    .pane-side { order: 2; }
    .pane-form { order: 1; }
}
.pane-title {
    font-size: clamp(30px, 5vw, 48px); line-height: 1.02;
    letter-spacing: -.03em; margin-top: 12px;
}
/* El texto arranca a la altura del borde de arriba de la tarjeta (Renzo,
   2026-10-24), no centrado contra ella. */
.pane-alta { align-items: start; }
/* TODA la tarjeta a la vista, sin bajar (Renzo, 2026-10-24: «que todo el
   form quede above the fold»): la tarjeta un poco más ancha, las casillas
   en pares —dos columnas— y todo más apretado. Arriba, aire que crece
   con el alto de la pantalla («bajemos un poco el contenido»). */
@media (min-width: 821px) {
    .pane.pane-alta {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: clamp(28px, 4vw, 64px);
        padding-top: clamp(28px, 7vh, 80px);
    }
}
.pane-alta .pane-form {
    /* Vidrio sobre la esfera (Renzo, 2026-10-24): blanco a medias y un
       desenfoque chico. Un solo panel: el costo del desenfoque sobre el
       lienzo animado es acotado (ver la nota del núcleo del hero). */
    background: rgb(255 255 255 / 51%);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 14px;
    padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 34px);
}
.pane-alta .pane-form > :is(.pane-form-cabeza, .field-ancho, .field-error, .site-btn) { grid-column: 1 / -1; }
.pane-alta .pane-form-cabeza { margin-bottom: 0; }
.pane-alta .pane-form-cabeza h2 { font-size: clamp(22px, 2.2vw, 28px); }
.pane-alta .pane-form-cabeza p { margin-top: 4px; font-size: 14px; }
.pane-alta .field { gap: 6px; align-content: start; }
.pane-alta .field input { padding-block: 11px; }
.pane-alta .pane-enviar { padding-block: 15px; margin-top: 2px; }
@media (max-width: 560px) {
    .pane-alta .pane-form { grid-template-columns: 1fr; }
}
/* En pantallas bajas (un portátil con la barra del navegador), más
   apretado todavía para que el botón quede a la vista. */
@media (min-width: 821px) and (max-height: 760px) {
    .pane.pane-alta { padding-top: clamp(14px, 3vh, 26px); }
    .pane-alta .pane-title { font-size: clamp(34px, 4.4vw, 52px); }
    .pane-alta .pane-points { margin-top: 24px; gap: 16px; }
    .pane-alta .pane-form { gap: 12px 14px; padding-block: 20px; }
    .pane-alta .pane-form-cabeza h2 { font-size: 22px; }
    .pane-alta .field input { padding-block: 9px; }
    .pane-alta .pane-enviar { padding-block: 13px; }
}
@media (min-width: 821px) and (max-height: 600px) {
    .pane-alta .pane-form-cabeza p { display: none; }
}
.pane-alta .pane-title { margin-top: 0; font-size: clamp(38px, 5.4vw, 64px); line-height: 1; letter-spacing: -.035em; }
.pane-punto { color: var(--primary); }
.pane-lede {
    margin: 20px 0 0; max-width: 36ch;
    font-size: 16px; line-height: 1.6; color: var(--site-dim);
}
.pane-points {
    margin: 34px 0 0; padding: 0; list-style: none;
    display: grid; gap: 22px;
}
.pane-points li { display: flex; align-items: center; gap: 16px; }
.pane-point-glifo {
    flex: none; display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(124, 92, 240, .09); color: var(--primary);
}
.pane-point-glifo svg { width: 20px; height: 20px; }
.pane-points strong {
    display: block;
    font-size: 15.5px; font-weight: 700; color: var(--site-ink);
}
.pane-points li > span:last-child > span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--site-dim); }

.pane-form {
    display: grid; gap: 20px;
    padding: clamp(26px, 4vw, 44px) clamp(22px, 3.6vw, 40px);
    border: 1px solid rgba(23, 20, 31, .06);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 40px 90px -50px rgba(76, 52, 160, .35), 0 2px 6px rgba(23, 20, 31, .03);
}
.pane-form-cabeza { margin-bottom: 4px; }
.pane-form-cabeza h2 {
    margin: 0;
    font-family: var(--site-display); font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800; letter-spacing: -.025em; color: var(--site-ink);
}
.pane-form-cabeza p { margin: 6px 0 0; font-size: 14.5px; color: var(--site-dim); }
.field { display: grid; gap: 8px; }
/* En la tarjeta el espacio entre casillas lo pone la grilla: `.field` trae
   un margen de abajo de `agrupa.css` que lo duplicaba. Y el campo oculto
   del CSRF no ocupa fila (oculto igual se envía). */
.pane-form .field { margin: 0; }
.pane-form > input[type="hidden"] { display: none; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--site-ink); }
.field input {
    width: 100%;
    padding: 14px 16px;
    font: inherit; font-size: 15px;
    color: var(--site-ink);
    background: #fff;
    border: 1px solid var(--site-line-hi);
    border-radius: 12px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.field input::placeholder { color: var(--site-faint); }
.field input:hover { border-color: var(--site-faint); }
.field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(124, 92, 240, .12); }

/* La casilla con su glifo adelante (`.field-control` › `svg.field-glifo`):
   el dibujo dice qué va ahí antes de leer el rótulo. */
.field-control { position: relative; }
.field-glifo {
    position: absolute; left: 16px; top: 50%; z-index: 1;
    width: 19px; height: 19px; translate: 0 -50%;
    color: var(--site-faint); pointer-events: none;
}
.field-control > input { padding-left: 46px; }

/* La casilla con el sufijo del dominio pegado. `focus-within` en el envoltorio
   y no en la casilla: el borde que se ilumina es el del conjunto, porque el
   conjunto es lo que se lee como un solo control. */
.field-affixed {
    display: flex; align-items: stretch;
    border: 1px solid var(--site-line-hi);
    border-radius: 12px; overflow: hidden;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.field-affixed:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(124, 92, 240, .12); }
.field-affixed input {
    border: 0; border-radius: 0; background: transparent; min-width: 0;
}
.field-affixed input:focus { background: transparent; box-shadow: none; }
.field-affix {
    display: flex; align-items: center; padding: 0 16px;
    font-size: 14px; color: var(--site-dim);
    background: rgba(23, 20, 31, .03);
    border-left: 1px solid var(--site-line);
    white-space: nowrap;
}
.field-help { margin: 0; font-size: 12px; color: var(--site-faint); }
/* La ayuda que avisa mientras se escribe (el dígito del NIT que no
   cuadra, `assets/js/nit.js`). */
.field-help.field-help-mal { color: #b3261e; }
/* El error NO es solo color: lleva su marca. Un mensaje que solo se distingue
   por ser rojo no existe para quien no distingue el rojo. */
.field-error { margin: 0; font-size: 12.5px; color: #b3261e; }
.field-error::before { content: '⚠ '; }
.field:has(.field-error) .field-control > input,
.field:has(.field-error) .field-affixed { border-color: #e2a29d; }
.pane-form .site-btn { justify-content: center; margin-top: 4px; }
/* El botón del alta: alto, a todo el ancho, con la flecha a la derecha. */
.pane-enviar {
    position: relative; align-items: center;
    padding-block: 17px; font-size: 15.5px;
}
.pane-enviar-flecha {
    position: absolute; right: 24px; top: 50%;
    width: 19px; height: 19px; translate: 0 -50%;
    transition: translate .2s ease;
}
.pane-enviar:hover .pane-enviar-flecha { translate: 4px -50%; }
/* «Volver» con su flecha, en la barra del alta. */
.site-nav-volver { display: inline-flex; align-items: center; gap: 8px; }
.site-nav-volver svg { width: 17px; height: 17px; }

/* ── La puerta de entrada ────────────────────────────────────────────────
   Una sola columna angosta: pregunta la dirección de la empresa y la vista
   redirige a su dominio. El ápice no sirve el /entrar/ de nadie. */
.portal {
    position: relative; z-index: 1;
    max-width: 460px; margin: 0 auto;
    padding: clamp(36px, 7vw, 84px) 20px 110px;
}
.portal .pane-title { margin-top: 12px; }
.portal-lede {
    margin: 14px 0 28px;
    font-size: 14px; line-height: 1.6;
    color: var(--site-dim);
}
.portal-alt {
    margin: 20px 0 0;
    font-size: 13px; color: var(--site-dim);
    text-align: center;
}

/* ── Pantallas de una sola cosa: revisa tu correo, creando, vencido ───────*/
.note {
    position: relative; z-index: 1;
    max-width: 560px; margin: 0 auto;
    padding: clamp(60px, 12vw, 130px) clamp(20px, 5vw, 40px) 120px;
    text-align: center;
}
.note-mark { margin: 0 auto 22px; font-size: 34px; line-height: 1; }
.note-title { font-size: clamp(26px, 4.4vw, 40px); letter-spacing: -.03em; }
.note-body { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--site-dim); }
.note-fine { margin: 22px 0 26px; font-size: 13px; color: var(--site-faint); }
.note .site-btn { margin-top: 6px; }

.spinner {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 3px solid var(--site-line-hi);
    border-top-color: var(--primary);
    animation: site-spin .9s linear infinite;
}
@keyframes site-spin { to { transform: rotate(360deg); } }

/* ── La sala de espera del alta: los cinco pasos ──────────────────────────
   Una lista corta a la izquierda dentro de la nota centrada. Cada paso dice
   su estado con la marca (vacía, girando, ✓ o ✕) y no solo con color. */
.sala-pasos {
    list-style: none;
    margin: 30px auto 26px; padding: 0;
    max-width: 340px;
    text-align: left;
}
.sala-paso {
    display: grid; grid-template-columns: 22px 1fr; column-gap: 12px;
    align-items: center;
    padding: 9px 0;
    font-size: 15px; color: var(--site-faint);
}
.sala-paso-marca {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--site-line-hi);
    display: grid; place-items: center;
    font-size: 11px; line-height: 1;
}
.sala-paso-detalle {
    grid-column: 2;
    font-size: 13px; color: var(--site-dim);
}
.sala-paso[data-estado="en_curso"] { color: var(--site-ink); font-weight: 600; }
.sala-paso[data-estado="en_curso"] .sala-paso-marca {
    border-color: var(--site-line-hi); border-top-color: var(--primary);
    animation: site-spin .9s linear infinite;
}
.sala-paso[data-estado="hecho"] { color: var(--site-ink); }
.sala-paso[data-estado="hecho"] .sala-paso-marca {
    border-color: var(--primary); background: var(--primary); color: #fff;
}
.sala-paso[data-estado="hecho"] .sala-paso-marca::before { content: "✓"; }
.sala-paso[data-estado="fallo"] { color: var(--site-ink); }
.sala-paso[data-estado="fallo"] .sala-paso-marca {
    border-color: var(--danger-vivid); color: var(--danger-vivid);
}
.sala-paso[data-estado="fallo"] .sala-paso-marca::before { content: "✕"; }
@media (prefers-reduced-motion: reduce) {
    .sala-paso[data-estado="en_curso"] .sala-paso-marca { animation: none; }
}
.sala-fila {
    margin: 14px auto 0;
    display: inline-block;
    padding: 6px 14px; border-radius: 999px;
    background: var(--site-line);
    font-size: 14px; font-weight: 600; color: var(--site-ink);
}
/* El aviso de tardanza: escondido hasta que `terminal.js` (o el servidor)
   le pone `es-danger`. */
.sala-tarde { display: none; }
.sala-tarde.es-danger { display: block; }

/* ── «Revisa tu correo»: el sobre que se cierra y sale ───────────────────
   Un guion de ~2,4 s y después un vaivén. Entra la carta (0,2 s), baja al
   sobre, se dobla la solapa (1,5 s), lo sella el isotipo (1,95 s) y el
   sobre queda flotando con dos ondas de «enviado»; la fila de la bandeja
   llega al final, como llega el correo.

   Cada pieza está escrita en su estado FINAL y la animación solo dice de
   dónde viene (`backwards`). Así el `prefers-reduced-motion` del final de
   esta hoja —que apaga toda animación— deja el sobre ya cerrado y sellado,
   no a medio camino. Las ondas y las chispas, que solo existen en
   movimiento, quedan en opacidad cero. */
.sobre {
    position: relative;
    width: min(240px, 66vw);
    margin: 0 auto 30px;
    animation: sobre-entra .6s cubic-bezier(.22, .8, .3, 1) backwards;
}
.sobre-flota {
    position: relative; z-index: 1;
    animation: sobre-flota 4.6s ease-in-out 2.4s infinite;
}
.sobre-svg {
    display: block; width: 100%; height: auto; overflow: visible;
    filter: drop-shadow(0 18px 22px rgba(91, 62, 200, .26));
}
.sobre-fondo { fill: var(--primary-dark); }
.sobre-solapa-abierta { fill: #6c50e2; }
.sobre-carta-hoja { fill: #fff; }
.sobre-carta-logo, .sobre-carta-boton { fill: var(--primary); }
.sobre-carta-linea { fill: #dcd4fb; }
.sobre-carta-tenue { fill: #ece8fb; }
.sobre-frente { fill: url(#sobre-frente-color); }
.sobre-pliegue {
    fill: none; stroke: rgba(255, 255, 255, .2);
    stroke-width: 2; stroke-linecap: round;
}
.sobre-solapa { fill: #9a82f7; }

.sobre-solapa-abierta, .sobre-solapa, .sobre-carta {
    transform-box: fill-box;
}
.sobre-carta {
    transform: translateY(44px);
    animation: sobre-carta 1.35s cubic-bezier(.45, 0, .25, 1) .2s backwards;
}
/* La solapa se dobla en dos tiempos: la abierta (detrás de la carta) se
   achica hacia su bisagra y la cerrada (delante) crece desde la misma. Un
   giro 3D de verdad no existe dentro de un SVG; esto se lee igual. */
.sobre-solapa-abierta {
    transform-origin: 50% 100%;
    transform: scaleY(0);
    animation: sobre-solapa-abre .22s ease-in 1.5s backwards;
}
.sobre-solapa {
    transform-origin: 50% 0;
    animation: sobre-solapa-cierra .3s cubic-bezier(.2, .9, .3, 1.25) 1.7s backwards;
}

/* El sello es el isotipo que piensa y resuelve de la portada, sobre la
   punta de la solapa (120, 122 en el viewBox). Su ciclo arranca cuando ya
   está puesto, no detrás de la carta. */
.sobre-sello {
    position: absolute; z-index: 2;
    left: 50%; top: 64.2%;
    width: 19%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(40, 20, 110, .3);
    animation: sobre-sello .55s cubic-bezier(.3, 1.6, .5, 1) 1.95s backwards;
}
.sobre-sello .isocheck { display: block; width: 100%; }
.sobre-sello .isocheck-anillo,
.sobre-sello .isocheck-centro,
.sobre-sello .isocheck-chulo { animation-delay: 2.5s; }

.sobre-sombra {
    position: absolute; left: 50%; bottom: -8px;
    width: 64%; height: 12px; margin-left: -32%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(40, 20, 110, .18), transparent);
    animation: sobre-sombra 4.6s ease-in-out 2.4s infinite;
}
.sobre-onda {
    position: absolute; z-index: 0;
    left: 50%; top: 50%;
    width: 120%; aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: sobre-onda 3.2s cubic-bezier(.2, .6, .35, 1) 2.2s infinite;
}
.sobre-onda-2 { animation-delay: 3.8s; }

.sobre-chispa {
    position: absolute; z-index: 2;
    width: 14px; height: 14px;
    background: var(--primary);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
    animation: sobre-chispa 2.8s ease-in-out infinite;
}
.sobre-chispa-1 { left: 2%;  top: 18%; animation-delay: 2.05s; }
.sobre-chispa-2 { right: 0;  top: 6%;  width: 18px; height: 18px; background: #f5b83d; animation-delay: 2.35s; }
.sobre-chispa-3 { right: 8%; top: 62%; width: 10px; height: 10px; animation-delay: 2.8s; }

/* El texto sube en escalera, como la portada; la fila de la bandeja llega
   cuando el sobre ya salió. */
.note-sobre > :not(.sobre) {
    animation: site-rise .7s cubic-bezier(.22, .8, .3, 1) backwards;
}
.note-sobre > .note-title   { animation-delay: .35s; }
.note-sobre > .note-body    { animation-delay: .45s; }
.note-sobre > .sobre-bandeja { animation: sobre-llega .6s cubic-bezier(.22, .8, .3, 1) 2.3s backwards; }
.note-sobre > .sobre-atajos  { animation-delay: 2.5s; }
.note-sobre > .note-fine     { animation-delay: 2.6s; }

.sobre-bandeja {
    display: flex; align-items: center; gap: 12px;
    max-width: 440px; margin: 30px auto 0;
    padding: 14px 16px;
    text-align: left;
    background: var(--site-card);
    border: 1px solid var(--site-line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(40, 30, 80, .08);
}
.sobre-bandeja-punto {
    width: 8px; height: 8px; flex: none;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(124, 92, 240, .5);
    animation: sobre-punto 1.8s ease-out 2.9s infinite;
}
.sobre-bandeja-avatar { width: 36px; height: 36px; flex: none; }
/* El mismo isotipo del sello, quieto: el avatar de la fila no piensa. */
.sobre-bandeja-avatar .isocheck { display: block; width: 100%; }
.sobre-bandeja-avatar .isocheck * { animation: none; }
.sobre-bandeja-texto { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sobre-bandeja-de, .sobre-bandeja-asunto {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sobre-bandeja-de { font-size: 13px; color: var(--site-faint); }
.sobre-bandeja-de strong { color: var(--site-ink); font-weight: 600; margin-right: 4px; }
.sobre-bandeja-asunto { font-size: 14.5px; font-weight: 600; color: var(--site-ink); }
.sobre-bandeja-hora { align-self: flex-start; font-size: 12px; color: var(--primary); font-weight: 600; }

.sobre-atajos {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin-top: 22px;
}
.note-sobre .note-fine { margin-top: 26px; }

@keyframes sobre-entra {
    from { opacity: 0; transform: translateY(18px) scale(.94); }
}
@keyframes sobre-carta {
    0%       { transform: translateY(-34px); opacity: 0; }
    30%, 55% { transform: translateY(-6px);  opacity: 1; }
    100%     { transform: translateY(44px); }
}
@keyframes sobre-solapa-abre   { from { transform: scaleY(1); } }
@keyframes sobre-solapa-cierra { from { transform: scaleY(0); } }
@keyframes sobre-sello {
    from { transform: translate(-50%, -50%) scale(0) rotate(-120deg); }
}
@keyframes sobre-flota {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-9px) rotate(-1.5deg); }
}
@keyframes sobre-sombra {
    0%, 100% { transform: scaleX(1);   opacity: 1; }
    50%      { transform: scaleX(.82); opacity: .6; }
}
@keyframes sobre-onda {
    0%   { opacity: .35; transform: translate(-50%, -50%) scale(.55); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes sobre-chispa {
    0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
    30%      { opacity: 1; transform: scale(1) rotate(45deg); }
    60%      { opacity: 0; transform: scale(.4) rotate(90deg); }
}
@keyframes sobre-llega {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
}
@keyframes sobre-punto {
    0%   { box-shadow: 0 0 0 0 rgba(124, 92, 240, .5); }
    100% { box-shadow: 0 0 0 9px rgba(124, 92, 240, 0); }
}

/* ── Las páginas legales: privacidad y términos del servicio ─────────────
   Una columna de lectura larga, la única prosa corrida del sitio. */
.legal { max-width: 46rem; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; }
.legal .legal-fecha { opacity: .7; font-size: .95rem; margin-bottom: 2.5rem; }
/* El listón de arriba flota: sin este margen, llegar por ancla —que es
   como entra un revisor de Meta a #eliminacion-de-datos— deja el título
   escondido detrás del nav y la sección parece empezar a media frase. */
.legal h2 {
    margin-top: 3rem; font-size: 1.35rem; line-height: 1.25;
    scroll-margin-top: 8.5rem;
}
.legal h3 { margin-top: 1.75rem; font-size: 1.05rem; }
.legal p, .legal li { line-height: 1.7; }
.legal ul { padding-left: 1.25rem; }
/* El sitio les quita el subrayado a los enlaces, y en la prosa legal eso los
   vuelve invisibles: «la política de privacidad» o «Cómo pedir que se
   eliminen» son a donde hay que poder ir. El índice no lo necesita. */
.legal > p a, .legal > ul a, .legal > ol a {
    text-decoration: underline; text-underline-offset: .18em;
}
.legal li { margin-bottom: .5rem; }
.legal table {
    width: 100%; border-collapse: collapse;
    margin: 1rem 0; font-size: .95rem;
}
.legal th, .legal td {
    text-align: left; padding: .6rem .5rem;
    border-bottom: 1px solid rgba(0,0,0,.12); vertical-align: top;
}
.legal .legal-tabla { overflow-x: auto; }
.legal-indice {
    margin: 2rem 0 0; padding: 1.25rem 1.5rem;
    border-radius: 12px; background: rgba(0,0,0,.04);
}
.legal-indice ol { margin: .5rem 0 0; padding-left: 1.25rem; }
.legal-indice li { margin-bottom: .3rem; }

/* Quien pidió menos movimiento no recibe ninguno. El rotor se queda en su
   primera palabra, que por eso es la genérica. */
@media (prefers-reduced-motion: reduce) {
    .site *, .site *::before, .site *::after {
        animation: none !important;
        transition: none !important;
    }
    .site-btn:hover { transform: none; }
}