/* ============================================================
   🎃 HALLOWEEN 2026 — Óptica Eyeon
   Para quitar: borrar este archivo y el <link> en index.html
   + el <div class="hw-banner"> y <div class="hw-float">
   ============================================================ */

.hw-banner {
  background: linear-gradient(100deg, #1a0b2e 0%, #4a1a5e 40%, #b34700 75%, #1a0b2e 100%);
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  /* fijo arriba del topbar */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 102;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 18px rgba(255, 110, 0, 0.35);
  animation: hw-glow 3s ease-in-out infinite;
}

/* empujar topbar, header y hero hacia abajo */
.topbar { top: 60px !important; }
.header { top: calc(var(--topbar-h) + 60px) !important; }
.hero { padding-top: 160px !important; }

.hw-banner .hw-sub {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 2px;
}

@keyframes hw-glow {
  0%, 100% { box-shadow: 0 2px 18px rgba(255, 110, 0, 0.35); }
  50% { box-shadow: 0 2px 26px rgba(178, 102, 255, 0.55); }
}

/* Emojis flotantes */
.hw-float {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  overflow: hidden;
}

.hw-float span {
  position: absolute;
  top: -8%;
  font-size: 26px;
  opacity: 0.85;
  animation: hw-caer linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.hw-float span:nth-child(1) { left: 6%;  animation-duration: 11s; animation-delay: 0s; }
.hw-float span:nth-child(2) { left: 22%; animation-duration: 14s; animation-delay: 2.5s; font-size: 20px; }
.hw-float span:nth-child(3) { left: 45%; animation-duration: 10s; animation-delay: 1s; }
.hw-float span:nth-child(4) { left: 68%; animation-duration: 13s; animation-delay: 4s; font-size: 22px; }
.hw-float span:nth-child(5) { left: 85%; animation-duration: 12s; animation-delay: 0.8s; }
.hw-float span:nth-child(6) { left: 33%; animation-duration: 15s; animation-delay: 6s; font-size: 18px; }
.hw-float span:nth-child(7) { left: 77%; animation-duration: 9s;  animation-delay: 3s; font-size: 24px; }

@keyframes hw-caer {
  0%   { transform: translateY(-5vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.85; }
  92%  { opacity: 0.85; }
  100% { transform: translateY(108vh) rotate(340deg); opacity: 0; }
}

/* Toque naranja en el botón principal del hero */
.hero-botones .btn-primario {
  box-shadow: 0 4px 22px rgba(255, 110, 0, 0.45);
}

@media (max-width: 760px) {
  .hw-banner { font-size: 13px; height: 78px; }
  .topbar { top: 78px !important; }
  .header { top: calc(var(--topbar-h) + 78px) !important; }
  .hero { padding-top: 198px !important; }
  .hw-float span { font-size: 20px; }
}

/* --- Caricaturas --- */
.hw-mascotas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hw-calabaza {
  position: absolute;
  left: 4%;
  bottom: 6%;
  width: 110px;
  animation: hw-flota 4s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(255, 110, 0, 0.4));
}

.hw-fantasma {
  position: absolute;
  right: 5%;
  top: 12%;
  width: 82px;
  animation: hw-flota 5s ease-in-out infinite reverse;
  filter: drop-shadow(0 4px 10px rgba(255, 255, 255, 0.25));
}

@keyframes hw-flota {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}

.hw-murcielago {
  position: absolute;
  top: 14px;
  left: -140px;
  width: 110px;
  z-index: 3;
  pointer-events: none;
  animation: hw-vuela 9s linear infinite;
}

@keyframes hw-vuela {
  0%   { left: -140px; transform: translateY(0); }
  25%  { transform: translateY(-18px); }
  50%  { transform: translateY(8px); }
  75%  { transform: translateY(-12px); }
  100% { left: 105%; transform: translateY(0); }
}

.cta-banner { position: relative; overflow: hidden; }

.hw-espia {
  position: fixed;
  left: -14px;
  bottom: -8px;
  width: 74px;
  z-index: 58;
  pointer-events: none;
  animation: hw-asoma 7s ease-in-out infinite;
  filter: drop-shadow(2px -2px 6px rgba(0,0,0,0.35));
}

@keyframes hw-asoma {
  0%, 100% { transform: translate(0, 26px) rotate(-8deg); }
  50% { transform: translate(10px, 0) rotate(4deg); }
}

@media (max-width: 640px) {
  .hw-calabaza { width: 72px; left: 2%; }
  .hw-fantasma { width: 56px; right: 3%; }
  .hw-murcielago { width: 76px; }
  .hw-espia { width: 54px; }
}