/* =========================================================================================================
   Movimiento A6-A29 (16 oct 2026) · biblioteca de efectos para las webs de citas
   Traducción a CSS y JS sin librerías (compatible con la CSP de la plantilla) de las ideas de Motion Primitives
   (motion-primitives.com, licencia MIT, © 2024 ibelick) y de patrones vistos en HorizonX (horizonx.so, solo
   como referencia visual: código propio). Uso y lista completa en LEEME.md y en estilos/CATALOGO.md (apartado A).

   Reglas: todo en rem (crece con las pantallas grandes), colores de la marca (--c-brand, --c-accent, --c-ink,
   --c-bg, --c-surface, --c-line), nada se oculta si no hay JS (las clases de espera cuelgan de html.js) y con
   «reducir movimiento» todo se ve quieto y completo.
   ========================================================================================================= */
/* Esta web lleva: A6 · A20 · A14 · A15 (copiado con herramientas/copiar-piezas.mjs el 2026-10-16). */
:root { --m-curva: cubic-bezier(.2, .7, .1, 1); --m-muelle: cubic-bezier(.34, 1.56, .64, 1); --m-dur: .8s; }
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- A6 · Texto que aparece (data-m-texto="desenfoque|subir-desenfoque|subir|escala|fundido", data-m-por="palabra|letra|linea") ---------- */
[data-m-texto] .m-t { display: inline-block; white-space: pre; transition: opacity .6s ease, transform var(--m-dur) var(--m-curva), filter .7s ease;
  transition-delay: calc(var(--m-retraso, 0ms) + var(--i, 0) * var(--m-paso, 60ms)); }
[data-m-texto][data-m-por="linea"] .m-t { display: block; }
.js [data-m-texto]:not(.m-visto) .m-t { opacity: 0; }
.js [data-m-texto="desenfoque"]:not(.m-visto) .m-t { filter: blur(.6rem); }
.js [data-m-texto="subir-desenfoque"]:not(.m-visto) .m-t { filter: blur(.6rem); transform: translateY(.45em); }
.js [data-m-texto="subir"]:not(.m-visto) .m-t { transform: translateY(.6em); }
.js [data-m-texto="escala"]:not(.m-visto) .m-t { transform: scale(.4); }
[data-m-texto="escala"] .m-t { transition-timing-function: ease, var(--m-muelle), ease; }

/* ---------- A14 · Borde con estela (.m-estela en una tarjeta o botón) ---------- */
@property --m-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.m-estela { position: relative; isolation: isolate; }
.m-estela::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--m-estela-grosor, 2px); pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--m-ang), transparent 0 72%, color-mix(in srgb, var(--m-estela-color, var(--c-brand)) 35%, transparent) 84%, var(--m-estela-color, var(--c-brand)) 94%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: m-estela var(--m-estela-dur, 4.5s) linear infinite; }
@keyframes m-estela { to { --m-ang: 360deg; } }

/* ---------- A15 · Halo de color detrás (.m-halo; data-m-halo="gira|respira") ---------- */
.m-halo { position: relative; isolation: isolate; }
.m-halo::before { content: ""; position: absolute; inset: -12%; z-index: -1; border-radius: inherit; pointer-events: none; filter: blur(var(--m-halo-blur, 2.2rem)); opacity: .55;
  background: conic-gradient(from var(--m-ang), var(--m-halo-1, var(--c-brand)), var(--m-halo-2, var(--c-accent)), var(--m-halo-3, var(--c-brand)), var(--m-halo-1, var(--c-brand)));
  animation: m-estela var(--m-halo-dur, 9s) linear infinite; }
.m-halo[data-m-halo="respira"]::before { animation: m-respira 5s ease-in-out infinite alternate; }
@keyframes m-respira { from { transform: scale(.94); opacity: .35; } to { transform: scale(1.06); opacity: .65; } }

/* ---------- A20 · Aparición escalonada (data-m-grupo="subir|desenfoque-subir|escala|zoom|girar|fundido" en el contenedor) ---------- */
[data-m-grupo] > * { transition: opacity .7s ease, transform var(--m-dur) var(--m-curva), filter .7s ease; transition-delay: calc(var(--m-retraso, 0ms) + var(--i, 0) * var(--m-paso, 90ms)); }
.js [data-m-grupo]:not(.m-visto) > * { opacity: 0; }
.js [data-m-grupo="subir"]:not(.m-visto) > * { transform: translateY(1.5rem); }
.js [data-m-grupo="desenfoque-subir"]:not(.m-visto) > * { transform: translateY(1.25rem); filter: blur(.4rem); }
.js [data-m-grupo="escala"]:not(.m-visto) > * { transform: scale(.88); }
.js [data-m-grupo="zoom"]:not(.m-visto) > * { transform: scale(.6); }
[data-m-grupo="zoom"] > * { transition-timing-function: ease, var(--m-muelle), ease; }
.js [data-m-grupo="girar"]:not(.m-visto) > * { transform: perspective(40rem) rotateX(-70deg); transform-origin: 50% 0; }