/* ====================================================
   TIENDA MONDELINN - CUADRÍCULA WHITE PREMIUM
==================================================== */
:root {
    --mondelinn-purple: #667eea;
    --mondelinn-purple-glow: rgba(102, 126, 234, 0.25);
    --glass-bg: rgba(255, 255, 255, 0.92); /* Blanco translúcido limpio */
    --glass-border: rgba(102, 126, 234, 0.25); /* Borde sutil morado */
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.04), 0 4px 20px rgba(102, 126, 234, 0.1);
    --text-dark: #1e293b;
    --text-muted: #64748b;
}

.productos-grid-container { 
    max-width: 1100px; /* Contenedor ajustado */
    margin: 3rem auto; 
    padding: 0 20px; 
}

.productos-grid-container h2 { 
    text-align: center; 
    font-family: 'Playfair Display', serif; 
    margin-bottom: 2.5rem; 
    color: var(--text-dark);
    font-size: 30px; 
    font-weight: 700;
}

/* Configuración de la cuadrícula compacta */
.productos-grid {
    display: grid;
    /* Reducido a 230px para tarjetas más delgadas */
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); 
    gap: 25px; 
}

/* --- Tarjeta Individual (Estilo Glassmorphism Premium) --- */
.producto-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px; 
    border: 1px solid var(--glass-border);
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02); 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                border-color 0.3s ease;
    opacity: 1; 
}

/* Hover de toda la tarjeta */
.producto-card:hover {
    transform: translateY(-6px); 
    box-shadow: var(--glass-shadow); 
    border-color: rgba(102, 126, 234, 0.5); /* El borde se pinta ligeramente más de morado */
}

/* --- Imagen con Efecto Zoom --- */
.producto-img {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.producto-img img { 
    width: 100%; 
    height: 250px; /* Imagen más chaparrita */
    object-fit: cover; 
    display: block; 
    transition: transform 0.6s ease; 
}

.producto-card:hover .producto-img img {
    transform: scale(1.08); 
}

/* --- Información y Textos --- */
.producto-info { 
    padding: 1.5rem 1.2rem; 
    text-align: center; 
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    background: transparent; /* Transparente para que se vea el glass effect */
    position: relative;
    z-index: 2; 
}

.producto-info h3 { 
    font-size: 16px; 
    color: var(--text-dark);
    margin: 0 0 8px 0;
    font-weight: 600;
}

.precio { 
    color: var(--mondelinn-purple); /* Precio en el color de acento principal */
    font-weight: 700; 
    font-size: 16px;
    display: block; 
    margin: 0 0 20px 0; 
}

/* --- Botón Premium (Outline a Sólido) --- */
.btn-ver { 
    display: inline-block; 
    padding: 10px 20px; 
    border: 1.5px solid var(--mondelinn-purple); 
    border-radius: 30px; 
    background: transparent;
    color: var(--mondelinn-purple); 
    text-decoration: none; 
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease; 
    margin-top: auto; 
}

.btn-ver:hover { 
    /* Al pasar el mouse se pinta de morado sólido con el resplandor de la marca */
    background: var(--mondelinn-purple);
    border-color: transparent;
    color: #ffffff; 
    box-shadow: 0 8px 20px var(--mondelinn-purple-glow);
    transform: translateY(-2px);
}