* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BARRA DE NAVEGACIÓN */
.container-fluid {
  background-color: rgb(68, 120, 69) !important;
}
.container-fluid a {
  color: white !important;
}
.container-fluid a:hover {
  color: yellow !important;
}

.navbar-expand-lg,
.bg-body-tertiary {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.logoNavBar {
  width: 50px;
  background-color: white; /* Fondo blanco para el logo */
  border-radius: 10px; /* Esquinas redondeadas */
}

/* FOOTER */
.footer {
  width: 100%;
  height: auto;
  min-height: 50vh;
  background-color: rgb(68, 120, 69);
}

.derechos {
  text-align: center;
  color: white;
  padding: 10px;
  margin: 0;
}

.footer-contenedor {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: center;
  justify-content: center;
  color: white;
  padding: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.footer-segmento {
  text-align: center;
}

/* MAIN */
.quienes-somos {
  height: auto;
  min-height: 90vh;
  background-color: white; /* Fondo blanco */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 50px 8% 0;
  justify-content: space-around;
}

.quienes-somos h3 {
  color: rgb(68, 120, 69);
}

.main-home-description {
  max-width: 100vh;
}

.main-home-description h1 {
  color: rgb(74, 166, 81);
  font-family: 'Didact Gothic', sans-serif;
}

.main-home-description h3 {
  color: rgb(68, 120, 69);
}

.logo-container {
  text-align: center; /* Centrar la imagen */
  margin: 20px 0; /* Espaciado superior e inferior */
}

.imagen-principal {
  max-width: 100%; /* Ajusta el ancho máximo al 100% del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Asegura que la imagen se comporte como un bloque */
  margin: 0 auto; /* Centra la imagen horizontalmente */
}

/* Ajuste para vista de escritorio */
@media (min-width: 768px) { /* Cambia 768px al ancho que consideres como vista de escritorio */
  .imagen-principal {
    max-width: 60%; /* Ajusta el ancho máximo según lo desees (por ejemplo, 60%) */
  }
}

.imagen-seccion {
  max-width: 100%; /* Ajusta el ancho máximo al 100% del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Asegura que la imagen se comporte como un bloque */
  margin: 0 auto; /* Centra la imagen horizontalmente */
}

/* Línea de separación estilizada */
.linea-separacion {
  width: 100%; /* Ancho completo */
  height: 4px; /* Altura de la línea */
  background-color: rgb(68, 120, 69); /* Color de fondo verde */
  margin: 20px 0; /* Espaciado superior e inferior */
  border-radius: 2px; /* Esquinas ligeramente redondeadas */
}

/* Sombra opcional para darle un efecto más atractivo */
.linea-separacion {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.contenedor-valores {
  background-color: #CCEEBC;
  width: 100%;
  height: auto;
  min-height: 80vh;
  text-align: center;
  padding: 20px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)), url(imagenes/fondo-carbon.jpg);
  background-size: cover;
}

.contenedor-valores h3 {
  color: white;
}

.valores {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.valor {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 30px;
  padding: 30px;
  border-radius: 20px;
  background-color: white;
  width: 300px;
}

.zone {
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  -o-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}

/* ESTILOS PARA LA SECCIÓN DE PRODUCTOS */
.productos {
  background-color: white; /* Fondo blanco */
  padding: 40px 8%;
  text-align: center;
}

.seccion-titulo {
  color: rgb(68, 120, 69);
  margin-bottom: 20px;
}

.productos-contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.producto {
  background-color: RGB(240, 240, 240);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 250px;
  transition: transform 0.3s;
}

/* ESTILOS PARA LAS IMAGENES ADICIONALES */


.imagen-adicional {
  max-width: 100%; /* Ajusta el ancho máximo al 100% del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Asegura que la imagen se comporte como un bloque */
  margin: 0 auto; /* Centra la imagen horizontalmente */
}

/* Ajuste para vista de escritorio */
@media (min-width: 768px) { /* Cambia 768px al ancho que consideres como vista de escritorio */
  .imagen-adicional {
    max-width: 60%; /* Ajusta el ancho máximo según lo desees (por ejemplo, 60%) */
  }
}




/* ESTILOS PARA LA SECCIÓN DE CONTACTO */
.contacto {
  background-color: white; /* Fondo blanco */
  padding: 40px 8%;
  text-align: center;
}

.contact-info {
  background-color: #f0f0f0; /* Fondo gris claro para la caja interior */
  padding: 20px;
  border-radius: 10px; /* Esquinas redondeadas */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  margin-top: 20px; /* Espaciado superior */
}

.contact-info h3 {
  color: rgb(68, 120, 69);
  margin-bottom: 20px;
}

.contact-info p {
  margin: 10px 0; /* Espaciado entre los párrafos */
  font-size: 18px; /* Tamaño de fuente */
}

.contact-info i {
  color: rgb(68, 120, 69); /* Color de los íconos */
  margin-right: 8px; /* Espaciado entre el ícono y el texto */
}

.whatsapp-link {
  color: rgb(68, 120, 69); /* Color verde */
  text-decoration: none; /* Sin subrayado */
  font-weight: bold; /* Negrita */
}

.whatsapp-link:hover {
  text-decoration: underline; /* Subrayar al pasar el mouse */
}




/* Efectos de movimiento al hacer scroll */
@keyframes scroll-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quienes-somos h3,
.productos .seccion-titulo,
.imagen-principal,
.imagen-seccion,
.imagen-adicional {
  opacity: 0; /* Comienza invisible */
  animation: scroll-in 0.6s forwards; /* Aplicar animación */
}

.quienes-somos h3 {
  animation-delay: 0.3s; /* Retardo para h3 */
}

.productos .seccion-titulo {
  animation-delay: 0.5s; /* Retardo para el título de productos */
}

.imagen-principal {
  animation-delay: 0.7s; /* Retardo para la imagen principal */
}

.imagen-seccion {
  animation-delay: 0.9s; /* Retardo para imagen de sección */
}

.imagen-adicional {
  animation-delay: 1s; /* Retardo para imagen adicional */
}

/* Efectos de movimiento al hacer scroll */
@keyframes scroll-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-in {
  opacity: 0; /* Comienza invisible */
}

.scroll-in-active {
  opacity: 1; /* Visible al activar */
  animation: scroll-in 0.6s forwards; /* Aplicar animación */
}