:root {
    --fondo_primera_linea:              #4246a7;
    --fondo_header:                     #4246a7;
    --letras_header:                    white;
    --fondo_subitems_header:            white;
    --letras_subitems_header:           #e10098;
    --buscador:                         black;
    --fondo_area_menu:                  #f5f5f5;
    --fondo_area_subcategorias:         #fff;
    --color_area_menu:                  #666;
    --border_renglon_primera_linea:     white;
    --border_subcategorias:             #ebebeb;
    --color_primera_linea:              #333;
    --color_black:                      #000;
    --background_footer:                #555;
    --color_footer:                     white;
    --border_footer:                    #444;
    --hr_footer:                        #979797;
    --pie_footer:                       #464646;
    --roboto:                           'Roboto';
    --roboto_weight_bold:               600;
    --roboto_weight_semi_bold:          500;
    --roboto_weight_regular:            400;
}

* {
    box-sizing:                 border-box;
}
html, body {
    
    overscroll-behavior: none;
    
}
body {
    font-family:                var(--roboto), sans-serif;
    font-weight:                var(--roboto_weight_regular);
    margin:                     0;
    padding:                    0;
}

img {
    display:                    block;
    width:                      100%;
}

header {
    background:                 var(--fondo_header);
    color:                      var(--letras_header);
    padding:                    0 0 .5em 0;
    position:                   relative;
    width:                      100%;
    z-index:                    9999;
}

header .renglon_catalogo {
    background:                 red;
    color:                      yellow;
    cursor:                     pointer;
    font-size:                  2em;
    padding:                    .25em 0;
    text-align:                 center;
    width:                      100%;
}

header .primera_linea {
    display:                    none;
}

header .primera_linea .caja_primera_linea .renglon_primera_linea {
    border-left:                1px solid var(--border_renglon_primera_linea);
    color:                      var(--letras_header);
    cursor:                     pointer;
    font-size:                  14px;
    font-weight:                var(--roboto_weight_regular);
    margin:                     1em 0 0;
    padding:                    0 1em;
    position:                   relative;
    text-decoration:            none;
    vertical-align:             middle;
}

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:                    9;
}

header .primera_linea .caja_primera_linea .renglon_primera_linea ul li {
    background:                 var(--fondo_area_menu);
    color:                      var(--color_primera_linea);
    cursor:                     pointer;
    font-family:                var(--roboto), sans-serif;
    font-size:                  12px;
    font-weight:                var(--roboto_weight_regular);
    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:first-child:before {
    border-color:               transparent transparent var(--border_renglon_primera_linea);
    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: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_primera_linea);
    display:                    block;
    text-decoration:            none;
    width:                      100%;
}

header .primera_linea .caja_primera_linea .renglon_primera_linea ul li:hover {
    background:                 var(--fondo_primera_linea);
}

header .primera_linea .caja_primera_linea .renglon_primera_linea ul li a:hover {
    color:                      var(--letras_header);
}

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:                      2;
    text-align:                 center;
    width:                      calc(100% - 40%);
}

header .segunda_linea .bar_menu span {
    font-size:                  1em;
}

header .segunda_linea .bar_menu span:last-child {
    display:                    block;
}

header .segunda_linea .bar_menu p {
    margin:                     10px auto;
    padding:                    0;
}

header .segunda_linea .bar_menu p span a {
    color:                      white;
    display:                    inline-block;
    font-size:                  1.25em;
    padding:                    0 .25em;
    text-decoration:            none;
}

header .segunda_linea .bar_menu p span:first-child a {
    color:                      #64ff64;
}

header .segunda_linea .bar_menu p span a:last-child {
    padding:                    0 0 0 .25em;
}

header .segunda_linea .bar_menu p span a b {
    display:                    block;
    font-size:                  10px;
    text-align:                 center;
}

header .segunda_linea .logotipo {
    order:                      1;
    width:                      40%;
}

header .segunda_linea .logotipo img {
    margin:                     auto;
    padding:                    .5em 0;
    width:                      130px;
}

header .segunda_linea .buscador {
    order:                      4;
    position:                   relative;
    width:                      100%;
}

header .segunda_linea .buscador p {
    color:                      var(--buscador);
    display:                    inline-block;
    font-size:                  1em;
    left:                       0;
    margin:                     0;
    padding:                    8px 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;
}

.fondo {
    background:                 rgba(0, 0, 0, .6);
    display:                    none;
    height:                     100%;
    left:                       0;
    position:                   fixed;
    top:                        0;
    width:                      100%;
    z-index:                    9;
}

header .area_menu {
    background:                 var(--fondo_area_menu);
    color:                      var(--color_area_menu);
    display:                    none;
    height:                     100%;
    left:                       0;
    overflow-y:                 auto;
    position:                   fixed;
    top:                        0;
    width:                      80%;
    z-index:                    99;
}

header .area_menu .bloque_principal,
header .area_menu .bloque_categorias,
header .area_menu .bloque_subcategorias,
header .area_menu .bloque_servicios {
    display:                    none;
}

header .area_menu .bloque_principal.show,
header .area_menu .bloque_categorias.show,
header .area_menu .bloque_subcategorias.show,
header .area_menu .bloque_servicios.show {
    display:                    block;
}

header .area_menu .renglon_bloque,
header .area_menu .renglon_categoria {
    border-bottom:              1px solid rgba(0, 0, 0, .1);
    color:                      var(--color_area_menu);
    cursor:                     pointer;
    display:                    flex;
    justify-content:            space-between;
    align-items:                center;
    padding:                    16px 16px;
    text-decoration:            none;
    width:                      100%;
}

header .area_menu .renglon_bloque a,
header .area_menu .renglon_categoria a {
    text-decoration:            none;
    color:                      inherit;
}

header .area_menu .renglon_bloque .nombre,
header .area_menu .renglon_categoria .nombre {
    font-size:                  14px;
    font-weight:                var(--roboto_weight_semi_bold);
    flex:                       1;
}

header .area_menu .renglon_bloque .ver_todo,
header .area_menu .renglon_categoria .ver_todo {
    font-size:                  0.7em;
    text-decoration:            none;
    color:                      var(--color_area_menu);
}

header .area_menu .renglon_bloque:hover,
header .area_menu .renglon_categoria:hover,
header .area_menu .renglon_subcategoria:hover {
    border-left:                4px solid var(--fondo_header);
    color:                      var(--fondo_header);
}

header .area_menu .renglon_bloque:hover .nombre,
header .area_menu .renglon_bloque:hover .ver_todo,
header .area_menu .renglon_categoria:hover .nombre,
header .area_menu .renglon_categoria:hover .ver_todo,
header .area_menu .renglon_subcategoria:hover {
    color:                      var(--fondo_header);
}

header .area_menu .renglon_titulo {
    align-items:                center;
    border-bottom:              1px solid rgba(0, 0, 0, .1);
    color:                      var(--color_area_menu);
    cursor:                     pointer;
    display:                    flex;
    font-size:                  16px;
    font-weight:                var(--roboto_weight_bold);
    padding:                    16px 16px;
    text-align:                 center;
    text-decoration:            none;
    width:                      100%;
}

header .area_menu .renglon_titulo span {
    font-size:                  14px;
    vertical-align:             middle;
}

header .area_menu .renglon_titulo div {
    padding-left:               20px;
}

header .area_menu .renglon_subcategoria {
    border-bottom:              1px solid rgba(0, 0, 0, .1);
    color:                      var(--color_area_menu);
    cursor:                     pointer;
    display:                    block;
    font-size:                  14px;
    font-weight:                var(--roboto_weight_regular);
    padding:                    12px 16px;
    text-decoration:            none;
    width:                      100%;
}

header .area_menu .renglon_subcategoria a {
    text-decoration:            none;
    color:                      inherit;
}

header .area_menu .subcategoria {
    display:                    none;
}

header .area_menu .subcategoria.show {
    display:                    block;
}

header .area_menu_dos {
    background:                 var(--fondo_area_menu);
    color:                      var(--color_area_menu);
    display:                    none;
    height:                     100%;
    left:                       0;
    overflow-y:                 auto;
    position:                   fixed;
    top:                        0;
    width:                      80%;
    z-index:                    99;
}

header .area_menu_dos .bloque_principal {
    display:                    block;
}

header .area_menu_dos .renglon_bloque {
    border-bottom:              1px solid rgba(0, 0, 0, .1);
    color:                      var(--color_area_menu);
    display:                    flex;
    flex-wrap:                  wrap;
    justify-content:            space-between;
    font-size:                  16px;
    font-weight:                var(--roboto_weight_semi_bold);
    padding:                    16px 16px;
    text-decoration:            none;
    width:                      100%;
}

header .area_menu_dos .renglon_bloque p {
    display:                    inline-block;
    margin:                     0;
    padding:                    0;
}

.loader {
    align-items:                center;
    background:                 #ffffff;
    display:                    flex;
    flex-direction:             column;
    height:                     100%;
    justify-content:            center;
    left:                       0;
    position:                   fixed;
    top:                        0;
    transition:                 opacity 0.5s ease;
    width:                      100%;
    z-index:                    999999999999;
}

.loader.hidden {
    opacity:                    0;
    pointer-events:             none;
}

.loader img {
    height:                     auto;
    margin-bottom:              20px;
    width:                      150px;
}

.loader .counter {
    color:                      #333;
    font-family:                var(--roboto), sans-serif;
    font-size:                  1.5rem;
    font-weight:                var(--roboto_weight_bold);
}

@media only screen and (min-width: 992px) {
    header {
        padding:                    0 0 0 0;
    }
    header .renglon_catalogo {
        
        display:                    block;
        
    }

    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(--border_renglon_primera_linea);
        color:                      var(--letras_header);
        cursor:                     pointer;
        font-size:                  14px;
        font-weight:                var(--roboto_weight_regular);
        margin:                     1em 0 0;
        padding:                    0 1em;
        position:                   relative;
        text-decoration:            none;
        vertical-align:             middle;
    }

    header .primera_linea .caja_primera_linea .renglon_primera_linea:last-child {
        padding-right:              0;
    }

    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:                    9;
    }

    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li {
        background:                 var(--fondo_area_menu);
        color:                      var(--color_primera_linea);
        cursor:                     pointer;
        font-family:                var(--roboto), sans-serif;
        font-size:                  12px;
        font-weight:                var(--roboto_weight_regular);
        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:first-child:before {
        border-color:               transparent transparent var(--border_renglon_primera_linea);
        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: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_primera_linea);
        display:                    block;
        text-decoration:            none;
        width:                      100%;
    }

    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li:hover {
        background:                 var(--fondo_primera_linea);
    }

    header .primera_linea .caja_primera_linea .renglon_primera_linea ul li a:hover {
        color:                      var(--letras_header);
    }

    header .segunda_linea .bar_menu {
        display:                    none;
    }

    header .segunda_linea .logotipo {
        order:                      1;
        padding:                    0 0;
        width:                      250px;
    }

    header .segunda_linea .logotipo img {
        width:                      100%;
    }

    header .segunda_linea .buscador {
        order:                      3;
        width:                      calc(100% - 300px);
    }

    header .segunda_linea .buscador p {
        padding:                    8px 8px;
    }

    .loader img {
        width:                      200px;
    }

    .loader .counter {
        font-size:                  2rem;
    }
}

@media only screen and (min-width: 1200px) {
    header .primera_linea .caja_primera_linea {
        max-width:                  1440px;
    }

    header .primera_linea .caja_primera_linea .renglon_primera_linea {
        font-size:                  18px;
    }

    header .segunda_linea {
        max-width:                  1440px;
    }

    header .segunda_linea .buscador input {
        height:                     40px;
    }

    header .area_menu {
        width:                      300px;
    }

    header .area_menu::-webkit-scrollbar {
        width:                      1px;
    }

    header .area_menu::-webkit-scrollbar-thumb {
        background:                 #f5f5f5;
    }
}