/* Mi Tecnobox — Halloween. Solo en octubre: halloween.js pone body.hw (mes de Chile == 10) y agrega las capas.
   Misma familia que la tienda (tiotecnobox.cl): banderines bajo la cabecera, calabazas talladas, telarañas,
   esqueleto, araña, fantasmas y murciélagos. Todo plano y a los COSTADOS del formulario: nunca encima de él.
   Respeta prefers-reduced-motion. */

/* banderines bajo la cabecera */
body.hw .cab{position:relative}
body.hw .hw-guirnalda{position:absolute;left:0;right:0;top:100%;height:46px;z-index:3;pointer-events:none;
  background:url("/mi/hw/banderines.svg") 0 0/180px 46px repeat-x}

/* capa de los costados del ingreso */
body.hw .ingreso{position:relative}
.hw-capa{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hw-capa>*{position:absolute;background-position:center;background-repeat:no-repeat;background-size:contain}
body.hw .ingreso>:not(.hw-capa){position:relative;z-index:1}

.hw-tela{width:220px;height:220px;top:46px;opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath fill='none' stroke='%23151515' stroke-width='.8' d='M0 0L160 0M0 0L152.2 49.4M0 0L129.4 94M0 0L94 129.4M0 0L49.4 152.2M0 0L0 160M34 0Q28.5 4.5 32.3 10.5Q25.7 13.1 27.5 20Q20.4 20.4 20 27.5Q13.1 25.7 10.5 32.3Q4.5 28.5 0 34M68 0Q57 9 64.7 21Q51.5 26.2 55 40Q40.8 40.8 40 55Q26.2 51.5 21 64.7Q9 57 0 68M104 0Q87.3 13.8 98.9 32.1Q78.7 40.1 84.1 61.1Q62.5 62.5 61.1 84.1Q40.1 78.7 32.1 98.9Q13.8 87.3 0 104M142 0Q119.1 18.9 135.1 43.9Q107.5 54.8 114.9 83.5Q85.3 85.3 83.5 114.9Q54.8 107.5 43.9 135.1Q18.9 119.1 0 142'/%3E%3C/svg%3E")}
.hw-tela--izq{left:0}
.hw-tela--der{right:0;transform:scaleX(-1)}

/* esqueleto colgando de la telaraña izquierda (el hilo es su propio trazo) */
.hw-esqueleto{left:120px;top:46px;width:62px;height:136px;background-image:url("/mi/hw/esqueleto.svg");transform-origin:50% 0;animation:hw-mece 4.8s ease-in-out infinite}
/* araña bajando y subiendo por su hilo, a la derecha */
.hw-arana{right:150px;top:46px;width:44px;height:230px;background-image:linear-gradient(#151515,#151515);background-size:1.4px calc(100% - 34px);background-position:50% 0;animation:hw-baja 6s ease-in-out infinite}
.hw-arana::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:37px;background:url("/mi/hw/arana.svg") center/contain no-repeat}

/* fantasmas que flotan */
.hw-fantasma{width:78px;height:94px;background-image:url("/mi/hw/fantasma.svg");animation:hw-flota 5.5s ease-in-out infinite;filter:drop-shadow(0 14px 14px #15151514)}
.hw-fantasma--izq{left:9%;top:44%}
.hw-fantasma--der{right:12%;top:52%;width:58px;height:70px;animation-delay:-2.4s;animation-duration:6.5s}

/* murciélagos */
.hw-murci{width:56px;height:26px;background-image:url("/mi/hw/murcielago.svg");animation:hw-vuela 9s ease-in-out infinite}
.hw-murci--1{left:22%;top:26%}
.hw-murci--2{left:5%;top:34%;width:38px;height:18px;animation-delay:-3s;animation-duration:11s}
.hw-murci--3{right:21%;top:30%;width:46px;height:21px;animation-delay:-5s}
.hw-murci--4{right:4%;top:42%;width:34px;height:16px;animation-delay:-1.5s;animation-duration:12s}

/* calabazas al pie de cada costado, con luz de vela */
.hw-calabazas{bottom:24px;display:flex;align-items:flex-end;gap:8px}
.hw-calabazas--izq{left:5%}
.hw-calabazas--der{right:5%}
.hw-calabazas i{display:block;width:var(--t,96px);aspect-ratio:40/38;background:url("/mi/hw/calabaza.svg") center/contain no-repeat;
  transform-origin:50% 100%;animation:hw-baila 3.4s ease-in-out infinite,hw-vela 2.4s ease-in-out infinite}
.hw-calabazas i:nth-child(2){--t:62px;animation-delay:-1.1s,-.7s;animation-duration:2.8s,1.9s}
.hw-calabazas i:nth-child(3){--t:78px;animation-delay:-2s,-1.4s;animation-duration:3.8s,2.9s}

/* panel (con sesión): banderines + calabazas junto a la mascota */
body.hw .panel__hero-in{position:relative}
.hw-panel{position:absolute;right:210px;bottom:16px;display:flex;align-items:flex-end;gap:6px;pointer-events:none}
.hw-panel i{display:block;width:var(--t,54px);aspect-ratio:40/38;background:url("/mi/hw/calabaza.svg") center/contain no-repeat;transform-origin:50% 100%;animation:hw-baila 3.4s ease-in-out infinite,hw-vela 2.4s ease-in-out infinite}
.hw-panel i:nth-child(2){--t:36px;animation-delay:-1.2s,-.8s}

@keyframes hw-mece{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes hw-baja{0%,100%{height:150px}50%{height:240px}}
@keyframes hw-flota{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes hw-vuela{0%,100%{transform:translate(0,0) scaleY(1)}20%{transform:translate(26px,-14px) scaleY(.55)}40%{transform:translate(48px,4px) scaleY(1)}60%{transform:translate(22px,16px) scaleY(.6)}80%{transform:translate(-8px,2px) scaleY(1)}}
@keyframes hw-baila{0%,100%{transform:rotate(-5deg) translateY(0)}25%{transform:rotate(0) translateY(-4px)}50%{transform:rotate(5deg) translateY(0)}75%{transform:rotate(0) translateY(-2px)}}
@keyframes hw-vela{0%,100%{filter:drop-shadow(0 0 4px #ffb45c66)}40%{filter:drop-shadow(0 0 14px #ffb45ccc) brightness(1.08)}60%{filter:drop-shadow(0 0 8px #f08a1c99)}}

/* pantallas medianas: menos cosas y más chicas; celular: solo banderines y un par de calabazas */
@media (max-width:1180px){.hw-fantasma,.hw-murci--2,.hw-murci--4,.hw-esqueleto{display:none}.hw-calabazas i{--t:64px}.hw-calabazas i:nth-child(2){--t:42px}.hw-calabazas i:nth-child(3){--t:52px}.hw-arana{right:40px}}
@media (max-width:860px){.hw-tela,.hw-arana,.hw-murci,.hw-calabazas--der,.hw-calabazas i:nth-child(3){display:none}.hw-calabazas--izq{left:16px;bottom:10px}.hw-calabazas i{--t:44px}.hw-calabazas i:nth-child(2){--t:30px}.hw-panel{right:auto;left:auto;right:16px;top:16px;bottom:auto}.hw-panel i{--t:36px}.hw-panel i:nth-child(2){--t:26px}body.hw .hw-guirnalda{height:34px;background-size:133px 34px}}

@media (prefers-reduced-motion:reduce){.hw-capa *,.hw-capa *::after,.hw-panel i{animation:none!important}}