/* halloween.css — Tema de Halloween de temporada.
   Todo cuelga de html.halloween, que lo pone el script del <head> solo hasta
   el 31 de octubre (hora de Lima). Sin esa clase este archivo no cambia nada:
   el 1 de noviembre la web vuelve sola a su versión de siempre. */

/* ───────── Colores de la noche ───────── */
html.halloween{
  --hw-noche:#1A0B36;
  --hw-noche-2:#2E1260;
  --hw-morado:#6B3FD0;
  --hw-calabaza:#FF8A1E;
  --hw-calabaza-canto:#B4520A;
  --hw-brillo:#FFD54A;
  scrollbar-color:var(--hw-calabaza) var(--crema);
}
html.halloween ::selection{background:var(--hw-calabaza);color:#fff;}

/* Cielo nocturno en la portada y en los encabezados de las páginas */
html.halloween .portada{
  background:linear-gradient(180deg,#140829 0%,var(--hw-noche) 30%,var(--hw-noche-2) 62%,#5A2BA8 88%,#7A3FC4 100%);
}
html.halloween .encabezado{
  background:linear-gradient(180deg,#140829 0%,var(--hw-noche) 40%,var(--hw-noche-2) 80%,#5A2BA8 100%);
}
html.halloween .rayo{
  background:repeating-conic-gradient(from 0deg,rgba(255,170,60,.09) 0 7deg,transparent 7deg 20deg);
}
html.halloween .nube{background:#4B3778;opacity:.55;filter:none;}
html.halloween .nube::before,html.halloween .nube::after{background:#4B3778;}
html.halloween .olas__3{fill:#9A6BFF;opacity:.6;}
html.halloween .olas__2{fill:var(--hw-calabaza);}
html.halloween .encabezado h1 .accent,html.halloween .encabezado h1 em{color:var(--hw-calabaza);}

/* Luna llena */
.hw-luna{
  position:absolute;right:7%;top:15%;width:clamp(70px,9vw,130px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#FFF8D6 0 30%,#FFE79A 62%,#F5C451 100%);
  box-shadow:0 0 40px 12px rgba(255,214,110,.35),0 0 120px 40px rgba(255,170,60,.18);
  pointer-events:none;
}
.hw-luna::before,.hw-luna::after{content:"";position:absolute;border-radius:50%;background:rgba(214,160,60,.28);}
.hw-luna::before{width:22%;aspect-ratio:1;left:58%;top:24%;}
.hw-luna::after{width:14%;aspect-ratio:1;left:30%;top:60%;}
.encabezado .hw-luna{right:auto;left:62%;top:20%;}

/* Estrellas */
.hw-estrellas{
  position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 28% 8%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 44% 26%,#FFE9A8 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 76% 30%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 88% 9%,#FFE9A8 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 42%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 36% 48%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 52%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 94% 46%,#fff 50%,transparent 51%);
  animation:hw-titila 4s ease-in-out infinite alternate;
}

/* Murciélagos que cruzan el cielo */
.hw-murcielago{
  position:absolute;left:0;top:var(--y,20%);width:var(--w,46px);color:#0B0518;pointer-events:none;
  animation:hw-vuela var(--t,18s) linear var(--d,0s) infinite;
  filter:drop-shadow(0 0 3px rgba(255,190,90,.9)) drop-shadow(0 0 10px rgba(255,140,30,.55));
}
.hw-murcielago svg{display:block;width:100%;height:auto;animation:hw-aletea .32s ease-in-out infinite alternate;transform-origin:50% 60%;}

/* Telarañas en las esquinas */
.hw-telarana{position:absolute;top:0;width:clamp(110px,14vw,200px);color:rgba(255,255,255,.4);pointer-events:none;z-index:1;}
.hw-telarana--izq{left:0;}
.hw-telarana--der{right:0;scale:-1 1;}
.hw-telarana svg{display:block;width:100%;height:auto;}
.hw-arana{position:absolute;left:62%;top:0;width:16px;height:var(--hilo,90px);border-left:1px solid rgba(255,255,255,.45);animation:hw-cuelga 5s ease-in-out infinite;transform-origin:top;}
.hw-arana::after{content:"🕷";position:absolute;bottom:-14px;left:-9px;font-size:18px;filter:grayscale(1) brightness(.2);}

/* Sombrero de bruja para el sol de la portada */
.hw-sombrero{position:absolute;left:31%;top:-4%;width:40%;rotate:-10deg;pointer-events:none;filter:drop-shadow(0 8px 8px rgba(10,0,30,.35));}
.hw-sombrero svg{display:block;width:100%;height:auto;}

/* Calabazas flotando en la escena de la portada */
.hw-flota{position:absolute;pointer-events:none;filter:drop-shadow(0 14px 14px rgba(10,0,30,.45));}
.hw-flota svg{display:block;width:100%;height:auto;}
.hw-flota--1{width:13%;left:14%;top:32%;animation:flota 5.5s ease-in-out -1s infinite;}
.hw-flota--2{width:12%;right:4%;bottom:30%;animation:flota 6.5s ease-in-out -3s infinite;}
@media (max-width:900px){
  .hw-flota--1{width:13%;left:4%;top:8%;}
  .hw-flota--2{display:none;}
}

/* El logo de Halloween es cuadrado y trae el sombrero arriba: un poco más grande */
html.halloween .cab__logo{width:134px;top:-12px;left:8px;}
html.halloween .pie__marca img{width:150px;}
@media (max-width:980px){ html.halloween .cab__logo{width:106px;top:-8px;left:4px;} }

/* Cabecera, botones y cinta con los colores de la temporada */
html.halloween .cab{box-shadow:0 10px 30px rgba(26,11,54,.35),0 0 0 3px var(--hw-calabaza);}
html.halloween .cab__nav a:hover{background:#F3EAFF;color:var(--hw-morado);}
html.halloween .boton--sol{--fondo:var(--hw-calabaza);--canto:var(--hw-calabaza-canto);--tx:#fff;text-shadow:0 1px 0 rgba(120,50,0,.35);}
html.halloween .tabs .tabs__comprar{background:var(--hw-calabaza);color:#fff;box-shadow:0 5px 0 var(--hw-calabaza-canto),0 12px 18px rgba(160,70,0,.3);}
html.halloween .tabs .tabs__comprar i{color:#fff;}
html.halloween .cinta{background:var(--hw-calabaza);border-color:var(--hw-noche);color:var(--hw-noche);}
html.halloween .cinta i{color:var(--hw-noche);animation:none;}
html.halloween .cinta .hw-cinta{color:#fff;-webkit-text-stroke:0;text-shadow:0 2px 0 var(--hw-noche);}

/* «Te esperamos en Chosica» también de noche */
html.halloween .llegar{background:linear-gradient(180deg,var(--hw-noche-2) 0%,var(--hw-noche) 100%);}

/* Recuadro de WhatsApp en las páginas internas */
html.halloween .llamado{background:var(--hw-calabaza);box-shadow:0 24px 40px rgba(160,70,0,.25);}

/* Pie de página nocturno */
html.halloween .pie{background:var(--hw-noche);}
html.halloween .pie a:hover,html.halloween .pie i{color:var(--hw-calabaza);}

/* ───────── Anuncio de Halloween (ventana) ───────── */
.hw-anuncio[hidden],.hw-calabaza[hidden]{display:none !important;}
html:not(.halloween) .hw-anuncio,html:not(.halloween) .hw-calabaza{display:none !important;}
.hw-anuncio{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;
  background:rgba(14,4,32,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:hw-aparece .3s ease-out;
}
.hw-anuncio__caja{
  position:relative;width:min(100%,460px);max-height:calc(100svh - 40px);overflow:auto;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:18px;border-radius:28px;
  background:linear-gradient(180deg,var(--hw-noche-2),var(--hw-noche));
  border:3px solid var(--hw-calabaza);
  box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 40px rgba(255,138,30,.3);
  animation:hw-sube .45s var(--rebote);
}
.hw-anuncio__cerrar{
  position:absolute;right:10px;top:10px;z-index:2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--hw-noche);font-size:1.3rem;
  box-shadow:0 4px 0 #C9B8E8;
}
.hw-anuncio__cerrar:hover{background:var(--hw-brillo);}
.hw-anuncio__img{width:100%;height:auto;max-height:calc(100svh - 170px);object-fit:contain;border-radius:18px;}
.hw-anuncio__tarjeta{text-align:center;color:#fff;padding:6px 8px 0;}
.hw-anuncio__logo{width:min(62%,230px);aspect-ratio:1;margin:0 auto -4px;background:url("../img/logo-halloween.webp") center / contain no-repeat;animation:flota 5s ease-in-out infinite;}
.hw-anuncio__fecha{
  display:inline-block;margin-bottom:10px;padding:.35em 1em;border-radius:999px;
  font-family:var(--titulos);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;
  background:var(--hw-calabaza);color:#fff;box-shadow:0 4px 0 var(--hw-calabaza-canto);
}
.hw-anuncio__tarjeta h2{font-family:var(--titulos);font-weight:700;font-size:clamp(1.6rem,1.2rem + 2vw,2.1rem);line-height:1.05;text-wrap:balance;}
.hw-anuncio__tarjeta h2 + p{margin-top:.6rem;color:#E4D8FF;}
.hw-anuncio .boton{width:100%;}
/* Con anuncio subido desde el panel se muestra la imagen; si no, la tarjeta */
.hw-anuncio:not(.con-imagen) .hw-anuncio__img{display:none;}
.hw-anuncio.con-imagen .hw-anuncio__tarjeta{display:none;}
.hw-anuncio.con-imagen .hw-anuncio__caja{padding:12px 12px 16px;}
html.hw-bloqueo,html.hw-bloqueo body{overflow:hidden;}

/* Calabaza flotante para volver a ver el anuncio */
.hw-calabaza{
  position:fixed;z-index:91;right:18px;bottom:90px;width:62px;height:62px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--hw-noche);box-shadow:0 5px 0 #0B0518,0 14px 22px rgba(20,0,40,.4);
  transition:translate .3s var(--rebote);animation:hw-late 2.6s ease-in-out infinite;
}
.hw-calabaza svg{width:44px;height:auto;}
.hw-calabaza:hover{translate:0 -5px;}
@media (max-width:760px){
  .hw-calabaza{right:14px;bottom:calc(104px + env(safe-area-inset-bottom,0px));width:54px;height:54px;}
  .hw-calabaza svg{width:38px;}
}

/* ───────── Movimientos ───────── */
@keyframes hw-vuela{
  0%{transform:translate(-12vw,0) scale(var(--s,1));}
  25%{transform:translate(25vw,-28px) scale(var(--s,1));}
  50%{transform:translate(55vw,14px) scale(var(--s,1));}
  75%{transform:translate(85vw,-20px) scale(var(--s,1));}
  100%{transform:translate(115vw,6px) scale(var(--s,1));}
}
@keyframes hw-aletea{from{transform:scaleY(1);}to{transform:scaleY(.45);}}
@keyframes hw-titila{from{opacity:.45;}to{opacity:.85;}}
@keyframes hw-cuelga{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.7);}}
@keyframes hw-late{0%,100%{scale:1;}50%{scale:1.08;}}
@keyframes hw-aparece{from{opacity:0;}}
@keyframes hw-sube{from{opacity:0;transform:translateY(30px) scale(.94);}}

@media (prefers-reduced-motion:reduce){
  .hw-murcielago,.hw-murcielago svg,.hw-estrellas,.hw-arana,.hw-calabaza,.hw-flota,.hw-anuncio,.hw-anuncio__caja,.hw-anuncio__logo{animation:none !important;}
  .hw-murcielago{transform:translateX(calc(var(--x,30) * 1vw));}
}

/* ───────── Sección «Noche de Halloween» en Entradas ───────── */
.hw-entradas{display:none;}
html.halloween .hw-entradas{display:block;}
.hw-entradas__cuerpo{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(22px,4vw,48px);
  padding:clamp(24px,4vw,44px);border-radius:clamp(28px,4vw,44px);color:#fff;
  background:radial-gradient(circle at 85% 10%,rgba(255,214,110,.25),transparent 40%),linear-gradient(160deg,var(--hw-noche-2),var(--hw-noche));
  border:3px solid var(--hw-calabaza);box-shadow:0 24px 44px rgba(26,11,54,.35);
}
.hw-entradas__fecha{display:inline-flex;align-items:center;gap:.5em;margin-bottom:12px;padding:.4em 1em;border-radius:999px;font-family:var(--titulos);font-weight:700;background:var(--hw-calabaza);box-shadow:0 4px 0 var(--hw-calabaza-canto);}
.hw-entradas .titulo{color:#fff;}
.hw-entradas__lista{display:grid;gap:8px;margin:18px 0 24px;font-weight:500;}
.hw-entradas__lista i{width:1.6em;color:var(--hw-brillo);}
.hw-entradas__boletos{display:grid;justify-items:center;}
.hw-entradas__boletos .ticket-grid:empty{display:none;}
.hw-entradas__cartel{width:min(100%,420px);border-radius:26px;box-shadow:0 18px 30px rgba(0,0,0,.4);rotate:2deg;}
/* Cuando ya está a la venta la entrada (promoción del panel), se ve la tarjeta y no el cartel */
.hw-entradas__boletos:has(.promo-temporal) .hw-entradas__cartel{display:none;}
@media (max-width:860px){ .hw-entradas__cuerpo{grid-template-columns:1fr;} }
.hw-entradas__bajada{margin-top:10px;color:#E4D8FF;font-weight:500;}
.hw-entradas__precios{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;}
.hw-entradas__precios p{display:flex;flex-direction:column;align-items:center;min-width:120px;padding:10px 18px;border-radius:20px;background:var(--hw-calabaza);box-shadow:0 5px 0 var(--hw-calabaza-canto);font-family:var(--titulos);line-height:1.1;}
.hw-entradas__precios span{font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.03em;}
.hw-entradas__precios b{font-size:2rem;font-weight:700;}
.hw-entradas__texto .boton{margin:0 10px 10px 0;}
.hw-entradas__texto .boton[hidden]{display:none;}