/* CONTENEDOR PRINCIPAL DEL HEADER */
.header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: all 0.3s ease;
}

/* PREHEADER - se oculta al hacer scroll */
.prevHeader {
    background-color: var(--silverExtraLight);
    padding: 8px 0;
    transition: all 0.3s ease;
    max-height: 40px;
    overflow: hidden;
}

.containerPrevHeader {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
    font-size: 14px;
}

.containerPrevHeader a {
    color: var(--black);
    text-decoration: none;
}

/* HEADER PRINCIPAL */
header{
    width:100%;
    display:block;
    background-color:var(--white);
    height:auto;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    transition: all 0.3s ease;
}

.containerMenu{
    max-width:1300px;
    height:auto;
    margin:auto;
    display:block;
    flex-wrap:wrap;
    justify-content:space-evenly;
    position: relative;
}

/* LOGO Y BOTÓN HAMBURGUESA */
.logoAndOpenCLoseMenu{
    width:auto;
    display:flex;
    align-items:center;
    height:45px;
    order:2;
    padding:30px 0px;
    margin-left:0px;
    justify-content: flex-start;
}

.logoAndOpenCLoseMenu .openCloseMenu{
    width:50px;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor: pointer;
    transition:all ease .3s;
    z-index: 102; /* Z-INDEX ALTO */
}

.containSpanButton{
    width:50px;
    position:relative;
    height:50px;
    background-color:transparent;
    display:flex;
    justify-content:center;
    align-items:center;
}

.logoAndOpenCLoseMenu .openCloseMenu span{
    width:55%;
    height:3px;
    transition:all ease .3s;
    position: absolute;
    background-color:var(--black);
}

.logoAndOpenCLoseMenu .openCloseMenu span::before,
.logoAndOpenCLoseMenu .openCloseMenu span::after{
    content:'';
    transition:all ease .3s;
    width:100%;
    height:3px;
    background-color:var(--black);
    position:absolute;
}

.logoAndOpenCLoseMenu .openCloseMenu span::before{
    top:-8.5px;
}

.logoAndOpenCLoseMenu .openCloseMenu span::after{
    top:9.5px;
}

/* LOGO */
.logoAndOpenCLoseMenu .logo{
    font-family:sans-serif;
    font-size:30px;
    width:auto;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoAndOpenCLoseMenu a{
    text-decoration:none;
    color:var(--black);
}

.logoAndOpenCLoseMenu .openCloseMenu.active span::before{
    transform:rotate(45deg);
    top:0;
}

.logoAndOpenCLoseMenu .openCloseMenu.active span::after{
    transform:rotate(-45deg);
    top:0;
}

.logoAndOpenCLoseMenu .openCloseMenu.active span{
    background-color:transparent;
}

/* LOGO IMAGEN */
.logo{
    width:100px;
    height:70px;
    padding:10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img{
    width:100%;
    height:auto;
    max-width: 100px;
    object-fit: contain;
}

/* NAVEGACIÓN MÓVIL */
.nav{
    width:280px;
    height:100vh;
    position:fixed;
    display:block;
    background-color:var(--white);
    border-top:1px solid rgb(240, 240, 240);
    left: -280px;
    transition:all ease .3s;
    z-index: 101; /* Z-INDEX ALTO */
    padding: 20px 0;
    top: 0;
}

.leftMenu{
    left:0;
    width:280px;
}

.order1{
    order:1;
    min-width:auto;
    width:auto;
    display:block;
}

/* OVERLAY */
#overlay{
    width:100%;
    height:100vh;
    z-index: 100; /* Z-INDEX CORRECTO */
    position:fixed;
    display:none;
    background-color:rgba(22, 22, 22, 0.555);
    top: 0;
    left: 0;
}

.nav ul{
    margin-top:20%;
    min-width:280px;
    padding: 0 15px;
}

.nav ul li{
   text-decoration:none;
   cursor:pointer;
   list-style:none;
   font-size:15px;
   margin:0px 15px;
   transition:all ease .3s;
   position: relative;
   letter-spacing:1px;
   white-space: nowrap;
}

.nav ul li a{
    transition:all ease.2s;
    color:var(--black);
    text-decoration:none;
    display:block;
    font-weight:300;
    padding:15px 0px;
    font-size:15px;
    width: 100%;
}

.nav ul li:hover a{
    color:var(--secundary);
}

/* Ocultando los menus del order 3*/
.order3{
    display:none;
}

/* Mostrando los li ocultos del order 1*/
.dnone{
    display:block;
}

/* CLASE QUE SE ACTIVA AL HACER SCROLL */
.header-container.scrolled .prevHeader {
    max-height: 0;
    padding: 0;
    opacity: 0;
}

.header-container.scrolled .header {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 10px;
}

/* VISTA DESKTOP */
@media(min-width:950px){
    .header-container.scrolled .prevHeader {
        display: none; /* En desktop ocultamos completamente */
    }

    header{
        display:flex;
        justify-content:center;
        background-color:var(--white);
    }

    .containerMenu{
        width:98%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    .logoAndOpenCLoseMenu .openCloseMenu{
       display:none;
    }

    .logoAndOpenCLoseMenu{
        width:auto;
        height:auto;
        padding:0px;
        margin-left:0px;
        order: 2;
    } 
    
    .nav{
        width:auto;
        height:auto;
        position: static;
        background-color:transparent;
        border:none;
        margin-left:0;
        display:flex;
        align-items:center;
        padding: 0;
        z-index: auto; /* En desktop no necesita z-index alto */
    }
    
    .order1{
        order:1;
        min-width:auto;
        width:auto;
        display:flex;
        justify-content:flex-start;
        margin-right:0px;
    }
    
    .order3{
        order:3;
        display: flex;
        justify-content: flex-end;
    }

    .nav ul{
        display:flex;
        margin-top:0%;
        padding: 0;
        gap: 25px;
    }

    .nav ul li{
        overflow: hidden;
        margin: 0;
    }

    .nav ul li a{
        color:var(--black);
        font-size:16px;
        border-bottom:none;
        padding: 20px 0px;
    }

    .nav ul li:hover a{
        padding-left:0px;
        color:var(--secundary);
    }

    .dnone{
        display:none;
    }

    .efectBottom:before{
        content:'';
        position:absolute;
        width:0%;
        transition:all ease .8s;
        margin-top:25px;
        margin-left:0%;
        height:1px;
        background-color:var(--principal);
    }
    
    .nav ul li:hover .efectBottom:before{
       margin-left:100%;
       width:75%;
    }

    .logo{
        width:150px;
        height:100px;
    }
}