/* =====================================================================
   Floristería Marien — temas de temporada
   Cada efecto es una escena propia (app/vistas/parciales/tema.php) con interacción
   opcional (assets/js/temas.js). Colores del tema: --primario, --primario-osc,
   --primario-claro, --tema-acento y --tema-acento-claro (variables_tema()).

   Rendimiento: se animan solo transform / translate / rotate / scale y opacity;
   las capas son position:fixed con contain:strict y pointer-events:none.

   Capas (z-index), de abajo arriba:
     30 .whatsapp-flotante · 35 .barra-compra-movil · 40 .cabecera
     50 .tema-escena · 51 .tema-adorno y .tema-rafagas
     60 .menu-movil · 70 .carrito-lateral · 90 .avisos · 95 .cookies · 120 .anuncio
   ===================================================================== */

/* ---------- Base de la escena ---------- */
.tema-escena { --vel: 1; --px: 0px; --py: 0px; position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; contain: strict; }
.tema-escena.vel-1 { --vel: 1.45; }
.tema-escena.vel-3 { --vel: .68; }
.tema-escena .p {
    position: absolute; top: 0; left: var(--x); width: calc(var(--s) * 1px); height: calc(var(--s) * 1px); margin-left: calc(var(--s) * -.5px);
    opacity: 0; will-change: transform, opacity; perspective: 500px;
    animation: var(--trayecto, tema-caer) calc(var(--t) * var(--vel) * 1s) linear calc(var(--d) * var(--t) * var(--vel) * -1s) infinite;
}
.tema-escena .p > span { position: absolute; inset: 0; display: block; }
.tema-escena svg { display: block; width: 100%; height: 100%; overflow: visible; }

@keyframes tema-caer {
    0% { transform: translate3d(0, -10vh, 0); opacity: 0; }
    8% { opacity: var(--o); }
    85% { opacity: var(--o); }
    100% { transform: translate3d(0, 108vh, 0); opacity: 0; }
}
@keyframes tema-subir {
    0% { transform: translate3d(0, 106vh, 0); opacity: 0; }
    12% { opacity: var(--o); }
    70% { opacity: var(--o); }
    100% { transform: translate3d(0, -12vh, 0); opacity: 0; }
}
@keyframes tema-vaiven { from { translate: calc(var(--dx) * -.5px) 0; } to { translate: calc(var(--dx) * .5px) 0; } }
@keyframes tema-dibujar { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* =====================================================================
   SAN VALENTÍN · corazones: luces desenfocadas + corazones que se dibujan
   ===================================================================== */
.escena-corazones .bokeh {
    position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 1px); height: calc(var(--s) * 1px); margin: calc(var(--s) * -.5px) 0 0 calc(var(--s) * -.5px);
    border-radius: 50%; background: radial-gradient(circle, var(--primario-claro) 0%, color-mix(in srgb, var(--primario) 30%, transparent) 38%, transparent 70%);
    opacity: var(--o); translate: var(--px) var(--py); transition: translate 1.2s cubic-bezier(.2, .7, .2, 1);
    animation: bokeh-flotar calc(var(--t) * var(--vel) * 1s) ease-in-out calc(var(--d) * -30s) infinite alternate;
}
.escena-corazones .bokeh:nth-of-type(3n) { background: radial-gradient(circle, var(--tema-acento-claro) 0%, color-mix(in srgb, var(--tema-acento) 30%, transparent) 38%, transparent 70%); }
@keyframes bokeh-flotar { from { transform: translate3d(-2vw, 3vh, 0) scale(.85); } to { transform: translate3d(3vw, -4vh, 0) scale(1.15); } }
.escena-corazones .p { --trayecto: tema-subir; }
.escena-corazones .p > span { animation: tema-vaiven calc(var(--t) * var(--vel) * .22s) ease-in-out calc(var(--d) * -4s) infinite alternate; }
.escena-corazones .p path { fill: var(--primario); stroke: none; }
.escena-corazones .p.t2 path { fill: var(--tema-acento); }
.escena-corazones .p.lleno svg { filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--primario) 35%, transparent)); }
/* Corazón de trazo: se dibuja, se rellena y sigue subiendo */
.escena-corazones .p.linea path {
    fill: var(--primario); fill-opacity: 0; stroke: var(--primario-osc); stroke-width: 1.1; stroke-dasharray: 100; stroke-dashoffset: 100;
    animation: corazon-dibujar calc(var(--t) * var(--vel) * 1s) ease-out calc(var(--d) * var(--t) * var(--vel) * -1s) infinite;
}
@keyframes corazon-dibujar { 0% { stroke-dashoffset: 100; fill-opacity: 0; } 30% { stroke-dashoffset: 0; fill-opacity: 0; } 50%, 100% { stroke-dashoffset: 0; fill-opacity: .55; } }
/* Adorno: corazones que cuelgan de hilos finos */
.adorno-corazones .colgante { position: absolute; top: 0; left: var(--x); width: 1px; height: var(--h); background: linear-gradient(var(--tema-acento), color-mix(in srgb, var(--tema-acento) 30%, transparent)); transform-origin: 50% 0; animation: colgar 3.2s ease-in-out calc(var(--d) * -3s) infinite alternate; }
.adorno-corazones .colgante::after { content: ""; position: absolute; left: -5px; bottom: -9px; width: 11px; height: 10px; background: var(--primario); -webkit-mask: var(--forma-corazon) center / contain no-repeat; mask: var(--forma-corazon) center / contain no-repeat; }
.adorno-corazones .colgante:nth-child(even)::after { background: var(--tema-acento); }
@keyframes colgar { from { rotate: -7deg; } to { rotate: 7deg; } }
:root { --forma-corazon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.3C9.6 19.5 1.5 14.2 1.5 7.6 1.5 4.3 4 1.7 7.1 1.7c2 0 3.8 1.1 4.9 2.8 1.1-1.7 2.9-2.8 4.9-2.8 3.1 0 5.6 2.6 5.6 5.9 0 6.6-8.1 11.9-10.5 13.7z'/%3E%3C/svg%3E"); }

/* =====================================================================
   DÍA DE LA MADRE / PRIMAVERA · pétalos: ramas que se dibujan + viento
   ===================================================================== */
.escena-petalos .rama { position: absolute; top: 92px; left: 0; width: clamp(130px, 15vw, 210px); opacity: .55; animation: rama-mecer 9s ease-in-out infinite alternate; transform-origin: 0 0; }
.escena-petalos .rama-der { left: auto; right: 0; transform: scaleX(-1); transform-origin: 100% 0; animation-name: rama-mecer-der; }
.escena-petalos .rama path, .escena-petalos .rama circle { fill: none; stroke: var(--primario-osc); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: tema-dibujar 2.6s cubic-bezier(.45, 0, .2, 1) forwards; }
.escena-petalos .rama path:first-child { stroke: var(--tema-acento); stroke-width: 1.4; animation-duration: 3.4s; }
.escena-petalos .rama :nth-child(2) { animation-delay: .9s; } .escena-petalos .rama :nth-child(3) { animation-delay: 1.2s; }
.escena-petalos .rama :nth-child(4) { animation-delay: 1.5s; } .escena-petalos .rama :nth-child(5) { animation-delay: 1.8s; }
.escena-petalos .rama :nth-child(6) { animation-delay: 1s; } .escena-petalos .rama :nth-child(n+7) { animation-delay: 2.1s; stroke: var(--primario); }
@keyframes rama-mecer { from { rotate: 0deg; } to { rotate: 1.6deg; } }
@keyframes rama-mecer-der { from { transform: scaleX(-1) rotate(0deg); } to { transform: scaleX(-1) rotate(1.6deg); } }
/* Ráfagas de viento: todo el conjunto de pétalos se desplaza a la vez */
.escena-petalos .viento, .escena-hojas .viento { position: absolute; inset: 0; translate: var(--px) var(--py); transition: translate 1.4s cubic-bezier(.2, .7, .2, 1); animation: rafaga-viento calc(16s * var(--vel)) ease-in-out infinite; }
@keyframes rafaga-viento { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-1vw); } 55% { transform: translateX(7vw); } 70% { transform: translateX(3vw); } }
.escena-petalos .p > span {
    background: radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, .55), transparent 45%), linear-gradient(155deg, var(--primario-claro) 0%, var(--primario) 70%, var(--primario-osc) 100%);
    -webkit-mask: var(--forma-petalo) center / contain no-repeat; mask: var(--forma-petalo) center / contain no-repeat;
    animation: tema-vaiven calc(var(--t) * var(--vel) * .2s) ease-in-out calc(var(--d) * -5s) infinite alternate, petalo-girar calc(var(--t) * var(--vel) * .32s) linear calc(var(--d) * -6s) infinite;
}
.escena-petalos .p.t2 > span { background: radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, .6), transparent 45%), linear-gradient(155deg, #fff 0%, var(--tema-acento-claro) 55%, var(--tema-acento) 100%); }
.escena-petalos .p.t3 > span { animation-direction: alternate, reverse; }
@keyframes petalo-girar { from { rotate: 1 .5 .2 calc(var(--r) * 1deg); } to { rotate: 1 .5 .2 calc(var(--r) * 1deg + 360deg); } }
:root { --forma-petalo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 23C4 19 .5 13 1.2 7.5 1.8 3 5.5.6 10 3.2 14.5.6 18.2 3 18.8 7.5 19.5 13 16 19 10 23z'/%3E%3C/svg%3E"); }

/* =====================================================================
   NAVIDAD · nieve: nevada en tres planos + copos de cristal + luces
   ===================================================================== */
.escena-nieve .nevada {
    position: absolute; left: 0; right: 0; top: -600px; height: calc(100% + 600px); will-change: transform;
    background-repeat: repeat; animation: nevar linear infinite;
}
.escena-nieve .nevada.lejos {
    background-image: radial-gradient(circle, #fff 0 1px, rgba(150, 165, 185, .45) 1.6px, transparent 2.2px), radial-gradient(circle, #fff 0 .8px, rgba(150, 165, 185, .4) 1.3px, transparent 1.8px);
    background-size: 150px 150px, 100px 100px; background-position: 20px 30px, 70px 90px; opacity: .8; animation-duration: calc(46s * var(--vel));
}
.escena-nieve .nevada.medio {
    background-image: radial-gradient(circle, #fff 0 1.6px, rgba(150, 165, 185, .5) 2.4px, transparent 3.2px), radial-gradient(circle, #fff 0 1.3px, rgba(150, 165, 185, .45) 2px, transparent 2.8px);
    background-size: 200px 200px, 150px 150px; background-position: 60px 10px, 130px 120px; opacity: .85; animation-duration: calc(30s * var(--vel)); translate: calc(var(--px) * .5) 0;
}
.escena-nieve .nevada.cerca {
    background-image: radial-gradient(circle, #fff 0 2.6px, rgba(150, 165, 185, .45) 3.8px, transparent 5px);
    background-size: 300px 300px; background-position: 140px 60px; opacity: .75; filter: blur(.6px); animation-duration: calc(18s * var(--vel)); translate: var(--px) 0;
    transition: translate 1.4s cubic-bezier(.2, .7, .2, 1);
}
.escena-nieve.int-1 .nevada.cerca { display: none; }
@keyframes nevar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-60px, 600px, 0); } }
.escena-nieve .p.copo > span {
    background: linear-gradient(160deg, #fff, var(--tema-acento-claro) 60%, var(--tema-acento));
    -webkit-mask: var(--forma-copo) center / contain no-repeat; mask: var(--forma-copo) center / contain no-repeat;
    animation: tema-vaiven calc(var(--t) * var(--vel) * .25s) ease-in-out calc(var(--d) * -5s) infinite alternate, copo-girar calc(var(--t) * var(--vel) * .6s) linear infinite;
}
@keyframes copo-girar { from { rotate: calc(var(--r) * 1deg); } to { rotate: calc(var(--r) * 1deg + 360deg); } }
:root { --forma-copo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M12 1v22M2.5 6.5l19 11M2.5 17.5l19-11M12 5l-2.5-2.5M12 5l2.5-2.5M12 19l-2.5 2.5M12 19l2.5 2.5M5 8l-3.4.9M5 8l-.9-3.4M19 16l3.4-.9M19 16l.9 3.4M5 16l-3.4-.9M5 16l-.9 3.4M19 8l3.4.9M19 8l.9-3.4'/%3E%3C/svg%3E"); }
/* Guirnalda de luces sobre la barra superior */
.adorno-nieve { height: 44px; }
.adorno-nieve .adorno-cable { position: absolute; inset: 0 0 auto 0; width: 100%; height: 40px; }
.adorno-nieve .adorno-cable path { fill: none; stroke: #2f3b31; stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .7; }
.adorno-nieve .bombilla { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 12px; margin-left: -4px; border-radius: 45% 45% 50% 50% / 35% 35% 65% 65%; background: #f6d78b; }
.adorno-nieve .bombilla::before { content: ""; position: absolute; left: 1px; top: -3px; width: 6px; height: 4px; border-radius: 1px; background: #4a4f45; }
.adorno-nieve .bombilla::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle, currentColor 0%, transparent 65%); opacity: .55; animation: bombilla-brillar 2.4s ease-in-out calc(var(--d) * -2.4s) infinite alternate; }
.adorno-nieve .bombilla.b0 { background: #f6d78b; color: rgba(246, 215, 139, .9); }
.adorno-nieve .bombilla.b1 { background: var(--primario); color: color-mix(in srgb, var(--primario) 80%, transparent); }
.adorno-nieve .bombilla.b2 { background: #fff7e6; color: rgba(255, 247, 230, .95); }
.adorno-nieve .bombilla.b3 { background: var(--tema-acento); color: color-mix(in srgb, var(--tema-acento) 80%, transparent); }
@keyframes bombilla-brillar { 0%, 30% { opacity: .15; } 100% { opacity: .75; } }

/* =====================================================================
   OTOÑO · hojas: luz de atardecer + hojas en espiral con ráfagas
   ===================================================================== */
.escena-hojas .luz-otono { position: absolute; right: -15vw; top: -20vh; width: 70vw; height: 70vw; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tema-acento) 28%, transparent) 0%, transparent 62%); animation: luz-latir 12s ease-in-out infinite alternate; }
@keyframes luz-latir { from { opacity: .55; transform: scale(.95); } to { opacity: .9; transform: scale(1.05); } }
.escena-hojas .p > span {
    background: linear-gradient(150deg, #e2a04a 0%, #c46a2c 60%, #8f3f22 100%);
    -webkit-mask: var(--forma-hoja) center / contain no-repeat; mask: var(--forma-hoja) center / contain no-repeat;
    animation: tema-vaiven calc(var(--t) * var(--vel) * .18s) ease-in-out calc(var(--d) * -5s) infinite alternate, hoja-girar calc(var(--t) * var(--vel) * .28s) linear calc(var(--d) * -7s) infinite;
}
.escena-hojas .p.t2 > span { background: linear-gradient(150deg, var(--tema-acento-claro), var(--tema-acento) 70%); }
.escena-hojas .p.t3 > span { background: linear-gradient(150deg, #d9b25a, #a8712d 75%); animation-direction: alternate, reverse; }
@keyframes hoja-girar { from { rotate: .4 1 .3 calc(var(--r) * 1deg); } to { rotate: .4 1 .3 calc(var(--r) * 1deg + 360deg); } }
:root { --forma-hoja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c3 3 8 5 9 11-2 0-3.5-.6-4.5-1.5.6 2.6 2 4.4 4 5.5-3 1.4-6 .8-7.8-.8L12 23l-.7-7.8C9.5 16.8 6.5 17.4 3.5 16c2-1.1 3.4-2.9 4-5.5C6.5 11.4 5 12 3 12 4 6 9 4 12 1z'/%3E%3C/svg%3E"); }

/* =====================================================================
   TODOS LOS SANTOS · luces: velas con llama viva, resplandor y chispas
   ===================================================================== */
.escena-luces .resplandor { position: absolute; left: 0; right: 0; bottom: 0; height: 45vh; background: radial-gradient(ellipse 60% 70% at 12% 110%, rgba(255, 186, 102, .22), transparent 70%), radial-gradient(ellipse 50% 60% at 88% 110%, rgba(255, 186, 102, .16), transparent 70%); animation: resplandor-latir 3.6s ease-in-out infinite alternate; }
@keyframes resplandor-latir { from { opacity: .7; } to { opacity: 1; } }
.escena-luces .velas { position: absolute; bottom: 0; left: 22px; width: 90px; height: 140px; }
.escena-luces .velas-der { left: auto; right: 100px; width: 80px; }
.escena-luces .vela { position: absolute; bottom: 0; left: var(--x); width: 20px; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, #e9dcc6 0%, #fffaf0 38%, #f6eddc 62%, #ddcdb2 100%); box-shadow: inset 0 6px 8px -6px rgba(255, 196, 120, .8), 0 2px 6px rgba(60, 40, 20, .18); }
.escena-luces .vela::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1.5px; height: 7px; margin-left: -.75px; background: #3b2f25; border-radius: 1px; }
.escena-luces .llama { position: absolute; left: 50%; bottom: calc(100% + 4px); width: 10px; height: 24px; margin-left: -5px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 78%, #fff 0 14%, #ffe9a8 26%, #ffb547 52%, rgba(255, 120, 40, .7) 66%, rgba(255, 120, 40, 0) 78%); transform-origin: 50% 92%; animation: llama-titilar 1.5s ease-in-out calc(var(--d) * -1.5s) infinite alternate; }
.escena-luces .halo { position: absolute; left: 50%; bottom: calc(100% - 6px); width: 90px; height: 90px; margin-left: -45px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 120, .4), transparent 65%); animation: halo-latir 2.2s ease-in-out calc(var(--d) * -2s) infinite alternate; }
@keyframes llama-titilar {
    0% { transform: scale(1, 1) skewX(0deg); } 20% { transform: scale(.94, 1.06) skewX(2deg); } 45% { transform: scale(1.04, .95) skewX(-2.5deg); }
    70% { transform: scale(.97, 1.08) skewX(1.5deg); } 100% { transform: scale(1.02, .98) skewX(-1deg); }
}
@keyframes halo-latir { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.escena-luces .p { --trayecto: tema-subir; }
.escena-luces .p > span { border-radius: 50%; background: radial-gradient(circle, #fff6dc 0 25%, rgba(255, 196, 110, .9) 45%, rgba(255, 170, 80, 0) 72%); box-shadow: 0 0 calc(var(--s) * 2.5px) calc(var(--s) * .4px) rgba(255, 176, 80, .55); animation: tema-vaiven calc(var(--t) * var(--vel) * .2s) ease-in-out calc(var(--d) * -6s) infinite alternate, chispa-titilar 2.6s ease-in-out calc(var(--d) * -2.6s) infinite alternate; }
@keyframes chispa-titilar { 0%, 40% { opacity: 1; } 70% { opacity: .35; } 100% { opacity: .9; } }

/* =====================================================================
   DÍA DEL PADRE / BRILLO · destellos: estrellas, barrido de luz y estela del ratón
   ===================================================================== */
.escena-destellos .barrido { position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 42%, rgba(255, 245, 220, .32) 49%, rgba(255, 255, 255, .5) 50%, rgba(255, 245, 220, .32) 51%, transparent 58%); animation: barrido-luz calc(11s * var(--vel)) cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes barrido-luz { 0%, 55% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
.escena-destellos .p { top: var(--y); animation: none; opacity: 1; }
.escena-destellos .p > span {
    background: radial-gradient(circle, #fff 0 12%, var(--tema-acento-claro) 30%, var(--tema-acento) 70%);
    -webkit-mask: var(--forma-estrella) center / contain no-repeat; mask: var(--forma-estrella) center / contain no-repeat;
    opacity: 0; animation: centellear calc(var(--t) * var(--vel) * 1s) ease-in-out calc(var(--d) * var(--t) * -1s) infinite;
}
.escena-destellos .p.t2 > span { background: radial-gradient(circle, #fff 0 15%, var(--primario-claro) 35%, var(--primario) 75%); }
@keyframes centellear { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 18% { opacity: var(--o); transform: scale(1) rotate(45deg); } 36% { opacity: 0; transform: scale(.3) rotate(90deg); } }
:root { --forma-estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.4 5 11 12 12-7 .9-11.3 5.4-12 12-.8-6.6-5.1-11.1-12-12 6.9-1 11.2-5.6 12-12z'/%3E%3C/svg%3E"); }

/* =====================================================================
   AÑO NUEVO · fuegos artificiales + purpurina
   ===================================================================== */
.escena-fuegos .fuego { --c: #f3d27a; position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; animation: fuego-caida calc(var(--t) * var(--vel) * 1s) ease-in calc(var(--d) * var(--t) * -1s) infinite; }
.escena-fuegos .fuego.c2 { --c: var(--primario); }
.escena-fuegos .fuego.c3 { --c: var(--tema-acento); }
@keyframes fuego-caida { 0%, 24% { transform: translateY(0); } 70%, 100% { transform: translateY(26px); } }
/* Cohete que sube */
.escena-fuegos .estela { position: absolute; left: -1px; top: 0; width: 2px; height: 70px; border-radius: 2px; background: linear-gradient(to bottom, #fff7dd, rgba(255, 220, 150, 0)); opacity: 0; animation: cohete calc(var(--t) * var(--vel) * 1s) cubic-bezier(.2, .6, .4, 1) calc(var(--d) * var(--t) * -1s) infinite; }
@keyframes cohete { 0% { transform: translateY(55vh); opacity: 0; } 4% { opacity: .9; } 20% { transform: translateY(0); opacity: .9; } 23%, 100% { transform: translateY(0); opacity: 0; } }
/* Destello central */
.escena-fuegos .fuego::before { content: ""; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9), color-mix(in srgb, var(--c) 50%, transparent) 30%, transparent 65%); opacity: 0; animation: fuego-flash calc(var(--t) * var(--vel) * 1s) ease-out calc(var(--d) * var(--t) * -1s) infinite; }
@keyframes fuego-flash { 0%, 20% { opacity: 0; transform: scale(.2); } 23% { opacity: .9; transform: scale(1); } 34%, 100% { opacity: 0; transform: scale(1.6); } }
/* Chispas que salen en estrella */
.escena-fuegos .chispa { position: absolute; left: -1.5px; top: 0; width: 3px; height: calc(var(--s) * .16px); border-radius: 3px; background: linear-gradient(to top, transparent, var(--c) 40%, #fff); transform-origin: 50% 0; opacity: 0; animation: chispa-salir calc(var(--t) * var(--vel) * 1s) cubic-bezier(.1, .7, .3, 1) calc(var(--d) * var(--t) * -1s) infinite; }
@keyframes chispa-salir {
    0%, 21% { opacity: 0; transform: rotate(var(--a)) translateY(0) scaleY(.2); }
    24% { opacity: 1; }
    52% { opacity: .9; transform: rotate(var(--a)) translateY(calc(var(--s) * -.5px * var(--l))) scaleY(1); }
    72%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--s) * -.62px * var(--l))) scaleY(.4); }
}
.escena-fuegos .p > span { border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #f3d27a 45%, transparent 72%); animation: tema-vaiven calc(var(--t) * var(--vel) * .25s) ease-in-out infinite alternate, chispa-titilar 1.4s ease-in-out calc(var(--d) * -1.4s) infinite alternate; }
.escena-fuegos .p.t2 > span { background: radial-gradient(circle, #fff 0 20%, var(--tema-acento) 45%, transparent 72%); }

/* =====================================================================
   BLACK FRIDAY / CELEBRACIÓN · confeti: cañones al entrar + caída suave
   ===================================================================== */
.escena-confeti .canon { position: absolute; bottom: 0; left: 0; width: 0; height: 0; }
.escena-confeti .canon-der { left: auto; right: 0; transform: scaleX(-1); }
.escena-confeti .pieza { position: absolute; left: 0; bottom: 0; width: 9px; height: 15px; border-radius: 1.5px; background: var(--primario); opacity: 0; animation: disparo 3.4s cubic-bezier(.12, .62, .28, 1) calc(.4s + var(--d) * 1s) forwards; }
.escena-confeti .pieza.t2 { background: var(--tema-acento); width: 5px; height: 18px; }
.escena-confeti .pieza.t3 { background: #f3d27a; width: 9px; height: 9px; border-radius: 50%; }
.escena-confeti .pieza.t4 { background: var(--primario-claro); width: 12px; height: 7px; }
@keyframes disparo {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    45% { opacity: 1; transform: translate(calc(var(--dx) * .7), calc(var(--l) * -1)) rotate(calc(var(--r) * .5deg)); }
    100% { opacity: 0; transform: translate(var(--dx), 20vh) rotate(calc(var(--r) * 1deg)); }
}
.escena-confeti .p > span { background: var(--primario); border-radius: 1px; height: 60%; top: 20%; animation: tema-vaiven calc(var(--t) * var(--vel) * .2s) ease-in-out infinite alternate, confeti-girar calc(var(--t) * var(--vel) * .15s) linear infinite; }
.escena-confeti .p.t2 > span { background: var(--tema-acento); }
.escena-confeti .p.t3 > span { background: #f3d27a; border-radius: 50%; height: 70%; top: 15%; }
.escena-confeti .p.t4 > span { background: var(--primario-claro); }
@keyframes confeti-girar { from { rotate: 1 .3 .5 0deg; } to { rotate: 1 .3 .5 360deg; } }

/* =====================================================================
   HALLOWEEN · luna, nubes, bandadas de murciélagos, telaraña y bruma
   ===================================================================== */
.escena-murcielagos .luna { position: absolute; top: 17vh; right: 6vw; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fffaf0 0%, #f6ebcf 55%, #e6d2a2 100%); box-shadow: 0 0 60px 18px rgba(255, 238, 196, .45), 0 0 160px 60px rgba(255, 226, 170, .18); opacity: .62; animation: luna-latir 8s ease-in-out infinite alternate; }
.escena-murcielagos .luna i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 62% 40%, rgba(196, 170, 120, .35) 0 9%, transparent 10%), radial-gradient(circle at 35% 66%, rgba(196, 170, 120, .3) 0 7%, transparent 8%), radial-gradient(circle at 58% 72%, rgba(196, 170, 120, .25) 0 5%, transparent 6%); }
@keyframes luna-latir { from { opacity: .5; } to { opacity: .7; } }
.escena-murcielagos .nube { position: absolute; top: 19vh; left: 0; width: 280px; height: 70px; border-radius: 50px; background: radial-gradient(ellipse 40% 60% at 30% 60%, rgba(84, 66, 104, .2), transparent 70%), radial-gradient(ellipse 45% 70% at 62% 45%, rgba(84, 66, 104, .22), transparent 70%), radial-gradient(ellipse 35% 55% at 85% 65%, rgba(84, 66, 104, .16), transparent 70%); opacity: .6; animation: nube-cruzar calc(70s * var(--vel)) linear -20s infinite; }
.escena-murcielagos .nube.n2 { top: 27vh; width: 200px; animation-duration: calc(95s * var(--vel)); animation-delay: -60s; opacity: .45; }
@keyframes nube-cruzar { from { transform: translateX(-30vw); } to { transform: translateX(115vw); } }
.escena-murcielagos .bandada { position: absolute; top: var(--y); left: 0; width: 0; height: 0; animation: bandada-cruzar calc(var(--t) * var(--vel) * 1s) linear calc(var(--d) * var(--t) * -1s) infinite; }
.escena-murcielagos .bandada.inv { left: auto; right: 0; animation-name: bandada-cruzar-inv; }
.escena-murcielagos .bandada.inv .murcielago { scale: -1 1; }
@keyframes bandada-cruzar { 0% { transform: translate(-25vw, 0); } 50% { transform: translate(55vw, -4vh); } 100% { transform: translate(130vw, 2vh); } }
@keyframes bandada-cruzar-inv { 0% { transform: translate(25vw, 0); } 50% { transform: translate(-55vw, -5vh); } 100% { transform: translate(-130vw, 1vh); } }
.escena-murcielagos .murcielago { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 1px); height: calc(var(--s) * .55px); animation: murcielago-flotar 1.8s ease-in-out calc(var(--d) * -1.8s) infinite alternate; }
.escena-murcielagos .murcielago span { position: absolute; inset: 0; background: #34283f; -webkit-mask: var(--forma-murcielago) center / contain no-repeat; mask: var(--forma-murcielago) center / contain no-repeat; transform-origin: 50% 40%; animation: aletear .26s ease-in-out calc(var(--d) * -.26s) infinite alternate; }
@keyframes aletear { from { transform: scaleY(1); } to { transform: scaleY(.35) translateY(2px); } }
@keyframes murcielago-flotar { from { translate: 0 -6px; } to { translate: 0 6px; } }
:root { --forma-murcielago: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M20 6l1.2-3 1 3.2c1.5.3 2.6 1.4 3 2.8C28 5 33 3 40 4c-3 2-4 5-4 8-2-1.6-4.2-1.6-6 0-1.5-1.4-3.4-1.4-5 .2-1.3 2-3 4.5-5 9.8-2-5.3-3.7-7.8-5-9.8-1.6-1.6-3.5-1.6-5-.2-1.8-1.6-4-1.6-6 0 0-3-1-6-4-8 7-1 12 1 14.8 5 .4-1.4 1.5-2.5 3-2.8l1-3.2z'/%3E%3C/svg%3E"); }
.escena-murcielagos .bruma { position: absolute; left: -20%; right: -20%; bottom: -6vh; height: 34vh; background: radial-gradient(ellipse 50% 60% at 30% 70%, rgba(190, 178, 208, .32), transparent 70%), radial-gradient(ellipse 45% 55% at 75% 75%, rgba(190, 178, 208, .26), transparent 70%); animation: bruma-mover calc(26s * var(--vel)) ease-in-out infinite alternate; }
.escena-murcielagos .bruma.b2 { bottom: -10vh; opacity: .7; animation-duration: calc(34s * var(--vel)); animation-direction: alternate-reverse; }
@keyframes bruma-mover { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* =====================================================================
   Ráfagas al hacer clic y estela del ratón (assets/js/temas.js)
   ===================================================================== */
.tema-rafagas { position: fixed; inset: 0; z-index: 51; pointer-events: none; overflow: hidden; }
.rafaga { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; opacity: 0; animation: rafaga-salir .95s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes rafaga-salir { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--rx), var(--ry)) rotate(var(--rr)) scale(.3); } }
.r-corazon { background: var(--primario); -webkit-mask: var(--forma-corazon) center / contain no-repeat; mask: var(--forma-corazon) center / contain no-repeat; }
.r-corazon.c2 { background: var(--tema-acento); }
.r-petalo { background: var(--primario); -webkit-mask: var(--forma-petalo) center / contain no-repeat; mask: var(--forma-petalo) center / contain no-repeat; }
.r-petalo.c2 { background: var(--primario-claro); }
.r-estrella, .r-estela { background: radial-gradient(circle, #fff 0 15%, var(--tema-acento) 60%); -webkit-mask: var(--forma-estrella) center / contain no-repeat; mask: var(--forma-estrella) center / contain no-repeat; }
.r-estela { width: 9px; height: 9px; animation-duration: .8s; }
.r-chispa { width: 4px; height: 4px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 6px 2px rgba(255, 210, 120, .8); }
.r-chispa.c2 { background: var(--primario-claro); box-shadow: 0 0 6px 2px color-mix(in srgb, var(--primario) 70%, transparent); }
.r-confeti { width: 7px; height: 12px; border-radius: 1px; background: var(--primario); }
.r-confeti.c2 { background: var(--tema-acento); } .r-confeti.c3 { background: #f3d27a; }

/* =====================================================================
   Adorno común (hilo dorado con brillo) y toques de interfaz
   ===================================================================== */
.tema-adorno { position: absolute; top: 38px; left: 0; right: 0; height: 40px; z-index: 51; pointer-events: none; overflow: visible; }
.tema-guirnalda { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--tema-acento) 15%, var(--tema-acento-claro) 50%, var(--tema-acento) 85%, transparent); opacity: .85; overflow: hidden; }
.tema-guirnalda::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18%; background: linear-gradient(90deg, transparent, #fff, transparent); animation: guirnalda-brillo 6s ease-in-out infinite; }
@keyframes guirnalda-brillo { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(650%); } }
.con-tema .aviso-superior { background: linear-gradient(100deg, var(--primario-osc), var(--primario) 45%, var(--primario-osc)); border-bottom: 1px solid var(--tema-acento); position: relative; overflow: hidden; }
.con-tema .aviso-superior::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .18) 50%, transparent 60%); transform: translateX(-100%); animation: barra-brillo 9s ease-in-out 2s infinite; pointer-events: none; }
@keyframes barra-brillo { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.con-tema .mensaje-tema { letter-spacing: .02em; }
.con-tema .mensaje-tema::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: 1px; background: var(--tema-acento-claro); -webkit-mask: var(--forma-estrella) center / contain no-repeat; mask: var(--forma-estrella) center / contain no-repeat; animation: centellear-suave 2.6s ease-in-out infinite; }
@keyframes centellear-suave { 0%, 100% { opacity: .5; transform: scale(.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
.con-tema .btn:not(.btn-claro):hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tema-acento) 35%, transparent); }
.con-tema .whatsapp-flotante { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tema-acento) 30%, transparent), 0 10px 30px -10px rgba(0, 0, 0, .45); }

/* ---------- Móvil, accesibilidad e impresión ---------- */
@media (max-width: 760px) {
    .tema-sin-movil .tema-escena, .tema-sin-movil .tema-adorno { display: none; }
    .tema-escena .p:nth-of-type(even), .escena-corazones .bokeh:nth-of-type(even) { display: none; }
    .escena-petalos .rama { top: 74px; width: 110px; opacity: .4; }
    .escena-luces .velas { transform: scale(.75); transform-origin: 0 100%; }
    .escena-luces .velas-der { display: none; }
    .escena-murcielagos .luna { width: 80px; height: 80px; top: 14vh; }
    .escena-fuegos .fuego:nth-of-type(n+4) { display: none; }
    .adorno-nieve .bombilla:nth-of-type(odd) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tema-escena, .tema-rafagas { display: none; }
    .tema-adorno *, .tema-adorno *::before, .tema-adorno *::after, .con-tema .aviso-superior::after, .con-tema .mensaje-tema::before { animation: none !important; }
}
@media print { .tema-escena, .tema-adorno, .tema-rafagas { display: none !important; } }

/* =====================================================================
   HALLOWEEN · telaraña que se teje, araña y fantasmas
   ===================================================================== */
/* Telaraña colgada bajo la cabecera: primero los radios, luego la espiral (a la vez que la recorre la araña) */
.escena-murcielagos .telarana { position: absolute; top: 112px; left: 0; width: 240px; height: 240px; overflow: hidden; }
.escena-murcielagos .telarana svg { width: 240px; height: 240px; }
.escena-murcielagos .telarana > svg { opacity: .62; }
.escena-murcielagos .telarana path { fill: none; stroke: #6b5f78; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.escena-murcielagos .telarana .radios { stroke-width: .9; animation: tema-dibujar 1.6s ease-out .4s forwards; }
.escena-murcielagos .telarana .espiral { stroke-width: .7; stroke: #7d7189; animation: tela-tejer 11s linear 2s forwards; }
@keyframes tela-tejer { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* Brillo de rocío que recorre los hilos cuando la tela ya está hecha */
.escena-murcielagos .telarana::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); transform: translateX(-120%); animation: tela-brillo 7s ease-in-out 13.5s infinite; mix-blend-mode: screen; }
@keyframes tela-brillo { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
/* La araña */
.escena-murcielagos .arana { position: absolute; left: 0; top: 0; width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgba(40, 30, 50, .35)); }
.escena-murcielagos .arana svg { width: 100%; height: 100%; }
.escena-murcielagos .arana .cuerpo { fill: #2f2538; }
.escena-murcielagos .arana .ojo { fill: #f2c35a; }
.escena-murcielagos .arana .patas path { fill: none; stroke: #2f2538; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.escena-murcielagos .arana .patas path:first-child { transform-origin: 13px 16px; animation: patas-andar .22s ease-in-out infinite alternate; }
.escena-murcielagos .arana .patas path:last-child { transform-origin: 19px 16px; animation: patas-andar .22s ease-in-out -.11s infinite alternate; }
@keyframes patas-andar { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
/* Tejiendo: sigue el mismo camino que la espiral y desaparece al acabar */
.escena-murcielagos .arana.tejiendo { offset-path: var(--espiral); offset-rotate: auto 90deg; offset-distance: 0%; animation: arana-tejer 11s linear 2s both, arana-irse .6s ease-in 13s forwards; }
@keyframes arana-tejer { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes arana-irse { to { opacity: 0; } }
/* Después baja colgada de su hilo desde el centro y se balancea */
.escena-murcielagos .arana.colgada { left: calc(var(--cx) - 14px); top: calc(var(--cy) - 4px); opacity: 0; transform-origin: 50% -100px; animation: arana-bajar 2.4s cubic-bezier(.3, .7, .3, 1) 13.4s forwards, arana-balanceo 5s ease-in-out 15.8s infinite alternate; }
.escena-murcielagos .arana.colgada .patas path { animation-play-state: paused; }
.escena-murcielagos .arana.colgada .hilo { position: absolute; left: 50%; bottom: 70%; width: 1px; height: 78px; margin-left: -.5px; background: linear-gradient(rgba(107, 95, 120, 0), rgba(107, 95, 120, .8)); }
@keyframes arana-bajar { from { opacity: 0; translate: 0 -60px; } 20% { opacity: 1; } to { opacity: 1; translate: 0 70px; } }
@keyframes arana-balanceo { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* Fantasmas: cruzan flotando, con el bajo ondulante y un leve parpadeo */
.escena-murcielagos .fantasma { position: absolute; top: var(--y); left: 0; width: calc(var(--s) * 1px); height: calc(var(--s) * 1.17px); opacity: 0; animation: fantasma-cruzar calc(var(--t) * var(--vel) * 1s) linear calc(var(--d) * var(--t) * -1s) infinite; }
.escena-murcielagos .fantasma.inv { left: auto; right: 0; animation-name: fantasma-cruzar-inv; }
.escena-murcielagos .fantasma > span { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgba(84, 66, 104, .32)); animation: fantasma-flotar 3.2s ease-in-out calc(var(--d) * -3s) infinite alternate; }
.escena-murcielagos .fantasma.inv > span { scale: -1 1; }
.escena-murcielagos .fantasma .sabana { stroke: rgba(120, 100, 140, .25); stroke-width: .8; }
.escena-murcielagos .fantasma .ojo, .escena-murcielagos .fantasma .boca { fill: #3b2f47; }
.escena-murcielagos .fantasma .ojo { transform-box: fill-box; transform-origin: center; animation: fantasma-parpadear 5s ease-in-out calc(var(--d) * -5s) infinite; }
.escena-murcielagos .fantasma svg { overflow: visible; }
.escena-murcielagos .fantasma .sabana { transform-box: fill-box; transform-origin: 50% 0; animation: sabana-ondear 1.6s ease-in-out infinite alternate; }
@keyframes fantasma-cruzar {
    0% { transform: translate(-20vw, 0) rotate(-4deg); opacity: 0; }
    8% { opacity: .82; }
    50% { transform: translate(55vw, -6vh) rotate(3deg); }
    92% { opacity: .82; }
    100% { transform: translate(125vw, 2vh) rotate(-2deg); opacity: 0; }
}
@keyframes fantasma-cruzar-inv {
    0% { transform: translate(20vw, 0) rotate(4deg); opacity: 0; }
    8% { opacity: .82; }
    50% { transform: translate(-55vw, -5vh) rotate(-3deg); }
    92% { opacity: .82; }
    100% { transform: translate(-125vw, 3vh) rotate(2deg); opacity: 0; }
}
@keyframes fantasma-flotar { from { translate: 0 -10px; } to { translate: 0 10px; } }
@keyframes fantasma-parpadear { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
@keyframes sabana-ondear { from { transform: skewX(-3deg) scaleY(1); } to { transform: skewX(3deg) scaleY(1.04); } }
@media (max-width: 760px) {
    .escena-murcielagos .telarana { top: 84px; transform: scale(.65); transform-origin: 0 0; }
    .escena-murcielagos .fantasma:nth-of-type(n+3) { display: none; }
}