/* =====================================================================
   COMPONENTES — Style Guide GENÉRICO
   Usa exclusivamente os tokens de tokens.css. Mobile-first, WCAG AA.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--texto);
  background: var(--bg);
}
img { max-width: 100%; display: block; }

/* ---- Tipografia ---- */
h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: var(--lh-apertada); margin: 0 0 var(--s-4); color: var(--neutro-900); }
h1 { font-size: var(--fs-40); font-weight: var(--peso-bold); }
h2 { font-size: var(--fs-32); font-weight: var(--peso-semi); }
h3 { font-size: var(--fs-24); font-weight: var(--peso-semi); }
h4 { font-size: var(--fs-20); font-weight: var(--peso-semi); }
p  { margin: 0 0 var(--s-4); color: var(--texto-suave); }
a  { color: var(--cor-info); }
small { font-size: var(--fs-14); color: var(--texto-suave); }

/* ---- Layout ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-4); }
.section { padding: var(--s-7) 0; border-top: 1px solid var(--borda); }
.section:first-of-type { border-top: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-12);
  font-weight: var(--peso-semi); color: var(--cor-primaria-escura); margin-bottom: var(--s-2); }
.grid { display: grid; gap: var(--s-4); }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---- Swatches de cor ---- */
.swatches { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-3); }
@media (min-width: 720px) { .swatches { grid-template-columns: repeat(4,1fr); } }
.swatch { border: 1px solid var(--borda); border-radius: var(--raio-md); overflow: hidden; background: var(--superficie); }
.swatch .chip { height: 64px; }
.swatch .meta { padding: var(--s-2) var(--s-3); font-size: var(--fs-12); }
.swatch .meta strong { display: block; color: var(--texto); }
.swatch .meta span { color: var(--texto-suave); }

/* ---- Botões ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5);
  font-family: var(--fonte-corpo); font-size: var(--fs-16); font-weight: var(--peso-semi);
  border: 1px solid transparent; border-radius: var(--raio-full); cursor: pointer;
  text-decoration: none;
  transition: transform var(--trans-rapida), box-shadow var(--trans-rapida), background-color var(--trans-rapida), filter var(--trans-rapida);
}
.btn:focus-visible { outline: none; box-shadow: var(--foco); }
.btn:hover { filter: brightness(.97); }
.btn--primario:hover, .btn--acao:hover, .btn--perigo:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--primario  { background: var(--cor-primaria); color: #fff; }
.btn--acao      { background: var(--cor-acao); color: #fff; }      /* DOAR */
.btn--perigo    { background: var(--cor-perigo); color: #fff; }    /* denúncia */
.btn--secundario{ background: transparent; color: var(--cor-primaria-escura); border-color: var(--cor-primaria); }
.btn--ghost     { background: transparent; color: var(--texto); border-color: var(--borda); }
.btn[disabled]  { opacity: .5; cursor: not-allowed; }
.btn--bloco { width: 100%; }

/* ---- Cards ---- */
.card { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-card); overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--trans-media), box-shadow var(--trans-media), border-color var(--trans-media); }
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); border-color: var(--cor-primaria-clara); }
.card .card__img { aspect-ratio: 16/10; background: var(--neutro-200) center/cover; transition: transform var(--trans-media); }
.card:hover .card__img { transform: scale(1.03); }
.card .card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card .card__title { font-family: var(--fonte-titulo); font-weight: var(--peso-semi); font-size: var(--fs-20); }
.preco { font-size: var(--fs-24); font-weight: var(--peso-bold); color: var(--cor-primaria-escura); }
.card__body .selo { align-self: flex-start; } /* selo abraça o conteúdo, sem esticar */

/* ---- Barra de progresso (campanha) ---- */
.progress { background: var(--neutro-200); border-radius: var(--raio-full); height: 12px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--cor-acao); border-radius: var(--raio-full); }
.progress-meta { display: flex; justify-content: space-between; font-size: var(--fs-14); }
.progress-meta strong { color: var(--cor-acao-escura); }

/* ---- Formulários ---- */
.field { margin-bottom: var(--s-4); }
.label { display: block; font-size: var(--fs-14); font-weight: var(--peso-semi); margin-bottom: var(--s-2); }
.input, .textarea, .select {
  width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3);
  font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--neutro-300); border-radius: var(--raio-md);
}
.textarea { min-height: 110px; padding: var(--s-3); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--cor-info); box-shadow: var(--foco); }
.field--erro .input, .field--erro .textarea { border-color: var(--cor-perigo); }
.erro-msg { color: var(--cor-perigo); font-size: var(--fs-14); margin-top: var(--s-1); }
.ajuda { color: var(--texto-suave); font-size: var(--fs-14); margin-top: var(--s-1); }

/* ---- Alertas ---- */
.alerta { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border-radius: var(--raio-md); border: 1px solid; font-size: var(--fs-14); margin-bottom: var(--s-3); }
.alerta--sucesso { background: #E9F6EE; border-color: #BFE4CD; color: #15613A; }
.alerta--aviso   { background: #FDF4DD; border-color: #F4E0A6; color: #8A6400; }
.alerta--erro    { background: #FBE9E9; border-color: #F1C2C2; color: #9A2C2C; }
.alerta--info    { background: #E6F1F1; border-color: #B8DBDB; color: #1D5C5C; }

/* ---- Selos / badges ---- */
.selo { display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3); border-radius: var(--raio-full);
  font-size: var(--fs-12); font-weight: var(--peso-semi); }
.selo--transp { background: var(--cor-info); color: #fff; }
.selo--pix    { background: #E9F6EE; color: #15613A; border: 1px solid #BFE4CD; }
.selo--urgente{ background: #FBE9E9; color: #9A2C2C; border: 1px solid #F1C2C2; }

/* ---- Bloco de confiança "para onde vai seu R$" ---- */
.confianca { background: var(--cor-primaria-clara); border: 1px solid #E9CF93;
  border-radius: var(--raio-lg); padding: var(--s-5); }
.confianca h4 { color: var(--neutro-900); }
.confianca ul { margin: 0; padding-left: var(--s-5); color: var(--neutro-700); }

/* ---- Banner de emergência da denúncia ---- */
.aviso-emergencia { display: flex; gap: var(--s-3); align-items: flex-start;
  background: #FBE9E9; border: 1px solid #F1C2C2; color: #9A2C2C;
  border-radius: var(--raio-md); padding: var(--s-4); margin-bottom: var(--s-4); }
.aviso-emergencia strong { display: block; }

/* ---- Header / footer do guia ---- */
.sg-head { background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
  color: #fff; padding: var(--s-7) 0; }
.sg-head h1 { color: #fff; margin-bottom: var(--s-2); }
.sg-head p { color: rgba(255,255,255,.9); margin: 0; }
.sg-badge { display: inline-block; background: rgba(255,255,255,.2); color:#fff;
  padding: var(--s-1) var(--s-3); border-radius: var(--raio-full); font-size: var(--fs-12); font-weight: var(--peso-semi); margin-bottom: var(--s-4); }
.sg-foot { padding: var(--s-6) 0; color: var(--texto-suave); font-size: var(--fs-14); text-align: center; }
.token-note { background: var(--neutro-100); border: 1px dashed var(--neutro-300);
  border-radius: var(--raio-md); padding: var(--s-3) var(--s-4); font-size: var(--fs-14); color: var(--texto-suave); }
.scale-list { display: flex; flex-direction: column; gap: var(--s-2); }
.scale-list > div { display: flex; align-items: baseline; gap: var(--s-4); }
.scale-list .tag { font-size: var(--fs-12); color: var(--texto-suave); min-width: 56px; }
.space-demo { background: var(--cor-primaria-clara); height: 16px; border-radius: var(--raio-sm); }

/* =====================================================================
   REFACTOR VISUAL — bandas, ícones SVG, decorativos, microinterações
   (aditivo; preserva todos os componentes acima)
   ===================================================================== */

a { transition: color var(--trans-rapida); }
a:hover { color: var(--cor-primaria-escura); }

/* Bandas full-width — ritmo de seções por alternância de fundo */
.band { padding: var(--s-9) 0; }
.band--alt   { background: var(--superficie-alt); }
.band--marca { background: linear-gradient(135deg, var(--cor-primaria-escura) 0%, #6E4621 100%); color: #fff; }
.band--marca h1, .band--marca h2, .band--marca h3, .band--marca h4 { color: #fff; }
.band--marca p { color: rgba(255,255,255,.92); }
.band--marca .eyebrow { color: var(--cor-primaria-clara); }

/* Cabeçalho de seção */
.section-head { max-width: var(--leitura); margin-bottom: var(--s-6); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: var(--s-2); }
.section-head p { margin: 0; }

/* Texto confortável de leitura */
.lead  { font-size: var(--fs-20); color: var(--neutro-700); max-width: var(--leitura); }
.prose { max-width: var(--leitura); }

/* Ícone em pílula (SVG consistente no lugar de emoji) */
.icone { display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--raio-md); flex: none;
  background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.icone svg { width: 26px; height: 26px; stroke: currentColor; }
.icone--acao   { background: #E7F6EE; color: var(--cor-acao-escura); }
.icone--perigo { background: #FBE9E9; color: #9A2C2C; }
.icone--mel    { background: #FBF1D8; color: #8A6400; }
.icone--branco { background: rgba(255,255,255,.18); color: #fff; }
.feature-icon { margin-bottom: var(--s-3); }

/* Pilares — faixa de confiança honesta (sem métricas inventadas) */
.pilares { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 720px) { .pilares { grid-template-columns: repeat(3, 1fr); } }
.pilar { display: flex; gap: var(--s-4); align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); padding: var(--s-5); box-shadow: var(--sombra-sm);
  transition: transform var(--trans-media), box-shadow var(--trans-media); }
.pilar:hover { transform: translateY(-2px); box-shadow: var(--sombra-card); }
.pilar .icone { width: 52px; height: 52px; }
.pilar .icone svg { width: 28px; height: 28px; }
.pilar h3 { font-size: var(--fs-20); margin: 0 0 var(--s-1); }
.pilar p  { margin: 0; font-size: var(--fs-14); }

/* Grid de 2 colunas (hero, blocos de prova) */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center; }
@media (min-width: 880px) { .grid-2 { grid-template-columns: 1.05fr .95fr; } }

/* Selos extra */
.selo--evento { background: var(--cor-mel); color: #4A3208; }
.meta-data { font-size: var(--fs-12); color: var(--texto-suave); font-weight: var(--peso-medio); }

/* Decorativos (blobs/formas) atrás do conteúdo, sem cobrir nada */
.tem-deco { position: relative; overflow: hidden; isolation: isolate; }
.deco { position: absolute; z-index: -1; pointer-events: none; }
.deco--suave { opacity: .5; }

/* Acessibilidade — respeitar redução de movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .card:hover, .btn:hover, .btn--primario:hover, .btn--acao:hover, .btn--perigo:hover, .pilar:hover { transform: none; }
  .card:hover .card__img { transform: none; }
}

/* =====================================================================
   REFACTOR v2 — polimento desktop (placeholders de marca, cards
   horizontais, Novidades em 2 colunas). Aditivo; preserva o acima.
   ===================================================================== */

/* Placeholder de imagem com a marca (quando o item ainda não tem foto) */
.card__img--ph { background: radial-gradient(120% 120% at 25% 20%, var(--cor-primaria-suave) 0%, var(--cor-primaria-clara) 72%, #E2CFA6 100%); display: grid; place-items: center; }
.card__img--ph svg { width: 46%; max-width: 92px; height: auto; color: var(--cor-primaria); opacity: .35; }
.card:hover .card__img--ph { transform: none; }

/* Card horizontal (imagem à esquerda) — preenche colunas largas sem ficar vazio */
@media (min-width: 560px) {
  .card--row { flex-direction: row; }
  .card--row .card__img { width: 40%; min-width: 40%; aspect-ratio: auto; align-self: stretch; min-height: 168px; }
  .card--row .card__body { flex: 1; }
}

/* Novidades — 2 colunas (blog + agenda) que preenchem a largura do desktop */
.novidades { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 880px) { .novidades--2 { grid-template-columns: 1fr 1fr; } }
.novidades__col { display: flex; flex-direction: column; gap: var(--s-4); }
.novidades__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-1); }
.novidades__head h3 { margin: 0; font-size: var(--fs-24); }
.novidades__head .eyebrow { margin-bottom: var(--s-1); }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }

/* Mobile: placeholders mais baixos (evita pilha de caixas altas) */
@media (max-width: 560px) {
  .card__img--ph { aspect-ratio: auto; height: 148px; }
  .card__img--ph svg { max-width: 72px; }
}