@charset "UTF-8";
/* =========================================================================
   Geek Fox Studio — hoja de estilos del rediseño 2026
   Sustituye a bootstrap.css + estilos.css + font-awesome.
   Toda la paleta sale del logo nuevo (ver :root).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   El fondo tiene que quedarse por debajo de #2A2A2A: el marco del logo es
   #403840, y si el fondo sube hasta ahí la carta se funde con la página.
   ------------------------------------------------------------------------- */
:root {
    --bg:           #15171b;
    --bg-alt:       #1b1e23;
    --surface:      #22252b;
    --card:         #403840;  /* el gris del marco del logo, literal */
    --card-edge:    #181818;
    --line:         #353941;

    --text:         #e6e3de;
    --text-dim:     #a5a29e;
    --text-faint:   #7b7874;

    --orange:       #f09018;
    --orange-hi:    #ffab3d;
    --blue:         #80a8b8;
    --blue-deep:    #486078;

    --radius:       10px;
    --radius-lg:    16px;

    --header-h:     114px;
    --header-h-min: 72px;
    --iso-h:         90px;
    --logo-h:        57px;

    --ancho:       1200px;
    --gap:          24px;

    --shadow:      0 2px 10px rgba(0, 0, 0, .45);
    --shadow-lg:   0 8px 28px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 100%;
    scroll-behavior: smooth;
    /* que las anclas de las redirecciones no queden bajo la cabecera fija */
    scroll-padding-top: calc(var(--header-h-min) + 16px);

    /* El hueco de la barra de scroll se reserva siempre. Si no, al pasar de
       una página que scrollea a otra que no, el viewport gana ~15px de ancho
       y todo lo centrado (menú incluido) da un salto lateral.
       overflow-y:scroll es el respaldo para navegadores sin scrollbar-gutter. */
    overflow-y: scroll;
}

@supports (scrollbar-gutter: stable) {
    html {
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

/* Pie pegado abajo, con el metodo de columna flexible: el body ocupa como
   minimo la ventana, el contenido crece para llenar lo que sobre y el pie
   queda al final. En paginas cortas el pie se ve sin hacer scroll; en las
   largas baja con el contenido, sin tapar nada.
   svh (small viewport height) evita el hueco de la barra del navegador movil,
   con 100vh de respaldo para quien no lo soporte. */
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* El contenido se queda con el espacio sobrante; el pie no se encoge. */
.portada,
.pagina {
    flex: 1 0 auto;
}
.piedepagina {
    flex-shrink: 0;
}

img { max-width: 100%; height: auto; }

a {
    color: var(--orange);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover, a:focus-visible { color: var(--orange-hi); text-decoration: underline; }

h1, h2, h3, h4 {
    line-height: 1.2;
    margin: 0 0 .5em;
    font-weight: 700;
}

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

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: 24px;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.salta-al-contenido {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--orange);
    color: #14161a;
    font-weight: 700;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: top .2s ease;
}
.salta-al-contenido:focus { top: 0; text-decoration: none; }

/* -------------------------------------------------------------------------
   3. Cabecera
   Arranca en 114px y se encoge a 72px al hacer scroll (clase .encogida,
   la pone js/sitio.js). Por debajo de 900px pasa a barra compacta con solo
   el logotipo, porque el zorro a ese tamaño ya no se lee.
   ------------------------------------------------------------------------- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s ease;
}
.cabecera.encogida { box-shadow: var(--shadow); }

.cabecera-interior {
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: 24px;
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 18px;
    transition: height .25s ease;
}
.cabecera.encogida .cabecera-interior { height: var(--header-h-min); }

.marca {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}
.marca:hover, .marca:focus-visible { text-decoration: none; }

.marca-isotipo {
    height: var(--iso-h);
    width: auto;
    transition: height .25s ease;
}
.marca-logotipo {
    height: var(--logo-h);
    width: auto;
    transition: height .25s ease;
}
.cabecera.encogida .marca-isotipo  { height: 48px; }
.cabecera.encogida .marca-logotipo { height: 30px; }

/* -------------------------------------------------------------------------
   4. Menú
   ------------------------------------------------------------------------- */
.menu { margin-left: auto; }

.menu-lista {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-lista a {
    display: block;
    padding: 10px 14px;
    color: var(--text-dim);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: var(--radius);
    border-bottom: 2px solid transparent;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.menu-lista a:hover,
.menu-lista a:focus-visible {
    color: var(--text);
    background: var(--surface);
    text-decoration: none;
}
.menu-lista .activo a {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

.menu-idioma a {
    color: var(--blue);
    border: 1px solid var(--blue-deep);
    padding: 6px 10px;
    margin-left: 10px;
}
.menu-idioma a:hover, .menu-idioma a:focus-visible {
    color: var(--bg);
    background: var(--blue);
}

/* Botón hamburguesa: oculto en escritorio */
.menu-boton {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}
.menu-boton-barras {
    position: relative;
    width: 20px; height: 2px;
    background: currentColor;
    transition: background .15s ease;
}
.menu-boton-barras::before,
.menu-boton-barras::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px; height: 2px;
    background: currentColor;
    transition: transform .2s ease;
}
.menu-boton-barras::before { top: -6px; }
.menu-boton-barras::after  { top:  6px; }

.menu-boton[aria-expanded="true"] .menu-boton-barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton-barras::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton-barras::after  { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   5. Contenido
   ------------------------------------------------------------------------- */
.pagina { padding: 48px 0 72px; }

.titulo-pagina {
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    color: var(--text);
}
.titulo-pagina::after {
    content: "";
    display: block;
    width: 72px; height: 4px;
    margin-top: .4em;
    background: var(--orange);
    border-radius: 2px;
}

/* Ancho completo del contenedor, como el resto de elementos. */
.entradilla {
    color: var(--text-dim);
    font-size: 1.0625rem;
}

/* -------------------------------------------------------------------------
   6. Carrusel de juegos
   El logo del estudio ES una carta, así que las fichas repiten su marco:
   fondo --card, filo oscuro, esquinas redondeadas.
   ------------------------------------------------------------------------- */
.juegos { margin-top: 36px; }

.juegos-tira {
    display: flex;
    gap: 16px;
    padding: 4px 4px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-color: var(--card) transparent;
}
.juegos-tira::-webkit-scrollbar { height: 10px; }
.juegos-tira::-webkit-scrollbar-track { background: var(--bg-alt); border-radius: 5px; }
.juegos-tira::-webkit-scrollbar-thumb { background: var(--card); border-radius: 5px; }

.juego-miniatura {
    flex: 0 0 190px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: var(--card);
    border: 2px solid var(--card-edge);
    border-radius: var(--radius-lg);
    color: var(--text);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.juego-miniatura img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg);
}
.juego-miniatura-titulo {
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dim);
}
.juego-miniatura:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.juego-miniatura[aria-selected="true"] {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(240, 144, 24, .25);
}
.juego-miniatura[aria-selected="true"] .juego-miniatura-titulo { color: var(--orange); }

/* Etiqueta del ganador de jam.
   El texto sale del PHP, no de content:, para que se traduzca. */
.juego-miniatura.es-ganador { position: relative; }

.juego-cinta {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 1;
    padding: 3px 8px;
    background: var(--bg-alt);
    border: 1px solid var(--orange);
    border-radius: 5px;
    color: var(--orange);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* --- Panel de detalle --- */
.juego-panel {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 32px;
    margin-top: 12px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

/* Sin JS se ven todos apilados (y las anclas funcionan).
   Con JS solo se ve el seleccionado. */
.js .juego-panel { display: none; }
.js .juego-panel.activo { display: grid; }

.juego-panel + .juego-panel { margin-top: 20px; }
.js .juego-panel + .juego-panel { margin-top: 12px; }

.juego-panel-portada img {
    width: 100%;
    border: 2px solid var(--card-edge);
    border-radius: var(--radius);
    background: var(--card);
}

.juego-titulo { font-size: 1.5rem; color: var(--text); }

.juego-datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    margin: 0 0 18px;
    font-size: .9375rem;
}
.juego-datos dt {
    color: var(--text-faint);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .06em;
    align-self: center;
}
.juego-datos dd { margin: 0; color: var(--text); }
.juego-datos .juego-ganador { color: var(--orange); font-weight: 700; }

.juego-descripcion { color: var(--text-dim); margin: 0 0 20px; }
.juego-descripcion em { color: var(--blue); font-style: italic; }

.juego-nota {
    margin: 0;
    padding: 12px 16px;
    background: var(--bg-alt);
    border-left: 3px solid var(--blue-deep);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-dim);
    font-size: .9375rem;
}

.juego-acciones { margin: 0; }

/* -------------------------------------------------------------------------
   6b. Portada
   No lleva cabecera: el logo vertical es la pagina y el menu va debajo.
   ------------------------------------------------------------------------- */
/* Sin min-height propio: ya crece con flex:1 desde el body. Ponerselo aqui
   sumaba la altura del pie y hacia aparecer scroll en una pantalla que
   deberia caber entera. */
.portada {
    display: grid;
    place-items: center;
    padding: 40px 24px 56px;
    background:
        radial-gradient(circle at 50% 32%, rgba(72, 96, 120, .30), transparent 62%),
        var(--bg);
}

.portada-interior {
    width: 100%;
    max-width: 640px;
    text-align: center;
}

/* La perspectiva vive en el contenedor: sin ella, rotateX/rotateY quedan
   planos y no hay sensación de volumen. */
.portada-marca {
    margin: 0 0 8px;
    perspective: 1000px;
}

/* El logo se queda con lo que sobra despues del resto de la portada (lema,
   menu, redes y pie suman unos 452px). Asi la portada cabe entera sin scroll
   tambien en ventanas bajas, que era el motivo de que apareciera barra. */
/* Las variables las mueve js/sitio.js con el ratón. Estos son los valores de
   reposo, que son también lo que se ve sin JavaScript. Como las propiedades
   personalizadas heredan, la <img> hija las lee sin repetirlas. */
.portada-carta {
    --rx: 0deg;
    --ry: 0deg;
    --sx: 0px;
    --sy: 10px;
    --brillo-x: 50%;
    --brillo-y: 50%;

    position: relative;
    display: inline-block;
    transform: rotateX(var(--rx)) rotateY(var(--ry));

    /* Solo hay transición para volver al reposo al salir el ratón. Mientras
       se sigue al ratón NO hay ninguna (ver .siguiendo más abajo).
       Y nada de will-change: promocionar la capa hace que el compositor
       rasterice la imagen una vez y reutilice esa textura para animar el
       giro, que es exactamente lo que la vuelve borrosa al moverse. */
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* El drop-shadow va aquí y NO en el elemento rotado: tener filtro y transform
   3D en el mismo elemento obliga a rasterizar, filtrar y luego rotar esa
   textura, y la imagen se ve blanda. */
.portada-carta img {
    display: block;
    width: auto;
    height: clamp(150px, calc(100vh - 452px), 420px);
    height: clamp(150px, calc(100svh - 452px), 420px);
    filter: drop-shadow(var(--sx) var(--sy) 26px rgba(0, 0, 0, .6));
    transition: filter .45s cubic-bezier(.22, .61, .36, 1);
}

/* Brillo. Se recorta con el propio PNG como máscara, así solo se ve sobre la
   carta y no sobre el rectángulo transparente que la rodea. */
.portada-carta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
                transparent 42%,
                rgba(255, 255, 255, .10) 50%,
                transparent 58%);
    background-size: 250% 250%;
    background-position: var(--brillo-x) var(--brillo-y);
    -webkit-mask-image: var(--carta);
            mask-image: var(--carta);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    opacity: 0;
    transition: opacity .45s ease, background-position .45s cubic-bezier(.22, .61, .36, 1);
}

/* Siguiendo al ratón: sin transición en el giro. El movimiento ya es suave
   porque js/sitio.js reposiciona en cada frame con requestAnimationFrame, y
   así el navegador repinta la imagen en vez de estirar una textura cacheada.
   Es lo que mantiene la carta nítida en movimiento. */
.portada-marca.siguiendo .portada-carta {
    transition: none;
}
.portada-marca.siguiendo .portada-carta img {
    transition: none;
}
.portada-marca.siguiendo .portada-carta::after {
    opacity: 1;
    transition: opacity .25s ease;
}

.portada-lema {
    margin: 0 0 28px;
    color: var(--text-dim);
    font-size: 1.0625rem;
    font-style: italic;
}

.portada-menu { margin-bottom: 36px; }

.portada-menu .menu-lista {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.portada-menu .menu-lista a {
    padding: 12px 20px;
    font-size: .875rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
}
.portada-menu .menu-lista a:hover,
.portada-menu .menu-lista a:focus-visible {
    background: var(--card);
    color: var(--text);
}
.portada-menu .menu-lista .activo a {
    color: var(--orange);
    border-color: var(--orange);
}

.portada-redes-titulo {
    margin: 0 0 14px;
    color: var(--text-faint);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   6c. Redes sociales
   ------------------------------------------------------------------------- */
.redes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Iconos del sprite: heredan el color del texto, así el hover los arrastra */
.icono {
    width: 1.15em;
    height: 1.15em;
    fill: currentColor;
    vertical-align: -.18em;
    flex: 0 0 auto;
}

.red {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    background: var(--card);
    color: var(--text);
    border: 2px solid var(--card-edge);
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.red:hover, .red:focus-visible {
    background: var(--orange);
    color: #14161a;
    text-decoration: none;
    transform: translateY(-2px);
}

.redes-grande .red { padding: 14px 26px; font-size: 1rem; }

/* -------------------------------------------------------------------------
   6d. Informacion y contacto
   ------------------------------------------------------------------------- */
/* Bloques de texto de las paginas. Ocupan todo el ancho del contenedor,
   igual que el resto de elementos. */
.contenido { color: var(--text-dim); }
.contenido p { margin: 0 0 1em; }
.contenido b, .contenido strong { color: var(--text); }

.tint-orange { color: var(--orange); font-style: normal; }
.tint-blue   { color: var(--blue);   font-style: normal; }
.tint-strong { color: var(--text);   font-style: normal; }

.titulo-seccion {
    margin: 44px 0 20px;
    padding-bottom: .3em;
    border-bottom: 1px solid var(--line);
    font-size: 1.375rem;
    color: var(--text);
}

.ficha-miembro {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 28px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
/* Sin marco ni fondo: el PNG ya trae su propio diseño. */
.ficha-miembro-foto img {
    width: 100%;
}
.ficha-miembro-nombre { margin: 0 0 .4em; color: var(--orange); font-size: 1.25rem; }
.ficha-miembro-bio { margin: 0 0 1.2em; color: var(--text-dim); }
.ficha-miembro-subtitulo {
    margin: 0 0 .6em;
    color: var(--text-faint);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lista-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lista-roles li {
    padding-left: 18px;
    position: relative;
    color: var(--text-dim);
    font-size: .9375rem;
}
.lista-roles li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 7px; height: 7px;
    background: var(--orange);
    border-radius: 50%;
}

.tecnologias { margin: 20px 0 0; text-align: center; }
.tecnologias img { border-radius: var(--radius); }

/* Ancho completo del contenedor, como el resto de elementos. */
.tarjeta-contacto {
    margin-top: 28px;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
}
.tarjeta-contacto-nombre { margin: 0 0 .3em; color: var(--orange); font-size: 1.375rem; }
.tarjeta-contacto .entradilla { margin: 0 auto 22px; color: var(--text-dim); }

/* -------------------------------------------------------------------------
   7. Botones
   ------------------------------------------------------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--orange);
    color: #14161a;
    border: 2px solid var(--card-edge);
    border-radius: var(--radius);
    font-weight: 700;
    letter-spacing: .02em;
    transition: background .2s ease, transform .15s ease;
}
.boton:hover, .boton:focus-visible {
    background: var(--orange-hi);
    color: #14161a;
    text-decoration: none;
    transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   8. Pie
   ------------------------------------------------------------------------- */
.piedepagina {
    padding: 24px;
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
    text-align: center;
}
.copyright {
    margin: 0;
    color: var(--text-faint);
    font-size: .8125rem;
}

.ir-arriba {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 90;
    width: 46px; height: 46px;
    display: none;
    place-items: center;
    background: var(--card);
    color: var(--orange);
    border: 2px solid var(--card-edge);
    border-radius: 50%;
    font-size: 1.25rem;
    box-shadow: var(--shadow);
}
.ir-arriba.visible { display: grid; }
.ir-arriba:hover, .ir-arriba:focus-visible {
    background: var(--orange);
    color: #14161a;
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   9. Adaptativo
   El corte está en 900px, no en 768: con el logotipo a 57px el menú ya se
   solapa con la marca alrededor de los 820px.
   ------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .juego-panel { grid-template-columns: 1fr; gap: 22px; }
    .juego-panel-portada { max-width: 320px; }
}

@media (max-width: 900px) {
    .cabecera-interior { height: 56px; gap: 12px; }
    .cabecera.encogida .cabecera-interior { height: 56px; }

    /* En móvil solo el logotipo: el zorro a este tamaño no se lee */
    .marca-isotipo,
    .cabecera.encogida .marca-isotipo { display: none; }
    .marca-logotipo,
    .cabecera.encogida .marca-logotipo { height: 32px; }

    .menu-boton { display: flex; }

    .menu {
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        margin: 0;
        background: var(--bg-alt);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
    }
    .menu:not(.abierto) { display: none; }

    /* Ojo: estas reglas van acotadas a .menu (el desplegable de la cabecera).
       Sin el prefijo alcanzaban tambien al menu de la portada, que se apilaba
       en vertical y ocupaba 300px, sacando la portada fuera de la ventana. */
    .menu .menu-lista {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px;
    }
    .menu .menu-lista a {
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }
    .menu .menu-lista li:last-child a { border-bottom: 0; }
    .menu .menu-lista .activo a { border-bottom-color: var(--orange); }
    .menu .menu-idioma a {
        margin: 8px 0 0;
        text-align: center;
        border-radius: var(--radius);
    }

    .pagina { padding: 32px 0 56px; }
    .juego-miniatura { flex-basis: 150px; }
}

@media (max-width: 760px) {
    .ficha-miembro { grid-template-columns: 1fr; gap: 20px; }
    .ficha-miembro-foto { max-width: 220px; margin-inline: auto; }
}

@media (max-width: 560px) {
    .contenedor { padding-inline: 16px; }
    .cabecera-interior { padding-inline: 16px; }
    .juego-panel { padding: 20px; }
    .juego-miniatura { flex-basis: 132px; }

    .portada { padding: 24px 16px 36px; }

    /* El menu de la portada NO se apila en vertical: en una pantalla de movil
       ocupaba 312px el solo y sacaba la portada fuera de la ventana. Envuelve
       en dos filas, que es igual de comodo de pulsar y cabe. */
    .portada-menu { margin-bottom: 28px; }
    .portada-menu .menu-lista { gap: 8px; }
    .portada-menu .menu-lista a { padding: 11px 16px; }

    .tarjeta-contacto { padding: 22px; }
}

/* -------------------------------------------------------------------------
   10. Preferencias del sistema
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .cabecera, .menu, .ir-arriba, .juegos-tira { display: none !important; }
    body { background: #fff; color: #000; }
    .js .juego-panel { display: grid !important; }
}