.hero {
  position: relative;
  width: 100%;
  max-height: 100vh;
  overflow: hidden;
  top: -70px;
}



.hero-img {
  width: 100%;

  height: 100%;
  object-fit: cover;

  /* 🔥 oscurece directo */
  filter: brightness(0.8);
}
/* OVERLAY */
.hero-overlay {
  position: absolute;
  top: 15%;
  right: 8%; /* 🔥 lo manda a la derecha */
  left: auto;
  transform: none;

  text-align: left; /* texto alineado a la izquierda dentro del bloque */
  color: #ffffff;
  width: 600px;
}

/* TÍTULO */
.hero-overlay h1 {
  font-family: "DM SANS";
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
  color: rgb(255, 255, 255);
}

.hero-overlay h1 span {
  font-family: "DM SANS";
  color: #1ed5d8;
  display: block;
  line-height: 1.3;
}

/* TEXTO */
.hero-overlay p {
  margin-top: 15px;
  font-size: 18px;
  color: #ffffff;
  line-height: 1.6;
  font-weight: 500;
}

/* BOTONES */
.hero-buttons {
  margin-top: 25px;
  display: flex;
  justify-content: flex-start; /* 🔥 alineados a la izquierda */
  gap: 15px;
  text-align: center;
}

.btn-primary-hero {
  width: 150px;
  
  background: #1ed5d8;
  color: #fff;
  padding: 12px 10px;
  border-radius: 8px;
  text-decoration: none;
   box-shadow:  0 5px 25px rgba(0,0,0,0.15);
}

.btn-secondary-hero {
  background: #fff;
  color: #3A2A2A;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #ccc;
  box-shadow:  0 5px 25px rgba(0,0,0,0.15);
  
}

.btn-primary-hero,
.btn-secondary-hero {
  transition: all 0.3s ease;
}

.btn-primary-hero:hover,
.btn-secondary-hero:hover {
  transform: scale(1.05); /* 🔥 crece suave */
  
}


/* =========================
HERO RESPONSIVE
========================= */

/* Tablets y móviles grandes (max 1024px) */
 @media (max-width:1600px ) {
  .hero {
    height: 100%;          /* ocupa todo el contenedor */
    min-height: 100vh;     /* nunca menos que pantalla */
    object-fit: cover;
  }
 
   .hero-img {
    width: 100%;
    height: 100vh;
    object-fit: cover; /* 🔥 ocupa toda la pantalla */
  }
.hero-overlay h1 {
 
  font-size: 45px;
  text-align: center;
}
.hero-overlay h1 span {
   display: inline-block;
}
.hero-overlay {
  margin: 0 auto;

  width: auto;
  top: 10%;
  right: 0;
  left: 0;
  text-align: center;


  
}
.hero-buttons {
  justify-content: center;
}
.hero-overlay p {
  margin-top: 0;
}
.hero-buttons {
   margin-top: 15px;
}

 }
 @media (max-width:1150px ) {
  .hero {
     height: 100%;
     top: 0;

  }
  
    .hero-overlay h1 {
  font-size: 35px;
  padding: 15px;
  text-align: center;
  line-height: 1;
 
}
.hero-overlay p{
  padding: 0 30px;
  line-height: 1;
}
.hero-buttons{
  font-size: 15px;
  padding: 15px;
}
 }
 

  @media (max-width:900px ) {
  
.hero-overlay {
      top: 8%;
      
    } 
  .hero-overlay h1  {
  text-align: center;
  line-height: 1;
 
}
.hero-buttons a{

  width: 120px;
  padding: 10px;
  
}

  
}


   @media (max-width:600px ) {
  
  
  .hero-overlay h1  {
    padding: 10px;
  font-size: 30px;
  text-align: center;
  line-height: 1;
 
}
.hero-overlay p  {
    padding:  0 20px;
    font-size: 15px;
 
 
}
   

 

   }
   @media (max-width:350px ){
      .hero-buttons {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        gap: 10px;
      } 
      .hero-overlay p  {
    padding:  0 10px;
    font-size: 14px;
 
}
       


   }