/*  CAJA */
.caja {

    margin:                  0 auto;
    max-width:               1400px;
    padding:                 18px 16px;

}

/*  PRIMER RENGLÓN */
.primer_renglon_de_categorias{

    width:                   100%;

}

/*  BREADCRUMB */
.navegacion_de_categorias{

    align-items:             center;
    color:                   var( --color_texto_secundario );
    display:                 flex;
    flex-wrap:               wrap;
    font-size:               13px;
    gap:                     8px;
    margin-bottom:           14px;

}

.navegacion_de_categorias a{

    color:                   inherit;
    text-decoration:         none;

}

.navegacion_de_categorias a:hover{

    text-decoration:         underline;

}

.separador_de_navegacion{

    opacity:                 .7;

}

.categoria_actual_de_navegacion{

    color:                   var( --color_texto );
    font-weight:             var( --peso_seminegrita );

}

/*  ENCABEZADO */
.encabezado_de_resultados{

    align-items:             flex-end;
    display:                 flex;
    flex-wrap:               wrap;
    gap:                     12px;
    justify-content:         space-between;
    margin-bottom:           14px;

}

.nombre_de_la_categoria{

    color:                   var( --color_texto );
    font-size:               26px;
    line-height:             1.1;
    margin:                  0;

}

.texto_de_resultados{

    align-items:             center;
    display:                 flex;
    gap:                     10px;

}

.contador_de_resultados{

    color:                   var( --color_texto_secundario );
    font-size:               14px;

}

/*  VACÍO */
.categoria_vacia{

    background:              var( --color_blanco );
    border:                  1px solid var( --color_borde );
    border-radius:           14px;
    color:                   var( --color_texto_secundario );
    padding:                 18px;

}

/*  GRID */
.contenedor_de_productos{

    display:                 grid;
    gap:                     18px;
    grid-template-columns:   repeat(auto-fill, minmax(250px, 1fr));

}

/*  CAJA PRODUCTO */
.caja_producto{

    background:              var( --color_blanco );
    border:                  1px solid var( --color_borde );
    border-radius:           14px;
    box-shadow:              none;
    display:                 flex;
    flex-direction:          column;
    overflow:                hidden;
    transition:              transform .15s ease, box-shadow .15s ease;

}

.caja_producto:hover{

    box-shadow:              0 10px 25px rgba( 0 , 0 , 0 , .08 );
    transform:               translateY(-2px);

}

/*  CAJA INSIGNIAS / MEDIA */
.caja_insignias{

    background:              var( --color_fondo_suave );
    position:                relative;

}

.caja_link{

    display:                 block;
    text-decoration:         none;

}

.caja_foto{

    aspect-ratio:            1 / 1;
    display:                 block;
    height:                  auto;
    object-fit:              cover;
    width:                   100%;

}

/*  INSIGNIAS (DESTACADO / NUEVO SOBRE FOTO) */
.insignia {

    border-radius:           999px;
    color:                   var( --color_blanco );
    font-size:               12px;
    font-weight:             var( --peso_negrita );
    left:                    10px;
    padding:                 5px 9px;
    position:                absolute;
    top:                     10px;
    z-index:                 2;

}

.insignia + .insignia{

    margin-top:              8px;

}

.insignia_producto_destacado{

    background:              var( --color_principal_oscuro );

}

.insignia_producto_nuevo{

    background:              var( --color_principal );
    top:                     40px;

}

/*  CUERPO */
.caja_cuerpo{

    display:                 flex;
    flex-direction:          column;
    gap:                     10px;
    padding:                 12px 12px 14px;

}

.caja_cuerpo_titulo{

    font-size:               14px;
    font-weight:             var( --peso_seminegrita );
    line-height:             1.25;
    margin:                  0;

}

.caja_cuerpo_titulo a{

    color:                   var( --color_texto );
    text-decoration:         none;

}

.caja_cuerpo_titulo a:hover{

    text-decoration:         underline;

}

/*  PRECIO */
.caja_precio{

    align-items:             center;
    display:                 flex;
    flex-wrap:               wrap;
    gap:                     10px;

}

.precio{

    color:                   var( --color_texto );
    font-size:               16px;
    font-weight:             var( --peso_extra_negrita );

}

.precio_no_disponible{

    color:                   var( --color_texto_secundario );
    font-size:               14px;
    font-weight:             var( --peso_seminegrita );

}

/*  CHIP PROMO (EN CUERPO, NO SOBRE LA FOTO) */
.insignia_chip{

    align-items:             center;
    border-radius:           999px;
    display:                 inline-flex;
    font-size:               12px;
    font-weight:             var( --peso_extra_negrita );
    line-height:             1;
    padding:                 6px 10px;
    user-select:             none;

}

.insignia_chip_promo{

    background:              rgba( 225 , 0 , 152 , .10 );
    border:                  1px solid rgba( 225 , 0 , 152 , .22 );
    color:                   var( --color_principal_oscuro );

}

/*  MUESTRAS POR COLOR (PREVIEW POR FOTO) */
.muestras_por_color{

    align-items:             center;
    display:                 flex;
    flex-wrap:               wrap;
    gap:                     7px;
    min-height:              28px;

}

.btn_preview_por_color{

    border:                  1px solid rgba(0,0,0,.18);
    border-radius:           999px;
    cursor:                  pointer;
    height:                  20px;
    outline:                 none;
    padding:                 0;
    width:                   20px;

}

.btn_preview_por_color.activo{

    box-shadow:              0 0 0 2px var( --color_texto );

}

/*  MINI OPCIONES */
.mini_opciones{

    display:                 grid;
    gap:                     10px;

}

.mini_campo{

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

}

.mini_label{

    color:                   var( --color_texto_secundario );
    font-size:               12px;

}

.mini_select,
.mini_input{

    background:              var( --color_blanco );
    border:                  1px solid var( --color_borde );
    border-radius:           10px;
    font-size:               14px;
    outline:                 none;
    padding:                 9px 10px;
    width:                   100%;

}

.mini_select:focus,
.mini_input:focus{

    border-color:            var( --color_texto );

}

.mini_cantidad{

    /*  se queda como extra por si luego quieres estilo especial */

}

/*  ACCIONES */
.caja_de_acciones{

    display:                 flex;
    gap:                     10px;
    margin-top:              2px;

}

/*  BOTONES */
.btn{

    align-items:             center;
    border:                  1px solid transparent;
    border-radius:           10px;
    cursor:                  pointer;
    display:                 inline-flex;
    font-size:               14px;
    font-weight:             var( --peso_negrita );
    gap:                     8px;
    justify-content:         center;
    margin:                  auto;
    padding:                 10px 12px;
    text-decoration:         none;
    transition:              opacity .15s ease, background .15s ease, border-color .15s ease;
    user-select:             none;

}

.btn:active{

    transform:               translateY(1px);

}

.btn_ver_producto{

    background:              var( --color_blanco );
    border-color:            var( --color_borde );
    color:                   var( --color_texto );

}

.btn_ver_producto:hover{

    background:              var( --color_fondo_suave );

}

.btn_agregar_carrito{

    background:              var( --color_principal );
    color:                   var( --color_blanco );

}

.btn_agregar_carrito:hover{

    opacity:                 .92;

}

.btn_agregar_carrito.is-disabled,
.btn_agregar_carrito:disabled{

    background:              var( --color_borde );
    color:                   var( --color_blanco );
    cursor:                  not-allowed;
    opacity:                 1;

}

.btn_solicitar_precio{

    background:              var( --color_whatsapp );
    color:                   var( --color_blanco );

}

.btn_solicitar_precio:hover{

    opacity:                 .92;

}

.btn_disabled{

    cursor:                  not-allowed;
    opacity:                 .65;
    pointer-events:          none;

}

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

    .nombre_de_la_categoria{

        font-size:           22px;

    }

    .contenedor_de_productos{

        gap:                 14px;

    }

}

.btn.just-added{

    opacity:                 .85;

}
/*  PRECIOS CON DESCUENTO (ESTILO CARRITO) */
.precio_base{

    color:                   var( --color_texto_secundario );
    font-size:               13px;
    font-weight:             var( --peso_seminegrita );
    text-decoration:         line-through;
    opacity:                 .8;

}

.precio_final{

    color:                   var( --color_texto );
    font-size:               17px;
    font-weight:             var( --peso_extra_negrita );

}