header {
    position: sticky; /*Cuidado que en otras secciones el margin top cambia; creo que son 40px*/
    top: -15px;
    padding: 40px 70px 15px; /*Revisado padding bottom*/
    display: flex;
    justify-content: space-between;
    background-color: #f7fafd;
    z-index: 999;
}

header > button {
    display: none;
}

#header__logo {
    width: 107px;
}

#header__sections {
    text-transform: uppercase;
    font-size: 90p; /*Revisar esto*/
    color: #202020;
    display: flex;
    align-items: baseline;
    column-gap: 10px;
}

#header__navbar ul {
    display: flex;
    column-gap: 25px;
    list-style: none; /*Para quitar el punto*/
}

#header__navbar a:hover {
    color: red;
} /*Cuando el ratón está encima*/

#header__navbar ul:hover a.active:not(:hover) {
    color: #202020;
} 



/*Todo el bloque de abajo ordenarlo en el código*/

#navbar__extra:hover #extra__sections{
    display:flex;
    background: #f7fafd;
}

#header__navbar a {
    font-weight: bold;
    text-decoration: none;
    color: inherit;
}
#header__navbar a.active {
    color: red;
} /*Lo pone js*/

#header__navbar #extra__sections {
    position: absolute;
    left: 0;
    top: calc(100% + 15px);
    flex-direction: column;
    white-space: nowrap; /*Para que se vea bien*/
    padding: 15px;
    box-shadow: 0px 5px 5px 5px #0002;
    display: none;/*display: flex pa que se vea para ajustarlo*/
}

#navbar__extra {
    position: relative;
}

#extra__sections::after {
    content: "";
    position: absolute;
    display:block;
    /*background: red;*/
    height: 15px;
    width: 100%;
    top: -15px;
    left: 0;
}

#extra__sections li{
    padding: 20px 10px;
    margin: 0 10px;
    border-bottom: 1px solid #eef3f6;
}

#extra__sections li:last-child {
    border-bottom: none;
}

#header__button {
    color: #ff556e; /*Revisar esto*/
    text-transform: uppercase;
    padding: 10px 20px;
    border: 2px solid  #ff556e;
    border-radius: 20px;
    background-color: #f7fafd;
    font-weight: bold;
}

@media (max-width: 800px) {
    header {
        top: 0; /*Que no se meta para arriba*/
    }
    #header__sections {
        display: none; /*para que no sea hasta que se pinche en el menú*/
        flex-direction: column-reverse; /*botón arriba*/
        row-gap: 5px;
        position: absolute; /*ya no ocupa espacio, lo sacamos del flow*/
        right: 2px;
        top: 2px;
        background: #f7fafd;
        box-shadow: 0px 5px 5px 5px #0002;
        padding: 20px 20px 20px;
        border-radius: 10px;
    }
    #header__sections > #header__navbar > ul {
        flex-direction: column;
        row-gap: 5px;
    }
    #header__sections img {
        display: none; /*ocultar triángulo*/
    }

    #header__sections #navbar__extra ul {
        padding: 10px 0;
        display: flex;
        position: relative;
        box-shadow: none;
        row-gap: 3px
    }
    #header__sections #navbar__extra ul li {
        padding: 0;
        margin: 0;
        font-size: 95%;
    }

    header > button {
        display: block; /*hay que ponerlo porque estaba en none*/
        position: fixed;
        right: 5px;
        top: 5px;
        background: transparent;
        border: none;
    }
    header > button > svg:last-child {
        display: none;
    }
    header > button:focus > svg:first-child {
        display: none;
    }
    header > button:focus > svg:last-child {
        display: block;
    }
    header:focus-within #header__sections {
        display: flex; /*si hay foco en el header (en el botón)*/
    }
}