/*
  animations.css
  Keyframes y clases de animación: fade-in, slide-up, hover elegante,
  transiciones de botones (~300ms), clases que activa js/animations.js
  vía Intersection Observer para el Scroll Reveal.

  Pendiente: se completa en el Paso 4 (Animaciones).
*/

/* -------------------------------------------------- */
/* Scroll reveal: fade + slide-up al entrar en pantalla */
/* Lo activa animations.js agregando la clase .in-view  */
/* vía Intersection Observer.                           */
/* -------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Cascada suave para grupos de tarjetas (Beneficios, Servicios y Planes
   comparten .card-grid, así que esta regla les sirve a los tres) */
.card-grid > *:nth-child(1) { transition-delay: 0s; }
.card-grid > *:nth-child(2) { transition-delay: 0.1s; }
.card-grid > *:nth-child(3) { transition-delay: 0.2s; }

/* Cascada análoga para la lista de preguntas del FAQ */
.faq-list > *:nth-child(1) { transition-delay: 0s; }
.faq-list > *:nth-child(2) { transition-delay: 0.05s; }
.faq-list > *:nth-child(3) { transition-delay: 0.1s; }
.faq-list > *:nth-child(4) { transition-delay: 0.15s; }
.faq-list > *:nth-child(5) { transition-delay: 0.2s; }
.faq-list > *:nth-child(6) { transition-delay: 0.25s; }
.faq-list > *:nth-child(7) { transition-delay: 0.3s; }

/* -------------------------------------------------- */
/* Anillo de marca: se "dibuja" al entrar en pantalla   */
/* -------------------------------------------------- */

.brand-ring-progress {
  /* Oculto al inicio: el offset igual al largo del trazo (dasharray)
     esconde el arco completo corriéndolo fuera de la parte visible */
  stroke-dashoffset: 620;
  transition: stroke-dashoffset 1.3s ease-out 0.2s;
}

.brand-ring-progress.in-view {
  stroke-dashoffset: 0;
}

/* -------------------------------------------------- */
/* Acordeón del FAQ: rotación del ícono                 */
/* La apertura/cierre en sí (alto animado) la maneja    */
/* animations.js, porque <details> nativo no se puede   */
/* animar de forma confiable solo con CSS.              */
/* -------------------------------------------------- */

.faq-item__icon {
  transition: transform 0.3s ease;
}

.faq-item--open .faq-item__icon {
  transform: rotate(180deg);
}

/* -------------------------------------------------- */
/* Accesibilidad: respetar "reducir movimiento"         */
/* Vitabu trabaja con adultos mayores y sus familias;   */
/* si el sistema tiene esta preferencia activada, todo  */
/* el contenido se muestra directo, sin animar.         */
/* -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .brand-ring-progress {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  .faq-item__icon {
    transition: none !important;
  }
}