/* Vaquinha do Wescrey. Fundo claro, cartões brancos e um verde só para o que pede ação ou mostra progresso. Com o
   aparelho no modo escuro, as mesmas cores em tons escuros (no fim do arquivo). */

:root {
  --fundo: #f3f5f3;
  --superficie: #ffffff;
  --texto: #18211d;
  --texto-2: #46524c;
  --suave: #67726c;
  --linha: #e0e5e2;
  --linha-forte: #c6d0ca;
  --linha-campo: #7f8c85;   /* a borda de quem recebe texto, com contraste de 3:1 */
  --verde: #0e7c5a;
  --verde-escuro: #0a5f45;
  --verde-claro: #e3f2eb;
  --verde-trilho: #d9e5de;
  --ambar: #c27c0e;
  --ambar-claro: #fdf2dc;
  --ambar-texto: #5c3d00;
  --vermelho: #b42318;
  --vermelho-claro: #fdecea;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 20, .05), 0 10px 28px rgba(16, 24, 20, .08);
  --topo: 60px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 64px); }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
svg { display: block; fill: currentColor; }
a { color: var(--verde-escuro); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--verde); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 6px; }
button { font-family: inherit; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.55rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; }
h2 { font-size: clamp(1.35rem, 1.2rem + .7vw, 1.65rem); font-weight: 750; }
h3 { font-size: 1.12rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
/* sem uma palavra sozinha na última linha: itens e legendas acertam o fim; perguntas e rótulos curtos, como os títulos,
   dividem as linhas por igual */
li, dd, figcaption, blockquote { text-wrap: pretty; }
summary, dt { text-wrap: balance; }
strong { font-weight: 650; }
.nota, .dica { color: var(--suave); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* aviso de prévia / modo de teste */
.aviso-teste {
  margin: 0;
  padding: .55rem 16px;
  background: var(--ambar-claro);
  border-bottom: 1px solid #f0d9a8;
  color: var(--ambar-texto);
  font-size: .9rem;
  text-align: center;
}

/* topo */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.topo__conteudo {
  max-width: 1160px; height: var(--topo); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: var(--texto); font-weight: 750; letter-spacing: -.01em; text-decoration: none; }
.marca:hover { color: var(--texto); }
.marca__icone { width: 30px; height: 30px; flex: none; }
.marca__icone rect { fill: var(--verde); }
.marca__icone path { fill: #fff; }
.marca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* página: conteúdo + coluna do placar (no computador, o placar acompanha a rolagem) */
.pagina {
  max-width: 1160px; margin: 0 auto; padding: 20px 16px 40px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
}
@media (min-width: 1000px) {
  .pagina {
    grid-template-columns: minmax(0, 1fr) 372px;
    grid-template-rows: repeat(5, auto) 1fr;
    grid-template-areas: "chamada lateral" "capa lateral" "resumo lateral" "pessoas lateral" "fontes lateral" "conteudo lateral";
    column-gap: 40px; row-gap: 0;
    padding-top: 32px;
  }
  /* o HTML segue a ordem do celular (chamada, resumo, placar, vídeo); aqui, as peças vão direto para a grade */
  .abertura, .apresentacao { display: contents; }
  .lateral { grid-area: lateral; }
  .conteudo { grid-area: conteudo; margin-top: 28px; }
  /* fixo ao rolar; se o cartão não cabe na tela, gruda pelo pé (a altura vem do app.js) */
  .placar { position: sticky; top: min(calc(var(--topo) + 20px), calc(100vh - var(--placar-altura, 0px) - 16px)); }
}

/* abertura */
/* A chamada do topo é a composição da imagem que aparece quando o link é compartilhado: a foto do furo no vidro,
   esbranquiçada, com o título por cima. Aqui o título é texto de verdade e o véu vem do CSS: no modo escuro, só a cor
   dele muda. No celular, ela vai de uma borda à outra da tela. */
.chamada {
  --veu: rgba(243, 245, 243, .64);
  --verde-escuro: #064532;   /* sobre a foto, o verde dos textos precisa ser mais escuro */
  position: relative; isolation: isolate;
  display: flex; min-height: 515px; margin: -20px -16px 0; padding: 22px 20px 24px;
  background: #aeb4b0;
}
.chamada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veu); }
.chamada__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.chamada__texto { display: flex; flex-direction: column; min-width: 0; }
.chamada h1 { margin: 0; font-size: clamp(2rem, 10vw, 2.55rem); }
.chamada h1 span { display: block; margin-top: .55em; font-size: .52em; font-weight: 400; letter-spacing: -.005em; line-height: 1.3; }
.chamada__rodape { margin: auto 0 0; padding-top: 16px; color: var(--verde-escuro); font-size: 1.05rem; font-weight: 650; }
.chamada__rodape::before { content: ""; display: block; width: 130px; height: 5px; margin-bottom: 12px; border-radius: 99px; background: var(--verde); }
@media (min-width: 600px) {
  /* Daqui para cima, a chamada é a imagem em si: a proporção dela (1200 por 630) e o título e as margens medidos pela
     largura do painel (cqw), para o texto não encostar no furo em nenhuma largura. A proporção é uma altura mínima, e
     não um aspect-ratio: com ele, o Chromium não deixa a caixa crescer se o texto não couber. */
  .chamada { container-type: inline-size; min-height: auto; margin: 0; padding: 0; }
  .chamada::before { content: ""; flex: none; width: 0; padding-bottom: 52.5%; }
  .chamada, .chamada::after, .chamada__foto { border-radius: var(--raio); }
  .chamada__texto { padding: 32px 42px 30px; padding: 4.5cqw 5.9cqw 4.2cqw; }
  .chamada h1 { font-size: 2.55rem; font-size: clamp(1.9rem, 5.7cqw, 3.5rem); }
}
.categoria { margin: 0 0 .5rem; color: var(--verde-escuro); font-size: .8rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.capa { margin: 0; }
.capa__palco {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  background: #0f1412;
}
@media (min-width: 600px) { .capa__palco { aspect-ratio: 16 / 10; } }
/* O desfoque vem pronto na imagem: filtro ao vivo pesa no celular e, no WebKit, pintou um quadrado preto no alto da página. */
.capa__palco::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url(video/momento-fundo.webp) center / cover no-repeat;
}
.capa video { width: auto; height: 100%; max-width: 100%; margin: 0 auto; object-fit: contain; background: #000; }
.capa__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100% - 24px); padding: 8px 18px 8px 8px;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--texto);
  font: 700 .95rem/1.2 var(--sans); text-align: left;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.capa__play:hover { background: #fff; }
.capa__play:focus-visible { outline-color: #fff; }
.capa__play svg { flex: none; width: 38px; height: 38px; padding: 9px 8px 9px 10px; border-radius: 50%; background: var(--verde); fill: #fff; }
.capa__tempo { margin-left: 2px; color: var(--suave); font-weight: 500; }
.capa figcaption { margin-top: .5rem; color: var(--suave); font-size: .85rem; }
.resumo { margin: 1.25rem 0 0; color: var(--texto-2); font-size: 1.05rem; }

.pessoas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 1.25rem; }
@media (min-width: 600px) { .pessoas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pessoa { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.pessoa__foto { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; }
.pessoa__foto--icone { display: grid; place-items: center; background: var(--verde-claro); color: var(--verde-escuro); }
.pessoa__foto--icone svg { width: 26px; height: 26px; }
.pessoa__nome { margin: 0; font-weight: 700; line-height: 1.3; }
.pessoa__papel { margin: 0; color: var(--suave); font-size: .86rem; line-height: 1.35; }
.fontes { margin-top: 1.25rem; }
.fontes .pessoas { margin-top: 0; }
a.pessoa { color: inherit; text-decoration: none; transition: border-color .15s; }
a.pessoa:hover { border-color: var(--verde); color: inherit; }
a.pessoa:focus-visible { border-radius: var(--raio); }
.pessoa__seta { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--suave); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* placar */
.placar {
  padding: 22px 20px 18px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 18px;
  box-shadow: var(--sombra);
}
.placar__valor {
  margin: 0;
  color: var(--verde-escuro);
  font-size: min(clamp(2rem, 1.7rem + 1.2vw, 2.4rem), 16vw); font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.placar__valor strong { font-weight: inherit; }
.placar__meta { margin: .2rem 0 1rem; color: var(--texto-2); }
.placar__meta span { color: var(--texto); font-weight: 650; }
/* contribuições das últimas 24 horas, no pé do placar: um ponto verde e a contagem, sem valores */
.placar__ritmo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; color: var(--verde-escuro); font-size: .86rem; font-weight: 650; }
.placar__ritmo::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(14, 124, 90, .18); }

.trilho { display: flex; gap: 3px; height: 12px; }
.trilho__seg { flex: 1 1 0; min-width: 6px; overflow: hidden; border-radius: 3px; background: var(--verde-trilho); }
.trilho__seg:first-child { border-radius: 99px 3px 3px 99px; }
.trilho__seg:last-child { border-radius: 3px 99px 99px 3px; }
.trilho__fill { position: relative; display: block; width: 0; height: 100%; overflow: hidden; background: var(--verde); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.trilho-numeros { display: flex; gap: 3px; min-height: .7rem; margin-top: 5px; }
.trilho-numeros span { flex: 1 1 0; min-width: 6px; color: var(--suave); font-size: .7rem; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.trilho-numeros .atual { color: var(--verde-escuro); font-weight: 800; }
.trilho-numeros .feita { color: var(--verde); }
.trilho-numeros svg { display: inline-block; width: 11px; height: 11px; fill: currentColor; vertical-align: top; }

/* Contribuição nova com a página aberta: um brilho corre pela parte cheia da meta atual, e o segmento pulsa.
   Meta que acaba de encher: o mesmo no segmento dela, e o "certo" surge embaixo. */
.trilho__fill::after, .agora .barra > span::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
}
.trilho.entrou .trilho__seg.atual .trilho__fill::after, .trilho__seg.nova .trilho__fill::after,
.agora.entrou .barra > span::after { animation: brilho 1.2s .35s ease-in-out; }
.trilho.entrou .trilho__seg.atual, .trilho__seg.nova { animation: onda 1.4s ease-out; }
.trilho-numeros .nova svg { animation: surge .7s cubic-bezier(.2, .8, .3, 1.3); }
@keyframes brilho { to { transform: translateX(100%); } }
@keyframes onda { from { box-shadow: 0 0 0 0 rgba(14, 124, 90, .45); } to { box-shadow: 0 0 0 7px rgba(14, 124, 90, 0); } }
@keyframes surge { from { transform: scale(.3); opacity: 0; } }

.numeros { margin: 12px 0 14px; color: var(--texto-2); font-size: .95rem; line-height: 1.5; }
.numeros strong { color: var(--texto); font-weight: 650; font-variant-numeric: tabular-nums; }

.agora { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--verde-claro); }
.agora__feitas {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(14, 124, 90, .16);
  color: var(--verde-escuro); font-size: .84rem; font-weight: 700; line-height: 1.3;
}
.agora__feitas svg { flex: none; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--verde); fill: #fff; }
/* meta que acaba de encher com a página aberta: o quadro acende e o "certo" surge */
.agora--concluiu { animation: concluiu 2.2s ease-out; }
.agora--concluiu .agora__feitas svg { animation: surge .7s .15s cubic-bezier(.2, .8, .3, 1.3) backwards; }
@keyframes concluiu { from { background-color: #bfe6d3; box-shadow: 0 0 0 4px rgba(14, 124, 90, .22); } }
.agora__rotulo { margin: 0; color: var(--verde-escuro); font-size: .75rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.agora__titulo { margin: 2px 0 8px; font-weight: 700; line-height: 1.3; }
.agora__falta { margin: 6px 0 0; color: var(--texto-2); font-size: .86rem; font-variant-numeric: tabular-nums; }
.agora__completar { margin-top: 10px; }
.agora__completar:empty { display: none; }
.agora__completar .chip { width: 100%; }

.barra { height: 8px; overflow: hidden; border-radius: 99px; background: var(--verde-trilho); }
.barra > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--verde); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.agora .barra { background: rgba(14, 124, 90, .16); }
.agora .barra > span { position: relative; overflow: hidden; }

.placar__seguro { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--suave); font-size: .82rem; line-height: 1.35; }
.placar__seguro svg { width: 15px; height: 15px; flex: none; color: var(--verde); }
.placar__ultima { margin: 12px 0 0; color: var(--suave); font-size: .82rem; text-align: center; }
.placar__ritmo:not([hidden]) + .placar__ultima { margin-top: 4px; }
.placar__erro { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--ambar-claro); color: var(--ambar-texto); font-size: .85rem; }

/* Enquanto o placar não chega da API (ou quando ela cai), os números dele (data-esqueleto) viram blocos cinza no lugar
   dos zeros do HTML: depois da primeira contribuição, um zero ali seria mentira. O texto continua lá, invisível, e
   segura a altura da linha, para o placar não pular quando chega; o bloco é desenhado por cima. Enquanto carrega, os
   blocos e as barras vazias pulsam devagar (para quem pede menos movimento, ficam parados). */
body:not([data-placar="pronto"]) [data-esqueleto] { position: relative; visibility: hidden; }
body:not([data-placar="pronto"]) [data-esqueleto]::after {
  content: ''; position: absolute; inset: .2em 0; border-radius: 6px;
  background: var(--esqueleto, var(--linha)); visibility: visible;
}
body:not([data-placar="pronto"]) :is(.placar__valor, .barra-fixa__info) strong { display: inline-block; min-width: 4.2em; }
body:not([data-placar="pronto"]) .numeros strong { display: inline-block; min-width: 2em; }
body:not([data-placar="pronto"]) .contas dd::after { right: auto; width: 5em; }
body:not([data-placar="pronto"]) .agora__rotulo::after { right: 40%; }
body:not([data-placar="pronto"]) .agora__titulo::after { right: 20%; }
body:not([data-placar="pronto"]) .agora__falta { min-height: 1.6em; }
body:not([data-placar="pronto"]) .agora__falta::after { right: 35%; }
.agora, .contas__saldo { --esqueleto: rgba(14, 124, 90, .16); }
.trilho:empty { border-radius: 99px; background: var(--verde-trilho); }
[data-placar="carregando"] [data-esqueleto]::after, [data-placar="carregando"] :is(.trilho:empty, .barra) {
  animation: esperando 1s ease-in-out infinite alternate;
}
@keyframes esperando { to { opacity: .45; } }

/* valores sugeridos */
.valores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  flex: 1 1 calc(25% - 6px);
  min-height: 46px; padding: 8px 3px;
  border: 1.5px solid var(--linha-forte); border-radius: 10px;
  background: var(--superficie); color: var(--texto);
  font: 650 .95rem/1.1 var(--sans); font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.chip:hover { border-color: var(--verde); }
@media (max-width: 340px) { .chip { font-size: .875rem; } }
.chip[aria-pressed="true"], .chip--escolhido { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro); box-shadow: inset 0 0 0 1px var(--verde); }
/* o valor exato que falta para a meta atual: no quadro da meta e, na janela, uma linha inteira embaixo dos sugeridos;
   tracejado até ser escolhido */
.chip--falta { flex-basis: 100%; padding: 10px 12px; border-style: dashed; border-color: var(--verde); font-weight: 500; line-height: 1.25; }
.chip--falta strong { font-weight: 700; }
.chip--falta[aria-pressed="true"], .chip--falta.chip--escolhido { border-style: solid; }

/* botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1.5px solid transparent; border-radius: 10px;
  font: 700 1rem/1.2 var(--sans); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.botao svg { width: 18px; height: 18px; flex: none; }
.botao--principal { background: var(--verde); color: #fff; }
.botao--principal:hover { background: var(--verde-escuro); color: #fff; }
.botao--contorno { background: var(--superficie); border-color: var(--linha-forte); color: var(--texto); }
.botao--contorno:hover { border-color: var(--verde); color: var(--verde-escuro); }
.botao--grande { width: 100%; min-height: 52px; font-size: 1.05rem; }
.botao--grande + .botao--grande { margin-top: 10px; }
.botao--pequeno { min-height: 44px; padding: 7px 16px; font-size: .95rem; }
.botao--teste { margin-top: 2px; background: var(--ambar-claro); border-color: #e8c47a; color: var(--ambar-texto); }
.botao[disabled] { opacity: .65; cursor: progress; }
.botao-link {
  display: flex; align-items: center; justify-content: center;
  width: fit-content; max-width: 100%; min-height: 44px; margin: 12px auto 0; padding: 6px;
  border: 0; background: none;
  color: var(--verde-escuro); font: 600 .95rem/1.3 var(--sans); text-align: center;
  text-decoration: underline; text-underline-offset: .2em;
  cursor: pointer;
}

/* abas e blocos de conteúdo */
.conteudo { min-width: 0; }
.abas {
  position: sticky; top: var(--topo); z-index: 20;
  display: flex; gap: 2px;
  margin: 0 -16px 16px; padding: 0 12px;
  overflow-x: auto; scrollbar-width: none;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}
.abas::-webkit-scrollbar { display: none; }
.abas a {
  flex: none; display: inline-flex; align-items: center;
  padding: 14px 12px 11px;
  border-bottom: 3px solid transparent;
  color: var(--texto-2); font-size: .95rem; font-weight: 650; white-space: nowrap; text-decoration: none;
}
.abas a:hover { color: var(--texto); }
.abas a:focus-visible { outline-offset: -3px; }
.abas a[aria-current="true"] { border-bottom-color: var(--verde); color: var(--verde-escuro); }
.abas__n { margin-left: 6px; padding: 0 7px; border-radius: 99px; background: var(--verde-claro); color: var(--verde-escuro); font-size: .76rem; line-height: 1.6; }
@media (min-width: 1000px) { .abas { margin-inline: 0; padding-inline: 4px; border-radius: 0; } }

.bloco { padding: 24px 20px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px; }
@media (min-width: 700px) { .bloco { padding: 32px 36px; } }
.bloco + .bloco { margin-top: 16px; }
.bloco h3 { margin-top: 1.8em; }

/* história */
.linha-do-tempo { margin: 1.5rem 0; padding: 0; list-style: none; }
.linha-do-tempo li { position: relative; margin-left: 7px; padding: 0 0 1.4rem 26px; border-left: 2px solid var(--linha); }
.linha-do-tempo li:last-child { padding-bottom: 0; border-left-color: transparent; }
.linha-do-tempo li::before {
  content: ""; position: absolute; left: -8px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--linha-forte);
}
.linha-do-tempo li.marco::before { background: var(--vermelho); border-color: var(--vermelho); }
.linha-do-tempo p:last-child { margin-bottom: 0; }
.quando { margin: 0 0 .2rem; color: var(--suave); font-size: .8rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.marco .quando { color: var(--vermelho); }
.tempo-foto { max-width: 240px; margin: .8rem 0 0; }
.tempo-foto img { border-radius: 10px; }
.tempo-foto figcaption, .credito { margin-top: .4rem; color: var(--suave); font-size: .85rem; }

.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 1.5rem; }
@media (min-width: 700px) { .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galeria a { display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 10px; background: #111; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galeria a:hover img { transform: scale(1.03); }

.cartoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 700px) {
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartao:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* o último, se ficar sozinho, ocupa a linha toda */
}
.cartao { padding: 16px; border-radius: 12px; background: var(--fundo); }
.cartao h4 { margin-bottom: .3em; }
.cartao p { margin: 0; color: var(--texto-2); font-size: .94rem; }
.citacao { margin: 1.5rem 0 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--verde); }
.citacao p { margin-bottom: .4rem; font-size: 1.15rem; font-weight: 650; }
.citacao footer { color: var(--suave); font-size: .9rem; }

/* metas */
.metas { margin: 1.4rem 0 0; padding: 0; list-style: none; }
.meta { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.meta:last-child { padding-bottom: 0; }
.meta:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--linha); }
.meta--concluida:not(:last-child)::before { background: var(--verde); }
.meta__marca {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--linha); background: var(--fundo); color: var(--suave);
  font-size: .95rem; font-weight: 800;
}
.meta__marca svg { width: 20px; height: 20px; }
.meta--atual .meta__marca { border-color: var(--verde); background: var(--superficie); color: var(--verde-escuro); box-shadow: 0 0 0 4px var(--verde-claro); }
.meta--concluida .meta__marca { border-color: var(--verde); background: var(--verde); color: #fff; }
.meta__numero { margin: 0; color: var(--suave); font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.meta__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.meta .meta__titulo { margin: 0; font-size: 1.05rem; }
.meta__descricao { margin: .3rem 0 .65rem; color: var(--texto-2); font-size: .94rem; }
.meta__valores { margin: .45rem 0 0; color: var(--suave); font-size: .88rem; font-variant-numeric: tabular-nums; }
.meta__valores strong { color: var(--texto); }
.meta--fila .meta__titulo { color: var(--texto-2); }

.etiqueta {
  display: inline-block; padding: 1px 9px; border-radius: 99px;
  background: var(--fundo); color: var(--suave);
  font-size: .75rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.etiqueta--verde { background: var(--verde-claro); color: var(--verde-escuro); }
.etiqueta--atual { background: var(--ambar-claro); color: var(--ambar-texto); }

/* atualizações */
.atualizacoes { margin: 0; padding: 0; list-style: none; }
.atualizacoes li { padding: 14px 0; border-top: 1px solid var(--linha); }
.atualizacoes li:first-child { padding-top: 0; border-top: 0; }
.atualizacoes time { display: block; color: var(--verde-escuro); font-size: .82rem; font-weight: 700; }
.atualizacoes p { margin: .2rem 0 0; }

/* transparência */
/* Duas colunas. Com o texto ampliado, os valores não cabem lado a lado, e fica uma. */
.contas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(8em, 34%)), 1fr)); gap: 10px; margin: 1.2rem 0; }
@media (min-width: 700px) { .contas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.contas div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 12px 14px; border-radius: 12px; background: var(--fundo); }
.contas dt { color: var(--suave); font-size: .82rem; line-height: 1.3; }
.contas dd { margin: 0; font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.contas .contas__saldo { grid-column: 1 / -1; background: var(--verde-claro); }
.contas__saldo dd { color: var(--verde-escuro); }
/* no fundo verde-claro, o cinza suave fica abaixo do contraste mínimo (4,5:1) */
.contas__saldo dt { color: var(--texto-2); }

.taxas { margin: .5rem 0 1rem; padding-left: 1.2rem; }
.taxas li { margin-bottom: .45rem; }
.garantias { margin: .5rem 0 0; padding: 0; list-style: none; }
.garantias li { position: relative; margin-bottom: .7rem; padding-left: 30px; }
.garantias li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--verde-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230a5f45' d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.tabela { overflow-x: auto; }
.gastos { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gastos th, .gastos td { padding: 10px 8px; border-bottom: 1px solid var(--linha); text-align: left; }
.gastos th { color: var(--suave); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.gastos td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* dúvidas */
#perguntas details { border-top: 1px solid var(--linha); }
#perguntas details:last-child { border-bottom: 1px solid var(--linha); }
#perguntas summary { position: relative; padding: 15px 34px 15px 0; font-weight: 650; list-style: none; cursor: pointer; }
#perguntas summary::-webkit-details-marker { display: none; }
#perguntas summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s;
}
#perguntas details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
#perguntas details p { margin: 0 0 16px; color: var(--texto-2); }

/* rodapé */
.rodape { max-width: 1160px; margin: 0 auto; padding: 4px 16px 112px; color: var(--suave); font-size: .86rem; text-align: center; }
.rodape p { margin-bottom: .4em; }
@media (min-width: 1000px) { .rodape { padding-bottom: 40px; } }

/* barra fixa no celular, quando o placar sai da tela */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -6px 20px rgba(16, 24, 20, .08);
  visibility: hidden;
  transform: translateY(calc(100% + 8px));
  transition: transform .25s ease, visibility .25s;
}
.barra-fixa.visivel { visibility: visible; transform: none; }
.barra-fixa__info { flex: 1; min-width: 0; }
.barra-fixa__info p { margin: 0 0 6px; overflow: hidden; font-size: .88rem; white-space: nowrap; text-overflow: ellipsis; }
.barra-fixa__info strong { color: var(--verde-escuro); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.barra-fixa .botao { flex: none; padding-inline: 22px; }
/* em tela muito estreita, o total some antes que o valor seja cortado: o placar repete o total */
@media (max-width: 359.98px) { .barra-fixa__de { display: none; } }
@media (min-width: 1000px) { .barra-fixa { display: none !important; } }
/* no celular, o item focado pelo teclado para acima da barra fixa, e não atrás dela */
@media (max-width: 999.98px) { html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* janela de contribuição */
.doar {
  width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 0; border-radius: 18px;
  background: var(--superficie); color: var(--texto);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  overflow: auto; overscroll-behavior: contain;
}
.doar::backdrop { background: rgba(12, 20, 16, .55); }
dialog.abrindo { pointer-events: none; }
@media (max-width: 559px) {
  .doar { width: 100%; max-width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
}
.doar__topo {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 12px 22px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.doar__titulo { margin: 0; font-size: 1.1rem; }
/* o título recebe o foco quando a tela da janela muda, para o leitor de tela anunciar; não é botão, então sem contorno */
.doar__titulo:focus { outline: none; }
.doar__fechar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--fundo); color: var(--texto); cursor: pointer; }
.doar__fechar:hover { background: var(--linha); }
.doar__fechar svg { width: 20px; height: 20px; }
.tela { padding: 18px 22px calc(22px + env(safe-area-inset-bottom)); }
.tela--centro { text-align: center; }

.campo { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.campo legend { margin-bottom: 10px; padding: 0; font-weight: 700; }
.campo__rotulo { display: block; margin: 4px 0 6px; font-size: .92rem; font-weight: 700; }
.campo .valores { margin-bottom: 10px; }
.campo .dica { margin: 6px 0 0; font-size: .84rem; }
.dinheiro { display: flex; align-items: center; border: 1.5px solid var(--linha-campo); border-radius: 10px; background: var(--superficie); }
.dinheiro:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.dinheiro span { padding-left: 14px; color: var(--suave); font-weight: 700; }
.dinheiro input { flex: 1; min-width: 0; padding: 12px 14px 12px 8px; border: 0; outline: none; background: none; color: var(--texto); font: 650 1.1rem/1.2 var(--sans); }
.dinheiro input::placeholder { color: var(--suave); font-weight: 500; opacity: 1; }
/* quanto o valor escolhido enche da meta atual: o que já entrou e, listrado, a parte de quem está contribuindo */
.efeito { display: flex; height: 8px; margin: 12px 0 0; overflow: hidden; border-radius: 99px; background: var(--verde-trilho); }
.efeito span { flex: none; width: 0; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.efeito [data-efeito-antes] { background: var(--verde); }
.efeito [data-efeito-seu] { background: repeating-linear-gradient(-45deg, #2f9e72 0 4px, #63c49b 4px 8px); }
.campo .dica--efeito { color: var(--texto-2); line-height: 1.45; }
.dica--efeito strong { color: var(--verde-escuro); font-weight: 750; }
#email, .pix__codigo {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--linha-campo); border-radius: 10px;
  background: var(--superficie); color: var(--texto);
  font: 400 1rem/1.3 var(--sans);
}
#email:focus { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
#email:focus, .dinheiro:focus-within { outline: 3px solid var(--verde); outline-offset: 2px; }
#email::placeholder { color: var(--suave); opacity: 1; }
/* campo com problema: o app.js marca junto com a mensagem de erro e desmarca quando a pessoa corrige */
#email[aria-invalid="true"], .dinheiro:has([aria-invalid="true"]) { border-color: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-claro); }

.meio { display: flex; gap: 12px; padding: 14px; border: 1.5px solid var(--linha-forte); border-radius: 12px; cursor: pointer; }
.meio + .meio { margin-top: 10px; }
.meio:hover { border-color: var(--verde); }
.meio:has(input:checked) { border-color: var(--verde); background: #f5fbf8; box-shadow: inset 0 0 0 1px var(--verde); }
.meio input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--verde); }
.meio__corpo { display: block; min-width: 0; }
.meio__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 700; }
.meio__texto { display: block; margin-top: 3px; color: var(--texto-2); font-size: .88rem; line-height: 1.45; }

.pix-aberto { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--verde-claro); font-size: .92rem; }
.pix-aberto p { margin: 0; }
.pix-aberto .botao-link { margin: 2px 0 -6px; padding-inline: 0; font-size: .92rem; }
.erro { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--vermelho-claro); color: var(--vermelho); font-size: .92rem; font-weight: 600; }
.doar__seguro { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 12px 0 0; color: var(--suave); font-size: .8rem; line-height: 1.4; }
.doar__seguro svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--verde); }

.doar__valor { margin: 0 0 14px; color: var(--texto-2); text-align: center; }
.doar__valor strong { display: block; color: var(--texto); font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.pix { display: grid; justify-items: center; gap: 16px; }
.pix__qr { padding: 12px; border: 1px solid var(--linha); border-radius: 14px; background: #fff; }
.pix__qr img { width: 200px; height: 200px; }
.pix__copia { width: 100%; }
.pix__codigo { min-height: 44px; margin-bottom: 10px; color: var(--texto-2); font: 400 .8rem/1.3 var(--mono); text-overflow: ellipsis; }
@media (max-width: 559px) {
  /* no celular, quem paga costuma usar o próprio celular: o botão de copiar vem antes do QR */
  .pix__copia { order: -1; }
  .pix__qr img { width: 160px; height: 160px; }
}
.passos { margin: 18px 0 14px; padding-left: 1.25rem; color: var(--texto-2); font-size: .9rem; }
.passos li { margin-bottom: 6px; }
.status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  margin: 0 0 12px; padding: 12px; border-radius: 10px;
  background: var(--fundo);
  font-size: .95rem; font-weight: 600;
}
.status__tempo { color: var(--suave); font-weight: 500; font-variant-numeric: tabular-nums; }
/* três ciclos, 4,2 s: o que pisca por mais de 5 s precisaria de um jeito de parar (WCAG 2.2.2) */
.pulso { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--ambar); animation: pulso 1.4s ease-in-out 3; }
@keyframes pulso { 50% { opacity: .25; transform: scale(.75); } }
.girando { display: block; width: 44px; height: 44px; margin: 14px auto 18px; border: 4px solid var(--verde-claro); border-top-color: var(--verde); border-radius: 50%; animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.tela--centro .status { background: none; }
.selo-ok { display: grid; place-items: center; width: 64px; height: 64px; margin: 6px auto 12px; border-radius: 50%; background: var(--verde); color: #fff; }
.selo-ok svg { width: 34px; height: 34px; }
.doar__destaque { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
/* no obrigado, quando a contribuição completou uma meta: o mesmo quadro verde do placar */
.obrigado__meta {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; border-radius: 12px; background: var(--verde-claro);
  color: var(--verde-escuro); text-align: left;
}
.obrigado__meta svg { flex: none; width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: var(--verde); fill: #fff; }
.acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }

/* janela de divulgar: a imagem para story e status, e o link */
.divulgar__intro { margin: 0 0 14px; color: var(--texto-2); font-size: .95rem; line-height: 1.4; text-align: center; }
.story {
  --alto: min(30vh, 380px);
  position: relative; display: grid; place-items: center;
  width: calc(var(--alto) * 9 / 16); height: var(--alto); margin: 0 auto 16px;
  overflow: hidden; border-radius: 12px;
  background: #0f1412;
  box-shadow: 0 10px 26px rgba(16, 24, 20, .22);
}
.story img { position: absolute; inset: 0; width: 100%; height: 100%; }
.story img:not([src]) { visibility: hidden; }
.story.carregando img { opacity: .35; }
.story .girando { position: relative; margin: 0; border-color: rgba(255, 255, 255, .18); border-top-color: #fff; }
.story:not(.carregando) .girando { display: none; }
.divulgar__embutido { margin: 12px 0 0; color: var(--texto-2); font-size: .92rem; text-align: center; }
.divulgar__link { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }
.divulgar__link p { margin: 0 0 10px; font-weight: 700; text-align: center; }
.divulgar__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.divulgar__botoes .botao { flex: 1 1 auto; padding-inline: 12px; font-size: .95rem; white-space: nowrap; }

/* foto ampliada */
.ampliar { max-width: min(92vw, 900px); padding: 12px; border: 0; border-radius: 14px; background: #111; }
.ampliar::backdrop { background: rgba(0, 0, 0, .82); }
/* 120 px são o Fechar, as margens da janela e as que o navegador deixa em volta dela */
.ampliar img { width: auto; max-height: 80vh; max-height: min(80vh, calc(100dvh - 120px)); margin: 0 auto 10px; border-radius: 8px; }
.ampliar .botao { display: flex; margin: 0 auto; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Modo escuro, quando o celular ou o computador está nele: as variáveis de cor ganham tons escuros, e mudam à mão só
   as cores fixas do tema claro. O texto passa no contraste mínimo (4,5:1) em todos os fundos. O verde das barras fica
   mais claro, para aparecer no fundo escuro; o botão principal fica num verde mais fundo, que segura o texto branco.
   O QR do Pix continua sobre branco, para o app do banco ler. */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0e1311;
    --superficie: #171e1b;
    --texto: #e6ece8;
    --texto-2: #b5c1ba;
    --suave: #8e9b94;
    --linha: #29332e;
    --linha-forte: #3d4a44;
    --linha-campo: #6f7d76;
    --verde: #2fa57a;
    --verde-escuro: #74d3aa;   /* o verde dos textos: no escuro, é o mais claro */
    --verde-claro: #163128;
    --verde-trilho: #2a3832;
    --ambar: #e0a23a;
    --ambar-claro: #33270f;
    --ambar-texto: #f2cd85;
    --vermelho: #ff8f84;
    --vermelho-claro: #3a1715;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
  .aviso-teste { border-bottom-color: #5a4517; }
  .chamada { --veu: rgba(14, 19, 17, .75); --verde-escuro: #74d3aa; background: #1b211e; }
  /* o botão de tocar o relato continua branco sobre o vídeo, com o texto do tema claro */
  .capa__play { color: #18211d; }
  .capa__tempo { color: #67726c; }
  .placar__ritmo::before { box-shadow: 0 0 0 3px rgba(47, 165, 122, .25); }
  .agora__feitas { border-bottom-color: rgba(116, 211, 170, .18); }
  .agora .barra { background: rgba(116, 211, 170, .14); }
  .agora, .contas__saldo { --esqueleto: rgba(116, 211, 170, .14); }
  @keyframes concluiu { from { background-color: #23533f; box-shadow: 0 0 0 4px rgba(47, 165, 122, .35); } }
  .botao--principal { background: #12805c; }
  .botao--principal:hover { background: #0e6e50; }
  .botao--teste { border-color: #6b5220; }
  .garantias li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2374d3aa' d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 11-11-1.4-1.4z'/%3E%3C/svg%3E");
  }
  /* opaca: no escuro, o texto claro de baixo transparecia na barra quase opaca do tema claro */
  .barra-fixa { background: var(--superficie); box-shadow: 0 -6px 20px rgba(0, 0, 0, .35); }
  .doar::backdrop { background: rgba(0, 0, 0, .6); }
  .meio:has(input:checked) { background: #14261f; }
}

/* no computador, as peças da abertura e da apresentação na grade da coluna da esquerda */
.chamada__acoes { display: none; }
@media (min-width: 1000px) {
  .chamada { grid-area: chamada; }
  .apresentacao > .capa { grid-area: capa; margin-top: 1.1rem; }
  .resumo { grid-area: resumo; margin-top: 28px; }
  .apresentacao > .pessoas { grid-area: pessoas; }
  .fontes { grid-area: fontes; }
}

/* No celular, a chamada vira capa: a foto do furo no escuro, nos dois temas, com o vídeo e o Contribuir dentro dela. Ela
   ocupa a tela menos a --espia, o pedaço da folha com o resumo que aparece embaixo e mostra que a página continua. É
   altura mínima, nunca altura fixa, nem overflow: com o texto ampliado, a capa cresce em vez de cortar. A --tela vem do
   app.js, medida uma vez; a --faixa é o aviso da prévia, que não existe no site aberto. */
@media (max-width: 599.98px) {
  :root { --topo: 0px; --espia: 96px; --dobra: 20px; }
  .topo { display: none; }
  .chamada {
    --verde-escuro: #bfe9d4;
    padding: 20px 16px calc(var(--dobra) + 12px);
    background: #0c100e; color: #f5f8f6;
    min-height: max(460px, calc(100vh - var(--faixa, 0px) - var(--espia) + var(--dobra)));
    min-height: max(460px, calc(var(--tela, 100svh) - var(--faixa, 0px) - var(--espia) + var(--dobra)));
  }
  .chamada::after {
    background: linear-gradient(180deg, rgba(7, 10, 9, .72) 0%, rgba(7, 10, 9, .66) 40%,
      rgba(7, 10, 9, .1) 55%, rgba(7, 10, 9, .08) 66%, rgba(7, 10, 9, .88) 86%);
  }
  .chamada__foto { object-position: 40% 50%; }
  .chamada__texto { flex: 1; width: 100%; }
  .chamada h1 {
    color: #f7faf8;
    font-size: clamp(1.9rem, min(10vw, 6.3vh), 2.55rem);
    font-size: clamp(1.9rem, min(10vw, 6.3svh), 2.55rem);
  }
  .chamada :focus-visible { outline-color: #fff; }
  .chamada__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 16px; }
  .chamada__acoes .botao { flex: 99 1 auto; min-height: 52px; padding-inline: 8px; font-size: 1.05rem; }
  .chamada__relato {
    display: inline-flex; flex: 1 1 auto; align-items: center; gap: 9px;
    min-height: 52px; padding: 0 14px 0 7px; border-radius: 10px;
    background: rgba(12, 16, 14, .5); color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6);
    font-weight: 700; font-size: .95rem; white-space: nowrap; text-decoration: none;
  }
  .chamada__relato:hover { color: #fff; }
  .chamada__rosto { position: relative; flex: none; width: 38px; height: 38px; }
  .chamada__rosto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
  .chamada__rosto svg {
    position: absolute; right: -4px; bottom: -4px;
    width: 20px; height: 20px; padding: 3px 2px 3px 4px;
    border-radius: 50%; background: #fff; fill: #18211d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  }
  .chamada__tempo { margin-left: 2px; font-weight: 500; opacity: .8; }
  .chamada__rodape { margin: 8px 0 0; padding: 0; color: #dbe9e2; font-size: .86rem; font-weight: 600; text-align: center; }
  .chamada__rodape::before { display: none; }

  /* o resto da página sobe por cima da foto, como uma folha */
  .resumo {
    position: relative; z-index: 1;
    margin: calc(-1 * var(--dobra)) -16px 0; padding: 20px 16px 0;
    background: var(--fundo); color: var(--texto);
    border-radius: var(--dobra) var(--dobra) 0 0;
  }
}
@media (max-width: 599.98px) and (prefers-color-scheme: dark) {
  .resumo { box-shadow: 0 -1px 0 rgba(255, 255, 255, .14); }
}

/* no celular, as seções saem do cartão: o placar continua cartão, e passa a ser o único. O texto ganha a largura */
@media (max-width: 699.98px) {
  .bloco { padding: 28px 0 12px; background: none; border: 0; border-radius: 0; }
  .bloco + .bloco { margin-top: 0; border-top: 1px solid var(--linha); }
  .cartao, .contas div { background: var(--superficie); border: 1px solid var(--linha); }
  .linha-do-tempo li::before { background: var(--fundo); }
  .meta--atual .meta__marca { background: var(--fundo); }
  .etiqueta { background: var(--superficie); }
}
.fecho h2 { margin-top: 0; }
.fecho .botao { margin-top: .4rem; }

/* as etiquetas das metas ficam sempre no mesmo lugar, na linha de "Meta 1" */
.meta > div { position: relative; }
.meta__topo { display: block; }
.meta__topo .etiqueta { position: absolute; top: -2px; right: 0; }

/* em tela baixa (celular deitado, página ampliada), nada fica preso cobrindo o texto */
@media (max-height: 480px) {
  .abas { position: static; }
  html { scroll-padding-top: calc(var(--topo) + 12px); scroll-padding-bottom: 12px; }
}
@media (max-height: 480px) and (min-width: 600px) { .barra-fixa { display: none !important; } }
@media (max-height: 480px) and (orientation: landscape) { .chamada { min-height: 0; } }

/* o botão de continuar preso ao pé da janela; o campo focado para acima dele */
.doar { scroll-padding-bottom: 96px; }
.doar__pe {
  position: sticky; bottom: 0; z-index: 1;
  margin: 0 -22px; padding: 10px 22px calc(10px + env(safe-area-inset-bottom));
  background: var(--superficie); border-top: 1px solid var(--linha);
}
.doar__pe .erro { margin-bottom: 8px; }
@media (max-width: 559px) {
  .meio { padding: 12px 14px; }
  .meio:not(:has(input:checked)) .meio__texto { display: none; }
}

/* A página 404: quem digita o endereço lido num story pode errar uma letra, e precisa de um caminho de volta. */
.perdida { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; max-width: 30rem; min-height: 100vh; min-height: 100dvh; margin-inline: auto; padding: 32px 20px; }
.perdida h1 { margin: 18px 0 0; font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; }
.perdida p { margin: 0 0 16px; color: var(--texto-2); }

/* Alto contraste do Windows: o sistema troca todo fundo pela cor da tela, e o que é desenhado só com fundo some. */
@media (forced-colors: active) {
  .trilho__seg, .barra { border: 1px solid CanvasText; }
  .trilho__fill, .barra > span { background: Highlight; }
  /* sem o forced-color-adjust, o navegador pinta uma placa atrás do texto, e a placa apaga a letra */
  .chip[aria-pressed="true"], .chip--escolhido { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
}