/* =====================================================================
   Landing de GRAN ROBO DE COCHES VI
   Web de un videojuego inspirada en el estilo "atardecer neón": fondo
   azul noche, degradados rosa-naranja-morado, tipografía condensada y
   botones en forma de píldora. Todo el arte son ilustraciones propias.
   ===================================================================== */

:root {
    --noche: #0d0e26;
    --noche-2: #15163a;
    --rosa: #ffc2dc;
    --rosa-fuerte: #ff6fae;
    --crema: #fff1c1;
    --melocoton: #ffd3a3;
    --lima: #eaff9a;
    --morado: #5b2a9e;
    --cian: #5ee1ff;
    --fuente-titulo: "Oswald", "Bebas Neue", "Arial Narrow", "Impact", sans-serif;
    --fuente-texto: "Figtree", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

/* el desplazamiento suave solo se activa en la landing (lo pone web.js) */
html.scroll-suave {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--noche);
    color: #fff;
    font-family: var(--fuente-texto);
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Escenas ilustradas ---------- */
.escena {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cielo-atardecer { background: linear-gradient(180deg, #2b1b6e 0%, #8a3fb8 38%, #ff6fae 68%, #ffb36b 100%); }
.cielo-dia { background: linear-gradient(180deg, #6fb7ff 0%, #bfe6ff 62%, #ffe3f0 100%); }
.cielo-rosa { background: linear-gradient(180deg, #ffb3d1 0%, #ffd9b8 100%); }
.cielo-oro { background: linear-gradient(180deg, #ff9fb8 0%, #ffcf7a 100%); }
.cielo-mar { background: linear-gradient(180deg, #8fd3ff 0%, #4aa6e0 55%, #2a6fb8 100%); }
.cielo-lila { background: linear-gradient(180deg, #5a4fcf 0%, #b574e0 55%, #ffb3d1 100%); }
.cielo-neon { background: linear-gradient(180deg, #14061f 0%, #4a0d4f 55%, #d12a7a 100%); }
.cielo-puerto {
    background: linear-gradient(180deg, #1a1650 0%, #6a2c91 40%, #e0457b 62%, #ff9a5a 74%);
}

.sol {
    position: absolute;
    left: 50%;
    top: 18%;
    z-index: 0;
    width: 36%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff1a8, #ff7ab6);
    transform: translateX(-50%);
}

.dib {
    position: absolute;
    display: block;
}

.dib-ciudad {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 38%;
    color: #3b2a7a;
}

/* ---------- Botones ---------- */
.boton {
    display: inline-block;
    padding: 0.95rem 2rem;
    border: 0;
    border-radius: 999px;
    color: #1a0f2e;
    font: 700 1rem var(--fuente-texto);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.boton:hover,
.boton:focus-visible {
    transform: translateY(-2px);
}

.boton-rosa {
    background: var(--rosa);
    box-shadow: 0 0 34px rgba(255, 150, 200, 0.45);
}

.boton-melocoton { background: var(--melocoton); }
.boton-lima { background: var(--lima); }

/* ---------- Franja superior ---------- */
.franja {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    overflow: hidden;
    background: linear-gradient(90deg, #e79fc9, #ffd0c0 50%, #e79fc9);
    color: #6b3f9c;
    text-align: center;
}

.franja p {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 1rem;
    font: 700 0.8rem var(--fuente-texto);
    letter-spacing: 0.22em;
}

.franja-aparte {
    margin-left: 0.8em;
    color: #4a2a7a;
}

.franja-palmas {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30%;
    color: #7a4da8;
    opacity: 0.8;
}

.franja-izq { left: 0; }
.franja-der { right: 0; transform: scaleX(-1); }

.franja-palmas .dib {
    width: 130px;
    height: 150px;
    top: -92px;
    transform: rotate(180deg);
}

.franja-palmas .dib-palma-a { left: 2%; }
.franja-palmas .dib-palma-b { left: 22%; width: 100px; top: -80px; opacity: 0.75; }

/* ---------- Cabecera ---------- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    transition: background 0.3s, padding 0.3s;
}

.cabecera.con-fondo {
    padding-top: 12px;
    padding-bottom: 12px;
    background: rgba(13, 14, 38, 0.86);
    backdrop-filter: blur(8px);
}

.marca {
    display: inline-block;
    font: 900 2.3rem/1 var(--fuente-titulo);
    letter-spacing: -0.04em;
}

.cabecera-acciones {
    display: flex;
    align-items: center;
    gap: 18px;
}

.boton-flotante {
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
}

.cabecera.con-cta .boton-flotante {
    opacity: 1;
    pointer-events: auto;
}

.menu-boton {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 34px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.menu-boton span {
    display: block;
    height: 5px;
    border-radius: 1px;
    background: #fff;
    transition: transform 0.25s;
}

.menu-boton[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }

.menu {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    background: rgba(13, 14, 38, 0.97);
}

.menu a {
    font: 700 clamp(2rem, 6vw, 3.4rem) var(--fuente-titulo);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu a:hover,
.menu a:focus-visible {
    color: var(--rosa);
}

main {
    display: block;
}

/* lo que se sale por los lados (p. ej. al desmoronarse la web) no ensancha la
   página: un móvil la encogería para que quepa */
#sitio {
    overflow-x: clip;
}

/* ---------- Portada ---------- */
.portada {
    padding: 0 5vw 40px;
}

.arte-clave {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    container-type: inline-size;
}

.collage {
    display: grid;
    grid-template-columns: 1fr 1.7fr 1.25fr 1.05fr;
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas:
        "a c e g"
        "a c e g"
        "a c e g"
        "b c f g"
        "b d f h"
        "b d f h";
    gap: 1.1%;
    height: 100%;
    padding: 1.4%;
    border-radius: 6px;
    background: #2a0f4f;
    box-shadow: 0 0 80px rgba(160, 80, 220, 0.35);
}

.panel {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.p-helicoptero { grid-area: a; }
.p-chica { grid-area: b; }
.p-pareja { grid-area: c; }
.p-coche { grid-area: d; }
.p-lancha { grid-area: e; }
.p-cadenas { grid-area: f; }
.p-hombre { grid-area: g; }
.p-moto { grid-area: h; }

/* helicóptero */
.p-helicoptero .dib-ciudad { height: 40%; color: #6f86c9; }
.p-helicoptero .dib-heli { top: 14%; left: 12%; width: 76%; height: auto; aspect-ratio: 2 / 1; color: #2f4fd8; }

/* chica */
.p-chica .dib-palma { right: -14%; bottom: 0; width: 62%; height: 92%; color: #9a4fb8; }
.p-chica .dib-busto { left: 6%; bottom: -8%; width: 82%; height: auto; aspect-ratio: 200 / 240; --ropa: #6fe8c0; --piel: #c98a63; --pelo: #2a120c; }

/* pareja central */
.p-pareja .sol { top: 12%; width: 34%; }
.p-pareja .dib-ciudad { height: 34%; color: #3b2a7a; }
.p-pareja .dib-palma-i { left: -8%; bottom: 0; width: 38%; height: 86%; color: #5a2f8f; }
.p-pareja .dib-palma-d { right: -6%; bottom: 0; width: 38%; height: 80%; color: #5a2f8f; }
.p-pareja .dib-busto-i { left: 12%; bottom: -5%; width: 46%; height: auto; aspect-ratio: 200 / 240; --pelo: #2b130e; --piel: #d8a07a; --ropa: #ff5fa2; }
.p-pareja .dib-busto-d { right: 6%; bottom: -5%; width: 48%; height: auto; aspect-ratio: 200 / 240; --pelo: #1a1213; --piel: #e0a37a; --ropa: #f5f0ff; }

/* coche */
.p-coche .dib-ciudad { height: 42%; color: #9a5aa8; }
.p-coche .dib-palma { left: 0; bottom: 8%; width: 30%; height: 90%; color: #6b2a8a; }
.p-coche .dib-coche { left: 8%; bottom: 8%; width: 88%; height: auto; aspect-ratio: 420 / 150; color: #ffd23f; }

/* lancha */
.p-lancha .dib-flamenco { top: 6%; right: 6%; width: 32%; height: auto; aspect-ratio: 170 / 210; color: #ff6fae; }
.p-lancha .dib-lancha { left: 6%; bottom: 10%; width: 86%; height: auto; aspect-ratio: 300 / 120; color: #f4f4ff; }

/* cadenas */
.p-cadenas .dib-palma { left: -10%; bottom: 0; width: 42%; height: 72%; color: #6a3a9f; }
.p-cadenas .dib-busto { left: 4%; bottom: -8%; width: 92%; height: auto; aspect-ratio: 200 / 240; }

/* hombre */
.p-hombre .dib-ciudad { height: 34%; color: #a85a8a; }
.p-hombre .dib-busto { left: 5%; bottom: -6%; width: 90%; height: auto; aspect-ratio: 200 / 240; --ropa: #f3e8d0; --piel: #b97a52; }

/* moto */
.p-moto .dib-ciudad { height: 36%; color: #3b2a7a; }
.p-moto .dib-moto { left: 0; bottom: 4%; width: 104%; height: auto; aspect-ratio: 260 / 170; color: #ff4fa0; transform: rotate(-9deg); }

/* logo del juego sobre el collage: se escala con el ancho del arte (cqw) */
.logo-juego {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    margin: 0;
    pointer-events: none;
}

.logo-vi {
    grid-area: 1 / 1;
    font: 400 36cqw / 0.8 "Impact", "Arial Narrow", var(--fuente-titulo);
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #5b8cff 0%, #b04fd8 52%, #ff9a5a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.9cqw #2a0f4f;
    paint-order: stroke fill;
    filter: drop-shadow(0 1cqw 1.6cqw rgba(20, 5, 50, 0.55));
}

.logo-texto {
    grid-area: 1 / 1;
    z-index: 1;
    color: #fff;
    font: 900 4.8cqw / 0.9 "Arial Black", "Impact", var(--fuente-titulo);
    letter-spacing: -0.02em;
    text-align: center;
    -webkit-text-stroke: 1.1cqw #2a0f4f;
    paint-order: stroke fill;
    text-shadow: 0.5cqw 0.6cqw 0 #2a0f4f;
    transform: rotate(-4deg);
}

.portada-pie {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    max-width: 1100px;
    margin: 28px auto 0;
    padding: 0 10px;
}

.fecha,
.plataformas {
    margin: 0;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.fecha {
    font-size: 1.25rem;
    line-height: 1.2;
}

.fecha strong {
    display: inline-block;
    font-size: 1.7rem;
    font-variant-numeric: tabular-nums;
}

.plataformas {
    text-align: right;
}

.flecha {
    display: block;
    width: 30px;
    margin: 20px auto 0;
    color: var(--rosa);
}

/* ---------- Tráileres ---------- */
.seccion-oscura {
    background: var(--noche);
}

.trailers {
    position: relative;
    min-height: 100vh;
    padding: 12vh 5vw;
    overflow: hidden;
}

.trailers-fondo,
.personajes-fondo,
.ciudad-fondo {
    position: absolute;
    inset: 0;
}

.trailers-fondo::after,
.personajes-fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9;
    background: rgba(13, 14, 38, 0.6);
}

.trailers-fondo .sol { top: 16%; width: 20%; }
.trailers-fondo .dib-palma-i { left: -4%; bottom: 0; width: 22%; height: 80%; color: #3a1f66; }
.trailers-fondo .dib-palma-d { right: -4%; bottom: 0; width: 22%; height: 90%; color: #3a1f66; }
.trailers-fondo .dib-ciudad { height: 30%; color: #2a1a58; }

.trailers-contenido,
.noticias-contenido,
.ciudad-contenido {
    position: relative;
    z-index: 10;
}

.sobretitulo {
    margin: 0 0 0.4rem;
    color: #c9b8ff;
    font: 700 1rem var(--fuente-titulo);
    letter-spacing: 0.18em;
    text-align: center;
}

.titulo-espaciado {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font: 800 clamp(2rem, 6vw, 4.6rem) / 1.05 var(--fuente-texto);
    letter-spacing: 0.14em;
    text-align: center;
}

.titulo-pequeno {
    font-size: clamp(1.6rem, 4vw, 3rem);
}

.tarjetas-trailer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1070px;
    margin: 8vh auto 0;
}

.tarjeta-trailer {
    position: relative;
    aspect-ratio: 0.73;
    overflow: hidden;
    border-radius: 10px;
}

.tarjeta-trailer .escena {
    position: absolute;
    inset: 0;
}

.tarjeta-trailer .sol { top: 16%; width: 34%; }
.tarjeta-trailer .dib-ciudad { height: 30%; }
.tarjeta-trailer .dib-busto-i { left: 4%; bottom: 22%; width: 52%; height: auto; aspect-ratio: 200 / 240; --pelo: #2b130e; --piel: #d8a07a; --ropa: #8a8fb8; }
.tarjeta-trailer .dib-busto-d { right: 2%; bottom: 22%; width: 54%; height: auto; aspect-ratio: 200 / 240; --pelo: #1a1213; --piel: #e0a37a; --ropa: #ff5fa2; }
.tarjeta-trailer .dib-palma-i { left: -6%; bottom: 20%; width: 40%; height: 70%; color: #6b2a8a; }
.tarjeta-trailer .dib-palma-d { right: -8%; bottom: 20%; width: 42%; height: 76%; color: #6b2a8a; }
.tarjeta-trailer .dib-coche { left: 6%; bottom: 24%; width: 88%; height: auto; aspect-ratio: 420 / 150; color: #ff4f7a; }

.play {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.2s;
}

.play::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 19px;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #1a0f2e;
}

.play:hover,
.play:focus-visible {
    transform: translate(-50%, -50%) scale(1.1);
}

.tarjeta-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 56px 16px 18px;
    background: linear-gradient(0deg, rgba(13, 14, 38, 0.92), transparent);
    text-align: center;
}

.tarjeta-pie p {
    margin: 0;
    color: #cfc4ff;
    font: 700 0.8rem var(--fuente-titulo);
    letter-spacing: 0.14em;
}

.tarjeta-pie h3 {
    margin: 0.25rem 0 0;
    color: var(--crema);
    font: 700 clamp(1.4rem, 2.6vw, 2.1rem) / 1 var(--fuente-titulo);
}

/* ---------- Personajes ---------- */
.personajes {
    position: relative;
    overflow: hidden;
}

.personajes-fondo::after {
    background: rgba(13, 14, 38, 0.35);
}

.personajes-fondo .sol { top: 10%; width: 22%; }
.personajes-fondo .dib-palma-i { left: -6%; bottom: 0; width: 24%; height: 70%; color: #3a1f66; }
.personajes-fondo .dib-palma-d { right: -6%; bottom: 0; width: 24%; height: 78%; color: #3a1f66; }
.personajes-fondo .dib-ciudad { height: 22%; color: #2a1a58; }

.personajes-contenido {
    position: relative;
    z-index: 10;
    display: grid;
    gap: 10vh;
    max-width: 1100px;
    margin: 0 auto;
    padding: 12vh 5vw;
}

.personaje {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4vw;
}

.personaje .dib-retrato {
    position: static;
    justify-self: center;
    width: min(100%, 400px);
    height: auto;
    aspect-ratio: 200 / 240;
    filter: drop-shadow(0 20px 40px rgba(10, 0, 40, 0.5));
}

.retrato-mara { --ropa: #ff5fa2; --piel: #c98a63; --pelo: #3a1a12; }
.retrato-dante { --ropa: #2a2a6a; --piel: #e0a37a; --pelo: #1a1213; }

.personaje .sobretitulo {
    text-align: left;
}

.personaje-d .personaje-texto {
    text-align: right;
}

.personaje-d .sobretitulo {
    text-align: right;
}

.personaje-texto h2 {
    margin: 0 0 0.6rem;
    color: var(--crema);
    font: 700 clamp(3.4rem, 10vw, 7.5rem) / 0.9 var(--fuente-titulo);
}

.personaje-texto p:last-child {
    max-width: 26rem;
    margin: 0;
    font-size: 1.1rem;
}

.personaje-d .personaje-texto p:last-child {
    margin-left: auto;
}

/* ---------- Ediciones ---------- */
.ediciones-contenido {
    display: grid;
    gap: 30px;
    max-width: 1070px;
    margin: 0 auto;
    padding: 10vh 5vw;
}

.caja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 380px;
    overflow: hidden;
    border-radius: 26px;
}

.caja-definitiva {
    background: linear-gradient(180deg, #6a35b8 0%, #c24fa0 62%, #ff9a7a 100%);
}

.caja-arte {
    position: relative;
    display: grid;
    place-items: center;
    padding: 30px;
}

.caja-marco {
    width: min(100%, 300px);
    aspect-ratio: 1 / 1.06;
    border: 8px solid #2a0f4f;
    border-radius: 4px;
}

.caja-marco .sol { top: 14%; width: 40%; }
.caja-marco .dib-ciudad { height: 32%; color: #3b2a7a; }
.caja-marco .dib-coche { left: 6%; bottom: 8%; width: 88%; height: auto; aspect-ratio: 420 / 150; color: #ffd23f; }

.caja-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    color: #fff;
    font: 900 1.7rem / 0.95 "Arial Black", "Impact", var(--fuente-titulo);
    text-align: center;
    -webkit-text-stroke: 4px #2a0f4f;
    paint-order: stroke fill;
    text-shadow: 3px 3px 0 #2a0f4f;
    transform: translate(-50%, -50%) rotate(-4deg);
}

.caja-logo strong {
    color: #ff9ad0;
}

.caja-texto {
    align-self: center;
    padding: 6vw 5vw 6vw 2vw;
}

.caja-texto .sobretitulo {
    text-align: left;
}

.sobretitulo-cian {
    color: var(--cian);
}

.caja-texto h2 {
    margin: 0 0 1rem;
    color: var(--crema);
    font: 700 clamp(2.4rem, 5vw, 4.2rem) / 0.95 var(--fuente-titulo);
}

.caja-texto p {
    max-width: 28rem;
}

.caja-vintage {
    background: #190626;
}

.caja-escena {
    position: relative;
    min-height: 380px;
}

.rotulo-neon {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    z-index: 3;
    margin: 0;
    color: #ffd0e6;
    font: 700 clamp(1.5rem, 3.6vw, 2.8rem) var(--fuente-titulo);
    letter-spacing: 0.2em;
    text-align: center;
    text-shadow: 0 0 8px #ff4fa0, 0 0 22px #ff4fa0, 0 0 44px #d12a7a;
}

.caja-escena .dib-busto-i { left: 4%; bottom: -6%; width: 48%; height: auto; aspect-ratio: 200 / 240; --ropa: #d4203a; --piel: #c98a63; --pelo: #2a0e1c; }
.caja-escena .dib-busto-d { right: 4%; bottom: -6%; width: 50%; height: auto; aspect-ratio: 200 / 240; --ropa: #8fa0c8; --piel: #e0a37a; --pelo: #3a2a1a; }

/* ---------- Ciudad ---------- */
.ciudad {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.ciudad-fondo .sol-bajo {
    top: auto;
    bottom: 24%;
    width: 20%;
}

.ciudad-fondo .dib-ciudad {
    bottom: 26%;
    height: 30%;
    color: #1b1450;
}

.agua {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26%;
    background:
        repeating-linear-gradient(0deg, rgba(255, 150, 100, 0.12) 0 3px, transparent 3px 14px),
        linear-gradient(180deg, #2a1850, #120e3a);
}

.ciudad-contenido {
    max-width: 46rem;
    margin: 0 auto;
    padding: 14vh 5vw 0;
    text-align: center;
}

.ciudad-contenido p:last-child {
    margin: 1.4rem 0 0;
    font-size: 1.15rem;
}

/* ---------- Noticias ---------- */
.noticias {
    padding: 12vh 5vw;
}

.tarjetas-noticia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1070px;
    margin: 5vh auto 0;
}

.noticia-arte {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
}

.noticia-arte .sol { top: 14%; width: 30%; }
.noticia-arte .dib-ciudad { height: 32%; }
.noticia-arte .dib-coche { left: 8%; bottom: 8%; width: 84%; height: auto; aspect-ratio: 420 / 150; color: #ffd23f; }
.noticia-arte .dib-lancha { left: 8%; bottom: 10%; width: 80%; height: auto; aspect-ratio: 300 / 120; color: #f4f4ff; }
.noticia-arte .dib-moto { left: 14%; bottom: 6%; width: 70%; height: auto; aspect-ratio: 260 / 170; color: #ff4fa0; }
.noticia-arte .dib-palma { right: -4%; bottom: 0; width: 30%; height: 90%; color: #b0457a; }

.noticia-fecha {
    margin: 0.9rem 0 0.2rem;
    color: var(--cian);
    font: 700 0.8rem var(--fuente-titulo);
    letter-spacing: 0.16em;
}

.noticia h3 {
    margin: 0;
    font: 600 1.15rem / 1.3 var(--fuente-texto);
}

/* ---------- Pie ---------- */
.pie {
    padding: 56px 5vw 40px;
    background: #090a1c;
    text-align: center;
}

.redes,
.legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.6rem;
    margin: 0 0 1.4rem;
    padding: 0;
    list-style: none;
}

.redes a {
    font-weight: 700;
}

.legal a {
    color: #a9a3d6;
    font-size: 0.85rem;
}

.pie-marca {
    margin: 1.6rem 0 0.4rem;
    color: var(--rosa);
    font: 700 1.3rem var(--fuente-titulo);
    letter-spacing: 0.3em;
}

.pie-aviso {
    max-width: 42rem;
    margin: 0 auto;
    color: #7d78a8;
    font-size: 0.78rem;
}

/* ---------- Visor del tráiler ---------- */
.visor {
    width: min(92vw, 720px);
    padding: 20px;
    border: 0;
    border-radius: 16px;
    background: var(--noche-2);
    color: #fff;
    text-align: center;
}

.visor::backdrop {
    background: rgba(5, 5, 20, 0.82);
}

.visor-pantalla {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
}

.visor-pantalla .sol { top: 12%; width: 22%; }
.visor-pantalla .dib-ciudad { height: 34%; }
.visor-coche { left: 0; bottom: 12%; width: 34%; height: auto; aspect-ratio: 420 / 150; color: #ffd23f; animation: rodar 7s linear infinite; }

@keyframes rodar {
    from { transform: translateX(-40%); }
    to { transform: translateX(300%); }
}

.visor-titulo {
    position: absolute;
    left: 0;
    right: 0;
    top: 38%;
    z-index: 3;
    margin: 0;
    font: 800 clamp(1.4rem, 4vw, 2.4rem) var(--fuente-titulo);
    letter-spacing: 0.12em;
    text-shadow: 0 2px 12px rgba(20, 5, 50, 0.8);
}

.visor-nota {
    margin: 0.9rem 0;
    color: #a9a3d6;
}

/* ---------- Aparición al hacer scroll ---------- */
.con-reveal .revelar {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.con-reveal .revelar.visible {
    opacity: 1;
    transform: none;
}

/* ---------- Tablet y móvil ---------- */
@media (max-width: 800px) {
    .cabecera {
        padding: 14px 18px;
    }

    .franja p {
        font-size: 0.62rem;
        letter-spacing: 0.14em;
    }

    .arte-clave {
        aspect-ratio: 4 / 5;
    }

    .collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1.5fr 1.5fr 1fr 1fr;
        grid-template-areas:
            "c c"
            "c c"
            "a e"
            "d b";
    }

    .p-cadenas,
    .p-hombre,
    .p-moto {
        display: none;
    }

    .logo-juego {
        inset: 0 0 34% 0;
    }

    .portada-pie {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .plataformas {
        text-align: center;
    }

    .tarjetas-trailer {
        display: flex;
        gap: 16px;
        margin-right: -5vw;
        padding-right: 5vw;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .tarjeta-trailer {
        flex: 0 0 72%;
        scroll-snap-align: center;
    }

    .personaje {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .personaje-d .dib-retrato {
        order: -1;
    }

    .personaje .sobretitulo,
    .personaje-d .sobretitulo,
    .personaje-d .personaje-texto {
        text-align: center;
    }

    .personaje-texto p:last-child,
    .personaje-d .personaje-texto p:last-child {
        margin: 0 auto;
    }

    .caja {
        grid-template-columns: 1fr;
    }

    .caja-texto {
        padding: 6vw 7vw 8vw;
    }

    .caja-vintage .caja-escena {
        order: -1;
        min-height: 320px;
    }

    .tarjetas-noticia {
        grid-template-columns: 1fr;
    }
}

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

    .con-reveal .revelar {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .visor-coche {
        animation: none;
    }
}

/* ---------- Tema oscuro (lobby y juego) ---------- */
body.oscuro {
    min-height: 100vh;
    background: #05080f;
    color: #d7ffe9;
    font-family: "Courier New", monospace;
}

.panel-centro {
    max-width: 30rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.panel-centro h1 {
    color: #00e676;
    text-shadow: 0 0 8px rgba(0, 230, 118, 0.6);
}

.panel-centro form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

body.oscuro input[type="text"],
body.oscuro input[type="password"] {
    padding: 0.8rem;
    border: 2px solid #00e676;
    border-radius: 4px;
    background: #000;
    color: #d7ffe9;
    font: inherit;
    font-size: 1.1rem;
}

body.oscuro .btn {
    min-height: 3rem;
    padding: 0.8rem 1.4rem;
    border: 2px solid #00e676;
    border-radius: 4px;
    background: #003d1f;
    color: #d7ffe9;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

body.oscuro .btn:hover,
body.oscuro .btn:focus-visible {
    background: #00e676;
    color: #000;
}

body.oscuro .error {
    padding: 0.6rem 0.8rem;
    border: 1px solid #ff1744;
    color: #ff1744;
}

/* Sala de espera */
.huecos {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.2rem 0;
    padding: 0;
    list-style: none;
}

.hueco {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 2px solid #1f3a2c;
    border-radius: 4px;
}

.hueco.vacio {
    border-style: dashed;
    color: #5b7a6a;
}

.hueco.esperando {
    border-color: #f9a825;
    color: #f9a825;
}

.hueco.listo {
    border-color: #00e676;
    color: #00e676;
}

.hueco.desconectado {
    border-color: #ff1744;
    color: #ff1744;
    opacity: 0.7;
}

.cuenta-atras {
    margin: 1rem 0 0;
    color: #00e676;
    font-size: 5rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 0 16px rgba(0, 230, 118, 0.8);
}

body.oscuro .btn-secundario {
    margin-top: 0.8rem;
    border-color: #5b7a6a;
    background: transparent;
    color: #5b7a6a;
    font-size: 0.85rem;
}

/* Aviso de la landing restaurada */
.banner-restaurada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 1.2rem;
    padding: 0.8rem 1rem;
    background: #e6f9ee;
    border-bottom: 3px solid #1db954;
    color: #0b4d26;
    text-align: center;
}

.banner-restaurada p {
    margin: 0;
    font-weight: 600;
}

.banner-restaurada a {
    color: #0b4d26;
    font-weight: 700;
    text-decoration: underline;
}