/* Estilo para el contenedor principal */
.contenedor-principal {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* margin: 0; */
    text-align: justify;
    padding: 0;
    /* margin-bottom: -1rem; */
}

/* Estilo para el contenedor de la imagen */
#imagen-informati {
    width: 50%; /* Ocupa el 50% en pantallas grandes */
    padding: 1px;
    box-sizing: border-box;
}

#imagen-informati img {
    width: 100%; /* Imagen ocupa todo el ancho del contenedor */
    height: auto;
    display: block;
}

/* Estilo para el contenedor de texto */
.texto-derecha {
    width: 50%; /* Ocupa el otro 50% en pantallas grandes */
    padding: 10px;
    box-sizing: border-box;
    text-align: center; /* Centra el texto dentro del contenedor */
}

/* Centra los encabezados */
.texto-derecha h2 {
    margin: 0;
    padding: 10px 0;
    text-align: center;
}

.texto-derecha h3 {
    margin: 0;
    padding: 10px 0;
    text-align: justify; /* Texto alineado a ambos lados */
}

.texto-centrado {
    width: 90%; /* Ocupa el otro 50% en pantallas grandes */
}

#manteca {
    width: 60px;
}

/* Estilo para el contenedor de la cuadrícula */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
    gap: 20px; /* Espacio entre los elementos */
    padding: 10px;
}

/* Estilo para cada elemento de la cuadrícula */
.grid-item {
    text-align: center;
}

.grid-item img {
    width: 60%; /* Hace las imágenes más pequeñas */
    height: auto;
    border-radius: 1px;
    transition: transform 0.3s ease, filter 0.3s ease; /* Animación al pasar el ratón */
}

.grid-item img:hover {
    transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
    filter: brightness(90%); /* Oscurecimiento al pasar el ratón */
}

/* Estilo responsivo: cambia a una columna en pantallas pequeñas */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }

    .grid-item img {
        width: 100%; /* Imagen ocupa el 100% del contenedor en móvil */
    }
}

/* Estilos responsivos para pantallas pequeñas */
@media (max-width: 768px) {
    .contenedor-principal {
        flex-direction: column; /* Apila los elementos verticalmente */
        margin-top: 2rem;
    }

    #imagen-informati,
    .texto-derecha {
        width: 100%; /* Ambos elementos ocupan el 100% en pantallas pequeñas */
    }

    #imagen-informati {
        order: -1; /* Coloca la imagen primero en pantallas pequeñas */
    }

    .texto-derecha h2 {
        font-size: 1.6rem; /* Tamaño ajustado de encabezado en móviles */
    }

    .texto-derecha h3 {
        font-size: 1rem; /* Tamaño reducido para subtítulos en móviles */
    }
}