/* Products grid */
.productos-grid {
    display: grid; /* Utiliza un diseño de cuadrícula */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Crea columnas adaptativas con un ancho mínimo de 200px */
    gap: 20px; /* Define un espacio de 20px entre los elementos */
    padding: 20px; /* Agrega un relleno interno de 20px */
    margin: 0 auto; /* Centra horizontalmente la cuadrícula */
    max-width: 1200px; /* Limita el ancho máximo de la cuadrícula a 1200px */
}

.producto-item {
    background: #fff; /* Establece el fondo blanco para cada ítem */
    border: 1px solid #ddd; /* Agrega un borde gris claro (#ddd) */
    border-radius: 8px; /* Redondea las esquinas con un radio de 8px */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Aplica una sombra ligera */
    overflow: hidden; /* Oculta contenido que se desborde del contenedor */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Crea una transición para el movimiento y la sombra */
}

.producto-item:hover {
    transform: translateY(-5px); /* Mueve el elemento 5px hacia arriba al pasar el cursor */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); /* Aumenta la intensidad de la sombra al pasar el cursor */
}

.producto-item img {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción original de la imagen */
    max-width: 150px; /* Tamaño máximo de la imagen en 150px */
    border-radius: 5px; /* Bordes redondeados de 5px */
    border-bottom: 1px solid #ddd; /* Agrega un borde inferior gris claro (#ddd) */
}

.producto-item a {
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: inherit; /* El enlace adopta el color del texto circundante */
    display: block; /* Hace que el enlace sea un bloque (ocupa todo el ancho) */
    padding: 10px; /* Agrega un relleno interno de 10px */
    text-align: center; /* Centra el texto del enlace */
}

.producto-item a:hover {
    color: #0056b3; /* Cambia el color del enlace a azul (#0056b3) al pasar el cursor */
}

.producto-item p {
    margin: 5px 0; /* Aplica un margen vertical de 5px a los párrafos */
    font-size: 14px; /* Define el tamaño de fuente en 14px */
}

.producto-item .item-negrita {
    font-weight: bold;
}


/* Responsive design */
@media (max-width: 768px) { /* Estilos para pantallas con un ancho máximo de 768px */
    h1, h2 {
        font-size: 1.5rem; /* Reduce el tamaño de los encabezados */
    }

    .producto-item img {
        height: 120px; /* Reduce la altura de las imágenes a 120px */
    }

    .producto-item p {
        font-size: 12px; /* Reduce el tamaño de fuente de los párrafos a 12px */
    }
}