/* ============================================================
   AGENDA MUTANTE — hoja de estilos
   Paleta:
     --tinta      #0b0c0a  negro tinta de cómic
     --sangre     #b8121f  rojo sangre (título, acentos)
     --sangre-luz #e8462f  rojo más vivo (hover, goteo)
     --hueso      #e9e2cf  hueso / papel viejo (texto sobre oscuro)
     --toxico     #5c7a34  verde tóxico (uniformes, mutación)
     --noche      #1f3a3f  teal noche (escenas nocturnas)
     --mostaza    #dba832  mostaza aviso (etiquetas, bordes)
   Tipos:
     display goteo: 'Nosifer' (sólo el titular principal)
     display cómic: 'Bangers' (rótulos, números de página, onomatopeyas)
     utilitaria:    'Oswald' (navegación, etiquetas)
     lectura:       'Inter' (párrafos)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nosifer&family=Bangers&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --tinta: #0b0c0a;
  --tinta-panel: #131411;
  --sangre: #b8121f;
  --sangre-luz: #e8462f;
  --hueso: #e9e2cf;
  --hueso-op: #cdc6b2;
  --toxico: #5c7a34;
  --toxico-luz: #7fa04a;
  --noche: #1f3a3f;
  --mostaza: #dba832;
  --borde: 3px solid var(--tinta);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--tinta);
  color: var(--hueso);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* textura halftone de fondo, como los estallidos del cómic */
.halftone-bg{
  position:relative;
}
.halftone-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(var(--hueso-op) 1px, transparent 1.4px);
  background-size: 14px 14px;
  opacity:.05;
  pointer-events:none;
}

a{ color: inherit; }

/* ---------- barra superior ---------- */
.topbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: .8rem 1.4rem;
  background: var(--tinta);
  border-bottom: var(--borde);
}
.topbar__brand{
  font-family:'Bangers', cursive;
  letter-spacing: .06em;
  font-size: 1.3rem;
  color: var(--hueso);
  text-decoration:none;
  display:flex; align-items:center; gap:.5rem;
}
.topbar__brand span{ color: var(--sangre-luz); }
.topbar nav{ display:flex; gap:1.2rem; font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:.85rem; letter-spacing:.05em;}
.topbar nav a{ text-decoration:none; color: var(--hueso-op); border-bottom:2px solid transparent; padding-bottom:2px; transition:.2s;}
.topbar nav a:hover{ color: var(--mostaza); border-color: var(--mostaza); }

/* ---------- hero / portada ---------- */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
  overflow:hidden;
  background: #000;
}
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: top center;
  opacity:.55;
  filter: saturate(1.05);
}
.hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,12,10,.15) 0%, rgba(11,12,10,.55) 55%, rgba(11,12,10,.97) 100%);
}
.hero__content{
  position:relative; z-index:2;
  padding: 3.5rem 1.5rem 3rem;
  max-width: 900px;
}
.hero__title{
  font-family:'Nosifer', cursive;
  color: var(--sangre-luz);
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  line-height:1;
  margin: 0;
  text-shadow: 0 0 18px rgba(184,18,31,.55), 3px 3px 0 #000;
}
.hero__subtitle{
  font-family:'Bangers', cursive;
  letter-spacing:.08em;
  color: var(--hueso);
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  margin:.4rem 0 1.2rem;
}
.hero__tagline{
  font-family:'Oswald', sans-serif;
  color: var(--mostaza);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.85rem;
  margin-bottom:1.8rem;
}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Oswald', sans-serif;
  text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; font-size:1rem;
  color: var(--tinta);
  background: var(--sangre-luz);
  border: 3px solid var(--tinta);
  padding: .85rem 1.7rem;
  text-decoration:none;
  box-shadow: 5px 5px 0 var(--tinta);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover{ transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--tinta); }
.btn--ghost{
  background:transparent; color:var(--hueso); border-color: var(--hueso-op);
  box-shadow: 5px 5px 0 rgba(233,226,207,.25);
}

/* ---------- cinta de aviso (divisor firma) ---------- */
.cinta{
  background: repeating-linear-gradient(45deg, var(--mostaza), var(--mostaza) 22px, var(--tinta) 22px, var(--tinta) 44px);
  color: var(--tinta);
  font-family:'Oswald', sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.15em;
  font-size:.75rem;
  padding:.55rem 0;
  border-top: var(--borde); border-bottom: var(--borde);
  overflow:hidden;
  white-space:nowrap;
}
.cinta__track{
  display:inline-block;
  animation: cinta-scroll 26s linear infinite;
}
.cinta span{ margin:0 1.4rem; background:var(--tinta); color:var(--mostaza); padding:.1rem .6rem;}
@keyframes cinta-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .cinta__track{ animation:none; }
}

/* ---------- expediente / sinopsis ---------- */
.expediente{
  max-width: 920px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.expediente__eyebrow{
  font-family:'Bangers', cursive;
  color: var(--sangre-luz);
  font-size:1.1rem; letter-spacing:.08em;
  margin:0 0 .6rem;
}
.panel{
  background: var(--tinta-panel);
  border: var(--borde);
  padding: 1.6rem 1.8rem;
  box-shadow: 7px 7px 0 rgba(184,18,31,.25);
  margin-bottom:1.6rem;
}
.panel p{ line-height:1.75; color: var(--hueso-op); font-size:1.02rem; margin:0 0 1rem;}
.panel p:last-child{ margin-bottom:0; }
.panel strong{ color: var(--mostaza); }

.datos-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:1rem; margin-top:1.6rem;
}
.dato{
  border-left: 4px solid var(--toxico-luz);
  padding: .4rem 0 .4rem .9rem;
}
.dato__label{ font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; color: var(--toxico-luz);}
.dato__valor{ font-family:'Bangers', cursive; font-size:1.15rem; color:var(--hueso);}

/* ---------- galería de miniaturas ---------- */
.galeria-section{ padding: 1rem 1.5rem 4.5rem; max-width:1200px; margin:0 auto; }
.galeria-section__head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-bottom:1.6rem;}
.galeria-section__head h2{ font-family:'Bangers', cursive; color:var(--hueso); letter-spacing:.05em; font-size:1.6rem; margin:0;}
.galeria-section__head a{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em; color:var(--mostaza); text-decoration:none;}
.galeria{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.galeria__item{
  position:relative;
  border: 3px solid var(--tinta);
  outline: 1px solid #2c2d28;
  overflow:hidden;
  aspect-ratio: 3/4;
  background:#111;
  text-decoration:none;
  display:block;
}
.galeria__item img{ width:100%; height:100%; object-fit:cover; display:block; filter: grayscale(.15); transition: transform .35s, filter .35s;}
.galeria__item:hover img{ transform: scale(1.06); filter:none; }
.galeria__num{
  position:absolute; top:0; left:0;
  background: var(--sangre-luz);
  color:#fff; font-family:'Bangers', cursive;
  font-size:.85rem; padding:.15rem .5rem;
  box-shadow: 2px 2px 0 var(--tinta);
}

/* ---------- footer ---------- */
footer{
  border-top: var(--borde);
  padding: 2rem 1.5rem;
  text-align:center;
  font-family:'Oswald', sans-serif;
  color: var(--hueso-op);
  font-size:.85rem;
  letter-spacing:.03em;
}
footer .firma{ color: var(--mostaza); }

/* ============================================================
   LECTOR (comic.html)
   ============================================================ */
.lector{
  max-width: 880px;
  margin: 0 auto;
  padding: 1.6rem 1rem 5rem;
}
.lector__intro{
  text-align:center;
  padding: 1.6rem 0 2.2rem;
}
.lector__intro h1{
  font-family:'Nosifer', cursive;
  color: var(--sangre-luz);
  font-size: clamp(1.8rem,6vw,3rem);
  margin:0 0 .3rem;
  text-shadow: 2px 2px 0 #000;
}
.lector__intro p{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  color: var(--mostaza);
  font-size:.85rem;
  margin:0;
}
.pagina-comic{
  margin: 0 0 1.4rem;
  border: 3px solid var(--tinta);
  outline: 1px solid #2c2d28;
  background:#0e0e0c;
  position:relative;
}
.pagina-comic img{
  display:block; width:100%; height:auto;
}
.pagina-comic__tag{
  position:absolute; top:10px; left:10px;
  background: var(--tinta);
  border: 2px solid var(--sangre-luz);
  color: var(--hueso);
  font-family:'Bangers', cursive;
  font-size:.85rem;
  padding:.15rem .55rem;
}
#estado-carga{
  text-align:center;
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  color: var(--hueso-op);
  padding: 2rem 0;
}
.fin-comic{
  text-align:center;
  padding: 2.4rem 1rem;
  border: var(--borde);
  background: var(--tinta-panel);
  font-family:'Bangers', cursive;
  color: var(--sangre-luz);
  font-size:1.3rem;
}
.fin-comic p{
  font-family:'Oswald', sans-serif;
  color: var(--hueso-op);
  text-transform:none;
  letter-spacing:0;
  font-size:.9rem;
  margin-top:.6rem;
}

/* barra de progreso de lectura */
.progreso{
  position: fixed; top:0; left:0; height:4px;
  background: var(--sangre-luz);
  z-index: 60;
  width:0%;
  transition: width .1s linear;
}

@media (max-width: 560px){
  .topbar nav{ gap:.7rem; font-size:.72rem;}
  .expediente{ padding: 2.6rem 1.1rem; }
  .panel{ padding: 1.2rem 1.2rem; }
}