/* TEMA HALLOWEEN · se carga después de style.css; solo cambia lo visual. */
@font-face{font-family:'Creepster';src:url(creepster.woff2) format('woff2');font-display:swap;}
:root{
  --yellow:#f7c500; --yellow-dim:#8a6a00;
  --paper:#0c0a0f; --black:#050407; --black-2:#0e0c12; --black-3:#17141c;
  --ink:#e9e2ee; --ink-muted:#a79db0; --line:#2a2230; --line-dark:#2a2230;
  --sangre:#a10000;
}
body{background:#0c0a0f;}
/* viñeta oscura en toda la página */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75) 100%);}
/* sangre que gotea bajo la cabecera */

header::after{content:"";position:absolute;left:0;right:0;top:100%;height:46px;z-index:6;pointer-events:none;
  background:url(sangre.svg) 0 0/100% 100% no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));}
/* araña colgando que sube y baja */
.nav-inner{position:relative;}
.nav-inner::after{content:"";position:absolute;right:22%;top:100%;width:72px;height:130px;filter:drop-shadow(0 0 4px rgba(247,197,0,.5));z-index:7;pointer-events:none;
  background:url(arana.svg) bottom/contain no-repeat;transform-origin:top;animation:gwp-arana 6s ease-in-out infinite;}
@keyframes gwp-arana{0%,100%{height:70px}50%{height:150px}}
.brand-name{font-family:'Creepster',cursive;font-weight:400;letter-spacing:.04em;color:var(--yellow);}
.brand-name::after{content:" 🎃";}
/* titulares tétricos */
.hero h1, .topaketa h2, .section-head h2{font-family:'Creepster',cursive;font-weight:400;letter-spacing:.03em;
  color:#f1e7d8;text-shadow:0 0 22px rgba(247,197,0,.4),0 3px 0 #3a0000;}
.hero h1 em{color:var(--sangre);text-shadow:0 0 16px rgba(255,0,0,.6);}
.hero h1{animation:gwp-parpadeo 7s infinite;}
@keyframes gwp-parpadeo{0%,92%,100%{opacity:1}93%{opacity:.35}94%{opacity:1}96%{opacity:.5}97%{opacity:1}}
/* portada: luna llena, murciélagos, niebla y tumbas */
.hero{position:relative;}
.hero-slider-overlay{background:linear-gradient(180deg,rgba(8,4,12,.55),rgba(30,0,0,.75))!important;}
.hero::before{content:"";position:absolute;right:6%;top:8%;width:min(26vw,240px);aspect-ratio:1;z-index:2;pointer-events:none;
  background:url(luna.svg) center/contain no-repeat;filter:drop-shadow(0 0 40px rgba(255,220,150,.55));opacity:.9;}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:url(murcielago.svg) 12% 18%/70px no-repeat,url(murcielago.svg) 80% 30%/50px no-repeat,
    url(murcielago.svg) 64% 14%/34px no-repeat,url(murcielago.svg) 90% 10%/26px no-repeat,
    linear-gradient(0deg,rgba(200,200,220,.16),transparent 30%);
  animation:gwp-vuelo 8s ease-in-out infinite alternate;}
@keyframes gwp-vuelo{to{background-position:22% 8%,70% 40%,58% 22%,84% 18%,0 0;}}
.hero-inner{position:relative;z-index:4;}
/* cementerio al pie de la foto, por detrás del texto */
.hero-slider::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:110px;z-index:2;pointer-events:none;
  background:url(calabaza.svg) 8% 100%/86px no-repeat,url(calabaza.svg) 31% 100%/60px no-repeat,url(calabaza.svg) 74% 100%/72px no-repeat,url(calabaza.svg) 93% 100%/54px no-repeat,url(lapida.svg) center bottom/auto 100% repeat-x;}
/* tarjetas: telaraña en la esquina */
.hub-card, .card{background:#121016;border-color:#2a2230;position:relative;overflow:hidden;}
.hub-card::before, .card::before{content:"";position:absolute;right:0;top:0;width:70px;height:70px;
  background:url(telarana.svg) no-repeat;background-size:70px;transform:scaleX(-1);opacity:.7;pointer-events:none;}
.hub-card:hover{box-shadow:0 0 0 1px var(--yellow),0 0 24px rgba(247,197,0,.35);}
.btn-fill{box-shadow:0 0 18px rgba(247,197,0,.45);}
.topaketa-date{box-shadow:0 0 30px rgba(247,197,0,.4);}
footer{border-top:3px solid var(--sangre);}
/* fantasma que flota por la portada */
.hero-inner::after{content:"";position:absolute;right:-4%;top:-20px;width:150px;height:188px;pointer-events:none;
  background:url(fantasma.svg) center/contain no-repeat;filter:drop-shadow(0 0 18px rgba(255,255,255,.55));
  animation:gwp-fantasma 6s ease-in-out infinite;}
@keyframes gwp-fantasma{0%,100%{transform:translate(0,0) rotate(-4deg);opacity:.85}50%{transform:translate(-40px,30px) rotate(5deg);opacity:.55}}
/* el vampiro asoma en el bloque del evento */
.topaketa{position:relative;overflow:hidden;}
.topaketa-inner{position:relative;}
.topaketa::after{content:"";position:absolute;right:-10px;bottom:-6px;width:270px;height:297px;pointer-events:none;z-index:1;
  background:url(vampiro.svg) bottom/contain no-repeat;animation:gwp-asoma 7s ease-in-out infinite;}
@keyframes gwp-asoma{0%,100%{transform:translateY(55%)}35%,65%{transform:translateY(0)}}
.topaketa-inner{z-index:2;}
/* calabaza en cada tarjeta */
.hub-card::after{content:"";position:absolute;right:12px;bottom:10px;width:40px;height:38px;pointer-events:none;
  background:url(calabaza.svg) center/contain no-repeat;opacity:.9;transition:transform .2s;}
.hub-card:hover::after{transform:scale(1.25) rotate(-8deg);filter:drop-shadow(0 0 10px #ffd84a);}
/* franja amarilla con murciélagos y telarañas */
.cta-band{position:relative;overflow:hidden;background:var(--yellow) url(murcielago.svg) 6% 30%/80px no-repeat;}
.cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(murcielago.svg) 88% 25%/60px no-repeat,url(murcielago.svg) 78% 70%/36px no-repeat,url(telarana.svg) 0 0/140px no-repeat;filter:invert(1) brightness(0);opacity:.85;}
/* pie: cementerio con calabazas y fantasmas */
footer{position:relative;padding-top:110px;background:#000 url(calabaza.svg) 12% 22px/56px no-repeat;}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:90px;pointer-events:none;
  background:url(fantasma.svg) 30% 6px/52px no-repeat,url(calabaza.svg) 70% 26px/60px no-repeat,url(fantasma.svg) 88% 0/40px no-repeat,url(lapida.svg) center bottom/auto 60px repeat-x;opacity:.9;}
@media (max-width:760px){.hero-inner::after{width:70px;height:90px;right:0;top:-40px;}.topaketa::after{width:120px;height:130px;}.nav-inner::after{right:30%;}.hero::before{width:110px;top:4%;}}
@media (prefers-reduced-motion:reduce){.hero::after,.nav-inner::after,.hero h1,.hero-inner::after,.topaketa::after{animation:none;}}