/* Movimiento común de glaim.io (17-oct-2026). Con intención, no adorno:
   entra lo que se acaba de ver, responde lo que se puede tocar, y la página
   siguiente llega con un fundido. Todo se ve igual sin movimiento
   (prefers-reduced-motion) y sin JavaScript: solo se oculta lo que motion.js
   marca, y solo por debajo de lo que ya se ve al cargar. */

/* Cambio de página: lo hace el navegador (View Transitions entre documentos). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: m-out 160ms ease-in both; }
::view-transition-new(root) { animation: m-in 260ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes m-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes m-in { from { opacity: 0; transform: translateY(6px); } }

/* Aparición al llegar con el scroll, escalonada entre hermanos (--m-i). */
.m-ready .m-r {
  opacity: 0; transform: translateY(26px); filter: blur(4px);
  transition: opacity 640ms cubic-bezier(.2,.7,.2,1), transform 640ms cubic-bezier(.2,.7,.2,1), filter 640ms ease;
  transition-delay: calc(var(--m-i, 0) * 80ms);
}
.m-ready .m-r.m-in { opacity: 1; transform: none; filter: none; }

/* Lo que se puede tocar responde. */
.cap, .conn-card, .relcard, .plan, .panel {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.cap:hover, .conn-card:hover, .relcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(22,25,30, 0.08);
  border-color: var(--surface-line-strong);
}
.btn-accent, .btn-ghost { transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; }
.btn-accent:active, .btn-ghost:active { transform: scale(.98); }

/* La cabecera se compacta al bajar. */
header.site { transition: box-shadow 220ms ease, backdrop-filter 220ms ease; }
header.site.m-scrolled { box-shadow: 0 1px 0 var(--surface-line), 0 6px 18px rgba(22,25,30, 0.05); }

/* Al bajar: progreso de lectura; al cambiar de página, avanza mientras carga. */
.m-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none;
  background: #0F766E; transform-origin: 0 50%; transform: scaleX(var(--m-p, 0));
}
.m-leaving .m-progress { transition: transform 900ms cubic-bezier(.1,.6,.2,1); transform: scaleX(.85); }
html { scroll-behavior: smooth; }

/* Profundidad: la tarjeta de la cabecera va un poco más despacio que la página. */
.hero .panel { will-change: transform; transform: translateY(var(--m-par, 0px)); }

/* Al hacer clic: una onda desde el punto pulsado. */
.m-ink { position: relative; overflow: hidden; }
.m-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .35;
  background: currentColor; animation: m-ripple 560ms cubic-bezier(.2,.7,.2,1) forwards;
}
.btn-accent .m-ripple { background: #fff; }
@keyframes m-ripple { to { transform: scale(1); opacity: 0; } }

/* Menús y respuestas que se despliegan, no que aparecen de golpe. */
.navitem.open .megamenu { animation: m-drop 220ms cubic-bezier(.2,.7,.2,1); }
@keyframes m-drop { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
.mobile-panel.open { animation: m-slide 260ms cubic-bezier(.2,.7,.2,1); }
@keyframes m-slide { from { opacity: 0; transform: translateY(-10px); } }
.faq-item[open] .faq-a { animation: m-unfold 320ms cubic-bezier(.2,.7,.2,1); }
@keyframes m-unfold { from { opacity: 0; transform: translateY(-6px); } }
.faq-item summary .faq-icon { transition: transform 260ms cubic-bezier(.2,.7,.2,1); }

/* El destino de un enlace interno se resalta un momento. */
.m-target { animation: m-flash 1400ms ease-out; border-radius: 12px; }
@keyframes m-flash { 0%, 30% { box-shadow: 0 0 0 6px rgba(15,118,110,.14); } 100% { box-shadow: 0 0 0 6px rgba(15,118,110,0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .m-progress, .m-ripple { display: none; }
  .hero .panel { transform: none; }
  .navitem.open .megamenu, .mobile-panel.open, .faq-item[open] .faq-a, .m-target { animation: none; }
  @view-transition { navigation: none; }
  .m-ready .m-r { opacity: 1; transform: none; filter: none; transition: none; }
  .cap, .conn-card, .relcard, .plan, .panel, .btn-accent, .btn-ghost, header.site { transition: none; }
  .cap:hover, .conn-card:hover, .relcard:hover { transform: none; }
}