header{
    background: center center /cover no-repeat;
}
@media only screen and (min-width: 801px), only screen and (min-device-width: 801px){
    header {
        padding: 2em;
        background-image: url("../imagens/capa-desktop.webp");
        aspect-ratio: 1814/991;
    }
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px){
    header {
        padding: 1em;
        background-image: url("../imagens/capa-mobile.webp");
        aspect-ratio: 600/743;
    }
}

header .limite{
    height: 100%;
}
header .secoes{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

header .barra{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
header .barra .logo{
    flex: 0 0 auto;
    padding: 0 2em 0 0;
}
header .barra .logo a{
    display: block;
}
header .barra .logo a img{
    display: block;
    width: 100%;
    max-width: 80px;
    aspect-ratio: 80/80;
}
@media only screen and (min-width: 1025px), only screen and (min-device-width: 1025px){
    header .barra{
        width: fit-content;
        margin: 0 auto;
    }
    header .barra .menu-desktop{
        flex: 1;
        min-width: 0;
        max-height: 80px;
        padding: 2em;
        background: var(--amarelo);
        border-radius: 30px;
    }
    header .barra .menu-mobile{
        display: none;
    }
}
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px){
    header .barra .menu-desktop{
        display: none;
    }
    header .barra .menu-mobile{
        position: relative;
        flex: 1;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
    }
    header .barra .menu-mobile a{
        display: block;
    }
    header .barra .menu-mobile a img{
        display: block;
        width: 40px;
        aspect-ratio: 448/512;
    }
}

header .barra .menu-desktop nav ul{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
header .barra .menu-desktop nav ul li a{
    display: block;
    font-family: 'Cascadia Code', 'Cascadia Fallback', 'Courier New', monospace;
    font-weight: bold;
    line-height: 1em;
    letter-spacing: 2.5px;
    color: var(--teal-escuro);
}
header .barra .menu-desktop nav ul li a:hover{
    text-decoration: none;
    color: var(--laranja);
}
@media only screen and (min-width: 1201px), only screen and (min-device-width: 1201px){
    header .barra .menu-desktop nav ul li a{
        padding: 0 1.5em 0 1.5em;
        font-size: 1em;
    }
}
@media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px){
    header .barra .menu-desktop nav ul li a{
        font-size: 0.9em;
        padding: 0 0.9em 0 0.9em;
    }
}

header .barra .menu-mobile nav{
    display: none;
    position: absolute;
    right: 42px;
    top: 0;
    white-space: nowrap;
    background: var(--amarelo);
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.26);
    box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.26);
}
header .barra .menu-mobile nav ul a{
    display: block;
    padding: 1em 2em 1em 2em;
    font-family: 'Cascadia Code', 'Cascadia Fallback', 'Courier New', monospace;
    font-weight: bold;
    line-height: 1em;
    letter-spacing: 2.5px;
    color: var(--teal-escuro);
}
header .barra .menu-mobile nav ul a:hover{
    text-decoration: none;
    color: var(--laranja);
}
@media only screen and (min-width: 541px), only screen and (min-device-width: 541px){
    header .barra .menu-mobile nav{
        border-radius: 20px;
    }
    header .barra .menu-mobile nav ul li:first-child{
        padding: 0.8em 0 0 0;
    }
    header .barra .menu-mobile nav ul li:last-child{
        padding: 0 0 0.8em 0;
    }
    header .barra .menu-mobile nav ul a{
        padding: 0.8em 1.5em 0.8em 1.5em;
        font-size: 0.8em;
    }
}
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px){
    header .barra .menu-mobile nav{
        border-radius: 15px;
    }
    header .barra .menu-mobile nav ul li:first-child{
        padding: 0.6em 0 0 0;
    }
    header .barra .menu-mobile nav ul li:last-child{
        padding: 0 0 0.6em 0;
    }
    header .barra .menu-mobile nav ul a{
        padding: 0.6em 1em 0.6em 1em;
        font-size: 0.8em;
    }
}

header .coalizao{
    padding: 1em 0 1em 0;
    text-align: center;
}
header .coalizao img{
    width: 100%;
    aspect-ratio: 320/320;
}
@media only screen and (min-width: 1201px), only screen and (min-device-width: 1201px){
    header .coalizao img{
        max-width: 320px;
    }
}
@media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px){
    header .coalizao img{
        max-width: 240px;
    }
}
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px){
    header .coalizao img{
        max-width: 165px;
    }
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px){
    header .coalizao img{
        max-width: 320px;
    }
}
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px){
    header .coalizao img{
        max-width: 200px;
    }
}

header .lema{
    width: fit-content;
    margin: 0 auto 2em auto;
}
header .lema .caixa1{
    background: rgba(255,253,214,0.32);
    backdrop-filter: brightness(1.6) saturate(1.5) blur(1px);
    -webkit-backdrop-filter: brightness(1.6) saturate(1.5) blur(6px); /* Safari */
}
header .lema .caixa1 .caixa2{
    background: rgba(254, 248, 206, 0.9);
}
header .lema .caixa1 .caixa2 span{
    display: inline-block;
    padding: 0.2em;
    font-family: 'Cascadia Code', 'Cascadia Fallback', 'Courier New', monospace;
    font-weight: bold;
}
header .lema .caixa1 .caixa2 span.verde{
    color: var(--verde);
}
header .lema .caixa1 .caixa2 span.laranja{
    color: var(--laranja);
}
header .lema .caixa1 .caixa2 span.teal-escuro{
    color: var(--teal-escuro);
}
@media only screen and (min-width: 1201px), only screen and (min-device-width: 1201px){
    header .lema .caixa1{
        padding: 1em;
        border-radius: 35px;
    }
    header .lema .caixa1 .caixa2{
        padding: 0.7em 3em 0.7em 3em;
        border-radius: 30px;
    }
    header .lema .caixa1 .caixa2 span{
        font-size: 1.7em;
    }
}
@media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px){
    header .lema .caixa1{
        padding: 0.8em;
        border-radius: 30px;
    }
    header .lema .caixa1 .caixa2{
        padding: 0.4em 2em 0.4em 2em;
        line-height: 1.4em;
        border-radius: 25px;
    }
    header .lema .caixa1 .caixa2 span{
        font-size: 1.4em;
    }
}
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px){
    header .lema .caixa1{
        padding: 0.7em;
        border-radius: 30px;
    }
    header .lema .caixa1 .caixa2{
        padding: 0.4em 2em 0.4em 2em;
        line-height: 1em;
        border-radius: 25px;
    }
    header .lema .caixa1 .caixa2 span{
        font-size: 1em;
    }
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px){
    header .lema .caixa1{
        padding: 0.6em;
        border-radius: 25px;
    }
    header .lema .caixa1 .caixa2{
        padding: 0.2em 1.5em 0.2em 1.5em;
        line-height: 1em;
        border-radius: 20px;
    }
    header .lema .caixa1 .caixa2 span{
        font-size: 1em;
    }
}
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px){
    header .lema .caixa1{
        padding: 0.4em;
        border-radius: 15px;
    }
    header .lema .caixa1 .caixa2{
        padding: 0.3em 0.4em 0.3em 0.4em;
        line-height: 0.7em;
        border-radius: 10px;
    }
    header .lema .caixa1 .caixa2 span{
        font-size: 0.7em;
    }
}