/* ============================================================
   base.css — capas, HUD, cajón, avances y piezas comunes

   Pila de capas, de abajo arriba:
     #desierto (z 0)  el fondo vivo, un <canvas> fijo
     #vista    (z 2)  el contenido, sobre paneles oscuros translúcidos
     #hud      (z 50)
     #avance   (z 55) el enunciado que flota
     #cajon    (z 60) el panel lateral
     #grano    (z 70) el grano de póster, sin atrapar clics
     #tormenta (z 80) el muro de polvo de las transiciones
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }

/* clip y no hidden: no crea un contenedor de scroll, así que `position: sticky`
   sigue funcionando, y nada puede empujar la página hacia los lados. */
html, body { overflow-x: clip; }

body {
  min-height: 100vh;
  background: var(--noche);
  color: var(--crema);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--arena-clara); text-decoration: none; }
a:hover { color: var(--lavanda); }
:focus-visible { outline: 2px solid var(--lavanda); outline-offset: 3px; }
::selection { background: var(--violeta); color: var(--tinta); }
h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
code { font-family: var(--f-mono); font-size: 0.88em; background: var(--noche-3); padding: 0.08em 0.35em; }
.muted { color: var(--crema-2); }

.etq {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crema-2);
}

.oculto-visual {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ capas */

#desierto {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  view-transition-name: desierto;       /* no viaja con la página: el desierto se queda */
}

#grano {
  position: fixed; inset: 0; z-index: 70;
  pointer-events: none;
  opacity: 0.075;
  view-transition-name: grano;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .8  0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#vista {
  position: relative; z-index: 2;
  min-height: 100vh;
  outline: none;
  transition: opacity 0.15s ease;
}
#vista.fundiendo { opacity: 0; }

#tormenta {
  position: fixed; inset: 0; z-index: 80;
  width: 100vw; height: 100vh;
  display: none;
  pointer-events: none;
}
#tormenta.activa { display: block; }

/* ------------------------------------------------------------ HUD */

#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--hud);
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px;
  background: linear-gradient(rgba(10, 7, 13, 0.9), rgba(10, 7, 13, 0.72));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea-suave);
  view-transition-name: hud;
  transition: background 0.6s ease, border-color 0.6s ease;
}
body.en-portada #hud { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.hud-marca { display: flex; align-items: center; gap: 12px; color: var(--crema); }
.hud-marca:hover { color: var(--crema); }
.hud-marca-sig {
  flex: none; white-space: nowrap;
  font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em;
  padding: 6px 8px 5px; border: var(--filete) solid var(--arena);
  color: var(--arena-clara);
}
.hud-marca-txt { font-family: var(--f-mono); font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; }

.hud-migas {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crema-3);
}
.hud-migas a { color: var(--crema-2); }
.hud-migas b { color: var(--crema); font-weight: 400; }

.hud-espacio { flex: 1; }

.hud-secciones { display: flex; gap: 4px; }
.hud-secciones a {
  position: relative;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--crema-2); padding: 8px 12px;
}
.hud-secciones a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1.5px;
  background: var(--violeta); transform: scaleX(0); transition: transform 0.45s var(--curva);
}
.hud-secciones a:hover { color: var(--crema); }
.hud-secciones a.activa { color: var(--crema); }
.hud-secciones a.activa::after { transform: scaleX(1); }

.hud-controles { display: flex; align-items: center; gap: 10px; }

.hud-boton {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--crema-2); background: transparent;
  border: 1px solid var(--linea-arena); padding: 7px 10px; cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.hud-boton:hover { color: var(--crema); border-color: var(--arena); }
.hud-boton[aria-pressed="true"]#calmaBtn { background: var(--arena); color: var(--tinta); border-color: var(--arena); }

.hud-sonido { display: flex; align-items: center; gap: 6px; }
.barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.barra {
  display: block; width: 3px; height: 14px; background: var(--violeta);
  transform-origin: bottom; transform: scaleY(0.15); transition: transform 0.08s linear;
}
.hud-sonido-btn.mudo .barra { background: var(--crema-3); transform: scaleY(0.12) !important; }
.hud-sonido-btn.mudo .hud-sonido-txt { text-decoration: line-through; }

.hud-volumen { display: inline-flex; align-items: center; width: 0; overflow: hidden; transition: width 0.35s var(--curva); }
.hud-sonido:hover .hud-volumen, .hud-sonido:focus-within .hud-volumen { width: 96px; }
.hud-volumen input { width: 90px; accent-color: var(--violeta); }

.hud-version {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--crema-3); padding: 7px 4px;
}
.hud-version:hover { color: var(--arena-clara); }

/* ------------------------------------------------------------ chips */

.chip {
  display: inline-flex; align-items: center;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; line-height: 1.3;
  color: var(--crema); padding: 4px 9px;
  border: 1px solid var(--linea);
  background: rgba(157, 108, 240, 0.07);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.chip:hover { background: var(--violeta); color: var(--tinta); }
.chip-parte { border-color: var(--linea-arena); background: rgba(169, 138, 222, 0.06); font-family: var(--f-texto); font-size: 13px; letter-spacing: 0; }
.chip-parte:hover { background: var(--arena); }
.chip-mini { font-size: 11px; padding: 2px 7px; color: var(--crema-2); border-color: var(--linea-suave); background: none; }

/* ------------------------------------------------------------ fichas breves */

.fi { min-width: 0; }
.fi-tag { color: var(--violeta); margin-bottom: 2px; }
.fi-nombre { font-weight: 600; font-size: 15px; line-height: 1.3; margin-bottom: 6px; color: var(--crema); }
.fi-cuerpo { font-size: 14.5px; line-height: 1.55; color: var(--crema-2); }
.fi-cuerpo p { margin: 0 0 0.5em; }
.fi-cuerpo p:last-child { margin-bottom: 0; }
.fi-cuerpo ul { list-style: none; margin: 0.3em 0; padding: 0; }
.fi-cuerpo ul li { position: relative; padding-left: 16px; margin: 0.25em 0; }
.fi-cuerpo ul li::before { content: ''; position: absolute; left: 1px; top: 0.75em; width: 8px; height: 1.5px; background: var(--arena); }
.fi-ej .fi-tag { color: var(--lavanda); }

/* ------------------------------------------------------------ avance flotante */

.avance {
  position: fixed; z-index: 55;
  max-width: 400px; max-height: 60vh; overflow: auto;
  padding: 14px 16px 16px;
  background: var(--panel-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--linea);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(8px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.3s var(--curva);
  pointer-events: auto;
}
.avance[hidden] { display: none; }
.avance.visible { opacity: 1; transform: none; }
.avance.arriba { transform: translateY(calc(-100% + 8px)) scale(0.985); }
.avance.arriba.visible { transform: translateY(-100%); }
.avance-cuerpo { position: relative; }
.avance::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--violeta), var(--arena));
}

/* ------------------------------------------------------------ cajón */

.cajon { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.cajon[hidden] { display: none; }
.cajon-fondo {
  position: absolute; inset: 0; background: rgba(6, 3, 8, 0.5);
  opacity: 0; transition: opacity 0.35s ease; pointer-events: auto;
}
.cajon-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(540px, 94vw);
  display: flex; flex-direction: column;
  background: var(--panel-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-left: var(--filete) solid var(--linea);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55);
  transform: translateX(104%);
  transition: transform 0.45s var(--curva);
  pointer-events: auto;
}
/* El borde de arena: una franja granulada por donde «entra» el panel. */
.cajon-panel::before {
  content: ''; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px;
  background: repeating-linear-gradient(180deg, rgba(169, 138, 222, 0.55) 0 2px, transparent 2px 5px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
  opacity: 0.7;
}
.cajon.abierto .cajon-fondo { opacity: 1; }
.cajon.abierto .cajon-panel { transform: none; }

.cajon-cab {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--linea-suave);
}
.cajon-migas { flex: 1; color: var(--arena); }
.cajon-atras, .cajon-cerrar {
  width: 34px; height: 34px; display: inline-grid; place-items: center;
  background: transparent; color: var(--crema); cursor: pointer;
  border: 1px solid var(--linea-arena); font-size: 15px;
}
.cajon-atras:hover, .cajon-cerrar:hover { background: var(--violeta); color: var(--tinta); border-color: var(--violeta); }
.cajon-atras[hidden] { display: none; }
.cajon-cuerpo { flex: 1; overflow: auto; padding: 22px 22px 30px; }
.cajon-pie { padding: 14px 22px; border-top: 1px solid var(--linea-suave); }
.cajon-ir { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violeta); }
.cajon-usan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 18px; }
.cajon-usan .etq { margin-right: 4px; }

/* ------------------------------------------------------------ «esto no existe» y botones */

.vacio { position: relative; max-width: 560px; margin: 0 auto; padding: calc(var(--hud) + 12vh) 16px 0; text-align: center; }
.vacio-planeta {
  width: 96px; height: 96px; margin: 0 auto 26px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, var(--arena-clara), var(--arena) 45%, var(--arena-sombra) 80%);
  box-shadow: 0 0 60px rgba(157, 108, 240, 0.35);
}
.vacio h1 { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violeta); }
.vacio-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crema); padding: 11px 16px; border: var(--filete) solid var(--linea); background: rgba(10, 7, 13, 0.6);
}
.btn:hover, .btn.lleno { background: var(--violeta); color: var(--tinta); border-color: var(--violeta); }

/* ------------------------------------------------------------ móvil */

@media (max-width: 900px) {
  #hud { gap: 10px; padding: 0 14px; }
  .hud-migas, .hud-marca-txt, .hud-sonido-txt, .hud-version { display: none; }
  .hud-secciones a { padding: 8px 7px; letter-spacing: 0.1em; font-size: 11px; }
  .hud-volumen { display: none; }
}

@media (max-width: 760px) {
  .cajon-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 84vh;
    border-left: 0; border-top: var(--filete) solid var(--linea);
    transform: translateY(104%);
  }
  .cajon-panel::before { display: none; }
  .cajon.abierto .cajon-panel { transform: none; }
  .avance { max-width: calc(100vw - 32px); }
}