/* Animaciones de temporada en los banners (las prende assets/js/temporada.js según la fecha; imágenes en assets/img/temporada/).
   Solo decoran: no reciben clics y no salen del banner. Con "reducir movimiento" no se muestran. */
.hero-img-wrap,.head.bn-img,.head.bn-video,.marca-banner{position:relative;}
.temp-capa{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;border-radius:inherit;}
/* en los banners con texto (ofertas, categorías, marcas) la animación va solo sobre la imagen, nunca sobre las letras */
.head .temp-capa,.marca-banner .temp-capa{left:46%;}
@media (max-width:760px){.head .temp-capa,.marca-banner .temp-capa{left:0;top:auto;height:180px;}}
.temp-capa > span{position:absolute;display:block;background-position:center;background-size:contain;background-repeat:no-repeat;}

/* ---------- Halloween ---------- */
/* araña: baja por su hilo, se balancea y vuelve a subir */
.temp-arana{top:0;left:var(--x);width:clamp(34px,4.2vw,58px);aspect-ratio:140/286;transform-origin:50% 0;
  background-image:url(../img/temporada/arana.webp);animation:temp-baja 9s ease-in-out infinite;}
@keyframes temp-baja{0%,100%{transform:translateY(-105%) rotate(0);}
  30%{transform:translateY(0) rotate(4deg);}40%{transform:translateY(0) rotate(-4deg);}
  50%{transform:translateY(0) rotate(3deg);}60%{transform:translateY(0) rotate(-2deg);}70%{transform:translateY(-6%) rotate(0);}}
/* niebla: se mueve lento por la parte de abajo */
.temp-capa > .temp-niebla{left:0;right:0;bottom:-6%;height:42%;opacity:.5;mix-blend-mode:screen;
  background:url(../img/temporada/niebla.webp) 0 100%/auto 100% repeat-x;animation:temp-niebla 45s linear infinite;}
@keyframes temp-niebla{from{background-position:0 100%;}to{background-position:-1200px 100%;}}
/* calabaza: en la esquina del banner principal, con la luz que respira */
.temp-calabaza{left:1.5%;bottom:3%;width:clamp(54px,7.5vw,104px);aspect-ratio:1;
  background-image:url(../img/temporada/calabaza.webp);animation:temp-brillo 2.8s ease-in-out infinite;}
@keyframes temp-brillo{0%,100%{filter:drop-shadow(0 0 6px rgba(255,122,0,.45)) brightness(.95);}
  50%{filter:drop-shadow(0 0 22px rgba(255,122,0,.95)) brightness(1.15);}}
/* borde del banner con luz naranja suave */
.temp-halloween .hero-img-wrap,.temp-halloween .head.bn-img,.temp-halloween .head.bn-video{animation:temp-respira 3.2s ease-in-out infinite;}
@keyframes temp-respira{0%,100%{box-shadow:0 0 0 1px rgba(255,122,0,.22),0 0 16px rgba(255,122,0,.14);}
  50%{box-shadow:0 0 0 1px rgba(255,122,0,.5),0 0 30px rgba(255,122,0,.35);}}

/* ---------- Navidad ---------- */
.temp-copo{top:-36px;left:var(--x);width:var(--s);aspect-ratio:1;opacity:var(--o);
  background-image:url(../img/temporada/copo.webp);filter:drop-shadow(0 0 4px rgba(190,230,255,.7));
  animation:temp-cae var(--d) linear var(--r) infinite;}
@keyframes temp-cae{from{transform:translate(0,0) rotate(0);}to{transform:translate(var(--dx),640px) rotate(var(--g));}}
.temp-destello{left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;mix-blend-mode:screen;
  background-image:url(../img/temporada/destello.webp);animation:temp-chispa 4.4s ease-in-out var(--r) infinite;}
@keyframes temp-chispa{0%,62%,100%{opacity:0;transform:scale(.3) rotate(0);}74%{opacity:1;transform:scale(1) rotate(25deg);}86%{opacity:0;transform:scale(.5) rotate(45deg);}}
/* rama de pino en la esquina de arriba a la derecha (la izquierda es para los textos), meciéndose */
.temp-pino{top:-4%;right:-1%;width:clamp(110px,15vw,210px);aspect-ratio:1;transform-origin:50% 0;
  background-image:url(../img/temporada/rama-pino.webp);animation:temp-mece 6s ease-in-out infinite;}
@keyframes temp-mece{0%,100%{transform:scaleX(-1) rotate(0);}50%{transform:scaleX(-1) rotate(-3deg);}}
/* guirnalda arriba del banner principal, con los bombillos titilando */
.temp-capa > .temp-guirnalda{left:0;right:0;top:-2%;height:clamp(52px,9vw,112px);
  background:url(../img/temporada/guirnalda.webp) 0 0/auto 100% repeat-x;animation:temp-titila 1.8s ease-in-out infinite;}
@keyframes temp-titila{0%,100%{filter:brightness(1) saturate(1) drop-shadow(0 0 6px rgba(255,220,120,.5));}
  50%{filter:brightness(1.35) saturate(1.25) drop-shadow(0 0 14px rgba(255,220,120,.9));}}
/* gorrito en el botón del carrito */
.temp-navidad .btn-carrito{overflow:visible;}
.temp-navidad .btn-carrito::before{content:"";position:absolute;top:-17px;left:-12px;width:34px;height:33px;pointer-events:none;z-index:1;
  transform:rotate(-14deg);background:url(../img/temporada/gorro.webp) center/contain no-repeat;}

@media (max-width:760px){
  .temp-copo:nth-child(n+11){display:none;}                  /* menos copos en celular */
}
@media (prefers-reduced-motion: reduce){.temp-capa{display:none;}
  .temp-halloween .hero-img-wrap,.temp-halloween .head.bn-img,.temp-halloween .head.bn-video{animation:none;}}