/* GENERADO, no editar a mano. Subconjunto de HOJAS (HOJAS_CRITICA en
   tools/propagar-css.js), en el mismo orden relativo. La portada lo carga bloqueando
   el primer pintado; main.css trae el resto y no bloquea. Regenerar: npm run css:propagar. */

/* ═══ tokens.css ═══ */
        :root {
            --bg-page: #05070d;
            --bg-base: #070a12;
            --bg-surface: rgba(9, 14, 24, 0.88);
            --bg-surface-elevated: rgba(13, 19, 32, 0.96);
            --bg-glass: rgba(10, 16, 28, 0.72);
            --bg-panel: var(--bg-glass);
            --bg-card: var(--bg-surface);
            --bg-card-strong: var(--bg-surface-elevated);
            --bg-hover: rgba(16, 24, 39, 0.94);

            --text-primary: #f4f7fb;
            --text-secondary: #a7b0c0;
            --text-muted: #858fa0;
            --text-main: var(--text-primary);
            --text-strong: #d9e1ee;

            --border-subtle: rgba(255, 255, 255, 0.08);
            --border-strong: rgba(255, 255, 255, 0.15);
            --border: var(--border-subtle);
            --surface-line: var(--border-subtle);

            --accent: #20d6a3;
            --accent-rgb: 32, 214, 163;
            --accent-soft: rgba(32, 214, 163, 0.12);
            --accent-border: rgba(32, 214, 163, 0.26);
            --accent-soft-text: #b6f1de;
            --accent-contrast: #04110d;

            --premium: #c8a96a;
            --premium-rgb: 200, 169, 106;
            --premium-soft: rgba(200, 169, 106, 0.1);
            --premium-border: rgba(200, 169, 106, 0.22);
            --premium-text: #e2c892;
            --premium-contrast: #120d06;

            --success: #22c995;
            --success-rgb: 34, 201, 149;
            --success-soft: rgba(34, 201, 149, 0.12);
            --success-soft-text: #9be8cb;

            --warning: #d9a441;
            --warning-rgb: 217, 164, 65;
            --warning-soft: rgba(217, 164, 65, 0.12);

            --danger: #f05d6a;
            --danger-rgb: 240, 93, 106;
            --danger-soft: rgba(240, 93, 106, 0.12);
            --danger-text: #f7b3b9;
            --danger-text-strong: #fccfd4;

            --info: #7aa7ff;
            --info-rgb: 122, 167, 255;
            --info-soft: rgba(122, 167, 255, 0.1);
            --info-soft-text: #bfd0ff;
            --data-muted: #bcc9df;
            --surface-deep: #0a141a;
            --surface-deeper: #07111f;

            --shadow-soft: 0 24px 60px rgba(2, 7, 18, 0.28);
            --shadow-card: 0 36px 96px rgba(2, 7, 18, 0.4);
            --shadow-deep: var(--shadow-card);

            --font-sans: 'Inter', sans-serif;
            --font-display: 'Manrope', 'Inter', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;

            --space-2xs: 4px;
            --space-xs: 8px;
            --space-sm: 12px;
            --space-md: 16px;
            --space-lg: 24px;
            --space-xl: 32px;
            --space-2xl: 40px;
            --space-3xl: 48px;
            --space-4xl: 64px;
            --space-5xl: 80px;
            --space-6xl: 96px;

            --duration-fast: 160ms;
            --duration-base: 240ms;
            --duration-slow: 360ms;
            --duration-slower: 560ms;

            --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
            --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
            --ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);

            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --radius-xl: 32px;

            /* ── EL ANCHO DE PÁGINA: UNA SOLA FUENTE DE VERDAD ──────────────
               «Hasta dónde llega la columna» lo declaraban SEIS dueños sin
               relación —hero.css, faq.css, legal.css, curso.css, archivo.css y
               curso-cuenta.css—, más cuatro copias del ancho de `.section-head`
               y un segundo mecanismo propio del hero (`--hero-copy-width`, con
               tres valores en tres hojas). Ninguno sabía de los otros.

               Ahora el ancho se declara UNA vez, en `layout.css`, como
               `max-width: var(--zona, var(--ancho-contenido))`. Un componente
               NO escribe un `max-width` nuevo: REDECLARA `--zona` sobre sí
               mismo con el token de esta escala que le toca. Así no queda
               ningún `max-width` con el que competir y no hay guerra de
               especificidad posible.

               Las cuatro son px, no `ch`, y esto es medición, no gusto: `ch` se
               resuelve contra el `font-size` DEL PROPIO ELEMENTO, y los
               contenedores van a 16px mientras su prosa va a 15px o a 17px. Un
               `80ch` sobre `.legal-main` computa 807,5px de caja y deja la
               prosa en 78,6 caracteres por línea: MÁS ESTRECHA que hoy. */

            /* Texto corrido: legales, /sobre, /metodologia y el cuerpo del
               curso. Medido a 1920 el 2026-09-17: da 82,0 caracteres por línea
               a los 15px de `.legal-article` y 78,3 a los 17px de
               `.curso-cuerpo`. Un solo número px cae a ±2 caracteres de 80 en
               las dos superficies; ningún otro lo hace.

               Se pasa a propósito del techo de 80 de WCAG 1.4.8, y también de
               la banda de 50-75 de `docs/patron-ui-ux-agentes-ia.md` §5.3: la
               prosa ya pintaba 79,9 caracteres por línea ANTES de este cambio,
               y estrecharla estaba prohibido. Divergencia declarada ahí. */
            --ancho-prosa: 840px;

            /* Columna de página: la cabecera, las consolas de lectura con panel
               lateral (/curso, /archivo) y las cabeceras de sección. */
            --ancho-contenido: 1440px;

            /* Tarjeta de formulario de página completa (/acceso, /siguiente).
               NO se ensancha con el contenido: un input de 1440px es peor UX.
               El número es el que ya pintaba `.curso-main--estrecho`, y bajarlo
               a 640 estrechaba a 57 caracteres una entradilla medida en 60. */
            --ancho-formulario: 760px;

            /* Margen lateral de página. Retira el `clamp(18px, 4vw, 32px)` que
               estaba tecleado tres veces y cuyo 18px no era de la escala. */
            --gutter-pagina: clamp(var(--space-md), 4vw, var(--space-xl));

            --z-nav: 1000;
            /* El enlace «Saltar al contenido»: por encima del nav fijo, por debajo de
               los modales y del banner de cookies. */
            --z-skip: 1500;
            --z-modal: 2000;

            /* ── EL ALTO DE LA CABECERA ───────────────────────────────────────
               El nav es `position: fixed` (components/nav.css), así que no ocupa
               sitio en el flujo y tapa lo que quede debajo. Todo lo que tiene que
               apartarse de él lo hace con ESTE token, nunca con el número:
               · el alto de la barra (`.nav-inner`, nav.css);
               · el relleno superior de las páginas de lectura (curso, archivo,
                 legales), de las de cuenta y tarjeta (account.css,
                 pantalla-tarjeta.css) y de /precios, y las piezas pegajosas
                 del curso;
               · el resaltado del índice del curso (`js/curso/consola.js`), que
                 lee el token ya calculado para su franja de lectura;
               · las anclas: `scroll-padding-top` en el `html` de base.css. Es UNA
                 regla para todo el documento, y un ancla nueva la hereda sin
                 declarar nada. Ningún `scroll-margin-top` lo repite: se sumaría.
               Un solo valor en todos los anchos, y por eso la barra móvil NO lo
               mide: por debajo de `--bp-nav` es `height: auto; min-height: 72px`
               y crece con lo que lleva dentro. Medido el 2026-10-08 a 390 px:
               · con JS, 72 + 1 de borde = 73; las reservas de 78 dejan 5 px
                 más de aire, que es lo que ya pintaban;
               · sin JS, 82,19: la barra mide MÁS que el token. Ningún consumidor
                 queda debajo porque todos suman aire al token; el más corto, el
                 `--space-xs` de `.curso-saltar`, deja 3,8 px.
               Un consumidor nuevo sin aire quedaría tapado en ese caso.
               `node tools/guardian-breakpoint.js` se pone en rojo si el alto
               vuelve a aparecer tecleado donde se reserva el sitio del nav.    */
            --alto-nav: 78px;

            /* ── EL ANCHO AL QUE LA CABECERA CAMBIA DE FORMA ─────────────────
               Por debajo de esto el nav monta el cajón: el botón de las tres
               rayas aparece, los enlaces se van a un panel absoluto y el logo
               encoge. Ese comportamiento vive ENTERO en components/nav.css,
               en un solo `@media`.

               Y AQUÍ EL LITERAL ESTÁ ESCRITO DOS VECES A PROPÓSITO, porque no
               hay forma de escribirlo una. `@media` NO puede leer una custom
               property —se evalúa antes de que exista el árbol de valores—, y
               `@custom-media`, que sí lo resolvería, no lo ha implementado
               ningún navegador. Las dos vías están cerradas; no las intentes.

               Lo que sí se puede es hacer la divergencia IMPOSIBLE DE IGNORAR:
               `node tools/guardian-breakpoint.js` lee este valor y el literal
               de nav.css y se pone en rojo si dejan de coincidir. Este token
               es la copia AUTORIZADA, y el guardián es lo que la hace segura.

               O sea que para mover la cabecera de ancho se tocan DOS sitios,
               éste y el `@media` de nav.css, y el guardián dice si te dejaste
               uno. Si alguna vez llega `@custom-media`, esto se colapsa a uno
               solo y el guardián sobra.                                       */
            --bp-nav: 768px;

            --primary: var(--accent);
            --primary-hover: #46e1b3;
            --primary-glow: rgba(var(--accent-rgb), 0.24);
            --brand-glow: rgba(var(--accent-rgb), 0.14);
            --accent-metal: var(--premium);
            --accent-metal-soft: var(--premium-soft);

            --case-clear: var(--success);
            --case-mixed: var(--danger);
            --context-clear: var(--success);
            --context-mixed: var(--danger);
            --reaction-positive: var(--success);
            --reaction-negative: var(--danger);

            /* Legacy aliases: keep for compatibility, avoid new usage */
            --neon-cyan: var(--info);
            --neon-purple: #92a0de;
            --neon-green: var(--accent);
            --neon-amber: var(--premium);
            --neon-yellow: var(--warning);
            --neon-red: var(--danger);
        }


/* ═══ base.css ═══ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            /* El apartado de TODAS las anclas frente al nav fijo, en una sola regla:
               salto por `#`, `scrollIntoView` y el foco que el navegador lleva a la
               vista (WCAG 2.4.11). Un ancla nueva lo hereda sin declarar nada; un
               `scroll-margin-top` con el alto del nav se sumaría a esto. Ver
               `--alto-nav` en tokens.css. */
            scroll-padding-top: calc(var(--alto-nav) + var(--space-lg));
            background: var(--bg-page);
            color-scheme: dark;
        }

        body {
            min-height: 100vh;
            font-family: var(--font-sans);
            background-color: transparent;
            color: var(--text-primary);
            line-height: 1.6;
            letter-spacing: -0.01em;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100dvh;
            pointer-events: none;
            z-index: -10;
            background:
                radial-gradient(circle at 14% 16%, rgba(var(--accent-rgb), 0.13), transparent 26%),
                radial-gradient(circle at 84% 12%, rgba(var(--info-rgb), 0.12), transparent 24%),
                radial-gradient(circle at 52% 42%, rgba(19, 32, 54, 0.44), transparent 42%),
                linear-gradient(180deg, #060913 0%, var(--bg-page) 44%, #04070d 100%);
        }

        body::after {
            content: "";
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100dvh;
            pointer-events: none;
            z-index: -10;
            opacity: 0.3;
            background:
                linear-gradient(rgba(var(--info-rgb), 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(var(--info-rgb), 0.03) 1px, transparent 1px);
            background-size: 128px 128px;
            mask-image: radial-gradient(circle at center, black 18%, transparent 86%);
        }

        img,
        svg {
            display: block;
            max-width: 100%;
        }

        button,
        input,
        select,
        textarea {
            font: inherit;
        }

        a {
            color: inherit;
        }

        ::selection {
            background: rgba(var(--accent-rgb), 0.18);
            color: var(--text-primary);
        }

        :focus-visible {
            outline: 0;
            box-shadow: 0 0 0 1px var(--border-strong), 0 0 0 4px rgba(var(--accent-rgb), 0.18);
        }

        .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;
        }

        .hero,
        .showcase-wrapper,
        section,
        nav,
        footer {
            position: relative;
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
        }


/* ═══ components/nav.css ═══ */
        .nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: var(--z-nav);
            background: linear-gradient(180deg, rgba(6, 10, 18, 0.94), rgba(6, 10, 18, 0.78));
            backdrop-filter: blur(12px) saturate(120%);
            border-bottom: 1px solid var(--border-subtle);
            box-shadow: 0 20px 44px rgba(2, 7, 18, 0.24);
            padding: 0 20px;
        }

        .nav-inner {
            --zona: var(--ancho-contenido);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: var(--alto-nav);
            padding: 0 6px;
            gap: clamp(10px, 2vw, 20px);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 20px;
            letter-spacing: -0.04em;
            font-family: var(--font-display);
            min-width: 0;
            flex-shrink: 0;
            font-weight: 700;
            color: var(--text-primary);
            text-decoration: none;
        }

        /* EL LOGO YA NO LLEVA `style=` EN LÍNEA, Y ESTO ES LO QUE LLEVABA.
           `display:flex;align-items:center;gap:0.5rem;text-decoration:none;
           color:inherit;` iba escrito dentro del atributo en los DIECIOCHO
           emisores, contra la regla del repo, y se emitía tal cual desde
           `ESTILO_LOGO`. Aquí están los mismos valores y en el sitio que les
           toca: 0.5rem son los 8 px de `--space-xs`, así que no es una
           reinterpretación, es el mismo número escrito con su nombre.        */
        .logo > a {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            text-decoration: none;
            color: inherit;
        }

        .logo-mark {
            height: 24px;
            width: auto;
            display: block;
            flex-shrink: 0;
        }

        /* ══ LAS CUATRO ZONAS ══════════════════════════════════════════════════
           marca · navegación · utilidad · acción, y en ese orden.

           Antes había UNA caja, `.nav-actions`, con el menú, el idioma y el CTA
           dentro. No es que estuviera mal maquetada: es que no podía decir qué
           era cada cosa, así que la acción principal compartía caja —y por
           tanto peso— con un conmutador de idioma.

           El espacio sobrante crece en la NAVEGACIÓN (`margin-inline-end: auto`
           de `.nav-lista`), que es lo que empuja utilidad y acción a la derecha.
           Un solo sitio decide dónde está el hueco, en vez de tres
           `justify-content` peleándose por el mismo píxel.                     */
        .nav-marca {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            min-width: 0;
            flex-shrink: 0;
        }

        .nav-utilidad {
            display: flex;
            align-items: center;
            gap: clamp(8px, 1.8vw, 16px);
            min-width: 0;
        }

        .nav-accion {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: clamp(8px, 1.8vw, 16px);
            flex-shrink: 0;
        }

        .live-dot,
        .logo-dot {
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.12);
        }

        /* ── Enlaces del nav ─────────────────────────────────────────────
           El nav no tenía ni una entrada de navegación: sólo logo, idioma y el
           botón de planes.

           «Acceder» va en TEXTO y no en botón sólido a propósito: «Ver planes»
           es la acción principal, y dos botones sólidos en una barra se diluyen
           entre sí hasta que el visitante deja de saber cuál es la acción.     */

        /* El panel es lo que el cajón de móvil despliega, y lleva dentro DOS
           zonas: la navegación y la utilidad. Crece él —no sus hijos— porque es
           el único que puede ceder ancho sin que se mueva ni la marca ni el
           CTA, que son los dos extremos que tienen que quedarse quietos.       */
        .nav-panel {
            display: flex;
            align-items: center;
            gap: clamp(10px, 2vw, 20px);
            flex: 1 1 auto;
            min-width: 0;
        }

        /* LA NAVEGACIÓN ES UNA LISTA, y se pinta como si no lo fuera.
           `<ul>`/`<li>` para que la tecnología asistiva la anuncie como lista
           de destinos; sin viñetas ni sangría para que se vea como una barra. */
        .nav-lista {
            display: flex;
            align-items: center;
            gap: clamp(10px, 2vw, 20px);
            margin: 0;
            margin-inline-end: auto;
            padding: 0;
            list-style: none;
        }

        /* LOS 24 px SON UN SUELO, Y SE PERDIERON SIN QUE SE VIERA.
           Al meter los enlaces en `<li>`, el `<a>` dejó de ser elemento flexible
           y volvió a ser una caja EN LÍNEA: su alto pasó de 20,8 px a 16, o sea
           que el objetivo se encogió sin que la pantalla cambiara ni un píxel.
           Medido a 1440 px, `navLink._alto: 20.8 -> 16`.

           Ninguno de los dos valores llegaba al mínimo de 24 px que pide WCAG
           2.2 AA (2.5.8), así que el suelo se pone aquí para TODOS los enlaces
           de la cabecera y no sólo para los de la lista. Dentro del menú de
           cuenta suben a 32 y dentro del cajón de móvil a 44, que son reglas
           más específicas y ganan.                                            */
        .nav-link {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            transition: color var(--duration-fast) var(--ease-standard);
        }

        .nav-link:hover {
            color: var(--text-primary);
        }

        .nav-link:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 4px;
            border-radius: var(--radius-sm);
        }

        /* ══ EL MENÚ DE CUENTA ═════════════════════════════════════════════════
           Sólo existe CON SESIÓN: lo monta `ui/navSesion.js` sobre el mismo
           `<a href="/login">` que ya estaba en el marcado. Sin sesión —y sin
           JavaScript— `.nav-cuenta` contiene ese enlace y nada más, que es lo
           correcto para quien llega de fuera y para el rastreador.

           POR QUÉ UN DESPLEGABLE Y NO DOS ENLACES SUELTOS: «Cerrar sesión»
           estaba al mismo nivel que «Curso gratis», o sea que la barra ofrecía
           destruir la sesión con el mismo peso con el que ofrece leer el curso.
           Una acción que se pulsa una vez cada muchas sesiones no compite por
           la barra: se guarda detrás de su propio nombre.

           La flecha va en `::after` y NO como nodo hijo, y eso no es cosmético:
           `i18n.js` reescribe el rótulo con `textContent` en cada cambio de
           idioma, así que cualquier `<span>` que hubiera dentro desaparecería
           la primera vez que alguien pulsara EN.                              */
        .nav-cuenta {
            position: relative;
        }

        /* Los valores de `.nav-link` van EXPLÍCITOS por el mismo motivo medido
           en `.nav-link--salir`: un `<button>` no desciende de su propia clase,
           así que `inherit` heredaría del padre y saldría más grande y más fino
           que su hermano. `font-family` sí es `inherit`: ésa es la que trae
           Inter desde el `body`.                                              */
        .nav-cuenta__disparador {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2xs);
            min-height: 24px;
            padding: 0;
            border: 0;
            background: none;
            color: var(--text-secondary);
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            line-height: 20.8px;
            white-space: nowrap;
            cursor: pointer;
            transition: color var(--duration-fast) var(--ease-standard);
        }

        .nav-cuenta__disparador:hover {
            color: var(--text-primary);
        }

        .nav-cuenta__disparador:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 4px;
            border-radius: var(--radius-sm);
        }

        .nav-cuenta__disparador::after {
            content: "▾";
            font-size: 10px;
            line-height: 1;
            transition: transform var(--duration-fast) var(--ease-standard);
        }

        /* La flecha gira cuando está abierto. El estado ya lo dice
           `aria-expanded` para quien no ve la flecha, así que la forma es el
           segundo canal y no el único.                                        */
        .nav-cuenta__disparador[aria-expanded="true"]::after {
            transform: rotate(180deg);
        }

        @media (prefers-reduced-motion: reduce) {
            .nav-cuenta__disparador,
            .nav-cuenta__disparador::after {
                transition: none;
            }
        }

        .nav-cuenta__menu {
            position: absolute;
            top: calc(100% + var(--space-xs));
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            min-width: 180px;
            padding: var(--space-2xs);
            background: var(--bg-surface-elevated, var(--bg-surface));
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-soft);
            z-index: var(--z-dropdown, 50);
        }

        /* Cerrado. Hace falta declararlo porque la regla de arriba ya declara
           `display`, y una declaración del autor gana al `[hidden]` de la hoja
           del navegador. Es el mismo trato que `.nav-js .nav-panel[hidden]`. */
        .nav-cuenta__menu[hidden] {
            display: none;
        }

        /* Dos clases, así que gana al `padding: 0` de `.nav-link--salir` y las
           dos entradas del menú miden y se alinean igual — que es justo lo que
           no pasaba cuando el botón de salir vivía suelto en la barra.        */
        .nav-cuenta__menu .nav-link {
            display: flex;
            align-items: center;
            min-height: 32px;
            padding: 0 var(--space-sm);
            border-radius: var(--radius-sm);
            text-align: start;
        }

        .nav-cuenta__menu .nav-link:hover {
            background: var(--bg-hover);
        }

        .nav-cuenta__separador {
            height: 1px;
            margin: var(--space-2xs) var(--space-sm);
            background: var(--border-subtle);
        }

        /* ── La cabecera con sesión ──────────────────────────────────────────
           Los pinta `ui/navSesion.js` cuando `/auth/me` confirma que hay alguien
           dentro. El marcado de las once páginas no cambia: nace con «Acceder»,
           que es lo correcto para quien llega sin sesión y para el rastreador.

           «Cerrar sesión» lleva `.nav-link` para heredar el color, el foco
           visible y —dentro del cajón móvil— los 44 px de alto que ya tienen los
           enlaces, porque `.nav-js .nav-panel .nav-link` va por clase y no por
           etiqueta.

           ── POR QUÉ AQUÍ NO VALE `inherit`, Y ESTÁ MEDIDO ───────────────────
           Aquí ponía `font-size`, `font-weight` y `line-height` en `inherit`, con
           un comentario que afirmaba que esto «sólo le quita el aspecto de botón
           nativo». Era falso, y se veía. `inherit` NO hereda de `.nav-link` —un
           `<button>` no desciende de su propia clase—: hereda del PADRE,
           `.nav-panel`. Y como `.nav-link--salir` es un selector de una clase,
           igual de específico que `.nav-link` y escrito DESPUÉS, ganaba él.
           Medido a 1280 px con sesión:

               «Curso gratis»   13px · 600 · lh 20,8 · alto 21 · top 29
               «Tu cuenta»      13px · 600 · lh 20,8 · alto 21 · top 29
               «Cerrar sesión»  16px · 400 · lh 25,6 · alto 26 · top 26  ← el intruso

           O sea un rótulo más grande, más fino y desalineado de base justo al
           lado de su hermano, en las once cabeceras de escritorio. En el cajón
           móvil no se notaba porque ahí manda `.nav-js .nav-panel .nav-link`,
           que son tres clases y gana.

           Así que se le dan los valores de `.nav-link` EXPLÍCITOS. `font-family`
           SÍ se queda en `inherit`: ésa es la que trae Inter desde el `body`, y
           un `<button>` sin ella se va a la fuente del sistema.

           Y sigue siendo un `<button>` y no un enlace: ejecuta una acción sobre
           el servidor, no navega a ninguna parte. Un `<a href="#">` que cierra
           sesión rompe la promesa que hace su propia etiqueta.               */
        .nav-link--salir {
            padding: 0;
            border: 0;
            background: none;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            line-height: 20.8px;
            cursor: pointer;
        }

        /* EL AVISO DE QUE NO SE HA PODIDO SALIR, Y POR QUÉ FLOTA.
           El mensaje son dos frases —tiene que serlo: dice que la sesión SIGUE
           abierta y qué hacer en un ordenador compartido—, y un párrafo así
           dentro de una barra de navegación la parte en dos. Así que se ancla
           debajo, como panel, y no empuja nada.

           Se apoya en que `.nav` es `position: fixed` (y en móvil, en que
           `.nav-js .nav-panel` es `absolute`): en los dos casos el ancla es el
           contenedor que tiene encima, o sea justo debajo de donde se pulsó. */
        .nav-sesion__aviso {
            margin: var(--space-sm) 0 0;
            max-width: 52ch;
            font-size: 0.85rem;
            line-height: 1.5;
            color: var(--warning);
        }

        .nav .nav-sesion__aviso {
            position: absolute;
            top: 100%;
            right: 0;
            width: max-content;
            max-width: min(340px, calc(100vw - 2 * var(--space-lg)));
            margin-top: var(--space-xs);
            padding: var(--space-sm) var(--space-md);
            background: var(--bg-surface-elevated, var(--bg-surface));
            border: 1px solid rgba(var(--warning-rgb), 0.34);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-soft);
            z-index: var(--z-dropdown, 50);
        }

        /* ── El botón del cajón ──────────────────────────────────────────────
           Existe siempre en el HTML, pero SÓLO se muestra si el JavaScript ha
           arrancado —la clase `nav-js` la pone navMovil.js— y la pantalla es
           estrecha. Sin JS no hay botón y los enlaces se quedan a la vista: un
           nav que desaparece sin scripts es un nav que el rastreador no ve.

           Es el mismo patrón que la consola del curso con `curso-js`.          */
        .nav-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            padding: 0;
            background: transparent;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            cursor: pointer;
        }

        .nav-toggle:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* Las tres rayas con una sola caja y dos pseudoelementos. */
        .nav-toggle__barra,
        .nav-toggle__barra::before,
        .nav-toggle__barra::after {
            display: block;
            width: 18px;
            height: 2px;
            border-radius: 2px;
            background: var(--text-secondary);
            transition: transform var(--duration-fast) var(--ease-standard);
        }

        .nav-toggle__barra::before,
        .nav-toggle__barra::after {
            content: "";
            position: relative;
        }

        .nav-toggle__barra::before { top: -6px; }
        .nav-toggle__barra::after  { top: 4px; }

        @media (prefers-reduced-motion: reduce) {
            .nav-toggle__barra,
            .nav-toggle__barra::before,
            .nav-toggle__barra::after {
                transition: none;
            }
        }

        .nav-btn {
            padding: 11px 18px;
            background: linear-gradient(180deg, var(--bg-card-strong), var(--bg-card));
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 700;
            border-radius: 999px;
            cursor: pointer;
            transition: all var(--duration-base) var(--ease-standard);
            text-decoration: none;
            box-shadow: 0 14px 28px rgba(2, 7, 18, 0.26);
            border: 1px solid var(--accent-border);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            position: relative;
        }

        .nav-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 40px rgba(2, 7, 18, 0.36), 0 0 24px rgba(var(--accent-rgb), 0.12);
            border-color: rgba(var(--accent-rgb), 0.5);
            background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.22), rgba(10, 16, 28, 0.96));
        }

        .nav-btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* ══ EL CONMUTADOR DE IDIOMA, EN DOS VARIANTES ═════════════════════════
           Las DOS están montadas, y la letra que decide cuál se sirve está en
           `VARIANTE_IDIOMA`, en tools/nav/definicion.js. La clase del `<nav>`
           es lo que se lee desde aquí.

           Está partido en «lo común» + «lo de cada variante» y NO en «una
           variante y su excepción». Con la segunda forma, cada regla de A
           tendría que ir pisando una de B, que es exactamente la cascada que
           esta hoja acaba de terminar de limpiar.

               A   control pequeño, sin caja. La lengua activa se marca con
                   color Y subrayado, porque el color no puede ser el único
                   canal. En móvil viaja dentro del cajón.
               B   la píldora segmentada de siempre, pegada al CTA y visible en
                   todos los anchos.                                           */
        .lang-switch {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .lang-btn {
            border: none;
            background: transparent;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            cursor: pointer;
            transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
        }

        .lang-btn:hover {
            color: var(--text-primary);
        }

        .lang-btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        /* VARIANTE A — control pequeño. 24 px de alto mínimo por objetivo
           táctil, y el subrayado como segundo canal del estado.               */
        .nav[data-variante-idioma="a"] .lang-switch {
            gap: var(--space-2xs);
        }

        /* 24 × 24, no 24 de alto y lo que salga de ancho: «ES» con 4 px de
           relleno a cada lado mide 23,58 y se queda a cuatro décimas del
           mínimo. Un objetivo táctil se mide en las dos direcciones.          */
        .nav[data-variante-idioma="a"] .lang-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 24px;
            min-width: 24px;
            padding: 0 var(--space-2xs);
            border-radius: var(--radius-sm);
            text-decoration: none;
        }

        .nav[data-variante-idioma="a"] .lang-btn.active {
            color: var(--text-primary);
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 3px;
        }

        /* VARIANTE B — la píldora, con los valores que tenía. */
        .nav[data-variante-idioma="b"] .lang-switch {
            gap: 4px;
            background: rgba(9, 14, 24, 0.92);
            padding: 5px;
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .nav[data-variante-idioma="b"] .lang-btn {
            padding: 7px 14px;
            border-radius: 999px;
        }

        .nav[data-variante-idioma="b"] .lang-btn.active {
            color: var(--text-primary);
            background: rgba(var(--accent-rgb), 0.14);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 20px rgba(2, 7, 18, 0.18);
        }

        /* ══ LA CABECERA ESTRECHA ══════════════════════════════════════════════
           EL ÚNICO BREAKPOINT DE ANCHO DE LA CABECERA, Y EL ÚNICO SITIO DONDE
           SE ESCRIBE EL LITERAL. Su gemelo es `--bp-nav` en tokens.css, que
           explica por qué el número está dos veces y no una;
           `node tools/guardian-breakpoint.js` se pone en rojo si divergen.

           ── DE DÓNDE VIENE ESTE BLOQUE ──────────────────────────────────────
           Estas reglas vivían en `responsive.css`, repartidas en TRES bloques
           (`@media 768` dos veces y un `@media 480`), y ganaban la cascada por
           una razón que no era el diseño: responsive.css se importa el 29.º y
           nav.css el 3.º. Así que la cabecera se pintaba desde un fichero que
           no es el suyo, y quien abría nav.css veía una cabecera que no era la
           que se servía por debajo de 768 px.

           Mover el conjunto ENTERO y en el mismo orden es lo que hace el
           traslado seguro: ningún otro de los 29 ficheros de main.css toca un
           selector de cabecera —se barrió con `.nav*`, `.logo*`, `.lang*`,
           `#nav` y `[data-nav`—, así que entre la posición 3 y la 29 no hay
           nada con lo que invertir la cascada, y toda precedencia interna se
           conserva por construcción.

           NO SE TRAJERON DOS COSAS, y las dos a propósito:
           · `.live-dot` / `.logo-dot` de las listas de `animation: none`. No
             son cabecera: `.logo-dot` no existe en ningún marcado, y
             `.live-dot` lo crea `showcase/showcaseData.js:109`.
           · La regla de `@media print` de `curso-cuenta.css:845`, que oculta
             `.nav` junto a otros diez selectores. No es un ancho, y partir esa
             lista dejaría media regla en cada fichero.                        */
        @media (max-width: 768px) {
            .logo {
                font-size: 14px;
            }

            /* Aquí había un `height: 64px` que no se aplicaba NUNCA: doce
               líneas más abajo, en este mismo `@media`, `height: auto` lo
               pisaba con la misma especificidad y escrito después. Medido a
               390 y 768 px, el alto calculado era 72 px con y sin él.        */
            .nav-inner {
                height: auto;
                min-height: 72px;
                padding: 10px 6px;
            }

            /* ── LA BARRA ESTRECHA: ☰ · LOGO · CTA ──────────────────────────
               Tres columnas y no `space-between`, porque centrar de verdad
               exige que las dos columnas de los lados midan lo MISMO, y eso es
               lo que hace `1fr auto 1fr`.

               Y `1fr` a secas, no `minmax(0, 1fr)`: si el CTA no cabe en su
               columna —«Volver a la landing», que es el más largo de las
               once— la columna crece y el logo se desplaza. Con `minmax(0,…)`
               la columna no crecería y el botón se metería ENCIMA del logo.
               Descentrado se lee; solapado no.

               Sólo con `nav-js`, y por la misma razón que todo lo demás: sin
               JavaScript el panel sigue en el flujo y necesita poder envolver
               por debajo, que es la degradación que ya existía.              */
            .nav-js .nav-inner {
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                align-items: center;
            }

            /* La caja de marca desaparece COMO CAJA para que el botón y el logo
               sean celdas de la rejilla: en la barra estrecha no van juntos,
               van uno en cada extremo de su lado.                            */
            .nav-js .nav-marca {
                display: contents;
            }

            .nav-js .logo {
                grid-column: 2;
                justify-self: center;
            }

            .nav-js .nav-accion {
                grid-column: 3;
                justify-self: end;
            }

            /* EL CTA NUNCA ENTRA EN EL CAJÓN. Se queda en la barra, a la
               derecha, en los dos anchos. Enterrar la acción principal detrás
               de un hamburguesa cuesta conversiones, y es la única regla de
               esta cabecera que no admite excepción.                         */
            .nav-accion {
                gap: 6px;
            }

            /* EL CTA, ESTRECHO PARA LAS ONCE CABECERAS QUE LO LLEVAN.
               Antes esto eran TRES reglas repartidas en dos bloques: ésta, una
               `.nav-js .nav-btn` que repetía sus mismos dos valores, y un
               `.nav-btn[data-i18n="navAccess"]` en un `@media 480` aparte que
               apretaba el botón un poco más.

               La tercera se ha ido, y con ella el defecto de fondo: estilaba
               por CLAVE DE TRADUCCIÓN, así que sólo alcanzaba a las 6 páginas
               que llevan ese atributo y dejaba fuera a las otras 5 que también
               tienen CTA —acceso, app, confirm, pricing y welcome—. Media
               clase arreglada, y por un criterio, el de i18n, que no tiene
               nada que ver con el ancho de un botón.

               Y el reparto entre las dos que quedan es ahora por SUJETO, no
               por repetición: la medida del botón estrecho es de las once, y
               la variante añade SÓLO lo que de verdad trae el cajón. `padding`
               y `font-size` están declarados una vez, así que aquí no hay una
               regla pisando a otra — que era justo lo que había.

               Corolario buscado: sin JavaScript se ve lo MISMO que con él. Una
               segunda apariencia para quien no ejecuta scripts no la pedía
               nadie.                                                          */
            .nav-btn {
                padding: 9px 12px;
                font-size: 11px;
            }

            .nav-js .nav-btn {
                letter-spacing: 0.03em;
                white-space: nowrap;
            }

            /* EL CAJÓN. Sólo cuando el JS ha arrancado: sin `nav-js` el panel se
               queda en el flujo y los enlaces siguen siendo alcanzables.

               El botón va en la PRIMERA columna: es lo primero que se ve y lo
               primero que se tabula, y es donde el pulgar de una mano izquierda
               ya lo espera. Hasta hoy vivía a la derecha, junto al CTA, o sea
               que las dos cosas que se pulsan en esta barra estaban pegadas la
               una a la otra.                                                  */
            .nav-js .nav-toggle {
                display: inline-flex;
                grid-column: 1;
                justify-self: start;
            }

            .nav-js .nav-panel {
                position: absolute;
                top: 100%;
                right: clamp(12px, 4vw, 24px);
                left: clamp(12px, 4vw, 24px);
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: var(--space-xs);
                background: var(--bg-surface-elevated, var(--bg-surface));
                border: 1px solid var(--border-subtle);
                border-radius: var(--radius-md);
                box-shadow: var(--shadow-soft);
                z-index: var(--z-dropdown, 50);
            }

            .nav-js .nav-panel[hidden] {
                display: none;
            }

            /* Área táctil completa dentro del cajón: 44 px de alto por enlace. */
            .nav-js .nav-panel .nav-link {
                display: flex;
                align-items: center;
                min-height: 44px;
                padding: 0 var(--space-sm);
                border-radius: var(--radius-sm);
                font-size: 15px;
            }

            .nav-js .nav-panel .nav-link:hover {
                background: var(--bg-hover);
            }

            /* ── EL CONTENIDO DEL CAJÓN, EN COLUMNA ─────────────────────────
               navegación · cuenta · línea · idioma. El conmutador es el único
               control del cajón que no lleva a ninguna parte, así que va al
               final y detrás de una línea: `order` lo mueve sin que nadie
               tenga que reordenar el marcado, que en escritorio quiere el
               idioma DELANTE de la cuenta.                                    */
            .nav-js .nav-panel .nav-lista,
            .nav-js .nav-panel .nav-utilidad {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                margin-inline-end: 0;
            }

            /* ── EL ORDEN DEL DOM NO ES EL ORDEN VISUAL ─────────────────────
               Esto no es una nota de maquetación: es un aviso para el próximo
               arnés que mida esta cabecera. Con `order` en juego —y lo mismo
               vale para `flex-direction: row-reverse` y para `grid-area`— la
               posición de un nodo en el MARCADO es una afirmación FALSA sobre
               dónde se ve. Cualquier comprobación que lea el orden del DOM
               está midiendo otra cosa, y da verde igual.

               Pagado el 2026-08-23: el arnés que verificaba este cajón leía
               sus filas por orden de aparición en el HTML, y como el `order: 2`
               de aquí abajo mueve el conmutador SIN mover el marcado, iba a
               dar por buena una lectura que nadie ve en pantalla. Se corrigió
               ordenando por GEOMETRÍA —`getBoundingClientRect().top`—, que es
               lo único que contesta la pregunta que se estaba haciendo.

               La regla, para llevársela puesta: si el componente usa `order`,
               el arnés mide PÍXELES, no nodos.                               */

            .nav-js .nav-panel .lang-switch {
                order: 2;
                margin-top: var(--space-2xs);
                padding-top: var(--space-2xs);
                border-top: 1px solid var(--border-subtle);
            }

            .nav-js .nav-panel .lang-btn {
                min-height: 44px;
                padding: 0 var(--space-sm);
            }

            /* ── EL MENÚ DE CUENTA SE APLANA DENTRO DEL CAJÓN ───────────────
               Aquí no hay desplegable, porque el cajón YA es el desplegable:
               anidar uno dentro de otro obligaría a dos pulsaciones para
               llegar a «Cerrar sesión». Así que el disparador se retira y sus
               entradas se quedan como dos filas más.

               El `[hidden]` del menú se pisa a propósito, y con el mismo
               idioma que ya usa `.nav-panel` aquí al lado: ese atributo
               describe el estado de un DESPLEGABLE que en este ancho no
               existe. Lo que decide si estas filas se ven es el `hidden` del
               cajón que las contiene, que es quien manda aquí.               */
            .nav-js .nav-panel .nav-cuenta__disparador {
                display: none;
            }

            .nav-js .nav-panel .nav-cuenta__menu {
                position: static;
                display: flex;
                min-width: 0;
                padding: 0;
                background: none;
                border: 0;
                border-radius: 0;
                box-shadow: none;
            }

            /* Dentro del cajón las dos entradas van seguidas: la línea que las
               separa en escritorio es la que dice «esto es un desplegable», y
               aquí ya hay una línea —la del idioma— haciendo ese trabajo.    */
            .nav-js .nav-panel .nav-cuenta__separador {
                display: none;
            }

            /* Sin JavaScript los enlaces se ven, apilados y sin botón. */
            .nav-panel {
                flex-wrap: wrap;
            }

            .lang-btn {
                font-size: 10px;
            }

            .nav[data-variante-idioma="b"] .lang-btn {
                padding: 5px 9px;
            }

            /* El desenfoque de la barra cuesta caro en móvil y se retira. Venía
               de una lista de diez selectores en responsive.css; aquí se queda
               sólo la parte que es de la cabecera. */
            .nav {
                backdrop-filter: none;
            }
        }

        /* ===== HERO ===== */

/* ═══ components/skip-link.css ═══ */
        /* ===== SALTAR AL CONTENIDO (WCAG 2.4.1) =====
           El enlace lo emite `tools/sincronizar-nav.js` justo antes del <nav>, en las
           páginas de `public/` y en `partials/nav.njk`; el destino es el `id` del <main>
           (`DESTINO_SALTO` en `tools/nav/definicion.js`). Este fichero es el ÚNICO dueño
           de cómo se ve.

           En reposo está FUERA de pantalla con `transform`, no con `display:none` ni
           `visibility:hidden`: esos dos lo sacan del orden de tabulación y el enlace
           dejaría de existir para el teclado. Es `position: fixed`, así que no ocupa
           sitio en el flujo (CLS 0) ni crea desplazamiento horizontal: `translateY`
           hacia arriba no suma ancho de página. Con el foco baja a la esquina, por
           encima del nav fijo (`--z-skip`), con contraste alto: acento sólido sobre
           `--accent-contrast`, no el halo suave del `:focus-visible` global. */
        .skip-link {
            position: fixed;
            top: var(--space-xs);
            left: var(--space-md);
            z-index: var(--z-skip);
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            padding: var(--space-xs) var(--space-md);
            border-radius: var(--radius-sm);
            background: var(--accent);
            color: var(--accent-contrast);
            font-weight: 600;
            text-decoration: none;
            transform: translateY(calc(-100% - var(--space-md)));
            transition: transform var(--duration-fast) var(--ease-standard);
        }

        .skip-link:focus,
        .skip-link:focus-visible {
            transform: translateY(0);
            /* La sombra solo con el foco: en reposo, su desenfoque se asomaría por el
               borde superior aunque el enlace esté fuera de pantalla. */
            box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-soft);
        }

        /* El <main> recibe el foco por programa (`tabindex="-1"`, que le pone
           `sincronizar-nav.js` junto con el `id` destino) al activar el enlace: no es un
           control, así que no pinta el halo de `:focus-visible` alrededor de toda la
           página. Se selecciona por etiqueta y no por el `id`, para que el literal del
           destino siga teniendo un solo dueño (`DESTINO_SALTO`). */
        main:focus,
        main:focus-visible {
            outline: 0;
            box-shadow: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .skip-link {
                transition: none;
            }
        }

/* ═══ components/hero.css ═══ */
        .hero {
            --hero-rail-width: 1140px;
            position: relative;
            min-height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            /* Todo sale de la escala de tokens.css. Los topes que no caen en un escalón se componen con la suma
               de dos: 144 = 6xl + 3xl, 192 = 2 x 6xl, 88 = 5xl + xs. */
            padding:
                clamp(calc(var(--space-6xl) + var(--space-3xl)), 15vw, calc(2 * var(--space-6xl)))
                clamp(var(--space-md), 3vw, var(--space-lg))
                clamp(var(--space-4xl), 8vw, calc(var(--space-5xl) + var(--space-xs)));
            background: transparent;
            text-align: left;
            overflow: hidden;
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 16% 16%, rgba(var(--accent-rgb), 0.12), transparent 26%),
                radial-gradient(circle at 82% 10%, rgba(var(--info-rgb), 0.1), transparent 24%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 28%);
            pointer-events: none;
            z-index: -2;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(var(--info-rgb), 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(var(--info-rgb), 0.02) 1px, transparent 1px);
            background-size: 112px 112px;
            mask-image: radial-gradient(circle at center, black 14%, transparent 82%);
            opacity: 0.16;
            pointer-events: none;
            z-index: -1;
        }

        .hero-shell {
            width: min(var(--hero-rail-width), 100%);
            margin-left: auto;
            margin-right: auto;
            display: block;
            position: relative;
            z-index: 1;
        }

        .hero-disclosure-band {
            width: min(var(--hero-rail-width), 100%);
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .metrics-antiobjection {
            width: auto;
            margin: 0 clamp(16px, 3.2vw, 24px) 14px;
            text-align: left;
            font-size: clamp(0.88rem, 1.05vw, 0.96rem);
            color: var(--text-secondary);
            font-style: normal;
            line-height: 1.68;
            letter-spacing: 0.01em;
            /* SIN `cursor: pointer`: esta línea no es un control. Lo llevó, y
               con un texto que además invita a pulsarla («Despliega para ver en
               detalle»); medido el 10-ago-2026, pulsarla no hacía absolutamente
               nada — nunca tuvo escuchador. El control que despliega el histórico
               es el `<summary class="metrics-disclosure-foot">` de
               `#metrics-history`, con el rótulo «Ver histórico». */
        }

        .metrics-trust-context {
            width: min(720px, 100%);
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }

        .metrics-trust-note {
            margin: 8px clamp(16px, 3.2vw, 24px) 14px;
            padding-top: 8px;
            border-top: 1px dashed var(--border-subtle);
            font-size: 11px;
            line-height: 1.45;
            letter-spacing: 0.015em;
            color: var(--text-muted);
            text-align: left;
            /* Sin `cursor` propio, a propósito. El único sitio donde se usa esta
               clase es `.metrics-disclosure-foot`, que es el `<summary>` de
               `#metrics-history`: la nota forma parte del control y hereda su
               `cursor: pointer`, porque pulsarla abre el histórico (decisión A2-1,
               2026-10-07: el pie entero va dentro del `summary`). `metrics.css` ya
               no le pone `cursor: default`; no lo vuelvas a poner aquí ni allí. */
        }

        @media (max-width: 768px) {
            .metrics-trust-note {
                max-width: 42ch;
            }
        }

        .metrics-trust-context {
            margin-bottom: 18px;
            font-size: 13px;
            line-height: 1.7;
            color: var(--text-secondary);
        }

        /* `--hero-copy-width` está RETIRADO: era un segundo mecanismo para el
           mismo hecho, con tres valores en tres hojas (760 aquí, 700 en
           metrics.css y 640 en responsive.css) y nadie los comparaba. El ancho
           sale del primitivo, y el `min(..., 100%)` sobra porque el primitivo
           acota un bloque que ya no puede desbordar su contenedor.

           Medido a 1920, 1100 y 375 el 2026-09-17: los cuatro hijos de
           `.hero-copy` son shrink-to-fit por el `align-items: center` y su
           max-content más ancho es 601px, así que pasar de 760/700/640 a
           `--ancho-prosa` es inerte y sólo puede recortar menos contra el
           `overflow: hidden` del hero. */
        .hero-copy {
            --zona: var(--ancho-prosa);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .hero-title-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            margin-bottom: 24px;
        }

        .hero-badge-dot {
            width: 7px;
            height: 7px;
            background: var(--premium);
            border-radius: 50%;
            box-shadow: 0 0 0 4px var(--premium-soft);
        }

        .hero h1 {
            font-family: var(--font-display);
            font-size: clamp(3.2rem, 6.9vw, 6.05rem);
            font-weight: 600;
            line-height: 0.9;
            letter-spacing: -0.082em;
            margin-bottom: 0;
            width: fit-content;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            color: var(--text-primary);
        }

        .hero-line {
            display: block;
            white-space: nowrap;
            text-wrap: nowrap;
        }

        .hero-accent {
            color: var(--text-strong);
        }

        .hero-subtitle {
            font-size: clamp(1rem, 1.28vw, 1.12rem);
            color: var(--text-secondary);
            max-width: 44ch;
            margin: 0 auto 24px;
            font-weight: 400;
            line-height: 1.72;
            text-align: center;
        }

        #hero-note-text {
            display: block;
            margin-top: 12px;
            font-size: clamp(0.94rem, 1vw, 1rem);
            color: var(--text-muted);
            letter-spacing: 0;
        }

        /* La pregunta y el enlace al curso, bajo el subtítulo. El enlace va
           subrayado con borde y no sólo con color (WCAG 1.4.1), como
           `.curso-invite-enlace`; el relleno vertical lo deja por encima de los
           24 px de objetivo táctil. */
        .hero-curso {
            margin: 0 auto var(--space-md);
            max-width: 44ch;
            font-size: clamp(0.94rem, 1vw, 1rem);
            line-height: 1.5;
            color: var(--text-muted);
            text-align: center;
        }

        .hero-curso-enlace {
            display: inline-block;
            padding-block: var(--space-2xs);
            color: var(--text-primary);
            font-weight: 600;
            text-decoration: none;
            border-bottom: 1px solid var(--accent-border);
            transition: border-color var(--duration-base) var(--ease-standard),
                        color var(--duration-base) var(--ease-standard);
        }

        .hero-curso-enlace:hover {
            color: var(--accent-soft-text);
            border-bottom-color: var(--accent);
        }

        .hero-curso-enlace:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 4px;
        }

        .hero-actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

        .hero-proof {
            position: relative;
            min-width: 0;
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
        }


/* ═══ components/metrics.css ═══ */
        .metrics-disclosure {
            width: 100%;
            margin: 0 auto;
            background: linear-gradient(180deg, rgba(13, 21, 34, 0.92), rgba(8, 13, 23, 0.98));
            border: 1px solid var(--border-subtle);
            border-radius: 32px;
            overflow: hidden;
            box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.03);
            position: relative;
            z-index: 1;
            transform: translateZ(0);
            transition: box-shadow 0.32s var(--ease-standard);
        }

        .metrics-disclosure:hover {
            box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 24px rgba(var(--accent-rgb), 0.06);
        }

        .metrics-disclosure::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(214, 177, 109, 0.55), transparent);
        }

        .metrics-disclosure-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: clamp(6px, 1.4vw, 12px);
            padding-right: 16px;
            flex-wrap: nowrap;
        }

        .metrics-disclosure-head .metrics-toggle {
            flex: 1;
        }

        .metrics-toggle {
            padding: clamp(16px, 2.5vw, 20px) clamp(16px, 3.2vw, 24px);
            background: transparent;
            border: none;
            color: var(--text-main);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: clamp(8px, 1.8vw, 16px);
            cursor: pointer;
            text-align: left;
            min-width: 0;
            flex-wrap: nowrap;
        }

        .metrics-toggle--summary {
            cursor: default;
            pointer-events: none;
        }

        .metrics-controls {
            display: flex;
            align-items: center;
            gap: clamp(8px, 1.2vw, 12px);
            flex-shrink: 0;
        }

        .metrics-toggle:hover {
            background: rgba(255, 255, 255, 0.04);
            box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .metrics-toggle:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: -1px;
            background: rgba(var(--accent-rgb), 0.06);
            border-radius: 8px;
        }

        .metrics-toggle-left {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: clamp(6px, 1.2vw, 10px);
            min-width: 0;
            flex: 1 1 auto;
            flex-wrap: nowrap;
            overflow: hidden;
        }

        .metrics-toggle-heading {
            display: inline-flex;
            align-items: center;
            gap: clamp(6px, 1.2vw, 10px);
            min-width: 0;
            flex-shrink: 0;
        }

        .metrics-toggle-label {
            font-size: clamp(10px, 1.2vw, 12px);
            color: var(--text-muted);
            letter-spacing: clamp(0.12em, 0.35vw, 0.18em);
            text-transform: uppercase;
            font-weight: 700;
            font-family: var(--font-mono);
            white-space: nowrap;
        }

        .metrics-sample-counts {
            display: flex;
            align-items: center;
            gap: clamp(4px, 1vw, 8px);
            flex-wrap: nowrap;
            min-width: 0;
            font-family: var(--font-mono);
            font-size: clamp(10px, 1.2vw, 12px);
            color: var(--text-secondary);
        }

        .metrics-sample-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 0;
            border: none;
            background: transparent;
            font-size: clamp(10px, 1.2vw, 12px);
            font-weight: 700;
            color: var(--text-secondary);
            font-family: var(--font-mono);
            white-space: nowrap;
            flex-shrink: 0;
        }

        .metrics-sample-chip strong {
            color: var(--text-primary);
            font-size: clamp(11px, 1.3vw, 13px);
        }

        .metrics-sample-chip--clear {
            border-color: rgba(105, 200, 159, 0.28);
            color: var(--success-soft-text);
        }

        .metrics-sample-chip--mixed {
            border-color: rgba(var(--danger-rgb), 0.28);
            color: var(--danger-text);
        }

        .metrics-toggle-right {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: clamp(8px, 1.2vw, 12px);
            flex: 0 0 auto;
            min-width: fit-content;
            white-space: nowrap;
        }

        .metrics-disclosure-head .metrics-toggle-right {
            visibility: hidden;
            pointer-events: none;
        }

        .metrics-values {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-main);
        }

        .metrics-values-label {
            color: var(--data-muted);
            font-weight: 600;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .metrics-values-separator {
            color: var(--text-muted);
            font-size: clamp(11px, 1.2vw, 13px);
            line-height: 1;
            flex-shrink: 0;
        }

        .metrics-icon {
            width: clamp(16px, 2vw, 18px);
            height: clamp(16px, 2vw, 18px);
            color: var(--accent);
            flex-shrink: 0;
            transition: transform var(--duration-base) var(--ease-standard);
        }

        .metrics-live-number.is-updating,
        .metrics-sample-chip strong.is-updating,
        .stat-value.is-updating {
            animation: value-pulse 0.42s ease-out;
        }

        .metrics-icon {
            transform-origin: center;
        }

        @keyframes value-pulse {
            0% {
                opacity: 0.82;
                text-shadow: none;
            }

            50% {
                opacity: 1;
                text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.14);
            }

            100% {
                opacity: 1;
                text-shadow: none;
            }
        }

        @keyframes attention-heartbeat {
            0%,
            100% {
                opacity: 0.85;
                transform: scale(1);
            }

            14% {
                opacity: 1;
                transform: scale(1.12);
            }

            26% {
                opacity: 0.92;
                transform: scale(1);
            }

            40% {
                opacity: 1;
                transform: scale(1.08);
            }

            52% {
                opacity: 0.88;
                transform: scale(1);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .metrics-icon,
            .metrics-live-number.is-updating,
            .metrics-sample-chip strong.is-updating,
            .stat-value.is-updating {
                animation: none !important;
            }
        }

        .metrics-kpi-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 0;
            margin: 0 18px 18px;
            border-radius: 20px;
            border: 1px solid var(--border-subtle);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.008));
            /* SIN `cursor: pointer`: la rejilla de KPI es un marcador. Lo llevó, y
               medido el 10-ago-2026 pulsarla no hacía nada — nunca tuvo escuchador
               (el único JS que la busca es `renderDataSourceBadge`, que le escribe
               el sello de datos de ejemplo). */
            overflow: hidden;
        }

        .metrics-kpi-item {
            text-align: center;
            padding: 20px 14px;
            position: relative;
        }

        /* Top row: each item spans 3 of 6 columns — two big KPIs side by side */
        .metrics-kpi-item--top {
            grid-column: span 3;
            padding: 26px 20px 22px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.1);
        }

        .metrics-kpi-item--top:first-child {
            border-right: 1px solid rgba(148, 163, 184, 0.1);
        }

        /* Bottom row: 3 items each spanning 2 of 6 columns */
        .metrics-kpi-item--sub {
            grid-column: span 2;
            padding: 14px 10px 18px;
        }

        .metrics-kpi-item--sub:not(:last-child) {
            border-right: 1px solid rgba(148, 163, 184, 0.1);
        }

        /* Big value in top row */
        .metrics-kpi-value--top {
            font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important;
            letter-spacing: -0.06em;
        }

        /* La letra pequeña de la cifra del héroe. Va debajo de la rejilla de KPI y
           pegada a ella (margen negativo) porque habla de ESE número, no es un pie
           de sección. La usan dos párrafos: la nota del filtro, con `--nota`, y
           debajo de ella la frase que dice qué cuenta la cifra (`statWinRateCuenta`). */
        .metrics-kpi-basis {
            margin: -10px 18px 16px;
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-muted);
            text-align: center;
            text-wrap: balance;
        }

        /* Los dos enlaces de confianza, en la línea de debajo de la regla de la cifra (`.metrics-kpi-basis`, en `index.html`):
           misma letra pequeña, enlaces con el acento y objetivo táctil de 24px. */
        .metrics-kpi-enlaces {
            margin-top: calc(-1 * var(--space-xs));
        }

        .metrics-kpi-enlace {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            color: var(--accent-soft-text);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .metrics-kpi-enlace:hover {
            color: var(--accent);
        }

        .metrics-kpi-enlaces__separador {
            margin: 0 var(--space-xs);
        }

        .metrics-kpi-basis:empty {
            display: none;
        }

        /* La nota del filtro va pegada a la rejilla de KPI, y un punto más apagada:
           explica el comportamiento de la banda, no forma parte del dato. Cuando no
           hay filtro está vacía y el `:empty` de arriba la quita. Medido el
           2026-09-11, ya sin el pie de la cifra encima: 6 px bajo la rejilla y sin
           solaparse con nada; visto en captura, por eso el margen no se ha tocado. */
        .metrics-kpi-basis--nota {
            margin-top: -12px;
            opacity: 0.85;
        }

        .metrics-case-highlights {
            margin: 0 18px 12px;
            padding: 10px 14px 12px;
            border-radius: 20px;
            border: 1px solid var(--border-subtle);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.01));
        }

        .metrics-case-highlights__head {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            flex-wrap: wrap;
            width: 100%;
            margin-bottom: 8px;
        }

        .metrics-case-highlights__title {
            margin: 0;
            font-size: 11px;
            color: var(--text-muted);
            letter-spacing: 0.14em;
            text-transform: uppercase;
            font-family: var(--font-mono);
            font-weight: 700;
            text-align: left;
            flex: 0 1 auto;
            min-width: 0;
        }

        .metrics-case-highlights__content {
            min-width: 0;
        }

        .metrics-case-highlights__grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px 16px;
            align-items: start;
        }

        .metrics-case-highlights__divider {
            display: none;
        }

        .metrics-case-highlight {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 2px 8px;
            margin: 0 -8px;
            border-radius: 6px;
            transition: background 0.28s var(--ease-standard);
        }

        /* «Ver el caso completo» (web-10, D4): último hijo de la tarjeta, fuera del bloque desplegable, así
           que se ve siempre y no depende de abrir «contexto». Misma pauta que `.showcase-card__case-link`. */
        .metrics-case-highlight__case-link {
            align-self: flex-start;
            margin-top: 4px;
            line-height: 1.3;
            font-family: var(--font-sans);
            font-size: 12px;
            font-weight: 600;
            color: var(--accent);
            text-decoration: underline;
            text-underline-offset: 3px;
            text-decoration-color: rgba(var(--accent-rgb), 0.45);
        }

        .metrics-case-highlight__case-link:hover,
        .metrics-case-highlight__case-link:focus-visible {
            text-decoration-color: currentColor;
        }

        .metrics-case-highlight:hover {
            background: rgba(var(--accent-rgb), 0.04);
        }

        .metrics-case-highlight + .metrics-case-highlight {
            border-left: 1px solid rgba(148, 163, 184, 0.12);
            padding-left: 16px;
            transition: border-color 0.3s var(--ease-standard);
        }

        .metrics-case-highlight:hover + .metrics-case-highlight {
            border-left-color: rgba(148, 163, 184, 0.24);
        }

        .metrics-case-highlight + .metrics-case-highlight:hover {
            border-left-color: rgba(148, 163, 184, 0.24);
        }

        /* ── EL NOMBRE NO SE CORTA: LO QUE CEDE ES LA LÍNEA DE CIFRAS ─────────────────────
           Era una rejilla `minmax(0, 1fr) auto`: las cifras tomaban su ancho entero y el nombre se
           quedaba con lo que sobrara, cortado con puntos suspensivos y con un tope de 30ch. En
           español, con «Máximo · Mínimo · Cierre», «CrowdStrike Holdings, Inc.» salía cortado por
           medio píxel desde 1200 px, y «Charles River Laboratories International, Inc.» por 80.
           Ahora es una línea flexible que salta: el bloque del nombre parte de su ancho MÍNIMO
           (`width: min-content`, que con el nombre en una sola línea es el nombre entero) y crece
           para llenar; si nombre y cifras no caben juntos, las cifras bajan de fila. El corte con
           puntos suspensivos queda sólo como último recurso —un nombre más ancho que la tarjeta
           entera—, con el nombre completo en `title` y sin tocar el ticker, que no encoge. */
        .metrics-case-highlight__line {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px 16px;
            min-width: 0;
        }

        .metrics-case-highlight__main {
            display: flex;
            align-items: center;
            gap: 8px 10px;
            min-width: 0;
            flex-wrap: wrap;
            flex: 1 1 auto;
            width: min-content;
        }

        .metrics-case-highlight__identity {
            display: inline-flex;
            align-items: baseline;
            gap: 6px;
            min-width: 0;
            max-width: 100%;
            flex: 0 1 auto;
        }

        .metrics-case-highlight__ticker {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
            flex: 0 0 auto;
        }

        .metrics-case-highlight__company {
            color: var(--text-secondary);
            font-size: 12px;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .metrics-case-highlight__company::before {
            content: "\00B7";
            color: var(--text-muted);
            margin-right: 6px;
        }

        .metrics-case-highlight__badges {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            flex: 0 0 auto;
            flex-wrap: wrap;
        }

        .metrics-case-highlight__pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 3px 7px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.16);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-secondary);
            font-size: 9px;
            font-weight: 700;
            font-family: var(--font-mono);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            white-space: nowrap;
            flex: 0 0 auto;
        }

        .metrics-case-highlight__pill--clear {
            color: var(--success-soft-text);
            border-color: rgba(var(--success-rgb), 0.24);
            background: rgba(var(--success-rgb), 0.1);
        }

        .metrics-case-highlight__pill--mixed {
            color: var(--danger-text);
            border-color: rgba(var(--danger-rgb), 0.24);
            background: rgba(var(--danger-rgb), 0.1);
        }

        .metrics-case-highlight__pill--hit {
            color: var(--success-soft-text);
            border-color: rgba(var(--success-rgb), 0.2);
            background: rgba(var(--success-rgb), 0.08);
        }

        .metrics-case-highlight__pill--partial {
            color: var(--info-soft-text);
            border-color: rgba(var(--info-rgb), 0.2);
            background: rgba(var(--info-rgb), 0.08);
        }

        .metrics-case-highlight__pill--miss {
            color: var(--danger-text);
            border-color: rgba(var(--danger-rgb), 0.2);
            background: rgba(var(--danger-rgb), 0.08);
        }

        .metrics-case-highlight__metrics {
            display: inline-flex;
            align-items: flex-start;
            justify-content: flex-end;
            gap: 6px 10px;
            max-width: 100%;
            min-width: 0;
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .metrics-case-highlight__metric {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
            white-space: nowrap;
            font-size: 11px;
            font-family: var(--font-mono);
            color: var(--text-secondary);
        }

        .metrics-case-highlight__metric + .metrics-case-highlight__metric::before {
            content: "\00B7";
            color: var(--text-muted);
            margin-right: 2px;
        }

        .metrics-case-highlight__metric-label {
            color: var(--text-muted);
            font-size: 10px;
            font-family: var(--font-mono);
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .metrics-case-highlight__metric strong {
            font-size: 12px;
            font-weight: 700;
        }

        .metrics-case-highlight__metric-value--positive {
            color: var(--success-soft-text);
        }

        .metrics-case-highlight__metric-value--negative {
            color: var(--danger-text);
        }

        /* Los otros dos tonos de `tonoDeCifra` (utils/formatting.js), con los tokens de la tarjeta del
           carrusel (`.showcase-card__metric-value--neutral` y `--na`): un cero no sube ni baja, y sin
           dato no hay color. */
        .metrics-case-highlight__metric-value--neutral {
            color: var(--text-secondary);
        }

        .metrics-case-highlight__metric-value--na {
            color: var(--text-muted);
        }

        .metrics-case-highlight__empty {
            font-size: 12px;
            line-height: 1.45;
            color: var(--text-secondary);
            min-width: 0;
        }

        .metrics-case-highlight__details {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed rgba(148, 163, 184, 0.18);
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
        }

        .metrics-case-highlight__chart {
            width: 100%;
            height: 72px;
            border-radius: 8px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
        }

        .metrics-case-highlight__chart svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .metrics-case-highlight__detail-meta {
            font-size: 11px;
            color: var(--text-muted);
            font-family: var(--font-mono);
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .metrics-case-highlight__detail-block {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .metrics-case-highlight__detail-label {
            font-size: 10px;
            font-family: var(--font-mono);
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .metrics-case-highlight__detail-copy {
            margin: 0;
            font-size: 12px;
            line-height: 1.58;
            color: var(--text-secondary);
        }

        .metrics-case-highlights__empty-note,
        .metrics-case-highlights__note {
            margin: 8px 0 0;
            font-size: 12px;
            line-height: 1.45;
            color: var(--text-muted);
        }

        /* «VER MÁS» / «OCULTAR» DE CADA TARJETA DESTACADA (decisión de Fran, 2026-10-07).
           Es el `<summary>` del `<details>` que guarda su contexto, servido entero en el HTML.
           El rótulo no lo escribe ningún script: van los dos en el marcado y `[open]` enseña
           uno. Mide 24 px de alto como mínimo (objetivo táctil, WCAG 2.5.8). */
        .metrics-case-highlight__toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 24px;
            margin-top: 4px;
            padding: 0;
            list-style: none;
            cursor: pointer;
            color: var(--text-secondary);
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            white-space: nowrap;
            transition: color var(--duration-fast) var(--ease-standard);
        }

        .metrics-case-highlight__toggle::-webkit-details-marker {
            display: none;
        }

        .metrics-case-highlight__toggle:hover {
            color: var(--text-primary);
        }

        .metrics-case-highlight__toggle:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        .metrics-case-highlight__toggle-text--abierto,
        .metrics-case-highlight__context[open] .metrics-case-highlight__toggle-text--cerrado {
            display: none;
        }

        .metrics-case-highlight__context[open] .metrics-case-highlight__toggle-text--abierto {
            display: inline;
        }

        .metrics-case-highlight__toggle-icon {
            width: 14px;
            height: 14px;
            color: var(--accent);
            transition: transform var(--duration-base) var(--ease-standard);
            transform-origin: center;
            flex-shrink: 0;
        }

        .metrics-case-highlight__context[open] .metrics-case-highlight__toggle-icon {
            transform: rotate(180deg);
        }

        /* Es un `<span>` dentro del `<summary>` de `#metrics-history`, no un botón: no
           lleva reseteos de botón (`border`, `background`, `padding: 0`) ni `cursor`,
           que hereda del `summary`. `display` y `padding` están en la regla de abajo. */
        .metrics-disclosure-cta {
            align-items: center;
            gap: 6px;
            color: var(--text-secondary);
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            flex: 0 0 auto;
            margin-left: auto;
            white-space: nowrap;
        }

        .metrics-kpi-label {
            font-size: 11px;
            color: var(--text-muted);
            letter-spacing: 0.14em;
            text-transform: uppercase;
            font-family: var(--font-mono);
        }

        /* El rótulo de «Casos cerrados» es el único KPI que enlaza — al archivo.
           El color por sí solo no basta como canal (WCAG 1.4.1): lleva subrayado
           propio, y el bloque de relleno lo sube a un objetivo táctil de 24px sin
           mover el resto de la fila, porque la rejilla estira todos los ítems del
           mismo renglón a la altura del más alto. */
        .metrics-kpi-label--link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 24px;
            padding: 6px 8px;
            margin: -6px -8px;
            border-radius: var(--radius-sm);
            text-decoration: underline;
            text-underline-offset: 3px;
            text-decoration-color: rgba(148, 163, 184, 0.55);
            transition: color var(--duration-fast) var(--ease-standard),
                text-decoration-color var(--duration-fast) var(--ease-standard);
        }

        .metrics-kpi-label--link:hover,
        .metrics-kpi-label--link:focus-visible {
            color: var(--accent);
            text-decoration-color: currentColor;
        }

        .metrics-kpi-value {
            font-family: var(--font-mono);
            font-size: clamp(1.8rem, 2.6vw, 2.5rem);
            font-weight: 700;
            letter-spacing: -0.05em;
            margin-bottom: 6px;
        }

        .metrics-disclaimer {
            margin-top: 14px;
            font-size: 12px;
            color: var(--text-muted);
            border-top: 1px dashed rgba(148, 163, 184, 0.22);
            padding-top: 12px;
            line-height: 1.72;
        }

        /* EL PIE ES EL `<summary>` DEL HISTÓRICO (`#metrics-history`, decisión de Fran,
           2026-10-07): la fila entera abre y cierra, nota de confianza incluida. */
        .metrics-disclosure-foot {
            margin: 8px clamp(16px, 3.2vw, 24px) 14px;
            padding-top: 8px;
            border-top: 1px dashed var(--border-subtle);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-width: 0;
            list-style: none;
            cursor: pointer;
        }

        .metrics-disclosure-foot::-webkit-details-marker {
            display: none;
        }

        .metrics-disclosure-foot .metrics-trust-note {
            margin: 0;
            padding: 0;
            border: none;
            flex: 1 1 auto;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .metrics-disclosure-cta {
            display: inline-flex;
            padding: 8px 12px;
            border-radius: 6px;
            transition: background-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
            position: relative;
            overflow: hidden;
        }

        .metrics-disclosure-cta::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent, rgba(var(--accent-rgb), 0.08), transparent);
            opacity: 0;
            transition: opacity var(--duration-base) var(--ease-standard);
        }

        .metrics-disclosure-cta:hover {
            background: rgba(var(--accent-rgb), 0.08);
            box-shadow: inset 0 0 20px rgba(var(--accent-rgb), 0.08), 0 0 16px rgba(var(--accent-rgb), 0.04);
            transform: translateY(-1px);
        }

        .metrics-disclosure-cta:hover::before {
            opacity: 1;
        }

        /* El foco lo recibe el `<summary>`, que es la fila entera; el anillo se pinta en el
           botón, como cuando el botón era el control. */
        .metrics-history > summary:focus-visible {
            outline: none;
        }

        .metrics-history > summary:focus-visible .metrics-disclosure-cta {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            background: rgba(var(--accent-rgb), 0.12);
        }

        .metrics-disclosure-cta-text--abierto,
        .metrics-history[open] .metrics-disclosure-cta-text--cerrado {
            display: none;
        }

        .metrics-history[open] .metrics-disclosure-cta-text--abierto {
            display: inline;
        }

        .metrics-disclosure-cta-icon {
            width: 14px;
            height: 14px;
            color: var(--accent);
            transition: transform var(--duration-base) var(--ease-standard);
            transform-origin: center;
            flex-shrink: 0;
        }

        .metrics-disclosure-cta:hover .metrics-disclosure-cta-icon {
            transform: scale(1.15) translateY(-1px);
        }

        .metrics-history[open] .metrics-disclosure-cta-icon {
            transform: rotate(180deg);
        }

        .metrics-history[open] .metrics-disclosure-cta:hover .metrics-disclosure-cta-icon {
            transform: scale(1.15) rotate(180deg) translateY(-1px);
        }

        /* ── LA LLAMADA DE ATENCIÓN DEL BOTÓN QUE ABRE EL HISTÓRICO ──────────
           Los dos @keyframes de abajo son los que ya existían en este fichero
           con el nombre `archive-panel-cue-glow` / `archive-panel-chevron-cue`:
           MISMOS FOTOGRAMAS Y MISMOS TIEMPOS, sólo renombrados. Se renombran
           porque la familia `.archive-panel-*` entera estaba MUERTA —ningún
           marcado servido la nombraba, ni la landing, ni las páginas generadas
           por Eleventy, ni una sola línea de `public/src/js/`— y un nombre que
           promete un componente que no existe es peor que ninguno.

           DECISIÓN DE FRAN, 2026-09-11: SON `infinite`, A PROPÓSITO, Y ESTO
           SUSTITUYE LA REGLA CONTRARIA QUE VIVIÓ AQUÍ ANTES («SON FINITOS A
           PROPÓSITO… NUNCA `infinite`»). Corren en bucle mientras el panel no
           se haya abierto NUNCA, y `onMetricsHistoryToggle()` en
           `metrics/metricsPresentation.js` les quita la clase `--cue` la
           primera vez que `#metrics-history` se abre — para siempre, sin que
           vuelva al cerrar, al cambiar de idioma ni al repintar la banda. Ese
           apagado en cliente es el "mando para pararlo" de WCAG 2.2.2, no una
           duración que quepa por debajo de cinco segundos: no la busques aquí.
           Sin JavaScript no hay quien quite la clase, así que la regla
           `[open]` de abajo la para al menos mientras el histórico está abierto.

           Y LA GUARDA DE `prefers-reduced-motion` VA PEGADA AQUÍ ABAJO, en el
           mismo bloque, y CUBRE EXPLÍCITAMENTE LOS DOS ÚNICOS NODOS QUE
           ANIMAN EN ESTA PIEZA — el botón y su chevron, cada uno nombrado por
           su propio selector, no heredada de otra regla. La versión anterior
           la tenía MIL LÍNEAS más abajo y escrita contra el selector muerto
           (`.archive-panel-block.archive-panel-cue`), así que quien reutilizara
           estos fotogramas para otro selector se quedaba sin guarda CREYENDO
           QUE LA HEREDABA: una animación sin guarda, publicada, y sin nada que
           se pusiera rojo. Si algún día mueves estas reglas, o añades un
           tercer nodo que anime en esta familia, la guarda se mueve con ellas
           y se nombra aquí explícitamente — nunca por herencia. */
        @keyframes metrics-disclosure-cue-glow {
            0%,
            100% {
                box-shadow: var(--shadow-soft), 0 0 0 0 rgba(var(--accent-rgb), 0);
                border-color: var(--border-subtle);
            }

            50% {
                box-shadow: var(--shadow-soft), 0 0 0 1px rgba(var(--accent-rgb), 0.24), 0 0 24px rgba(var(--accent-rgb), 0.18);
                border-color: rgba(var(--accent-rgb), 0.34);
            }
        }

        @keyframes metrics-disclosure-cue-icon {
            0%,
            100% {
                transform: translateY(0);
                opacity: 0.75;
            }

            50% {
                transform: translateY(2px);
                opacity: 1;
            }
        }

        .metrics-disclosure-cta--cue {
            animation: metrics-disclosure-cue-glow 1.6s ease-in-out infinite;
        }

        .metrics-disclosure-cta--cue .metrics-disclosure-cta-icon {
            animation: metrics-disclosure-cue-icon 0.8s ease-in-out infinite;
        }

        .metrics-history[open] .metrics-disclosure-cta--cue,
        .metrics-history[open] .metrics-disclosure-cta--cue .metrics-disclosure-cta-icon {
            animation: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .metrics-disclosure-cta--cue,
            .metrics-disclosure-cta--cue .metrics-disclosure-cta-icon {
                animation: none;
            }
        }

        /* EL PANEL DEL HISTÓRICO ES EL CONTENIDO DE `<details id="metrics-history">`.
           Plegado, el navegador no lo pinta: no hace falta `max-height: 0` ni
           `visibility: hidden`, y sin JavaScript se abre igual. El despliegue es el de
           la FAQ (`faq.css`): `block-size` sobre `::details-content`, sólo si el lector
           no pide movimiento reducido. El fundido y el desplazamiento del interior son
           los de antes; `@starting-style` les da el punto de partida al abrir. */
        .metrics-panel {
            display: block;
            overflow: hidden;
            opacity: 0;
            padding: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(5, 9, 18, 0.72));
            border-top: 1px solid rgba(148, 163, 184, 0.14);
            transition: opacity 0.22s ease;
        }

        .metrics-history[open] .metrics-panel {
            opacity: 1;
        }

        .metrics-panel-inner {
            min-height: 0;
            padding: 0;
            opacity: 0;
            transform: translate3d(0, -8px, 0);
            transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
        }

        .metrics-history[open] .metrics-panel-inner {
            padding: 24px 24px 28px;
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        @starting-style {
            .metrics-history[open] .metrics-panel,
            .metrics-history[open] .metrics-panel-inner {
                opacity: 0;
            }

            .metrics-history[open] .metrics-panel-inner {
                transform: translate3d(0, -8px, 0);
            }
        }

        @media (prefers-reduced-motion: no-preference) {
            .metrics-history {
                interpolate-size: allow-keywords;
            }

            .metrics-history::details-content {
                block-size: 0;
                overflow: hidden;
                transition:
                    block-size 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                    content-visibility 0.38s allow-discrete;
            }

            .metrics-history[open]::details-content {
                block-size: auto;
            }
        }

        .metrics-disclosure,
        .metrics-disclosure-head,
        .metrics-toggle,
        .metrics-toggle-left,
        .metrics-disclosure-foot,
        .metrics-disclosure-cta,
        .metrics-toggle-right,
        .metrics-controls,
        .metrics-case-highlights,
        .metrics-case-highlights__head,
        .metrics-case-highlights__content,
        .metrics-case-highlights__grid,
        .metrics-case-highlight,
        .metrics-case-highlight__line,
        .metrics-case-highlight__main,
        .metrics-case-highlight__identity,
        .metrics-case-highlight__metrics,
        .metrics-case-highlight__details,
        .metrics-panel,
        .metrics-panel-inner,
        .metrics-filter-bar,
        .metrics-filters,
        .metrics-time-filters,
        .metrics-recorded-line,
        .metrics-filter-summary,
        .metrics-counts,
        .metrics-table-scroll,
        .metrics-table-shell,
        .metrics-rows {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }

        .metrics-antiobjection,
        .metrics-methodology,
        .metrics-filter-summary,
        .metrics-disclaimer,
        .metrics-case-highlights__empty-note,
        .metrics-case-highlights__note,
        .metrics-case-highlight__detail-copy {
            max-width: 100%;
            overflow-wrap: anywhere;
        }

        .metrics-methodology {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.82;
            margin-bottom: 18px;
        }

        .metrics-filter-bar {
            display: grid;
            grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
            align-items: start;
            gap: 12px 14px;
            margin-bottom: 18px;
        }

        .metrics-filters {
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 360px;
        }

        .metrics-direction-toggle {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            background: rgba(255, 255, 255, 0.025);
            overflow: hidden;
        }

        .metrics-direction-option {
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 10px 8px;
            cursor: pointer;
            transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
            font-family: var(--font-mono);
        }

        .metrics-direction-option + .metrics-direction-option {
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        .metrics-direction-option[data-filter='clear'].is-active {
            color: var(--accent-soft-text);
            background: rgba(var(--accent-rgb), 0.14);
        }

        .metrics-direction-option[data-filter='mixed'].is-active {
            color: var(--danger-text);
            background: rgba(var(--danger-rgb), 0.14);
        }

        .metrics-time-filters {
            display: flex;
            flex-direction: column;
            width: 100%;
            min-width: 0;
        }

        .metrics-time-toggle {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            background: rgba(255, 255, 255, 0.025);
            overflow: hidden;
            width: 100%;
        }

        .metrics-time-option {
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 10px 6px;
            cursor: pointer;
            transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
            min-width: 0;
            white-space: nowrap;
            font-family: var(--font-mono);
        }

        .metrics-time-option+.metrics-time-option {
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        .metrics-time-option.is-active {
            background: rgba(var(--accent-rgb), 0.12);
            color: var(--accent-soft-text);
        }

        .metrics-filter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
        }

        .metrics-filter-btn:hover {
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-main);
        }

        .metrics-filter-btn.is-active {
            color: var(--text-main);
            transform: translateY(-1px);
        }

        .metrics-filter-btn[data-filter='clear'].is-active {
            border-color: rgba(var(--success-rgb), 0.4);
            background: var(--success-soft);
            color: var(--success-soft-text);
        }

        .metrics-filter-btn[data-filter='mixed'].is-active {
            border-color: rgba(var(--danger-rgb), 0.4);
            background: var(--danger-soft);
            color: var(--danger-text);
        }

        .metrics-select {
            min-width: 0;
            width: 100%;
            max-width: none;
            margin-top: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            background: rgba(255, 255, 255, 0.025);
            color: var(--text-primary);
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
            font-family: var(--font-mono);
        }

        .metrics-select:hover {
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.06);
        }

        .metrics-select.is-active {
            border-color: var(--accent-border);
            background: var(--accent-soft);
            color: var(--accent-soft-text);
        }

        .metrics-select:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .metrics-select option {
            color: var(--surface-deeper);
        }

        .metrics-filter-summary {
            font-size: 11.5px;
            color: var(--text-muted);
            line-height: 1.5;
            margin-top: -2px;
            margin-bottom: 18px;
            letter-spacing: 0.01em;
        }

        .metrics-counts {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

        /* MARCADORES, NO CONTROLES. Los pinta `updateTransparencyUI` con `<span>`.
           Llevaron `cursor: pointer`, un `:hover` que los aclaraba y tres variantes
           `.is-active` desde que el filtro de desenlace murió en un merge (11-jun
           vivo, 16-jun clobbered; ver `state/filtersState.js`): la mano del ratón
           sobre algo inerte era la última parte del filtro que seguía viéndose, y
           la única que llegaba al usuario. Si alguien vuelve a hacerlos pulsables,
           el estilo de pulsable vuelve CON el control, no antes. */
        .metrics-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            background: rgba(255, 255, 255, 0.025);
            font-size: 12px;
            color: var(--text-muted);
            font-family: var(--font-mono);
        }

        .metrics-chip strong {
            color: var(--text-primary);
            font-size: 13px;
        }

        /* La cifra de un chip no se parte nunca: «--» (sin dato) se cortaba por el guion en dos
           líneas a 390px. Más específica que las reglas de los puntos de corte, que dejan
           partir la etiqueta (`white-space: normal`). */
        .metrics-counts .metrics-chip strong {
            white-space: nowrap;
        }

        .metrics-chip--accurate {
            border-color: rgba(var(--success-rgb), 0.28);
            color: var(--success-soft-text);
        }

        .metrics-chip--partial {
            border-color: rgba(var(--warning-rgb), 0.28);
            color: var(--neon-yellow);
        }

        .metrics-chip--missed {
            border-color: rgba(var(--danger-rgb), 0.28);
            color: var(--danger-text);
        }

        .metrics-rows-title {
            display: none;
        }

        /* ── Archive Panel ─────────────────────────────── */
        .metrics-counts {
            flex: 0 1 auto;
            flex-shrink: 0;
            justify-content: flex-end;
            margin: 0 0 0 auto;
        }

        .metrics-recorded-row {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            margin-bottom: 1rem;
        }

        .metrics-recorded-line {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem 1rem;
        }

        .metrics-filter-summary {
            display: inline-flex;
            align-items: center;
            flex: 1 1 auto;
            min-width: 0;
            max-width: 100%;
            margin: 0;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: var(--text-secondary);
            font-family: var(--font-mono);
            white-space: normal;
        }

        @media (max-width: 640px) {
            .metrics-recorded-line {
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 0.55rem;
            }

            .metrics-filter-summary,
            .metrics-counts {
                width: 100%;
            }

            .metrics-filter-summary {
                flex: 0 0 auto;
                justify-content: center;
                text-align: center;
            }

            .metrics-counts {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
                gap: 8px;
                justify-content: center;
                margin: 0;
            }

            .metrics-chip {
                width: 100%;
                justify-content: center;
                text-align: center;
                padding: 8px 10px;
            }

            .metrics-chip span,
            .metrics-chip strong {
                text-align: center;
            }

        }
        /* ─────────────────────────────────────────────────────── */

        .metrics-table-scroll {
            overflow-x: auto;
            overflow-y: auto;
            padding-bottom: 8px;
            margin-right: -4px;
            overscroll-behavior-x: contain;
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--accent-rgb), 0.26) transparent;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            max-height: var(--metrics-scroll-max-height, none);
            touch-action: pan-y pinch-zoom;
        }

        .metrics-table-scroll::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .metrics-table-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .metrics-table-scroll::-webkit-scrollbar-thumb {
            background: rgba(var(--accent-rgb), 0.24);
            border-radius: 999px;
        }

        .metrics-table-shell {
            min-width: 1040px;
            border: 1px solid var(--border-subtle);
            border-top: none;
            border-radius: 0 0 20px 20px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.008));
            overflow: hidden;
        }

        @media (max-width: 1100px) {
            .metrics-panel-inner {
                padding: 22px 20px 24px;
            }

            .metrics-disclosure-head {
                align-items: center;
                flex-wrap: nowrap;
                padding-right: 12px;
            }

            .metrics-toggle {
                flex-wrap: nowrap;
                align-items: center;
            }

            .metrics-toggle-left {
                flex-wrap: nowrap;
                overflow: hidden;
            }

            .metrics-sample-counts,
            .metrics-controls {
                flex-wrap: nowrap;
            }

            .metrics-controls {
                width: auto;
                margin-left: auto;
                justify-content: flex-end;
            }

            .metrics-filter-bar {
                grid-template-columns: minmax(0, 1fr);
            }

            .metrics-filters {
                max-width: none;
            }

            .metrics-recorded-line {
                align-items: center;
            }

            .metrics-filter-summary {
                flex: 1 1 auto;
            }

            .metrics-counts {
                flex: 0 1 auto;
                flex-shrink: 0;
                justify-content: flex-end;
                margin: 0 0 0 auto;
            }

            .metrics-table-scroll {
                margin-right: 0;
            }

            .metrics-table-shell {
                min-width: 0;
                width: 100%;
            }

            .metrics-table-head,
            .metrics-row-desktop {
                grid-template-columns: minmax(220px, 2fr) minmax(96px, 0.75fr) repeat(3, minmax(72px, 0.65fr));
                gap: 12px;
            }

            .metrics-table-head {
                padding: 0 14px 0.85rem;
            }

            .metrics-row-desktop {
                padding: 14px;
            }
        }

        @media (max-width: 860px) {
            .metrics-counts {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

        }

        .metrics-table-head {
            position: sticky;
            top: 0;
            z-index: 2;
            display: grid;
            grid-template-columns: minmax(250px, 2.2fr) minmax(110px, 0.8fr) repeat(3, minmax(84px, 0.7fr));
            gap: 14px;
            padding: 0.75rem 18px 0.9rem;
            border: 1px solid var(--border-subtle);
            border-bottom: 1px solid var(--border-subtle);
            border-radius: 20px 20px 0 0;
            background: var(--bg-base, #070a12);
        }

        .metrics-table-head span {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--text-muted);
            font-family: var(--font-mono);
            justify-self: center;
        }

        .metrics-table-head span:first-child {
            text-align: left;
            justify-self: start;
        }

        .metrics-rows {
            display: flex;
            flex-direction: column;
            gap: 0;
            border: 0;
            border-radius: 0;
            overflow: visible;
            background: transparent;
            min-width: 100%;
        }

        .metrics-row {
            background: transparent;
            position: relative;
        }

        /* Fila con caso horneado (archivo/mapaCasos.js): el nombre es el enlace y su ::after cubre la
           fila entera, sin texto nuevo. Una fila sin caso no lleva `a` y no cambia de aspecto. */
        .metrics-row-link {
            color: inherit;
            text-decoration: none;
        }

        .metrics-row-link::after {
            content: "";
            position: absolute;
            inset: 0;
        }

        .metrics-row-link:focus-visible {
            outline: none;
        }

        .metrics-row-link:focus-visible::after {
            outline: 2px solid var(--accent);
            outline-offset: -2px;
        }

        .metrics-row:hover .metrics-row-link {
            color: var(--accent);
        }

        .metrics-row + .metrics-row {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .metrics-row:hover {
            background: rgba(255, 255, 255, 0.018);
        }

        .metrics-row-desktop {
            display: grid;
            grid-template-columns: minmax(250px, 2.2fr) minmax(110px, 0.8fr) repeat(3, minmax(84px, 0.7fr));
            gap: 14px;
            padding: 16px 18px;
            align-items: center;
        }

        .metrics-row-desktop > * {
            justify-self: center;
        }

        .metrics-row-desktop > *:first-child {
            justify-self: start;
        }

        .metrics-row-main {
            min-width: 0;
        }

        .metrics-row-title-line {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: baseline;
        }

        .metrics-row-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-top: 4px;
        }

        .metrics-row-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            min-width: 0;
        }

        .metrics-row-symbol,
        .metrics-row-date {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-muted);
        }

        .metrics-row-direction {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px 10px;
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            background: rgba(255, 255, 255, 0.025);
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-muted);
            font-family: var(--font-mono);
        }

        .metrics-row-direction--clear {
            color: var(--success-soft-text);
            border-color: rgba(var(--success-rgb), 0.24);
            background: var(--success-soft);
        }

        .metrics-row-direction--mixed {
            color: var(--danger-text);
            border-color: rgba(var(--danger-rgb), 0.24);
            background: rgba(var(--danger-rgb), 0.1);
        }

        .metrics-row-cell {
            min-width: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 4px;
            justify-self: center;
        }

        .metrics-row-cell:first-child {
            justify-self: start;
        }

        .metrics-cell-label {
            display: none;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .metrics-row-value {
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
        }

        .metrics-row-value--decision {
            font-family: var(--font-display);
            font-weight: 600;
            white-space: normal;
            line-height: 1.35;
        }

        .metrics-row-value--positive {
            color: var(--success-soft-text);
        }

        .metrics-row-value--negative {
            color: var(--danger-text);
        }

        /* Los otros dos tonos de `tonoDeCifra` (utils/formatting.js), con los tokens del carrusel
           (`.showcase-card__metric-value--neutral` y `--na`). */
        .metrics-row-value--neutral {
            color: var(--text-secondary);
        }

        .metrics-row-value--na {
            color: var(--text-muted);
        }

        .metrics-row-desktop > :last-child .metrics-row-value {
            white-space: normal;
            line-height: 1.35;
        }

        .metrics-row-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .metrics-row-status--hit {
            color: var(--success-soft-text);
            background: var(--success-soft);
            border: 1px solid rgba(var(--success-rgb), 0.24);
        }

        .metrics-row-status--partial {
            color: var(--info-soft-text);
            background: var(--info-soft);
            border: 1px solid rgba(var(--info-rgb), 0.24);
        }

        .metrics-row-status--miss {
            color: var(--danger-text);
            background: rgba(var(--danger-rgb), 0.12);
            border: 1px solid rgba(var(--danger-rgb), 0.24);
        }

        .metrics-row-status-icon {
            font-family: var(--font-mono);
        }

        .metrics-row-mobile {
            display: none;
        }

        .metrics-row-mobile-cell,
        .metrics-row-mobile-event,
        .metrics-row-mobile-status-wrap {
            min-width: 0;
        }

        .metrics-empty {
            padding: 16px;
            background: rgba(255, 255, 255, 0.025);
            color: var(--text-muted);
            font-size: 14px;
            text-align: left;
        }

        @media (max-width: 960px) {
            .metrics-table-scroll {
                overflow-x: hidden;
                overflow-y: auto;
                overscroll-behavior-y: auto;
                padding-bottom: 0;
                margin-right: 0;
            }

            .metrics-table-shell {
                min-width: 0;
            }

            .metrics-disclosure-head {
                padding-right: 14px;
                gap: 6px;
            }

            .metrics-toggle {
                flex-direction: row;
                align-items: center;
                gap: 8px;
            }

            .metrics-toggle-left {
                width: auto;
                flex-wrap: nowrap;
                align-items: center;
            }

            .metrics-toggle-right {
                width: auto;
                justify-content: flex-end;
            }

            .metrics-values {
                justify-content: flex-start;
                font-size: 12px;
            }

            .metrics-disclosure-foot {
                gap: 10px;
            }

            .metrics-disclosure-cta {
                font-size: 10px;
            }

            .metrics-sample-counts {
                gap: 6px;
            }

            .metrics-sample-chip {
                font-size: 10px;
                padding: 4px 8px;
            }

            .metrics-filter-bar {
                align-items: flex-start;
                grid-template-columns: 1fr;
            }

            .metrics-filters,
            .metrics-direction-toggle,
            .metrics-time-filters,
            .metrics-time-toggle {
                width: 100%;
                max-width: none;
            }

            .metrics-time-toggle {
                grid-template-columns: repeat(5, minmax(0, 1fr));
                border-radius: 999px;
            }

            .metrics-time-option+.metrics-time-option {
                border-left: 1px solid rgba(255, 255, 255, 0.1);
                border-top: none;
            }

            .metrics-filter-summary {
                font-size: 11px;
                margin: 0;
            }

            .metrics-table-head {
                display: none;
            }

            .metrics-rows {
                border-radius: 16px;
            }

            .metrics-row-desktop {
                display: none;
            }

            .metrics-row {
                padding: 11px 12px;
            }

            .metrics-row-mobile {
                display: grid;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                grid-template-areas:
                    "event event event event status status"
                    "fav fav adv adv close close"
                    "result result result result result result";
                gap: 8px 10px;
                align-items: start;
            }

            .metrics-row-mobile-event {
                grid-area: event;
                min-width: 0;
            }

            .metrics-row-mobile-name-line,
            .metrics-row-mobile-meta,
            .metrics-row-mobile-status-wrap {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                align-items: center;
            }

            .metrics-row-mobile-meta {
                margin-top: 4px;
            }

            .metrics-row-mobile-status-wrap {
                grid-area: status;
                justify-content: flex-end;
                align-self: start;
            }

            .metrics-row-mobile-cell {
                display: flex;
                flex-direction: column;
                gap: 3px;
                min-width: 0;
                padding-top: 7px;
                border-top: 1px solid rgba(255, 255, 255, 0.07);
                align-items: center;
                text-align: center;
            }

            .metrics-row-mobile-cell--peak-fav {
                grid-area: fav;
            }

            .metrics-row-mobile-cell--peak-adv {
                grid-area: adv;
            }

            .metrics-row-mobile-cell--close {
                grid-area: close;
            }

            .metrics-row-mobile-cell--result {
                grid-area: result;
                align-items: center;
                text-align: center;
            }

            .metrics-row-mobile-cell--result .metrics-row-mobile-value {
                white-space: normal;
                line-height: 1.4;
                text-align: center;
            }

            .metrics-row-mobile-cell--decision {
                grid-area: decision;
            }

            .metrics-row-mobile-label {
                display: block;
                font-size: 9px;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: var(--text-muted);
                line-height: 1.2;
                text-align: center;
            }

            .metrics-row-mobile-value {
                font-family: var(--font-mono);
                font-size: 11px;
                font-weight: 700;
                color: var(--text-primary);
                line-height: 1.2;
                white-space: nowrap;
                text-align: center;
            }

            .metrics-row-mobile-value--decision {
                font-family: var(--font-display);
                font-size: 11px;
                font-weight: 600;
                line-height: 1.35;
                white-space: normal;
                text-wrap: balance;
            }

            .metrics-row-mobile-value--positive {
                color: var(--success-soft-text);
            }

            .metrics-row-mobile-value--negative {
                color: var(--danger-text);
            }

            .metrics-row-mobile-value--neutral {
                color: var(--text-secondary);
            }

            .metrics-row-mobile-value--na {
                color: var(--text-muted);
            }

            .metrics-row-status {
                gap: 4px;
                padding: 4px 7px;
                font-size: 10px;
            }

            .metrics-counts {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px;
            }

            .metrics-kpi-grid {
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }

            .metrics-kpi-item--top {
                grid-column: span 3;
            }

            .metrics-case-highlights__grid {
                gap: 10px;
            }

            .metrics-chip {
                justify-content: space-between;
                gap: 6px;
                min-width: 0;
                padding: 8px 10px;
            }

            .metrics-chip span,
            .metrics-chip strong {
                white-space: nowrap;
            }
        }

        @media (max-width: 1180px) and (min-width: 961px) {
            .hero {
                --hero-rail-width: 1060px;
            }

            .hero-disclosure-band {
                margin-bottom: 22px;
            }

            .metrics-toggle {
                align-items: center;
                flex-direction: row;
            }

            .metrics-toggle-left {
                flex-wrap: wrap;
            }

            .metrics-toggle-right {
                width: auto;
                justify-content: flex-end;
            }

            .metrics-values {
                justify-content: flex-start;
                font-size: 12px;
            }
        }

        @media (max-width: 560px) {
            .metrics-panel-inner {
                padding: 18px 16px 20px;
            }

            .metrics-toggle {
                padding: 14px 12px;
            }

            .metrics-disclosure-foot {
                margin-left: 12px;
                margin-right: 12px;
                gap: 8px;
            }

            .metrics-disclosure-foot .metrics-trust-note {
                font-size: 10px;
            }

            .metrics-disclosure-cta {
                font-size: 10px;
            }

            .metrics-toggle-label {
                white-space: nowrap;
                font-size: 10px;
                letter-spacing: 0.07em;
            }

            .metrics-sample-counts,
            .metrics-sample-chip,
            .metrics-sample-chip strong {
                font-size: 10px;
            }

            .metrics-case-highlights {
                margin-left: 12px;
                margin-right: 12px;
                padding: 12px;
                border-radius: 18px;
            }

            .metrics-case-highlights__grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .metrics-case-highlight + .metrics-case-highlight {
                border-left: none;
                padding-left: 0;
                border-top: 1px solid rgba(148, 163, 184, 0.12);
                padding-top: 16px;
            }

            .metrics-case-highlights__divider {
                width: auto;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.24), transparent);
            }

            .metrics-case-highlight__line {
                flex-wrap: wrap;
                align-items: flex-start;
            }

            .metrics-case-highlight__main,
            .metrics-case-highlight__metrics {
                width: 100%;
            }

            .metrics-case-highlight__main {
                flex-wrap: wrap;
            }

            .metrics-case-highlight__metrics {
                justify-content: flex-start;
                padding-left: 0;
            }

            .metrics-case-highlight__ticker {
                font-size: 15px;
            }

            .metrics-case-highlight__detail-meta {
                white-space: normal;
            }

            .metrics-case-highlight__detail-copy {
                font-size: 11px;
            }

            .metrics-disclosure-head {
                padding-right: 10px;
                gap: 4px;
            }

            .info-trigger--metrics {
                width: 28px;
                min-width: 28px;
                height: 28px;
            }

            .metrics-time-option,
            .metrics-direction-option {
                font-size: 9px;
                letter-spacing: 0.03em;
                padding: 9px 4px;
            }

            .metrics-values-separator {
                display: none;
            }

            .metrics-row {
                padding: 10px;
            }

            .metrics-row-mobile {
                gap: 7px 8px;
            }

            .metrics-row-mobile-value {
                font-size: 10px;
            }

            .metrics-row-mobile-value--decision {
                font-size: 10px;
            }

            .metrics-row-name {
                font-size: 13px;
            }

            .metrics-row-symbol,
            .metrics-row-date,
            .metrics-row-direction {
                font-size: 10px;
            }

            .metrics-counts {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .metrics-chip {
                padding: 8px 8px;
            }

            .metrics-chip span,
            .metrics-chip strong {
                white-space: normal;
                text-align: center;
            }
        }

        .cta-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 28px;
            background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(10, 16, 28, 0.96));
            color: var(--text-primary);
            font-size: 15px;
            font-weight: 800;
            border: 1px solid var(--accent-border);
            border-radius: 18px;
            cursor: pointer;
            transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
            box-shadow: 0 18px 36px rgba(2, 7, 18, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
            font-family: 'Outfit', sans-serif;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .cta-primary:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.16));
            box-shadow: 0 24px 44px rgba(2, 7, 18, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.16);
        }

        /* ═══════════════════════════════════════════════════════════════════════════ */
        /* CAROUSEL — Infinite Marquee Case highlight cards                                 */
        /* ═══════════════════════════════════════════════════════════════════════════ */



        /* ── Datos de ejemplo en los KPI del hero ────────────────────────────────
           Si el backend no responde, las tarjetas del showcase son el juego de
           muestra de data/fallbackData.js. El PORCENTAJE ya no se calcula sobre
           ellas —viene de accuracyStats o no viene— pero lo que se ve alrededor
           sigue siendo de mentira. Mismo tratamiento ámbar que el badge del
           carrusel, para que la advertencia se lea igual en los dos sitios.
           Lo activa renderDataSourceBadge() en showcase/showcaseData.js. */
        .metrics-source-mark {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-2xs);
            margin-bottom: var(--space-md);
        }

        .metrics-source-mark[hidden] {
            display: none;
        }

        .metrics-source-mark .showcase-source-note {
            text-align: left;
            max-width: 62ch;
        }

        .metrics-kpi-grid[data-example-data] {
            border-left: 2px solid var(--warning);
            padding-left: var(--space-md);
            background: var(--warning-soft);
            border-radius: var(--radius-sm);
        }

/* ═══ layout.css ═══ */
        /* ════════════════════════════════════════════════════════════════════
           EL PRIMITIVO DE ZONA · EL ÚNICO SITIO DEL REPO QUE DECLARA EL ANCHO
           ════════════════════════════════════════════════════════════════════
           Un contenedor de columna NO escribe su propio `max-width`: entra en
           esta lista y REDECLARA `--zona` sobre sí mismo con el token que le
           toca de la escala de `tokens.css`. Al no quedar ningún `max-width`
           suelto, no hay nada con lo que competir: la especificidad deja de
           poder decidir el ancho, y un componente no puede pisar el mecanismo
           ni por orden de `@import` ni por un selector más largo.

           EL FALLBACK DEL `var()` NO ES COSMÉTICO. Un `--zona` sin definir
           hace el `max-width` inválido en tiempo de cómputo, y eso lo resuelve
           a `none`: líneas infinitas, que es el resultado INSEGURO. Cae a un
           valor acotado — «lo que falta no puede activar nada».

           Y DECLARA SÓLO `max-width`, NUNCA `margin`. El centrado ya es
           uniforme y se queda donde está: varios de estos contenedores son
           `<p>` o `<section>` cuyo `margin: 0 auto` suprime además los
           márgenes de bloque del agente de usuario, así que mover el centrado
           aquí los restauraría y movería el layout. El hecho en disputa era el
           ancho; es el ancho lo que recibe un dueño único.                  */
        .nav-inner,
        .hero-copy,
        .section-head,
        .legal-main,
        .curso-main,
        .archivo-main,
        .curso-revision,
        .curso-cuerpo,
        .curso-fuentes,
        .curso-firma,
        .pricing-grid,
        .footer-shell,
        .faq-shell,
        .pain-grid,
        .trust-limits-grid,
        .features-grid,
        .trust-proof-card,
        .cta-section .container,
        .showcase-footer,
        .founder-inner,
        .faq-container,
        .section-subtitle,
        .solution-trust-note,
        .trust-limits-subtitle,
        .cta-section.cta-section--acceso,
        .pricing-note.pricing-note--prosa,
        .pricing-embudo,
        .account-card,
        .pantalla-tarjeta__cuerpo,
        .trial-cta {
            max-width: var(--zona, var(--ancho-contenido));
        }

        .stats-strip {
            padding: 0 24px 88px;
            background: transparent;
            position: relative;
            z-index: 2;
            margin-top: -10px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0;
            max-width: 1240px;
            margin: 0 auto;
            padding: 12px;
            background: linear-gradient(180deg, var(--bg-card-strong), var(--bg-card));
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-soft);
        }

        .stat-item {
            text-align: center;
            padding: 28px 18px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
            border: none;
            border-radius: 20px;
            position: relative;
        }

        .stat-item:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 18px;
            right: 0;
            bottom: 18px;
            width: 1px;
            background: linear-gradient(180deg, transparent, var(--border-strong), transparent);
        }

        .stat-value {
            font-family: var(--font-mono);
            font-size: clamp(2rem, 3vw, 2.9rem);
            font-weight: 700;
            margin-bottom: 6px;
            letter-spacing: -0.05em;
        }

        .stat-value.green {
            color: var(--neon-green);
        }

        .stat-value.yellow {
            color: var(--neon-yellow);
        }

        .stat-value.red {
            color: var(--neon-red);
        }

        .stat-label {
            font-size: 12px;
            color: var(--text-muted);
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        /* ===== SECTIONS ===== */
        section {
            padding: clamp(84px, 9vw, 116px) clamp(18px, 3vw, 28px);
        }

        .pain-section,
        .solution-section,
        .features-section,
        .pricing-section,
        .faq-section,
        .cta-section,
        .footer,
        .founder-section,
        .showcase-wrapper,
        .trust-proof-section,
        .trust-limits-section {
            background: transparent !important;
        }

        /* LA ÚNICA REGLA DE content-visibility DEL SITIO, y decide por POSICIÓN.

           Fuera de pantalla, una pieza con `content-visibility: auto` reserva
           `contain-intrinsic-size` en vez de su altura real. Si la pieza está en la
           primera pantalla, el primer pintado usa esa reserva y luego la cambia por
           la altura real: lo que va debajo salta. Pasó con `.hero-shell` en la
           portada (907a17ca) y con el `<main>` de /precios, la tarjeta de /app y
           el pie de las páginas cortas, porque la regla iba por clase y no miraba
           dónde caía cada una.

           Así que nunca se aplica a la pieza que abre la página (el `<main>`, o lo
           que sigue al nav: `.hero` en la portada), ni a su primer hijo, ni a lo
           que va detrás de un `<main>`, que es el pie de una página de una sola
           pieza. Una de estas clases puesta en esos sitios no la recibe, sin tocar
           esta lista.

           La lista dice qué piezas pueden contenerse, y es a propósito una lista:
           `content-visibility` recorta lo que desborda, hace de bloque contenedor
           de los `fixed`/`absolute` de dentro y deja sin pintar lo que está fuera
           de pantalla (un JS que lo mida lee 0). Una pieza nueva no lo recibe hasta
           que alguien lo pide.

           900px es la reserva por defecto. La sección que mide otra cosa la declara
           con `--alto-previsto` en su hoja, sin copiar esta regla.

           `--alto-previsto` NO SE HEREDA (`@property`, `inherits: false`): es el alto
           de la pieza que lo declara, no el de lo que lleva dentro. Si una pieza de
           la lista acabara dentro de `.curso-invite-section`, sin esto reservaría
           sus 480px. El `900px` del `var()` sólo cuenta en un navegador sin
           `@property`; ahí la variable sí se hereda. */
        @property --alto-previsto {
            syntax: '<length>';
            inherits: false;
            initial-value: 900px;
        }

        :is(.founder-section,
            .showcase-wrapper,
            .pain-section,
            .solution-section,
            .features-section,
            .trust-limits-section,
            .curso-invite-section,
            .pricing-section,
            .faq-section,
            .cta-section,
            .footer):not(:is(main, body > nav + *), :is(main, body > nav + *) > :first-child, main ~ *) {
            content-visibility: auto;
            contain-intrinsic-size: var(--alto-previsto, 900px);
        }

        .section-eyebrow {
            font-family: var(--font-mono);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-weight: 700;
            margin-bottom: 16px;
            text-align: center;
            color: var(--text-muted);
        }

        .section-eyebrow.red {
            color: var(--danger);
        }

        .section-eyebrow.green {
            color: var(--accent);
        }

        .section-eyebrow--primary,
        .section-eyebrow--context {
            color: var(--primary);
        }

        .section-eyebrow.premium,
        .section-eyebrow--premium {
            color: var(--premium);
        }

        /* ===== UNIFIED PREMIUM TYPOGRAPHY — ALL SECTION HEADINGS ===== */
        h2, h3,
        .section-title,
        .cta-section h2 {
            font-family: var(--font-display);
            font-weight: 600;
            letter-spacing: -0.03em;
            line-height: 1.02;
            display: inline-block;
            color: var(--text-primary);
        }

        /* El interletraje cerrado es sólo del titular grande (29-44 px). En los h2/h3 de bloque
           (15-27 px) -0.055em dejaba 2 px entre palabras y las pegaba (UX-04): ellos llevan el
           -0.03em de la regla común. Lo vigila tests/titulos_espaciado.py. */
        .section-title {
            letter-spacing: -0.055em;
            font-size: clamp(1.86rem, 3.25vw, 2.72rem);
            margin-bottom: 20px;
            text-align: center;
            text-wrap: balance;
            max-width: 16ch;
        }

        h2.section-title {
            font-size: clamp(1.82rem, 3.4vw, 2.82rem);
        }

        h3.section-title {
            font-size: clamp(1.16rem, 2.08vw, 1.52rem);
        }

        .showcase-header__title {
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.24em;
            text-align: center;
            color: var(--text-muted);
        }

        .cta-section h2 {
            font-size: clamp(1.26rem, 2.15vw, 1.74rem);
            text-align: center;
            max-width: none;
            width: 100%;
            text-wrap: balance;
            margin: 0 0 18px;
            line-height: 1.06;
        }

        .section-subtitle {
            font-size: clamp(1rem, 1.4vw, 1.15rem);
            color: var(--text-secondary);
            --zona: var(--ancho-prosa);
            margin: 0 auto;
            text-align: center;
            line-height: 1.78;
            text-wrap: balance;
        }

        /* ===== PRICING ===== */

/* ═══ components/pricing.css ═══ */
        .pricing-section {
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        /* /precios: la sección ES la página (`<main class="pricing-section">`).
           Arriba deja sitio al nav fijo con su token, `--alto-nav` (tokens.css),
           más aire; `80vh` es el mismo suelo que usa `.pantalla-tarjeta`. Antes
           era un `style=` en el HTML. */
        main.pricing-section {
            padding-top: calc(var(--alto-nav) + var(--space-md));
            padding-bottom: var(--space-4xl);
            min-height: 80vh;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
            --zona: var(--ancho-contenido);
            margin: 60px auto 0;
            align-items: start;
            position: relative;
            z-index: 1;
        }

        .pricing-card {
            background: linear-gradient(180deg, rgba(13, 21, 34, 0.92), rgba(8, 13, 23, 0.98));
            border: 1px solid var(--border-subtle);
            border-radius: 28px;
            padding: 44px 32px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: all 0.32s var(--ease-standard);
            text-align: center;
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.03);
        }

        .pricing-card:hover {
            transform: translateY(-8px);
            background: linear-gradient(180deg, rgba(16, 24, 37, 0.96), rgba(10, 16, 28, 0.98));
            border-color: var(--accent-border);
            box-shadow: 0 32px 68px rgba(2, 6, 23, 0.48), 0 0 32px rgba(var(--accent-rgb), 0.08);
        }

        .pricing-card:focus-within {
            outline: 2px solid var(--accent);
            outline-offset: -1px;
        }

        .pricing-card--featured {
            border-color: var(--premium-border);
            box-shadow: 0 32px 72px rgba(2, 7, 18, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            background:
                radial-gradient(circle at 50% 0%, var(--premium-soft), transparent 32%),
                linear-gradient(180deg, rgba(17, 27, 42, 0.98), rgba(9, 14, 24, 0.94));
            transform: translateY(-10px);
            padding-top: 72px;
            z-index: 1;
        }

        .pricing-card--featured::before {
            opacity: 1;
            height: 1px;
            border-radius: 0;
            background: linear-gradient(90deg, rgba(var(--premium-rgb), 0.04), rgba(var(--premium-rgb), 0.64), rgba(var(--premium-rgb), 0.04));
        }

        .pricing-card--featured::after {
            display: none;
        }

        .pricing-card--featured:hover {
            transform: translateY(-14px);
            box-shadow: 0 36px 80px rgba(2, 7, 18, 0.38);
        }

        .pricing-badge {
            position: absolute;
            top: 14px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            padding: 6px 18px;
            background: rgba(9, 14, 24, 0.92);
            border: 1px solid var(--premium-border);
            color: var(--premium-text);
            font-size: 11px;
            font-weight: 800;
            border-radius: 999px;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            white-space: nowrap;
            box-shadow: 0 10px 24px rgba(3, 7, 18, 0.32);
            font-family: var(--font-mono);
        }

        .pricing-tier-name {
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--text-muted);
            margin-bottom: 16px;
        }

        .pricing-tier-copy {
            min-height: 3.2em;
            margin: 0 0 24px;
            color: var(--text-secondary);
            font-size: 15px;
            line-height: 1.65;
        }

        .pricing-card--featured .pricing-tier-copy {
            color: var(--text-primary);
        }

        .pricing-price {
            font-family: var(--font-display);
            font-size: clamp(2.8rem, 3.6vw, 3.4rem);
            font-weight: 800;
            line-height: 1;
            margin-bottom: 4px;
            letter-spacing: -0.02em;
            color: var(--text-primary);
        }

        .pricing-price--featured {
            color: var(--premium);
            text-shadow: none;
        }

        .pricing-period {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 12px;
            font-family: var(--font-mono);
            letter-spacing: 0.12em;
        }

        /* LA PROMESA DE LOS 14 DÍAS, DENTRO DE LA COLUMNA DE GRATUITO.
           No usa `.pricing-note` a propósito: esa clase lleva `margin-top: 44px`
           porque vive DEBAJO del grid, y aquí abriría un hueco en mitad de la
           tarjeta. Va en caja, con el acento, porque es lo que se lleva quien crea
           la cuenta y tiene que leerse antes que la lista de derechos.
           Nace `hidden` en el marcado: la enciende `embudo-precios.js`. */
        .pricing-regalo {
            margin: 0 0 24px;
            padding: 12px 14px;
            text-align: left;
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-primary);
            background: rgba(var(--accent-rgb), 0.07);
            border: 1px solid var(--accent-border);
            border-radius: 12px;
        }

        /* `hidden` tiene que ganar: el marcado lo nace oculto y el módulo lo vacía
           en los otros siete guiones. Sin esto, cualquier `display` de la regla de
           arriba lo devolvería a la pantalla. */
        .pricing-regalo[hidden] {
            display: none;
        }

        .pricing-divider {
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.18), transparent);
            margin-bottom: 28px;
        }

        .pricing-features {
            list-style: none;
            text-align: left;
            flex: 1;
            margin-bottom: 32px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .pricing-feature {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .pricing-check {
            color: var(--accent);
            flex-shrink: 0;
            margin-top: 1px;
        }

        .pricing-check--blue {
            color: var(--info);
        }

        .pricing-btn {
            display: block;
            width: 100%;
            min-height: 52px;
            padding: 15px 24px;
            border: 1px solid var(--accent-border);
            background: linear-gradient(180deg, rgba(12, 18, 30, 0.92), rgba(8, 13, 23, 0.98));
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 800;
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.28s var(--ease-standard);
            font-family: var(--font-display);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            text-decoration: none;
            text-align: center;
            margin-top: auto;
            position: relative;
            overflow: hidden;
        }

        /* `.pricing-btn` declara `display: block` ahí arriba, y una regla de autor
           GANA a la del navegador para `[hidden]`: sin esto, un botón marcado como
           oculto se sigue viendo. Es la regresión del botón verde, ya pagada dos
           veces en este árbol (`components/checkout-modal.css`,
           `components/account.css`). Aquí sale más cara que allí: lo que reaparece
           es la oferta de contratar delante de quien ya paga, o la de una prueba
           delante de quien ya la gastó. `src/js/embudo-precios.js` enciende y apaga
           estos botones con `hidden`. */
        .pricing-btn[hidden] {
            display: none !important;
        }

        .pricing-btn::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.08), transparent);
            opacity: 0;
            transition: opacity 0.28s var(--ease-standard);
        }

        .pricing-btn:hover {
            background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.2), rgba(10, 16, 28, 0.98));
            color: var(--text-primary);
            box-shadow: 0 20px 40px rgba(2, 7, 18, 0.34), 0 0 24px rgba(var(--accent-rgb), 0.1);
            transform: translateY(-3px);
            border-color: rgba(var(--accent-rgb), 0.4);
        }

        .pricing-btn:hover::before {
            opacity: 1;
        }

        .pricing-btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .pricing-btn--featured {
            background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.24), rgba(10, 16, 28, 0.96));
            color: var(--text-primary);
            border-color: rgba(var(--accent-rgb), 0.34);
            box-shadow: 0 18px 36px rgba(2, 7, 18, 0.3);
        }

        .pricing-btn--featured:hover {
            background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.32), rgba(var(--accent-rgb), 0.2));
            transform: translateY(-3px);
            box-shadow: 0 28px 52px rgba(2, 7, 18, 0.42), 0 0 28px rgba(var(--accent-rgb), 0.14);
            border-color: rgba(var(--accent-rgb), 0.48);
        }

        .pricing-microcopy {
            margin: 12px 0 0;
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-muted);
            font-family: var(--font-mono);
            letter-spacing: 0.02em;
        }

        .pricing-note {
            margin-top: 44px;
            font-size: 13px;
            color: var(--text-muted);
            font-family: var(--font-mono);
        }

        /* Notas apiladas del pie de precios.html (cancelación, impuestos,
           metodología): antes `style="margin-top:…"` a mano en el HTML. Los
           44px de `.pricing-note` son para separarla del bloque anterior;
           aquí es la nota siguiente pegada a la de arriba, así que el hueco
           es el de la escala de tokens.css, no el de la clase base. */
        .pricing-note--top-xs { margin-top: var(--space-xs); }
        .pricing-note--top-sm { margin-top: var(--space-sm); }

        /* Las tres bandas de 720px que /precios traía a mano en `style=`
           (nota de pago bajo el encabezado, aviso de funcionalidad del
           embudo, y el embudo mismo): retiradas al primitivo de layout.css,
           ensanchadas a `--ancho-prosa` (840px, sobre el 720 que traían —
           aprobado por Fran). El ANCHO se decide en layout.css; aquí sólo
           queda el margen que traía cada `style=` y que no es del mecanismo. */
        .section-head .section-subtitle.pricing-payment-note {
            margin-top: 0.85rem;
        }

        .pricing-note.pricing-note--prosa {
            --zona: var(--ancho-prosa);
            margin: 1.25rem auto 0;
        }

        .pricing-embudo {
            --zona: var(--ancho-prosa);
            margin: 1.5rem auto 0;
            text-align: center;
        }

        /* ===== FOUNDER SECTION ===== */

/* Desglose fiscal bajo el importe. PENDIENTE DE VALIDACIÓN LEGAL: la cifra
   protagonista sigue siendo la base imponible y esto añade el importe final
   tomando España como referencia DECLARADA, porque el tipo depende del país del
   comprador y no se conoce hasta el pago. Un escalón por debajo del precio: es
   dato de apoyo, no la cifra que se lee primero. */
.pricing-tax {
    margin: var(--space-2xs) 0 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.pricing-tax--base {
    color: var(--text-muted);
    font-size: 0.76rem;
}

        

        /* ── LOS TRES CTA DEL EMBUDO ───────────────────────────────────────
           `.pricing-btn` nace `display: block; width: 100%` porque dentro de una
           tarjeta ocupa la columna entera. En `#pricing-embudo` no hay columna: es
           un bloque de --ancho-prosa (840px) centrado, y una caja con `max-width` y
           sin márgenes automáticos se queda PEGADA A LA IZQUIERDA. Medido en este
           árbol: 190 px fuera del eje en escritorio, 70 px a 480 px de ancho.

           El `text-align: center` del contenedor no lo arregla, y es la trampa:
           centra el texto DENTRO de la caja, no la caja dentro de su padre.

           Estaba escrito en línea en los tres nodos —`max-width:340px` y
           `margin-top:1rem`, sin el `auto`—, así que el mismo defecto venía copiado
           tres veces, y el enlace además traía un `display:inline-block` que lo
           tapaba sólo a él. El estilo de un componente va en su hoja: aquí se
           arregla una vez para los tres, y de paso el guardián de
           `.pricing-btn[hidden]` deja de tener un `display` en línea peleándose
           con él. */
        .pricing-embudo .pricing-btn {
            max-width: 340px;
            margin: var(--space-md) auto 0;
        }

        /* ── LA LÍNEA DE PLAN Y PRECIO DEL ENCABEZADO POR CAPACIDAD ─────────
           «Está en Pro · 29,90 €/mes» es una afirmación entera sobre el catálogo,
           y como `<span>` en línea caía dentro del mismo párrafo que la
           descripción de la capacidad: arrancaba a media línea, detrás del punto
           de la frase anterior, y el importe se partía por el espacio de
           «29,90 €/mes». Va en su propio renglón.

           EL GUARDIÁN DE `[hidden]` NO ES OPCIONAL. `pricing.js` esconde esta
           línea cuando el `?plan=` no es comprable —con `?plan=free` la página
           llegó a afirmar «Está en Gratuito · 0 €» de una capacidad de pago—, y
           una regla de autor con `display: block` GANA a la del navegador para
           `[hidden]`. Es la misma regresión ya pagada en `.pricing-btn[hidden]`,
           y aquí lo que reaparecería es una mentira sobre el catálogo. */
        .pricing-feature-plan-line {
            display: block;
            margin-top: var(--space-xs);
        }

        .pricing-feature-plan-line[hidden] {
            display: none;
        }

        /* El importe es un átomo: ni el número se separa de su moneda, ni la
           moneda de su periodo. El texto lo compone `pricing.js` copiándolo de la
           tarjeta, así que aquí sólo se impide que el salto de línea lo corte por
           la mitad. */
        .pricing-feature-price {
            white-space: nowrap;
        }

/* ═══ components/funnel-cta.css ═══ */
/* funnel-cta — layout/spacing only. Visuals come from reused classes
   (.pricing-btn, .pricing-btn--featured). No colours/type/states here.
   `.email-input` y `.form-error` salían de aquí cuando este bloque tenía un
   formulario de correo; ya no lo tiene. */

.hero-cta {
    width: 100%;
    max-width: 360px;
    margin-top: var(--space-lg);
}

.trial-cta {
    /* Width in layout.css (the --zona primitive): --ancho-prosa, 840px, up
       from 560px. Measured before touching it: both text children cap their
       OWN width in `ch` regardless of the container — `.trial-cta__title`
       at 24ch, `.trial-cta__lead` at 48ch, below — so widening the outer
       block never lengthens a reading line; it only gives the button/rule
       more room, same family as `.pricing-embudo` (pricing.css), which took
       the same token for the same reason. */
    /* No outer margins: the section's own padding handles top (eyebrow) and bottom (FAQ). */
    margin: 0 auto;
    text-align: center;
    --zona: var(--ancho-prosa);
}

/* Per-block heading (create-account / choose-plan). Self-contained so it doesn't
   inherit the oversized .pricing-section .section-title size. */
.trial-cta__title {
    margin: 0 auto var(--space-xs);
    max-width: 24ch;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.05rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-wrap: balance;
}

/* Separator between the two blocks — same accent gradient as .section-head::after. */
.trial-cta__sep {
    width: 120px;
    height: 1px;
    border: 0;
    margin: var(--space-xl) auto;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 0.48), rgba(var(--accent-rgb), 0));
}

/* The plans grid used to fill this section; with only the header + trial CTA the
   stock section padding-bottom left a large void before the FAQ. Trim it. */
.pricing-section {
    padding-bottom: clamp(40px, 5vw, 64px);
}

/* Pull the analysis band up closer to the hero CTA (less dead space below the button).
   Único dueño del margen superior de la banda en escritorio (hero.css ya no lo declara);
   responsive.css lo ajusta por tramo. 36 = xl + 2xs. */
.hero-disclosure-band {
    margin-top: clamp(var(--space-lg), 3vw, calc(var(--space-xl) + var(--space-2xs)));
}

.trial-cta__lead {
    max-width: 48ch;
    margin: 0 auto var(--space-md);
    color: var(--text-secondary);
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.6;
}

/* AQUÍ HABÍA TRES REGLAS PARA UN FORMULARIO QUE YA NO EXISTE, y se han ido con él:
   la rejilla de `.trial-cta__form`, su apilado en móvil y un `[hidden] { display:none }`
   que hacía falta porque `.pricing-btn` declara `display: block` y una regla de autor
   gana a la del navegador. El bloque ya no revela un campo de correo: su botón es un
   `<a href="/alta">` y no oculta ni enseña nada. Lo del `[hidden]` no queda a la
   intemperie —`components/pricing.css` lo cierra para todo `.pricing-btn[hidden]`—, así
   que devolver estas reglas no arregla nada: lo que las pedía era el formulario. */

/* ═══ animations.css ═══ */
        @keyframes marquee-scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-33.333%);
            }
        }

        /* ===== ANIMATIONS ===== */
        @keyframes pulse-glow {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.88;
            }
        }

        /* ===== HERO CSS ANIMATIONS ===== */
        @keyframes slideUpFade {
            from {
                opacity: 0;
                transform: translateY(18px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes popIn {
            0% {
                opacity: 0;
                transform: scale(0.92);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* El titular y el subtítulo son el mayor texto de la primera pantalla.
           Un fade desde opacity:0 no cuenta como pintado hasta que la animación
           termina (~0,8 s después de tener CSS): en el laboratorio móvil eso
           era el LCP. El desplazamiento no tapa el texto y no mueve el flujo. */
        @keyframes heroArrive {
            from {
                transform: translateY(12px);
            }

            to {
                transform: translateY(0);
            }
        }

        .hero h1 {
            animation: heroArrive 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
        }

        .hero-subtitle {
            animation: heroArrive 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
        }

        .cta-primary {
            animation: slideUpFade 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.38s forwards;
            opacity: 0;
        }

        .info-container {
            animation: slideUpFade 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards;
            opacity: 0;
        }


/* ═══ components/modal.css ═══ */
        /* ===== INFO ICON & TOOLTIP ===== */
        .info-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            margin-top: 24px;
            width: 100%;
        }

        .cta-note {
            text-align: center;
            margin: 0;
            display: flex;
            align-items: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 500;
        }

        .info-trigger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: 50%;
            padding: 0;
            cursor: pointer;
            transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
            white-space: nowrap;
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .info-trigger--metrics {
            width: 28px;
            height: 28px;
            max-width: none;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 50%;
            position: relative;
            z-index: 1;
        }

        .info-trigger--metrics .info-expand-text {
            display: none;
        }

        .info-trigger--metrics .info-circle {
            background: var(--premium-soft);
            color: var(--premium-text);
            border-color: var(--premium-border);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 rgba(var(--premium-rgb), 0);
        }

        .info-trigger--metrics:hover .info-circle {
            background: rgba(var(--premium-rgb), 0.2);
            border-color: rgba(var(--premium-rgb), 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 20px rgba(var(--premium-rgb), 0.18);
            transform: scale(1.1) translateY(-1px);
        }

        .info-trigger--metrics:focus-visible {
            outline: 2px solid var(--premium-text);
            outline-offset: 3px;
            border-radius: 50%;
        }

        .info-trigger--metrics.expanded {
            max-width: none;
            border-radius: 50%;
        }

        .info-trigger--kpi {
            position: absolute;
            top: 8px;
            right: 8px;
        }

        .info-trigger.expanded {
            max-width: 160px;
            border-radius: 20px;
        }

        .info-circle {
            width: 20px;
            height: 20px;
            background: rgba(var(--accent-rgb), 0.16);
            color: var(--accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-mono);
            font-weight: 800;
            font-size: 11px;
            flex-shrink: 0;
            border: 1px solid var(--accent-border);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 rgba(var(--accent-rgb), 0);
            transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
            animation: none;
        }

        .info-trigger:hover .info-circle {
            transform: scale(1.12);
            background: rgba(var(--accent-rgb), 0.28);
            border-color: rgba(var(--accent-rgb), 0.42);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 20px rgba(var(--accent-rgb), 0.16);
        }

        .info-trigger:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
            border-radius: 50%;
        }

        .info-expand-text {
            font-size: 10px;
            font-weight: 700;
            color: var(--accent);
            margin-left: 8px;
            opacity: 0;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: opacity var(--duration-fast) var(--ease-standard);
        }

        .info-trigger.expanded .info-expand-text {
            opacity: 1;
        }

        .info-trigger.blinking .info-circle {
            animation: info-circle-glow 1.8s ease-in-out 2;
        }

        @keyframes info-circle-glow {

            0%,
            100% {
                background: rgba(var(--accent-rgb), 0.16);
                border-color: var(--accent-border);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 rgba(var(--accent-rgb), 0);
            }

            50% {
                background: rgba(var(--accent-rgb), 0.22);
                border-color: rgba(var(--accent-rgb), 0.34);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 12px rgba(var(--accent-rgb), 0.14);
            }
        }

        /* Tooltip */
        .info-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            background: rgba(6, 10, 16, 0);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 24px;
            transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s;
        }

        .info-modal.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            background: rgba(6, 10, 16, 0.86);
            transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
        }

        .info-modal-content {
            background: linear-gradient(180deg, rgba(14, 22, 35, 0.96), rgba(8, 13, 23, 0.98));
            border: 1px solid var(--border-subtle);
            max-width: 500px;
            width: 100%;
            padding: 40px;
            border-radius: var(--radius-lg);
            position: relative;
            box-shadow: var(--shadow-card);
            opacity: 0;
            transform: translateY(26px) scale(0.96);
            transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease, box-shadow 0.38s ease;
        }

        .info-modal-content::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.42), transparent);
        }

        .info-modal.show .info-modal-content {
            opacity: 1;
            transform: translateY(0) scale(1);
            box-shadow: 0 30px 72px rgba(2, 7, 18, 0.36);
        }

        /* LA DIANA, SIN MOVER EL GLIFO. La caja la daba sólo la «×»: 15,9 px de
           ancho medidos en el navegador, por debajo del mínimo de 24 por lado. El
           relleno la ensancha 8 px por cada costado y el `right` se descuenta esos
           mismos 8, así que el borde derecho del glifo cae EXACTAMENTE donde caía
           —17 px del borde del panel, medido antes y después— y lo único que crece
           es la zona pulsable: 15,9 → 31,9 px.

           El ALTO ya cumplía: 38,4 px, que salen del interlineado del glifo a 24 px.
           Por eso aquí NO se toca `line-height` ni se fija `height`: cualquiera de
           las dos cosas encogería la caja a 24 px y movería la × hacia arriba.

           Esta clase la comparten seis aspas —`cuenta.html`, `alta.html`,
           `index.html` y la que inyecta `checkout.js`—, y la compensación es
           relativa al propio botón, así que en las seis el glifo se queda quieto. */
        .info-modal-close {
            position: absolute;
            top: 16px;
            right: var(--space-xs);
            min-width: 24px;
            padding: 0 var(--space-xs);
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 24px;
            transition: color var(--duration-fast) var(--ease-standard);
        }

        .info-modal-close:hover {
            color: var(--text-primary);
        }

        .info-modal-title {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.08em;
            color: var(--text-primary);
            margin: 0 0 20px;
        }

        .info-modal-body {
            font-weight: 400;
            font-size: 14px;
            line-height: 1.7;
            color: var(--text-secondary);
        }

        .info-modal-body ul {
            list-style: none;
            padding: 0;
            margin: 0 0 16px;
        }

        .info-modal-body li {
            padding: 4px 0;
        }

        .info-modal-body li strong {
            color: var(--text-primary);
        }

        .info-modal-body .info-section-head {
            font-weight: 600;
            color: var(--text-primary);
            margin: 16px 0 8px;
            font-size: 13px;
            letter-spacing: 0.04em;
        }

        .info-modal-body p:last-child {
            margin-top: 16px;
            padding-top: 12px;
            border-top: 1px solid var(--border-subtle);
            font-size: 13px;
            color: var(--text-muted);
        }

        /* ===== DIÁLOGO DE BAJA DE CUENTA (#ca-delete-modal) =====

           La familia `.account-modal*` de `cuenta.html` no estaba en NINGUNA hoja:
           ni el telón, ni el panel, ni el aspa, ni el error. Lo único definido era
           `.account-modal__actions`, en `account.css`. Así que el diálogo que
           confirma el borrado de la cuenta no era un diálogo: era texto suelto en el
           flujo de la página, debajo del botón, sin fondo, sin recuadro y sin nada
           atenuado detrás. Y el aspa, sin glifo y sin estilo, salía como la caja por
           defecto del navegador —4x4 px grises con borde `outset`—, que es el «punto
           suelto» que se veía.

           Se calca a `.info-modal`, que es lo que usan las OTRAS DOS modales de esta
           misma página (`#ca-cancel-modal`, `#ca-plan-modal`). Mismo fondo, mismo
           recuadro, mismo radio y misma sombra: las tres se ven iguales porque son
           la misma cosa.

           EL INTERRUPTOR ES `hidden`, NO una clase `.show`. `cuenta.js` abre y
           cierra este diálogo con `modal.hidden = false/true` (`wireDelete`,
           `renderDelete`), mientras que sus dos hermanas usan `.show`. Se respeta el
           mecanismo que ya existe para no tener que tocar el JS. */
        .account-modal {
            position: fixed;
            inset: 0;
            /* El token, no el 2000 a pelo que arrastra `.info-modal` de antes. */
            z-index: var(--z-modal);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-lg);
            background: rgba(6, 10, 16, 0.86);
        }

        /* SIN ESTO EL DIÁLOGO NO SE ESCONDERÍA NUNCA. El `display: flex` de arriba
           es de la hoja del autor y le gana al `display: none` que el navegador le
           pone a `[hidden]`, que es justo el interruptor que usa `cuenta.js`. */
        .account-modal[hidden] {
            display: none;
        }

        .account-modal__panel {
            position: relative;
            width: 100%;
            max-width: 500px;
            padding: var(--space-2xl);
            background: linear-gradient(180deg, rgba(14, 22, 35, 0.96), rgba(8, 13, 23, 0.98));
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
        }

        /* 32x32 DE DIANA, y no el glifo a secas. `.info-modal-close` —la de sus dos
           hermanas— mide 15,9 x 38,4 px reales, medido en el navegador, y esos 15,9
           de ancho no llegan al mínimo de 24px por lado. La caja se declara aparte
           del tamaño de letra para no heredar ese defecto. */
        .account-modal__close {
            position: absolute;
            top: var(--space-sm);
            right: var(--space-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 0;
            background: none;
            border: none;
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            font-size: 24px;
            line-height: 1;
            cursor: pointer;
            transition: color var(--duration-fast) var(--ease-standard);
        }

        .account-modal__close:hover,
        .account-modal__close:focus-visible {
            color: var(--text-primary);
        }

        /* El motivo del rechazo, con el mismo aspecto que `.form-error` le da al de
           las otras dos modales. El color NO es el único canal: lo acompañan el
           fondo teñido, el recuadro y el `role="alert"` que ya llevaba el marcado.
           No se declara `display`, a propósito: así el `[hidden]` del navegador
           sigue siendo quien lo esconde, que es lo que conmuta `show()`. */
        .account-modal__error {
            margin-top: var(--space-md);
            padding: var(--space-sm) var(--space-md);
            border: 1px solid rgba(var(--danger-rgb), 0.32);
            border-radius: var(--radius-sm);
            background: rgba(var(--danger-rgb), 0.08);
            color: var(--danger-text-strong);
            font-family: var(--font-mono);
            font-size: 14px;
        }

        /* ===== SCROLLBAR ===== */
        ::-webkit-scrollbar {
            width: 4px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-base);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(var(--accent-rgb), 0.24);
            border-radius: 2px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--accent-rgb), 0.42);
            cursor: pointer;
        }

        html {
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--accent-rgb), 0.24) var(--bg-base);
        }

        /* ===== FEATURES ===== */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            max-width: 1000px;
            margin: 32px auto 0;
            counter-reset: feature-card;
        }

        .feature-card {
            background: var(--bg-card);
            padding: 48px 32px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            text-align: left;
        }

        .feature-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.8), rgba(34, 211, 238, 0.75));
        }

        .feature-card::after {
            content: counter(feature-card, decimal-leading-zero);
            counter-increment: feature-card;
            position: absolute;
            top: 18px;
            right: 20px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            letter-spacing: 0.16em;
            color: rgba(103, 232, 249, 0.4);
        }

        .feature-card:hover {
            transform: translateY(-12px);
            background: var(--bg-hover);
            border-color: var(--primary);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            margin-bottom: 24px;
            color: var(--accent);
            filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.38));
        }

        /* ===== FAQ ===== */

/* ═══ components/cookies.css ═══ */
        /* ===== COOKIE CONSENT BANNER + PREFERENCES PANEL (RGPD/AEPD) ===== */
        /* Uses the global token system; mirrors modal.css surfaces for visual uniformity. */

        .cookie-banner {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: var(--z-modal);
            display: flex;
            justify-content: center;
            padding: clamp(12px, 2.4vw, 22px);
            pointer-events: none;
        }

        .cookie-banner[hidden] {
            display: none;
        }

        .cookie-banner__inner {
            pointer-events: auto;
            width: 100%;
            max-width: 720px;
            background: linear-gradient(180deg, rgba(14, 22, 35, 0.98), rgba(8, 13, 23, 0.99));
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            padding: clamp(18px, 3vw, 26px);
            transform: translateY(16px);
            opacity: 0;
            transition: transform var(--duration-slow) var(--ease-decelerate), opacity var(--duration-base) var(--ease-standard);
        }

        .cookie-banner.is-visible .cookie-banner__inner {
            transform: translateY(0);
            opacity: 1;
        }

        .cookie-banner__title {
            font-family: var(--font-display);
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 8px;
        }

        .cookie-banner__text {
            font-size: 13.5px;
            line-height: 1.7;
            color: var(--text-secondary);
            margin: 0 0 16px;
        }

        .cookie-banner__more {
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid rgba(var(--accent-rgb), 0.32);
        }

        .cookie-banner__more:hover {
            color: var(--primary-hover);
        }

        .cookie-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        /* Equal prominence: reject is styled identically to accept (AEPD requirement). */
        .cookie-btn {
            flex: 1 1 auto;
            min-width: 140px;
            min-height: 44px;
            padding: 11px 18px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.04em;
            cursor: pointer;
            text-align: center;
            transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
        }

        .cookie-btn--solid {
            background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.28), rgba(10, 16, 28, 0.96));
            border: 1px solid var(--accent-border);
            color: var(--text-primary);
            box-shadow: 0 14px 28px rgba(2, 7, 18, 0.26);
        }

        .cookie-btn--solid:hover {
            transform: translateY(-1px);
            background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0.16));
            border-color: rgba(var(--accent-rgb), 0.5);
        }

        .cookie-btn--ghost {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-subtle);
            color: var(--text-secondary);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        }

        .cookie-btn--ghost:hover {
            transform: translateY(-1px);
            border-color: var(--accent-border);
            color: var(--text-primary);
            background: rgba(13, 19, 34, 0.82);
        }

        .cookie-btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* ===== Preferences panel (modal) ===== */
        .cookie-modal {
            position: fixed;
            inset: 0;
            z-index: calc(var(--z-modal) + 10);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(6, 10, 16, 0);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.32s var(--ease-emphasis), background-color 0.32s var(--ease-emphasis), visibility 0s linear 0.32s;
        }

        .cookie-modal.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            background: rgba(6, 10, 16, 0.86);
            transition: opacity 0.32s var(--ease-emphasis), background-color 0.32s var(--ease-emphasis), visibility 0s linear 0s;
        }

        .cookie-modal__content {
            background: linear-gradient(180deg, rgba(14, 22, 35, 0.97), rgba(8, 13, 23, 0.99));
            border: 1px solid var(--border-subtle);
            max-width: 520px;
            width: 100%;
            max-height: 86vh;
            overflow-y: auto;
            padding: clamp(22px, 4vw, 36px);
            border-radius: var(--radius-lg);
            position: relative;
            box-shadow: var(--shadow-card);
            transform: translateY(24px) scale(0.97);
            opacity: 0;
            transition: transform 0.38s var(--ease-decelerate), opacity 0.24s ease;
        }

        .cookie-modal.is-open .cookie-modal__content {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .cookie-modal__close {
            position: absolute;
            top: 14px;
            right: 16px;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 24px;
            line-height: 1;
            transition: color var(--duration-fast) var(--ease-standard);
        }

        .cookie-modal__close:hover {
            color: var(--text-primary);
        }

        .cookie-modal__close:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: 4px;
        }

        .cookie-modal__title {
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 18px;
        }

        .cookie-cat {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            padding: 16px 18px;
            margin-bottom: 14px;
            background: rgba(255, 255, 255, 0.02);
        }

        .cookie-cat__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 6px;
        }

        .cookie-cat__title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .cookie-cat__desc {
            font-size: 12.5px;
            line-height: 1.65;
            color: var(--text-secondary);
            margin: 0;
        }

        .cookie-cat__locked {
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.04em;
            color: var(--accent);
        }

        /* Accessible toggle switch (keyboard + ARIA via the native checkbox) */
        .cookie-switch {
            position: relative;
            display: inline-flex;
            flex-shrink: 0;
            width: 44px;
            height: 26px;
        }

        .cookie-switch input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            cursor: pointer;
        }

        .cookie-switch__track {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid var(--border-subtle);
            border-radius: 999px;
            transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
        }

        .cookie-switch__track::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--text-secondary);
            transition: transform var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
        }

        .cookie-switch input:checked + .cookie-switch__track {
            background: rgba(var(--accent-rgb), 0.32);
            border-color: var(--accent-border);
        }

        .cookie-switch input:checked + .cookie-switch__track::after {
            transform: translateX(18px);
            background: var(--accent);
        }

        .cookie-switch input:focus-visible + .cookie-switch__track {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .cookie-modal__foot {
            margin-top: 20px;
        }

        .cookie-modal__foot .cookie-btn {
            width: 100%;
        }

        @media (prefers-reduced-motion: reduce) {

            .cookie-banner__inner,
            .cookie-modal,
            .cookie-modal__content,
            .cookie-btn,
            .cookie-switch__track,
            .cookie-switch__track::after {
                transition: none !important;
            }
        }

/* ═══ responsive.css ═══ */
        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .hero {
                padding: calc(var(--space-4xl) + var(--space-3xl)) var(--space-md) var(--space-3xl);
                text-align: center;
            }

            .hero-shell {
                width: 100%;
            }

            .hero-copy,
            .hero-title-group {
                align-items: center;
                text-align: center;
            }

            .hero-subtitle,
            .section-head .section-subtitle,
            .solution-trust-note {
                max-width: none;
            }

            .hero-subtitle {
                width: min(100%, 34ch);
                margin: 0 auto 24px;
                text-align: center;
            }

            .solution-trust-note {
                margin-top: 18px;
                padding: 15px 16px;
            }

            .hero-title-group {
                margin-bottom: 20px;
            }

            .hero h1 {
                width: fit-content;
                max-width: 100%;
                font-size: clamp(2.92rem, 7vw, 4rem);
                line-height: 0.92;
                letter-spacing: -0.076em;
            }

            .hero-line {
                white-space: nowrap;
                text-wrap: nowrap;
            }

            .hero-actions {
                align-items: center;
            }

            section {
                padding: 56px 16px;
            }

            .stats-grid {
                gap: 10px;
                padding: 12px;
                background: linear-gradient(180deg, rgba(14, 22, 36, 0.9), rgba(8, 15, 26, 0.82));
                border: 1px solid rgba(148, 163, 184, 0.12);
                box-shadow: var(--shadow-soft);
            }

            .stat-item {
                flex: 1;
                padding: 18px 12px;
                background: linear-gradient(180deg, rgba(10, 16, 29, 0.94), rgba(10, 15, 26, 0.78));
                margin: 32px 0 0;
            }

            .stat-item:not(:last-child)::after {
                display: block;
                padding: 20px 0 20px;
                bottom: 12px;
            }

            .stat-value {
                font-size: 22px;
            }

            .stat-label {
                font-size: 11px;
            }

            .footer-inner {
                flex-direction: column;
                text-align: center;
            }

            .solution-section {
                padding-top: 44px;
                padding-bottom: 0;
            }

            .features-section {
                padding-top: 40px;
                padding-bottom: 48px;
            }

            .trust-limits-section {
                padding-bottom: 76px;
            }

            .trust-limits-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .trust-limits-card {
                padding: 24px 20px;
                gap: 16px;
            }

            .trust-limits-card-lead {
                font-size: 0.92rem;
            }
        }

        @media (max-width: 1180px) {
            .metrics-case-highlights__grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .metrics-case-highlight + .metrics-case-highlight {
                border-left: 0;
                border-top: 1px solid rgba(148, 163, 184, 0.16);
                padding-left: 8px;
            }
        }

        @media (max-width: 760px) {
            .metrics-case-highlight__line {
                gap: 8px;
            }

            /* Por debajo de 760 px las cifras van SIEMPRE debajo del nombre, como antes: el bloque
               del nombre ocupa la fila entera y la línea flexible (metrics.css) las baja. */
            .metrics-case-highlight__main {
                flex-basis: 100%;
            }

            .metrics-case-highlight__metrics {
                justify-content: flex-start;
                min-width: 0;
                flex-wrap: wrap;
                white-space: normal;
            }

            .metrics-case-highlight__metric + .metrics-case-highlight__metric::before {
                content: '';
                margin-right: 0;
            }
        }

        @media (max-width: 640px) {
            .metrics-case-highlights__title {
                display: block;
                width: auto;
                max-width: 100%;
                flex: 0 1 auto;
                min-width: 0;
                margin-right: 0;
                align-self: start;
            }
        }

        @media (max-width: 480px) {
            .metrics-case-highlights__grid {
                gap: 12px;
            }

            .metrics-case-highlight__main,
            .metrics-case-highlight__metrics {
                width: 100%;
            }

            .metrics-case-highlight__metrics {
                gap: 6px 8px;
            }
        }

        @media (max-width: 1180px) and (min-width: 1025px) {
            .hero {
                padding-top: calc(var(--space-6xl) + var(--space-3xl));
            }

            .hero-disclosure-band {
                margin-top: calc(var(--space-xl) + var(--space-2xs));
            }

            .showcase-wrapper {
                width: min(1220px, calc(100vw - 48px));
            }

            section {
                padding: 92px 20px;
            }
        }

        @media (max-width: 430px) {
            .hero {
                padding: calc(var(--space-5xl) + var(--space-sm)) var(--space-sm) var(--space-2xl);
            }

            .hero-title-group {
                margin-bottom: 18px;
            }

            .hero h1 {
                font-size: clamp(2.46rem, 9.3vw, 2.9rem);
                line-height: 0.94;
                letter-spacing: -0.072em;
            }

            .hero-subtitle {
                width: min(100%, 31ch);
                margin-bottom: 20px;
            }

            .hero-disclosure-band {
                margin-top: var(--space-lg);
            }
        }

        @media (max-width: 390px) {
            .hero h1 {
                font-size: clamp(2.26rem, 9.4vw, 2.7rem);
                letter-spacing: -0.068em;
            }
        }

        @media (max-width: 1024px) {
            .hero {
                --hero-rail-width: 920px;
                padding-top: calc(var(--space-5xl) + var(--space-3xl) + var(--space-xs));
            }

            .hero-copy,
            .hero-title-group {
                align-items: center;
                text-align: center;
            }

            .hero-subtitle,
            .hero h1 {
                margin-left: auto;
                margin-right: auto;
            }

            .hero-subtitle {
                text-align: center;
            }

            .hero-disclosure-band {
                margin-top: var(--space-xl);
            }

            .showcase-card {
                width: 340px;
                min-width: 340px;
            }

            .pain-grid,
            .features-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            /* Los dos `max-width` de aquí abajo NO son el ancho de banda: viven
               dentro de este `@media (max-width: 1024px)`, por debajo de donde
               `--ancho-contenido` (1440px) puede pintar nada, así que no compiten
               con el primitivo de `layout.css` y no se tocan al migrar
               `.pricing-grid` a `--zona`.

               860px es el ancho de la REJILLA de 2 columnas en tablet: una
               decisión de cuánto se separan las dos tarjetas a este ancho de
               viewport, no una medida de zona. Se queda tecleado.

               880px es el ancho de UNA tarjeta apilada a lo ancho de las dos
               columnas (`grid-column: 1 / -1`), no una banda: es el mismo hecho
               que ya documenta el comentario de la línea ~872 para el resto de
               ajustes de `.pricing-card--featured` a este breakpoint. Se queda,
               con su motivo escrito aquí. */
            .pricing-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                max-width: 860px;
            }

            .pricing-card--featured {
                grid-column: 1 / -1;
                max-width: 880px;
                justify-self: center;
                transform: none;
            }

            .pricing-card--featured:hover {
                transform: translateY(-8px);
            }
        }

        @media (max-width: 768px) {
            /* LA CABECERA NO ESTÁ AQUÍ. Sus reglas de ancho —éstas y las de los
               otros dos bloques que había— viven en components/nav.css, en un
               solo `@media`. Ver la cabecera de ese fichero. */

            .showcase-wrapper {
                width: calc(100vw - 20px);
                margin-top: 36px;
                padding: 20px 12px 18px;
                border-radius: 24px;
            }

            body::before {
                opacity: 0.012;
            }

            /* `.nav` salió de esta lista: su `backdrop-filter: none` está en
               components/nav.css, con el resto de la cabecera. */
            .metrics-disclosure,
            .showcase-card,
            .pricing-card,
            .pain-card,
            .feature-card,
            .faq-shell,
            .cta-section .container,
            .footer-shell,
            .info-modal-content {
                backdrop-filter: none;
            }

            .live-dot,
            .logo-dot,
            .metrics-icon,
            .info-trigger--metrics .info-circle {
                animation: none !important;
            }

            .showcase-wrapper::before,
            .showcase-wrapper::after {
                display: none;
            }

            .showcase-header {
                gap: 10px;
                margin-bottom: 14px;
            }

            .showcase-header__title {
                white-space: normal;
                line-height: 1.5;
                letter-spacing: 0.12em;
            }

            .showcase-footer {
                padding: 0 4px;
            }

            .showcase-card {
                width: min(82vw, 306px);
                min-width: min(82vw, 306px);
                padding: 30px 18px 32px;
                margin-right: 12px;
                border-radius: 24px;
            }

            .showcase-card__event-info,
            .showcase-card__prediction-section,
            .showcase-card__what-happened,
            .showcase-card__metrics,
            .showcase-card__post-event,
            .showcase-card__summary {
                margin-bottom: 14px;
            }

            .showcase-card__prediction,
            .showcase-card__post-event,
            .showcase-card__what-happened {
                padding: 12px 12px 12px 14px;
            }

            .showcase-card__metrics {
                gap: 10px;
            }

            .showcase-card__metric {
                padding: 10px 11px;
            }

            .showcase-card__post-event-summary {
                gap: 14px;
            }

            .showcase-card__post-event-stats {
                min-width: 120px;
                padding-left: 14px;
            }

            .showcase-card__post-event-value {
                font-size: 24px;
            }

            .stats-grid {
                gap: 10px;
            }

            .stat-item {
                padding: 18px 10px;
            }

            .content-rail-shell {
                --rail-edge-bg: var(--bg-base);
                width: 100vw;
                max-width: none;
                margin: 30px 0 0;
                margin-left: calc(50% - 50vw);
                margin-right: calc(50% - 50vw);
                overflow-x: auto;
                overflow-y: hidden;
                padding: 14px 0 16px;
                overscroll-behavior-x: contain;
                scrollbar-width: none;
                touch-action: pan-y pinch-zoom;
                cursor: grab;
                position: relative;
            }

            .pain-section .content-rail-shell {
                --rail-edge-bg: var(--bg-panel);
            }

            .features-section .content-rail-shell {
                --rail-edge-bg: var(--bg-base);
            }

            .content-rail-shell::-webkit-scrollbar {
                display: none;
            }

            .content-rail-shell::before,
            .content-rail-shell::after {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                width: min(8vw, 44px);
                pointer-events: none;
                z-index: 2;
                opacity: 0;
                transition: opacity 0.2s ease;
            }

            .content-rail-shell::before {
                left: 0;
                background: linear-gradient(90deg, var(--rail-edge-bg) 0%, rgba(10, 13, 20, 0) 100%);
            }

            .content-rail-shell::after {
                right: 0;
                background: linear-gradient(270deg, var(--rail-edge-bg) 0%, rgba(10, 13, 20, 0) 100%);
            }

            .content-rail-shell[data-rail-active='true'] {
                overflow: hidden;
            }

            .content-rail-shell[data-rail-active='true']::before,
            .content-rail-shell[data-rail-active='true']::after {
                opacity: 1;
            }

            .content-rail-shell.is-dragging {
                cursor: grabbing;
            }

            .pain-grid,
            .features-grid {
                display: flex;
                width: max-content;
                max-width: none;
                gap: 12px;
                margin: 0;
                transform: translate3d(0, 0, 0);
            }

            .pain-card,
            .feature-card {
                width: min(80vw, 304px);
                min-width: min(80vw, 304px);
                flex-shrink: 0;
                min-height: 100%;
                padding: 22px 18px;
            }

            .pain-card:hover,
            .feature-card:hover {
                transform: none;
            }

            .pain-card:hover {
                box-shadow: 0 14px 28px rgba(239, 68, 68, 0.08);
            }

            .feature-card:hover {
                box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
            }

            .pain-card {
                display: flex;
                gap: 14px;
                flex-direction: row;
                align-items: flex-start;
            }

            .pain-icon,
            .feature-icon {
                width: 30px;
                height: 30px;
                flex-shrink: 0;
                margin-bottom: 0;
            }

            .pain-card-body,
            .feature-card-body {
                min-width: 0;
                flex: 1;
            }

            .pain-card-body {
                padding-right: 24px;
            }

            .pain-card h3,
            .feature-card h3 {
                font-size: 0.98rem;
                line-height: 1.14;
                letter-spacing: -0.02em;
                margin-bottom: 8px;
            }

            .pain-card p,
            .feature-card p {
                font-size: 0.875rem;
                line-height: 1.5;
            }

            .feature-card {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                gap: 14px;
                text-align: left;
            }

            .trust-limits-card {
                width: 100%;
                min-width: 0;
                flex-shrink: 1;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 14px;
                padding: 22px 18px;
            }

            .trust-limits-card-header,
            .trust-limits-list {
                width: 100%;
                min-width: 0;
                flex: 0 0 auto;
            }

            .faq-question {
                padding: 20px;
                font-size: 1rem;
                min-height: 44px;
            }

            .faq-answer-inner {
                padding: 0 20px 20px;
                font-size: 0.95rem;
                line-height: 1.72;
            }

            .section-head {
                gap: 12px;
            }

            .section-head::after {
                width: 88px;
            }

            .faq-shell {
                padding: 26px 16px 16px;
                border-radius: 24px;
            }

            .faq-shell .section-head {
                margin-bottom: 2px;
            }

            .footer {
                padding: 0 16px 32px;
            }

            .footer-shell {
                padding: 22px 16px 18px;
                border-radius: 24px;
            }

            .footer-inner {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .footer-brand {
                max-width: none;
            }

            .footer-actions {
                justify-content: flex-start;
            }

            .footer-base {
                flex-direction: column;
                gap: 14px;
                margin-top: 0;
            }

            .footer-disclaimer {
                max-width: none;
                font-size: 10.5px;
                line-height: 1.72;
            }

            .cta-section {
                padding: 72px 16px 84px;
            }

            .pricing-grid {
                gap: 18px;
                margin: 48px auto 0;
            }

            .pricing-card {
                padding: 38px 24px;
                border-radius: 24px;
            }

            .pricing-card--featured {
                padding-top: 62px;
            }

            .pricing-tier-copy {
                margin-bottom: 20px;
            }

            .pricing-period,
            .pricing-divider {
                margin-bottom: 22px;
            }

            .pricing-features {
                gap: 14px;
                margin-bottom: 26px;
            }

            .pricing-feature {
                font-size: 13.5px;
            }

            .plan-indicator {
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;
                margin-bottom: 18px;
                padding: 10px 14px;
                gap: 6px;
                font-size: 11px;
            }

            .plan-indicator strong {
                font-size: 13px;
            }

            .cta-form {
                margin-top: 28px;
                padding: 0 4px;
            }

            .cta-section .container {
                padding: 32px 18px 34px;
                border-radius: 22px;
            }

            .form-row {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .email-input,
            .submit-btn {
                min-height: 48px;
            }
        }

        @media (max-width: 640px) {
            .metrics-kpi-grid {
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }

            .metrics-kpi-item--top {
                grid-column: span 3;
                border-right: none !important;
                border-bottom: 1px solid rgba(148, 163, 184, 0.1);
            }

            .metrics-kpi-item--top:first-child {
                border-right: 1px solid rgba(148, 163, 184, 0.1) !important;
            }

            .metrics-kpi-item--sub:not(:last-child) {
                border-right: 1px solid rgba(148, 163, 184, 0.1);
            }

            .metrics-kpi-item--sub:last-child {
                border-right: none;
            }

            .metrics-case-highlight__details {
                margin-top: 7px;
                padding-top: 7px;
            }

            .trust-limits-grid {
                grid-template-columns: 1fr !important;
            }

            .trust-limits-card {
                padding: 20px 18px;
                gap: 14px;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
                gap: 14px;
                margin: 36px auto 0;
            }

            .pricing-card {
                padding: 30px 18px;
            }

            .pricing-card--featured {
                grid-column: auto;
                width: 100%;
                max-width: none;
                justify-self: stretch;
                padding-top: 56px;
                transform: none;
            }

            .pricing-tier-copy {
                margin-bottom: 18px;
            }

            .pricing-period,
            .pricing-divider {
                margin-bottom: 18px;
            }

            .pricing-features {
                gap: 12px;
                margin-bottom: 22px;
            }

            .pricing-price {
                font-size: 2.2rem;
            }

            .pricing-note {
                margin-top: 28px;
                font-size: 12px;
                padding: 0 8px;
            }

            .footer-link {
                width: 100%;
            }

            .footer-lead {
                font-size: 11.5px;
            }

            .cta-section h2 {
                max-width: none;
            }
        }

        @media (max-width: 480px) {
            .metrics-toggle {
                gap: 8px;
            }

            .metrics-case-highlights {
                margin-left: 10px;
                margin-right: 10px;
                padding: 10px;
            }

            .metrics-case-highlight__line,
            .metrics-case-highlight__main,
            .metrics-case-highlight__identity {
                gap: 6px;
            }

            .metrics-case-highlight__ticker {
                font-size: 14px;
            }

            .metrics-case-highlight__company,
            .metrics-case-highlight__detail-meta,
            .metrics-case-highlight__detail-copy {
                font-size: 12px;
            }

            /* TODO: duplicate candidate - repeated again at 640px breakpoint, keep for now. */
            .trust-limits-grid {
                grid-template-columns: 1fr !important;
            }

            .trust-limits-card {
                padding: 22px 18px;
            }

            .trust-limits-card-lead {
                font-size: 0.9rem;
            }

            .trust-limits-item {
                font-size: 0.9rem;
            }

            .stats-grid {
                gap: 8px;
            }

            .stat-item {
                padding: 16px 8px;
            }

            .stat-value {
                font-size: 20px;
            }

            .stat-label {
                font-size: 11px;
            }

            .pricing-card {
                padding: 28px 16px;
            }

            /* RESERVA OTRA VEZ EL HUECO DEL BADGE, y hay que re-declararlo aquí.
               `pricing-card--featured` es UNA sola clase —el `--` forma parte
               del nombre, no es un segundo selector—, así que empata en
               especificidad con `.pricing-card` y pierde por orden de
               aparición: el `padding: 28px 16px` de arriba borra el
               `padding-top: 56px` que dejó puesto el bloque de 640 px. Sin
               esto la etiqueta «Más completo» se le echa encima al «PRO»
               —10 px de solape, medido a 480 px de ancho—. Los bloques de 768,
               640 y 430 px ya re-declaran el suyo justo detrás de su
               shorthand; a éste se le había olvidado. */
            .pricing-card--featured {
                padding-top: var(--space-3xl);
            }

            .pricing-tier-name {
                font-size: 10px;
            }

            .pricing-price {
                font-size: 2rem;
            }

            .pricing-badge {
                font-size: 10px;
                padding: 3px 14px;
            }

            .pricing-btn {
                padding: 13px 20px;
                font-size: 13px;
            }

            .faq-shell {
                padding: 20px 12px 10px;
                border-radius: 20px;
            }

            .faq-shell .section-head {
                gap: 10px;
                margin-bottom: 2px;
            }

            .faq-container {
                margin-top: 16px;
                gap: 12px;
            }

            .faq-question {
                padding: 16px 18px;
                font-size: 0.98rem;
                min-height: 44px;
            }

            .faq-answer-inner {
                padding: 0 18px 16px;
                line-height: 1.68;
            }

            .section-head::after {
                width: 60px;
                height: 0.75px;
                margin-top: 4px;
            }

            .cta-section {
                padding: 52px 12px 60px;
            }

            .cta-section .container {
                padding: 28px 14px 30px;
                border-radius: 20px;
            }

            .cta-section h2 {
                margin-bottom: 10px;
                font-size: clamp(1.3rem, 5.6vw, 1.6rem);
                line-height: 1.14;
            }

            .cta-form {
                margin-top: 24px;
                padding: 0;
            }

            .plan-indicator {
                margin-bottom: 16px;
                padding: 10px 12px;
                gap: 6px;
                font-size: 11px;
            }

            .plan-indicator strong {
                font-size: 13px;
            }

            .form-row {
                gap: 8px;
            }

            .submit-btn {
                min-height: 48px;
                padding: 13px 14px;
                font-size: 13px;
            }

            /* EL CAMPO NO BAJA DE 16 px, y menos aquí: éste es justo el ancho
               donde Safari iOS hace auto-zoom al enfocar un input de menos de
               16 px, deja la página escalada y a quien está rellenando un
               formulario sin saber dónde ha ido a parar. Manual §5.2. La regla
               ancha de components/forms.css ya está en 16; ésta la pisaba con
               13 exactamente en móvil, que es donde importa. */
            .email-input {
                min-height: 48px;
                padding: var(--space-sm) var(--space-md);
                font-size: 16px;
            }

            .footer-shell {
                padding: 20px 12px 18px;
                border-radius: 20px;
            }

            .footer-pill {
                font-size: 10px;
                padding: 6px 10px;
            }

            .footer-inner {
                gap: 18px;
            }

            .footer-link {
                padding: 12px 16px;
                font-size: 12px;
            }

            .footer-lead,
            .footer-disclaimer {
                font-size: 10px;
                line-height: 1.68;
            }

            .footer-base {
                margin-top: 0;
                gap: 12px;
            }
        }

        @media (max-width: 430px) {
            .showcase-wrapper {
                width: calc(100vw - 20px);
                margin-top: 30px;
                padding: 16px 10px 14px;
                border-radius: 18px;
            }

            .showcase-card {
                width: min(74vw, 272px);
                min-width: min(74vw, 272px);
                padding: 14px;
                margin-right: 10px;
                border-radius: 22px;
            }

            .showcase-card__prediction,
            .showcase-card__post-event,
            .showcase-card__what-happened,
            .showcase-card__metric {
                padding: 10px 10px 10px 12px;
            }

            .showcase-card__post-event-value {
                font-size: 22px;
            }

            section {
                padding: 48px 12px;
            }

            .content-rail-shell {
                margin-top: 24px;
                padding: 12px 0 14px;
            }

            .pain-grid,
            .features-grid {
                gap: 10px;
            }

            .pain-card,
            .feature-card {
                width: min(74vw, 286px);
                min-width: min(74vw, 286px);
                padding: 20px 16px;
            }

            .pain-card,
            .feature-card {
                gap: 12px;
            }

            .pain-icon,
            .feature-icon {
                width: 28px;
                height: 28px;
            }

            .pain-card-body {
                padding-right: 14px;
            }

            .trust-limits-card {
                width: 100%;
                min-width: 0;
                padding: 20px 16px;
                gap: 12px;
            }

            .pricing-card {
                padding: 24px 14px;
                border-radius: 24px;
            }

            .pricing-card--featured {
                padding-top: 50px;
            }

            .pricing-tier-copy {
                margin-bottom: 16px;
            }

            .pricing-period,
            .pricing-divider {
                margin-bottom: 16px;
            }

            .pricing-features {
                gap: 11px;
                margin-bottom: 20px;
            }

            .stats-grid {
                gap: 8px;
                padding: 10px;
            }

            .stat-item {
                padding: 16px 8px;
            }

            .cta-section {
                padding: 60px 12px 68px;
            }

            .cta-section .container {
                padding: 32px 16px 34px;
            }

            .plan-bubbles {
                gap: 8px;
            }

            .form-row {
                gap: 8px;
            }
        }

        @media (max-width: 360px) {
            .metrics-case-highlights__title,
            .metrics-case-highlight__label,
            .metrics-case-highlight__detail-label {
                letter-spacing: 0.05em;
            }

            .hero {
                padding: calc(var(--space-5xl) + var(--space-xs)) var(--space-xs) var(--space-2xl);
            }

            .hero h1 {
                font-size: clamp(2.04rem, 9.2vw, 2.42rem);
                line-height: 0.96;
                letter-spacing: -0.064em;
            }

            .hero-disclosure-band {
                margin-top: var(--space-md);
            }

            .cta-section {
                padding: 44px 10px 52px;
            }

            .cta-section .container {
                padding: 24px 12px 26px;
            }

            .footer-shell {
                padding: 14px 10px 12px;
            }

            .footer-base {
                gap: 8px;
            }
        }

        @media (max-width: 520px) {
            .metrics-case-highlights {
                margin-left: 8px;
                margin-right: 8px;
                padding: 10px 9px;
            }

            .metrics-case-highlight__main {
                align-items: flex-start;
                flex-wrap: wrap;
            }

            .metrics-case-highlight__metric strong {
                font-size: 11px;
            }

            .metrics-case-highlight__ticker {
                font-size: 13px;
            }

            .metrics-toggle-label {
                letter-spacing: 0.05em;
            }

            .metrics-sample-counts,
            .metrics-sample-chip,
            .metrics-sample-chip strong {
                font-size: 9px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
            }

            .hero h1,
            .hero-subtitle,
            .cta-primary,
            .info-container {
                opacity: 1 !important;
                transform: none !important;
            }

            .showcase-wrapper {
                overflow-x: auto;
                padding-bottom: 10px;
            }

            .showcase-wrapper::before,
            .showcase-wrapper::after,
            .showcase-track,
            .live-dot,
            .logo-dot,
            .info-trigger.blinking .info-circle {
                animation: none !important;
            }
        }