.hero {
  min-height: 90vh; /* altura mínima para escritorio */
  height: auto;     /* deja que crezca si el contenido lo necesita */
  background: url('../images/portada.png') no-repeat center center/cover;
  display: flex;
  justify-content: flex-start; /* contenido alineado a la izquierda como en escritorio */
  align-items: center;          /* centrado vertical */
  color: #000;
  padding: 0 5%;                /* padding lateral flexible */
  position: relative;
  box-sizing: border-box;
  z-index: 0;
}

.hero-content {
  max-width: 600px;
  width: 100%;
  text-align: left;
}

.hero-logo {
  width: 150px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* para que los botones bajen en pantallas muy pequeñas */
}

.btn {
  display: inline-block;
  padding: 12px 25px;
  background: #00A29C;
  color: #fff;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.3s;
}

.btn:hover {
  background: #e6c200;
}

/* --- Ajustes responsivos --- */
    /* Para pantallas aproximadamente de 1366px */
    
@media (min-width: 1200px) and (max-width: 1400px) {
  .hero {
    height: 90vh; /* se aplica solo en este rango */
  }
}    
    
@media (min-width: 1350px) and (max-width: 1380px) {
  .hero {
    height: 90vh; /* solo aquí se sobrescribe */
  }
}


/* Solo para resolución 1366px de ancho */
@media (width: 1366px) {
  .hero {
    height: 90vh; /* sobrescribe el height normal de 70vh */
  }
}
  .hero-content {
    max-width: 550px; /* un poco más ajustado para pantallas menores */
  }
  .hero-logo {
    width: 140px;
  }
}



@media (max-width: 1024px) {
  .hero {
    min-height: 65vh;
    padding: 0 5%;
  }
  .hero-content {
    max-width: 450px;
  }
  .hero-logo {
    width: 130px;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 60vh;
    justify-content: center; /* centra el contenido en móviles */
    text-align: center;
  }
  .hero-content {
    max-width: 90%;
  }
  .hero-logo {
    width: 120px;
    margin: 0 auto 15px auto;
  }
  .hero-buttons {
    justify-content: center;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 55vh;
    padding: 0 10px;
  }
  .hero-logo {
    width: 100px;
  }
  .btn {
    padding: 10px 20px;
    min-width: 80px;
  }
}