/* =====================================================================
   LANTERNPAW · hoja de estilos única
   Mundo: credenciales de convención bajo una noche de papel recortado.
   Índice:
     1. Fuentes            8. Credencial (badge + cordón + cintas + dorso)
     2. Tokens             9. Portada (carrusel con pestañas)
     3. Base               10. Secciones de la home
     4. Utilidades         11. Páginas de juego
     5. Botones            12. Jugar (reproductor, Farolera)
     6. Cintas             13. Estudio, diario, prensa, 404
     7. Cabecera y pie     14. Movimiento y accesibilidad
   ===================================================================== */

/* 1. Fuentes (alojadas en el sitio: ninguna petición a Google) ------- */
@font-face {
  font-family: "Grenze";
  src: url("../fuentes/grenze-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Grenze";
  src: url("../fuentes/grenze-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fuentes/commissioner-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: oblique 0deg 12deg;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fuentes/commissioner-latin-ext.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: oblique 0deg 12deg;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens ----------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Noche (fondos de papel recortado, de más hondo a más cerca) */
  --noche-0: #081012;
  --noche-1: #0c1719;
  --noche-2: #112022;
  --noche-3: #17292b;
  --noche-4: #1e3436;
  --linea: #2a4245;
  --linea-suave: #1d3133;

  /* Texto */
  --hueso: #efe8d8;
  --hueso-2: #c3cbc4;
  --hueso-3: #93a29c;
  --tinta: #22180f;
  --tinta-2: #4a3d33;

  /* Acción: la luz del farol (único color de acción) */
  --farol: #f2a33a;
  --farol-vivo: #ffb957;
  --farol-hondo: #c97a17;
  --farol-tinta: #1d1205;

  /* Cintas de estado (vocabulario de la convención) */
  --cinta-roja: #c8322a;     /* se juega aquí, en el navegador */
  --cinta-oro: #e9b949;      /* beta */
  --cinta-musgo: #9cc27a;    /* en desarrollo */
  --cinta-marea: #6fc3b8;    /* idiomas, plataformas */
  --cinta-lila: #c2a6f0;     /* idea, proyecto secreto */
  --cinta-hueso: #efe8d8;

  /* Tableros por juego (cada juego tiene su color a plena fuerza) */
  --hr-fondo: #120a0c;
  --hr-menta: #ecdfcb;
  --hr-oro: #e2c35a;
  --hr-purpura: #8e4fc6;
  --twc-fondo: #161b38;
  --twc-madera: #6b4636;
  --twc-malva: #8a4c72;
  --twc-luz: #f2a33a;

  /* Credencial impresa */
  --papel: #efe8d8;
  --papel-2: #e2d8c3;

  /* Tipografía */
  --f-titulo: "Grenze", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-texto: "Commissioner", "Segoe UI", system-ui, sans-serif;
  --t-portada: clamp(2.6rem, 1.4rem + 4vw, 5.25rem);
  --t-h2: clamp(2.1rem, 1.35rem + 2.3vw, 3.5rem);
  --t-h3: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem);
  --t-grande: clamp(1.08rem, 1rem + 0.3vw, 1.25rem);
  --t-base: 1.0625rem;
  --t-chica: 0.875rem;
  --t-mini: 0.75rem;

  /* Espacio */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --margen: clamp(16px, 4vw, 40px);
  --ancho: 1280px;

  /* Forma: 12 px para todo lo que se toca, 16 px para la credencial; las cintas van con cola */
  --r: 12px;
  --r-credencial: 16px;

  /* Sombras con offset y desenfoque, teñidas de noche */
  --sombra-1: 0 2px 6px rgb(3 8 9 / 0.45);
  --sombra-2: 0 14px 34px -10px rgb(3 8 9 / 0.75), 0 4px 10px rgb(3 8 9 / 0.4);
  --sombra-3: 0 30px 60px -18px rgb(2 6 7 / 0.85), 0 8px 18px rgb(2 6 7 / 0.45);

  /* Movimiento */
  --sale: cubic-bezier(0.16, 1, 0.3, 1);
  --entra: cubic-bezier(0.7, 0, 0.84, 0);
  --t-rapido: 160ms;
  --t-medio: 320ms;
  --t-lento: 640ms;

  /* Capas */
  --z-escena: 0;
  --z-contenido: 1;
  --z-cabecera: 50;
  --z-menu: 60;
  --z-visor: 80;
}

/* 3. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--noche-0);
  color: var(--hueso);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  font-variation-settings: "FLAR" 0, "VOLM" 0;
  font-feature-settings: "kern", "liga";
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--farol); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
a:hover { color: var(--farol-vivo); }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-portada); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.08; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--farol); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--farol); color: var(--farol-tinta); }
html { scrollbar-color: var(--noche-4) var(--noche-0); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--noche-0); }
::-webkit-scrollbar-thumb { background: var(--noche-4); border-radius: 12px; border: 3px solid var(--noche-0); }
input, textarea { caret-color: var(--farol); }
.i { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
[hidden] { display: none !important; }
/* Idioma: cada texto va con su gemelo; se ve el del idioma activo. */
:root[lang="en"] [data-l="es"], :root:not([lang="en"]) [data-l="en"] { display: none !important; }

/* 4. Utilidades ------------------------------------------------------- */
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.solo-lector {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--farol); color: var(--farol-tinta); padding: 10px 16px; border-radius: var(--r);
  font-weight: 700; text-decoration: none; transition: top var(--t-rapido) var(--sale);
}
.saltar:focus { top: 12px; }
.texto-grande { font-size: var(--t-grande); color: var(--hueso-2); max-width: 62ch; }
.apagado { color: var(--hueso-3); }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.numero { font-variant-numeric: tabular-nums; }

/* 5. Botones ---------------------------------------------------------- */
.boton {
  --b-fondo: transparent; --b-texto: var(--hueso); --b-borde: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--r); border: 2px solid var(--b-borde);
  background: var(--b-fondo); color: var(--b-texto);
  font-family: var(--f-texto); font-size: 0.95rem; font-weight: 750; letter-spacing: 0.04em;
  font-variation-settings: "FLAR" 100;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background var(--t-rapido) var(--sale), color var(--t-rapido), border-color var(--t-rapido),
              transform var(--t-rapido) var(--sale), box-shadow var(--t-medio) var(--sale);
}
.boton:active { transform: translateY(1px) scale(0.985); }
.boton .i { width: 1.2em; height: 1.2em; }
.boton--farol { --b-fondo: var(--farol); --b-texto: var(--farol-tinta); box-shadow: 0 6px 14px -6px rgb(3 8 9 / 0.8), 0 2px 4px rgb(3 8 9 / 0.4); }
.boton--farol:hover { --b-fondo: var(--farol-vivo); color: var(--farol-tinta); transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgb(3 8 9 / 0.85), 0 2px 4px rgb(3 8 9 / 0.4); }
.boton--linea { --b-borde: rgb(239 232 216 / 0.55); }
.boton--linea:hover { --b-borde: var(--hueso); --b-fondo: rgb(239 232 216 / 0.08); color: var(--hueso); }
.boton--chico { min-height: 40px; padding: 0 16px; font-size: 0.82rem; }
.boton--tienda { --b-fondo: var(--noche-3); --b-borde: var(--linea); text-transform: none; letter-spacing: 0.01em; font-weight: 650; }
.boton--tienda:hover { --b-fondo: var(--noche-4); --b-borde: var(--hueso-3); color: var(--hueso); }
.boton--tienda .i { width: 1.35em; height: 1.35em; }
.boton[aria-disabled="true"] {
  --b-fondo: transparent; --b-borde: var(--linea); --b-texto: var(--hueso-3);
  border-style: dashed; cursor: not-allowed; box-shadow: none;
}
.boton[aria-disabled="true"]:active { transform: none; }
.boton__extra { font-weight: 500; opacity: 0.85; text-transform: none; letter-spacing: 0; }
.botones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

/* 6. Cintas (las cintas de las credenciales de convención) ------------ */
.cinta {
  --c-fondo: var(--cinta-hueso); --c-texto: var(--tinta);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px 18px 4px 10px;
  background: var(--c-fondo); color: var(--c-texto);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  font-variation-settings: "FLAR" 100;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
  white-space: nowrap; line-height: 1;
}
.cinta .i { width: 14px; height: 14px; }
.cinta--roja { --c-fondo: var(--cinta-roja); --c-texto: #fff4e6; }
.cinta--oro { --c-fondo: var(--cinta-oro); --c-texto: #241a05; }
.cinta--musgo { --c-fondo: var(--cinta-musgo); --c-texto: #142010; }
.cinta--marea { --c-fondo: var(--cinta-marea); --c-texto: #0b1e1c; }
.cinta--lila { --c-fondo: var(--cinta-lila); --c-texto: #1d1230; }
.cintas { display: flex; flex-wrap: wrap; gap: 6px; }

/* 7. Cabecera y pie --------------------------------------------------- */
.aviso {
  background: var(--noche-2); border-bottom: 1px solid var(--linea-suave);
  font-size: var(--t-chica); color: var(--hueso-2);
}
.aviso__dentro { display: flex; align-items: center; justify-content: center; gap: var(--e-4); min-height: 40px; padding-block: 6px; text-align: center; }
.aviso a { color: var(--hueso); font-weight: 650; }
.aviso a:hover { color: var(--farol-vivo); }
.aviso__cerrar {
  margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; background: transparent; color: var(--hueso-3); border-radius: 8px;
}
.aviso__cerrar:hover { color: var(--hueso); background: var(--noche-3); }

.cabecera {
  position: sticky; top: 0; z-index: var(--z-cabecera);
  background: rgb(8 16 18 / 0.94);
  border-bottom: 1px solid var(--linea-suave);
}
@supports (backdrop-filter: blur(1px)) {
  .cabecera { background: rgb(8 16 18 / 0.82); backdrop-filter: blur(14px) saturate(1.2); }
}
.cabecera__dentro { display: flex; align-items: center; gap: var(--e-5); height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--hueso); text-decoration: none; flex: none; }
.marca svg { width: 38px; height: 38px; }
.marca__nombre { font-family: var(--f-titulo); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.01em; line-height: 1; }
.marca:hover { color: var(--hueso); }
.marca:hover svg ellipse { fill: var(--farol-vivo); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: var(--e-4); }
.nav a {
  position: relative; display: inline-flex; align-items: center; height: 68px; padding: 0 14px;
  color: var(--hueso-2); text-decoration: none; font-weight: 650; font-size: 0.95rem; letter-spacing: 0.02em;
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--farol); transform: scaleX(0); transform-origin: left; transition: transform var(--t-medio) var(--sale);
}
.nav a:hover { color: var(--hueso); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--hueso); }
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e-3); }
.idioma {
  display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; padding: 3px; background: var(--noche-1);
}
.idioma button {
  border: 0; background: transparent; color: var(--hueso-3); min-width: 40px; height: 30px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em;
}
.idioma button[aria-pressed="true"] { background: var(--noche-4); color: var(--hueso); }
.idioma button:hover { color: var(--hueso); }
.menu-boton {
  display: none; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--linea);
  background: var(--noche-1); color: var(--hueso); place-items: center;
}
.menu-boton .i { width: 22px; height: 22px; }
.menu-movil {
  position: fixed; inset: 0; z-index: var(--z-menu); background: var(--noche-0);
  display: flex; flex-direction: column; padding: var(--e-4) var(--margen) var(--e-6);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--t-medio) var(--sale), transform var(--t-medio) var(--sale), visibility 0s linear var(--t-medio);
}
.menu-movil.esta-abierto { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.menu-movil__arriba { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.menu-movil nav { display: flex; flex-direction: column; margin-top: var(--e-6); }
.menu-movil nav a {
  font-family: var(--f-titulo); font-weight: 800; font-size: 2.4rem; line-height: 1.15;
  color: var(--hueso); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--linea-suave);
}
.menu-movil nav a[aria-current="page"] { color: var(--farol); }
.menu-movil__pie { margin-top: auto; display: flex; flex-direction: column; gap: var(--e-4); }

@media (max-width: 960px) {
  .nav, .cabecera__acciones .boton { display: none; }
  .menu-boton { display: grid; }
}

.pie { background: var(--noche-1); border-top: 1px solid var(--linea-suave); padding-block: var(--e-8) var(--e-6); color: var(--hueso-2); }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--e-6); }
.pie__lema { font-family: var(--f-titulo); font-weight: 700; font-size: 1.45rem; line-height: 1.15; color: var(--hueso); margin-top: var(--e-4); max-width: 18ch; }
.pie h2 { font-family: var(--f-texto); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hueso-3); margin-bottom: var(--e-4); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie a { color: var(--hueso-2); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.pie a:hover { color: var(--farol-vivo); }
.pie__pendiente { color: var(--hueso-3); font-size: var(--t-chica); }
.pie__legal { margin-top: var(--e-8); padding-top: var(--e-5); border-top: 1px solid var(--linea-suave); display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6); justify-content: space-between; font-size: var(--t-chica); color: var(--hueso-3); }
.pie__legal p { margin: 0; }
@media (max-width: 860px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } .pie__rejilla > :first-child { grid-column: 1 / -1; } }

/* 8. Credencial ------------------------------------------------------- */
.credencial {
  align-self: flex-start;
  --banda: var(--farol);
  --banda-texto: var(--farol-tinta);
  --cordon-color: var(--farol);
  --cordon-texto: rgb(29 18 5 / 0.7);
  --cordon-largo: 140px;
  --ancho-cred: 280px;
  position: relative;
  width: var(--ancho-cred);
  margin-top: var(--cordon-largo);
  transform-origin: 50% calc(-1 * var(--cordon-largo));
  transform: rotate(var(--giro, 0deg));
  will-change: transform;
}
.credencial__cordon {
  position: absolute; left: 50%; bottom: calc(100% - 6px); width: 24px; height: calc(var(--cordon-largo) + 6px);
  transform: translateX(-50%); background: var(--cordon-color); overflow: hidden;
  box-shadow: inset 3px 0 0 rgb(255 255 255 / 0.12), inset -3px 0 0 rgb(0 0 0 / 0.14);
}
.credencial__cordon span {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10px; font-weight: 850; letter-spacing: 0.26em; line-height: 24px; color: var(--cordon-texto);
  white-space: nowrap; font-variation-settings: "FLAR" 100;
}
.credencial__pinza {
  position: absolute; left: 50%; top: -14px; z-index: 2; width: 30px; height: 26px; transform: translateX(-50%);
  background: #9aa7a6; border-radius: 6px 6px 4px 4px; box-shadow: inset 0 -4px 0 #6f7d7c, 0 2px 3px rgb(0 0 0 / 0.35);
}
.credencial__pinza::after { content: ""; position: absolute; left: 7px; right: 7px; top: 5px; height: 6px; border-radius: 3px; background: #56615f; }
.credencial__giro {
  position: relative; display: grid; transform-style: preserve-3d;
  transition: transform var(--t-lento) var(--sale);
}
.credencial.esta-volteada .credencial__giro { transform: rotateY(180deg); }
.credencial__cara, .credencial__dorso {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--papel); color: var(--tinta); border-radius: var(--r-credencial);
  box-shadow: var(--sombra-3); overflow: hidden;
}
.credencial__cara { position: relative; }
.credencial__dorso { position: absolute; inset: 0; transform: rotateY(180deg); background: var(--papel-2); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tinta-2) transparent; }
.credencial--chica .ficha { font-size: 0.78rem; padding: 12px 14px; }
.credencial--chica .ficha__nombre { font-size: 1.3rem; }
.credencial__banda {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 46px; padding: 0 14px; background: var(--banda); color: var(--banda-texto);
  font-size: 0.68rem; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; font-variation-settings: "FLAR" 100;
}
.credencial__banda svg { width: 22px; height: 22px; }
.credencial__banda span { display: inline-flex; align-items: center; gap: 6px; }
.credencial__ranura {
  position: absolute; left: 50%; top: 8px; width: 44px; height: 9px; transform: translateX(-50%);
  border-radius: 9px; background: rgb(0 0 0 / 0.32);
}
.credencial__ventana {
  margin: 14px 14px 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: var(--ventana, var(--noche-2)); border: 3px solid var(--tinta);
}
.credencial__ventana > img, .credencial__ventana > svg { width: 100%; height: 100%; object-fit: cover; }
.credencial__ventana--retrato { aspect-ratio: 1 / 1; }
.credencial__ventana--retrato > img, .credencial__ventana--retrato > svg { object-fit: cover; object-position: 50% 18%; }
.credencial__datos { padding: 12px 52px 16px 16px; }
.credencial__nombre--largo { font-size: 1.42rem !important; }
.credencial__nombre { font-family: var(--f-titulo); font-weight: 850; font-size: 1.85rem; line-height: 0.98; color: var(--tinta); }
.credencial__rol {
  margin: 6px 0 0; font-size: 0.74rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-2); font-variation-settings: "FLAR" 100;
}
.credencial__voltear {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta);
  transition: transform var(--t-medio) var(--sale), background var(--t-rapido);
}
.credencial__voltear:hover { background: var(--farol); transform: rotate(-30deg); }
.credencial__voltear .i { width: 18px; height: 18px; }
.credencial__cintas {
  position: absolute; top: calc(100% - 4px); left: 18px; right: 18px; z-index: -1;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
.credencial__cintas .cinta {
  height: 30px; justify-content: center; padding: 0 12px; font-size: 0.68rem;
  clip-path: none; box-shadow: 0 6px 10px -6px rgb(0 0 0 / 0.6);
}
.credencial__cintas .cinta:last-child {
  height: 40px; padding-bottom: 10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
}
/* Dorso: ficha al estilo hoja de personaje */
.ficha { padding: 16px 18px 18px; font-size: 0.86rem; line-height: 1.4; }
.ficha__nombre { font-family: var(--f-titulo); font-weight: 850; font-size: 1.55rem; line-height: 1; color: #7a1d17; }
.ficha__tipo { margin: 4px 0 0; font-style: oblique 10deg; color: var(--tinta-2); }
.ficha__regla {
  height: 5px; margin: 10px 0; background: var(--cinta-roja);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ficha__rasgos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; }
.ficha__rasgos dt { font-size: 0.64rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; color: #7a1d17; }
.ficha__rasgos dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha__lineas { margin: 0; display: grid; gap: 4px; }
.ficha__lineas div { display: flex; gap: 6px; }
.ficha__lineas dt { font-weight: 800; color: #7a1d17; flex: none; }
.ficha__lineas dd { margin: 0; }

/* Credencial en reposo (sin cordón): tarjetas del catálogo y del equipo */
.credencial--quieta { margin-top: 18px; transform: none; --cordon-largo: 0px; }
.credencial--quieta .credencial__cordon { display: none; }
.credencial--chica { --ancho-cred: 232px; }
.credencial--chica .credencial__nombre { font-size: 1.5rem; }

/* 9. Portada (carrusel con pestañas, como el de D&D Beyond) ----------- */
.portada { position: relative; isolation: isolate; overflow: hidden; background: var(--noche-1); }
.portada__diapos { position: relative; display: grid; min-height: clamp(620px, calc(100dvh - 108px), 860px); }
.portada__diapo {
  grid-area: 1 / 1; position: relative; display: grid; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--entra), visibility 0s linear 240ms;
}
.portada__diapo.esta-activa { opacity: 1; visibility: visible; z-index: 1; transition: opacity 760ms var(--sale) 200ms, visibility 0s; }
.portada__texto > * { transition: transform 900ms var(--sale) 220ms, opacity 700ms var(--sale) 220ms; }
.portada__diapo:not(.esta-activa) .portada__texto > * { transform: translateY(14px); opacity: 0; }
.portada__escena { position: absolute; inset: 0; z-index: var(--z-escena); overflow: hidden; }
.portada__escena svg { position: absolute; inset: -3%; width: 106%; height: 106%; }
.portada__escena .capa { transition: transform 900ms var(--sale); }
.portada__escena::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(8 16 18 / 0.92) 0%, rgb(8 16 18 / 0.72) 36%, rgb(8 16 18 / 0) 66%),
              linear-gradient(0deg, rgb(8 16 18 / 0.85) 0%, rgb(8 16 18 / 0) 26%);
}
.portada__dentro {
  position: relative; z-index: var(--z-contenido);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--e-6); align-items: center;
  padding-block: var(--e-8) var(--e-10);
}
.portada__texto { max-width: 640px; }
.portada__tira { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: var(--e-5); color: var(--hueso-2); font-weight: 650; }
.portada__tira .marca-texto { font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 800; color: var(--hueso); letter-spacing: 0.02em; }
.portada h1, .portada .portada__titulo { color: var(--hueso); text-shadow: 0 2px 24px rgb(8 16 18 / 0.6); }
.portada__sub { margin-top: var(--e-5); font-size: var(--t-grande); color: var(--hueso-2); max-width: 44ch; }
.portada .botones { margin-top: var(--e-6); }
.portada__credenciales { position: relative; align-self: start; display: flex; align-items: flex-start; justify-content: center; gap: var(--e-5); min-height: 520px; margin-top: calc(-1 * var(--e-8)); }
.portada__credenciales .credencial { --cordon-largo: 150px; }
.portada__credenciales .credencial:nth-child(2) { --cordon-largo: 230px; --ancho-cred: 236px; }
.portada__pestanas {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  border-top: 1px solid rgb(239 232 216 / 0.08); background: rgb(8 16 18 / 0.55);
}
@supports (backdrop-filter: blur(1px)) { .portada__pestanas { backdrop-filter: blur(10px); background: rgb(8 16 18 / 0.4); } }
.portada__pestanas .contenedor { display: flex; align-items: stretch; gap: var(--e-2); }
.pestanas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex: 1; }
.pestana {
  position: relative; border: 0; background: transparent; color: var(--hueso-3);
  padding: 18px 12px 20px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  font-variation-settings: "FLAR" 100; text-align: center;
}
.pestana::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 2px; background: rgb(239 232 216 / 0.12); }
.pestana::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; background: var(--farol);
  transform: scaleX(0); transform-origin: left;
}
.pestana[aria-selected="true"] { color: var(--hueso); }
.pestana[aria-selected="true"]::after { transform: scaleX(1); }
.portada.esta-rodando .pestana[aria-selected="true"]::after { animation: avance var(--duracion, 8s) linear forwards; }
.pestana:hover { color: var(--hueso); }
@keyframes avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.portada__pausa {
  flex: none; align-self: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--linea);
  background: var(--noche-1); color: var(--hueso); display: grid; place-items: center;
}
.portada__flechas { display: contents; }
@media (max-width: 960px) {
  .portada__diapos { min-height: auto; }
  .portada__dentro { grid-template-columns: 1fr; gap: 0; padding-block: 0 112px; }
  .portada__credenciales { order: -1; min-height: 0; margin: 0 0 var(--e-3); justify-content: center; }
  .portada__credenciales .credencial { --ancho-cred: 132px; --cordon-largo: 58px; margin-right: 4px; }
  .portada__credenciales .credencial:nth-child(2) { display: none; }
  .portada__credenciales .credencial__cintas, .portada__credenciales .credencial__voltear { display: none; }
  .portada__credenciales .credencial__banda { height: 32px; padding: 0 10px; font-size: 0.5rem; letter-spacing: 0.12em; }
  .portada__credenciales .credencial__banda svg { width: 16px; height: 16px; }
  .portada__credenciales .credencial__ventana { margin: 9px 9px 0; border-width: 2px; }
  .portada__credenciales .credencial__datos { padding: 8px 10px 10px; }
  .portada__credenciales .credencial__nombre { font-size: 1.15rem !important; }
  .portada__credenciales .credencial__rol { font-size: 0.56rem; margin-top: 3px; }
  .portada__credenciales .credencial__pinza { transform: translateX(-50%) scale(0.8); }
  .portada__tira { margin-bottom: var(--e-4); }
  .portada .botones { margin-top: var(--e-5); }
  .portada__escena::after { background: linear-gradient(0deg, rgb(8 16 18 / 0.95) 0%, rgb(8 16 18 / 0.78) 48%, rgb(8 16 18 / 0.25) 100%); }
  .pestanas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent); }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestana { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; font-size: 0.72rem; letter-spacing: 0.08em; padding: 16px 14px 18px; }
  .portada__diapo { align-items: start; }
}

/* 10. Secciones de la home ------------------------------------------- */
.seccion { position: relative; padding-block: var(--e-10); }
.seccion--ceñida { padding-block: var(--e-9); }
.seccion__cabeza { max-width: 760px; margin-bottom: var(--e-7); }
.seccion__cabeza p { margin-top: var(--e-4); }
.seccion__cabeza--centro { margin-inline: auto; text-align: center; }
.seccion__cabeza--centro .texto-grande { margin-inline: auto; }

/* Tableros de juego: cada juego posee su color a plena fuerza */
.tablero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  border-radius: 22px; overflow: hidden; isolation: isolate; min-height: 560px;
  box-shadow: var(--sombra-2);
}
.tablero + .tablero { margin-top: var(--e-6); }
.tablero--hr { background: #4d1219; color: #ecdfcb; }
.tablero--twc { background: #5a2d4d; color: #f6ead6; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.tablero__arte { position: relative; overflow: hidden; min-height: 340px; }
.tablero__arte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tablero--twc .tablero__arte { order: 2; }
.tablero__texto { position: relative; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: var(--e-4); }
.tablero__texto h3 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); line-height: 0.95; }
.tablero--hr .tablero__texto h3 { color: #f3e6d1; }
.tablero__texto p { color: inherit; opacity: 0.9; max-width: 46ch; margin: 0; }
.tablero__texto .botones { margin-top: var(--e-3); }
.tablero--hr .boton--linea { --b-borde: rgb(236 223 203 / 0.6); color: #ecdfcb; }
.tablero--hr .boton--linea:hover { --b-fondo: rgb(236 223 203 / 0.1); --b-borde: #ecdfcb; color: #ecdfcb; }
.tablero--hr .boton--tienda[aria-disabled="true"] { --b-borde: rgb(236 223 203 / 0.45); --b-texto: #e3cfbd; }
.tablero--hr .boton__extra { opacity: 1; }
.tablero--twc .boton--linea { --b-borde: rgb(246 234 214 / 0.6); color: #f6ead6; }
.tablero--twc .boton--tienda[aria-disabled="true"] { --b-borde: rgb(246 234 214 / 0.45); --b-texto: #ecd6e2; }
.tablero__fila { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-3); }
.tablero__capturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--e-3); max-width: 460px; }
.tablero__capturas button { padding: 0; border: 2px solid rgb(236 223 203 / 0.3); border-radius: 8px; overflow: hidden; background: none; }
.tablero__capturas button:hover { border-color: #ecdfcb; }
.tablero__capturas img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.tablero__vecinos { position: absolute; z-index: 1; inset: auto 0 0 0; display: flex; justify-content: center; align-items: flex-end; gap: 0; padding-inline: 12px; }
.tablero__vecinos img { width: 22%; max-width: 150px; margin-inline: -2.5%; filter: drop-shadow(0 10px 14px rgb(5 8 20 / 0.55)); }
.tablero__vecinos img:nth-child(2), .tablero__vecinos img:nth-child(4) { width: 19%; margin-bottom: 4%; }
.tablero__nota { font-size: var(--t-mini); opacity: 0.7; letter-spacing: 0.02em; }
@media (max-width: 900px) {
  .tablero, .tablero--twc { grid-template-columns: 1fr; }
  .tablero--twc .tablero__arte { order: 0; }
  .tablero__arte { min-height: 260px; }
}

/* Catálogo de juegos */
.catalogo { display: grid; gap: var(--e-9); }
.catalogo__item { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--e-8); align-items: center; padding-bottom: var(--e-6); }
.catalogo__item .credencial { --cordon-largo: 90px; justify-self: center; }
.catalogo__texto h2 a { color: var(--hueso); text-decoration: none; }
.catalogo__texto h2 a:hover { color: var(--farol-vivo); }
.catalogo__texto .texto-grande { margin-top: var(--e-4); }
.catalogo__texto .botones { margin-top: var(--e-5); }
@media (max-width: 860px) { .catalogo__item { grid-template-columns: 1fr; gap: var(--e-6); } }

/* Lo que viene: credenciales colgadas con su texto debajo */
.proximos { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--e-7) var(--e-6); margin-top: var(--e-4); }
.proximo { width: 300px; display: flex; flex-direction: column; align-items: center; }
.proximo .credencial { --cordon-largo: 70px; }
.proximo__texto { margin: 64px 0 0; color: var(--hueso-2); font-size: 0.98rem; }
@media (max-width: 600px) { .proximo { width: 100%; } }

/* Hoja del estudio (valores en una sola hoja de papel) */
.hoja-estudio { position: relative; max-width: 900px; background: var(--papel); color: var(--tinta); border-radius: var(--r-credencial); box-shadow: var(--sombra-3); padding: clamp(24px, 4vw, 52px); }
.hoja-estudio__fila h3 { color: #7a1d17; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.hoja-estudio__fila p { margin: 8px 0 0; color: var(--tinta-2); max-width: 62ch; }
.hoja-estudio .ficha__regla { margin: 22px 0; }
.hoja-estudio__cintas { position: absolute; left: 40px; top: calc(100% - 6px); display: flex; flex-direction: column; width: 220px; z-index: -1; }
.hoja-estudio__cintas .cinta { justify-content: center; clip-path: none; height: 30px; }
.hoja-estudio__cintas .cinta:last-child { height: 40px; padding-bottom: 10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%); }

/* Cenefa de rosetas y pájaros (wycinanka) entre secciones */
.cenefa { display: block; height: 64px; overflow: hidden; }
.cenefa svg { width: 100%; height: 100%; }

/* Arcade: jugar aquí mismo */
.arcade { background: var(--noche-1); border-block: 1px solid var(--linea-suave); }
.arcade__rejilla { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.mueble { position: relative; border-radius: 18px; overflow: hidden; background: #050b0c; border: 1px solid var(--linea); box-shadow: var(--sombra-2); }
.mueble__marquesina { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: 12px 16px; background: var(--noche-3); border-bottom: 1px solid var(--linea); }
.mueble__marquesina strong { font-family: var(--f-titulo); font-size: 1.4rem; font-weight: 800; }
.cartuchos { display: grid; gap: var(--e-4); }
.cartucho {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--e-4); align-items: center;
  padding: 12px; border-radius: 14px; background: var(--noche-2); border: 1px solid var(--linea-suave);
  color: var(--hueso); text-decoration: none; transition: background var(--t-rapido), border-color var(--t-rapido), transform var(--t-medio) var(--sale);
}
a.cartucho:hover { background: var(--noche-3); border-color: var(--linea); color: var(--hueso); transform: translateX(4px); }
.cartucho img, .cartucho svg { width: 112px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 9px; }
.cartucho h3 { font-size: 1.45rem; }
.cartucho p { margin: 4px 0 8px; color: var(--hueso-2); font-size: var(--t-chica); }
.cartucho--apagado { opacity: 0.72; }
@media (max-width: 900px) { .arcade__rejilla { grid-template-columns: 1fr; } }

/* La manada: pantalla de selección de personaje */
.manada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e-7); align-items: center; }
.manada__escenario { position: relative; display: grid; place-items: start center; padding-top: var(--e-5); min-height: 640px; border-radius: 22px; background: var(--noche-2); overflow: hidden; }
.manada__escenario::before {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; bottom: -30%;
  background: var(--noche-3); box-shadow: 0 0 0 40px rgb(30 52 54 / 0.45), 0 0 0 90px rgb(30 52 54 / 0.2);
}
.manada__escenario .credencial { --cordon-largo: 70px; }
.selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--e-3); margin-top: var(--e-6); }
.selector button {
  position: relative; padding: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1; border: 3px solid var(--linea);
  background: var(--noche-2); transition: border-color var(--t-rapido), transform var(--t-medio) var(--sale);
}
.selector button:hover { transform: translateY(-3px); border-color: var(--hueso-3); }
.selector button[aria-pressed="true"] { border-color: var(--farol); }
.selector button[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: var(--farol);
}
.selector img, .selector svg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.manada__bio { min-height: 7.5em; margin-top: var(--e-5); color: var(--hueso-2); }
.manada__bio strong { color: var(--hueso); }
@media (max-width: 900px) { .manada { grid-template-columns: 1fr; } .manada__escenario { min-height: 520px; } }

/* El sendero: cómo hacemos juegos */
.sendero { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); counter-reset: paso; }
.sendero::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 0;
  border-top: 3px dashed var(--linea);
}
.parada { position: relative; text-align: left; }
.parada__farol {
  position: relative; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%;
  background: var(--noche-2); border: 2px solid var(--linea); color: var(--farol); margin-bottom: var(--e-5);
  box-shadow: 0 0 0 10px var(--noche-0);
}
.parada__farol .i { width: 30px; height: 30px; }
.parada h3 { font-size: 1.55rem; margin-bottom: var(--e-3); }
.parada p { color: var(--hueso-2); font-size: 0.98rem; margin: 0; }
.parada .herramientas { margin-top: var(--e-3); font-size: var(--t-chica); color: var(--hueso-3); }
@media (max-width: 900px) {
  .sendero { grid-template-columns: 1fr; gap: var(--e-6); }
  .sendero::before { left: 34px; right: auto; top: 0; bottom: 0; width: 0; height: auto; border-top: 0; border-left: 3px dashed var(--linea); }
  .parada { display: grid; grid-template-columns: 70px 1fr; gap: 0 var(--e-5); }
  .parada__farol { grid-row: span 3; margin: 0; }
}

/* Diario: noticias con filtros */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-6); }
.filtro {
  border: 1px solid var(--linea); background: transparent; color: var(--hueso-2); border-radius: 999px;
  padding: 0 16px; min-height: 40px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.filtro:hover { color: var(--hueso); border-color: var(--hueso-3); }
.filtro[aria-pressed="true"] { background: var(--hueso); color: var(--tinta); border-color: var(--hueso); }
.diario { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-5); }
.entrada {
  grid-column: span 4; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--noche-2); border: 1px solid var(--linea-suave); color: var(--hueso); text-decoration: none;
  transition: transform var(--t-medio) var(--sale), border-color var(--t-rapido);
}
.entrada:first-child { grid-column: span 8; grid-row: span 2; }
.entrada:first-child .entrada__imagen { aspect-ratio: auto; flex: 1; min-height: 280px; }
.entrada:first-child h3 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); }
.entrada:hover { transform: translateY(-4px); border-color: var(--linea); }
.entrada__imagen { aspect-ratio: 16 / 9; overflow: hidden; background: var(--noche-3); }
.entrada__imagen img, .entrada__imagen svg { width: 100%; height: 100%; object-fit: cover; }
.entrada__cuerpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); }
.entrada__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--t-chica); color: var(--hueso-3); }
.entrada h3 { font-size: 1.5rem; }
.entrada p { margin: 0; color: var(--hueso-2); font-size: 0.98rem; }
.diario--lista .entrada:first-child { grid-column: span 4; grid-row: auto; }
.diario--lista .entrada:first-child .entrada__imagen { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
.diario--lista .entrada:first-child h3 { font-size: 1.5rem; }
@media (max-width: 960px) { .entrada, .entrada:first-child, .diario--lista .entrada:first-child { grid-column: 1 / -1; grid-row: auto; } }
@media (min-width: 640px) and (max-width: 960px) { .entrada { grid-column: span 6; } }

/* Preguntas frecuentes */
.preguntas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--e-7); }
.acordeon { border-top: 1px solid var(--linea); }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: 22px 4px; cursor: pointer; font-family: var(--f-titulo); font-weight: 750; font-size: 1.45rem; line-height: 1.15;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary .i { width: 22px; height: 22px; color: var(--farol); transition: transform var(--t-medio) var(--sale); }
.acordeon details[open] summary .i { transform: rotate(180deg); }
.acordeon summary:hover { color: var(--farol-vivo); }
.acordeon__respuesta { padding: 0 4px 24px; color: var(--hueso-2); max-width: 64ch; }
.acordeon__respuesta p:last-child { margin: 0; }
@media (max-width: 900px) { .preguntas { grid-template-columns: 1fr; gap: var(--e-5); } }

/* Cierre: únete a la manada */
.cierre { position: relative; overflow: hidden; isolation: isolate; min-height: 520px; display: grid; align-items: center; }
.cierre__escena { position: absolute; inset: 0; z-index: -1; }
.cierre__escena svg { width: 100%; height: 100%; }
.cierre__escena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 16 18 / 0.9) 0%, rgb(8 16 18 / 0.55) 55%, rgb(8 16 18 / 0.15) 100%); }
.cierre h2 { max-width: 14ch; }
.cierre p { margin-top: var(--e-4); max-width: 46ch; color: var(--hueso-2); font-size: var(--t-grande); }
.cierre .botones { margin-top: var(--e-6); }

/* 11. Páginas de juego ----------------------------------------------- */
.juego-portada { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--e-9) var(--e-9); }
.juego-portada__escena { position: absolute; inset: 0; z-index: -1; }
.juego-portada__escena svg { width: 100%; height: 100%; }
.juego-portada__escena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 16 18 / 0.94) 0%, rgb(8 16 18 / 0.7) 46%, rgb(8 16 18 / 0.1) 100%); }
.juego-portada__rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--e-7); align-items: center; }
.juego-portada h1 { font-size: clamp(3rem, 1.6rem + 5vw, 6rem); line-height: 0.92; }
.juego-portada .cintas { margin-bottom: var(--e-5); }
.juego-portada__lema { margin-top: var(--e-5); font-size: var(--t-grande); color: var(--hueso-2); max-width: 46ch; }
.juego-portada .botones { margin-top: var(--e-6); }
.juego-portada__credencial { display: flex; justify-content: center; }
.juego-portada__credencial .credencial { --cordon-largo: 110px; margin-top: 0; }
.tema-hr .juego-portada__escena::after { background: linear-gradient(90deg, rgb(18 10 12 / 0.95) 0%, rgb(18 10 12 / 0.7) 46%, rgb(18 10 12 / 0.05) 100%); }
.tema-twc .juego-portada__escena::after { background: linear-gradient(90deg, rgb(22 27 56 / 0.95) 0%, rgb(22 27 56 / 0.7) 46%, rgb(22 27 56 / 0.05) 100%); }
@media (max-width: 900px) {
  .juego-portada__rejilla { grid-template-columns: 1fr; }
  .juego-portada__credencial { order: -1; }
  .juego-portada__credencial .credencial { --ancho-cred: 220px; --cordon-largo: 40px; }
  .juego-portada__credencial .credencial__cintas { display: none; }
}

.franja-tiendas { background: var(--noche-1); border-block: 1px solid var(--linea-suave); padding-block: var(--e-5); }
.franja-tiendas .contenedor { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6); align-items: center; justify-content: space-between; }
.franja-tiendas p { margin: 0; color: var(--hueso-2); }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); align-items: start; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; gap: var(--e-6); } }
.prosa { max-width: 64ch; color: var(--hueso-2); }
.prosa p { font-size: 1.08rem; }
.prosa strong { color: var(--hueso); }
.cita-juego {
  font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.12;
  color: var(--hueso); margin: 0; max-width: 22ch;
}
.cita-juego footer { margin-top: var(--e-4); font-family: var(--f-texto); font-size: var(--t-chica); font-weight: 600; color: var(--hueso-3); }

/* Galería de capturas y visor */
.galeria { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-3); }
.galeria button { padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--noche-2); position: relative; }
.galeria button:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.galeria button:nth-child(n+2) { grid-column: span 2; }
.galeria img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: transform var(--t-lento) var(--sale); }
.galeria button:hover img { transform: scale(1.03); }
.galeria button::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px rgb(239 232 216 / 0.08); }
.galeria button:hover::after { box-shadow: inset 0 0 0 3px var(--farol); }
@media (max-width: 760px) { .galeria { grid-template-columns: 1fr 1fr; } .galeria button:nth-child(1) { grid-column: 1 / -1; grid-row: auto; } .galeria button:nth-child(n+2) { grid-column: span 1; } }
.visor {
  position: fixed; inset: 0; z-index: var(--z-visor); display: grid; place-items: center; padding: var(--e-5);
  background: rgb(4 9 10 / 0.94); opacity: 0; visibility: hidden; transition: opacity var(--t-medio) var(--sale), visibility 0s linear var(--t-medio);
}
.visor.esta-abierto { opacity: 1; visibility: visible; transition-delay: 0s; }
.visor figure { margin: 0; max-width: min(1280px, 100%); }
.visor img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; }
.visor figcaption { margin-top: var(--e-3); color: var(--hueso-2); text-align: center; }
.visor__boton {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--noche-2); color: var(--hueso);
}
.visor__boton:hover { background: var(--noche-4); }
.visor__cerrar { top: 18px; right: 18px; }
.visor__ant { left: 18px; top: 50%; }
.visor__sig { right: 18px; top: 50%; }

/* Equilibrio (Holy Ruin) */
.equilibrio { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--e-7); align-items: center; }
.equilibrio__escenario {
  --aura: var(--hr-menta); --aura-fuerza: 0.18;
  position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 460px; width: 100%; margin-inline: auto;
  border-radius: 50%; background: #1c0f12;
}
.equilibrio__escenario::before, .equilibrio__escenario::after {
  content: ""; position: absolute; border-radius: 50%; background: var(--aura);
  transition: background var(--t-medio), opacity var(--t-medio), transform var(--t-medio) var(--sale);
}
.equilibrio__escenario::before { inset: 14%; opacity: calc(var(--aura-fuerza) * 0.6); }
.equilibrio__escenario::after { inset: 28%; opacity: var(--aura-fuerza); }
.equilibrio__santa { position: relative; z-index: 1; width: 34%; }
.equilibrio__mando { display: grid; gap: var(--e-4); }
.barra-equilibrio { position: relative; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--hr-oro), #23404a 50%, var(--hr-purpura)); }
.equilibrio input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.equilibrio input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #9fd8ff 0%, var(--hr-oro) 22%, #23404a 50%, var(--hr-purpura) 78%, #14081c 100%); }
.equilibrio input[type="range"]::-moz-range-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #9fd8ff 0%, var(--hr-oro) 22%, #23404a 50%, var(--hr-purpura) 78%, #14081c 100%); }
.equilibrio input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -8px; border-radius: 50%; background: var(--hr-menta); border: 4px solid var(--hr-fondo); box-shadow: 0 0 0 2px var(--hr-menta), 0 4px 10px rgb(0 0 0 / .5); }
.equilibrio input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--hr-menta); border: 4px solid var(--hr-fondo); box-shadow: 0 0 0 2px var(--hr-menta); }
.equilibrio input[type="range"]:focus-visible { outline: 3px solid var(--hr-menta); outline-offset: 4px; }
.equilibrio__extremos { display: flex; justify-content: space-between; font-size: var(--t-chica); font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.equilibrio__extremos span:first-child { color: var(--hr-oro); }
.equilibrio__extremos span:last-child { color: #c9a0f0; }
.habilidades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.habilidad {
  display: grid; place-items: center; text-align: center; min-height: 44px; padding: 6px; border-radius: 8px;
  font-size: 0.78rem; font-weight: 750; border: 2px solid transparent; transition: opacity var(--t-medio), filter var(--t-medio);
}
.habilidad--santa { background: #d6b64a; color: #241a05; }
.habilidad--oscura { background: #7a3bb0; color: #fbf4ff; }
.habilidad.esta-bloqueada { opacity: 0.35; filter: grayscale(0.8); border-style: dashed; border-color: currentColor; }
.equilibrio__estado { min-height: 4.8em; padding: var(--e-4); border-radius: 12px; background: #1c0f12; border: 1px solid #3a1a20; color: var(--hr-menta); }
.equilibrio__estado strong { display: block; font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 800; margin-bottom: 4px; }
@media (max-width: 900px) { .equilibrio { grid-template-columns: 1fr; } .habilidades { grid-template-columns: 1fr 1fr; } }

/* Pretendientes */
.pretendientes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.pretendiente { position: relative; padding: var(--e-5); border-radius: 16px; background: #1c0f12; border: 1px solid #3a1a20; color: var(--hr-menta); display: flex; flex-direction: column; gap: var(--e-3); }
.pretendiente .i { width: 34px; height: 34px; color: var(--hr-oro); }
.pretendiente h3 { font-size: 1.7rem; }
.pretendiente__amor { font-style: oblique 10deg; color: #cdb8a5; margin: 0; }
.pretendiente p { margin: 0; font-size: 0.95rem; opacity: 0.9; }
.pretendiente__donde { margin-top: auto !important; font-size: var(--t-chica) !important; color: #bfa592; }
@media (max-width: 1000px) { .pretendientes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pretendientes { grid-template-columns: 1fr; } }

/* Mostrador (The Witch's Counter) */
.mostrador { position: relative; border-radius: 22px; overflow: hidden; background: #1a1f3f; box-shadow: var(--sombra-2); }
.mostrador__escena { position: relative; aspect-ratio: 16 / 9; max-height: 560px; width: 100%; overflow: hidden; }
.mostrador__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mostrador__cliente, .mostrador__frente { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mostrador__cliente { transition: transform var(--t-lento) var(--sale), opacity var(--t-medio); }
.mostrador__cliente.esta-fuera { transform: translate(18%, 4%); opacity: 0; }
.escena-pintada--twc > img { object-position: 50% 40%; }
.twc-galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.twc-galeria img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--sombra-2); }
.twc-lista { list-style: none; padding: 0; margin: var(--e-6) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-4) var(--e-6); color: #c7bfd8; }
.twc-lista strong { display: block; color: #f3e7cf; font-size: 1.1rem; }
@media (max-width: 760px) { .twc-galeria { grid-template-columns: 1fr; } }
.mostrador__panel { padding: var(--e-5); display: grid; gap: var(--e-4); background: #141834; color: #f3e7cf; }
.mostrador__linea { min-height: 3.4em; margin: 0; font-size: 1.06rem; }
.mostrador__linea em { color: #c7bfd8; }
.mostrador__linea b { color: var(--twc-luz); font-weight: 700; }
.mostrador__linea .pista { background: rgb(242 163 58 / 0.2); color: #ffd79c; padding: 0 3px; border-radius: 3px; }
.mostrador__opciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcion {
  border: 1px solid #3b4170; background: #1f2550; color: #f3e7cf; border-radius: 10px; padding: 10px 14px;
  text-align: left; font-size: 0.95rem; min-height: 44px; transition: background var(--t-rapido), border-color var(--t-rapido);
}
.opcion:hover { background: #2b3266; border-color: #6a71a8; }
.estante { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.frasco {
  display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; text-align: left;
  border: 1px solid #3b4170; background: #1f2550; color: #f3e7cf; border-radius: 12px; padding: 8px 10px;
}
.frasco:hover { background: #2b3266; border-color: #f2a33a; }
.frasco img { width: 56px; height: 56px; }
.frasco strong { display: block; font-size: 0.92rem; line-height: 1.2; }
.frasco span { font-size: 0.78rem; color: #c7bfd8; }
.mostrador__trato { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-chica); color: #c7bfd8; }
.mostrador__trato button { white-space: nowrap; border: 1px solid #3b4170; background: transparent; color: #f3e7cf; border-radius: 999px; padding: 4px 12px; min-height: 32px; }
.mostrador__trato button[aria-pressed="true"] { background: #f3e7cf; color: #1a1f3f; }
.mostrador__resultado { display: flex; align-items: center; gap: 10px; font-weight: 700; }
@media (max-width: 700px) { .estante { grid-template-columns: 1fr; } .mostrador__etiqueta { flex-basis: 100%; } }

/* Vecinos de Helechal */
.vecinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-4); }
.vecino { margin: 0; border-radius: 14px; overflow: hidden; background: #1a1f3f; border: 1px solid #2a3060; }
.vecino img { width: 100%; aspect-ratio: 3 / 3.4; object-fit: cover; object-position: 50% 10%; background: #232a55; }
.vecino figcaption { padding: 10px 12px 12px; font-size: 0.86rem; color: #c7bfd8; line-height: 1.35; }
.vecino figcaption strong { display: block; color: #f3e7cf; font-size: 1rem; }

/* Reloj del día */
.reloj { display: grid; grid-template-columns: 10fr 2fr 10fr 2fr; border-radius: 14px; overflow: hidden; border: 1px solid #2a3060; }
.reloj div { padding: var(--e-4); min-height: 120px; display: flex; flex-direction: column; gap: 4px; }
.reloj strong { font-family: var(--f-titulo); font-size: 1.35rem; line-height: 1; }
.reloj span { font-size: var(--t-chica); font-variant-numeric: tabular-nums; opacity: 0.85; }
.reloj p { margin: 0; font-size: 0.86rem; opacity: 0.9; }
.reloj__dia { background: #f0c86a; color: #2a1d06; }
.reloj__siesta { background: #8a4c72; color: #fbeef6; }
.reloj__noche { background: #232a5c; color: #e8e4ff; }
.reloj__cierre { background: #10142a; color: #c7bfd8; }
@media (max-width: 760px) {
  .reloj { grid-template-columns: 1fr; }
  .reloj div { min-height: 0; }
}

/* Productos */
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--e-4); }
.producto { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 14px; border-radius: 14px; background: #1a1f3f; border: 1px solid #2a3060; }
.producto img { width: 64px; height: 64px; }
.producto h3 { font-family: var(--f-texto); font-size: 1rem; font-weight: 750; line-height: 1.25; }
.producto p { margin: 4px 0 0; font-size: 0.86rem; color: #c7bfd8; }
.producto .no { color: #e9a0a0; }

/* 12. Jugar ---------------------------------------------------------- */
.reproductor { position: relative; border-radius: 18px; overflow: hidden; background: #050b0c; border: 1px solid var(--linea); box-shadow: var(--sombra-2); }
.reproductor__pantalla { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--hr-fondo); }
.reproductor__pantalla canvas { width: 100% !important; height: 100% !important; display: block; outline: none; }
.reproductor__portada { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--e-5); background: var(--hr-fondo); }
.reproductor__portada img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.reproductor__portada > div { position: relative; display: grid; gap: var(--e-4); justify-items: center; max-width: 520px; }
.reproductor__portada h2 { color: var(--hr-menta); }
.reproductor__portada p { margin: 0; color: #cdb8a5; }
.reproductor__carga { width: min(360px, 80%); height: 10px; border-radius: 999px; background: #3a1a20; overflow: hidden; }
.reproductor__carga div { height: 100%; width: 100%; background: var(--hr-menta); transform: scaleX(0); transform-origin: left; transition: transform 200ms linear; }
.polilla-carga { width: 72px; animation: aleteo 0.42s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes aleteo { from { transform: translateY(0) scaleX(1); } to { transform: translateY(-6px) scaleX(0.72); } }
.reproductor__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding: 12px 16px; background: var(--noche-2); border-top: 1px solid var(--linea); }
.reproductor__barra p { margin: 0; color: var(--hueso-2); font-size: var(--t-chica); }
.teclas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-3); }
.tecla { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--noche-2); border: 1px solid var(--linea-suave); }
kbd {
  display: inline-grid; place-items: center; min-width: 34px; height: 32px; padding: 0 8px; border-radius: 7px;
  background: var(--hueso); color: var(--tinta); font: 800 0.8rem var(--f-texto); box-shadow: inset 0 -3px 0 #b9ae98;
}
.aviso-movil { display: none; margin-top: var(--e-4); padding: var(--e-4); border-radius: 12px; background: #2a1a0b; border: 1px solid #5a3a15; color: #ffd79c; }
@media (hover: none) and (pointer: coarse) { .aviso-movil { display: flex; gap: 10px; } }

.farolera { position: relative; border-radius: 18px; overflow: hidden; background: #050b0c; border: 1px solid var(--linea); box-shadow: var(--sombra-2); }
.farolera__pantalla { position: relative; }
.farolera canvas { width: 100%; aspect-ratio: 16 / 9; touch-action: none; cursor: crosshair; }
.farolera__titulo { font-size: 2.4rem; }
@media (max-width: 600px) {
  .farolera__titulo { font-size: 1.7rem; }
  .farolera__explica { display: none; }
  .farolera__capa { padding: var(--e-3); }
  .farolera__capa > div { gap: var(--e-2); }
  .farolera__capa .numero { font-size: var(--t-chica); }
}
.farolera__capa { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--e-5); background: rgb(5 11 12 / 0.72); }
.farolera__capa > div { display: grid; gap: var(--e-4); justify-items: center; max-width: 520px; }
.farolera__capa h2, .farolera__capa h3 { color: var(--hueso); }
.farolera__capa p { margin: 0; color: var(--hueso-2); }
.farolera__marcador { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; justify-content: space-between; gap: var(--e-4); pointer-events: none; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px #000; }
.farolera__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding: 10px 14px; background: var(--noche-2); border-top: 1px solid var(--linea); font-size: var(--t-chica); color: var(--hueso-2); }
.farolera__barra .botones { gap: 6px; }

/* 13. Estudio, diario, prensa, 404 ----------------------------------- */
.cabeza-pagina { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--e-9) var(--e-8); border-bottom: 1px solid var(--linea-suave); }
.cabeza-pagina__escena { position: absolute; inset: 0; z-index: -1; opacity: 0.85; }
.cabeza-pagina__escena svg { width: 100%; height: 100%; }
.cabeza-pagina__escena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 16 18 / 0.96) 0%, rgb(8 16 18 / 0.75) 50%, rgb(8 16 18 / 0.25) 100%); }
.cabeza-pagina h1 { font-size: clamp(2.8rem, 1.6rem + 4vw, 5rem); max-width: 16ch; }
.cabeza-pagina p { margin-top: var(--e-4); }

.mascotas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); }
.mascota { display: grid; grid-template-columns: 140px 1fr; gap: var(--e-5); align-items: center; padding: var(--e-5); border-radius: 18px; background: var(--noche-2); border: 1px solid var(--linea-suave); }
.mascota > svg { width: 140px; height: auto; }
.mascota > img { width: 140px; height: 140px; object-fit: cover; border-radius: 14px; background: #1d3235; }
.mascota h3 { font-size: 1.8rem; }
.mascota p { margin: 6px 0 0; color: var(--hueso-2); }
@media (max-width: 760px) { .mascotas { grid-template-columns: 1fr; } .mascota { grid-template-columns: 96px 1fr; } .mascota > svg, .mascota > img { width: 96px; height: 96px; } }

.valores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-7); }
.valor h3 { font-size: 1.7rem; margin-bottom: var(--e-3); display: flex; align-items: center; gap: 12px; }
.valor h3 .i { color: var(--farol); width: 28px; height: 28px; }
.valor p { color: var(--hueso-2); margin: 0; max-width: 46ch; }
@media (max-width: 760px) { .valores { grid-template-columns: 1fr; } }

.equipo { display: flex; flex-wrap: wrap; gap: var(--e-7) var(--e-5); justify-content: flex-start; padding-bottom: var(--e-9); }

.hoja-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--linea); }
.hoja-datos div { padding: 14px 18px; background: var(--noche-2); border-bottom: 1px solid var(--linea-suave); }
.hoja-datos div:nth-child(odd) { border-right: 1px solid var(--linea-suave); }
.hoja-datos dt { font-size: var(--t-mini); font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hueso-3); }
.hoja-datos dd { margin: 4px 0 0; color: var(--hueso); }
@media (max-width: 640px) { .hoja-datos { grid-template-columns: 1fr; } .hoja-datos div:nth-child(odd) { border-right: 0; } }
.descargas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e-4); }
.descarga { display: grid; gap: 10px; padding: var(--e-4); border-radius: 14px; background: var(--noche-2); border: 1px solid var(--linea-suave); color: var(--hueso); text-decoration: none; }
.descarga:hover { border-color: var(--farol); color: var(--hueso); }
.descarga__vista { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 10px; background: var(--noche-1); overflow: hidden; }
.descarga__vista--claro { background: var(--papel); }
.descarga__vista svg, .descarga__vista img { max-width: 70%; max-height: 80%; }
.descarga__vista img.cubre { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.descarga span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 0.95rem; }
.descarga small { color: var(--hueso-3); font-weight: 500; }

.perdido { min-height: 78vh; display: grid; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.perdido__escena { position: absolute; inset: 0; z-index: -1; }
.perdido__escena svg { width: 100%; height: 100%; }
.perdido__escena::after { content: ""; position: absolute; inset: 0; background: rgb(8 16 18 / 0.55); }
.perdido h1 { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); max-width: 12ch; }

/* 14. Movimiento y accesibilidad ------------------------------------- */
.revela { opacity: 1; transform: none; }
.js-movimiento .revela { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--sale), transform 900ms var(--sale); transition-delay: calc(var(--orden, 0) * 70ms); }
.js-movimiento .revela.esta-visible { opacity: 1; transform: none; }
.luciernaga { animation: parpadeo 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.55s); }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@supports (animation-timeline: view()) {
  .js-movimiento .tablero__arte > img { animation: deriva linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes deriva { from { transform: scale(1.08) translateY(-3%); } to { transform: scale(1.08) translateY(3%); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .credencial { transform: none !important; }
  .js-movimiento .revela { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .cinta, .boton { border: 1px solid CanvasText; }
}

/* Formulario "Únete a la manada" ----------------------------------- */
.cierre { padding-block: var(--e-9); }
.cierre__rejilla { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--e-7); align-items: start; }
.unete { display: grid; gap: var(--e-4); padding: clamp(20px, 3vw, 32px); border-radius: var(--r-credencial); background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-3); }
.unete__opciones { border: 0; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.unete__opciones legend { font-family: var(--f-titulo); font-weight: 800; font-size: 1.45rem; color: #7a1d17; margin-bottom: var(--e-2); }
.unete__opcion { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 2px solid #cfc3aa; border-radius: var(--r); cursor: pointer; transition: border-color var(--t-rapido), background var(--t-rapido); }
.unete__opcion:hover { border-color: var(--tinta-2); }
.unete__opcion:has(input:checked) { border-color: var(--farol-hondo); background: #f7e3c4; }
.unete__opcion input { accent-color: var(--farol-hondo); width: 20px; height: 20px; margin-top: 2px; flex: none; }
.unete__opcion > span { display: grid; gap: 2px; font-size: 0.92rem; color: var(--tinta-2); }
.unete__opcion strong { color: var(--tinta); font-size: 1rem; }
.unete__campo { display: grid; gap: 6px; }
.unete__campo label { font-weight: 700; font-size: 0.92rem; }
.unete input[type="text"], .unete input[type="email"], .unete textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 2px solid #b9ac93; background: #fffaf0; color: var(--tinta); font-size: 1rem;
}
.unete textarea { resize: vertical; }
.unete input:focus-visible, .unete textarea:focus-visible { outline: 3px solid var(--farol-hondo); outline-offset: 1px; border-color: var(--farol-hondo); }
.unete [aria-invalid="true"] { border-color: #b3261e; }
.unete__error { margin: 0; color: #9b1c15; font-size: 0.86rem; font-weight: 650; }
.unete__estado { margin: 0; min-height: 1.4em; font-weight: 650; }
.unete__estado--ok { color: #2f5d1e; }
.unete__estado--error { color: #9b1c15; }
.unete .boton { justify-self: start; }
@media (max-width: 860px) { .cierre__rejilla { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .boton--tienda { white-space: normal; text-align: left; flex-wrap: wrap; row-gap: 0; padding-block: 8px; max-width: 100%; }
  .boton--tienda .boton__extra { flex-basis: 100%; padding-left: calc(1.35em + 0.6em); font-size: 0.85em; }
}

/* Fondo pintado (Higgsfield) del héroe Estudio */
.portada__escena--imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.portada__escena--imagen::after {
  background: linear-gradient(90deg, rgb(8 16 18 / 0.88) 0%, rgb(8 16 18 / 0.55) 34%, rgb(8 16 18 / 0) 58%),
              linear-gradient(0deg, rgb(8 16 18 / 0.8) 0%, rgb(8 16 18 / 0) 24%);
}
.portada__diapo:first-child .portada__credenciales { justify-content: flex-start; padding-left: 4%; }
@media (max-width: 960px) {
  .portada__escena--imagen img { object-position: 88% 50%; }
  .portada__diapo:first-child .portada__credenciales { justify-content: flex-start; padding-left: 0; }
}
@media (max-width: 960px) {
  .portada__escena--imagen::after { background: linear-gradient(0deg, rgb(8 16 18 / 0.94) 0%, rgb(8 16 18 / 0.8) 55%, rgb(8 16 18 / 0.2) 100%); }
}

/* Fondos pintados en escenas */
.escena-pintada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.escena-pintada--holy-ruin > img { image-rendering: pixelated; object-position: 78% 40%; }
.escena-pintada--farolera > img { object-position: 50% 60%; }
.cierre__escena.escena-pintada, .perdido__escena.escena-pintada, .cabeza-pagina__escena.escena-pintada, .juego-portada__escena.escena-pintada { overflow: hidden; }