*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   
}
body{
  font-family: 'Montserrat', sans-serif !important;
}
/*Estilos para el header*/
header {
  position: absolute;
  top: 0;
  width: 100%;
  transition: all 0.3s ease-in-out;
  background: transparent;
  z-index: 1020;
}

header.scrolled {
  position: fixed;
  background: rgba(0, 0, 0, 0.7); /* O el color que prefieras */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.navbar{
  display: flex;
  justify-content: end;

}
.navbar-nav .nav-link {
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra sutil */
  font-weight: 600;
}
.nav-item{
  display: flex;
  align-items: center;
}
.dropdown-menu {
  background: rgba(0, 0, 0, 0.8);
}
.dropdown-menu .dropdown-item {
  color: white;
}
.dropdown-menu .dropdown-item:hover {
  background: #007bff;
}
.btn{
  padding: 7px 15px;
  border-radius: 25px;
  background-color: #c48714;
  color: white;
  font-weight: bold;
  border: none;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
  cursor: pointer;
}
.btn:hover{
  background-color: #83590d;
}
#navbarNav{
  text-align: end;
  border-radius: 20px 0px 0px 20px;
  padding: 20px;

}
.nav-link {
  position: relative;
  color: white;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

/*Estilos generales del boton whatsapp*/
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  animation: breathe 2s ease-in-out infinite;
}

/*Estilos solo al icono whatsapp*/
.whatsapp-btn i {
  color: #fff;
  font-size: 24px;
  animation: beat 2s ease-in-out infinite;
  text-decoration: none;
}

/*Estilos con animation contorno respirando*/
@keyframes breathe {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/*Estilos de animacion del icono latiendo*/
@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Efecto de subrayado animado SOLO en los enlaces principales */
.navbar-nav > .nav-item:not(.dropdown) > .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background-color: #c48714;
  transition: width 0.3s ease-in-out;
}

/* Cambio de color en hover */
.navbar-nav > .nav-item:not(.dropdown) > .nav-link:hover {
  color: #c48714;
}

/* Animación del subrayado en hover */
.navbar-nav > .nav-item:not(.dropdown) > .nav-link:hover::after {
  width: 100%;
}

/* Asegurar que el icono de dropdown no se vea afectado */
.navbar-nav .dropdown-toggle::after {
  display: inline-block;
}
/*Estilos para el main*/

.carousel-item {
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}
.carousel-caption {
  position: absolute;
  left: 10%;
  color: white;
  max-width: 50%;
  z-index: 122;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  z-index: 11;
}
.carousel-caption-hero h2{
  font-size: 5rem;
  text-align: initial;
  line-height: 5rem;
  font-weight: 700;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra sutil */
}
.carousel-caption-hero p{
  text-align: initial;
  width: 75%;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra sutil */
  font-weight: 600;
  font-size: 18px;
}
.dropdown-menu .dropdown-item:hover{
  background-color: #c48714;
}

/*Estilos para los tabs*/
.nav-pills .nav-link {
  background: #f8f9fa;
  color: #333;
  margin-bottom: 10px;
  text-align: left;
  font-weight: bold;
}
.sectionTabProyect{
  position: relative;
}
.sectionTabProyect h2{
  font-size: 2.5rem;
  color: #c48714;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}
.sectionTabProyect h2 span{
  color: black;
  font-weight: 400;
}
.nav-pills .nav-link.active {
  background: #007bff;
  color: white;
}

.carousel img {
  height: 250px;
  object-fit: contain;
  border-radius: 10px;
}

.btn-primary {
  margin-top: 10px;
}

.list-unstyled li {
  position: relative;
  padding-left: 30px; /* Espacio para el ícono */
  font-size: 23px;
  line-height: 2;
}
 /*
.list-unstyled-home li::before {
  content: "✔"; Símbolo de check 
  font-size: 14px;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #28a745;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}*/
.nav-pills .nav-link.active{
  background: #c48714;
}
.carousel-tab .carousel-inner .carousel-item{
  height: auto;
}
.gallery-container {
  text-align: center;
}

.main-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 10px;
}

.thumbnail-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tab-pane .row .col-md-6 h2{
  font-size: 2rem;
}

.thumbnail {
  width: 120px;
  height: auto;
  cursor: pointer;
  border-radius: 5px;
  transition: transform 0.3s;
}


.thumbnail:hover {
  transform: scale(1.1);
}

.svg-leaf{
  width: 231px;
  position: absolute;
  right: 0px;
  top: -88px;
  z-index: 111;
}

/* Estilos del check*/

.about-us-section {
  padding-top: 10px;
  background-color: #f8f9fa;
}

.about-us-section .content h2 {
  font-size: 3.5rem;
  line-height: 3.6rem;
  margin-bottom: 15px;
  color: #c48714;
}
.feature-card {
  width: 280px;
}

.about-us-section .content p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 20px;
}

.about-us-section .content ul {
  list-style: none;
  padding: 0;
}

.about-us-section .content ul li {
  font-size: 1rem;
  color: #444;
  margin-bottom: 10px;
}

.about-us-section .btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 25px;
}

.image-container {
  position: relative;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
}
.dream-home-section {
  padding: 80px 20px;
  background: linear-gradient(to top, #4CAF50, #ffffff 60%);
  text-align: center;
}

.main-title {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 20px;
  font-weight: bold;
}

.subtitle {
  font-size: 1.3rem;
  color: #555;
  margin-bottom: 30px;
}

.features-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.feature-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
  text-align: center;
  width: 220px;
  transition: transform 0.3s ease-in-out;
}

.feature-card:hover {
  transform: translateY(-10px);
}

.feature-card img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.feature-card h3 {
  font-size: 1.2rem;
  color: #333;
  font-weight: 600;
}

.main-title span{
  color:#c48714
}



.contact-section {
  padding: 10px 20px;
  background: linear-gradient(to bottom, #4CAF50, #ffffff 60%);
}

.contact-info h3 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: 600;
}

.contact-info p {
  font-size: 1.2rem;
  color: #555;
}

form {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

.form-group {
  margin-bottom: 15px;
}

input, select, textarea {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #f9f9f9;
  font-size: 1rem;
  outline: none;
}

textarea {
  resize: none;
  height: 100px;
}
.banner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto; /* Ajusta según tu diseño */
  background-color: #f4f4f4;
}

.banner img {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.banner svg {
  width: 100%;
  height: auto;
}

.button-large {
  width: 100%;
  padding: 12px;
  background: #c48714;
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}


.servicios-section {
  background: url('assets/bg2.jpg') center/cover no-repeat;
  padding: 80px 20px;
  text-align: center;
  color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.servicios-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}
.contenido{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
.contenido h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}
.contenido h2 span{
  color: #c48714;
}

.contenido p {
  font-size: 2rem;
  margin: auto;
}

.celular-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.celular {
  width: 250px;
  height: 500px;
  background: url('assets/celular.svg') center/cover no-repeat;
  border-radius: 30px;
  padding: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.pantalla {
  width: 90%;
  height: 90%;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 10px;
}

/* 💬 Mensajes de texto */
.mensaje {
  position: absolute;
  background: #fff;
  padding: 10px 15px;
  border-radius: 15px;
  max-width: 260px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  animation: latido 1.5s infinite ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #333;
}
/* 💬 Agregar la "colita" del mensaje */
.mensaje::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background: inherit;
  bottom: -5px;
  left: 15px;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  color: #333;
}

/* 📜 Ocultar descripción inicialmente */
.descripcion {
  display: none;
  font-weight: normal;
  font-size: 12px;
  margin-top: 5px;
}

/* 🔽 Expandir mensaje al hacer clic */
.mensaje.activo {
  max-width: 180px;
  animation: none;
  background: #e3f2fd;
  border: 1px solid #2196F3;
}
.mensaje.activo .descripcion {
  display: block;
}

@keyframes latido {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}


/* 📩 Posiciones de los mensajes */
#mensaje1 { 
  top: 10px; 
  left: -180px; 
}
#mensaje2 { 
  top: 150px; 
  right: -180px; 

}
#mensaje3 { 
  bottom: 10px;
   left: -180px; 

}
.mensaje p{
  font-weight: lighter;
}

/* 🏹 Ajuste de colita según la posición del mensaje */
#mensaje1::after {
  right: -20px;
  left: auto;
  transform: rotate(270deg);
  top: 10px;
}
 /* A la izquierda */
#mensaje2::after {
  right: 257px;
  left: auto;
  transform: rotate(90deg);
  top: 10px;
}  /* A la izquierda */
#mensaje3::after { 
  right: -20px;
  left: auto;
  transform: rotate(270deg);
  bottom: 10px;
 }  /* A la derecha */


.footer {
  background: #1E1E1E;
  color: #fff;
  padding: 60px 20px;
}

.footer .container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.footer-column h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #4CAF50;
}

.footer-column p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 8px;
}

.footer-column ul li a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.footer-column ul li a:hover {
  color: #83590d;
}

.social-icons a:hover svg {
  fill:  #83590d;
}
.social-icons a{
  color: #c48714;
}

.footer-column img{
  width: 80px;
}
.footer-bottom {
  text-align: center;
  background-color: #222; /* Color oscuro */
  color: #fff; /* Texto blanco */
  padding: 15px 0;
  font-size: 14px;
}

.footer-bottom a {
  color: #83590d; /* Verde o el color que prefieras */
  text-decoration: none;
  font-weight: bold;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

.proyecto-detalle{
  margin-top: 120px;
}

.text-primary-lote{
  color: #c48714;
}


/* Contenedor principal */
.contenedor-proyecto {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: auto;
  padding: 0px 20px;
}

/* G A L E R Í A */
.galeria-proyecto {
  width: 50%;
  max-width: 600px;
}

.imagen-principal img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
}

.miniaturas {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
}

.miniaturas img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s;
}

.miniaturas img:hover {
  transform: scale(1.1);
}

/* D E T A L L E S */
.detalles-proyecto {
  width: 40%;
  max-width: 400px;
}

.detalles-proyecto h2 {
  font-size: 24px;
  margin-bottom: 15px;
}

/* L I S T A   D E   A M E N I D A D E S */
.lista-amenidades {
  list-style: none;
  padding: 0;
}
.galeria-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin: auto;
}

.galeria-main-container {
  width: 100%;
  text-align: center;
}
.proyecto-detalle{
  position: relative;
}

.galeria-main {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 8px;
}
.divBG{
  background: 
        linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), 
        url('assets/bg3.svg');
    background-size: cover;
    background-position:initial;
    position: absolute;
    width: 100%;
    height: 250px;
    top: -160px;
    z-index: -1;
}

.galeria-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.galeria-thumbs img {
  width: 120px;
  height: 110px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 5px;
  transition: border 0.3s;
}

.galeria-thumbs img:hover {
  border: 2px solid gold;
}

/* ===== Lightbox (pantalla completa) ===== */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000000;
}

.lightbox img {
  max-width: 60%;
  max-height: 90%;
  object-fit: contain;
  cursor: grab;
  transition: transform 0.3s ease;
}

/* Botón de Cerrar */
.lightbox .close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 35px;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

/* Controles de Zoom */
.lightbox-controls, .lightbox-controls-b {
  position: absolute;
  bottom: 20px;
  display: flex;
  gap: 15px;
}


.zoom-btn {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 8px 12px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
}

.zoom-btn:hover {
  background: white;
}

.lista-amenidades li {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
/* Controles de zoom */
#zoom-in, #zoom-out {
  position: absolute;
  bottom: 20px;
  font-size: 24px;
  background: rgba(255, 255, 255, 0.685);
  border: none;
  padding: 0px 15px;
  margin: 5px;
  cursor: pointer;
}
.zoom-controls-b{
  margin-top: 75px;
  position: absolute;
  display: flex ;
  gap: 15px;
  text-align: center;
  right: 40%;
}
#zoom-in  { right: 0px; }
#zoom-out{ right: -70px; }

.descarga-info {
  text-align: center;
  padding: 20px;
  position: relative;
}

.separador {
  width: 100%;
  height: 2px;
  background-color: #ddd;
  margin: 20px 0;
}

.contenido {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-descarga {
  background-color: #bd041c;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s;
}

.btn-descarga:hover {
  background-color: #7c0015;
}

.redes-sociales {
  display: flex;
  gap: 10px;
}

.btn-redes {
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  transition: opacity 0.3s;
}

.whatsapp {
  background-color: #25d366;
}

.facebook {
  background-color: #1877f2;
}

.btn-redes:hover {
  opacity: 0.8;
}
.video-container-lote{
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: center;
}
.content-section {
  padding: 40px 20px;
}
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Aspect ratio 16:9 */
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.map-container {
  width: 100%;
  min-height: 300px;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
}
.map-container iframe{
  width: 100%;
  min-height: 450px;
}
.container-info-detalles{
  padding: 0px 20px;
}
.container-info-detalles h2, .etapas h2, .proyectos-slider h2{
  font-size: 2.5rem;
  color: #c48714;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}
.container-info-detalles ul li{
  list-style: none;
}
.info-detalles-p-main{
 font-style: italic;
 text-align: center;
 margin-bottom: 25px
}
.container-info-detalles p{
  text-align: justify;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
}
/* Sección de Etapas */
.etapas {
  text-align: center;
  padding: 50px 20px;
  background: #f9f9f9;
}
.proyectos-slider h2 span,
.container-info-detalles h2 span{
  color: #1E1E1E;
}

/* Contenedor de las tarjetas */
.etapas-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Tarjetas flotantes */
.etapa-card {
  position: relative;
  width: 770px;
  height: 585px;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.etapa-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Imagen dentro de la tarjeta */
.etapa-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Título dentro de la tarjeta */
.etapa-card h3 {
  margin: 10px 0;
  font-size: 18px;
}

/* Sección del slider */
.proyectos-slider {
  text-align: center;
  padding: 50px 20px;
  background: #f4f4f4;
}

/* Contenedor del slider */
.slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 80%;
  margin: auto;
  overflow: hidden;
}
.proyecto-detalle .container h1{
  font-size: 4.5rem;
  line-height: 4.6rem;
  text-align: center;
}
/* Slider */
.slider {
  display: flex;
  gap: 20px;
  overflow: hidden;
  scroll-behavior: smooth;
  width: 100%;
  white-space: nowrap;
}

/* Cards */
.card {
  position: relative;
  width: 300px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

/* Imagen principal */
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;

}

/* Mini-card (Logo + Enlace) */
.mini-card {
  background: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
  white-space: normal;
}

.mini-card img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.mini-card a {
  text-decoration: none;
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

/* Botones de navegación */
.prev-btn, .next-btn {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px 15px;
  font-size: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  transition: 0.3s;
  z-index: 10000;
}

.prev-btn:hover, .next-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }




/* 🔹 Hero con background full */
.nosotros {
  position: relative;
  text-align: center;
}

.hero {
  width: 100%;
  height: 85vh;
  background: url('assets/bg.jpg') no-repeat center center/cover;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 5%;
  color: white;
}

.hero-content {
  max-width: 50%;
}

.hero h2 {
  font-size: 4rem;
  line-height: 4rem;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: initial;

}

.hero h1 {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: normal;
  text-align: initial;
}

/* 🔹 Contenedor de Cards */
.cards-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  position: relative;
  top: -50px; /* Para que floten sobre el main */
}

.card-nos {
  width: 300px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  text-align: justify;
  position: relative;
  transition: transform 0.3s ease-in-out;
  overflow: visible;
}
.card-nos img{
  width: 80px !important;
  height: 80px !important;
  background-color: white;
  border-radius: 50%;
  padding: 10px;
  top: -50px;
}
.card-nos h3{
  margin-top: 20px;
}

.card:hover {
  transform: translateY(-10px);
}

/* 🔹 Logo flotante */
.card-logo {
  width: 60px !important;
  height: 60px !important;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}



.equipo-nos {
  position: relative; /* Necesario para que el ::before se posicione correctamente */
  background: url('assets/bg5.svg') no-repeat center center/cover;
  padding: 60px 20px;
  text-align: center;
  z-index: 1; /* Asegura que el texto esté encima del fondo */
}

/* Pseudo-elemento ::before para el degradado */
.equipo-nos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Aplica el degradado */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 100%);
  
  /* Evita que afecte el contenido */
  z-index: -1; 
}

.titulo-nos {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: #ffffff;
  text-shadow: 4px 4px 15px rgba(0, 0, 0, 0.9);
}
.titulo-nos span{
  color: #c48714;
}

.descripcion-nos {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 40px;
}

.slider-nos {
  overflow: hidden;
  width: 100%;
  max-width: 1400px; /* Ajusta el tamaño en escritorio */
  margin: auto;
  display: flex;
  justify-content: center; /* Centra los elementos en escritorio */
}
.slider-wrapper-nos {
  display: flex;
  gap: 20px;
  transition: transform 0.5s ease-in-out;
}

.miembro-nos {
  position: relative;
  width: 328px; /* Ancho fijo */
  height: 571px; /* Alto fijo */
  overflow: hidden;
  border-radius: 15px;
  cursor: pointer;
  flex: 0 0 auto; /* Evita que el flexbox lo deforme */
  margin: 0 10px; /* Espaciado entre miembros */
  background: #fff; /* Asegura que no sean transparentes */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
}

.slider-wrapper-nos {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: max-content; /* Se ajusta al contenido */
}

.miembro-nos {
  width: 328px; /* Tamaño fijo para evitar espacios */
  height: 571px;
  flex: 0 0 auto; /* Evita que se expandan */
  border-radius: 15px;
}

.foto-nos {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.miembro-nos:hover .foto-nos {
  transform: scale(1.1);
}

.miembro-nos:hover .foto-nos:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: "";
  background: #000;
  opacity: 0.5;
  z-index: 0;
}
.info-nos {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.miembro-nos:hover .info-nos {
  display: flex;
}


.whatsapp-nos img,
.facebook-nos img,
.instagram-nos img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s;
}

.whatsapp-nos:hover img,
.facebook-nos:hover img,
.instagram-nos:hover img {
  filter: sepia(100%) saturate(200%) hue-rotate(15deg) brightness(1.2) contrast(1.2);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.porque-elegirnos {
  padding: 60px 20px;
  text-align: center;
}

.porque-elegirnos h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: #c48714;
}

.porque-elegirnos p {
  font-size: 2rem;
  color: #555;
  margin: 0 auto 80px;
}

.cards-container-white {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.card-white {
  background: white;
  padding: 20px;
  width: 250px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  text-align: center;
  transition: transform 0.3s ease-in-out;
}
.card-white p{
  margin-bottom: 20px;
}

.card-white:hover {
  transform: translateY(-5px);
}

.card-white .icon {
  margin-bottom: 40px;
  color: #FFD700; /* Amarillo dorado */
}

.card-white h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 10px;
}

.card-white p {
  font-size: 1rem;
  color: #666;
}

.nuestros-aliados {
  background-color: #D9961ABF;; /* Blanco hueso */
  padding: 60px 20px;
  text-align: center;
}

.nuestros-aliados h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 15px;
}

.nuestros-aliados p {
  font-size: 1.1rem;
  color: #555;
  max-width: 600px;
  margin: 0 auto 40px;
}

.aliados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  justify-items: center;
}

.aliado {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}

.aliado img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
}

.aliado img:hover {
  transform: scale(1.1);
}


@media (max-width: 768px) {
  .carousel-caption-hero h2{
    font-size: 4rem;
    line-height: 4rem;
  }
  .porque-elegirnos h2{
    font-size: 2rem;
    line-height: 2rem;
  }
  .porque-elegirnos .container p{
    font-size: 18px;
    line-height: 24px;
  }
  .slider-container { max-width: 90%; }
  .card { width: 350px; }

  .carousel-caption-hero p{
    width: 100%;
  }
  .logo{
    max-height: 75px !important;
  }
  .carousel img {
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
  }
  .svg-leaf {
    width: 120px;
    top: -110px;
  }
  .hero {
    height: 80vh;
    justify-content: center;
    text-align: center;
    padding: 0 10%;
}
.hero h2{
  font-size: 2rem;
  line-height: 2rem;
}
.hero h1{
  font-size: 18px;
  line-height: 24px;
}

.hero-content {
    max-width: 100%;
}

.cards-container {
    flex-direction: column;
    align-items: center;
    top: -20px;
}
#mensaje1 {
  top: 10px;
  left: -40px;
}
#mensaje2 {
  left: 30px;
}
#mensaje3 {
  left: -40px;
}
.proyecto-detalle .container h1{
  font-size: 3.5rem;
  line-height: 3.6rem;
  text-align: center;
}
.slider-nos {
  justify-content: flex-start; /* Mueve el slider en móviles */
}
}
.descripcion-nos{
  font-size: 2rem;

}
.btn{
    margin: 0px !important;
}
#navbarNav {
  text-align: end;
    
}

@media (max-width: 480px) {
  .carousel-caption-hero h2,.proyecto-detalle .container h1{
    font-size: 3rem;
    line-height: 3rem;
  }
  .carousel-caption{
    max-width: 70% !important;
  }
  .svg-leaf {
    width: 99px;
  }
  .about-us-section .content h2 {
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin: 40px 0;
  }
  .etapa-card img {
    width: 95%;
    height: 80%;
    object-fit: contain;
  }
  .thumbnail {
    width: 160px;
    height: 140px;
  }


}
/* 🔹 Estilos para pantallas grandes (+1400px) */
@media (min-width: 1400px) {
  .carousel-caption-hero h2 {
    font-size: 6.5rem;
    line-height: 6.6rem;
  }
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1605px;
  }
  .navbar-expand-lg .navbar-nav .nav-link{
    font-size: 24px;
  }
  .carousel-caption-hero p{
    font-size: 1.5rem;
  }
  .btn {
    padding: 17px 45px;
  }
  .sectionTabProyect h2, .main-title{
    font-size: 5.5rem;
  }
  .thumbnail {
    width: 250px;
  }

  .about-us-section .content h2, .titulo-nos, .porque-elegirnos h2 {
    font-size: 5rem;
    line-height: 5.1rem;
  }
  .contenido h2 {
    font-size: 5.5rem;
    line-height: 5.1rem;
    margin-bottom: 15px;
  }

}