/* Esta hecho Desktop First... Deberia haber sido Mobile first. */
/* -------------------------------------------- HEADER SECTION -------------------------------------------- */
.header {
    /* Display & Position */
    display: flex;
    position: sticky; /* a diferencia de fixed, mantiene la posicion en el dom */
    top: 0;
    z-index: 10; /* para que quede la barra no quede oculta atras del body */

    /* Alineacion */
    justify-content: space-between;
    align-items: center;  /* centro verticalmente */

    /* Box model */
    height: var(--header-height);

    /* Color */
    background-color: var(--bc-3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

/* ---------------------------*/
/* Logo y nombre de la empresa  */
/* ---------------------------*/
.header__logo-container a {
    display: flex; /* el logo y el nombre de la empresa en linea */
    align-items: center;
    transition: scale 0.3s;
}

/* Separo nombre de empresa de logo */
.header__logo-container a > *, .footer__logo-link > * {
    padding: 0px 5px; 
}

.header__logo-container a:hover {
    scale: 1.1;
}

/* Nombre de la empresa del texto */
.header__logo-title, .footer__logo-title {
    font-size: var(--fs-header-logo);
    font-weight: 400;
}

/* ---------------------------*/
/* Barra de navegacion MOBILE*/
/* ---------------------------*/
.header__nav-list {
    /* Display */
    display: flex;

    /* Alineación */
    justify-content: flex-end; /* Alinea todo al final de la direccion flex, en este caso, al final de la linea, es como un right=0 */
    align-items: center; /* centrar verticalmente */

    /* Box model */
    width: 100%;

    /* Otro */
    font-size: var(--fs-header);
    list-style: none;
}

.mobile-navbar li[onclick] {
    display: flex;
    justify-content: flex-end;
}

.header__nav-list button {
    background-color: transparent;
    border: none;
}

.mobile-navbar button {
    background-color: white;
}

.header__nav-list a {
    /* color: #fff; */
    padding: 0 2vw; /* espacio lateral entre items */
}

.mobile-navbar {
    /* Display & position */
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    /* Alineacion */
    justify-content: start;
    text-align: left;

    /* Box model */
    height: 100vh;
    width: 0%;
    overflow-x: hidden; /* Las palabras no salen de la caja al hacer la transicion */

    /* Transicion */
    transition: width 0.5s ease; /* Agregamos una transición suave a la propiedad width */

    /* Color */
    background-color:rgb(0, 0, 0, 0.92);   
    /* background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8)); */
    /* -webkit-backdrop-filter: blur(10px); Esto no arregla el problema de Iphone 
    backdrop-filter: blur(10px);  No funciona para Iphone */
}

.mobile-navbar li {
    /* Box model */
    box-sizing: border-box;
    width: 100%;
    padding: 0 8%;
    padding-top: 3vh;
    /* font */
    font-size: var(--fs-h4); 
}

.mobile-navbar a {
    color: #fff;

}

.header_dropdown li {
    font-size: var(--fs-small);
}

/* ---------------------------*/
/* Hide segun Mobile y Desktop */
/* ---------------------------*/
.header__nav-item a:is(:hover, :focus) {
    opacity: 0.7;
}

.menu-toggle {
    display: block;
}

.hideOnMobile {
    display: none;
}

/* -------------------------------------------- 
Desktop config
-------------------------------------------- */
@media only screen and (min-width: 1000px) {
    .hideOnDesktop {
        display: none !important; /* tuve que usar important porque sino js la deja abierta */
    }

    .hideOnMobile {
        display: block;
    }

    #desktop-navbar > li {
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--header-height);
        width: 190px; /* Fallback */
        width: clamp(190px, 15vw, 250px);
    }

    /* Dropdown (solo Desktop pues mobile directamente lo visualizo)*/
    .header__nav-item:has(.header_dropdown) {
        position: relative; /* Posicion relativa para que la dropdown tenga su mismo ancho */
    }

    .header_dropdown {
        display: none; /* Entra en conflicto con el HideOnMobile */

        /* Position */
        position: absolute; 
        top: var(--header-height);
        width: 100%;

        /* top=0% para que no haya un hueco entre el li y la ul y se rompa el hover... */
        z-index: 5;
        padding: 0 10px;

        /* Style */
        text-align: left;
        background-color: var(--bc-2);
        border: 0.5px solid black;
        border-radius: 4px;
    }

    li:hover .header_dropdown {
        display: block;
    }

    .header_dropdown li {
        padding: 5px 0;
    }

    .header_dropdown a {
        padding: 0;
        color: black;
    }

    /* Boton especial en navbar */
    .desktop-navbar .special_button {
        padding: 0.25rem 0.6rem;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        background: var(--lila-1);
        color: #fff;
    }
}