/* =====================================================
   BADLANDS — estilos principales
   ===================================================== */
:root{
  --rojo-oscuro:#3d0505;
  --rojo-mas-oscuro:#2a0303;
  --rojo:#a31515;
  --rojo-vivo:#d92323;
  --sangre:#7a0d0d;
  --sangre-brillo:#c01414;
  --negro:#0e0e0e;
  --papel:#efe8d8;
  --papel-viejo:#e2d5b8;
  --blanco:#f5f2ec;
  --alto-cabecera:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--rojo-oscuro) 0%,var(--rojo) 55%,var(--rojo-vivo) 100%);
  background-attachment:fixed;
  font-family:'Special Elite','Courier Prime',monospace;
  color:var(--negro);
  overflow-x:hidden;
}
/* grano */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1px);
  background-size:5px 5px;opacity:.22;mix-blend-mode:multiply;
}
.vineta{position:fixed;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 24vmin rgba(0,0,0,.7)}

/* =====================================================
   CABECERA (de aquí gotea la sangre)
   ===================================================== */
.cabecera{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(var(--rojo-mas-oscuro),var(--rojo-oscuro));
  box-shadow:0 4px 18px rgba(0,0,0,.55);
}
.nav-principal{
  max-width:1460px;margin:0 auto;
  min-height:var(--alto-cabecera);
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
  padding:0 18px;
}
.logo{
  font-family:'Anton',sans-serif;
  font-size:1.5rem;letter-spacing:.06em;
  color:var(--blanco);text-decoration:none;
  text-shadow:2px 2px 0 var(--sangre-brillo);
  transform:rotate(-1.5deg);
  flex-shrink:0;
}
.logo span{color:var(--rojo-vivo);text-shadow:2px 2px 0 rgba(0,0,0,.8)}
.logo:hover{animation:sacudida .35s ease}

.menu{
  list-style:none;display:flex;flex-wrap:nowrap;
  margin-left:auto;gap:0;
}
.menu a{
  position:relative;display:block;white-space:nowrap;
  padding:.55em .75em;
  font-family:'Courier Prime',monospace;font-weight:700;
  font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--papel);text-decoration:none;
  transition:color .2s;
  z-index:0;
}
/* mancha roja que barre el botón */
.menu a::before{
  content:"";position:absolute;inset:4px 0;z-index:-1;
  background:var(--rojo-vivo);
  transform:scaleX(0) skewX(-14deg);
  transform-origin:left center;
  transition:transform .22s cubic-bezier(.3,1.2,.4,1);
  box-shadow:2px 3px 0 rgba(0,0,0,.5);
}
.menu a:hover::before,.menu a:focus-visible::before{transform:scaleX(1) skewX(-14deg)}
.menu a:hover,.menu a:focus-visible{color:#fff;animation:sacudida .3s ease}
/* gota que cae del botón al pasar el ratón */
.menu a::after{
  content:"";position:absolute;left:50%;top:calc(100% - 6px);
  width:7px;height:9px;margin-left:-3px;
  background:var(--sangre-brillo);
  border-radius:50% 50% 55% 55% / 40% 40% 60% 60%;
  opacity:0;pointer-events:none;
}
.menu a:hover::after{animation:gota-boton .55s ease-in forwards}
@keyframes gota-boton{
  0%{opacity:0;transform:translateY(0) scale(.5)}
  25%{opacity:1;transform:translateY(2px) scale(1)}
  100%{opacity:0;transform:translateY(20px) scale(1,1.3)}
}
@keyframes sacudida{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-1px,1px) rotate(-1deg)}
  50%{transform:translate(1px,-1px) rotate(1deg)}
  75%{transform:translate(-1px,0) rotate(0)}
}
/* sección activa: subrayado de sangre fijo */
.menu a.activo{color:#fff}
.menu a.activo::before{transform:scaleX(1) skewX(-14deg);background:var(--sangre)}

/* hamburguesa (móvil) */
.hamburguesa{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px}
.hamburguesa span{display:block;width:26px;height:3px;background:var(--papel);margin:5px 0;
  transition:transform .25s,opacity .25s;border-radius:2px}
.nav-abierta .hamburguesa span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-abierta .hamburguesa span:nth-child(2){opacity:0}
.nav-abierta .hamburguesa span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:960px){
  .hamburguesa{display:block}
  .menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--rojo-mas-oscuro);
    box-shadow:0 14px 24px rgba(0,0,0,.55);
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-abierta .menu{max-height:420px}
  .menu a{padding:.9em 22px;font-size:.9rem}
  .menu a::after{display:none}
}

/* ===== sangre goteando de la cabecera =====
   Capa fija recortada al viewport: las gotas nunca alargan el documento
   (asi la barra de scroll no aparece y desaparece). */
.sangre-cabecera{position:fixed;top:var(--alto-cabecera);left:0;right:0;bottom:0;
  overflow:hidden;pointer-events:none;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));z-index:-1}
.chorro{
  position:absolute;top:0;width:20px;
  background:linear-gradient(var(--rojo-oscuro) 20%,var(--sangre) 60%,var(--sangre-brillo));
  border-radius:0 0 12px 12px;
  transform-origin:top center;
  animation:estira 6s ease-in-out infinite;
}
.chorro::after{
  content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:13px;
  transform:translateX(-50%);
  background:var(--sangre-brillo);
  border-radius:50% 50% 55% 55% / 40% 40% 60% 60%;
  animation:cae 6s ease-in infinite;animation-delay:inherit;opacity:0;
}
@keyframes estira{
  0%,100%{height:var(--h)}
  45%{height:calc(var(--h) * 1.35)}
  55%{height:calc(var(--h) * 1.3)}
}
@keyframes cae{
  0%,40%{opacity:0;transform:translate(-50%,0) scale(.6)}
  50%{opacity:1;transform:translate(-50%,0) scale(1)}
  95%{opacity:1;transform:translate(-50%,80vh) scale(1,1.25)}
  100%{opacity:0;transform:translate(-50%,82vh) scale(1.6,.4)}
}

/* =====================================================
   CONTENIDO
   ===================================================== */
.contenido{position:relative;z-index:2;flex:1;width:100%;max-width:1100px;
  margin:0 auto;padding:10vh 20px 80px;
  display:flex;flex-direction:column;align-items:center;text-align:center}

/* letras recortadas */
.ransom{display:flex;flex-wrap:nowrap;white-space:nowrap;justify-content:center;gap:.08em;line-height:1}
.ransom span{
  display:inline-block;padding:.08em .14em;
  box-shadow:2px 3px 6px rgba(0,0,0,.45);position:relative;
  opacity:0;
  animation:entra .55s cubic-bezier(.2,1.4,.4,1) forwards, temblor 6s ease-in-out infinite;
  animation-delay:var(--d), calc(var(--d) + .6s);
}
.ransom span.espacio{background:none!important;box-shadow:none;width:.45em;padding:0;animation:none;opacity:1}
@keyframes entra{
  0%{opacity:0;transform:translateY(-90px) rotate(calc(var(--rot) * 4)) scale(1.4)}
  70%{opacity:1;transform:translateY(6px) rotate(var(--rot)) scale(.96)}
  100%{opacity:1;transform:translateY(var(--ty)) rotate(var(--rot)) scale(1)}
}
@keyframes temblor{
  0%,100%{transform:translateY(var(--ty)) rotate(var(--rot))}
  50%{transform:translateY(calc(var(--ty) - 3px)) rotate(calc(var(--rot) + 1deg))}
}
.v0{font-family:'Anton',sans-serif;background:var(--negro);color:var(--blanco)}
.v1{font-family:'Playfair Display',serif;font-style:italic;background:var(--papel);color:var(--negro)}
.v2{font-family:'Bebas Neue',sans-serif;background:var(--rojo-vivo);color:var(--blanco)}
.v3{font-family:'Courier Prime',monospace;font-weight:700;background:var(--blanco);color:var(--rojo-oscuro)}
.v4{font-family:'Anton',sans-serif;background:var(--papel-viejo);color:var(--negro)}
.v5{font-family:'Bebas Neue',sans-serif;background:var(--negro);color:var(--rojo-vivo)}

/* portada */
.portada{display:flex;flex-direction:column;align-items:center;margin-top:6vh}
.titulo{font-size:clamp(2.1rem,8.6vw,7rem)}
.subtitulo{
  margin-top:5vh;
  font-size:clamp(.85rem,2.4vw,1.15rem);
  letter-spacing:.35em;text-transform:uppercase;
  color:var(--papel);text-shadow:1px 2px 3px rgba(0,0,0,.6);
  opacity:0;animation:aparece 1s ease .9s forwards;
}
@keyframes aparece{to{opacity:1}}

/* secciones pendientes */
.seccion-pendiente{margin-top:8vh;display:flex;flex-direction:column;align-items:center;gap:7vh}
.titulo-seccion{font-size:clamp(1.6rem,6vw,4rem)}
.proximamente-mini{font-size:clamp(1rem,3.4vw,1.8rem)}
@media (max-width:600px){
  .titulo-seccion,.proximamente-mini{flex-wrap:wrap;white-space:normal}
}

/* =====================================================
   PERIÓDICO "GUÍA" — esquina inferior izquierda
   ===================================================== */
.periodico-mini{
  position:fixed;left:18px;bottom:18px;z-index:70;
  width:120px;height:96px;
  background:none;border:0;cursor:pointer;padding:0;
  filter:drop-shadow(4px 8px 12px rgba(0,0,0,.55));
  transition:transform .22s cubic-bezier(.3,1.4,.4,1);
}
.periodico-mini:hover,.periodico-mini:focus-visible{transform:translateY(-6px) rotate(-2deg) scale(1.05)}
.periodico-mini .hoja{position:absolute;inset:0;background:var(--papel);border:1px solid rgba(0,0,0,.25)}
.periodico-mini .h3{transform:rotate(-5deg);background:var(--papel-viejo)}
.periodico-mini .h2{transform:rotate(3deg);background:#e8dfc8}
.periodico-mini .h1{
  transform:rotate(-1deg);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:8px 6px;overflow:hidden;
}
.cabecera-mini{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:.5rem;letter-spacing:.04em;color:#333;
  border-bottom:1px solid #333;width:100%;text-align:center;padding-bottom:2px;
}
.titular-mini{
  font-family:'Anton',sans-serif;font-size:1.5rem;letter-spacing:.1em;
  color:var(--negro);margin-top:4px;
}
.lineas-mini{
  width:86%;height:26px;margin-top:5px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 6px);
  opacity:.5;
}

/* ===== modal del periódico desplegado ===== */
.modal-guia{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.modal-guia[hidden]{display:none}
.fondo-modal{position:absolute;inset:0;background:rgba(10,0,0,.72);backdrop-filter:blur(3px);cursor:pointer;
  animation:aparece .25s ease}
.periodico-grande{
  position:relative;
  width:85vw;height:85vh;
  background:var(--papel);
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  transform-origin:bottom left;
  animation:despliega .45s cubic-bezier(.25,1.3,.4,1);
  display:flex;flex-direction:column;
  clip-path:polygon(0.6% 1.5%,7% 0%,15% 1.2%,24% 0%,33% 1.5%,42% .3%,51% 1.4%,60% 0%,69% 1.3%,78% .2%,87% 1.5%,94% .3%,99.4% 1.6%,100% 10%,99% 22%,100% 35%,99% 48%,100% 61%,99% 74%,100% 87%,99.3% 98%,93% 100%,84% 98.6%,74% 100%,63% 98.5%,52% 100%,41% 98.6%,30% 100%,19% 98.5%,9% 100%,1% 98.4%,0% 88%,1% 74%,0% 60%,1% 46%,0% 32%,1% 18%);
  /* líneas tenues de papel */
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(0,0,0,.045) 27px 28px);
}
@keyframes despliega{
  0%{transform:scale(.12) rotate(-6deg);opacity:0}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.cerrar-guia{
  position:absolute;top:10px;right:14px;z-index:2;
  width:42px;height:42px;
  background:var(--negro);color:var(--papel);
  border:2px solid var(--papel);border-radius:6px;
  font-size:1.5rem;line-height:1;cursor:pointer;
  font-family:'Courier Prime',monospace;font-weight:700;
  box-shadow:3px 4px 0 rgba(0,0,0,.4);
}
.cerrar-guia:hover{background:var(--rojo-vivo);animation:sacudida .3s ease}

.cabecera-periodico{padding:26px 40px 0;text-align:center;flex-shrink:0}
.fecha-periodico{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:.75rem;letter-spacing:.15em;color:#555;
  display:block;margin-bottom:8px;
}
.cabecera-periodico h2{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.3rem,3.6vw,2.4rem);
  letter-spacing:.08em;color:var(--negro);
}
.filete{display:block;height:4px;margin:14px auto 0;max-width:640px;
  border-top:3px double #333;border-bottom:1px solid #333}

.cuerpo-periodico{
  flex:1;overflow-y:auto;
  padding:24px 44px 40px;
  text-align:left;
  font-family:'Special Elite','Courier Prime',monospace;
  font-size:clamp(.9rem,1.7vw,1.05rem);
  line-height:1.85;color:#1c1c1c;
  column-gap:44px;
}
@media (min-width:900px){
  .cuerpo-periodico{column-count:2;column-rule:1px solid rgba(0,0,0,.25)}
}
.cuerpo-periodico .entradilla::first-letter{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:3.1em;float:left;line-height:.85;
  padding:2px 8px 0 0;color:var(--sangre);
}
.cuerpo-periodico h3{
  font-family:'Anton',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  margin:1.4em 0 .6em;font-size:1.15em;
  border-bottom:2px solid var(--negro);display:inline-block;padding-bottom:2px;
}
.cuerpo-periodico ul{list-style:none;margin:.4em 0 1em}
.cuerpo-periodico li{
  padding-left:1.4em;position:relative;margin-bottom:.65em;
  break-inside:avoid;
}
.cuerpo-periodico li::before{
  content:"✂";position:absolute;left:0;top:.1em;
  color:var(--sangre);font-size:.9em;transform:rotate(-90deg);
}
.cuerpo-periodico .cierre{margin-top:1em;font-weight:700}

@media (max-width:700px){
  .cuerpo-periodico{padding:18px 22px 32px}
  .periodico-grande{width:92vw;height:88vh}
  .periodico-mini{width:96px;height:78px}
  .titular-mini{font-size:1.2rem}
}


/* =====================================================
   VILLANOS DE FONDO
   ===================================================== */
.villanos-fondo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.villano{position:absolute;filter:blur(3px) drop-shadow(0 0 24px rgba(0,0,0,.5));
  opacity:.2;animation:flota 10s ease-in-out infinite}
.villano img,.villano svg{width:100%;height:auto;display:block}
.villano.p1{left:-3vw;bottom:-4vh;width:min(34vh,40vw);animation-delay:0s}
.villano.p2{left:17vw;bottom:-6vh;width:min(30vh,34vw);animation-delay:-2.5s}
.villano.p3{left:50%;transform:translateX(-50%);bottom:-5vh;width:min(36vh,42vw);animation-delay:-5s}
.villano.p4{right:16vw;bottom:-6vh;width:min(29vh,33vw);animation-delay:-7.5s}
.villano.p5{right:-3vw;bottom:-4vh;width:min(33vh,38vw);animation-delay:-4s}
@keyframes flota{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.6vh)}
}
.villano.p3{animation-name:flota-centro}
@keyframes flota-centro{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-1.6vh)}
}
@media (max-width:760px){
  .villano.p2,.villano.p4{display:none}
  .villano{opacity:.16}
}

/* =====================================================
   PIE
   ===================================================== */
.pie{
  position:relative;z-index:2;
  padding:24px 16px 28px;text-align:center;
  font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(245,242,236,.55);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ransom span,.subtitulo{opacity:1}
}

/* =====================================================
   SECCIÓN VILLANOS
   ===================================================== */
.seccion-villanos{width:100%;display:flex;flex-direction:column;align-items:center;gap:6vh;margin-top:4vh}
.galeria-villanos{display:flex;flex-direction:column;gap:7vh;width:100%;max-width:920px}
.carta-perfil{
  display:flex;gap:26px;align-items:center;text-align:left;
  background:rgba(14,14,14,.82);color:var(--papel);
  padding:26px 30px;box-shadow:0 14px 40px rgba(0,0,0,.55);
  border-left:8px solid var(--cv,#d92323);
  transform:rotate(-.4deg);
}
.carta-perfil.dcha{flex-direction:row-reverse;border-left:0;border-right:8px solid var(--cv);transform:rotate(.4deg)}
.retrato-perfil{flex-shrink:0;width:min(200px,38vw)}
.retrato-perfil img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.datos-perfil h2{
  font-family:'Anton',sans-serif;letter-spacing:.06em;font-size:clamp(1.4rem,3.6vw,2.2rem);
  color:var(--cv);text-shadow:2px 2px 0 rgba(0,0,0,.8);
}
.datos-perfil .chapa{display:flex;gap:12px;align-items:center;margin:6px 0 14px}
.datos-perfil .rol{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.72rem;
  letter-spacing:.15em;text-transform:uppercase;
  background:var(--cv);color:#fff;padding:.25em .7em;
  box-shadow:2px 3px 0 rgba(0,0,0,.5);
}
.datos-perfil .vida{font-family:'Anton',sans-serif;font-size:1.05rem;color:#ff6b6b}
.hoja-datos{list-style:none}
.hoja-datos li{
  font-family:'Special Elite',monospace;font-size:.86rem;line-height:1.6;
  padding:.45em 0;border-bottom:1px dashed rgba(239,232,216,.2);
}
.hoja-datos li b{display:block;font-family:'Courier Prime',monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:#ffd34d;margin-bottom:2px}
.hoja-datos li i{color:rgba(239,232,216,.55);font-size:.78rem}
.cta-villanos{margin-top:2vh}
@media (max-width:720px){
  .carta-perfil,.carta-perfil.dcha{flex-direction:column;text-align:center;border-right:0;border-left:0;border-top:8px solid var(--cv)}
  .datos-perfil .chapa{justify-content:center}
  .hoja-datos{text-align:left}
}

/* =====================================================
   SECCIÓN NOTICIAS
   ===================================================== */
.seccion-noticias{width:100%;display:flex;flex-direction:column;align-items:center;gap:6vh;margin-top:4vh}
.noticia{
  background:var(--papel);color:#1c1c1c;width:100%;max-width:760px;
  padding:36px 40px 32px;box-shadow:0 14px 40px rgba(0,0,0,.5);
  transform:rotate(-.4deg);
  clip-path:polygon(1% 2%,8% 0%,18% 2%,30% 0%,42% 2%,54% 0%,66% 2%,78% 0%,90% 2%,99% 1%,100% 12%,98% 28%,100% 44%,98% 60%,100% 76%,98% 92%,99% 98%,90% 100%,78% 98%,66% 100%,54% 98%,42% 100%,30% 98%,18% 100%,8% 98%,1% 99%,0% 86%,2% 70%,0% 54%,2% 38%,0% 22%,2% 10%);
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(0,0,0,.045) 27px 28px);
}
.noticia:nth-child(odd){transform:rotate(.5deg)}
.noticia header{text-align:center;margin-bottom:16px}
.noticia h2{font-family:'Anton',sans-serif;letter-spacing:.06em;font-size:clamp(1.3rem,3.4vw,2rem)}
.cuerpo-noticia{font-family:'Special Elite',monospace;font-size:.92rem;line-height:1.8;text-align:left}
.cuerpo-noticia h3{
  font-family:'Anton',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  font-size:1rem;margin:1.2em 0 .5em;border-bottom:2px solid var(--negro);
  display:inline-block;padding-bottom:2px;
}
.cuerpo-noticia .punto-noticia{padding-left:1.4em;position:relative;margin-bottom:.5em}
.cuerpo-noticia .punto-noticia::before{content:"✂";position:absolute;left:0;top:.1em;color:var(--sangre);transform:rotate(-90deg);font-size:.9em}

/* =====================================================
   SECCIÓN CRÉDITOS
   ===================================================== */
.seccion-creditos{width:100%;display:flex;flex-direction:column;align-items:center;gap:6vh;margin-top:4vh}
.tarjeta-papel.creditos{max-width:560px}
.lista-creditos{list-style:none;text-align:left;margin-bottom:18px}
.lista-creditos li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:.7em 0;border-bottom:1px dashed rgba(0,0,0,.25);
  font-family:'Courier Prime',monospace;font-size:.88rem;
}
.lista-creditos span{color:#555;letter-spacing:.04em}
.lista-creditos b{font-family:'Anton',sans-serif;letter-spacing:.05em;min-height:1em}

.lista-creditos li.con-nota{flex-wrap:wrap}
.nota-credito{
  flex-basis:100%;text-align:right;
  font-size:.68rem;color:#777;font-family:'Courier Prime',monospace;
  margin-top:2px;
}