/* ==========================================================================
   Movimiento de la web (auditoría por módulos del 08/11/2026, circulolaser_web__mov_*).
   Tiempos comunes: toque 90 ms, entradas 240 ms ease-out, cascadas 50-60 ms.
   Todo lo que se mueve vive dentro de .mov-on, que pone un script del <head> sólo si la
   persona NO pidió «Reducir movimiento». Sin .mov-on la página queda igual, sin animar.
   Nada se esconde por CSS solo: si no corre ninguna animación, todo se ve como siempre.
   ========================================================================== */
:root {
  --mov-toque: 90ms;
  --mov-suelta: 160ms;
  --mov-base: 240ms;
  --mov-paso: 50ms;
  --mov-sale: 150ms;
  --mov-entrar: cubic-bezier(.16, 1, .3, 1);
  --mov-salir: cubic-bezier(.4, 0, 1, 1);
  --mov-resorte: cubic-bezier(.34, 1.56, .64, 1);
  --mov-rojo: #B5121B;
}

/* --- Entrada en cascada ------------------------------------------------------
   .mov-cascada con style="--mov-i:N" entra N pasos después del primero.
   --mov-dy / --mov-dx: desde dónde entra; --mov-esc: desde qué tamaño (1 = el suyo);
   --mov-demora: espera antes del primero. */
@keyframes mov-entra {
  from { opacity: 0; transform: translate(var(--mov-dx, 0), var(--mov-dy, 12px)) scale(var(--mov-esc, 1)); }
  to { opacity: 1; transform: none; }
}
.mov-on .mov-cascada,
.mov-on .mov-entra {
  animation: mov-entra var(--mov-base) var(--mov-entrar) both;
  animation-delay: calc(var(--mov-demora, 0ms) + var(--mov-i, 0) * var(--mov-paso));
}

/* --- Clínica: botones de acción de la sede (h1 A) -----------------------------
   Se hunden al tocar y muestran «Abriendo…» mientras se abre la otra aplicación. */
.mov-on [data-abriendo] { transition: transform var(--mov-suelta) var(--mov-entrar), background-color .15s, color .15s; }
.mov-on [data-abriendo]:active { transform: scale(.95); transition: transform var(--mov-toque) ease-out; }
.mov-rueda {
  display: inline-block;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(127, 127, 127, .3);
  border-top-color: currentColor;
}
.cl-btn-wa .mov-rueda { width: 18px; height: 18px; margin-right: .5rem; }
.mov-on .mov-rueda { animation: mov-gira .8s linear infinite; }
html:not(.mov-on) .mov-rueda { display: none; }
@keyframes mov-gira { to { transform: rotate(360deg); } }

/* --- Clínica: un solo latido del WhatsApp al abrir la sede (h2 B) ------------ */
@keyframes mov-late {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(21, 128, 61, .55); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(21, 128, 61, 0); }
}
.mov-on .mov-late { animation: mov-late 700ms var(--mov-resorte); }

/* --- Clínica: fotos de la galería de equipos (h3 B) --------------------------- */
.mov-on .cl-foto-funde { transition: opacity 260ms ease-out; }
.mov-on .mov-foto-espera { opacity: 0; }
.mov-on .mov-galeria-espera { opacity: 0; }

/* --- Tarjetas que llevan a otra página (h4 A) --------------------------------
   Se hunden al tocar y quedan con borde rojo mientras carga la página nueva. */
.mov-tarjeta { position: relative; }
.mov-tarjeta-enlace::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mov-on .mov-tarjeta { transition: transform var(--mov-suelta) var(--mov-entrar), box-shadow var(--mov-suelta) ease-out, border-color .15s, background-color .15s; }
.mov-on .mov-tarjeta:active { transform: scale(.98); transition: transform var(--mov-toque) ease-out; }
.mov-tarjeta.is-elegida { box-shadow: 0 0 0 3px var(--mov-rojo), 0 10px 15px -3px rgba(0, 0, 0, .1); }

/* «Reducir movimiento»: aunque algo haya quedado con .mov-on, no se anima nada. */
@media (prefers-reduced-motion: reduce) {
  .mov-on .mov-cascada, .mov-on .mov-entra, .mov-on .mov-late, .mov-on .mov-rueda { animation: none; }
  .mov-on [data-abriendo], .mov-on [data-abriendo]:active,
  .mov-on .mov-tarjeta, .mov-on .mov-tarjeta:active { transform: none; transition: none; }
  .mov-on .cl-foto-funde { transition: none; }
  .mov-on .mov-foto-espera, .mov-on .mov-galeria-espera { opacity: 1; }
}

/* ==========================================================================
   General (circulolaser_web__mov_general): lo que comparten todas las páginas.
   ========================================================================== */

/* --- g6 B: pasar de página (View Transitions entre documentos) -----------------
   Chrome/Edge 126+ y Safari 18.2+; en los demás, como siempre. Escritorio: fundido corto.
   Celular: la nueva entra de costado; con «Volver…» o el atrás, al revés (html.vt-atras, lo pone
   el script del <head>). El encabezado rojo queda quieto. Con «Reducir movimiento» no hay transición. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  #cl-encabezado { view-transition-name: cl-encabezado; }
  ::view-transition-group(cl-encabezado),
  ::view-transition-old(cl-encabezado),
  ::view-transition-new(cl-encabezado) { animation: none; }
  ::view-transition-old(root) { animation: 140ms var(--mov-salir) both mov-vt-sale; }
  ::view-transition-new(root) { animation: 220ms var(--mov-entrar) both mov-vt-entra; }
  @media (max-width: 1023px) {
    ::view-transition-old(root) { animation: 300ms var(--mov-entrar) both mov-vt-sale-izq; }
    ::view-transition-new(root) { animation: 300ms var(--mov-entrar) both mov-vt-entra-der; }
    html.vt-atras::view-transition-old(root) { animation-name: mov-vt-sale-der; z-index: 1; }
    html.vt-atras::view-transition-new(root) { animation-name: mov-vt-entra-izq; }
  }
}
@keyframes mov-vt-sale { to { opacity: 0; } }
@keyframes mov-vt-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes mov-vt-sale-izq { to { transform: translateX(-28%); opacity: .6; } }
@keyframes mov-vt-entra-der { from { transform: translateX(100%); } }
@keyframes mov-vt-sale-der { to { transform: translateX(100%); } }
@keyframes mov-vt-entra-izq { from { transform: translateX(-28%); opacity: .6; } }

/* --- g1 B: menú del celular ---------------------------------------------------
   Baja 8 px con fundido (240 ms) y se va en 150 ms; ☰/✕ entra girando; las opciones en cascada
   (site.js) y un velo oscuro sobre la página que lo cierra al tocarlo. */
.mov-on #mobile-menu { transition: opacity var(--mov-base) var(--mov-entrar), transform var(--mov-base) var(--mov-entrar); }
.mov-on #mobile-menu.mov-cerrado { opacity: 0; transform: translateY(-8px); }
.mov-on #mobile-menu.mov-saliendo { transition-duration: var(--mov-sale); transition-timing-function: var(--mov-salir); }
@keyframes mov-icono-gira { from { transform: rotate(-90deg) scale(.6); opacity: .2; } }
.mov-on .mov-icono-gira { animation: mov-icono-gira 220ms var(--mov-entrar); }
.mov-velo {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--cl-header-h, 64px); z-index: 45;
  background: rgba(38, 5, 8, .38); opacity: 0; visibility: hidden;
}
.mov-velo.ver { opacity: 1; visibility: visible; }
.mov-on .mov-velo { transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
.mov-on .mov-velo.ver { transition: opacity 200ms ease-out, visibility 0s; }
@media (min-width: 1024px) { .mov-velo { display: none; } }

/* d5: con el menú abierto, el botón redondo (y la barra de las fichas) no tapan «Pedir consulta». */
.cl-menu-abierto .cl-wa-flotante,
.cl-menu-abierto .cl-barra-ficha { opacity: 0; visibility: hidden; pointer-events: none; }

/* --- Flechas de los desplegables (d6) -----------------------------------------
   .mov-flecha gira con aria-expanded (lo pone el JS); sin JS, con [open] como antes. */
details[open] > summary > .mov-flecha,
[aria-expanded="true"] > .mov-flecha { transform: rotate(180deg); }
details[open] > summary[aria-expanded="false"] > .mov-flecha { transform: none; }
.mov-on .mov-flecha { transition: transform 200ms var(--mov-entrar); }

/* --- g2 B: «Procedimientos» de escritorio ---------------------------------------
   Baja 6 px desde el botón (180 ms) y se va en 120 ms; la flecha gira; una franja sigue al mouse. */
.mov-on #cl-encabezado nav .group > div.absolute {
  transform: translateY(-6px);
  transition: opacity 120ms var(--mov-salir), transform 120ms var(--mov-salir), visibility 0s linear 120ms;
}
.mov-on #cl-encabezado nav .group:hover > div.absolute,
.mov-on #cl-encabezado nav .group:focus-within > div.absolute {
  transform: none;
  transition: opacity 180ms var(--mov-entrar), transform 180ms var(--mov-entrar), visibility 0s;
}
#cl-encabezado nav .group:hover > button > .mov-flecha,
#cl-encabezado nav .group:focus-within > button > .mov-flecha { transform: rotate(180deg); }
.mov-dd-host { position: relative; }
.mov-dd-host > a { position: relative; z-index: 1; }
.mov-dd-host > a:hover { background: transparent; }
.mov-dd-pildora {
  position: absolute; left: 8px; right: 8px; top: 0; border-radius: 8px;
  background: #fdf1f1; box-shadow: inset 3px 0 0 var(--mov-rojo); opacity: 0; pointer-events: none;
  transition: transform 220ms var(--mov-resorte), height 220ms var(--mov-resorte), opacity 150ms;
}
.mov-dd-pildora.ver { opacity: 1; }

/* --- g4 B: los botones se hunden al tocarlos (94 %, 90 ms) y vuelven con un rebote mínimo.
   .mov-hunde lo pone el JS a los enlaces de WhatsApp con forma de botón. Los [data-abriendo]
   (clínica) siguen con lo suyo. «Abriendo WhatsApp…»: el texto del botón o un cartelito verde. */
.mov-on :is(.cl-wa-flotante, .cl-btn-wa, .cl-btn-wa-doble, .cl-btn-secundario, .mov-hunde, #mobile-menu-toggle, #cl-encabezado nav > a):not([data-abriendo]):active {
  transform: scale(.94); transition: transform var(--mov-toque) ease-out;
}
.mov-on :is(.cl-btn-wa, .cl-btn-wa-doble, .cl-btn-secundario, .mov-hunde, #mobile-menu-toggle):not([data-abriendo]) {
  transition: transform 260ms var(--mov-resorte), background-color .15s, color .15s, border-color .15s;
}
.mov-on .cl-wa-flotante { transition: transform 260ms var(--mov-resorte), box-shadow .15s ease, opacity 120ms ease-out, visibility 0s; }
.mov-on .cl-menu-abierto .cl-wa-flotante { transition: opacity 120ms ease-out, visibility 0s linear 120ms; }
.mov-on .mov-txt-cambia { display: inline-block; --mov-dy: 6px; animation: mov-entra 200ms var(--mov-entrar); }
.mov-wa-etq {
  position: fixed; z-index: 61; height: 44px; display: flex; align-items: center; padding: 0 16px;
  border-radius: 22px; background: #15803d; color: #fff; font-weight: 700; font-size: 16px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2); pointer-events: none; transform-origin: right center;
}
.mov-on .mov-wa-etq { animation: mov-etq-entra 220ms var(--mov-entrar) both; }
.mov-on .mov-wa-etq.sale { animation: mov-etq-sale 150ms var(--mov-salir) forwards; }
@keyframes mov-etq-entra { from { opacity: 0; transform: translateX(16px) scaleX(.6); } }
@keyframes mov-etq-sale { to { opacity: 0; transform: translateX(12px); } }

/* --- g5 A: la barra fija de las fichas sube recién cuando el botón de arriba sale de la vista. */
.cl-barra-ficha.mov-escondida { transform: translateY(110%); visibility: hidden; }
.mov-on .cl-barra-ficha { transition: transform var(--mov-base) var(--mov-entrar), opacity 120ms ease-out, visibility 0s; }
.mov-on .cl-barra-ficha.mov-escondida { transition: transform 160ms var(--mov-salir), opacity 120ms ease-out, visibility 0s linear 160ms; }
.mov-on .cl-menu-abierto .cl-barra-ficha { transition: opacity 120ms ease-out, visibility 0s linear 120ms; }

/* --- Profesionales (circulolaser_web__mov_profesionales) -----------------------
   h3 A: [data-mov-aparece] entra entero una vez (sube 14 px, 280 ms). El JS sólo esconde lo que al
   cargar está debajo de la pantalla y lo muestra al llegar; sin JS o con «Reducir movimiento», nada.
   h2 B: .mov-fantasma es la copia quieta de lo que se va al buscar, que se apaga en 140 ms. */
.mov-on .mov-aparece-espera { opacity: 0; transform: translateY(14px); }
.mov-on .mov-aparece-va { transition: opacity 280ms var(--mov-entrar), transform 280ms var(--mov-entrar); }
.mov-fantasma { position: fixed; margin: 0; z-index: 20; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .mov-on .mov-aparece-espera { opacity: 1; transform: none; }
  .mov-fantasma { display: none; }
}

/* --- d4: foco visible con teclado, el mismo anillo en todo el sitio ------------- */
:is(a, button, summary):focus-visible { outline: 3px solid var(--mov-rojo); outline-offset: 2px; }
:is(#cl-encabezado, footer) :is(a, button):focus-visible { outline-color: #fff; }
#cl-encabezado :is(#mobile-menu, nav .group > div) :is(a, button):focus-visible { outline-color: var(--mov-rojo); }

/* ==========================================================================
   Convenios (circulolaser_web__mov_convenios)
   ========================================================================== */

/* --- h1 A: llegando desde la portada, el buscador se marca en rojo un rato ------- */
#cl-buscar-institucion.cl-buscar-marcado { border-color: var(--mov-rojo); }
.mov-on #cl-buscar-institucion { transition: border-color 200ms ease-out; }

/* --- El botón redondo de WhatsApp se corre mientras el buscador pasa por debajo (celular).
   Sólo opacidad: el lugar del botón no cambia (site.js lo mide). Sin movimiento, al instante. */
.cl-wa-flotante.cl-wa-corrido { opacity: 0; visibility: hidden; pointer-events: none; }
.mov-on .cl-wa-flotante.cl-wa-corrido { transition: opacity 120ms ease-out, visibility 0s linear 120ms; }

/* --- h4 B: tocar una institución ---------------------------------------------------
   Se hunde a 98 % (90 ms) con fondo rosado y borde rojo; al soltar queda marcada, la flecha avanza
   4 px y una barrita roja se llena hasta 85 % en 1,8 s mientras carga la ficha (no da vueltas). */
.mov-fila-yendo { position: relative; overflow: hidden; }
.mov-fila-yendo:active,
.mov-fila-yendo.is-yendo { background-color: #fdf1f1; border-color: var(--mov-rojo); }
.mov-on .mov-fila-yendo { transition: transform var(--mov-suelta) var(--mov-entrar), background-color .15s, border-color .15s; }
.mov-on .mov-fila-yendo:active { transform: scale(.98); transition: transform var(--mov-toque) ease-out, background-color var(--mov-toque), border-color var(--mov-toque); }
.mov-fila-yendo.is-yendo .mov-avanza { transform: translateX(4px); }
.mov-on .mov-fila-yendo .mov-avanza { transition: transform 200ms var(--mov-entrar); }
.mov-barrita {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mov-rojo);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
.mov-barrita.llena { transform: scaleX(.85); transition: transform 1800ms cubic-bezier(.2, .7, .3, 1); }
html:not(.mov-on) .mov-barrita { display: none; }

/* --- h5 A: cada logo de la lista se funde al llegar (200 ms) ----------------------- */
.mov-on .cl-logo-funde { transition: opacity 200ms ease-out; }

/* --- h6 B: el logo «viaja» de la fila a la ficha (y de vuelta con «Volver»).
   El nombre cl-inst-logo lo pone el script del <head> de esas páginas sólo en el logo tocado, y sólo
   si el navegador hace la transición entre páginas (g6). Sin soporte o con «Reducir movimiento»,
   el logo de la ficha simplemente está. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(cl-inst-logo) { animation-duration: 380ms; animation-timing-function: var(--mov-entrar); }
  ::view-transition-old(cl-inst-logo),
  ::view-transition-new(cl-inst-logo) { animation-duration: 380ms; height: 100%; object-fit: contain; }
}

/* ==========================================================================
   Noticias (circulolaser_web__mov_noticias): listado y nota.
   d5: entradas 260 ms, toque 90 ms, cascada 50 ms, una vez por visita. Lo que espera para entrar
   (.mov-espera) lo marca el JS ya corriendo: si el JS no carga, todo se ve como siempre.
   ========================================================================== */
.mov-on .mov-espera { opacity: 0; }

/* h1 B: la nota sube 16 px y adentro llegan foto, fecha y título, de a 50 ms (--mov-demora: su turno en el grupo) */
.mov-on .cl-nota-tarjeta.mov-nota-entra {
  --mov-dy: 16px;
  animation: mov-entra 260ms var(--mov-entrar) both;
  animation-delay: var(--mov-demora, 0ms);
}
.mov-on .mov-nota-entra :is(.cl-nota-foto, .cl-nota-fecha, .cl-nota-titulo) {
  --mov-dy: 8px;
  animation: mov-entra 260ms var(--mov-entrar) both;
  animation-delay: calc(var(--mov-demora, 0ms) + var(--mov-j) * var(--mov-paso));
}
.cl-nota-foto { --mov-j: 1; }
.cl-nota-fecha { --mov-j: 2; }
.cl-nota-titulo { --mov-j: 3; }

/* h3 B: se hunde 2 % mientras el dedo está apoyado y la flecha de «Leer noticia» avanza 6 px */
.mov-on .cl-nota-tarjeta { transition: transform var(--mov-suelta) var(--mov-entrar), background-color var(--mov-suelta) ease-out; }
.mov-on .cl-nota-tarjeta:active { transform: scale(.98); transition: transform var(--mov-toque) ease-out, background-color var(--mov-toque) ease-out; }
.mov-on .cl-nota-flecha { transition: transform var(--mov-suelta) var(--mov-entrar); }
.mov-on .cl-nota-tarjeta:active .cl-nota-flecha { transform: translateX(6px); transition-duration: var(--mov-toque); }
@media (hover: hover) { .mov-on .cl-nota-tarjeta:hover .cl-nota-flecha { transform: translateX(6px); } }

/* h2 A: «Ver más notas» se hunde al tocarlo */
.mov-on .cl-ver-mas { transition: transform var(--mov-suelta) var(--mov-entrar), background-color .15s; }
.mov-on .cl-ver-mas:active { transform: scale(.98); transition: transform var(--mov-toque) ease-out; }

/* h4 A: al soltar, la foto se acomoda en 280 ms (mientras el dedo arrastra, sin transición: site.js) */
.mov-on .cl-carousel-track { transition: transform 280ms var(--mov-entrar); }
.mov-on .cl-carousel-track.mov-arrastra { transition: none; }
@media (hover: hover) { .mov-on .cl-carousel-btn:hover { transform: translateY(-50%) scale(1.1); } }

/* h5 B: «¿Interesado?» entra suave y «Pedir cita ahora» late una vez, con un aro blanco que se abre */
.mov-on .cl-interesado.mov-interesado-entra { --mov-dy: 16px; animation: mov-entra 260ms var(--mov-entrar) both; }
@keyframes mov-pulso-cita {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); }
  35% { transform: scale(1.04); }
  100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}
.mov-on .mov-pulso-cita { animation: mov-pulso-cita 650ms var(--mov-entrar); }

@media (prefers-reduced-motion: reduce) {
  .mov-on .mov-espera { opacity: 1; }
  .mov-on .mov-nota-entra, .mov-on .mov-nota-entra *, .mov-on .mov-interesado-entra, .mov-on .mov-pulso-cita { animation: none; }
  .mov-on .cl-nota-tarjeta:active, .mov-on .cl-nota-tarjeta:active .cl-nota-flecha, .mov-on .cl-ver-mas:active { transform: none; }
}

/* --- d2: «Reducir movimiento» en toda la web: todo cambia al instante ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Servicios (circulolaser_web__mov_servicios): índice, listados y fichas.
   ========================================================================== */

/* --- h1 A: el título al que se saltó con el índice se ilumina 1,1 s (MOV.destello) -- */
@keyframes mov-destello {
  from { background-color: var(--mov-destello, rgba(181, 18, 27, .16)); box-shadow: 0 0 0 8px var(--mov-destello, rgba(181, 18, 27, .16)); }
  to { background-color: transparent; box-shadow: 0 0 0 8px transparent; }
}
.mov-on .mov-destello { border-radius: 6px; animation: mov-destello 1.1s ease-out; }
/* El botón del índice se hunde al tocarlo (96 %, 90 ms) y se marca en rojo. */
.mov-on [data-mov-indice] a { transition: transform var(--mov-suelta) var(--mov-entrar), border-color .15s, color .15s; }
.mov-on [data-mov-indice] a:active { transform: scale(.96); border-color: var(--mov-rojo); color: var(--mov-rojo); transition: transform var(--mov-toque) ease-out; }

/* --- h2 A: tarjetas y filas de los listados (.mov-tarjeta, ya común) -----------------
   Elegida: borde rojo y fondo rosado suave hasta que cambia la página. */
.mov-tarjeta-marca.is-elegida { border-color: var(--mov-rojo); background-color: #fff5f5; box-shadow: inset 0 0 0 1px var(--mov-rojo); }
.mov-fila-marca.is-elegida { border-bottom-color: var(--mov-rojo); background-color: #fff5f5; box-shadow: -12px 0 0 #fff5f5, 12px 0 0 #fff5f5; }
.mov-fila-marca.is-elegida .text-slate-900 { color: var(--mov-rojo); }

/* --- h3 A: [data-mov-al-bajar] las tarjetas de abajo entran al llegar a la pantalla ---
   El estado «por entrar» lo pone el JS (nunca el CSS solo) y sólo a las que están debajo de la
   pantalla al cargar: lo que se ve al llegar no cambia ni se demora. */
.mov-on .mov-por-entrar { opacity: 0; transform: translateY(14px); }
@media print { .mov-on .mov-por-entrar { opacity: 1; transform: none; } }

/* --- h4 A: fila de secciones, la píldora roja viaja a la tocada (MOV.pildora) -------- */
.mov-pildora-host { position: relative; isolation: isolate; }
.mov-pildora {
  position: absolute; left: 0; top: 0; z-index: -1; border-radius: 999px; background: var(--mov-rojo); pointer-events: none;
  transition: transform 250ms var(--mov-entrar), width 250ms var(--mov-entrar), opacity 150ms ease-out;
}
.mov-pildora.mov-sin-marca { opacity: 0; }
.mov-pildora-host.mov-listo > a { background-color: transparent !important; }
.mov-pildora-host.mov-listo > a[aria-current]:not(.mov-pildora-activo) { color: #334155 !important; border-color: #cbd5e1 !important; }
.mov-pildora-host.mov-listo > a.mov-pildora-activo { color: #fff !important; border-color: var(--mov-rojo) !important; }
/* d2: degradé en el borde derecho mientras la fila sigue (lo saca el JS al llegar al final). */
[data-mov-secciones].mov-sigue {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

/* --- d4: sin el recuadro gris del toque donde ya hay señal propia --------------------- */
.mov-tarjeta, [data-mov-secciones] > a, [data-mov-indice] a { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .mov-on .mov-destello { animation: none; }
  .mov-on .mov-por-entrar { opacity: 1; transform: none; }
  .mov-on [data-mov-indice] a:active { transform: none; }
}


/* ==========================================================================
   Inicio (circulolaser_web__mov_inicio): la portada.
   ========================================================================== */

/* --- h1 A: una luz cruza «Pedir consulta» una sola vez, al segundo de cargar (800 ms).
   No esconde ni demora nada: es un ::after encima del botón. Sin .mov-on no existe. */
.mov-on .mov-brillo { position: relative; overflow: hidden; }
.mov-on .mov-brillo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .5) 50%, transparent 75%);
  transform: translateX(-130%);
  animation: mov-brillo 800ms var(--mov-entrar) 1000ms both;
}
@keyframes mov-brillo { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

/* --- h2 B: el tema tocado se pinta, aparece una flecha y una rayita roja avanza mientras se abre
   la página. .mov-tema / .is-tocado los maneja movimiento.js (se saca al volver con «atrás»).
   Pintarse no es movimiento: con «Reducir movimiento» queda igual, sin animar. */
.mov-tema { position: relative; }
.mov-tema-flecha { display: none; }
.mov-tema.is-tocado .mov-tema-flecha { display: inline-flex; margin-left: 6px; }
.mov-tema-barra {
  position: absolute; left: 8px; right: 8px; bottom: 5px; height: 3px; border-radius: 2px;
  background: var(--mov-rojo); transform-origin: left center; transform: scaleX(0); opacity: 0; pointer-events: none;
}
.mov-tema.is-tocado .mov-tema-barra { opacity: 1; transform: scaleX(.92); }
.mov-on .mov-tema.is-tocado .mov-tema-barra { transition: transform 1600ms cubic-bezier(.2, .6, .3, 1); }
.mov-on .mov-tema.is-tocado .mov-tema-flecha { --mov-dx: -6px; --mov-dy: 0px; animation: mov-entra 220ms var(--mov-entrar) both; }
.mov-on .mov-tema:active { transform: scale(.97); transition: transform var(--mov-toque) ease-out; }
.mov-on .mov-tema { transition: transform 200ms var(--mov-resorte), background-color 90ms, color 90ms, border-color 90ms; }
/* Primer pantallazo: blanco con letra bordó (como el pasar del mouse en la computadora). */
.cl-accesos > a.mov-tema.is-tocado { background-color: #fff; color: #260508; border-color: #fff; }
/* «¿Qué estás buscando?»: borde rojo, el título en rojo y la flecha corre 4 px. */
.cl-temas > a.mov-tema.is-tocado { border-color: var(--mov-rojo); }
.cl-temas > a.mov-tema.is-tocado .group-hover\:text-primary { color: var(--mov-rojo); }
.mov-tema-corre { transition: transform 220ms var(--mov-entrar); }
.mov-tema.is-tocado .mov-tema-corre { transform: translateX(4px); }

/* --- h3 B: tiras. La flecha se pinta de rojo al apretarla ([data-mov-pulsa], 90 ms) y una barrita
   de 4 px muestra qué parte de la tira se ve (la mueve site.js con la flecha y con el dedo). */
[data-mov-pulsa].mov-pulsando, [data-mov-pulsa].mov-pulsando:hover { background-color: var(--mov-rojo); color: #fff; }
.mov-on [data-mov-pulsa].mov-pulsando { transform: scale(.9); transition: transform var(--mov-toque) ease-out, background-color var(--mov-toque), color var(--mov-toque); }
.mov-on [data-mov-pulsa] { transition: transform 220ms var(--mov-resorte), background-color .15s, color .15s; }
.cl-tira-riel { position: relative; height: 4px; max-width: 220px; margin: 6px auto 4px; border-radius: 2px; background: #e2e8f0; overflow: hidden; }
.cl-tira-riel > i { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; border-radius: 2px; background: var(--mov-rojo); }

/* --- h4 A: los logos de convenios esperan (sólo con JS y si están debajo de la pantalla al cargar)
   y entran en cascada una sola vez. Lo pone movimiento.js en [data-mov-entra-al-ver]. */
.mov-on .mov-espera-ver { opacity: 0; }

/* --- h5 B: buscador de convenios. Mientras se escribe, la grilla se funde (160 ms) y entran
   las que coinciden en cascada (lo maneja site.js). */
.mov-on .cl-conv-grilla { transition: opacity 160ms ease-in; }
.mov-on .cl-conv-grilla.mov-conv-sale { opacity: 0; }

/* --- h6 B: el video no se pone negro. La foto queda; el botón pasa a un círculo que se llena con
   lo que va cargando y, cuando el video arranca, el video aparece con un fundido de 260 ms. */
.cl-video-capa { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.cl-video-capa.ver { opacity: 1; }
.mov-on .cl-video-capa { transition: opacity 260ms ease-out; }
#cl-video-boton.cl-video-cargando {
  width: 56px; height: 56px; min-height: 0; padding: 0; gap: 0; justify-content: center; border-radius: 50%; cursor: progress;
}
.cl-video-anillo {
  --p: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .3) 0);
}
.cl-video-anillo > span { width: 42px; height: 42px; border-radius: 50%; background: var(--mov-rojo); display: grid; place-items: center; }
.cl-video-anillo .cl-icon { font-size: 26px; }
.mov-on .cl-video-anillo { --mov-dy: 0px; --mov-esc: .6; animation: mov-entra 200ms var(--mov-entrar) both; }