/* ============================================================
   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; }
.site-nav-brand img { display: block; }
.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); }

.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á). */
.hero-made {
    display: flex; align-items: baseline; justify-content: center;
    gap: 10px; flex-wrap: wrap;
    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: left;
}
.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 cifras ──────────────────────────────────────────────────────────
   Una fila de números grandes con filete entre columna y columna, como en
   el referente. Sin cajas: los números son el adorno. */
.stats {
    list-style: none; margin: 0 auto; padding: clamp(10px, 2vw, 20px) clamp(20px, 5vw, 40px) clamp(40px, 6vw, 72px);
    max-width: 1180px;
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat { display: grid; gap: 6px; padding-left: 18px; border-left: 1px solid var(--site-line-hi); }
.stat-value {
    font-family: var(--site-display);
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 800; letter-spacing: -.03em;
    line-height: 1;
}
.stat-label { font-size: 13px; line-height: 1.4; color: var(--site-dim); }

/* ── 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;
    padding: clamp(10px, 2vw, 22px) clamp(20px, 5vw, 40px) clamp(40px, 6vw, 72px);
}
.pain-index-title {
    margin: 0 0 22px;
    font-family: var(--site-display);
    font-size: 12px; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--site-faint);
}
.pain-index-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0 24px;
    grid-template-columns: repeat(auto-fit, minmax(168px, 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); }

/* ── El dolor, dicho antes que la promesa ────────────────────────────────
   La línea que va sobre cada titular. Quien llega tiene que reconocerse en
   ella o no lee la de abajo, así que va en la tipografía de despliegue y
   con cuerpo de verdad — pero en tinta apagada y con un filete al lado,
   porque es la voz del PROBLEMA: el titular es el que manda. */
.dolor-pain {
    margin: 0 0 18px;
    padding-left: 16px;
    border-left: 2px solid var(--site-line-hi);
    font-family: var(--site-display);
    font-size: clamp(16px, 1.9vw, 21px);
    font-weight: 500; line-height: 1.35;
    color: var(--site-faint);
}
.strip-tunnel .dolor-pain {
    border-left-color: rgba(255, 253, 250, .22);
    color: #8b86a6;
}

/* ── El embudo: la maraña entra, los rayos salen ─────────────────────────
   El lenguaje de los referentes de Renzo: HILOS. Un solo SVG con las tres
   zonas — la maraña de la izquierda, el nodo del isotipo y los rayos que
   aterrizan en la cadena— para que todo comparta coordenadas y escale
   como una pieza. El flujo corre por `stroke-dashoffset`: los guiones
   viajan HACIA el nodo en la maraña y DESDE el nodo en los rayos, porque
   ese es el sentido del dibujo. */
.funnel-band { position: relative; }
.funnel-art { display: block; width: 100%; height: auto; }

/* El lienzo de three con las hebras vivas: calcado ENCIMA del SVG (misma
   caja, mismas coordenadas) y sin oír el mouse. Cuando el módulo monta,
   la banda gana `.funnel-live` y los hilos/rayos dibujados del SVG se
   apagan — quedan como fallback para quien no corre JS. */
.funnel-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    /* La transparencia DE VERDAD no se puede: el compositor del
       UnrealBloom pisa el alfa y rellena de negro opaco (issue viejo de
       three). `screen` la simula para un efecto aditivo: el negro del
       lienzo se vuelve invisible y solo la luz se suma al fondo de la
       sección — sobre fondo oscuro es idéntico a alfa real. */
    mix-blend-mode: screen;
}
/* El dibujo del fallback (hilos, rayo, chulos, rótulos) solo existe SIN
   JavaScript: se apaga por la clase `js` que la base pone antes del
   primer paint — apagarlo con `.funnel-live` era tarde, y el SVG viejo
   se asomaba un instante en cada recarga mientras three montaba (Renzo
   lo cazó). Los chulos con rótulo además siguen sin reemplazo desde que
   salieron del panel vivo. */
.js .fun-hilo,
.js .fun-rayo,
.js .fun-checks,
.js .fun-rotulos { display: none; }

/* Con el tunnel vivo la banda es el panel del referente A LO GRANDE:
   todo el ancho del viewport y casi todo el alto — nada de card ni de
   esquinas redondeadas (Renzo, 2026-08-10). La altura muerde el mínimo
   para que en una ventana chata no colapse, y el techo evita que en una
   pantalla vertical el tunnel quede como una rendija estirada. */
.funnel-live {
    height: clamp(480px, 78vh, 820px);
    overflow: hidden;
}

/* La sección OSCURA: el tunnel no vive en un card — la franja entera es
   negra de borde a borde y el body queda crema siempre (Renzo quitó el
   «viaje a negro» que apagaba la página). El negro exacto lo repinta
   site-funnel.js con el dial Background, para que sección y lienzo sean
   UN solo color sin costura. */
.strip-tunnel {
    max-width: none;
    padding-left: 0; padding-right: 0;
    background: #0f0f0f;
    border-top: 0;
}
/* La cabecera conserva la columna de las demás secciones, reconstruida
   adentro de la franja negra. */
.tunnel-inner {
    max-width: 1180px;
    margin-left: auto; margin-right: auto;
    padding: 0 clamp(20px, 5vw, 40px);
}
.strip-tunnel .section-title { color: #fffdfa; }
.strip-tunnel .section-lede { color: #b3aecb; }
/* El canvas del tunnel es OPACO (el fondo del original): el SVG de los
   chulos sube de capa para no quedar sepultado — dibuja encima del
   lienzo, que es exactamente donde van sus rótulos. Con la banda a la
   altura del viewport el SVG llena la caja y `meet` lo centra: chulos y
   rótulos quedan a la altura del haz, que también está centrado. */
.funnel-live .funnel-art { position: absolute; inset: 0; height: 100%; z-index: 1; }

/* Las fichas de apps de las que nacen las hebras: el caos con logo. Las
   crea el módulo (sin JS no hay hebras y tampoco fichas), posicionadas
   en porcentaje del mismo viewBox del lienzo. Flotan con la propiedad
   `translate` — el `transform` del centrado queda quieto y no se pelean. */
.funnel-apps {
    position: absolute; inset: 0;
    pointer-events: none;
    /* La columna: de dónde arranca y cuánto alto abarca. Vive acá —y no
       en el JS— porque en angosto el abanico se CIERRA para quedar a la
       altura de la boca del cono; el módulo solo dice cuántas fichas son
       (`--n`, en línea) y cuál es cuál (`--i`). */
    --y0: 7%;
    --span: 86%;
    --n: 11;
}
.funnel-app {
    position: absolute;
    /* Despegadas del filo (Renzo): quedan justo a la izquierda de la
       boca del cono, no pegadas al borde de la pantalla. */
    left: 7%;
    top: calc(var(--y0) + var(--i) * var(--span) / (var(--n) - 1));
    display: grid; place-items: center;
    width: 3.6%; min-width: 36px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: var(--site-card);
    border: 1px solid var(--site-line);
    border-radius: 26%;
    box-shadow: 0 10px 22px -12px rgba(23, 20, 31, .3);
    animation: app-flota 5.5s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
.funnel-app img { width: 56%; height: 56%; display: block; }
.funnel-app-letra {
    font-family: var(--site-display);
    font-weight: 800;
    font-size: clamp(14px, 1.3vw, 21px);
}
@keyframes app-flota {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -7px; }
}

.fun-hilo {
    opacity: .5;
    stroke-dasharray: 5 13;
    animation: fun-flujo-hilo var(--t, 8s) linear infinite;
    animation-delay: var(--d, 0s);
}
/* -180 es múltiplo del período del guion (5+13=18): el ciclo empalma sin
   salto. */
@keyframes fun-flujo-hilo { to { stroke-dashoffset: -180; } }

/* Los rayos son SÓLIDOS: el movimiento es del caos, el orden está quieto. */
.fun-rayo { opacity: .9; }

/* El nodo: el loader del ERP girando siempre, superpuesto en el punto de
   convergencia del SVG (600,220 de 1400×440). El ancho en porcentaje lo
   mantiene pegado a la geometría del dibujo cuando la banda escala; el
   mínimo evita que en un teléfono quede del tamaño de una lenteja. */
.funnel-nodo {
    position: absolute;
    /* El disco un paso más claro que el #0f0f0f de la sección (Renzo lo
       afinó en devtools): el arte del loader trae el gancho --loader-bg. */
    --loader-bg: #1f1f28;
    /* left/top son el centrado del FALLBACK sin JS; con el tunnel vivo
       ubicarNodo() los pisa inline proyectando la convergencia. */
    left: 50%; top: 50%;
    width: 7.5%; min-width: 56px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* `overflow: hidden` no es gusto: el arte del loader deja un pelo de
       1px en el borde izquierdo de su caja cuadrada (se cazó ocultando el
       nodo y viendo desaparecer la raya). El disco llena el viewBox
       exacto, así que el clip circular corta el artefacto y nada más. */
    overflow: hidden;
}
.funnel-nodo-svg { display: block; width: 100%; height: 100%; }
.fun-checks circle { fill: #fffdfa; stroke: var(--primary); stroke-width: 2; }
.fun-checks path {
    fill: none; stroke: var(--primary);
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
/* Claros siempre: la franja es negra también para el fallback sin JS. */
.fun-rotulos text {
    font-family: var(--font);
    font-size: 21px; font-weight: 600;
    fill: #f6f4ef;
}

/* La lista es el texto de VERDAD (la lee el lector de pantalla siempre);
   en pantalla solo aparece en angosto, cuando los rótulos del SVG
   quedarían de cinco píxeles. */
.funnel-list {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ── El tunnel en un teléfono ────────────────────────────────────────────
   El dibujo MANDA (Renzo, 2026-08-10, con el móvil enfrente): la lista
   se va de la pantalla —queda para el lector de pantalla, que es de
   quien siempre fue—, la banda crece, el nodo crece con ella y el
   encuadre se acerca (el `zoom` de la cámara, en site-funnel.js). Antes
   la lista le quedaba montada al haz y el cono se veía de juguete. */
@media (max-width: 700px) {
    /* Sin rótulos: a este ancho serían de cinco píxeles. Los chulos sin
       rótulo no dicen nada y solo estorban. Los dos son del fallback sin
       JS — con JS ya los apaga la clase `js`. */
    .fun-rotulos, .fun-checks { display: none; }
    /* La banda es la que Renzo tuvo enfrente al afinar los diales de
       angosto: cambiarle el alto le cambia el `aspect` a la cámara, y con
       él el encuadre que él aprobó. */
    .funnel-live { height: min(96vw, 420px); }
    /* El nodo guarda la MISMA proporción que en escritorio contra la boca
       del cono (≈1/5 de su alto): el 7,5% de un teléfono es una lenteja y
       el 19% se comía el cono corto de angosto. */
    .funnel-nodo { width: 15%; min-width: 58px; }
    /* La columna, a la altura de la boca del cono (spread 27.9 ≈ tres
       cuartos del alto): repartida en el 86% las fichas de las puntas
       quedaban solas, sin una hebra cerca. */
    .funnel-apps { --y0: 12%; --span: 78%; }
    /* Bien adentro —a 26px del filo quedaban mordidas por el borde— y del
       tamaño que las deja RESPIRAR: once fichas en el alto de la boca del
       cono no dan para más de 28px sin montarse unas sobre otras. */
    .funnel-app { left: 44px; min-width: 28px; }
}

/* ── El arte de los dolores ──────────────────────────────────────────────
   Las cuatro piezas dibujadas a mano (el 01 se queda con el tunnel, que
   tiene su propio bloque arriba). Comparten la caja: el SVG llena el ancho
   de la sección y escala solo por su `viewBox`, sin marco ni sombra —el
   arte de esta página flota sobre el papel, como las piezas planas que ya
   estaban—.

   `scroll-margin-top` es del índice de arriba: sin él, el clic deja el
   titular pegado al filo de la pantalla y la sección se lee decapitada.
   No compensa ninguna barra fija —`.site-nav` no se pega—, es aire. */
.strip-dolor { scroll-margin-top: clamp(16px, 4vw, 40px); }
.dolor-art {
    margin: 0;
    display: grid; gap: clamp(14px, 2vw, 22px);
}
.dolor-art svg { display: block; width: 100%; height: auto; }

/* El rótulo que va ENCIMA de cada dibujo (Renzo, 2026-08-11): en un
   teléfono el dibujo entra en pantalla antes que cualquier pie, y hasta
   que no se lee el rótulo son cajas de colores. Decir qué se está
   mirando antes de mostrarlo es lo que hace que un dibujo abstracto deje
   de serlo.

   Dos pisos: `.art-rotulo` nombra la zona en versalitas, `.art-detalle`
   la explica en una frase normal. El detalle apaga el `letter-spacing` y
   las versalitas heredadas a propósito — con ellos puestos se leía como
   otro rótulo más y el ojo se lo saltaba entero. */
.art-rotulo {
    margin: 0;
    display: grid; gap: 5px;
    font-family: var(--site-display);
    font-size: 13px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--site-faint);
}
.art-detalle {
    font-size: 14px; font-weight: 500;
    letter-spacing: normal; text-transform: none;
    line-height: 1.4;
    color: var(--site-dim);
}

/* 02 — Antes y ahora. Dos paneles del mismo tamaño, y todo el argumento
   está en que se vean AL TIEMPO: apilados en un teléfono se pierde la
   comparación, así que ahí quedan uno sobre otro pero con el rótulo
   pegado a cada uno para que no se confundan. */
.art-viejo {
    display: grid; gap: clamp(20px, 3vw, 36px);
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    align-items: start;
}
.viejo-panel { display: grid; gap: 14px; align-content: start; }
/* El panel de Agrupa se rotula en el morado: de los dos, uno es la
   respuesta. */
.viejo-panel:last-child .art-rotulo { color: var(--primary); }

/* 03 — Los cuatro canales. Las hebras usan el mismo flujo de guiones que
   el tunnel del 01 y con el mismo período (5+13=18, y -180 empalma sin
   salto), porque es la misma idea contada dos veces: algo entra revuelto
   y sale ordenado. El amarre a la ficha es SÓLIDO — igual que el haz del
   embudo, lo que ya está resuelto no se mueve. */
   El techo de ancho es del DIBUJO, no de la sección: estirado a 1180px un
   lienzo de 900 deja los trazos de 2px en pelos y las tres tarjetas de la
   bandeja del tamaño de una uña. Centrado y con tope se lee. */
.art-mensajes { max-width: 980px; margin-inline: auto; }
.msg-hilo {
    stroke-dasharray: 5 13;
    animation: fun-flujo-hilo 7.4s linear infinite;
    animation-delay: var(--d, 0s);
}
.msg-amarre { stroke-dasharray: 4 5; opacity: .8; }

/* 04 — La gente sube, la cuenta no. La escala de abajo NO es decoración
   redundante: el dibujo dice «no sube» y esta lista dice cuánta gente es
   cada montón, que es el dato que el dibujo no puede dar sin meterle
   texto adentro. En angosto se vuelve una columna. */
.art-precio { display: grid; gap: clamp(18px, 2.5vw, 28px); }
/* DOS o CUATRO columnas, nunca tres. Con `auto-fit` y un mínimo de 160px
   había un rango de anchos —alrededor de 700px— donde solo cabían tres:
   los cuatro items quedaban en 3+1 y el hueco del cuarto se veía como un
   bloque GRIS vacío, porque el fondo de la rejilla es el filete. Cuatro
   items solo se reparten parejo en 1, 2 o 4 columnas; las que dividen se
   piden a mano y el problema no existe. */
.precio-escala {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1px;
    grid-template-columns: repeat(2, 1fr);
    background: var(--site-line);
    border: 1px solid var(--site-line);
    border-radius: 14px; overflow: hidden;
}
@media (min-width: 760px) {
    .precio-escala { grid-template-columns: repeat(4, 1fr); }
}
.precio-escala li {
    background: var(--site-paper);
    padding: 16px 18px 18px;
    display: grid; gap: 5px;
}
.precio-gente {
    font-family: var(--site-display);
    font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
.precio-monto { font-size: 13px; color: var(--primary); }

/* 05 — La columna de guiones. Es una TABLA y no un dibujo: este dolor se
   gana con nombres propios (PUC, DIAN, PSE) y esos no se pueden ilustrar.

   El paisaje de Gemini va detrás, quieto y muy bajo de opacidad: es
   atmósfera. Va en `position:absolute` para que no empuje nada, y si no
   carga la tabla queda igual. */
.art-gringo { position: relative; }
.gringo-cielo {
    position: absolute; right: 0; bottom: 0;
    width: min(46%, 420px); height: auto;
    opacity: .5;
    pointer-events: none;
    /* Se recorta contra el papel por abajo para que no se lea como una
       foto pegada sino como un fondo del que emerge la tabla. */
    mask-image: linear-gradient(to top, transparent, #000 55%);
    -webkit-mask-image: linear-gradient(to top, transparent, #000 55%);
}
.gringo-tabla {
    position: relative;
    list-style: none; margin: 0; padding: 0;
    max-width: 760px;
}
.gringo-tabla li {
    display: grid;
    grid-template-columns: 1fr 108px 108px;
    align-items: center; gap: 12px;
    padding: 15px 0;
    border-top: 1px solid var(--site-line);
    font-size: clamp(14px, 1.4vw, 16px);
}
.gringo-cabeza {
    border-top: 0 !important;
    padding-top: 0 !important;
    font-family: var(--site-display);
    font-size: 12px !important; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--site-faint);
}
.gringo-que { color: var(--site-ink); }
.gringo-alla, .gringo-aca { text-align: center; }
/* «no» y «sí» son texto de verdad y no un glifo suelto: un chulo sin
   palabra no lo lee ningún lector de pantalla, y una columna de guiones
   grises tampoco. La forma la ponen las píldoras. */
.gringo-no, .gringo-si {
    display: inline-block; min-width: 44px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
}
.gringo-no {
    background: transparent;
    border: 1px dashed var(--site-line-hi);
    color: var(--site-faint);
}
.gringo-si {
    background: var(--primary);
    color: #fffdfa;
}
@media (max-width: 560px) {
    /* A este ancho la fila de tres columnas deja el rótulo en dos letras
       por renglón. Se parte: el nombre arriba, las dos respuestas debajo. */
    .gringo-tabla li { grid-template-columns: 1fr 1fr; }
    .gringo-que { grid-column: 1 / -1; }
    .gringo-cielo { display: none; }
}

/* ── 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». */
.modules {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1px;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    background: var(--site-line);
    border: 1px solid var(--site-line);
    border-radius: 14px; overflow: hidden;
}
.module {
    background: var(--site-paper);
    padding: 20px 20px 22px;
    transition: background .18s ease;
}
.module:hover { background: var(--site-card); }
.module-name {
    display: block;
    font-family: var(--site-display);
    font-size: 16px; 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;
}

/* ── La prueba: las cifras y el caso ─────────────────────────────────────
   Una sola cita, grande y en Gabarito. Un carrusel de testimonios con tres
   clientes inventados es exactamente lo que esta página no puede hacer.

   Las cifras viven ADENTRO de esta sección desde que la portada se armó
   por dolores: bajo el hero eran adorno —números sin nada que sostener— y
   acá arriba de la cita son lo que la respalda. Por eso pierden su padding
   propio y su columna: ya están dentro de un `.strip`. */
.case { text-align: center; }
.case .stats {
    max-width: none;
    padding: 0 0 clamp(38px, 6vw, 64px);
    text-align: left;
}
.case blockquote {
    margin: 0 auto; max-width: 22ch;
    font-family: var(--site-display);
    font-size: clamp(26px, 4vw, 46px);
    font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
}
.case blockquote em { font-style: normal; color: var(--primary); }
.case figcaption { margin: 26px 0 0; font-size: 14px; color: var(--site-dim); }
.case-who { font-weight: 600; color: var(--site-ink); }

/* ── 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; }

/* ── El cierre ───────────────────────────────────────────────────────────
   La mancha vuelve — más chica y detrás del titular final — para cerrar
   con lo mismo que abrió. */
.closer {
    position: relative; z-index: 1; overflow: hidden;
    max-width: 1180px; margin: 0 auto;
    padding: clamp(64px, 10vw, 130px) clamp(20px, 5vw, 40px);
    border-top: 1px solid var(--site-line);
    text-align: center;
}
.closer::before {
    content: ''; position: absolute; inset: 10% 15%; z-index: -1;
    background: url("../img/site/hero-mancha.1f1a61887254.webp") center / cover no-repeat;
    -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 95%);
            mask-image: radial-gradient(closest-side, #000 30%, transparent 95%);
}
.closer h2 {
    font-size: clamp(30px, 5.4vw, 60px); line-height: 1.02;
    letter-spacing: -.035em;
}
.closer p { margin: 16px 0 30px; color: var(--site-dim); }

/* ── 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. */
.hero-fondo {
    position: absolute; inset: 0 0 auto;
    height: min(90vh, 760px);
    padding: 0; margin: 0;
    z-index: 0;
    pointer-events: 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. */
.pane {
    position: relative; z-index: 1;
    max-width: 1000px; margin: 0 auto;
    padding: clamp(30px, 6vw, 76px) clamp(20px, 5vw, 40px) 90px;
    display: grid; gap: clamp(32px, 6vw, 72px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
}
@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;
}
.pane-points {
    margin: 26px 0 0; padding: 0; list-style: none;
    display: grid; gap: 12px; font-size: 14px; color: var(--site-dim);
}
.pane-points li { display: flex; gap: 10px; }
.pane-points li::before {
    content: ''; flex: none;
    width: 5px; height: 5px; margin-top: 8px;
    border-radius: 50%; background: var(--primary);
}

.pane-form {
    display: grid; gap: 20px;
    padding: clamp(24px, 4vw, 34px);
    border: 1px solid var(--site-line);
    border-radius: 20px;
    background: var(--site-card);
    box-shadow: 0 34px 70px -50px rgba(23, 20, 31, .45);
}
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; }
.field input {
    width: 100%;
    padding: 12px 14px;
    font: inherit; font-size: 15px;
    color: var(--site-ink);
    background: var(--site-paper);
    border: 1px solid var(--site-line-hi);
    border-radius: 11px;
    transition: border-color .16s ease, background .16s ease;
}
.field input::placeholder { color: var(--site-faint); }
.field input:hover { border-color: var(--site-faint); }
.field input:focus { border-color: var(--primary); background: #fff; }

/* 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: 11px; overflow: hidden;
    background: var(--site-paper);
}
.field-affixed:focus-within { border-color: var(--primary); }
.field-affixed input {
    border: 0; border-radius: 0; background: transparent; min-width: 0;
}
.field-affixed input:focus { background: transparent; }
.field-affix {
    display: flex; align-items: center; padding: 0 14px;
    font-size: 14px; color: var(--site-faint);
    background: rgba(23, 20, 31, .04);
    border-left: 1px solid var(--site-line);
    white-space: nowrap;
}
.field-help { margin: 0; font-size: 12px; color: var(--site-faint); }
/* 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: '⚠ '; }
.pane-form .site-btn { justify-content: center; margin-top: 4px; }

/* ── 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 página legal: privacidad y tratamiento de datos ──────────────────
   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; }
.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; }
}