.hero{
  position:relative;
  height:90vh;
  min-height:500px;

  display:flex;
  align-items:center ;
  justify-content:center;

  text-align:center;

  background-image:url("../assets/img/flayers/portadaPabloVete.png");
  background-size:cover;
  background-position: 30% center;

  padding:20px;
}

/* overlay oscuro */

.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
}

/* contenido */

.hero-content{
  position:relative;
  max-width:750px;
  color:white;
  z-index:2;
}

/* titulo */

.hero h1{
  font-size:42px;
  margin-bottom:20px;
  line-height:1.2;
}

/* subtitulo */

.hero p{
  font-size:18px;
  margin-bottom:30px;
  opacity:.9;
}

/* botones */

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:15px;
  margin-bottom:35px;
}

.btn-primary{
  padding:12px 28px;
  background: var(--color-primario);
  color: var(--color-blanco);
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.btn-primary:hover{
  background:var(--color-primario-oscuro);
}

.btn-secondary{
  padding:12px 28px;
  border:2px solid white;
  color:var(--color-blanco);
  border-radius:8px;
  text-decoration:none;
  transition:.3s;
}

.btn-secondary:hover{
  background:var(--color-blanco);
  color:black;
}

/* features */

.hero-features{
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
}

.feature{
  font-size:15px;
  background:rgba(255,255,255,0.15);
  padding:8px 14px;
  border-radius:20px;
}

/* mobile */

@media (max-width:768px){

.hero h1{
  font-size:32px;
}

.hero p{
  font-size:16px;
}

.hero-buttons{
  flex-direction:column;
}

}