/* ==========================================================
   WynLabs — sistema visual corporativo
   ----------------------------------------------------------
   Oscuro por defecto (coherente con el logotipo, que vive
   sobre negro); claro automatico si el sistema lo pide.
   Cero recursos externos: ninguna fuente, script ni imagen
   de terceros, para no filtrar la IP del visitante.
   ========================================================== */

:root {
  color-scheme: dark light;

  /* --- Marca (invariable en ambos modos) --- */
  --marca-azul: #1866f2;   /* el azul del logo: rellenos y botones */
  --marca-negro: #010101;  /* el fondo del logo: banda de cabecera */

  /* --- Paleta del juego, como acentos secundarios --- */
  --crema: #fdf6e3;
  --terracota: #e07a5f;
  --verde: #6aaa64;

  /* --- Superficies (modo oscuro) --- */
  --fondo: #0b0c0e;
  --superficie: #14161a;
  --borde: #262a31;

  /* --- Texto --- */
  --texto: #e8eaed;
  --texto-suave: #9aa0a8;
  --enlace: #5b9bff;       /* azul aclarado: el de marca no llega a 4.5:1 */
  --enlace-hover: #f0a58c;

  /* --- Tipografia fluida (sin media queries) --- */
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
            Arial, sans-serif;
  --t-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  --t-h1: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --t-h2: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  --t-h3: clamp(1.02rem, 0.99rem + 0.15vw, 1.1rem);
  --t-menor: 0.9rem;

  /* --- Ritmo --- */
  --ancho-lectura: 39rem;  /* ~72 caracteres por linea a 17px */
  --radio: 10px;
  --transicion: 160ms ease;
}

@media (prefers-color-scheme: light) {
  /* Corporativo: un gris azulado casi blanco, neutro y afin al azul de
     marca. El crema es la paleta de un juego, no la del estudio: con
     varios titulos, la raiz no puede vestirse de uno de ellos. */
  :root {
    --fondo: #f7f8fa;
    --superficie: #ffffff;
    --borde: #e3e6ea;
    --texto: #14161a;
    --texto-suave: #5c6470;
    --enlace: #1257d6;
    --enlace-hover: #b8502f;
  }

  /* El sitio de cada juego si lleva su paleta. La clase la pone la
     plantilla al generar la pagina, asi que no hay nada que recordar. */
  .juego {
    --fondo: var(--crema);
    --superficie: #fffdf5;
    --borde: #e6ddc7;
    --texto: #3a3a3c;
    --texto-suave: #6b6b6e;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--marca-azul);
  color: #fff;
}

/* --- Accesibilidad de teclado --- */

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--marca-azul);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radio) 0;
  text-decoration: none;
  z-index: 10;
}

.saltar:focus {
  left: 0;
}

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

/* --- Cabecera: banda negra de marca en ambos modos --------
   El logotipo va sobre negro por definicion, asi que la banda
   lo es tambien en modo claro: es el ancla de marca. */

.cabecera {
  background: var(--marca-negro);
  border-bottom: 1px solid var(--borde);
  padding: 1rem 1.5rem;
  line-height: 0;  /* si no, el inline-block anade ~7px fantasma */
}

.cabecera a {
  display: inline-block;
  line-height: 0;
}

.cabecera img {
  display: block;
  height: 60px;
  width: auto;
}

/* --- Cuerpo --- */

main {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.3;
  margin: 2.75rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--borde);
  scroll-margin-top: 1.5rem;
}

h3 {
  font-size: var(--t-h3);
  margin: 1.75rem 0 0.5rem;
  color: var(--texto);
}

p, ul, ol, dl { margin: 0 0 1rem; }
ul, ol { padding-left: 1.35rem; }
li { margin-bottom: 0.4rem; }

strong { color: var(--texto); font-weight: 700; }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

a {
  color: var(--enlace);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transicion);
}

a:hover { color: var(--enlace-hover); }

.actualizado {
  color: var(--texto-suave);
  font-size: var(--t-menor);
  margin-bottom: 2.5rem;
}

/* --- Bloques destacados --- */

.ficha,
.destacado {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.15rem 1.35rem;
  margin: 0 0 1.5rem;
}

.ficha { border-left: 3px solid var(--marca-azul); }
.destacado { border-left: 3px solid var(--terracota); }
.destacado :last-child { margin-bottom: 0; }

.ficha dt {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: 0.9rem;
}

.ficha dt:first-child { margin-top: 0; }
.ficha dd { margin: 0.15rem 0 0; }

/* --- Pie --- */

.pie {
  border-top: 1px solid var(--borde);
  margin-top: 3rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
  font-size: var(--t-menor);
  color: var(--texto-suave);
}

/* Selector de idioma: separado del resto de enlaces del pie por una
   linea, para que se lea como otra cosa y no como una pagina mas. */
.pie .idioma {
  border-left: 1px solid var(--borde);
  padding-left: 0.9rem;
  margin-left: 0.35rem;
}

/* En la portada el pie es SOLO la eleccion de idioma. */
.portada .idiomas a {
  margin: 0 0.9rem;
  letter-spacing: 0.08em;
}

.pie a {
  margin: 0 0.55rem;
  white-space: nowrap;
  color: var(--texto-suave);
  text-decoration: none;
}

.pie a:hover {
  color: var(--enlace);
  text-decoration: underline;
}

/* --- Portada: logotipo centrado sobre negro --- */

.portada {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--marca-negro);
}

.portada .marca {
  display: grid;
  justify-items: center;
  align-content: center;  /* sin esto las filas auto se estiran y
                             separan el lema del logotipo */
  padding: 2rem 1.5rem;
  max-width: none;
}

/* Usa el logotipo recortado: el cuadrado tiene dos tercios de margen
   vacio, asi que a igual caja el texto se veia la mitad de grande. */
.portada .marca img {
  display: block;
  width: min(72vw, 480px);
  height: auto;
}

/* Lema bajo el logotipo: discreto, ancho de letra abierto. Alineado
   con el borde izquierdo del logotipo, no centrado a ojo. */
.portada .lema {
  margin: 1.4rem 0 0;
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a8f97;
  text-align: center;
}

.portada .pie {
  border-top: 0;
  margin-top: 0;
  color: #6b6b6e;
}

.portada .pie a { color: #8a8a8e; }
.portada .pie a:hover { color: #fff; }

/* --- Preferencias del visitante --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Impresion: las paginas legales se guardan e imprimen --- */

@media print {
  .cabecera, .pie, .saltar { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  h2 { border-bottom: 1px solid #999; }
  .ficha, .destacado {
    background: none;
    border: 1px solid #999;
  }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}
/* ==========================================================
   Dossier de prensa
   ----------------------------------------------------------
   Una rejilla que se adapta sola: las capturas son 9:16 y hay
   ocho, asi que en movil caben dos por fila y en escritorio
   cuatro sin media queries. `.estrecha` es para el icono y el
   grafico destacado, que no comparten proporcion con nada.
   ========================================================== */

.prensa .galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.75rem;
}

.prensa .galeria.estrecha {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.prensa .galeria figure {
  margin: 0;
}

.prensa .galeria a {
  display: block;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie);
  transition: border-color var(--transicion);
}

.prensa .galeria a:hover,
.prensa .galeria a:focus-visible {
  border-color: var(--marca-azul);
}

.prensa .galeria img {
  display: block;
  width: 100%;
  height: auto;
}

.prensa main h3 {
  font-size: var(--t-menor);
  letter-spacing: 0.08em;
  color: var(--texto-suave);
  margin-top: 1.5rem;
}