:root{

    --cat-accent:            #111;
    --cat-bg:                #fff;
    --cat-border:            #e5e7eb;
    --cat-muted:             #6b7280;
    --cat-promo:             #e53935;
    --cat-radius:            14px;
    --cat-shadow:            0 10px 25px rgba(0,0,0,.08);
    --cat-soft:              #f7f7f8;
    --cat-text:              #222;

}

/* =========================================================
   CAJA (ANTES: .cat-wrap)
========================================================= */
.caja {

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

}

/* =========================================================
   PRIMER RENGLÓN (ANTES: .cat-inner)
========================================================= */
.primer_renglon_de_categorias{

    width:                   100%;

}

/* =========================================================
   BREADCRUMB (ANTES: .cat-breadcrumb)
========================================================= */
.navegacion_de_categorias{

    align-items:             center;
    color:                   var(--cat-muted);
    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(--cat-text);
    font-weight:             600;

}

/* =========================================================
   ENCABEZADO (ANTES: .cat-head / .cat-title / .cat-meta / .cat-count)
========================================================= */
.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(--cat-text);
    font-size:               26px;
    line-height:             1.1;
    margin:                  0;

}

.texto_de_resultados{

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

}

.contador_de_resultados{

    color:                   var(--cat-muted);
    font-size:               14px;

}

/* =========================================================
   VACÍO (ANTES: .cat-empty)
========================================================= */
.categoria_vacia{

    background:              var(--cat-bg);
    border:                  1px solid var(--cat-border);
    border-radius:           var(--cat-radius);
    color:                   var(--cat-muted);
    padding:                 18px;

}

/* =========================================================
   GRID (ANTES: .grid)
========================================================= */
.contenedor_de_productos{

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

}

/* =========================================================
   CAJA PRODUCTO (ANTES: article.card)
========================================================= */
.caja_producto{

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

}

.caja_producto:hover{

    box-shadow:              var(--cat-shadow);
    transform:               translateY(-2px);

}

/* =========================================================
   CAJA INSIGNIAS / MEDIA (ANTES: .card-media / a.card-link / img.card-img)
========================================================= */
.caja_insignias{

    background:              var(--cat-soft);
    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:                   #fff;
    font-size:               12px;
    font-weight:             700;
    left:                    10px;
    padding:                 5px 9px;
    position:                absolute;
    top:                     10px;
    z-index:                 2;

}

.insignia + .insignia{

    margin-top:              8px;

}

.insignia_producto_destacado{

    background:              #0f172a;

}

.insignia_producto_nuevo{

    background:              #2563eb;
    top:                     40px;

}

/* =========================================================
   CUERPO (ANTES: .card-body / .card-title)
========================================================= */
.caja_cuerpo{

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

}

.caja_cuerpo_titulo{

    font-size:               14px;
    font-weight:             650;
    line-height:             1.25;
    margin:                  0;

}

.caja_cuerpo_titulo a{

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

}

.caja_cuerpo_titulo a:hover{

    text-decoration:         underline;

}

/* =========================================================
   PRECIO (ANTES: .card-price / .price)
========================================================= */
.caja_precio{

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

}

.precio{

    color:                   var(--cat-text);
    font-size:               16px;
    font-weight:             800;

}

.precio_no_disponible{

    color:                   var(--cat-muted);
    font-size:               14px;
    font-weight:             600;

}

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

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

}

.insignia_chip_promo{

    background:              rgba( 229 , 57 , 53 , .12 );
    border:                  1px solid rgba( 229 , 57 , 53 , .22 );
    color:                   #b71c1c;

}

/* =========================================================
   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 #111;

}

/* =========================================================
   MINI OPCIONES (ANTES: .mini / .mini-field / .mini-label / .mini-select / .mini-input)
========================================================= */
.mini_opciones{

    display:                 grid;
    gap:                     10px;

}

.mini_campo{

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

}

.mini_label{

    color:                   var(--cat-muted);
    font-size:               12px;

}

.mini_select,
.mini_input{

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

}

.mini_select:focus,
.mini_input:focus{

    border-color:            #111;

}

.mini_cantidad{

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

}

/* =========================================================
   ACCIONES (ANTES: .card-actions)
========================================================= */
.caja_de_acciones{

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

}

/* =========================================================
   BOTONES (ANTES: .btn, .btn-view, .btn-add, .btn-quote, .btn-disabled)
========================================================= */
.btn{

    align-items:             center;
    border:                  1px solid transparent;
    border-radius:           10px;
    cursor:                  pointer;
    display:                 inline-flex;
    font-size:               14px;
    font-weight:             700;
    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:              #fff;
    border-color:            var(--cat-border);
    color:                   var(--cat-text);

}

.btn_ver_producto:hover{

    background:              var(--cat-soft);

}

.btn_agregar_carrito{

    background:              var(--cat-accent);
    color:                   #fff;

}

.btn_agregar_carrito:hover{

    opacity:                 .92;

}

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

    background:              #cfd4dc;
    color:                   #fff;
    cursor:                  not-allowed;
    opacity:                 1;

}

.btn_solicitar_precio{

    background:              #25d366;
    color:                   #fff;

}

.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(--cat-muted);
    font-size:               13px;
    font-weight:             600;
    text-decoration:         line-through;
    opacity:                 .8;

}

.precio_final{

    color:                   #111;
    font-size:               17px;
    font-weight:             900;

}