:root {

    color-scheme: light;

    --corbase: rgb(40, 185, 165);
    --corbasec: rgb(95, 205, 190);
    --corbasecc: rgb(240, 250, 250);
    --corbasee: rgb(20, 125, 110);
    --corbaseee: rgb(10, 70, 65);

    --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(140, 110, 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(0, 95, 170);
    --azulc: rgb(85, 155, 220);
    --azulcc: rgb(245, 250, 255);
    --azule: rgb(0, 65, 125);
    --azulee: rgb(0, 35, 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);

    --branco: rgb(255, 255, 255);
    --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.8);
    --pretotransparente: rgba(0, 0, 0, 0.6);

    /* Cores permanentes */
    --brancoperm: rgb(255, 255, 255);
    --pretoperm: rgb(0, 0, 0);

    /* Padrões */

    --textoPadrao: var(--cinza100);

    --radiuspadrao: 10px;

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

    /* Ícones para before */

    --iconeinfo: url("/img/icones/info.svg");
    --iconealerta: url("/img/icones/alerta.svg");
    --iconeluz: url("/img/icones/luz.svg");

}

@media (prefers-color-scheme: dark) {

    :root {

        color-scheme: dark;

        --corbase: rgb(70, 205, 185);
        --corbasec: rgb(130, 225, 210);
        --corbasecc: rgb(20, 45, 40);
        --corbasee: rgb(35, 160, 145);
        --corbaseee: rgb(165, 240, 230);

        --vermelho: rgb(240, 100, 100);
        --vermelhoc: rgb(255, 150, 150);
        --vermelhocc: rgb(55, 25, 30);
        --vermelhoe: rgb(190, 65, 65);
        --vermelhoee: rgb(255, 205, 205); 

        --dourado: rgb(225, 185, 80);
        --douradoc: rgb(245, 210, 135);
        --douradocc: rgb(50, 40, 25);
        --douradoe: rgb(175, 135, 50);
        --douradoee: rgb(255, 230, 175);

        --laranja: rgb(240, 140, 80);
        --laranjac: rgb(255, 185, 135);
        --laranjacc: rgb(55, 35, 25);
        --laranjae: rgb(195, 95, 45);
        --laranjaee: rgb(255, 215, 190);

        --bronze: rgb(205, 145, 100);
        --bronzec: rgb(230, 185, 150);
        --bronzecc: rgb(45, 35, 30);
        --bronzee: rgb(160, 100, 65);
        --bronzeee: rgb(245, 215, 185);

        --verde: rgb(120, 195, 105);
        --verdec: rgb(165, 225, 155);
        --verdecc: rgb(30, 45, 30);
        --verdee: rgb(80, 150, 65);
        --verdeee: rgb(205, 245, 195);

        --ciano: rgb(70, 180, 230);
        --cianoc: rgb(140, 215, 245);
        --cianocc: rgb(25, 40, 55);
        --cianoe: rgb(35, 130, 180);
        --cianoee: rgb(190, 235, 255);

        --azul: rgb(85, 155, 215);
        --azulc: rgb(145, 190, 240);
        --azulcc: rgb(25, 40, 55);
        --azule: rgb(50, 110, 170);
        --azulee: rgb(190, 220, 255);

        --roxo: rgb(160, 140, 240);
        --roxoc: rgb(200, 185, 255);
        --roxocc: rgb(40, 30, 55);
        --roxoe: rgb(115, 90, 195);
        --roxoee: rgb(225, 215, 255);

        --rosa: rgb(240, 140, 185);
        --rosac: rgb(255, 185, 215);
        --rosacc: rgb(55, 30, 45);
        --rosae: rgb(190, 95, 140);
        --rosaee: rgb(255, 215, 235);

        --branco: rgb(20, 20, 20);
        --cinza250: rgb(20, 20, 20);
        --cinza248: rgb(25, 25, 25);
        --cinza245: rgb(30, 30, 30);
        --cinza240: rgb(35, 35, 35);
        --cinza230: rgb(45, 45, 45);
        --cinza220: rgb(60, 60, 60);
        --cinza200: rgb(80, 80, 80);
        --cinza160: rgb(120, 120, 120);
        --cinza128: rgb(155, 155, 155);
        --cinza100: rgb(200, 200, 200);
        --cinza20: rgb(240, 240, 240);

        --brancotransparente: rgba(255, 255, 255, 0.02);
        --pretotransparente: rgba(0, 0, 0, 0.55);

        /* Ícones para before */

        --iconeinfo: url("/img/icones/info-dark.svg");
        --iconealerta: url("/img/icones/alerta-dark.svg");
        --iconeluz: url("/img/icones/luz-dark.svg");

    }

}


@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: var(--branco) !important;
}

.textoBrancoperm{
    color: var(--brancoperm) !important;
}

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

.textoCinza160{
    color: var(--cinza160);
}

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

.textoBasee{
    color: var(--corbasee) !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: var(--branco) !important;
}

.fundoBase{
    background-color: var(--corbase) !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,
.linkBrancoperm,
.linkBase{
    text-decoration: none;
    transition: color 0.5s;
}

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

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

.linkBranco{
    color: var(--branco);
}

.linkBrancoperm{
    color: var(--brancoperm);
}

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

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

/* 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);
}

.strokeBranco, .strokeBranco *{
    stroke: var(--branco);
}

.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;
}

.aspect1-1{
    aspect-ratio: 1 / 1 !important;
}

.aspect14-1{
    aspect-ratio: 1.4 / 1 !important;
}

.aspect16-9{
    aspect-ratio: 16 / 9 !important;
}

/* Gerais */

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

.escondido{
    display: none !important;
}

.invisivel{
    visibility: hidden;
}

.overflowHidden{
    overflow: 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(--azul);
    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: var(--branco);
    border-radius: var(--radiuspadrao);
    transition: border 0.5s, background 0.5s, color 0.5s, stroke 0.5s;
}

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

.cardLink{
    border: var(--bordapadrao);
    cursor: pointer;
}

.cardLink:hover{
    border: 1px solid var(--ciano);    
}

/* 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; 
    grid-template-columns: minmax(0, 1fr);  
}

.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));
}

.gridQuad{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 1300px){
    .gridQuad{
        grid-template-columns: repeat(2, 1fr);
    }        
}

@media screen and (max-width: 650px){
    .gridQuad{
        grid-template-columns: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: var(--iconeinfo);
    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(--dourado);
}

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

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

.nota::before{
    content: var(--iconeluz);    
}

.alerta::before{
    width: 1.2rem;
    height: 1.2rem;
    content: var(--iconealerta);    
}

/* 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: var(--branco);
    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(--azul);
    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 .texto{
    color: var(--branco);
    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: var(--branco) !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(--azul);
            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 .texto{
            display: inline;
        }

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

    }
}

/* Container carrossel */

.containerCarrossel .carrossel{
    width: 100%;
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 20rem;
    overflow-x: auto;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

.containerCarrossel .scrollLeft,
.containerCarrossel .scrollRight{
    border: 1px solid;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ciano);
    background-color: var(--cianocc);
    transition: color 0.5s, border 0.5s;
}

.containerCarrossel .scrollLeft:hover,
.containerCarrossel .scrollRight:hover{
    color: var(--cianoc);
}

/* Dispositivos com mouse, sem touch */
@media (pointer: fine) and (not (any-pointer: coarse)){

    .containerCarrossel .carrossel{
        scrollbar-width: none;
        -ms-overflow-style: none;  
        padding-bottom: 0;      
    }

    .containerCarrossel .carrossel::-webkit-scrollbar {
        display: none;
    }

}

/* Header e Footer */

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

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(--branco);  
}


@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;
        z-index: 10;
    }

    .menuAberto{
        right: 0;
    }

    .menuFechado{
        right: -100%;
    }

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

    header nav > a:hover{
        background-color: var(--branco);
        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);
    }

    /* Container Carrossel */

    .containerCarrossel .carrossel{
        grid-auto-columns: 18rem;
    }

}

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


    /* Container Carrossel */

    .containerCarrossel .carrossel{
        grid-auto-columns: 15rem;
    }   

}

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

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

}