/* Boa Achada · componentes. Gerado por scripts/marca.mjs; as cores vêm de cores.css (nenhum hex aqui).
   Fontes: IBM Plex Mono e IBM Plex Sans Condensed (licença OFL, em ./fontes). */
@import url('cores.css');
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: block; src: url('fontes/web/ibm-plex-mono-400.woff2') format('woff2'), url('fontes/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: block; src: url('fontes/web/ibm-plex-mono-600.woff2') format('woff2'), url('fontes/IBMPlexMono-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-weight: 600; font-display: block; src: url('fontes/web/ibm-plex-sans-condensed-600.woff2') format('woff2'), url('fontes/IBMPlexSansCondensed-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-weight: 700; font-display: block; src: url('fontes/web/ibm-plex-sans-condensed-700.woff2') format('woff2'), url('fontes/IBMPlexSansCondensed-Bold.ttf') format('truetype'); }

:root {
  --f-mono: 'IBM Plex Mono', 'Courier New', Consolas, ui-monospace, monospace;
  --f-cond: 'IBM Plex Sans Condensed', 'Arial Narrow', 'Liberation Sans Narrow', Arial, sans-serif;
  --raio: 6px;
  --linha: 2px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--fundo); color: var(--texto); font-family: var(--f-mono); font-size: 16px; line-height: 1.6; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:focus-visible, .botao:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.secundario { color: var(--texto-2); }
.alerta { color: var(--alerta); font-weight: 600; }

/* Hierarquia de letras. ig-* para a peça de 1080 px; t-* para a tela (celular, e computador a partir de 720 px). */
.ig-impacto { font-family: var(--f-cond); font-weight: 700; font-size: 240px; line-height: 0.9; letter-spacing: -0.01em; }
.ig-titulo { font-family: var(--f-cond); font-weight: 600; font-size: 88px; line-height: 1.05; letter-spacing: -0.005em; }
.ig-subtitulo { font-family: var(--f-mono); font-weight: 600; font-size: 44px; line-height: 1.25; letter-spacing: 0; }
.ig-texto { font-family: var(--f-mono); font-weight: 400; font-size: 36px; line-height: 1.4; letter-spacing: 0; }
.ig-legenda { font-family: var(--f-mono); font-weight: 400; font-size: 28px; line-height: 1.4; letter-spacing: 0.01em; }
.ig-impacto-story { font-family: var(--f-cond); font-weight: 700; font-size: 200px; line-height: 0.9; letter-spacing: -0.01em; }
.ig-impacto-foto { font-family: var(--f-cond); font-weight: 700; font-size: 168px; line-height: 0.9; letter-spacing: -0.01em; }
.t-impacto { font-family: var(--f-cond); font-weight: 700; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em; }
.t-titulo { font-family: var(--f-cond); font-weight: 600; font-size: 34px; line-height: 1.05; letter-spacing: -0.005em; }
.t-subtitulo { font-family: var(--f-mono); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: 0; }
.t-texto { font-family: var(--f-mono); font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: 0; }
.t-legenda { font-family: var(--f-mono); font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: 0.01em; }
@media (min-width: 720px) {
  .t-impacto { font-size: 104px; }
  .t-titulo { font-size: 44px; }
  .t-subtitulo { font-size: 24px; }
  .t-texto { font-size: 18px; }
}
.ig-rotulo, .t-rotulo { font-family: var(--f-mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2; }
.ig-rotulo { font-size: 30px; }
.t-rotulo { font-size: 14px; }

/* Botão: tinta no papel (e papel na tinta, pelos papéis). Canal: cor do nicho com texto de papel. */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 48px; padding: 0 1.5rem; font-family: var(--f-mono); font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none; background: var(--texto); color: var(--fundo); border: var(--linha) solid var(--texto); border-radius: var(--raio); cursor: pointer; }
.botao:hover { background: var(--fundo); color: var(--texto); }
.botao-secundario { background: transparent; color: var(--texto); }
.botao-secundario:hover { background: var(--texto); color: var(--fundo); }
.botao-canal { background: var(--nicho); color: var(--papel); border-color: var(--nicho); }
.botao-canal:hover { background: var(--papel); color: var(--nicho); border-color: var(--nicho); }
[data-tema="escuro"] .botao-canal { border-color: var(--papel); }
[data-tema="escuro"] .botao-canal:hover { background: var(--papel); color: var(--tinta); }
.botao svg { width: 20px; height: 20px; flex: none; }

/* Selo: etiqueta de canal. Texto de papel sobre a cor do nicho; no escuro ganha filete de papel (como o anel do avatar). */
.selo { display: inline-block; font-family: var(--f-mono); font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; background: var(--nicho); color: var(--papel); padding: 0.4em 0.8em; border-radius: 3px; border: 1.5px solid var(--nicho); }
[data-tema="escuro"] .selo { border-color: var(--papel); }
.selo-vazado { background: transparent; color: var(--texto); border-color: var(--texto); }
[data-tema="escuro"] .selo-vazado { border-color: var(--texto); }

/* Cartão: papel-2 com contorno, sem sombra. O recibo usa o picote para separar o rodapé. */
.cartao { background: var(--fundo-2); color: var(--texto); border: var(--linha) solid var(--texto); border-radius: var(--raio); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.cartao .t-titulo { margin: 0; }
.linha-recibo { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; line-height: 1.4; }
.linha-recibo dt { color: var(--texto-2); }
.linha-recibo dd { font-weight: 600; text-align: right; }
/* Cupom: ícone de cupom + código num bloco de borda tracejada (o recorte do cupom). Fundo limão e texto, ícone e borda na cor do canal (5,2 a 5,5): duas cores. O bloco de limão é o que dá o destaque (limão sobre azul parecia musgo e apagava). */
.cupom { display: inline-flex; align-items: center; gap: 0.5em; align-self: flex-start; font-family: var(--f-mono); font-weight: 600; font-size: 18px; line-height: 1; color: var(--nicho); background: var(--marca-texto); border: var(--linha) dashed var(--nicho); border-radius: var(--raio); padding: 0.5em 0.8em; }
.cupom svg { width: 1.5em; height: 1.5em; flex: none; }
.cupom small { font-weight: 400; font-size: 0.78em; color: var(--nicho); letter-spacing: 0.04em; }
.cupom b { letter-spacing: 0.08em; }
.picote { display: block; width: 100%; height: 24px; color: var(--texto); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2024%22%20width%3D%2216%22%20height%3D%2224%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222.6%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") repeat-x center / 16px 24px; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2024%22%20width%3D%2216%22%20height%3D%2224%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222.6%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") repeat-x center / 16px 24px; }
.picote-corte { display: block; width: 480px; max-width: 100%; height: 24px; background: currentColor; color: var(--texto); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%2024%22%20width%3D%22480%22%20height%3D%2224%22%3E%3Cg%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%202a10%2010%200%200%201%200%2020Z%22%2F%3E%3Cpath%20d%3D%22M480%202a10%2010%200%200%200%200%2020Z%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2294%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22126%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22142%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22158%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22174%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22222%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22238%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22254%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22270%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22286%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22302%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22334%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22366%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22382%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22398%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22414%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22430%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22446%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat left center / 480px 24px; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%2024%22%20width%3D%22480%22%20height%3D%2224%22%3E%3Cg%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%202a10%2010%200%200%201%200%2020Z%22%2F%3E%3Cpath%20d%3D%22M480%202a10%2010%200%200%200%200%2020Z%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2294%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22126%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22142%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22158%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22174%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22222%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22238%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22254%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22270%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22286%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22302%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22334%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22366%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22382%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22398%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22414%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22430%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22446%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat left center / 480px 24px; }

/* Título de seção: número em bloco, título condensado e picote até o fim da linha. */
.secao-titulo { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.secao-titulo .num { font-family: var(--f-mono); font-weight: 600; font-size: 14px; line-height: 1; background: var(--texto); color: var(--fundo); padding: 0.45em 0.6em; border-radius: 3px; }
.secao-titulo h2 { font-family: var(--f-cond); font-weight: 600; font-size: 34px; line-height: 1.05; letter-spacing: -0.005em; white-space: nowrap; }
.secao-titulo::after { content: ''; flex: 1; height: 24px; background: var(--texto-2); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2024%22%20width%3D%2216%22%20height%3D%2224%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222.6%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") repeat-x left center / 16px 24px; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2024%22%20width%3D%2216%22%20height%3D%2224%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222.6%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") repeat-x left center / 16px 24px; }

/* Destaque de número: o preço na cor do canal, a mesma da etiqueta (--nicho). Texto de papel (6,0 a 6,3). No escuro ganha filete de papel, como a etiqueta. Sem canal, vale a tinta. Tamanho vem do contexto (font-size). */
.numero { display: inline-block; font-family: var(--f-cond); font-weight: 700; line-height: 0.95; letter-spacing: -0.01em; background: var(--nicho); color: var(--papel); border: 0.035em solid var(--nicho); padding: 0 0.12em 0.04em; border-radius: 0.05em; font-variant-numeric: tabular-nums; }
.numero .moeda { font-family: var(--f-mono); font-weight: 600; font-size: 0.34em; letter-spacing: 0; margin-right: 0.3em; vertical-align: 0.9em; }
[data-tema="escuro"] .numero { border-color: var(--papel); }
.parcela { font-family: var(--f-mono); font-weight: 600; color: var(--texto); }
.parcela small { font-weight: 400; color: var(--texto-2); }
.numero-de { font-family: var(--f-mono); font-weight: 400; color: var(--texto-2); text-decoration: line-through; text-decoration-thickness: 2px; }

/* Texturas */
.marcas-claro { background-image: url('grafismos/marcas-tinta.svg'); }
.marcas-escuro { background-image: url('grafismos/marcas-papel.svg'); }
.icone { width: 1.5em; height: 1.5em; flex: none; }