@charset "utf-8";


/***********RESET MARGIN and PADDING****************/
* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lunasima", sans-serif;
    -webkit-tap-highlight-color: transparent;
}

ul, li {
    list-style: none;
    text-align: right;
}




/**************ESTILO CONTENEDOR PRINCIPAL***********/
.maincontainer {
    max-width: 1366px;
    width: 100vw;
    margin: 0 auto;
}

/**********************HEADER***********************/
.header {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    padding: 20px 20px;
}

/**********************NAV**************************/
nav {
    height: var(--header-height);
}

    .navData {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .navLogo {
            display: inline-flex;
            align-items: center;
            column-gap: .25rem;
            font-weight: 600;
        }
        
            .navLogo img {
                height: 80px;
            }

        .navToggle {
            position: relative;
            width: 35px;
            height: 35px;
        }

            .navBurguer, .navClose {
                color: #222222;
                position: absolute;
                width: max-content;
                height: max-content;
                inset: 0;
                margin: auto;
                font-size: 35px;
                cursor: pointer;
                transition: opacity .4s, transform .4s;
            }
    
            .navClose {
                opacity: 0;
            }

/**************MENU FOR MOBILE DEVICES**************/
/*Al poner estos estilos ya en un media query para mov no tengo que deshacerlo todo en los otros dos y es menos código)*/
@media screen and (max-width:769px) {
    
    .navMenu {
        position: absolute;
        left: 0;
        top: 2.5rem;
        width: 100vw;
        height: 100vh;
        background-color: rgba(34,34,34,0.95);
        overflow: auto;
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .4s;
        z-index: 1;
    }
    
    .navMenu::-webkit-scrollbar {
        width: 0%
    }

        .navList {
            padding-top: 2rem;
        }  
    }

.navLink {
    color: #FFFFFF;
    font-family: "Lunasima", sans-serif;
    font-weight: 600;
    padding: 4rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .4s;
    text-decoration: none;
    font-size: 20px;
    text-transform: uppercase;
}
    

/******ESTILOS FUNCIÓN CLICK - MEDIANTE JS- *********/
.show-menu {
    opacity: 1;
    top: 0;
    pointer-events: initial;
}

.show-icon .navBurguer {
    opacity: 0;
    transform: rotate(90deg);
}

.show-icon .navClose {
    opacity: 1;
    transform: rotate(90deg);
    z-index: 100;
    color: #FFFFFF;
}

/*DROPDOWN MENU*/
.dropdownItem {
    cursor: pointer;
    position: relative; 
}

.dropdownArrow {
    font-size: 22px;
    font-weight: initial;
    transition: transform .4s;
}

.dropdownLink {
    padding: 0.75rem 1rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-family: "Lunasima", sans-serif;
    font-weight: 500;
    transition: .4s ease-in-out;
    text-decoration: none;
    font-size: 20px;
    text-transform: uppercase;
}

.dropdownLink:hover {
    scale: 1.05;
    transition: .6s ease-in-out;
}

.dropdownMenu {
    position: absolute; 
    top: 65%; 
    max-height: 0;
    overflow: hidden;
    transition: .4s ease-out;
    opacity: 0;
}

.showDropdown .dropdownMenu {
    max-height: 1000px;
    transition: .4s ease-in;
    opacity: 1;
}

.showDropdown .dropdownArrow {
    transform: rotate(180deg);
}


/*Los estados hover no son necesarios en dispositivos pequeños porque no se manejan con ratón.  
Las funciones importantes como mostrar y ocultar 'cosas' deben funcionar mediante 'click' (tap).
El estado hover sólo será visible cuando se pulse el botón.
Excepción: Se puede dejar en hover un 'cursor:pointer'por si alguien estuviera viendo la web en un notebook o portatil pequeño, ya que estos sí se manejan con ratón y al pasar el raton por un elemento el cursor le indicará que este es pulsable*/ 

/*****SHOW DROPDOWN MENU -MEDIANTE ESTADO HOVER- *******

.dropdownItem:hover .dropdownMenu {
    max-height: 1000px;
    transition: .4s ease-in;
}
*/

/*ROTATE DROPDOWN ICON
.dropdownItem:hover .dropdownArrow {
    transform: rotate(180deg);
}
*/



/* DISPOSTIVOS MEDIANOS TIPO TABLETS, NOTEBOOKS, PORTATILES PEQUEÑOS, ETC. */
@media screen and (max-width:340px) {
    .navContainer {
         margin-inline: 2rem;   
    }
    .navLink {
        padding-inline: 2rem;
    }
}


/* DISPOSTIVOS MEDIANOS TIPO TABLETS, NOTEBOOKS, PORTATILES PEQUEÑOS, ETC. */
@media screen and (min-width:769px) and (max-width:1023px) {
    
    .header {
        position: relative;
        width: 100%;
    }
    
/***************ELEMENTOS DE LA IZQUIERDA DE LA BARRA*******/
    .navContainer {
        margin-inline: auto;
    }
    
    nav {
        height: calc(--header-height)+2rem;
        display: flex;
        justify-content: space-between;
    }
    
    .navToggle {
        display: none;
    }
        
            .navList {
                height: 100%;
                display: flex;
                column-gap: .5rem;
                align-items: center;
            }
            
                .navLink {
                    height: 40%;
                    justify-content: initial;
                    column-gap: .25rem;
                    color: #222222;
                    font-size: 16px;
                    border-radius: 5px;
                    padding: 8px;
                }
    
                .navLink:hover {
                    background-color: #222222;
                    color: #FFFFFF;
                }
    
                    .dropdownItem {
                        position: relative;
                    }
    
/**********************MENU****************************/
    .dropdownMenu {
        max-height: initial;
        overflow: initial;
        position: absolute;
        left: 0px;
        opacity: 0;
        transition: .4s;
        z-index: 100;
        top: 100%;
        background-color:rgba(34,34,34,0.10);
        border-radius: 5px;
       
    }
    
    .dropdownLink {
        color:#222222;
        padding-inline: 0.5rem 0.5rem;
        font-size: 16px;
        border-radius: 5px;
        transition: .4s;
    }
    
    .dropdownLink:hover {
        background-color:rgba(34,34,34,0.50);
        color: #FFFFFF;
        scale: none;
    }
    
/*****************SHOW DROPDOWN MENU*******************/
/*
    .dropdownItem:hover .dropdownMenu{
        opacity: 1;
        top: 2rem;
        pointer-events: initial;
        transition: .4s;
    }
*/
}







 /* DISPOSTIVOS GRANDES O ALTA RESOLUCIÓN TIPO MONITOR, TV, ETC */
@media screen and (min-width:1024px) {
    
    .header {
        position: relative;
        width: 50%;
    }
    
/***************ELEMENTOS DE LA IZQUIERDA DE LA BARRA*******/
    .navContainer {
        margin-inline: auto;
    }
    
    nav {
        height: calc(--header-height)+2rem;
        display: flex;
        justify-content: space-between;
    }
    
    .navToggle {
        display: none;
    }
        
            .navList {
                height: 100%;
                display: flex;
                column-gap: .5rem;
                align-items: center;
            }
            
                .navLink {
                    height: 44%;
                    justify-content: initial;
                    column-gap: .25rem;
                    color: #222222;
                    font-size: 16px;
                    border-radius: 5px;
                    padding: 8px;
                }
    
                .navLink:hover {
                    background-color: #222222;
                    color: #FFFFFF;
                    border-radius: 5px;
                }
    
                .dropdownItem {
                    position: relative;
                }
    
/**********************MENU****************************/
    .dropdownMenu {
        max-height: initial;
        overflow: initial;
        position: absolute;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: .4s;
        z-index: 100;
        top: 100%;
        background-color:rgba(34,34,34,0.10);
        border-radius: 5px;
    }
    
    .dropdownLink {
        color:#222222;
        padding-inline: .5rem .5rem;
        font-size: 16px;
        border-radius: 5px;
        transition: .4s;
    }
    
    .dropdownLink:hover {
        background-color: rgba(34,34,34,0.70);
        color: #FFFFFF;
    }
    
/*****************SHOW DROPDOWN MENU CON HOVER*********/
    .dropdownItem:hover .dropdownMenu {
        opacity: 1;
        top: 2.25rem;
        pointer-events: initial;
        transition: .4s;
    }
    
    .dropdownItem:hover .dropdownArrow {
        transform: rotate(180deg);
    }
    
    .showDropdown .dropdownMenu {
    max-height: 0;
    transition: .4s ease-in;
    opacity: 0;
    }

    .showDropdown .dropdownArrow {
        transform: none;
    }
       
}