/* =========================================================================================================
   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: A21 · A25 · A24 (copiado con herramientas/copiar-piezas.mjs el 2026-10-17). */
: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; }

/* ---------- A24 · Píldora que se desliza (.m-pildora en un menú o grupo de botones) ---------- */
.m-pildora { position: relative; isolation: isolate; }
.m-pildora > .m-pildora-fondo { position: absolute; z-index: -1; left: 0; top: 0; border-radius: 62.4375rem; background: var(--m-pildora-color, color-mix(in srgb, var(--c-brand) 12%, transparent));
  opacity: 0; transition: transform .45s var(--m-curva), width .45s var(--m-curva), height .45s var(--m-curva), opacity .25s ease; pointer-events: none; }
.m-pildora.m-con-fondo > .m-pildora-fondo { opacity: 1; }

/* ---------- A25 · Pestañas con panel que se desliza ([data-m-pestanas]: role="tablist" + paneles .m-panel) ---------- */
[data-m-pestanas] [role="tablist"] { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; border-radius: 62.4375rem; background: color-mix(in srgb, var(--c-ink, #000) 6%, transparent); }
[data-m-pestanas] [role="tab"] { appearance: none; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; padding: .6rem 1.1rem; border-radius: 62.4375rem; cursor: pointer; min-height: 2.75rem; }
/* el color claro va con la píldora (.m-en-pildora), no con la pestaña elegida: al pasar el ratón por otra, la elegida
   vuelve a su color y la que tiene la píldora debajo se pone en claro. Sin JS, la elegida se marca en el color de la marca. */
[data-m-pestanas] [role="tab"][aria-selected="true"] { color: var(--c-brand); }
[data-m-pestanas] [role="tab"].m-en-pildora { color: var(--m-pestana-activa, var(--c-brand-ink, #fff)); transition: color .25s ease; }
[data-m-pestanas] .m-pildora-fondo { background: var(--c-brand); }
[data-m-pestanas] .m-paneles { display: grid; }
[data-m-pestanas] .m-panel { grid-area: 1 / 1; transition: opacity .45s ease, transform .55s var(--m-curva); }
[data-m-pestanas] .m-panel[hidden] { display: block !important; visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(calc(var(--m-sentido, 1) * 2rem)); }

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