/* =========================================================================================================
   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: A30 · A21 (copiado con herramientas/copiar-piezas.mjs el 2026-11-03). */
: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; }

/* ---------- A21 · Cinta infinita que frena al pasar (.m-cinta > .m-cinta-pista con los elementos; data-m-vel, data-m-dir="izq|der|arriba|abajo") ---------- */
.m-cinta { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.m-cinta[data-m-dir="arriba"], .m-cinta[data-m-dir="abajo"] { -webkit-mask: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.m-cinta-pista { display: flex; width: max-content; gap: var(--m-hueco, 1rem); }
.m-cinta[data-m-dir="arriba"] .m-cinta-pista, .m-cinta[data-m-dir="abajo"] .m-cinta-pista { flex-direction: column; width: auto; }
.m-cinta-pista > * { flex: none; }

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

/* ---------- A30 · Letras de aeropuerto (data-m-paleta="ver|pasar" en un texto corto; fichas con los colores de la marca) ---------- */
[data-m-paleta] { display: inline-flex; flex-wrap: wrap; justify-content: inherit; gap: .12em 0; font-variant-numeric: tabular-nums; }
[data-m-paleta] .m-pal { display: inline-flex; gap: .06em; white-space: nowrap; }
[data-m-paleta] .m-p { position: relative; display: inline-block; min-width: .66em; padding: .08em .05em; text-align: center; line-height: 1.1;
  background: var(--m-paleta-fondo, var(--c-ink)); color: var(--m-paleta-texto, var(--c-bg)); border-radius: .14em; }
[data-m-paleta] .m-p::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--m-paleta-texto, var(--c-bg)) 22%, transparent); }
[data-m-paleta] .m-p.m-hueco { background: none; min-width: .3em; }
[data-m-paleta] .m-p.m-hueco::after { display: none; }
[data-m-paleta] .m-p.m-gira { animation: m-paleta .1s linear; }
@keyframes m-paleta { 50% { transform: perspective(10em) rotateX(80deg); } }
.m-paleta-limpia .m-p { background: none; color: inherit; }
.m-paleta-limpia .m-p::after { display: none; }

/* ===== Pantallas grandes (14 oct 2026; herramientas/pantallas-grandes.mjs) =====
   Hasta 1440 px de ancho la web es idéntica. Por encima, la letra raíz crece en proporción (letra, espacios y
   medidas van en rem) hasta el 150 % a 2840 px, y el contenido ocupa al menos el 70 % de la pantalla: en una
   pantalla 2K o 4K se ve como en un portátil, solo que más grande, en vez de quedar apretado en el centro. */
html:not(:has([data-login])) { font-size: clamp(100%, calc(100% + (100vw - 1440px) * .005714), 150%); } /* el panel (admin.html) no crece */