/* Movimiento de las páginas de todas las páginas con movimiento (Inicio, Servicios, Cómo trabajamos, Conocimiento, Nosotros, Contacto, las cuatro páginas de servicio y la política de privacidad)
   Idea rectora: KAIROVA trabaja con "Riesgo • Control • Evidencia"; el movimiento
   marca lo que se verifica y se cierra, en orden. El momento central es la
   secuencia "Cómo trabajamos": cada paso se completa tras el anterior.

   - Sin JavaScript (o si falla) todo queda visible: los estados iniciales ocultos
     solo existen bajo la clase .mov, que el <head> añade y movimiento.js retira si falla.
   - Solo transform, opacity y clip-path; cada efecto corre una vez.
   - Al final, un bloque para prefers-reduced-motion. */

/* ---------- Escalonado (índice --n de cada elemento dentro de su grupo) ---------- */
.banner-texto > :nth-child(2),
.encabezado-pagina .flujo > :nth-child(2),
.lista-situaciones li:nth-child(2),
.lista-marcada[data-revelar] li:nth-child(2),
.paso:nth-child(2) { --n: 1; }
.banner-texto > :nth-child(3),
.encabezado-pagina .flujo > :nth-child(3),
.lista-situaciones li:nth-child(3),
.lista-marcada[data-revelar] li:nth-child(3),
.paso:nth-child(3) { --n: 2; }
.banner-texto > :nth-child(4),
.encabezado-pagina .flujo > :nth-child(4),
.lista-situaciones li:nth-child(4),
.lista-marcada[data-revelar] li:nth-child(4),
.paso:nth-child(4) { --n: 3; }
.banner-texto > :nth-child(5),
.lista-situaciones li:nth-child(5),
.lista-marcada[data-revelar] li:nth-child(5),
.paso:nth-child(5) { --n: 4; }
.lista-marcada[data-revelar] li:nth-child(6) { --n: 5; }

/* ---------- Banner principal: entrada al cargar ---------- */
@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(0.875rem);
  }
}

/* La imagen se asienta: parte un poco ampliada y encuadra. Sin opacidad, para no retrasar su pintura */
@keyframes asentar {
  from {
    transform: scale(1.06);
  }
}

.banner-imagen {
  overflow: hidden;
}

.banner:first-child .banner-texto > * {
  animation: entrar 700ms var(--ease-salida) backwards;
  animation-delay: calc(var(--n, 0) * 90ms);
}

.banner:first-child .banner-imagen img {
  transform-origin: 75% 50%;
  animation: asentar 1600ms var(--ease-salida) backwards;
}

/* ---------- Banner de cierre: la misma entrada, al llegar a la vista ---------- */
/* Con animaciones (no transiciones) para no dejar transiciones lentas sobre el botón */
.mov [data-revelar="banner"]:not(.visible) .banner-texto > * {
  opacity: 0;
}

.mov [data-revelar="banner"]:not(.visible) .banner-imagen img {
  transform: scale(1.06);
}

.mov [data-revelar="banner"].visible .banner-texto > * {
  animation: entrar 700ms var(--ease-salida) backwards;
  animation-delay: calc(var(--n, 0) * 90ms);
}

.mov [data-revelar="banner"] .banner-imagen img {
  transform-origin: 75% 50%;
}

.mov [data-revelar="banner"].visible .banner-imagen img {
  animation: asentar 1600ms var(--ease-salida) backwards;
}

/* ---------- Situaciones: la lista aparece como lista ---------- */
.mov :is(.lista-situaciones, .lista-marcada)[data-revelar] li {
  opacity: 0;
  transform: translateX(-0.75rem);
  transition: opacity 500ms var(--ease-salida), transform 600ms var(--ease-salida);
  transition-delay: calc(var(--n, 0) * 70ms);
}

.mov :is(.lista-situaciones, .lista-marcada)[data-revelar].visible li {
  opacity: 1;
  transform: none;
}

/* ---------- Servicios: la tarjeta llega y su icono se traza ---------- */
.mov :is(.tarjeta-servicio, .expectativa)[data-revelar] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 600ms var(--ease-salida), transform 800ms var(--ease-salida);
}

.mov :is(.tarjeta-servicio, .expectativa)[data-revelar].visible {
  opacity: 1;
  transform: none;
}

/* Icono de servicio (en la tarjeta o en la cabecera de sección de Servicios):
   las formas llevan pathLength="1" y el trazo se dibuja de 0 a 1 al entrar el bloque observado */
.mov [data-revelar] .tarjeta-servicio-icono svg {
  opacity: 0;
  transition: opacity 120ms linear 250ms;
}

.mov [data-revelar] .tarjeta-servicio-icono svg :is(path, rect) {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.05;
  transition: stroke-dashoffset 1000ms var(--ease-salida) 250ms;
}

.mov [data-revelar].visible .tarjeta-servicio-icono svg {
  opacity: 1;
}

.mov [data-revelar].visible .tarjeta-servicio-icono svg :is(path, rect) {
  stroke-dashoffset: 0;
}

/* Las tres tarjetas están en fila solo en escritorio: solo ahí se escalonan */
@media (min-width: 64rem) {
  :is(.tarjeta-servicio, .expectativa)[data-revelar]:nth-child(2) { --n: 1; }
  :is(.tarjeta-servicio, .expectativa)[data-revelar]:nth-child(3) { --n: 2; }

  .mov :is(.tarjeta-servicio, .expectativa)[data-revelar] {
    transition-delay: calc(var(--n, 0) * 110ms);
  }

  .mov [data-revelar] .tarjeta-servicio-icono svg {
    transition-delay: calc(var(--n, 0) * 110ms + 250ms);
  }

  .mov [data-revelar] .tarjeta-servicio-icono svg :is(path, rect) {
    transition-delay: calc(var(--n, 0) * 110ms + 250ms);
  }
}

/* ---------- Servicios: cada sección presenta su servicio ----------
   Al entrar la sección se traza su icono y, un momento después, el contenido de la
   columna derecha llega en orden. Las secciones de cierre no llevan entrada. */
[data-revelar="servicio"] > .flujo:last-child > :nth-child(2) { --n: 1; }
[data-revelar="servicio"] > .flujo:last-child > :nth-child(3) { --n: 2; }

.mov [data-revelar="servicio"] > .flujo:last-child > * {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 600ms var(--ease-salida), transform 700ms var(--ease-salida);
  transition-delay: calc(var(--n, 0) * 90ms + 150ms);
}

.mov [data-revelar="servicio"].visible > .flujo:last-child > * {
  opacity: 1;
  transform: none;
}

/* ---------- Cómo trabajamos: momento central ----------
   Cada paso se completa tras el anterior: el círculo numerado se rellena y,
   en escritorio, la flecha hacia el siguiente se dibuja. Antes de entrar en
   vista los pasos se leen igual, solo "pendientes". */
.paso::before {
  transition: background-color 400ms var(--ease-salida), color 400ms var(--ease-salida), transform 500ms var(--ease-salida);
  transition-delay: calc(var(--n, 0) * 300ms);
}

.paso:not(:last-child)::after {
  transition: opacity 300ms var(--ease-salida), transform 500ms var(--ease-salida);
  transition-delay: calc(var(--n, 0) * 300ms + 220ms);
}

.mov .pasos[data-revelar]:not(.visible) .paso::before {
  color: var(--color-primario);
  background: var(--color-primario-fondo);
  transform: scale(0.82);
}

.mov .pasos[data-revelar]:not(.visible) .paso:not(:last-child)::after {
  opacity: 0;
  transform: translate(-0.5rem, -50%) rotate(45deg);
}

/* Donde el último paso cierra en marino sólido (.pasos-cierre), llega al final de la secuencia:
   antes de entrar es una tarjeta clara y, tras el cuarto paso, se rellena */
.paso:last-child {
  transition: background-color 500ms var(--ease-salida), color 500ms var(--ease-salida), border-color 500ms var(--ease-salida);
  transition-delay: calc(var(--n, 0) * 300ms);
}

.mov .pasos-cierre[data-revelar]:not(.visible) .paso:last-child {
  color: var(--color-primario);
  background: var(--color-fondo);
  border-color: var(--color-borde);
}

.mov .pasos-cierre[data-revelar]:not(.visible) .paso:last-child::before {
  color: var(--color-sobre-primario);
  background: var(--color-primario);
}

/* ---------- Cómo trabajamos: las etapas se completan al llegar a ellas ----------
   Cada etapa se observa por separado: su círculo numerado pasa de pendiente a lleno
   cuando la lectura llega a la tarjeta, como marcar el proceso paso a paso. */
.etapa::before {
  transition: background-color 400ms var(--ease-salida), color 400ms var(--ease-salida), transform 500ms var(--ease-salida);
}

.mov .etapa[data-revelar]:not(.visible)::before {
  color: var(--color-primario);
  background: var(--color-primario-fondo);
  transform: scale(0.82);
}

/* ---------- Contacto: página de tarea, el movimiento es respuesta y estado ----------
   Encabezado: entrada breve. Campos: el cambio de foco y de error se transita en vez de
   saltar. Envío: al enviar un formulario válido el botón muestra que está trabajando. */
.encabezado-pagina .flujo > * {
  animation: entrar 500ms var(--ease-salida) backwards;
  animation-delay: calc(var(--n, 0) * 70ms);
}

.campo :is(input, select, textarea) {
  transition: border-color var(--transicion);
}

.campo label {
  transition: color var(--transicion);
}

.campo:focus-within label {
  color: var(--color-primario);
}

.formulario-enviar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

@keyframes barrido {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* Un destello claro cruza el botón mientras el servidor responde; el texto queda encima */
.formulario[aria-busy="true"] .formulario-enviar {
  cursor: progress;
  pointer-events: none;
}

.formulario[aria-busy="true"] .formulario-enviar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--color-fondo-transparente), var(--color-secundario-hover), var(--color-fondo-transparente));
  animation: barrido 1200ms linear infinite;
}

/* ---------- Preguntas frecuentes: la respuesta se abre y se cierra con suavidad ----------
   Mejora progresiva: donde el navegador no admite ::details-content (o interpolate-size),
   el <details> se abre y se cierra de golpe, como siempre. Cierre más rápido que apertura. */
.pregunta {
  interpolate-size: allow-keywords;
}

.pregunta summary {
  transition: background-color var(--transicion);
}

.pregunta::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
}

.pregunta[open]::details-content {
  block-size: auto;
  transition-duration: 320ms;
  transition-timing-function: var(--ease-salida);
}

/* ---------- Conocimiento: la ruta de lectura se marca en orden ----------
   Los tres círculos de "Por dónde comenzar" se completan uno tras otro, igual que los pasos
   del proceso; las tres guías que siguen entran con la animación de tarjetas ya definida. */
.lista-numerada li::before {
  transition: background-color 400ms var(--ease-salida), color 400ms var(--ease-salida), transform 500ms var(--ease-salida);
  transition-delay: calc(var(--n, 0) * 300ms);
}

.lista-numerada li:nth-child(2) { --n: 1; }
.lista-numerada li:nth-child(3) { --n: 2; }

.mov .lista-numerada[data-revelar]:not(.visible) li::before {
  color: var(--color-primario);
  background: var(--color-primario-fondo);
  transform: scale(0.82);
}

/* El video llega tras el texto del banner (mismo escalonado, índice 3) */
.banner:first-child .banner-video {
  animation: entrar 700ms var(--ease-salida) backwards;
  animation-delay: 270ms;
}

/* ---------- Principio de trabajo: Riesgo, Control y Evidencia se ordenan y se cierra con la fórmula ---------- */
[data-revelar="trabajo"] .rejilla-tarjetas > :nth-child(2) { --n: 1; }
[data-revelar="trabajo"] .rejilla-tarjetas > :nth-child(3) { --n: 2; }
[data-revelar="trabajo"] .rejilla-tarjetas > :nth-child(4) { --n: 3; }

.mov [data-revelar="trabajo"] .rejilla-tarjetas > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 600ms var(--ease-salida), transform 800ms var(--ease-salida);
  transition-delay: calc(var(--n, 0) * 110ms);
}

.mov [data-revelar="trabajo"].visible .rejilla-tarjetas > * {
  opacity: 1;
  transform: none;
}

/* El recorte sigue a lo escrito, no al ancho de la columna */
.mov [data-revelar="trabajo"] .principio {
  width: fit-content;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms var(--ease-salida) 450ms;
}

.mov [data-revelar="trabajo"].visible .principio {
  clip-path: inset(0 -1% 0 0);
}

/* ---------- Bloque KAIROVA: el principio se descubre de izquierda a derecha ---------- */
/* Se observa el contenedor: un recorte sobre el propio elemento lo excluiría del observador */
.mov [data-revelar="principio"] .kairova-principio {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms var(--ease-salida) 150ms;
}

.mov [data-revelar="principio"].visible .kairova-principio {
  clip-path: inset(0 -1% 0 0);
}

/* ---------- Movimiento reducido ----------
   Se quitan desplazamientos, escalas, trazos y recortes. Se conserva lo que informa:
   los elementos aparecen con un fundido corto y los pasos se completan en orden (color). */
@media (prefers-reduced-motion: reduce) {
  @keyframes entrar {
    from {
      opacity: 0;
      transform: none;
    }
  }

  .banner:first-child .banner-texto > *,
  .banner:first-child .banner-video,
  .encabezado-pagina .flujo > *,
  .mov [data-revelar="banner"].visible .banner-texto > * {
    animation-duration: 400ms;
    animation-delay: 0s;
  }

  .pregunta::details-content,
  .pregunta[open]::details-content {
    transition: none;
  }

  /* Sin barrido: el botón en espera queda en su tono de énfasis, fijo */
  .formulario[aria-busy="true"] .formulario-enviar {
    background: var(--color-secundario-hover);
  }

  .formulario[aria-busy="true"] .formulario-enviar::after {
    content: none;
  }

  .banner:first-child .banner-imagen img,
  .mov [data-revelar="banner"].visible .banner-imagen img {
    animation: none;
  }

  .mov [data-revelar="banner"]:not(.visible) .banner-imagen img {
    transform: none;
  }

  .mov :is(.lista-situaciones, .lista-marcada)[data-revelar] li,
  .mov [data-revelar="trabajo"] .rejilla-tarjetas > *,
  .mov :is(.tarjeta-servicio, .expectativa)[data-revelar],
  .mov [data-revelar="servicio"] > .flujo:last-child > * {
    transform: none;
    transition-property: opacity, background-color, color, border-color;
    transition-duration: 300ms;
    transition-delay: 0s;
  }

  .mov [data-revelar] .tarjeta-servicio-icono svg {
    opacity: 1;
    transition: none;
  }

  .mov [data-revelar] .tarjeta-servicio-icono svg :is(path, rect) {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }

  .paso::before {
    transition-property: background-color, color;
    transition-duration: 300ms;
    transition-delay: calc(var(--n, 0) * 200ms);
  }

  .paso:not(:last-child)::after {
    transition-property: opacity;
    transition-duration: 300ms;
    transition-delay: calc(var(--n, 0) * 200ms + 120ms);
  }

  .paso:last-child {
    transition-duration: 300ms;
    transition-delay: calc(var(--n, 0) * 200ms);
  }

  .mov .pasos[data-revelar]:not(.visible) .paso::before,
  .mov .etapa[data-revelar]:not(.visible)::before,
  .mov .lista-numerada[data-revelar]:not(.visible) li::before {
    transform: none;
  }

  .lista-numerada li::before {
    transition-property: background-color, color;
    transition-duration: 300ms;
    transition-delay: calc(var(--n, 0) * 200ms);
  }

  .etapa::before {
    transition-property: background-color, color;
    transition-duration: 300ms;
  }

  .mov .pasos[data-revelar]:not(.visible) .paso:not(:last-child)::after {
    transform: translateY(-50%) rotate(45deg);
  }

  .mov [data-revelar="principio"] .kairova-principio,
  .mov [data-revelar="trabajo"] .principio {
    clip-path: none;
    opacity: 0;
    transition: opacity 400ms ease;
  }

  .mov [data-revelar="principio"].visible .kairova-principio,
  .mov [data-revelar="trabajo"].visible .principio {
    opacity: 1;
  }
}