/* ==========================================================================
   home.css — hero «el pueblo al anochecer» + secciones de la home
   ========================================================================== */

/* ---- HERO ---------------------------------------------------------------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;isolation:isolate;
}
.hero-scene{
  position:absolute;inset:0;z-index:-1;
}
.hero-scene svg{width:100%;height:100%;object-fit:cover}

/* ---- arte IA del hero: marco de aspecto fijo que cubre el viewport,
   los halos/secretos van en % del CUADRO => siempre pegados a la pintura */
.hero-art-wrap{overflow:hidden;z-index:0}
.art-frame{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  aspect-ratio:1402/1122;min-width:100%;min-height:100%;
}
@media (orientation:portrait) and (max-width:700px){
  .art-frame{left:auto;right:-4%;transform:translateY(-50%)}
}
.hero-art{width:100%;height:100%;object-fit:cover;display:block}
.predawn{
  position:absolute;inset:0;background:#08131a;opacity:.5;
  transition:opacity 3.5s ease;
}
.lit .predawn{opacity:0}
.glow{
  position:absolute;left:var(--gx);top:var(--gy);
  width:calc(72px*var(--gs,1));height:calc(58px*var(--gs,1));
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(232,168,76,.55),rgba(232,168,76,.16) 45%,transparent 72%);
  opacity:0;transition:opacity 1.4s ease;
  transition-delay:calc(var(--wd,0)*1s);
  mix-blend-mode:screen;
}
.lit .glow{opacity:1}
.lit.dark .glow{opacity:0;transition-delay:0s}
.lit.dark .glow-crime{opacity:1;animation:crimewin 5.5s ease-in-out infinite}
.lit.dark .glow-lamp{opacity:.55}
.nightdim-div{
  position:absolute;inset:0;background:#040b11;opacity:0;
  transition:opacity 1.8s ease;pointer-events:none;
}
.lit.dark .nightdim-div{opacity:.52}
.secret{
  position:absolute;left:var(--gx);top:var(--gy);transform:translate(-50%,-50%);
  opacity:0;pointer-events:none;
}


/* niebla: vive DENTRO del svg, entre colinas y caserío (la niebla por
   delante lavaba las siluetas). Deriva lenta, sin blur. */
.svg-fog{animation:fogdrift 52s linear infinite}
@keyframes fogdrift{
  from{transform:translateX(-40px)}
  50%{transform:translateX(40px)}
  to{transform:translateX(-40px)}
}

/* ventanas del pueblo: se encienden en secuencia (delays por nth) */
.win{fill:#2a3c40;transition:fill 1.1s ease}
.lit .win{fill:var(--amber)}
.lit .win.w-warm{fill:var(--amber-soft)}
/* (el parpadeo continuo queda solo en la ventana del crimen: 20 animaciones
   infinitas de repaint SVG eran demasiado para equipos sin GPU) */

/* secretos: solo los revela la linterna (JS module la opacidad) */
.secret{opacity:0}

/* halos de ventana: respiran con el encendido */
.wglow{opacity:0;transition:opacity 1.6s ease}
.lit .wglow{opacity:.55;transition-delay:.8s}
.lit.dark .wglow{opacity:0;transition-delay:0s}
.lit.dark .wglow-crime{opacity:.7}

/* capas por delante del titular: tejado cercano + niebla baja */
.near-overlay{position:absolute;inset:0;z-index:3;pointer-events:none;width:100%;height:100%}
.hero-ctas{position:relative;z-index:4}

/* apagón global: la escena entera baja, no solo las ventanas */
.nightdim{transition:opacity 1.6s ease}
.lit.dark .nightdim{opacity:.42}
.moonhalo{transition:opacity 1.6s ease}
.lit.dark .moonhalo{opacity:.4}
.poollight{transition:opacity 1.6s ease}
.lit.dark .poollight{opacity:0}
.hero .cartel,.hero .hero-ctas{transition:opacity 1.4s ease}
.hero.dark .cartel{opacity:.5}
.hero.dark .hero-ctas{opacity:.55}
.dark-line{opacity:0;color:#e0715f;transition:opacity 1s ease .6s;margin-top:.1rem;min-height:0}
.hero.dark .dark-line{opacity:1}

/* APAGÓN: el pueblo entero se apaga… salvo la ventana del crimen y el farol */
.lit.dark .win{fill:#22343a;transition:fill 1.4s ease}
.lit.dark .win.lamp{fill:var(--amber-soft)}
.lit.dark .win-crime{fill:var(--amber-soft)}
.lit.dark .barsign text{fill:#3d5560;transition:fill 1.4s ease}

/* nube que cruza la luna */
.cloud{animation:cloudpass 74s linear infinite}
@keyframes cloudpass{
  from{transform:translateX(-260px)}
  to{transform:translateX(1700px)}
}

/* estrellas que titilan (solo 3) */
.tw{animation:twinkle 5.5s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.15}}

/* cola del gato */
.cattail{transform-origin:1032px 572px;animation:tail 6s ease-in-out infinite}
@keyframes tail{50%{transform:rotate(14deg)}}

/* humo de la chimenea en primer término */
.humo circle{opacity:0}
.humo .h1{animation:humo 7s ease-out infinite}
.humo .h2{animation:humo 7s ease-out 2.3s infinite}
.humo .h3{animation:humo 7s ease-out 4.6s infinite}
@keyframes humo{
  0%{opacity:0;transform:translateY(14px)}
  18%{opacity:.14}
  100%{opacity:0;transform:translateY(-52px) translateX(10px)}
}

.lyr-mid{transform:scale(1.24);transform-box:fill-box;transform-origin:50% 100%}
.lyr-far{transform-box:fill-box;transform-origin:50% 100%}
.lyr-near{transform-box:fill-box;transform-origin:50% 100%}

/* parallax con CSS scroll-driven animations (sin listeners de scroll);
   navegadores sin animation-timeline: escena estática, sin fallo */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .lyr-far{animation:pfar linear both;animation-timeline:scroll();animation-range:0 100vh}
    .lyr-mid{animation:pmid linear both;animation-timeline:scroll();animation-range:0 100vh}
    .lyr-near{animation:pnear linear both;animation-timeline:scroll();animation-range:0 100vh}
  }
}
@keyframes pfar{to{transform:translateY(42px)}}
@keyframes pmid{from{transform:scale(1.24) translateY(0)}to{transform:scale(1.24) translateY(-22px)}}
@keyframes pnear{to{transform:translateY(-92px)}}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .art-frame{animation:herozoom linear both;animation-timeline:scroll();animation-range:0 120vh}
  }
}
@keyframes herozoom{
  from{scale:1}
  to{scale:1.07;translate:0 -3%}
}

/* linterna del sereno: halo cálido que sigue al cursor (solo pointer fine) */
.linterna{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(240px 240px at var(--lx,50%) var(--ly,60%),
    rgba(232,168,76,.16),rgba(232,168,76,.05) 45%,transparent 70%);
  transition:opacity 1s;
}
@media (pointer:fine){.hero:hover .linterna{opacity:1}}
/* escalonado del encendido */
.lit .win{transition-delay:calc(var(--wd,0)*1s)}

/* halo de la ventana del crimen (una sola, parpadeo distinto) */
.lit .win-crime{fill:var(--amber-soft);animation:crimewin 5.5s ease-in-out infinite}
@keyframes crimewin{
  0%,100%{opacity:1}
  46%{opacity:1}
  50%{opacity:.25}
  54%{opacity:1}
}

.hero-copy{
  position:relative;z-index:4;
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding:0 clamp(1rem,4vw,2rem) clamp(4.5rem,10vh,7rem);
}
@media (max-width:700px){
  .hero-copy{
    background:linear-gradient(transparent,rgba(8,20,26,.66) 30%,rgba(8,20,26,.82));
    padding-top:2.2rem;
  }
}
.hero-copy .kicker{color:var(--amber)}
.hero-title{
  font-size:clamp(2.5rem,7.2vw,5rem);font-weight:850;color:var(--moon);
  max-width:12ch;text-wrap:balance;
  text-shadow:0 2px 30px rgba(6,12,15,.75);
}

/* titular CARTEL: tres líneas de tipo de madera, escalonadas y torcidas.
   La última va sobre taco oxblood, como impresa aparte y pegada. */
.cartel{display:flex;flex-direction:column;align-items:flex-start;gap:.06em}
.cartel .wm{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.cartel .w{display:inline-block;transform:translateY(112%);animation:wordup .8s cubic-bezier(.2,.9,.25,1) forwards}
.cartel .w1{animation-delay:.25s}
.cartel .w2{animation-delay:.45s}
.cartel .w3{animation-delay:.68s}
@keyframes wordup{to{transform:none}}
.cl1{font-size:clamp(3rem,8.5vw,6.2rem);color:var(--moon)}
.cl2{
  font-size:clamp(1.5rem,4vw,2.9rem);color:var(--amber);
  letter-spacing:.14em;padding-left:.1em;
}
.cl3{
  font-size:clamp(3.4rem,10vw,7.6rem);line-height:1;color:#fdf6ea;
  background:var(--stamp);padding:.02em .18em .05em;
  transform-origin:left bottom;rotate:-2.2deg;
  box-shadow:0 14px 40px rgba(124,38,29,.45);
}
.cartel .wm:last-child{padding-bottom:.14em;margin-bottom:-.06em}

/* kicker y CTAs entran con la coreografía */
.hc-in{opacity:0;animation:fadeup .8s ease .15s forwards}
.hc-late{animation-delay:1.5s}
@keyframes fadeup{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.hero-sub{
  font-family:var(--type);font-size:clamp(1rem,2.2vw,1.25rem);
  color:var(--mist);margin-top:1.5rem;min-height:1.6em;
  position:relative;z-index:2;
}
.hero-sub .caret{
  display:inline-block;width:.55em;height:1.15em;vertical-align:-.18em;
  background:var(--amber);margin-left:2px;animation:caret 1s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.7rem}

.scroll-hint{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  color:var(--mist);font-size:1.2rem;z-index:2;opacity:.7;
  animation:hint 2.2s ease-in-out infinite;
}
@keyframes hint{50%{transform:translateX(-50%) translateY(6px)}}

/* ---- LA REME ------------------------------------------------------------- */
.reme-card{
  display:grid;grid-template-columns:150px 1fr;gap:clamp(1.2rem,3vw,2.2rem);
  padding:clamp(1.4rem,3.5vw,2.4rem);--tilt:-1deg;
}
.reme-card .retrato img{width:100%;filter:drop-shadow(2px 4px 6px rgba(31,47,40,.25))}
.reme-card blockquote{
  font-family:var(--type);font-size:clamp(.95rem,1.9vw,1.08rem);
  color:var(--pencil);line-height:1.8;
}
.reme-card blockquote p+p{margin-top:.9rem}
.reme-firma{
  margin-top:1.1rem;font-family:var(--type);
  color:var(--ink-soft);font-size:.9rem;
}
@media (max-width:640px){
  .reme-card{grid-template-columns:1fr}
  .reme-card .retrato{max-width:150px}
}

/* ---- MÉTODO: el BANDO de la Brigada --------------------------------------- */
.bando-wrap{position:relative;max-width:820px}
.bando{--tilt:-.6deg;padding:clamp(1.2rem,3vw,2rem)}
.bando-borde{
  border:2.5px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;
  padding:clamp(1.2rem,3.5vw,2.4rem) clamp(1.2rem,4vw,2.8rem);
}
.bando-titulo{
  text-align:center;font-size:clamp(2.6rem,6vw,4.2rem);
  letter-spacing:.34em;text-indent:.34em;color:var(--ink);
  border-bottom:2px solid var(--ink);padding-bottom:.35rem;margin-bottom:1rem;
}
.bando-sub{text-align:center;font-size:.9rem;color:var(--ink-soft);max-width:44ch;margin:0 auto}
.bando-hace{text-align:center;font-size:1.02rem;letter-spacing:.22em;margin:1.2rem 0 1.5rem;color:var(--ink)}
.bando-reglas{list-style:none;counter-reset:regla;display:grid;gap:1.35rem}
.bando-reglas li{
  counter-increment:regla;position:relative;
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding-left:3.4rem;
}
.bando-reglas li::before{
  content:counter(regla) "º";position:absolute;left:0;top:.1rem;
  font-family:var(--serif);font-size:2.2rem;color:var(--stamp);line-height:1;
}
.bando-reglas h3{font-family:var(--serif);text-transform:uppercase;font-size:1.08rem;color:var(--ink);letter-spacing:.03em;margin-bottom:.3rem}
.bando-reglas p{font-size:.88rem;color:var(--ink-soft);max-width:52ch}
.bando-reglas .stamp{font-size:.92rem;flex:none}
.bando-reglas li:nth-child(2) .stamp{transform:rotate(4deg)}
.bando-reglas li:nth-child(3) .stamp{transform:rotate(-9deg)}
.bando-cierre{margin-top:1.6rem;font-size:.85rem;color:var(--muted-ink);text-align:center}
.bando-firma{
  display:flex;justify-content:flex-end;align-items:baseline;gap:1rem;
  margin-top:1rem;font-size:.82rem;color:var(--muted-ink);
}
.bando-firma .firma-r{font-family:var(--serif);font-size:1.5rem;color:var(--ink-soft);rotate:-6deg}
.bando-wrap .regla-nota{
  position:absolute;right:-3%;bottom:-1.6rem;z-index:2;
  font-family:var(--type);font-size:.92rem;line-height:1.5;color:var(--pencil);
  background:var(--paper);padding:1.05rem 1.2rem .8rem;max-width:20ch;
  rotate:3deg;box-shadow:0 14px 34px rgba(0,0,0,.5);
  clip-path:polygon(0 4%,7% 0,26% 2%,45% 0,68% 3%,88% 0,100% 5%,99% 38%,100% 66%,98% 100%,74% 98%,52% 100%,30% 97%,9% 100%,0 96%,2% 55%);
}
.bando-wrap .regla-nota .pin-dot{
  position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e0715f,#8f241a 70%);
  box-shadow:0 2px 3px rgba(0,0,0,.5);
}
.bando-wrap .regla-nota .firma-r{display:block;text-align:right;font-family:var(--serif);font-size:1rem;color:var(--ink-soft)}
@media (max-width:640px){
  .bando-reglas li{grid-template-columns:1fr;padding-left:2.6rem}
  .bando-reglas .stamp{justify-self:start}
  .bando-wrap .regla-nota{position:static;margin:1.2rem 0 0 auto;rotate:-1.5deg}
}

/* ---- EXPEDIENTE Nº 0 ----------------------------------------------------- */
.exp0{
  padding:clamp(1.4rem,3.5vw,2.4rem);--tilt:.8deg;
}
.exp0-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:.7rem;margin-bottom:1.2rem}
.exp0-head h2{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.exp0-body{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.2rem,3vw,2.2rem);align-items:center}
.exp0 .intro{font-family:var(--type);font-size:.9rem;color:var(--ink-soft)}
.exp0 .intro em{font-family:var(--type);font-style:normal}
.exp0 .sospechosos{display:flex;gap:.8rem;margin:1.2rem 0}
.exp0 .sospechosos figure{width:76px;text-align:center}
.exp0 .sospechosos figcaption{font-family:var(--type);font-size:.62rem;margin-top:.25rem;color:var(--muted-ink)}
.exp0-grid{position:relative}
.exp0-grid .verdict{
  margin-top:.9rem;text-align:center;font-family:var(--type);
  font-size:.9rem;color:var(--ink);opacity:0;transform:translateY(6px);
  transition:opacity .5s,transform .5s;
}
.exp0-grid .verdict.show{opacity:1;transform:none}
.exp0-grid .stampzone{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.exp0-grid .stampzone .stamp{font-size:1.3rem;background:rgba(242,236,220,.82)}
.exp0-cta{margin-top:1.4rem;display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
@media (max-width:820px){.exp0-body{grid-template-columns:1fr}}

/* ---- EL LIBRO ------------------------------------------------------------ */
.libro{display:grid;grid-template-columns:minmax(230px,320px) 1fr;gap:clamp(1.6rem,5vw,3.4rem);align-items:center}
.libro-cover{perspective:900px}
.libro-cover img{
  border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.55);
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  transition:transform .18s ease-out,box-shadow .3s;
  will-change:transform;
}
.libro-meta .sec-title{max-width:16ch}
.libro-meta ul{list-style:none;margin:1.1rem 0 1.5rem;display:grid;gap:.55rem}
.libro-meta li{position:relative;padding-left:1.5rem;font-size:.95rem;color:var(--mist)}
.libro-meta li::before{content:"✓";position:absolute;left:0;color:var(--amber);font-weight:700}
.libro-meta li strong{color:var(--moon);font-weight:650}
@media (max-width:760px){
  .libro{grid-template-columns:1fr}
  .libro-cover{max-width:250px;margin:0 auto}
}

/* ---- LOS VECINOS: el corcho de la Brigada -------------------------------- */
.board{
  position:relative;margin-top:1.8rem;padding:clamp(1rem,3vw,1.8rem);
  background:#221a12;border:9px solid #15100a;border-radius:8px;
  box-shadow:inset 0 0 46px rgba(0,0,0,.55),0 18px 50px rgba(0,0,0,.4);
}
.board::before{
  content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23c)'/%3E%3C/svg%3E");
}
.board .vecinos-grid{margin-top:0}
.strings{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:5;overflow:visible;
}
.strings path{
  fill:none;stroke:#b8352a;stroke-width:2;opacity:.7;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-width .25s,opacity .25s;
}
.strings path.hot{stroke-width:3.5;opacity:1}
.vecino.lift img{transform:translateY(-4px) rotate(var(--rot))}
.board.tied .strings path{
  animation:cordel 1.1s ease-out forwards;
  animation-delay:calc(var(--i,0)*.28s);
}
@keyframes cordel{to{stroke-dashoffset:0}}

.vecinos-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  gap:1rem;margin-top:1.8rem;
}
/* fichas clavadas torcidas + chincheta */
.vecino{--rot:0deg}
.vecino:nth-child(3n+1){--rot:-2.1deg}
.vecino:nth-child(3n+2){--rot:1.4deg}
.vecino:nth-child(4n+3){--rot:-1deg}
.vecino:nth-child(5n){--rot:2.2deg}
.vecino img{transform:rotate(var(--rot))}
.vecino::before{
  content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;z-index:6;
  background:radial-gradient(circle at 35% 30%,#e0715f,#8f241a 70%);
  box-shadow:0 2px 3px rgba(0,0,0,.55);
}
.vecino:hover img,.vecino:focus-visible img{transform:translateY(-5px) rotate(calc(var(--rot) - 1.5deg))}
.vecino{
  position:relative;text-align:center;border:0;background:none;padding:0;
}
.vecino img{width:100%;max-width:132px;margin:0 auto;transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.vecino:hover img,.vecino:focus-visible img{transform:translateY(-5px) rotate(-1.5deg)}
.vecino figcaption,.vecino .vname{
  font-family:var(--type);font-size:.68rem;color:var(--mist);margin-top:.4rem;
}
.vecino .ficha{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(6px);
  width:200px;background:var(--paper);color:var(--ink);
  font-size:.8rem;line-height:1.45;padding:.7rem .8rem;border-radius:8px;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:30;
}
.vecino .ficha::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--paper);
}
.vecino:hover .ficha,.vecino:focus-visible .ficha,.vecino.open .ficha{
  opacity:1;transform:translateX(-50%) translateY(0);
}
.vecino .ficha .rol{font-family:var(--type);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);display:block;margin-bottom:.2rem}

/* gag gallinas: nota suelta al final de la galería */
.nota-gallinas{
  margin-top:2rem;max-width:46ch;--tilt:1.6deg;
  padding:1rem 1.2rem;font-family:var(--type);font-size:.82rem;color:var(--pencil);
}

/* ---- CTA final ----------------------------------------------------------- */
.band{position:relative;overflow:hidden}
.band-art{
  position:relative;height:250px;
  background-image:
    linear-gradient(180deg,var(--night) 0,rgba(12,25,31,.72) 30%,rgba(12,25,31,.72) 70%,var(--night) 100%),
    url("../img/band-pueblo.jpg");
  background-size:auto,cover;
  background-position:center,center;
}
.band-art .bglow{
  position:absolute;left:54%;top:50%;width:58px;height:70px;
  transform:translate(-50%,-50%);mix-blend-mode:screen;
  background:radial-gradient(50% 50% at 50% 50%,rgba(232,168,76,.6),rgba(232,168,76,.18) 45%,transparent 72%);
  animation:crimewin 5.5s ease-in-out infinite;
}
.band-art .bcap{
  position:absolute;right:clamp(1rem,6vw,4rem);bottom:14px;
  font-size:.72rem;color:var(--mist);opacity:.85;
}
.band{
  text-align:center;padding:clamp(2rem,6vw,4rem) 0 clamp(3rem,8vw,5.5rem);
  background:linear-gradient(180deg,transparent,rgba(20,40,49,.65) 30%,rgba(20,40,49,.65) 70%,transparent);
}
.band h2{font-size:clamp(1.8rem,4.4vw,2.8rem);max-width:20ch;margin:0 auto 1.4rem;color:var(--moon)}