/* ======================================
   TARJETAS DE PRODUCTOS
   Compartido por Productos y Streaming
====================================== */

.productos-grid{
    max-width:1300px;
    margin:40px auto;
    padding:0 20px;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

/* ===========================
   TARJETA
=========================== */

.card-producto{
    position:relative;
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 18px rgba(0,0,0,.12);
    transition:.3s;
}

.card-producto:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.card-producto img{
    width:100%;
    height:220px;
    object-fit:contain;
    background:#fff;
    padding:20px;
}

.card-producto h3{
    color:#1B1240;
    font-size:22px;
    margin:15px;
}

.card-producto p{
    margin:0 15px 15px;
    color:#555;
    min-height:55px;
    line-height:1.5;
}

/* ===========================
   DESTACADO
=========================== */

.etiqueta-destacado{
    position:absolute;
    top:15px;
    left:15px;

    background:#ffcc00;
    color:#000;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:bold;
}

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

.precio{
    display:block;
    text-align:center;
    font-size:28px;
    font-weight:bold;
    color:#28a745;
    margin-bottom:15px;
}

/* ===========================
   BOTÓN
=========================== */

.card-producto button{
    width:calc(100% - 30px);
    margin:0 15px;

    padding:14px;

    border:none;
    border-radius:100px;

    background:#ffcc00;
    color:#000;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.card-producto button:hover{
    background:#ffd633;
}

/* ===========================
   CONTADOR
=========================== */

.control-carrito{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px;
    margin:20px 0 10px;
}

.btn-mas,
.btn-menos{
    width:42px;
    height:42px;

    font-size:22px;
    font-weight:700;

    display:flex;
    justify-content:center;
    align-items:center;

    border:none;
    border-radius:50%;

    font-size:28px;
    font-weight:700;
    line-height:1;

    cursor:pointer;
    transition:.25s;
}

.btn-mas{
    background:#28a745;
    color:#fff;
}

.btn-mas:hover{
    background:#23913d;
    transform:scale(1.08);
}

.btn-menos{
    background:#dc3545;
    color:#fff;
}

.btn-menos:hover{
    background:#c62839;
    transform:scale(1.08);
}

.total-producto{
    text-align:center;
    font-weight:bold;
    color:#28a745;
    padding-bottom:20px;
}

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

@media(max-width:768px){

    .productos-grid{
        grid-template-columns:1fr;
        padding:15px;
    }

}