/* Estilos generales */
    body {
      background: linear-gradient(to right, #41A7D1, #4A00E0);
      color: white;
      font-family: 'Roboto', sans-serif;
    }

    /* Estilos para el slider */
    .carousel-item img {
      width: auto;
      height: auto;
      object-fit: cover;
    }

    /* Estilos para la sección de textos */
    #textos {
      padding: 50px 0;
    }

    #textos h3 {
      text-align: center;
      margin-bottom: 20px;
    }

    .texto-box {
      background-color: rgba(255, 255, 255, 0.2);
      padding: 20px;
      border-radius: 20px;
      margin-bottom: 20px;
    }

    .texto-box h3,
    .texto-box p {
      margin: 0;
    }

    /* Estilos para la sección de trabajos realizados */
    #trabajos-realizados {
      padding: 50px 0;
    }

    #trabajos-realizados h2 {
      text-align: center;
      margin-bottom: 30px;
    }

    .trabajo {
      margin-bottom: 30px;
    }

    .trabajo img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      cursor: pointer;
    }

    .imagen-box {
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      overflow: hidden;
    }

    /* Media queries para dispositivos móviles */
    @media (max-width: 767px) {
      .texto-box {
        margin-right: 15px;
        margin-left: 15px;
      }
      



    }

  /* Estilos para el pie de página */
  footer p {
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
    color: #888;
  }

  footer a {
    color: #4CAF50; /* Color del enlace */
    text-decoration: none; /* Quitar subrayado */
    transition: color 0.3s; /* Transición suave del color */
  }

  footer a:hover {
    color: #2E8B57; /* Cambiar color al pasar el mouse */
  }


    /* Estilos para el footer */
    footer {
    background-color: #333; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
    text-align: center; /* Texto centrado */
    padding: 20px 0; /* Margen superior e inferior */
  }

  footer p {
    margin: 5px 0; /* Espacio entre párrafos */
  }

  footer a {
    color: #4CAF50; /* Color del enlace */
    text-decoration: none; /* Quitar subrayado */
    transition: color 0.3s; /* Transición suave del color */
  }

  footer a:hover {
    color: #2E8B57; /* Cambiar color al pasar el mouse */
  }


  /* Estilos para el slider */
.carousel-item img {
  width: auto;
  height: auto;
  
}


/* Media query para dispositivos móviles */
@media (max-width: 700px) {
  .carousel-item img {
    max-height: 220px; /* Ajusta este valor según sea necesario */
  }
}
/* Estilos para el slider */
.banner-img {
  max-height: 400px; /* Altura máxima del banner en computadoras */
  margin: 0 auto; /* Centra horizontalmente la imagen */
}

/* Media query para dispositivos móviles */
@media (max-width: 700px) {
  .banner-img {
    max-height: 220px; /* Altura máxima del banner en dispositivos móviles */
  }


}

/* Estilos para las imágenes del slider */
.banner-img {
  max-height: 400px;
}

/* Media query para dispositivos móviles */
@media (max-width: 700px) {
  .banner-img {
    max-height: 220px;
  }

}
.navbar-brand {
  font-size: 24px;
  font-weight: bold;
  color: #fff; /* Color blanco */
  text-transform: uppercase;
}

.pollo {
     width: 350px;
     height: 250px;

}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Asegura que el overlay esté encima de todo */
}

.overlay img {
  max-width: 90%;
  max-height: 90%;
}

.boton-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}






/* Estilos para la galería de imágenes */
.galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* Centrar las imágenes horizontalmente */
}

/* Estilos para el contenedor de cada imagen */
.imagen-container {
  position: relative;
  overflow: hidden; /* Ocultar contenido que se salga del contenedor */
  border-radius: 10px; /* Añadir bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agregar sombra */
}

/* Estilos para las imágenes */
.pollo {
  width: 300px;
  height: 250;
  transition: transform 0.3s ease; /* Agregar transición suave */
}

/* Estilos al pasar el ratón sobre la imagen */
.pollo:hover {
  transform: scale(1.1); /* Aumentar tamaño al pasar el ratón */
}

/* Estilos para el botón de cerrar */
.cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.cerrar:hover {
  background-color: #555;
}


/* Estilos para el botón de cerrar */
.cerrar {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.cerrar:hover,
.cerrar:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* Estilos para la clase pollo (imágenes) */
.pollo {
  border: 4px solid #41A7D1; /* Borde sólido de 2px con color gris claro */
  border-radius: 5px; /* Bordes redondeados */
  margin: 5px; /* Margen alrededor de cada imagen */
}




/* Estilos para el botón de cerrar */
.boton-cerrar {
  position: absolute; /* Posiciona el botón de forma absoluta dentro del contenedor */
  top: 5px; /* Ajusta la distancia desde la parte superior del contenedor */
  right: 5px; /* Ajusta la distancia desde el lado derecho del contenedor */
  z-index: 1; /* Asegura que el botón esté por encima de la imagen */
  background-color: #fff; /* Color de fondo del botón */
  border: none; /* Sin borde */
  border-radius: 50%; /* Bordes redondeados para un aspecto más suave */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  padding: 5px; /* Ajusta el espacio dentro del botón */
}


/* Estilos para la imagen abierta */
.imagen-abierta {
  max-width: 100%; /* Establece el ancho máximo de la imagen al 100% del contenedor */
  height: auto; /* Permite que la altura se ajuste automáticamente para mantener la proporción */
}







.boton-cerrar {
  /* Estilos personalizados */
  background-color: #dc3545; /* Color de fondo */
  color: #fff; /* Color del texto */
  border: none; /* Sin borde */
  padding: 8px 16px; /* Espaciado interno */
  border-radius: 4px; /* Borde redondeado */
  font-size: 16px; /* Tamaño de fuente */
}

.boton-cerrar:hover {
  /* Estilos al pasar el mouse */
  background-color: #c82333; /* Color de fondo al pasar el mouse */
}