/* ==========================================================================
   animaciones.css — transiciones suaves de la página principal.
   Las secciones aparecen al bajar (lo activa js/animaciones.js).
   Si el usuario pide reducir animaciones, nada de esto se aplica.
   ========================================================================== */

/* Desplazamiento suave al pulsar los enlaces del menú */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Solo cuando JavaScript está activo: el contenido empieza oculto y se muestra al llegar */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--retraso, 0s);
}

.js-anim [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Encabezado: sombra suave cuando la página ya tiene scroll */
.site-header {
  transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
}

/* Botones principales: se elevan al pasar el mouse y se hunden al pulsar */
.btn--primary {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(215, 20, 26, 0.22);
}

.btn--primary:active {
  transform: translateY(0) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js-anim [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn--primary:hover,
  .btn--primary:active {
    transform: none;
  }
}