/* ============================================================
   ARCHIVO HACKBO · 1° VideoHackBo — Espectros en el HackBosque
   Paleta y texturas derivadas por muestreo de los afiches:
     img/Afiche Final Publicado video.png  (848 × 1264)
     img/Afiche Hackbo Horizontal.png      (1408 × 768)
   ============================================================ */

/* ---------- paleta de los afiches ---------- */
:root {
  /* fondo: los negros no son negro, son verdes-azulados casi apagados */
  --void:      #01080d;
  --void-2:    #04121a;
  --void-3:    #071e28;
  --ink:       #f7f3eb;   /* crema del texto del afiche vertical */
  --ash:       #839b98;   /* gris-verde del afiche */
  --sage:      #4f6c6f;
  --grape:     #5b1041;   /* vino/magenta */
  --blue:      #0a2c62;
  --mint:      #8ddcc3;   /* el acento brillante */
  --lilac:     #b5a5c6;
  --pink:      #bf9bba;

  /* un color por eje, todos dentro de la familia del afiche */
  --e-visiones:        #8ddcc3;
  --e-experimental:    #7fa89f;
  --e-gifs:            #f0dfae;
  --e-interferencias:  #b5a5c6;
  --e-huerfanos:       #bf9bba;

  --display: 'Oswald', 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --pixel: 'Silkscreen', var(--mono);

  --line: color-mix(in srgb, var(--ash) 22%, transparent);
  --frame: 1px solid var(--line);
}

[data-eje="visiones"]        { --eje: var(--e-visiones); }
[data-eje="experimental"]    { --eje: var(--e-experimental); }
[data-eje="gifs"]            { --eje: var(--e-gifs); }
[data-eje="interferencias"]  { --eje: var(--e-interferencias); }
[data-eje="huerfanos"]       { --eje: var(--e-huerfanos); }

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* la barra fija tapa 60px: los anclajes deben dejar aire */
:target,
section[id], main > section[id] { scroll-margin-top: 76px; }

body {
  background-color: var(--void);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.7;
  overflow-x: hidden;
  /* trama de semitono: hace que el negro se lea como papel impreso
     y no como "dark mode" */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(143, 173, 170, .07) 1px, transparent 0);
  background-size: 6px 6px;
  background-attachment: fixed;
}

::selection { background: var(--grape); color: var(--ink); }

a { color: var(--mint); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline dotted; text-underline-offset: 3px; }
a:focus-visible { outline: 1px dashed var(--mint); outline-offset: 3px; }

/* ----------Scanlines + grano, sobre todo el documento ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px
  );
  mix-blend-mode: multiply;
  opacity: .5;
}

/* marco fino, como el borde del afiche vertical */
.marco {
  position: fixed;
  inset: 10px;
  border: var(--frame);
  pointer-events: none;
  z-index: 901;
}
.marco::before,
.marco::after {
  content: '';
  position: absolute;
  top: -3px; bottom: -3px;
  width: 1px;
  background: var(--line);
}
.marco::before { left: 50%; }
.marco::after { left: calc(50% + 50%); }

/* ---------- tipografía ---------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: .92;
  text-transform: uppercase;
}

.etiqueta {
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ash);
}

.pixel { font-family: var(--pixel); letter-spacing: .06em; }

h2.display { font-size: clamp(2.2rem, 7vw, 5.5rem); }

.subrayado {
  border-bottom: var(--frame);
  padding-bottom: .6rem;
  margin-bottom: 1.6rem;
}

/* ---------- glitch ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.glitch::before { color: var(--mint); }
.glitch::after  { color: var(--grape); }

.glitch:hover::before,
.glitch:focus-visible::before,
.glitch.on::before {
  opacity: .85;
  animation: gl-a 420ms steps(2, end) 2;
}
.glitch:hover::after,
.glitch:focus-visible::after,
.glitch.on::after {
  opacity: .7;
  animation: gl-b 420ms steps(2, end) 2;
}

@keyframes gl-a {
  0%   { clip-path: inset(8% 0 78% 0); transform: translate(-3px, -1px); }
  50%  { clip-path: inset(42% 0 32% 0); transform: translate(4px, 1px); }
  100% { clip-path: inset(72% 0 6% 0);  transform: translate(-2px, 0); }
}
@keyframes gl-b {
  0%   { clip-path: inset(62% 0 20% 0); transform: translate(3px, 1px); }
  50%  { clip-path: inset(18% 0 66% 0); transform: translate(-4px, -1px); }
  100% { clip-path: inset(4% 0 84% 0);  transform: translate(2px, 0); }
}

/* ---------- barras ---------- */
.barra {
  border-top: var(--frame);
  background: linear-gradient(180deg, rgba(1, 8, 13, .92), rgba(1, 8, 13, .98));
  backdrop-filter: blur(6px);
  z-index: 800;
}
.navbar-hackbo {
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.navbar-hackbo .nav-link { color: var(--ash); padding-inline: .55rem; }
.navbar-hackbo .nav-link:hover,
.navbar-hackbo .nav-link.active { color: var(--mint); }
.navbar-hackbo .nav-link.active { text-shadow: 0 0 12px rgba(141, 220, 195, .6); }

.marca {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  font-size: 1rem;
}

/* ---------- portada ---------- */
.portada {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
}

.fondo {
  position: absolute;
  inset: -12% -2% -2%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.5) brightness(.42);
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.06);
  will-change: transform;
}

/* duotono: una capa de color al 100% sobre el gris */
.fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tinte, var(--mint));
  mix-blend-mode: color;
  opacity: .8;
}

.velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(1,8,13,.86) 0%, rgba(1,8,13,.42) 38%, rgba(1,8,13,.92) 88%, var(--void) 100%),
    radial-gradient(120% 80% at 50% 0%, transparent 0%, rgba(1,8,13,.7) 100%);
}

.portada > .contenido { position: relative; z-index: 2; }

.titular {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .84;
  letter-spacing: -.015em;
  font-size: clamp(3rem, 14vw, 12rem);
  text-shadow: 0 0 40px rgba(1, 8, 13, .9);
}
.titular span { display: block; }
.titular .contorno {
  color: transparent;
  -webkit-text-stroke: 1px var(--mint);
  text-shadow: none;
}
.titular .llave { color: var(--grape); }

.ficha {
  border-left: 2px solid var(--lilac);
  padding-left: 1rem;
  font-size: .78rem;
}
.ficha dt {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ash);
  font-weight: 400;
}
.ficha dd { margin: 0 0 .5rem; color: var(--ink); }

/* ---------- manifiesto ---------- */
.columnas {
  columns: 2;
  column-gap: 3rem;
  column-rule: var(--frame);
}
@media (max-width: 768px) { .columnas { columns: 1; } }

.columnas p { break-inside: avoid-column; }
.columnas p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.6rem;
  line-height: .8;
  padding: .12em .16em 0 0;
  color: var(--mint);
}

blockquote.memoria {
  border-left: 2px solid var(--mint);
  padding: .2rem 0 .2rem 1.2rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- ejes ---------- */
.tarjeta-eje {
  --eje: var(--mint);
  height: 100%;
  padding: 1.25rem;
  border: var(--frame);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--eje) 8%, transparent), transparent 60%),
    var(--void-2);
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.tarjeta-eje::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--eje);
  opacity: .5;
}
.tarjeta-eje:hover { border-color: color-mix(in srgb, var(--eje) 55%, transparent); transform: translateY(-3px); }
.tarjeta-eje .globo {
  font-size: 1.5rem;
  line-height: 1;
  filter: grayscale(1) contrast(1.4);
}
.tarjeta-eje .cuenta {
  font-family: var(--display);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--eje);
}

/* ---------- banda de fotos ---------- */
.banda { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.banda::-webkit-scrollbar { height: 6px; }
.banda::-webkit-scrollbar-track { background: var(--void-2); }
.banda::-webkit-scrollbar-thumb { background: var(--grape); }

.banda figure {
  position: relative;
  flex: 0 0 auto;
  width: 340px;
  aspect-ratio: 20 / 9;
  margin: 0;
  overflow: hidden;
  border: var(--frame);
}
.banda img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.45) brightness(.55);
  transition: filter .35s, transform .6s;
}
.banda figure::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(1,8,13,.9), transparent 60%);
  pointer-events: none;
}
.banda figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: .5rem .6rem;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ash);
  word-break: break-all;
}
.banda figure:hover img { filter: grayscale(0) contrast(1.05) brightness(.75); transform: scale(1.04); }
.banda figure:hover figcaption { color: var(--mint); }

/* ---------- filtros ---------- */
.rail {
  position: sticky;
  /* la barra fija mide 60px: el rail debe quedar justo debajo o la tapa */
  top: 60px;
  z-index: 700;
  border-block: var(--frame);
  background: rgba(1, 8, 13, .95);
  backdrop-filter: blur(8px);
}
@media (max-width: 991px) { .rail { position: static; } }

.chip {
  --eje: var(--ash);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid color-mix(in srgb, var(--eje) 40%, transparent);
  background: transparent;
  color: var(--ash);
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .42rem .65rem;
  min-height: 2rem;
  border-radius: 0;
  transition: color .2s, background .2s, border-color .2s;
}
.chip:hover { color: var(--ink); border-color: var(--eje); }
.chip[aria-pressed="true"] {
  color: var(--void);
  background: var(--eje);
  border-color: var(--eje);
  font-weight: 700;
}
.chip .n { opacity: .6; font-size: .9em; }

.buscador {
  background: transparent;
  border: var(--frame);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .8rem;
  padding: .45rem .7rem;
}
.buscador::placeholder { color: color-mix(in srgb, var(--ash) 70%, transparent); text-transform: uppercase; letter-spacing: .12em; }
.buscador:focus { background: var(--void-2); border-color: var(--mint); box-shadow: none; }

/* ---------- ficha de obra ---------- */
.espectro {
  --eje: var(--mint);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: var(--frame);
  background: var(--void-2);
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s, background .25s;
}
.espectro:hover {
  border-color: color-mix(in srgb, var(--eje) 60%, transparent);
  background: var(--void-3);
  transform: translateY(-4px);
}

/* el "thumb" es un espectro generado, no un fotograma: las fotos del
   archivo son del montaje y no de las obras */
.umbral {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 5px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--eje) 30%, transparent) 0 14%, transparent 15%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9px, color-mix(in srgb, var(--eje) 22%, transparent) 10px 11px),
    var(--void);
  overflow: hidden;
}
.umbral::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 42%, rgba(247,243,235,.16) 43%, transparent 44%);
  transform: translateX(-120%);
  transition: transform .8s ease;
}
.espectro:hover .umbral::after { transform: translateX(120%); }

.umbral .num {
  position: absolute;
  inset: auto .5rem -.15rem auto;
  z-index: 2;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--eje) 75%, transparent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--eje) 40%, transparent);
}

.umbral .sello {
  position: absolute;
  top: .5rem; left: .5rem;
  z-index: 2;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eje);
  border: 1px solid color-mix(in srgb, var(--eje) 50%, transparent);
  padding: .12rem .38rem;
  background: rgba(1, 8, 13, .6);
}

.cuerpo { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }

.espectro h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.12;
  text-transform: uppercase;
  margin: 0 0 .1rem;
}
.espectro h3 .glitch::before,
.espectro h3 .glitch::after { text-transform: uppercase; }

.subtitulo {
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--ash);
  margin-bottom: .5rem;
}

.autoria {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--eje);
  letter-spacing: .06em;
  margin-bottom: .45rem;
}
.autoria .colectivo { color: var(--ash); }

.creditos {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ash);
  border-top: var(--frame);
  padding-top: .5rem;
  margin-top: .6rem;
}
.creditos b { color: var(--ink); font-weight: 400; }

.resena {
  font-size: .78rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  margin-bottom: .8rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.espectro.abierto .resena { -webkit-line-clamp: unset; }

/* Reseñas bilingües: original y traducción siempre a la vista. */
.resena-dual { margin-bottom: .8rem; }
.resena-dual .resena { margin-bottom: .55rem; }
.resena-dual .resena:last-child { margin-bottom: 0; }

/* la traducción va algo más apagada para que se lea el original primero */
.resena.es-traduccion {
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--lilac) 45%, transparent);
  padding-left: .6rem;
}

.resena-idioma {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--lilac);
  vertical-align: .18em;
  margin-right: .1rem;
}
.resena.es-traduccion .resena-idioma { color: var(--ash); }

/* ═══════════════════════════════════════════════════════════
   BILINGÜE
   El sitio se muestra siempre en español e inglés. El español
   es el original y va sin marca; el inglés se distingue con un
   pipe al final de la etiqueta y con una barra a la izquierda
   cuando es un bloque de prosa.
   ═══════════════════════════════════════════════════════════ */

/* Etiqueta corta: el inglés va pegado, en otro tono, con un pipe. */
.en-inline {
  color: var(--ash);
  font-weight: 400;
}
.en-inline::before { content: "| "; color: color-mix(in srgb, var(--lilac) 60%, transparent); }

/* Bloque de prosa: párrafo propio, debajo del original. */
.en-bloque {
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--lilac) 40%, transparent);
  padding-left: .6rem;
  margin: .15rem 0 1rem;
  font-style: normal;
}
.en-bloque .resena-idioma { vertical-align: .1em; }

/* Igual, pero sin barra lateral: dentro de una dd que ya la tiene. */
.en-bloque.en-dentro {
  border-left: 0;
  padding-left: 0;
  margin: .3rem 0 0;
  font-size: .92em;
}

/* Una glosa de eje, que es corta: en línea y más chica. */
.en-mini {
  color: color-mix(in srgb, var(--ash) 92%, transparent);
  display: inline;
}
.en-mini::before { content: " | "; color: color-mix(in srgb, var(--lilac) 60%, transparent); }

/* Nombre de eje dentro de un chip: el separador lo
   pone el propio texto (" / "), así que aquí no hace falta el pipe. */
.en-linea { display: inline; }
.en-linea .en-linea { color: inherit; }
.chip .en-linea { color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* La prosa bilingüe no debe partirse a media línea al exclusivo. */
.en-bloque, .resena.es-traduccion { text-wrap: pretty; }

.resena-pieza {
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lilac);
  margin-top: .55rem;
}
.resena-dual > .resena-pieza:first-child { margin-top: 0; }


.enlace-roto {
  font-size: .64rem;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.acciones { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem; }

.btn-archivo {
  --eje: var(--mint);
  border: 1px solid color-mix(in srgb, var(--eje) 55%, transparent);
  background: transparent;
  color: var(--eje);
  font-family: var(--mono);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .5rem .8rem;
  min-height: 2rem;
  border-radius: 0;
}
.btn-archivo:hover { background: var(--eje); color: var(--void); text-decoration: none; }

.reproductor {
  aspect-ratio: 16 / 9;
  border-bottom: var(--frame);
  background: #000;
}
.reproductor iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- índice de artistas ---------- */
.indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; }
.indice button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: var(--frame);
  border-bottom: var(--frame);
  color: var(--ink);
  padding: .6rem .7rem;
  min-height: 2.75rem;
  font-family: var(--mono);
  font-size: .74rem;
  transition: background .2s, color .2s;
}
.indice button:hover,
.indice button:focus-visible { background: var(--mint); color: var(--void); outline: none; }
.indice button .n {
  float: right;
  font-size: .64rem;
  color: var(--ash);
}
.indice button:hover .n { color: var(--void); }
.indice button .pais {
  display: block;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ash);
}
.indice button:hover .pais { color: var(--void); }

.letra {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--lilac);
  line-height: 1;
  border-bottom: var(--frame);
}

/* ---------- estado del registro ---------- */
.registro { border: var(--frame); background: var(--void-2); }
.registro dt {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--lilac);
  font-weight: 700;
}
.registro dd { font-size: .84rem; margin-bottom: 1rem; color: color-mix(in srgb, var(--ink) 88%, transparent); }

/* ---------- pie ---------- */
.pie {
  border-top: var(--frame);
  background: var(--void-2);
}
.pie a { color: var(--ash); }
.pie a:hover { color: var(--mint); }

/* ---------- gutters dentro de contenedores con padding ----------
   Bootstrap descuenta el gutter con márgenes negativos. Con px-3
   (1rem de padding) un g-5 (3rem de gutter) deja la fila 0.5rem
   por fuera a cada lado. Los gutters se bajan a g-4 / g-3 en el
   marcado para móvil en vez de compensar con hacks. */

/* ---------- utilidades ---------- */
.num-tab {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px var(--lilac);
}

.vacio {
  border: 1px dashed var(--line);
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ash);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- Reveal on scroll ---------- */
.revelar { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.revelar.visto { opacity: 1; transform: none; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glitch::before, .glitch::after { animation: none !important; opacity: 0; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .umbral::after { transition: none; }
  .fondo { transform: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- impresión ---------- */
@media print {
  body::after, .marco, .barra, .rail, body::before { display: none !important; }
  body { background: #fff; color: #000; }
  .espectro { break-inside: avoid; border-color: #999; background: #fff; }
}