/* ═══ Tema Halloween (temporal): se carga solo si $halloween_on (ver _partials/halloween.php) ═══ */
:root { --hw-orange:#FF7A18; }
.hw-on ::selection { background:#FF7A18; color:#150800; }

/* ── Telarañas en las esquinas ── */
.hw-web { position:absolute; top:0; left:0; width:120px; height:120px; pointer-events:none; z-index:2;
  background:url('/assets/halloween/web.svg') no-repeat 0 0 / contain; opacity:.34; }
.hw-web--r { left:auto; right:0; transform:scaleX(-1); }
.hw-on .bq-loc__card, .hw-on .bq-com__list { position:relative; overflow:hidden; }
#inicio > .hw-web { width:170px; height:170px; opacity:.22; top:0; }
@media (max-width:767px) { .hw-web { width:84px; height:84px; } #inicio > .hw-web { width:110px; height:110px; } }

/* ── Ambiente en la portada ── */
.hw-fx { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hw-fog { position:absolute; width:140%; height:50%; left:-20%; opacity:.45; will-change:transform;
  background:
    radial-gradient(40% 60% at 20% 50%, rgba(255,255,255,.15), transparent 70%),
    radial-gradient(35% 55% at 60% 40%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(40% 60% at 90% 60%, rgba(255,255,255,.11), transparent 70%); }
.hw-fog--a { bottom:4%; animation:hwFog 40s ease-in-out infinite alternate; }
.hw-fog--b { bottom:22%; opacity:.3; animation:hwFog 56s ease-in-out -22s infinite alternate-reverse; }
@keyframes hwFog { from { transform:translateX(-6%); } to { transform:translateX(6%); } }

/* Logo con leve parpadeo (sin sombra de color) */
.hw-on .bq-hero-logo { animation:hwFlicker 6.5s infinite; }
@keyframes hwFlicker {
  0%,100% { opacity:1; }
  91% { opacity:1; } 92% { opacity:.86; } 93% { opacity:1; } 95% { opacity:.92; } 96% { opacity:1; }
}

/* ── Capa global: brasas y niebla baja ── */
.hw-global { position:fixed; inset:0; z-index:8000; pointer-events:none; overflow:hidden; contain:layout paint style; }
.hw-fogfloor { position:absolute; left:-10%; right:-10%; bottom:-6vh; height:28vh; opacity:.16; will-change:transform;
  background:
    radial-gradient(40% 70% at 15% 70%, rgba(255,255,255,.30), transparent 70%),
    radial-gradient(45% 60% at 55% 80%, rgba(255,255,255,.35), transparent 70%);
  animation:hwFloor 30s ease-in-out infinite alternate; }
@keyframes hwFloor { from { transform:translateX(-5%); } to { transform:translateX(5%); } }
.hw-ember { position:absolute; left:var(--x); bottom:-14px; width:var(--s); height:var(--s); border-radius:50%; opacity:0;
  background:radial-gradient(circle,#ffd29a 0%,#ff7a18 60%,rgba(255,122,24,0) 100%);
  animation:hwRise var(--d) linear var(--l) infinite; }
@keyframes hwRise {
  0% { transform:translate3d(0,0,0); opacity:0; }
  10% { opacity:.75; }
  85% { opacity:.4; }
  100% { transform:translate3d(var(--dx),-108vh,0); opacity:0; }
}

/* ── Toques de color en las secciones ── */
.hw-on .bq-loc__card, .hw-on .bq-com__list { border-color:rgba(255,122,24,.30); }
.hw-on .bq-loc__map { border-color:rgba(255,122,24,.30); }
.hw-on .bq-com__ico { color:#ff9a4d; background:rgba(255,122,24,.12); border-color:rgba(255,122,24,.42); }
.hw-on .bq-com__tag { border-color:rgba(255,122,24,.5); background:rgba(255,122,24,.1); color:#ff9a4d; }
.hw-on .bq-footer::before { background:linear-gradient(90deg,transparent,#FF7A18 50%,transparent); }

@media (prefers-reduced-motion:reduce) {
  .hw-fog, .hw-on .bq-hero-logo { animation:none !important; }
}

/* Las telarañas de las tarjetas quedan por detrás del contenido */
.hw-on .bq-loc__card > .hw-web, .hw-on .bq-com__list > .hw-web { z-index:0; }
.hw-on .bq-loc__card > :not(.hw-web), .hw-on .bq-com__list > :not(.hw-web) { position:relative; z-index:1; }

/* La cuadrícula decorativa de la portada se desvanece abajo (sin línea en la unión con la agenda) */
.hw-on .hero-grid-lines { -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 92%); mask-image:linear-gradient(to bottom,#000 55%,transparent 92%); }

/* Solapa 1px la agenda sobre la portada: elimina la línea fina de unión por redondeo de píxeles */

/* Solapa 2px la agenda sobre la portada: elimina la línea fina de unión por redondeo de píxeles */
.hw-on #eventos { margin-top:-2px; position:relative; z-index:1; }

/* ── Araña que baja del header y vuelve a subir cada cierto tiempo ── */
.hw-spider { position:fixed; top:0; left:12%; z-index:9500; pointer-events:none; width:58px; margin-left:-29px;
  --T:520px; --hdr:107px; --drop:170px;
  transform:translateY(calc(-1 * var(--T) - 80px));
  animation:hwSpiderCycle 34s ease-in-out -17s infinite; }
.hw-spider__swing { transform-origin:50% 0; animation:hwSwing 3.2s ease-in-out infinite alternate; }
.hw-spider__thread { display:block; width:1px; height:var(--T); margin:0 auto; background:linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.6)); }
.hw-spider svg { display:block; width:58px; height:auto; margin-top:-2px; overflow:visible; }
.hw-spider__legs { transform-origin:50% 55%; animation:hwLegs .36s ease-in-out infinite alternate; }
@keyframes hwSwing { from { transform:rotate(-2.4deg); } to { transform:rotate(2.4deg); } }
@keyframes hwLegs { from { transform:scale(1,1); } to { transform:scale(1.07,.93); } }
@keyframes hwSpiderCycle {
  0%, 62%   { transform:translateY(calc(-1 * var(--T) - 80px)); animation-timing-function:cubic-bezier(.2,.7,.3,1); }
  68%       { transform:translateY(calc(var(--hdr) + var(--drop) - var(--T) - 60px)); animation-timing-function:ease-in-out; }
  70.5%     { transform:translateY(calc(var(--hdr) + var(--drop) - var(--T) - 48px)); }
  73%       { transform:translateY(calc(var(--hdr) + var(--drop) - var(--T) - 62px)); }
  75%       { transform:translateY(calc(var(--hdr) + var(--drop) - var(--T) - 60px)); animation-timing-function:cubic-bezier(.5,0,.8,.4); }
  81%, 100% { transform:translateY(calc(-1 * var(--T) - 80px)); }
}
@media (max-width:767px) { .hw-spider { width:44px; margin-left:-22px; --drop:130px; } .hw-spider svg { width:44px; } }
@media (prefers-reduced-motion:reduce) { .hw-spider { display:none; } }

/* ── Mano que sube desde abajo intentando agarrar algo y vuelve a esconderse ── */
.hw-hand { position:fixed; bottom:0; left:50%; z-index:8500; pointer-events:none; width:118px; margin-left:-59px;
  transform:translateY(105%);
  animation:hwHandCycle 41s linear -13.5s infinite; }
.hw-hand__in { transform-origin:50% 100%; animation:hwGrab 1.5s ease-in-out infinite; }
.hw-hand img { display:block; width:100%; height:auto; filter:brightness(1.12) contrast(1.05); }
@keyframes hwHandCycle {
  0%, 55%   { transform:translateY(105%); animation-timing-function:cubic-bezier(.2,.8,.3,1); }
  60.5%     { transform:translateY(2%);   animation-timing-function:ease-in-out; }
  63%       { transform:translateY(-3%);  animation-timing-function:ease-in-out; }
  65.5%     { transform:translateY(4%);   animation-timing-function:ease-in-out; }
  68%       { transform:translateY(0%);   animation-timing-function:cubic-bezier(.6,0,.9,.5); }
  75%, 100% { transform:translateY(105%); }
}
/* Gesto de "agarrar": se inclina y se cierra un poco, y se abre otra vez */
@keyframes hwGrab {
  0%   { transform:rotate(-4deg) scale(1,1); }
  45%  { transform:rotate(3deg) scale(.93,1.02); }
  60%  { transform:rotate(4deg) scale(.9,1.03); }
  100% { transform:rotate(-4deg) scale(1,1); }
}
@media (max-width:767px) { .hw-hand { width:88px; margin-left:-44px; } }
@media (prefers-reduced-motion:reduce) { .hw-hand { display:none; } }

/* ── Etiqueta "Especial Halloween" sobre el logo de la portada ── */
.hw-badge { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.1rem; padding:.5rem 1.1rem;
  border:1px solid rgba(255,122,24,.55); border-radius:9999px; background:rgba(255,122,24,.12);
  color:#ffb066; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; text-decoration:none;
  transition:background .25s, transform .25s; }
.hw-badge:hover { background:rgba(255,122,24,.22); transform:translateY(-2px); }
@media (max-width:767px) { .hw-badge { font-size:.7rem; padding:.42rem .9rem; margin-bottom:.9rem; } }

/* ── Más telarañas: variantes de tamaño, espejo y diseño ── */
.hw-web--v2 { background-image:url('/assets/halloween/web2.svg'); }
.hw-web--b  { top:auto; bottom:0; transform:scaleY(-1); }
.hw-web--b.hw-web--r { transform:scale(-1,-1); }
.hw-web--s { width:84px;  height:84px;  opacity:.26; }
.hw-web--m { width:130px; height:130px; opacity:.28; }
.hw-web--l { width:190px; height:190px; opacity:.24; }
.hw-on .bq-loc, .hw-on .bq-footer { position:relative; }
@media (max-width:767px) {
  .hw-web--m { width:92px; height:92px; } .hw-web--l { width:120px; height:120px; } .hw-web--s { width:64px; height:64px; }
}
/* En el pie de página las telarañas grandes quedan algo más pequeñas para no cruzar el texto */
.hw-on .bq-footer > .hw-web--l { width:118px; height:118px; }
.hw-on .bq-footer > .hw-web--m { width:100px; height:100px; }

/* Modo ligero: sin animaciones decorativas de la portada */
.bq-lite .hw-fx, .bq-lite .hw-on .bq-hero-logo { animation: none; }
.bq-lite .hw-fog { animation: none; }