/* Capas decorativas de los temas de temporada (blueprints/temas.py las inserta en cada pagina publica).
   La tienda nueva no carga style.css, asi que estas reglas se mantienen aqui: sin ellas las capas
   (telaranas, arana, particulas) se dibujan en el flujo normal con el tamano del viewport y empujan el contenido. */
/* Efectos de los temas estacionales (blueprints/temas.py): decorativos, sin clics */
.tema-efectos { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 60; }
.tema-cinta { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 1002; pointer-events: none; }
.tema-particula { position: absolute; top: -8vh; display: block; opacity: .85; user-select: none; will-change: transform; animation-timing-function: linear; animation-iteration-count: infinite; }
.tema-caer { animation-name: tema-caer; }
.tema-subir { top: auto; bottom: -8vh; animation-name: tema-subir; }
.tema-cruzar { top: 30vh; left: -8vw; animation-name: tema-cruzar; }
@keyframes tema-caer { 0% { transform: translate3d(0, -8vh, 0) rotate(0deg); } 50% { transform: translate3d(26px, 50vh, 0) rotate(180deg); } 100% { transform: translate3d(-14px, 108vh, 0) rotate(360deg); } }
@keyframes tema-subir { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .85; } 100% { transform: translate3d(30px, -108vh, 0); opacity: 0; } }
@keyframes tema-cruzar { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(28vw, -18px, 0); } 50% { transform: translate3d(56vw, 14px, 0); } 75% { transform: translate3d(84vw, -14px, 0); } 100% { transform: translate3d(112vw, 0, 0); } }
.tema-web-capa { position: absolute; top: 68px; left: 0; right: 0; height: 0; z-index: 61; pointer-events: none; }
.tema-web { position: absolute; top: 0; width: 132px; height: 132px; }
.tema-arana { position: absolute; top: 0; left: 78px; width: 30px; height: 45px; transform-origin: 50% 0; animation: tema-columpio 5s ease-in-out infinite; }
@keyframes tema-columpio { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.tema-web-izq { left: 0; }
.tema-web-der { right: 0; transform: scaleX(-1); }
@media (max-width: 900px) { .tema-web-capa { top: 62px; } .tema-web { width: 84px; height: 84px; } .tema-arana { left: 50px; width: 20px; height: 30px; } }
@media (max-width: 640px) { .tema-oculta-movil { display: none; } }
/* Con "reducir movimiento" no se anima nada: las particulas quedan quietas y sutiles. */
@media (prefers-reduced-motion: reduce) { .tema-arana { animation: none; } .tema-particula { animation: none !important; transform: none !important; top: calc(var(--y, 50) * 1vh) !important; bottom: auto !important; opacity: .4; } }
/* En movil no hay decoracion de temporada (la franja se mantiene) */
@media (max-width: 760px) { .tema-web-capa, .tema-efectos, .tema-arana, .tema-cinta { display: none !important; } }