/* ===== PRUEBA LOCAL: tema de Halloween (no se publica; ver .vercelignore) =====
   Se carga solo desde halloween.html. La intro de neón no se toca. */
:root {
  --red: #ff6b00;            /* naranja calabaza */
  --red-glow: rgba(255, 107, 0, .55);
  --amber: #b56bff;          /* morado bruja */
  --green: #7cfc3f;          /* verde tóxico */
  --bg: #08060c;
  --bg-2: #0e0a14;
  --card: #15101d;
}

/* ---------- Hero: luna, niebla y relámpagos ---------- */
.hero__bg { background:
    radial-gradient(ellipse 60% 45% at 15% 85%, rgba(255,107,0,.35), transparent 70%),
    radial-gradient(ellipse 55% 40% at 88% 75%, rgba(124,252,63,.18), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(181,107,255,.35), transparent 70%),
    var(--bg); }
.moon { position: absolute; z-index: -1; /* encima de .hero__shade para que brille */ top: 9%; right: 9%; width: clamp(120px, 18vw, 230px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 35%, #fffbe6, #f3dc9c 45%, #d9b664 70%, #b8913f);
  box-shadow: 0 0 40px rgba(255, 230, 160, .55), 0 0 120px rgba(255, 200, 100, .3), 0 0 220px rgba(255, 140, 0, .2);
  animation: moonGlow 6s ease-in-out infinite alternate; }
.moon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .35;
  background: radial-gradient(circle at 30% 60%, #a88440 0 9%, transparent 10%), radial-gradient(circle at 62% 30%, #a88440 0 6%, transparent 7%), radial-gradient(circle at 66% 68%, #a88440 0 12%, transparent 13%); }
@keyframes moonGlow { to { box-shadow: 0 0 60px rgba(255, 230, 160, .7), 0 0 160px rgba(255, 200, 100, .4), 0 0 260px rgba(255, 140, 0, .25); } }
.fog { position: absolute; z-index: 1; left: -50%; right: -50%; bottom: -40px; height: 46%; pointer-events: none; opacity: .55;
  background: radial-gradient(ellipse 25% 60% at 20% 70%, rgba(200,190,230,.28), transparent 70%), radial-gradient(ellipse 30% 55% at 55% 80%, rgba(200,190,230,.22), transparent 70%), radial-gradient(ellipse 25% 60% at 85% 75%, rgba(200,190,230,.26), transparent 70%);
  filter: blur(20px); animation: fogDrift 28s linear infinite alternate; }
.fog--back { opacity: .35; animation-duration: 40s; animation-direction: alternate-reverse; bottom: 10%; }
@keyframes fogDrift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.lightning { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(200, 180, 255, .55); opacity: 0; animation: flash 11s infinite; }
@keyframes flash { 0%, 88%, 100% { opacity: 0; } 88.5% { opacity: .9; } 89% { opacity: 0; } 89.6% { opacity: .55; } 90.2% { opacity: 0; } }
.lights circle:nth-of-type(odd) { fill: #ff8a1f; }
.lights circle:nth-of-type(even) { fill: #c58bff; }

.hero__content { position: relative; z-index: 2; } /* encima del cementerio y la niebla */

/* Cartel de Halloween arriba del logo */
.boo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: .55em 1.2em; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .85rem;
  background: rgba(255,107,0,.14); border: 1px solid rgba(255,107,0,.6); box-shadow: 0 0 18px rgba(255,107,0,.35); animation: fadeUp 1s 1.9s both, booPulse 2.4s 3s ease-in-out infinite; }
.boo b { color: var(--red); }
@keyframes booPulse { 50% { box-shadow: 0 0 30px rgba(255,107,0,.6); } }

/* ---------- Baba que chorrea arriba de cada sección ---------- */
.section { overflow: clip; } /* clip (no hidden) para no romper el "sticky" de Reservar */
.slime { position: absolute; top: 0; left: 0; width: 100%; height: 70px; z-index: 0; pointer-events: none; }
.slime path { fill: var(--slime, #7cfc3f); filter: drop-shadow(0 0 8px var(--slime, #7cfc3f)); opacity: .85; }
.slime .drip { transform-box: fill-box; transform-origin: top; animation: drip var(--t, 5s) ease-in-out infinite; }
@keyframes drip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.45); } }

/* ---------- Telarañas y arañas ---------- */
.web { position: absolute; z-index: 0; width: clamp(110px, 16vw, 200px); pointer-events: none; opacity: .5; }
.web svg { width: 100%; display: block; stroke: #d8d0ea; stroke-width: 1; fill: none; }
.web--tl { top: 0; left: 0; }
.web--tr { top: 0; right: 0; transform: scaleX(-1); }
.spider { position: absolute; z-index: 2; top: 0; width: 34px; pointer-events: auto; cursor: pointer; animation: dangle 4s ease-in-out infinite; transform-origin: top center; }
.spider::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: var(--len, 140px); background: rgba(220,210,240,.6); }
.spider svg { width: 100%; display: block; }
.spider:hover { animation: dangle 4s ease-in-out infinite, climb .6s ease-out forwards; }
@keyframes dangle { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes climb { to { translate: 0 -60px; } }

/* ---------- Murciélagos volando ---------- */
.bats { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.bat { position: absolute; width: var(--w, 46px); left: -60px; top: var(--y, 20%); animation: fly var(--d, 9s) linear forwards; }
.bat svg { width: 100%; display: block; fill: #0b0710; filter: drop-shadow(0 0 4px rgba(255,107,0,.7)); animation: flap .18s ease-in-out infinite alternate; transform-origin: center 40%; }
@keyframes flap { to { transform: scaleY(.35); } }
@keyframes fly {
  0% { transform: translate(0, 0); }
  25% { transform: translate(28vw, -6vh); }
  50% { transform: translate(55vw, 4vh); }
  75% { transform: translate(82vw, -8vh); }
  100% { transform: translate(115vw, 2vh); }
}

/* ---------- Detalles ---------- */
.title .script, .script { text-shadow: 0 0 18px var(--red-glow), 0 0 40px rgba(255,107,0,.35); }
.eyebrow { color: #c58bff; }
.btn { background: var(--red); }
.btn--ghost { background: rgba(255,255,255,.06); }
.features li:hover, .mcat:hover { border-color: rgba(124,252,63,.5); }
.event--featured { border-color: rgba(255,107,0,.7); box-shadow: 0 0 30px -6px rgba(255,107,0,.5); }
.gitem:hover::after { box-shadow: inset 0 0 0 2px var(--red), inset 0 0 30px var(--red-glow); }
.marquee { background: linear-gradient(90deg, rgba(255,107,0,.18), rgba(181,107,255,.18), rgba(124,252,63,.14)); }
.footer::before { content: "🎃 👻 🦇 🕸️ 💀"; display: block; text-align: center; letter-spacing: .6em; margin-bottom: 24px; opacity: .8; }

/* ---------- Cementerio del despecho (abajo del hero) ---------- */
.graveyard { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 170px; pointer-events: none; }
.graveyard > svg { position: absolute; left: 0; bottom: 0; /* left:0 porque el hero centra el texto */ width: 100%; height: 100%; }
.tomb { position: absolute; bottom: 18px; width: var(--w, 110px); transform-origin: bottom center; rotate: var(--rot, 0deg); animation: tombIn 1s var(--ease) both; animation-delay: var(--delay, 2s); }
.tomb svg { position: static; width: 100%; height: auto; }
.tomb span { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-family: var(--script); font-size: calc(var(--w, 110px) * .15); line-height: 1.1; color: #8a7f9c; text-shadow: 0 1px 0 #000; }
@keyframes tombIn { from { transform: translateY(100%); } }

/* ---------- Calabazas con vela ---------- */
.jack { position: absolute; z-index: 2; width: var(--w, 80px); pointer-events: none; filter: drop-shadow(0 0 18px rgba(255,120,0,.55)); }
.jack svg { width: 100%; display: block; }
.jack .face { fill: #ffd34d; animation: candle 1.6s infinite; }
@keyframes candle { 0%, 100% { fill: #ffd34d; opacity: 1; } 30% { fill: #ffb21a; opacity: .8; } 55% { fill: #ffe27a; opacity: 1; } 70% { opacity: .7; } }

/* ---------- Ojos que parpadean en la oscuridad ---------- */
.eyes { position: absolute; z-index: 0; display: flex; gap: var(--gap, 10px); pointer-events: none; opacity: .85; }
.eyes i { width: var(--s, 10px); height: calc(var(--s, 10px) * .7); border-radius: 50%; background: var(--c, #ffd34d); box-shadow: 0 0 8px var(--c, #ffd34d), 0 0 18px var(--c, #ffd34d); animation: blink var(--t, 5s) infinite; animation-delay: var(--delay, 0s); }
@keyframes blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.05); } }

/* ---------- Fantasmas flotando ---------- */
.ghost { position: absolute; z-index: 0; width: var(--w, 70px); pointer-events: none; opacity: .5; animation: ghostDrift var(--d, 26s) linear infinite; animation-delay: var(--delay, 0s); }
.ghost svg { width: 100%; display: block; animation: ghostBob 3s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(220,210,255,.6)); }
@keyframes ghostDrift { from { left: -10%; } to { left: 105%; } }
@keyframes ghostBob { 50% { transform: translateY(-14px) rotate(4deg); } }

/* ---------- Bruja cruzando la luna ---------- */
.witch { position: absolute; z-index: -1; top: 9%; width: clamp(90px, 11vw, 140px); left: -15%; pointer-events: none; animation: witchFly 32s linear infinite; animation-delay: 6s; }
.witch svg { width: 100%; display: block; fill: #050308; }
@keyframes witchFly {
  0% { left: -15%; transform: translateY(0) rotate(-4deg); }
  14% { left: 110%; transform: translateY(-30px) rotate(3deg); }
  100% { left: 110%; }
}

/* ---------- Banderines de Halloween ---------- */
.bunting { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 70px; pointer-events: none; }
.bunting path { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 1.5; }
.bunting polygon { transform-box: fill-box; transform-origin: top center; animation: sway 3s ease-in-out infinite alternate; }
.bunting polygon:nth-of-type(even) { animation-delay: -1.5s; }
@keyframes sway { from { rotate: -5deg; } to { rotate: 5deg; } }

/* ---------- Chispas que siguen el mouse ---------- */
.spark { position: fixed; z-index: 60; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; background: var(--c); box-shadow: 0 0 8px var(--c), 0 0 16px var(--c); animation: spark .9s ease-out forwards; }
@keyframes spark { to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }

/* ---------- Jumpscare al abrir (después de la intro) ---------- */
/* Sin destellos rápidos: el apagón parpadea a menos de 3 veces por segundo. */
.blackout { position: fixed; inset: 0; z-index: 98; background: #000; pointer-events: none; opacity: 0; }
.blackout.is-on { animation: powerFail 1.5s steps(1) forwards; }
@keyframes powerFail { 0% { opacity: .85; } 22% { opacity: 0; } 45% { opacity: .9; } 70% { opacity: .2; } 85%, 100% { opacity: 1; } }
.scare { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; overflow: hidden; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #3a0008 0%, #120003 45%, #000 80%); }
.scare.is-on { opacity: 1; animation: scareShake .09s linear 8; }
.scare.is-off { opacity: 0; transition: opacity .7s ease .1s; }
.scare__face { width: min(58vh, 84vw); margin-bottom: 14vh; /* deja espacio abajo para el texto */ transform: scale(.15); filter: drop-shadow(0 0 40px rgba(255,0,30,.5)); }
.scare.is-on .scare__face { animation: lunge .28s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.scare__face .pupil { animation: pupilGlow .3s ease-in-out infinite alternate; }
.scare__text { position: absolute; bottom: 5%; left: 0; right: 0; text-align: center; font-family: "Lobster", cursive; font-size: clamp(2.4rem, 9vw, 6rem); color: #ff1a35; text-shadow: 0 0 10px #ff0022, 0 0 40px #ff0022, 0 4px 0 #300; transform: scale(0); }
.scare.is-on .scare__text { animation: lunge .25s .12s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes lunge { to { transform: scale(1); } }
@keyframes scareShake { 25% { translate: -14px 8px; } 50% { translate: 12px -10px; } 75% { translate: -8px -6px; } }
@keyframes pupilGlow { to { fill: #ff4d5e; } }
.boo-toast { position: fixed; z-index: 97; left: 50%; bottom: 26px; translate: -50% 0; padding: .7em 1.3em; border-radius: 999px; background: rgba(20,10,25,.92); border: 1px solid rgba(255,107,0,.6); box-shadow: 0 0 20px rgba(255,107,0,.4); font-weight: 700; font-size: .9rem; white-space: nowrap; animation: fadeUp .5s var(--ease) both, toastOut .5s 3.6s ease forwards; }
@keyframes toastOut { to { opacity: 0; translate: -50% 20px; } }

@media (max-width: 760px) {
  .web { opacity: .35; }
  .graveyard { height: 80px; }
  .tomb { scale: .6; transform-origin: bottom center; bottom: 4px; }
  .tomb:nth-of-type(2), .tomb:nth-of-type(n+4) { display: none; }
  .graveyard .jack { --w: 46px !important; }
  .moon { width: 92px !important; top: 15% !important; right: 3% !important; }
  .witch { width: 70px; }
  .moon { top: 13%; right: 6%; }
}
@media (prefers-reduced-motion: reduce) {
  .bats, .lightning { display: none; }
}