/* =========================================================================
   CENIZAS DE VALLECARDO · ESTILOS
   Colores: data/paleta.json del juego. Letra: Galmuri14 (lectura, a 15 px y
   múltiplos), Galmuri11 (apoyo, 12 px) y Silkscreen (rótulos, 8 px y múltiplos),
   como en interfaz/tema.gd: a otros tamaños la letra pixel se emborrona.
   ========================================================================= */

@font-face { font-family: "Galmuri14"; src: url("assets/fuentes/Galmuri14.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Galmuri11"; src: url("assets/fuentes/Galmuri11.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("assets/fuentes/Silkscreen.woff") format("woff"); font-display: swap; }

:root {
  /* Tierras */
  --negro: #0B0806; --carbon: #1C1410; --escombro: #2E2318; --tierra: #3F3028; --barro: #524038; --polvo: #6E5A50;
  /* Blancos */
  --humo: #8E7E74; --ceniza-clara: #AAA098; --niebla: #C6BEB8; --alba: #DDD6D0; --hueso: #F0EBE6;
  /* Fuego */
  --brasa: #8C2400; --ascua: #C44800; --llama: #E87018; --ambar: #F4A030; --vela: #F6C850; --rayo: #FFF0A8;
  /* Sangre y Vacío */
  --sangre: #8E1C1C; --carmin: #C43232; --eco: #7262B4; --cristal: #1E5C6E; --luz-fondo: #4A9CAC; --abismo: #080818;
  --musgo: #3C5A30; --resplandor: #8A3C16; --lumbre: #552412; --rescoldo: #2C140E;

  --lectura: "Galmuri14", "Courier New", monospace;
  --apoyo: "Galmuri11", "Courier New", monospace;
  --rotulo: "Silkscreen", "Courier New", monospace;
  --px: 3px;               /* un píxel del arte en las piezas de interfaz */
  --wrap: 1140px;
  --gutter: 16px;
  --header: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header); background: var(--negro); }
body {
  margin: 0;
  background: var(--negro);
  color: var(--alba);
  font: 15px/1.6 var(--lectura);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  overflow-x: hidden;
}
img, canvas { display: block; }
.px, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--ambar); text-decoration: none; }
a:hover { color: var(--vela); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--vela); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--hueso); color: var(--negro); padding: 8px 12px; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------- Cabecera ---------- */
.site-header {
  background: linear-gradient(rgba(11,8,6,.7), transparent);
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header);
  transition: background .3s, box-shadow .3s;
}
.site-header.is-solid { background: var(--negro); box-shadow: 0 var(--px) 0 var(--carbon); }
.header-inner { height: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--hueso); }
.brand-icon { width: 32px; height: 32px; }
.brand-text { font: 16px/1 var(--rotulo); letter-spacing: 2px; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.site-header.is-solid .brand-text { opacity: 1; }
.main-nav { margin-left: auto; display: flex; gap: 22px; }
.main-nav a { font: 12px/1 var(--apoyo); color: var(--niebla); padding: 8px 0; }
.main-nav a:hover, .main-nav a.is-current { color: var(--vela); }
.main-nav .nav-beta { color: var(--ambar); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang { display: flex; }
.lang-btn { font: 8px/1 var(--rotulo); padding: 10px 8px; color: var(--humo); min-width: 36px; min-height: 36px; }
.lang-btn[aria-pressed="true"] { color: var(--hueso); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ascua); }
.menu-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.menu-toggle span { width: 21px; height: 3px; background: var(--hueso); }
@media (max-width: 899px) {
  .menu-toggle { display: flex; }
  .main-nav {
    position: fixed; top: var(--header); left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--negro); padding: 8px var(--gutter) 20px; box-shadow: 0 var(--px) 0 var(--carbon);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: .2s;
  }
  .main-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .main-nav a { font: 15px/1 var(--lectura); padding: 15px 0; border-bottom: var(--px) solid var(--carbon); }
}

/* ---------- Portada ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  background: #120F1A;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 70%, var(--negro));
}
.hero-top { position: relative; z-index: 2; text-align: center; padding: calc(var(--header) + 5vh) var(--gutter) 0; }
.hero-over { margin: 0; font: 16px/1 var(--rotulo); color: var(--ceniza-clara); letter-spacing: 4px; text-transform: uppercase; }
.hero-title {
  margin: 10px 0 0; font: 45px/1 var(--lectura); color: var(--hueso); letter-spacing: 1px;
  text-shadow: 0 var(--px) 0 var(--negro), 0 0 24px rgba(232, 112, 24, .35);
}
.hero-genre { margin: 14px 0 0; font: 12px/1.4 var(--apoyo); color: var(--niebla); }
@media (min-width: 720px) { .hero-title { font-size: 90px; } .hero-over { font-size: 24px; } }
@media (min-width: 1200px) and (min-height: 760px) {
  .hero-top { padding-top: calc(var(--header) + 8vh); }
  .hero-title { font-size: 135px; }
  .hero-over { font-size: 32px; letter-spacing: 6px; }
  .hero-genre { font: 15px/1.4 var(--lectura); margin-top: 22px; }
  .menu-option { font-size: 30px; min-height: 60px; }
  .menu-option.is-main { font-size: 45px; min-height: 76px; }
  .menu-option .menu-mark { width: 18px; }
  .menu-option.is-main .menu-mark { width: 28px; }
  .hero-window { font-size: 16px; margin-top: 16px; }
  .hero-menu { padding-bottom: 6vh; }
}
.hero-menu {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
  padding: 0 var(--gutter) calc(28px + env(safe-area-inset-bottom));
}
.menu-option {
  display: flex; align-items: center; gap: 10px; font: 15px/1 var(--lectura); color: var(--niebla);
  min-height: 44px; padding: 0 12px; text-shadow: 0 2px 0 var(--negro);
}
.menu-option .menu-mark { color: transparent; width: 10px; }
.menu-option:hover, .menu-option:focus-visible { color: var(--hueso); }
.menu-option:hover .menu-mark, .menu-option:focus-visible .menu-mark { color: var(--ambar); }
.menu-option.is-main { color: var(--ambar); font-size: 30px; min-height: 56px; }
.menu-option.is-main .menu-mark { color: var(--ambar); width: 18px; }
.menu-option.is-main:hover { color: var(--vela); }
.hero-window { margin: 10px 0 0; font: 8px/1 var(--rotulo); letter-spacing: 1px; color: var(--humo); text-transform: uppercase; }

/* ---------- La hoja del cuaderno ---------- */
.hoja { position: relative; color: var(--carbon); }
.hoja-papel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hoja-body { position: relative; z-index: 1; padding: 48px 32px 54px; }
.hoja.is-burnt .hoja-body { visibility: hidden; }
.hoja-place { margin: 0 0 18px; font: 12px/1 var(--apoyo); color: var(--barro); }
@media (min-width: 720px) { .hoja-body { padding: 72px 72px 80px; } }

.story { padding: 64px 0 48px; }
.hoja--story { max-width: 820px; margin: 0 auto; }
.story-lines p {
  margin: 0 0 1.1em; color: var(--escombro);
  opacity: 0; transform: translateY(4px); transition: opacity .9s, transform .9s;
}
.story-lines p.is-shown { opacity: 1; transform: none; }
.story-lines p:first-child { font-size: 30px; line-height: 1.3; color: var(--carbon); }
.story-echo { margin: 1.6em 0 0; color: var(--cristal); opacity: 0; transition: opacity 1.2s; }
.story-echo.is-shown { opacity: 1; }
@media (min-width: 720px) { .story-lines p { font-size: 15px; } .story-lines p:first-child { font-size: 45px; } }

/* ---------- Secciones ---------- */
.section { padding: 96px 0; position: relative; }
.section-head { max-width: 700px; margin-bottom: 40px; }
.kicker { margin: 0 0 12px; font: 8px/1 var(--rotulo); letter-spacing: 2px; text-transform: uppercase; color: var(--llama); }
.section-title { margin: 0 0 16px; font: 30px/1.2 var(--lectura); color: var(--hueso); }
@media (min-width: 720px) { .section-title { font-size: 45px; } .kicker { font-size: 16px; } }
.lead { margin: 0; color: var(--niebla); max-width: 62ch; }
.block-title { margin: 0 0 8px; font: 15px/1.3 var(--lectura); color: var(--ambar); }
.block-lead { margin: 0 0 24px; color: var(--ceniza-clara); max-width: 62ch; }

/* Caja de interfaz del juego: nota oscura con el canto de su color */
.caja {
  background: var(--carbon);
  box-shadow: 0 calc(-1 * var(--px)) 0 var(--escombro), 0 var(--px) 0 var(--escombro),
              calc(-1 * var(--px)) 0 0 var(--escombro), var(--px) 0 0 var(--escombro);
}

/* ---------- Kael ---------- */
.kael { background: linear-gradient(var(--negro), #0d0b10 40%, var(--negro)); }
.kael-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .kael-grid { grid-template-columns: 5fr 7fr; gap: 64px; } }
.kael-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 360px; }
.kael-stage::before {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 112, 24, .22), rgba(196, 72, 0, .06) 50%, transparent 70%);
  animation: lumbre 3.2s steps(6) infinite alternate;
}
@keyframes lumbre { from { transform: scale(.94); opacity: .8; } to { transform: scale(1.04); opacity: 1; } }
.kael-canvas { position: relative; width: 320px; height: 260px; margin-top: 20px; }
@media (max-width: 480px) { .kael-canvas { width: 256px; height: 208px; } }
.kael-floor { position: relative; width: 220px; height: 10px; background: var(--rescoldo); box-shadow: 0 10px 0 var(--negro); }
.kael-details { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 16px; }
.kael-details li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.muestras { display: flex; gap: 3px; padding-top: 5px; }
.muestras i { width: 15px; height: 15px; box-shadow: 0 0 0 var(--px) var(--escombro); }
.kael-details strong { display: block; margin-bottom: 2px; font-weight: normal; color: var(--hueso); }
.kael-details span { font: 12px/1.5 var(--apoyo); color: var(--ceniza-clara); }
.kael-hood { margin: 0; color: var(--humo); }

/* ---------- El viaje ---------- */
.journey { background: var(--negro); }
.tramo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 18px; }
.tramo-tab {
  text-align: left; padding: 12px 12px 14px; background: var(--carbon); color: var(--humo);
  box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--escombro); min-height: 64px;
  transition: color .2s, background .2s;
}
.tramo-tab .num { display: block; font: 16px/1 var(--rotulo); color: var(--polvo); margin-bottom: 8px; }
.tramo-tab .name { font: 12px/1.3 var(--apoyo); }
.tramo-tab:hover { color: var(--niebla); }
.tramo-tab[aria-selected="true"] { background: var(--escombro); color: var(--hueso); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ascua); }
.tramo-tab[aria-selected="true"] .num { color: var(--ambar); }
@media (min-width: 720px) { .tramo-tab { padding: 16px 20px 18px; } .tramo-tab .name { font: 15px/1.3 var(--lectura); } }

.franja-frame { position: relative; background: var(--carbon); padding: var(--px); }
.franja-viewport { position: relative; overflow: hidden; background: #000; }
.franja-viewport canvas { position: relative; left: 0; }
.franja-frame::after { /* el marco de la franja del juego */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 24px solid transparent; border-image: url("assets/ui/marco_franja.webp") 8 / 24px round;
  image-rendering: pixelated;
}
.franja-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 14px 18px 12px; }
.franja-line { margin: 0; color: var(--niebla); min-height: 1.6em; transition: opacity .3s; }
.hour-picker { display: flex; gap: 4px; }
.hour-btn { font: 12px/1 var(--apoyo); color: var(--humo); padding: 0 12px; min-height: 40px; display: flex; align-items: center; gap: 6px; }
.hour-btn span[aria-hidden] { font-size: 15px; }
.hour-btn[aria-checked="true"] { color: var(--hueso); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--llama); }

.tramo-info { display: grid; gap: 28px; margin-top: 36px; }
@media (min-width: 900px) { .tramo-info { grid-template-columns: 7fr 5fr; gap: 48px; } }
.tramo-info.is-swapping { opacity: 0; transform: translateY(6px); }
.tramo-info { transition: opacity .35s, transform .35s; }
.tramo-meta { font: 8px/1 var(--rotulo); color: var(--polvo); letter-spacing: 1px; text-transform: uppercase; margin: 0 0 12px; }
.tramo-name { margin: 0 0 6px; font: 30px/1.2 var(--lectura); color: var(--hueso); }
.tramo-region { margin: 0 0 22px; color: var(--ceniza-clara); }
.tramo-story-label { margin: 0 0 4px; font: 12px/1 var(--apoyo); color: var(--ascua); }
.tramo-story { margin: 0 0 10px; color: var(--ambar); }
.tramo-premise { margin: 0; color: var(--niebla); max-width: 60ch; }
.boss { padding: 22px 22px 24px; align-self: start; }
.boss-label { margin: 0 0 10px; font: 12px/1 var(--apoyo); color: var(--carmin); display: flex; gap: 8px; align-items: center; }
.boss-name { margin: 0 0 8px; color: var(--hueso); }
.boss-note { margin: 0 0 18px; font: 12px/1.5 var(--apoyo); color: var(--ceniza-clara); }

/* ---------- Botones ---------- */
.btn-trazo, .btn-sello {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; font: 15px/1 var(--lectura);
}
.btn-trazo { color: var(--ambar); box-shadow: inset 0 0 0 var(--px) var(--tierra); }
.btn-trazo:hover { color: var(--vela); box-shadow: inset 0 0 0 var(--px) var(--ascua); }
.btn-sello { background: var(--ambar); color: var(--negro); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ascua); }
.btn-sello:hover { background: var(--vela); color: var(--negro); }
.btn-sello:active { transform: translateY(var(--px)); box-shadow: none; }

/* ---------- Cómo se juega ---------- */
.play { background: linear-gradient(var(--negro), #100b08 50%, var(--negro)); }
.play-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .play-grid { grid-template-columns: 7fr 5fr; gap: 56px; } }
.demo-hint { margin: 0 0 14px; font: 12px/1.4 var(--apoyo); color: var(--llama); }
.hoja--demo .hoja-body { padding: 44px 30px 48px; }
@media (min-width: 720px) { .hoja--demo .hoja-body { padding: 56px 52px 60px; } }
.demo-step { display: flex; gap: 12px; }
.demo-num { font: 12px/1.9 var(--apoyo); color: var(--polvo); flex: none; width: 12px; }
.demo-text p { margin: 0 0 1em; color: var(--escombro); }
.tiras { display: grid; gap: 10px; margin: 18px 0 0; }
.tira {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center;
  text-align: left; width: 100%; padding: 14px 16px 14px 18px; background: var(--hueso); color: var(--carbon);
  filter: drop-shadow(1px 1px 0 var(--ceniza-clara));
  transition: transform .08s;
}
.tira::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--px); background: var(--canto, transparent); }
.tira:hover { background: #fff; }
.tira:active { transform: translateY(1px); filter: none; }
.tira[disabled] { cursor: default; filter: none; }
.tira.is-chosen { box-shadow: inset 0 0 0 var(--px) var(--ascua); }
.tira-icon { width: 24px; height: 24px; grid-row: span 2; }
.tira-icon--none { width: 0; }
.tira-text { font: 15px/1.4 var(--lectura); }
.tira-sub { font: 12px/1 var(--apoyo); color: var(--barro); display: flex; align-items: center; gap: 10px; }
.tira-sub b { font-weight: normal; color: var(--llama); }
.muescas { display: inline-flex; gap: 1px; }
.muescas i { width: 4px; height: 9px; background: var(--niebla); }
.muescas i.ok { background: var(--llama); }
.demo-result { margin: 18px 0 0; }
.demo-result p { margin: 0 0 .8em; color: var(--escombro); }
.dado { display: flex; align-items: center; gap: 14px; margin: 18px 0 12px; flex-wrap: wrap; }
.dado-muescas { display: flex; gap: 2px; }
.dado-muescas i { width: 9px; height: 21px; background: var(--polvo); transition: background .1s; }
.dado-muescas i.on { background: var(--resplandor); }
.dado-muescas i.off { background: var(--niebla); }
.dado-muescas i.win { background: var(--musgo); }
.dado-muescas i.lose { background: var(--sangre); }
.dado-word { font: 16px/1 var(--rotulo); }
.dado-word.win { color: var(--musgo); }
.dado-word.lose { color: var(--sangre); }
.dado-cuenta { font: 12px/1 var(--apoyo); color: var(--polvo); }
.cambio { display: flex; gap: 8px; align-items: center; font: 12px/1 var(--apoyo); color: var(--musgo); margin: 0 0 14px; }
.cambio.is-mark { color: var(--cristal); }
.demo-again { display: block; margin-top: 8px; font: 12px/1 var(--apoyo); color: var(--barro); min-height: 40px; text-decoration: underline; text-underline-offset: 4px; }
.demo-again:hover { color: var(--carbon); }

.layers { display: grid; gap: 14px; }
.layer { padding: 20px 22px 22px; position: relative; }
.layer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--px); background: var(--c); }
.layer h3 { margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; font: 15px/1.3 var(--lectura); color: var(--hueso); }
.layer h3 span { color: var(--c); }
.layer p { margin: 0; font: 12px/1.6 var(--apoyo); color: var(--ceniza-clara); }

.stats-block { margin-top: 80px; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { display: grid; grid-template-columns: 48px 1fr; gap: 4px 14px; padding: 16px; align-items: center; }
.stat img { width: 48px; height: 48px; grid-row: span 2; }
.stat-name { font: 16px/1 var(--rotulo); color: var(--hueso); }
.stat-name em { font: 12px/1 var(--apoyo); font-style: normal; color: var(--ambar); margin-left: 8px; }
.stat p { margin: 0; font: 12px/1.5 var(--apoyo); color: var(--ceniza-clara); }
.stat--eje { box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--eje); }
.hearts-row { display: flex; gap: 16px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.hearts { display: flex; gap: 6px; }
.hearts img { width: 38px; height: 34px; }
.hearts-row p { margin: 0; color: var(--ceniza-clara); flex: 1 1 280px; }
.pillars { list-style: none; margin: 72px 0 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillars li { padding: 22px 0; border-top: var(--px) solid var(--carbon); color: var(--hueso); font: 15px/1.4 var(--lectura); }
@media (min-width: 720px) { .pillars li { padding: 22px 20px 0 0; } }
.pillars li::before { content: "»"; color: var(--ascua); margin-right: 8px; }

/* ---------- Hallazgos ---------- */
.finds { background: radial-gradient(ellipse at 50% 30%, #17121d, var(--negro) 70%); }
.finds-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .finds-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.find { display: grid; gap: 18px; }
@media (min-width: 600px) and (max-width: 959px) { .find { grid-template-columns: 200px 1fr; align-items: start; } }
.find-screen {
  position: relative; background: #000; justify-self: center; width: 100%; max-width: 270px;
  aspect-ratio: 180 / 400; overflow: hidden;
  box-shadow: 0 0 0 var(--px) var(--escombro), 0 0 0 calc(2 * var(--px)) var(--negro), 0 24px 60px rgba(0,0,0,.6);
}
@media (min-width: 960px) { .find-screen { max-width: 270px; } }
.find-screen img { width: 100%; height: 100%; object-fit: cover; }
.find-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.08) 2px 3px); }
.find-scene { font: 8px/1 var(--rotulo); color: var(--polvo); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; }
.find-name { margin: 0 0 4px; font: 15px/1.3 var(--lectura); color: var(--vela); display: flex; gap: 10px; align-items: center; }
.find-name img { width: 32px; height: 32px; }
.find-kind { margin: 0 0 12px; font: 12px/1 var(--apoyo); color: var(--humo); }
.find-quote { margin: 0 0 14px; color: var(--niebla); font: 15px/1.5 var(--lectura); }
.find-quote::before { content: "«"; color: var(--ascua); } .find-quote::after { content: "»"; color: var(--ascua); }
.find p.find-effect, .find p.find-tech { margin: 0 0 8px; font: 12px/1.6 var(--apoyo); color: var(--ceniza-clara); }
.find-tech b { font-weight: normal; color: var(--ambar); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.chip { display: inline-flex; gap: 4px; align-items: center; font: 12px/1 var(--apoyo); color: var(--musgo-claro, #9ab67e); }
.chip img { width: 16px; height: 16px; }
.find-where { font: 12px/1 var(--apoyo); color: var(--polvo); }

.bag { margin-top: 96px; }
.bag-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.bag-hint { font: 12px/1 var(--apoyo); color: var(--polvo); }
.bag-body { display: grid; gap: 16px; }
@media (min-width: 900px) { .bag-body { grid-template-columns: auto 1fr; gap: 28px; align-items: start; } }
.bag-slots { display: grid; grid-template-columns: repeat(3, 84px); gap: 8px; justify-content: start; }
@media (min-width: 480px) { .bag-slots { grid-template-columns: repeat(6, 72px); } }
@media (min-width: 900px) { .bag-slots { grid-template-columns: repeat(3, 96px); } }
.slot { aspect-ratio: 1; display: grid; place-items: center; background: var(--carbon); box-shadow: inset 0 0 0 var(--px) var(--escombro); }
.slot img { width: 64px; height: 64px; }
.slot:hover { background: var(--escombro); }
.slot[aria-selected="true"] { background: var(--escombro); box-shadow: inset 0 0 0 var(--px) var(--ascua); }
.slot.is-legendary { box-shadow: inset 0 0 0 var(--px) var(--resplandor); }
.slot.is-legendary[aria-selected="true"] { box-shadow: inset 0 0 0 var(--px) var(--vela); }
.bag-card { padding: 22px 24px 24px; min-height: 180px; }
.bag-card h4 { margin: 0 0 4px; font: 15px/1.3 var(--lectura); color: var(--hueso); }
.bag-card .kind { margin: 0 0 12px; font: 12px/1 var(--apoyo); color: var(--humo); }
.bag-card p.text { margin: 0; color: var(--niebla); }
.bag-card.is-legendary h4 { color: var(--vela); }

/* ---------- La Memoria ---------- */
.memory { background: linear-gradient(var(--negro), #07090f 50%, var(--negro)); }
.memory-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .memory-grid { grid-template-columns: repeat(3, 1fr); } }
.memory-block { padding: 22px 22px 24px; box-shadow: inset 0 var(--px) 0 var(--eco); background: #120f1c; }
.memory-block h3 { margin: 0 0 8px; font: 15px/1.3 var(--lectura); color: #b3a8e6; }
.memory-block p { margin: 0; font: 12px/1.6 var(--apoyo); color: var(--ceniza-clara); }
.origins { margin-top: 56px; }
.origins-list { list-style: none; counter-reset: o; margin: 16px 0 12px; padding: 0; display: grid; gap: 0; }
@media (min-width: 720px) { .origins-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.origins-list li { counter-increment: o; padding: 12px 0; border-bottom: var(--px) solid var(--carbon); color: var(--polvo); display: flex; gap: 14px; }
.origins-list li::before { content: counter(o); font: 8px/2.4 var(--rotulo); color: var(--tierra); width: 12px; }
.origins-list li:first-child { color: var(--hueso); }
.origins-list li:first-child::before { color: var(--luz-fondo); }
.origins-list li:not(:first-child)::after { content: "?"; margin-left: auto; color: var(--tierra); }
.origins-note { margin: 0; font: 12px/1.5 var(--apoyo); color: var(--humo); }

/* ---------- Música ---------- */
.music-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .music-grid { grid-template-columns: 5fr 6fr; gap: 64px; } }
.motif { display: flex; align-items: flex-end; gap: 9px; height: 140px; margin-top: 40px; }
.motif span {
  font: 12px/1 var(--apoyo); color: var(--ambar); display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  height: calc(var(--h) * 15px + 24px); width: 45px;
  border-top: 12px solid var(--ambar); padding-top: 9px;
  background: linear-gradient(var(--escombro), transparent);
}
.motif .fall { color: var(--ascua); border-top-color: var(--ascua); }
.player { padding: 24px; background: var(--carbon); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--escombro); }
.player-status { display: flex; justify-content: space-between; align-items: center; font: 8px/1 var(--rotulo); text-transform: uppercase; letter-spacing: 1px; color: var(--humo); }
.eq { display: flex; gap: 3px; align-items: flex-end; height: 15px; }
.eq i { width: 3px; height: 3px; background: var(--ascua); }
.eq.is-on i { animation: eq .9s steps(4) infinite alternate; }
.eq.is-on i:nth-child(2) { animation-delay: -.3s; } .eq.is-on i:nth-child(3) { animation-delay: -.6s; }
.eq.is-on i:nth-child(4) { animation-delay: -.15s; } .eq.is-on i:nth-child(5) { animation-delay: -.45s; }
@keyframes eq { to { height: 15px; } }
.player-title { margin: 14px 0 2px; font: 30px/1.2 var(--lectura); color: var(--hueso); }
.player-where { margin: 0 0 10px; font: 12px/1 var(--apoyo); color: var(--llama); }
.player-text { margin: 0; color: var(--ceniza-clara); min-height: 4.8em; }
.player-progress { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; font: 12px/1 var(--apoyo); color: var(--humo); }
.bar { flex: 1; height: 21px; display: flex; align-items: center; cursor: pointer; }
.bar::before { content: ""; position: absolute; }
.bar { position: relative; background: linear-gradient(var(--escombro), var(--escombro)) center / 100% 6px no-repeat; }
.bar-fill { height: 6px; width: 0; background: var(--ambar); }
.player-controls { display: flex; align-items: center; gap: 8px; }
.ctrl { width: 44px; height: 44px; display: grid; place-items: center; color: var(--niebla); font: 12px/1 var(--apoyo); }
.ctrl:hover { color: var(--vela); }
.ctrl--main { width: 56px; height: 56px; background: var(--ambar); color: var(--negro); font-size: 15px; box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ascua); }
.ctrl--main:hover { background: var(--vela); color: var(--negro); }
.vol { margin-left: auto; display: flex; align-items: center; }
.vol input { width: 110px; accent-color: var(--ambar); }
.tracks { list-style: none; margin: 18px 0 0; padding: 0; }
.track { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 12px 6px; min-height: 48px; border-top: var(--px) solid var(--escombro); color: var(--ceniza-clara); }
.track:hover { color: var(--hueso); }
.track .n { font: 8px/1 var(--rotulo); color: var(--polvo); width: 18px; }
.track .w { margin-left: auto; font: 12px/1 var(--apoyo); color: var(--polvo); }
.track[aria-current="true"] { color: var(--ambar); }
.track[aria-current="true"] .n { color: var(--ambar); }

/* ---------- Tráiler ---------- */
.trailer { background: linear-gradient(var(--negro), var(--rescoldo) 140%); text-align: left; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 var(--px) var(--escombro), 0 30px 80px rgba(0,0,0,.6); }
.video-frame iframe, .video-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .3s; }
.video-facade:hover img { opacity: .9; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px; padding: 0 24px; min-height: 56px;
  background: var(--ambar); color: var(--negro); font: 15px/1 var(--lectura); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ascua);
}
.video-facade:hover .video-play { background: var(--vela); }
.video-note { margin: 12px 0 0; font: 12px/1 var(--apoyo); color: var(--polvo); }
.follow { margin: 36px 0 0; }
.follow-user { font: 12px/1 var(--apoyo); opacity: .75; }

/* ---------- Pie ---------- */
.site-footer { padding: 56px 0 calc(88px + env(safe-area-inset-bottom)); background: var(--negro); border-top: var(--px) solid var(--carbon); }
.footer-inner p { margin: 0 0 8px; color: var(--humo); font: 12px/1.6 var(--apoyo); }
.footer-title { font: 16px/1 var(--rotulo) !important; color: var(--hueso) !important; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px !important; }
.footer-small { color: var(--polvo) !important; }

/* ---------- Mini reproductor ---------- */
.mini-player {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 4px 18px 4px 4px; background: var(--carbon);
  box-shadow: inset 0 0 0 var(--px) var(--escombro); font: 12px/1 var(--apoyo); color: var(--niebla); max-width: calc(100% - 32px);
}
.mini-player[hidden] { display: none; }

/* ---------- Aparecer al bajar ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .8s, transform .8s; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .story-lines p, .story-echo { opacity: 1 !important; transform: none !important; transition: none; }
  .kael-stage::before, .eq.is-on i { animation: none; }
}