/* ==========================================
   ESTILOS RESPONSIVOS (MEDIA QUERIES)
   ========================================== */

/* 1. Ajustes para tablets y pantallas medianas (<= 768px) */
@media (max-width: 768px) {
    .nav-container {
        padding: 0.75rem 1rem;
    }

    .enlaces {
        gap: 0.75rem;
    }

    .enlaces a {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }

    .shop-hero {
        padding: 2rem 1rem 1rem;
        text-align: center;
    }

    .shop-hero h2 {
        font-size: 1.75rem;
    }

    .contenedor-productos {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.25rem;
        padding: 1rem;
    }
}

/* 2. Ajustes para teléfonos móviles (<= 480px) */
@media (max-width: 480px) {
    header {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .nav-container {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }

    .enlaces {
        width: 100%;
        justify-content: center;
    }

    .contenedor-productos {
        grid-template-columns: 1fr; /* Un solo producto por fila en pantallas pequeñas */
        padding: 0.75rem;
    }

    .tarjeta-producto {
        max-width: 100%;
    }

    .img-wrapper {
        height: 200px; /* Reducimos la altura de la imagen en móvil */
    }

    .producto-info {
        padding: 1rem;
    }
}