/* =========================
   CATEGORÍAS (sin Masonry)
   - Grid puro
   - Imagen siempre pareja
   - Títulos sin descuadrar
   - 4 columnas desktop pero más fino (más aire)
========================= */

.contenedor{
    box-sizing:                 border-box;
    margin:                     18px auto;
    max-width:                  1360px;     /* antes 1440: un poco más fino */
    min-height:                 400px;
    padding:                    0 18px;     /* más aire lateral */
    width:                      100%;
}

/* TÍTULO DE SECCIÓN */
.titulo_seccion{
    font-family:                'Roboto', sans-serif;
    font-size:                  26px;
    font-weight:                700;
    margin:                     8px 0 18px 2px;
    color:                      #111;
}

/* estado vacío */
.estado_vacio{
    background:                 #fff;
    border:                     1px solid #f0f0f0;
    border-radius:              12px;
    padding:                    18px;
    text-align:                 center;
    color:                      #444;
    font-family:                'Roboto', sans-serif;
}

/* GRID (misma lógica, más aire) */
.grid_productos{
    display:                    grid;
    gap:                        20px;       /* más espacio = más fino */
    grid-template-columns:      repeat(2, minmax(0, 1fr));
    align-items:                stretch;
}

@media (min-width: 600px){
    .grid_productos{
        grid-template-columns:  repeat(3, minmax(0, 1fr));
        gap:                    22px;
    }
}

@media (min-width: 992px){
    .grid_productos{
        grid-template-columns:  repeat(4, minmax(0, 1fr)); /* se queda en 4 */
        gap:                    24px;                      /* más aire desktop */
    }
}

@media (min-width: 1200px){
    .grid_productos{
        grid-template-columns:  repeat(4, minmax(0, 1fr)); /* se queda en 4 */
        gap:                    26px;
    }
}

/* CARD (menos “bloque”, más clean) */
.card_producto{
    background:                 #fff;
    border:                     1px solid #f1f1f1;
    border-radius:              14px;
    box-shadow:                 0 1px 0 rgba(0,0,0,.03);
    color:                      #111;
    display:                    flex;
    flex-direction:             column;
    text-decoration:            none;
    overflow:                   hidden;
    transform:                  translateY(0);
    transition:                 transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.card_producto:hover{
    transform:                  translateY(-2px);
    border-color:               #e9e9e9;
    box-shadow:                 0 10px 26px rgba(0,0,0,.08);
}

/* IMAGEN PAREJA (no importa vertical/horizontal) */
.card_imagen{
    width:                      100%;
    aspect-ratio:               1 / 1;
    background:                 #fafafa;
    overflow:                   hidden;
}

.card_imagen img{
    width:                      100%;
    height:                     100%;
    object-fit:                 cover;
    object-position:            center;
    display:                    block;
}

/* TÍTULO SIN DESCUADRAR (2 líneas fijas) */
.card_titulo{
    box-sizing:                 border-box;
    font-family:                'Roboto', sans-serif;
    font-weight:                500;
    font-size:                  14px;
    line-height:                1.25;
    margin:                     0;
    padding:                    10px 10px 12px 10px;

    display:                    -webkit-box;
    -webkit-line-clamp:         2;
    -webkit-box-orient:         vertical;
    overflow:                   hidden;
    min-height:                 calc(14px * 1.25 * 2);
    text-align:                 center;
}

@media (min-width: 992px){
    .card_titulo{
        font-size:              13px;
        min-height:             calc(13px * 1.25 * 2);
        padding:                10px 10px 12px 10px;
    }
}