/* Capa de movimiento (aprobada por Eusebio el 29-oct-2026). Mismo ritmo que el CRM:
   solo opacity, transform y filter; 150-350 ms; respeta «reducir movimiento». */
:root {
  --ease-alved: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-rapida: 150ms;
  --dur-base: 250ms;
  --dur-lenta: 350ms;
}

/* 1 · Fundido entre páginas. La barra de arriba se queda quieta y solo
   cambia el contenido (transición nativa entre páginas del mismo sitio). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  .cabecera {
    view-transition-name: cabecera;
  }
  ::view-transition-group(cabecera) {
    animation: none;
  }
  ::view-transition-old(root) {
    animation: fundido-sale var(--dur-rapida) var(--ease-alved) both;
  }
  ::view-transition-new(root) {
    animation: fundido-entra var(--dur-lenta) var(--ease-alved) both;
  }
}
@keyframes fundido-sale {
  to {
    opacity: 0;
  }
}
@keyframes fundido-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* 2 · Enfoque: al pasar el ratón por una tarjeta de servicio, paso o reseña,
   las demás se desenfocan un poco. Solo con ratón (en el teléfono no hay hover). */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :is(.serv-rejilla, .pasos-rejilla, .res-rejilla, .aportes) > * {
    transition:
      filter var(--dur-base) var(--ease-alved),
      opacity var(--dur-base) var(--ease-alved),
      transform var(--dur-base) var(--ease-alved),
      box-shadow var(--dur-base) var(--ease-alved);
  }
  html :is(.serv-rejilla, .pasos-rejilla, .res-rejilla, .aportes):has(> :hover) > :not(:hover) {
    filter: blur(3px);
    opacity: 0.6;
  }
}