/* =================================================
   HERO.CSS
   FIX definitivo mobile + zoom desktop
   ================================================= */


/* =================================================
   CONTENEDOR HERO
   ================================================= */

.hero {
  position: relative;

  min-height: 100svh;

  background: url("../images/hero.jpg") center/cover no-repeat;

  display: flex;
  align-items: center;

  color: white;

  overflow: clip;

}





/* =================================================
   OVERLAY
   ================================================= */

.hero__overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.2) 60%,
    rgba(0,0,0,0) 100%
  );

  
    border: 11px white;

  z-index: 1;
}



/* =================================================
   CONTENIDO
   ================================================= */

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  min-height: 400px;   /* 🔥 ESTA ES LA SOLUCIÓN */
}



/* =================================================
   TÍTULO
   ================================================= */

.hero__title {
  font-family: 'bebas_regular', sans-serif;
  font-size: 82px;
  letter-spacing: 2px;
  margin-bottom: 20px;
  padding-left:10px;

  text-shadow:
    0 4px 12px rgba(0,0,0,0.85),
    0 2px 4px rgba(0,0,0,0.95);

}



/* =================================================
   SUBTÍTULO
   ================================================= */

.hero__subtitle {
  font-family: 'Questrial', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 40px;
  line-height: 1.35;
  padding-left:10px;
}

.subtitle-main { font-size: 34px; font-weight: 600; }
.subtitle-secondary { font-size: 22px; opacity: 0.9; }
.subtitle-years { font-size: 26px; font-weight: 700; color: var(--primary); }



/* =================================================
   BOTONES
   ================================================= */

.hero__actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-btn {
  background: var(--primary);
  padding: 14px 30px;
  border-radius: 6px;

  font-family: 'bebas_regular', sans-serif;
  font-size: 20px;
  text-transform: uppercase;

  color: white;
  transition: .25s ease;
}

.hero-btn:hover {
  transform: translateY(-3px);
}



/* =================================================
   ENTRADA TEXTO
   ================================================= */

.hero__title,
.hero__subtitle,
.hero__actions {
  opacity: 0;
  transform: translateY(30px);
}

.hero.show .hero__title { animation: fadeUp .8s forwards; }
.hero.show .hero__subtitle { animation: fadeUp .8s .25s forwards; }
.hero.show .hero__actions { animation: fadeUp .8s .5s forwards; }

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



/* =================================================
   ZOOM SOLO DESKTOP
   ================================================= */

@media (min-width: 901px) {

  .hero {
    animation: heroZoom 1.6s ease forwards;
  }

  @keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
  }

}



/* =================================================
   MOBILE
   ================================================= */

@media (max-width: 900px) {

  .hero {
    text-align: center;
    /* 🔥 FIX: eliminamos margin-top y calc */
  }
  .hero__content { min-height: 500px;}
  .hero__title { font-size: 48px; }
  .subtitle-main { font-size: 22px; }
  .subtitle-secondary { font-size: 16px; }
  .subtitle-years { font-size: 18px; }

  .hero__actions {
    justify-content: center;
  }

}