/* =========================================================================================================
   Movimiento A6-A39 (16 y 25 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 · A13 · A14 · A20 · A35 · A38 (copiado con herramientas/copiar-piezas.mjs el 2026-10-31). */
: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; }

/* ---------- A13 · Dígitos que se deslizan (data-m-digitos: «17:30», «45 €», «4,9») ---------- */
[data-m-digitos] span { font-size: inherit; color: inherit; letter-spacing: inherit; }
[data-m-digitos] .m-col { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: top; line-height: 1.1; }
[data-m-digitos] .m-col > span { display: flex; flex-direction: column; transition: transform 1.4s cubic-bezier(.2, 1.15, .3, 1); transition-delay: calc(var(--i, 0) * 70ms); font-variant-numeric: tabular-nums; }
[data-m-digitos] .m-col > span > span { height: 1.1em; }

/* ---------- 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; } }

/* ---------- 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; }

/* ---------- Sin movimiento: todo quieto, visible y completo ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-m-texto] .m-t, [data-m-grupo] > *, .m-bucle > span, [data-m-digitos] .m-col > span, [data-m-magnetico], [data-m-inclina], .m-pildora > .m-pildora-fondo,
  [data-m-pestanas] .m-panel, .m-faq > summary::after, .m-abanico > *, .m-rueda .m-r > span { transition: none !important; }
  .js [data-m-texto]:not(.m-visto) .m-t, .js [data-m-grupo]:not(.m-visto) > * { opacity: 1; transform: none; filter: none; }
  .m-brillo { animation: none; color: inherit; background: none; }
  .m-sello .m-sello-aro, .m-estela::after, .m-halo::before { animation: none; }
  .m-estela::after { background: color-mix(in srgb, var(--m-estela-color, var(--c-brand)) 55%, transparent); }
  [data-m-magnetico], [data-m-inclina] { transform: none !important; }
}

/* ---------- A35 · Carta que pasa en cinta al pasar (<ul class="m-carta">; cada enlace con data-m-cinta="texto" y opcional data-m-foto="url") ---------- */
.m-carta { width: 100%; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.m-carta > li { position: relative; overflow: hidden; border-bottom: 1px solid var(--c-line); }
.m-carta > li > a { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem .25rem; color: inherit; text-decoration: none;
  font: 600 clamp(1.4rem, 3.2vw, 2.4rem)/1.1 var(--f-display, inherit); }
.m-carta > li > a small { font: 500 1rem/1 var(--f-body, inherit); color: var(--c-muted, inherit); white-space: nowrap; }
.m-cc-banda { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; overflow: hidden; pointer-events: none; transform: translateY(101%);
  background: var(--m-carta-fondo, var(--c-brand)); color: var(--m-carta-texto, var(--c-bg)); }
.m-cc-banda.m-desde-arriba { transform: translateY(-101%); }
.m-cc-banda.m-anima { transition: transform .45s var(--m-curva); }
.m-carta > li.m-sobre .m-cc-banda { transform: none; }
.m-cc-pista { display: flex; align-items: center; gap: 1.5rem; flex: none; padding-right: 1.5rem; white-space: nowrap; font: 600 clamp(1.2rem, 2.6vw, 2rem)/1 var(--f-display, inherit); animation: m-cc 9s linear infinite; }
.m-cc-pista img { height: 2.6rem; width: 4.2rem; object-fit: cover; border-radius: 999px; }
@keyframes m-cc { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .m-cc-banda { display: none; } }

/* ---------- A38 · Degradado con grano (class="m-grano" en una sección; manchas de la marca que se mueven muy despacio) ---------- */
.m-grano { position: relative; isolation: isolate; overflow: hidden; }
.m-grano::before { content: ""; position: absolute; inset: -25%; z-index: -2; filter: blur(2rem); animation: m-grano 24s ease-in-out infinite alternate;
  background: radial-gradient(40% 50% at 25% 35%, color-mix(in srgb, var(--m-grano-a, var(--c-brand)) 70%, transparent), transparent 70%),
    radial-gradient(35% 45% at 75% 60%, color-mix(in srgb, var(--m-grano-b, var(--c-accent, var(--c-brand))) 60%, transparent), transparent 70%),
    radial-gradient(30% 40% at 55% 20%, color-mix(in srgb, var(--m-grano-c, var(--c-surface)) 80%, transparent), transparent 70%); }
.m-grano::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--m-grano-fuerza, .16); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
@keyframes m-grano { 50% { transform: translate(4%, -3%) rotate(6deg) scale(1.05); } to { transform: translate(-3%, 4%) rotate(-4deg) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .m-grano::before { animation: none; } }