/* =========================================================================================================
   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: A29 (copiado con herramientas/copiar-piezas.mjs el 2026-10-25). */
: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; }

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

/* ---------- A29 · Lista con foto que se revela (.m-lista-foto data-m-modo="cortina|abanico|giro"; cada enlace con data-m-foto="url") ---------- */
.m-lista-foto { position: relative; }
.m-lista-foto .m-lf-capa { position: fixed; left: 0; top: 0; z-index: 30; width: var(--m-lf-ancho, 15rem); aspect-ratio: 4 / 5; pointer-events: none; transform: translate(-50%, -50%); }
.m-lista-foto .m-lf-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg, 1rem); box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, .45);
  transition: clip-path .5s var(--m-curva), transform .55s var(--m-muelle), opacity .3s ease; }
.m-lista-foto[data-m-modo="cortina"] .m-lf-capa img { clip-path: inset(0 0 100% 0 round var(--radius-lg, 1rem)); }
.m-lista-foto[data-m-modo="cortina"] .m-lf-capa.m-on img { clip-path: inset(0 0 0 0 round var(--radius-lg, 1rem)); }
.m-lista-foto[data-m-modo="abanico"] .m-lf-capa img { opacity: 0; transform: rotate(0deg) scale(.6); }
.m-lista-foto[data-m-modo="abanico"] .m-lf-capa.m-on img { opacity: 1; transform: rotate(calc((var(--k) - 1) * 8deg)) translateX(calc((var(--k) - 1) * 22%)) scale(1); transition-delay: calc(var(--k) * 40ms); }
.m-lista-foto[data-m-modo="giro"] .m-lf-capa img { opacity: 0; transform: perspective(40rem) rotateX(-75deg) translateY(30%); transform-origin: 50% 100%; }
.m-lista-foto[data-m-modo="giro"] .m-lf-capa.m-on img { opacity: 1; transform: none; }
.m-lista-foto:not([data-m-modo="abanico"]) .m-lf-capa img:not(:first-child) { display: none; }
@media (prefers-reduced-motion: reduce) { .m-lista-foto .m-lf-capa { display: none; } }

/* =========================================================================================================
   A30-A39 (25 oct 2026): ideas vistas en React Bits (reactbits.dev, MIT + Commons Clause) y Arc UI (uiarc.dev),
   con código propio en CSS y JS sin librerías. Mismas reglas que el resto: rem, colores de la marca, nada oculto
   sin JS y quieto con «reducir movimiento».
   ========================================================================================================= */

/* ===== 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 */