/* ==========================================================================
   Vossen — hoja de estilos única del sitio (vossengames.com)
   Generada a mano, sin frameworks. Un solo fichero, sin @import.

   Sistema de diseño (lectura fijada por el encargo, 2026-09-12):
   landing de estudio indie de puzles para iPhone, público 40-70 años,
   lenguaje sobrio y muy legible, premium-consumer, sensación Apple.
   Diales: VARIANCE 5 (asimetría moderada, no simetría perfecta ni caos),
   MOTION 5 (entradas suaves y aparición al hacer scroll, corto y una
   sola vez; nada en bucle, nada que secuestre el scroll — encargo
   2026-09-12), DENSITY 3 (aireado, tipo "daily app" hacia "galería").

   Capa de movimiento (2026-09-12): solo `transform` y `opacity`, curva
   `cubic-bezier(.16,1,.3,1)`, 300-700ms. El JS vanilla que la acompaña
   vive en `../js/site.js` (añade `.is-in` a `.reveal` vía
   IntersectionObserver y `.is-scrolled` a la cabecera). Sin `.js` en
   `<html>` o sin IntersectionObserver, todo es visible: la ocultación
   de `.reveal` está gateada por `html.js`, nunca es el estado base.

   Marca (fija, no revisable aquí): acento naranja #dc6938 en TODA la
   página igual (botón primario, regla de acento, enlaces en hover);
   tinta #1f1f1f; hueso #f7f4ef. Modo oscuro invierte tinta/hueso; el
   naranja se mantiene igual en los dos modos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografías de marca (Bricolage Grotesque para títulos, Instrument Sans
   para texto). Variables, licencia OFL, servidas desde este dominio.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Bricolage';
  src:url('../fonts/bricolage.ttf') format('truetype-variations');
  font-weight:400 800;
  font-display:swap;
}
@font-face{
  font-family:'Instrument';
  src:url('../fonts/instrument.ttf') format('truetype-variations');
  font-weight:400 700;
  font-display:swap;
}

/* --------------------------------------------------------------------------
   Tokens. Un solo acento (naranja), un solo sistema de radios: 20px para
   tarjetas/medios, píldora (999px) para controles. Contraste comprobado
   (WCAG AA): naranja sobre tinta o tinta sobre naranja pasa 4.5:1 para
   texto normal; naranja sobre hueso NO pasa 4.5:1 a tamaño de cuerpo, así
   que el naranja se usa como fondo de botón (con texto tinta encima),
   como numeración grande (texto grande, pasa el umbral de 3:1) y como
   trazo de acento (subrayados, reglas), nunca como color de texto a
   tamaño de párrafo sobre hueso. Decisión anotada en el informe final.
   -------------------------------------------------------------------------- */
:root{
  color-scheme:light dark;

  --bg:#f7f4ef;          /* hueso */
  --surface:#fdfbf8;     /* superficie elevada: hueso algo más claro, sin blanco puro */
  --text:#1f1f1f;        /* tinta */
  --text-soft:#55504a;   /* tinta suavizada, texto secundario */
  --text-mute:#6b655a;   /* tinta atenuada, texto terciario (5,3:1 sobre hueso, AA) */
  --line:#e4ddd0;        /* raya fina sobre hueso */
  --accent:#dc6938;      /* naranja de marca, fijo en los dos modos */
  --on-accent:#1f1f1f;   /* texto sobre fondo naranja (pasa AA) */
  --focus:#1f1f1f;

  --radius:20px;         /* tarjetas y medios */
  --radius-pill:999px;   /* botones y controles */
  --shadow:0 1px 2px rgba(31,31,31,.05), 0 14px 34px -16px rgba(31,31,31,.20);
  --shadow-btn:0 10px 20px -12px rgba(220,105,56,.55); /* sombra del botón, tintada al acento */

  --container:1120px;
  --header-h:72px;                          /* altura máxima de la cabecera */
  --header-bg-scrolled:rgba(247,244,239,.78); /* hueso 78%, cabecera al bajar */
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#1f1f1f;          /* tinta: la propia marca la fija como fondo oscuro */
    --surface:#2a2823;     /* panel algo más claro que el fondo, sin llegar a gris puro */
    --text:#f7f4ef;        /* hueso */
    --text-soft:#c9c2b4;
    --text-mute:#948c7c;
    --line:#3a362f;
    --accent:#dc6938;      /* se mantiene igual: instrucción de marca */
    --on-accent:#1f1f1f;
    --focus:#f7f4ef;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.6);
    --shadow-btn:0 10px 24px -12px rgba(220,105,56,.7);
    --header-bg-scrolled:rgba(31,31,31,.78); /* tinta 78%, cabecera al bajar en oscuro */
  }
}

/* --------------------------------------------------------------------------
   Reset mínimo y base tipográfica.
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Desplazamiento suave solo para el ancla "Ver los juegos" (motivo:
     llegar a #juegos con una transición corta, no un salto brusco). */
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Instrument',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.num{
  font-family:'Bricolage','Instrument',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0;
}
p{margin:0; max-width:60ch}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--container); margin:0 auto; padding:0 24px}

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

/* Pequeña regla de acento naranja: el único uso decorativo puro del
   acento, reservado para marcar el arranque de una sección. */
.rule{
  display:block;
  width:44px; height:3px;
  background:var(--accent);
  border-radius:var(--radius-pill);
  margin:0 0 16px;
}

/* --------------------------------------------------------------------------
   Cabecera: logo + navegación en una sola línea, altura contenida
   (≤ var(--header-h)). Icono de marca (autocontenido en color, válido en
   claro y oscuro) más el nombre escrito al lado, siguiendo la norma de
   uso del logotipo.

   Translúcida al bajar (motivo: orientación durante el scroll, estilo
   Apple): en reposo, fondo liso del color de la página, sin borde;
   `.is-scrolled` (la añade site.js al perder de vista el centinela de
   `#header-sentinel`) mete un fondo semitransparente con desenfoque y
   un borde inferior fino. Con transparencia reducida o sin soporte de
   `backdrop-filter`, cae a un fondo sólido: sigue orientando igual.
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, border-color .3s ease;
}
.site-header.is-scrolled{
  background:var(--header-bg-scrolled);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--line);
}
@media (prefers-reduced-transparency:reduce){
  .site-header.is-scrolled{
    background:var(--bg);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
@supports not (backdrop-filter:blur(1px)){
  .site-header.is-scrolled{background:var(--bg)}
}
.header-sentinel{height:1px}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 24px;
  min-height:64px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Bricolage','Instrument',sans-serif;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-.01em;
  flex:none;
}
.brand img{width:34px; height:34px; flex:none}

.nav{
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,32px);
  font-size:.98rem;
}
/* Subrayado que crece desde la izquierda (motivo: feedback de foco de
   lectura, sin el salto brusco de un borde que aparece de golpe). */
.nav a{
  position:relative;
  color:var(--text-soft);
  padding:4px 2px;
  transition:color .15s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:2px; right:2px; bottom:0;
  height:2px;
  background:var(--accent);
  border-radius:var(--radius-pill);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{transform:scaleX(1)}

/* --------------------------------------------------------------------------
   Menú hamburguesa en móvil (decisión del autor, 12/09/2026). Progresivo:
   el botón solo existe con JavaScript (`html.js`), así que sin JS los
   enlaces siguen en línea y el sitio se navega igual. Las tres barras se
   dibujan con CSS (no hay librería de iconos: el sitio no carga nada de
   terceros) y se convierten en aspa al abrir.
   -------------------------------------------------------------------------- */
.nav-toggle{display:none}

/* Sin JavaScript y en pantalla estrecha, se ocultan las entradas marcadas
   para que la fila no desborde. Con JavaScript caben todas en el panel. */
@media (max-width:620px){
  html:not(.js) .nav .nav-hide-mobile{display:none}
  html:not(.js) .nav{gap:20px}
}

@media (max-width:620px){
  /* Con el botón de 48px, el relleno vertical baja para que la cabecera
     no pase de 72px (tope del sistema). */
  .site-header .wrap{padding:10px 24px; min-height:0}

  html.js .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    margin-right:-10px;
    padding:0;
    border:0;
    border-radius:var(--radius-pill);
    background:transparent;
    color:var(--text);
    cursor:pointer;
    flex:none;
  }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{
    display:block;
    width:22px;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform .25s cubic-bezier(.16,1,.3,1), opacity .2s ease;
  }
  .nav-toggle-bars{position:relative}
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{content:""; position:absolute; left:0}
  .nav-toggle-bars::before{top:-7px}
  .nav-toggle-bars::after{top:7px}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}

  /* Panel desplegable: ocupa el ancho, debajo de la cabecera. */
  html.js .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px 24px 14px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  html.js .site-header.is-open .nav{display:flex}
  html.js .nav a{
    padding:14px 2px;
    font-size:1.08rem;
    color:var(--text);
    border-top:1px solid var(--line);
  }
  html.js .nav a:first-child{border-top:0}
  html.js .nav a::after{display:none}
  html.js .nav .nav-hide-mobile{display:block}
}

/* --------------------------------------------------------------------------
   Keyframes compartidos de la capa de movimiento. Solo `transform` y
   `opacity` (regla de rendimiento); `will-change` se declara al empezar
   y se suelta en el propio keyframe al terminar, sin dejar capas vivas.
   -------------------------------------------------------------------------- */
@keyframes fade-up{
  0%{opacity:0; transform:translateY(20px); will-change:transform,opacity}
  99%{will-change:transform,opacity}
  100%{opacity:1; transform:translateY(0); will-change:auto}
}
@keyframes fade-up-scale{
  0%{opacity:0; transform:translateY(20px) scale(.98); will-change:transform,opacity}
  99%{will-change:transform,opacity}
  100%{opacity:1; transform:translateY(0) scale(1); will-change:auto}
}

/* Aparición al hacer scroll (motivo: narración, cada ficha llega cuando
   el lector llega). `site.js` añade `.is-in` con IntersectionObserver;
   sin `.js` en <html> (sin JS, o si falla) esta regla ni se aplica, así
   que todo se ve desde el principio: el estado oculto nunca es la base.
   Sin `will-change` permanente: no es un elemento que siga animándose. */
html.js .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
}
html.js .reveal.is-in{
  opacity:1;
  transform:translateY(0);
}

/* --------------------------------------------------------------------------
   Hero: texto alineado a la izquierda, sin centrar. Máximo 3 elementos de
   texto (titular, subtexto, un botón). Visual real a la derecha en
   escritorio; en móvil se ve un adelanto recortado, sin robarle sitio al
   titular ni al botón, que tienen que caber en el primer scroll.

   Entrada en cascada al cargar (motivo: jerarquía, primero el titular).
   Solo CSS: cada elemento anima una vez con su propio retardo; el
   titular arranca a los 0ms para que la página nunca se vea en blanco.
   -------------------------------------------------------------------------- */
.hero{padding:40px 0 56px}
.hero h1{animation:fade-up .65s cubic-bezier(.16,1,.3,1) both}
.hero p{animation:fade-up .65s cubic-bezier(.16,1,.3,1) both; animation-delay:.09s}
.hero .text .btn{animation:fade-up .65s cubic-bezier(.16,1,.3,1) both; animation-delay:.18s}
.hero .media{animation:fade-up-scale .7s cubic-bezier(.16,1,.3,1) both; animation-delay:.27s}
.hero .split{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
}
@media (min-width:860px){
  .hero .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px}
  .hero{padding:56px 0 80px}
}

.hero h1{
  font-size:clamp(2.3rem,6vw,3.9rem);
  line-height:1.04;
  margin:0 0 18px;
  font-weight:800;
}
.hero p{
  font-size:clamp(1.05rem,2.1vw,1.28rem);
  color:var(--text-soft);
  margin:0 0 26px;
}
/* Fotografía de portada (3:2). En móvil va debajo del texto a todo el
   ancho; en escritorio ocupa la columna derecha, algo mayor que la del
   texto porque es el escaparate del estudio. */
.hero .media{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  aspect-ratio:3/2;
  width:100%;
}
.hero .media img{width:100%; height:100%; object-fit:cover; display:block}

/* --------------------------------------------------------------------------
   Sección Juegos: fichas con layouts distintos entre sí. Sereno y Filon
   usan el mismo patrón de split imagen/texto (como máximo dos seguidos);
   Rosca rompe el patrón con una franja de una sola columna, sin imagen.
   -------------------------------------------------------------------------- */
.games{padding:24px 0 8px; scroll-margin-top:var(--header-h)}
.games > h2{font-size:clamp(1.6rem,3.4vw,2rem)}

.game{padding:40px 0 64px; border-top:1px solid var(--line)}
.game h3{font-size:clamp(1.8rem,3.8vw,2.5rem); line-height:1.1; margin:0 0 4px}
.kind{color:var(--text-mute); font-size:1rem; margin:0 0 18px}
.body{color:var(--text-soft); margin:0 0 28px}

.split{display:grid; grid-template-columns:1fr; gap:32px; align-items:center}
@media (min-width:860px){
  .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px}
  .split.flip > .text{order:2}
  .split.flip > .media{order:1}
}

.shots{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.shots img{border-radius:var(--radius); box-shadow:var(--shadow)}
.art{border-radius:var(--radius); box-shadow:var(--shadow)}

.game-head{display:flex; align-items:center; gap:16px; margin-bottom:14px}
.game-icon{width:60px; height:60px; border-radius:15px; box-shadow:var(--shadow); flex:none}

.tagline{
  font-family:'Bricolage','Instrument',sans-serif;
  font-weight:600;
  font-size:1.12rem;
  color:var(--text);
  margin:0 0 24px;
}

/* Rosca: sin imagen ni icono; franja de una columna, mucho más quieta que
   las fichas anteriores, con un margen interior generoso a la izquierda
   marcado por la regla de acento en vertical. */
.soon{
  padding:36px 0 56px;
  border-top:1px solid var(--line);
  display:grid;
  gap:6px;
  max-width:52ch;
}
.soon h3{font-size:clamp(1.6rem,3.2vw,2.1rem); color:var(--text)}
.soon .kind{margin-bottom:0}
.soon .game-head{margin-bottom:10px}
.soon .body{color:var(--text-soft); margin:0}

/* --------------------------------------------------------------------------
   Botones. Un solo estilo primario: fondo naranja, texto tinta (pasa AA
   4.5:1); píldora; alto real ≥48px por el padding vertical.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:var(--on-accent);
  font-weight:700;
  font-size:1.02rem;
  padding:16px 30px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
  box-shadow:0 0 0 0 transparent;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
/* Respuesta táctil (motivo: feedback de que el botón reacciona): se
   levanta un poco con una sombra tintada al naranja de marca, nunca
   negra; al pulsar, se encoge como un botón físico. */
.btn:hover{filter:brightness(1.06); transform:translateY(-1px); box-shadow:var(--shadow-btn)}
.btn:active{transform:scale(.98); box-shadow:0 0 0 0 transparent}

/* --------------------------------------------------------------------------
   Cómo hacemos los juegos: lista grande a una columna con numeración
   tipográfica en naranja (texto grande: pasa el umbral de contraste de
   3:1 para texto grande). Layout distinto de las fichas anteriores.
   -------------------------------------------------------------------------- */
.method{padding:24px 0 80px}
.method h2{font-size:clamp(1.6rem,3.4vw,2rem); margin-bottom:28px}
/* Cuatro ventajas sin numerar (no son una secuencia): rejilla 2x2 en
   escritorio, una columna en móvil, separadas por espacio y una raya fina
   superior, sin tarjetas. Debajo, los dos botones de descarga. */
.method-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:0 48px;
}
.method-grid li{padding:22px 0 26px; border-top:1px solid var(--line)}
.method-grid h3{
  font-family:'Bricolage','Instrument',system-ui,sans-serif;
  font-size:1.3rem; font-weight:700; letter-spacing:-.01em;
  margin:0 0 8px; color:var(--text);
}
.method-grid p{font-size:1.08rem; color:var(--text-soft); margin:0; max-width:48ch}
.method-actions{display:flex; flex-wrap:wrap; gap:14px 16px; margin-top:36px}
@media (min-width:760px){
  .method-grid{grid-template-columns:1fr 1fr}
}

/* --------------------------------------------------------------------------
   Pie: enlaces, firma, correo.
   -------------------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line); padding:36px 0 56px}
/* Dos filas: etiqueta + enlaces, y una segunda fila sin etiqueta. La
   etiqueta se distingue por color y peso, nunca por subrayado, para que
   no se confunda con un enlace. */
.footer-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 28px;
  margin:0 0 12px;
}
.footer-row:last-of-type{margin-bottom:18px}
.footer-label{
  color:var(--text-mute);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.01em;
  flex:none;
}
.site-footer ul{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  margin:0;
  padding:0;
  list-style:none;
  color:var(--text-soft);
  font-size:.96rem;
}
.site-footer a{
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:border-color .15s ease, color .15s ease;
}
.site-footer a:hover{border-bottom-color:var(--accent); color:var(--text)}
.site-footer .sig{margin:0; color:var(--text-mute); font-size:.96rem}
.site-footer .sig a{display:inline-block; margin-top:6px; border-bottom:1px solid var(--line)}
.site-footer .sig a:hover{border-bottom-color:var(--accent); color:var(--text)}

/* --------------------------------------------------------------------------
   PASO 2 (2026-09-12): páginas de juego (game.html: /sereno/, /filon/,
   /rosca/) y /soporte/ (support.html). Mismos tokens, mismo sistema de
   radios y sombras que arriba; layouts nuevos, distintos entre sí y de
   los de la portada (fila con scroll-snap, bento 2x2, columna sola,
   acordeón nativo). Cabeceras con la misma cascada de entrada que el
   hero de la portada (keyframes ya declaradas arriba); el resto usa
   `.reveal` como el resto del sitio.
   -------------------------------------------------------------------------- */

/* Cabecera de página de juego. Comparte estructura entre las tres pero no
   aspecto: el contenido decide (icono+botón en Sereno, imagen clave en
   Filon, ni uno ni otro en Rosca). Sin ".reveal" en estos elementos: ya
   están en el viewport al cargar, así que animan con la cascada fija,
   igual que el hero de la portada. */
.page-hero{padding:40px 0 8px}
@media (min-width:640px){ .page-hero{padding:56px 0 8px} }

.page-hero .page-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:16px;
  animation:fade-up .65s cubic-bezier(.16,1,.3,1) both;
}
.page-icon{width:60px; height:60px; border-radius:15px; box-shadow:var(--shadow); flex:none}
.page-hero h1{font-size:clamp(2.2rem,5.6vw,3.4rem); line-height:1.05}
.page-kind{color:var(--text-mute); font-size:1rem; margin-top:4px}
.page-tagline{
  font-size:clamp(1.05rem,2.1vw,1.28rem);
  color:var(--text-soft);
  max-width:52ch;
  margin:0 0 26px;
  animation:fade-up .65s cubic-bezier(.16,1,.3,1) both;
  animation-delay:.09s;
}
.page-hero .btn{animation:fade-up .65s cubic-bezier(.16,1,.3,1) both; animation-delay:.18s}

/* Variante con imagen clave (Filon): visual a todo el ancho arriba,
   composición apilada (no el split de la portada). El grupo de texto
   anima como un solo bloque para no duplicar la cascada de sus hijos. */
.page-hero--visual .hero-visual{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin-bottom:28px;
  animation:fade-up-scale .7s cubic-bezier(.16,1,.3,1) both;
}
.page-hero--visual .hero-visual img{width:100%; height:auto; display:block}
.page-hero--visual .hero-copy{animation:fade-up .65s cubic-bezier(.16,1,.3,1) both; animation-delay:.16s}
.page-hero--visual .hero-copy .page-head,
.page-hero--visual .hero-copy .page-tagline,
.page-hero--visual .hero-copy .btn{animation:none}
.page-hero--visual .hero-copy .page-head{margin-bottom:10px}
.page-hero--visual .hero-copy .page-tagline{margin-bottom:24px}

/* Rosca: sin icono ni botón. Tipografía más grande para que la columna
   sola no se lea como una página vacía a medio terminar. */
.page-hero--rosca h1{font-size:clamp(2.6rem,7vw,4.2rem)}
.page-hero--rosca .page-kind{font-size:1.15rem; color:var(--text-soft); margin-top:6px}
.page-hero--rosca .page-tagline{font-size:1.15rem; font-weight:600; color:var(--text); max-width:44ch}

/* Cuerpo en prosa: columna corta (hereda max-width:60ch del párrafo base,
   ya ≤ 65 caracteres), un solo espaciado entre párrafos. */
.page-body{padding:8px 0 48px}
.page-body .prose p{color:var(--text-soft); font-size:1.08rem}
.page-body .prose p + p{margin-top:1em}

/* --------------------------------------------------------------------------
   Vídeo de Filon: formato de móvil (9:16), columna estrecha junto al
   texto en escritorio, nunca estirado. Progresivo: el <video> lleva
   "controls" nativos por si no hay JS; site.js los quita y pone el botón
   "Ver la partida" hasta que el usuario decide reproducir (nunca
   autoplay). Layout distinto de la fila de Sereno y del bento de Filon.
   -------------------------------------------------------------------------- */
.video-section{padding:8px 0 56px}
.video-layout{display:grid; grid-template-columns:1fr; gap:28px; align-items:center}
@media (min-width:760px){ .video-layout{grid-template-columns:340px 1fr; gap:48px} }

.video-frame{
  position:relative;
  width:100%;
  max-width:340px;
  aspect-ratio:9/16;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--text);
}
.game-video{width:100%; height:100%; object-fit:cover; display:block}
.play-btn{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:var(--accent);
  color:var(--on-accent);
  font-weight:700;
  font-size:1rem;
  padding:16px 28px;
  border:0;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-btn);
  cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
}
.play-btn:hover{filter:brightness(1.06); transform:translate(-50%,-50%) translateY(-1px)}
.play-btn:active{transform:translate(-50%,-50%) scale(.97)}
.video-copy p{color:var(--text-soft); font-size:1.05rem; max-width:46ch}

/* --------------------------------------------------------------------------
   Capturas de Sereno: fila con desplazamiento lateral y scroll-snap en
   móvil, tres columnas en escritorio; sin tarjetas. Distinta de las
   "shots" 2x1 de la portada (esas viven dentro de la ficha del juego).
   -------------------------------------------------------------------------- */
.gallery{padding:8px 0 56px}
.gallery--scrollrow .shots-row{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:24px;
  padding:4px 4px 14px 0;
  -webkit-overflow-scrolling:touch;
}
.gallery--scrollrow .shots-row-item{flex:0 0 auto; width:66vw; max-width:290px; scroll-snap-align:start}
.gallery--scrollrow .shots-row-item img{border-radius:var(--radius); box-shadow:var(--shadow); width:100%}
@media (min-width:860px){
  .gallery--scrollrow .shots-row{
    overflow-x:visible;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    padding:4px 0 14px;
  }
  .gallery--scrollrow .shots-row-item{width:100%; max-width:none}
}

/* --------------------------------------------------------------------------
   Láminas de Filon: rejilla 2x2 en escritorio, columna en móvil. Distinta
   de la fila de Sereno y de las fichas de la portada.
   -------------------------------------------------------------------------- */
.gallery--bento .laminas{display:grid; grid-template-columns:1fr; gap:20px}
.gallery--bento .laminas-item img{border-radius:var(--radius); box-shadow:var(--shadow); width:100%}
@media (min-width:700px){ .gallery--bento .laminas{grid-template-columns:1fr 1fr; gap:24px} }

/* Enlace de vuelta (solo Rosca, que no tiene botón de tienda). */
.page-back{padding:8px 0 64px}
.back-link{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-size:1.05rem;
  color:var(--text);
  padding-bottom:3px;
  border-bottom:1px solid var(--line);
  transition:border-color .15s ease;
}
.back-link:hover{border-bottom-color:var(--accent)}

/* Enlace de cada tarjeta de la portada a la página de su juego. Intención
   distinta de la del botón (descargar), por eso es un enlace y no un
   segundo botón. Se añadió el 13/09/2026: sin él, /sereno/, /filon/ y
   /rosca/ no se alcanzaban navegando desde ninguna página. */
.game-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px}
.game-more{
  position:relative;
  display:inline-block;
  font-weight:600;
  color:var(--text);
  padding-bottom:3px;
  border-bottom:1px solid var(--line);
  transition:border-color .15s ease;
}
.game-more:hover{border-bottom-color:var(--accent)}

/* Enlace al canal de YouTube bajo el clip. Mismo tratamiento que el resto
   de enlaces de texto del sitio: sin logotipo de terceros, sin color de
   marca ajena. */
.video-more{
  display:inline-block;
  margin-top:14px;
  font-weight:600;
  color:var(--text);
  padding-bottom:3px;
  border-bottom:1px solid var(--line);
  transition:border-color .15s ease;
}
.video-more:hover{border-bottom-color:var(--accent)}
/* En la franja de Rosca es la única acción, así que pesa un poco más. */
.soon .game-more{margin-top:18px; font-size:1.05rem; font-weight:700}

/* --------------------------------------------------------------------------
   Soporte: cabecera breve + acordeón nativo <details>/<summary>, sin JS.
   La apertura anima con la misma keyframe fade-up (opacidad/transform):
   el navegador la vuelve a disparar cada vez que el contenido deja
   `display:none`, así que no hace falta JavaScript. El cierre no anima
   (limitación de <details> sin JS); movimiento reducido ya lo apaga todo
   globalmente (regla siguiente).
   -------------------------------------------------------------------------- */
.support-hero{padding:40px 0 8px}
.support-hero h1{font-size:clamp(2.2rem,5.6vw,3.2rem)}
.support-hero .prose{margin-top:18px}
.support-hero .prose p{color:var(--text-soft); font-size:1.08rem; max-width:56ch}
.support-hero .prose a{color:var(--text); border-bottom:1px solid var(--line); transition:border-color .15s ease}
.support-hero .prose a:hover{border-bottom-color:var(--accent)}

.faq{padding:24px 0 8px}
.faq h2{font-size:clamp(1.5rem,3.2vw,1.9rem); margin-bottom:20px}
.faq-list{display:grid; gap:0}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 4px;
  font-family:'Bricolage','Instrument',sans-serif;
  font-weight:600;
  font-size:1.13rem;
  cursor:pointer;
  list-style:none;
  min-height:28px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  flex:none;
  font-size:1.4rem;
  font-weight:400;
  color:var(--accent);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-answer{padding:0 4px 22px; color:var(--text-soft); font-size:1.04rem; max-width:62ch}
@media (prefers-reduced-motion:no-preference){
  .faq-item .faq-answer{animation:fade-up .3s cubic-bezier(.16,1,.3,1) both}
}

.support-links{padding:16px 0 56px}
.support-links ul{display:flex; flex-wrap:wrap; gap:12px 28px}
.support-links a{
  color:var(--text);
  font-weight:600;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:border-color .15s ease;
}
.support-links a:hover{border-bottom-color:var(--accent)}

/* --------------------------------------------------------------------------
   PASO 3 (2026-09-12): /prensa/ (press.html). Cinco bloques con layouts
   distintos entre sí y de los del resto del sitio: lista de juegos con
   raya fina en columnas, tarjetas de descarga, muestra del logotipo,
   rejilla de capturas propia (2-3 columnas, ni la fila de /sereno/ ni el
   bento de /filon/) y un cierre a dos columnas. Mismos tokens, radios y
   sombras que arriba.
   -------------------------------------------------------------------------- */

/* Cabecera: h1 + "quienes somos" en tres frases cortas, más la versión EN
   en un bloque aparte, más pequeño y etiquetado. Sin cascada de entrada
   propia (como support-hero): ya está en el primer scroll. */
.press-hero{padding:40px 0 8px}
@media (min-width:640px){ .press-hero{padding:56px 0 8px} }
.press-hero h1{font-size:clamp(2.2rem,5.6vw,3.2rem)}
.press-about{margin-top:18px; max-width:62ch}
.press-about p{color:var(--text-soft); font-size:1.08rem}
.press-about p + p{margin-top:.6em}
.press-about-en{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); max-width:60ch}
.press-about-en-label{
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-mute);
  margin:0 0 8px;
}
.press-about-en p[lang="en"]{color:var(--text-mute); font-size:.98rem}

/* Juegos: lista con raya fina, columnas en escritorio (nombre / frase /
   estado / enlace), apilada en móvil. Layout distinto del de la portada
   (fichas con imagen) y del de las páginas de juego (cabecera propia). */
.press-games{padding:28px 0 8px}
.press-games h2{font-size:clamp(1.5rem,3.2vw,1.9rem)}
.press-games-list{margin-top:8px}
.press-game{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:22px 0;
  border-top:1px solid var(--line);
}
.press-games-list li:last-child{border-bottom:1px solid var(--line)}
.press-game-name{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Bricolage','Instrument',sans-serif;
  font-weight:700;
  font-size:1.2rem;
}
.press-game-icon{width:44px; height:44px; border-radius:11px; box-shadow:var(--shadow); flex:none}
.press-game-kind{display:block; font-weight:400; font-size:.85rem; color:var(--text-mute); margin-top:2px}
.press-game-phrase{color:var(--text-soft); font-size:1rem; max-width:52ch}
.press-game-status{color:var(--text-mute); font-size:.92rem}
.press-game-link{
  position:relative;
  display:inline-block;
  width:fit-content;
  font-weight:700;
  color:var(--text);
  padding-bottom:2px;
  border-bottom:1px solid var(--line);
  transition:border-color .15s ease;
}
.press-game-link:hover{border-bottom-color:var(--accent)}
@media (min-width:760px){
  .press-game{
    grid-template-columns:minmax(180px,1fr) minmax(240px,1.7fr) minmax(170px,.9fr) auto;
    align-items:center;
    gap:24px;
  }
  .press-game-phrase{max-width:44ch}
}

/* Descargas: enlaces grandes con nombre, contenido y peso, sobre
   superficie elevada (única sección de la página con tarjetas: aquí sí
   comunican jerarquía real, son botones de descarga). Debajo, reglas de
   uso del logotipo y una muestra clara/oscura. */
.press-downloads{padding:24px 0 8px}
.press-downloads h2{font-size:clamp(1.5rem,3.2vw,1.9rem); margin-bottom:16px}
.press-downloads-list{display:grid; gap:14px; margin:0 0 40px}
.press-download-link{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:4px 16px;
  padding:22px 24px;
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:transform .18s ease;
}
.press-download-link:hover{transform:translateY(-2px)}
.press-download-link:active{transform:translateY(0) scale(.99)}
.press-download-name{
  grid-column:1;
  font-family:'Bricolage','Instrument',sans-serif;
  font-weight:700;
  font-size:1.15rem;
  color:var(--text);
}
.press-download-size{grid-column:2; font-weight:700; color:var(--text-mute); font-size:.95rem; white-space:nowrap}
.press-download-contents{grid-column:1/-1; color:var(--text-soft); font-size:.96rem}

.press-logo-rules{padding-top:28px; border-top:1px solid var(--line); display:grid; gap:24px}
.press-logo-rules h3{font-size:1.1rem; margin:0 0 12px}
.press-logo-rules ul{display:grid; gap:8px; max-width:60ch}
.press-logo-rules li{color:var(--text-soft); font-size:.98rem}
.press-logo-sample{
  display:flex;
  align-items:center;
  gap:28px;
  padding:20px;
  width:fit-content;
  background:var(--surface);
  border-radius:var(--radius);
}
.press-logo-light,.press-logo-dark{width:130px; height:auto}
.press-logo-dark{display:none}
@media (prefers-color-scheme:dark){
  .press-logo-light{display:none}
  .press-logo-dark{display:block}
}
@media (min-width:760px){
  .press-logo-rules{grid-template-columns:1fr auto; align-items:start}
}

/* Capturas oficiales: rejilla propia de 2-3 columnas, distinta de la fila
   con scroll de /sereno/ y del bento 2x2 de /filon/. */
.press-shots{padding:24px 0 8px}
.press-shots h2{font-size:clamp(1.5rem,3.2vw,1.9rem); margin-bottom:20px}
.press-shots-row{display:grid; grid-template-columns:1fr; gap:18px; max-width:360px; margin:0 auto}
.press-shots-item img{border-radius:var(--radius); box-shadow:var(--shadow); width:100%}
.press-shots-note{margin-top:18px; color:var(--text-mute); font-size:.95rem}
/* Tres capturas, tres columnas iguales a partir de aquí: nunca dos
   columnas (dejaría una celda vacía con tres elementos, ver informe). */
@media (min-width:700px){
  .press-shots-row{grid-template-columns:repeat(3,1fr); gap:24px; max-width:none; margin:0}
}

/* Contacto y datos útiles: única sección a dos columnas de la página
   (contacto / lista corta), distinta de las cuatro anteriores. */
.press-contact{padding:24px 0 64px}
.press-contact-grid{display:grid; grid-template-columns:1fr; gap:32px}
.press-contact-block h2{font-size:clamp(1.5rem,3.2vw,1.9rem); margin-bottom:14px}
.press-contact-block p{margin:0 0 8px; font-size:1.05rem}
.press-contact-block a{
  color:var(--text);
  border-bottom:1px solid var(--line);
  padding-bottom:1px;
  transition:border-color .15s ease;
}
.press-contact-block a:hover{border-bottom-color:var(--accent)}
.press-handles{color:var(--text-mute); font-size:.98rem}
.press-facts h3{font-size:1.05rem; margin:0 0 12px; color:var(--text)}
.press-facts ul{display:grid; gap:12px}
.press-facts li{color:var(--text-soft); font-size:.98rem}
@media (min-width:760px){
  .press-contact-grid{grid-template-columns:1fr 1fr; gap:56px; align-items:start}
}

/* --------------------------------------------------------------------------
   PASO 4 (2026-09-12): páginas legales (legal.html: /sereno/privacidad/,
   /filon/privacidad/) y 404 (404.html). Lectura de diseño propia de estas
   dos páginas, más contenida que el resto del sitio: VARIANCE 3 (un solo
   bloque centrado en columna, sin composiciones asimétricas), MOTION 3
   (sin cascada de entrada ni ".reveal": todo visible al instante, nada
   que aprender sobre cuándo aparece un párrafo legal), DENSITY 4 (algo
   más compacto que el resto, apropiado para texto de referencia). Mismos
   tokens, radios y sombras que el resto del sitio; sin tarjetas ni
   sombras en el selector de idioma ni en los párrafos, como pide el
   encargo para una política de privacidad.
   -------------------------------------------------------------------------- */

/* Cabecera de la política: la misma regla de acento que el resto de
   páginas, h1 común a los dos idiomas con el nombre del juego debajo
   (en vez de "Política de privacidad — Sereno Sudoku" en una sola línea
   como en el HTML antiguo) y el selector Español/English como píldora
   con borde, sin relleno ni sombra. */
.legal-hero{padding:40px 0 8px}
@media (min-width:640px){ .legal-hero{padding:56px 0 8px} }
.legal-hero h1{font-size:clamp(2rem,4.6vw,2.6rem)}
.legal-game{color:var(--text-mute); font-size:1.08rem; margin-top:6px}

.lang-switch{
  display:inline-flex;
  gap:4px;
  margin-top:24px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
}
.lang-switch a{
  padding:9px 20px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.95rem;
  color:var(--text-soft);
  transition:background-color .15s ease, color .15s ease;
}
.lang-switch a:hover{color:var(--text); background:var(--surface)}

/* Cuerpo legal: columna corta (párrafo base ya en 60ch, por debajo de
   los 68 caracteres del encargo), sin ".reveal": se ve entero al cargar,
   sin depender de JS ni de hacer scroll. La raya que separa ES de EN es
   la misma raya fina del resto del sitio (border-top), no una <hr> con
   estilo de navegador. */
.legal-body{padding:24px 0 64px}
.legal-lang{max-width:60ch}
.legal-meta{
  color:var(--text-mute);
  font-size:1rem;
  line-height:1.7;
  margin:0 0 30px;
}
.legal-meta a{color:var(--text); border-bottom:1px solid var(--line); transition:border-color .15s ease}
.legal-meta a:hover{border-bottom-color:var(--accent)}
.legal-lang p{color:var(--text-soft); font-size:1.08rem; margin:0}
.legal-lang p + p{margin-top:1.1em}
.legal-lang strong{color:var(--text); font-weight:700}
.legal-lang a{color:var(--text); border-bottom:1px solid var(--line); word-break:break-word; transition:border-color .15s ease}
.legal-lang a:hover{border-bottom-color:var(--accent)}
.legal-note{margin-top:1.6em; color:var(--text-mute); font-size:.96rem; font-style:italic}

.legal-divider{border-top:1px solid var(--line); margin:48px 0 40px; max-width:60ch}

/* 404: único bloque centrado de todo el sitio (excepción justificada al
   sesgo anti-centrado: es una página sin salida, no una landing con
   contenido que organizar). Sin ".reveal", igual que las políticas. */
.notfound{padding:88px 0 96px}
.notfound .wrap{
  max-width:480px;
  margin:0 auto;
  text-align:center;
  display:grid;
  justify-items:center;
  gap:16px;
}
.notfound-logo{width:52px; height:52px; margin-bottom:4px}
.notfound h1{font-size:clamp(1.9rem,4.6vw,2.5rem)}
.notfound-body{color:var(--text-soft); font-size:1.08rem; max-width:42ch}
.notfound .btn{margin-top:8px}
.notfound-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 26px;
  margin-top:10px;
  font-size:.98rem;
}
.notfound-links a{color:var(--text); border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .15s ease}
.notfound-links a:hover{border-bottom-color:var(--accent)}

/* --------------------------------------------------------------------------
   Movimiento reducido (obligatorio, MOTION 5): quita transiciones y
   animaciones a todo, incluidas hover/active. Como la cascada del hero
   y el subrayado del nav viven solo dentro de @keyframes/transition (no
   como propiedad estática aparte), al desactivarlos el elemento cae
   directamente en su estado final visible, sin quedarse a medias. El
   desplazamiento suave del ancla también se apaga aquí. `.reveal` se
   marca `.is-in` de golpe por JS (ver site.js), así que con la
   transición apagada aparece igual de estático.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}