/* css/productos.css */

.contenedor-productos {
    background-color: #ffffff;
    padding: 50px 0;
    min-height: 60vh;
}

/* 🌸 LA MAGIA ELÁSTICA: Convertimos la tarjeta en una columna flexible 🌸 */
.tarjeta-producto {
    display: flex; 
    flex-direction: column;
    height: 100%; /* Esto obliga a todas a medir lo mismo */
    text-decoration: none; 
    color: inherit;
    border-radius: 12px;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.tarjeta-producto:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    color: inherit;
}

.img-tarjeta {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain; /* 🌸 LA MAGIA: Aquí también evitamos que se recorten 🌸 */
    border-radius: 8px;
    background-color: #f8f9fa;
    margin-bottom: 15px;
}

.marca-tarjeta {
    color: #ff6b6b;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/* flex-grow: 1; empuja todo lo demás hacia abajo para que quede alineado */
.titulo-tarjeta {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.3;
    flex-grow: 1; 
}

.sku-tarjeta {
    font-size: 11px;
    color: #999;
    margin-bottom: 5px;
}

.precio-tarjeta {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin-bottom: 10px;
}

/* 🌸 Las insignias chiquitas para el catálogo 🌸 */
.contenedor-insignias {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
}

.insignia {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 10px;
    font-weight: bold;
}

.insignia-envio { background-color: #e8f5e9; color: #2e7d32; }
.insignia-retiro { background-color: #e3f2fd; color: #1565c0; }

/* 🌸 El botón rojo de agregar en el catálogo 🌸 */
.btn-catalogo {
    width: 100%;
    border-radius: 20px;
    font-weight: bold;
    padding: 10px;
    background-color: #ff6b6b;
    color: white;
    text-align: center;
    transition: background-color 0.3s;
    /* mt-auto asegura que el botón siempre quede pegado al piso de la tarjeta */
    margin-top: auto; 
}

.btn-catalogo:hover {
    background-color: #ff5252;
}

/* 🌸 Diseño para el texto de descuento por volumen 🌸 */
.texto-descuento-volumen {
    font-size: 12px;
    color: #e67e22; /* Un tono naranja bonito y sutil */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 🌸 Animación de saltito para el precio con descuento 🌸 */
@keyframes saltitoPrecio {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.animacion-saltito {
    animation: saltitoPrecio 0.4s ease-in-out;
    display: inline-block; /* Necesario para que el salto funcione bien */
}