body{
    background:linear-gradient(135deg, #f9f6f2, #f3ede6);
    font-family:Georgia;
}

/* ===== TITULO ===== */
.titulo{
    text-align:center;
    color:#5a2e1f;
    margin-bottom:25px;
    font-weight:bold;
    font-size:28px;
}

/* ===== CATEGORÍAS ===== */
.categorias{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:25px;
}

.btnCat{
    background:#f3ede6;
    border:1px solid #e8d6bd;
    padding:6px 14px;
    border-radius:20px;
    cursor:pointer;
    transition:0.3s;
    font-size:14px;
}

.btnCat:hover{
    background:#d4af7f;
    color:white;
}

.btnCat.active{
    background:#5a2e1f;
    color:white;
}

/* ===== GRID FINO 🔥 */
.productosGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:18px;
}

/* ===== TARJETAS ===== */
.cardProducto{
    background:white;
    border-radius:18px;
    padding:10px;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.07);
    transition:0.3s;
}

.cardProducto:hover{
    transform:translateY(-5px);
}

/* ===== IMAGEN PERFECTA 👀 */
.cardProducto img{
    width:100%;
    height:160px; /* 🔥 clave */
    object-fit:cover;
    border-radius:12px;
}

/* ===== TEXTO ===== */
.cardProducto h4{
    margin-top:10px;
    color:#5a2e1f;
    font-size:15px;
    font-weight:bold;
}

/* ===== BOTÓN ===== */
.cardProducto button{
    margin-top:8px;
    width:100%;
    background:linear-gradient(135deg, #d4af7f, #e8d6bd);
    color:#5a2e1f;
    border:none;
    padding:8px;
    border-radius:10px;
    font-weight:bold;
    font-size:13px;
    transition:0.3s;
}

.cardProducto button:hover{
    background:#5a2e1f;
    color:white;
}

/* ===== RESPONSIVE PERFECTO 📱 */
@media (max-width:768px){

    .productosGrid{
        grid-template-columns:repeat(2,1fr); /* 🔥 2 por fila */
    }

    .cardProducto img{
        height:140px; /* 🔥 no gigante */
    }

    .cardProducto h4{
        font-size:14px;
    }

}