/* =========================================================================
   Min-jun — 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.

   El aire es pixel art: rosa, tipografia de mapa de bits en los titulos,
   esquinas cuadradas y sombras duras sin desenfoque. Todo eso sale de los
   tokens de aqui abajo, asi que las piezas no saben que son "de pixeles":
   solo usan --radio-* y --sombra-*.
   ========================================================================= */

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

:root {
    color-scheme: light dark;

    /* tipografia: los titulos en pixeles, el texto largo en una sans normal
       (una fuente de mapa de bits a parrafo entero no hay quien la lea) */
    --display: 'Silkscreen', 'Press Start 2P', ui-monospace, 'Courier New', monospace;
    --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: sin curvas. la rejilla manda y las esquinas son de 90 grados */
    --u: 4px;
    --radio-s: 0px;
    --radio: 0px;
    --radio-l: 0px;
    --radio-xl: 0px;
    --ancho: 1120px;
    --ancho-texto: 68ch;
    /* grosor del trazo de las piezas (bordes de sprite) */
    --trazo: 2px;

    /* 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: #fff9fb;
    --fondo-2: #ffe8f2;
    --superficie: #fffafc;
    --superficie-2: #fff0f6;
    --borde: #f4c8dd;
    --borde-fuerte: #e493ba;
    --tinta: #2a0f1e;
    --tinta-2: #6d3a52;
    --tinta-3: #7a4a62;

    --acento: #d81b76;
    --acento-fuerte: #ab0f5b;
    --acento-suave: #ffd9e9;
    --acento-tinta: #fff7fb;
    --segundo: #6b2fa0;

    --exito: #1f7a5a;
    --aviso: #a35d0a;
    --error: #c62348;

    /* sombras de sprite: desplazadas y SIN desenfoque */
    --sombra-s: 2px 2px 0 rgba(171, 15, 91, .18);
    --sombra: 4px 4px 0 rgba(171, 15, 91, .22);
    --sombra-l: 6px 6px 0 rgba(171, 15, 91, .26);

    --velo: rgba(255, 250, 252, .72);
    --collage-desenfoque: 6px;
    --collage-velo: 72%;   /* cuanto fondo se pone encima del collage */
    --collage-luz: 1.06;
    --grano: .05;
    --aurora-1: rgba(216, 27, 118, .30);
    --aurora-2: rgba(107, 47, 160, .24);
    --aurora-3: rgba(255, 138, 190, .30);
}

/* --- tema oscuro --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema='claro']) {
        --fondo: #150a14;
        --fondo-2: #1e0f1e;
        --superficie: #1c0f1b;
        --superficie-2: #261425;
        --borde: #3a2038;
        --borde-fuerte: #5b3055;
        --tinta: #ffeaf4;
        --tinta-2: #d3a8c0;
        --tinta-3: #9d7a90;

        --acento: #ff5fa8;
        --acento-fuerte: #ff87bf;
        --acento-suave: #3d132c;
        --acento-tinta: #1a0a14;
        --segundo: #b98cff;

        --exito: #5fd3a0;
        --aviso: #e8b567;
        --error: #ff7d97;

        --sombra-s: 2px 2px 0 rgba(0, 0, 0, .55);
        --sombra: 4px 4px 0 rgba(0, 0, 0, .6);
        --sombra-l: 6px 6px 0 rgba(0, 0, 0, .65);

        --velo: rgba(28, 15, 27, .72);
        --collage-desenfoque: 15px;
        --collage-velo: 65%;
        --collage-luz: .58;
        --grano: .07;
        --aurora-1: rgba(255, 95, 168, .32);
        --aurora-2: rgba(150, 90, 220, .30);
        --aurora-3: rgba(255, 130, 200, .26);
    }
}

:root[data-tema='oscuro'] {
    --fondo: #150a14;
    --fondo-2: #1e0f1e;
    --superficie: #1c0f1b;
    --superficie-2: #261425;
    --borde: #3a2038;
    --borde-fuerte: #5b3055;
    --tinta: #ffeaf4;
    --tinta-2: #d3a8c0;
    --tinta-3: #9d7a90;

    --acento: #ff5fa8;
    --acento-fuerte: #ff87bf;
    --acento-suave: #3d132c;
    --acento-tinta: #1a0a14;
    --segundo: #b98cff;

    --exito: #5fd3a0;
    --aviso: #e8b567;
    --error: #ff7d97;

    --sombra-s: 2px 2px 0 rgba(0, 0, 0, .55);
    --sombra: 4px 4px 0 rgba(0, 0, 0, .6);
    --sombra-l: 6px 6px 0 rgba(0, 0, 0, .65);

    --velo: rgba(28, 15, 27, .72);
    --collage-desenfoque: 15px;
    --collage-velo: 65%;
    --collage-luz: .58;
    --grano: .07;
    --aurora-1: rgba(255, 95, 168, .32);
    --aurora-2: rgba(150, 90, 220, .30);
    --aurora-3: rgba(255, 130, 200, .26);
}

/* --- ambiente hot: se aplica sobre cualquiera de los dos temas --- */
:root[data-vibe='hot'] {
    --fondo: #fff6f8;
    --fondo-2: #ffdfe9;
    --superficie: #fffafb;
    --superficie-2: #fff0f4;
    --borde: #ffc4d6;
    --borde-fuerte: #f78fae;
    --tinta: #2b0713;
    --tinta-2: #71303f;
    --tinta-3: #7d4b57;

    --acento: #d40035;
    --acento-fuerte: #b30030;
    --acento-suave: #ffd3df;
    --acento-tinta: #fff6f8;
    --segundo: #8a1060;

    --sombra-s: 2px 2px 0 rgba(179, 0, 48, .20);
    --sombra: 4px 4px 0 rgba(179, 0, 48, .24);
    --sombra-l: 6px 6px 0 rgba(179, 0, 48, .28);

    --velo: rgba(255, 250, 251, .74);
    --collage-desenfoque: 6px;
    --collage-velo: 72%;
    --collage-luz: 1.04;
    --aurora-1: rgba(230, 0, 60, .32);
    --aurora-2: rgba(138, 16, 96, .28);
    --aurora-3: rgba(255, 110, 160, .30);
}

@media (prefers-color-scheme: dark) {
    :root[data-vibe='hot']:not([data-tema='claro']) {
        --fondo: #14030c;
        --fondo-2: #200613;
        --superficie: #1c0510;
        --superficie-2: #280a18;
        --borde: #431029;
        --borde-fuerte: #66193d;
        --tinta: #ffe6ee;
        --tinta-2: #dfa2b8;
        --tinta-3: #ae7a8e;

        --acento: #ff3d7f;
        --acento-fuerte: #ff6f9d;
        --acento-suave: #430f26;
        --acento-tinta: #1c0610;
        --segundo: #ff8ccf;

        --velo: rgba(28, 5, 16, .74);
        --collage-desenfoque: 6px;
        --collage-velo: 65%;
        --collage-luz: .8;
        --grano: .08;
        --aurora-1: rgba(255, 61, 127, .34);
        --aurora-2: rgba(170, 30, 130, .32);
        --aurora-3: rgba(255, 140, 207, .26);
    }
}

:root[data-vibe='hot'][data-tema='oscuro'] {
    --fondo: #14030c;
    --fondo-2: #200613;
    --superficie: #1c0510;
    --superficie-2: #280a18;
    --borde: #431029;
    --borde-fuerte: #66193d;
    --tinta: #ffe6ee;
    --tinta-2: #dfa2b8;
    --tinta-3: #ae7a8e;

    --acento: #ff3d7f;
    --acento-fuerte: #ff6f9d;
    --acento-suave: #430f26;
    --acento-tinta: #1c0610;
    --segundo: #ff8ccf;

    --velo: rgba(28, 5, 16, .74);
    --collage-desenfoque: 6px;
    --collage-velo: 65%;
    --collage-luz: .8;
    --grano: .08;
    --aurora-1: rgba(255, 61, 127, .34);
    --aurora-2: rgba(170, 30, 130, .32);
    --aurora-3: rgba(255, 140, 207, .26);
}

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

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

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* la cabecera va pegada arriba (68px): al saltar a un ancla, el titulo se
       para por debajo de ella en vez de quedar tapado */
    scroll-padding-top: 92px;
}

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

/* los titulos van en la fuente de mapa de bits: ni interletrado negativo ni
   lineas apretadas, que a un glifo de pixeles eso le sienta fatal */
h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: 0;
    margin: 0;
    text-wrap: balance;
}

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: 0;
}

@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;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;   /* la altura mayor: no cambia al ocultarse la barra del movil */
    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); }

@media (hover: none) {
    .ambiente::before, .ambiente::after, .ambiente i { transition: none; }
    .ambiente::before { translate: 0 calc(var(--sy, 0) * -26px); }
    .ambiente::after  { translate: 0 calc(var(--sy, 0) * 34px); }
    .ambiente i       { translate: 0 calc(var(--sy, 0) * -18px); }
}

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

/* trama por encima del fondo: en vez del grano fino de antes, una rejilla de
   4px y un ruido ampliado a pixel gordo. Es lo que le da el aire de sprite al
   degradado, sin tener que meter una imagen de textura. */
.grano {
    position: fixed;
    inset: -50%;
    z-index: -1;
    pointer-events: none;
    opacity: var(--grano);
    image-rendering: pixelated;
    background-image:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 4px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='40' height='40' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 4px 4px, 4px 4px, 160px 160px;
}

/* Collage difuminado de fondo. Se enciende solo si existen los jpg en
   assets/ (ver ui.js): collage-sfw-pc / collage-sfw-movil en las paginas
   normales y collage-pc / collage-movil en las +18. Si no estan, se queda el
   degradado rosa y no se nota que falte nada.
   Al ampliarse se ve a pixel gordo, que aqui es justo lo que se busca. */
.ambiente.con-collage {
    background-image: var(--collage);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.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(var(--collage-desenfoque)) saturate(115%) brightness(var(--collage-luz));
    -webkit-backdrop-filter: blur(var(--collage-desenfoque)) 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.
   Las 58ch venian de una serif estrecha; con la Silkscreen esa misma medida
   dejaba el titular metido en media pantalla, asi que la caja va en px y
   acompana al ancho de la pagina. */
.cabeza {
    display: grid;
    gap: 10px;
    max-width: min(100%, 860px);
    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: var(--trazo) 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: 17px;
    font-weight: 700;
    letter-spacing: 0;
    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: 0;
    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: 0;
    border: var(--trazo) 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: 0;
        border: var(--trazo) 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: var(--trazo) 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 ---------- */

/* la Silkscreen pinta mas grande que una serif al mismo cuerpo: los tamanos
   bajan y las cajas se ensanchan para que quepan las mismas palabras */
.titulo-xl {
    font-size: clamp(1.7rem, 4.2vw, 2.9rem);
    line-height: 1.22;
    letter-spacing: 0;
    max-width: 20ch;
}

.titulo-l { font-size: clamp(1.25rem, 2.6vw, 1.8rem); letter-spacing: 0; max-width: 40ch; }
.titulo-m { font-size: clamp(1.05rem, 1.8vw, 1.25rem); letter-spacing: 0; }
.titulo-s { font-size: 1rem; letter-spacing: 0; }

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

/* sobre las fotos de fondo el rosa medio se queda corto: va el fuerte */
.sobretitulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--acento-fuerte);
}

/* el guioncito de antes, ahora de 2px para que sea un pixel de los gordos */
.sobretitulo::before {
    content: '';
    width: 20px; height: 2px;
    background: currentColor;
    opacity: .6;
}

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

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 22px;
    border: var(--trazo) solid transparent;
    border-radius: 0;
    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: var(--trazo) 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: 0;
    border: var(--trazo) 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: var(--trazo) 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: 0;
    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: var(--trazo) 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: var(--trazo) 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: space-between; width: 100%; gap: 6px 10px; }
}

/* ---------- 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: var(--trazo) 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: 0;
}

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