/*
Theme Name: Rebobina
Theme URI: https://example.com/rebobina
Author: Octavio
Description: Theme de videoclub analógico para blogs de terror, ciencia ficción y cine friki. Carátulas VHS, aberración cromática de tracking y contador de cinta CRT.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rebobina
*/

/* ============================================================
   0. TOKENS
   ============================================================ */
:root{
  --bg: #0b0e14;
  --bg-raised: #12161d;
  --bg-raised-hover: #171c26;
  --line: #262b35;
  --line-soft: #1a1e27;
  --ink: #eae7df;
  --ink-dim: #9aa0ab;
  --ink-faint: #868da0;

  --magenta: #ff2e6d;
  --cyan: #2fe6d6;
  --phosphor: #8dffa0;
  --amber: #ffb627;

  --terror: #ff2e6d;
  --scifi: #2fe6d6;
  --friki: #ffb627;

  --font-display: "Bungee", system-ui, sans-serif;
  --font-body: "Literata", Georgia, "Times New Roman", serif;
  --font-mono: "VT323", "Courier New", monospace;

  --radius: 3px;
  --wrap: 1180px;
}

/* ============================================================
   1. RESET & BASE
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ background: var(--bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  position: relative;
}

/* scanline texture — subtle, fixed, doesn't block interaction */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.018) 0px,
    rgba(255,255,255,0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
p{ margin: 0 0 1.2em; }

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

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

.screen-reader-text{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}
.skip-link:focus{
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  clip: auto;
  z-index: 10001;
  background: var(--phosphor);
  color: var(--bg);
  padding: 10px 16px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============================================================
   2. HEADER
   ============================================================ */
.site-header{
  border-bottom: 1px solid var(--line);
  padding: 22px 0 18px;
  position: sticky;
  top: 0;
  background: rgba(11,14,20,.92);
  backdrop-filter: blur(6px);
  z-index: 100;
}
.site-header__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-branding{ display: flex; flex-direction: column; gap: 4px; }
.site-title{
  font-size: clamp(28px, 4vw, 40px);
  margin: 0;
  position: relative;
  display: inline-block;
  color: var(--ink);
  text-shadow:
    2px 0 0 rgba(255,46,109,.55),
    -2px 0 0 rgba(47,230,214,.55);
}
.site-title a{ display:inline-block; }
.site-tagline{
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--phosphor);
  letter-spacing: .04em;
}
.site-tagline .dot{
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--magenta);
  margin-right: 8px;
  animation: blink 1.6s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity: .15; } }

.primary-nav ul{ display: flex; gap: 28px; flex-wrap: wrap; }
.primary-nav{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.primary-nav a{
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav .current-menu-item > a{
  color: var(--ink);
  border-color: var(--phosphor);
}
.random-tape{
  border: 1px solid var(--line) !important;
  padding: 6px 12px !important;
  color: var(--phosphor) !important;
}
.random-tape:hover{ border-color: var(--phosphor) !important; }

.header-search{ position: relative; }
.header-search__toggle{
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 16px;
  padding: 6px 12px;
  cursor: pointer;
}
.header-search__toggle:hover{ color: var(--ink); }
.header-search__toggle[aria-expanded="true"]{ color: var(--phosphor); border-color: var(--phosphor); }

.header-search__panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(340px, 90vw);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 14px;
  z-index: 200;
}
.header-search__form input[type="search"]{
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 9px 10px;
  font-family: var(--font-body);
}
.header-search__form input[type="search"]:focus{ border-color: var(--phosphor); }
.header-search__results{ margin-top: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.header-search__result{
  display: flex; align-items: center; gap: 10px;
  padding: 6px;
}
.header-search__result:hover{ background: var(--bg-raised-hover); }
.header-search__thumb{ width: 40px; height: 54px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); }
.header-search__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.header-search__info{ display: flex; flex-direction: column; min-width: 0; }
.header-search__title{ font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-search__year{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.header-search__all{
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  color: var(--phosphor);
  font-size: 14px;
  text-align: center;
}

/* ============================================================
   3. HERO — "NOW PLAYING" VHS BOX
   ============================================================ */
.now-playing{
  padding: 56px 0 24px;
}
.now-playing__eyebrow{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.now-playing__eyebrow::before{ content: "▶ "; color: var(--phosphor); }

.tape{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 40px;
  align-items: center;
}
@media (max-width: 860px){
  .tape{ grid-template-columns: 1fr; }
}

.tape__cover{
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  isolation: isolate;
}
.tape__cover img{
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.tape__cover .ghost{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity .2s ease, transform .2s ease;
}
.tape__cover .ghost--magenta{ filter: brightness(0) saturate(100%) invert(24%) sepia(85%) saturate(6000%) hue-rotate(325deg); }
.tape__cover .ghost--cyan{ filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(1000%) hue-rotate(120deg); }

.tape__cover:hover .ghost--magenta,
.tape__cover.is-glitching .ghost--magenta{ opacity: .55; transform: translate(-4px, 1px); }
.tape__cover:hover .ghost--cyan,
.tape__cover.is-glitching .ghost--cyan{ opacity: .55; transform: translate(4px, -1px); }
.tape__cover:hover img:not(.ghost),
.tape__cover.is-glitching img:not(.ghost){ transform: translateX(1px); }

.tape__cover::after{
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom, transparent 0 6px, rgba(0,0,0,.12) 6px 7px
  );
  pointer-events: none;
}
.tape__badge{
  position: absolute; top: 14px; left: 14px;
  z-index: 3;
  font-family: var(--font-mono);
  background: rgba(11,14,20,.85);
  border: 1px solid var(--line);
  color: var(--phosphor);
  padding: 4px 10px;
  font-size: 16px;
  letter-spacing: .05em;
}

.tape__info .cat-pill{ margin-bottom: 14px; }
.tape__title{
  font-size: clamp(26px, 3.4vw, 44px);
  margin-bottom: 16px;
}
.tape__title a:hover{ color: var(--phosphor); }
.tape__excerpt{ color: var(--ink-dim); max-width: 52ch; }
.tape__meta{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 17px;
  margin-top: 8px;
}

/* category pill */
.cat-pill{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid currentColor;
}
.cat-pill--terror{ color: var(--terror); }
.cat-pill--ciencia-ficcion, .cat-pill--sci-fi{ color: var(--scifi); }
.cat-pill--friki{ color: var(--friki); }

/* aviso de contenido — pegatina de advertencia */
.content-warning{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 14px;
  background: repeating-linear-gradient(
    -45deg, rgba(255,182,39,.09) 0 10px, rgba(255,182,39,.03) 10px 20px
  );
  border: 1px solid var(--amber);
  color: var(--ink);
  font-size: 15px;
  max-width: 60ch;
}
.content-warning__icon{ color: var(--amber); font-size: 18px; line-height: 1; }

/* boton guardar en la estanteria */
.save-tape{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: .03em;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.save-tape:hover{ color: var(--ink); border-color: var(--phosphor); }
.save-tape.is-saved{ color: var(--phosphor); border-color: var(--phosphor); }
.save-tape__icon{ font-size: 16px; }

/* sagas en la sidebar */
.poster-card__sagas{
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 18px 18px;
}
.saga-pill{
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 4px 9px;
}
.saga-pill:hover{ color: var(--phosphor); border-color: var(--phosphor); }
.saga-pill--studio{ color: var(--amber); }
.saga-pill--studio:hover{ color: var(--amber); border-color: var(--amber); }

/* trailer */
.trailer{ border-top: 1px dashed var(--line-soft); padding: 16px 18px 18px; }
.trailer__play{
  width: 100%;
  background: var(--phosphor);
  border: 1px solid var(--phosphor);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
}
.trailer__play:hover{ filter: brightness(1.08); }
.trailer__frame{ position: relative; width: 100%; aspect-ratio: 16/9; margin-top: 12px; background: #000; }
.trailer__frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* overlay de estatica — cinta al azar / revelado de trailer */
.noise-overlay{
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px),
    var(--bg);
  animation: noise-flicker .12s steps(2) infinite;
}
.noise-overlay[hidden]{ display: none; }
.noise-overlay__text{
  font-family: var(--font-mono);
  color: var(--phosphor);
  font-size: 22px;
  letter-spacing: .1em;
  text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan);
}
@keyframes noise-flicker{ 50%{ opacity: .92; } }

/* ============================================================
   6. SHELF — GRID DE TARJETAS
   ============================================================ */
.shelf{ padding: 48px 0 64px; }
.shelf__head{
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.shelf__head h2{ font-size: 24px; }
.shelf__head .count{ font-family: var(--font-mono); color: var(--ink-faint); font-size: 17px; }

.shelf__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}
.shelf--related{ margin-top: 24px; }
.shelf__empty{
  grid-column: 1 / -1;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  border: 1px dashed var(--line);
  padding: 24px;
  text-align: center;
}

.card{
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink-faint);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
}
.card--terror{ border-top-color: var(--terror); }
.card--ciencia-ficcion, .card--sci-fi{ border-top-color: var(--scifi); }
.card--friki{ border-top-color: var(--friki); }

.card:hover{
  transform: translateY(-3px);
  background: var(--bg-raised-hover);
}

.card__thumb{ aspect-ratio: 3/4; overflow: hidden; position: relative; }
.card__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.card__rating{
  position: absolute; bottom: 10px; right: 10px;
  width: 40px; height: 40px;
  transform: rotate(45deg);
  background: var(--bg);
  border: 1px solid var(--amber);
  display: flex; align-items: center; justify-content: center;
}
.card__rating span{
  transform: rotate(-45deg);
  font-family: var(--font-mono);
  color: var(--amber);
  font-size: 15px;
}

.card--adult .card__thumb img{ filter: blur(14px) brightness(.7); }
.card__adult-badge{
  position: absolute; top: 10px; left: 10px;
  background: var(--magenta);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .05em;
  padding: 2px 8px;
  z-index: 2;
}
.cat-pill--adult{ color: var(--magenta); border-color: var(--magenta); margin-left: 8px; }

.card__body{ padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__title{ font-size: 17px; line-height: 1.3; }
.card__title a:hover{ color: var(--phosphor); }
.card__excerpt{ color: var(--ink-dim); font-size: 15px; margin: 0; flex: 1; }
.card__meta{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 15px;
  display: flex; justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
}

/* ============================================================
   5. SINGLE POST — layout de dos columnas
   ============================================================ */
.single-tape{ padding: 48px 0 0; }
.single-tape__header{ max-width: 76ch; margin: 0 auto 40px; }
.single-tape__meta{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  margin-top: 12px;
  display: flex; gap: 18px; flex-wrap: wrap;
}
.single-tape__title{ font-size: clamp(28px, 4vw, 42px); }

.single-tape__layout{
  display: grid;
  grid-template-columns: 300px minmax(0,1fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 24px;
}
@media (max-width: 860px){
  .single-tape__layout{ grid-template-columns: 1fr; }
  .single-tape__sidebar{ order: -1; }
}

/* --- sidebar: póster + ficha técnica --- */
.single-tape__sidebar{
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
}
.poster-card{
  border: 1px solid var(--line);
  background: var(--bg-raised);
}
.poster-card__img{
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.poster-card__img img{ width: 100%; height: 100%; object-fit: cover; }
.poster-card__rating{
  position: absolute; bottom: 10px; right: 10px;
  text-align: center;
}
.poster-card__rating-diamond{
  width: 46px; height: 46px;
  transform: rotate(45deg);
  background: var(--bg);
  border: 1px solid var(--amber);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.poster-card__rating-diamond span{ transform: rotate(-45deg); color: var(--amber); font-family: var(--font-mono); font-size: 16px; }
.poster-card__rating-label{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(11,14,20,.85);
  padding: 2px 6px;
}

.poster-card__facts{
  padding: 16px 18px 18px;
  font-family: var(--font-mono);
  margin: 0;
}
.poster-card__facts dt{
  color: var(--ink-faint);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 12px;
}
.poster-card__facts dt:first-child{ margin-top: 0; }
.poster-card__facts dd{
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
}

.toc-card{
  margin-top: 16px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  padding: 16px 18px;
}
.toc-card__title{
  font-family: var(--font-mono);
  color: var(--phosphor);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  margin: 0 0 10px;
}
.toc-card ol{ counter-reset: toc; display: flex; flex-direction: column; gap: 8px; }
.toc-card li{ counter-increment: toc; }
.toc-card a{
  display: block;
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.35;
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
.toc-card a::before{
  content: counter(toc) ". ";
  color: var(--ink-faint);
  font-family: var(--font-mono);
}
.toc-card a:hover{ color: var(--ink); border-left-color: var(--ink-dim); }
.toc-card a.is-active{ color: var(--phosphor); border-left-color: var(--phosphor); }

/* --- columna principal --- */
.entry-content{ font-size: 19px; }
.entry-content h2{ font-size: 26px; margin-top: 2em; color: var(--ink); }
.entry-content h3{ font-size: 21px; margin-top: 1.6em; }
.entry-content blockquote{
  border-left: 3px solid var(--magenta);
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  color: var(--ink-dim);
  font-style: italic;
}
.entry-content a{ color: var(--phosphor); text-decoration: underline; text-underline-offset: 3px; }
.entry-content pre, .entry-content code{
  font-family: var(--font-mono);
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
.entry-content pre{ padding: 16px; overflow-x: auto; }

/* fotogramas — imágenes insertadas en el cuerpo del post.
   Tratadas como capturas de la película: marco con perforación
   de bobina arriba y abajo, pie de foto en VT323. */
.entry-content img{ width: 100%; }
.entry-content figure.wp-block-image,
.entry-content figure.wp-block-gallery{
  position: relative;
  margin: 2.4em 0;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 14px 0 10px;
}
.entry-content figure.wp-block-image::before,
.entry-content figure.wp-block-image::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 8px;
  background-image: repeating-linear-gradient(
    to right, var(--ink-faint) 0 5px, transparent 5px 15px
  );
  opacity: .3;
}
.entry-content figure.wp-block-image::before{ top: 3px; }
.entry-content figure.wp-block-image::after{ bottom: 3px; }
.entry-content figure.wp-block-image img{ display: block; cursor: zoom-in; }
.entry-content figcaption{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  text-align: center;
  font-size: 14px;
  letter-spacing: .03em;
  margin-top: 10px;
  text-transform: uppercase;
}
.entry-content figcaption::before{ content: "▣ "; color: var(--phosphor); }

.entry-footer{
  margin: 40px 0 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; gap: 10px; flex-wrap: wrap;
}
.entry-footer .tag{
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 3px 10px;
}
.entry-footer .tag:hover{ color: var(--phosphor); border-color: var(--phosphor); }

/* ============================================================
   7. PAGINATION / ARCHIVE / SEARCH / 404
   ============================================================ */
.pagination{
  display: flex; justify-content: center; gap: 10px;
  padding: 24px 0 64px;
  font-family: var(--font-mono);
}
.pagination a, .pagination span{
  border: 1px solid var(--line);
  padding: 8px 14px;
  color: var(--ink-dim);
}
.pagination a:hover{ color: var(--phosphor); border-color: var(--phosphor); }
.pagination .current{ color: var(--bg); background: var(--phosphor); border-color: var(--phosphor); }

.post-navigation{ padding: 32px 0 56px; }
.post-navigation .nav-links{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px){
  .post-navigation .nav-links{ grid-template-columns: 1fr; }
}
.post-navigation .nav-previous,
.post-navigation .nav-next{
  border: 1px solid var(--line);
  padding: 14px 16px;
}
.post-navigation .nav-next{ text-align: right; }
.post-navigation a{ display: block; }
.post-navigation a:hover{ border-color: var(--phosphor); }
.post-navigation a:hover .nav-subtitle{ color: var(--phosphor); }
.post-navigation .nav-subtitle{
  display: block;
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.archive-header, .page-header{
  padding: 48px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.archive-header h1, .page-header h1{ font-size: clamp(26px,4vw,38px); }
.archive-header .desc{ color: var(--ink-dim); margin-top: 8px; }

.search-form{ display: flex; gap: 0; max-width: 420px; }
.search-form input[type="search"]{
  flex: 1;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  font-family: var(--font-body);
}
.search-form button{
  background: var(--phosphor);
  border: 1px solid var(--phosphor);
  color: var(--bg);
  font-family: var(--font-mono);
  padding: 0 18px;
  cursor: pointer;
}

.error-404{ padding: 80px 0; text-align: center; }
.error-404 .code{
  font-family: var(--font-mono);
  color: var(--magenta);
  font-size: 22px;
}
.error-404 h1{ font-size: clamp(40px,8vw,90px); margin: 8px 0 20px; }

/* ============================================================
   8. COMMENTS
   ============================================================ */
.comments-area{ max-width: 72ch; margin: 56px auto 0; }
.comments-title{ font-size: 22px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.comment-list{ margin-top: 24px; }
.comment-body{
  border: 1px solid var(--line);
  background: var(--bg-raised);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.comment-meta{ font-family: var(--font-mono); color: var(--ink-faint); font-size: 14px; margin-bottom: 6px; }
.comment-form input, .comment-form textarea{
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  font-family: var(--font-body);
  margin-bottom: 14px;
}
.comment-form label{ display:block; font-family: var(--font-mono); color: var(--ink-dim); margin-bottom: 4px; }
.comment-form .submit{
  background: var(--phosphor);
  border: 1px solid var(--phosphor);
  color: var(--bg);
  font-family: var(--font-mono);
  padding: 10px 20px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============================================================
   9. SIDEBAR / WIDGETS (footer)
   ============================================================ */
.widget{ margin-bottom: 32px; }
.widget-title{
  font-family: var(--font-mono);
  color: var(--phosphor);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 17px;
  margin-bottom: 14px;
}
.widget ul li{ margin-bottom: 8px; color: var(--ink-dim); }
.widget a:hover{ color: var(--phosphor); }

/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 48px 0 28px;
  margin-top: 40px;
}
.footer-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 32px;
  padding-bottom: 32px;
}
.footer-bar{
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 15px;
}
.footer-bar .rec{ color: var(--magenta); }
.footer-bar .rec .dot{
  display:inline-block; width:7px;height:7px;border-radius:50%;
  background: var(--magenta); margin-right: 6px;
  animation: blink 1.6s steps(1) infinite;
}

/* ============================================================
   12. FICHA DE PERSONA (director/a, actor/actriz)
   ============================================================ */
.person-hero{
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  gap: 36px;
  padding: 48px 0 12px;
  align-items: start;
}
@media (max-width: 720px){
  .person-hero{ grid-template-columns: 1fr; }
}
.person-hero__photo{
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-raised);
}
.person-hero__photo img{ width: 100%; height: 100%; object-fit: cover; }
.person-hero__eyebrow{
  font-family: var(--font-mono);
  color: var(--phosphor);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 15px;
  margin-bottom: 6px;
}
.person-hero__info h1{ font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 8px; }
.person-hero__meta{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.person-hero__bio{ color: var(--ink-dim); max-width: 62ch; }
.person-hero__count{
  font-family: var(--font-mono);
  color: var(--phosphor);
  font-size: 15px;
  margin-top: 10px;
}

/* ============================================================
   13. GATE DE EDAD (+18)
   ============================================================ */
.age-gate{
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(11,14,20,.94);
  backdrop-filter: blur(4px);
}
.age-gate[hidden]{ display: none; }
.age-gate__modal{
  max-width: 420px;
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--magenta);
  padding: 32px 28px;
  text-align: center;
}
.age-gate__badge{
  display: inline-block;
  font-family: var(--font-mono);
  color: #fff;
  background: var(--magenta);
  padding: 4px 12px;
  margin-bottom: 14px;
  letter-spacing: .05em;
}
.age-gate__modal h2{ font-size: 22px; margin-bottom: 10px; }
.age-gate__modal p{ color: var(--ink-dim); font-size: 15px; }
.age-gate__form{ margin-top: 20px; text-align: left; }
.age-gate__form label{
  display: block;
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 14px;
  margin-bottom: 6px;
}
.age-gate__form input[type="date"]{
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  font-family: var(--font-body);
  margin-bottom: 14px;
}
.age-gate__form button{
  width: 100%;
  background: var(--magenta);
  border: 1px solid var(--magenta);
  color: #fff;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 11px;
  cursor: pointer;
}
.age-gate__form button:hover{ filter: brightness(1.1); }
.age-gate__error{ color: var(--magenta) !important; margin-top: 10px; text-align: center; }
.age-gate__exit{
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 14px;
}
.age-gate__exit:hover{ color: var(--ink-dim); }

/* contenido bloqueado detrás del gate, hasta verificar */
.single-tape__layout.is-age-gated{ filter: blur(24px); pointer-events: none; user-select: none; }
.single-tape__layout.is-age-gated.is-age-verified{ filter: none; pointer-events: auto; user-select: auto; }

/* ============================================================
   15. COMPARTIR RECIBO
   ============================================================ */
.share-tape{
  display: block;
  width: 100%;
  margin-top: 12px;
  background: var(--bg-raised);
  border: 1px dashed var(--line);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 9px;
  cursor: pointer;
}
.share-tape:hover{ color: var(--phosphor); border-color: var(--phosphor); }

.receipt-modal{
  position: fixed; inset: 0; z-index: 9600;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(11,14,20,.92);
  backdrop-filter: blur(3px);
}
.receipt-modal__box{
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 20px;
  max-width: 340px;
  width: 100%;
  text-align: center;
}
.receipt-modal__box canvas{ max-width: 100%; border: 1px solid var(--line); margin-bottom: 16px; }
.receipt-modal__actions{ display: flex; gap: 10px; }
.receipt-modal__actions button, .receipt-modal__actions a{
  flex: 1;
  font-family: var(--font-mono);
  padding: 9px;
  border: 1px solid var(--phosphor);
  color: var(--phosphor);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
}
.receipt-modal__actions button:hover, .receipt-modal__actions a:hover{ background: var(--phosphor); color: var(--bg); }
.receipt-modal__close{
  display: block;
  margin: 14px auto 0;
  font-family: var(--font-mono);
  color: var(--ink-faint);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 14px;
}

/* ============================================================
   16. MODO MARATÓN
   ============================================================ */
.marathon{
  margin: 32px 0;
  border: 1px solid var(--phosphor);
  padding: 16px 18px;
  background: rgba(141,255,160,.05);
}
.marathon__label{
  font-family: var(--font-mono);
  color: var(--phosphor);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 8px;
}
.marathon__next{ font-size: 17px; }
.marathon__next:hover strong{ color: var(--phosphor); }
.marathon__done{ color: var(--ink-dim); margin: 0; }

/* ============================================================
   17. CATÁLOGO CON FILTROS
   ============================================================ */
.catalog-filters{
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 20px;
  padding: 8px 0 32px;
}
.catalog-filters__group{ display: flex; flex-direction: column; gap: 6px; }
.catalog-filters__group label{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.catalog-filters__group select{
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 10px;
  font-family: var(--font-body);
  min-width: 160px;
}
.catalog-filters__reset{
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  padding: 8px 14px;
  cursor: pointer;
  height: fit-content;
}
.catalog-filters__reset:hover{ color: var(--phosphor); border-color: var(--phosphor); }
.catalog-filters__count{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 14px;
  margin: 0 0 0 auto;
}
.catalog-loadmore{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 0 8px;
}
.catalog-loadmore__btn{
  background: var(--bg-raised);
  border: 1px solid var(--phosphor);
  color: var(--phosphor);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 28px;
  cursor: pointer;
}
.catalog-loadmore__btn:hover{ background: var(--phosphor); color: var(--bg); }
.catalog-loadmore__btn[hidden]{ display: none; }
.catalog-loadmore__loading{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 15px;
}
.catalog-loadmore__loading[hidden]{ display: none; }

/* ============================================================
   18. QUIZ "¿QUÉ VEO HOY?"
   ============================================================ */
.quiz{ padding: 16px 0 64px; max-width: 640px; }
.quiz__group{
  border: 1px solid var(--line);
  padding: 16px 18px 20px;
  margin-bottom: 20px;
}
.quiz__group legend{
  font-family: var(--font-mono);
  color: var(--phosphor);
  padding: 0 6px;
  font-size: 16px;
}
.quiz__option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
}
.quiz__option input{ accent-color: var(--phosphor); }
.quiz__submit{
  width: 100%;
  background: var(--phosphor);
  border: 1px solid var(--phosphor);
  color: var(--bg);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px;
  font-size: 17px;
  cursor: pointer;
}
.quiz__submit:hover{ filter: brightness(1.08); }
.quiz__note{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 14px;
  margin-top: 12px;
}

/* ============================================================
   19. MODO GRINDHOUSE
   ============================================================ */
.grindhouse-toggle{
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 16px;
  padding: 6px 12px;
  cursor: pointer;
}
.grindhouse-toggle:hover{ color: var(--ink); }
.grindhouse-toggle[aria-pressed="true"]{ color: var(--amber); border-color: var(--amber); }

body.grindhouse::after{
  content: "";
  position: fixed; inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 4px);
  animation: grindhouse-jitter 220ms steps(2) infinite;
}
body.grindhouse::before{
  content: "";
  position: fixed; inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
@keyframes grindhouse-jitter{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(-1px,1px); }
  100%{ transform: translate(1px,-1px); }
}
@media (prefers-reduced-motion: reduce){
  body.grindhouse::after{ animation: none; }
}

/* ============================================================
   21. BREADCRUMBS
   ============================================================ */
.breadcrumbs{ padding: 18px 0 0; }
.breadcrumbs ol{ display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li{
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-faint);
}
.breadcrumbs li:not(:last-child)::after{ content: "»"; margin-left: 6px; color: var(--ink-faint); }
.breadcrumbs a{ color: var(--ink-dim); }
.breadcrumbs a:hover{ color: var(--phosphor); }
.breadcrumbs [aria-current="page"]{ color: var(--phosphor); }

/* ============================================================
   22. LIGHTBOX DE FOTOGRAMAS
   ============================================================ */
.lightbox{
  position: fixed; inset: 0; z-index: 9700;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px;
  background: rgba(11,14,20,.96);
}
.lightbox__img{ max-width: min(900px, 100%); max-height: 72vh; object-fit: contain; border: 1px solid var(--line); }
.lightbox__caption{
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 15px;
  margin-top: 16px;
  text-align: center;
  max-width: 70ch;
}
.lightbox__close{
  position: absolute; top: 20px; right: 24px;
  background: none; border: 1px solid var(--line);
  color: var(--ink); font-family: var(--font-mono);
  font-size: 20px; line-height: 1;
  width: 40px; height: 40px;
  cursor: pointer;
}
.lightbox__close:hover{ border-color: var(--phosphor); color: var(--phosphor); }
.lightbox__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 1px solid var(--line);
  color: var(--ink); font-family: var(--font-mono);
  font-size: 22px;
  width: 44px; height: 44px;
  cursor: pointer;
}
.lightbox__nav:hover{ border-color: var(--phosphor); color: var(--phosphor); }
.lightbox__nav--prev{ left: 20px; }
.lightbox__nav--next{ right: 20px; }
.lightbox__count{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 13px;
  margin-top: 8px;
}
@media (max-width: 640px){
  .lightbox__nav{ width: 36px; height: 36px; font-size: 18px; }
  .lightbox__nav--prev{ left: 8px; }
  .lightbox__nav--next{ right: 8px; }
}

/* ============================================================
   23. 404 — ACCIONES
   ============================================================ */
.error-404__actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}
.random-tape--404{
  border: 1px solid var(--phosphor) !important;
  color: var(--phosphor) !important;
  padding: 10px 20px !important;
  font-size: 17px !important;
}
.random-tape--404:hover{ background: var(--phosphor); color: var(--bg) !important; }

/* ============================================================
   24. ESTADÍSTICAS DEL VIDEOCLUB
   ============================================================ */
.stats-summary{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  padding: 8px 0 40px;
}
.stats-summary__item{
  border: 1px solid var(--line);
  background: var(--bg-raised);
  padding: 18px;
  text-align: center;
}
.stats-summary__value{
  font-family: var(--font-mono);
  color: var(--phosphor);
  font-size: 32px;
  display: block;
}
.stats-summary__label{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.stat-block{ padding-bottom: 44px; }
.stat-block h2{
  font-size: 20px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.stat-bars{ display: flex; flex-direction: column; gap: 10px; }
.stat-bar__row{ display: grid; grid-template-columns: 140px 1fr 50px; align-items: center; gap: 12px; }
.stat-bar__label{
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-bar__track{ background: var(--bg-raised); border: 1px solid var(--line); height: 18px; position: relative; }
.stat-bar__fill{ height: 100%; background: var(--phosphor); }
.stat-bar__count{
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 14px;
  text-align: right;
}

/* ============================================================
   25. MOTION / A11Y
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ============================================================
   26. IMPRESIÓN — solo el texto y la portada, sin la interfaz
   ============================================================ */
@media print{
  .site-header, .primary-nav, .skip-link, .breadcrumbs,
  .save-tape, .share-tape, .trailer, .age-gate, .content-warning,
  .poster-card__sagas, .toc-card,
  .catalog-filters, .catalog-loadmore,
  .site-footer, .post-navigation, .comments-area,
  .shelf--related, .lightbox, .noise-overlay, .receipt-modal,
  body.grindhouse::before, body.grindhouse::after, body::before{
    display: none !important;
  }
  body{ background: #fff; color: #000; }
  .single-tape__layout{
    display: block !important;
    filter: none !important;
    pointer-events: auto !important;
  }
  .single-tape__sidebar{ position: static; max-height: none; overflow: visible; margin-bottom: 20px; }
  .poster-card{ border: 1px solid #000; background: #fff; max-width: 260px; }
  .poster-card__facts dt{ color: #555; }
  .poster-card__facts dd{ color: #000; }
  .entry-content{ color: #000; font-size: 12pt; }
  .entry-content a{ color: #000; text-decoration: underline; }
}