:root {
    
    /*  IDENTIDAD DE MARCA */
    --color_principal:                     #4f571e;
    --color_principal_oscuro:              #6c7536;
    
    
    /*  COLORES NEUTROS */
    --color_blanco:                        #ffffff;
    --color_texto:                         #2d2d2d;
    --color_texto_secundario:              #6b6b6b;
    --color_fondo_suave:                   #f5f5f5;
    --color_borde:                         #e5e5e5;
    
    /*  COLORES SEMÁNTICOS */
    --color_exito:                         #2e7d32;
    --color_error:                         #b3261e;
    --color_whatsapp:                      #00a884;
    --color_whatsapp_oscuro:               #008f6f;
    
    /*  TIPOGRAFÍAS */
    --fuente_principal:                    'Montserrat', sans-serif;
    --fuente_secundaria:                   'Poppins', sans-serif;
    
    /*  PESOS TIPOGRÁFICOS */
    --peso_normal:                         400;
    --peso_medio:                          500;
    --peso_seminegrita:                    600;
    --peso_negrita:                        700;
    --peso_extra_negrita:                  800;
    
    /*  NIVELES DE CAPAS */
    --nivel_base:                          1;
    --nivel_fondo:                         100;
    --nivel_menu:                          200;
    --nivel_modal:                         300;
    --nivel_alerta:                        400;
    --nivel_emergencia:                    9999;
    
}
* {
    
    box-sizing:                 border-box;
    
}
body {
    
    font-family:                var( --fuente_secundaria );
    font-weight:                var( --peso_normal );
    margin:                     0;
    padding:                    0;
    z-index:                    var( --nivel_base );
    
}
img {
    
    display:                    block;
    width:                      100%;
    
}
header {
    
    background:                 var( --color_principal );
    color:                      var( --color_blanco );
    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( --color_blanco );
    border-radius:              50%;
    color:                      var( --color_principal );
    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( --color_texto );
    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( --color_fondo_suave );
    color:                      var( --color_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 {
    
    align-items:                center;
    border-bottom:              1px solid rgba(0, 0, 0, .1);
    color:                      var( --color_texto_secundario );
    cursor:                     pointer;
    display:                    flex;
    justify-content:            space-between;
    padding:                    16px 16px;
    text-decoration:            none;
    width:                      100%;
}

nav .renglon_bloque a,
nav .renglon_categoria a {
    
    color:                      inherit;
    text-decoration:            none;
}
nav .renglon_bloque .nombre,
nav .renglon_categoria .nombre {
    
    flex:                       1;
    font-family:                var( --fuente_principal );
    font-size:                  14px;
    font-weight:                var( --peso_medio );
    
}
nav .renglon_bloque .ver_todo,
nav .renglon_categoria .ver_todo {
    
    color:                      var( --color_texto_secundario );
    font-size:                  0.7em;
    text-decoration:            none;
    
}
nav .renglon_bloque:hover,
nav .renglon_categoria:hover,
nav .renglon_subcategoria:hover {
    
    border-left:                4px solid var( --color_principal );
    color:                      var( --color_principal );
    
}
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( --color_principal );
    
}
nav .renglon_titulo {
    
    align-items:                center;
    border-bottom:              1px solid rgba( 0 , 0 , 0 , .1 );
    color:                      var( --color_texto_secundario );
    cursor:                     pointer;
    display:                    flex;
    font-size:                  16px;
    font-weight:                var( --peso_seminegrita );
    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( --color_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 {
    
    color:                      inherit;
    text-decoration:            none;
    
}
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( --color_texto_secundario );
    display:                    flex;
    flex-wrap:                  wrap;
    font-size:                  16px;
    font-weight:                var( --peso_medio );
    justify-content:            space-between;
    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( --color_principal_oscuro );
        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( --color_blanco );
        cursor:                         pointer;
        font-family:                    var( --fuente_principal );
        font-size:                      14px;
        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( --color_blanco );
        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( --color_fondo_suave );
        color:                          var( --color_texto );
        cursor:                         pointer;
        font-family:                    var( --fuente_principal );
        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;
        line-height:                    0;
        margin:                         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 {
        
        color:                          var( --color_texto );
        display:                        block;
        font-family:                    var( --fuente_secundaria );
        text-decoration:                none;
        width:                          100%;
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li:hover {
        
        background:                     var( --color_principal_oscuro );
        color:                          var( --color_blanco );
        
    }
    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( --color_blanco );
        
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li a:hover {
        
        color:                          var( --color_blanco );
        
    }
    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_principal );
        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( --color_blanco );
        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( --color_blanco );
        color:                          var( --color_texto );
        cursor:                         pointer;
        font-family:                    var( --fuente_principal );
        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;
        line-height:                    0;
        margin:                         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( --color_texto );
        display:                        block;
        text-decoration:                none;
        width:                          100%;
        
    }
    header .segunda_linea .login ul li:hover {
        
        background:                     var( --color_principal_oscuro );
        
    }
    header .segunda_linea .login ul li:first-child:hover  {
        
        background:                     none;
        
    }
    header .segunda_linea .login ul li:hover a {
        
        color:                          var( --color_blanco );
        
    }
    header .segunda_linea .login ul li a:hover {
        
        color:                          var( --color_blanco );
        
    }
    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( --color_fondo_suave );
        
    }
        
}