/* ZAP Movimiento — estilos comunes de las webs de ZAPSTRAL (v1.3, 2026-10-28). Ver README.md.

   v1.3: la nube se dibuja UNA vez (zap-movimiento.js la pinta en un lienzo chico al cargar) y durante el
   cambio de tema solo se AGRANDA, animando directo el tamaño de la máscara. Hasta la v1.2 eran 10 degradados con trigonometría recalculados en cada
   cuadro sobre toda la pantalla (y 20 más para el borde de luz, con desenfoque y mezcla): en un Android o
   una laptop común eso se trababa. Agrandar una imagen ya pintada lo aguanta cualquier equipo. */

/* ---------- 1. Cambio de tema ---------- */
:root { --zm-dur: 1.15s; --zm-curva: cubic-bezier(.7, 0, .25, 1); }
/* La nube crece animando DIRECTO el tamaño y la posición de la máscara. Animar una variable propia
   (@property) obligaba a recalcular la página entera en cada cuadro: medido con el procesador 4 veces
   más lento, la v1.2 perdía 223 cuadros en dos cambios de tema, esta 76 (sin nube: 47).
   Dos capas con los bultos corridos; la segunda va a otro ritmo y sus bultos asoman entre los de la
   primera: la forma cambia mientras avanza (se ve viva, como humo) sin dibujar nada nuevo. Las curvas
   están calculadas en pasos por generar-css.py: por eso la animación corre lineal. */
/* nube:desde — generado por generar-css.py */
@keyframes zm-nube {
  0% { -webkit-mask-size: 0vmax 0vmax, 0vmax 0vmax; mask-size: 0vmax 0vmax, 0vmax 0vmax;
    -webkit-mask-position: calc(var(--zm-x) - 0vmax) calc(var(--zm-y) - 0vmax), calc(var(--zm-x) - 0vmax) calc(var(--zm-y) - 0vmax); mask-position: calc(var(--zm-x) - 0vmax) calc(var(--zm-y) - 0vmax), calc(var(--zm-x) - 0vmax) calc(var(--zm-y) - 0vmax); }
  8.33% { -webkit-mask-size: 1.9vmax 1.9vmax, 1.8vmax 1.8vmax; mask-size: 1.9vmax 1.9vmax, 1.8vmax 1.8vmax;
    -webkit-mask-position: calc(var(--zm-x) - 1vmax) calc(var(--zm-y) - 1vmax), calc(var(--zm-x) - 0.9vmax) calc(var(--zm-y) - 0.9vmax); mask-position: calc(var(--zm-x) - 1vmax) calc(var(--zm-y) - 1vmax), calc(var(--zm-x) - 0.9vmax) calc(var(--zm-y) - 0.9vmax); }
  16.67% { -webkit-mask-size: 8.7vmax 8.7vmax, 8.4vmax 8.4vmax; mask-size: 8.7vmax 8.7vmax, 8.4vmax 8.4vmax;
    -webkit-mask-position: calc(var(--zm-x) - 4.3vmax) calc(var(--zm-y) - 4.3vmax), calc(var(--zm-x) - 4.2vmax) calc(var(--zm-y) - 4.2vmax); mask-position: calc(var(--zm-x) - 4.3vmax) calc(var(--zm-y) - 4.3vmax), calc(var(--zm-x) - 4.2vmax) calc(var(--zm-y) - 4.2vmax); }
  25% { -webkit-mask-size: 22.9vmax 22.9vmax, 22.3vmax 22.3vmax; mask-size: 22.9vmax 22.9vmax, 22.3vmax 22.3vmax;
    -webkit-mask-position: calc(var(--zm-x) - 11.5vmax) calc(var(--zm-y) - 11.5vmax), calc(var(--zm-x) - 11.1vmax) calc(var(--zm-y) - 11.1vmax); mask-position: calc(var(--zm-x) - 11.5vmax) calc(var(--zm-y) - 11.5vmax), calc(var(--zm-x) - 11.1vmax) calc(var(--zm-y) - 11.1vmax); }
  33.33% { -webkit-mask-size: 50.2vmax 50.2vmax, 48.7vmax 48.7vmax; mask-size: 50.2vmax 50.2vmax, 48.7vmax 48.7vmax;
    -webkit-mask-position: calc(var(--zm-x) - 25.1vmax) calc(var(--zm-y) - 25.1vmax), calc(var(--zm-x) - 24.4vmax) calc(var(--zm-y) - 24.4vmax); mask-position: calc(var(--zm-x) - 25.1vmax) calc(var(--zm-y) - 25.1vmax), calc(var(--zm-x) - 24.4vmax) calc(var(--zm-y) - 24.4vmax); }
  41.67% { -webkit-mask-size: 104.6vmax 104.6vmax, 101.5vmax 101.5vmax; mask-size: 104.6vmax 104.6vmax, 101.5vmax 101.5vmax;
    -webkit-mask-position: calc(var(--zm-x) - 52.3vmax) calc(var(--zm-y) - 52.3vmax), calc(var(--zm-x) - 50.8vmax) calc(var(--zm-y) - 50.8vmax); mask-position: calc(var(--zm-x) - 52.3vmax) calc(var(--zm-y) - 52.3vmax), calc(var(--zm-x) - 50.8vmax) calc(var(--zm-y) - 50.8vmax); }
  50% { -webkit-mask-size: 204vmax 204vmax, 197.9vmax 197.9vmax; mask-size: 204vmax 204vmax, 197.9vmax 197.9vmax;
    -webkit-mask-position: calc(var(--zm-x) - 102vmax) calc(var(--zm-y) - 102vmax), calc(var(--zm-x) - 98.9vmax) calc(var(--zm-y) - 98.9vmax); mask-position: calc(var(--zm-x) - 102vmax) calc(var(--zm-y) - 102vmax), calc(var(--zm-x) - 98.9vmax) calc(var(--zm-y) - 98.9vmax); }
  58.33% { -webkit-mask-size: 280.8vmax 280.8vmax, 255.9vmax 255.9vmax; mask-size: 280.8vmax 280.8vmax, 255.9vmax 255.9vmax;
    -webkit-mask-position: calc(var(--zm-x) - 140.4vmax) calc(var(--zm-y) - 140.4vmax), calc(var(--zm-x) - 128vmax) calc(var(--zm-y) - 128vmax); mask-position: calc(var(--zm-x) - 140.4vmax) calc(var(--zm-y) - 140.4vmax), calc(var(--zm-x) - 128vmax) calc(var(--zm-y) - 128vmax); }
  66.67% { -webkit-mask-size: 319.8vmax 319.8vmax, 286.6vmax 286.6vmax; mask-size: 319.8vmax 319.8vmax, 286.6vmax 286.6vmax;
    -webkit-mask-position: calc(var(--zm-x) - 159.9vmax) calc(var(--zm-y) - 159.9vmax), calc(var(--zm-x) - 143.3vmax) calc(var(--zm-y) - 143.3vmax); mask-position: calc(var(--zm-x) - 159.9vmax) calc(var(--zm-y) - 159.9vmax), calc(var(--zm-x) - 143.3vmax) calc(var(--zm-y) - 143.3vmax); }
  75% { -webkit-mask-size: 341vmax 341vmax, 305.5vmax 305.5vmax; mask-size: 341vmax 341vmax, 305.5vmax 305.5vmax;
    -webkit-mask-position: calc(var(--zm-x) - 170.5vmax) calc(var(--zm-y) - 170.5vmax), calc(var(--zm-x) - 152.8vmax) calc(var(--zm-y) - 152.8vmax); mask-position: calc(var(--zm-x) - 170.5vmax) calc(var(--zm-y) - 170.5vmax), calc(var(--zm-x) - 152.8vmax) calc(var(--zm-y) - 152.8vmax); }
  83.33% { -webkit-mask-size: 352.6vmax 352.6vmax, 316.7vmax 316.7vmax; mask-size: 352.6vmax 352.6vmax, 316.7vmax 316.7vmax;
    -webkit-mask-position: calc(var(--zm-x) - 176.3vmax) calc(var(--zm-y) - 176.3vmax), calc(var(--zm-x) - 158.3vmax) calc(var(--zm-y) - 158.3vmax); mask-position: calc(var(--zm-x) - 176.3vmax) calc(var(--zm-y) - 176.3vmax), calc(var(--zm-x) - 158.3vmax) calc(var(--zm-y) - 158.3vmax); }
  91.67% { -webkit-mask-size: 358.4vmax 358.4vmax, 322.3vmax 322.3vmax; mask-size: 358.4vmax 358.4vmax, 322.3vmax 322.3vmax;
    -webkit-mask-position: calc(var(--zm-x) - 179.2vmax) calc(var(--zm-y) - 179.2vmax), calc(var(--zm-x) - 161.2vmax) calc(var(--zm-y) - 161.2vmax); mask-position: calc(var(--zm-x) - 179.2vmax) calc(var(--zm-y) - 179.2vmax), calc(var(--zm-x) - 161.2vmax) calc(var(--zm-y) - 161.2vmax); }
  100% { -webkit-mask-size: 360vmax 360vmax, 324vmax 324vmax; mask-size: 360vmax 360vmax, 324vmax 324vmax;
    -webkit-mask-position: calc(var(--zm-x) - 180vmax) calc(var(--zm-y) - 180vmax), calc(var(--zm-x) - 162vmax) calc(var(--zm-y) - 162vmax); mask-position: calc(var(--zm-x) - 180vmax) calc(var(--zm-y) - 180vmax), calc(var(--zm-x) - 162vmax) calc(var(--zm-y) - 162vmax); }
}
@keyframes zm-nube1 {
  0% { -webkit-mask-size: 0vmax 0vmax; mask-size: 0vmax 0vmax;
    -webkit-mask-position: calc(var(--zm-x) - 0vmax) calc(var(--zm-y) - 0vmax); mask-position: calc(var(--zm-x) - 0vmax) calc(var(--zm-y) - 0vmax); }
  8.33% { -webkit-mask-size: 1.9vmax 1.9vmax; mask-size: 1.9vmax 1.9vmax;
    -webkit-mask-position: calc(var(--zm-x) - 1vmax) calc(var(--zm-y) - 1vmax); mask-position: calc(var(--zm-x) - 1vmax) calc(var(--zm-y) - 1vmax); }
  16.67% { -webkit-mask-size: 8.7vmax 8.7vmax; mask-size: 8.7vmax 8.7vmax;
    -webkit-mask-position: calc(var(--zm-x) - 4.3vmax) calc(var(--zm-y) - 4.3vmax); mask-position: calc(var(--zm-x) - 4.3vmax) calc(var(--zm-y) - 4.3vmax); }
  25% { -webkit-mask-size: 22.9vmax 22.9vmax; mask-size: 22.9vmax 22.9vmax;
    -webkit-mask-position: calc(var(--zm-x) - 11.5vmax) calc(var(--zm-y) - 11.5vmax); mask-position: calc(var(--zm-x) - 11.5vmax) calc(var(--zm-y) - 11.5vmax); }
  33.33% { -webkit-mask-size: 50.2vmax 50.2vmax; mask-size: 50.2vmax 50.2vmax;
    -webkit-mask-position: calc(var(--zm-x) - 25.1vmax) calc(var(--zm-y) - 25.1vmax); mask-position: calc(var(--zm-x) - 25.1vmax) calc(var(--zm-y) - 25.1vmax); }
  41.67% { -webkit-mask-size: 104.6vmax 104.6vmax; mask-size: 104.6vmax 104.6vmax;
    -webkit-mask-position: calc(var(--zm-x) - 52.3vmax) calc(var(--zm-y) - 52.3vmax); mask-position: calc(var(--zm-x) - 52.3vmax) calc(var(--zm-y) - 52.3vmax); }
  50% { -webkit-mask-size: 204vmax 204vmax; mask-size: 204vmax 204vmax;
    -webkit-mask-position: calc(var(--zm-x) - 102vmax) calc(var(--zm-y) - 102vmax); mask-position: calc(var(--zm-x) - 102vmax) calc(var(--zm-y) - 102vmax); }
  58.33% { -webkit-mask-size: 280.8vmax 280.8vmax; mask-size: 280.8vmax 280.8vmax;
    -webkit-mask-position: calc(var(--zm-x) - 140.4vmax) calc(var(--zm-y) - 140.4vmax); mask-position: calc(var(--zm-x) - 140.4vmax) calc(var(--zm-y) - 140.4vmax); }
  66.67% { -webkit-mask-size: 319.8vmax 319.8vmax; mask-size: 319.8vmax 319.8vmax;
    -webkit-mask-position: calc(var(--zm-x) - 159.9vmax) calc(var(--zm-y) - 159.9vmax); mask-position: calc(var(--zm-x) - 159.9vmax) calc(var(--zm-y) - 159.9vmax); }
  75% { -webkit-mask-size: 341vmax 341vmax; mask-size: 341vmax 341vmax;
    -webkit-mask-position: calc(var(--zm-x) - 170.5vmax) calc(var(--zm-y) - 170.5vmax); mask-position: calc(var(--zm-x) - 170.5vmax) calc(var(--zm-y) - 170.5vmax); }
  83.33% { -webkit-mask-size: 352.6vmax 352.6vmax; mask-size: 352.6vmax 352.6vmax;
    -webkit-mask-position: calc(var(--zm-x) - 176.3vmax) calc(var(--zm-y) - 176.3vmax); mask-position: calc(var(--zm-x) - 176.3vmax) calc(var(--zm-y) - 176.3vmax); }
  91.67% { -webkit-mask-size: 358.4vmax 358.4vmax; mask-size: 358.4vmax 358.4vmax;
    -webkit-mask-position: calc(var(--zm-x) - 179.2vmax) calc(var(--zm-y) - 179.2vmax); mask-position: calc(var(--zm-x) - 179.2vmax) calc(var(--zm-y) - 179.2vmax); }
  100% { -webkit-mask-size: 360vmax 360vmax; mask-size: 360vmax 360vmax;
    -webkit-mask-position: calc(var(--zm-x) - 180vmax) calc(var(--zm-y) - 180vmax); mask-position: calc(var(--zm-x) - 180vmax) calc(var(--zm-y) - 180vmax); }
}
/* nube:hasta */

/* Mientras dura el cambio, nada del sitio anima sus colores por su cuenta: la nube ya hace el cambio, y
   cientos de transiciones de color a la vez debajo de ella eran lo que trababa MXZONE. */
.zm-cambio-tema *, .zm-cambio-tema *::before, .zm-cambio-tema *::after { transition: none !important; }

.zm-cambio-tema::view-transition-old(root) { animation: none; }
.zm-cambio-tema::view-transition-new(root) {
  -webkit-mask-image: var(--zm-nube-a), var(--zm-nube-b);
  mask-image: var(--zm-nube-a), var(--zm-nube-b);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: zm-nube var(--zm-dur) linear both;
}
/* Equipos modestos (zm-liviano): una sola capa. Se ve igual de nube; los bultos no cambian de forma. */
.zm-liviano.zm-cambio-tema::view-transition-new(root) {
  -webkit-mask-image: var(--zm-nube-a);
  mask-image: var(--zm-nube-a);
  animation: zm-nube1 var(--zm-dur) linear both;
}
/* Opcional por sitio (html[data-zm-desenfoque]): lo viejo se nubla y lo nuevo entra enfocándose.
   Desenfocar la página entera es lo más caro: solo en equipos que YA demostraron que aguantan
   (zm-alta, lo pone el primer cambio de tema medido). Así ningún equipo se traba ni la primera vez. */
[data-zm-desenfoque].zm-alta.zm-cambio-tema:not(.zm-liviano)::view-transition-old(root) { animation: zm-nubla var(--zm-dur) var(--zm-curva) both; }
[data-zm-desenfoque].zm-alta.zm-cambio-tema:not(.zm-liviano)::view-transition-new(root) { animation: zm-nube var(--zm-dur) linear both, zm-enfoca .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes zm-nubla { to { filter: blur(6px) saturate(.9); } }
@keyframes zm-enfoca { from { filter: blur(10px); } }

/* El botón del tema: el sol gira y se vuelve luna al mismo tiempo que sale la nube. */
::view-transition-group(zm-tema-boton) { animation-duration: .6s; }
::view-transition-old(zm-tema-boton) { animation: zm-boton-sale .45s cubic-bezier(.5, 0, .75, 0) both; }
::view-transition-new(zm-tema-boton) { animation: zm-boton-entra .7s .12s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes zm-boton-sale { to { transform: rotate(120deg) scale(.4); opacity: 0; } }
@keyframes zm-boton-entra { from { transform: rotate(-120deg) scale(.4); opacity: 0; } }

/* Borde de luz en el frente de la nube: un aro ya pintado (zap-movimiento.js) que crece con la capa 1. */
.zm-borde { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; view-transition-name: zm-borde; background: rgba(255, 255, 255, .5); opacity: 0; }
.zm-borde--anda {
  opacity: 1;
  -webkit-mask-image: var(--zm-aro);
  mask-image: var(--zm-aro);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: zm-nube1 var(--zm-dur) linear both;
}
::view-transition-group(zm-borde) { animation: none; }
::view-transition-new(zm-borde) { animation: none; mix-blend-mode: soft-light; }

/* Sin transiciones de vista: los colores se funden en vez de saltar. */
.zm-funde, .zm-funde * { transition: background-color .5s, color .5s, border-color .5s, fill .5s !important; }

/* ---------- 2. Vuelo al carrito ---------- */
.zm-vuelo { position: fixed; z-index: 2147483001; width: 56px; height: 56px; pointer-events: none; will-change: transform; }
.zm-vuelo__foto { width: 100%; height: 100%; border-radius: 12px; background: #d9d9d9 center / cover no-repeat; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); will-change: transform, opacity; }
.zm-rebote { animation: zm-rebote .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes zm-rebote { 0% { scale: 1; } 30% { scale: 1.22; } 60% { scale: .94; } 100% { scale: 1; } }

/* ---------- 3. Botones que responden al tocarlos ----------
   Sin especificidad (:where): si el sitio ya define el suyo, gana el del sitio. «scale» y «translate»
   se suman al transform que ya tenga el botón, así que no lo mueven de lugar. */
:where(button, [role="button"], .boton, .btn, input[type="submit"]) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(button, [role="button"], .boton, .btn, input[type="submit"]):where(:active:not(:disabled)) { translate: 0 1px; scale: .985; transition: translate 60ms, scale 60ms; }

/* ---------- 4. Esqueletos de carga ---------- */
.zm-esqueleto { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, currentColor 4%, transparent); overflow: hidden; position: relative; }
.zm-esqueleto__foto { aspect-ratio: 1; border-radius: 8px; background: color-mix(in srgb, currentColor 8%, transparent); }
.zm-esqueleto__linea { height: 12px; border-radius: 6px; background: color-mix(in srgb, currentColor 8%, transparent); }
.zm-esqueleto__linea--corta { width: 55%; }
.zm-esqueleto::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, currentColor 7%, transparent) 50%, transparent 80%); animation: zm-brillo 1.4s ease-in-out infinite; }
@keyframes zm-brillo { to { transform: translateX(100%); } }
.zm-liviano .zm-esqueleto::after { animation-duration: 2.2s; }

/* ---------- 5. La foto viaja del catálogo a la ficha ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(zm-producto) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(zm-producto), ::view-transition-new(zm-producto) { height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .zm-rebote, .zm-esqueleto::after { animation: none; }
}