:root{
  --bg:#060303; --bg-mid:#140606; --blood:#ff1a1a; --blood-deep:#8b0000;
  --accent:#ff3b3b; --text:#fff; --muted:#c7c7c7; --ring:#ff1a1a80;
  --radius:14px; --shadow:0 10px 30px rgba(255,0,0,.18);
}

/* WRAPPER + BACKDROP (fondo negro global dentro del wrapper) */
.sb-halloween{position:relative; isolation:isolate; color:var(--text);}
.sb-halloween *{box-sizing:border-box}
.sb-halloween .backdrop{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%, #1a0000 0%, transparent 55%),
    radial-gradient(900px 500px at 80% -10%, #1a0000 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-mid) 50%, var(--bg) 100%);
}

/* Neutraliza efectos del theme (The7) */
.sb-halloween h1,.sb-halloween h2,.sb-halloween h3{letter-spacing:normal!important; text-transform:none!important; background:none!important; -webkit-text-fill-color:currentColor!important; margin:0}
.sb-halloween a{color:#fff; text-decoration:none}
.sb-halloween img{max-width:100%; height:auto; display:block}

/* Layout base */
.sb-halloween .wrap{max-width:min(1120px,92vw); margin-inline:auto; padding-inline:clamp(12px,2vw,24px)}
.sb-halloween header.hero{position:relative; z-index:3; padding: clamp(40px,7vw,96px) 0 0}
.sb-halloween .brand{display:flex; justify-content:center; align-items:center}
.sb-halloween .brand picture img{max-width:min(860px,92%); border-radius:10px; filter:drop-shadow(0 0 20px rgba(255,0,0,.45)); margin-inline:auto}

/* Títulos */
.sb-halloween h1.title{font-family:"Nosifer",serif; font-weight:400; text-align:center; line-height:1.05; letter-spacing:.02em;
  font-size:clamp(34px,7vw,92px); color:var(--blood); text-shadow:2px 2px 0 var(--blood-deep), 0 0 28px rgba(255,0,0,.5)}
.sb-halloween .title.glitch{position:relative; display:inline-block}
.sb-halloween .title.glitch::before,.sb-halloween .title.glitch::after{content:attr(data-text); position:absolute; inset:0; mix-blend-mode:screen}
.sb-halloween .title.glitch::before{transform:translate(2px,0); clip-path:polygon(0 0,100% 0,100% 46%,0 46%); color:#f33; animation:gl1 2s infinite}
.sb-halloween .title.glitch::after{transform:translate(-2px,0); clip-path:polygon(0 54%,100% 54%,100% 100%,0 100%); color:#f88; animation:gl2 2.5s infinite}
@keyframes gl1{0%{transform:translate(1px,0)}50%{transform:translate(0,0)}100%{transform:translate(1px,0)}}
@keyframes gl2{0%{transform:translate(-1px,0)}50%{transform:translate(0,0)}100%{transform:translate(-1px,0)}}
.sb-halloween p.kicker{font-family:"Creepster",serif; text-align:center; margin:.3rem auto 1.2rem; font-size:clamp(16px,3.4vw,28px); letter-spacing:.04em}

/* Meta cards */
.sb-halloween .hero-meta{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin: clamp(16px,3vw,36px) auto}
.sb-halloween .card{position:relative; background:linear-gradient(135deg, rgba(139,0,0,.18) 0%, rgba(0,0,0,.78) 100%); border:1px solid var(--blood-deep); border-radius:var(--radius); padding:18px 16px!important; box-shadow:var(--shadow); overflow:hidden}
.sb-halloween .card:after{content:""; position:absolute; inset:-2px; border-radius:inherit; background:conic-gradient(from 200deg, transparent 0 70%, var(--ring) 85%, transparent 100%); filter:blur(12px); opacity:.5; z-index:0}
.sb-halloween .card>*{position:relative; z-index:1}
.sb-halloween .card h3{margin:0 0 .35rem; font-size:clamp(16px,2.6vw,22px); color:var(--blood)}
.sb-halloween .card p{margin:0; font-size:clamp(14px,2.4vw,18px); color:var(--text); letter-spacing:.02em}

/* Countdown más pequeño y con aire */
.sb-halloween .countdown{display:flex; gap:8px; justify-content:center; margin:8px 0 0; padding:6px 0}
.sb-halloween .cd-box{min-width:48px; padding:8px 10px; background:#0c0607!important; border:1px solid #311!important; border-radius:10px!important; text-align:center}
.sb-halloween .cd-box .num{font-size:clamp(18px,4.5vw,28px)}
.sb-halloween .cd-box .lab{font-size:11px; color:var(--muted); letter-spacing:.08em}

/* Secciones */
.sb-halloween section.section{position:relative; z-index:3; padding: clamp(28px,5.5vw,72px) 0}
.sb-halloween .section h2{font-family:"Nosifer"; font-weight:400; text-align:center; color:var(--blood); font-size:clamp(26px,6vw,54px); text-shadow:2px 2px 0 var(--blood-deep), 0 0 24px rgba(255,0,0,.35); margin:0 0 18px}
.sb-halloween .section p.lead{max-width:62ch; margin:.25rem auto 1.25rem; text-align:center; font-size:clamp(15px,2.8vw,20px); color:#eee}
.sb-halloween .grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px}

/* Galería: fuerza visibilidad por encima de cualquier overlay */
.sb-halloween .gallery{position:relative; z-index:4}
.sb-halloween .gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.sb-halloween .gallery-item{position:relative; overflow:hidden; border-radius:16px; border:2px solid var(--blood-deep); box-shadow:var(--shadow)}
.sb-halloween .gallery-item img{display:block; width:100%; height:auto; opacity:1; visibility:visible}

/* DJ Cards */
.sb-halloween .dj{background:linear-gradient(135deg,#6c0000 0%, #000 100%); border:1px solid var(--blood); border-radius:12px; padding:14px; text-align:center; transition:transform .28s ease, box-shadow .28s ease; position:relative; overflow:hidden}
.sb-halloween .dj:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 0 30px rgba(255,0,0,.35)}
.sb-halloween .dj .badge{position:absolute; top:6px; right:8px; font-size:18px; opacity:.5}
.sb-halloween .dj .name{font-size:clamp(16px,2.6vw,20px); letter-spacing:.05em}
.sb-halloween .dj .role{font-size:12px; color:#ff9c9c; letter-spacing:.08em}

/* Imagen “Especial Halloween” centrada */
#logo2-section{display:flex; align-items:center; justify-content:center; position:relative; z-index:3}
#logo2-section .frame{margin:0 auto; max-width:820px}
@media (max-width:520px){ #logo2-section .frame{max-width:92%} }

/* CTA + Footer al frente */
.sb-halloween .cta{ text-align:center; padding: clamp(34px,6vw,80px) 0; background:linear-gradient(180deg, rgba(139,0,0,.22) 0%, transparent 100%); position:relative; z-index:3 }
.sb-halloween .cta h3{font-family:"Nosifer"; font-weight:400; font-size:clamp(24px,5.5vw,48px); margin:0 0 14px; color:var(--blood)}
.sb-halloween .actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center}
.sb-halloween .btn{display:inline-flex; gap:.6em; align-items:center; justify-content:center; padding:14px 22px; border-radius:999px; border:2px solid #fff; background:linear-gradient(135deg, var(--accent), var(--blood-deep)); color:#fff; text-decoration:none; letter-spacing:.12em; font-size:clamp(14px,2.8vw,18px); text-transform:uppercase; box-shadow:0 10px 30px rgba(255,0,0,.25), inset 0 0 12px rgba(255,255,255,.14); transition:transform .2s ease, box-shadow .2s ease}
.sb-halloween .btn:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 14px 40px rgba(255,0,0,.35), inset 0 0 18px rgba(255,255,255,.2)}
.sb-halloween .btn.ghost{background:transparent; border-color:var(--blood); box-shadow:none}

.sb-halloween footer{border-top:2px solid var(--blood-deep); margin-top:40px; padding:28px 0 44px; text-align:center; position:relative; z-index:3}
.sb-halloween footer p{margin:.25rem 0; font-size:clamp(14px,2.6vw,18px)}
.sb-halloween .social{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:10px}
.sb-halloween .s-card{width:130px; height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; color:#fff; border:2px solid var(--blood); border-radius:16px; background:linear-gradient(145deg, rgba(26,0,0,.8) 0%, rgba(0,0,0,.9) 100%); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.sb-halloween .s-card:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 0 30px rgba(255,0,0,.28); border-color:#fff}
.sb-halloween .s-card .ico{font-size:34px; line-height:1}
.sb-halloween .s-card .tx{font-size:15px; letter-spacing:.12em}

/* FX: ahora por detrás del contenido */
.sb-halloween .fog,.sb-halloween .fog:before,.sb-halloween .fog:after{
  position:absolute; inset:-10%; pointer-events:none; z-index:1;
  content:""; background: radial-gradient(60% 40% at 20% 10%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(70% 50% at 80% 0%, rgba(255,255,255,.05), transparent 60%);
  filter: blur(30px) saturate(120%); animation:fog-move 30s linear infinite;
}
.sb-halloween .fog:after{animation-duration:48s; opacity:.6}
.sb-halloween .fog:before{animation-duration:60s; opacity:.4}
@keyframes fog-move{0%{transform:translateX(-6%) translateY(-2%)}50%{transform:translateX(4%) translateY(2%)}100%{transform:translateX(-6%) translateY(-2%)}}

.sb-halloween .drops{position:absolute; inset:0; pointer-events:none; z-index:1}
.sb-halloween .drop{position:absolute; top:-40px; width:14px; height:22px; border-radius:50% 50% 40% 40%/60% 60% 40% 40%; background:var(--blood-deep); box-shadow:0 0 10px var(--blood); opacity:.8; animation:fall var(--d,7s) linear infinite}
.sb-halloween .drop:nth-child(2){left:12%; --d:6s; animation-delay:1s}
.sb-halloween .drop:nth-child(3){left:24%; --d:7.8s; animation-delay:.4s}
.sb-halloween .drop:nth-child(4){left:38%; --d:6.6s; animation-delay:1.8s}
.sb-halloween .drop:nth-child(5){left:52%; --d:8.4s; animation-delay:.8s}
.sb-halloween .drop:nth-child(6){left:68%; --d:7.2s; animation-delay:1.2s}
.sb-halloween .drop:nth-child(7){left:82%; --d:6.2s; animation-delay:.6s}
.sb-halloween .drop:nth-child(8){left:93%; --d:7.4s; animation-delay:1.4s}
@keyframes fall{to{transform:translateY(110dvh)}}

/* Responsive extras */
@media (max-width:768px){
  .sb-halloween .hero-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .sb-halloween .hero-meta{grid-template-columns:1fr}
  .sb-halloween .countdown{gap:6px; padding:4px 0}
  .sb-halloween .cd-box{min-width:42px; padding:6px 8px}
  .sb-halloween .cd-box .num{font-size:22px}
  .sb-halloween .cd-box .lab{font-size:10px}
}