:root{

    --corbase: rgb(42, 184, 165);
    --corbasec: rgb(96, 207, 191);
    --corbasecc: rgb(242, 252, 250);
    --corbasee: rgb(25, 132, 119);
    --corbaseee: rgb(12, 70, 64);

    --corcomp: rgb(25, 40, 100);
    --corcompc: rgb(72, 91, 163);
    --corcompcc: rgb(245, 247, 253);
    --corcompe: rgb(16, 27, 72);
    --corcompee: rgb(8, 14, 40);    

    --vermelho: rgb(215, 45, 45);
    --vermelhoc: rgb(235, 100, 100);
    --vermelhocc: rgb(255, 245, 245);
    --vermelhoe: rgb(165, 30, 30);
    --vermelhoee: rgb(90, 20, 20);

    --dourado: rgb(195, 155, 45);
    --douradoc: rgb(220, 185, 90);
    --douradocc: rgb(255, 250, 240);
    --douradoe: rgb(145, 115, 25);
    --douradoee: rgb(75, 60, 15);

    --laranja: rgb(220, 105, 45);
    --laranjac: rgb(240, 150, 95);
    --laranjacc: rgb(255, 245, 240);
    --laranjae: rgb(165, 70, 25);
    --laranjaee: rgb(90, 40, 15);

    --bronze: rgb(175, 110, 65);
    --bronzec: rgb(205, 155, 110);
    --bronzecc: rgb(250, 245, 240);
    --bronzee: rgb(125, 75, 40);
    --bronzeee: rgb(65, 40, 20);

    --verde: rgb(90, 170, 75);
    --verdec: rgb(135, 200, 120);
    --verdecc: rgb(245, 250, 245);
    --verdee: rgb(60, 120, 45);
    --verdeee: rgb(30, 70, 25);

    --ciano: rgb(25, 155, 215);
    --cianoc: rgb(90, 195, 235);
    --cianocc: rgb(245, 250, 255);
    --cianoe: rgb(10, 105, 145);
    --cianoee: rgb(5, 55, 80);

    --azul: rgb(25, 120, 190);
    --azulc: rgb(85, 165, 225);
    --azulcc: rgb(245, 250, 255);
    --azule: rgb(15, 75, 130);
    --azulee: rgb(10, 40, 75);

    --roxo: rgb(125, 105, 220);
    --roxoc: rgb(165, 150, 240);
    --roxocc: rgb(250, 245, 255);
    --roxoe: rgb(85, 65, 170);
    --roxoee: rgb(50, 35, 100);

    --rosa: rgb(220, 105, 160);
    --rosac: rgb(235, 155, 190);
    --rosacc: rgb(255, 245, 250);
    --rosae: rgb(165, 70, 115);
    --rosaee: rgb(90, 40, 65);  

    --cinza250: rgb(250,250,250);
    --cinza248: rgb(248,248,248);
    --cinza245: rgb(245,245,245);
    --cinza240: rgb(240,240,240);
    --cinza230: rgb(230,230,230);
    --cinza220: rgb(220,220,220);  
    --cinza200: rgb(200,200,200);        
    --cinza160: rgb(160,160,160);    
    --cinza128: rgb(128,128,128);
    --cinza100: rgb(100,100,100);
    --cinza20: rgb(20,20,20);

    --brancotransparente: rgba(255,255,255,0.6);
    --pretotransparente: rgb(0,0,0,0.6); 

    --textoPadrao: var(--cinza100);
    
    --radiuspadrao: 10px;

    --corborda: var(--cinza220);
    
    --bordapadrao: 1px solid var(--cinza220); 
}

@font-face {
    font-family: "Barlow Condensed";    
    src: url("/fonts/barlow.woff2") format("woff2"), url("/fonts/barlow.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";    
    src: url("/fonts/inter.woff2") format("woff2"), url("/fonts/inter.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
    scroll-behavior: smooth;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--textoPadrao);
    line-height: 1.3;
    -webkit-tap-highlight-color: transparent;
}

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--cinza248);
}

/* Definição tipográfica */

h1, h1 *{
  font-size: 2.2rem;
}

h2, h2 *{
  font-size: 1.8rem;
}

h3, h3 *{
  font-size: 1.4rem;
}

h4, h4 *{
  font-size: 1.15rem;
}

h5, h5 *{
  font-size: 1rem;
}

h6, h6 *{
    font-size: 0.9rem;
}

small{
    font-size: 0.85rem;
}

.barlow, .barlow *{
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    line-height: 1.1;
}

h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 *, b, strong{
    font-weight: 600;
    line-height: 1.3;
}


.tituloRet{
    display: flex;
    gap: 0.5rem;
    color: var(--corbase);
}

.tituloRet::before{
    content: "";
    width: 0.3rem;
    background-color: var(--ciano);
    border-radius: 100px;
}

/* Cores de texto */

.textoBranco{
    color: white !important;
}

.textoPadrao{
    color: var(--textoPadrao);
}

.textoBase{
    color: var(--corbase) !important;
}

.textoBasee{
    color: var(--corbasee) !important;
}

.textoComp{
    color: var(--corcomp) !important;
}

.textoCompe{
    color: var(--corcompe) !important; 
}

.textoVermelho{
    color: var(--vermelho) !important;
}

.textoDourado{
    color: var(--dourado) !important;
}

.textoLaranja{
    color: var(--laranja) !important;
}

.textoBronze{
    color: var(--bronze) !important;
}

.textoVerde{
    color: var(--verde) !important;
}

.textoCiano{
    color: var(--ciano) !important;
}

.textoCianoe{
    color: var(--cianoe) !important;
}

.textoAzul{
    color: var(--azul) !important;
}

.textoAzule{
    color: var(--azule) !important;
}

.textoRoxo{
    color: var(--roxo) !important;
}

.textoRosa{
    color: var(--rosa) !important;
}

/* Cores para fundo */

.fundoBranco{
    background-color: white !important;
}

.fundoBase{
    background-color: var(--corbase) !important;
}

.fundoComp{
    background-color: var(--corcomp) !important;
}

.fundoVermelho{
    background-color: var(--vermelho) !important;
}

.fundoDourado{
    background-color: var(--dourado) !important;
}

.fundoLaranja{
    background-color: var(--laranja) !important;
}

.fundoBronze{
    background-color: var(--bronze) !important;
}

.fundoVerde{
    background-color: var(--verde) !important;
}

.fundoCiano{
    background-color: var(--ciano) !important;
}

.fundoAzul{
    background-color: var(--azul) !important;
}

.fundoRoxo{
    background-color: var(--roxo) !important;
}

.fundoRosa{
    background-color: var(--rosa) !important;
}

/* Links */

a,
.link,
.linkCinza,
.linkBranco,
.linkBase,
.linkComp{
    text-decoration: none;
    transition: color 0.5s;
}

a, .link{
    color: var(--azul);
}

.linkCinza, .linkBase, .linkComp{
    color: var(--textoPadrao);
}

.linkBranco{
    color: white;
}

a:hover,
.link:hover,
.linkCinza:hover,
.linkBranco:hover{
    color: var(--azulc);
}

.linkBase:hover{
    color: var(--corbase);
}

.linkComp:hover{
    color: var(--corcomp);
}

/* SVGs */

svg *{
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: var(--textoPadrao);
    stroke-width: 8px;
    transition: stroke 0.5s;
}

.strokeBase, .strokeBase *{
    stroke: var(--corbase);
}

.strokeComp, .strokeComp *{
    stroke: var(--corcomp);
}

.strokeVermelho, .strokeVermelho *{
    stroke: var(--vermelho);
}

.strokeDourado, .strokeDourado *{
    stroke: var(--dourado);
}

.strokeLaranja, .strokeLaranja *{
    stroke: var(--laranja);
}

.strokeBronze, .strokeBronze *{
    stroke: var(--bronze);
}

.strokeVerde, .strokeVerde *{
    stroke: var(--verde);
}

.strokeCiano, .strokeCiano *{
    stroke: var(--ciano);
}

.strokeAzul, .strokeAzul *{
    stroke: var(--azul);
}

.strokeRoxo, .strokeRoxo *{
    stroke: var(--roxo);
}

.strokeRosa, .strokeRosa *{
    stroke: var(--rosa);
}

/* Animação de linhas svg */

.animaLinhas > svg{
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: animaLinhas 2s infinite alternate;
}

@keyframes animaLinhas{
    0%{
        stroke-dashoffset: 400;
    }
    100%{
        stroke-dashoffset: 0;
    }
}

/* Imagens */

img{
    display: block;
}

.imgFit{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imgLink{
    border: 1px solid transparent;
    transition: border 0.5s !important;
    cursor: pointer !important;
}

.imgLink:hover{
    border: 1px solid var(--azulc);
}

.imgCircular{
    border-radius: 50%;
    overflow: hidden;
}

.img1,
.img12,
.img15,
.img2,
.img25,
.img3,
.img4,
.img5,
.img6,
.img7,
.img8,
.img9,
.img10{
    display: flex;
    align-items: center;
    justify-content: center;
    transition: stroke 0.5s;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    flex-shrink: 0;
}

.img1{ 
    width: 1rem;
    height: 1rem;
}

.img12{ 
    width: 1.2rem;
    height: 1.2rem;
}

.img15{ 
    width: 1.5rem;
    height: 1.5rem;
}

.img2{ 
    width: 2rem;
    height: 2rem;
}

.img25{ 
    width: 2.5rem;
    height: 2.5rem;
}

.img3{ 
    width: 3rem;
    height: 3rem;
}

.img4{ 
    width: 4rem;
    height: 4rem;
}

.img5{ 
    width: 5rem;
    height: 5rem;
}

.img6{ 
    width: 6rem;
    height: 6rem;
}

.img7{ 
    width: 7rem;
    height: 7rem;
}

.img8{ 
    width: 8rem;
    height: 8rem;
}

.img9{ 
    width: 9rem;
    height: 9rem;
}

.img10{ 
    width: 10rem;
    height: 10rem;
}

.img1 > img, .img1 > svg,
.img12 > img, .img12 > svg,
.img15 > img, .img15 > svg,
.img2 > img, .img2 > svg,
.img25 > img, .img25 > svg,
.img3 > img, .img3 > svg,
.img4 > img, .img4 > svg,
.img5 > img, .img5 > svg,
.img6 > img, .img6 > svg,
.img7 > img, .img7 > svg,
.img8 > img, .img8 > svg,
.img9 > img, .img9 > svg,
.img10 > img, .img10 > svg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.imgContain{
    object-fit: contain !important;
}

.imgCover{
    object-fit: cover !important;
}

/* Gerais */

.centralizarDiv{
    padding: clamp(1.5rem, 2.5vw, 2rem) 5%;
}

.escondido{
    display: none !important;
}

.invisivel{
    visibility: hidden;
}

.altura100{
    height: 100%;
}

.largura100{
    width: 100%;
}

.textoCentro{
    text-align: center;
}

.textoDireita{
    text-align: right;
}

.lista{
    list-style: none;
}

.listaBullet{
    list-style-position: inside;
}

.listaNumerada{
    list-style-position: inside;
}

.listaNumerada li::marker{
    color: var(--corcomp);
    font-weight: 600;
}

.voltar a::before{
    content: "← ";
    color: var(--ciano);
}

.semQuebra{
    white-space: nowrap;
}

.quebraPalavra{
    word-break: break-all;
}

.preFormatado{
    white-space: pre-line;
}

.quebraPrint{
    page-break-before: always;
}

.semQuebraPrint{
    page-break-inside: avoid;
}

/* Card */

.card,
.cardFiltros{
    background-color: white;
    border-radius: var(--radiuspadrao);
    transition: border 0.5s, background 0.5s, color 0.5s, stroke 0.5s;
}

.cardFiltros{
    border: 1px dashed var(--rosa);
}

/* Grupo expansivel */

.grupoExpansivel{
    display: grid;
    transition: grid-template-rows 0.5s;
}

.grupoExpansivel.fechado{
    grid-template-rows: 0fr;
}

.grupoExpansivel.aberto{
    grid-template-rows: 1fr;
}

.grupoExpansivel > .interno{
    overflow: hidden;
}

/* Bordas */

.border{
    border: var(--bordapadrao);
}

.borderRadius{
    border-radius: var(--radiuspadrao);
}

.borderTop{
    border-top: var(--bordapadrao);
}

.borderBottom{
    border-bottom: var(--bordapadrao);
}

.border50{
    border-radius: 50%;
}

/* Margens padrão */

.marginTop03{
    margin-top: 0.3rem;
}

.marginTop05{
    margin-top: 0.5rem;
}

.marginTop1{
    margin-top: 1rem;
}

.marginTop15{
    margin-top: 1.5rem;
}

.marginTop2{
    margin-top: 2rem;
}

.marginBottom03{
    margin-bottom: 0.3rem;
}

.marginBottom05{
    margin-bottom: 0.5rem;
}

.marginBottom1{
    margin-bottom: 1rem;
}

.marginBottom15{
    margin-bottom: 1.5rem;
}

.marginBottom2{
    margin-bottom: 2rem;
}

/* Opções de padding */

.padding05{
    padding: 0.5rem;
}

.padding1{
    padding: 1rem;
}

.padding15{
    padding: 1.5rem;
}

.padding2{
    padding: 2rem;
}

.paddingTop05{
    padding-top: 0.5rem;
}

.paddingTop1{
    padding-top: 1rem;
}

.paddingTop15{
    padding-top: 1.5rem;
}

.paddingTop2{
    padding-top: 2rem;
}

.paddingBottom05{
    padding-bottom: 0.5rem;
}

.paddingBottom1{
    padding-bottom: 1rem;
}

.paddingBottom15{
    padding-bottom: 1.5rem;
}

.paddingBottom2{
    padding-bottom: 2rem;
}

/* Opções para flex */

.flexStart, .flexCenter, .flexEnd, .flexBetween{
    display: flex;
    align-items: center;
}

.flexCenter{
    justify-content: center;    
}

.flexEnd{
    justify-content: flex-end;
}

.flexBetween{
    justify-content: space-between;
}

.flexWrap{
    flex-wrap: wrap;
}

.alignStart{
    align-items: start !important;
}

.inlineFlex{
    display: inline-flex !important;
}

/* Opções para Gap */

.gap03{
    gap: 0.3rem;
}

.gap05{
    gap: 0.5rem;
}

.gap1{
    gap: 1rem;
}

.gap15{
    gap: 1.5rem;
}

.gap2{
    gap: 2rem;
}

/* Opções para grid */

.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10{
    display: grid;
    align-items: start;   
}

.gridStretch{
    align-items: stretch;
}

.grid2{
    grid-template-columns: repeat(auto-fill, minmax(min(36rem, 100%), 1fr));
}

.grid3{
    grid-template-columns: repeat(auto-fill, minmax(min(27rem, 100%), 1fr));
}

.grid4{
    grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
}

.grid5{
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

.grid6{
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}

.grid7{
    grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
}

.grid8{
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
}

.grid9{
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
}

.grid10{
    grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
}

/* Botão de menu */

.botaoMenu{
    width: 1.5rem;
    height: 2.5rem; 
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;    
}

.botaoMenu > span{
    display: block;
    background-color: var(--textoPadrao);
    width: 100%;
    height: 2px;
    border-radius: 100px;
    transition: background 0.5s, width 0.5s;
}

.botaoMenu:hover > span{
    background-color: var(--dourado);
}

.botaoMenu .l1{
    width: 80%;
}

.botaoMenu .l3, .botaoMenu:hover .l2{
    width: 60%;
}

.botaoMenu:hover .l1, .botaoMenu:hover .l3{
    width: 100%;
}

/* Botão pesquisar */

.botaoLupa svg *{
    stroke: var(--textoPadrao);
    stroke-width: 8px;
    transition: stroke 0.5s;
}

.botaoLupa:hover svg *{
    stroke: var(--dourado);
}

/* Botão Info */

.botaoInfo{ 
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    position: relative;
    top: 0.1rem;
}

.botaoInfo::before{
    content: url("/img/icones/info.svg");
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s;
}

.botaoInfo:hover:before{
    filter: brightness(1.3);
}

/* Mensagem erro, nota e alerta */

.msgerro{
    display: flex;
    flex-direction: column;
    color: var(--vermelho);
    gap: 0.3rem;
    border-radius: var(--radiuspadrao);
    padding: 0.5rem;
    border: 1px solid;
    background-color: var(--vermelhocc);
}

.msgerro::before{
    content: "Atenção";
    color: inherit;
    font-size: 75%;
}

.msgerro > span{
    color: var(--vermelho);
}

.nota,
.alerta{
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radiuspadrao);
}

.nota{    
    border: 1px dotted var(--douradoc);
    background-color: var(--douradocc);
}

.alerta{   
    border: 1px dotted var(--laranjac);
    background-color: var(--douradocc);
}

.nota > span,
.alerta > span{
    position: relative;
}

.nota > span{
    top: 0.25rem;
    color: var(--douradoe);
}

.alerta > span{
    color: var(--laranjae); 
}

.nota::before,
.alerta::before{
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
}

.nota::before{
    content: url("/img/icones/luz.svg");    
}

.alerta::before{
    width: 1.2rem;
    height: 1.2rem;
    content: url("/img/icones/alerta.svg");    
}

/* Outras caixas */

.caixaCiano, .caixaVermelha{
    padding: 1rem;
    border-radius: var(--radiuspadrao);
}

.caixaCiano{    
    border: 1px solid var(--ciano);
    color: var(--ciano);
    background-color: var(--cianocc);
}

.caixaVermelha{
    border: 1px solid var(--vermelho);
    color: var(--vermelho);
    background-color: var(--vermelhocc);
}

/* Definição vazia de caixas */

.msgerro:empty,
.nota:empty,
.alerta:empty,
.vazio:empty,
.caixaCiano:empty,
.caixaVermelha:empty{
    display: none !important;
}

/* Grupos de ícones de redes sociais */

.grupoRedes .iconeEmail:hover svg *{
    stroke: var(--ciano);
}

.grupoRedes .iconeWhatsApp:hover svg *{
    stroke: var(--verde);
}

.grupoRedes .iconeInstagram:hover svg *{
    stroke: var(--roxo);
}

.grupoRedes .iconeFacebook:hover svg *,
.grupoRedes .iconeLinkedin:hover svg *{
    stroke: var(--azul);
}

.grupoRedes .iconeYoutube:hover svg *{
    stroke: var(--vermelho);
}

/*Splash */

.splash{
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;    
}

.splash.fechado{
    right: -100%;
}

.splash.aberto{
    right: 0;
}

.splash .centro{
    width: min(40rem, 90%);
    max-height: 90svh;
    overflow: auto;
    margin: 0 auto;
    background-color: var(--cinza250);
    border-radius: var(--radiuspadrao);
    padding: clamp(1.5rem, 2.5vw, 3rem);
    z-index: 2;
    transition: transform 0.5s;
}

.splash .centro.maior{
    width: min(80rem, 90%);
}

.splash .centro.alturaMax{
    height: 85svh;
}

.splash .iconeSvg{
    width: clamp(2.5rem, 4.2vw, 3rem);
    height: clamp(2.5rem, 4.2vw, 3rem);
    margin: 0 auto;
}

.splash.fechado .centro{
    transform: scale(0);
}

.splash.aberto .centro{
    transform: scale(100%);
}

.fundoPreto{
    position: absolute;
    inset: 0;
    background-color: var(--pretotransparente);
    transition: opacity 0.5s;
}

.splash.fechado .fundoPreto{
    opacity: 0;
}

.splash.aberto .fundoPreto{
    opacity: 1;
}

/* Tabelas */

.containerTabela{
    container: tabela / inline-size;   
    width: 100%;
    overflow-x: auto;
}

.cardTabela{
    background-color: white;
    padding: 1rem;
    border-radius: var(--radiuspadrao);
    border: var(--bordapadrao);
}

.tabela{
    width: 100%;
    border-collapse: collapse;    
}

.tabela th, .tabela td{
    padding: 0.8rem;
    transition: color 0.5s;
}

.tabela th{
    border-bottom: var(--bordapadrao);
    text-align: left;
    color: var(--corcomp);
    font-weight: 600;
}

.tabela td{
    border-bottom: var(--bordapadrao);
    transition: background 0.5s;
}

.tabela tr:last-child td{
    border: none;
    padding-bottom: 0;
}

.circulo{
    width: 1.2rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transition: background 0.5s;
}

.tabela .opcoes{
    text-align: right;
}

.tabela .jogadores{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.tabela .grupoBotoes{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.tabela .grupoBotoes span{
    color: white;
    display: none;
}

.tabela .ch1{
    width: 1ch;
}

.tabela .ch10{
    width: 10ch;
}

.tabela .ch12{
    width: 12ch;
}

.tabela .ch15{
    width: 15ch;
}

/* Ajustes de container para a tabela, mas apenas para tela, impressão não */

@media screen {

    @container tabela (max-width: 950px){ 

        .containerTabela{          
            overflow-x: visible;
        }

        .cardTabela{
            background-color: transparent;
            border: none;
            padding: 0;
            border-radius: 0;
        }

        .tabela *{
            font-size: 1rem;
        }

        .tabela thead{
            display: none;
        }

        .tabela tbody{
            display: grid;
            gap: 1rem;
        }

        .tabela tbody tr{
            display: grid;
            gap: 0.5rem;
            border: var(--bordapadrao);
            border-radius: var(--radiuspadrao);   
            padding: 1rem;   
            background-color: white !important;     
        }

        .tabela tbody td{
            border: none;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;     
        }

        .tabela tbody td::before{
            content: attr(data-celula) " ";
            color: var(--corcomp);
            font-weight: 600;
        }

        .tabela .ativar{   
            border-bottom: var(--bordapadrao);
            padding-bottom: 0.5rem;
        }

        .tabela .grupoBotoes{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(7rem, 100%), 1fr));
        }

        .tabela .grupoBotoes span{
            display: inline;
        }

        .tabela .ch1, .tabela .ch10, .tabela .ch12, .tabela .ch15{
            width: 100%;
        }

    }
}


/* Header e Footer */

header{
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    background-color: var(--cinza250);
    border-bottom: 1px solid var(--corborda);
}

header .logo,
footer .logo{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    transition: transform 0.5s;
}

header .logo:hover,
footer .logo:hover{
    transform: translateY(-0.1rem);
}

header .logo img,
footer .logo img{
    height: 3rem;
    flex-shrink: 0;
}

header .logo .nome1,
footer .logo .nome1{
    color: var(--corbase);
}

header .logo .nome2,
footer .logo .nome2{
    color: var(--cianoe);
}

header .direita{
    display: flex;
    align-items: center;
    gap: 1rem;
}

header nav{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

header nav > a{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.5s, padding 0.5s, background 0.5s !important;
}

header nav > a::before,
header nav > a::after{
    content: "";
    position: absolute;    
    background-color: var(--corbasec);        
    width: 0;
    transition: width 0.5s;
}

header nav > a::before{
    left: 0;
    bottom: 0;
    height: 2px;
    border-radius: 100px;
}

header nav > a::after{
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 0 100px 100px 0;
    display: none;
}

header nav > a:hover::before{
    width: 100%;
}

header nav > a:hover::after{
    width: 1rem;
}

#pagSelecionada{
    color: var(--corbase) !important;
}

header nav .topo,
header nav .rodape,
header nav > a .img12{
    display: none;
}

footer{
    margin-top: auto;
    padding: 2rem 5%;
    border-top: var(--bordapadrao);  
    background-color: var(--cinza250);  
}


@media screen and (max-width: 950px){

    header .botaoMenu{
        display: flex;
    }  

    header nav{
        position: fixed;
        background-color: var(--cinza245);
        top: 0;
        bottom: 0;
        overflow-x: auto;
        display: block;
        width: 100%;
        padding: 4rem 10%;
        transition: right 0.5s;
    }

    .menuAberto{
        right: 0;
    }

    .menuFechado{
        right: -100%;
    }

    header nav > a{  
        border-bottom: var(--bordapadrao);
        padding: 1rem 0;
    }

    header nav > a:hover{
        background-color: white;
        padding: 1rem 0 1rem 2rem;
    }

    header nav > a::before{
        display: none;
    }

    header nav > a::after,
    header nav .rodape,
    header nav > a .img12{
        display: block;
    }

    #pagSelecionada{
        color: var(--textoPadrao) !important;        
    }

    #pagSelecionada:hover{
        color: var(--corbase) !important;
    }

    header nav .topo{
        display: flex;
    }

    header nav > a:hover .img12 *{
        stroke: var(--corbase);
    }

}

@media screen and (max-width: 350px){

    header .logo .nome1,
    header .logo .nome2{
        display: none;
    }    

}