/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES GENERALES
════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   SCROLL SUAVE
════════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}

/* Evitar que el navbar fijo tape el inicio de una sección */
[id] {
  scroll-margin-top: 90px;
}

@media (max-width: 991px) {
  [id] {
    scroll-margin-top: 84px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════════ */
.hero-content h1,
.hero-content p,
.hero-content .btn {
  opacity: 0;
  transform: translateY(25px);
  animation: heroEntrada 0.8s ease forwards;
}

/* TÍTULO */
.hero-content h1 {
  animation-delay: 0.15s;
}

/* DESCRIPCIÓN */
.hero-content p {
  animation-delay: 0.3s;
}

/* BOTONES */
.hero-content .btn {
  animation-delay: 0.45s;
}

/* Segundo botón ligeramente después */
.hero-content .btn:nth-of-type(2) {
  animation-delay: 0.6s;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMACIÓN
════════════════════════════════════════════════════════════════ */
@keyframes heroEntrada {

  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

/* ═══════════════════════════════════════════════════════════════
   REDUCIR ANIMACIONES SI EL USUARIO LO PREFIERE
════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  .hero-content h1,
  .hero-content p,
  .hero-content .btn {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES AL HACER SCROLL
════════════════════════════════════════════════════════════════ */
.animacion-scroll {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.animacion-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Retraso solamente durante la aparición */
.animacion-scroll:not(.visible).animacion-delay-1 {
  transition-delay: 0.1s;
}

.animacion-scroll:not(.visible).animacion-delay-2 {
  transition-delay: 0.2s;
}

.animacion-scroll:not(.visible).animacion-delay-3 {
  transition-delay: 0.3s;
}

.animacion-scroll:not(.visible).animacion-delay-4 {
  transition-delay: 0.4s;
}

.animacion-scroll:not(.visible).animacion-delay-5 {
  transition-delay: 0.5s;
}

/* ═══════════════════════════════════════════════════════════════
   APARICIÓN ESCALONADA
════════════════════════════════════════════════════════════════ */
.animacion-delay-1 {
  transition-delay: 0.1s;
}

.animacion-delay-2 {
  transition-delay: 0.2s;
}

.animacion-delay-3 {
  transition-delay: 0.3s;
}

.animacion-delay-4 {
  transition-delay: 0.4s;
}

.animacion-delay-5 {
  transition-delay: 0.5s;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES LATERALES
════════════════════════════════════════════════════════════════ */
.animacion-desde-izquierda,
.animacion-desde-derecha {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.animacion-desde-izquierda {
  transform: translateX(-40px);
}

.animacion-desde-derecha {
  transform: translateX(40px);
}

.animacion-desde-izquierda.visible,
.animacion-desde-derecha.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ═══════════════════════════════════════════════════════════════
   REDUCIR ANIMACIONES
════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .animacion-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (max-width: 767px) {
  .animacion-desde-izquierda,
  .animacion-desde-derecha {
    transform: none;
  }
}