:root{

    --cinza250: rgb(250,250,250);
    --cinza245: rgb(245,245,245);
    --cinza240: rgb(240,240,240);
    --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);

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

    --azul: rgb(0,120,200);
    --azulc: rgb(0, 140, 220);
    --azule: rgb(0, 60, 120);

    --ciano: rgb(0,160,230);
    --cianoc: rgb(0,180,230);
    --cianocc: rgb(245, 245, 255);
    --cianoe: rgb(0, 100, 130);
    --cianoee: rgb(0, 30, 50);

    --dourado: rgb(195,160,45);
    --douradoc: rgb(235,190,55);    
    --douradocc: rgb(250, 250, 245);
    --douradoe: rgb(140, 120, 40);

    --verde: rgb(100,180,80);
    --verdec: rgb(140,190,110);
    --verdecc: rgb(240, 255, 240);

    --vermelho: rgb(220,0,0);
    --vermelhoc: rgb(230,20,20);
    --vermelhocc:rgb(255, 245, 245);
    --vermelhoe: rgb(180,0,0);

    --laranja: rgb(210, 140, 50);
    --laranjac: rgb(230,160,60);
    --laranjae: rgb(240,150,0);

    --rosa: rgb(240,130,180);
    --rosac: rgb(245, 145, 190);

    --roxo: rgb(150,150,255);
    --roxoc: rgb(170,170,255);
    --roxoe: rgb(40,0,80);

    --radiuspadrao: 5px;

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

    --shadowpadrao: 0 0 15px rgba(128,128,128,0.2);
    --shadowpadraocima: 0 -15px 15px rgba(128,128,128,0.1);
    --shadowpadraobaixo: 0 15px 15px rgba(128,128,128,0.1); 
    --shadowinsetbaixo: inset 0 -15px 15px rgba(128,128,128,0.1);
    --shadowinsetcima: inset 0 15px 15px rgba(128,128,128,0.1);
}

@font-face {
    font-family: "Quicksand";    
    src: url("../fonts/quicksand.woff2") format("woff2"), url("../fonts/quicksand.ttf") format("truetype");
    font-weight: 300 700;
    font-style: normal;
    font-optical-sizing: auto;
}

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

:focus-visible{
  outline: 1px solid var(--azul);
  outline-offset: 2px;
}

body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    background-color: var(--cinza245);
}

/* Definição tipográfica */

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

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

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

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

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

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

small{
    font-size: 0.9rem;
}

h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, b, strong{
    font-weight: 600;
}

i, em{
    font-style: italic;
}

/* Cores de texto */

.textoBranco{
    color: white;
}

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

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

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

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

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

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

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

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

/* Cores de fundo */

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

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

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

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

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

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

/* Cores de linhas para SVG */

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

.linhaDourada{
    stroke: var(--dourado);
}

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

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

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

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

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

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

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

/*Classes genéricas */

.tituloRet{
    display: inline-flex;
    flex-direction: column;    
    gap: 0.1rem;
    color: var(--cianoe);
}

.tituloRet::after{
    content: "";
    width: 50%;
    height: 2px;
    background-color: var(--douradoc);
    border-radius: var(--radiuspadrao);
}

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

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

.semQuebra{
    white-space: nowrap;
}

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

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

.quadro{
    width: 90%;
    margin: -14rem auto 2rem auto;
    background-color: white;
    border-radius: var(--radiuspadrao);
    padding: clamp(1.5rem, 2.5vw, 3rem);
    box-shadow: var(--shadowpadrao) !important;
    flex-grow: 1;
}

.textoCentro{
    text-align: center;
}

.textoDireita{
    text-align: right;
}

.lista{
    list-style: none;
}

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

.instrucoes{
    border: 1px solid var(--cianoc);
    background-color: var(--cianocc);
    padding: 1rem;
    border-radius: var(--radiuspadrao);
}

.instrucoes ul{
    margin-left: 1.2rem;
}

.nota{
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border: 1px dotted var(--douradoc);
    padding: 0.5rem;
    border-radius: var(--radiuspadrao);
    background-color: var(--douradocc);
}

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

.nota::before{
    content: url("/img/icones/luz.svg");
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
}

.altura100{
    height: 100%;
}

.largura100{
    width: 100%;
}

.escondido{
    display: none !important;
}

.invisivel{
    visibility: hidden;
}

.absoluto{
    position: absolute;
}

.relativo{
    position: relative;
}

.pulo{
    transition: background 0.5s, color 0.5s, border 0.5s, transform 0.5s;    
}

.pulo:hover{
    transform: translateY(-0.2rem);
}

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

.opacidade0{
    opacity: 0;
}

.opacidade1{
    opacity: 1;
}

.imgFit, .imgCover{
    width: 100%;
    height: 100%;
    pointer-events: none;  
}

.imgFit{
    object-fit: cover;
}

.imgCover{
    object-fit: contain;
    object-position: center;
}

.proporcao16_9, .proporcao1_12, .proporcao14_1, .proporcao16_1{
    overflow: hidden;
}

.proporcao16_9{
    aspect-ratio: 16 / 9;
}

.proporcao1_12{
    aspect-ratio: 1 / 1.2;
}

.proporcao14_1{
    aspect-ratio: 1.4 / 1;
}

.proporcao16_1{
    aspect-ratio: 1.6 / 1;
}

.shadow{
    box-shadow: var(--shadowpadrao);
}

.shadowTop{
    box-shadow: var(--shadowpadraocima);
}

.shadowBottom{
    box-shadow: var(--shadowpadraobaixo);
}

/* Tamanhos de ícones */

.icone1, .icone1 > img, .icone1 > svg,
.icone12, .icone12 > img, .icone12 > svg,
.icone15, .icone15 > img, .icone15 > svg,
.icone25, .icone25 > img, .icone25 > svg,
.icone3, .icone3 > img, .icone3 > svg{
    display: flex;
    align-items: center;
    justify-content: center;
}

.icone1, .icone1 > img, .icone1 > svg{ 
    width: 1rem;
    height: 1rem;
}

.icone12, .icone12 > img, .icone12 > svg{ 
    width: 1.2rem;
    height: 1.2rem;
}

.icone15, .icone15 > img, .icone15 > svg{ 
    width: 1.5rem;
    height: 1.5rem;
}

.icone25, .icone25 > img, .icone25 > svg{ 
    width: 2.5rem;
    height: 2.5rem;
}

.icone3, .icone3 > img, .icone3 > svg{ 
    width: 3rem;
    height: 3rem;
}

/* 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 de Gap */

.gap03{
    gap: 0.3rem;
}

.gap05{
    gap: 0.5rem;
}

.gap1{
    gap: 1rem;
}

.gap15{
    gap: 1.5rem;
}

.gap2{
    gap: 2rem;
}

/* Opções de borda superior e inferior */

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

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

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

/* Tags */

.tagVerde, .tagLaranja, .tagVermelha, .tagCiano, .tagRoxa{
    display: inline-flex;
    color: white;
    padding: 0.3rem;
    border-radius: var(--radiuspadrao);
}

.tagVerde{
    background-color: var(--verde);
}

.tagLaranja{
    background-color: var(--laranjac);
}

.tagVermelha{
    background-color: var(--vermelhoc);
}

.tagCiano{
    background-color: var(--ciano);
}

.tagRoxa{
    background-color: var(--roxo);
}

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

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

/* Interação */

a, button, .link, .linkCinza, .linkBranco, .linkAzul{
    border: 0;
    background-color: transparent;
    color: var(--ciano);
    text-decoration: none;
    transition: color 0.5s;
    cursor: pointer;
}

a:hover, button:hover, .link:hover, .linkCinza:hover{
    color: var(--cianoc);    
}

.linkCinza{
    color: var(--cinza128);
}

.linkBranco{
    color: white;
}

.linkAzul{
    color: var(--azul);
}

.linkAzul:hover{
    color: var(--azulc);
}

::placeholder{
    color: var(--cinza200);
}

input, select, textarea{
    width: 100%;
    padding: 0.5rem;
    border: var(--bordapadrao);
    border-radius: var(--radiuspadrao);
    transition: border 0.5s, color 0.5s;   
}

textarea{
    resize: none;
    height: 18rem;
}

input:focus, select:focus, textarea:focus{
    outline: none;
    border: 1px solid var(--ciano); 
    color: var(--ciano);    
}

input[type="submit"]{
    width: auto;
}

input[type="radio"], input[type="checkbox"]{
    width: 1rem;
    height: 1rem;
    accent-color: var(--azulc);
    cursor: pointer;
}

input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill{
    -webkit-text-fill-color: var(--ciano) !important;
    border: 1px solid var(--cianoc) !important;
    outline: none !important;
}

.inputPesquisa, .inputSenha{
    position: relative;
    display: flex;
    align-items: center;
}

.inputPesquisa input{
    padding-left: 2.5rem;
}

.inputSenha input{
    padding-right: 2.5rem;
}

.inputPesquisa .icone12, .inputSenha .icone12{
    position: absolute;    
}

.inputPesquisa .icone12{
    left: 0.7rem;
}

.inputSenha .icone12{
    right: 0.7rem;
}

input:focus ~ .icone12 *,
.inputSenha .icone12:hover *, .inputPesquisa .icone12:hover *,
.inputSenha .icone12:focus *, .inputPesquisa .icone12:focus *,
.inputSenha:has(:user-valid) .icone12 *, .inputPesquisa:has(:user-valid) .icone12 *{
    stroke: var(--ciano);
}

.inputSenha:has(:user-invalid) .icone12 *{
    stroke: var(--vermelho);
}

input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    appearance: none;
}

.inputSocial{
    width: 100%;
    display: flex;
}

.inputSocial .linkRede{
    background-color: var(--cinza245);
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radiuspadrao) 0 0 var(--radiuspadrao);
    border: var(--bordapadrao);
    border-right: none;
    color: var(--ciano);
    transition: border 0.5s;
}

.inputSocial:has(:focus) .linkRede{
    border: 1px solid var(--cianoc);
    border-right: none;
}

.inputSocial input{
    width: 100%;
    border-radius: 0 var(--radiuspadrao) var(--radiuspadrao) 0;
    color: var(--ciano);
}

label{
    transition: color 0.5s;
}

.labelCard{
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    border: var(--bordapadrao);
    padding: 0.5rem;
    border-radius: var(--radiuspadrao);
    background-color: white;
    cursor: pointer;
    transition: border 0.5s, color 0.5s;
}

.labelCard input[type="radio"], .labelCard input[type="checkbox"]{
    position: relative;
}

.labelCard input[type="radio"]{
    top: 0.15rem;
}

.labelCard input[type="checkbox"]{
    top: 0.1rem;
}

.labelCard:has(:checked){
    color: var(--ciano);
    border: 1px solid currentColor;
}

.labelCard:not(:has(:checked)){
    color: var(--cinza128) !important;
    border: var(--bordapadrao);
}

.obrigatorio::after,
.opcional::after{
    display: inline-flex;
}

.obrigatorio::after{
    content: "*";
    color: var(--vermelho);
}

.opcional::after{
    content: "[opcional]";
    color: var(--roxo);
    font-style: italic;
}

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

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

.vazio:empty, .msgerro:empty, .msgalerta:empty, .notificacaoUpload:empty{
  display: none;
}

/* Grupos de inputs */

.grupoInput{
    display: grid;
    gap: 0.3rem;
}

.grupoInput:has(:focus) label{
    color: var(--ciano);
}

.grupoInput .erro{
    color: var(--vermelho);
    margin-top: 0.3rem;
    display: none;
}

.grupoInput:has(:user-valid) input,
.grupoInput:has(:user-valid) select,
.grupoInput:has(:user-valid) textarea{
    color: var(--ciano);
    border: 1px solid currentColor;
}

.grupoInput:has(:user-valid) label{
    color: var(--ciano);
}

.grupoInput:has(:user-invalid) input,
.grupoInput:has(:user-invalid) select,
.grupoInput:has(:user-invalid) textarea{
    color: var(--vermelho);
    border: 1px solid currentColor;
}

.grupoInput:has(:user-invalid) label{
    color: var(--vermelho);
}

.grupoInput:has(:user-invalid) .erro{
    display: block;
}

.condicoesSenha{
    list-style: none;
}

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

.condicoesSenha .invalido::before{
    content: "X ";
    color: var(--vermelho) !important;  
}

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

.condicoesSenha .valido::before{
    content: "✔ ";
    color: var(--verde) !important;  
}

/* Grupos de ícones de redes sociais */

.grupoRedes svg *{
    stroke: none;
    fill: var(--cinza128);
    transition: fill 0.5s;
}

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

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

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

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

/* Botões */

.botao, .botaoVazado, .botaoLinha{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;
    border: none; 
    padding: 0.5rem;
    color: white;
    border-radius: var(--radiuspadrao);
    cursor: pointer;
    transition: filter 0.5s, color 0.5s, background 0.5s, border 0.5s;
}

.botaoVazado{
    background-color: var(--brancotransparente);
    border: 1px solid;
}

.botaoLinha{
    border-bottom: 1px solid;
    border-radius: 0;
}

.botao:hover, .botao:active, .botao:focus, .botao:focus-visible{   
    color: white;
    filter: brightness(115%);
}

.botaoVazado:hover, .botaoVazado:active, .botaoVazado:focus, .botaoVazado:focus-visible,
.botaoLinha:hover, .botaoLinha:active, .botaoLinha:focus, .botaoLinha:focus-visible{
    filter: brightness(115%);
}

.botaoCiano{
    background-color: var(--ciano);
}

.botaoAzul{
    background-color: var(--azul);    
}

.botaoVerde{
    background-color: var(--verde);
}

.botaoDourado{
    background-color: var(--dourado);
}

.botaoVermelho{
    background-color: var(--vermelho);
}

.botaoLaranja{
    background-color: var(--laranja);
}

.botaoRosa{
    background-color: var(--rosa);
}

.botaoRoxo{
    background-color: var(--roxo);
}

.botaoVazadoCiano, .botaoVazadoCiano:hover{
    color: var(--ciano);  
}

.botaoVazadoAzul, .botaoVazadoAzul:hover{
    color: var(--azul);  
}

.botaoVazadoVerde, .botaoVazadoVerde:hover{
    color: var(--verde);
}

.botaoVazadoDourado, .botaoVazadoDourado:hover{
    color: var(--dourado);
}

.botaoVazadoVermelho, .botaoVazadoVermelho:hover{
    color: var(--vermelho);
}

.botaoVazadoLaranja, .botaoVazadoLaranja:hover{
    color: var(--laranja);  
}

.botaoVazadoRosa, .botaoVazadoRosa:hover{  
    color: var(--rosa); 
}

.botaoVazadoRoxo, .botaoVazadoRoxo:hover{ 
    color: var(--roxo);
}

.botaoLinhaCiano, .botaoLinhaCiano:hover{
    color: var(--ciano);
}

.botaoMenu{
    width: 1.5rem;
    height: 2.5rem; 
    border-radius: var(--radiuspadrao);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;    
}

.botaoMenu > span{
    display: block;
    background-color: var(--cinza128);
    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%;
}

.botaoAtivar{
    height: 1.8rem;
    border-radius: 500px;
    cursor: pointer;
    padding: 4px;
    transition: background 0.5s;
}

.botaoAtivar .interno{
    height: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 500px;
}

.botaoAtivar .chave{
    height: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--cinza250);
    border-radius: 50%;
    transition: transform 0.5s;
}

.botaoAtivar.ligado{
    background-color: var(--verdec);
}

.botaoAtivar.desligado{
    background-color: var(--vermelho);
}

.botaoAtivar.semi{
    background-color: var(--laranjac);
}

.botaoAtivar.ligado .chave{
    transform: translateX(100%);
}

.botaoAtivar.desligado .chave, .botaoAtivar.semi .chave{
    transform: translateX(0);
}

.botaoInfo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ciano);
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.botaoInfo::before{
    content: "i";
    color: var(--ciano);
}

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

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

/* Banner página */

.bannerPagina{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16rem;
    overflow: hidden;
    background-color: var(--corbasec);
}

/* Cards */

.card, .cardLink, .cardItem{
    background-color: var(--cinza250);
    border-radius: var(--radiuspadrao);
    transition: border 0.5s, background 0.5s;
    overflow: hidden;
}

.cardItem{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cardItem > div:last-child{
    margin-top: auto;
    padding-top: 0 !important;
}

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

.cardLink:hover{
    border: 1px solid var(--cianoc);
    background-color: var(--cianocc);
}

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

/* Container de itens com divisões e filtragens */

.itemLista{
    border: var(--bordapadrao);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: var(--radiuspadrao);
    transition: border 0.5s, color 0.5s, background 0.5s;
    cursor: pointer;
}

.itemLista img, .itemLista svg{
    filter: grayscale(1);
    transition: filter 0.5s;
}

.itemLista::before{
    content: "✓";
    color: var(--ciano);
    opacity: 0;
    transition: opacity 0.5s;
}

.itemLista:hover{
    color: var(--cianoc);
    background-color: white;
    border: 1px solid var(--ciano);
}

.itemLista:hover img, .itemLista:hover svg, .itemEscolhido img, .itemEscolhido svg{
    filter: grayscale(0);
}

.itemLista:hover::before{
    opacity: 0.5;
}

.itemEscolhido, .itemEscolhido:hover{
    color: var(--cianoc);
    border: 1px solid var(--ciano);
    background-color: var(--cianocc);
}

.itemEscolhido::before, .itemEscolhido:hover::before{
    color: var(--ciano);
    opacity: 1;
}

.containerItens #fundoPretoOrdenacao{
    background-color: rgba(0,0,0,0.4);
    position: fixed;
    top: 0;
    width: 100%;
    bottom: 0;
    z-index: 2;
    transition: opacity 0.5s;
}

.containerItens #fundoPretoOrdenacao{
    background-color: rgba(0,0,0,0.4);
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: opacity 0.5s;
}

.containerItens #fundoPretoOrdenacao.fechado{
    right: -100%;
    opacity: 0;    
}

.containerItens #fundoPretoOrdenacao.aberto{
    right: 0;
    opacity: 1;    
}

.containerItens .topo .direita{
    width: 50%;
}

.containerItens #botaoFiltrar{
    display: none;
}

.containerItens #botaoOrdenacao{
    z-index: 1;
}

.containerItens .divOrdenacao{
    position: relative;
}

.containerItens #menuOrdenacao{
    position: absolute;
    z-index: 3;
    right: 0;
    top: 2.8rem;
}

.containerItens #menuOrdenacao .lista{
    background-color: white;
    border: 1px solid var(--ciano);
    border-radius: var(--radiuspadrao);
    width: min(12rem, 100%);
    overflow: hidden;
}

.containerItens #menuOrdenacao .itemLista{
    border: none;
    border-bottom: var(--bordapadrao);
    border-radius: 0;
}

.containerItens #menuOrdenacao .itemLista:last-child{
    border: none;
}

.realceBotao{
    background-color: white !important;
    transition: background 0.5s, border 0.5s, border-radius 0.5s;
    z-index: 10 !important;
}

.containerItens .linhaTags{
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.containerItens .tag{
    color: white;
    padding: 0.3rem;
    background-color: var(--ciano);
    border-radius: var(--radiuspadrao);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.containerItens .tag button{
    color: white;
}

.containerItens .tag button:hover{
    color: var(--douradoc);
}

.containerItens .areaDividida{
    display: grid;
    grid-template-columns: 20rem auto;
    gap: 1.5rem;
}

.containerItens #botaoFecharMenuFiltros{
    display: none;
}


/* Header */

header{
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color:white;
    padding: 0 5%;
    z-index: 2;
    box-shadow: var(--shadowpadraobaixo);
}

header .logo, footer .logo{
    height: 1.8rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

header .logo .siteNome, footer .logo .siteNome{
    transition: color 0.5s;
}

header .logo svg, footer .logo svg{
    height: 100%;    
}

header .logo svg *, footer .logo svg *{
    stroke-width: 60px;
    transition: stroke 0.5s;
    stroke-linecap: butt;
    stroke-linejoin: butt;
}

header .logo svg *{
    stroke: var(--dourado);
}

footer .logo svg *{
    stroke: var(--cinza128);
}

header .logo:hover svg *, footer .logo:hover svg *{
    stroke: var(--douradoc);
}


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

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

header nav > a::before,
header nav > a::after{
    content: "";
    position: absolute;
}

header nav > a::before{ 
    bottom: -0.4rem;
    width: 0;
    height: 2px;
    border-radius: 10rem;
    background-color: var(--douradoc);
    transition: width 0.5s;
}

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

header nav > a svg *{
    stroke: var(--cinza100);
}

header nav > a:hover svg *{
    stroke: var(--dourado);
}

header nav .topo,
header nav .creditos,
header nav .icone12,
header .botaoMenu{
    display: none; 
}

#pagAtual{
    color: var(--cianoc);
}

#pagAtual::before{
    width: 100%;
}

header #botaoPesquisar svg *{
    color: var(--cinza128);
    stroke-width: 10px;
    transition: stroke 0.5s;
}

header #botaoPesquisar:hover svg *{
    stroke: var(--dourado);
}

/* Aside de pesquisa */

.asidePesquisar{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    background-color: var(--cinza250);
    z-index: 4;
    padding: clamp(1.5rem, 2.5vw, 3rem);
    transition: top 0.5s;
    overflow-y: auto;
}

.asidePesquisarAberto{
    top: 0;
}

.asidePesquisarFechado{
    top: -100%;
}



/* Footer */

footer{    
    padding: 1.5rem 5%;
    background-color: white;
    box-shadow: var(--shadowpadraocima);
    margin-top: auto;
}

footer .logo img{
    filter: grayscale(1);
    transition: filter 0.5s;
}

footer .logo:hover img{
    filter: grayscale(0);
}

footer .logo:hover .siteNome{
    color: var(--ciano);
}


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

    .bannerPagina{
        height: 15vw;   
    }

    .quadro{
        width: 100%;
        margin: 0;
        box-shadow: none !important;
        border-radius: 0;
    }

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

    header nav .topo,
    header .botaoMenu{
        display: flex;
    }

    header nav .creditos,
    header nav .icone12,
    header nav > a::after{
        display: block; 
    }

    #pagAtual{
        color: var(--cinza128);
    }

    #pagAtual:hover{
        color: var(--ciano);
    }

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

    .menuFechado{
        right: -100%;
    }

    .menuAberto{
        right: 0;
    }

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

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

    /* Comntainer Itens */

    .containerItens .divOrdenacao{
        position: relative;
        width: auto;
    }

    .containerItens #botaoFiltrar{
        display: inline-flex;
    }

    .containerItens .topo{
        flex-direction: column;
        align-items: flex-start;
    }

    .containerItens .topo .direita{
        width: 100%;
    }

    .containerItens .topo .divOrdenacao, .containerItens .topo .interno{
        justify-content: flex-start;
    }

    .containerItens #menuOrdenacao{   
        right: auto;
        left: 0;
    }

    .containerItens .linhaTags{
        display: flex;
        margin: 1.5rem 0;
    }

    .containerItens .linhaTags:empty{
        margin: 0;
    }

    .containerItens #menuFiltros{
        position: fixed;
        top: 0;
        bottom: 0;   
        width: 100%;      
        z-index: 4;
        overflow-y: auto;
        transition: left 0.5s;
    }

    .containerItens .areaDividida{
        display: block;
    }

    .containerItens #menuFiltros.fechado{
        left: -100%;
    }

    .containerItens #menuFiltros.aberto{
        left: 0;
    }

    .containerItens #botaoFecharMenuFiltros{
        display: inline-flex;
    }

}

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

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

    .containerItens .direita{
        flex-wrap: wrap;
    }

}

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

    header .logo .siteNome{
        display: none;
    }

}