/* Edición Halloween — solo visible con html.hw */
.hw-only{display:none!important}
html.hw .hw-only{display:block!important}
html.hw p.hw-pill{display:inline-flex!important}
html.hw .hw-layer{display:block!important}
.hw-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hw-web{position:absolute;top:0;width:min(22vw,260px);aspect-ratio:1;color:rgba(255,255,255,.34)}
.hw-web svg{width:100%;height:100%;display:block}
.hw-web-l{left:0}
.hw-web-r{right:0;transform:scaleX(-1)}
.hw-glow{position:absolute;left:-10%;right:-10%;bottom:-25%;height:60%;background:radial-gradient(ellipse at 50% 100%,rgba(255,122,24,.38),rgba(255,122,24,0) 65%)}
.hw-pill{align-items:center;gap:8px;margin:0 0 12px;padding:6px 14px 6px 8px;border-radius:30px;background:rgba(255,122,24,.16);border:1px solid rgba(255,122,24,.55);color:#ffb070;font:800 12.5px var(--fh);letter-spacing:.12em;text-transform:uppercase}
.hw-pump{display:inline-grid;place-items:center;width:26px;height:26px}
.hw-pump svg{width:100%;height:100%}
/* sección */
.hw-sec{position:relative;background:radial-gradient(900px 420px at 85% 0%,rgba(255,122,24,.22),transparent 62%),radial-gradient(700px 360px at 5% 100%,rgba(124,58,237,.2),transparent 60%),#120d1a;color:#fff;overflow:hidden}
.hw-sec .sec-head h2{color:#fff}
.hw-sec .sec-head h2 em{color:#ff8a2e}
.hw-pillx{display:inline-flex;align-items:center;gap:8px;background:rgba(255,122,24,.16);color:#ffb070;border:1px solid rgba(255,122,24,.5)}
.hw-sub{max-width:620px;margin:14px auto 0;color:rgba(255,255,255,.78);text-align:center}
.hw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.hw-card{position:relative;padding:26px 24px 28px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,138,46,.32);box-shadow:0 20px 50px rgba(0,0,0,.35);transition:transform .35s,border-color .35s}
.hw-card:hover{transform:translateY(-4px) rotate(-.6deg);border-color:#ff8a2e}
.hw-n{display:block;font:800 40px var(--fh);color:#ff8a2e;line-height:1}
.hw-card h3{font:800 21px/1.2 var(--fh);margin:12px 0 8px;color:#fff}
.hw-card p{margin:0;color:rgba(255,255,255,.78);text-align:left}
.hw-cta{text-align:center;margin-top:34px}
@media (max-width:760px){.hw-grid{grid-template-columns:1fr}.hw-web{width:34vw}}
.hw-sec .pill.hw-pillx{color:#ffb070;background:rgba(255,122,24,.16);border-color:rgba(255,122,24,.5)}
.hw-glow{background:radial-gradient(ellipse at 50% 100%,rgba(255,122,24,.5),rgba(255,122,24,0) 62%)}

/* ===== más ilustración ===== */
.hw-moon{position:absolute;right:15%;top:5%;width:clamp(54px,7vw,100px);filter:drop-shadow(0 0 30px rgba(255,214,140,.55));opacity:.92;animation:hwmoon 9s ease-in-out infinite}
.hw-moon svg,.hw-ghost svg{width:100%;display:block}
@keyframes hwmoon{50%{transform:translateY(8px)}}
.hw-ghost{position:absolute;display:block;width:clamp(40px,4.4vw,64px);opacity:.88;filter:drop-shadow(0 0 14px rgba(255,255,255,.45));animation:hwghost 6.5s ease-in-out infinite}
.hw-ghost.g1{right:21%;top:46%}
@keyframes hwghost{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(14px,-18px) rotate(5deg)}}
/* araña caminante (hero) */
.hw-spider{display:none;position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
html.hw .hw-spider{display:block}
.hw-thread{position:absolute;top:0;width:1.6px;margin-left:-.8px;height:0;background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.85));opacity:0;transition:opacity .3s}
.hw-sp{position:absolute;left:0;top:0;width:var(--S,50px);opacity:0;transform-origin:50% 94%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));will-change:transform}
.hw-spider.on .hw-sp{opacity:1}
.hw-sp svg{display:block;width:100%;overflow:visible}
.hw-sp .lg{transform-origin:40px 30px;transform-box:view-box}
.hw-spider.walk .lg.l1,.hw-spider.walk .lg.r2,.hw-spider.walk .lg.l3,.hw-spider.walk .lg.r4{animation:hwleg .2s ease-in-out infinite alternate}
.hw-spider.walk .lg.r1,.hw-spider.walk .lg.l2,.hw-spider.walk .lg.r3,.hw-spider.walk .lg.l4{animation:hwleg .2s ease-in-out infinite alternate-reverse}
.hw-spider.hang .lg{animation:hwleg2 .5s ease-in-out infinite alternate}
@keyframes hwleg{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
@keyframes hwleg2{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
/* sección */
.hw-art{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hw-sec .wrap{position:relative;z-index:2}
.hw-moon.m2{right:6%;top:6%;width:clamp(70px,9vw,130px)}
.hw-skyline{position:absolute;left:0;right:0;bottom:0;height:clamp(110px,16vw,210px)}
.hw-skyline svg{width:100%;height:100%;display:block}
.hw-pks{position:absolute;left:0;right:0;bottom:-4px;display:flex;justify-content:space-around;align-items:flex-end;padding:0 6%}
.hw-pk{display:block;width:var(--s);filter:drop-shadow(0 0 16px rgba(255,138,46,.6));animation:hwglow 3s ease-in-out infinite alternate}
.hw-pk:nth-child(2){animation-delay:-1s}.hw-pk:nth-child(3){animation-delay:-2s}
@keyframes hwglow{from{filter:drop-shadow(0 0 8px rgba(255,138,46,.35))}to{filter:drop-shadow(0 0 22px rgba(255,160,60,.85))}}
.hw-hang{position:absolute;top:0;display:block;width:clamp(34px,4.4vw,56px);transform-origin:50% 0;animation:hwswing 4.2s ease-in-out infinite}
.hw-hang.h1{left:8%;height:clamp(110px,16vw,190px)}
.hw-hang.h2{left:88%;height:clamp(70px,10vw,120px);animation-delay:-2s;width:clamp(28px,3.6vw,44px)}
.hw-thread2{position:absolute;left:50%;top:0;bottom:30px;width:1.6px;background:rgba(255,255,255,.7)}
.hw-sp2{position:absolute;left:0;right:0;bottom:0;display:block}
.hw-sp2 svg{display:block;width:100%;overflow:visible}
.hw-sp2 .lg{transform-origin:40px 30px;transform-box:view-box;animation:hwleg2 .6s ease-in-out infinite alternate}
@keyframes hwswing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.hw-ghost.g2{left:14%;top:36%}
.hw-ghost.g3{right:12%;top:52%;width:clamp(30px,3.4vw,46px);animation-delay:-3s}
.hw-ic{display:block;width:46px;height:46px;margin-bottom:10px}
.hw-ic svg{width:100%;height:100%;display:block}
.hw-card{background:rgba(18,13,26,.72);backdrop-filter:blur(4px)}
.hw-sec{padding-bottom:clamp(150px,20vw,260px)}
@media (max-width:760px){.hw-moon{right:6%;top:3%}.hw-ghost.g1{display:none}.hw-ghost.g2{left:4%;top:20%}.hw-hang.h2{left:82%}}
@media (prefers-reduced-motion:reduce){.hw-moon,.hw-ghost,.hw-pk,.hw-hang,.hw-sp2 .lg{animation:none}}

/* ===== edición en toda la página ===== */
.hw-wide{display:none}
html.hw .hw-wide{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
html.hw main .sec>.wrap,html.hw main .sec>.container,html.hw .foot>*:not(.hw-wide){position:relative;z-index:1}
.foot{position:relative}
/* telaraña real + araña colgando de ella (siempre visibles) */
html.hw .hw-corner{position:absolute;top:0;width:clamp(150px,19vw,240px);aspect-ratio:1}
html.hw .hw-corner.cl{left:0}html.hw .hw-corner.cr{right:0}
html.hw .hw-corner .hw-web{position:absolute;inset:0;width:100%;aspect-ratio:auto;top:0;left:0;right:auto;transform:none;color:rgba(255,255,255,.78);filter:drop-shadow(0 0 3px rgba(190,215,255,.7))}
html.hw .hw-corner.cr .hw-web{transform:none}
html:not([data-theme="dark"]) .hw-corner .hw-web{color:rgba(60,35,90,.7);filter:drop-shadow(0 0 2px rgba(255,255,255,.8))}
.hw-corner .hw-web svg{width:100%;height:100%;display:block}
/* la araña cuelga de la hebra exterior de la telaraña */
html.hw .hw-corner .hw-hs{position:absolute;top:72%;left:auto;width:clamp(36px,4.2vw,54px);height:var(--len,100px);transform-origin:50% 0;animation:hwswing 4.6s ease-in-out infinite}
html.hw .hw-corner.cl .hw-hs{left:30%}html.hw .hw-corner.cr .hw-hs{right:30%}
html.hw .hw-hs .hw-thread2{background:rgba(255,255,255,.9);width:1.8px;box-shadow:0 0 4px rgba(190,215,255,.9);animation:hwdrop 7s ease-in-out infinite}
html.hw .hw-hs .hw-sp2{animation:hwbob 7s ease-in-out infinite;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 9px rgba(255,138,46,.95))}
@keyframes hwdrop{0%,100%{bottom:46%}50%{bottom:30px}}
@keyframes hwbob{0%,100%{transform:translateY(-46%) translateY(0)}50%{transform:translateY(0)}}
/* fantasmas: siempre en movimiento, en móvil y web */
html.hw .hw-wide .hw-gs{top:16%;width:clamp(44px,4.6vw,66px);opacity:.78;filter:drop-shadow(0 0 16px rgba(255,255,255,.65));animation:hwghost2 7s ease-in-out infinite}
html.hw .hw-wide .gs-l{left:6%;right:auto}html.hw .hw-wide .gs-r{right:6%;left:auto}html.hw .hw-wide .gs-m{left:48%;top:62%;width:clamp(34px,3.4vw,50px);opacity:.6}
@keyframes hwghost2{0%,100%{transform:translate(0,0) rotate(-6deg);opacity:.5}30%{transform:translate(26px,-22px) rotate(5deg);opacity:.85}60%{transform:translate(-18px,-38px) rotate(-4deg);opacity:.8}}
html.hw .hero .hw-ghost.g1{animation:hwghost2 7s ease-in-out infinite;opacity:.85}
/* neblina */
html.hw .hw-fs{position:absolute;left:-30%;right:-30%;bottom:-6%;height:38%;background:radial-gradient(ellipse 22% 55% at 12% 60%,rgba(215,225,240,.34),transparent 70%),radial-gradient(ellipse 26% 60% at 40% 70%,rgba(215,225,240,.3),transparent 70%),radial-gradient(ellipse 24% 55% at 68% 55%,rgba(215,225,240,.32),transparent 70%),radial-gradient(ellipse 22% 60% at 92% 70%,rgba(215,225,240,.28),transparent 70%);filter:blur(12px);animation:hwfog 28s ease-in-out infinite alternate}
@keyframes hwfog{from{transform:translateX(-6%)}to{transform:translateX(8%)}}
html.hw .hw-wide .hw-pks-f{bottom:0;opacity:.9}
/* cielo del hero: nubes y neblina */
.hw-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hw-cl{position:absolute;display:block;color:#3b2d5c;left:-40%;animation:hwcloud 60s linear infinite}
.hw-cl svg{display:block;height:auto;filter:blur(1.5px)}
.hw-cl.c1{top:6%;animation-duration:70s}
.hw-cl.c2{top:24%;color:#4a3a70;animation-duration:95s;animation-delay:-40s}
.hw-cl.c3{top:12%;color:#2e2350;animation-duration:120s;animation-delay:-75s}
@keyframes hwcloud{from{transform:translateX(0)}to{transform:translateX(220vw)}}
.hw-sky .hw-fog{position:absolute;left:-30%;right:-30%;display:block;height:34%;filter:blur(16px);background:radial-gradient(ellipse 20% 55% at 10% 50%,rgba(225,232,245,.42),transparent 70%),radial-gradient(ellipse 24% 60% at 38% 60%,rgba(225,232,245,.36),transparent 70%),radial-gradient(ellipse 22% 55% at 66% 50%,rgba(225,232,245,.4),transparent 70%),radial-gradient(ellipse 20% 60% at 92% 60%,rgba(225,232,245,.34),transparent 70%)}
.hw-sky .f1{bottom:-4%;animation:hwfog 26s ease-in-out infinite alternate}
.hw-sky .f2{bottom:14%;height:26%;opacity:.7;animation:hwfog 38s ease-in-out infinite alternate-reverse}
/* telarañas del hero más visibles */
html.hw .hero .hw-web{color:rgba(255,255,255,.8);filter:drop-shadow(0 0 3px rgba(190,215,255,.7));width:min(24vw,300px)}
@media (max-width:760px){html.hw .hw-corner{width:34vw}html.hw .hero .hw-web{width:34vw}html.hw .hw-wide .hw-gs{display:block}html.hw .hero .hw-ghost.g1{display:block;right:6%;top:52%}.hw-cl.c3{display:none}}
@media (prefers-reduced-motion:reduce){.hw-hs,.hw-gs,.hw-cl,.hw-fog,.hw-fs{animation:none}}

/* botón calabaza (junto a día/noche) */
.hw-btn{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;height:44px;min-width:44px;padding:0 10px;margin-right:8px;border-radius:999px;border:1.5px solid rgba(255,138,46,.7);background:rgba(255,122,24,.14);color:#ffb070;cursor:pointer;font:700 12px/1 inherit;letter-spacing:.02em;transition:background .3s,transform .2s}
.hw-btn svg{width:30px;height:30px;flex:none;filter:drop-shadow(0 0 8px rgba(255,138,46,.9)) drop-shadow(0 0 16px rgba(255,138,46,.5));animation:hwglow 2.4s ease-in-out infinite alternate}
.hw-btn:hover{background:rgba(255,122,24,.28);transform:translateY(-1px)}
.hw-btn[aria-pressed="false"]{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.hw-btn[aria-pressed="false"] svg{filter:grayscale(.85) brightness(.9);animation:none;opacity:.8}
.hw-btn-t{display:none;white-space:nowrap}
@media (min-width:1101px){.hw-btn-t{display:inline;padding-right:4px}}
.nav.is-solid .hw-btn{color:#c4500a;background:rgba(255,122,24,.12)}
@media (prefers-reduced-motion:reduce){.hw-btn svg{animation:none}}

/* ===== v7: telarañas reales, arañas y fantasmas siempre visibles (web y celular) ===== */
html.hw .hw-web{color:rgba(255,255,255,.62);filter:drop-shadow(0 0 3px rgba(255,255,255,.35))}
html.hw .hw-wide .hw-web{width:min(24vw,280px);color:rgba(255,255,255,.6);filter:drop-shadow(0 0 3px rgba(255,255,255,.35))}
html.hw:not([data-theme="dark"]) .hw-web,html.hw:not([data-theme="dark"]) .hw-wide .hw-web{color:rgba(30,14,52,.7);filter:drop-shadow(0 0 2px rgba(255,255,255,.6))}
html.hw .hw-wide{z-index:3}
html.hw .hw-wide .hw-hs{width:clamp(34px,4vw,52px);height:clamp(90px,12vw,170px);filter:drop-shadow(0 0 7px rgba(255,138,46,.95)) drop-shadow(0 0 2px rgba(255,255,255,.7))}
html.hw .hw-wide .hs-r{right:9%}html.hw .hw-wide .hs-l{left:9%}
html.hw .hw-wide .hw-gs{width:clamp(44px,5vw,70px);opacity:.88;top:18%;animation:hwdrift 7s ease-in-out infinite}
@keyframes hwdrift{0%,100%{transform:translate(0,0) rotate(-5deg)}25%{transform:translate(22px,-26px) rotate(4deg)}50%{transform:translate(-6px,-42px) rotate(-3deg)}75%{transform:translate(-24px,-18px) rotate(6deg)}}
html.hw .hw-ghost.g1{animation-duration:5.5s}
@media (max-width:760px){
  html.hw .hw-wide .hw-web{width:34vw}
  html.hw .hw-wide .hw-gs{display:block;width:46px}
  html.hw .hw-wide .gs-l{left:6%}html.hw .hw-wide .gs-r{right:6%}
  html.hw .hw-wide .hw-hs{height:clamp(80px,22vw,120px);width:34px}
  html.hw .hw-wide .hs-l{left:9%;right:auto}html.hw .hw-wide .hs-r{right:9%;left:auto}
  html.hw .hw-ghost.g1{display:block;right:8%;top:50%;width:46px}
}
html.hw .hero-word{z-index:3}
html.hw .hw-wide .gs-m{opacity:.5;left:58%;top:8%}
@media (max-width:480px){.hw-btn{height:38px;min-width:38px;padding:0 6px;margin-right:4px}.hw-btn svg{width:26px;height:26px}html.hw .nav-word{width:104px;height:auto}}
.hw-cl{color:#7a6aa8}
.hw-cl.c1{top:-2%}.hw-cl.c2{top:-4%;color:#8d7cba}.hw-cl.c3{top:1%;color:#6a5b98}
.hw-cl svg{opacity:.85!important}
.hw-sky .hw-fog{background:radial-gradient(ellipse 20% 55% at 10% 50%,rgba(235,240,250,.6),transparent 70%),radial-gradient(ellipse 24% 60% at 38% 60%,rgba(235,240,250,.52),transparent 70%),radial-gradient(ellipse 22% 55% at 66% 50%,rgba(235,240,250,.58),transparent 70%),radial-gradient(ellipse 20% 60% at 92% 60%,rgba(235,240,250,.5),transparent 70%)}
html.hw .hw-fs{filter:blur(10px);opacity:1}
.hw-cl.c1{animation-delay:-26s}.hw-cl.c2{animation-delay:-52s}.hw-cl.c3{animation-delay:-60s}
@media (max-width:480px){html.hw .nav-word{width:92px}.hw-btn{height:36px;min-width:36px;margin-left:auto;margin-right:6px}.hw-btn svg{width:24px;height:24px}html.hw .nav .theme{width:40px;height:40px}}
/* sin nubes; neblina leve y natural */
.hw-cl{display:none!important}
.hw-sky .hw-fog{opacity:.55}
.hw-sky .f2{opacity:.35}
html.hw .hw-fs{opacity:.7}
/* móvil: botón calabaza sin apretar el logotipo */
@media (max-width:480px){
  .hw-btn{height:34px;min-width:34px;width:34px;padding:0;margin-right:2px;justify-content:center;border-width:1.5px}
  .hw-btn svg{width:22px;height:22px}
  html.hw .nav-word{width:88px;height:auto}
  html.hw .nav-brand{gap:6px}
}