/* ============================================================
   HALLOWEEN · ESPECIAL ABC COLOR 2026
   Estilos base, hero, secciones y componentes editoriales.
   Tailwind se usa para layout; aquí vive la dirección de arte.
   ============================================================ */

@font-face{
  font-family:'Unit Slab';
  src:url('../fonts/unit-slab-bold.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Unit Slab';
  src:url('../fonts/unit-slab-bold-italic.woff') format('woff');
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

:root{
  --noche:#08060B;
  --tinta:#0E0A13;
  --ciruela:#170D22;
  --ciruela-2:#211031;
  --hueso:#F4E9D8;
  --hueso-2:#CDBEA9;
  --humo:#9B8C82;
  --calabaza:#FF6B1A;
  --calabaza-clara:#FFA45C;
  --calabaza-oscura:#B33B00;
  --sangre:#B3122C;
  --luna:#FFD9A0;
  --borde:rgba(244,233,216,.14);
  --borde-fuerte:rgba(244,233,216,.26);
  --papel:#F1E4CE;
  --tinta-papel:#181016;
  --naranja-tinta:#A93600;
  --display:'Unit Slab', 'Roboto Slab', Rockwell, Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--noche);
  color:var(--hueso);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;}
ul{list-style:none;margin:0;padding:0;}
::selection{background:var(--calabaza);color:#140a1d;}
:focus-visible{outline:2px solid var(--calabaza);outline-offset:4px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.skip-link{
  position:fixed;left:1rem;top:-100px;z-index:200;
  padding:.8rem 1.1rem;background:var(--calabaza);color:#140a1d;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  transition:top .2s;
}
.skip-link:focus{top:1rem;}

/* ---------- animaciones de aparición ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(34px);
  filter:blur(5px);
  transition:opacity .95s var(--ease), transform .95s var(--ease), filter .95s var(--ease);
  will-change:opacity,transform,filter;
}
.js .reveal[data-anim="left"]{transform:translateX(-40px);}
.js .reveal[data-anim="right"]{transform:translateX(40px);}
.js .reveal[data-anim="zoom"]{transform:scale(.94) translateY(18px);}
.js .reveal.visible{opacity:1;transform:none;filter:blur(0);}

/* ---------- tipografía ---------- */
.hero-title,
.section-title,
.footer__quote,
.book-panel__head h3,
.recipe-card h3,
.director-card h3,
.poster-title,
.king-stamp,
.stamp span{
  font-family:var(--display);
}
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  margin:0 0 1.35rem;
  font-family:var(--mono);font-size:.62rem;line-height:1.4;
  letter-spacing:.28em;text-transform:uppercase;color:var(--calabaza);
}
.eyebrow::before{content:'';width:2.2rem;height:1px;background:currentColor;opacity:.65;}
.eyebrow span{color:rgba(244,233,216,.5);}
.eyebrow--center{justify-content:center;}
.section-title{
  margin:0;
  font-weight:700;
  font-size:clamp(2.7rem,5.3vw,5.3rem);
  line-height:.95;
  letter-spacing:-.012em;
  text-wrap:balance;
  max-width:15ch;
  color:var(--hueso);
}
.section-title em{font-style:italic;font-weight:700;color:var(--calabaza);}
.section-title--wide{max-width:20ch;margin-inline:auto;}
.section-lede{
  margin:0;max-width:46ch;
  font-size:clamp(1rem,1.2vw,1.14rem);
  line-height:1.72;color:var(--hueso-2);
  text-wrap:pretty;
}
.section-lede--center{margin-inline:auto;text-align:center;}
.body-copy{
  margin:0 0 1.9rem;max-width:60ch;
  font-size:clamp(1.04rem,1.15vw,1.18rem);
  line-height:1.8;color:rgba(244,233,216,.82);
  text-wrap:pretty;
}
.body-copy strong{color:var(--hueso);font-weight:600;}
.section-title + .body-copy{margin-top:1.6rem;}
.dropcap::first-letter{
  float:left;
  font-family:var(--display);font-weight:700;
  font-size:4.4em;line-height:.76;
  padding:.06em .1em 0 0;color:var(--calabaza);
}

/* ---------- estructura ---------- */
.section{
  position:relative;
  padding:clamp(5rem,9vw,9rem) 1.35rem;
  overflow:hidden;
}
@media(min-width:768px){.section{padding-inline:2rem;}}
.shell{position:relative;z-index:2;width:100%;max-width:1320px;margin-inline:auto;}
.section-watermark{
  position:absolute;z-index:0;top:1.5rem;right:.5rem;
  font-family:var(--display);font-weight:800;line-height:.7;
  font-size:clamp(9rem,19vw,19rem);
  color:transparent;-webkit-text-stroke:1px rgba(244,233,216,.075);
  pointer-events:none;user-select:none;
}
.section-watermark--dark{-webkit-text-stroke-color:rgba(24,16,22,.09);}
@media(max-width:767px){.section-watermark{display:none;}}

.section-head{
  display:grid;gap:1.5rem;
  padding-top:1.5rem;border-top:1px solid var(--borde);
}
@media(min-width:1024px){
  .section-head{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:2rem 5rem;align-items:end;}
}
.section-head--center{max-width:54rem;margin-inline:auto;text-align:center;}
.section-head--center .section-title{margin-inline:auto;}
.section-head--center .section-lede{margin-inline:auto;}
@media(min-width:1024px){
  .section-head--center{display:block;}
  .section-head--center .section-lede{margin-top:1.2rem;}
}
.section-head--paper{border-color:rgba(24,16,22,.18);}

/* ---------- botones y enlaces ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  padding:1rem 1.45rem;border:1px solid transparent;border-radius:2px;
  font-family:var(--mono);font-size:.64rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .35s,color .35s,border-color .35s,transform .35s var(--ease),box-shadow .35s;
}
.btn span{transition:transform .35s var(--ease);}
.btn:hover span{transform:translateX(4px);}
.btn:active{transform:translateY(0) scale(.99);}
.btn--primary{background:var(--calabaza);color:#160b1f;box-shadow:0 16px 40px -20px rgba(255,107,26,.65);}
.btn--primary:hover{background:var(--hueso);color:#140a1d;transform:translateY(-2px);}
.btn--ghost{border-color:var(--borde-fuerte);color:var(--hueso);background:rgba(255,255,255,.02);}
.btn--ghost:hover{border-color:var(--calabaza);color:var(--calabaza);transform:translateY(-2px);}
.link-arrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hueso);border-bottom:1px solid rgba(244,233,216,.3);padding-bottom:.3rem;
  transition:color .3s,border-color .3s;
}
.link-arrow span{transition:transform .3s var(--ease);}
.link-arrow:hover{color:var(--calabaza);border-color:var(--calabaza);}
.link-arrow:hover span{transform:translateX(4px);}

/* ---------- HERO ---------- */
.hero{min-height:100svh;isolation:isolate;background:#08060B;}
.hero-sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hero-moon{
  position:absolute;left:81%;top:33%;width:clamp(200px,29vw,410px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,196,130,.85) 0 4%, transparent 5%),
    radial-gradient(circle at 63% 38%, rgba(150,55,0,.2) 0 7%, transparent 8%),
    radial-gradient(circle at 44% 66%, rgba(150,55,0,.16) 0 10%, transparent 11%),
    radial-gradient(circle at 72% 70%, rgba(150,55,0,.14) 0 5%, transparent 6%),
    radial-gradient(circle at 36% 34%, #ffbc76 0%, #ff8a33 34%, #f26200 64%, #a83b00 100%);
  box-shadow:0 0 90px rgba(255,107,26,.2),0 0 190px rgba(255,107,26,.1),inset -18px -22px 60px rgba(70,17,0,.32);
  opacity:.88;animation:moon-float 14s ease-in-out infinite;
}
.hero-sky::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(62% 78% at 42% 56%,rgba(8,6,11,.5),transparent 72%),
    linear-gradient(90deg,rgba(8,6,11,.4) 0%,rgba(8,6,11,.12) 46%,transparent 70%),
    linear-gradient(180deg,rgba(8,6,11,.42) 0%,transparent 26%,transparent 68%,rgba(8,6,11,.55) 100%);
}
.hero-moon::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 68% 74%, rgba(255,255,255,.1), transparent 40%);
  mix-blend-mode:screen;
}
@keyframes moon-float{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,calc(-50% - 10px)) scale(1.012);}}
.hero-stars{position:absolute;inset:0;opacity:.7;}
.hero-stars--a{
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(244,233,216,.9),transparent),
    radial-gradient(1px 1px at 26% 44%,rgba(244,233,216,.55),transparent),
    radial-gradient(1.4px 1.4px at 38% 12%,rgba(244,233,216,.8),transparent),
    radial-gradient(1px 1px at 56% 32%,rgba(244,233,216,.55),transparent),
    radial-gradient(1.2px 1.2px at 74% 16%,rgba(244,233,216,.8),transparent),
    radial-gradient(1px 1px at 86% 42%,rgba(244,233,216,.5),transparent);
  animation:stars-twinkle 8s ease-in-out infinite alternate;
}
.hero-stars--b{
  background-image:
    radial-gradient(1px 1px at 8% 62%,rgba(244,233,216,.45),transparent),
    radial-gradient(1.2px 1.2px at 18% 78%,rgba(244,233,216,.7),transparent),
    radial-gradient(1px 1px at 44% 68%,rgba(244,233,216,.4),transparent),
    radial-gradient(1px 1px at 64% 84%,rgba(244,233,216,.55),transparent),
    radial-gradient(1.3px 1.3px at 82% 70%,rgba(244,233,216,.7),transparent),
    radial-gradient(1px 1px at 94% 88%,rgba(244,233,216,.45),transparent);
  opacity:.55;animation:stars-twinkle 11s ease-in-out infinite alternate-reverse;
}
@keyframes stars-twinkle{from{opacity:.35}to{opacity:.8}}
.hero-hills{position:absolute;left:-5%;width:110%;bottom:0;}
.hero-hills--back{
  height:32%;background:#0d0913;
  clip-path:polygon(0 56%,7% 48%,14% 55%,22% 35%,30% 50%,38% 42%,47% 58%,56% 44%,64% 52%,72% 33%,81% 48%,89% 40%,100% 56%,100% 100%,0 100%);
  opacity:.85;
}
.hero-hills--front{
  height:23%;background:#07050a;
  clip-path:polygon(0 62%,5% 55%,11% 64%,18% 48%,24% 58%,31% 49%,39% 66%,48% 52%,55% 60%,63% 44%,70% 58%,77% 50%,85% 62%,93% 48%,100% 60%,100% 100%,0 100%);
}
.hero-fog{
  position:absolute;left:-20%;width:140%;height:22%;bottom:-2%;
  background:radial-gradient(ellipse at center,rgba(180,120,170,.13),transparent 65%);
  filter:blur(24px);pointer-events:none;
}
.hero-fog--a{animation:fog-drift 24s ease-in-out infinite alternate;}
.hero-fog--b{bottom:6%;height:16%;opacity:.7;animation:fog-drift 31s ease-in-out infinite alternate-reverse;}
@keyframes fog-drift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}

.hero-brand{opacity:1;text-shadow:0 1px 18px rgba(8,6,11,.85);}
.hero-title{
  position:relative;z-index:2;
  margin:.3em 0 .06em;
  font-weight:700;
  font-size:clamp(3.2rem,13vw,15rem);
  line-height:.82;
  letter-spacing:-.028em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--hueso);
  text-shadow:0 0 90px rgba(255,107,26,.18),0 18px 60px rgba(0,0,0,.35);
}
.hero-tagline{
  position:relative;z-index:2;
  margin:1.4rem 0 1.2rem;
  font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.5rem);
  font-weight:500;line-height:1.1;color:rgba(244,233,216,.92);
}
.hero-tagline em{color:var(--calabaza);font-weight:600;}
.hero-lede{
  position:relative;z-index:2;
  max-width:36rem;margin:0 auto;
  font-size:clamp(.96rem,1.1vw,1.1rem);line-height:1.75;color:rgba(244,233,216,.7);
  text-wrap:pretty;
}
.hero-actions{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.5rem;
  margin-top:2rem;
}
.scroll-cue{
  position:absolute;left:50%;bottom:1.35rem;transform:translateX(-50%);
  z-index:12;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(244,233,216,.45);
}
.scroll-cue__line{position:relative;display:block;width:1px;height:2.6rem;background:rgba(244,233,216,.22);overflow:hidden;}
.scroll-cue__dot{position:absolute;left:50%;top:0;width:3px;height:3px;border-radius:50%;background:var(--calabaza);transform:translateX(-50%);animation:scroll-dot 2s ease-in-out infinite;}
@keyframes scroll-dot{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:0}100%{top:100%;opacity:0}}
.hero-side{
  position:absolute;left:1.4rem;bottom:10rem;z-index:11;
  writing-mode:vertical-rl;transform:rotate(180deg);
  margin:0;font-family:var(--mono);font-size:.5rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(244,233,216,.32);
}

/* ---------- 01 ORIGEN ---------- */
.section--origen{
  background:
    radial-gradient(60% 55% at 88% 4%,rgba(255,107,26,.12),transparent 62%),
    radial-gradient(50% 55% at 8% 76%,rgba(107,42,138,.18),transparent 70%),
    linear-gradient(180deg,#0a0710,#120a17 52%,#0a0710);
}
.section--origen::before{
  content:'';position:absolute;top:8%;right:4%;width:16rem;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,180,110,.55),rgba(255,107,26,.12) 55%,transparent 70%);
  filter:blur(8px);opacity:.16;pointer-events:none;
}
.photo-frame{
  position:relative;z-index:2;
  padding:.75rem;
  background:var(--papel);
  box-shadow:0 35px 70px -35px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(-2deg);
}
.photo-frame img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.92) contrast(1.04);}
.tape{
  position:absolute;top:-.85rem;left:50%;width:5.8rem;height:1.55rem;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(224,203,166,.72);
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  backdrop-filter:blur(2px);
}
.stamp{
  position:absolute;right:-.7rem;bottom:-1.6rem;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:5.8rem;height:5.8rem;border-radius:50%;
  background:var(--calabaza);color:#1b0b26;
  box-shadow:0 16px 35px -12px rgba(0,0,0,.7);
  transform:rotate(8deg);
}
.stamp span{font-size:2rem;font-weight:800;line-height:.82;}
.stamp small{font-family:var(--mono);font-size:.48rem;letter-spacing:.2em;margin-top:.25rem;}
.mini-feature{
  position:relative;display:flex;align-items:center;gap:1rem;
  margin-top:2rem;padding:.85rem;
  border:1px solid var(--borde);
  background:linear-gradient(120deg,rgba(255,107,26,.08),rgba(255,255,255,.015));
  transition:border-color .35s,background .35s,transform .35s var(--ease);
}
.mini-feature::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,107,26,.12),transparent 65%);
}
.mini-feature:hover{border-color:rgba(255,107,26,.48);background:linear-gradient(120deg,rgba(255,107,26,.12),rgba(255,255,255,.025));transform:translateX(4px);}
.mini-feature:hover::before{opacity:1;}
.mini-feature__media{width:5.6rem;height:5rem;flex:0 0 auto;overflow:hidden;background:#24142f;}
.mini-feature__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.mini-feature:hover .mini-feature__media img{transform:scale(1.05);}
.mini-feature__body{display:flex;flex-direction:column;gap:.22rem;min-width:0;}
.mini-feature strong{font-family:var(--display);font-size:1.22rem;font-weight:600;line-height:1.08;color:var(--hueso);}
.mini-feature__text{font-size:.79rem;line-height:1.45;color:var(--humo);}
.mini-feature__arrow{margin-left:auto;padding-right:.3rem;font-size:1.2rem;color:var(--calabaza);transition:transform .3s var(--ease);}
.mini-feature:hover .mini-feature__arrow{transform:translateX(4px);}

/* ---------- 02 RECETAS (papel) ---------- */
.section--paper{
  color:var(--tinta-papel);
  background:
    radial-gradient(60% 40% at 12% 0%,rgba(255,107,26,.11),transparent 60%),
    radial-gradient(50% 40% at 90% 100%,rgba(120,60,20,.09),transparent 70%),
    var(--papel);
  border-top:1px solid rgba(24,16,22,.14);
  border-bottom:1px solid rgba(24,16,22,.14);
}
.section--paper::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.section--paper .section-title{color:var(--tinta-papel);}
.section--paper .section-title em{color:var(--naranja-tinta);}
.section--paper .eyebrow{color:var(--naranja-tinta);}
.section--paper .eyebrow span{color:rgba(24,16,22,.45);}
.section--paper .section-lede{color:rgba(24,16,22,.7);}

.scroller{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.4rem;}
.scroller::-webkit-scrollbar{display:none;}
.scroller-track{display:flex;gap:1.25rem;width:max-content;padding-right:1rem;}
.recipe-card{
  position:relative;display:flex;flex-direction:column;flex:0 0 auto;
  width:clamp(280px,78vw,360px);scroll-snap-align:start;
  background:#FBF4E8;border:1px solid rgba(24,16,22,.13);
  box-shadow:0 20px 44px -30px rgba(24,16,22,.55);
  transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;
}
.recipe-card:hover{transform:translateY(-6px);border-color:rgba(169,54,0,.4);box-shadow:0 32px 55px -28px rgba(24,16,22,.55);}
.recipe-card__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#e3d3ba;}
.recipe-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.recipe-card:hover .recipe-card__media img{transform:scale(1.055);}
.recipe-card__body{display:flex;flex-direction:column;flex:1;padding:1.35rem 1.35rem 1.4rem;}
.recipe-card h3{margin:0 0 .55rem;font-size:1.72rem;font-weight:700;line-height:1.02;color:var(--tinta-papel);}
.recipe-card p{margin:0 0 1.3rem;font-size:.88rem;line-height:1.6;color:rgba(24,16,22,.68);}
.card-cta{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:.85rem;
  border-top:1px solid rgba(24,16,22,.14);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;color:var(--naranja-tinta);
}
.card-cta span{transition:transform .3s var(--ease);}
.recipe-card:hover .card-cta span{transform:translateX(4px);}
.scroller-ui{display:flex;align-items:center;gap:1.2rem;margin-top:1.5rem;}
.scroller-progress{position:relative;flex:1;max-width:260px;height:2px;background:rgba(24,16,22,.16);overflow:hidden;}
.scroller-progress span{display:block;width:100%;height:100%;background:var(--naranja-tinta);transform:scaleX(0);transform-origin:left;transition:transform .12s linear;}
.scroller-hint{margin:0 0 0 auto;font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(24,16,22,.48);}
.scroller-buttons{display:flex;gap:.45rem;}
.scroller-buttons button{
  display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;
  border:1px solid rgba(24,16,22,.28);color:var(--tinta-papel);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s,opacity .3s;
}
.scroller-buttons button:hover:not(:disabled){background:var(--tinta-papel);color:var(--papel);border-color:var(--tinta-papel);}
.scroller-buttons button:disabled{opacity:.28;cursor:not-allowed;}

/* ---------- 03 LIBROS ---------- */
.section--libros{
  background:
    radial-gradient(60% 50% at 20% 6%,rgba(255,107,26,.09),transparent 62%),
    radial-gradient(55% 55% at 85% 70%,rgba(107,42,138,.24),transparent 70%),
    linear-gradient(180deg,#0a0710,#160d22 48%,#0a0710);
}
.book-panel{
  position:relative;display:flex;flex-direction:column;
  padding:1.5rem;border:1px solid var(--borde);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.008));
  overflow:hidden;
}
@media(min-width:768px){.book-panel{padding:2.2rem;}}
.book-panel::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--calabaza),rgba(255,107,26,.08) 70%,transparent);
}
.book-panel--alt::before{background:linear-gradient(90deg,#a77bd6,rgba(167,123,214,.08) 70%,transparent);}
.book-panel__head h3{
  margin:.55rem 0 .9rem;font-size:clamp(1.85rem,2.8vw,2.65rem);
  font-weight:700;line-height:.98;letter-spacing:-.015em;color:var(--hueso);
  text-wrap:balance;
}
.book-panel__head p{margin:0;font-size:.93rem;line-height:1.65;color:var(--hueso-2);}
.book-fan{
  position:relative;width:min(100%,390px);aspect-ratio:390/300;
  margin:1.5rem auto .7rem;
}
.book-fan::after{
  content:'';position:absolute;left:12%;right:12%;bottom:7%;height:16%;z-index:0;
  background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%);
  filter:blur(10px);
}
.book{
  position:absolute;left:50%;top:50%;width:34%;aspect-ratio:2/3;z-index:1;
  transform:translate(-50%,-50%) translate(calc(var(--x)*1%),calc(var(--y)*1px)) rotate(calc(var(--r)*1deg));
  box-shadow:0 24px 34px -16px rgba(0,0,0,.85);
  transition:transform .65s var(--ease),box-shadow .65s;
}
.book img{width:100%;height:100%;object-fit:cover;box-shadow:inset 3px 0 7px rgba(0,0,0,.3);}
.book:nth-child(1){z-index:1;}
.book:nth-child(2){z-index:2;}
.book:nth-child(3){z-index:3;}
.book:nth-child(4){z-index:2;}
.book:nth-child(5){z-index:1;}
.book-fan:hover .book{
  transform:translate(-50%,-50%) translate(calc(var(--x)*1.32%),calc(var(--y)*1px - 7px)) rotate(calc(var(--r)*1.16deg));
  box-shadow:0 34px 48px -18px rgba(0,0,0,.9);
}
.book-fan:hover .book:nth-child(3){transform:translate(-50%,-50%) translateY(-14px) rotate(0deg);}
.book-collage{
  position:relative;margin:1.5rem 0 .7rem;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--borde);background:#1b1027;
}
.book-collage img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.book-panel:hover .book-collage img{transform:scale(1.035);}
.book-collage::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(11,7,16,.35));
  pointer-events:none;
}
.book-panel__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:auto;padding-top:1.4rem;border-top:1px solid var(--borde);
}

/* ---------- 04 DIRECTORES ---------- */
.section--directores{
  background:
    radial-gradient(55% 50% at 82% 0%,rgba(255,107,26,.11),transparent 64%),
    radial-gradient(50% 50% at 12% 90%,rgba(86,33,120,.22),transparent 70%),
    linear-gradient(180deg,#0a0710,#100a16 60%,#0a0710);
}
.director-card{
  position:relative;border:1px solid var(--borde);background:rgba(255,255,255,.018);
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;
}
.director-card:hover{transform:translateY(-4px);border-color:rgba(255,107,26,.38);box-shadow:0 30px 50px -35px rgba(0,0,0,.9);}
.director-card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1a1024;margin:0;}
.director-card__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1);transition:transform .8s var(--ease),filter .8s;
}
.director-card__media::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 52%,rgba(8,6,11,.88));
}
.director-card__media::after{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(155deg,rgba(255,107,26,.62),rgba(83,35,120,.66));
  mix-blend-mode:color;opacity:.72;transition:opacity .6s;
}
.director-card:hover .director-card__media img{transform:scale(1.045);filter:grayscale(.15) contrast(1.05);}
.director-card:hover .director-card__media::after{opacity:.16;}
.director-card__body{padding:1.25rem 1.2rem 1.4rem;}
.director-card h3{margin:0 0 .3rem;font-size:1.8rem;font-weight:700;line-height:1;color:var(--hueso);}
.director-card__films{margin:0 0 .7rem;font-family:var(--mono);font-size:.52rem;letter-spacing:.13em;text-transform:uppercase;color:var(--calabaza);}
.director-card__body p:last-child{margin:0;font-size:.85rem;line-height:1.6;color:var(--hueso-2);}

/* ---------- filmstrip ---------- */
.filmstrip{
  position:relative;height:22px;background:var(--calabaza);
  border-top:2px solid #1a0b26;border-bottom:2px solid #1a0b26;
}
.filmstrip::before{
  content:'';position:absolute;inset:4px 0;
  background-image:repeating-linear-gradient(90deg,#1a0b26 0 9px,transparent 9px 24px);
  opacity:.95;
}
.filmstrip--edge{height:18px;}
.filmstrip--bottom{position:absolute;left:0;right:0;bottom:0;z-index:12;}
.filmstrip--top{position:absolute;left:0;right:0;top:0;z-index:12;}
.filmstrip--frame{border:0;height:16px;}
@media(max-width:640px){.filmstrip{height:16px;}.filmstrip::before{inset:3px 0;background-image:repeating-linear-gradient(90deg,#1a0b26 0 7px,transparent 7px 19px);}}

/* ---------- 05 CLÁSICOS / MARQUEE ---------- */
.section--clasicos{
  background:
    radial-gradient(55% 45% at 50% 0%,rgba(255,107,26,.13),transparent 62%),
    radial-gradient(60% 60% at 15% 80%,rgba(93,37,130,.22),transparent 70%),
    linear-gradient(180deg,#0a0710,#180d24 55%,#0a0710);
  padding-bottom:clamp(5rem,8vw,8rem);
}
.marquee{
  position:relative;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-block:1.4rem 2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.marquee::-webkit-scrollbar{display:none;}
.marquee.is-ready{overflow:hidden;}
.marquee-track{display:flex;width:max-content;will-change:transform;}
.marquee.is-ready .marquee-track{animation:marquee 78s linear infinite;}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused;}
.marquee-group{display:flex;gap:1.2rem;padding-right:1.2rem;}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.poster{
  position:relative;flex:0 0 auto;width:clamp(180px,19vw,236px);aspect-ratio:2/3;
  overflow:hidden;border:1px solid rgba(244,233,216,.2);
  background:#130b1c;color:var(--hueso);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
.poster::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(8,6,11,.2) 58%,rgba(8,6,11,.94) 100%);
}
.poster:hover{transform:translateY(-8px) rotate(-.6deg);border-color:rgba(255,107,26,.62);box-shadow:0 26px 50px -20px #000,0 0 50px -22px rgba(255,107,26,.5);}
.poster-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;}
.poster-art{position:absolute;inset:0;z-index:0;overflow:hidden;}
.poster-title{
  position:absolute;left:.9rem;right:.9rem;bottom:2.05rem;z-index:3;
  margin:0;font-size:clamp(1.25rem,2vw,1.7rem);font-weight:700;line-height:.95;
  letter-spacing:-.01em;text-wrap:balance;
}
.poster-year{
  position:absolute;left:.9rem;bottom:.9rem;z-index:3;margin:0;
  font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--calabaza);
}
.poster--light::after{background:linear-gradient(180deg,transparent 50%,rgba(226,211,182,.35) 64%,rgba(226,211,182,.97) 100%);}
.poster--light .poster-title{color:var(--tinta-papel);}
.poster--light .poster-year{color:var(--naranja-tinta);}

/* arte CSS de cada portada */
.p-nosferatu .poster-art{background:radial-gradient(circle at 68% 24%,#d9c9a5 0 14%,rgba(217,201,165,.12) 15% 28%,transparent 29%),linear-gradient(180deg,#0c161a,#04080a);}
.p-nosferatu .motif{position:absolute;left:50%;bottom:0;width:44%;height:74%;transform:translateX(-50%);background:#020405;clip-path:polygon(50% 0,68% 14%,62% 19%,82% 33%,72% 55%,100% 100%,0 100%,28% 55%,18% 33%,38% 19%,32% 14%);}
.p-nosferatu .motif::after{content:'';position:absolute;right:-20%;top:30%;width:62%;height:36%;background:repeating-linear-gradient(105deg,transparent 0 10px,#020405 10px 13px,transparent 13px 23px);transform:rotate(8deg);}

.p-psicosis .poster-art{background:#e2d3b6;}
.p-psicosis .poster-art::before{content:'';position:absolute;top:-20%;left:60%;width:6px;height:150%;transform:rotate(22deg);background:linear-gradient(90deg,#faf8f4,#8b8f94 45%,#3e434a);box-shadow:0 0 18px rgba(0,0,0,.35);}
.p-psicosis .motif{position:absolute;left:0;bottom:0;width:100%;height:54%;background:#0b090c;clip-path:polygon(0 100%,0 42%,18% 42%,18% 25%,30% 25%,30% 46%,52% 46%,52% 20%,64% 20%,64% 40%,82% 40%,82% 30%,92% 30%,92% 50%,100% 50%,100% 100%);}

.p-rosemary .poster-art{background:radial-gradient(circle at 50% 27%,#d9b9c9 0 15%,rgba(217,185,201,.1) 16% 27%,transparent 28%),linear-gradient(180deg,#6f4c68,#2a1730);}
.p-rosemary .motif{position:absolute;left:50%;bottom:22%;width:46%;aspect-ratio:1.15;transform:translateX(-50%);border-radius:50% 50% 12% 12%;background:#0b0710;}
.p-rosemary .motif::before{content:'';position:absolute;left:50%;top:-38%;width:62%;height:54%;transform:translateX(-50%);border-radius:50% 50% 0 0;border:6px solid #0b0710;}
.p-rosemary .motif::after{content:'';position:absolute;left:-18%;bottom:-10%;width:136%;height:11%;border-radius:50%;background:#0b0710;box-shadow:0 18px 0 -2px #0b0710;}

.p-exorcist .poster-art{background:#08070a;}
.p-exorcist .motif{position:absolute;left:50%;top:19%;width:52%;height:43%;transform:translateX(-50%);background:linear-gradient(180deg,#ffcf8a,#ff6b1a 60%,#a33a00);box-shadow:0 0 44px rgba(255,107,26,.4);}
.p-exorcist .motif::before{content:'';position:absolute;inset:-45% -90%;background:conic-gradient(from 180deg at 50% 0,transparent 0 38deg,rgba(255,180,100,.16) 39deg 43deg,transparent 44deg 78deg);}
.p-exorcist .motif::after{content:'';position:absolute;left:50%;top:-28%;width:10px;height:120%;transform:translateX(-50%);background:#0b0710;}
.p-exorcist .poster-art::after{content:'';position:absolute;left:50%;top:33%;width:36%;height:8px;transform:translateX(-50%);background:#0b0710;}
.p-exorcist .poster-art::before{content:'';position:absolute;left:50%;top:22%;width:70%;height:60%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(255,107,26,.12),transparent 70%);filter:blur(9px);}

.p-texas .poster-art{background:radial-gradient(circle at 50% 30%,#f2a24a 0 17%,rgba(242,162,74,.08) 18% 30%,transparent 31%),linear-gradient(180deg,#8f2f0b,#3a1004);}
.p-texas .motif{position:absolute;left:50%;top:46%;width:13%;height:48%;transform:translate(-50%,-20%) rotate(24deg);background:linear-gradient(90deg,#d9d2c4,#807a70);border-radius:2px;}
.p-texas .motif::before{content:'';position:absolute;left:100%;top:0;width:155%;height:100%;background:repeating-linear-gradient(180deg,transparent 0 8px,#0b0710 8px 11px);clip-path:polygon(0 0,100% 10%,100% 90%,0 100%);}
.p-texas .motif::after{content:'';position:absolute;left:-35%;bottom:-16%;width:70%;height:22%;background:#0b0710;transform:rotate(8deg);}

.p-halloween .poster-art{background:radial-gradient(circle at 50% 30%,#ff9a3c 0 20%,rgba(255,154,60,.1) 21% 34%,transparent 35%),linear-gradient(180deg,#ff6b1a,#a33a00);}
.p-halloween .motif{position:absolute;left:50%;top:40%;width:50%;aspect-ratio:1;transform:translateX(-50%);background:#0b0710;border-radius:50% 50% 46% 46%;box-shadow:0 20px 30px rgba(60,15,0,.3);}
.p-halloween .motif::before{content:'';position:absolute;left:47%;top:-19%;width:9%;height:22%;background:#33421a;transform:rotate(8deg);border-radius:2px 2px 0 0;}
.jack-eye{position:absolute;top:47%;z-index:2;width:13%;height:10%;background:var(--calabaza);clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 0 5px rgba(255,180,80,.7));}
.jack-eye--l{left:36%;}
.jack-eye--r{right:36%;}
.jack-mouth{position:absolute;left:39%;top:60%;z-index:2;width:22%;height:11%;background:var(--calabaza);clip-path:polygon(0 0,18% 52%,36% 8%,52% 58%,70% 4%,88% 50%,100% 0,100% 100%,0 100%);filter:drop-shadow(0 0 5px rgba(255,180,80,.65));}

.p-shining .poster-art{background:
  repeating-linear-gradient(45deg,rgba(255,107,26,.13) 0 2px,transparent 2px 26px),
  repeating-linear-gradient(-45deg,rgba(255,107,26,.09) 0 2px,transparent 2px 26px),
  linear-gradient(180deg,#2b1338,#100a16);}
.p-shining .motif{position:absolute;left:50%;bottom:19%;width:42%;height:48%;transform:translateX(-50%);background:#07050a;border:2px solid rgba(255,107,26,.38);}
.p-shining .motif::before{content:'';position:absolute;left:50%;top:18%;width:2px;height:64%;background:var(--calabaza);box-shadow:0 0 12px rgba(255,107,26,.6);}
.p-shining .motif::after{content:'';position:absolute;left:18%;top:25%;right:18%;height:2px;background:rgba(255,107,26,.28);}

.p-poltergeist .poster-art{background:radial-gradient(circle at 50% 45%,rgba(244,233,216,.18),transparent 50%),#07070a;}
.p-poltergeist .motif{position:absolute;left:50%;top:38%;width:64%;aspect-ratio:4/3;transform:translateX(-50%);background:#101014;border:4px solid #2b2b31;box-shadow:inset 0 0 34px rgba(244,233,216,.14),0 0 34px rgba(244,233,216,.08);}
.p-poltergeist .motif::before{content:'';position:absolute;inset:8%;background:repeating-linear-gradient(0deg,rgba(244,233,216,.25) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(244,233,216,.08) 0 1px,transparent 1px 4px);opacity:.5;}
.p-poltergeist .motif::after{content:'';position:absolute;left:50%;bottom:-16%;width:12%;height:16%;transform:translateX(-50%);background:#07070a;}

.p-chucky .poster-art{background:radial-gradient(circle at 50% 30%,#b51c2a 0 17%,rgba(181,28,42,.1) 18% 34%,transparent 35%),linear-gradient(180deg,#5c0a12,#1a0408);}
.p-chucky .motif{position:absolute;left:50%;top:38%;width:44%;aspect-ratio:1;transform:translateX(-50%);background:#d9b48c;border-radius:50% 50% 46% 46%;box-shadow:inset 0 -12px 20px rgba(90,30,20,.4);}
.p-chucky .motif::before{content:'';position:absolute;left:16%;top:38%;width:68%;height:18%;background:
  radial-gradient(circle at 25% 50%,#0b0710 0 22%,transparent 23%),
  radial-gradient(circle at 75% 50%,#0b0710 0 22%,transparent 23%),#2a1a12;border-radius:50%;}
.p-chucky .motif::after{content:'';position:absolute;left:31%;bottom:17%;width:38%;height:12%;background:repeating-linear-gradient(90deg,#0b0710 0 1px,transparent 1px 6px);border-bottom:2px solid #0b0710;}

.read-next{
  position:relative;display:flex;align-items:center;gap:1rem;
  width:100%;max-width:620px;margin-top:2.2rem;padding:.7rem;
  border:1px solid var(--borde);background:rgba(255,255,255,.02);
  text-align:left;transition:border-color .35s,background .35s,transform .35s var(--ease);
}
.read-next:hover{border-color:rgba(255,107,26,.45);background:rgba(255,107,26,.06);transform:translateY(-3px);}
.read-next__media{width:7.2rem;height:4.6rem;flex:0 0 auto;overflow:hidden;background:#1b1027;}
.read-next__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.read-next:hover .read-next__media img{transform:scale(1.05);}
.read-next__body{display:flex;flex-direction:column;gap:.25rem;min-width:0;}
.read-next strong{font-family:var(--display);font-size:1.18rem;font-weight:600;line-height:1.15;color:var(--hueso);}
.read-next__arrow{margin-left:auto;padding-right:.4rem;font-size:1.1rem;color:var(--calabaza);transition:transform .3s var(--ease);}
.read-next:hover .read-next__arrow{transform:translateX(4px);}

/* ---------- 06 SAGAS ---------- */
.sagas{
  position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:min(88svh,900px);
  background:#07050a;
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
}
.sagas__bg{position:absolute;inset:-9%;z-index:0;will-change:transform;}
.sagas__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.58) saturate(.88);}
.sagas__shade{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(8,6,11,.93) 0%,rgba(8,6,11,.48) 30%,rgba(8,6,11,.5) 68%,rgba(8,6,11,.96) 100%),
    radial-gradient(58% 58% at 50% 50%,rgba(8,6,11,.58),transparent 72%);
}
.sagas .section-title{font-size:clamp(2.9rem,6vw,6rem);max-width:16ch;margin-inline:auto;text-shadow:0 4px 40px rgba(0,0,0,.45);}
.sagas .section-lede{max-width:48rem;text-shadow:0 2px 18px rgba(0,0,0,.55);}
.saga-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;max-width:800px;margin:1.7rem auto 2rem;}
.saga-chips li{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .72rem;
  border:1px solid rgba(244,233,216,.24);background:rgba(8,6,11,.38);
  backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hueso);
}
.saga-chips li span{color:var(--calabaza);}

/* ---------- 07 STEPHEN KING ---------- */
.section--king{
  background:
    radial-gradient(55% 55% at 18% 20%,rgba(255,107,26,.11),transparent 62%),
    radial-gradient(50% 55% at 88% 80%,rgba(86,33,120,.2),transparent 68%),
    linear-gradient(180deg,#0a0710,#150c1f 58%,#0a0710);
}
.king-visual{max-width:640px;margin-inline:auto;}
.king-frame{
  position:relative;z-index:2;margin:0;padding:1rem;
  background:#0c0811;border:1px solid var(--borde);
  box-shadow:0 45px 90px -45px #000;
  transform:rotate(-1.4deg);
}
.king-frame img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.92) contrast(1.04);}
.king-frame .filmstrip--frame:first-child{margin-bottom:.9rem;}
.king-frame .filmstrip--frame:last-of-type{margin-top:.9rem;}
.king-stamp{
  position:absolute;right:-.8rem;top:-1.4rem;z-index:3;
  display:grid;place-items:center;width:5rem;height:5rem;border-radius:50%;
  border:1px solid rgba(255,107,26,.55);background:rgba(8,6,11,.75);
  color:var(--calabaza);font-size:1.8rem;font-weight:700;letter-spacing:.03em;
  transform:rotate(10deg);backdrop-filter:blur(5px);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.9);
}

/* ---------- FOOTER ---------- */
.footer{position:relative;background:#050308;overflow:hidden;}
.footer::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 50% at 50% 0%,rgba(255,107,26,.07),transparent 70%);
}
.footer .shell{position:relative;z-index:2;padding-inline:1.35rem;}
@media(min-width:768px){.footer .shell{padding-inline:2rem;}}
.footer__quote{
  margin:0;max-width:14ch;
  font-size:clamp(2.9rem,7vw,6.8rem);font-weight:600;font-style:italic;line-height:.9;
  letter-spacing:-.03em;color:var(--hueso);
}
.footer__quote em{color:var(--calabaza);}
.footer__bottom{
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  margin-top:clamp(3rem,6vw,5rem);padding-top:1.8rem;border-top:1px solid var(--borde);
  text-align:center;
}
.footer__brand{display:flex;align-items:center;justify-content:center;}
.footer__top{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hueso);border-bottom:1px solid rgba(244,233,216,.25);padding-bottom:.25rem;transition:color .3s,border-color .3s;}
.footer__top:hover{color:var(--calabaza);border-color:var(--calabaza);}

/* ---------- DECORACIONES FIJAS ---------- */
.deco{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none;}
.web{position:absolute;width:min(23vw,260px);aspect-ratio:1;opacity:.3;mix-blend-mode:screen;}
.web--tl{top:0;left:0;}
.web--tr{top:0;right:0;}
.web::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-conic-gradient(from 0deg at 0 0,rgba(244,233,216,.3) 0deg .55deg,transparent .55deg 14deg),
    repeating-radial-gradient(circle at 0 0,transparent 0 22px,rgba(244,233,216,.2) 22px 23px,transparent 23px 42px);
  -webkit-mask-image:radial-gradient(circle at 0 0,#000 0 68%,transparent 100%);
  mask-image:radial-gradient(circle at 0 0,#000 0 68%,transparent 100%);
}
.web--tr::before{
  background-image:
    repeating-conic-gradient(from 90deg at 100% 0,rgba(244,233,216,.3) 0deg .55deg,transparent .55deg 14deg),
    repeating-radial-gradient(circle at 100% 0,transparent 0 22px,rgba(244,233,216,.2) 22px 23px,transparent 23px 42px);
  -webkit-mask-image:radial-gradient(circle at 100% 0,#000 0 68%,transparent 100%);
  mask-image:radial-gradient(circle at 100% 0,#000 0 68%,transparent 100%);
}
.web-spider{position:absolute;left:37%;top:37%;transform-origin:top center;animation:spider-swing 7s ease-in-out infinite;}
.web-thread{display:block;width:1px;height:5.2rem;margin:0 auto;background:linear-gradient(180deg,rgba(244,233,216,.4),rgba(244,233,216,.04));}
.web-body{position:relative;display:block;width:9px;height:11px;margin:-2px auto 0;border-radius:50%;background:#0a0710;box-shadow:0 0 0 1px rgba(244,233,216,.16);}
.web-body::before,.web-body::after{content:'';position:absolute;top:2px;width:13px;height:8px;border-top:1px solid #0a0710;border-radius:50%;}
.web-body::before{left:-11px;transform:rotate(-18deg);}
.web-body::after{right:-11px;transform:rotate(18deg);}
@keyframes spider-swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

.bat{
  position:absolute;top:4%;left:-12vw;
  font-size:46px;width:1.9em;height:.9em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 46'%3E%3Cpath d='M50 13C47 7 43 6 39 9C35 2 26 0 17 3C20 7 18 12 12 13C18 18 26 22 33 28C38 26 44 28 48 33L50 40L52 33C56 28 62 26 67 28C74 22 82 18 88 13C82 12 80 7 83 3C74 0 65 2 61 9C57 6 53 7 50 13Z' fill='%23241430'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 1px rgba(244,233,216,.6)) drop-shadow(0 0 16px rgba(255,107,26,.16));
  animation:bat-fly 42s linear infinite;will-change:transform;
}
.bat--2{top:8%;font-size:30px;animation-duration:56s;animation-delay:-18s;opacity:.8;}
.bat--3{top:12%;font-size:20px;animation-duration:48s;animation-delay:-31s;opacity:.6;}
.bat-body,.bat-wing{display:none;}
.bat-body{position:absolute;left:50%;top:.13em;width:.18em;height:.33em;transform:translateX(-50%);border-radius:50% 50% 45% 45%;background:currentColor;}
.bat-body::before,.bat-body::after{content:'';position:absolute;top:-.06em;width:0;height:0;border-left:.055em solid transparent;border-right:.055em solid transparent;border-bottom:.1em solid currentColor;}
.bat-body::before{left:-.01em;transform:rotate(-18deg);}
.bat-body::after{right:-.01em;transform:rotate(18deg);}
.bat-wing{position:absolute;top:.09em;width:.46em;height:.37em;background:currentColor;}
.bat-wing--l{
  right:50%;
  clip-path:polygon(100% 20%,78% 0,62% 22%,45% 2%,30% 26%,8% 18%,16% 45%,0 58%,28% 62%,36% 84%,54% 66%,72% 88%,88% 62%,100% 68%);
  transform-origin:100% 50%;animation:wing-l .52s ease-in-out infinite alternate;
}
.bat-wing--r{
  left:50%;transform:scaleX(-1);
  clip-path:polygon(100% 20%,78% 0,62% 22%,45% 2%,30% 26%,8% 18%,16% 45%,0 58%,28% 62%,36% 84%,54% 66%,72% 88%,88% 62%,100% 68%);
  transform-origin:0% 50%;animation:wing-r .52s ease-in-out infinite alternate;
}
@keyframes wing-l{from{transform:rotate(8deg)}to{transform:rotate(-22deg)}}
@keyframes wing-r{from{transform:scaleX(-1) rotate(8deg)}to{transform:scaleX(-1) rotate(-22deg)}}
@keyframes bat-fly{
  0%{transform:translate3d(-14vw,0,0) rotate(5deg);}
  25%{transform:translate3d(20vw,-3vh,0) rotate(-3deg);}
  50%{transform:translate3d(50vw,2vh,0) rotate(5deg);}
  75%{transform:translate3d(80vw,-4vh,0) rotate(-2deg);}
  100%{transform:translate3d(122vw,1vh,0) rotate(4deg);}
}

.pumpkin{position:absolute;left:-.6rem;bottom:-.8rem;width:1.22em;height:1.12em;font-size:60px;opacity:.55;}
.pumpkin--right{left:auto;right:-.6rem;bottom:-.8rem;font-size:44px;transform:scaleX(-1);opacity:.45;}
.pumpkin-glow{
  position:absolute;left:50%;bottom:.05em;width:2.4em;height:1.5em;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(255,140,40,.5),transparent 70%);
  filter:blur(13px);animation:pumpkin-pulse 4s ease-in-out infinite;
}
.pumpkin-body{
  position:absolute;left:50%;bottom:0;width:1.2em;height:.78em;transform:translateX(-50%);
  border-radius:48% 48% 44% 44% / 55% 55% 45% 45%;
  background:radial-gradient(ellipse at 35% 30%,#ffb067 0%,#ff6b1a 38%,#c44300 72%,#782500 100%);
  box-shadow:inset .14em 0 .2em -.08em rgba(60,10,0,.65),inset -.14em 0 .2em -.08em rgba(60,10,0,.65),0 .2em .4em rgba(0,0,0,.4);
}
.pumpkin-body::before,.pumpkin-body::after{content:'';position:absolute;top:6%;bottom:6%;width:26%;border-radius:50%;background:rgba(120,35,0,.16);filter:blur(1px);}
.pumpkin-body::before{left:17%;}
.pumpkin-body::after{right:17%;}
.pumpkin-stem{position:absolute;left:50%;top:.02em;width:.12em;height:.27em;transform:translateX(-30%) rotate(10deg);background:linear-gradient(180deg,#6d7d3a,#33421a);border-radius:.04em .07em 0 0;}
.pumpkin-face{position:absolute;inset:0;z-index:2;animation:pumpkin-flicker 3.8s steps(2,end) infinite;}
.pumpkin-face i{position:absolute;background:#ffd27a;filter:drop-shadow(0 0 .06em #ffb347);}
.eye--l{left:24%;top:32%;width:18%;height:16%;clip-path:polygon(50% 0,100% 100%,0 100%);}
.eye--r{right:24%;top:32%;width:18%;height:16%;clip-path:polygon(50% 0,100% 100%,0 100%);}
.mouth{left:28%;bottom:21%;width:44%;height:18%;clip-path:polygon(0 0,18% 55%,36% 10%,52% 60%,70% 5%,88% 50%,100% 0,100% 100%,0 100%);}
@keyframes pumpkin-pulse{0%,100%{opacity:.55;transform:translateX(-50%) scale(.95)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
@keyframes pumpkin-flicker{0%,100%{opacity:.96}50%{opacity:.72}}

.embers{position:absolute;inset:0;}
.embers span{
  position:absolute;bottom:-10px;width:2px;height:2px;border-radius:50%;
  background:var(--calabaza);box-shadow:0 0 7px 1px rgba(255,107,26,.7);
  opacity:0;animation:ember-rise 15s linear infinite;
}
.embers span:nth-child(1){left:8%;animation-delay:0s;animation-duration:17s;}
.embers span:nth-child(2){left:21%;animation-delay:-4s;animation-duration:21s;}
.embers span:nth-child(3){left:34%;animation-delay:-9s;animation-duration:15s;}
.embers span:nth-child(4){left:47%;animation-delay:-2s;animation-duration:23s;}
.embers span:nth-child(5){left:61%;animation-delay:-12s;animation-duration:18s;}
.embers span:nth-child(6){left:73%;animation-delay:-6s;animation-duration:20s;}
.embers span:nth-child(7){left:86%;animation-delay:-15s;animation-duration:16s;}
.embers span:nth-child(8){left:94%;animation-delay:-8s;animation-duration:24s;}
@keyframes ember-rise{0%{transform:translateY(0) scale(.6);opacity:0}8%{opacity:.7}100%{transform:translateY(-102vh) scale(1.2);opacity:0}}

.vignette{position:fixed;inset:0;z-index:55;pointer-events:none;background:radial-gradient(ellipse at center,transparent 56%,rgba(0,0,0,.32) 100%);}
.grain{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.04;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1023px){
  .hero-moon{top:32%;left:85%;width:clamp(210px,34vw,330px);}
  .book-fan{max-width:340px;}
}
@media(max-width:767px){
  .hero-side{display:none;}
  .hero-moon{top:26%;left:88%;width:min(46vw,240px);opacity:.5;}
  .hero-tagline{margin-top:1.1rem;text-shadow:0 2px 24px rgba(8,6,11,.9);}
  .hero-actions{flex-direction:column;gap:.9rem;}
  .hero-title{margin-top:.62em;}
  .scroll-cue{bottom:.9rem;}
  .photo-frame{transform:rotate(-1.2deg);}
  .stamp{right:.2rem;bottom:-1.2rem;width:4.8rem;height:4.8rem;}
  .stamp span{font-size:1.65rem;}
  .mini-feature__text{display:none;}
  .mini-feature__media{width:4.6rem;height:4.2rem;}
  .mini-feature strong{font-size:1.05rem;}
  .section-title{font-size:clamp(2.4rem,8.5vw,3.4rem);}
  .scroller-hint{display:none;}
  .scroller-progress{max-width:none;}
  .book-panel{padding:1.25rem;}
  .book-fan{width:min(100%,330px);aspect-ratio:330/270;}
  .poster{width:168px;}
  .marquee.is-ready .marquee-track{animation-duration:58s;}
  .sagas{min-height:auto;}
  .sagas .section-title{font-size:clamp(2.5rem,9vw,3.6rem);}
  .saga-chips{max-width:36rem;}
  .saga-chips li{font-size:.5rem;padding:.48rem .62rem;}
  .king-frame{transform:rotate(-.8deg);padding:.7rem;}
  .king-stamp{right:-.2rem;top:-1rem;width:4.2rem;height:4.2rem;font-size:1.5rem;}
  .footer__quote{font-size:clamp(2.6rem,11vw,4rem);}
  .web{width:130px;opacity:.26;}
  .web--tr{width:110px;}
  .web-thread{height:2.6rem;}
  .bat,.pumpkin{display:none;}
  .embers{display:none;}
  .read-next{flex-wrap:wrap;}
  .read-next__media{width:5.2rem;height:3.5rem;}
  .read-next strong{font-size:1.02rem;}
  .read-next__arrow{display:none;}
}
@media(max-width:479px){
  .hero-brand span{display:none;}
  .mini-feature{padding:.7rem;gap:.7rem;}
  .mini-feature__media{width:4rem;height:3.7rem;}
  .mini-feature__arrow{display:none;}
  .scroller-ui{gap:.8rem;}
  .scroller-buttons button{width:2.4rem;height:2.4rem;}
  .book-fan{width:min(100%,290px);aspect-ratio:290/240;}
  .web--tr{display:none;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;filter:none;transition:none;}
  .hero-moon,.hero-stars,.hero-fog,.scroll-cue__dot,.bat,.bat-wing,.pumpkin-glow,.pumpkin-face,.web-spider,.embers span,.marquee.is-ready .marquee-track{animation:none!important;}
  .marquee.is-ready{overflow-x:auto;}
  .marquee-track{transform:none!important;}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}