/* BODY */

body{

font-family:'Poppins', sans-serif;

}


/* GRID */

.productos-grid {
    display: grid;
    grid-template-columns: repeat(5, 200px); /* default 5 columnas */
    gap: 20px;
    width: calc(5 * 200px + 4 * 20px); /* ancho total */
    margin: 40px auto; /* centrado */
    padding: 0;
    box-sizing: border-box;
}



/* CARD */

.producto-card{

aspect-ratio:4/6;
background:#f3f3f3;
border-radius:10px;
padding:20px;

display:flex;
flex-direction:column;
justify-content:space-between;

transition:all 0.3s ease;

}

.producto-card:hover{

transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.12);

}


/* IMAGEN */

.producto-imagen{

height:75%;
display:flex;
align-items:center;
justify-content:center;

position:relative;
overflow:hidden;

}

.producto-imagen img{

max-width:150%;
max-height:100%;
object-fit:contain;
transition:transform 0.3s ease;

}

.producto-card:hover .producto-imagen img{

transform:scale(1.05);

}

.producto-imagen::after{

content:"";
position:absolute;
bottom:0;
left:0;

width:100%;
height:15%;

background:linear-gradient(
to bottom,
rgba(243,243,243,0) 0%,
rgba(243,243,243,1) 100%
);

pointer-events:none;

}


/* INFO */

.producto-info{
display:flex;
flex-direction:column;
gap:2px;
min-height:80px;
}

/* TEXTOS */

.producto-titulo{

font-size: 11px !important;
font-weight:700;
margin:0;
margin-bottom: 5px;
padding-top:10px;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

overflow:hidden;

}

.producto-categoria{

font-size:10px;
color:#6f6f6f;
font-weight:400;

display:inline-block;

padding:3px 8px;

background:#ececec;

border-radius:6px;

width:fit-content;

margin-top:2px;

}

.producto-precio {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #00812b;
}

/* CONTENEDOR DE PRECIOS */

.producto-precios{

display:flex;
flex-direction:column;

}


/* PRECIO NORMAL TACHADO */

.producto-precio-normal{

font-size:11px;
font-weight:400;

color:#8a8a8a;

text-decoration:line-through;
margin-top:-2px;

}

/* CUOTAS */

.producto-cuotas {
    font-size: 9.5px;
    font-weight: 500;
    color: #6f6f6f;
    letter-spacing: 0.2px;

    margin-top: 8px;

    white-space: nowrap;        /* evita que se corte en varias líneas */
    overflow: hidden;           /* oculta exceso de texto */
    text-overflow: ellipsis;    /* agrega "..." si el texto es más largo que el contenedor */
}

/* BOTON */

.producto-boton{

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

padding:4px 10px;

font-size:9.5px;
font-weight:500;

color:#fff;
background:#111;

border-radius:20px;

text-decoration:none;

transition:all .25s ease;

}

.producto-boton:hover{

transform:translateY(-2px);

background:#000;
color: #fff !important;

}

/* INFO */

.producto-info{

display:flex;
flex-direction:column;
gap:2px;

}

/* FOOTER PRECIO + BOTON */

.producto-footer{

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

margin-top:8px;

}


/* BADGE DESCUENTO */

.producto-badge{

position:absolute;
top:0px;
left:0px;

background:#00812b;
color:#fff;

font-size:15px;
font-weight:600;
line-height:1;
padding:4px 6px;

border-radius:6px;
box-shadow:0 4px 10px rgba(0,0,0,0.15);

}

/* BOTON HOVER IMAGEN 

.producto-hover-boton{

position:absolute;

bottom:20px;
left:50%;

transform:translateX(-50%) translateY(10px);

background:#018d20;
color:#fff;

font-size:12px;
font-weight:600;

padding:8px 14px;

border-radius:20px;

text-decoration:none;

opacity:0;

transition:all .3s ease;

white-space:nowrap;

}

.producto-card:hover .producto-hover-boton{

opacity:1;
transform:translateX(-50%) translateY(0);

}

.producto-card:hover .producto-imagen img{

transform:scale(1.05);
filter:brightness(0.92);

}

*/


 /* CARRUSEL */

.carousel{
position:relative;
width:100%;
}

.carousel-viewport{
overflow:hidden;
}

.productos-track{
display:flex;
gap:20px;
transition:transform .4s ease;
}

/* RESPONSIVE - MOVIL 2 COLUMNS SIN SCROLL */
@media (max-width: 768px) {
    .productos-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 cards por fila */
        gap: 15px;
        padding-bottom: 50px; /* padding solo en móvil */
        width: 100%;
        box-sizing: border-box;
    }

    .producto-card {
        aspect-ratio: 4/6; /* mantiene proporción de altura y ancho */
    }
}