*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

html, body{
  width:100%;
  overflow-x:hidden;
}

body{
  color:#333;
}

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

header{
  position:absolute;
  width:100%;
  z-index:10;
  padding:10px 0;
}

.nav{
  display:flex;
  justify-content:center;
  align-items:center;

}

.logo{
  height:190px;
  width:auto;
}

.hero{
  height:100vh;
  background:url('img/hero.jpg');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  color:white;
  max-width:800px;
  padding:20px;
}

.hero h1{
  font-size:4rem;
  margin-bottom:20px;
}

.hero p{
  font-size:1.2rem;
  line-height:1.8;
}

.hero-buttons{
  margin-top:30px;
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn-primary{
  background:#0B5B46;
  color:white;
  padding:15px 30px;
  border-radius:8px;
  text-decoration:none;
}

.btn-secondary{
  background:#D9C8A3;
  color:#0B5B46;
  padding:15px 30px;
  border-radius:8px;
  text-decoration:none;
}

.btn-header{
  background:white;
  padding:12px 25px;
  border-radius:8px;
  text-decoration:none;
  color:#0B5B46;
  font-weight:600;
}

.beneficios{
  padding:100px 20px;
  background:#f8f8f8;
}

.beneficios h2{
  text-align:center;
  margin-bottom:50px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

.card{
  background:white;
  padding:30px;
  border-radius:15px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.galeria{
  padding:100px 20px;
}

.galeria h2{
  text-align:center;
  margin-bottom:50px;
}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:15px;
}

.gallery img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:12px;
}

.cta{
  background:#0B5B46;
  color:white;
  padding:100px 20px;
  text-align:center;
}

.cta h2{
  margin-bottom:20px;
}

.cta p{
  margin-bottom:30px;
}

footer{
  padding:50px 20px;
  text-align:center;
  background:#111;
  color:white;
}

.footer-logo{
  height:190px;
  margin-bottom:20px;
}

.whatsapp-float{
  position:fixed;
  right:25px;
  bottom:25px;
  width:70px;
  height:70px;
  z-index:999;
}

.whatsapp-float img{
  width:100%;
}

.plano-container{
  width:95%;
  max-width:1400px;
  margin:0 auto 40px;
}


.plano-container img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    border-radius:15px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.galeria-titulo{
  text-align:center;
  margin-bottom:40px;
  margin-top:30px;
}

.plano-btn{
  text-align:center;
  margin-top:10px;
  margin-bottom:60px;
}

/* ===== Responsive (tablet) ===== */
@media(max-width:1024px){

  .plano-container{
    width:92%;
  }

}

/* ===== Responsive (móvil) ===== */
@media(max-width:768px){

  .hero h1{
    font-size:2.5rem;
  }

  .hero p{
    font-size:1rem;
  }

  .logo{
    height:180px;
    width:auto;
    margin-bottom:25px;
  }

  .container{
    width:92%;
  }

  .beneficios,
  .galeria,
  .cta{
    padding:60px 20px;
  }

  /* Esto es lo que resuelve el "mapa muy grande" */
  .plano-container{
    width:100%;
    padding:0 15px;
    margin-bottom:30px;
  }

 .plano-container img{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
}
  }

  .gallery img{
    height:220px;
  }

  .whatsapp-float{
    width:55px;
    height:55px;
    right:15px;
    bottom:15px;
  }

}



  .hero h1{
    font-size:2rem;
  }


  }

}
.ubicacion{
    padding:100px 20px;
    background:#f8f8f8;
    text-align:center;
}

.ubicacion h2{
    margin-bottom:20px;
    color:#0B5B46;
}

.ubicacion p{
    max-width:800px;
    margin:0 auto 40px;
    line-height:1.8;
}

.mapa-container{
    width:100%;
    max-width:1100px;
    margin:0 auto 40px;
}

.mapa-container iframe{
    width:100%;
    height:500px;
    border:none;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.ubicacion-botones{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}
.videos{
    padding:100px 20px;
    background:#ffffff;
    text-align:center;
}

.videos h2{
    color:#0B5B46;
    margin-bottom:20px;
}

.videos-texto{
    max-width:700px;
    margin:0 auto 50px;
}

.videos-grid{
    display:flex;
    gap:25px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:10px;

}

.videos-grid video{
    min-width:400px;
    max-width:400px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);

}
  @media (max-width: 768px){

    .plano-container{
        width:100%;
        padding:0 10px;
    }

    .plano-container img{
        width:100%;
        height:auto;
        object-fit:contain;
    }

}
.videos-grid::-webkit-scrollbar{
    height:10px;
}

.videos-grid::-webkit-scrollbar-track{
    background:#f1f1f1;
    border-radius:10px;
}

.videos-grid::-webkit-scrollbar-thumb{
    background:#0B5B46;
    border-radius:10px;
}

.videos-grid::-webkit-scrollbar-thumb:hover{
    background:#084535;
}
/* Videos en móvil */
@media(max-width:768px){

    .videos-grid{
        display:flex;
        flex-direction:column;
        overflow-x:visible;
        gap:20px;
        padding:0;
    }

    .videos-grid video{
        width:100%;
        max-width:100%;
        min-width:100%;
        height:auto;
    }

}