/* ==========================================
   RESET BÁSICO Y ESTILOS GENERALES
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', -apple-system, sans-serif;
    background-color: #000000; 
    color: #ffffff; 
    overflow-x: hidden !important;
}

/* ==========================================
   PALETA DEL REDISEÑO (blanco + verde)
   ========================================== */
:root {
    --verde: #1C4E2F;
    --verde-oscuro: #143B23;
    --verde-medio: #3E8B5C;
    --verde-vivo: #57C97E;
    --verde-suave: #6FBF8C;
    --tinta: #111111;
    /* El negro del sitio. Es el mismo COLORES[0] del shader de humo, o sea el
       fondo de la seccion 2; el footer lo reutiliza para que no se vea el
       escalon entre uno y otro. */
    --negro: #101010;
    --gris-texto: #5a5a5a;
    --gris-tenue: #8a8a8a;
}

/* ==========================================
   SECCIÓN 1: HERO CLARO (sin intro, sin Spline)
   ========================================== */
.hero {
    /* 📐 La unidad de la composición. La maqueta es de 1440x900, y todo lo
       grande de la portada (la marca, el personaje, los datos y los márgenes)
       se mide en esta unidad para que se vea igual en cualquier pantalla: es
       1vw, salvo cuando la pantalla es tan bajita que la cabeza chocaría con
       la píldora del menú. La cabeza llega a 52 unidades del suelo, y arriba
       tiene que quedar sitio para la píldora (fija a 20px, 48px de alto) y
       40px de aire: esos son los 6.75rem. Manda el alto casi siempre que la
       pantalla es más ancha que 16:9 (un monitor con la barra del navegador,
       una laptop de 1366x625).
       En celular no se usa: allí la portada se apila (ver el @media 900). */
    --hero-u: min(1vw, (100vh - 6.75rem) / 52);
    /* Si la pantalla es más alta que la maqueta (un iPad acostado, un monitor
       5:4), sobra alto. Todo va asentado abajo, así que ese sobrante caía
       entero arriba y dejaba la cabeza flotando a media pantalla. Esta es la
       mitad del sobrante: la figura y las dos columnas se suben eso, y el aire
       queda repartido. La maqueta mide 62.5 unidades de alto (900/14.4); en
       ella, y en cualquier pantalla más ancha, vale 0. */
    --hero-aire: max(0px, (100vh - var(--hero-u) * 62.5) / 2);
    /* El ancho del personaje. La marca, que cuelga de él, se mide en esta
       misma variable, en PC y en celular, y por eso las dos van siempre
       juntas. 51.7 unidades es lo que deja la coronilla a 52 del suelo, donde
       la tiene la maqueta. */
    --hero-fig: calc(var(--hero-u) * 51.7);
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* svh: en iPhone 100vh ignora la barra de Safari y la franja de
       plataformas caía por debajo del borde visible. */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    color: var(--tinta);
    overflow: hidden;
    z-index: 10;
}

/* --- Caja del hero ---------------------------------------------------------
   Blanco liso, como la sección 2: ya no hay tarjeta (ni borde, ni sombra, ni
   fondo de manchas). La caja solo reparte el contenido en las dos esquinas de
   abajo: la frase y el botón a la izquierda, los datos a la derecha. Es una
   fila con align-items: flex-end, así que las dos columnas se asientan en el
   suelo y todo el aire queda arriba. Es flex y no grid a propósito: el hero
   solo tiene min-height, y con eso las filas fr de un grid no reparten nada.
   Los márgenes van en --hero-u para que las esquinas queden donde la maqueta
   a cualquier tamaño: 52px de los lados y 56px del suelo a 1440. */
.hero-panel {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--hero-u) * 4);
    width: 100%;
    padding: 0 calc(var(--hero-u) * 3.6) calc(var(--hero-u) * 3.9 + var(--hero-aire));
}

/* --- Entrada escalonada de la portada -------------------------------------
   La píldora del menú, la marca, la frase y los botones entran en ola al
   cargar: bajan desde arriba, desenfocados, uno detrás de otro.

   Va como animation y NO como transition disparada por JS a propósito: la
   píldora ya entraba con @keyframes menu-in desde que el navegador aplica el
   CSS, y el hero esperando al DOMContentLoaded quedaba siempre un paso atrás
   (se veía la píldora entrar sola). Siendo las dos animaciones CSS arrancan
   en el mismo pintado y la ola se lee entera.

   El escalón sale de --n (el lugar de cada pieza en la fila), escrito inline
   en el HTML. La píldora no lleva --n: cae en 0 y abre la ola; por eso el
   hero empieza a contar desde 1.

   Mismos valores que menu-in: blur(10px), -20px y 520ms. Si tocas uno, tocá
   el otro. */
@keyframes hero-in {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

.hero [data-reveal] {
    animation: hero-in 520ms ease both;
    animation-delay: calc(var(--n, 0) * 110ms);
}

/* En index.html la ola arranca pausada hasta que llegan las fuentes (ver el
   script "LA OLA DE ENTRADA ESPERA A LAS FUENTES" en su <head>): el blur de
   hero-in no puede ir en el compositor, así que si las fuentes llegan a mitad
   de la ola, la página se remide entera en plena entrada y la ola da saltos.
   Pausada, cada pieza se queda en su primer fotograma (invisible: `both`).
   La niebla de las letras también espera, para seguir arrancando después de
   la ola. En legal.html la clase nunca se pone. */
html.ola-en-espera .menu,
html.ola-en-espera .hero [data-reveal],
html.ola-en-espera .hero-wordmark span,
html.ola-en-espera .hero-conteo .hero-dato-valor {
    animation-play-state: paused;
}

/* Con el movimiento reducido no hay ola: todo aparece ya puesto. (El relevo
   del botón se apaga en su propio bloque, al lado de sus reglas: este de aquí
   solo puede pisar lo declarado más arriba. La cinta que tuvo el hero estuvo
   en esta lista y por eso nunca se detuvo: su animation iba declarada
   después.) */
@media (prefers-reduced-motion: reduce) {
    .hero [data-reveal],
    .menu {
        animation: none;
    }
}

/* =========================================================================
   🫧 CRISTAL LÍQUIDO — la píldora del menú y el botón "Ver catálogo"
   =========================================================================
   Port del LiquidButton (React + Tailwind) que mandó el dueño; aquí no hay
   React ni Tailwind, así que es CSS puro. Tres piezas:
   - fondo transparente;
   - el borde de cristal, que son solo sombras (las mismas del componente):
     el anillo oscuro por dentro y un brillo blanco por fuera. Sobre fondo
     negro va la versión clara, que es la dark: del componente;
   - el backdrop-filter con el filtro SVG #container-glass (va al principio
     del <body> de index.html y legal.html), que ondula lo que queda detrás.
     Ese url() solo lo pinta Chromium; en Safari y Firefox queda el cristal
     sin ondas, que es lo mismo que se ve sobre un fondo blanco liso.
   Ojo: un filter, opacity < 1 o mask en un ANCESTRO corta el backdrop-filter.
   Las entradas (hero-in, menu-in) terminan en filter: none, así que al
   acabar la ola el cristal ya ve la página. */
:root {
    --cristal-borde: 0 0 6px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.08), inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.9), inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.85), inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.6), inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.6), inset 0 0 6px 6px rgba(0, 0, 0, 0.12), inset 0 0 2px 2px rgba(0, 0, 0, 0.06), 0 0 12px rgba(255, 255, 255, 0.15);
    --cristal-borde-claro: 0 0 8px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.08), inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.09), inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.85), inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.6), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.6), inset 0 0 6px 6px rgba(255, 255, 255, 0.12), inset 0 0 2px 2px rgba(255, 255, 255, 0.06), 0 0 12px rgba(0, 0, 0, 0.15);
}

.cristal-filtro {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* =========================================================================
   🟢 MENÚ PÍLDORA (.menu) — reemplaza a la navbar vieja
   =========================================================================
   Píldora fija arriba al centro. Cerrada muestra "Menú" + hamburguesa; en PC
   (> 900px), al abrirse se estira y un círculo baja desde arriba pintando el
   panel con los links. Todo es CSS: el JS solo pone/quita .is-open, el alto
   abierto y el tema de color. Hasta 900px la píldora no se estira: abre el
   panel lateral compartido con el catálogo (bloque PANEL LATERAL, abajo).

   Los 4 colores viven en variables y cambian según la sección que quede
   debajo de la píldora (data-theme, lo escribe el JS de cada página). Cambiar
   el tema no anima la custom property en sí, pero SÍ anima el
   background-color / color que la usa, que es lo que se ve.

     --menu-bg        fondo de la píldora cerrada
     --menu-fg        texto y hamburguesa sobre esa píldora
     --menu-panel     color del círculo que entra al abrir
     --menu-panel-fg  texto sobre el panel abierto

   Cada tema usa para el panel un color que NO usa su píldora, así el morph se
   nota. Los tres contrastan contra el fondo de su sección:
     claro  -> hero blanco y sección 4 blanca   (píldora verde,  panel negro)
     verde  -> fondos verdes                    (píldora blanca, panel negro)
     oscuro -> el portal ya destapado (que es humo NEGRO, no verde), el footer
               y legal.html                     (píldora blanca, panel blanco)

   La tipografía es Arial y no la Montserrat del resto del sitio: es la del
   diseño original de la píldora y la letra por letra del roll se lee mejor
   así. Va solo aquí dentro, el resto de la página no se toca.
   ========================================================================= */
.menu {
    --menu-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --menu-bg: transparent;
    --menu-fg: var(--tinta);
    --menu-cristal: var(--cristal-borde);
    --menu-boton: var(--tinta);
    --menu-boton-fg: #ffffff;
    --menu-panel: var(--tinta);
    --menu-panel-fg: #ffffff;
    /* Alto de la barra cerrada. Lo usan la píldora y el propio botón. */
    --menu-bar: 48px;
    font-family: Arial, Helvetica, sans-serif;
    position: fixed;
    top: 20px;
    left: 50%;
    /* Por encima de toda la página, pero DEBAJO del velo (9990) y del panel
       lateral (9999): con el panel abierto la píldora queda velada detrás,
       como la hamburguesa del catálogo, y no asomando nítida a su lado. */
    z-index: 9980;
    /* El contenedor no debe tapar clics de la página: solo la píldora los recibe. */
    pointer-events: none;
    animation: menu-in 520ms var(--menu-ease) both;
    animation-delay: calc(var(--n, 0) * 110ms);
}

/* Entrada: baja desenfocada, primer paso de la ola de la portada (ver
   @keyframes hero-in). Sin --n arranca en 0, así que la píldora abre la
   secuencia y el hero la sigue. */
@keyframes menu-in {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        filter: none;
        transform: translate(-50%, 0);
    }
}

/* Sobre blanco: píldora verde de marca con letras blancas, y al abrir el panel
   entra en negro. Antes era al revés (píldora negra, panel verde), pero el
   verde quedó reservado para el panel del tema oscuro y tener dos panel verdes
   hacía que el menú se viera igual en las dos mitades de la página. */
.menu[data-theme="claro"] {
    --menu-bg: transparent;
    --menu-fg: var(--tinta);
    --menu-cristal: var(--cristal-borde);
    --menu-boton: var(--tinta);
    --menu-boton-fg: #ffffff;
    --menu-panel: var(--tinta);
    --menu-panel-fg: #ffffff;
}

.menu[data-theme="verde"] {
    --menu-bg: transparent;
    --menu-fg: #ffffff;
    --menu-cristal: var(--cristal-borde-claro);
    --menu-boton: #ffffff;
    --menu-boton-fg: var(--verde);
    --menu-panel: var(--tinta);
    --menu-panel-fg: #ffffff;
}

/* Sobre negro no puede entrar ninguno de los dos en negro, o desaparece contra
   el fondo: al abrir el panel entra en BLANCO con letras negras (21 septiembre
   2026, a pedido del dueño; antes era el verde de marca). Es el espejo del
   tema claro, que es lo que hace que cruzar el portal se sienta como darle la
   vuelta a la página. */
.menu[data-theme="oscuro"] {
    --menu-bg: transparent;
    --menu-fg: #ffffff;
    --menu-cristal: var(--cristal-borde-claro);
    --menu-boton: #ffffff;
    --menu-boton-fg: var(--tinta);
    --menu-panel: #ffffff;
    --menu-panel-fg: var(--tinta);
}

.menu__shell {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 156px;
    height: var(--menu-bar);
    overflow: hidden;
    border-radius: 999px;
    background: var(--menu-bg);
    /* Cristal líquido (ver arriba). Abierto, el círculo del panel tapa las
       sombras de dentro y queda el panel liso de siempre. */
    box-shadow: var(--menu-cristal);
    -webkit-backdrop-filter: url('#container-glass');
    backdrop-filter: url('#container-glass');
    pointer-events: auto;
    transition:
        width 800ms var(--menu-ease),
        height 800ms var(--menu-ease),
        border-radius 800ms var(--menu-ease),
        transform 250ms var(--menu-ease),
        background-color 400ms ease,
        box-shadow 400ms ease;
}

.menu:not(.is-open) .menu__shell:hover {
    transform: scale(1.05);
}

.menu.is-open .menu__shell {
    width: 280px;
    border-radius: 30px;
}

/* El círculo mide 200% del alto de la píldora y cae desde arriba. Cerrado su
   borde inferior queda justo en el tope (top: -200% = invisible); abierto baja
   hasta -20% y cubre todo el panel. */
.menu__circle {
    position: absolute;
    top: -200%;
    left: 50%;
    z-index: 0;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background: var(--menu-panel);
    transform: translateX(-50%);
    transition: top 800ms var(--menu-ease), background-color 400ms ease;
}

.menu.is-open .menu__circle {
    top: -20%;
    transition-delay: 100ms, 0ms;
}

.menu__bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 100%;
    height: var(--menu-bar);
    /* Menos aire a la derecha: ahí el círculo hace de tope, como en .btn-hero. */
    padding: 0 7px 0 20px;
    border: 0;
    /* Hereda el radio de la píldora para que el anillo de foco salga redondo
       y no un rectángulo asomando por los costados. */
    border-radius: inherit;
    background: none;
    color: var(--menu-fg);
    /* Los <button> no heredan la fuente: hay que pedírsela a .menu a mano. */
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    cursor: pointer;
    transition: color 300ms ease, padding 800ms var(--menu-ease);
}

.menu.is-open .menu__bar {
    padding: 0 24px;
    color: var(--menu-panel-fg);
}

.menu__bar:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -5px;
}

/* 🔁 EL RELEVO DE LA PÍLDORA — el mismo efecto que "Ver catálogo" (.btn-hero).
   Cerrada, al pasar el cursor nada se mueve de sitio: la palabra sube y una
   copia idéntica entra por abajo, y la hamburguesa se va por la derecha dentro
   de su círculo mientras otra entra por la izquierda (en horizontal y no en
   diagonal como la flecha: unas rayas en diagonal se leían torcidas). Las dos
   copias están siempre en el marcado y cada caja las recorta con overflow.
   Abierta no hay relevo (el hover va con :not(.is-open)): la primera copia
   vuelve a su sitio y sus rayas giran a la X de siempre. */
.menu__label {
    display: grid;
    overflow: hidden;
    /* Alta como su propia línea, para que el relevo no corte la tilde. */
    line-height: 1.45;
}

.menu__copia {
    grid-area: 1 / 1;
    transition: transform 460ms var(--menu-ease);
}

.menu__copia + .menu__copia { transform: translateY(100%); }

.menu:not(.is-open) .menu__bar:hover .menu__copia { transform: translateY(-100%); }
.menu:not(.is-open) .menu__bar:hover .menu__copia + .menu__copia { transform: translateY(0); }

/* El círculo: negro con rayas blancas sobre fondo claro, blanco con rayas
   negras sobre el negro del portal (--menu-boton). Abierto se vuelve
   transparente y la X queda sobre el panel como antes. */
.menu__icon {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--menu-boton);
    color: var(--menu-boton-fg);
    overflow: hidden;
    transition: background-color 400ms ease, color 300ms ease;
}

.menu.is-open .menu__icon {
    background: transparent;
    color: inherit;
}

.menu__lineas {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transition: transform 460ms var(--menu-ease);
}

/* 140% como la flecha: con 100% justo asoma la punta de las rayas. */
.menu__lineas--entra { transform: translateX(-140%); }

.menu:not(.is-open) .menu__bar:hover .menu__lineas { transform: translateX(140%); }
.menu:not(.is-open) .menu__bar:hover .menu__lineas--entra { transform: translateX(0); }

.menu__icon i {
    position: absolute;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 400ms var(--menu-ease), background-color 300ms ease;
}

.menu__icon i:first-child { transform: translateY(-3px); }
.menu__icon i:last-child  { transform: translateY(3px); }

.menu.is-open .menu__icon i:first-child { transform: rotate(45deg); }
.menu.is-open .menu__icon i:last-child  { transform: rotate(-45deg); }

/* Grid de una sola columna en vez de flex: así la columna mide lo que el ítem
   más ancho ("Catálogo") y TODOS los links quedan del mismo ancho. Con eso los
   iconos caen alineados en una misma vertical, y el bloque entero sigue
   centrado dentro del panel. */
.menu__items {
    position: relative;
    z-index: 1;
    display: grid;
    justify-content: center;
    justify-items: start;
    flex-shrink: 0;
    gap: 16px;
    margin: 0;
    padding: 4px 24px 26px;
    list-style: none;
    visibility: hidden;
    transition: visibility 0s linear 400ms;
}

.menu.is-open .menu__items {
    visibility: visible;
    transition-delay: 0s;
}

/* Cada link entra escalonado detrás del círculo (--i lo pone el JS). */
.menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--menu-panel-fg);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0;
    transition: opacity 400ms ease, color 300ms ease;
}

/* Icono a la izquierda del texto. Ancho fijo (no 1em) para que no cambie de
   tamaño si algún día se toca el font-size del link, y para que los tres
   ocupen exactamente lo mismo.

   La caja es el equivalente de un .menu__char: recorta la columna de dos
   copias del SVG que arma el JS, y el roll la sube en el hover. El --c lo pone
   el JS en 0, así el icono abre la ola. */
.menu__ico {
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    overflow: hidden;
}

/* Cada copia ocupa la celda entera: la columna mide 44px y el -50% del roll
   deja la segunda copia exactamente donde estaba la primera. */
.menu__ico .menu__roll > span {
    display: grid;
    height: 22px;
    place-items: center;
}

.menu__ico svg {
    width: 100%;
    height: 100%;
}

/* El recorte del roll vive acá, no en el link: si estuviera en el link, el
   height: 1em cortaría el icono. */
.menu__text {
    display: flex;
    height: 1em;
    overflow: hidden;
}

.menu.is-open .menu__item {
    opacity: 1;
    transition-delay: calc(360ms + var(--i, 0) * 80ms), 0s;
}

/* Roll del hover: cada letra es una columna con la letra duplicada, y al pasar
   el mouse la columna sube 50% con un retardo por letra. Al salir vuelve de
   golpe (transition 0ms) en vez de desandar la animación; el JS retiene la
   salida hasta que el roll termina para que no corte a mitad. */
.menu__char {
    display: block;
    height: 1em;
    overflow: hidden;
}

.menu__roll {
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 0ms;
}

.menu__roll span {
    display: block;
    height: 1em;
    line-height: 1em;
}

.menu__item.is-rolling .menu__roll {
    transform: translateY(-50%);
    transition: transform 800ms var(--menu-ease);
    transition-delay: calc(var(--c, 0) * 30ms);
}

.menu__space {
    display: block;
    width: 0.3em;
}

/* -------------------------------------------------------------------------
   📱 PÍLDORA EN CELULAR (hasta 640px)
   -------------------------------------------------------------------------
   Cerrada, la píldora deja el centro (ahí cae la isla dinámica del iPhone),
   se ancla arriba a la derecha y se acorta. Entre 641 y 900 se queda al
   centro, como en PC. En las dos franjas, tocarla ya no la estira: abre el
   panel lateral (bloque PANEL LATERAL, abajo).

   Hasta el 23 septiembre 2026 aquí la píldora MORFABA al panel: .menu ocupaba
   la pantalla entera y al abrir se animaban ancho, alto, margen y radio de
   .menu__shell, con el filtro del cristal encima. En el celular del dueño iba
   "trabadísimo", y su cliente pidió además un solo menú en todo el sitio, así
   que ahora es el panel del catálogo, que solo se desliza (transform).
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .menu {
        --menu-bar: 44px;
        top: 16px;
        left: auto;
        right: 16px;
        animation-name: menu-in-movil;
    }

    /* Igual que menu-in pero sin el -50%: acá la píldora ya no está centrada. */
    @keyframes menu-in-movil {
        from {
            opacity: 0;
            filter: blur(10px);
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            filter: none;
            transform: none;
        }
    }

    .menu__shell {
        width: 108px;
    }

    .menu__bar {
        justify-content: center;
        gap: 8px;
        padding: 0 6px 0 14px;
        font-size: 0.88rem;
    }

    .menu__icon {
        width: 32px;
        height: 32px;
    }
}

/* =========================================================================
   🚪 PANEL LATERAL (.sidebar-catalog) — el menú de celular de TODO el sitio
   =========================================================================
   Hasta 900px, index.html y legal.html abren con la píldora este mismo panel
   que catalogo.html abre con su hamburguesa (23 septiembre 2026: el cliente
   del dueño pidió una sola barra y una sola animación en todo el sitio). Las
   reglas viven aquí y no en catalogo.css para que las tres páginas usen
   exactamente las mismas; catalogo.html carga style.css antes que su CSS. El
   nombre .sidebar-* se quedó el del catálogo aunque ya no sea solo suyo.

   Diferencias entre páginas, y nada más:
     - Lado: en el catálogo sale por la IZQUIERDA (la hamburguesa está a la
       izquierda); en index y legal por la DERECHA (.sidebar-catalog--derecha,
       la píldora queda a la derecha en celular).
     - Color: en el catálogo siempre blanco. En index y legal cambia con la
       sección que queda bajo la píldora (menu.js le copia el data-theme de
       .menu al abrir), con la regla de siempre: el panel nunca del color del
       fondo de atrás. Claro y verde -> panel negro; oscuro -> panel blanco.

   Solo anima transform (el compositor lo mueve sin layout ni repintado) y no
   lleva el filtro del cristal líquido.
   ========================================================================= */

/* Velo detrás del panel. Sin clics mientras está apagado. */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), visibility 500ms;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 🚪 EL PANEL: de alto completo, redondeado a 26px del lado de adentro, con
   Arial como la píldora. --sidebar-fondo / --sidebar-tinta son el blanco y el
   #111 del catálogo; los temas de abajo los cambian en index y legal. */
.sidebar-catalog {
    --menu-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sidebar-fondo: #ffffff;
    --sidebar-tinta: #111111;
    position: fixed;
    top: 0;
    left: 0;
    width: min(82vw, 380px);
    height: 100vh;
    height: 100svh;
    background: var(--sidebar-fondo);
    border-radius: 0 26px 26px 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--sidebar-tinta);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 800ms var(--menu-ease), visibility 0s linear 800ms;
}

/* Del lado derecho (index y legal). Va después de la base para ganarle con
   la misma especificidad; .active (dos clases) le sigue ganando a las dos. */
.sidebar-catalog--derecha {
    left: auto;
    right: 0;
    border-radius: 26px 0 0 26px;
    transform: translateX(100%);
}

.sidebar-catalog.active {
    transform: none;
    visibility: visible;
    transition: transform 800ms var(--menu-ease), visibility 0s;
}

/* Colores según la sección, los mismos del panel de la píldora en PC. */
.sidebar-catalog[data-theme="claro"],
.sidebar-catalog[data-theme="verde"] {
    --sidebar-fondo: var(--tinta);
    --sidebar-tinta: #ffffff;
}

.sidebar-catalog[data-theme="oscuro"] {
    --sidebar-fondo: #ffffff;
    --sidebar-tinta: var(--tinta);
}

/* La barra de arriba: "Menú" a la izquierda y la X a la derecha, en los
   44px de alto y 22px de lado de la píldora de celular. */
.sidebar-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 44px;
    padding: 0 22px;
    font-size: 0.88rem;
    font-weight: 700;
}

.sidebar-close-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: -6px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--sidebar-tinta);
    cursor: pointer;
}

.sidebar-close-btn svg {
    width: 20px;
    height: 20px;
}

/* Los links aparecen después del panel, uno tras otro (--i va en cada <li>). */
.sidebar-links {
    list-style: none;
    display: grid;
    align-content: start;
    gap: 22px;
    margin: 0;
    padding: 30px 26px 34px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar-links li {
    opacity: 0;
    transition: opacity 400ms ease;
}

.sidebar-catalog.active .sidebar-links li {
    opacity: 1;
    transition-delay: calc(360ms + var(--i, 0) * 80ms);
}

.sidebar-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sidebar-tinta);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}

.sidebar-ico {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

/* Con el panel de index/legal abierto la página de atrás no scrollea (el
   catálogo usa su propio body.no-scroll). */
body.menu-abierto {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-catalog,
    .sidebar-catalog.active,
    .sidebar-links li,
    .sidebar-overlay {
        transition-duration: 1ms;
        transition-delay: 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu {
        animation: none;
    }

    .menu__shell,
    .menu__circle,
    .menu__bar,
    .menu__icon,
    .menu__icon i,
    .menu__copia,
    .menu__lineas,
    .menu__item {
        transition-duration: 1ms;
    }

    .menu.is-open .menu__item {
        transition-delay: 0s;
    }

    .menu__item.is-rolling .menu__roll {
        transition: none;
        transform: none;
    }
}

/* --- Rejilla interna: la columna de texto, por encima del personaje ---
   z-index 2 contra el 1 de .hero-figura: si en alguna pantalla se tocan, el
   texto queda encima y se sigue leyendo. */
.hero-inner {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* Arriba deja pasar la píldora, que va fija a 20px y mide 48px de alto.
       Los lados y el fondo los pone .hero-panel. */
    padding-top: 4.5rem;
}

.acento-verde { color: var(--verde); }
.acento-verde-claro { color: var(--verde-suave); }

/* Línea "● ── TIENDA DE CUENTAS" (se reutiliza en la sección 2) */
.destacada-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
}

.eyebrow-punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tinta);
    flex-shrink: 0;
}

.eyebrow-linea {
    width: 56px;
    height: 2px;
    background: var(--tinta);
    flex-shrink: 0;
}

.eyebrow-texto {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 5px;
    text-transform: uppercase;
}

/* --- 🧍 EL PERSONAJE -------------------------------------------------------
   Al centro y apoyado en el suelo, como en la maqueta. Lo que va centrado es
   la CABEZA y no la caja: en la imagen la cabeza cae al 53.4% del ancho, y así
   queda justo debajo de la píldora del menú. Va por debajo de las dos
   columnas de texto (z-index 1 contra el 2 de .hero-inner).
   El desvanecido de abajo es un mask-image, calcado de la maqueta: entero
   hasta el 73% del alto y perdido del todo al 97.5%. Es lo que esconde que la
   imagen viene cortada por abajo. */
.hero-figura {
    position: absolute;
    left: calc(50% - var(--hero-fig) * 0.534);
    bottom: var(--hero-aire);
    z-index: 1;
    width: var(--hero-fig);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.hero-figura-img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 73%, rgba(0, 0, 0, 0.84) 78.5%, rgba(0, 0, 0, 0.56) 85.3%, rgba(0, 0, 0, 0.18) 92%, transparent 97.5%);
    mask-image: linear-gradient(to bottom, #000 73%, rgba(0, 0, 0, 0.84) 78.5%, rgba(0, 0, 0, 0.56) 85.3%, rgba(0, 0, 0, 0.18) 92%, transparent 97.5%);
}

/* --- 🌫️ EL PERSONAJE, EN EL GRIS DE MARCA DE AGUA ---------------------------
   El 20 de septiembre de 2026 se invirtieron los colores del hero: el humo se
   pasó a las letras de la marca y el personaje quedó en el gris que tenían
   ellas. La imagen (.hero-figura-img) sigue ahí solo para dar la forma y el
   alto de la caja, invisible; lo que se ve es esta capa, un gris liso
   recortado con DOS máscaras a la vez: la silueta (el alfa de la imagen) y el
   mismo desvanecido de abajo.
   El gris es OPACO: #f2f2f2 es lo que da rgba(17, 17, 17, 0.055) sobre el
   blanco del hero, así que se ve igual que la marca de agua de antes, pero
   tapa de verdad la "E" de ANXIE que queda detrás de la cabeza. */
.hero-figura-img {
    visibility: hidden;
}

.hero-figura-humo {
    position: absolute;
    inset: 0;
    background: #f2f2f2;
    -webkit-mask-image: url('assets/hero-personaje-humo-700.webp'), linear-gradient(to bottom, #000 73%, rgba(0, 0, 0, 0.84) 78.5%, rgba(0, 0, 0, 0.56) 85.3%, rgba(0, 0, 0, 0.18) 92%, transparent 97.5%);
    mask-image: url('assets/hero-personaje-humo-700.webp'), linear-gradient(to bottom, #000 73%, rgba(0, 0, 0, 0.84) 78.5%, rgba(0, 0, 0, 0.56) 85.3%, rgba(0, 0, 0, 0.18) 92%, transparent 97.5%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* --- 👑 LA MARCA, ENCIMA DE LA CABEZA --------------------------------------
   "ANXIE STORE" en una sola línea, con el espacio normal entre las palabras,
   centrada sobre la cabeza y ENCIMA del personaje (20 de septiembre de 2026,
   de la maqueta del dueño). Antes iba detrás, primero con la cabeza tapando la
   "E" y luego abierta en dos a los lados de la cabeza.

   Cuelga de .hero-figura: se mide en el ancho del personaje (--hero-fig), así
   que queda SIEMPRE a la altura de la cabeza, en PC y en celular. El z-index
   1 la sube por encima de la silueta sin sacarla de la figura (la figura es
   contexto de apilado: position + z-index 1, por debajo de .hero-inner).

   Centrada sobre la CABEZA, no sobre la caja: la cabeza cae al 53.4% del
   ancho. El <h1> mide el doble de la figura y arranca en el −46.6%, así que su
   centro cae justo ahí, y el flex centra las palabras sin depender de cuánto
   mida cada una con la fuente que toque (no se puede centrar con transform:
   el <h1> ya usa el suyo en la entrada, hero-in). La marca entera mide unas
   1.75 veces el personaje.

   Tamaño y altura salen de la última maqueta del dueño: la letra es el 28.5%
   del ancho (antes 22.32%) y las mayúsculas arrancan al 33% (antes al 16.8%),
   a la altura de la barbilla (el dueño la pidió más abajo que la maqueta).

   La interlínea de 0.68 hace que la caja
   empiece justo en el tope de las mayúsculas (en Plus Jakarta Sans: 2 × 0.75
   de mayúscula − 1.04 de ascendente + 0.22 de descendente), así que el top
   es directamente la altura de la letra. */
.hero-wordmark {
    position: absolute;
    top: calc(var(--hero-fig) * 0.33);
    left: -46.6%;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 0.25em;
    width: 200%;
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: calc(var(--hero-fig) * 0.285);
    line-height: 0.68;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #1a1a1a;
}

/* "TIENDA DE CUENTAS" encima de la marca: solo existe en celular (ver el
   @media 900). En PC la maqueta no lo lleva. */
.hero-antetitulo { display: none; }

/* Cada palabra lleva 0.12em de relleno por los cuatro lados, devuelto con un
   margen negativo igual para que la letra no se mueva: el humo se recorta con
   background-clip: text, que solo pinta dentro de la caja, y con la
   interlínea de 0.68 la caja cortaba lo que la O y la S sobresalen por
   arriba y por abajo de las demás mayúsculas. */
.hero-wordmark span {
    padding: 0.12em;
    margin: -0.12em;
}

/* 🌫️ EL HUMO DE LA MARCA
   Las letras van rellenas de humo con background-clip: text, como pedía la
   nota del shader: nada de canvas ni blend modes (eso trababa la entrada con
   blur). Tres fondos por palabra: abajo el humo quieto (assets/marca-humo.webp,
   negro y grises como el portal) y encima las dos nieblas que antes se
   paseaban dentro del personaje, que aquí se mueven con background-position.
   El relleno va en los <span> y no en el <h1> porque el <h1> ya usa su
   animation para la entrada (hero-in). Sin background-clip: text se queda el
   color liso de arriba. Las nieblas arrancan quietas hasta que termina la
   entrada (el retraso de 0.9s).

   Encima de todo va el GRANO (--humo-grano, 22 septiembre 2026, a pedido
   del dueño): el humo de la corona lleva un ruido blanco por píxel en su
   shader (grain: 0.063 en crearHumo()), y sin él las letras se veían
   planas al lado. Es un mosaico de 160px de ruido fractal en SVG, gris que
   se aclara y oscurece alrededor del medio, al 10% de opacidad. Va quieto:
   el primer valor de cada paso de marca-niebla es el suyo y no cambia.
   En index.html un script lo dibuja UNA vez en un canvas, a la densidad de
   la pantalla, y cambia esta variable por esa imagen (23 de septiembre de
   2026): como SVG con filtro, el navegador recalculaba el ruido en cada
   fotograma de la niebla, y eso era lo más caro de toda la animación. La
   imagen sale igual (máximo 1 nivel de 255 de diferencia, medido en Chrome y
   WebKit a 1x, 2x, 2.625x y 3x). Este SVG sigue siendo el original: si lo
   cambias, el script copia el nuevo solo. */
:root {
    --humo-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.5 0 0 0 -0.75 2.5 0 0 0 -0.75 2.5 0 0 0 -0.75 0 0 0 0 0.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-wordmark span {
        color: transparent;
        background-image: var(--humo-grano), url('assets/humo-niebla-a.webp'), url('assets/humo-niebla-b.webp'), url('assets/marca-humo.webp');
        background-size: 160px 160px, 3.2em auto, 4.4em auto, cover;
        background-repeat: repeat, repeat, repeat, no-repeat;
        background-position: 0 0, 0 -0.6em, 1.5em -1.2em, center;
        -webkit-background-clip: text;
        background-clip: text;
        animation: marca-niebla 24s ease-in-out 0.9s infinite alternate;
    }

    .hero-wordmark span + span {
        animation-duration: 31s;
        animation-direction: alternate-reverse;
    }
}

@keyframes marca-niebla {
    0%   { background-position: 0 0, 0 -0.6em, 1.5em -1.2em, center; }
    50%  { background-position: 0 0, 1.4em -0.9em, 0.2em -0.7em, center; }
    100% { background-position: 0 0, 2.6em -0.4em, -1.3em -1.1em, center; }
}

/* Con el hero fuera de la vista la niebla se para (23 de septiembre de 2026).
   Mover el fondo obliga a repintar las letras en cada fotograma, y Chrome lo
   seguía haciendo con el hero ya arriba, fuera de pantalla, mientras el
   visitante bajaba por el portal: trabajo que no ve nadie, peleándole el
   fotograma a la corona y al humo. La clase la pone el JS de index.html
   (un IntersectionObserver sobre el .hero). Al volver sigue desde donde se
   quedó, que es lo mismo que no haberse parado. Vale también para el
   "11 Cuentas" de celular, que lleva la misma niebla. */
.hero.hero--fuera .hero-wordmark span,
.hero.hero--fuera .hero-conteo .hero-dato-valor {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .hero-wordmark span,
    .hero-wordmark span + span {
        animation: none;
    }
}

/* 📝 ABAJO A LA IZQUIERDA: FRASE + BOTÓN */
.hero-pie {
    position: relative;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--hero-u) * 1.9);
    text-align: left;
}

/* 🔢 EL CONTEO: "11 Cuentas / EN EL CATÁLOGO", en vivo desde Supabase.
   Reemplazó a la frase de la maqueta (20 de septiembre de 2026). Usa las
   mismas clases que los datos de la derecha (.hero-dato-valor y
   .hero-dato-etiqueta), así que mide y se ve igual que "2 años" en PC y en
   celular; aquí solo va alineado a la izquierda, en negro, y con la misma
   raya fina debajo, que lo separa del botón. */
.hero-conteo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--hero-u) * 0.25);
    color: #000000;
    white-space: nowrap;
}

.hero-conteo::after {
    content: '';
    width: calc(var(--hero-u) * 8.4);
    height: 1px;
    margin-top: calc(var(--hero-u) * 1.37);
    background: rgba(17, 17, 17, 0.16);
}

/* 📊 ABAJO A LA DERECHA: LOS DATOS DE CONFIANZA
   Uno encima del otro, pegados al filo derecho y separados por una raya fina.
   El número va con la letra de la marca (Plus Jakarta Sans 800, el mismo
   tracking) y en negro; la etiqueta, chiquita, espaciada y en gris. Todo en
   --hero-u, como en la maqueta: a 1440 el número mide 58px y la columna
   termina en el mismo suelo que el botón. */
.hero-datos {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
    color: #000000;
}

.hero-dato {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--hero-u) * 0.25);
}

/* La raya entre los dos, más corta que los números. En la maqueta hay 1.5
   unidades de la línea base de la etiqueta a la raya y 2 de la raya al tope
   del número; los márgenes son eso menos lo que cada caja de texto sobra por
   encima y por debajo de la letra (y, abajo, menos el gap del .hero-dato,
   que también cae entre la raya y el número). */
.hero-dato + .hero-dato::before {
    content: '';
    width: calc(var(--hero-u) * 8.4);
    height: 1px;
    margin: calc(var(--hero-u) * 1.37) 0 calc(var(--hero-u) * 1.11);
    background: rgba(17, 17, 17, 0.16);
}

.hero-dato-valor {
    font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: calc(var(--hero-u) * 4);
    line-height: 1;
    letter-spacing: -0.045em;
}

.hero-dato-etiqueta {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: max(0.62rem, calc(var(--hero-u) * 0.91));
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris-tenue);
}

.hero-botones {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

/* 🟢 EL BOTÓN DEL HERO — píldora de cristal con la flecha en un círculo negro.
   Al pasar el cursor nada se mueve de sitio: lo que hay dentro se RELEVA. El
   texto sube y una copia idéntica entra por abajo; la flecha se va en diagonal
   hacia arriba a la derecha y otra entra desde abajo a la izquierda. Las dos
   copias existen siempre en el marcado y cada caja las recorta con overflow,
   así que no hay JS ni se reflowea nada: solo dos transforms.
   El ancho del botón no cambia en hover a propósito — si creciera, el relevo
   se leería como un salto. */
.btn-hero {
    --btn-hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    height: 66px;
    /* Menos aire a la derecha: ahí el círculo hace de tope. */
    padding: 0 8px 0 40px;
    border-radius: 999px;
    /* Cristal líquido, como la píldora del menú (ver CRISTAL LÍQUIDO). */
    background: transparent;
    box-shadow: var(--cristal-borde);
    -webkit-backdrop-filter: url('#container-glass');
    backdrop-filter: url('#container-glass');
    color: var(--tinta);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 300ms ease;
}

/* El cristal crece un 5% en hover, como el componente original. Es un
   transform, no un cambio de ancho: no reflowea nada y el relevo de dentro
   sigue igual. */
.btn-hero:hover { transform: scale(1.05); }

.btn-hero:active { transform: scale(0.97); }

/* La ventanita del texto: alta como su propia línea, para que el relevo no
   corte las tildes ni las colas de la "g". */
.btn-hero-rodillo {
    display: grid;
    overflow: hidden;
    line-height: 1.45;
}

.btn-hero-copia {
    grid-area: 1 / 1;
    transition: transform 460ms var(--btn-hero-ease);
}

/* La de repuesto espera fuera de cuadro, justo debajo. */
.btn-hero-copia + .btn-hero-copia { transform: translateY(100%); }

.btn-hero:hover .btn-hero-copia { transform: translateY(-100%); }
.btn-hero:hover .btn-hero-copia + .btn-hero-copia { transform: translateY(0); }

/* El círculo negro: la otra ventanita, esta redonda. */
.btn-hero-circulo {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* Negro con la flecha blanca: sobre el cristal, un círculo blanco se
       perdía contra el fondo blanco del hero. */
    background: var(--tinta);
    color: #ffffff;
    overflow: hidden;
}

.btn-hero-flecha {
    grid-area: 1 / 1;
    width: 20px;
    height: 20px;
    transition: transform 460ms var(--btn-hero-ease);
}

/* 140% y no 100%: en diagonal la esquina de la flecha asoma más tiempo, y con
   100% justo se le ve la punta pegada al borde del círculo. */
.btn-hero-flecha--entra { transform: translate(-140%, 140%); }

.btn-hero:hover .btn-hero-flecha { transform: translate(140%, -140%); }
.btn-hero:hover .btn-hero-flecha--entra { transform: translate(0, 0); }

/* Sin relevo con el movimiento reducido: el cambio es instantáneo. Va aquí y
   no en el bloque de arriba porque a igual especificidad manda el que va
   después, y las reglas del botón son estas. */
@media (prefers-reduced-motion: reduce) {
    .btn-hero,
    .btn-hero-copia,
    .btn-hero-flecha {
        transition: none;
    }
}

/* 🟢 BOTÓN DE CONTORNO VERDE (Discord) */
.btn-discord-linea {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 50px;
    border: 1.5px solid var(--verde);
    color: var(--verde);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.93rem;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.btn-discord-linea svg { stroke: currentColor; }

.btn-discord-linea:hover {
    background: var(--verde);
    color: #ffffff;
    transform: translateY(-2px);
}

/* 🟢 BOTÓN PÍLDORA VERDE SÓLIDO (se reutiliza en la sección 2) */
.btn-verde-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 50px;
    background: var(--verde);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.93rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(28, 78, 47, 0.28);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-verde-pill:hover {
    background: var(--verde-oscuro);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(28, 78, 47, 0.38);
}

.btn-verde-pill-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--verde);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.35s ease;
}

.btn-verde-pill:hover .btn-verde-pill-icono { transform: translateX(3px); }

/* ==========================================
   👑 SECCIÓN 2: PORTAL DE LA CORONA
   ==========================================
   Solo la transición, sin contenido dentro. El wrapper mide varias pantallas,
   la capa de dentro se queda pegada (sticky) y la silueta de
   assets/corona-silueta.svg se usa como máscara CSS sobre un lienzo de verde
   plano: al scrollear crece su mask-size hasta que el verde se come la
   pantalla entera. Sin librerías: el tamaño lo escribe el JS de index.html en
   la variable --corona-tam.

   La cuenta destacada vive aquí dentro, pero SUELTA por encima de la máscara,
   no enmascarada. La versión vieja sí iba dentro de la máscara y había que
   medir en JS el hueco que dejaba la maqueta para que la corona en reposo no
   pisara la tarjeta; eso se rompía con cada cambio de layout. Ésta no mide
   nada: aparece cuando la corona ya tapó la pantalla, o sea cuando detrás solo
   hay negro, y entonces da igual dónde esté la silueta.

   Orden de capas dentro de .corona-pin:
     fondo blanco (lo que tapa)  ->  marca de agua (z 1)
     ->  esquinas "bajas" (z 2)  ->  cierre verde (z 3)
     ->  .corona-mask con el lienzo verde (z 4)
     ->  la cuenta destacada (z 5)  ->  pista de scroll (z 6)

   El portal va en DOS ACTOS, y el reparto lo hace pintarCorona() en
   index.html; aquí solo se escribe cuánto scroll hay para repartir:
     1. DESTAPADO (2.6 pantallas) — la corona crece hasta tragarse todo, y por
        el camino va apagando el humo que enseña: cuando cierra la pantalla,
        detrás ya solo hay negro.
     2. REPOSO    (1.5 pantallas) — el negro se sostiene con la cuenta
        destacada encima, que entra sola en ola escalonada.
   Si cambias la altura de abajo, cambia también los números de tramosPortal()
   en index.html: son las dos mitades de la misma cuenta. */

.corona-portal {
    position: relative;
    width: 100%;
    /* 610vh de wrapper = 510vh de scroll con la capa pineada, repartidos en
       2.6 destapado + 1.5 reposo + 1 de SOLAPE (los dos actos y el tramo en que
       la sección 4 sube por encima), más la pantalla que ocupa el pin. El
       destapado conserva sus 260vh exactos, que son el recorrido de la maqueta
       de referencia; el apagado del humo no pide scroll propio porque va montado
       encima de él. El reposo son 1.5 pantallas para leer la cuenta destacada.
       OJO: la pantalla de solape NO alarga la página, porque la sección 4 se
       sube con margin-top: -100vh y se come justo esa pantalla. Si tocas este
       número, toca el margen negativo igual. */
    height: 610vh;
    /* Este fondo no se ve nunca: el pin mide 100lvh, que siempre es al menos
       lo que mide la pantalla, así que lo tapa entero en todo momento (ver
       .corona-pin). Hasta el 23/09/2026 asomaba en celular una franja de él
       debajo del pin, y se pintaba de negro para disimularla; ya no hace falta. */
    background-color: #ffffff;

    /* El negro al que se apaga el humo. Es el --negro de la paleta, que sale del
       propio shader (COLORES[0] en index.html), así que el anillo se apaga hacia
       su propio negro y no hacia uno ajeno que se notaría como un corte. */
    --corona-negro: var(--negro);

    z-index: 11;
}

.corona-pin {
    position: sticky;
    top: 0;
    width: 100%;
    /* lvh (23 de septiembre de 2026): el alto de la pantalla GRANDE, la que
       queda con la barra del navegador escondida. En celular la barra se
       esconde al bajar y la pantalla crece (~56px en Chrome de Android; ~85px
       en Chrome 135+ con la franja de gestos, más en Safari). lvh NO cambia
       cuando la barra se mueve y nunca es menor que la pantalla, así que
       debajo del pin no puede asomar nada y nada se recoloca. Con la barra
       puesta, los ~85px de abajo quedan bajo el borde, como en cualquier
       página: lo pegado abajo (esquinas, "scroll", el botón del reposo) se
       mide contra el pin entero, igual que en PC. El JS mide lo mismo:
       altoViewport() en index.html lee una sonda de 100lvh.
       Historia: primero 100svh (el alto CON barra): al irse la barra el pin
       se quedaba corto y asomaba el blanco del portal. Luego 100dvh (commit
       672bdc1), que sigue a la barra, pero TARDE: Chrome lo actualiza con
       retraso y espera a que acabe el gesto, así que mientras tanto seguía el
       hueco (tapado de negro con un parche) y al enterarse todo brincaba
       ~85px. En PC no hay barra: lvh = vh, y el pin no cambia.
       Fuentes: MDN <length> (vh equivale a lvh; dvh redimensiona mientras se
       hace scroll), web.dev/blog/viewport-units, developer.chrome.com/blog/
       url-bar-resizing y developer.chrome.com/docs/css-ui/edge-to-edge. */
    height: 100vh;
    height: 100lvh;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rótulo tenue detrás de la corona: "CUENTAS DESTACADAS". Va en z-index 1, o
   sea DEBAJO de .corona-mask (z 4): la corona lo tapa, que es justo lo que se
   quiere. Es el único texto que hay en la sección; dentro de la máscara no hay
   nada escrito.

   En PC va en UNA sola línea (nowrap) y por eso el tamaño es bastante menor que
   el del logotipo que había antes: son 18 caracteres de ancho, así que el vw
   está calculado para que quepan de borde a borde sin partirse. Si cambias el
   texto, recalcula ese 7.6vw o se saldrá de la pantalla. */
.corona-watermark {
    position: absolute;
    z-index: 1;
    font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 7.6vw, 9rem);
    line-height: 0.86;
    letter-spacing: -0.045em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(17, 17, 17, 0.055);
    user-select: none;
    pointer-events: none;
}

/* La capa enmascarada. Dentro solo hay verde plano: lo único que se ve de él
   es lo que cae dentro de la silueta de la corona. */
.corona-mask {
    position: absolute;
    inset: 0;
    z-index: 4;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 874.44'><path fill='%23000000' fill-rule='evenodd' d='M0 446.03 L0.45 463.64 L9.49 503.84 L22.58 550.36 L27.55 561.2 L41.1 596.43 L48.78 610.89 L57.36 629.86 L70.01 649.28 L82.66 670.51 L94.85 685.86 L106.59 703.03 L113.82 710.7 L121.95 721.54 L130.53 731.48 L146.12 746.16 L159.21 759.71 L191.28 785.46 L206.19 795.84 L215.67 803.52 L225.16 808.49 L236.9 816.62 L249.1 822.49 L262.65 830.17 L303.75 848.69 L315.04 851.85 L332.2 858.18 L349.82 863.14 L362.01 865.4 L375.11 869.02 L393.18 872.18 L409.44 873.08 L417.12 874.44 L420.28 874.44 L424.35 872.63 L426.83 866.98 L424.57 856.59 L423.22 840.79 L420.96 830.85 L420.51 823.17 L418.25 813.69 L416.44 795.17 L435.86 772.13 L466.58 731.93 L467.48 730.13 L467.03 722.45 L454.61 721.32 L446.03 718.61 L435.64 717.25 L418.47 712.74 L394.99 705.06 L376.47 696.93 L346.66 682.02 L322.27 668.02 L321.36 666.67 L349.37 673.89 L359.3 677.51 L379.18 682.02 L397.7 688.35 L418.47 693.32 L428.86 696.93 L436.99 698.74 L450.54 703.7 L471.32 709.12 L484.42 714.09 L500.23 717.25 L515.13 714.09 L528.23 709.12 L549.01 703.7 L576.11 694.67 L601.85 688.35 L620.37 682.02 L640.24 677.51 L650.18 673.89 L660.57 671.64 L679.09 666.21 L679.31 666.89 L678.18 667.12 L676.38 668.93 L665.99 674.35 L664.63 675.7 L661.92 676.6 L661.47 677.51 L653.34 681.57 L651.99 682.93 L648.83 683.83 L648.37 684.73 L644.31 686.09 L609.98 703.25 L581.98 712.74 L579.72 712.74 L571.59 715.45 L569.33 715.45 L564.81 717.25 L558.94 717.71 L549.01 719.96 L547.65 720.87 L539.97 722.22 L533.2 722.22 L532.52 729.22 L532.97 731.03 L540.65 741.87 L557.81 763.1 L564.59 772.58 L584.01 795.62 L579.04 830.4 L576.78 840.79 L574.98 859.3 L573.17 866.98 L575.65 872.63 L579.72 874.44 L582.43 874.44 L590.11 873.08 L606.37 872.18 L626.69 868.56 L637.53 865.4 L651.54 862.69 L670.51 857.27 L698.06 847.79 L740.97 828.36 L752.26 821.59 L764.45 815.72 L773.94 808.94 L784.78 803.07 L816.4 779.58 L841.24 759.26 L854.34 745.71 L869.92 731.03 L886.18 710.7 L893.41 703.03 L906.5 684.06 L916.44 671.86 L942.19 630.76 L953.03 607.27 L959.35 595.53 L973.35 559.39 L977.42 550.81 L984.19 527.33 L987.35 513.78 L990.51 504.29 L996.84 477.19 L999.55 464.09 L1000 452.8 L1000 444.22 L998.64 441.51 L994.13 435.64 L993.68 433.83 L988.26 427.51 L986.45 424.35 L985.09 423.44 L979.22 414.86 L960.25 390.47 L958.45 389.11 L957.54 387.31 L935.86 362.92 L908.99 335.59 L895.89 323.4 L888.21 320.23 L885.73 331.3 L883.02 337.62 L880.31 347.11 L871.73 365.18 L867.66 371.5 L861.34 384.6 L857.27 390.02 L851.17 396.12 L839.88 405.6 L832.43 413.05 L823.85 426.15 L818.43 458.67 L815.72 471.32 L812.56 479.9 L810.75 489.84 L801.72 516.49 L787.26 547.2 L775.97 566.62 L760.16 589.66 L756.1 597.34 L739.16 617.89 L751.58 583.79 L829.27 315.04 L849.14 254.07 L866.31 204.83 L876.24 173.22 L873.76 171.18 L871.05 170.73 L866.98 172.09 L856.14 171.64 L849.37 173.44 L846.21 173.44 L844.4 174.35 L836.27 175.7 L835.37 176.6 L827.24 178.41 L820.91 180.67 L818.65 180.67 L817.3 181.57 L809.62 182.93 L808.27 183.83 L798.78 185.64 L792.01 187.9 L789.75 187.9 L787.04 189.25 L771.23 192.86 L769.87 193.77 L762.2 195.12 L757.68 196.93 L753.61 197.38 L752.26 198.28 L743.68 200.09 L737.8 202.35 L735.55 202.35 L734.64 203.25 L731.48 204.16 L727.87 204.61 L706.19 211.83 L693.09 214.54 L684.73 209.35 L681.57 204.83 L679.77 203.48 L662.6 182.7 L660.34 180.89 L635.05 151.99 L623.76 137.99 L595.75 107.72 L551.04 55.78 L549.23 54.43 L509.94 7.45 L504.74 2.71 L500.23 0 L496.61 1.81 L491.64 5.87 L486.45 11.52 L447.61 58.04 L396.57 116.31 L376.69 137.53 L359.08 158.76 L326.56 195.35 L317.52 206.64 L312.33 211.83 L307.36 214.54 L298.78 213.19 L257.68 200.54 L209.8 187.9 L177.73 180.22 L159.67 174.8 L144.31 171.64 L133.47 172.09 L128.5 170.73 L126.24 171.18 L123.76 173.22 L170.28 313.23 L249.32 586.5 L260.84 617.43 L255.19 611.79 L243.9 597.34 L236.68 584.69 L235.77 584.24 L225.38 568.88 L215 551.72 L215 550.36 L214.09 549.91 L208.22 538.17 L207.77 535.91 L205.06 530.94 L205.06 529.58 L199.19 518.74 L193.77 504.74 L190.61 494.35 L190.61 492.55 L189.25 489.84 L188.35 483.51 L183.83 469.96 L183.38 465 L182.48 463.19 L178.86 445.12 L178.41 437.44 L176.15 426.15 L169.38 416.67 L168.93 414.41 L161.47 406.96 L153.79 401.08 L142.28 389.57 L138.66 384.6 L135.05 376.47 L130.53 369.24 L130.08 367.43 L128.73 366.08 L120.6 349.37 L117.89 340.33 L115.63 335.37 L115.63 333.56 L114.27 331.3 L113.37 324.98 L111.79 320.23 L104.11 323.4 L101.4 325.65 L78.59 348.01 L56.01 371.95 L36.13 394.99 L13.1 425.7 L9.03 430.22 L0.9 441.96Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 874.44'><path fill='%23000000' fill-rule='evenodd' d='M0 446.03 L0.45 463.64 L9.49 503.84 L22.58 550.36 L27.55 561.2 L41.1 596.43 L48.78 610.89 L57.36 629.86 L70.01 649.28 L82.66 670.51 L94.85 685.86 L106.59 703.03 L113.82 710.7 L121.95 721.54 L130.53 731.48 L146.12 746.16 L159.21 759.71 L191.28 785.46 L206.19 795.84 L215.67 803.52 L225.16 808.49 L236.9 816.62 L249.1 822.49 L262.65 830.17 L303.75 848.69 L315.04 851.85 L332.2 858.18 L349.82 863.14 L362.01 865.4 L375.11 869.02 L393.18 872.18 L409.44 873.08 L417.12 874.44 L420.28 874.44 L424.35 872.63 L426.83 866.98 L424.57 856.59 L423.22 840.79 L420.96 830.85 L420.51 823.17 L418.25 813.69 L416.44 795.17 L435.86 772.13 L466.58 731.93 L467.48 730.13 L467.03 722.45 L454.61 721.32 L446.03 718.61 L435.64 717.25 L418.47 712.74 L394.99 705.06 L376.47 696.93 L346.66 682.02 L322.27 668.02 L321.36 666.67 L349.37 673.89 L359.3 677.51 L379.18 682.02 L397.7 688.35 L418.47 693.32 L428.86 696.93 L436.99 698.74 L450.54 703.7 L471.32 709.12 L484.42 714.09 L500.23 717.25 L515.13 714.09 L528.23 709.12 L549.01 703.7 L576.11 694.67 L601.85 688.35 L620.37 682.02 L640.24 677.51 L650.18 673.89 L660.57 671.64 L679.09 666.21 L679.31 666.89 L678.18 667.12 L676.38 668.93 L665.99 674.35 L664.63 675.7 L661.92 676.6 L661.47 677.51 L653.34 681.57 L651.99 682.93 L648.83 683.83 L648.37 684.73 L644.31 686.09 L609.98 703.25 L581.98 712.74 L579.72 712.74 L571.59 715.45 L569.33 715.45 L564.81 717.25 L558.94 717.71 L549.01 719.96 L547.65 720.87 L539.97 722.22 L533.2 722.22 L532.52 729.22 L532.97 731.03 L540.65 741.87 L557.81 763.1 L564.59 772.58 L584.01 795.62 L579.04 830.4 L576.78 840.79 L574.98 859.3 L573.17 866.98 L575.65 872.63 L579.72 874.44 L582.43 874.44 L590.11 873.08 L606.37 872.18 L626.69 868.56 L637.53 865.4 L651.54 862.69 L670.51 857.27 L698.06 847.79 L740.97 828.36 L752.26 821.59 L764.45 815.72 L773.94 808.94 L784.78 803.07 L816.4 779.58 L841.24 759.26 L854.34 745.71 L869.92 731.03 L886.18 710.7 L893.41 703.03 L906.5 684.06 L916.44 671.86 L942.19 630.76 L953.03 607.27 L959.35 595.53 L973.35 559.39 L977.42 550.81 L984.19 527.33 L987.35 513.78 L990.51 504.29 L996.84 477.19 L999.55 464.09 L1000 452.8 L1000 444.22 L998.64 441.51 L994.13 435.64 L993.68 433.83 L988.26 427.51 L986.45 424.35 L985.09 423.44 L979.22 414.86 L960.25 390.47 L958.45 389.11 L957.54 387.31 L935.86 362.92 L908.99 335.59 L895.89 323.4 L888.21 320.23 L885.73 331.3 L883.02 337.62 L880.31 347.11 L871.73 365.18 L867.66 371.5 L861.34 384.6 L857.27 390.02 L851.17 396.12 L839.88 405.6 L832.43 413.05 L823.85 426.15 L818.43 458.67 L815.72 471.32 L812.56 479.9 L810.75 489.84 L801.72 516.49 L787.26 547.2 L775.97 566.62 L760.16 589.66 L756.1 597.34 L739.16 617.89 L751.58 583.79 L829.27 315.04 L849.14 254.07 L866.31 204.83 L876.24 173.22 L873.76 171.18 L871.05 170.73 L866.98 172.09 L856.14 171.64 L849.37 173.44 L846.21 173.44 L844.4 174.35 L836.27 175.7 L835.37 176.6 L827.24 178.41 L820.91 180.67 L818.65 180.67 L817.3 181.57 L809.62 182.93 L808.27 183.83 L798.78 185.64 L792.01 187.9 L789.75 187.9 L787.04 189.25 L771.23 192.86 L769.87 193.77 L762.2 195.12 L757.68 196.93 L753.61 197.38 L752.26 198.28 L743.68 200.09 L737.8 202.35 L735.55 202.35 L734.64 203.25 L731.48 204.16 L727.87 204.61 L706.19 211.83 L693.09 214.54 L684.73 209.35 L681.57 204.83 L679.77 203.48 L662.6 182.7 L660.34 180.89 L635.05 151.99 L623.76 137.99 L595.75 107.72 L551.04 55.78 L549.23 54.43 L509.94 7.45 L504.74 2.71 L500.23 0 L496.61 1.81 L491.64 5.87 L486.45 11.52 L447.61 58.04 L396.57 116.31 L376.69 137.53 L359.08 158.76 L326.56 195.35 L317.52 206.64 L312.33 211.83 L307.36 214.54 L298.78 213.19 L257.68 200.54 L209.8 187.9 L177.73 180.22 L159.67 174.8 L144.31 171.64 L133.47 172.09 L128.5 170.73 L126.24 171.18 L123.76 173.22 L170.28 313.23 L249.32 586.5 L260.84 617.43 L255.19 611.79 L243.9 597.34 L236.68 584.69 L235.77 584.24 L225.38 568.88 L215 551.72 L215 550.36 L214.09 549.91 L208.22 538.17 L207.77 535.91 L205.06 530.94 L205.06 529.58 L199.19 518.74 L193.77 504.74 L190.61 494.35 L190.61 492.55 L189.25 489.84 L188.35 483.51 L183.83 469.96 L183.38 465 L182.48 463.19 L178.86 445.12 L178.41 437.44 L176.15 426.15 L169.38 416.67 L168.93 414.41 L161.47 406.96 L153.79 401.08 L142.28 389.57 L138.66 384.6 L135.05 376.47 L130.53 369.24 L130.08 367.43 L128.73 366.08 L120.6 349.37 L117.89 340.33 L115.63 335.37 L115.63 333.56 L114.27 331.3 L113.37 324.98 L111.79 320.23 L104.11 323.4 L101.4 325.65 L78.59 348.01 L56.01 371.95 L36.13 394.99 L13.1 425.7 L9.03 430.22 L0.9 441.96Z'/></svg>");
    /* 50% 50%: la silueta se queda centrada en la pantalla mientras crece, sin
       tener que calcular el eje en JS. */
    -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: var(--corona-tam, 300px);
            mask-size: var(--corona-tam, 300px);
    /* SIN transition y SIN will-change a propósito.
       Aquí había `transition: mask-size 0.04s linear` para "suavizar" el salto
       entre fotogramas, pero el JS ya suaviza por su cuenta (el bucle de rAF de
       index.html persigue el tamaño objetivo poco a poco). Los dos suavizados a
       la vez se pisaban: la transición arrancaba hacia un tamaño que el bucle ya
       había cambiado, y la corona temblaba. El bucle manda solo.
       will-change tampoco pinta nada: mask-size no se anima en el compositor,
       así que solo gastaba memoria de capa. */
}

/* El lienzo: lo que la corona destapa. Verde SÓLIDO (el mismo #1C4E2F con el
   que abre la sección 3, así que al soltarse el pin no hay corte de color).

   OJO: aquí dentro NO va texto. Antes iba una segunda copia del logotipo en
   blanco sobre verde, para que el destapado "invirtiera" la marca de agua del
   fondo. Como las dos capas caían exactas una sobre otra, el texto se leía como
   una sola línea pasando POR DELANTE de la corona, y la corona tiene que ir
   encima. Si vuelves a meter algo aquí, que no coincida con .corona-watermark.

   El zoom sí se queda: --corona-zoom va de 1 a 1.22 a lo largo del recorrido,
   igual que el video de la maqueta de referencia. Lo que se ve moverse es el
   shader de humo (.corona-shader) que cuelga de aquí dentro; el verde de fondo
   es solo la red de seguridad para cuando no hay WebGL. */
.corona-lienzo {
    position: absolute;
    inset: 0;
    background-color: var(--verde);
    overflow: hidden;
    transform: scale(var(--corona-zoom, 1));
    transform-origin: 50% 50%;
    will-change: transform;
}

/* El <canvas> del shader de humo. Rellena el lienzo, y como cuelga de él
   hereda el zoom de 1 a 1.22.
   OJO: el JS lo mide con clientWidth/clientHeight justamente porque este
   elemento va escalado; no le pongas un tamaño que dependa del transform. */
.corona-shader {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Negro mientras el shader no ha dibujado: el humo se enciende al terminar
       la ola de entrada (23 septiembre 2026), y antes de tener contexto WebGL
       el canvas es transparente y asomaría el verde de .corona-lienzo. Negro
       es lo que se veía siempre mientras el shader compilaba. Sin WebGL el
       canvas se esconde y queda el verde, como antes. */
    background-color: #000;
}

/* 🌑 EL VELO QUE APAGA EL HUMO
   Cuelga DENTRO de .corona-mask, detrás de las marcas de encuadre "altas" y
   por delante del lienzo: tapa el humo pero no las esquinas blancas, que
   tienen que seguir leyéndose sobre el negro. Ir dentro de la máscara es lo que
   hace que esto funcione: el velo solo pinta donde la corona ya destapó, así
   que mientras la silueta crece lo que se oscurece es justo lo de dentro del
   portal, y la página de fuera sigue blanca hasta que la corona la cubre.
   La opacidad la escribe pintarCorona() fotograma a fotograma; igual que la
   máscara, aquí NO va transition (el bucle de rAF ya suaviza, y los dos
   suavizados a la vez se pisan). */
.corona-apagado {
    position: absolute;
    inset: 0;
    background-color: var(--corona-negro);
    opacity: 0;
    pointer-events: none;
}

/* 🌅 EL HORIZONTE — el fondo del reposo (21 de septiembre de 2026)
   El fondo del componente hero-1 (React/Tailwind/shadcn) que mandó el cliente,
   pasado a CSS plano y en su variante oscura: solo el fondo, sin su texto ni
   su botón. Tres piezas:
     · .corona-horizonte-rejilla — la cuadrícula tenue de arriba, que se
       desvanece en elipse hacia abajo.
     · .corona-horizonte-degradado  — el degradado de negro a gris a blanco.
     · .corona-horizonte-arco    — el arco enorme: una elipse negra con el
       borde encendido (radial-gradient de negro al 82% a blanco), que asoma
       por abajo.
   Cuelga DENTRO de .corona-mask, después del velo: se pinta sobre el negro del
   humo apagado y nunca fuera de la corona. Entra en su PROPIO tramo,
   separado del velo (primero se va el humo, queda negro liso, y ya casi
   cerrando la corona entra esto), y en dos tiempos que escribe
   pintarCorona(): --arco (el arco sube desde abajo y aparece) y después
   --fondo (se encienden el degradado y la rejilla). El arco va DESPUÉS del
   degradado en el markup, así que aparece solo sobre el negro y el gris
   llega luego a su alrededor. (Hacer subir el fondo ENTERO se probó y se veía
   raro.) Sin transition, por lo mismo que el velo: el bucle de
   rAF ya suaviza. La primera parada del degradado es --corona-negro y no el
   #000 del componente, para que arriba no se note un
   negro distinto al del velo. */
.corona-horizonte {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.corona-horizonte-rejilla {
    position: absolute;
    inset: 0 0 auto 0;
    height: 600px;
    background-image:
        linear-gradient(to right, #333 1px, transparent 1px),
        linear-gradient(to bottom, #333 1px, transparent 1px);
    background-size: 6rem 5rem;
    -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
            mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
    opacity: calc(0.8 * var(--fondo, 0));
}

.corona-horizonte-degradado {
    position: absolute;
    inset: 0;
    /* Mucho más apagado que el del componente (#898e8e → #ffffff): en la
       maqueta del cliente el fondo casi no se aclara, solo agarra un gris
       oscuro cerca del arco, y así lo que brilla es el borde del arco. */
    background: linear-gradient(to bottom, var(--corona-negro), transparent 55%, #1f2020 84%, #343636 99%);
    opacity: var(--fondo, 0);
}

.corona-horizonte-arco {
    position: absolute;
    left: 50%;
    /* Asoma un 25% del alto (230px en un 1080p) y mide 120% de ancho (el
       componente: 150px fijos y 140%): la maqueta del cliente lo pide más
       arriba y más curvo. En vh y no en px porque en una laptop de 768px de
       alto 230px fijos lo subían hasta encima de los títulos de las cuentas. */
    top: calc(100% - 25vh);
    width: 120%;
    height: 750px;
    /* Sube desde abajo: con --arco en 0 está --arco-bajada por debajo de su
       sitio (fuera de pantalla, porque de él solo asoma el 25% del alto) y en 1 llega.
       Es la ÚNICA pieza del horizonte que se mueve; el degradado y la rejilla
       solo se encienden, y después que él. */
    --arco-bajada: 32vh;
    transform: translateX(-50%) translateY(calc((1 - var(--arco, 0)) * var(--arco-bajada)));
    opacity: var(--arco, 0);
    border-radius: 100%;
    /* El borde remata en gris claro y no en blanco puro (21 septiembre 2026,
       maqueta del cliente): es el blanco al ~60% de opacidad sobre el negro,
       pero en color sólido para que el interior del arco siga negro opaco. */
    background: radial-gradient(closest-side, #000000 82%, #999999);
}

/* Los mismos escalones del componente: md (768–1023) y el base de celular. */
@media (max-width: 1023px) {
    /* Asoma 175px y no los 90 del componente: en celular y tablet el pie de
       la sección 2 (botón + conteo) cae encima del arco, y tiene que caer en
       su parte NEGRA, no en el borde blanco, donde el botón se perdía. */
    .corona-horizonte-arco { top: calc(100% - 175px); width: 1100px; height: 500px; --arco-bajada: 260px; }
}

@media (max-width: 767px) {
    .corona-horizonte-arco { width: 700px; }
}

/* Cierre en verde plano: rellena lo que la silueta deje suelto en el último
   tramo (alguna esquina, según la proporción de la pantalla). En el acto 2 el
   JS le cambia el color a --corona-negro, porque a esas alturas una esquina
   suelta en verde cantaría. */
.corona-cierre {
    position: absolute;
    inset: 0;
    z-index: 3;
    background-color: var(--verde);
    opacity: 0;
    pointer-events: none;
}

/* Marcas de encuadre en las 4 esquinas, en DOS juegos superpuestos sobre las
   mismas coordenadas. Nada de mix-blend-mode: sobre verde sacaba fucsia.

     .corona-esquina-baja  -> tinta, z-index 2, DEBAJO de la máscara. Es la que
                              se ve sobre el blanco; el verde se la va tragando.
     .corona-esquina-alta  -> blanca, DENTRO de .corona-mask. Solo asoma donde
                              la corona ya destapó.

   Así cada esquina pasa de negra a blanca justo en el instante en que el verde
   la alcanza, sin una sola línea de JS. */
.corona-esquina {
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    border: 0 solid var(--esq-color, #ffffff);
}

.corona-esquina-baja { z-index: 2; --esq-color: var(--tinta); }
.corona-esquina-alta {             --esq-color: #ffffff; }

.esq-si { top: 14px;    left: 14px;  border-top-width: 2px;    border-left-width: 2px; }
.esq-sd { top: 14px;    right: 14px; border-top-width: 2px;    border-right-width: 2px; }
.esq-ii { bottom: 14px; left: 14px;  border-bottom-width: 2px; border-left-width: 2px; }
.esq-id { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; }

/* Pista de scroll: se desvanece en cuanto la corona empieza a crecer */
.corona-pista {
    position: absolute;
    z-index: 6;
    bottom: 3.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--tinta);
}

.corona-pista-flecha {
    width: 1px;
    height: 34px;
    background: linear-gradient(to bottom, var(--tinta), rgba(17, 17, 17, 0));
    animation: coronaPistaBaja 1.8s ease-in-out infinite;
}

@keyframes coronaPistaBaja {
    0%, 100% { transform: translateY(0);    opacity: 1;   }
    50%      { transform: translateY(10px); opacity: 0.3; }
}


/* ==========================================
   📱 MEDIA QUERY UNIFICADO PARA MÓVIL (FINAL)
   ========================================== */

@media (max-width: 900px) {

    /* 🟩 1.5. SECCIÓN 1 EN CELULAR (hero claro)
       No hay ancho para las dos esquinas a los lados del personaje, así que
       todo se apila: arriba el personaje con la marca por detrás, igual que en
       PC; debajo los dos datos, en fila; y al final la frase y el botón. El
       texto se encima en el desvanecido del personaje (el margen negativo de
       .hero-inner) para que no quede un hueco blanco entre los dos. El grupo
       va centrado en el alto: en un teléfono alto el aire se reparte arriba y
       abajo en vez de abrirse entre la imagen y el texto.
       --hero-fig manda aquí lo mismo que en PC (la marca se mide con él),
       pero sale del ancho de la pantalla: es el ancho que hace que la marca,
       1.75 veces el personaje, llene la pantalla de margen a margen. El tope
       de 60svh es para el teléfono acostado, donde si no el personaje salía
       más alto que la pantalla. */
    .hero {
        --hero-fig: min((100vw - 2.3rem) / 1.75, 60svh);
        /* El alto de la silueta gris (el ::before de abajo) y, colgando de
           él, dónde arrancan las mayúsculas de la marca: sobre la coronilla,
           como en la maqueta del cliente. La coronilla cae al 6.25% del alto
           de la imagen, y la silueta va apoyada en el suelo; las mayúsculas
           arrancan 4px más arriba (297 contra 301 en la maqueta, a 382x830).
           Los % se resuelven donde se usan, contra el alto del .hero. */
        /* La rendija con el portal (21 de septiembre de 2026): el body es
           negro, y en teléfonos con densidad fraccionaria (2.625, 2.75: casi
           todo Android) el borde entre las dos secciones cae a mitad de un
           píxel físico y ese negro se asomaba como una raya gris de lado a
           lado. Esta sombra pinta 2px de blanco por debajo del hero, detrás
           del portal (z-index 11 contra 10): tapa la rendija sin mover nada. */
        box-shadow: 0 2px 0 #ffffff;
        --hero-sil-alto: 68svh;
        --marca-arriba: calc(100% - var(--hero-sil-alto) * 0.9375 - 4px);
        /* Alto de las mayúsculas de la marca: 0.68em de su letra. */
        --marca-alto: calc(var(--hero-fig) * 0.285 * 0.68);
        justify-content: center;
        /* La cabeza tiene que librar la píldora, que en celular va arriba a
           la derecha. */
        padding-top: 4rem;
    }

    /* La figura entra en el flujo, con la cabeza al centro de la pantalla
       como en PC. La marca va centrada sobre la cabeza, así que también
       queda centrada. */
    .hero-figura {
        position: relative;
        left: auto;
        bottom: auto;
        align-self: flex-start;
        margin-left: calc(50vw - var(--hero-fig) * 0.534);
    }

    /* 🧍 LA SILUETA GRIS, ABAJO Y EN GRANDE (20 de septiembre de 2026)
       Como en el diseño viejo de celular: el personaje apoyado en el suelo de
       la pantalla, más ancho que ella y con la cabeza a media altura. No puede
       salir de .hero-figura (es su bloque contenedor, y la marca cuelga de él),
       así que aquí la capa gris de la figura se esconde y la pinta este
       ::before del .hero, con las mismas dos máscaras. La figura se queda en su
       sitio, invisible, y sigue dando el alto y la posición de la marca: nada
       más se mueve.
       Tamaño calcado del diseño viejo (assets/diseño.png a 63svh de alto),
       medido lado a lado con una captura suya: la cabeza mide lo mismo. Aquí
       la imagen trae el cuerpo hasta la cintura, así que mide 68svh. Va
       apoyada en el suelo y entera, con el mismo desvanecido de PC, para que
       se vean los brazos (el dueño la pidió más arriba que la vieja). Va
       centrada por la cabeza CON el chongo (50.5% del ancho), como la vieja,
       no por la cara como en PC (53.4%): así la cabeza quedaba corrida a la
       derecha. Entra con la misma ola (hero-in) en el lugar 2. */
    .hero-figura-humo { display: none; }

    .hero::before {
        --hero-sil: calc(var(--hero-sil-alto) * 2004 / 2154);
        content: '';
        position: absolute;
        bottom: 0;
        left: calc(50% - var(--hero-sil) * 0.505);
        z-index: 0;
        width: var(--hero-sil);
        height: var(--hero-sil-alto);
        background: #f2f2f2;
        pointer-events: none;
        -webkit-mask-image: url('assets/hero-personaje-humo-1100.webp'), linear-gradient(to bottom, #000 73%, rgba(0, 0, 0, 0.84) 78.5%, rgba(0, 0, 0, 0.56) 85.3%, rgba(0, 0, 0, 0.18) 92%, transparent 97.5%);
        mask-image: url('assets/hero-personaje-humo-1100.webp'), linear-gradient(to bottom, #000 73%, rgba(0, 0, 0, 0.84) 78.5%, rgba(0, 0, 0, 0.56) 85.3%, rgba(0, 0, 0, 0.18) 92%, transparent 97.5%);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
        animation: hero-in 520ms ease 220ms both;
    }

    @media (prefers-reduced-motion: reduce) {
        .hero::before { animation: none; }
    }

    /* 👑 LA MARCA, SOBRE LA CABEZA DE LA SILUETA (21 de septiembre de 2026)
       En PC cuelga de la figura; aquí va centrada a lo ancho y, a lo alto,
       sobre la coronilla de la silueta gris (--marca-arriba), como en la
       maqueta del cliente. Del 20 al 21 de septiembre estuvo en el centro
       exacto de la pantalla, que la dejaba a la altura de la barbilla. Con la
       figura en static, el bloque contenedor de la marca pasa a ser el .hero
       (position: relative), y la figura sigue en el flujo dando el mismo
       alto. Con la interlínea de 0.68 la caja mide exactamente las
       mayúsculas, así que su top es donde arranca la letra. Nada de
       transform: la entrada (hero-in) es su dueña. */
    .hero-figura { position: static; }

    .hero-wordmark {
        top: var(--marca-arriba);
        left: 0;
        width: 100%;
    }

    /* El texto sube hasta donde la figura ya casi se borró (el 92% de su alto,
       donde el desvanecido va en 0.18). */
    .hero-inner {
        flex: 0 0 auto;
        margin-top: calc(var(--hero-fig) * -0.086);
        padding-top: 0;
    }

    /* Las dos esquinas de PC se vuelven una columna. Con el margen de
       escritorio en un teléfono no quedaba ancho útil para la frase. */
    .hero-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 1.4rem;
        padding: 0 1.15rem 2.5rem;
    }

    .eyebrow-punto { width: 8px; height: 8px; }
    .eyebrow-linea { width: 34px; }
    .eyebrow-texto { font-size: 0.6rem; letter-spacing: 3.5px; }

    .hero-pie { gap: 2rem; }

    .hero-conteo { gap: 0.35rem; }

    .hero-conteo::after {
        width: 4.5rem;
        margin-top: 1.1rem;
    }

    /* Los datos, en fila y por encima de la frase (order), con la raya en
       vertical entre los dos en vez de horizontal. */
    .hero-datos {
        order: -1;
        flex-direction: row;
        align-items: stretch;
        text-align: left;
    }

    .hero-dato {
        align-items: flex-start;
        gap: 0.35rem;
        padding: 0 1.4rem;
    }

    .hero-dato:first-child { padding-left: 0; }

    .hero-dato + .hero-dato { border-left: 1px solid rgba(17, 17, 17, 0.16); }

    .hero-dato + .hero-dato::before { content: none; }

    .hero-dato-valor { font-size: 2rem; }

    .hero-dato-etiqueta {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    /* 📱 ACOMODO DE LA MAQUETA DEL CLIENTE (21 de septiembre de 2026)
       Arriba de la marca, "TIENDA DE CUENTAS"; debajo, "2 años | +700" en
       fila; y abajo del todo, "11 Cuentas" en grande con el botón debajo.
       Las medidas salen de la maqueta (su pantalla es 2.41 veces un teléfono
       de 382px).
       Todo cuelga del .hero, igual que la marca: el .hero-inner y el
       .hero-panel pasan a static, así que los datos y el .hero-pie (conteo +
       botón) se posicionan contra la sección. El antetítulo y los datos se
       miden desde la marca (--marca-arriba y --marca-alto, en el .hero). */
    .hero-inner,
    .hero-panel { position: static; }

    /* Antetítulo: Montserrat 700 espaciado, como el "TIENDA DE CUENTAS" del
       diseño viejo de celular, del que sale la maqueta. Su borde de abajo
       queda a 12px de las mayúsculas de la marca. */
    .hero-antetitulo {
        display: block;
        position: absolute;
        bottom: calc(100% - var(--marca-arriba) + 10px);
        left: 0;
        width: 100%;
        z-index: 1;
        margin: 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 0.63rem;
        line-height: 1;
        letter-spacing: 0.22em;
        /* El espaciado también cae después de la última letra: se devuelve
           por la izquierda para que el texto quede centrado de verdad. */
        text-indent: 0.22em;
        text-align: center;
        text-transform: uppercase;
        color: var(--tinta);
    }

    /* "2 años | +700", en fila y centrados, pegados debajo de la marca: en
       la maqueta hay ~13px de las mayúsculas a la cabeza de los números (la
       caja del número lleva ~2px de aire encima de la letra; medido lado a
       lado con la maqueta a 382x830). */
    .hero-datos {
        position: absolute;
        top: calc(var(--marca-arriba) + var(--marca-alto) + 15px);
        left: 0;
        right: 0;
        z-index: 2;
        justify-content: center;
    }

    .hero-dato {
        align-items: center;
        text-align: center;
        padding: 0 min(0.85rem, 3.2vw);
    }

    /* Sin aire por fuera de los dos extremos (el primero ya lo pierde
       arriba), para que la fila quede centrada. */
    .hero-dato:last-child { padding-right: 0; }

    /* Más chicos y en gris para no competirle a la marca (21 de septiembre de
       2026): un escalón más oscuro que el gris de las etiquetas (#8a8a8a),
       para que el número siga mandando sobre su etiqueta. */
    .hero-datos .hero-dato-valor {
        font-size: min(1.4rem, 5.1vw);
        color: #6b6b6b;
    }

    .hero-datos .hero-dato-etiqueta { font-size: min(0.62rem, 2.2vw); }

    /* "11 Cuentas" + el botón, abajo y centrados. En la maqueta el botón
       termina a un 12% del suelo, y hay ~21px del número a la etiqueta y de
       la etiqueta al botón. */
    .hero-pie {
        position: absolute;
        bottom: 12%;
        left: 0;
        right: 0;
        z-index: 2;
        align-items: center;
        gap: 1.3rem;
        padding: 0 1.15rem;
    }

    .hero-conteo {
        align-items: center;
        gap: 0.75rem;
        text-align: center;
    }

    .hero-conteo::after { content: none; }

    .hero-conteo .hero-dato-valor { font-size: min(3rem, 12.5vw); }

    /* La etiqueta, un escalón más oscura que las de arriba (#8a8a8a). */
    .hero-conteo .hero-dato-etiqueta {
        font-size: 0.6rem;
        color: #707070;
    }

    /* 🌫️ "11 Cuentas" relleno del mismo humo que la marca (21 de septiembre
       de 2026, solo celular): los mismos tres fondos, el mismo recorte con
       background-clip: text y la misma deriva de las nieblas. Va en el span
       de fuera, así que cubre el número y la palabra que escribe
       pintarConteoHero(). Lleva también el grano (--humo-grano). El relleno lateral, devuelto con margen negativo,
       es para que el recorte no se coma la curva de la "s" final. */
    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
        .hero-conteo .hero-dato-valor {
            padding: 0 0.08em;
            margin: 0 -0.08em;
            color: transparent;
            background-image: var(--humo-grano), url('assets/humo-niebla-a.webp'), url('assets/humo-niebla-b.webp'), url('assets/marca-humo.webp');
            background-size: 160px 160px, 3.2em auto, 4.4em auto, cover;
            background-repeat: repeat, repeat, repeat, no-repeat;
            background-position: 0 0, 0 -0.6em, 1.5em -1.2em, center;
            -webkit-background-clip: text;
            background-clip: text;
            animation: marca-niebla 24s ease-in-out 0.9s infinite alternate;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-conteo .hero-dato-valor { animation: none; }
    }

    /* El botón, a su ancho natural (como en PC) y centrado. El selector lleva
       .hero-pie para ganarle al bloque de 640px, que va después y estira
       .hero-botones. */
    .hero-pie .hero-botones {
        width: auto;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .hero-pie .btn-hero { justify-content: center; }

    /* Aquí el botón se estira a todo el ancho (.hero-botones lo hace), así que
       el texto se va a la izquierda y el círculo al filo derecho: centrados
       los dos dejaban un hueco raro a la derecha. */
    .btn-hero {
        height: 60px;
        gap: 16px;
        padding: 0 7px 0 1.6rem;
        justify-content: space-between;
    }

    .btn-hero-circulo {
        width: 46px;
        height: 46px;
    }

    .btn-discord-linea,
    .btn-verde-pill {
        align-self: stretch;
        justify-content: center;
        height: 52px;
        padding: 0 1.5rem;
        font-size: 0.92rem;
    }

    /* 👑 PORTAL DE LA CORONA EN CELULAR
       Menos recorrido de scroll: el dedo cansa más rápido que la rueda. El
       tamaño de arranque de la corona lo baja el JS (tamanioReposoCorona). */
    .corona-portal { height: 480vh; }   /* 2.0 destapado + 0.8 reposo + 1 de solape + 1 del pin */


    .corona-esquina { width: 13px; height: 13px; }
    .esq-si, .esq-sd { top: 10px; }
    .esq-ii, .esq-id { bottom: 10px; }
    .esq-si, .esq-ii { left: 10px; }
    .esq-sd, .esq-id { right: 10px; }

    .corona-pista {
        bottom: 2.2rem;
        font-size: 0.6rem;
        letter-spacing: 3px;
    }

    .corona-pista-flecha { height: 26px; }
}

/* EL RÓTULO DEL PORTAL EN CELULAR — a 640px, no a los 900 de siempre.
   De ancho no cabe "CUENTAS DESTACADAS" en una línea, y partirlo en dos
   renglones pegados detrás de la corona tampoco se lee. Así que se abre:
   CUENTA arriba, la corona en medio, DESTACADA abajo. No queda "detrás" como en
   PC, pero es la misma idea adaptada al alto, que es lo que sobra aquí.

   El corte va en 640 y no en 900 por dos motivos que apuntan al mismo sitio:
   entre 640 y 900 la línea entera todavía cabe, y es justo ahí donde
   tamanioReposoCorona() (index.html) sube la corona de 260 a 340 — el hueco de
   abajo dejaría de cuadrar.

   Ese hueco es el gap: 260px, el mismo tamaño de reposo que devuelve el JS por
   debajo de 640. Son la misma cuenta escrita en dos sitios: si cambias uno,
   cambia el otro o el texto se mete debajo de la silueta.

   El plural se esconde porque a esta anchura solo entra UNA cuenta. */
@media (max-width: 640px) {
    .corona-watermark {
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 260px;
        white-space: normal;
        font-size: clamp(2rem, 15.5vw, 4.5rem);
    }

    .corona-watermark-plural { display: none; }

    /* El botón va a todo lo ancho */
    .hero-botones {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================
   CUENTAS DESTACADAS — el contenido del reposo del portal (sección 2)
   ==========================================
   Ya no es una sección del flujo con su fondo verde: es una CAPA dentro de
   .corona-pin, encima de la máscara, que aparece sobre el negro que deja la
   corona al cerrar. SIN fondo propio — el fondo es el negro del portal, y
   meterle el verde de vuelta taparía la sección entera.

   Como el pin mide una pantalla y recorta lo que sobra, esto TIENE que caber en
   100vh. Es la única regla dura del bloque: si añades algo aquí, mídelo en la
   pantalla más baja que te importe (y mira el @media de celular, que lleva su
   propia versión apretada).

   Desde el 21 de septiembre de 2026 sigue la maqueta del cliente: titular
   centrado arriba, las dos cuentas SIN tarjeta (foto grande, título espaciado
   y precio), y abajo, sobre el arco del horizonte, el botón de
   cristal al catálogo y el conteo. Todo en blanco sobre el fondo del portal. */

.destacada {
    position: absolute;
    inset: 0;
    /* Encima de .corona-mask (z 4), debajo de la pista de scroll (z 6). */
    z-index: 5;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    /* Tres piezas: titular arriba, cuentas en medio y el pie abajo, encima del
       arco del horizonte. space-between las reparte así en cualquier alto. */
    justify-content: space-between;
    gap: clamp(1rem, 3vh, 2rem);
    /* El padding de arriba deja libre el menú píldora, que es fixed. */
    padding: clamp(4.75rem, 9vh, 6rem) 2.7vw clamp(1.25rem, 3.5vh, 2.25rem);
    /* Mientras no se ha revelado no debe comerse los clics: durante el
       destapado es una capa invisible tapando la pantalla entera. */
    pointer-events: none;
}

.destacada.is-revealed {
    pointer-events: auto;
}

/* -------------------------------------------------------------------------
 * La ola, de ida y de vuelta. Misma receta que el hero (bajar desde arriba,
 * desenfocado, escalonado por --n), pero aquí va como transition y no como
 * animation porque el disparo no es la carga de la página: lo pone y lo quita
 * pintarCorona() con la clase .is-revealed, según si la corona ya tapó la
 * pantalla.
 *
 * ENTRADA (bajando): entra primero el eyebrow y al final el CTA, 110ms de
 * escalón entre piezas.
 *
 * SALIDA (subiendo): la misma ola al revés — se va primero lo que entró
 * último, y cada pieza vuelve por donde vino (hacia arriba y desenfocándose).
 * El escalón de salida va invertido con (--n-ultimo - --n), y --n-ultimo es
 * el --n más alto que haya en el markup: si añades una pieza con un --n mayor,
 * SÚBELO o esa pieza saldrá antes de tiempo.
 *
 * La vuelta es más corta que la ida (360 contra 520, 60 de escalón contra
 * 110) por dos razones: una salida que dura lo mismo que la entrada se siente
 * lenta, y aquí encima hay prisa — al subir la corona vuelve a abrirse y
 * detrás del contenido reaparece el blanco. Antes esto no tenía transición
 * ninguna y el contenido se cortaba en seco.
 *
 * Ojo: el estado escondido NO depende del JS, a diferencia del hero. Aquí eso
 * es a propósito — este contenido no puede verse durante el destapado, así que
 * más vale que se quede escondido si el JS no corre a que se pinte encima del
 * humo. Y la transición del estado escondido no hace nada al cargar la página:
 * sin cambio de clase no hay nada que animar.
 * ------------------------------------------------------------------------- */
.destacada {
    /* El --n más alto del markup (el pie). */
    --n-ultimo: 3;
}

.destacada [data-reveal] {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-20px);
    transition: opacity 360ms ease, filter 360ms ease, transform 360ms ease;
    transition-delay: calc((var(--n-ultimo) - var(--n, 0)) * 60ms);
}

.destacada.is-revealed [data-reveal] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: opacity 520ms ease, filter 520ms ease, transform 520ms ease;
    transition-delay: calc(var(--n, 0) * 110ms);
}

/* Con el movimiento reducido el contenido sigue teniendo que aparecer (si no,
   la sección se queda vacía), pero sin ola: se enciende y se apaga de golpe,
   sin blur y sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    .destacada [data-reveal] {
        filter: none;
        transform: none;
        transition: opacity 200ms ease;
        transition-delay: 0s;
    }

    .destacada.is-revealed [data-reveal] {
        transition: opacity 200ms ease;
        transition-delay: 0s;
    }
}

/* El titular, centrado y a lo ancho: ~73% de la pantalla en la maqueta. El
   tope en vh es para los monitores bajos, donde a 8.6vw se comería el alto que
   necesitan las fotos. */
.destacada-titulo {
    font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
    /* Más delgado y un poco más chico que antes (800, 8.6vw), como en la
       maqueta del cliente del 21 septiembre 2026. */
    font-weight: 600;
    font-size: min(7.4vw, 13vh);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-align: center;
    text-transform: uppercase;
}

/* DOS cuentas, una a cada orilla con un pasillo ancho en medio. En celular
   pasa a una sola (ver el bloque responsive): dentro del pin del portal no hay
   alto para dos, y por eso el rótulo de atrás dice "CUENTA DESTACADA" en
   singular ahí. */
.destacada-cuerpo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4vw;
}

/* 🃏 LA CUENTA — ya no es una tarjeta: la foto grande y debajo, sueltos sobre
   el fondo, el título y el precio (la rayita de la maqueta se quitó a pedido
   del cliente). El ancho lo limita también el
   alto (78vh = foto de 39vh), para que en un monitor bajo quepa todo en el
   pin sin recortarse. */
.cuenta-card {
    position: relative;
    /* Las fotos de las cuentas son 16:9 y se ven enteras, sin recorte (21
       septiembre 2026, a pedido del dueño). Antes la caja era 2:1 con
       object-fit: cover y se comía arriba y abajo. En pantallas anchas el
       ancho no cambia (42.5vw) y la foto crece ~12% en alto, que cabe; en las
       bajas, donde manda el alto, el tope baja de 78vh a 69.3vh (x 16/18)
       para que la foto no pase del alto de antes y empuje el precio al arco. */
    width: min(42.5vw, 69.3vh);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
}

/* La segunda, en espejo: el texto a la derecha, como en la maqueta. */
.cuenta-card-segunda {
    align-items: flex-end;
    text-align: right;
}

.cuenta-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 0.6rem;
    border-radius: 16px;
    background: #1a1a1a;
    overflow: hidden;
    box-shadow: 0 28px 60px -30px rgba(0, 0, 0, 0.85);
}

.cuenta-img-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* En UNA línea, con puntos suspensivos. No es estética: el título lo escribe
   Supabase y puede venir larguísimo, y dentro del pin cada línea de más
   empuja el pie fuera de la pantalla. */
.cuenta-titulo {
    max-width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(1.1rem, min(2.2vw, 4vh), 2.6rem);
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cuenta-precios {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

/* El MXN va siempre hacia la orilla de afuera (maqueta del 21 septiembre
   2026): a la izquierda MXN y luego USD, a la derecha USD y luego MXN.
   Solo cuando se ven las dos cuentas. */
@media (min-width: 901px) {
    .cuenta-card-segunda .cuenta-usd { order: -1; }
}

/* Sin titular en PC (21 septiembre 2026, a pedido del cliente): la mitad
   blanca de la sección 2 ya dice "Cuentas destacadas". Con el alto que deja
   libre, las cuentas se centran en el alto (su tamaño y su giro 3D van en
   LAS CUENTAS EN 3D, más abajo). En celular el titular se queda. */
@media (min-width: 901px) {
    .destacada-titulo { display: none; }
    /* Sin titular, las cuentas se quedaban pegadas al menú con un hueco
       enorme abajo: se centran en el alto que queda sobre el pie. */
    .destacada-cuerpo { margin-block: auto; }
}

/* 🪟 LAS CUENTAS EN 3D (maqueta del 21 septiembre 2026,
   assets/maqueta 3d seccion 2.png) — cada cuenta entera (foto, canto, título
   y precio) es UNA pantalla girada hacia el centro: la orilla de afuera
   cerca, la de adentro lejos, y echada hacia atrás por arriba, así que el
   hueco entre las dos forma una "V". El texto va en el mismo plano que la
   foto, con su misma inclinación (lo pidió así el dueño).

   Los números no son a ojo: salen de ajustar una proyección 3D a las
   esquinas de la foto izquierda de la maqueta (1920x1080), con el punto de
   fuga al centro. La esquina de abajo y adentro NO es la de la maqueta: ahí
   se veía como embudo, y a pedido del dueño se trajo hacia el frente (de
   868,651 a 830,670) para que se lea como una pantalla vista de lado. Con
   esa esquina el ajuste es exacto:
     rotateX 16.8deg · rotateY 49.4deg · rotateZ -10.1deg,
     perspectiva 9.4 anchos de cuenta, girando sobre la esquina de abajo y
     afuera de la foto, que se corre 0.23 anchos hacia el centro.
   Todo va en múltiplos de --cuenta-w, así que la escena escala entera. La
   derecha es el espejo.

   El giro va en el `transform` de la tarjeta; por eso aquí la ola de
   entrada, que en el resto de la sección usa transform, baja con
   `translate`. */
@media (min-width: 901px) {
    .destacada-cuerpo {
        --cuenta-w: min(45.9vw, 82.6vh);
        gap: 0;
        perspective: calc(var(--cuenta-w) * 9.4);
        perspective-origin: 50% 45%;
    }

    .cuenta-card {
        --cuenta-lado: 1;
        --cuenta-giro:
            translateX(calc(var(--cuenta-w) * 0.23))
            rotateX(16.8deg) rotateY(49.4deg) rotateZ(-10.1deg);
        flex-shrink: 0;
        width: var(--cuenta-w);
        transform-origin: 0 calc(var(--cuenta-w) * 0.5625);
    }

    .cuenta-card-segunda {
        --cuenta-lado: -1;
        --cuenta-giro:
            translateX(calc(var(--cuenta-w) * -0.23))
            rotateX(16.8deg) rotateY(-49.4deg) rotateZ(10.1deg);
        transform-origin: 100% calc(var(--cuenta-w) * 0.5625);
    }

    .destacada .cuenta-card[data-reveal] {
        transform: var(--cuenta-giro);
        translate: 0 -20px;
        transition-property: opacity, filter, translate;
    }

    .destacada.is-revealed .cuenta-card[data-reveal] {
        transform: var(--cuenta-giro);
        translate: none;
    }
}

/* El canto, el brillo y la sombra de la pantalla 3D van SIN media query:
   los comparte la cuenta única del celular, que también va girada (ver el
   bloque responsive). Leen --cuenta-w y --cuenta-lado de cada lado; el
   `@media all` solo conserva la sangría de cuando vivían en el de PC. */
@media all {
    /* El canto: una banda metálica detrás de la foto, en su mismo plano y
       asomando por la orilla de afuera. Brilla arriba y se apaga hacia
       abajo, como en la maqueta. También baja un poco (0.013 anchos): con
       la misma altura que la foto, su orilla de arriba asomaba por encima
       de la esquina redondeada, y en la maqueta el canto arranca debajo de
       ella. El radio es el mismo de la foto para que las esquinas casen. */
    .cuenta-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 16px;
        background: linear-gradient(to bottom, #d4d4d4 0%, #8a8a8a 12%, #4a4a4a 45%, #1c1c1c 85%, #111111 100%);
        translate: calc(var(--cuenta-w) * -0.016 * var(--cuenta-lado)) calc(var(--cuenta-w) * 0.013);
    }

    /* Al bajar la banda, entre su esquina de arriba y la de la foto quedaba
       un escalón, como si fuera otra tarjeta detrás. Este relleno va debajo
       de la banda, en su mismo sitio, y sus sombras sin desenfoque son
       copias en pasos de vuelta hacia la foto: tapan ese hueco para que el
       canto salga de la esquina misma. Cubre solo la mitad de arriba; entera,
       sus copias asomaban claras por la esquina de abajo y adentro. */
    .cuenta-card::after {
        --cx: calc(var(--cuenta-w) * 0.016 * var(--cuenta-lado));
        --cy: calc(var(--cuenta-w) * -0.013);
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: calc(var(--cuenta-w) * 0.28);
        border-radius: 16px 16px 0 0;
        translate: calc(var(--cuenta-w) * -0.016 * var(--cuenta-lado)) calc(var(--cuenta-w) * 0.013);
        box-shadow:
            calc(var(--cx) * 0.17) calc(var(--cy) * 0.17) 0 #cfcfcf,
            calc(var(--cx) * 0.33) calc(var(--cy) * 0.33) 0 #cfcfcf,
            calc(var(--cx) * 0.5) calc(var(--cy) * 0.5) 0 #cfcfcf,
            calc(var(--cx) * 0.67) calc(var(--cy) * 0.67) 0 #cfcfcf,
            calc(var(--cx) * 0.83) calc(var(--cy) * 0.83) 0 #cfcfcf;
    }

    /* La foto va encima del canto; debajo, la sombra que la despega del
       fondo. */
    .cuenta-img-box {
        z-index: 1;
        box-shadow: 0 34px 60px -14px rgba(0, 0, 0, 0.95);
    }

    /* El brillo del borde de arriba. Va en un ::after porque una sombra
       inset en la caja quedaría debajo de la imagen. */
    .cuenta-img-box::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }
}

@media (min-width: 901px) {
    .cuenta-titulo {
        max-width: 100%;
        font-size: calc(var(--cuenta-w) * 0.045);
        letter-spacing: 0.01em;
    }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
    .destacada .cuenta-card[data-reveal] { translate: none; }
}

/* Tablet apaisada: ahí el arco asoma 175px fijos y el precio lo pisaba. */
@media (min-width: 901px) and (max-width: 1023px) {
    .destacada-cuerpo { --cuenta-w: min(45.9vw, 60vh); }
}

.cuenta-mxn {
    font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.2rem, min(1.8vw, 3.4vh), 2.1rem);
    letter-spacing: -0.03em;
    color: #ffffff;
}

.cuenta-usd {
    font-weight: 500;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Pie: el botón al catálogo y el conteo debajo, centrados sobre el arco. */
.destacada-pie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

/* El mismo botón de cristal con relevo del hero, en su versión para fondo
   oscuro: borde de cristal claro, texto blanco y el círculo blanco con la
   flecha negra (el negro del hero se perdería aquí). */
.destacada .btn-hero {
    /* Más chico que el del hero (66px): aquí comparte el negro del arco con
       el conteo y no debe competir con las cuentas. */
    /* Más alto y con más aire a los dos lados (21 septiembre 2026, a pedido
       del dueño): +16px por lado, así texto y círculo no se mueven entre sí. */
    height: 62px;
    gap: 16px;
    padding: 0 23px 0 44px;
    font-size: 1rem;
    color: #ffffff;
    /* Fondo negro sólido: desde que el botón subió al brillo gris del arco,
       el cristal transparente dejaba ver el gris detrás. Queda solo el borde
       de cristal; el fondo negro tapa el ondulado del backdrop-filter. */
    background: #000000;
    box-shadow: var(--cristal-borde-claro);
}

.destacada .btn-hero-circulo {
    width: 40px;
    height: 40px;
    background: #ffffff;
    color: var(--tinta);
}

.destacada .btn-hero-flecha {
    width: 17px;
    height: 17px;
}

/* En escritorio SOLO el botón se sube hacia el borde del arco, que asoma un
   25% del alto (ver .corona-horizonte-arco); el conteo se queda abajo, donde
   siempre (lo pidió así el cliente). El margen abre hueco entre los dos para
   que el botón quede ~35px debajo de la cima del arco (antes ~60px; el
   dueño lo pidió más arriba el 21 septiembre 2026, aunque roce el brillo
   gris). 21.5vh = 25vh del arco − 3.5vh del padding de abajo; 9rem − 24px
   = esos ~35px + botón, hueco y conteo. */
@media (min-width: 1024px) {
    .destacada .btn-hero { margin-bottom: max(0px, calc(21.5vh - 9rem + 24px - 40px)); }
    /* El conteo sube 40px (21 septiembre 2026, a pedido del dueño); el
       botón le descuenta esos mismos 40px a su margen y no se mueve. */
    .destacada .destacada-pie-texto { margin-bottom: 40px; }
}

.destacada-pie-texto {
    margin: 0;
    text-align: center;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.destacada-pie-texto .acento-verde-claro { font-weight: 800; }

/* La frase de encima del botón es solo de celular (ver el bloque
   responsive); en PC el pie sigue siendo botón + conteo. */
.destacada-pie-lema { display: none; }

/* ==========================================
   📱 RESPONSIVE - CUENTA DESTACADA (CELULAR Y TABLET)
   ==========================================
   Aquí pasa LO MÁS IMPORTANTE de la sección en celular: se queda UNA SOLA
   cuenta. Al vivir dentro del pin del portal todo tiene que caber en una
   pantalla o se recorta, y dos no entran; por eso el rótulo de atrás
   (.corona-watermark) también esconde sus "s" y dice "CUENTA DESTACADA". */
@media (max-width: 900px) {

    .destacada {
        justify-content: center;
        gap: 1.4rem;
        /* El padding de arriba solo tiene que salvar la píldora, que en celular
           mide 44px con 16 de margen: 60px. */
        padding: clamp(4.25rem, 10vh, 4.75rem) 1.25rem 1.5rem;
    }

    /* Sin titular también en celular (21 septiembre 2026, a pedido del
       dueño), como en PC: la cuenta en 3D ya se presenta sola. */
    .destacada-titulo { display: none; }

    /* 👈 LA REGLA QUE DEJA UNA SOLA CUENTA EN CELULAR (la más cara). */
    .cuenta-card-segunda { display: none; }

    /* 🪟 La cuenta única va en 3D, pero DE FRENTE (21 septiembre 2026, a
       pedido del cliente): el giro de lado de PC solo tiene sentido con la
       otra cuenta enfrente formando la "V"; sola se veía coja. Aquí la misma
       pantalla con canto se echa hacia atrás por arriba, sin girar a ningún
       lado, así que sus orillas suben juntándose como un "/\". Gira sobre
       su borde de abajo; el texto va en el mismo plano, centrado. Con
       --cuenta-lado 0 el canto asoma solo por abajo, parejo. */
    .destacada-cuerpo {
        --cuenta-w: min(calc(100vw - 2.5rem), 560px);
        justify-content: center;
        margin-block: auto;
        perspective: calc(var(--cuenta-w) * 1.1);
        perspective-origin: 50% 40%;
    }

    .cuenta-card {
        --cuenta-lado: 0;
        --cuenta-giro: rotateX(22deg);
        flex-shrink: 0;
        width: var(--cuenta-w);
        transform-origin: 50% 100%;
        align-items: center;
        text-align: center;
    }

    .destacada .cuenta-card[data-reveal] {
        transform: var(--cuenta-giro);
        translate: 0 -20px;
        transition-property: opacity, filter, translate;
    }

    .destacada.is-revealed .cuenta-card[data-reveal] {
        transform: var(--cuenta-giro);
        translate: none;
    }

    .cuenta-titulo { font-size: calc(var(--cuenta-w) * 0.056); letter-spacing: 0.01em; }
    .cuenta-mxn { font-size: calc(var(--cuenta-w) * 0.085); }
    .cuenta-usd { font-size: calc(var(--cuenta-w) * 0.038); }

    /* El canto de frente asoma solo por abajo, más grueso que en PC. El
       degradado de PC se apaga hacia abajo (allá brilla por el costado), así
       que aquí va al revés: el brillo metálico en la franja de abajo, que es
       lo único que se ve. El relleno de la esquina (::after) no hace falta:
       sin corrimiento de lado no queda escalón arriba. */
    .cuenta-card::before {
        translate: 0 calc(var(--cuenta-w) * 0.03);
        background: linear-gradient(to top, #6a6a6a 0%, #d4d4d4 2.5%, #8a8a8a 5.5%, #1c1c1c 10%);
    }

    .cuenta-card::after { display: none; }

    /* En celular el conteo de debajo del botón se va y ENCIMA del botón
       entra una frase (maqueta del dueño, 21 septiembre 2026): el botón
       queda sobre el negro del arco y la frase sobre el gris, arriba. */
    .destacada-pie-texto { display: none; }

    /* El margin fija el hueco que ocupa en el flujo, y con él dónde quedan
       la cuenta y sus precios (el dueño los quiere ahí, no más arriba). Lo
       que sube la frase por encima del arco es el `top` relativo, que la
       mueve sin empujar nada; crece con el alto de la pantalla. */
    .destacada-pie-lema {
        display: block;
        position: relative;
        top: clamp(-5rem, 85px - 19vh, -1rem);
        /* +8px: lo que el botón perdió de alto (62 → 54), para que nada suba. */
        margin: 0 0 calc(3.6rem + 8px);
        max-width: 22em;
        text-align: center;
        font-weight: 700;
        font-size: clamp(0.8rem, 3.9vw, 1rem);
        line-height: 1.45;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: #ffffff;
    }

    /* El pie baja hasta el arco del horizonte, como en escritorio: el hueco
       que sobra se reparte a partes iguales encima del titular y encima del
       pie, así titular y cuenta quedan juntos y el botón cae sobre el negro
       del arco en vez de sobre el gris claro. */
    .destacada-titulo,
    .destacada-pie { margin-top: auto; }

    /* El .btn-hero de celular se estira y separa texto y círculo; aquí va a
       su ancho, centrado. */
    .destacada .btn-hero { justify-content: center; }

    /* Botón más chico en celular (21 septiembre 2026, a pedido del dueño):
       dice solo "Catálogo" (.btn-hero-sobra esconde " completo") y el
       círculo llega casi al filo, así queda una píldora corta y gordita. */
    .destacada .btn-hero {
        height: 54px;
        gap: 12px;
        padding: 0 7px 0 1.5rem;
        /* Sube hasta quedar justo debajo del borde gris del arco (que en
           celular asoma 175px fijos, así que el ajuste también es fijo).
           Con `top` relativo sube solo él: la cuenta y la frase no se mueven. */
        position: relative;
        top: -48px;
    }
}

/* Las palabras que sobran en los botones de celular ("completo", "Unirse
   a"): en PC se ven, en celular se van y el botón queda más corto. */
@media (max-width: 900px) {
    .btn-hero-sobra { display: none; }
}

/* Teléfonos de verdad pequeños (360x640 y parecidos). */
@media (max-width: 380px) {
    .destacada-titulo { font-size: clamp(1.7rem, 10vw, 2.3rem); }
    .destacada-pie-texto { font-size: 0.6rem; letter-spacing: 1.8px; }
}

/* Teléfonos bajos: el conteo sobra; lo que no puede faltar es la cuenta y el
   botón al catálogo. La cuenta se angosta (la foto va entera), que es lo que más alto
   ahorra sin tocar ningún texto. */
@media (max-width: 900px) and (max-height: 700px) {
    .destacada { gap: 1rem; }
    .destacada-pie-texto { display: none; }
    /* Aquí no hay alto para subir la frase entera: se pegaba al precio. */
    .destacada-pie-lema { top: -0.9rem; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .destacada .cuenta-card[data-reveal] { translate: none; }
}


/* ==========================================
   SECCIÓN 4: POR QUÉ ANXIE STORE
   ==========================================
   Las clases siguen llamándose .seccion-tres (y el wrapper sigue siendo
   #contacto, que es a donde apunta el enlace "Contacto" del menú): solo
   cambió de número al mudarse la cuenta destacada a la sección 3.

   Dos columnas, de una referencia del dueño (21 septiembre 2026): a la
   izquierda "¿Por qué Anxie Store?" con su historia y el botón para
   unirse al Discord, a la derecha la mascota del Discord en 3D
   (Spline). Reemplaza a las tres razones y a la tarjeta negra del Discord. */

/* ------------------------------------------------------------------------
   TRANSICIÓN SECCIÓN 3 -> 4: la sección blanca SUBE POR ENCIMA del portal.

   Es la pila de paneles pegajosos: el portal negro se queda quieto (su
   .corona-pin es sticky y le sobra una pantalla de solape) y la sección
   blanca le pasa por encima PLANA, con las esquinas de arriba redondeadas,
   como una hoja que se le apoya encima. No hay JS: lo hace el sticky de
   arriba más el margen negativo de acá abajo.

   Esto NO toca la corona ni el pin: el portal ni se entera, solo se le pasa
   algo por encima.
   ------------------------------------------------------------------------ */
.seccion-tres-scroll-wrapper {
    position: relative;
    /* 100% y NO 100vw: 100vw incluye el ancho de la barra de scroll, así que
       con barra clásica el panel medía 15px más de lo que se ve y el
       `overflow-x: hidden` del body le comía justo la esquina redondeada de la
       DERECHA (la izquierda, al estar en x=0, se veía bien). Lo mismo para
       .seccion-tres aquí abajo. */
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background-color: #ffffff;
    /* Se sube una pantalla entera para pasar POR ENCIMA del último tramo del
       portal, que todavía está pineado (.corona-pin). Esa pantalla se la
       agregamos al alto de .corona-portal, así que la página mide lo mismo que
       antes: solo cambia quién ocupa ese tramo. z-index 25 > 11 del portal. */
    margin-top: -100vh;
    /* Las esquinas que despegan el panel del negro de atrás. Van en el
       WRAPPER y no en .seccion-tres: el wrapper es quien pinta el blanco, así
       que si el radio fuera solo del hijo se vería el rectángulo blanco del
       padre asomando por las esquinas y se perdería el efecto. */
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    /* Recorta el contenido a las esquinas redondeadas. */
    overflow: hidden;
    z-index: 25;
}

.seccion-tres {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* En vh para que en laptops bajitas (720px) la sección no pase de una
       pantalla, igual que la 1 y la 2. */
    padding: clamp(4.5rem, 10vh, 6rem) 3.5rem;
    overflow: hidden;
}

/* La cuadrícula de arriba (21 septiembre 2026, a pedido del dueño): la misma
   de la sección 2 (.corona-horizonte-rejilla), mismo paso de 6rem x 5rem y
   misma elipse que la desvanece, pero con líneas oscuras porque aquí el
   fondo es blanco. Cubre la sección entera, así que la elipse (alta como
   media sección) la apaga justo hacia la mitad. Va debajo del contenido
   (que tiene z-index 10). */
.seccion-tres::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, #e4e4e4 1px, transparent 1px),
        linear-gradient(to bottom, #e4e4e4 1px, transparent 1px);
    background-size: 6rem 5rem;
    -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
            mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
    pointer-events: none;
}

/* 🌑 EL ARCO DEL PIE (21 septiembre 2026, a pedido del dueño) — el mismo de
   la sección 2 (.corona-horizonte-arco): una elipse negra con el borde
   encendido en gris, asomando por abajo. Aquí va quieto (sin la subida del
   portal) y sobre blanco. Su negro es #000, el del footer.

   Sus medidas NO son las de la sección 2, y es a propósito: allá el arco no
   toca nada abajo, aquí el footer lo corta en seco, y con 120% de ancho las
   orillas llegaban al corte todavía en la franja gris del borde. El borde
   ocupa del 82% al 100% del radio; para que en la línea del footer toda la
   pantalla ya esté en el negro, el ancho es 130% (la orilla de la pantalla
   queda al 77% del radio) y el alto 2.6 veces lo que asoma (el corte queda
   cerca del centro de la elipse). Así el gris se sale de la pantalla por
   los lados antes de llegar al footer, en cualquier pantalla, porque las
   dos medidas son proporcionales.
   La sección suma abajo lo que asoma el arco (--s3-arco-asoma, en :root
   porque el footer también la usa) para que el
   contenido no le quede encima. La píldora no necesita tema para él: la
   página se acaba antes de que el arco suba hasta ella. */
:root { --s3-arco-asoma: 25vh; }

.seccion-tres {
    padding-bottom: calc(var(--s3-arco-asoma) + 1rem);
}

.s3-arco {
    position: absolute;
    left: 50%;
    top: calc(100% - var(--s3-arco-asoma));
    z-index: 1;
    width: 130%;
    height: calc(var(--s3-arco-asoma) * 2.6);
    transform: translateX(-50%);
    border-radius: 100%;
    /* El mismo degradado del de la sección 2, más un último paso a
       transparente para que el borde no corte en seco contra el blanco. */
    background: radial-gradient(closest-side, #000000 82%, #999999 98.5%, rgba(153, 153, 153, 0) 100%);
    pointer-events: none;
}

/* Los mismos escalones que el de la sección 2 (solo cambia lo que asoma;
   ancho y alto lo siguen solos). */
@media (max-width: 1023px) {
    :root { --s3-arco-asoma: 175px; }
}

@media (max-width: 767px) {
    :root { --s3-arco-asoma: 120px; }
}

/* Contenedor principal en Grid de 2 Columnas (ORIGINAL DE PC) */
.seccion-tres-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1280px;
    display: grid;
    /* La izquierda pesa un poco más: lleva el titular grande y la lista. */
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4.5rem;
    align-items: center;
}

/* 🌟 LA OLA DE LA SECCIÓN 3 Y DEL FOOTER (21 septiembre 2026, a pedido del
   dueño) — la misma entrada que el contenido de la sección 2 (ver "La ola,
   de ida y de vuelta"): cada pieza baja desde arriba desenfocada, escalonada
   por --n, y al subir se va con la ola al revés. Reemplaza el deslizado
   lateral que tenía la sección 3.

   A diferencia de la sección 2, aquí el estado escondido SÍ depende del JS:
   index.html les pone .revela al arrancar y luego quita y pone .is-revealed
   al scrollear. Sin JS no hay .revela y todo se ve. catalogo.html y
   legal.html hacen lo mismo con su footer en un script propio, al final de
   cada página. */
.seccion-tres.revela {
    /* El --n más alto del markup (el botón). */
    --n-ultimo: 2;
}

.footer-social.revela {
    /* El --n más alto del markup (el copyright). */
    --n-ultimo: 2;
}

.revela [data-reveal] {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-20px);
    transition: opacity 360ms ease, filter 360ms ease, transform 360ms ease;
    transition-delay: calc((var(--n-ultimo) - var(--n, 0)) * 60ms);
}

.revela.is-revealed [data-reveal] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: opacity 520ms ease, filter 520ms ease, transform 520ms ease;
    transition-delay: calc(var(--n, 0) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
    .revela [data-reveal],
    .revela.is-revealed [data-reveal] {
        filter: none;
        transform: none;
        transition: opacity 200ms ease;
        transition-delay: 0s;
    }
}

/* 📍 IZQUIERDA: EL TEXTO
   Acomodo de una referencia del dueño (21 septiembre 2026): titular grande
   en negro, un párrafo y el botón de cristal del hero (.btn-hero), aquí
   "Unirse a Discord" (la pastilla de arriba y el segundo botón de la
   referencia se quitaron a pedido del dueño). Las
   tipografías son las del resto del sitio, no las de la referencia: el
   titular en Plus Jakarta Sans 800 como la marca del hero y el titular de la
   sección 2, todo lo demás en Montserrat como los textos del hero. */
.s3-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
}

/* Todo en negro (la segunda mitad iba en gris, como en la referencia, y el
   dueño la pidió negra). */
.s3-titulo {
    font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(2.6rem, 5.2vw, 5rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    color: var(--tinta);
    max-width: 11ch;
}

/* "ANXIE STORE?" en su propio renglón, también en el celular. */
.s3-titulo-linea { display: block; }

.s3-parrafo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--gris-texto);
    max-width: 500px;
}

.s3-botones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.6rem;
    margin-top: 0.4rem;
}

/* 📍 DERECHA: LA MASCOTA DEL DISCORD (Spline). Cuadrada y sin fondo propio:
   la escena ya trae el blanco. No lleva data-reveal a propósito (ver el
   comentario del markup). */
.s3-mascota {
    justify-self: end;
    width: min(100%, 560px, 68vh);
    aspect-ratio: 1;
}

.s3-mascota spline-viewer {
    display: block;
    width: 100%;
    height: 100%;
}

/* El logo de Discord que reemplaza a la mascota en celular. En PC no se ve
   (y, como es loading="lazy", ni se descarga). */
.s3-mascota-logo {
    display: none;
}

/* 📱 RESPONSIVE (MÓVILES)
   La sección mide UNA pantalla, como el hero y el portal: la mascota va
   arriba y más chica, y debajo el texto. */
@media (max-width: 900px) {
    /* Esquinas un poco más chicas: a 390px de ancho, 28px se comía el título. */
    .seccion-tres-scroll-wrapper {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    /* Arriba deja libre la píldora del menú. */
    .seccion-tres {
        min-height: 100vh;
        min-height: 100svh;
        padding: 4.6rem 1.25rem calc(var(--s3-arco-asoma) + 1rem);
    }

    .seccion-tres-container {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    /* En celular no hay mascota 3D (23 septiembre 2026, decisión del dueño:
       la escena viva dejaba la página a la mitad de fluidez en su
       teléfono). En su lugar va el logo de Discord en azul, una imagen
       quieta, en la misma caja cuadrada de siempre, así que el texto de
       abajo no se mueve. El visor ni se descarga (ver index.html). */
    .s3-mascota {
        --mascota: 280px;
        order: -1;
        justify-self: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--mascota);
        height: var(--mascota);
        aspect-ratio: auto;
        pointer-events: none;
    }

    .s3-mascota spline-viewer {
        display: none;
    }

    .s3-mascota-logo {
        display: block;
        width: 70%;
        height: auto;
    }

    /* Todo centrado en celular (21 septiembre 2026, a pedido del dueño):
       titular, párrafo y botón, bajo la mascota que ya va al centro. */
    .s3-texto {
        gap: 1rem;
        align-items: center;
        text-align: center;
    }

    .s3-botones { justify-content: center; }

    .s3-titulo {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
        max-width: none;
    }

    .s3-parrafo {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .s3-botones { margin-top: 0.2rem; gap: 0.8rem 1.3rem; }

    /* El mismo botón corto y gordito que el de la sección 2: solo
       "Discord" (.btn-hero-sobra esconde "Unirse a") y más chico. */
    .s3-botones .btn-hero {
        height: 54px;
        gap: 12px;
        padding: 0 7px 0 1.5rem;
        font-size: 1rem;
    }

    .s3-botones .btn-hero-circulo {
        width: 40px;
        height: 40px;
    }

    .s3-botones .btn-hero-flecha {
        width: 17px;
        height: 17px;
    }

}

/* Teléfonos bajitos (SE, Android compactos): el logo se encoge para que
   todo siga entrando en una pantalla. */
@media (max-width: 900px) and (max-height: 700px) {
    .seccion-tres { padding: 4.2rem 1.25rem calc(var(--s3-arco-asoma) + 0.5rem); }
    .s3-mascota { --mascota: 210px; }
    .s3-texto { gap: 0.8rem; }
}

/* ==========================================
   FOOTER
   ==========================================
   Columna centrada: atajos -> redes -> la marca gigante "AnxieStore" en
   contorno -> una fila con el aviso legal a la izquierda y el copyright a
   la derecha (22 septiembre 2026, de una referencia del dueño; ahí se quitó
   también la franja rayada en movimiento y "Aviso Legal" bajó de los
   atajos a esa fila).
   Lo comparten index, catalogo y legal, y los tres usan el MISMO markup
   (solo cambian los href de "Inicio" y "Contacto" segun la pagina).
   El <footer> conserva la clase .footer-social porque actualizarMenu() en
   index.html la busca por ese nombre para ponerle el tema 'oscuro' a la
   pildora. */
.footer-social {
    position: relative;
    z-index: 30;
    width: 100%;
    /* Negro puro (21 septiembre 2026, a pedido del dueño). Antes era --negro
       (#101010) para no hacer escalón con el portal, pero en index.html entre
       los dos está la sección 3, blanca. Lo comparten index, catalogo y
       legal. */
    background-color: #000000;
    padding: 3rem 0 2rem 0;
    overflow: hidden;
}

/* En index.html el footer va justo después de la sección 4 y su arco negro
   (ver EL ARCO DEL PIE): se sube la mitad de lo que asoma el arco para que
   los atajos y las redes queden dentro del negro del arco (22 septiembre
   2026, a pedido del dueño). La franja que se monta sobre la sección es
   transparente: el negro de ahí lo pone el arco, y un rectángulo negro
   taparía sus orillas, que a esa altura todavía están en el borde gris.
   catalogo.html y legal.html llevan el mismo arco en su propia franja
   (.pie-arco, más abajo) y el mismo montaje. */
.seccion-tres-scroll-wrapper + .footer-social,
.pie-arco + .footer-social {
    --footer-jalon: calc(var(--s3-arco-asoma) * 0.5);
    margin-top: calc(var(--footer-jalon) * -1);
    background: linear-gradient(to bottom, transparent var(--footer-jalon), #000000 var(--footer-jalon));
}

/* En celular el corte entre la sección 3 y el footer cae en medio píxel
   (el arco asoma 120px y el footer sube la mitad) y en el teléfono se veía
   una rayita gris de lado a lado. El negro del footer arranca 2px antes y
   la tapa; ahí el arco ya es negro, así que no se nota la diferencia. */
@media (max-width: 900px) {
    .seccion-tres-scroll-wrapper + .footer-social,
    .pie-arco + .footer-social {
        background: linear-gradient(to bottom, transparent calc(var(--footer-jalon) - 2px), #000000 calc(var(--footer-jalon) - 2px));
    }
}

/* 🌑 EL ARCO DEL PIE EN catalogo.html Y legal.html (22 septiembre 2026, a
   pedido del dueño: el footer tiene que ser el mismo en todo el sitio). En
   index el arco cuelga del fondo de la sección 3, que le reserva hueco con
   su padding de abajo; aquí no hay sección 3, así que va en una franja
   propia, alta justo lo que asoma, entre el contenido y el footer. Dentro
   va el mismo .s3-arco de index: con la franja así de alta, su
   `top: calc(100% - asoma)` lo deja arriba del todo, y el overflow lo corta
   igual que la sección 3. Como es un bloque aparte, no tapa nada del
   contenido: solo suma su alto. Sin fondo: encima asoma el de la página
   (blanco en el catálogo, negro en el aviso legal). */
.pie-arco {
    position: relative;
    height: var(--s3-arco-asoma);
    overflow: hidden;
    pointer-events: none;
}

.footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 3rem 1rem;
}

/* ====== ATAJOS DEL FOOTER ====== */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}

.footer-nav-link {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* La pastilla del hover crece desde el centro (::before va detras del texto,
   por eso el <span> del markup lleva position: relative). */
.footer-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.10);
    opacity: 0;
    transform: scale(0.6);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25), opacity 0.25s ease;
}

.footer-nav-link span {
    position: relative;
    z-index: 1;
}

.footer-nav-link:hover {
    color: #ffffff;
    transform: scale(1.05);
}

.footer-nav-link:hover::before {
    opacity: 1;
    transform: scale(1);
}

.footer-nav-link:active {
    transform: scale(0.95);
}

/* ====== REDES SOCIALES ====== */
.footer-redes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
}

.footer-social-link {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-social-link:hover,
.footer-social-link:active {
    opacity: 0.7;
    transform: scale(1.1);
}

/* ====== LA MARCA GIGANTE ======
   De una referencia del dueño (22 septiembre 2026): "AnxieStore" de orilla a
   orilla, solo el contorno de las letras (texto transparente con un trazo
   fino), "Store" en cursiva, y apagándose hacia abajo con una máscara hasta
   casi desaparecer justo encima de la fila del copyright. Montserrat, que es
   la única familia que cargan las tres páginas. El tamaño en vw hace que
   ocupe siempre el mismo ancho: con 19vw la palabra va de orilla a orilla
   dejando un 2% a cada lado (medido en el navegador). Si cambias el peso,
   el espaciado o el texto, vuelve a medirlo. */
.footer-marca {
    margin: 0;
    padding: 0 2vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 19vw;
    line-height: 0.9;
    letter-spacing: -0.03em;
    white-space: nowrap;
    /* Relleno negro PINTADO ENCIMA del trazo (paint-order): Montserrat es
       variable y sus letras son piezas que se enciman, así que un trazo
       solo dibujaba también las costuras de adentro (un cuadrito en la "x",
       la barra de la "e"). Con el relleno encima, la mitad interior del
       trazo y esas costuras quedan tapadas y solo se ve el borde de afuera.
       Por eso el trazo es de 2px: se ve 1px. El negro es el del footer. */
    color: #000000;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.36);
    paint-order: stroke fill;
    -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 92%);
            mask-image: linear-gradient(to bottom, #000 25%, transparent 92%);
    user-select: none;
    pointer-events: none;
}

.footer-marca em { font-style: italic; }

/* ====== FILA DE ABAJO: AVISO LEGAL Y COPYRIGHT ====== */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    width: 100%;
    padding: 1.2rem 2vw 0;
}

.footer-legal {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-legal:hover { color: #ffffff; }

.footer-copy {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    /* Blanco translucido y no un gris fijo: aguanta igual el footer negro
       y cualquier fondo oscuro que se le ponga. */
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.2px;
}

/* 📱 RESPONSIVE FOOTER */
@media (max-width: 900px) {
    .footer-social {
        padding: 2.5rem 0 1.5rem 0;
    }

    .footer-top {
        gap: 1.75rem;
        padding-bottom: 2.25rem;
    }

    .footer-nav {
        gap: 0.25rem 0.5rem;
    }

    .footer-nav-link {
        font-size: 0.9rem;
        padding: 0.45rem 0.65rem;
    }

    .footer-redes {
        gap: 1.4rem;
    }


    /* En celular la fila se apila y se centra. */
    .footer-bottom {
        flex-direction: column;
        padding-top: 1rem;
    }

    .footer-legal,
    .footer-copy {
        font-size: 0.74rem;
    }
}

/* =========================================================================
   🟢 VENTANA DE BIENVENIDA (solo index.html)
   =========================================================================
   Calcada de una maqueta que mandó el dueño: tarjeta blanca de esquinas
   redondas, la foto a la izquierda, el texto a la derecha y la X arriba a la
   derecha. En el sitio de la foto va, por ahora, el logo de Discord en
   blanco sobre negro, y un solo botón que lleva al Discord. La letra no
   es la de la maqueta sino la de la portada, a petición del dueño: el título
   como la marca "ANXIE STORE" (Plus Jakarta Sans 800, mayúsculas, apretada) y
   el resto en Montserrat, como los datos y el botón del hero.

   Es un <dialog> abierto con showModal(): va en la capa superior del
   navegador, por encima de la píldora, sin z-index. Dos trampas del <dialog>:
   - el reset de arriba (* { margin: 0 }) le quita el margin: auto que lo
     centra en pantalla; aquí se le devuelve;
   - el display va solo en [open]: puesto en la regla base, le ganaría a su
     display: none y la ventana se vería también cerrada. */
.bienvenida {
    margin: auto;
    padding: 0;
    border: 0;
    width: min(800px, 100% - 48px);
    max-width: none;
    max-height: calc(100% - 48px);
    overflow: hidden auto;
    border-radius: 24px;
    background: #ffffff;
    color: var(--tinta);
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
    /* El JS le pone el foco a la propia ventana al abrir; no lleva anillo. */
    outline: none;
}

.bienvenida[open] {
    display: grid;
    grid-template-columns: 45% 1fr;
    animation: bienvenida-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* El velo: negro al 40%, como en la maqueta. Colores literales y no
   variables: hay navegadores en los que ::backdrop no hereda las de :root. */
.bienvenida::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

.bienvenida[open]::backdrop {
    animation: bienvenida-velo-in 420ms ease both;
}

/* La salida. El JS pone .is-cerrando, espera a que acabe y llama a close(). */
.bienvenida.is-cerrando {
    animation: bienvenida-out 240ms ease both;
}

.bienvenida.is-cerrando::backdrop {
    animation: bienvenida-velo-out 240ms ease both;
}

@keyframes bienvenida-in {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
}

@keyframes bienvenida-out {
    to {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
}

@keyframes bienvenida-velo-in {
    from { opacity: 0; }
}

@keyframes bienvenida-velo-out {
    to { opacity: 0; }
}

/* Mientras está abierta la página de atrás no se mueve: el mismo overflow:
   hidden en el body que usa el panel del menú en celular. El scrollbar-gutter
   guarda el hueco de la barra de scroll, que si no desaparece al abrir y
   vuelve al cerrar, y la página de atrás salta de lado las dos veces.
   Ese hueco el velo no lo tapa (el navegador no deja pintar ahí) y enseña el
   fondo del lienzo, que es el negro del body: quedaba una franja negra a la
   derecha. #999 es el blanco del hero bajo el velo al 40%, que es lo que hay
   en ese borde cuando la ventana sale, al cargar. Solo se ve en PC con barra
   de scroll clásica (Windows); en Mac y en celular la barra flota y no hay
   hueco. */
html.bienvenida-abierta {
    scrollbar-gutter: stable;
    background: #999999;
}

html.bienvenida-abierta body {
    overflow: hidden;
}

/* --- El hueco de la foto: negro, con el logo de Discord al centro --- */
.bienvenida__foto {
    display: grid;
    place-items: center;
    background: var(--negro);
    /* 544px es el alto de la tarjeta de la maqueta a 800 de ancho. En una
       pantalla más baja manda el alto de la pantalla. */
    min-height: min(544px, 100vh - 48px);
    min-height: min(544px, 100dvh - 48px);
}

/* El logo ya viene blanco y recortado a su silueta (ver el HTML). En PC se
   mide por el ancho de la columna; en celular, por el alto de la franja. */
.bienvenida__logo {
    display: block;
    width: 46%;
    height: auto;
}

/* --- El texto --- */
.bienvenida__cuerpo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
}

.bienvenida__titulo {
    font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 50px;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    color: var(--tinta);
    margin-bottom: 18px;
}

.bienvenida__texto {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--tinta);
    margin-bottom: 24px;
}

/* --- El botón de Discord: píldora negra. Es un enlace; el align-self evita
   que la columna flex lo estire a todo el ancho. --- */
.bienvenida__btn {
    align-self: flex-start;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--tinta);
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.bienvenida__btn:hover {
    background: #3a3a3a;
}

/* --- La X --- */
.bienvenida__cerrar {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--tinta);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bienvenida__cerrar:hover {
    background: #e5e5e5;
}

.bienvenida__cerrar svg {
    width: 22px;
    height: 22px;
}

.bienvenida__btn:focus-visible,
.bienvenida__cerrar:focus-visible {
    outline: 2px solid var(--tinta);
    outline-offset: 2px;
}

/* 📱 En celular (y tablet vertical) se apila: la foto arriba, el texto
   abajo, y la X queda sobre el negro de la foto. */
@media (max-width: 900px) {
    .bienvenida {
        width: min(480px, 100% - 32px);
        max-height: calc(100% - 32px);
        border-radius: 20px;
    }

    .bienvenida[open] {
        grid-template-columns: 1fr;
    }

    .bienvenida__foto {
        --bienvenida-franja: clamp(150px, 30svh, 280px);
        min-height: 0;
        height: var(--bienvenida-franja);
    }

    /* El alto del logo sale de la misma medida de la franja y no de un
       height: 44%: en WebKit un % de alto en un hijo de grid con la fila en
       auto no se resuelve, y el logo salía a su tamaño natural (496px),
       tapando el título. */
    .bienvenida__logo {
        width: auto;
        height: calc(var(--bienvenida-franja) * 0.44);
    }

    .bienvenida__cuerpo {
        padding: 28px 24px;
    }

    .bienvenida__titulo {
        font-size: clamp(32px, 9.5vw, 44px);
        margin-bottom: 14px;
    }

    .bienvenida__texto {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .bienvenida__cerrar {
        top: 12px;
        right: 12px;
    }
}

/* Con el movimiento reducido entra y sale sin animación (el JS tampoco
   espera a la salida). Va al final para ganarle a las reglas de arriba. */
@media (prefers-reduced-motion: reduce) {
    .bienvenida[open],
    .bienvenida[open]::backdrop,
    .bienvenida.is-cerrando,
    .bienvenida.is-cerrando::backdrop {
        animation: none;
    }
}