.titulo-h{
    background: linear-gradient(180deg, #fbb500, #ffffff);
    text-align: center;
}
.img1 {
    display: flex; /* Centrar con Flexbox */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 500px; /* Ajusta la altura del contenedor según tu preferencia */
    margin: 20px 0; /* Margen opcional */
}
.img1 img {
    width: 500px; /* Ajusta el ancho en píxeles */
    height: 500px; /* Ajusta la altura en píxeles */
    object-fit: cover; /* Mantiene el contenido proporcionado dentro del tamaño */
    border-radius: 10px; /* Esquinas redondeadas opcionales */
}
.parrafo-n{
    font-weight: bold;
    text-align: center;
}
#productos
{
    padding: 15px; /* Espaciado interno para que el fondo se vea por las orillas */
    border-radius: 10px; /* Opcional: Esquinas redondeadas */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.tonicos{
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
}
.tonicos .tamaño-img
{
    width: 500px; /* Ajusta el tamaño máximo de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover;
    margin: 5px;
}
.tonicos:hover p {
    color: #007bff; /* Cambia el color del texto al pasar el cursor */
}
.tonicos:hover img {
    transform: scale(1.05); /* Hace un ligero zoom en la imagen */
    transition: transform 0.3s ease; /* Añade una animación suave */
}
.tonicos p
{
    font-size: 14px;
    color: #555;
    margin: 0;
}
.categoria-enlace {
    text-decoration: none;
    color: inherit;
    display: block;
}
/* Estilo para pantallas pequeñas */
@media (max-width: 768px) {
    #productos {
        display: grid; /* Cambia Flexbox a Grid */
        grid-template-columns: repeat(2, 1fr); /* Crea dos columnas de igual tamaño */
        gap: 15px; /* Espaciado entre los elementos */
        padding: 10px; /* Ajusta el padding para pantallas pequeñas */
        max-width: 768px;
        margin: 0 auto;
    }
    .tonicos {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 10px;
    }
    .tonicos .tamaño-img {
        width: 100px; /* Ajusta el tamaño de las imágenes en móviles */
        height: auto; /* Mantiene la proporción */
        margin: 0 auto; /* Centra las imágenes dentro del grid */
    }
    .tonicos p {
        font-size: 14px; /* Reduce el tamaño del texto */
        margin-top: 5px; /* Espaciado entre la imagen y el texto */
    }
    .img1{
        display: flex; /* Centrar con Flexbox */
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
        height: 350px; /* Ajusta la altura del contenedor según tu preferencia */
        margin: 20px 0; /* Margen opcional */
    }
    .img1 img {
        width: 350px; /* Ajusta el ancho en píxeles */
        height: 350px; /* Ajusta la altura en píxeles */
        object-fit: cover; /* Mantiene el contenido proporcionado dentro del tamaño */
        border-radius: 10px; /* Esquinas redondeadas opcionales */
}
}