:root {

    /* ====== PALETA ====== */

    /* header principal (azul marca) */
    --fondo_header:             #1FA3D6;

    /* hover / línea activa */
    --fondo_primera_linea:      #27A9E1;

    /* navegación lateral */
    --fondo_nav:                #FFF7D6;

    /* fondos claros */
    --fondo_claro:              #ffffff;

    /* textos */
    --texto_sobre_oscuro:       #ffffff;
    --texto_principal:          #333;
    --texto_secundario:         #666;
    --texto_claro:              #979797;

    /* bordes */
    --borde_claro:              #ffffff;
    --borde_medio:              #e8e3c9;
    --borde_footer:             #444;

    /* footer */
    --fondo_footer:             #555;
    --pie_footer:               #464646;

    /* buscador */
    --buscador_iconos:          #333;

    /* ====== FUENTES ====== */
    --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 ====== */
    --peso_ligera:              300;
    --peso_normal:              400;
    --peso_medio:               500;
    --peso_negrita:             600;
    --peso_extra_negrita:       700;

    /* ====== Z-INDEX ====== */
    --nivel_base:               1;
    --nivel_fondo:              100;
    --nivel_menu:               200;
    --nivel_modal:              300;
    --nivel_alerta:             400;
    --nivel_emergencia:         9999;

}

/* =========================================================
   BASE
========================================================= */
*{
    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
========================================================= */
header{
    background:                 var( --fondo_header );
    color:                      var( --texto_sobre_oscuro );
    padding:                    0 0 .5em 0;
    position:                   relative;
    width:                      100%;
    z-index:                    10;
}

/* ===== Primera línea (solo desktop) ===== */
header .primera_linea{
    display:                    none;
}
header .primera_linea .btn_sinmenu{
    color:                      var( --texto_sobre_oscuro );
    text-decoration:            none;
}

/* ===== Segunda línea (móvil y desktop) ===== */
header .segunda_linea{
    align-items:                center;
    display:                    flex;
    flex-wrap:                  wrap;
    font-size:                  1em;
    justify-content:            space-between;
    margin:                     auto;
    width:                      95%;
}

/* Móvil: izquierda menú */
header .segunda_linea .bar_menu{
    font-size:                  2em;
    order:                      1;
    width:                      25%;
}

/* Móvil: logo (lo agrandamos un poco) */
header .segunda_linea .logotipo{
    order:                      2;
    width:                      50%;
    margin:                     auto;
    max-width:                  120px; /* evita que se pase */
}
header .segunda_linea .logotipo img {
    
    width:                      80px;
    margin:                     auto;
    
}
/* Ya NO se usa en tu layout final (Catálogo está arriba en desktop) */
header .segunda_linea .bar_categorias{
    display:                    none;
}

/* Móvil: tienda derecha (icono) */
header .segunda_linea .tienda_movil{
    cursor:                     pointer;
    display:                    block;
    order:                      3;
    width:                      25%;
    text-align:                 right;
    font-size:                  1.8em;
}

/* Buscador abajo al 100% */
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;
}

/* login no se usa en este proyecto */
header .segunda_linea .login{
    display:                    none;
}

/* =========================================================
   FONDO + NAV
========================================================= */
.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;
}

/* =========================================================
   DESKTOP (>= 992px)
========================================================= */
@media ( min-width: 992px ){

    header{
        padding:                    0 0 0 0;
    }

    /* ===== Primera línea visible ===== */
    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%;
    }

    /* Alineación perfecta de todos los items (Catálogo/Servicios/íconos) */
    header .primera_linea .caja_primera_linea .renglon_primera_linea{
        display:                    inline-flex;
        align-items:                center;
        line-height:                1;
        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:first-child{
        border-left:                0;
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea:last-child{
        padding-right:              0 !important;
    }
    header .primera_linea .caja_primera_linea .renglon_primera_linea i{
        line-height:                1;
        vertical-align:             middle;
    }

    /* Submenu Servicios */
    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{
        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( --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: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 );
    }

    /* ===== Segunda línea en desktop ===== */
    header .segunda_linea{
        justify-content:            flex-start;
        gap:                        18px;
    }

    header .segunda_linea .bar_menu{
        display:                    none;
    }

    /* Logo grande desktop (433x192 se ve bien aquí) */
    header .segunda_linea .logotipo{
        order:                      1;
        padding:                    10px 0;
        width:                      120px;
        max-width:                  none;
    }
    header .segunda_linea .logotipo img {
    
        width:                      110px;
        
    }
    /* ocultar tienda móvil en desktop */
    header .segunda_linea .tienda_movil{
        display:                    none;
    }

    /* Buscador rellena TODO */
    header .segunda_linea .buscador{
        order:                      2;
        width:                      auto;
        flex:                       1 1 auto;
        min-width:                  300px;
    }

}

/* =========================================================
   XL (>= 1200px)
========================================================= */
@media ( min-width: 1200px ){

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

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

    nav{
        width:                      300px;
    }
    nav::-webkit-scrollbar{
        width:                      1px;
    }
    nav::-webkit-scrollbar-thumb{
        background:                 var( --fondo_nav );
    }

}

/* =========================================================
   BOTÓN WHATSAPP FIJO
========================================================= */
.wa_fijo{
    align-items:                center;
    bottom:                     20px;
    cursor:                     pointer;
    color:                      white;
    display:                    flex;
    font-size:                  40px;
    height:                     1.5em;
    justify-content:            center;
    position:                   fixed;
    right:                      20px;
    width:                      1.5em;
    z-index:                    999;
    background:                 rgb(37, 211, 102);
    border-radius:              50%;
}