body {
    margin: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

hr {
    color: black;
}

.barra-navegacion {
    background-color: royalblue;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80px; /* Reducir la altura para dispositivos móviles */
    padding: 0 10px; /* Agregar un espacio alrededor de la barra de navegación */
}

.title {
    color: white;
}

.navegacion {
    text-align: right;
    display: flex; /* Asegurarse de que la navegación se muestre en dispositivos de escritorio */
}

.navegacion a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    transition: color 0.5s, background-color 0.8s;
    border-radius: 15px;
    margin: 10px;
}

.navegacion a:hover {
    color: royalblue;
    background-color: white;
}

.toggle-menu {
    display: none; /* Ocultar el botón de menú por defecto en dispositivos de escritorio */
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    padding: 15px;
}

.imageFacebook {
    width: 350px;
    height: 350px;
}

.image-inicio {
    width: 375px;
    height: 410px;
}

@media only screen and (max-width: 1180px) {
    .title {
        font-size: 23px;
    }
}

@media only screen and (max-width: 1050px) {
    .title {
        font-size: 22px;
    }
}

@media only screen and (max-width: 950px) {

    .title {
        font-size: 19px;
    }
}


@media only screen and (max-width: 768px) {

    .title {
        font-size: 15px;
    }

    .toggle-menu {
        display: block; /* Mostrar el botón de menú en dispositivos móviles */
    }
    
    .navegacion {
        display: none; /* Ocultar la navegación en dispositivos móviles */
        flex-direction: column; /* Apilar los enlaces verticalmente */
        background-color: royalblue; /* Cambiar el color de fondo de la navegación móvil */
        position: absolute;
        top: 80px; /* Ajustar la distancia desde la parte superior */
        left: 0;
        right: 0;
    }
    
    .navegacion.active {
        display: flex; /* Mostrar la navegación cuando se active en dispositivos móviles */
    }

    .imageFacebook {
        width: 200px;
        height: 200px;
    }

    .Image-banner-1 {
        width: 468;
        height: 220;
    }
}

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

.Inicio h2{
    color: black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.navegacion a:hover {
    color: black;
    background-color:blue;
    font-size: 110%;
}

.contenedor-galeria {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en múltiples líneas */
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 0px; /* Espacio entre las imágenes */
}

.Producto-image {
    width: calc(50% - 10px); /* Ancho del 50% menos el espacio entre las imágenes */
    margin-bottom: 10px; /* Espacio entre las filas */
    position: relative;
}

.contenedor-imagen {
    position: relative;
    width: 200px; /* Ajusta el ancho de la imagen según sea necesario */
}

.texto-inferior {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente */
    color: white;
    padding: 5px 10px; /* Espaciado interior */
    font-size: 14px; /* Tamaño de letra */
    line-height: 1.2; /* Altura de línea */
}


.Producto-image img {
    width: 100%; /* Ancho del 100% del contenedor */
    height: auto; /* Altura automática para mantener la proporción */
    max-width: 300px; /* Ancho máximo de la imagen */
    max-height: 300px; /* Altura máxima de la imagen */
    object-fit: cover; /* Escala la imagen para cubrir el contenedor manteniendo la relación de aspecto */
    display: block; /* Elimina el espacio extra debajo de la imagen */
}

@media only screen and (max-width: 600px) {
    .Producto-image {
        width: 100%; /* Cambia el ancho a 100% en dispositivos móviles */
    }
}

.Image-banner-1 {
    width: 568px; 
    height: 320px;
}