/* Halloween Gokiebox 2026 — se carga solo en temporada. Paleta de marca: #1ABC9C / #16A085 / negro / blanco.
   Propuestas por clase en <html>: hw-p1 (noche turquesa), hw-p2 (calabaza turquesa), hw-p3 (precios de miedo), hw-p4 (detalles), hw-p5/p6 (fantasmas), hw-p7 (murciélagos al abrir), hw-p8 (arañas), hw-p9 (calabazas), hw-p10 (bruja). */

/* ---------- P1 · Noche turquesa ---------- */
.hw-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.hw-moon{position:absolute;top:calc(var(--gk-head-h,130px) + 10px);right:8%;width:clamp(90px,11vw,170px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#fff 0 40%,#e9f7f4 62%,#d4efe9 100%);
  box-shadow:0 0 50px 16px rgba(26,188,156,.6),0 0 160px 70px rgba(26,188,156,.25);opacity:.95}
.hw-moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:
  radial-gradient(circle at 62% 58%,rgba(15,23,42,.10) 0 9%,transparent 10%),
  radial-gradient(circle at 35% 70%,rgba(15,23,42,.08) 0 6%,transparent 7%),
  radial-gradient(circle at 70% 30%,rgba(15,23,42,.07) 0 5%,transparent 6%)}
.hw-bat{position:absolute;left:0;width:40px;animation:hwFly 16s linear infinite}
.hw-bat svg{display:block;width:100%;height:auto;fill:#000;filter:drop-shadow(0 0 2px rgba(255,255,255,.35));animation:hwFlap .3s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes hwFlap{to{transform:scaleY(.45)}}
@keyframes hwFly{0%{transform:translate(-80px,0)}50%{transform:translate(48vw,-30px)}100%{transform:translate(105vw,10px)}}
.hw-fog{position:absolute;left:-10%;right:-10%;bottom:-40px;height:170px;
  background:radial-gradient(50% 60% at 30% 70%,rgba(225,238,242,.22),transparent 70%),radial-gradient(45% 55% at 75% 75%,rgba(225,238,242,.18),transparent 70%);
  animation:hwDrift 18s ease-in-out infinite alternate}
@keyframes hwDrift{to{transform:translateX(6%)}}
.gk-hero .gk-hero__track{position:relative;z-index:3}
@media (max-width:767px){.hw-moon{right:4%;width:74px}.hw-bat{width:28px}}

/* ---------- P2 · Calabaza turquesa ---------- */
.gk-logo{position:relative}
.hw-hat{position:absolute;left:0;top:-19px;width:38px;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);height:auto;pointer-events:none;transform:rotate(-12deg);z-index:2}
.hw-pumpkin{display:block;width:clamp(68px,7vw,100px);height:auto;margin:0 auto 12px}
.hw-pumpkin .hw-eyes{animation:hwGlow 2.6s ease-in-out infinite}
@keyframes hwGlow{50%{opacity:.5}}
.hw-rota-new{white-space:normal}
@media (max-width:767px){.hw-rota-new{font-size:.8em}}

/* ---------- P3 · Precios de miedo ---------- */
.hw-promo{display:inline-flex;align-items:center;gap:10px;background:#FF6A00;color:#fff;border-radius:999px;padding:3px 6px 3px 14px;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.hw-promo:hover{color:#fff;background:#e85f00}
.hw-cd{display:inline-flex;gap:4px;font-variant-numeric:tabular-nums}
.hw-cd span{background:#000;border-radius:999px;padding:1px 7px}
html.hw-p3 .gk-topbar__links a{display:none}
.gk-plan{position:relative}
.hw-ribbon{position:absolute;top:14px;right:14px;background:#FF6A00;color:#fff;font:700 11px/1 'Poppins',sans-serif;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:6px 9px}

/* ---------- P4 · Detalles escondidos ---------- */
.hw-web{position:absolute;top:0;left:0;width:clamp(110px,14vw,190px);height:auto;fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.1;pointer-events:none;z-index:2}
.hw-web.hw-r{left:auto;right:0;transform:scaleX(-1);width:clamp(80px,10vw,140px)}
.hw-web.hw-dark{stroke:rgba(15,23,42,.18)}
.hw-spider{position:absolute;top:0;left:20%;z-index:4;display:flex;flex-direction:column;align-items:center;pointer-events:none;animation:hwDrop 5s ease-in-out infinite}
.hw-spider i{display:block;width:1px;height:calc(var(--gk-head-h,130px) + 90px);background:rgba(255,255,255,.5)}
.hw-spider svg{width:24px;margin-top:-2px}
@keyframes hwDrop{0%,100%{transform:translateY(-50px)}50%{transform:translateY(0)}}
.gk-plan .hw-web{width:62px;stroke:#c7cdd4;stroke-width:1.5;left:auto;right:0;transform:scaleX(-1)}
#gk-wa-flot .gk-wa-btn{position:relative}
.hw-ghost{position:absolute;top:-30px;right:8px;width:30px;height:auto;pointer-events:none;animation:hwBob 3s ease-in-out infinite}
@keyframes hwBob{50%{transform:translateY(-6px) rotate(6deg)}}
@media (max-width:767px){.hw-spider{display:none}}

@media (prefers-reduced-motion:reduce){.hw-bat,.hw-bat svg,.hw-fog,.hw-spider,.hw-ghost,.hw-pumpkin .hw-eyes{animation:none!important}.hw-bat{display:none}}

/* ---------- P5 · Fantasmas sueltos / P6 · Fantasma que sigue al cursor ---------- */
.hw-fixed{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2147482000}
.hw-g{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;will-change:transform}
.hw-g__in{animation:hwSway 1.8s ease-in-out infinite alternate;transform-origin:50% 30%}
.hw-g svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 10px rgba(26,188,156,.55)) drop-shadow(0 3px 6px rgba(15,23,42,.25))}
.hw-g__body,.hw-g__arm{fill:#fff}
.hw-g--flip .hw-g__in svg{transform:scaleX(-1)}
.hw-g--peek .hw-g__in{animation-duration:1.2s}
.hw-g--seg{pointer-events:none;transition:opacity .5s}
@keyframes hwSway{from{transform:translateY(-4px) rotate(-7deg)}to{transform:translateY(4px) rotate(7deg)}}
.hw-bat.hw-bat--free{position:absolute;left:0;top:0;animation:none}
.hw-bu{position:absolute;font:800 26px/1 'Poppins',sans-serif;color:#fff;text-shadow:0 0 12px rgba(26,188,156,.9),0 2px 4px rgba(15,23,42,.6);pointer-events:none;white-space:nowrap}

/* ---------- P7 · Murciélagos al abrir ---------- */
.hw-velo{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(15,23,42,.05),rgba(15,23,42,.45) 75%)}
.hw-velo--abajo{background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(15,23,42,.5),rgba(15,23,42,.18) 70%)}
.hw-bat--intro svg{animation-duration:.14s;filter:drop-shadow(0 0 3px rgba(26,188,156,.55))}

/* ---------- P8 · Arañas colgando de su hilo ---------- */
.hw-aranas{position:absolute;top:0;left:0;right:0;overflow:hidden;pointer-events:none;z-index:8999}
.hw-ar{position:absolute;top:0;width:calc(40px * var(--s,1));margin-left:calc(-20px * var(--s,1));transform:translateY(-60px);animation:hwHilo var(--d,9s) ease-in-out var(--dl,0s) infinite}
.hw-ar::before{content:"";position:absolute;left:50%;bottom:calc(100% - 9px);width:1px;height:2000px;background:rgba(255,255,255,.6);box-shadow:0 0 1px rgba(15,23,42,.4)}
.hw-ar svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.85))}
.hw-ar__pl,.hw-ar__pr{transform-origin:50% 50%;animation:hwPatas .5s ease-in-out infinite alternate}
.hw-ar__pr{animation-delay:-.25s}
@keyframes hwHilo{0%,100%{transform:translateY(-60px)}35%,58%{transform:translateY(var(--y))}46%{transform:translateY(calc(var(--y) - 16px))}}
@keyframes hwPatas{to{transform:rotate(7deg) scaleY(.92)}}

/* ---------- P9 · Calabazas con vela ---------- */
.hw-cals{position:absolute;bottom:-6px;z-index:4;display:flex;align-items:flex-end;gap:2px;pointer-events:none}
.hw-cals--izq{left:3%}.hw-cals--der{right:3%}
.hw-cal{display:block;position:relative;pointer-events:none;transform-origin:50% 100%;animation:hwMece 4s ease-in-out infinite alternate}
.hw-cal::after{content:"";position:absolute;left:10%;right:10%;bottom:-4px;height:26%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,170,40,.55),transparent);z-index:-1}
.hw-cal svg{display:block;width:100%;height:auto}
.hw-cal--xl{width:clamp(80px,9vw,132px)}.hw-cal--s{width:clamp(52px,5.5vw,78px);animation-delay:-1.5s}.hw-cal--m{width:clamp(66px,7vw,104px);animation-delay:-2.6s}
.hw-cal__luz{filter:drop-shadow(0 0 4px #FFB020) drop-shadow(0 0 10px rgba(255,140,0,.8));animation:hwVela 2.2s steps(1,end) infinite}
.hw-cal--s .hw-cal__luz{animation-delay:-.7s}.hw-cal--m .hw-cal__luz{animation-delay:-1.3s}
@keyframes hwMece{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes hwVela{0%{opacity:1}18%{opacity:.72}22%{opacity:.95}48%{opacity:.82}54%{opacity:1}76%{opacity:.68}80%{opacity:.92}}
@media (max-width:767px){.hw-cal--s{display:none}.hw-cal--xl{width:64px}.hw-cal--m{width:52px}}

/* ---------- P10 · Bruja en escoba ---------- */
.hw-bruja{position:absolute;z-index:4;top:calc(var(--gk-head-h,130px) + 40px);right:calc(8% - 10px);width:clamp(120px,13vw,190px);cursor:pointer;transition:opacity .6s}
.hw-bruja__in{animation:hwVuelo 4.2s ease-in-out infinite}
.hw-bruja svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 2px rgba(255,255,255,.7)) drop-shadow(0 0 14px rgba(26,188,156,.45))}
.hw-bruja__capa{transform-origin:64px 33px;animation:hwCapa .45s ease-in-out infinite alternate}
.hw-cielo{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:8990}
.hw-bruja.hw-bruja--vuela{position:absolute;top:0;left:0;right:auto;width:clamp(110px,12vw,170px);pointer-events:none}
@media (max-width:767px){.hw-bruja.hw-bruja--vuela{width:96px;top:0;right:auto}}
.hw-bruja--izq .hw-bruja__in svg{transform:scaleX(-1)}
.hw-chispa{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none;z-index:4;box-shadow:0 0 6px currentColor,0 0 8px rgba(255,255,255,.8)}
@keyframes hwVuelo{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(-14px,16px) rotate(4deg)}}
@keyframes hwCapa{from{transform:skewY(-4deg) scaleX(1)}to{transform:skewY(5deg) scaleX(1.08)}}
@media (max-width:767px){.hw-bruja{width:78px;right:2%;top:calc(var(--gk-head-h,130px) + 14px)}}

@media (prefers-reduced-motion:reduce){.hw-ar,.hw-ar__pl,.hw-ar__pr,.hw-cal,.hw-cal__luz,.hw-bruja__in,.hw-bruja__capa{animation:none!important}.hw-ar{transform:translateY(var(--y))}}

/* Halloween Gokiebox 2026 — calabacita en las tarjetas de planes. Mismo dibujo y vela que las calabazas de la portada. */
.gk-plan.hw-plan{position:relative}
.hw-pcal{position:absolute;top:1.55rem;right:1.25rem;width:38px;display:block;pointer-events:none;transform-origin:50% 100%;animation:hwPMece 4s ease-in-out infinite alternate;z-index:1}
.hw-pcal svg{display:block;width:100%;height:auto;overflow:visible}
.hw-pcal__luz{filter:drop-shadow(0 0 2px #FFB020);animation:hwPVela 2.2s steps(1,end) infinite;transition:filter .3s}
.gk-plan:hover .hw-pcal__luz{filter:drop-shadow(0 0 2px #FFB020) drop-shadow(0 0 5px rgba(255,140,0,.75))}
.gk-plan.hw-plan .gk-plan-name{padding-right:46px}
@keyframes hwPMece{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes hwPVela{0%{opacity:1}18%{opacity:.72}22%{opacity:.95}48%{opacity:.82}54%{opacity:1}76%{opacity:.68}80%{opacity:.92}}
@media (max-width:767px){.hw-pcal{width:32px;right:1rem;top:1.7rem}}
@media (prefers-reduced-motion:reduce){.hw-pcal,.hw-pcal__luz{animation:none!important}}

/* Halloween Gokiebox 2026 — telaraña fija en la esquina superior izquierda, bajo la cabecera, con arañita que sube y baja.
   Se ancla al borde inferior de la cabecera (JS pone --hw-tl-top). No captura clics. Tono según el fondo de debajo (hw-tl--osc). */
.hw-tl{position:fixed;left:0;top:var(--hw-tl-top,0px);width:140px;height:140px;z-index:8990;pointer-events:none;
  --hw-tl-hilo:rgba(100,116,139,.55);--hw-tl-halo:rgba(255,255,255,.9);--hw-tl-cuerpo:#1E293B;
  transform-origin:0 0;transition:opacity .4s ease}
.hw-tl--osc{--hw-tl-hilo:rgba(203,213,225,.42);--hw-tl-halo:rgba(15,23,42,.6);--hw-tl-cuerpo:#E2E8F0}
.hw-tl__red{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;transform-origin:0 0;transition:transform .9s cubic-bezier(.3,1.6,.5,1)}
.hw-tl__red path{fill:none;stroke:var(--hw-tl-hilo);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .5s ease}
.hw-tl__red{filter:drop-shadow(0 0 1px var(--hw-tl-halo))}
/* Araña: cuelga de un punto de la red (left/top), el hilo se estira con --hw-tl-baja */
.hw-tl__ar{position:absolute;left:59px;top:59px;width:20px;margin-left:-10px;transform:translateY(var(--hw-tl-baja,14px));
  transition:transform 2.6s cubic-bezier(.45,0,.25,1)}
.hw-tl__ar.hw-rapido{transition-duration:.7s}
.hw-tl__ar::before{content:"";position:absolute;left:50%;bottom:calc(100% - 4px);width:1px;height:calc(var(--hw-tl-baja,14px) + 4px);background:var(--hw-tl-hilo);
  transition:height 2.6s cubic-bezier(.45,0,.25,1),background .5s ease}
.hw-tl__ar.hw-rapido::before{transition-duration:.7s}
.hw-tl__ar svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 1px var(--hw-tl-halo));animation:hwTlGiro 4s ease-in-out infinite;transform-origin:50% 0}
.hw-tl__ar svg path{stroke:var(--hw-tl-cuerpo);transition:stroke .5s ease}
.hw-tl__ar svg ellipse,.hw-tl__ar svg circle.hw-tl__cab{fill:var(--hw-tl-cuerpo);transition:fill .5s ease}
.hw-tl__pl{animation:hwTlPatas .45s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes hwTlGiro{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes hwTlPatas{to{transform:scaleY(.85)}}
@media (max-width:767px){
  .hw-tl{width:90px;height:90px}
  .hw-tl__ar{left:38px;top:38px;width:14px;margin-left:-7px}
}
@media (prefers-reduced-motion:reduce){
  .hw-tl__red,.hw-tl__ar,.hw-tl__ar::before{transition:none!important}
  .hw-tl__ar svg,.hw-tl__pl{animation:none!important}
}
@media print{.hw-tl{display:none}}

/* Telaraña: visible solo con la cabecera fija */
.hw-tl{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.hw-tl.hw-tl--on{opacity:1;visibility:visible;transition:opacity .4s}

/* Halloween Gokiebox 2026 · Toques por las secciones (toques.js). Paleta: #1ABC9C / #16A085 / negro / blanco; naranja solo en la calabaza. */

/* ---------- 1 · Murciélago que cruza (capa fija por debajo del menú: header z-index 9000) ---------- */
.hw-tq-vuelo{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:8990}
.hw-tq-bat{position:absolute;left:0;top:0;will-change:transform}
.hw-tq-bat svg{display:block;width:100%;height:auto;fill:#0F172A;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.7));transform-origin:50% 60%;animation:hwTqAleteo .16s ease-in-out infinite alternate}
@keyframes hwTqAleteo{to{transform:scaleY(.4)}}

/* ---------- 2 · Buscador de dominios: luna y ojos ---------- */
.hw-tq-noche{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.4s ease}
.hw-tq-noche.hw-tq-on{opacity:1}
.hw-tq-luna{position:absolute;top:38px;right:5%;width:90px;height:90px;border-radius:50%;box-shadow:-20px 14px 0 0 #E9F7F4;transform:rotate(-8deg);filter:drop-shadow(0 0 10px rgba(26,188,156,.55))}
.hw-tq-ojos{position:absolute;display:flex;gap:7px;transform-origin:50% 50%;animation:hwTqParpadeo 7s ease-in-out infinite;animation-play-state:paused}
.hw-tq-on .hw-tq-ojos{animation-play-state:running}
.hw-tq-off .hw-tq-ojos{animation-play-state:paused}
.hw-tq-ojos i{display:block;width:16px;height:8px;border-radius:50%;background:#1ABC9C;box-shadow:0 0 6px 1px rgba(26,188,156,.75)}
.hw-tq-ojos i:first-child{transform:rotate(14deg)}
.hw-tq-ojos i:last-child{transform:rotate(-14deg)}
.hw-tq-ojos--a{right:7%;bottom:44px}
.hw-tq-ojos--b{left:3%;bottom:96px;gap:5px;animation-delay:-2.6s;animation-duration:9s;opacity:.75}
.hw-tq-ojos--b i{width:12px;height:6px;background:#E9F7F4;box-shadow:0 0 5px rgba(233,247,244,.7)}
.hw-tq-ojos--c{left:31%;top:46px;gap:5px;animation-delay:-5s;animation-duration:8s;opacity:.6}
.hw-tq-ojos--c i{width:12px;height:6px}
@keyframes hwTqParpadeo{0%,90%,96%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}}
@media (max-width:767px){
  .hw-tq-luna{top:22px;right:6%;width:54px;height:54px;box-shadow:-12px 9px 0 0 #E9F7F4}
  .hw-tq-ojos--a{right:6%;bottom:22px}
  .hw-tq-ojos--b{left:5%;bottom:auto;top:30px}
  .hw-tq-ojos--c{display:none}
}

/* ---------- 3 · Murciélagos dormidos colgados ---------- */
.hw-tq-colgados{position:absolute;top:0;left:0;right:0;height:0;pointer-events:none;z-index:1}
.hw-tq-col{position:absolute;top:0;width:66px;opacity:0;transform-origin:50% 0;transition:opacity 1s ease}
.hw-tq-col svg{display:block;width:100%;height:auto}
.hw-tq-col--1{right:calc(7% + 80px)}
.hw-tq-col--2{right:7%;width:54px;transition-delay:.25s}
.hw-tq-col--3{left:17%;width:60px;transition-delay:.5s}
.hw-tq-on .hw-tq-col{opacity:1;animation:hwTqColumpio 3.2s ease-out both}
.hw-tq-on .hw-tq-col--2{animation-delay:.25s}
.hw-tq-on .hw-tq-col--3{animation-delay:.5s}
@keyframes hwTqColumpio{0%{transform:rotate(16deg)}22%{transform:rotate(-10deg)}44%{transform:rotate(6deg)}66%{transform:rotate(-3deg)}84%{transform:rotate(1deg)}100%{transform:rotate(0)}}
@media (max-width:767px){.hw-tq-col{width:46px}.hw-tq-col--1{right:calc(5% + 52px)}.hw-tq-col--2{right:5%;width:38px}.hw-tq-col--3{left:auto;right:calc(5% + 60px);display:none}}

/* ---------- 4 · Fantasmita detrás de una tarjeta del blog ---------- */
.hw-tq-isla{isolation:isolate}
.hw-tq-fant{position:absolute;z-index:-1;width:90px;margin-left:-45px;pointer-events:none}
.hw-tq-fant__in{display:block;transform:translateY(-6%);transition:transform 1.3s cubic-bezier(.3,1.4,.5,1) .3s}
.hw-tq-fant svg{display:block;width:100%;height:auto}
.hw-tq-on .hw-tq-fant__in,.hw-tq-fant.hw-tq-on .hw-tq-fant__in{transform:translateY(-62%) rotate(-6deg)}
@media (max-width:767px){.hw-tq-fant{width:64px;margin-left:-32px}}

/* ---------- 5 · Caldero y calabaza sobre el borde del pie ---------- */
.hw-tq-pie{position:relative;height:0;pointer-events:none;z-index:1}
.hw-tq-pie__in{position:absolute;left:9%;bottom:-2px;display:flex;align-items:flex-end;gap:0;opacity:0;transform:translateY(8px);transition:opacity 1s ease,transform 1s ease}
.hw-tq-pie.hw-tq-on .hw-tq-pie__in{opacity:1;transform:none}
.hw-tq-caldero{display:block;width:140px;height:auto;overflow:visible}
.hw-tq-calabaza{display:block;width:88px;height:auto;margin-left:-6px}
.hw-tq-bu{opacity:0;animation:hwTqBurbuja 2.8s ease-out infinite;animation-play-state:paused;transform-box:fill-box;transform-origin:50% 50%}
.hw-tq-bu--2{animation-delay:-1s}.hw-tq-bu--3{animation-delay:-1.9s}
.hw-tq-on .hw-tq-bu{animation-play-state:running}
.hw-tq-off .hw-tq-bu{animation-play-state:paused}
@keyframes hwTqBurbuja{0%{opacity:0;transform:translateY(4px) scale(.6)}25%{opacity:.95}100%{opacity:0;transform:translateY(-16px) scale(1)}}
.hw-tq-vela{filter:drop-shadow(0 0 3px #FFB020)}
@media (max-width:767px){.hw-tq-pie__in{left:auto;right:26%}.hw-tq-caldero{width:86px}.hw-tq-calabaza{width:56px}}

@media (prefers-reduced-motion:reduce){
  .hw-tq-bat,.hw-tq-bat svg,.hw-tq-ojos,.hw-tq-col,.hw-tq-on .hw-tq-col,.hw-tq-bu{animation:none!important}
  .hw-tq-bu{opacity:.8}
  .hw-tq-fant__in{transition:none}
}

/* Halloween Gokiebox 2026 — páginas de software y servicios digitales. Prefijo hw-sw-. Todo sin clics y por debajo del header (z < 9000). */
.hw-sw-rel{position:relative}
.hw-sw-sobre{z-index:1}
.hw-sw-tela,.hw-sw-murci,.hw-sw-sombrero,.hw-sw-arana,.hw-sw-fantasma{pointer-events:none;user-select:none;-webkit-user-select:none}
.hw-sw-tela svg,.hw-sw-murci svg,.hw-sw-sombrero svg,.hw-sw-arana svg,.hw-sw-fantasma svg{display:block;width:100%;height:auto;overflow:visible}

/* 1 · Telaraña en la esquina superior derecha de capturas y ventanas (queda recortada por el marco) */
.hw-sw-tela{position:absolute;top:0;right:0;width:160px;height:160px;z-index:3;opacity:0;transform:scale(.6);transform-origin:100% 0;transition:opacity .9s ease,transform .9s ease}
.hw-sw-tela g{stroke:rgba(15,23,42,.28)}
.hw-sw-tela .hw-sw-tela__bicho{fill:#0F172A;stroke:#0F172A;opacity:.75}
.hw-sw-tela--osc g{stroke:rgba(255,255,255,.28)}
.hw-sw-tela--osc .hw-sw-tela__bicho{fill:#1ABC9C;stroke:#1ABC9C}
.hw-sw-tela.hw-sw-on{opacity:1;transform:none}
.hw-sw-tela--abajo{top:auto;bottom:0;width:120px;height:120px;transform-origin:100% 100%;border-bottom-right-radius:20px;overflow:hidden}
.hw-sw-tela--abajo svg{transform:rotate(90deg)}
.hw-sw-tela--abajo g{stroke:rgba(255,255,255,.55)}
.hw-sw-tela--abajo .hw-sw-tela__bicho{fill:#fff;stroke:#fff;opacity:.9}

/* 2 · Murciélago: llega volando una vez y queda posado sobre el borde superior */
.hw-sw-murci{position:absolute;width:58px;height:50px;margin:-48px 0 0 -29px;z-index:3;opacity:0}
.hw-sw-murci svg{position:absolute;left:0;bottom:0}
.hw-sw-murci__vuela{width:88px!important;left:-15px!important;bottom:8px!important;opacity:0;transform-origin:50% 50%}
.hw-sw-murci__posado{opacity:0}
.hw-sw-murci.hw-sw-on{opacity:1;animation:hwSwLlega 1.7s cubic-bezier(.3,.6,.4,1) both}
.hw-sw-murci.hw-sw-on .hw-sw-murci__vuela{animation:hwSwAleteo .16s ease-in-out 9 alternate,hwSwVuelaFuera 1.7s linear both}
.hw-sw-murci.hw-sw-on .hw-sw-murci__posado{animation:hwSwPosaDentro 1.7s linear both}
.hw-sw-murci.hw-sw-on .hw-sw-ojos{animation:hwSwParpadeo 7s steps(1,end) 2.5s infinite;transform-origin:50% 13px}
@keyframes hwSwLlega{0%{transform:translate(150px,-110px) scale(.8)}55%{transform:translate(40px,-46px) scale(.95)}85%{transform:translate(0,-6px)}100%{transform:none}}
@keyframes hwSwAleteo{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
@keyframes hwSwVuelaFuera{0%,84%{opacity:1}92%,100%{opacity:0}}
@keyframes hwSwPosaDentro{0%,84%{opacity:0}94%,100%{opacity:1}}
@keyframes hwSwParpadeo{0%,96%{transform:none}97%,99%{transform:scaleY(.1)}}

/* 3 · Sombrerito de bruja en la esquina superior izquierda del teléfono de atrás */
.hw-sw-sombrero{position:absolute;left:-26px;top:-50px;width:90px;z-index:3;opacity:0;transform:translateY(-34px) rotate(-40deg);transition:opacity .4s ease}
.hw-sw-sombrero.hw-sw-on{opacity:1;animation:hwSwCaeSombrero 1.1s cubic-bezier(.3,.7,.4,1) both}
@keyframes hwSwCaeSombrero{0%{transform:translateY(-34px) rotate(-40deg)}60%{transform:translateY(2px) rotate(calc(var(--hw-sw-rot,-18deg) + 4deg))}80%{transform:translateY(-3px) rotate(calc(var(--hw-sw-rot,-18deg) - 2deg))}100%{transform:translateY(0) rotate(var(--hw-sw-rot,-18deg))}}
.hw-sw-sombrero--ladeado{--hw-sw-rot:-34deg;left:-50px;top:-36px}
@media (max-width:767px){.hw-sw-sombrero--ladeado{left:-34px;top:-24px}}

/* 4 · Arañita que baja por su hilo junto al borde derecho del teléfono de adelante */
.hw-sw-arana{position:absolute;top:10px;right:-30px;width:32px;height:var(--hw-sw-largo,60px);z-index:3;transform-origin:50% 0}
.hw-sw-arana--img{right:5%;top:0}
.hw-sw-arana__hilo{width:1.5px!important}
.hw-sw-arana__hilo{position:absolute;left:50%;top:0;width:1px;height:0;margin-left:-.5px;background:rgba(15,23,42,.45)}
.hw-sw-arana__cuerpo{position:absolute;left:0;top:0;width:32px;opacity:0;transform:translateY(-10px)}
.hw-sw-arana.hw-sw-on .hw-sw-arana__hilo{height:100%;transition:height 1.8s cubic-bezier(.3,.6,.4,1)}
.hw-sw-arana.hw-sw-on .hw-sw-arana__cuerpo{opacity:1;transform:translateY(calc(var(--hw-sw-largo,60px) - 2px));transition:transform 1.8s cubic-bezier(.3,.6,.4,1),opacity .3s ease}
.hw-sw-arana.hw-sw-on{animation:hwSwMeceHilo 6s ease-in-out 2s infinite alternate}
@keyframes hwSwMeceHilo{from{transform:rotate(3deg)}to{transform:rotate(-3deg)}}

/* 5 · Fantasmita que se asoma por detrás del dispositivo (queda asomado, flota apenas) */
.hw-sw-fantasma{position:absolute;display:block;opacity:0;transition:transform 1.4s cubic-bezier(.3,.7,.3,1),opacity .5s ease}
.hw-sw-fantasma--izq{transform:translateX(15%)}
.hw-sw-fantasma--der{transform:translateX(-15%)}
.hw-sw-fantasma--arriba{transform:translateY(30%)}
.hw-sw-fantasma--bajo{z-index:-1}
.hw-sw-fantasma--izq.hw-sw-on{opacity:1;transform:translateX(-64%) rotate(-16deg)}
.hw-sw-fantasma--der.hw-sw-on{opacity:1;transform:translateX(64%) rotate(16deg)}
.hw-sw-fantasma--der svg{transform:scaleX(-1)}
.hw-sw-fantasma--arriba.hw-sw-on{opacity:1;transform:translateY(-62%) rotate(8deg)}
.hw-sw-fantasma__in{display:block}
.hw-sw-fantasma.hw-sw-on .hw-sw-fantasma__in{animation:hwSwFlota 4.5s ease-in-out 1.6s infinite alternate}
@keyframes hwSwFlota{from{transform:translateY(0)}to{transform:translateY(-4px)}}

/* Móvil: más chicos y más pegados para no salirse de la pantalla */
@media (max-width:767px){
  .hw-sw-tela{width:110px;height:110px}
  .hw-sw-murci{width:44px;height:38px;margin:-36px 0 0 -22px}
  .hw-sw-murci__vuela{width:66px!important;left:-11px!important}
  .hw-sw-sombrero{width:62px;left:-16px;top:-34px}
  .hw-sw-arana{right:-18px;width:24px}
  .hw-sw-arana__cuerpo{width:24px}
  .hw-sw-arana--img{right:8%}
  @keyframes hwSwLlega{0%{transform:translate(80px,-70px) scale(.8)}55%{transform:translate(24px,-30px) scale(.95)}85%{transform:translate(0,-4px)}100%{transform:none}}
}

/* Sin movimiento: todo aparece ya en su sitio */
@media (prefers-reduced-motion:reduce){
  .hw-sw-tela,.hw-sw-murci,.hw-sw-sombrero,.hw-sw-arana,.hw-sw-fantasma,
  .hw-sw-tela *,.hw-sw-murci *,.hw-sw-sombrero *,.hw-sw-arana *,.hw-sw-fantasma *{animation:none!important;transition:none!important}
  .hw-sw-murci.hw-sw-on .hw-sw-murci__vuela{opacity:0}
  .hw-sw-murci.hw-sw-on .hw-sw-murci__posado{opacity:1}
}

/* Halloween Gokiebox 2026 — cabeceras de páginas internas. Prefijo hw-cb-. No captura clics; por debajo del header fijo (z 9000).
   Tono: hw-cb--osc (banner oscuro) / hw-cb--cla (banner claro). Paleta: #1ABC9C / #16A085 / negro / blanco; naranja solo en la calabaza. */
.hw-cb{position:absolute!important;left:0;right:0;top:0;margin:0!important;overflow:hidden;pointer-events:none;z-index:2;
  --hw-cb-hilo:rgba(15,23,42,.28);--hw-cb-cuerpo:#0F172A;--hw-cb-halo:rgba(255,255,255,.9)}
.hw-cb--osc{--hw-cb-hilo:rgba(255,255,255,.45);--hw-cb-cuerpo:#0B0F14;--hw-cb-halo:rgba(255,255,255,.8)}
.hw-cb *{pointer-events:none}

/* Luna pequeña con halo turquesa */
.hw-cb-luna{position:absolute;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#fff 0 40%,#e9f7f4 62%,#d4efe9 100%);
  box-shadow:0 0 22px 6px rgba(26,188,156,.45),0 0 60px 22px rgba(26,188,156,.16)}
.hw-cb--cla .hw-cb-luna{background:radial-gradient(circle at 38% 36%,#fff 0 35%,#dff3ee 70%,#c9ebe3 100%);
  box-shadow:0 0 0 1px rgba(22,160,133,.28),0 0 18px 4px rgba(26,188,156,.28)}
.hw-cb-luna::after{content:"";position:absolute;inset:0;border-radius:50%;background:
  radial-gradient(circle at 62% 58%,rgba(15,23,42,.10) 0 9%,transparent 10%),
  radial-gradient(circle at 35% 70%,rgba(15,23,42,.08) 0 6%,transparent 7%),
  radial-gradient(circle at 70% 30%,rgba(15,23,42,.07) 0 5%,transparent 6%)}

/* Arañas: cuelgan desde la barra superior, bajan, rebotan un poco y vuelven a subir */
/* Cada araña va en su columna recortada: arriba del todo queda escondida, sin asomar sobre el header */
.hw-cb-col{position:absolute;overflow:hidden}
.hw-cb-ar{position:relative;margin:0 auto;transform:translateY(-110%);animation:hwCbHilo var(--hw-cb-d,11s) ease-in-out var(--hw-cb-dl,0s) infinite}
.hw-cb-ar::before{content:"";position:absolute;left:50%;bottom:calc(100% - 7px);width:1px;height:1600px;background:var(--hw-cb-hilo)}
.hw-cb-ar svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 1px var(--hw-cb-halo))}
.hw-cb-ar path{stroke:var(--hw-cb-cuerpo)}
.hw-cb-cu{fill:var(--hw-cb-cuerpo)}
.hw-cb-pl,.hw-cb-pr{transform-origin:50% 50%;animation:hwCbPatas .5s ease-in-out infinite alternate}
.hw-cb-pr{animation-delay:-.25s}
@keyframes hwCbHilo{0%,100%{transform:translateY(-110%)}38%,60%{transform:translateY(var(--hw-cb-y))}48%{transform:translateY(calc(var(--hw-cb-y) - 14px))}}
@keyframes hwCbPatas{to{transform:rotate(7deg) scaleY(.92)}}

/* Neblina baja */
.hw-cb-niebla{position:absolute;left:-10%;right:-10%;bottom:-40px;height:160px;
  background:radial-gradient(50% 60% at 25% 75%,rgba(225,238,242,.16),transparent 70%),radial-gradient(45% 55% at 75% 80%,rgba(225,238,242,.13),transparent 70%);
  animation:hwCbNiebla 20s ease-in-out infinite alternate}
.hw-cb--cla .hw-cb-niebla{background:radial-gradient(50% 60% at 25% 75%,rgba(22,160,133,.08),transparent 70%),radial-gradient(45% 55% at 75% 80%,rgba(22,160,133,.06),transparent 70%)}
@keyframes hwCbNiebla{to{transform:translateX(6%)}}

/* Calabacita con vela */
.hw-cb-cal{position:absolute;bottom:-2px;display:block;transform-origin:50% 100%;animation:hwCbMece 4s ease-in-out infinite alternate}
.hw-cb-cal svg{display:block;width:100%;height:auto}
.hw-cb-luz{filter:drop-shadow(0 0 3px #FFB020);animation:hwCbVela 2.2s steps(1,end) infinite}
@keyframes hwCbMece{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes hwCbVela{0%{opacity:1}18%{opacity:.72}22%{opacity:.95}48%{opacity:.82}54%{opacity:1}76%{opacity:.68}80%{opacity:.92}}

@media (prefers-reduced-motion:reduce){
  .hw-cb-ar,.hw-cb-pl,.hw-cb-pr,.hw-cb-niebla,.hw-cb-cal,.hw-cb-luz{animation:none!important}
  .hw-cb-ar{transform:translateY(var(--hw-cb-y))}
}
@media print{.hw-cb{display:none}}

/* Halloween Gokiebox 2026 — toques en secciones de contenido de páginas internas (prefijo hw-sc-).
   Nada captura clics; todo vive dentro de su sección con z-index bajo (siempre por debajo de la cabecera fija). */

/* 1) Fantasmita que se asoma por detrás de un icono */
.hw-sc-fant-host{isolation:isolate}
.hw-sc-fant{position:absolute;left:50%;top:0;width:84px;margin-left:-42px;z-index:-1;pointer-events:none}
.hw-sc-fant__in{display:block;opacity:0;transform:translateY(28%);
  transition:transform 1s cubic-bezier(.3,1.35,.5,1),opacity .4s ease}
.hw-sc-fant svg{display:block;width:100%;height:auto;overflow:visible}
.hw-sc-asoma .hw-sc-fant__in{opacity:1;transform:translateY(-64%) rotate(-7deg)}
.hw-sc-esconde .hw-sc-fant__in{opacity:0;transform:translateY(28%);transition:transform .9s ease-in,opacity .5s ease .4s}
.hw-sc-fant__ojos,.hw-sc-fant__mano{transform-box:fill-box}
.hw-sc-fant__ojos{transform-origin:50% 50%}
.hw-sc-fant__mano{transform-origin:0 100%}
.hw-sc-asoma .hw-sc-fant__ojos{animation:hwScParpadea .32s ease-in-out 1.6s 2}
.hw-sc-asoma .hw-sc-fant__mano{animation:hwScSaluda .45s ease-in-out 1.1s 4 alternate}
.hw-sc-fant--lado .hw-sc-fant__in{transform:translateX(-10%)}
.hw-sc-fant--lado.hw-sc-asoma .hw-sc-fant__in{transform:translateX(72%) rotate(9deg)}
.hw-sc-fant--lado.hw-sc-esconde .hw-sc-fant__in{transform:translateX(-10%)}
.hw-sc-fant--fijo .hw-sc-fant__in{opacity:1;transform:translateY(-50%) rotate(-7deg)}
.hw-sc-fant--fijo.hw-sc-fant--lado .hw-sc-fant__in{transform:translateX(60%) rotate(9deg)}
@keyframes hwScParpadea{50%{transform:scaleY(.1)}}
@keyframes hwScSaluda{from{transform:rotate(0)}to{transform:rotate(-28deg)}}

/* 2) Telarañas en la esquina superior derecha de secciones y de la tabla de precios */
.hw-sc-tela{position:absolute;top:0;right:0;width:150px;height:150px;pointer-events:none;z-index:2;color:#1E293B}
.hw-sc-tela--caja{width:50px;height:50px}
.hw-sc-tela__red{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);overflow:visible}
.hw-sc-tela__red path{fill:none;stroke:rgba(30,41,59,.2);stroke-width:1;vector-effect:non-scaling-stroke}
.hw-sc-osc .hw-sc-tela__red path{stroke:rgba(255,255,255,.24)}
.hw-sc-osc.hw-sc-tela{color:#E2E8F0}
.hw-sc-tela__ar{position:absolute;right:33%;top:33%;width:22px;margin-right:-11px;transform:translateY(0);
  transition:transform 2s cubic-bezier(.45,0,.25,1)}
.hw-sc-tela--caja .hw-sc-tela__ar{width:16px;margin-right:-8px}
.hw-sc-tela__ar::before{content:"";position:absolute;left:50%;bottom:calc(100% - 4px);width:1px;height:4px;background:currentColor;opacity:.5;
  transition:height 2s cubic-bezier(.45,0,.25,1)}
.hw-sc-tela__ar svg{display:block;width:100%;height:auto}
.hw-sc-baja .hw-sc-tela__ar{transform:translateY(70px)}
.hw-sc-baja .hw-sc-tela__ar::before{height:74px}
.hw-sc-tela--caja .hw-sc-tela__ar{right:38%;top:30%}
.hw-sc-tela--caja.hw-sc-baja .hw-sc-tela__ar{transform:translateY(8px)}
.hw-sc-tela--caja.hw-sc-baja .hw-sc-tela__ar::before{height:12px}

/* 3) Gato negro sentado sobre la tarjeta negra del formulario de contacto */
.hw-sc-gato{position:absolute;width:76px;pointer-events:none;z-index:2;opacity:0;transform:translateY(8px);
  transition:opacity .9s ease,transform .9s ease}
.hw-sc-gato svg{display:block;width:100%;height:auto;overflow:visible}
.hw-sc-gato.hw-sc-ve{opacity:1;transform:none}
.hw-sc-gato__cola,.hw-sc-gato__ojos{transform-box:fill-box}
.hw-sc-gato__cola{transform-origin:0 100%}
.hw-sc-gato__ojos{transform-origin:50% 50%}
.hw-sc-gato.hw-sc-ve .hw-sc-gato__cola{animation:hwScCola 1.4s ease-in-out .9s 3 alternate}
.hw-sc-gato.hw-sc-ve .hw-sc-gato__ojos{animation:hwScParpadea .34s ease-in-out 2.2s 2}
@keyframes hwScCola{from{transform:rotate(0)}to{transform:rotate(-14deg)}}

/* 4) Ojos en la oscuridad (secciones oscuras) */
.hw-sc-ojos{position:absolute;top:56px;right:6%;width:120px;height:70px;pointer-events:none;z-index:1}
.hw-sc-par{position:absolute;display:flex;gap:8px;opacity:0;transition:opacity 1.4s ease}
.hw-sc-par--1{right:0;top:0}
.hw-sc-par--2{left:0;bottom:0;gap:6px;transition-delay:1.6s}
.hw-sc-par i{display:block;width:16px;height:8px;border-radius:50%;background:#1ABC9C;box-shadow:0 0 6px 1px rgba(26,188,156,.7)}
.hw-sc-par i:first-child{transform:rotate(14deg)}
.hw-sc-par i:last-child{transform:rotate(-14deg)}
.hw-sc-par--2 i{width:11px;height:6px;background:#A7F3D0;box-shadow:0 0 5px rgba(167,243,208,.6)}
.hw-sc-ve .hw-sc-par--1{opacity:.95}
.hw-sc-ve .hw-sc-par--2{opacity:.6}
.hw-sc-ve .hw-sc-par{animation:hwScOjo 4.5s ease-in-out 2s 2}
.hw-sc-ve .hw-sc-par--2{animation-delay:3.4s}
@keyframes hwScOjo{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}

/* 5) Calabaza sentada sobre el bloque de preguntas frecuentes */
.hw-sc-cal{position:absolute;right:30px;bottom:100%;margin-bottom:-9px;width:88px;pointer-events:none;z-index:2;
  opacity:0;transform:translateY(10px) rotate(-4deg);transition:opacity .8s ease,transform .8s ease}
.hw-sc-cal svg{display:block;width:100%;height:auto}
.hw-sc-cal.hw-sc-ve{opacity:1;transform:rotate(-4deg)}
.hw-sc-cal__luz{filter:drop-shadow(0 0 2px #FFB020)}
.hw-sc-cal.hw-sc-ve .hw-sc-cal__luz{animation:hwScVela 1.6s ease-in-out .5s 3}
@keyframes hwScVela{0%,100%{opacity:1}20%{opacity:.6}35%{opacity:.95}60%{opacity:.7}}

.hw-sc-cal--suelo{right:auto;left:5%;bottom:-3px;margin-bottom:0}
@media (max-width:767px){
  .hw-sc-fant{width:62px;margin-left:-31px}
  .hw-sc-tela{width:96px;height:96px}
  .hw-sc-tela--caja{width:44px;height:44px}
  .hw-sc-tela--caja .hw-sc-tela__ar{width:12px;margin-right:-6px}
  .hw-sc-tela--caja.hw-sc-baja .hw-sc-tela__ar{transform:translateY(6px)}
  .hw-sc-tela--caja.hw-sc-baja .hw-sc-tela__ar::before{height:10px}
  .hw-sc-tela__ar{width:16px;margin-right:-8px}
  .hw-sc-baja .hw-sc-tela__ar{transform:translateY(42px)}
  .hw-sc-baja .hw-sc-tela__ar::before{height:46px}
  .hw-sc-ojos{top:24px;right:16px;width:84px;height:48px}
  .hw-sc-cal{width:58px;right:16px;margin-bottom:-6px}
  .hw-sc-cal--suelo{left:18px;right:auto;margin-bottom:0;bottom:-3px}
}
@media (prefers-reduced-motion:reduce){
  .hw-sc-fant,.hw-sc-fant *,.hw-sc-tela *,.hw-sc-par,.hw-sc-gato,.hw-sc-gato *,.hw-sc-cal,.hw-sc-cal *{animation:none!important;transition:none!important}
}
@media print{.hw-sc-fant,.hw-sc-tela,.hw-sc-ojos,.hw-sc-gato,.hw-sc-cal{display:none!important}}

/* Telaraña fija en móvil: más chica y tenue para no estorbar la lectura */
@media (max-width:767px){.hw-tl{width:68px!important;height:68px!important}.hw-tl.hw-tl--on{opacity:.6}}

/* Halloween Gokiebox 2026 · Toques en páginas secundarias (secundarias.js). Prefijo hw-se-.
   Paleta: #1ABC9C / #16A085 / negro / blanco; naranja solo en la calabaza. Todo pointer-events:none y por debajo del menú (z < 9000). */

[class^="hw-se-"] svg,[class*=" hw-se-"] svg{display:block;width:100%;height:auto;overflow:visible}
.hw-se-tit,.hw-se-tela,.hw-se-cal,.hw-se-asoma,.hw-se-cald,.hw-se-cli{pointer-events:none;user-select:none}

/* Flotar suave (solo tras aparecer) */
.hw-se-flota{display:block;animation:hwSeFlota 5s ease-in-out infinite;animation-play-state:paused}
.hw-se-on .hw-se-flota{animation-play-state:running}
@keyframes hwSeFlota{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}

/* ---------- 1 · Artículo: fantasma que saluda junto al título ---------- */
.hw-se-tit{position:absolute;z-index:1;left:calc(100% + 18px);top:58px;width:100px;opacity:0;transform:translateX(-24px) scale(.85);
  transition:opacity .9s ease,transform 1.1s cubic-bezier(.3,1.4,.5,1)}
.hw-se-tit.hw-se-on{opacity:1;transform:none}
.hw-se-brazo{transform-box:fill-box;transform-origin:0 100%}
.hw-se-tit.hw-se-on .hw-se-brazo{animation:hwSeSaluda .5s ease-in-out .9s 4 alternate}
@keyframes hwSeSaluda{to{transform:rotate(-22deg)}}
/* Sin hueco a la derecha del título: el fantasma va arriba a la derecha, a la altura de la etiqueta */
@media (max-width:1259px){.hw-se-tit{left:auto;right:4px;top:-18px;width:76px}}
@media (max-width:767px){.hw-se-tit{right:-2px;top:-22px;width:62px}}

/* ---------- 2 · Telaraña con araña en la esquina de la imagen destacada ---------- */
.hw-se-tela{position:absolute;top:0;right:0;width:170px;height:170px;z-index:2;opacity:0;transition:opacity 1.2s ease}
.hw-se-tela.hw-se-on{opacity:1}
.hw-se-red{position:absolute;inset:0}
.hw-se-red path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.2;vector-effect:non-scaling-stroke}
.hw-se-red{filter:drop-shadow(0 0 1px rgba(15,23,42,.45))}
/* Araña: baja una vez por su hilo desde un punto de la red */
.hw-se-ar{position:absolute;right:58px;top:46px;width:30px;margin-right:-15px;transform:translateY(-34px);
  transition:transform 2.4s cubic-bezier(.45,0,.25,1) .6s}
.hw-se-ar::before{content:"";position:absolute;left:50%;bottom:calc(100% - 4px);width:1px;height:160px;background:rgba(255,255,255,.9);box-shadow:0 0 1px rgba(15,23,42,.5)}
.hw-se-tela{overflow:hidden}
.hw-se-on .hw-se-ar{transform:translateY(58px)}
.hw-se-ar svg{filter:drop-shadow(0 0 1px #fff);transform-origin:50% 0;animation:hwSeGiro 4.5s ease-in-out infinite;animation-play-state:paused}
.hw-se-on .hw-se-ar svg{animation-play-state:running}
@keyframes hwSeGiro{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.gk-bd-img .hw-se-tela{width:150px;height:150px}
@media (max-width:767px){
  .hw-se-tela,.gk-bd-img .hw-se-tela{width:104px;height:104px}
  .hw-se-ar{right:36px;top:28px;width:22px;margin-right:-11px}
  .hw-se-on .hw-se-ar{transform:translateY(34px)}
}

/* ---------- 3 · Artículo: calabaza con vela sobre el recuadro final ---------- */
.hw-se-cal{position:absolute;z-index:1;bottom:calc(100% - 14px);right:300px;width:96px;opacity:0;transform:translateY(14px);
  transform-origin:50% 100%;transition:opacity .9s ease,transform 1s cubic-bezier(.3,1.5,.5,1)}
.hw-se-cal.hw-se-on{opacity:1;transform:none}
.hw-se-vela{filter:drop-shadow(0 0 3px #FFB020);animation:hwSeVela 2.2s steps(1,end) infinite}
@keyframes hwSeVela{0%{opacity:1}18%{opacity:.72}22%{opacity:.95}48%{opacity:.82}54%{opacity:1}76%{opacity:.68}80%{opacity:.92}}
@media (max-width:767px){.hw-se-cal{right:14px;width:56px;bottom:calc(100% - 8px)}}

/* ---------- 4 · Licencias: fantasmita que se asoma detrás de una tarjeta ---------- */
.hw-se-isla{isolation:isolate}
.hw-se-asoma{position:absolute;z-index:-1;width:84px;margin-left:-42px}
.hw-se-asoma__in{display:block;transform:translateY(-4%);transition:transform 1.3s cubic-bezier(.3,1.4,.5,1) .3s}
.hw-se-asoma.hw-se-on .hw-se-asoma__in{transform:translateY(-58%) rotate(5deg)}
@media (max-width:767px){.hw-se-asoma{width:62px;margin-left:-31px}}

/* ---------- 5 · Caldero con burbujas sobre el buscador ---------- */
.hw-se-cald{position:absolute;z-index:1;bottom:calc(100% - 6px);right:34px;width:132px;opacity:0;transform:translateY(12px);
  transition:opacity .9s ease,transform 1s ease}
.hw-se-cald.hw-se-on{opacity:1;transform:none}
/* Consulta CPE: sobre la tarjeta queda pegado al menú; va al costado izquierdo de la tarjeta, abajo, en el hueco entre texto y formulario */
.hw-se-cald--cpe{right:calc(100% + 8px);bottom:36px;width:116px}
@media (max-width:1100px){.hw-se-cald--cpe{right:34px;bottom:calc(100% - 6px);width:110px}}
.hw-se-bu{opacity:0;animation:hwSeBurbuja 2.8s ease-out infinite;animation-play-state:paused;transform-box:fill-box;transform-origin:50% 50%}
.hw-se-bu--2{animation-delay:-1s}.hw-se-bu--3{animation-delay:-1.9s}
.hw-se-on .hw-se-bu{animation-play-state:running}
@keyframes hwSeBurbuja{0%{opacity:0;transform:translateY(4px) scale(.6)}25%{opacity:.95}100%{opacity:0;transform:translateY(-16px) scale(1)}}
/* Whois: el buscador está sobre fondo turquesa oscuro: borde claro para que el caldero se lea */
.hw-se-cald--whois svg{filter:drop-shadow(0 0 1px rgba(255,255,255,.75))}
@media (max-width:767px){.hw-se-cald,.hw-se-cald--cpe{width:84px;right:14px;bottom:calc(100% - 6px)}.hw-se-cald--cpe{width:70px;right:8px}}

/* ---------- 6 · Clientes: fantasma en un hueco de la rejilla de logos ---------- */
.hw-se-cli{position:absolute;z-index:1;width:92px;margin:-50px 0 0 -46px;opacity:0;transform:translateY(16px) scale(.9);
  transition:opacity 1s ease,transform 1.1s cubic-bezier(.3,1.4,.5,1)}
.hw-se-cli.hw-se-on{opacity:1;transform:none}
.hw-se-cli svg{filter:drop-shadow(0 0 8px rgba(26,188,156,.35))}

@media (prefers-reduced-motion:reduce){
  .hw-se-flota,.hw-se-ar svg,.hw-se-bu,.hw-se-vela,.hw-se-tit.hw-se-on .hw-se-brazo{animation:none!important}
  .hw-se-tit,.hw-se-tela,.hw-se-ar,.hw-se-cal,.hw-se-asoma__in,.hw-se-cald,.hw-se-cli{transition:none!important}
  .hw-se-bu{opacity:.8}
}
@media print{.hw-se-tit,.hw-se-tela,.hw-se-cal,.hw-se-asoma,.hw-se-cald,.hw-se-cli{display:none}}

/* Ajustes de control de calidad */
@media (min-width:768px) and (max-width:1499px){.hw-moon{right:1.5%;width:clamp(90px,9vw,130px)}.hw-bruja{right:calc(1.5% - 8px);width:clamp(110px,10vw,150px)}}
@media (max-width:767px){.hw-tq-luna{top:calc(var(--gk-head-h,80px) + 12px)}.hw-tq-ojos--b{top:calc(var(--gk-head-h,80px) + 70px)}
  .hw-tl{width:52px!important;height:52px!important}.hw-tl.hw-tl--on{opacity:.7}}
.hw-sc-cal:not(.hw-sc-cal--suelo){margin-bottom:7px}
/* ===== Relleno en páginas internas (hw-rl): adornos grandes junto a títulos de sección ===== */
.hw-rl{position:absolute;top:0;left:0;width:100%;overflow:hidden;pointer-events:none;z-index:5}
.hw-rl-it{position:absolute;display:block;opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.hw-rl-it.hw-rl-on{opacity:1;transform:none}
.hw-rl-it svg{display:block;width:100%;height:100%;overflow:visible}
.hw-rl-mov{display:block;width:100%;height:100%;animation-play-state:paused}
.hw-rl-on .hw-rl-mov{animation-play-state:running}
.hw-rl-fan .hw-rl-mov{animation:hwRlFlota 4.6s ease-in-out infinite paused}
.hw-rl-fan.hw-rl-on .hw-rl-mov{animation-play-state:running}
.hw-rl-col{display:flex;gap:14%;align-items:flex-start;border-top:3px solid #0F172A;border-radius:2px}
.hw-rl-col .hw-rl-mov{width:43%;height:auto;transform-origin:50% 0;animation:hwRlBalanceo 3.4s ease-in-out infinite paused}
.hw-rl-col .hw-rl-mov--2{width:36%;animation-duration:4.1s;animation-delay:-1.3s}
.hw-rl-col.hw-rl-on .hw-rl-mov{animation-play-state:running}
.hw-rl-cal svg{filter:drop-shadow(0 0 14px rgba(255,170,40,.35))}
.hw-rl-cal .hw-rl-vela{animation:hwRlVela 1.6s ease-in-out infinite}
.hw-rl-ara .hw-rl-hilo{position:absolute;left:50%;top:0;width:1px;height:calc(100% - 38%);background:#0F172A;opacity:.55;transform-origin:0 0;transform:scaleY(0);transition:transform 1.4s cubic-bezier(.3,1.3,.5,1) .2s}
.hw-rl-ara .hw-rl-mov{position:absolute;left:0;bottom:0;height:auto;transform:translateY(-110%);transition:transform 1.4s cubic-bezier(.3,1.3,.5,1) .2s}
.hw-rl-ara.hw-rl-on .hw-rl-hilo{transform:scaleY(1)}
.hw-rl-ara.hw-rl-on .hw-rl-mov{transform:none}
.hw-rl-ara.hw-rl-on .hw-rl-mov svg{animation:hwRlColumpio 3.8s ease-in-out 1.8s infinite;transform-origin:50% -60%}
@keyframes hwRlFlota{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes hwRlBalanceo{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes hwRlVela{0%,100%{opacity:1}45%{opacity:.62}60%{opacity:.9}}
@keyframes hwRlColumpio{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.hw-rl *{animation:none!important;transition:none!important}.hw-rl-it{transition:none}}