/* ESTILO HALLOWEEN — colores (variables --pr-*) y decoraciones propias (clases hl-*).
   Los componentes base viven en assets/css/promo.css; este archivo solo les da identidad.
   Mantenerlo autocontenido: sin url(...) externas (el panel del organizador lo pega dentro de la página). */

:root{
  --pr-a:#f97316; --pr-b:#a855f7; --pr-hi:#fde68a; --pr-hi-line:rgba(253,230,138,.4); --pr-ink:#1c0a00; --pr-ink-bg:#7c2d12; --pr-soft:#fed7aa; --pr-ok:#4ade80;
  --pr-bar:linear-gradient(90deg,#1a0a2e 0%,#3b1466 30%,#7c2d12 70%,#ea580c 100%); --pr-bar-line:rgba(251,146,60,.35);
  --pr-card:linear-gradient(160deg,#1a0a2e 0%,#3b1466 48%,#7c2d12 100%); --pr-card-line:rgba(251,146,60,.5); --pr-card-glow:rgba(168,85,247,.25);
  --pr-glow-a:rgba(124,45,18,.28); --pr-glow-b:rgba(168,85,247,.38);
  --pr-btn:linear-gradient(135deg,#fde68a,#f97316); --pr-btn-glow:rgba(249,115,22,.45);
  --pr-btn-b:linear-gradient(135deg,#f97316,#a855f7); --pr-btn-b-glow:rgba(168,85,247,.35);
  --pr-btn-p:linear-gradient(135deg,#fbbf24,#f97316); --pr-btn-p-glow:rgba(249,115,22,.4);
  --pr-pill-b:linear-gradient(135deg,#f97316,#a855f7); --pr-pill-b-ink:#fff; --pr-pill-p:linear-gradient(135deg,#fde68a,#f97316); --pr-pill-p-ink:#1c0a00;
  --pr-new:linear-gradient(135deg,#fde68a,#fb923c 55%,#f0abfc);
  --pr-chip-bg:rgba(249,115,22,.14); --pr-chip-line:rgba(251,146,60,.45);
  --pr-strip-bg:linear-gradient(90deg,rgba(124,58,237,.2),rgba(249,115,22,.2)); --pr-strip-line:rgba(251,146,60,.45);
  --pr-plan-b-bg:linear-gradient(160deg,rgba(124,58,237,.18),rgba(234,88,12,.09)); --pr-plan-b-line:rgba(251,146,60,.55); --pr-plan-b-shadow:0 0 55px rgba(234,88,12,.16),0 0 0 1px rgba(168,85,247,.25);
  --pr-plan-p-bg:linear-gradient(160deg,rgba(249,115,22,.17),rgba(124,58,237,.10)); --pr-plan-p-line:rgba(251,191,36,.6); --pr-plan-p-shadow:0 0 60px rgba(249,115,22,.2),0 0 0 1px rgba(251,191,36,.25);
  --pr-sep-b:rgba(251,146,60,.28); --pr-sep-p:rgba(251,191,36,.3);
  --pr-top-b:linear-gradient(90deg,#f97316,#a855f7,#f97316); --pr-top-p:linear-gradient(90deg,#f59e0b,#a855f7,#f59e0b);
  --pr-col-b:rgba(168,85,247,.14); --pr-col-p:rgba(249,115,22,.15); --pr-cell-b:rgba(168,85,247,.06); --pr-cell-p:rgba(249,115,22,.06);
  --pr-cat-bg:rgba(249,115,22,.07); --pr-cat-txt:#fb923c; --pr-cmp-line:rgba(251,146,60,.3); --pr-star-bg:rgba(249,115,22,.22); --pr-star-txt:#fdba74;
}

/* ── Tarjetas de plan: telaraña en la esquina + arañita colgando ── */
.hl-web{position:absolute;left:0;top:4px;width:92px;height:92px;fill:none;stroke:#e9d5ff;stroke-width:.9;opacity:.38;pointer-events:none}
.hl-dangle{position:absolute;top:4px;display:flex;flex-direction:column;align-items:center;pointer-events:none;animation:hlBob var(--d,3s) ease-in-out infinite alternate}
.hl-dangle i{display:block;width:1.5px;height:26px;background:rgba(233,213,255,.55)}
.hl-dangle svg{width:22px;height:auto;filter:drop-shadow(0 0 5px rgba(168,85,247,.6))}
@keyframes hlBob{from{transform:translateY(-4px)}to{transform:translateY(12px)}}

/* ── Banners (blog y cuenta): murciélagos que cruzan, calabaza que flota y cara que parpadea ── */
.hl-bat{position:absolute;left:0;top:var(--y);width:var(--s);color:#0b0614;animation:hlFly var(--t) linear infinite;animation-delay:var(--d)}
.hl-bat svg{display:block;width:100%;height:auto;fill:#1a0f2e;stroke:rgba(192,132,252,.8);stroke-width:1;animation:hlFlap .3s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes hlFly{from{transform:translateX(-40px)}to{transform:translateX(340px)}}
@keyframes hlFlap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
.pr-deco .hl-web{z-index:0}
.pr-deco .hl-dangle{z-index:1}
.hl-pumpkin{position:absolute;right:12px;top:30px;width:66px;z-index:1;filter:drop-shadow(0 0 18px rgba(251,146,60,.6));animation:hlFloat 3.4s ease-in-out infinite}
.hl-pumpkin svg,.pr-wide-icon svg{display:block;width:100%;height:auto}
.pr-wide-icon{filter:drop-shadow(0 0 18px rgba(251,146,60,.6));animation:hlFloat 3.4s ease-in-out infinite}
.hl-face{animation:hlFlick 3.1s steps(1) infinite}
@keyframes hlFloat{50%{transform:translateY(-8px) rotate(-3deg)}}
@keyframes hlFlick{0%{opacity:1}14%{opacity:.7}20%{opacity:1}52%{opacity:.8}58%{opacity:1}80%{opacity:.65}86%{opacity:1}}
/* en el banner ancho la arañita cuelga entre el texto y los botones (no encima del título); en teléfono se oculta */
.pr-wide .hl-dangle{left:auto!important;right:250px}
@media (max-width:720px){.pr-wide .hl-dangle{display:none}}

/* ── Elemento fijo de la portada: caldero de tickets (centrado abajo, semitransparente, sin bloquear clics) ── */
.hl-caldero{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:6px;width:170px;aspect-ratio:1.2;pointer-events:none;opacity:.5}
.hl-caldero::before{content:"";position:absolute;left:5%;right:5%;bottom:-8%;height:60%;background:radial-gradient(ellipse at 50% 70%,rgba(74,222,128,.28),transparent 68%);filter:blur(14px)}
.hl-caldero svg{position:absolute;inset:0;width:100%;height:100%}
.hl-bub{position:absolute;bottom:62%;width:var(--s);aspect-ratio:1;border-radius:50%;left:var(--x);opacity:0;
  background:radial-gradient(circle at 30% 30%,#ecfccb,#4ade80 60%,#16a34a);box-shadow:0 0 10px rgba(74,222,128,.7);
  animation:hlBub var(--t) ease-out infinite;animation-delay:var(--d)}
.hl-tk{position:absolute;left:50%;bottom:64%;width:60px;height:30px;margin-left:-30px;border-radius:6px;
  background:linear-gradient(135deg,#fde68a,#fb923c);color:#2a0f00;font:900 11px/30px 'Inter',sans-serif;text-align:center;
  box-shadow:0 0 18px rgba(251,146,60,.75);opacity:0;animation:hlPop 4.8s ease-out infinite;animation-delay:var(--d)}
.hl-tk::before,.hl-tk::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#04050f}
.hl-tk::before{left:-4px}.hl-tk::after{right:-4px}
@keyframes hlBub{0%{transform:translateY(8px) scale(.4);opacity:0}25%{opacity:.95}80%{transform:translateY(-30px) scale(1);opacity:.9}100%{transform:translateY(-40px) scale(1.5);opacity:0}}
@keyframes hlPop{0%{transform:translate(0,26px) scale(.3) rotate(0);opacity:0}10%{opacity:1}45%{transform:translate(var(--dx),-150px) scale(1) rotate(var(--r))}100%{transform:translate(calc(var(--dx)*1.6),44px) scale(.9) rotate(calc(var(--r)*2.2));opacity:0}}
@media (max-width:1023px){.hl-caldero{width:104px;bottom:2px}.hl-tk{transform-origin:center}}

/* ── Puntero: bruja voladora (la dibuja efectos.js) ── */
html.hl-witch,html.hl-witch *{cursor:none!important}
html.hl-witch input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),html.hl-witch textarea{cursor:text!important}

@media (prefers-reduced-motion:reduce){
  .hl-dangle,.hl-bat,.hl-bat svg,.hl-pumpkin,.pr-wide-icon,.hl-face{animation:none!important}
  .hl-bub,.hl-tk{animation:none!important;display:none}
}