/* ─────────────────────────────────────────────────────────────
   Temáticas de temporada de la landing (Halloween y Navidad).
   Solo se aplican cuando temas.js pone data-tema en <html>.
   Las fechas se configuran al principio de temas.js.
   ───────────────────────────────────────────────────────────── */

/* ── piezas comunes ── */
.tema-banda{position:relative;z-index:1;text-align:center;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:10px 20px;border-bottom:1px solid var(--line)}
.tema-banda b{font-weight:700}
.tema-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero .wrap{z-index:1}
.pole{overflow:visible}

/* ═════════════════════════ HALLOWEEN ═════════════════════════ */
html[data-tema="halloween"]{
  --brass:#E28A35;--brass-hi:#F2A85E;--brass-dk:#8A4A12;
  --line:rgba(226,138,53,.22);
}
[data-tema="halloween"] .tema-banda{background:linear-gradient(90deg,#1A0F1F,#2A1530 50%,#1A0F1F);color:#F2A85E}
[data-tema="halloween"] .hero-glow{background:
  radial-gradient(40% 50% at 82% 22%,rgba(242,168,94,.18),rgba(12,10,9,0) 70%),
  radial-gradient(60% 60% at 10% 90%,rgba(110,48,140,.18),rgba(12,10,9,0) 70%)}
[data-tema="halloween"] .hero-lines g{stroke:#E28A35}
[data-tema="halloween"] .cinta{border-color:rgba(226,138,53,.55)}
/* el poste se recolorea desde temas.js (naranja calabaza y morado) */
[data-tema] .hero-title{margin-top:30px}

/* luna llena */
.h-luna{position:absolute;top:clamp(24px,5vw,60px);right:clamp(-40px,4vw,80px);width:clamp(150px,18vw,250px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 62% 40%,rgba(160,120,70,.22) 0,transparent 9%),
    radial-gradient(circle at 40% 64%,rgba(160,120,70,.18) 0,transparent 13%),
    radial-gradient(circle at 70% 68%,rgba(160,120,70,.14) 0,transparent 7%),
    radial-gradient(circle at 28% 34%,rgba(160,120,70,.12) 0,transparent 6%),
    radial-gradient(circle at 35% 32%,#FFF6E2 0%,#F4DDAE 45%,#D9B27A 100%);
  box-shadow:0 0 60px rgba(242,190,110,.35),0 0 160px rgba(242,168,94,.18);
  opacity:.9;animation:lunaFlota 12s ease-in-out infinite}
@keyframes lunaFlota{50%{transform:translateY(10px)}}

/* telaraña en la esquina */
.h-telarana{position:absolute;top:0;left:0;width:clamp(120px,16vw,210px);height:auto;opacity:.5}
.h-telarana path{fill:none;stroke:#EADFCB;stroke-width:.8}
.h-arana{position:absolute;top:0;left:clamp(70px,10vw,130px);width:2px;height:120px;transform-origin:top;animation:arana 6s ease-in-out infinite}
.h-arana::before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:rgba(234,223,203,.5)}
.h-arana svg{position:absolute;left:-9px;bottom:-14px;width:20px;height:20px}
@keyframes arana{0%,100%{height:90px}50%{height:150px}}

/* murciélagos */
.h-murcielago{position:absolute;left:-80px;width:var(--w,48px);color:#2A1636;animation:vuelo var(--t,16s) linear infinite;animation-delay:var(--d,0s);opacity:.9}
.h-murcielago svg{display:block;width:100%;height:auto;animation:aleteo .28s ease-in-out infinite alternate;transform-origin:50% 60%;filter:drop-shadow(0 0 1px rgba(242,168,94,.9)) drop-shadow(0 0 8px rgba(242,168,94,.45))}
@keyframes aleteo{to{transform:scaleY(.35)}}
@keyframes vuelo{
  0%{transform:translate(0,0)}
  25%{transform:translate(28vw,-30px)}
  50%{transform:translate(55vw,20px)}
  75%{transform:translate(82vw,-24px)}
  100%{transform:translate(calc(100vw + 160px),10px)}
}

/* niebla al pie del hero */
.h-niebla{position:absolute;left:-10%;right:-10%;bottom:-20px;height:180px;
  background:
    radial-gradient(40% 60% at 20% 70%,rgba(200,190,215,.10),transparent 70%),
    radial-gradient(35% 55% at 55% 80%,rgba(200,190,215,.09),transparent 70%),
    radial-gradient(40% 60% at 85% 70%,rgba(200,190,215,.10),transparent 70%);
  filter:blur(6px);animation:niebla 18s ease-in-out infinite alternate}
@keyframes niebla{to{transform:translateX(5%)}}

/* calabazas en el pie de la foto */
.h-calabazas{position:absolute;right:-6px;bottom:-26px;display:flex;align-items:flex-end;gap:2px;z-index:2;pointer-events:none}
.h-calabazas svg{display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.h-calabazas .brillo{animation:vela 2.4s ease-in-out infinite}
@keyframes vela{0%,100%{opacity:.85}40%{opacity:1}60%{opacity:.7}}

/* ═════════════════════════ NAVIDAD ═════════════════════════ */
[data-tema="navidad"] .tema-banda{background:linear-gradient(90deg,#0E1F16,#173524 50%,#0E1F16);color:#E9CF94}
[data-tema="navidad"] .hero-glow{background:
  radial-gradient(55% 60% at 78% 35%,rgba(207,164,94,.14),rgba(12,10,9,0) 70%),
  radial-gradient(60% 60% at 15% 85%,rgba(30,90,58,.16),rgba(12,10,9,0) 70%)}
/* el poste se recolorea desde temas.js (bastón de caramelo rojo y blanco) */

/* nieve */
.n-copo{position:absolute;top:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,#fff 0,rgba(255,255,255,.75) 45%,rgba(255,255,255,0) 72%);
  opacity:var(--o);animation:nieve var(--t) linear infinite;animation-delay:var(--d)}
@keyframes nieve{
  0%{transform:translate(0,-10px)}
  50%{transform:translate(var(--dx),55vh)}
  100%{transform:translate(0,110vh)}
}

/* destellos dorados */
.n-estrella{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);color:#E9CF94;animation:destello var(--t) ease-in-out infinite;animation-delay:var(--d);opacity:.15}
.n-estrella svg{display:block;width:100%;height:100%}
@keyframes destello{0%,100%{opacity:.12;transform:scale(.7) rotate(0)}50%{opacity:.9;transform:scale(1) rotate(45deg)}}

/* guirnalda de luces bajo la barra */
.n-guirnalda{position:absolute;left:0;right:0;top:100%;height:38px;pointer-events:none;overflow:hidden}
.n-guirnalda .cable{position:absolute;inset:0 0 auto 0;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='22'%3E%3Cpath d='M0 2 Q45 26 90 2' fill='none' stroke='%23324A3A' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x;
  background-size:90px 22px}
.n-luz{position:absolute;top:13px;width:9px;height:14px;margin-left:-4.5px;border-radius:45% 45% 50% 50%/40% 40% 60% 60%;background:var(--c);
  box-shadow:0 0 10px 2px var(--c);animation:parpadeo var(--t) ease-in-out infinite;animation-delay:var(--d)}
.n-luz::before{content:"";position:absolute;left:2px;top:-4px;width:5px;height:5px;background:#5A6B5F;border-radius:1px}
@keyframes parpadeo{0%,100%{opacity:1}50%{opacity:.35;box-shadow:0 0 2px 0 var(--c)}}

/* sello y detalles */
[data-tema="navidad"] .cinta-track i{color:#E9CF94;opacity:1}

/* ── móvil ── */
@media (max-width:720px){
  .h-luna{top:18px;right:-50px;width:130px;opacity:.6}
  .h-calabazas{right:4px;bottom:-14px;transform:scale(.75);transform-origin:bottom right}
  .h-telarana{width:100px}
  .tema-banda{font-size:11px;letter-spacing:.08em}
}

/* ── personajes que siguen al ratón (solo ordenador) ── */
.seguidor{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:0;transition:opacity .4s}
.seguidor.on{opacity:1}
.seg-pieza{position:absolute;left:0;top:0;will-change:transform}
.seg-riendas{position:absolute;inset:0;overflow:visible}
.seg-bocadillo{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;opacity:0;transition:opacity .25s;
  font:600 14px/1.25 'Archivo',system-ui,sans-serif;color:#1A1220;white-space:nowrap;
  background:#FFF7EC;padding:8px 13px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 0 1px rgba(226,138,53,.6)}
.seg-bocadillo::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#FFF7EC}
.seg-bocadillo.ver{opacity:1}
.seg-pieza svg{display:block;width:100%;height:auto}
.seguidor-halloween .seg-in{animation:flotar 2.2s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(242,168,94,.45)) drop-shadow(0 6px 10px rgba(0,0,0,.35))}
@keyframes flotar{50%{transform:translateY(-7px)}}
.seguidor-halloween.quieto .seg-in{animation-duration:3.2s}
.seguidor-navidad .seg-in{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.seguidor-navidad .pata{transform-box:fill-box;transform-origin:top;animation:galope .5s ease-in-out infinite alternate}
.seguidor-navidad .pata.b{animation-direction:alternate-reverse}
@keyframes galope{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.seguidor-navidad.quieto .pata{animation-play-state:paused}
.seguidor-navidad .nariz{animation:nariz 1.4s ease-in-out infinite}
@keyframes nariz{50%{filter:drop-shadow(0 0 4px #ff3b3b)}}

/* ── movimiento reducido: decoración quieta ── */
@media (prefers-reduced-motion:reduce){
  .h-luna,.h-niebla,.h-arana,.h-calabazas .brillo,.n-estrella,.n-luz{animation:none}
  .h-murcielago,.n-copo,.seguidor{display:none}
}