body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
  color: #f8f9fa;
  background: radial-gradient(circle at 50% 120%, #14000a 0%, #000 60%, #0a000f 100%);
  background-attachment: fixed;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  top: -100px; left: -100px; right: -100px; bottom: -100px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 60, 0, 0.08), transparent 60%),
  radial-gradient(circle at 80% 80%, rgba(255, 0, 128, 0.08), transparent 60%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
  animation: mistMove 30s infinite alternate ease-in-out;
}
@keyframes mistMove {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(30px,20px) scale(1.1); }
}
.hero { width: 100%; height: 100vh; background: url("img/banner.jpg") center no-repeat; background-size: contain; position: relative; z-index: 1; }
section { text-align: center; padding: 40px 20px; position: relative; z-index: 2; }
h1, h2 { font-family: 'Creepster', cursive; text-shadow: 0 0 15px #000; color: #ff4d4d; }
.evento h2 { font-size: 2.4rem; color: #ff6600; text-shadow: 0 0 25px #ff2200aa; }
.evento p { color: #ccc; font-size: 1.1rem; }
.nombre { font-family: 'Creepster', cursive; color: #ffaa33; text-shadow: 0 0 10px #ff6600aa; font-size: 2.3rem; margin-top: 10px; }
.btn-halloween, .btn-confirmar, .btn-desconfirmar { border: none; border-radius: 40px; color: #fff; font-weight: 600; padding: 12px 35px; transition: all 0.3s; }
.btn-halloween { background: linear-gradient(45deg, #ff4d4d, #ff6600); box-shadow: 0 0 20px #ff440066; }
.btn-confirmar { background: linear-gradient(45deg, #00cc66, #228654); box-shadow: 0 0 20px #00cc6699; }
.btn-desconfirmar { background: linear-gradient(45deg, #cc0000, #660000); box-shadow: 0 0 20px #ff000066; }
.btn-halloween:hover, .btn-confirmar:hover, .btn-desconfirmar:hover { transform: scale(1.08); }
.confirm-msg { margin-top: 25px; font-size: 1.2rem; color: #66ffcc; text-shadow: 0 0 15px #00ff8899; animation: fadeIn 0.8s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fachada img { max-width: 700px; border-radius: 16px; border: 2px solid #ff660055; box-shadow: 0 0 25px #ff330044; transition: transform 0.4s ease; }
.fachada img:hover { transform: scale(1.03); }
.programa h2 { font-size: 2.5rem; color: #ff6600; text-shadow: 0 0 25px #ff3300cc, 0 0 40px #ff660066; margin-bottom: 50px; animation: flicker 3s infinite; }
@keyframes flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.6; } }
.card { background: rgba(20, 0, 10, 0.85); border: 1px solid #ff4d4d44; border-radius: 14px; padding: 25px; transition: all .3s; box-shadow: 0 0 15px #ff000022; }
.card:hover { transform: translateY(-6px); box-shadow: 0 0 25px #ff330066; }
.indicacion { background: rgba(255, 77, 0, 0.1); border-top: 1px solid #ff660055; border-bottom: 1px solid #ff660055; padding: 60px 20px; text-align: center; animation: flicker 4s infinite; }
.indicacion h2 { color: #ffcc33; text-shadow: 0 0 15px #ff8800, 0 0 35px #ff6600aa; font-size: 2.3rem; margin-bottom: 10px; }
.indicacion p { font-size: 1.3rem; color: #fff; text-shadow: 0 0 10px #ff6600; animation: glow 3s infinite alternate; }
@keyframes glow { from { text-shadow: 0 0 10px #ff6600; } to { text-shadow: 0 0 25px #ffaa00; } }
.footer { color: #999; padding: 20px; font-size: 0.9rem; text-align: center; border-top: 1px solid #ff4d4d33; }
.scroll-hint {
  width: 100%;
  text-align: center;
  margin-top: -180px;
  position: relative;
  z-index: 5;
}

.arrow-down {
  display: inline-block;
  animation: arrowBounce 1.5s ease-in-out infinite;
}

.arrow-down i {
  font-size: 7rem;
  color: #ff7518;
  text-shadow: 0 0 10px #000, 0 0 15px #ff6600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.arrow-downs {
  font-size: 1rem;
  color: #ff7518;
  text-shadow: 0 0 10px #000, 0 0 15px #ff6600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.arrow-down i:hover {
  color: #ffcc00;
  text-shadow: 0 0 25px #ffcc00, 0 0 40px #ff6600;
}
@keyframes arrowBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
}