/* Hallmark · shape: a conta, nove blocos do total ao canhoto · genre: editorial · theme: custom · job: download · idea: "o site é a conta dos subsídios: cada bloco responde a uma pergunta do Inesc e a página fecha no canhoto de download" · vibe: "papel recortado, marinho, conta de luz"
 * paper: oklch(85.5% 0.024 88.2) · accent: oklch(78.7% 0.147 73) · display: Gulams Condensed · body: Bai Jamjuree · hero: capa provisória no molde da capa do Guia Mercado de Carbono, com a Chamada da campanha · nav: logo e um botão, fixo no topo · footer: endereço e contato de um lado, redes sociais do outro · imagery: ilustrações da pasta da ID e fotos em monocromia, como nas aberturas do guia · signature: a fatura dos 7 maiores subsídios e o canhoto de download
 * axes: mid/grotesk-heavy/chromatic-orange · posture: full-palette · contrast: pass · fold: pass · copy: verbatim · brand: Inesc (spec 2026-11-05) · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R3 V5 · weakest: R, a ID é farta em recursos; fiquei só com fita, relevo e folha de papel, e os números do guia só entram na lista de prioridades */
/* Hallmark · hero-review: merged into the finish review · finish-review: subagent · 8 findings · 6 resolved 2 partial · gap: none */
/* partial 6: dois parágrafos dos fósseis seguem lado a lado, cada um com menos de 60 caracteres por linha · partial 8: rótulos dos filtros seguem no corpo, porque caixa alta em rótulo fere o gate 67 */
/* Hallmark · waive 47c · fitas de papel e letras em relevo copiam Chamada.png e a capa do guia · são o material aprovado da campanha do Inesc, não enfeite meu */
/* Hallmark · waive 38iii · o par de cifrões verdes em E$$A vem do KV aprovado em 30/10 · é a assinatura da campanha e só reaparece no título do bloco da conta */
/* Hallmark · waive 2b · um só matiz, a face azul e o pontilhado azul mais escuro, dois tokens · repete o acabamento das letras da Chamada do Inesc, feito para este relevo */
/* Hallmark · waive 83 · recortes da ID e duas fotos em monocromia, como nas aberturas do guia · o medidor conta as caixas das ilustrações do Inesc como se fossem fotografias */
/* Hallmark · dismissed 23 · a foto da COP31 e o botão usam o laranja do guia, sob a postura declarada no carimbo */
/* Hallmark · dismissed 3 · a faixa à esquerda do resumo dos 27 subsídios veio da revisão de usabilidade, para o total se destacar dos filtros */
/* Hallmark · dismissed 59 · os nove blocos e o rodapé são os aprovados no wireframe */
/* Hallmark · answered F19 · dois pesos para cada família: 400, 500 e 700 no corpo porque a Bai Jamjuree afina no kraft, 800 e 950 na Gulams, como no guia */
@import url("./tokens.css?v=202611062150");
@import url("./base.css?v=202611062150");

body { font-size: var(--text-md); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Superfícies ------------------------------------------------------------ */
.marinho { background-color: var(--color-marinho); background-image: var(--marinho); background-size: 1000px 1000px; color: var(--color-creme); --color-focus: var(--color-laranja); --color-muted: var(--color-letra); }
.kraft, .folha { --color-muted: var(--tinta-suave); --color-focus: var(--color-marinho); }
.kraft { background-color: var(--color-kraft); background-image: var(--papel); background-size: 820px 820px; background-blend-mode: multiply; color: var(--color-ink); }
.folha { background-color: var(--color-creme); background-image: var(--papel); background-size: 820px 820px; background-blend-mode: multiply; color: var(--color-ink); box-shadow: var(--sombra-folha); }

.bloco { position: relative; padding-block: var(--space-4xl); }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-2xl); }

/* Tipografia ------------------------------------------------------------- */
.titulo { font-size: var(--text-section); font-weight: 950; line-height: 1.02; text-transform: uppercase; }
.frase { font-family: var(--font-display); font-weight: 950; line-height: 1.05; text-transform: uppercase; overflow-wrap: break-word; min-width: 0; }
.lead { font-size: var(--text-lead); line-height: 1.5; max-width: 62ch; }
.texto { display: grid; gap: var(--space-md); }
.texto p { max-width: 62ch; }
.nota-pe { font-size: var(--text-sm); color: var(--color-muted); }

.relevo {
  --passo: 0.013em;
  display: inline-block; color: var(--color-letra);
  filter: drop-shadow(var(--passo) var(--passo) 0 var(--color-marinho-fundo)) drop-shadow(var(--passo) var(--passo) 0 var(--color-marinho-fundo)) drop-shadow(var(--passo) var(--passo) 0 var(--color-marinho-fundo)) drop-shadow(var(--passo) var(--passo) 0 var(--color-marinho-fundo)) drop-shadow(var(--passo) var(--passo) 0 var(--color-marinho-fundo));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .relevo__face { color: transparent; background-color: var(--color-letra); background-image: var(--relevo), linear-gradient(180deg, var(--color-letra) 0 45%, var(--color-letra-2) 100%); background-size: 720px 100%, 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
.virgula { margin-right: -0.11em; }
.cifrao { color: var(--color-verde-vivo); -webkit-text-fill-color: var(--color-verde-vivo); }

.fita {
  display: inline-block; max-width: 100%; padding: var(--space-xs) var(--space-md);
  background-color: var(--cor-fita, var(--color-laranja)); background-image: var(--papel); background-size: 820px 820px; background-blend-mode: multiply;
  color: var(--tinta-fita, var(--color-marinho));
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.1; text-transform: uppercase; text-align: left;
  transform: rotate(-1.2deg); transform-origin: left center; box-shadow: var(--sombra-fita);
}
.fita--queimada { --cor-fita: var(--color-queimado-escuro); --tinta-fita: var(--color-branco); }
.fita--azul { --cor-fita: var(--color-fita); }

/* Botão ------------------------------------------------------------------ */
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-card); background-color: var(--color-laranja); color: var(--color-marinho);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1; text-transform: uppercase; white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--color-marinho-fundo);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .botao:hover { background-color: var(--color-laranja-2); } }
.botao:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--color-marinho-fundo); }
.botao:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.botao[aria-busy="true"] { cursor: progress; }
.botao--topo { min-height: 44px; font-size: var(--text-lg); box-shadow: 3px 3px 0 var(--color-marinho-fundo); }

/* Topo ------------------------------------------------------------------- */
.pular { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-4xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-laranja); color: var(--color-marinho); }
.pular:focus-visible { top: var(--space-md); }
.topo { position: sticky; top: 0; z-index: var(--z-sticky-nav); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; }
.topo__logo { display: block; color: var(--color-branco); }
.topo__logo svg { width: 72px; height: 48px; fill: currentColor; }
.topo__logo:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

/* Capa provisória -------------------------------------------------------- */
.capa { position: relative; overflow: clip; background-color: var(--color-capa); }
.capa__palco { position: relative; max-width: 1920px; margin-inline: auto; aspect-ratio: 2880 / 1200; }
.capa__palco > .visually-hidden { left: max(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter))); top: 50%; }
.capa__banner { display: block; width: 100%; height: 100%; object-fit: cover; }
.capa .nota { position: absolute; pointer-events: none; }
.capa .nota--1 { left: 26.5%; top: 3%; width: 6%; --giro: -14deg; --i: 0; }
.capa .nota--2 { left: 47%; top: 1%; width: 6.5%; --giro: 18deg; --i: 1; }
.capa .nota--4 { right: 26%; top: 4%; width: 7%; --giro: -22deg; --i: 2; }
.nota { translate: 0 calc(var(--desloc, 0) * 1px); transform: rotate(var(--giro, 0deg)); animation: nota-cai 1100ms var(--ease-out) both, nota-flutua 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * -1.3s); }
@keyframes nota-flutua { from { rotate: -7deg; scale: 0.96; } to { rotate: 7deg; scale: 1.04; } }
@keyframes nota-cai { from { transform: translateY(-46%) rotate(calc(var(--giro, 0deg) - 28deg)); } to { transform: translateY(0) rotate(var(--giro, 0deg)); } }
@media (prefers-reduced-motion: reduce) { .nota { animation: none; translate: none; } }

/* Abertura --------------------------------------------------------------- */
.abertura__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--space-2xl); align-items: start; }
.abertura__texto { display: grid; gap: var(--space-lg); justify-items: start; }
.abertura__gancho { font-size: var(--text-gancho); font-weight: 500; line-height: 1.28; max-width: 32ch; text-wrap: pretty; }
.conceito { display: grid; gap: var(--space-sm); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-caixa); background-color: var(--color-laranja); background-image: var(--papel); background-size: 820px 820px; background-blend-mode: multiply; color: var(--color-marinho); box-shadow: var(--sombra-folha); }
.conceito__titulo { font-size: var(--text-title); font-weight: 950; line-height: 1.05; text-transform: uppercase; }
.conceito p + .conceito__titulo { margin-top: var(--space-md); }

/* Quanto custa? ---------------------------------------------------------- */
.custa { overflow: clip; }
.custa__foto { position: absolute; inset: 0 0 auto auto; width: 70%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 0; -webkit-mask-image: linear-gradient(to left, var(--mascara) 40%, transparent); mask-image: linear-gradient(to left, var(--mascara) 40%, transparent); pointer-events: none; }
.custa__titulo { font-size: var(--text-section-longo); max-width: 21ch; }
.custa__corpo { position: relative; z-index: var(--z-base); display: grid; gap: var(--space-lg); }
.custa__corpo .lead { max-width: 50ch; }
.custa__base { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); align-items: start; margin-top: var(--space-sm); }
.custa__anos { display: grid; gap: var(--space-sm); }
.tira { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); width: var(--w); padding: var(--space-xs) var(--space-md); background-color: var(--cor-tira); background-image: var(--papel); background-size: 820px 820px; background-blend-mode: multiply; color: var(--color-marinho); font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1.1; text-transform: uppercase; white-space: nowrap; box-shadow: var(--sombra-fita); }
.tira--2024 { --cor-tira: var(--color-fita); }
.tira--2025 { --cor-tira: var(--color-laranja); }
.custa__total { font-family: var(--font-display); font-size: var(--text-display); font-weight: 950; line-height: 1.04; text-transform: uppercase; overflow-wrap: break-word; min-width: 0; }
.custa__numero { display: inline-block; text-align: right; }
.custa__total .relevo { padding-right: var(--space-sm); padding-bottom: var(--space-xs); }
.custa .nota { position: absolute; pointer-events: none; }
.custa .nota--1 { right: 7%; top: 6%; width: clamp(84px, 12vw, 200px); --giro: 14deg; --i: 0; }
.custa .nota--2 { right: 32%; top: 13%; width: clamp(84px, 8.5vw, 140px); --giro: -16deg; --i: 1; }
.custa .nota--3 { right: 4%; bottom: 3%; width: clamp(84px, 9vw, 150px); --giro: 24deg; --i: 2; }

/* Barras ----------------------------------------------------------------- */
.barra { display: flex; gap: var(--space-3xs); width: 100%; height: 28px; }
.barra__seg { flex: var(--v) 0 0; min-width: 2px; }
.seg--fossil { background: var(--color-fossil); }
.seg--renovavel { background: var(--color-renovavel); }
.seg--tarifa { background: var(--color-tarifa); }
.seg--renuncia { background: var(--color-renuncia); }
.seg--orcamento { background: var(--color-orcamento); }
.js .barra[data-revela], .js .minibarra[data-revela] { clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-barra) var(--ease-out); }
.js .barra[data-revela].is-in, .js .minibarra[data-revela].is-in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .js .barra[data-revela], .js .minibarra[data-revela] { clip-path: none; transition: none; } }
.amostra { flex: none; display: inline-block; width: 14px; height: 14px; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); }
.legenda__item { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legenda--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs) var(--space-md); }
.legenda--3 .legenda__item { align-items: flex-start; }
.legenda--3 .amostra { margin-top: var(--space-2xs); }
.legenda__valor { display: block; font-weight: 700; }

/* Quem recebe? ----------------------------------------------------------- */
.recebe__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md) var(--space-xl); }
html:not(.js) .recebe__controle { display: none; }
.grafico { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.grafico__linha { display: grid; gap: var(--space-sm); }
.grafico__nome { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-lg); font-weight: 700; }
.grafico__trilho { position: relative; container-type: inline-size; height: clamp(80px, 8vw, 112px); }
.grafico__barra { position: absolute; inset: 0; background-color: var(--cor); background-image: var(--papel); background-size: 820px 820px; background-blend-mode: multiply; box-shadow: var(--sombra-fita); transform-origin: left center; transform: scaleX(calc(var(--v) / 100)); transition: transform var(--dur-barra) var(--ease-out); }
.grafico__valor, .grafico__parte { position: absolute; top: 50%; margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3.8cqw, 2.75rem); font-weight: 950; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.grafico__valor { left: var(--space-lg); transform: translateY(-50%); color: var(--color-creme); }
.grafico__parte { left: 0; transform: translate(calc(var(--v) * 1cqw + var(--space-md)), -50%); color: var(--color-marinho); transition: transform var(--dur-barra) var(--ease-out); }
.js .grafico:not(.is-in) .grafico__barra { transform: scaleX(0); }
.js .grafico:not(.is-in) .grafico__parte { transform: translate(var(--space-md), -50%); }
.linha--renovavel .grafico__barra, .linha--renovavel .grafico__parte { transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .grafico__barra, .grafico__parte { transition: none; } }
.grafico__textos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-2xl); }
.grafico__total { font-weight: 700; }
.grafico__total > span[aria-hidden="true"] { display: block; margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: 3px solid var(--color-marinho); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 950; line-height: 1.05; text-transform: uppercase; color: var(--color-marinho); }

/* Fatura ----------------------------------------------------------------- */
.fatura { margin-top: var(--space-2xl); padding: var(--space-xl) clamp(var(--space-md), 3vw, var(--space-xl)) var(--space-lg); }
.fatura__tabela { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.fatura__tabela caption { caption-side: top; text-align: left; margin-top: calc(-1 * (var(--space-xl) + var(--space-md))); margin-bottom: var(--space-lg); }
.fatura__cabeca { padding-block: var(--space-xs); border-bottom: 2px solid var(--color-marinho); font-size: var(--text-sm); font-weight: 700; text-align: left; }
.fatura__linha > * { padding-block: var(--space-sm); border-bottom: var(--rule-hair) dashed var(--color-rule); text-align: left; font-weight: 400; vertical-align: top; }
.fatura__nome { font-weight: 500; padding-right: var(--space-lg); }
.fatura__rotulo { display: block; }
.minibarra { display: block; height: 6px; margin-top: var(--space-xs); background: transparent; }
.minibarra > span { display: block; height: 100%; transform: scaleX(var(--v)); transform-origin: left center; background: var(--cor, var(--color-marinho)); }
.linha--fossil { --cor: var(--color-fossil); }
.linha--renovavel { --cor: var(--color-renovavel); }
.tag { display: inline-block; padding: 0 var(--space-xs); background: var(--cor); color: var(--color-creme); font-size: var(--text-sm); font-weight: 500; line-height: 1.6; white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fatura__cabeca.num { text-align: right; }
.fatura__linha > .num { text-align: right; font-weight: 700; }
.fatura__outros a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-underline-offset: 0.2em; }
.fatura__outros a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .fatura__outros a:hover { color: var(--color-queimado-escuro); } }
.fatura__total > * { padding-top: var(--space-sm); padding-bottom: var(--space-2xs); border-top: 3px solid var(--color-marinho); font-family: var(--font-display); font-weight: 950; font-size: var(--text-3xl); line-height: 1.05; text-transform: uppercase; text-align: left; }
.fatura__total > .num { text-align: right; }
.fatura__nota { margin-top: var(--space-sm); }

/* Quem paga essa conta? -------------------------------------------------- */
.paga { overflow: clip; }
.paga > .container { position: relative; }
.paga .nota { position: absolute; pointer-events: none; }
.paga .nota--1 { right: 9%; top: 4%; width: clamp(84px, 10vw, 170px); --giro: -12deg; --i: 0; }
.paga .nota--2 { right: 26%; top: 13%; width: clamp(84px, 9vw, 150px); --giro: 18deg; --i: 1; }
.paga .nota--3 { right: 3%; top: 15%; width: clamp(84px, 8vw, 130px); --giro: 30deg; --i: 2; }
.paga__cabeca { display: grid; gap: var(--space-lg); }
.paga__titulo { font-size: clamp(3.5rem, 9.2vw, 9rem); line-height: 1.04; }
.paga__titulo .relevo { padding-right: var(--space-xs); padding-bottom: var(--space-xs); }
.pesos { margin-top: var(--space-2xl); padding: var(--space-xl) clamp(var(--space-md), 3vw, var(--space-xl)) var(--space-xl); }
.pesos__rotulo { margin-top: calc(-1 * (var(--space-xl) + var(--space-md))); margin-bottom: var(--space-lg); }
.peso { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-md) var(--space-xl); align-items: center; padding-block: var(--space-lg); }
.peso + .peso { border-top: var(--rule-hair) dashed var(--color-rule); }
.peso__numero { font-family: var(--font-display); font-weight: 950; font-size: clamp(4.5rem, 7.6vw, 7rem); line-height: 1; white-space: nowrap; }
.peso__corpo { display: grid; gap: var(--space-sm); }
.peso__alvo { font-weight: 500; font-size: var(--text-lead); line-height: 1.3; }
.paga__corpo { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-xl) var(--space-2xl); margin-top: var(--space-2xl); align-items: center; }
.paga__corpo a { color: var(--color-laranja); text-underline-offset: 0.2em; }
.paga__corpo a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .paga__corpo a:hover { color: var(--color-laranja-2); } }
.paga__corpo .texto { grid-column: 1; grid-row: 1; }
.paga__balanca { grid-column: 2; grid-row: 1; width: min(100%, 300px); height: auto; margin-inline: auto; }
.destaque { margin-top: var(--space-2xl); padding: var(--space-xl) clamp(var(--space-md), 4vw, var(--space-2xl)); background-color: var(--color-laranja); background-image: var(--papel); background-size: 820px 820px; background-blend-mode: multiply; color: var(--color-marinho); font-size: var(--text-frase); box-shadow: var(--sombra-folha); text-wrap: pretty; }

/* Como pode ser reformado? ----------------------------------------------- */
.reforma { overflow: clip; }
.reforma__mao { position: absolute; top: -2%; right: 0; width: clamp(220px, 27vw, 430px); transform-origin: 100% 0; pointer-events: none; will-change: transform; }
.reforma__mao img { width: 100%; height: auto; transform: scaleX(-1); }
.reforma__grade { position: relative; align-items: start; }
.reforma__esquerda { display: grid; gap: var(--space-lg); }
.reforma__direita { padding-top: clamp(var(--space-xl), 19vw, 300px); }
.reforma__direita .fita { font-size: var(--text-2xl); padding: var(--space-sm) var(--space-lg); }
.lista-conta { counter-reset: prioridade; margin: var(--space-md) 0 0; padding: var(--space-xs) var(--space-lg); list-style: none; background-color: var(--color-papel-claro); background-image: var(--papel); background-size: 820px 820px; background-blend-mode: multiply; border: 3px solid var(--color-marinho); box-shadow: 8px 8px 0 var(--color-queimado-escuro); }
.lista-conta li { counter-increment: prioridade; position: relative; padding: var(--space-md) 0 var(--space-md) calc(var(--space-xl) + var(--space-md)); font-size: var(--text-lead); font-weight: 700; line-height: 1.35; border-bottom: 2px solid color-mix(in oklab, var(--color-marinho) 28%, transparent); }
.lista-conta li:last-child { border-bottom: 0; }
.lista-conta li::before { content: counter(prioridade); position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: var(--space-xl); height: var(--space-xl); border-radius: 50%; background: var(--color-queimado-escuro); color: var(--color-branco); font-size: var(--text-lg); font-weight: 700; line-height: 1; }

/* COP31 ------------------------------------------------------------------ */
.cop { position: relative; overflow: clip; padding-block: var(--space-4xl); background-color: var(--color-carvao); color: var(--color-creme); --color-focus: var(--color-laranja); --color-muted: var(--color-letra); }
.cop__foto { position: absolute; top: 0; right: 0; width: 62%; height: 100%; max-width: none; object-fit: cover; object-position: 23% 50%; -webkit-mask-image: linear-gradient(to right, transparent, color-mix(in srgb, var(--mascara) 12%, transparent) 8%, color-mix(in srgb, var(--mascara) 38%, transparent) 17%, color-mix(in srgb, var(--mascara) 72%, transparent) 27%, var(--mascara) 40%); mask-image: linear-gradient(to right, transparent, color-mix(in srgb, var(--mascara) 12%, transparent) 8%, color-mix(in srgb, var(--mascara) 38%, transparent) 17%, color-mix(in srgb, var(--mascara) 72%, transparent) 27%, var(--mascara) 40%); pointer-events: none; }
.cop__corpo { position: relative; display: grid; justify-items: start; gap: var(--space-lg); }
.cop__cabeca { display: grid; grid-template-columns: auto minmax(0, auto); gap: var(--space-lg) var(--space-xl); align-items: center; }
.cop__relogio { width: clamp(170px, 16vw, 240px); height: auto; transform: rotate(8deg); }
.cop__quebra { display: none; }
.cop__mensagem { max-width: 28em; font-size: var(--text-xl); font-weight: 500; line-height: 1.45; text-wrap: pretty; }
.cop__mensagem strong { font-weight: 700; color: var(--color-laranja-2); }
.cop__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xs); }
.botao--contorno { gap: var(--space-xs); background-color: color-mix(in srgb, var(--color-carvao) 62%, transparent); color: var(--color-creme); box-shadow: inset 0 0 0 2px currentColor; transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.botao--contorno svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
@media (hover: hover) { .botao--contorno:hover { background-color: color-mix(in srgb, var(--color-carvao) 62%, transparent); color: var(--color-laranja); } }
.botao--contorno:active { transform: translate(1px, 1px); box-shadow: inset 0 0 0 2px currentColor; }

/* Quadro ----------------------------------------------------------------- */
.quadro__lead { margin-top: var(--space-md); }
.quadro { margin-top: var(--space-xl); }
.quadro__abas { display: flex; gap: var(--space-2xs); overflow-x: auto; scrollbar-width: none; padding-top: var(--space-2xs); overscroll-behavior-x: contain; }
.quadro__abas::-webkit-scrollbar { display: none; }
html:not(.js) .quadro__abas { display: none; }
.aba { flex: none; min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-card); background-color: var(--color-kraft-2); background-image: var(--papel); background-size: 820px 820px; background-blend-mode: multiply; color: var(--color-marinho); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1; text-transform: uppercase; white-space: nowrap; cursor: pointer; clip-path: polygon(var(--space-xs) 0, calc(100% - var(--space-xs)) 0, 100% 100%, 0 100%); transition: background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .aba[aria-selected="false"]:hover { background-color: var(--color-kraft); } }
.aba[aria-selected="true"] { background-color: var(--color-creme); }
.aba:focus-visible { outline: 3px solid var(--color-queimado-escuro); outline-offset: -5px; }
.quadro__painel { display: grid; gap: var(--space-lg); padding: var(--space-xl) clamp(var(--space-md), 3vw, var(--space-xl)); }
.quadro__painel:focus-visible { outline: 3px solid var(--color-laranja); outline-offset: 3px; }
html:not(.js) .quadro__painel + .quadro__painel { margin-top: var(--space-md); }
.js .quadro__painel:not([hidden]) { animation: painel-entra var(--dur-short) var(--ease-out) both; }
@keyframes painel-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .quadro__painel:not([hidden]) { animation: none; } }
.painel__titulo { font-size: var(--text-title); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.painel__sub { font-size: var(--text-md); color: var(--color-muted); }
.folha thead th { font-size: var(--text-md); }
.painel__duplas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); align-items: start; }
.painel__h4 { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.comparo { display: grid; gap: var(--space-sm); }
.comparo__ano { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 6.5rem; gap: var(--space-sm); align-items: center; font-weight: 500; }
.comparo__trilho { display: block; }
.comparo__fim { text-align: right; font-weight: 700; }
.tabela-simples { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.tabela-simples th, .tabela-simples td { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: var(--rule-hair) dashed var(--color-rule); text-align: left; font-weight: 400; }
.tabela-simples thead th { border-bottom: 2px solid var(--color-marinho); font-size: var(--text-sm); font-weight: 700; }
.tabela-simples .num { text-align: right; padding-right: 0; padding-left: var(--space-sm); }
.tabela-simples .total > * { font-weight: 700; }
.tabela-simples tbody tr:last-child > * { border-bottom: 2px solid var(--color-marinho); }
.rolagem { overflow-x: auto; }
.rolagem:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ranking { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.ranking__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 var(--space-sm); align-items: baseline; font-size: var(--text-sm); }
.ranking__nome { font-weight: 500; }
.ranking__valor { font-weight: 700; white-space: nowrap; }
.ranking__parte { width: 3.75rem; text-align: right; white-space: nowrap; color: var(--color-muted); }
.ranking__linha .minibarra { grid-column: 1 / -1; margin-top: var(--space-2xs); }
.grupo-pago { display: grid; gap: var(--space-xs); padding-block: var(--space-sm); border-top: 2px solid var(--color-marinho); }
.grupo-pago__cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xs); align-items: baseline; font-weight: 700; }
.grupo-pago__cabeca .amostra { align-self: center; }
.grupo-pago__lista { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.grupo-pago__lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); padding-block: var(--space-2xs); border-top: var(--rule-hair) dashed var(--color-rule); }

/* Filtros dos 27 subsídios ----------------------------------------------- */
html:not(.js) .filtros, html:not(.js) .filtros__resumo { display: none; }
.filtros { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: flex-end; }
.seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend, .campo--busca label { padding: 0; margin-bottom: var(--space-2xs); font-size: var(--text-md); font-weight: 700; }
.seg__opcoes { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); background: var(--color-creme); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .seg input:not(:checked) + label:hover { background: var(--color-creme-2); } }
.seg input:checked + label { background: var(--color-marinho); border-color: var(--color-marinho); color: var(--color-creme); }
.seg input:focus-visible + label { outline: 3px solid var(--color-queimado-escuro); outline-offset: 2px; }
.campo { display: grid; gap: var(--space-2xs); min-width: 0; }
.campo label { font-size: var(--text-sm); font-weight: 700; }
.campo input { width: 100%; min-height: 50px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-creme); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; transition: background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .campo input:hover { background: var(--color-creme-2); } }
.campo input:focus-visible { outline-color: var(--color-queimado-escuro); }
.campo input:disabled { opacity: 0.55; cursor: not-allowed; }
.campo input[aria-invalid="true"] { border-color: var(--color-error); }
.campo--busca { flex: 1 1 14rem; }
.campo--busca input { min-height: 44px; }
.campo__ajuda { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.campo__ajuda.is-erro { color: var(--color-error); font-weight: 500; }
.filtros__resumo { margin: var(--space-sm) 0; padding: var(--space-sm) var(--space-lg); border-left: 6px solid var(--color-queimado-escuro); background-color: var(--color-papel-claro); font-size: var(--text-lead); font-weight: 500; }
.filtros__resumo strong { font-family: var(--font-display); font-size: 1.9em; font-weight: 950; line-height: 1; color: var(--color-queimado-escuro); white-space: nowrap; }
.filtros__resumo:empty { display: none; }
.tabela-27 { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tabela-27 thead th { height: 44px; padding: 0 var(--space-sm) 0 0; border-bottom: 2px solid var(--color-marinho); font-weight: 700; text-align: left; vertical-align: middle; white-space: nowrap; }
.t27__c-pago, .t27__c-mod { white-space: nowrap; }
.tabela-27 thead th.num { text-align: right; padding-right: 0; padding-left: var(--space-sm); }
.tabela-27 tbody > tr > * { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) dashed var(--color-rule); text-align: left; font-weight: 400; vertical-align: top; }
.tabela-27 tbody > tr > .num { text-align: right; padding-right: 0; padding-left: var(--space-sm); }
.tabela-27 td.t27__v25, .tabela-27[data-ano="2024"] td.t27__v24 { font-weight: 700; }
/* Com um ano escolhido, a tabela mostra só aquele ano; a variação fica em "Todos" */
.tabela-27[data-ano="2024"] .t27__v25, .tabela-27[data-ano="2024"] .t27__var, .tabela-27[data-ano="2025"] .t27__v24, .tabela-27[data-ano="2025"] .t27__var { display: none; }
.t27__nome { display: block; font-size: var(--text-md); font-weight: 700; line-height: 1.3; }
.t27__desc { display: block; margin-top: var(--space-2xs); max-width: 52ch; color: var(--color-muted); line-height: 1.35; }
.ordena { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.ordena::after { content: ""; width: 0; height: 0; border-inline: 6px solid transparent; border-top: 7px solid var(--color-muted); }
th[aria-sort="ascending"] .ordena::after { border-top: 0; border-bottom: 7px solid var(--color-marinho); }
th[aria-sort="descending"] .ordena::after { border-top-color: var(--color-marinho); }
.ordena:focus-visible { outline: 2px solid var(--color-queimado-escuro); outline-offset: 2px; }
@media (hover: hover) { .ordena:hover { color: var(--color-queimado-escuro); } }
.vazio { display: grid; gap: var(--space-sm); justify-items: start; padding-block: var(--space-lg); }
.limpar { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-marinho); border-radius: var(--radius-card); background: transparent; color: var(--color-marinho); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .limpar:hover { background: var(--color-creme-2); } }
.limpar:focus-visible { outline: 2px solid var(--color-queimado-escuro); outline-offset: 2px; }
.quadro__metodo { margin-top: var(--space-xl); max-width: 72ch; font-size: var(--text-sm); color: var(--color-letra); }

/* Canhoto ---------------------------------------------------------------- */
.canhoto-fundo { padding-top: var(--space-md); }
.canhoto { --furo: 9px; padding-block: var(--space-3xl) var(--section-gap-s); -webkit-mask: radial-gradient(circle var(--furo) at 50% 0, transparent 97%, var(--mascara)) 0 0 / 32px 100% repeat-x; mask: radial-gradient(circle var(--furo) at 50% 0, transparent 97%, var(--mascara)) 0 0 / 32px 100% repeat-x; }
.canhoto__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-2xl); align-items: start; }
.canhoto__esquerda { display: grid; gap: var(--space-lg); }
.canhoto__obra { font-size: var(--text-lead); line-height: 1.4; font-weight: 500; max-width: 40ch; }
.formulario { display: grid; gap: var(--space-xs); justify-items: start; }
.formulario__pe { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); width: 100%; }
.formulario__aviso { max-width: 62ch; font-size: var(--text-sm); color: var(--color-muted); }
.formulario__aviso a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.formulario__aviso a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .formulario__aviso a:hover { color: var(--color-ink); } }
.canhoto__pasta { flex: none; width: clamp(150px, 16vw, 230px); height: auto; margin-top: calc(-1 * var(--space-md)); }
.caixas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-top: var(--rule-hair) solid var(--color-marinho); border-left: var(--rule-hair) solid var(--color-marinho); }
.caixa { display: grid; gap: var(--space-3xs); align-content: start; padding: var(--space-xs) var(--space-sm) var(--space-2xs); border-right: var(--rule-hair) solid var(--color-marinho); border-bottom: var(--rule-hair) solid var(--color-marinho); transition: background-color var(--dur-short) var(--ease-out); }
.caixa--inteira { grid-column: 1 / -1; }
.caixa label { font-size: var(--text-sm); font-weight: 700; }
.caixa input { width: 100%; min-height: 44px; padding: 0 var(--space-2xs); border: 0; border-radius: var(--radius-card); background: transparent; color: var(--color-ink); outline: 2px solid transparent; outline-offset: -1px; }
.caixa input::placeholder { color: var(--color-muted); opacity: 1; }
.caixa input:focus-visible { outline-color: var(--color-queimado-escuro); }
.caixa input:disabled { opacity: 0.55; cursor: not-allowed; }
.caixa:focus-within { background: var(--color-creme); }
@media (hover: hover) { .caixa:hover { background: var(--color-creme); } }
.caixa:has(input[aria-invalid="true"]) { background: var(--color-creme); box-shadow: inset 0 0 0 2px var(--color-error); }

/* Rodapé ------------------------------------------------------------------ */
.rodape { padding-block: var(--section-gap-s) var(--space-2xl); font-size: var(--text-sm); }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl) var(--space-2xl); align-items: end; }
.rodape__nome { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 950; line-height: 1; text-transform: uppercase; color: var(--color-branco); }
.rodape address { margin-top: var(--space-sm); font-style: normal; line-height: 1.7; color: var(--color-letra); }
.rodape ul { margin: 0; padding: 0; list-style: none; }
.rodape li a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; text-underline-offset: 0.2em; }
.rodape a { color: var(--color-creme); }
.rodape address a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .rodape a:hover { color: var(--color-laranja); } }
.rodape__redes ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.rodape__redes svg { flex: none; width: 20px; height: 20px; fill: currentColor; }

/* Até 60rem: uma coluna ---------------------------------------------------- */
@media (max-width: 60rem) {
  .bloco { padding-block: var(--space-3xl); }
  .grade-2, .abertura__grade, .canhoto__grade { grid-template-columns: minmax(0, 1fr); }
  .custa__base { grid-template-columns: minmax(0, 1fr); }
  .grafico__trilho { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); align-items: baseline; height: auto; }
  .grafico__valor, .grafico__parte { position: static; font-size: clamp(1.5rem, 6.4cqw, 2.25rem); transform: none; color: var(--color-marinho); }
  .js .grafico:not(.is-in) .grafico__parte { transform: none; }
  .grafico__barra { position: relative; display: block; inset: auto; order: 3; grid-column: 1 / -1; height: 36px; }
  .grafico__textos { grid-template-columns: minmax(0, 1fr); }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
  .peso { grid-template-columns: minmax(0, 1fr); }
  .painel__duplas { grid-template-columns: minmax(0, 1fr); }
  .reforma__direita { padding-top: 0; }
  .reforma__mao { width: clamp(180px, 34vw, 280px); top: -1%; }
  .reforma__esquerda .titulo { max-width: 72%; }
  .cop { padding-block: var(--space-3xl); }
  .custa__titulo { max-width: none; }
}

/* Capa no celular: mesma composição do guia, na vertical ------------------- */
@media (max-width: 44rem) {
  .capa__palco { aspect-ratio: 1400 / 2240; }
  .capa .nota { display: none; } /* a arte do celular (versão de 10/11) já traz as notas de dinheiro */
  .caixas { grid-template-columns: minmax(0, 1fr); }
  .canhoto__pasta { display: none; }
  .paga__corpo { display: block; }
  .paga__balanca { position: relative; z-index: var(--z-base); display: block; width: clamp(112px, 32vw, 150px); margin: var(--space-md) var(--space-md) calc(-1 * (var(--space-2xl) + var(--space-sm))) auto; }
  .cop { padding-bottom: 0; }
  .cop__corpo { padding-bottom: 32vw; }
  .cop__mensagem { text-shadow: 0 0 10px var(--color-carvao), 0 0 3px var(--color-carvao); }
  .cop__cabeca { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); width: 100%; }
  .cop__relogio { width: 100%; max-width: 130px; justify-self: end; }
  .cop__foto { top: auto; bottom: -20vw; width: 100%; height: 118vw; object-position: 46% 100%; -webkit-mask-image: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--mascara) 40%, transparent) 22%, color-mix(in srgb, var(--mascara) 78%, transparent) 52%, var(--mascara) 78%); mask-image: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--mascara) 40%, transparent) 22%, color-mix(in srgb, var(--mascara) 78%, transparent) 52%, var(--mascara) 78%); }
  .cop__titulo { font-size: clamp(2.5rem, 12.4vw, 3rem); }
  .cop__quebra { display: inline; }
  .cop__acoes { width: 100%; }
  .cop .botao { width: 100%; font-size: clamp(0.9375rem, 4.9vw, 1.25rem); padding-inline: var(--space-md); }
  .custa__foto { width: 100%; height: 46%; object-position: 62% 0; -webkit-mask-image: linear-gradient(to top, transparent, var(--mascara) 55%); mask-image: linear-gradient(to top, transparent, var(--mascara) 55%); }
  .rodape { padding-top: var(--space-3xl); }
  .rodape__redes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulario .botao { width: 100%; }
  .topo__linha { min-height: 60px; }
  .quadro__abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .aba { padding: 0 var(--space-xs); font-size: var(--text-lg); clip-path: none; }
  .legenda--3 { grid-template-columns: minmax(0, 1fr); }
  .legenda--3 .legenda__item > span:last-child { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); }
  .topo__logo svg { width: 60px; height: 40px; }
  .custa__total { font-size: 25vw; line-height: 1.02; }
  .custa .nota--1 { right: 4%; top: var(--space-md); width: 84px; }
  .custa .nota--2 { display: none; }
  .reforma__direita .fita { font-size: var(--text-xl); padding: var(--space-xs) var(--space-md); }
  .lista-conta { padding-inline: var(--space-md); box-shadow: 6px 6px 0 var(--color-queimado-escuro); }
  .lista-conta li { padding-left: calc(var(--space-xl) + var(--space-sm)); }
  .filtros__resumo { padding-inline: var(--space-md); }
  .filtros__resumo strong { font-size: 1.5em; }
  .paga .nota--1 { right: 3%; top: var(--space-2xl); width: 72px; }
  .paga .nota--2 { display: none; }
  .paga .nota--3 { right: 30%; top: var(--space-xl); width: 58px; }
  .custa .nota--3 { right: 3%; bottom: var(--space-xs); width: 88px; }

  .tabela-simples, .tabela-simples tbody { display: block; }
  .tabela-simples thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela-simples tbody tr { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--space-2xs) var(--space-xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) dashed var(--color-rule); }
  .tabela-simples tbody tr:last-child { border-bottom: 2px solid var(--color-marinho); }
  .tabela-simples tbody tr > * { padding: 0; border: 0; }
  .tabela-simples tbody tr:last-child > * { border: 0; }
  .tabela-simples tbody th { grid-column: 1 / -1; }
  .tabela-simples tbody .num { text-align: left; padding-left: 0; font-size: var(--text-sm); }
  .tabela-simples tbody .num::before { content: attr(data-rotulo); display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }

  /* tabelas viram linhas empilhadas */
  .fatura__cabecalho { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fatura__tabela, .fatura__tabela tbody, .fatura__tabela tfoot { display: block; }
  .fatura__tabela caption { display: block; }
  .fatura__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); padding-block: var(--space-sm); border-bottom: var(--rule-hair) dashed var(--color-rule); }
  .fatura__linha > * { padding: 0; border: 0; }
  .fatura__nome { grid-column: 1 / -1; padding-right: 0; }
  .fatura__fonte { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); align-items: center; }
  .fatura__pago { grid-column: 1; grid-row: 3; font-size: var(--text-sm); }
  .fatura__linha > .num { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .fatura__outros { grid-template-columns: minmax(0, 1fr) auto; }
  .fatura__outros .fatura__nome { grid-column: 1; }
  .fatura__outros > .num { grid-row: 1; grid-column: 2; }
  .fatura__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding-top: var(--space-sm); border-top: 3px solid var(--color-marinho); }
  .fatura__total > * { padding: 0; border: 0; font-size: var(--text-2xl); }

  .grupo-pago__cabeca { grid-template-columns: auto minmax(0, 1fr); }
  .grupo-pago__cabeca .num { grid-column: 2; text-align: left; }

  .tabela-27, .tabela-27 tbody { display: block; }
  .tabela-27 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela-27 tbody > tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) dashed var(--color-rule); }
  .tabela-27 tbody > tr > * { padding: 0; border: 0; }
  .tabela-27 tbody > tr > .t27__c-nome { grid-column: 1 / -1; }
  .tabela-27 tbody > tr > .t27__c-fonte { grid-column: 1 / -1; }
  .tabela-27 tbody > tr > .t27__c-pago { grid-column: 1 / span 2; }
  .tabela-27 tbody > tr > .t27__c-mod { grid-column: 3; }
  .tabela-27 tbody > tr > .num { text-align: left; padding-left: 0; }
  .tabela-27 .num::before { content: attr(data-rotulo); display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
  .comparo__ano { grid-template-columns: 3rem minmax(0, 1fr); }
  .comparo__fim { grid-column: 2; text-align: left; }
}