:root {
    
    /* === COLORES PRINCIPALES POR USO === */
    --fondo_claro:              #fff;      /*   FONDOS BLANCOS , SUBITEMS, SUBCATEGORIAS    */
    --texto_sobre_oscuro:       #fff;      /*   LETRAS HEADER , FOOTER                      */
    --texto_principal:          #333;      /*   PRIMERA LINEA , TEXTOS GENERALES            */
    --texto_secundario:         #666;      /*   NAV, ETIQUETAS                              */
    --texto_claro:              #979797;   /*   HR FOOTER , DETALLES                        */
    --borde_claro:              #fff;      /*   BORDE PRIMERA LINEA                         */
    --borde_medio:              #ebebeb;   /*   BORDE SUBCATEGORIAS                         */
    --borde_footer:             #444;      /*   BORDE FOOTER                                */
    --fondo_header:             #4f571e;   /*   HEADER PRINCIPAL                            */
    --fondo_primera_linea:      #6c7536;   /*   PRIMERA LINEA , HOVER                       */
    --fondo_nav:                #f5f5f5;   /*   FONDO NAVEGACION                            */
    --fondo_footer:             #555;      /*   FONDO FOOTER                                */
    --pie_footer:               #464646;   /*   PIE DE FOOTER                               */
    --buscador_iconos:          #000;      /*   BUSQUEDA , ICONOS                           */

    /* === FUENTES POR USO FONT-FAMILY === */
    --fuente_menu:              'Montserrat' , sans-serif;
    --fuente_titulos:           'Montserrat' , sans-serif;
    --fuente_subtitulos:        'Montserrat' , sans-serif;
    --fuente_textos:            'Poppins' , sans-serif;
    --fuente_botones:           'Poppins' , sans-serif;
    --fuente_precios:           'Montserrat' , sans-serif;
    --fuente_etiquetas:         'Poppins' , sans-serif;

    /* === PESOS UNIVERSALES FONT-WEIGHT === */
    --peso_ligera:              300;
    --peso_normal:              400;
    --peso_medio:               500;
    --peso_negrita:             600;
    --peso_extra_negrita:       700;
    
    /* === NIVELES UNIVERSALES Z-INDEX === */
    --nivel_base:           1;      /* body, contenido normal */
    --nivel_fondo:          100;    /* .fondo, overlay negro */
    --nivel_menu:           200;    /* header mobile, carrito lateral, menú WhatsApp */
    --nivel_modal:          300;    /* modal WhatsApp, login, etc. */
    --nivel_alerta:         400;    /* Swal, notificaciones */
    --nivel_emergencia:     9999;
    
}
* {
    
    box-sizing:                 border-box;
    
}
body {
    
    font-family:                var( --fuente_textos );
    font-weight:                var( --peso_normal );
    margin:                     0;
    padding:                    0;
    z-index:                    var( --nivel_base );
    
}
img {
    
    display:                    block;
    width:                      100%;
    
}
header {
    
    background:                 var( --fondo_header );
    color:                      var( --texto_sobre_oscuro );
    padding:                    0 0 .5em 0;
    width:                      100%;
    z-index:                    var( --nivel_menu );
    
}
header .primera_linea {
    
    display:                    none;
    
}
header .segunda_linea {
    
    align-items:                center;
    display:                    flex;
    flex-wrap:                  wrap;
    font-size:                  1em;
    justify-content:            space-between;
    margin:                     auto;
    width:                      95%;
    
}
header .segunda_linea .bar_menu {
    
    font-size:                  2em;
    order:                      1;
    width:                      35%;
    
}
header .segunda_linea .logotipo {
    
    order:                      2;
    width:                      30%;
    
}
header .segunda_linea .bar_categorias {
    
    cursor:                     pointer;
    display:                    none;
    
}
header .segunda_linea .heart_bag {
    
    order:                      3;
    position:                   relative;
    text-align:                 right;
    width:                      35%;
    
}
header .segunda_linea .heart_bag p {
    
    display:                    inline-block;
    font-size:                  1.5em;
    padding-left:               .5em;
    position:                   relative;
    
}
header .segunda_linea .heart_bag p span {
    
    align-items:                center;
    background:                 var( --fondo_claro );
    border-radius:              50%;
    color:                      var( --fondo_header );
    display:                    flex;
    font-size:                  .5em;
    height:                     1.5em;
    justify-content:            center;
    position:                   absolute;
    right:                      -5%;
    text-align:                 center;
    top:                        50%;
    width:                      1.5em;
    
}
header .segunda_linea .buscador {
    
    order:                      4;
    position:                   relative;
    width:                      100%;
    
}
header .segunda_linea .buscador p {
    
    color:                      var( --buscador_iconos );
    display:                    inline-block;
    font-size:                  1em;
    left:                       0;
    margin:                     0;
    padding:                    12px 8px;
    position:                   absolute;
    top:                        0;
    
}
header .segunda_linea .buscador input {
    
    border:                     none;
    border-radius:              5px;
    font-size:                  1em;
    outline:                    none;
    padding:                    .5em;
    padding-left:               2em;
    position:                   relative;
    width:                      100%;
    
}
header .segunda_linea .buscador input::placeholder {
    
    font-size:                  .75em;
    
}
header .segunda_linea .login {
    
    cursor:                     pointer;
    display:                    none;
    position:                   relative;
    
}
.fondo {
    
    background:                 rgba( 0 , 0 , 0 , .6 );
    display:                    none;
    height:                     100%;
    left:                       0;
    position:                   fixed;
    top:                        0;
    width:                      100%;
    z-index:                    var( --nivel_fondo );
    
}
nav {
    
    background:                 var( --fondo_nav );
    color:                      var( --texto_secundario );
    display:                    none;
    height:                     100%;
    left:                       0;
    overflow-y:                 auto;
    position:                   fixed;
    top:                        0;
    width:                      80%;
    z-index:                    var( --nivel_modal );
    
}
nav .bloque_departamentos,
nav .bloque_categorias,
nav .bloque_subcategorias,
nav .bloque_servicios {
    
    display:                    none;
    
}
nav .bloque_departamentos.show,
nav .bloque_categorias.show,
nav .bloque_subcategorias.show,
nav .bloque_servicios.show {
    
    display:                    block;
    
}
nav .renglon_bloque,
nav .renglon_categoria {
    
    border-bottom:              1px solid rgba(0, 0, 0, .1);
    color:                      var( --texto_secundario );
    cursor:                     pointer;
    display:                    flex;
    justify-content:            space-between;
    align-items:                center;
    padding:                    16px 16px;
    text-decoration:            none;
    width:                      100%;
}

nav .renglon_bloque a,
nav .renglon_categoria a {
    
    text-decoration:            none;
    color:                      inherit;
}
nav .renglon_bloque .nombre,
nav .renglon_categoria .nombre {
    
    font-size:                  14px;
    font-family:                var( --fuente_menu );
    font-weight:                var( --peso_medio );
    flex:                       1;
    
}
nav .renglon_bloque .ver_todo,
nav .renglon_categoria .ver_todo {
    
    font-size:                  0.7em;
    text-decoration:            none;
    color:                      var( --texto_secundario );
    
}
nav .renglon_bloque:hover,
nav .renglon_categoria:hover,
nav .renglon_subcategoria:hover {
    
    border-left:                4px solid var( --fondo_header );
    color:                      var( --fondo_header );
    
}
nav .renglon_bloque:hover .nombre,
nav .renglon_bloque:hover .ver_todo,
nav .renglon_categoria:hover .nombre,
nav .renglon_categoria:hover .ver_todo,
nav .renglon_subcategoria:hover {
    
    color:                      var( --fondo_header );
    
}
nav .renglon_titulo {
    
    align-items:                center;
    border-bottom:              1px solid rgba( 0 , 0 , 0 , .1 );
    color:                      var( --texto_secundario );
    cursor:                     pointer;
    display:                    flex;
    font-size:                  16px;
    font-weight:                var( --peso_negrita );
    padding:                    16px 16px;
    text-align:                 center;
    text-decoration:            none;
    width:                      100%;
    
}
nav .renglon_titulo span {
    
    font-size:                  14px;
    vertical-align:             middle;
    
}
nav .renglon_titulo div {
    
    padding-left:               20px;
    
}
nav .renglon_subcategoria {
    
    border-bottom:              1px solid rgba( 0 , 0 , 0 , .1 );
    color:                      var( --texto_secundario );
    cursor:                     pointer;
    display:                    block;
    font-size:                  14px;
    font-weight:                var( --peso_normal );
    padding:                    12px 16px;
    text-decoration:            none;
    width:                      100%;
    
}
nav .renglon_subcategoria a {
    
    text-decoration:            none;
    color:                      inherit;
    
}
nav .subcategoria {
    
    display:                    none;
    
}
nav .subcategoria.show {
    
    display:                    block;
    
}
nav .bloque_menu {
    
    display:                    block;
    
}
nav .bloque_menu .renglon_bloque {
    
    border-bottom:              1px solid rgba( 0 , 0 , 0 , .1 );
    color:                      var(--texto_secundario);
    display:                    flex;
    flex-wrap:                  wrap;
    justify-content:            space-between;
    font-size:                  16px;
    font-weight:                var(--peso_medio);
    padding:                    16px 16px;
    text-decoration:            none;
    width:                      100%;
    
}
nav .bloque_menu .renglon_bloque p {
    
    display:                    inline-block;
    margin:                     0;
    padding:                    0;
    
}
@media ( min-width: 992px ){
    
    header {
        
        padding:                    0 0 0 0;
        
    }
    header .primera_linea {
        
        background:                     var( --fondo_primera_linea );
        display:                        block;
        width:                          100%;
        
    }
    header .primera_linea .caja_primera_linea {
        
        align-items:                    center;
        display:                        flex;
        justify-content:                flex-end;
        margin:                         auto;
        width:                          95%;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea {
        
        border-left:                    1px solid var( --fondo_claro );
        cursor:                         pointer;
        font-size:                      14px;
        font-family:                    var( --fuente_titulos );
        font-weight:                    var( --peso_normal );
        margin:                         1em 0;
        padding:                        0 1em;
        position:                       relative;
        vertical-align:                 middle;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea:last-child {
        
        padding-right:                   0 !important;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea:first-child {
        
        border-left:                    0;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea span {
        
        display:                        inline-block;
        font-size:                      14px;
        padding:                        0 .25em;
        vertical-align:                 middle;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul {
        
        background:                     none;
        display:                        none;
        left:                           50%;
        list-style:                     none;
        padding-inline-start:           0;
        padding-top:                    1rem;
        position:                       absolute;
        text-align:                     center;
        top:                            0;
        transform:                      translateX( -50% );
        width:                          150%;
        z-index:                        var( --nivel_base );
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li:first-child:before {
        
        border-color:                   transparent transparent var( --fondo_claro );
        border-style:                   solid;
        border-width:                   0 8px 8px;
        content:                        "";
        display:                        inline-block;
        height:                         0;
        vertical-align:                 middle;
        width:                          0;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li {
        
        background:                     var( --fondo_nav );
        color:                          var( --texto_principal );
        cursor:                         pointer;
        font-family:                    var( --fuente_menu ) , sans-serif;
        font-size:                      12px;
        font-weight:                    var( --peso_medio );
        line-height:                    26px;
        padding:                        5px 15px;
        width:                          100%;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li:first-child {
        
        background:                     none;
        margin:                         0;
        line-height:                    0;
        padding:                        0;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li:nth-child(2){
        
        border-top-left-radius:         8px;
        border-top-right-radius:        8px;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li:last-child {
        
        border-bottom-left-radius:      8px;
        border-bottom-right-radius:     8px;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li a {
        
        font-family:                    var( --fuente_textos );
        color:                          var( --texto_principal );
        display:                        block;
        text-decoration:                none;
        width:                          100%;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li:hover {
        
        background:                     var( --fondo_primera_linea );
        color:                          var( --texto_sobre_oscuro );
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li:first-child:hover {
        
        background:                     none;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li:hover a {
        
        color:                          var( --texto_sobre_oscuro );
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li a:hover {
        
        color:                          var( --texto_sobre_oscuro );
        
    }
    header .segunda_linea .bar_menu {
        
        display:                        none;
        
    }
    header .segunda_linea .logotipo {
        
        order:                          1;
        padding:                        12px 0;
        width:                          130px;
        
    }
    header .segunda_linea .bar_categorias {
        
        display:                        block;
        order:                          2;
        
    }
    header .segunda_linea .buscador {
    
        order:                          3;
        width:                          400px;
        
    }
    header .segunda_linea .login {
    
        display:                        block;
        order:                          4;
        width:                          120px;
        
    }
    header .segunda_linea .login p {
        
        display:                        inline-block;
        margin:                         0;
        padding:                        0;
        
    }
    header .segunda_linea .login p.nombre_corto {
        
        display:                        inline-block;
        font-family:                    var( --fuente_menu );
        font-size:                      14px;
        line-height:                    1.4;
        margin:                         0;
        max-width:                      100px;
        overflow:                       hidden;
        padding:                        0 2px;
        text-overflow:                  ellipsis;
        vertical-align:                 middle;
        white-space:                    nowrap;
        
    }
    header .segunda_linea .login ul {
        
        background:                     none;
        display:                        none;
        left:                           50%;
        list-style:                     none;
        padding-inline-start:           0;
        padding-top:                    0;
        position:                       absolute;
        text-align:                     center;
        top:                            10px;
        transform:                      translateX( -50% );
        width:                          150%;
        z-index:                        var( --nivel_base );
        
    }
    header .segunda_linea .login ul li:first-child:before {
        
        border-color:                   transparent transparent var( --fondo_claro );
        border-style:                   solid;
        border-width:                   0 8px 8px;
        content:                        "";
        display:                        inline-block;
        height:                         0;
        vertical-align:                 middle;
        width:                          0;
        
    }
    header .segunda_linea .login ul li {
        
        background:                     var( --texto_sobre_oscuro );
        color:                          var( --texto_principal );
        cursor:                         pointer;
        font-family:                    var( --fuente_menu ) , sans-serif;
        font-size:                      12px;
        font-weight:                    var( --peso_medio );
        line-height:                    26px;
        padding:                        5px 15px;
        width:                          100%;
        
    }
    header .segunda_linea .login ul li:first-child {
        
        background:                     none;
        margin:                         0;
        line-height:                    0;
        padding:                        0;
        
    }
    header .segunda_linea .login ul li:nth-child(2){
        
        border-top-left-radius:         8px;
        border-top-right-radius:        8px;
        
    }
    header .segunda_linea .login ul li:last-child {
        
        border-bottom-left-radius:      8px;
        border-bottom-right-radius:     8px;
        
    }
    header .segunda_linea .login ul li a {
        
        color:                          var( --texto_principal );
        display:                        block;
        text-decoration:                none;
        width:                          100%;
        
    }
    header .segunda_linea .login ul li:hover {
        
        background:                     var( --fondo_primera_linea );
        
    }
    header .segunda_linea .login ul li:first-child:hover  {
        
        background:                     none;
        
    }
    header .segunda_linea .login ul li:hover a {
        
        color:                          var( --fondo_claro );
        
    }
    header .segunda_linea .login ul li a:hover {
        
        color:                          var( --fondo_claro );
        
    }
    header .segunda_linea .heart_bag {
    
        order:                          5;
        width:                          80px;
        
    }
    header .segunda_linea .heart_bag p {
        
        cursor:                         pointer;
        margin:                         0;
        
    }
}
@media ( min-width: 1200px ){
    
    header .primera_linea .caja_primera_linea {
        
        max-width:                          1440px;
        
    }
    header .segunda_linea {
        
        max-width:                          1440px;
        
    }
    header .segunda_linea .buscador {
        
        width:                              700px;
        
    }
    header .segunda_linea .buscador input {
        
        height:                             40px;
        
    }
    nav {
        
        width:                              300px;
        
    }
    nav::-webkit-scrollbar {
        
        width:                              1px;
        
    }
    nav::-webkit-scrollbar-thumb {
        
        background:                         var( --fondo_nav );
        
    }
        
}