.hero-title {
  opacity: 0;
  transform: translateY(20px);
}

/* Clase que se activa cuando entra en pantalla */
.hero-title.show {
  animation: fadeUp 1s ease forwards;
  animation-delay: .2s;
}

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


.line-hero.show {
  width: 0;
  animation: lineGrow 1s ease forwards 0.8s;
}

@keyframes lineGrow {
  to { width: 100%; }
}

.anim-left.show {
  opacity: 0;
  transform: translateX(-20px);
  animation: textIn 1s ease forwards 1.2s;
}

@keyframes textIn {
  to { opacity: 1; transform: translateX(0); }
}


.hero-scale.show {
  transform: scale(1.1);
  animation: heroZoom 3s ease forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.1); opacity: 0.8; }
  to { transform: scale(1); opacity: 1; }
}

.half-text-left.show {
  opacity: 0;
  transform: translateX(-25px);
  animation: slideInText 1s forwards .3s;
}

.half-text-right.show {
  opacity: 0;
  transform: translateX(25px);
  animation: slideInText 1s forwards .3s;
}

@keyframes slideInText {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.cards-anim-2s, .cards-anim-4s, .cards-anim-6s, .cards-anim-8s {
    transform: translateY(20px);
    opacity: 0;
}

.cards-anim-2s.show {
    transform: translateY(20px);
    opacity: 0;
    animation: cardAppear 1s forwards;
    transition: .3s ease;
    animation-delay: .2s; 
}
.cards-anim-4s.show { 
    transform: translateY(20px);
    opacity: 0;
    animation: cardAppear 1s forwards;
    transition: .3s ease;
    animation-delay: .4s; 
}
.cards-anim-6s.show {
    transform: translateY(20px);
    opacity: 0;
    animation: cardAppear 1s forwards;
    transition: .3s ease;
    animation-delay: .6s; 
}
.cards-anim-8s.show {
    transform: translateY(20px);
    opacity: 0;
    animation: cardAppear 1s forwards;
    transition: .3s ease;
    animation-delay: .8s; 
}



/* ===== Animaciones ===== */
@keyframes cardAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.hero-title-2s, .hero-title-4s, .hero-title-6s, .hero-title-8s, .hero-title-10s, .hero-title-12s, .hero-title-14s, .hero-title-16s {
  opacity: 0;
  transform: translateY(20px);
}

.hero-title-2s.show {
  animation: fadeUp 1s ease forwards;
  animation-delay: .2s; 
}

.hero-title-4s.show {
  animation: fadeUp 1s ease forwards;
  animation-delay: .4s; 
}

.hero-title-6s.show {
  animation: fadeUp 1s ease forwards;
  animation-delay: .6s; 
}

.hero-title-8s.show {
  animation: fadeUp 1s ease forwards;
  animation-delay: .8s; 
}

.hero-title-10s.show {
  animation: fadeUp 1s ease forwards;
  animation-delay: 1.0s; 
}

.hero-title-12s.show {
  animation: fadeUp 1s ease forwards;
  animation-delay: 1.2s; 
}

.hero-title-14s.show {
  animation: fadeUp 1s ease forwards;
  animation-delay: 1.4s; 
}

.hero-title-16s.show {
  animation: fadeUp 1s ease forwards;
  animation-delay: 1.6s; 
}