/* cada cor tem o valor do tema claro e o do escuro (light-dark); o tema segue o sistema, ou a escolha da pessoa,
   gravada pelo tema.js no atributo data-tema do <html> */
:root {
  color-scheme: light dark;
  --verde: #00A389;        /* cor da marca: só em fundo de ícone, detalhes e texto grande */
  --tinta: light-dark(#0E1116, #ECEEF1);        /* texto */
  --tinta-suave: light-dark(#4A505C, #A3AAB5);
  --tinta-corpo: light-dark(#23272F, #D3D7DD);  /* texto corrido dos artigos */
  --fundo: light-dark(#FFFFFF, #101317);
  --fundo-faixa: light-dark(#F4F6F7, #151920);
  --cartao: light-dark(#FFFFFF, #1A1F26);
  --linha: light-dark(#E2E5E9, #2A3039);
  --escuro: light-dark(#0E1116, #0A0C0F);       /* faixas escuras (fechamento, rodapé): escuras nos dois temas */
  --verde-texto: light-dark(#00806B, #3DD3B5);  /* verde para texto pequeno e links, com contraste no fundo */
  --verde-claro: light-dark(#E6F6F2, rgba(0, 163, 137, 0.16));  /* fundo de ícone, etiqueta e chamada */
  --destaque-trecho: light-dark(#DDF5EF, rgba(0, 163, 137, 0.24));
  --zebra: light-dark(#F6F7F8, #161A20);
  --codigo: light-dark(#EEF0F2, #232830);
  --cabecalho-tabela: light-dark(#0E1116, #232831);
  --topo-fundo: light-dark(rgba(255, 255, 255, 0.92), rgba(16, 19, 23, 0.88));
  --botao-fundo: light-dark(#0E1116, #ECEEF1);
  --botao-texto: light-dark(#FFFFFF, #0E1116);
  --botao-hover: light-dark(#23272F, #FFFFFF);
  --dica-fundo: light-dark(#0E1116, #2A303A);
  --grade: light-dark(#EEF0F2, #252B33);        /* gráficos: linhas de grade, eixos e a barra do "antes" */
  --eixo: light-dark(#6B7280, #9AA1AC);
  --barra-antes: light-dark(#D3D8DF, #626A77);
  --raio: 14px;
  --titulo: 'Unbounded', system-ui, sans-serif;
  --texto: 'Sora', system-ui, sans-serif;
}
/* valores do tema escuro, acima: as faixas escuras ficam um tom abaixo do fundo, para continuarem
   separando as seções; o botão principal inverte (claro sobre o escuro). A barra do "antes" foi conferida com o
   validador de paletas no fundo do cartão escuro: separada do verde também para daltonismo */
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }
/* imagens com versão para o tema escuro: as duas estão na página, e o tema mostra uma */
.so-escuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .so-claro { display: none; }
  :root:not([data-tema="claro"]) .so-escuro { display: block; }
}
:root[data-tema="escuro"] .so-claro { display: none; }
:root[data-tema="escuro"] .so-escuro { display: block; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--texto); font-weight: 300;
       font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); max-width: 18ch; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 32px; }
h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
p { margin: 0; }
.ponto { color: var(--verde); }

.largura { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }
.faixa { background: var(--fundo-faixa); }

/* topo */
.topo { position: sticky; top: 0; z-index: 10; background: var(--topo-fundo);
        backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--linha); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.marca img { width: 132px; }
.menu { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 400; }
.menu a { text-decoration: none; }
.menu a:not(.botao):hover { color: var(--verde); }

/* botões: texto escuro ou branco sobre o escuro; o verde não carrega texto pequeno (contraste) */
.botao { display: inline-block; background: var(--botao-fundo); color: var(--botao-texto); text-decoration: none; font-weight: 600;
         font-size: 16px; padding: 14px 26px; border-radius: 10px; border: 2px solid var(--botao-fundo);
         transition: transform .15s ease, background .15s ease; }
.botao:hover { transform: translateY(-1px); background: var(--botao-hover); }
.botao-pequeno { padding: 9px 18px; font-size: 14px; }
.botao-contorno { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.botao-contorno:hover { background: var(--tinta); color: var(--fundo); }
.botao-claro { background: #FFFFFF; color: #0E1116; border-color: #FFFFFF; }
.botao-claro:hover { background: #E9FBF7; }
.botao:focus-visible, .menu a:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

/* abertura */
.abertura { padding: 112px 0 104px; }
.selo { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; color: var(--tinta-suave);
        margin-bottom: 28px; }
.selo::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--verde); }
/* abertura da home: texto à esquerda, imagem da marca à direita; o fundo quase branco da foto some no branco
   da página (multiply), sem moldura visível */
.abertura-linha { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.abertura-imagem { width: 100%; max-width: 420px; height: auto; justify-self: end; mix-blend-mode: multiply; }
.chamada { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--tinta-suave); max-width: 62ch; margin-top: 24px; }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* página de produto: o nome é o título; a frase do produto vem logo abaixo */
.nome-produto { font-size: clamp(2.6rem, 7.5vw, 5.6rem); max-width: none; letter-spacing: -0.045em; }
.frase-produto { font-family: var(--titulo); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
                 font-size: clamp(1.25rem, 2.6vw, 1.9rem); max-width: 30ch; margin-top: 20px; }

/* banner de produto na home */
/* banner do produto: as placas (recorte com fundo transparente) ficam na coluna ao lado do texto e
   acompanham o conteúdo em qualquer largura */
.destaque { color: #FFFFFF; padding: 72px 0; background: #030508; }
.destaque-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.destaque-imagem { width: 100%; max-width: 540px; height: auto; justify-self: center; }
.destaque h2 { margin-bottom: 0; max-width: 22ch; }
.destaque .chamada { color: #C9CED6; margin-bottom: 32px; }
.selo-claro { color: #C9CED6; }
.cartao .numero { margin-bottom: 18px; }

/* ícones dos cartões: traço no verde da marca, num quadrado arredondado como o ícone do logo */
.icone { display: block; width: 48px; height: 48px; padding: 11px; margin-bottom: 18px; border-radius: 12px;
         background: var(--verde-claro); color: var(--verde-texto); fill: none; stroke: currentColor; stroke-width: 2;
         stroke-linecap: round; stroke-linejoin: round; }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
/* cartão com ícone: ícone e título na mesma linha; o texto ocupa a largura toda embaixo */
.cartao:has(> .icone) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
                        align-content: start; }
.cartao > .icone { width: 40px; height: 40px; padding: 9px; margin: 0; border-radius: 10px; }
.cartao:has(> .icone) > h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.cartao:has(> .icone) > p { grid-column: 1 / -1; margin-top: 14px; }
.cartao:has(> .icone) > .saiba-mais { grid-column: 1 / -1; justify-self: start; }
.menu a[aria-current="page"] { color: var(--verde); }

/* gráfico do débito (página de produto) */
.secao-grafico { padding-top: 24px; }
.grafico-linha { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: center; }
.numero-destaque { font-family: var(--texto); font-weight: 600; font-size: 64px; line-height: 1; color: var(--tinta);
                   margin-top: 8px; }
.numero-legenda { color: var(--tinta-suave); font-weight: 400; margin-top: 6px; }
.grafico-cartao { margin: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
                  padding: 24px 24px 16px; }
.grafico-cartao figcaption strong { display: block; font-weight: 600; }
.grafico-cartao figcaption span { font-size: 14px; color: var(--tinta-suave); }
.grafico { position: relative; margin-top: 12px; }
.grafico-svg { display: block; width: 100%; height: auto; overflow: visible; outline: none; }
.grafico-svg:focus-visible { outline: 3px solid var(--verde); outline-offset: 4px; border-radius: 6px; }
.grafico-svg .grade { stroke: var(--grade); stroke-width: 1; }
.grafico-svg .eixo { fill: var(--eixo); font-size: 12px; font-family: var(--texto); font-variant-numeric: tabular-nums; }
.grafico-svg .area { fill: var(--verde); fill-opacity: .1; }
.grafico-svg .linha { fill: none; stroke: var(--verde); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico-svg .marcador { fill: var(--verde); stroke: var(--cartao); stroke-width: 2; }
.grafico-svg .rotulo { fill: var(--tinta-suave); font-size: 12px; font-family: var(--texto); }
.grafico-svg .rotulo.forte { fill: var(--tinta); font-weight: 600; font-size: 13px; }
.grafico-svg .guia { stroke: var(--tinta); stroke-opacity: .25; stroke-width: 1; }
.dica { position: absolute; pointer-events: none; background: var(--dica-fundo); color: #FFFFFF; border-radius: 8px;
        padding: 8px 12px; font-size: 13px; line-height: 1.35; white-space: nowrap; transform: translateX(-50%); }
.dica strong { display: block; font-size: 15px; }
.dica span { color: #C9CED6; }
.grafico-svg .barra-antes { fill: var(--barra-antes); }
.grafico-svg .barra-depois { fill: var(--verde); }
.grafico-svg .barra:focus-visible { outline: none; }
.grafico-svg .barra:hover path, .grafico-svg .barra:focus-visible path { filter: brightness(1.08); }
.grafico-svg .selo-nivel { font-family: var(--titulo); font-weight: 700; font-size: 13px; }
.legenda { display: flex; gap: 18px; margin-top: 10px; font-size: 14px; color: var(--tinta-suave); }
.legenda span { display: inline-flex; align-items: center; gap: 8px; }
.chave { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.chave-antes { background: var(--barra-antes); }
.chave-depois { background: var(--verde); }

/* carrossel dos resultados */
.carrossel-janela { overflow: hidden; }
.carrossel-trilho { display: flex; transition: transform .5s ease; }
/* cada slide ocupa a janela inteira (o trilho anda de 100% em 100%) e centraliza o conteúdo na largura do site */
.carrossel-trilho > .slide { flex: 0 0 100%; max-width: none; padding-inline: max(24px, calc((100% - 1072px) / 2)); }
.carrossel-controles { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.carrossel-seta { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); background: var(--cartao);
                  color: var(--tinta); font-size: 22px; line-height: 1; cursor: pointer; }
.carrossel-seta:hover { border-color: var(--tinta); }
.carrossel-pontos { display: flex; gap: 10px; }
.carrossel-pontos button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 3px; background: var(--barra-antes);
                           cursor: pointer; transition: width .2s ease; }
.carrossel-pontos button[aria-selected="true"] { width: 28px; background: var(--verde); }
.carrossel button:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .carrossel-trilho { transition: none; } }

.grafico-numeros { margin-top: 8px; font-size: 14px; color: var(--tinta-suave); }
.grafico-numeros summary { cursor: pointer; }
.grafico-numeros table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.grafico-numeros th, .grafico-numeros td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--linha); }

/* artigos: lista e página de leitura */
.abertura-curta { padding: 88px 0 56px; }
.selo a { color: inherit; text-decoration: none; }
.selo a:hover { color: var(--verde); }
.artigo-cartao h2 { font-size: 1.25rem; margin: 8px 0 10px; }
.artigo-cartao h2 a { text-decoration: none; }
.artigo-cartao h2 a:hover { color: var(--verde); }
.artigo-link { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 15px; color: var(--tinta); }
.artigo-meta { font-size: 14px; color: var(--tinta-suave); font-weight: 400; }
/* o artigo usa a largura do site, alinhado com o topo; a fonte do corpo é um pouco maior para a linha longa */
.artigo { padding-top: 72px; padding-bottom: 72px; }
.artigo h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); max-width: none; margin-bottom: 14px; }
.artigo-resumo { font-size: 1.15rem; color: var(--tinta-suave); margin: 18px 0 8px; }
.artigo-corpo { margin-top: 28px; font-weight: 400; color: var(--tinta-corpo); font-size: 18px; line-height: 1.75; }
.artigo-corpo h2 { font-size: 1.45rem; margin: 40px 0 14px; scroll-margin-top: 96px; }
/* trecho aberto por um link do site (#ancora): um destaque curto mostra onde o leitor caiu */
.artigo-corpo h2:target { animation: destaque-trecho 2.4s ease-out; border-radius: 8px; }
@keyframes destaque-trecho { 0%, 35% { background: var(--destaque-trecho); box-shadow: 0 0 0 10px var(--destaque-trecho); }
                             100% { background: transparent; box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .artigo-corpo h2:target { animation: none; } }
.artigo-corpo p, .artigo-corpo ul, .artigo-corpo ol { margin: 0 0 16px; }
.artigo-corpo li { margin-bottom: 6px; }
.artigo-corpo a { color: var(--verde-texto); text-underline-offset: 3px; }
.artigo-corpo code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--codigo);
                     padding: 1px 5px; border-radius: 4px; }
.tabela-rolavel { overflow-x: auto; margin: 8px 0 20px; }
.artigo-corpo table { width: 100%; border-collapse: collapse; font-size: 15px; }
.artigo-corpo th { background: var(--cabecalho-tabela); color: #FFFFFF; text-align: left; font-weight: 600; padding: 9px 12px; }
.artigo-corpo td { padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.artigo-corpo tbody tr:nth-child(even) td { background: var(--zebra); }
.artigo-chamada { margin-top: 48px; padding: 28px; border-radius: var(--raio); background: var(--verde-claro); }
.artigo-chamada h2 { font-size: 1.3rem; margin-bottom: 10px; }
.artigo-chamada p { color: var(--tinta-suave); margin-bottom: 20px; }
.artigo-relacionados { margin-top: 40px; }
.artigo-relacionados h2 { font-size: 1.1rem; margin-bottom: 12px; }
.artigo-relacionados ul { margin: 0; padding-left: 18px; }
.artigo-relacionados li { margin-bottom: 8px; }
.artigo-relacionados a { color: var(--verde-texto); }
.saiba-mais { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 15px; color: var(--verde-texto); }
.rodape-menu { display: flex; gap: 20px; }
.rodape-menu a { color: #C9CED6; text-decoration: none; }
.rodape-menu a:hover { color: #FFFFFF; }

/* idioma: no topo, a sigla abre a lista dos três; no rodapé, os três nomes lado a lado */
.idioma { position: relative; }
.idioma summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 8px; border-radius: 8px;
                  display: flex; align-items: center; gap: 4px; }
.idioma summary::-webkit-details-marker { display: none; }
.idioma summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
                         transform: translateY(-2px) rotate(45deg); }
.idioma summary:hover { color: var(--verde); }
.idioma summary:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.idioma ul { position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; min-width: 150px;
             background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px;
             box-shadow: 0 10px 30px rgba(14, 17, 22, 0.12); }
.idioma li a { display: block; padding: 8px 12px; border-radius: 6px; }
.idioma li a:hover { background: var(--fundo-faixa); color: var(--tinta); }
.idioma a[aria-current="true"] { color: var(--verde-texto); font-weight: 600; }
.idiomas ul { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.idiomas a { color: #C9CED6; text-decoration: none; }
.idiomas a:hover, .idiomas a[aria-current="true"] { color: #FFFFFF; }
.idiomas a[aria-current="true"] { font-weight: 600; }

/* cartões */
.grade { display: grid; gap: 20px; }
.grade.tres { grid-template-columns: repeat(3, 1fr); }
.grade.dois { grid-template-columns: repeat(2, 1fr); }
.grade.alinhada { align-items: center; gap: 56px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px; }
.cartao p { color: var(--tinta-suave); font-size: 16px; }
.nota { margin-top: 28px; font-size: 15px; color: var(--tinta-suave); border-left: 3px solid var(--verde); padding-left: 16px; }

/* passos */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 56px; }
.passos li { display: flex; gap: 20px; align-items: flex-start; }
.numero { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--verde); color: #FFFFFF;
          font-family: var(--titulo); font-weight: 700; font-size: 20px; display: grid; place-items: center; }
.passos p { color: var(--tinta-suave); font-size: 16px; }
.etiqueta { display: inline-block; font-family: var(--texto); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
            text-transform: uppercase; color: var(--tinta); background: var(--verde-claro); border-radius: 6px; padding: 2px 8px;
            margin-left: 6px; vertical-align: middle; }

/* para quem */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lista li { position: relative; padding: 18px 20px 18px 52px; background: var(--fundo-faixa); border-radius: var(--raio);
            font-weight: 400; }
.lista li::before { content: ""; position: absolute; left: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
                    border-radius: 4px; background: var(--verde); }

/* fechamento e rodapé */
/* o fechamento é a última seção: com a altura da tela (menos o topo fixo), o link #contato consegue trazê-lo para o
   topo; mais baixo que a tela, a página acabava antes e o link parava na seção anterior */
.fechamento { background: var(--escuro); color: #FFFFFF; text-align: center; min-height: calc(100svh - 72px);
              display: flex; align-items: center; }
/* seções com âncora param abaixo do topo fixo, não escondidas atrás dele */
section[id] { scroll-margin-top: 72px; }
.fechamento .chamada { color: #C9CED6; margin: 0 auto 36px; }
.rodape { background: var(--escuro); border-top: 1px solid #23272F; color: #9AA1AC; font-size: 14px; padding: 32px 0; }
.rodape-linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rodape img { width: 108px; }

/* celular */
@media (max-width: 860px) {
  section { padding: 72px 0; }
  .abertura { padding: 72px 0; }
  .grade.tres, .grade.dois, .passos { grid-template-columns: 1fr; }
  .grade.alinhada { gap: 28px; }
  /* no celular a foto desce para baixo do texto */
  .destaque { padding: 64px 0 24px; }
  .destaque-linha { grid-template-columns: 1fr; gap: 8px; }
  .destaque-imagem { justify-self: center; max-width: 300px; margin-top: 24px; }
  .grafico-linha { grid-template-columns: 1fr; gap: 28px; }
  .abertura-linha { grid-template-columns: 1fr; gap: 8px; }
  .carrossel-trilho > .slide { padding-inline: 16px; }
  .artigo { padding-top: 48px; padding-bottom: 48px; }
  .artigo-corpo table { font-size: 13.5px; }
  .artigo-corpo th, .artigo-corpo td { padding: 7px 8px; }
  .abertura-imagem { justify-self: center; max-width: 260px; }
  .numero-destaque { font-size: 48px; }
  .grafico-cartao { padding: 16px 12px 12px; }
  .largura { padding: 0 16px; }
  h1 { font-size: clamp(1.6rem, 7.4vw, 2.4rem); }
  .nome-produto { font-size: clamp(2rem, 10vw, 2.8rem); }
  .menu { gap: 14px; }
  .menu .so-largo { display: none; }
  .marca img { width: 108px; }
  .botao-pequeno { white-space: nowrap; font-size: 13px; padding: 8px 12px; }
}
/* celular estreito: o botão de contato do topo não cabe ao lado do seletor de idioma; o mesmo convite está na
   abertura da home e de produtos e na chamada do fim de cada artigo */
@media (max-width: 480px) {
  .menu .botao-pequeno { display: none; }
}
.marca { flex: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao { transition: none; }
}
/* vídeo dentro do artigo: largura do texto, cantos e borda dos cartões */
.artigo-corpo .video { margin: 32px 0; }
.artigo-corpo .video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--raio);
                             border: 1px solid var(--linha); background: var(--fundo); }
.artigo-corpo .video figcaption { margin-top: 8px; font-size: 14px; color: var(--tinta-suave); }
/* rodapé: marca, CNPJ e cidade numa linha própria, junto da linha das marcas registradas */
.rodape .empresa { flex-basis: 100%; margin-bottom: -16px; color: #C9CED6; }
/* a figura da abertura guarda as duas versões do cubo e ocupa o lugar da imagem no layout */
.abertura-figura { justify-self: end; width: 100%; max-width: 420px; }
@media (max-width: 860px) { .abertura-figura { justify-self: center; max-width: 260px; margin-top: 16px; } }
.abertura-figura .so-escuro { width: 100%; height: auto;
  /* a foto escura tem uma textura leve no fundo: as bordas esfumam para ela se fundir com a página */
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
/* tema: o mesmo menu do idioma, com um ícone no lugar da sigla e botões no lugar dos links */
.tema summary::after { display: none; }
.tema summary svg { display: block; width: 18px; height: 18px; }
.menu-opcoes button { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 6px; background: none;
                      font: inherit; color: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.menu-opcoes button:hover { background: var(--fundo-faixa); }
.menu-opcoes button[aria-pressed="true"] { color: var(--verde-texto); font-weight: 600; }
.menu-opcoes button:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; }
/* celular estreito: logo, CleanCore Hero, idioma e tema cabem numa linha com menos espaço entre eles */
@media (max-width: 480px) {
  .topo-linha { gap: 12px; }
  .menu { gap: 8px; }
  .marca img { width: 96px; }
  .idioma summary { padding: 6px 4px; }
}
/* transições: fade curto ao trocar de página dentro do site e ao trocar o tema (View Transitions). Navegador sem
   suporte troca na hora, como antes; quem pediu menos movimento ao sistema não recebe o fade */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
}