/* =====================================================
   HALLOWEEN — se activa con <html class="hw"> (lo pone halloween.js)
   Botón 🎃 abajo a la izquierda = encender / apagar.
   Para quitarlo del todo: borra halloween.css, halloween.js
   y la línea marcada <!--HALLOWEEN--> en cada .html
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

/* --- botón de encendido/apagado (siempre visible) --- */
#hwbtn{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:30px;font-size:13px;background:#000c;color:#a99bc0;border:1px solid #2e1450;box-shadow:none}
#hwbtn.on{color:#ffa040;border-color:#ff7518;box-shadow:0 0 14px #ff751855}
@media(max-width:560px){#hwbtn span{display:none}#hwbtn{padding:10px}}

/* --- estilo (solo con html.hw) --- */
html.hw{--hw:#ff7518;--hw2:#ffa040}
html.hw body{background-image:radial-gradient(circle at 50% -10%,#3b0f66 0,transparent 55%),radial-gradient(circle at 100% 100%,#ff751822 0,transparent 40%)}
html.hw::before{content:"";position:fixed;left:0;top:0;width:150px;height:150px;pointer-events:none;z-index:19;opacity:.55;
 background:repeating-radial-gradient(circle at 0 0,transparent 0 17px,#c9b6f255 17px 18px),repeating-conic-gradient(from 0deg at 0 0,transparent 0 14deg,#c9b6f255 14deg 15deg);
 -webkit-mask:radial-gradient(circle at 0 0,#000 60%,transparent 72%);mask:radial-gradient(circle at 0 0,#000 60%,transparent 72%)}
html.hw::after{content:"🦇   🦇      🦇";position:fixed;top:calc(70px + env(safe-area-inset-top,0px));left:-120px;font-size:22px;white-space:pre;pointer-events:none;z-index:19;opacity:.7;animation:bats 22s linear infinite}
@keyframes bats{to{transform:translateX(calc(100vw + 240px))}}
html.hw .hero h1,html.hw .logo b,html.hw .logo span,html.hw .aside h2{font-family:"Creepster","Orbitron",cursive;letter-spacing:2px;font-weight:400}
html.hw .hero h1{font-size:clamp(34px,7vw,58px)}
html.hw .hero h1 span,html.hw .aside h2 span{color:var(--hw);text-shadow:0 0 18px #ff751899}
html.hw .hero h1::before{content:"🎃 "}html.hw .hero h1::after{content:" 🎃"}
html.hw .logo img,html.hw .alogo,html.hw .flogo{filter:drop-shadow(0 0 8px #ff751866)}
html.hw .badge{border-color:var(--hw);color:var(--hw2)}
html.hw .badge .dot{background:var(--hw);box-shadow:0 0 8px var(--hw)}
html.hw .badge::before{content:"🎃 "}html.hw .badge::after{content:" 👻"}
html.hw .card:hover{border-color:var(--hw);box-shadow:0 8px 28px #ff751833}
html.hw .card .p,html.hw .p.big,html.hw .stats b,html.hw .kpis>div:first-child b{color:var(--hw);text-shadow:0 0 14px #ff751855}
html.hw .chips span{border-color:var(--hw);color:var(--hw2)}
html.hw .steps .card::before{background:var(--hw);color:#150a05}
html.hw .st::after{background:linear-gradient(90deg,var(--hw),var(--pu))}
html.hw .faq summary::after{color:var(--hw)}
html.hw .bal{border-color:var(--hw);color:var(--hw2)}
html.hw button:hover:not(:disabled){box-shadow:0 0 18px #ff751888}
html.hw .box{border-color:var(--hw);box-shadow:0 0 40px #ff751844}
html.hw .auth{border-color:var(--hw);box-shadow:0 0 30px #ff751833}
html.hw .bnr{box-shadow:0 0 30px #ff751833}
html.hw .hello{border-color:#ff751855}
html.hw .cred{border-color:var(--hw)}
html.hw .top{box-shadow:0 1px 0 #ff751877}
html.hw .foot::before{content:"🕸️ 🎃 🕷️ 🎃 🕸️";display:block;font-size:22px;margin-bottom:8px}
html.hw ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--hw),var(--pu))}
html.hw *{scrollbar-color:var(--hw) #07040d}
html.hw #toast{background:var(--hw);color:#150a05}
@media(max-width:560px){html.hw::before{width:100px;height:100px}}

/* pantalla de carga en Halloween */
html.hw #boot{background:radial-gradient(circle at 50% 38%,#3b0f66 0,#0a0510 48%,#050308 80%)}
html.hw .bt-ring::before{background:conic-gradient(from 0deg,transparent 0 22%,#7c3aed 55%,#ff7518 100%)}
html.hw .bt-ring img{box-shadow:0 0 28px #ff751888}
html.hw .bt-bar i{background:linear-gradient(90deg,#7c3aed,#ff7518)}
html.hw .foot .flogo{border-color:var(--hw);box-shadow:0 0 24px #ff751855}
html.hw .fchips span{border-color:#ff751855}