/* =========================================================================
   Malena — sistema de diseño
   Un solo archivo. Dos temas (claro / oscuro, siguiendo al navegador y con
   interruptor manual) y dos ambientes: "calmo" (por defecto) y "hot", que
   cambia la paleta y el ambiente de las paginas +18.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */

:root {
    color-scheme: light dark;

    /* tipografia */
    --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* ritmo */
    --u: 4px;
    --radio-s: 10px;
    --radio: 16px;
    --radio-l: 24px;
    --radio-xl: 32px;
    --ancho: 1120px;
    --ancho-texto: 68ch;

    /* detalle de dos tonos de los iconos (entra en el shadow DOM de <use>) */
    --ico-detalle: currentColor;

    /* transiciones */
    --suave: 220ms cubic-bezier(.22, .61, .36, 1);
    --lento: 600ms cubic-bezier(.22, .61, .36, 1);
}

/* --- tema claro (base) --- */
:root {
    --ico-detalle: var(--acento);
    --fondo: #f7f3ef;
    --fondo-2: #efe8e1;
    --superficie: #fffdfb;
    --superficie-2: #faf5f0;
    --borde: #e4d9cd;
    --borde-fuerte: #d3c3b3;
    --tinta: #1d1720;
    --tinta-2: #574c5b;
    --tinta-3: #857a89;

    --acento: #b0523a;
    --acento-fuerte: #8e3b26;
    --acento-suave: #f3e0d5;
    --acento-tinta: #fffaf7;
    --segundo: #4a2c48;

    --exito: #2f6f4f;
    --aviso: #9a6414;
    --error: #a32f3c;

    --sombra-s: 0 1px 2px rgba(40, 26, 20, .05), 0 2px 8px rgba(40, 26, 20, .05);
    --sombra: 0 2px 4px rgba(40, 26, 20, .05), 0 12px 32px -12px rgba(40, 26, 20, .18);
    --sombra-l: 0 4px 8px rgba(40, 26, 20, .06), 0 32px 64px -24px rgba(40, 26, 20, .28);

    --velo: rgba(255, 253, 251, .72);
    --collage-velo: 70%;   /* cuanto fondo se pone encima del collage */
    --collage-luz: 1.06;
    --grano: .035;
    --aurora-1: rgba(176, 82, 58, .30);
    --aurora-2: rgba(74, 44, 72, .24);
    --aurora-3: rgba(214, 158, 108, .28);
}

/* --- tema oscuro --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema='claro']) {
        --fondo: #100d13;
        --fondo-2: #171320;
        --superficie: #17131c;
        --superficie-2: #1e1826;
        --borde: #2b2334;
        --borde-fuerte: #3d3348;
        --tinta: #f3ece6;
        --tinta-2: #b9aec2;
        --tinta-3: #877d93;

        --acento: #e0906f;
        --acento-fuerte: #f0a887;
        --acento-suave: #33212a;
        --acento-tinta: #1a1016;
        --segundo: #c4a3d4;

        --exito: #6cc79a;
        --aviso: #e0b063;
        --error: #f08a94;

        --sombra-s: 0 1px 2px rgba(0, 0, 0, .4);
        --sombra: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px -16px rgba(0, 0, 0, .7);
        --sombra-l: 0 4px 8px rgba(0, 0, 0, .4), 0 40px 80px -32px rgba(0, 0, 0, .85);

        --velo: rgba(23, 19, 28, .72);
        --collage-velo: 48%;
        --collage-luz: .85;
        --grano: .06;
        --aurora-1: rgba(224, 144, 111, .30);
        --aurora-2: rgba(150, 106, 190, .30);
        --aurora-3: rgba(224, 96, 120, .26);
    }
}

:root[data-tema='oscuro'] {
    --fondo: #100d13;
    --fondo-2: #171320;
    --superficie: #17131c;
    --superficie-2: #1e1826;
    --borde: #2b2334;
    --borde-fuerte: #3d3348;
    --tinta: #f3ece6;
    --tinta-2: #b9aec2;
    --tinta-3: #877d93;

    --acento: #e0906f;
    --acento-fuerte: #f0a887;
    --acento-suave: #33212a;
    --acento-tinta: #1a1016;
    --segundo: #c4a3d4;

    --exito: #6cc79a;
    --aviso: #e0b063;
    --error: #f08a94;

    --sombra-s: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px -16px rgba(0, 0, 0, .7);
    --sombra-l: 0 4px 8px rgba(0, 0, 0, .4), 0 40px 80px -32px rgba(0, 0, 0, .85);

    --velo: rgba(23, 19, 28, .72);
    --collage-velo: 48%;
    --collage-luz: .8;
    --grano: .06;
    --aurora-1: rgba(224, 144, 111, .30);
    --aurora-2: rgba(150, 106, 190, .30);
    --aurora-3: rgba(224, 96, 120, .26);
}

/* --- ambiente hot: se aplica sobre cualquiera de los dos temas --- */
:root[data-vibe='hot'] {
    --fondo: #fdf4f4;
    --fondo-2: #f8e7e8;
    --superficie: #fffafa;
    --superficie-2: #fdf0f0;
    --borde: #f0d5d8;
    --borde-fuerte: #e2b2b8;
    --tinta: #24101a;
    --tinta-2: #6b4551;
    --tinta-3: #9a7480;

    --acento: #c81d47;
    --acento-fuerte: #a3113a;
    --acento-suave: #fbdde4;
    --acento-tinta: #fff7f8;
    --segundo: #7a2450;

    --velo: rgba(255, 250, 250, .74);
    --collage-velo: 64%;
    --collage-luz: 1.04;
    --aurora-1: rgba(200, 29, 71, .32);
    --aurora-2: rgba(122, 36, 80, .26);
    --aurora-3: rgba(240, 120, 90, .30);
}

@media (prefers-color-scheme: dark) {
    :root[data-vibe='hot']:not([data-tema='claro']) {
        --fondo: #120609;
        --fondo-2: #1d0a11;
        --superficie: #1a080e;
        --superficie-2: #240c14;
        --borde: #3a1420;
        --borde-fuerte: #55202f;
        --tinta: #fbe9ec;
        --tinta-2: #d3a7b2;
        --tinta-3: #a2798a;

        --acento: #ff587c;
        --acento-fuerte: #ff7d97;
        --acento-suave: #3d0f1e;
        --acento-tinta: #24090f;
        --segundo: #e08bb8;

        --velo: rgba(26, 8, 14, .74);
        --collage-velo: 44%;
        --collage-luz: .8;
        --grano: .07;
        --aurora-1: rgba(255, 88, 124, .34);
        --aurora-2: rgba(150, 40, 110, .32);
        --aurora-3: rgba(255, 140, 90, .26);
    }
}

:root[data-vibe='hot'][data-tema='oscuro'] {
    --fondo: #120609;
    --fondo-2: #1d0a11;
    --superficie: #1a080e;
    --superficie-2: #240c14;
    --borde: #3a1420;
    --borde-fuerte: #55202f;
    --tinta: #fbe9ec;
    --tinta-2: #d3a7b2;
    --tinta-3: #a2798a;

    --acento: #ff587c;
    --acento-fuerte: #ff7d97;
    --acento-suave: #3d0f1e;
    --acento-tinta: #24090f;
    --segundo: #e08bb8;

    --velo: rgba(26, 8, 14, .74);
    --collage-velo: 44%;
    --collage-luz: .75;
    --grano: .07;
    --aurora-1: rgba(255, 88, 124, .34);
    --aurora-2: rgba(150, 40, 110, .32);
    --aurora-3: rgba(255, 140, 90, .26);
}

/* sobre fondos ya teñidos de acento el detalle vuelve a ser del color del trazo */
.boton, .marco-ico, .chip, .plan li, .globo-el, .bloque-hot .boton, .sobretitulo {
    --ico-detalle: currentColor;
}

/* ---------- 2. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: background var(--suave), color var(--suave);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.022em;
    margin: 0;
    text-wrap: balance;
    font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 40;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--acento); color: var(--acento-tinta); }

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
    border-radius: 4px;
}

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

/* ---------- 3. Fondo vivo ---------- */

.ambiente {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    background: var(--fondo);
}

/* manchas de color muy difusas que respiran. la animacion va en `transform` y
   el seguimiento del raton en `translate`, que es una propiedad aparte: asi una
   cosa no pisa a la otra. */
.ambiente::before,
.ambiente::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform, translate;
    transition: translate 700ms cubic-bezier(.16, .8, .3, 1);
}

.ambiente::before { translate: calc(var(--mx, 0) * 46px) calc(var(--my, 0) * 34px + var(--sy, 0) * -60px); }
.ambiente::after  { translate: calc(var(--mx, 0) * -34px) calc(var(--my, 0) * -26px + var(--sy, 0) * 90px); }
.ambiente i       { translate: calc(var(--mx, 0) * 24px) calc(var(--my, 0) * 30px + var(--sy, 0) * -40px); }

.ambiente::before {
    width: 65vmax; height: 65vmax;
    top: -22vmax; right: -14vmax;
    background: radial-gradient(circle at 40% 40%, var(--aurora-1), transparent 68%);
    animation: derivaA 26s ease-in-out infinite alternate;
}

.ambiente::after {
    width: 58vmax; height: 58vmax;
    bottom: -24vmax; left: -16vmax;
    background: radial-gradient(circle at 60% 50%, var(--aurora-2), transparent 68%);
    animation: derivaB 32s ease-in-out infinite alternate;
}

.ambiente i {
    position: absolute;
    width: 42vmax; height: 42vmax;
    top: 40%; left: 45%;
    border-radius: 50%;
    filter: blur(80px);
    background: radial-gradient(circle, var(--aurora-3), transparent 66%);
    animation: derivaC 38s ease-in-out infinite alternate;
    will-change: transform, translate;
    transition: translate 900ms cubic-bezier(.16, .8, .3, 1);
}

@keyframes derivaA { to { transform: translate3d(-8vmax, 6vmax, 0) scale(1.15); } }
@keyframes derivaB { to { transform: translate3d(7vmax, -5vmax, 0) scale(1.1); } }
@keyframes derivaC { to { transform: translate3d(-10vmax, -8vmax, 0) scale(.9); } }

/* grano finisimo por encima: quita el aspecto de degradado plano */
.grano {
    position: fixed;
    inset: -50%;
    z-index: -1;
    pointer-events: none;
    opacity: var(--grano);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* collage difuminado opcional en las paginas hot (assets/bg-collage.jpg) */
.ambiente.con-collage {
    background-image: var(--collage);
    background-size: cover;
    background-position: center;
}

.ambiente.con-collage::before,
.ambiente.con-collage::after { opacity: .5; }

.ambiente.con-collage > u {
    position: absolute;
    inset: 0;
    /* la imagen ya viene difuminada: aqui solo se unifica y se baja la luz
       lo justo para que el texto se lea encima */
    backdrop-filter: blur(6px) saturate(115%) brightness(var(--collage-luz));
    -webkit-backdrop-filter: blur(6px) saturate(115%) brightness(var(--collage-luz));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--fondo) calc(var(--collage-velo) + 12%), transparent),
        color-mix(in srgb, var(--fondo) var(--collage-velo), transparent) 38%);
}

/* ---------- 4. Estructura ---------- */

.envoltura {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 40px);
}

.seccion { padding-block: clamp(30px, 3.8vw, 52px); }
.seccion-fina { padding-block: clamp(22px, 2.6vw, 34px); }

/* encabezado de seccion: sobretitulo + titulo + bajada, siempre igual */
.cabeza {
    display: grid;
    gap: 10px;
    max-width: 58ch;
    margin-bottom: clamp(20px, 2.6vw, 30px);
}

/* titular de una sola linea: ocupa todo el ancho disponible sin partirse.
   El tamano se queda por debajo del titulo de portada justo para que quepa. */
.cabeza-ancha { max-width: none; }

.titulo-ancho {
    max-width: none;
    font-size: clamp(1.9rem, 4vw, 3rem);
}

@media (min-width: 900px) {
    .titulo-ancho { white-space: nowrap; }
}

.pila { display: grid; gap: 16px; }
.pila-s { display: grid; gap: 10px; }
.pila-l { display: grid; gap: 28px; }

/* ---------- 5. Cabecera ---------- */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--velo);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--suave), background var(--suave);
}

.cabecera.pegada { border-bottom-color: var(--borde); }

.cabecera .envoltura {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 68px;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.03em;
    text-decoration: none;
    color: var(--tinta);
    margin-right: auto;
    transition: opacity var(--suave);
}

.marca:hover { opacity: .78; }

.marca .ico {
    width: 30px; height: 30px;
    color: var(--tinta);
}

.marca .relleno { color: var(--acento); }

.menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

.menu a {
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--tinta-2);
    text-decoration: none;
    transition: color var(--suave), background var(--suave);
    white-space: nowrap;
}

.menu a:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.menu a[aria-current='page'] { color: var(--acento); }

.tema {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--tinta-2);
    cursor: pointer;
    transition: color var(--suave), border-color var(--suave), transform var(--suave);
    flex: none;
}

.tema:hover { color: var(--acento); border-color: var(--borde-fuerte); transform: rotate(-12deg); }
.tema .ico { width: 18px; height: 18px; }
.tema .luna { display: none; }
:root[data-tema='oscuro'] .tema .luna, :root:not([data-tema='claro']) .tema .luna { display: block; }
:root[data-tema='oscuro'] .tema .sol { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema='claro']) .tema .sol { display: none; }
    :root:not([data-tema='claro']) .tema .luna { display: block; }
}

@media (prefers-color-scheme: light) {
    :root:not([data-tema='oscuro']) .tema .luna { display: none; }
    :root:not([data-tema='oscuro']) .tema .sol { display: block; }
}

:root[data-tema='claro'] .tema .luna { display: none; }
:root[data-tema='claro'] .tema .sol { display: block; }

/* menu en movil */
.abrir-menu { display: none; }

@media (max-width: 760px) {
    .abrir-menu {
        display: inline-grid;
        place-items: center;
        width: 38px; height: 38px;
        border-radius: 999px;
        border: 1px solid var(--borde);
        background: var(--superficie);
        color: var(--tinta-2);
        cursor: pointer;
    }

    .abrir-menu .ico { width: 19px; height: 19px; }

    .menu {
        position: fixed;
        inset: 68px 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px clamp(20px, 5vw, 40px) 20px;
        background: var(--superficie);
        border-bottom: 1px solid var(--borde);
        box-shadow: var(--sombra);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--suave), transform var(--suave), visibility var(--suave);
    }

    .menu.abierto { opacity: 1; visibility: visible; transform: none; }
    .menu a { padding: 12px 14px; font-size: 16px; border-radius: var(--radio-s); }
}

/* ---------- 6. Tipografia de pagina ---------- */

.titulo-xl {
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -.038em;
    max-width: 16ch;
}

.titulo-l { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -.028em; max-width: 20ch; }
.titulo-m { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.titulo-s { font-size: 1.16rem; letter-spacing: -.015em; }

.entradilla {
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    color: var(--tinta-2);
    max-width: 56ch;
    line-height: 1.62;
}

.parrafo { color: var(--tinta-2); max-width: var(--ancho-texto); }
.menudo { font-size: 13.5px; color: var(--tinta-3); line-height: 1.6; }
.acentuado { color: var(--acento); }

.sobretitulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--acento);
}

.sobretitulo::before {
    content: '';
    width: 22px; height: 1px;
    background: currentColor;
    opacity: .5;
}

/* ---------- 7. Botones y piezas ---------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--acento);
    color: var(--acento-tinta);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--suave), box-shadow var(--suave), background var(--suave), opacity var(--suave);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--acento) 30%, transparent),
                0 10px 26px -12px color-mix(in srgb, var(--acento) 65%, transparent);
}

.boton:hover { background: var(--acento-fuerte); transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.boton .ico { width: 18px; height: 18px; }

.boton-fantasma {
    background: transparent;
    color: var(--tinta);
    border-color: var(--borde-fuerte);
    box-shadow: none;
}

.boton-fantasma:hover {
    background: color-mix(in srgb, var(--tinta) 5%, transparent);
    border-color: var(--tinta-3);
}

.boton-bloque { width: 100%; }

.enlace {
    color: var(--acento);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
    transition: border-color var(--suave);
}

.enlace:hover { border-bottom-color: var(--acento); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--superficie);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tinta-2);
}

.chip .ico { width: 14px; height: 14px; color: var(--acento); }
.chip-acento { background: var(--acento-suave); border-color: transparent; color: var(--acento); }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-l);
    padding: clamp(22px, 3vw, 30px);
    box-shadow: var(--sombra-s);
    transition: transform var(--suave), box-shadow var(--suave), border-color var(--suave);
}

.tarjeta-viva:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
    border-color: var(--borde-fuerte);
}

.rejilla {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.marco-ico {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 13px;
    background: var(--acento-suave);
    color: var(--acento);
    margin-bottom: 16px;
}

.marco-ico .ico { width: 22px; height: 22px; }

.ico { width: 20px; height: 20px; flex: none; }

/* ---------- 8. Avisos ---------- */

.nota {
    display: flex;
    gap: 13px;
    padding: 15px 17px;
    border-radius: var(--radio);
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    font-size: 14px;
    line-height: 1.58;
    color: var(--tinta-2);
}

.nota .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--tinta-3); }
.nota strong { color: var(--tinta); font-weight: 600; }
.nota-acento { background: var(--acento-suave); border-color: transparent; }
.nota-acento .ico { color: var(--acento); }
.nota-error { border-color: color-mix(in srgb, var(--error) 40%, transparent); color: var(--error); }
.nota-error .ico { color: var(--error); }
.nota-exito { border-color: color-mix(in srgb, var(--exito) 40%, transparent); }
.nota-exito .ico { color: var(--exito); }

/* ---------- 9. Pie ---------- */

.pie {
    border-top: 1px solid var(--borde);
    margin-top: clamp(32px, 5vw, 56px);
    padding-block: 18px;
}

.pie-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: center;
    justify-content: space-between;
}

.pie .marca { font-size: 17px; margin-right: 0; }

/* marca + firma en la misma linea, separadas por un punto */
.pie-firma {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pie-firma .menudo::before {
    content: '·';
    margin-right: 9px;
    color: var(--borde-fuerte);
}

.pie-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.pie-enlaces a {
    font-size: 14px;
    color: var(--tinta-3);
    text-decoration: none;
    transition: color var(--suave);
}

.pie-enlaces a:hover { color: var(--acento); }

@media (max-width: 700px) {
    .pie-fila { flex-direction: column; align-items: stretch; gap: 12px; }
    .pie-firma { justify-content: space-between; width: 100%; gap: 12px; }
    .pie-firma .menudo::before { content: none; margin: 0; }
    .pie-enlaces { justify-content: center; width: 100%; gap: 4px 16px; }
}

/* ---------- 10. Portada de edad (age gate) ---------- */

.portada {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: color-mix(in srgb, var(--fondo) 88%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    animation: aparecer var(--lento) both;
}

.portada[hidden] { display: none; }

.portada-caja {
    width: min(100%, 430px);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-xl);
    padding: clamp(26px, 5vw, 38px);
    box-shadow: var(--sombra-l);
    text-align: center;
    animation: subir var(--lento) both;
}

.portada-caja .marco-ico {
    margin-inline: auto;
    width: 52px; height: 52px;
    border-radius: 16px;
}

.portada-caja .marco-ico .ico { width: 26px; height: 26px; }
.portada-botones { display: grid; gap: 10px; margin-top: 24px; }

/* mientras no se confirma la edad, el contenido no se lee.
   [data-velar] lo pone el <head> para que no se vea ni un fotograma. */
:root[data-velar] body > *:not(.portada):not(.ambiente):not(.grano),
body.velado > *:not(.portada):not(.ambiente):not(.grano) {
    filter: blur(14px) saturate(.7);
    pointer-events: none;
    user-select: none;
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- 11. Utilidades ---------- */

.oculto { display: none !important; }
.centrado { text-align: center; }
.solo-lector {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.entra { animation: entrar var(--lento) both; }
.entra-2 { animation: entrar var(--lento) 90ms both; }
.entra-3 { animation: entrar var(--lento) 180ms both; }
.entra-4 { animation: entrar var(--lento) 270ms both; }

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

.girando { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }