/* =========================
   IMAGENES MISMO TAMAÑO
========================= */

/* .card-img-top {
    width: 100%;
    height: 200px; 
    object-fit: cover; 
    object-position: center;
} */

/* =========================
   IMAGENES UNIFORMES CATEGORIA
========================= */

.product-card .card-img-top {
    width: 100%;
    height: 200px;      /* 🔥 altura fija */
    object-fit: cover;  /* 🔥 recorte elegante */
    object-position: center;
}


/* =========================
   GRID RESPONSIVE PRO
========================= */

@media (max-width: 576px) {
    .row .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =========================
   CARD UNIFORME
========================= */

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* =========================
   IMAGENES UNIFORMES
========================= */

.product-card .card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

/* 📱 Mobile */
@media (max-width: 768px) {
    .product-card .card-img-top {
        height: 180px;
    }
}

/* 📱 Muy pequeño */
@media (max-width: 480px) {
    .product-card .card-img-top {
        height: 160px;
    }
}

/* =========================
   BODY FLEX (ALINEACION)
========================= */

.product-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* =========================
   TITULO FIJO (opcional PRO)
========================= */

.product-card .card-title {
    min-height: 48px;
    font-size: 16px;
}

/* =========================
   PRECIO
========================= */

.product-card .card-text {
    font-weight: 600;
}

/* =========================
   BOTON SIEMPRE ABAJO
========================= */

.product-card .btn {
    margin-top: auto;
}

/* =========================
   HOVER PRO
========================= */

.product-card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}


/* =========================
   CONTENEDOR DE IMAGEN (LA CLAVE)
========================= */

.product-card .img-container {
    width: 100%;
    height: 220px;
    padding: 12px; /* 🔥 aire elegante */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   IMAGEN PROPORCIONADA
========================= */

.product-card .img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 🔥 ya NO recorta */
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
    .product-card .img-container {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .product-card .img-container {
        height: 180px;
    }
}