/* ================================================================
   MOSTACHE — decoración temporal de Halloween
   Retirar la clase `halloween-season` del body para desactivarla.
   ================================================================ */
:root {
  --halloween-orange: #e36a19;
  --halloween-amber: #f1a13a;
  --halloween-violet: #7840aa;
  --halloween-bronze: #9a5525;
}

.halloween-season .premium-hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at -7% 62%, rgba(227, 106, 25, .46), transparent 43%),
    radial-gradient(ellipse at 106% 54%, rgba(120, 64, 170, .39), transparent 42%),
    linear-gradient(90deg, rgba(45, 17, 3, .08), transparent 44%, rgba(35, 9, 48, .08));
  mix-blend-mode: screen;
  animation: halloween-ambient 5.2s ease-in-out infinite alternate;
}

.halloween-season .premium-hero::after {
  content: '';
  position: absolute;
  z-index: 7;
  inset: 10px;
  border: 1px solid rgba(154, 85, 37, .78);
  border-radius: 12px;
  pointer-events: none;
  background: url('assets/img/halloween-top-overlay.svg') top center / min(100%, 1500px) auto no-repeat;
  box-shadow:
    inset 22px 0 38px -29px rgba(227, 106, 25, .8),
    inset -22px 0 38px -29px rgba(120, 64, 170, .8),
    0 0 18px rgba(227, 106, 25, .12);
  animation: halloween-frame 4.8s ease-in-out infinite;
}

.halloween-season .halloween-embers {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.halloween-season .halloween-embers i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  color: var(--halloween-orange);
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  opacity: .16;
  animation: halloween-ember-rise 6s ease-in-out infinite;
}

.halloween-season .halloween-embers i:nth-child(4n + 2) { color: var(--halloween-violet); }
.halloween-season .halloween-embers i:nth-child(1)  { left:  5%; top: 72%; animation-delay: -.7s; }
.halloween-season .halloween-embers i:nth-child(2)  { left: 13%; top: 44%; animation-delay: -3.4s; }
.halloween-season .halloween-embers i:nth-child(3)  { left: 22%; top: 82%; animation-delay: -1.9s; }
.halloween-season .halloween-embers i:nth-child(4)  { left: 34%; top: 61%; animation-delay: -4.8s; }
.halloween-season .halloween-embers i:nth-child(5)  { left: 46%; top: 88%; animation-delay: -2.5s; }
.halloween-season .halloween-embers i:nth-child(6)  { left: 58%; top: 46%; animation-delay: -5.2s; }
.halloween-season .halloween-embers i:nth-child(7)  { left: 69%; top: 78%; animation-delay: -3.1s; }
.halloween-season .halloween-embers i:nth-child(8)  { left: 78%; top: 58%; animation-delay: -1.2s; }
.halloween-season .halloween-embers i:nth-child(9)  { left: 87%; top: 86%; animation-delay: -4.1s; }
.halloween-season .halloween-embers i:nth-child(10) { left: 94%; top: 39%; animation-delay: -2.2s; }
.halloween-season .halloween-embers i:nth-child(11) { left: 41%; top: 29%; animation-delay: -5.5s; }
.halloween-season .halloween-embers i:nth-child(12) { left: 72%; top: 22%; animation-delay: -3.7s; }

/* ═══ Mejora 1: Murciélagos volando en el hero principal ═══ */
.halloween-season .halloween-hero-bats {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.halloween-season .halloween-hero-bat {
  position: absolute;
  left: -64px;
  width: 32px;
  height: 17px;
  opacity: 0;
  background: url('assets/img/halloween-bat.svg') center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .32));
  will-change: transform, opacity;
}

.halloween-season .halloween-hero-bat--one   { top: 18%; animation: halloween-bat-fly 14s 0.8s  linear infinite; }
.halloween-season .halloween-hero-bat--two   { top: 34%; width: 22px; height: 12px; animation: halloween-bat-fly 18s 6s    linear infinite; }
.halloween-season .halloween-hero-bat--three { top: 10%; width: 18px; height: 10px; animation: halloween-bat-fly 22s 12s   linear infinite; }

.halloween-season .halloween-hero-emblem {
  display: none;
}

/* ═══ Mejora 2: Parpadeo de vela irregular en calabazas ═══ */
.halloween-season .halloween-pumpkin {
  position: absolute;
  z-index: 1;
  bottom: 116px;
  width: clamp(92px, 9vw, 148px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: .83;
  animation: halloween-candle-flicker 3.1s ease-in-out infinite;
}

.halloween-season .halloween-pumpkin--left  { left:  1.2%; }
.halloween-season .halloween-pumpkin--right { right: 1.2%; transform: scaleX(-1); animation-delay: -1.6s; }

/* ═══ Mejora 5 & 6: Shimmer en slider + Spark en CTAs ═══ */
.halloween-season .premium-hero__cta,
.halloween-season .premium-hero__slider.premium-mobile-only {
  animation: halloween-control-glow 3.6s ease-in-out infinite;
}

.halloween-season .premium-hero__slider.premium-mobile-only::after {
  content: '';
  position: absolute;
  z-index: 4;
  inset: -2px;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, var(--halloween-orange), #8e4b26 47%, var(--halloween-violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: .9;
}

/* Shimmer sweep animado sobre el slider */
.halloween-season .premium-hero__slider.premium-mobile-only::before {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 180, 80, .22) 45%,
    rgba(255, 220, 120, .38) 50%,
    rgba(255, 180, 80, .22) 55%,
    transparent 80%
  );
  background-size: 250% 100%;
  animation: halloween-slider-shimmer 2.8s 1s ease-in-out infinite;
}

/* Spark radial en hover del botón RESERVAR (navbar) */
.halloween-season .premium-navbar__book {
  position: relative;
  border-color: rgba(227, 106, 25, .78);
  box-shadow: 0 0 18px rgba(227, 106, 25, .12);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.18s ease;
}

.halloween-season .premium-navbar__book::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(227, 106, 25, .28) 0%, transparent 68%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.halloween-season .premium-navbar__book:hover::before { opacity: 1; }
.halloween-season .premium-navbar__book:hover {
  box-shadow: 0 0 22px rgba(227, 106, 25, .4), 0 0 8px rgba(120, 64, 170, .25);
  transform: scale(1.04);
}

/* Spark radial en hover del CTA principal */
.halloween-season .premium-hero__cta {
  position: relative;
  overflow: hidden;
}

.halloween-season .premium-hero__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255, 160, 60, .32) 0%, transparent 68%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.halloween-season .premium-hero__cta:hover::before { opacity: 1; }
.halloween-season .premium-hero__cta:active { transform: scale(0.975); }

.halloween-season .premium-benefits {
  border-color: rgba(154, 85, 37, .36);
  box-shadow:
    -12px 12px 32px -25px rgba(227, 106, 25, .72),
     12px 12px 32px -25px rgba(120, 64, 170, .72),
    0 18px 45px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.halloween-season .premium-benefits::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--halloween-orange) 18%, #8c552d 50%, var(--halloween-violet) 82%, transparent);
  opacity: .66;
}

/* ════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════ */

@keyframes halloween-ambient {
  from { opacity: .62; filter: saturate(.88); }
  to   { opacity: .94; filter: saturate(1.08); }
}

@keyframes halloween-frame {
  0%, 100% { opacity: .76; }
  50%       { opacity: 1; }
}

@keyframes halloween-ember-rise {
  0%, 100% { opacity: .06; transform: translate3d(0,  10px, 0) scale(.72); }
  45%      { opacity: .74; transform: translate3d(4px, -15px, 0) scale(1.25); }
  75%      { opacity: .22; transform: translate3d(-2px, -24px, 0) scale(.9); }
}

/* Mejora 1 ── vuelo de murciélagos */
@keyframes halloween-bat-fly {
  0%   { transform: translate3d(-80px, 0, 0) scaleX(1);               opacity: 0; }
  5%   { opacity: .8; }
  48%  { transform: translate3d(calc(50vw - 20px), -22px, 0) scaleX(1);  opacity: .8; }
  50%  { transform: translate3d(calc(50vw - 20px), -22px, 0) scaleX(-1); opacity: .8; }
  95%  { opacity: .8; }
  100% { transform: translate3d(calc(100vw + 100px), 0, 0) scaleX(-1); opacity: 0; }
}

/* Mejora 2 ── parpadeo de vela irregular */
@keyframes halloween-candle-flicker {
  0%   { filter: drop-shadow(0 9px 12px rgba(0,0,0,.68)) drop-shadow(0 0 10px rgba(227,106,25,.28)); opacity: .83; }
  8%   { filter: drop-shadow(0 9px 14px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(227,106,25,.58)); opacity: .91; }
  15%  { filter: drop-shadow(0 9px 10px rgba(0,0,0,.63)) drop-shadow(0 0  7px rgba(227,106,25,.16)); opacity: .77; }
  22%  { filter: drop-shadow(0 9px 15px rgba(0,0,0,.74)) drop-shadow(0 0 26px rgba(227,106,25,.65)); opacity: .90; }
  35%  { filter: drop-shadow(0 9px 12px rgba(0,0,0,.68)) drop-shadow(0 0 11px rgba(227,106,25,.30)); opacity: .83; }
  50%  { filter: drop-shadow(0 9px 17px rgba(0,0,0,.76)) drop-shadow(0 0 30px rgba(227,106,25,.72)); opacity: .93; }
  58%  { filter: drop-shadow(0 9px  9px rgba(0,0,0,.60)) drop-shadow(0 0  5px rgba(227,106,25,.12)); opacity: .75; }
  65%  { filter: drop-shadow(0 9px 14px rgba(0,0,0,.72)) drop-shadow(0 0 20px rgba(227,106,25,.50)); opacity: .88; }
  80%  { filter: drop-shadow(0 9px 12px rgba(0,0,0,.68)) drop-shadow(0 0  9px rgba(227,106,25,.22)); opacity: .83; }
  90%  { filter: drop-shadow(0 9px 16px rgba(0,0,0,.75)) drop-shadow(0 0 25px rgba(227,106,25,.64)); opacity: .92; }
  100% { filter: drop-shadow(0 9px 12px rgba(0,0,0,.68)) drop-shadow(0 0 10px rgba(227,106,25,.28)); opacity: .83; }
}

@keyframes halloween-control-glow {
  0%, 100% {
    box-shadow: -10px 8px 25px -15px rgba(227,106,25,.9),   10px 8px 25px -15px rgba(120,64,170,.78),  inset 0 1px 0 rgba(255,255,255,.04);
  }
  50% {
    box-shadow: -14px 10px 32px -14px rgba(227,106,25,.98), 14px 10px 32px -14px rgba(120,64,170,.9),  inset 0 1px 0 rgba(255,255,255,.06);
  }
}

/* Mejora 5 ── shimmer en slider */
@keyframes halloween-slider-shimmer {
  0%   { background-position: 200% 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: -200% 0; opacity: 0; }
}

@keyframes halloween-emblem-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50%       { transform: translate3d(0, -6px, 0) rotate(1deg); }
}

@keyframes halloween-emblem-glow {
  0%, 100% {
    box-shadow: 0 12px 28px rgba(0,0,0,.42), 0 0 13px rgba(227,106,25,.24), inset 0 1px rgba(255,255,255,.05);
  }
  50% {
    box-shadow: 0 15px 34px rgba(0,0,0,.48), -5px 0 20px rgba(227,106,25,.4), 5px 0 18px rgba(120,64,170,.3), inset 0 1px rgba(255,255,255,.08);
  }
}

/* Mejora 3 ── glow pulsante en la luna */
@keyframes halloween-moon-pulse {
  0%, 100% {
    filter: drop-shadow(0 0  8px rgba(227,106,25,.38)) drop-shadow(0 0 3px rgba(255,200,80,.25));
  }
  40% {
    filter: drop-shadow(0 0 20px rgba(227,106,25,.82)) drop-shadow(0 0 9px rgba(255,200,80,.58));
  }
  70% {
    filter: drop-shadow(0 0 12px rgba(227,106,25,.55)) drop-shadow(0 0 5px rgba(255,200,80,.36));
  }
}

/* Mejora 4 ── blood drip */
@keyframes halloween-blood-drip {
  0%   { height: 0;    opacity: 0; }
  8%   { height: 0;    opacity: 1; }
  48%  { height: 11px; opacity: 1; border-radius: 0 0 50% 50%; }
  58%  { height: 13px; opacity: .8; }
  68%  { height: 13px; opacity: 0; }
  100% { height: 0;    opacity: 0; }
}

@media (max-width: 1024px) {
  .halloween-season .premium-hero::after {
    inset: 7px;
    border-radius: 9px;
    background-size: 145% auto;
  }

  .halloween-season .halloween-pumpkin {
    bottom: 126px;
    width: clamp(72px, 20vw, 96px);
    opacity: .78;
  }

  .halloween-season .halloween-pumpkin--left  { left:  -8px; }
  .halloween-season .halloween-pumpkin--right { right: -8px; }

  .halloween-season .halloween-hero-emblem {
    position: absolute;
    z-index: 4;
    top: clamp(118px, 14vh, 148px);
    left: 24px;
    display: flex;
    width: 172px;
    min-height: 76px;
    padding: 9px 12px 9px 7px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(227, 106, 25, .52);
    border-radius: 18px 18px 18px 6px;
    background: linear-gradient(115deg, rgba(12, 10, 9, .74), rgba(27, 15, 31, .6));
    backdrop-filter: blur(7px);
    pointer-events: none;
    animation: halloween-emblem-float 4.8s ease-in-out infinite, halloween-emblem-glow 3.4s ease-in-out infinite;
  }

  .halloween-season .halloween-hero-emblem::before {
    content: '';
    position: absolute;
    left: 31px;
    bottom: 100%;
    width: 1px;
    height: 25px;
    background: linear-gradient(to top, rgba(227, 106, 25, .72), transparent);
    box-shadow: 0 0 7px rgba(227, 106, 25, .35);
  }

  .halloween-season .halloween-hero-emblem::after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: 8px;
    width: 58px;
    height: 1px;
    background: linear-gradient(90deg, var(--halloween-orange), var(--halloween-violet));
    opacity: .75;
  }

  /* Mejora 3 ── glow pulsante en la luna del emblem */
  .halloween-season .halloween-hero-emblem img {
    width: 64px;
    height: 58px;
    flex: 0 0 64px;
    object-fit: contain;
    animation: halloween-moon-pulse 2.6s ease-in-out infinite;
  }

  /* Mejora 4 ── Blood drip en el texto "HALLOWEEN" */
  .halloween-season .halloween-hero-emblem strong {
    position: relative;
    color: #f3aa43;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-shadow: 0 0 9px rgba(227, 106, 25, .38);
  }

  .halloween-season .halloween-hero-emblem strong::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 6px;
    width: 3px;
    height: 0;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(to bottom, #c0392b, rgba(140, 20, 10, .5));
    box-shadow: 0 0 5px rgba(200, 30, 10, .5);
    animation: halloween-blood-drip 5s 2.4s ease-in infinite;
  }

  .halloween-season .halloween-hero-emblem small {
    margin-top: 7px;
    color: rgba(255, 255, 255, .82);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
  }

  .halloween-season .premium-benefits::before {
    left: 8px;
    right: 8px;
  }
}

/* ═══ Mejora 7: Color Halloween en tabs activas (wizard) ═══ */
body.wizard-halloween-motion .tab-btn.active {
  background: linear-gradient(135deg, rgba(227, 106, 25, .12), rgba(120, 64, 170, .08));
  border-color: rgba(227, 106, 25, .6);
  color: var(--halloween-orange);
  box-shadow: 0 0 10px rgba(227, 106, 25, .15);
}

@media (prefers-reduced-motion: reduce) {
  .halloween-season .premium-hero::before,
  .halloween-season .premium-hero::after,
  .halloween-season .halloween-embers i,
  .halloween-season .halloween-hero-emblem,
  .halloween-season .halloween-hero-emblem img,
  .halloween-season .halloween-hero-emblem strong::after,
  .halloween-season .halloween-hero-bat,
  .halloween-season .halloween-pumpkin,
  .halloween-season .premium-hero__cta,
  .halloween-season .premium-hero__slider.premium-mobile-only,
  .halloween-season .premium-hero__slider.premium-mobile-only::before {
    animation: none;
  }
}