/* ============================================================
   certame - loja (certame.app)
   ------------------------------------------------------------
   Estrutura de marketplace no padrao que o comprador brasileiro
   ja conhece: busca dominante no topo, chips de categoria, grade
   de cards, pagina de produto com galeria a esquerda e caixa de
   compra fixa a direita.

   Marca sobre a estrutura: Papel quente, Fogo nas acoes, Mata na
   conformidade. Onde um marketplace comum poe "frete gratis",
   aqui vai "34% a causa"; onde poe "compra garantida", vai o selo
   de prova publica. A escassez tambem e real: titulos restantes.
   ============================================================ */

:root {
  --tinta: #141414;
  --papel: #F6F0E4;
  --fundo: #FAF8F3;
  --fogo: #D85A30;
  --mata: #0F6E56;
  --regua: #8B857A;
  --cartao: #FFFFFF;
  --borda: #E7DFCE;
  --linha: #EDE6D7;
  --texto-fraco: #6B6458;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(20,20,20,.05);
  --sombra-alta: 0 6px 22px rgba(20,20,20,.10);
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.mono, .num { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------- cabecalho */

.cabeca { background: var(--papel); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 50; }
.cabeca .faixa1 {
  max-width: 1200px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 16px;
}
.marca {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--tinta); font-weight: 600; letter-spacing: 3px; font-size: 17px; flex: none;
}

/* a busca domina a primeira faixa, como num marketplace */
.busca { flex: 1; max-width: 620px; position: relative; }
.busca input {
  width: 100%; padding: 10px 42px 10px 14px; font-family: inherit; font-size: 14px;
  border: 1px solid var(--borda); border-radius: 8px; background: #fff; color: var(--tinta);
  box-shadow: var(--sombra);
}
.busca input:focus { outline: none; border-color: var(--fogo); box-shadow: 0 0 0 3px rgba(216,90,48,.13); }
.busca button {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 34px;
  background: none; border: 0; cursor: pointer; color: var(--regua); font-size: 15px;
}
.busca button:hover { color: var(--fogo); }

.acoes-topo { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; }
.acoes-topo a { color: var(--tinta); text-decoration: none; font-size: 13.5px; }
.acoes-topo a:hover { color: var(--fogo); }
.acoes-topo .destaque {
  background: var(--fogo); color: #fff; padding: 8px 15px; border-radius: 7px; font-weight: 500;
}
.acoes-topo .destaque:hover { filter: brightness(1.07); color: #fff; }
.sino { position: relative; }
.sino .contador {
  position: absolute; top: -6px; right: -8px; background: var(--fogo); color: #fff;
  font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px;
  display: grid; place-items: center; padding: 0 4px; font-weight: 600;
}

/* segunda faixa: chips de categoria (as causas) */
.cabeca .faixa2 { border-top: 1px solid var(--linha); background: var(--papel); }
.chips {
  max-width: 1200px; margin: 0 auto; padding: 8px 16px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; background: #fff; border: 1px solid var(--borda); border-radius: 20px;
  padding: 5px 13px; font-size: 12.5px; color: var(--texto-fraco);
  text-decoration: none; white-space: nowrap; transition: all .12s ease;
}
.chip:hover { border-color: var(--fogo); color: var(--fogo); }
.chip.ativo { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* faixa de confianca: o que substitui "frete gratis" num marketplace comum */
.tira-confianca {
  background: var(--tinta); color: #E8E3D8; font-size: 12px;
}
.tira-confianca .interno {
  max-width: 1200px; margin: 0 auto; padding: 7px 16px;
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
}
.tira-confianca b { color: #fff; font-weight: 500; }

/* ---------------------------------------------------------- migalha */

.migalha { padding: 14px 0 4px; font-size: 12.5px; color: var(--texto-fraco); }
.migalha a { color: var(--texto-fraco); text-decoration: none; }
.migalha a:hover { color: var(--fogo); }

/* ------------------------------------------------------------ grade */

.secao-titulo { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 14px; }
.secao-titulo h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.secao-titulo .conta { color: var(--texto-fraco); font-size: 13px; }
.secao-titulo a { margin-left: auto; font-size: 13px; color: var(--mata); text-decoration: none; }

.grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 14px;
}

.produto {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  color: inherit; transition: transform .14s ease, box-shadow .14s ease;
  position: relative;
}
.produto:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }

.produto .capa {
  aspect-ratio: 4 / 3; background: linear-gradient(150deg, #F1EADC, #E6DCC8);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.produto .capa .premio-nome {
  font-size: 15px; font-weight: 600; color: var(--tinta); text-align: center;
  padding: 0 18px; line-height: 1.3;
}
.produto .favorito {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.94); border: 1px solid var(--borda); cursor: pointer;
  display: grid; place-items: center; font-size: 14px; color: var(--regua); line-height: 1;
  transition: color .12s ease, transform .12s ease;
}
.produto .favorito:hover { transform: scale(1.08); color: var(--fogo); }
.produto .favorito.marcado { color: var(--fogo); border-color: var(--fogo); }

.produto .info { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.produto .titulo { font-size: 14px; line-height: 1.35; font-weight: 500; }
.produto .organizador { font-size: 12px; color: var(--texto-fraco); }
.produto .preco { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.produto .preco small { font-size: 12px; font-weight: 400; color: var(--texto-fraco); }
.produto .selos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

.selo-causa {
  background: #E8F4EF; color: var(--mata); font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 4px;
}
.selo-prova {
  background: var(--papel); color: var(--texto-fraco); font-size: 11px;
  padding: 2px 8px; border-radius: 4px; border: 1px solid var(--borda);
}
.selo-restam { background: #FDF0E9; color: var(--fogo); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 4px; }

.progresso { margin-top: auto; padding-top: 8px; }
.progresso .trilho { background: var(--linha); border-radius: 20px; height: 5px; overflow: hidden; }
.progresso .trilho > div { background: var(--mata); height: 100%; border-radius: 20px; }
.progresso .legenda { font-size: 11.5px; color: var(--texto-fraco); margin-top: 5px; }

/* --------------------------------------------------- pagina produto */

.produto-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-top: 8px; }

.galeria {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden;
}
.galeria .principal {
  aspect-ratio: 16 / 10; background: linear-gradient(150deg, #F1EADC, #E6DCC8);
  display: grid; place-items: center; text-align: center; padding: 30px;
}
.galeria .principal .rotulo {
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--regua);
}
.galeria .principal .premio { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; }

.bloco {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 20px; margin-top: 16px;
}
.bloco h2 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.bloco p { font-size: 14px; color: #4A443B; }
.ficha { width: 100%; font-size: 13.5px; border-collapse: collapse; margin-top: 4px; }
.ficha td { padding: 9px 0; border-bottom: 1px solid var(--linha); }
.ficha td:first-child { color: var(--texto-fraco); width: 42%; }
.ficha tr:last-child td { border-bottom: 0; }

/* caixa de compra: fixa, como num marketplace */
.compra {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px; position: sticky; top: 118px; box-shadow: var(--sombra);
}
.compra .valor { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.compra .valor small { font-size: 13px; font-weight: 400; color: var(--texto-fraco); }
.compra .disponivel { font-size: 13px; color: var(--mata); margin-top: 4px; font-weight: 500; }
.compra .qtd { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.compra .qtd button {
  width: 34px; height: 34px; border: 1px solid var(--borda); background: #fff;
  border-radius: 7px; cursor: pointer; font-size: 16px; color: var(--tinta); line-height: 1;
}
.compra .qtd button:hover { border-color: var(--fogo); color: var(--fogo); }
.compra .qtd input {
  width: 62px; text-align: center; padding: 7px; border: 1px solid var(--borda);
  border-radius: 7px; font-family: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
}
.compra .total { font-size: 13.5px; color: var(--texto-fraco); }
.compra .total b { color: var(--tinta); font-size: 16px; }
.botao.compra-abrir-mobile, .fechar-compra-mobile { display: none; }

/* -------------------------------------------------- modal de compra (overlay) */
.compra-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 20, 20, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.compra-overlay[hidden] { display: none; }
.compra-modal {
  position: relative; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 12px 40px rgba(20, 20, 20, .28);
  width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
  padding: 26px 22px 22px;
}
.compra-fechar {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--papel);
  color: var(--tinta); font-size: 24px; line-height: 1; cursor: pointer;
  transition: background .12s ease;
}
.compra-fechar:hover { background: var(--borda); }
.compra-modal .valor { font-size: 28px; font-weight: 600; margin-top: 4px; }
.compra-modal .qtd { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.compra-modal .total { font-size: 13.5px; color: var(--texto-fraco); margin-bottom: 4px; }
.compra-modal .total b { color: var(--tinta); font-size: 16px; }
.compra-modal label { display: block; font-size: 13px; color: var(--texto-fraco); margin: 10px 0 4px; }
.compra-modal input {
  width: 100%; padding: 10px; border: 1px solid var(--borda);
  border-radius: 8px; font-family: inherit; font-size: 15px;
}
@media (max-width: 480px) {
  .compra-overlay { padding: 0; align-items: flex-end; }
  .compra-modal {
    max-width: none; border-radius: 14px 14px 0 0; border-bottom: 0;
    max-height: 88vh; padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
}

.botao {
  display: block; width: 100%; text-align: center; background: var(--fogo); color: #fff;
  border: 0; border-radius: 8px; padding: 13px; font-family: inherit; font-size: 15px;
  font-weight: 500; cursor: pointer; text-decoration: none; margin-top: 12px;
  transition: filter .12s ease, transform .12s ease;
}
.botao:hover { filter: brightness(1.07); transform: translateY(-1px); }
.botao:active { transform: translateY(0); }
.botao.secundario { background: #fff; color: var(--tinta); border: 1px solid var(--borda); }
.botao.secundario:hover { border-color: var(--fogo); color: var(--fogo); }
.botao:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* o selo de prova ocupa o lugar do "compra garantida" */
.garantias { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
.garantia { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; margin-bottom: 10px; }
.garantia:last-child { margin-bottom: 0; }
.garantia .marca-g {
  width: 17px; height: 17px; border-radius: 50%; background: #E8F4EF; color: var(--mata);
  display: grid; place-items: center; font-size: 10px; flex: none; margin-top: 1px; font-weight: 700;
}
.garantia b { display: block; font-weight: 500; }
.garantia span { color: var(--texto-fraco); }

/* --------------------------------------------------------- rodape */

.rodape { background: var(--papel); border-top: 1px solid var(--borda); margin-top: 48px; padding: 28px 0; }
.rodape .colunas {
  max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px;
}
.rodape h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--regua); margin-bottom: 8px; font-weight: 500; }
.rodape a { display: block; color: var(--texto-fraco); text-decoration: none; font-size: 13px; padding: 3px 0; }
.rodape a:hover { color: var(--fogo); }
.rodape .legal {
  max-width: 1200px; margin: 22px auto 0; padding: 16px 16px 0; border-top: 1px solid var(--borda);
  font-size: 11.5px; color: var(--regua); line-height: 1.6;
}

/* ---------------------------------------------------------- vazio */

.sem-nada { text-align: center; padding: 60px 20px; }
.sem-nada h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.sem-nada p { color: var(--texto-fraco); font-size: 14px; max-width: 44ch; margin: 0 auto 16px; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--fogo); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (max-width: 900px) {
  .produto-pagina { grid-template-columns: 1fr; }
  .compra { position: static; }
  .cabeca .faixa1 { flex-wrap: wrap; }
  .busca { order: 3; flex-basis: 100%; max-width: none; }
  .acoes-topo { margin-left: auto; }
  .tira-confianca .interno { gap: 14px; font-size: 11px; }
}

/* numeros da casa: nao sao produtos, nao devem parecer clicaveis */
.numeros-casa { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.numero { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; }
.numero .n { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numero .r { font-size: 12.5px; color: var(--texto-fraco); margin-top: 2px; }

/* ============================================================
   Vocabulario de componentes das paginas de conteudo
   ------------------------------------------------------------
   Verificacao, causas, curadoria, comprovante, atestado, estudio,
   onboarding e as telas de conta compartilham este conjunto. Sao
   os mesmos nomes de sempre, reexpressos no sistema novo: mesma
   semantica, tipografia e espacamento coerentes com a vitrine.
   ============================================================ */

.wrap-estreito { max-width: 680px; margin: 0 auto; }

h1 { font-size: 26px; font-weight: 600; line-height: 1.22; letter-spacing: -.015em; margin: 22px 0 6px; }
h2 { font-size: 17px; font-weight: 600; margin: 20px 0 8px; }
h3 { font-size: 14.5px; font-weight: 600; margin: 14px 0 6px; }
p { margin-bottom: 10px; }
p:last-child { margin-bottom: 0; }
a { color: var(--mata); }

.muted { color: var(--texto-fraco); font-size: 14px; }

.card {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 20px; margin: 14px 0; box-shadow: var(--sombra);
}

/* acao principal em fluxos (checkout, cadastro, verificacao) */
.cta {
  display: inline-block; width: 100%; text-align: center; background: var(--fogo); color: #fff;
  border: 0; border-radius: 8px; padding: 13px 24px; font-family: inherit; font-size: 15px;
  font-weight: 500; cursor: pointer; text-decoration: none; margin-top: 4px;
  transition: filter .12s ease, transform .12s ease;
}
.cta:hover { filter: brightness(1.07); transform: translateY(-1px); color: #fff; }
.cta:active { transform: translateY(0); }
.cta.secundario { background: var(--mata); }
.cta:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* selo de estado (verificado, conferido, etiquetas curtas) */
.selo {
  display: inline-block; background: var(--mata); color: #E1F5EE; font-size: 11.5px;
  letter-spacing: .8px; padding: 4px 11px; border-radius: 5px; text-decoration: none;
}
a.selo:hover { filter: brightness(1.12); color: #E1F5EE; }

.barra { background: var(--linha); border-radius: 20px; height: 7px; overflow: hidden; margin: 9px 0; }
.barra > div { background: var(--mata); height: 100%; border-radius: 20px; }

.ok { color: var(--mata); font-weight: 500; }
.falha { color: #9B2C2C; font-weight: 500; }

/* numeros de titulo: o bilhete e o objeto do produto, merece destaque */
.numeros { margin: 8px 0; }
.numeros span {
  display: inline-block; background: var(--tinta); color: var(--papel); border-radius: 5px;
  padding: 4px 11px; margin: 3px 3px 3px 0; font-size: 13.5px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums;
}

.pix {
  background: var(--papel); border: 1px dashed var(--regua); border-radius: 8px; padding: 12px;
  font-size: 12px; word-break: break-all; color: #4C463E;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.regra { border-left: 3px solid var(--mata); padding-left: 15px; }

/* painel de numeros em pagina de conteudo */
.fatos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  background: var(--borda); border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; margin: 20px 0;
}
.fatos > div { background: var(--cartao); padding: 15px 12px; text-align: center; }
.fatos .n { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fatos .l { font-size: 10.5px; color: var(--regua); letter-spacing: 1px; text-transform: uppercase; }

.thumb {
  background: linear-gradient(150deg, #F1EADC, #E6DCC8); border-radius: 8px; height: 132px;
  display: grid; place-items: center; margin-bottom: 12px; color: var(--regua);
  font-size: 13px; overflow: hidden; text-align: center; padding: 0 14px;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* reputacao do organizador: a flamula da marca */
.fogueira-badge {
  display: inline-flex; align-items: center; gap: 6px; color: var(--regua);
  font-size: 13px; text-decoration: none;
}
.fogueira-badge .flama {
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 9px solid var(--regua); display: inline-block;
}
.fogueira-badge.aceso { color: var(--fogo); }
.fogueira-badge.aceso .flama { border-top-color: var(--fogo); }
@keyframes brasa { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.prova-ok .flama-viva { animation: brasa 2.8s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .prova-ok .flama-viva { animation: none; } }

/* formularios das paginas de conteudo */
label { display: block; font-size: 13px; color: var(--texto-fraco); margin-top: 12px; }
input, select, textarea {
  width: 100%; background: var(--cartao); border: 1px solid #D8CFBE; color: var(--tinta);
  border-radius: 8px; padding: 11px 12px; font-size: 15px; margin: 4px 0 6px; font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--fogo); box-shadow: 0 0 0 3px rgba(216,90,48,.13);
}
/* a busca do cabecalho tem regra propria e nao herda a margem acima */
.busca input { margin: 0; }

.garantia-linha { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.garantia-linha .ic { color: var(--mata); font-weight: 700; flex: none; }

table.dados { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dados td { padding: 9px 0; border-bottom: 1px solid var(--linha); }
table.dados td:first-child { color: var(--texto-fraco); width: 40%; }
table.dados tr:last-child td { border-bottom: 0; }

/* numero contemplado: o desfecho da campanha merece peso tipografico */
.contemplado {
  color: var(--fogo); font-weight: 600;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums;
}

/* medidor da Fogueira no perfil publico do organizador */
.gauge { width: 150px; height: auto; display: block; margin: 6px 0 10px; }

/* abas de conteudo (perfil do organizador, minha conta) */
.aba {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px;
  font-family: inherit; font-size: 14px; color: var(--texto-fraco); cursor: pointer;
}
.aba:hover { color: var(--tinta); }
.aba.ativa { color: var(--fogo); border-bottom-color: var(--fogo); font-weight: 500; }

/* aviso flutuante: confirma a acao sem interromper o fluxo */
.aviso-flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 90; max-width: 360px;
  background: var(--cartao); border: 1px solid var(--borda); border-left: 3px solid var(--mata);
  border-radius: 8px; box-shadow: var(--sombra-alta); padding: 12px 16px; font-size: 13.5px;
}
.aviso-flutuante.erro { border-left-color: #9B2C2C; }
.aviso-flutuante b { display: block; margin-bottom: 2px; }
.aviso-flutuante span { color: var(--texto-fraco); font-size: 12.5px; }

/* ============================================================
   Paginas de prova: comprovante, recibo, atestado, resultado
   ------------------------------------------------------------
   Sao a tese da marca em forma de pagina. Merecem hierarquia
   propria: o dado que prova vem primeiro e grande, o restante
   se organiza em volta. Fundo escuro no cabecalho para separar
   do fluxo de compra: aqui nao se vende, aqui se confere.
   ============================================================ */

.prova-topo {
  background: var(--tinta); color: var(--papel); border-radius: var(--raio) var(--raio) 0 0;
  padding: 22px 24px 20px;
}
.prova-topo .etiqueta {
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fogo);
}
.prova-topo h1 { color: var(--papel); font-size: 22px; margin: 6px 0 2px; }
.prova-topo .sub { color: #A9A296; font-size: 13px; }
.prova-corpo {
  background: var(--cartao); border: 1px solid var(--borda); border-top: 0;
  border-radius: 0 0 var(--raio) var(--raio); padding: 22px 24px;
}
.prova-bloco { padding: 18px 0; border-top: 1px solid var(--linha); }
.prova-bloco:first-child { padding-top: 0; border-top: 0; }
.prova-bloco h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--regua); font-weight: 500; margin-bottom: 10px; }

/* o numero contemplado e o desfecho: entra em escala de manchete */
.desfecho {
  font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--fogo);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums;
}
.desfecho-rot { font-size: 12.5px; color: var(--texto-fraco); margin-top: 6px; }

.estado-pago, .estado-espera {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500;
  padding: 5px 12px; border-radius: 20px;
}
.estado-pago { background: #E8F4EF; color: var(--mata); }
.estado-espera { background: #FDF0E9; color: var(--fogo); }
.pulso { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@keyframes bater { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.estado-espera .pulso { animation: bater 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .estado-espera .pulso { animation: none; } }

/* veredito da prova: o resultado da conferencia vem antes de tudo */
.veredito {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--raio);
  margin-bottom: 16px; border: 1px solid;
}
.veredito.valido { background: #E8F4EF; border-color: #B7DFD0; }
.veredito.invalido { background: #FBEAE7; border-color: #E8BDB4; }
.veredito .marca-v {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  flex: none; color: #fff;
}
.veredito.valido .marca-v { background: var(--mata); }
.veredito.invalido .marca-v { background: #9B2C2C; }
.veredito .texto b { display: block; font-size: 16px; font-weight: 600; }
.veredito.valido .texto b { color: var(--mata); }
.veredito.invalido .texto b { color: #9B2C2C; }
.veredito .texto span { font-size: 13px; color: var(--texto-fraco); }

/* valor de destaque em certificado (o repasse a causa) */
.valor-destaque {
  font-size: 40px; font-weight: 600; letter-spacing: -.025em; color: var(--mata);
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.valor-destaque + .rot { font-size: 12.5px; color: var(--texto-fraco); margin-top: 4px; }

/* bloco tecnico: hash, assinatura, JSON assinado */
.tecnico {
  background: #FBF8F1; border: 1px solid var(--borda); border-radius: 8px; padding: 13px 15px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px;
  color: #4C463E; word-break: break-all; white-space: pre-wrap; line-height: 1.65;
}
.tecnico .rotulo-t {
  display: block; font-family: 'General Sans', sans-serif; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--regua); margin-bottom: 3px;
}
.tecnico .rotulo-t:not(:first-child) { margin-top: 11px; }

/* passos de conferencia: aqui a ordem importa de verdade */
.passos { counter-reset: passo; margin-top: 6px; }
.passos li {
  counter-increment: passo; list-style: none; position: relative;
  padding-left: 32px; margin-bottom: 11px; font-size: 13.5px; color: var(--texto-fraco);
}
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0;
  width: 21px; height: 21px; border-radius: 50%; background: var(--papel);
  border: 1px solid var(--borda); color: var(--tinta); font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}

/* ============================================================
   Acesso em modal (entrar e criar conta)
   ------------------------------------------------------------
   Comprar exige conta. Tirar a pessoa da campanha para uma
   pagina de login perde a venda e o contexto. O modal mantem a
   campanha atras e devolve a compra no mesmo lugar.
   No celular ele vira folha inferior, que e o gesto nativo.
   ============================================================ */

.cortina-acesso {
  position: fixed; inset: 0; background: rgba(20, 20, 20, .5);
  z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: surgir .14s ease;
}
@keyframes surgir { from { opacity: 0 } to { opacity: 1 } }

.folha {
  background: var(--cartao); border-radius: 14px; width: 100%; max-width: 400px;
  box-shadow: 0 18px 50px rgba(20, 20, 20, .26); overflow: hidden;
  max-height: 92vh; display: flex; flex-direction: column;
}
.folha header {
  padding: 20px 22px 14px; border-bottom: 1px solid var(--linha); position: relative;
}
.folha header h2 { font-size: 19px; font-weight: 600; margin: 0; }
.folha header p { font-size: 13px; color: var(--texto-fraco); margin: 4px 0 0; }
.folha .fechar {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; border: 0; background: var(--fundo); color: var(--texto-fraco);
  cursor: pointer; display: grid; place-items: center; line-height: 1;
}
.folha .fechar:hover { background: var(--papel); color: var(--tinta); }
.folha .miolo { padding: 18px 22px 22px; overflow-y: auto; }
.folha .miolo label:first-child { margin-top: 0; }
.folha .erro {
  color: #9B2C2C; font-size: 13px; min-height: 1.2em; margin-top: 8px;
}
.folha .alternar {
  text-align: center; font-size: 13.5px; color: var(--texto-fraco);
  padding: 14px 22px; border-top: 1px solid var(--linha); background: var(--fundo);
}
.folha .alternar button {
  background: none; border: 0; color: var(--mata); font-family: inherit;
  font-size: 13.5px; font-weight: 500; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.folha .social { display: grid; gap: 8px; margin-bottom: 14px; }
.folha .social button {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 11px; border: 1px solid var(--borda); background: #fff;
  border-radius: 8px; font-family: inherit; font-size: 14px; cursor: pointer;
  color: var(--tinta);
}
.folha .social button:hover { border-color: var(--regua); }
.folha .divisor {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 12px;
  font-size: 12px; color: var(--regua);
}
.folha .divisor::before, .folha .divisor::after {
  content: ""; flex: 1; height: 1px; background: var(--linha);
}
.folha .legal { font-size: 11.5px; color: var(--regua); margin-top: 12px; line-height: 1.5; }

/* no celular a folha sobe de baixo, como um app */
@media (max-width: 620px) {
  .cortina-acesso { align-items: flex-end; padding: 0; }
  .folha {
    max-width: none; border-radius: 18px 18px 0 0; max-height: 94vh;
    animation: subir-folha .22s cubic-bezier(.32, .72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .folha header::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: var(--borda);
  }
  .folha header { padding-top: 22px; }
}
@keyframes subir-folha { from { transform: translateY(100%) } to { transform: none } }
@media (prefers-reduced-motion: reduce) {
  .cortina-acesso, .folha { animation: none; }
}

/* ============================================================
   Celular: a loja como app
   ------------------------------------------------------------
   Este site vira aplicativo. No celular ele adota os gestos que
   o usuario ja espera de um app: barra inferior fixa com os
   quatro destinos, alvos de toque de 44px, area segura do
   aparelho respeitada e nada de hover como unica pista.
   ============================================================ */

.barra-app { display: none; }

@media (max-width: 760px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

  /* cabecalho enxuga: marca, busca e conta */
  .cabeca .faixa1 { padding: 9px 12px; gap: 10px; }
  .marca { font-size: 15px; letter-spacing: 2px; }
  .marca svg { width: 13px; height: 17px; }
  /* O "Entrar" NÃO some no celular: ele ganhou a classe .destaque quando virou
     botão e caiu nesta regra por acidente. É a ação mais importante do topo. */
  .oculta-mobile { display: none; }
  .acoes-topo .destaque { padding: 7px 13px; font-size: 13px; }
  .busca { order: 3; flex-basis: 100%; max-width: none; }
  .busca input { font-size: 16px; }        /* 16px evita o zoom automatico do iOS */
  .chips { padding: 7px 12px; }

  .tira-confianca .interno { justify-content: flex-start; overflow-x: auto; }
  .tira-confianca span { white-space: nowrap; }

  .wrap { padding: 0 12px; }
  h1 { font-size: 21px; }
  .secao-titulo { margin: 18px 0 12px; }
  .secao-titulo h2 { font-size: 17px; }

  /* dois cartoes por linha: a vitrine de app */
  /* Um por linha, com a foto ao lado (18/ago/2026). Dois cartões em 390px
     deixavam a foto pequena demais para decidir - e é a foto que vende. Empilhar
     com capa grande resolveria isso, mas faz cada campanha ocupar uma tela
     inteira: rolar cinco telas para ver cinco campanhas é pior. */
  .grade { grid-template-columns: 1fr; gap: 11px; }
  .produto { display: grid; grid-template-columns: 132px 1fr; align-items: stretch; }
  .produto .capa {
    aspect-ratio: auto; height: 100%; min-height: 132px;
    border-radius: var(--raio) 0 0 var(--raio);
  }
  .produto .capa img { height: 100%; object-fit: cover; }
  .produto .capa .premio-nome { font-size: 12px; padding: 0 8px; }
  .produto .info { padding: 12px 13px; gap: 4px; }
  .produto .titulo { font-size: 14.5px; line-height: 1.3; }
  .produto .preco { font-size: 18px; }
  .produto .organizador, .produto .selos { font-size: 11px; }
  .produto .selo-prova { display: none; }    /* redundante no espaço curto */
  .produto .favorito { width: 32px; height: 32px; top: 7px; right: 7px; }

  /* produto: a página abre limpa. A compra só vira modal após o CTA. */
  .produto-pagina { gap: 14px; }
  .galeria .principal .premio { font-size: 22px; }
  .bloco { padding: 16px; }
  body.compra-modal-aberta { overflow: hidden; }
  .garantias-mobile { display: block !important; }

  .cta, .botao { padding: 14px; font-size: 15px; }
  .btn, button, .chip, a.selo { min-height: 40px; }
  .numeros span { font-size: 12.5px; padding: 4px 9px; }
  .fatos { grid-template-columns: repeat(2, 1fr); }
  table.dados td { display: block; width: auto; padding: 4px 0; }
  table.dados td:first-child { color: var(--regua); font-size: 12px; padding-top: 9px; }
  table.dados tr { display: block; border-bottom: 1px solid var(--linha); padding: 4px 0; }
  .prova-topo { border-radius: 12px 12px 0 0; padding: 18px 16px; }
  .prova-topo h1 { font-size: 19px; }
  .prova-corpo { padding: 16px; }
  .desfecho { font-size: 40px; }
  .valor-destaque { font-size: 30px; }
  .rodape .colunas { grid-template-columns: repeat(2, 1fr); }

  /* barra inferior: os quatro destinos do app */
  .barra-app {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--cartao); border-top: 1px solid var(--borda);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .barra-app a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px 7px; text-decoration: none; color: var(--regua);
    font-size: 10.5px; min-height: 54px; justify-content: center; position: relative;
  }
  .barra-app a.ativo { color: var(--fogo); }
  .barra-app a svg { width: 21px; height: 21px; }
  .barra-app .pip {
    position: absolute; top: 6px; right: 50%; margin-right: -16px;
    background: var(--fogo); color: #fff; font-size: 9.5px; min-width: 15px; height: 15px;
    border-radius: 8px; display: grid; place-items: center; padding: 0 4px; font-weight: 600;
  }
}

/* a pagina de produto some a barra do app para nao brigar com a compra */
@media (max-width: 760px) {
  body.tem-compra .barra-app { display: none; }
  body.tem-compra { padding-bottom: 0; }
}

/* atalho de teclado: pular a navegação e ir direto ao conteúdo */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--tinta); color: var(--papel); padding: 10px 16px;
  border-radius: 0 0 8px 0; text-decoration: none; font-size: 14px;
}
.pular:focus { left: 0; }
#conteudo:focus { outline: none; }

/* ================================================= validação de trilha
   A página existe para uma coisa: a pessoa colar um código e ver a verdade.
   Nada de decoração competindo com o resultado. */

.busca-trilha { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.busca-trilha input {
  flex: 1; min-width: 240px; padding: 14px 16px; font-size: 16px;
  border: 1.5px solid var(--linha); border-radius: 10px; font-family: inherit;
  background: #fff;
}
.busca-trilha input:focus { outline: none; border-color: var(--fogo); }

.tipos-trilha { font-size: 13.5px; color: var(--tinta-fraca); margin-bottom: 20px; }
.tipos-trilha b { color: var(--tinta); font-weight: 600; }
.tipos-trilha a { color: var(--fogo); }

.veredito {
  border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; border: 1.5px solid;
}
.veredito b { display: block; font-size: 17px; margin-bottom: 4px; }
.veredito p { margin: 0; font-size: 14px; }
.veredito.sim { background: #ECFDF3; border-color: #ABEFC6; color: #085D3A; }
.veredito.nao { background: #FEF3F2; border-color: #FECDCA; color: #912018; }

.ficha-trilha { margin-bottom: 20px; }
.ficha-trilha .etiqueta {
  display: inline-block; background: var(--tinta); color: var(--papel);
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 8px;
}
.ficha-trilha h2 { font-size: 26px; margin: 0 0 2px; }

.numeros-prova {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
  margin-bottom: 24px;
}
.numeros-prova > div {
  background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px;
}
.numeros-prova .destaque { border-color: var(--mata); border-width: 1.5px; }
.numeros-prova .rot {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--tinta-fraca); margin-bottom: 4px;
}
.numeros-prova b { font-size: 24px; display: block; }
.numeros-prova .destaque b { color: var(--mata); }
.numeros-prova .obs { font-size: 12px; color: var(--tinta-fraca); }

.titulo-bloco { font-size: 17px; margin: 26px 0 12px; }

.atores { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ator { background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 13px 15px; }
.ator .papel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--tinta-fraca); display: block; margin-bottom: 3px;
}
.ator b { display: block; font-size: 15px; margin-bottom: 3px; }
.ator .detalhe { font-size: 12.5px; color: var(--tinta-fraca); }

.linha-tempo { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--linha); }
.linha-tempo li {
  padding: 9px 0 9px 18px; position: relative; font-size: 13.5px;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
}
.linha-tempo li::before {
  content: ""; position: absolute; left: -5px; top: 15px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--fogo);
}
.linha-tempo .quando { color: var(--tinta-fraca); min-width: 88px; font-size: 12.5px; }
.linha-tempo .oque { flex: 1; }
.linha-tempo .hash { color: var(--tinta-fraca); font-size: 11.5px; }

.tabela-compras { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela-compras th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--tinta-fraca); padding: 8px 10px; border-bottom: 1px solid var(--linha);
}
.tabela-compras td { padding: 9px 10px; border-bottom: 1px solid #F0EDE6; }

/* ================================================= captação de parceiros */

.passos { counter-reset: p; list-style: none; padding: 0; margin: 0; }
.passos li {
  counter-increment: p; position: relative; padding: 0 0 18px 44px; font-size: 15px;
}
.passos li::before {
  content: counter(p); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--fogo); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 600;
}
.passos li b { display: block; }

.requisitos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.requisitos > div {
  background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 15px 17px;
}
.requisitos b { display: block; margin-bottom: 4px; font-size: 15px; }
.requisitos span { font-size: 13.5px; color: var(--tinta-fraca); }

.chamada-parceiro {
  background: var(--tinta); color: var(--papel); border-radius: 16px;
  padding: 34px 28px; text-align: center; margin-top: 26px;
}
.chamada-parceiro h2 { color: var(--papel); font-size: 24px; margin-bottom: 6px; }
.chamada-parceiro p { color: rgba(255,255,255,.78); margin-bottom: 16px; }
.chamada-parceiro .botao {
  display: inline-block;
  /* O texto some se herdar a cor dos links desta seção: laranja sobre laranja.
     Fixado aqui de propósito (18/ago/2026). */
  color: #fff;
}
.chamada-parceiro .secundario { margin-top: 14px; margin-bottom: 0; font-size: 13.5px; }
/* só os links de texto ficam laranja, nunca o botão */
.chamada-parceiro p a { color: var(--fogo); }

.painel-claro {
  background: #FBF8F1; border: 1px solid var(--linha); border-radius: 16px;
  padding: 24px 26px; margin-bottom: 20px;
}
.botao.secundario {
  background: #fff; color: var(--tinta); border: 1.5px solid var(--linha);
}

/* código da trilha na página do produto: curto, copiável, sem sermão */
.codigo-trilha {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  background: #fff; border: 1px solid var(--linha); border-radius: 9px;
  padding: 9px 9px 9px 13px; max-width: 100%;
}
.codigo-trilha code {
  flex: 1; min-width: 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; overflow-x: auto; white-space: nowrap;
}
.codigo-trilha .copiar {
  flex: none; width: 32px; height: 32px; border: 1px solid var(--linha);
  background: var(--papel); border-radius: 7px; cursor: pointer;
  display: grid; place-items: center; color: var(--tinta-fraca);
}
.codigo-trilha .copiar:hover { border-color: var(--tinta-fraca); color: var(--tinta); }
.codigo-trilha .copiar.feito { border-color: var(--mata); color: var(--mata); }

/* ============================================= cadastro do cliente em etapas
   Uma etapa por tela. Cadastro longo numa página só é o que mais faz gente
   desistir; o trilho mostra o progresso para a pessoa saber quanto falta. */

.cadastro-etapas { max-width: 560px; margin: 0 auto; }

.trilho-etapas {
  display: flex; gap: 4px; margin-bottom: 22px; flex-wrap: wrap; justify-content: center;
}
.trilho-etapas .passo {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  color: var(--tinta-fraca); padding: 4px 8px; border-radius: 20px;
}
.trilho-etapas .passo i {
  width: 19px; height: 19px; border-radius: 50%; background: #E8E3D8;
  display: grid; place-items: center; font-size: 10.5px; font-style: normal;
  color: var(--tinta-fraca); font-weight: 600;
}
.trilho-etapas .passo.atual { color: var(--tinta); font-weight: 600; }
.trilho-etapas .passo.atual i { background: var(--fogo); color: #fff; }
.trilho-etapas .passo.feito i { background: var(--mata); color: #fff; }

.cartao-etapa {
  background: #fff; border: 1px solid var(--linha); border-radius: 16px;
  padding: 30px 30px 32px;
}
.cartao-etapa h1 { font-size: 25px; margin: 0 0 6px; }
.cartao-etapa .sub { color: var(--tinta-fraca); font-size: 14px; margin-bottom: 20px; }
.cartao-etapa label {
  display: block; font-size: 12.5px; font-weight: 500; margin: 14px 0 5px;
}
.cartao-etapa input, .cartao-etapa select {
  width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit;
  border: 1.5px solid var(--linha); border-radius: 9px; background: #fff;
}
.cartao-etapa input:focus, .cartao-etapa select:focus {
  outline: none; border-color: var(--fogo);
}
.cartao-etapa .botao { width: 100%; margin-top: 22px; }
.cartao-etapa .dica { font-size: 12.5px; color: var(--tinta-fraca); margin-top: 6px; }
.cartao-etapa .dica.erro { color: #912018; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dupla.telefone { grid-template-columns: 140px 1fr; }
.dupla label { margin-top: 14px; }

.escolha-canal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.escolha-canal .canal {
  border: 1.5px solid var(--linha); background: #fff; border-radius: 10px;
  padding: 13px; cursor: pointer; font-family: inherit; text-align: left;
}
.escolha-canal .canal b { display: block; font-size: 14.5px; }
.escolha-canal .canal span { font-size: 12px; color: var(--tinta-fraca); }
.escolha-canal .canal.ativo { border-color: var(--fogo); background: #FFF6F2; }

.campo-codigo {
  font-size: 30px !important; letter-spacing: 12px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important; padding: 16px !important;
}
.dica-simulada {
  background: #FFFAEB; border: 1px solid #FEDF89; color: #93370D;
  border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin-top: 10px;
}

.linha-cep { display: flex; gap: 8px; }
.linha-cep input { flex: 1; }
.linha-cep .botao { width: auto; margin-top: 0; white-space: nowrap; }

.caixa-termos {
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px;
  padding: 16px 18px; font-size: 13.5px;
}
.caixa-termos ul { margin: 8px 0 0 18px; }
.caixa-termos li { margin-bottom: 5px; }

.aceite {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px;
  font-size: 14px; cursor: pointer;
}
.aceite input { width: auto !important; margin-top: 2px; }
.botao:disabled { opacity: .45; cursor: not-allowed; }

.link {
  background: none; border: 0; color: var(--fogo); cursor: pointer;
  font-family: inherit; font-size: inherit; padding: 0; text-decoration: underline;
}
.link:disabled { color: var(--tinta-fraca); cursor: default; text-decoration: none; }

/* uma etapa por vez: as demais ficam ocultas, não removidas, para o estado
   digitado sobreviver quando a pessoa volta */
.etapa[hidden] { display: none; }
.etapa { animation: surgir .18s ease-out; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* ------------------------------------------- cadastro dentro do modal
   As etapas vivem no mesmo modal do acesso: quem clicou em comprar não é
   jogado para outra página e perde o contexto. No celular o modal já sobe
   como folha inferior, então as etapas herdam esse comportamento. */

.trilho-modal {
  display: flex; gap: 2px; padding: 0 20px 14px; flex-wrap: wrap; justify-content: center;
}
.trilho-modal .passo {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  color: var(--tinta-fraca); padding: 3px 5px;
}
.trilho-modal .passo i {
  width: 17px; height: 17px; border-radius: 50%; background: #E8E3D8;
  display: grid; place-items: center; font-size: 9.5px; font-style: normal;
  color: var(--tinta-fraca); font-weight: 600; flex: none;
}
.trilho-modal .passo.atual { color: var(--tinta); font-weight: 600; }
.trilho-modal .passo.atual i { background: var(--fogo); color: #fff; }
.trilho-modal .passo.feito i { background: var(--mata); color: #fff; }
.trilho-modal .passo em { font-style: normal; }
@media (max-width: 420px) { .trilho-modal .passo em { display: none; } }

.passo-modal[hidden] { display: none; }
.passo-modal .passo-sub {
  font-size: 13px; color: var(--tinta-fraca); margin: -4px 0 14px;
}

/* força da senha: a barra preenche conforme atende cada requisito */
.forca { margin-top: 10px; }
.forca .trilho {
  height: 5px; background: #EDE9E0; border-radius: 20px; overflow: hidden;
}
.forca .trilho > div {
  height: 100%; width: 0; border-radius: 20px; transition: width .2s, background .2s;
  background: #D92D20;
}
.forca .trilho > div.media { background: #F79009; }
.forca .trilho > div.forte { background: var(--mata); }
.forca ul {
  list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.forca li { font-size: 11.5px; color: var(--tinta-fraca); position: relative; padding-left: 14px; }
.forca li::before {
  content: "○"; position: absolute; left: 0; font-size: 10px; top: 1px;
}
.forca li.ok { color: var(--mata); }
.forca li.ok::before { content: "●"; }

.cortina-acesso .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cortina-acesso .dupla.telefone { grid-template-columns: 130px 1fr; }
.cortina-acesso select {
  width: 100%; padding: 11px 12px; font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--linha); border-radius: 9px; background: #fff;
}
.cortina-acesso .campo-codigo {
  font-size: 26px !important; letter-spacing: 10px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important; padding: 14px !important;
}
.cortina-acesso .caixa-termos {
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px;
  padding: 14px 16px; font-size: 13px;
}
.cortina-acesso .caixa-termos ul { margin: 8px 0 0 18px; }
.cortina-acesso .aceite {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; font-size: 13.5px;
}
.cortina-acesso .aceite input { width: auto; margin-top: 2px; }
.cortina-acesso .cta:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------ botões de login social
   Ambos em fundo claro, com a marca em tamanho legível. As diretrizes do Google
   e da Apple permitem as duas variantes (clara e escura), desde que a marca
   fique intacta - e a App Store reprova quem descaracteriza. */

.social #btn-google, .social #btn-apple {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 14px 18px; border-radius: 30px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  background: #FBFAF8; color: var(--tinta); border: 1.5px solid var(--linha);
  transition: background .15s, border-color .15s;
}
.social #btn-google:hover, .social #btn-apple:hover {
  background: #fff; border-color: var(--tinta-fraca);
}
.social #btn-google svg, .social #btn-apple svg { flex: none; }
.social #btn-apple svg { margin-top: -1px; }
.social { display: grid; gap: 10px; }

/* ============================================================ aviso de cookies
   A recusa tem o mesmo peso visual do aceite: a LGPD exige que negar seja tão
   fácil quanto consentir, e banner com "rejeitar" escondido num link cinza é
   justamente o padrão que as autoridades vêm punindo. */

.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 260;
  background: var(--tinta); color: var(--papel);
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 -8px 30px rgba(0,0,0,.16);
  animation: subir-cookies .28s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes subir-cookies { from { transform: translateY(100%); } to { transform: none; } }
.cookies[hidden] { display: none; }

.cookies .dentro {
  max-width: 1120px; margin: 0 auto; padding: 18px 22px;
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
}
.cookies .texto { flex: 1; min-width: 260px; }
.cookies .texto b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.cookies .texto p { font-size: 13px; color: rgba(255,255,255,.72); margin: 0; }
.cookies .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-cookie {
  padding: 11px 18px; border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  background: rgba(255,255,255,.1); color: var(--papel);
  border: 1px solid rgba(255,255,255,.2);
}
.btn-cookie:hover { background: rgba(255,255,255,.16); }
.btn-cookie.forte {
  background: var(--fogo); border-color: var(--fogo); color: #fff; font-weight: 600;
}
.btn-cookie.forte:hover { filter: brightness(1.06); }
.btn-cookie.linha { background: none; text-decoration: underline; border-color: transparent; }

.cookies .preferencias {
  max-width: 1120px; margin: 0 auto; padding: 0 22px 20px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.cookies .preferencias[hidden] { display: none; }
.linha-pref {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer;
}
.linha-pref b { display: block; font-size: 13.5px; }
.linha-pref small { color: rgba(255,255,255,.62); font-size: 12.5px; }
.linha-pref input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--fogo); }
.linha-pref input:disabled { opacity: .5; }
.cookies .nota { font-size: 12.5px; color: rgba(255,255,255,.6); margin: 12px 0 0; }
.cookies .preferencias .acoes { margin-top: 14px; }

@media (max-width: 640px) {
  .cookies .dentro { padding: 16px 18px; }
  .cookies .acoes { width: 100%; }
  .cookies .acoes .btn-cookie { flex: 1; text-align: center; }
  .cookies .acoes .btn-cookie.linha { flex: 100%; order: 3; }
}

/* revelar a senha: substitui a confirmação, que só duplicava o atrito */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 46px !important; }
.campo-senha .olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  color: var(--tinta-fraca); display: grid; place-items: center; border-radius: 7px;
}
.campo-senha .olho:hover { color: var(--tinta); background: rgba(0,0,0,.04); }
.campo-senha .olho.ativo { color: var(--fogo); }

/* miniaturas da galeria: o prêmio de vários ângulos antes da decisão */
.galeria .miniaturas {
  display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
}
.galeria .mini {
  flex: none; width: 76px; height: 76px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 9px; overflow: hidden;
  background: none; line-height: 0;
}
.galeria .mini img { width: 100%; height: 100%; object-fit: cover; }
.galeria .mini:hover { border-color: var(--linha); }
.galeria .mini.ativa { border-color: var(--fogo); }

/* ====================================== causas, instituições e seus perfis
   Quem chega por causa está escolhendo QUEM apoiar, não o quê ganhar. Por isso
   a hierarquia aqui é instituição primeiro, campanha depois - o inverso da
   vitrine (18/ago/2026). */

.cabecalho-causa { margin-bottom: 26px; }
.cabecalho-causa h1 { font-size: 30px; margin: 6px 0 6px; }
.cabecalho-causa p { color: var(--tinta-fraca); max-width: 62ch; margin: 0; }
.cabecalho-causa .voltar {
  font-size: 13px; color: var(--tinta-fraca); text-decoration: none;
}
.cabecalho-causa .voltar::before { content: "‹ "; }
.cabecalho-causa .voltar:hover { color: var(--fogo); }

.grade-causas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
.cartao-causa {
  background: #fff; border: 1px solid var(--linha); border-radius: 14px;
  padding: 20px 22px; text-decoration: none; color: inherit; display: block;
  transition: border-color .15s, transform .15s;
}
.cartao-causa:hover { border-color: var(--fogo); transform: translateY(-2px); }
.cartao-causa h2 { font-size: 19px; margin: 0 0 6px; }
.cartao-causa p { font-size: 13.5px; color: var(--tinta-fraca); margin: 0 0 14px; }
.cartao-causa .ver, .cartao-instituicao .ver {
  font-size: 13.5px; color: var(--fogo); font-weight: 600;
}
.nota-causas {
  font-size: 13px; color: var(--tinta-fraca); margin-top: 22px; max-width: 68ch;
}

.grade-instituicoes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}
.cartao-instituicao {
  background: #fff; border: 1px solid var(--linha); border-radius: 14px;
  padding: 20px 22px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .15s, transform .15s;
}
.cartao-instituicao:hover { border-color: var(--fogo); transform: translateY(-2px); }
.cartao-instituicao .topo { display: flex; gap: 13px; align-items: flex-start; }
.cartao-instituicao h2 { font-size: 17px; margin: 0 0 3px; line-height: 1.25; }
.cartao-instituicao .local { font-size: 12.5px; color: var(--tinta-fraca); margin: 0; }
.sigla {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  background: var(--tinta); color: var(--papel); display: grid; place-items: center;
  font-size: 17px; font-weight: 700; letter-spacing: .5px;
}
/* Classe própria: `.numeros` já existia para os números do bilhete, que são
   etiquetas escuras de propósito. Herdar aquilo aqui transformava contexto em
   manchete (18/ago/2026). */
.cartao-instituicao .resumo-numeros {
  display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px;
  color: var(--tinta-fraca); margin-top: auto;
}
/* Os números ficam no tom do texto corrido: no cartão eles são contexto, não
   manchete. O destaque pertence ao nome da instituição (18/ago/2026). */
.cartao-instituicao .resumo-numeros b { color: inherit; font-weight: 600; }

/* --- perfil da instituição --- */

.perfil-instituicao {
  background: #FBF8F1; border: 1px solid var(--linha); border-radius: 16px;
  padding: 26px 28px; margin-bottom: 20px;
}
.perfil-instituicao .identidade { display: flex; gap: 18px; align-items: flex-start; }
.perfil-instituicao .sigla { width: 64px; height: 64px; font-size: 23px; border-radius: 16px; }
.perfil-instituicao h1 { font-size: 27px; margin: 0 0 3px; }
.perfil-instituicao .razao { font-size: 13.5px; color: var(--tinta-fraca); margin: 0 0 10px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.etiqueta {
  font-size: 12px; padding: 3px 11px; border-radius: 20px; text-decoration: none;
  background: #fff; border: 1px solid var(--linha); color: var(--tinta-fraca);
}
.etiqueta:hover { border-color: var(--fogo); color: var(--fogo); }

.numeros-instituicao {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linha);
}
.numeros-instituicao .rot {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--tinta-fraca); margin-bottom: 4px;
}
.numeros-instituicao b { font-size: 25px; }
.numeros-instituicao .verde { color: var(--mata); }

.dados-instituicao {
  background: #fff; border: 1px solid var(--linha); border-radius: 16px;
  padding: 22px 26px; margin-bottom: 28px;
}
.dados-instituicao h2 { font-size: 17px; margin: 0 0 14px; }
.dados-instituicao dl { margin: 0; display: grid; gap: 11px; }
.dados-instituicao dl > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 14px; font-size: 14px;
}
.dados-instituicao dt { color: var(--tinta-fraca); }
.dados-instituicao dd { margin: 0; }
.dados-instituicao .fonte { color: var(--tinta-fraca); font-size: 12.5px; margin-left: 6px; }
.dados-instituicao .nota {
  font-size: 12.5px; color: var(--tinta-fraca); margin: 16px 0 0; max-width: 70ch;
}

.vazio-loja {
  text-align: center; padding: 50px 20px; background: #FBF8F1;
  border: 1px solid var(--linha); border-radius: 16px;
}
.vazio-loja h2 { font-size: 19px; margin: 0 0 6px; }
.vazio-loja p { color: var(--tinta-fraca); margin: 0; }

.secao-titulo .contagem { font-size: 13.5px; color: var(--tinta-fraca); }

@media (max-width: 640px) {
  .dados-instituicao dl > div { grid-template-columns: 1fr; gap: 2px; }
  .perfil-instituicao .identidade { flex-direction: column; gap: 12px; }
}

/* ================================================ captação de parceiros
   A página precisava de uma abertura de verdade: antes o bloco escuro colava
   no topo e parecia continuação da barra do site, não começo de página. */

.capa-parceiro {
  background: var(--tinta); color: var(--papel); border-radius: 18px;
  padding: 54px 44px 46px; margin: 8px 0 22px; text-align: center;
}
.capa-parceiro .etiqueta {
  display: inline-block; font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--fogo); margin-bottom: 16px;
  background: none; border: 0; padding: 0;
}
.capa-parceiro h1 {
  color: var(--papel); font-size: 40px; line-height: 1.15; margin: 0 0 14px;
  letter-spacing: -.02em;
}
.capa-parceiro > p {
  color: rgba(255,255,255,.76); font-size: 16px; max-width: 56ch;
  margin: 0 auto 26px; line-height: 1.55;
}
.capa-parceiro .ressalva {
  font-size: 13px; color: rgba(255,255,255,.5); margin: 22px auto 0; max-width: 52ch;
}

.acoes-capa { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.acoes-capa .botao { width: auto; min-width: 210px; }
.acoes-capa.centro { margin-top: 4px; }
.botao.vazado {
  background: none; color: var(--papel);
  border: 1.5px solid rgba(255,255,255,.28);
}
.botao.vazado:hover { border-color: var(--papel); background: rgba(255,255,255,.06); }

@media (max-width: 640px) {
  .capa-parceiro { padding: 38px 22px 32px; border-radius: 14px; }
  .capa-parceiro h1 { font-size: 29px; }
  .capa-parceiro h1 br { display: none; }
  .acoes-capa { flex-direction: column; }
  .acoes-capa .botao { width: 100%; }
}

/* ==================================================== validação de trilha
   É a página que sustenta a tese do produto: "não acredite, confira". Merece
   abertura de página, e não um bloco escuro colado na barra do site. */

.capa-validar {
  /* Sem fundo escuro: a página inteira já é sobre confiança, e o bloco preto
     competia com o resultado da validação, que é o que importa aqui
     (18/ago/2026). */
  padding: 40px 0 34px; margin: 4px 0 8px; text-align: center;
  border-bottom: 1px solid var(--linha);
}
.capa-validar .etiqueta {
  display: inline-block; font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--fogo); margin-bottom: 12px;
  background: none; border: 0; padding: 0;
}
.capa-validar h1 {
  font-size: 40px; line-height: 1.1; margin: 0 0 12px; letter-spacing: -.025em;
}
.capa-validar > p {
  color: var(--tinta-fraca); font-size: 15.5px; max-width: 58ch;
  margin: 0 auto 26px; line-height: 1.55;
}

.capa-validar .busca-trilha { max-width: 560px; margin: 0 auto; gap: 8px; }
.capa-validar .busca-trilha input {
  font-size: 16px; padding: 15px 18px; background: #fff;
}
.capa-validar .busca-trilha .botao { width: auto; min-width: 130px; }

.capa-validar .tipos-trilha {
  margin: 18px 0 0; font-size: 12.5px; color: var(--tinta-fraca);
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center;
}
.capa-validar .tipos-trilha b {
  color: var(--tinta); font-weight: 500; font-size: 12px;
  background: #fff; border: 1px solid var(--linha);
  border-radius: 20px; padding: 3px 11px;
}
.link-certame {
  background: none; border: 0; color: var(--fogo); cursor: pointer;
  font-family: inherit; font-size: 12.5px; text-decoration: underline;
  padding: 0; margin-left: 4px;
}

/* --- o que se recebe de volta --- */

.como-funciona-prova { margin-top: 34px; }
.como-funciona-prova[hidden] { display: none; }
.como-funciona-prova h2 { font-size: 20px; margin: 0 0 20px; text-align: center; }
.tres-colunas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
}
.tres-colunas > div {
  background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 22px 24px;
}
/* Classe própria: `.numero` já existia para os cartões de estatística da home,
   com fundo e borda. Herdar aquilo transformava o "01" num campo de formulário
   (18/ago/2026). */
.tres-colunas .ordem {
  display: block; font-size: 12px; letter-spacing: 1.4px; color: var(--fogo);
  font-weight: 700; margin-bottom: 10px;
}
.tres-colunas h3 { font-size: 15.5px; margin: 0 0 7px; }
.tres-colunas p { font-size: 13.5px; color: var(--tinta-fraca); margin: 0; line-height: 1.55; }

/* o resultado ganha respiro quando aparece */
#resultado:not(:empty) { margin-top: 26px; }

@media (max-width: 640px) {
  .capa-validar { padding: 28px 0 26px; }
  .capa-validar h1 { font-size: 30px; }
  .capa-validar .busca-trilha { flex-direction: column; }
  .capa-validar .busca-trilha .botao { width: 100%; }
}

/* paginação da linha do tempo */
.paginacao-trilha {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px; font-size: 13.5px; color: var(--tinta-fraca);
}
.paginacao-trilha .botao { width: auto; min-width: 104px; padding: 9px 16px; font-size: 13.5px; }
.paginacao-trilha .botao:disabled { opacity: .4; cursor: not-allowed; }
.titulo-bloco .contagem {
  font-size: 13px; color: var(--tinta-fraca); font-weight: 400; margin-left: 8px;
}

/* ===================================================== documentos legais
   Texto jurídico que ninguém lê é texto que não protege ninguém. Coluna
   estreita, tipografia grande e índice fixo: quem procura uma cláusula
   específica precisa achá-la em segundos. */

.documento-legal { max-width: 760px; margin: 0 auto; padding: 8px 0 40px; }
.documento-legal header { margin-bottom: 26px; }
.etiqueta-doc {
  display: inline-block; font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--fogo); margin-bottom: 10px;
}
.documento-legal h1 { font-size: 36px; margin: 0 0 8px; letter-spacing: -.02em; }
.documento-legal .versao { color: var(--tinta-fraca); font-size: 13.5px; margin: 0; }

.aviso-revisao {
  background: #FFFAEB; border: 1px solid #FEDF89; border-radius: 12px;
  padding: 15px 18px; font-size: 13.5px; color: #93370D; margin-bottom: 26px;
  line-height: 1.55;
}
.aviso-revisao strong { display: block; margin-bottom: 3px; }

.indice-doc {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 16px; padding: 20px 22px; background: #FBF8F1;
  border: 1px solid var(--linha); border-radius: 12px; margin-bottom: 34px;
}
.indice-doc a {
  font-size: 13.5px; color: var(--tinta-fraca); text-decoration: none; padding: 4px 0;
}
.indice-doc a:hover { color: var(--fogo); }

.documento-legal section { margin-bottom: 34px; scroll-margin-top: 100px; }
.documento-legal h2 {
  font-size: 20px; margin: 0 0 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--linha);
}
.documento-legal p { font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.documento-legal ul { margin: 0 0 12px; padding-left: 20px; }
.documento-legal li { font-size: 15px; line-height: 1.7; margin-bottom: 8px; }
.documento-legal a { color: var(--fogo); }

.tabela-dados { width: 100%; border-collapse: collapse; margin: 4px 0 14px; }
.tabela-dados th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--tinta-fraca); padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--linha);
}
.tabela-dados td {
  padding: 11px 12px 11px 0; border-bottom: 1px solid #F0EDE6;
  font-size: 14.5px; vertical-align: top; line-height: 1.5;
}
.tabela-dados td:first-child { font-weight: 500; width: 34%; }

.rodape-doc {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linha);
  font-size: 14px;
}

@media (max-width: 640px) {
  .documento-legal h1 { font-size: 27px; }
  .indice-doc { grid-template-columns: 1fr; padding: 16px 18px; }
  .tabela-dados td:first-child { width: 42%; }
}

/* --------------------------------------------- botão de validar no topo
   Contorno, não preenchimento: o laranja pertence a "Entrar", que é a ação
   comercial. Este é o convite à desconfiança - precisa ser visível e distinto,
   sem disputar. O selo com o visto carrega o significado sem precisar de texto
   extra. */

.acoes-topo .botao-validar {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 12px; border-radius: 7px;
  border: 1.5px solid var(--linha); background: #fff;
  color: var(--tinta); font-size: 13.5px; font-weight: 500;
  transition: border-color .16s, color .16s, background .16s;
}
.acoes-topo .botao-validar svg { color: var(--mata); transition: transform .16s; }
.acoes-topo .botao-validar:hover {
  border-color: var(--mata); color: var(--mata); background: #F6FBF8;
}
.acoes-topo .botao-validar:hover svg { transform: scale(1.08); }

/* ==================================================== ajustes para celular
   A maioria das compras vai acontecer no telefone, e o layout precisa ser
   pensado para ele - não apenas caber nele (18/ago/2026). */

/* Item 6: o texto dos chips não centralizava porque `<a>` alinha à esquerda.
   Em pílula estreita a diferença aparece de imediato. */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.2;
}


/* Telas muito estreitas: a foto ao lado deixaria o texto sem espaço */
/* Telas bem estreitas: a foto encolhe, mas continua ao lado. Empilhar aqui
   faria cada campanha ocupar uma tela inteira, e a maioria dos aparelhos
   brasileiros tem justamente esta largura (18/ago/2026). */
@media (max-width: 380px) {
  .produto { grid-template-columns: 106px 1fr; }
  .produto .capa { min-height: 106px; }
  .produto .info { padding: 10px 11px; }
  .produto .titulo { font-size: 13.5px; }
}

/* ================================================= área de conta no topo
   Sino e avatar separados. Aviso e identidade são coisas diferentes: juntá-los
   faz a pessoa abrir o menu quando queria só ver a notificação. É o padrão de
   qualquer serviço grande, e por essa razão prática (18/ago/2026). */

.area-conta { display: flex; align-items: center; gap: 6px; position: relative; }
.area-conta[hidden] { display: none; }

.sino-btn {
  position: relative; width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid transparent; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--tinta-fraca);
  transition: background .14s, color .14s;
}
.sino-btn:hover { background: rgba(0,0,0,.045); color: var(--tinta); }
.sino-btn .contador {
  position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px;
  padding: 0 4px; background: var(--fogo); color: #fff; border-radius: 9px;
  font-size: 10.5px; font-weight: 600; display: grid; place-items: center;
  border: 2px solid var(--papel);
}

.perfil-btn {
  display: flex; align-items: center; gap: 8px; padding: 4px 9px 4px 4px;
  border: 1px solid var(--linha); border-radius: 30px; background: #fff;
  cursor: pointer; font-family: inherit; transition: border-color .14s;
}
.perfil-btn:hover { border-color: var(--tinta-fraca); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--tinta); color: var(--papel);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  letter-spacing: .3px;
}
.avatar.grande { width: 42px; height: 42px; font-size: 15px; }
.nome-conta {
  font-size: 13.5px; font-weight: 500; color: var(--tinta);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.perfil-btn .seta { color: var(--tinta-fraca); flex: none; }

/* --- menu e painel suspensos --- */

.menu-conta, .painel-notif {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 120;
  background: #fff; border: 1px solid var(--linha); border-radius: 13px;
  box-shadow: 0 12px 34px rgba(20,20,20,.14); overflow: hidden;
  animation: cair .14s ease-out;
}
@keyframes cair { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; } }
.menu-conta[hidden], .painel-notif[hidden] { display: none; }

.menu-conta { min-width: 240px; padding: 6px; }
.menu-conta .cabeca {
  display: flex; gap: 11px; align-items: center; padding: 11px 12px 13px;
  border-bottom: 1px solid var(--linha); margin-bottom: 6px;
}
.menu-conta .cabeca b { display: block; font-size: 14px; line-height: 1.3; }
.menu-conta .cabeca span {
  font-size: 12px; color: var(--tinta-fraca); word-break: break-all;
}
.menu-conta a, .menu-conta button {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  border-radius: 8px; font-size: 14px; color: var(--tinta);
  text-decoration: none; border: 0; background: none; cursor: pointer;
  font-family: inherit;
}
.menu-conta a:hover, .menu-conta button:hover { background: var(--papel); }
.menu-conta .sair { color: var(--vinho, #9B2C2C); }
.divisor-menu { height: 1px; background: var(--linha); margin: 6px 0; }

.painel-notif { width: min(360px, calc(100vw - 28px)); max-height: 440px; overflow-y: auto; }
.painel-notif header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; background: #fff;
}
.painel-notif header b { font-size: 14.5px; }
.link-menu {
  background: none; border: 0; color: var(--fogo); font-size: 12.5px;
  cursor: pointer; font-family: inherit; text-decoration: underline;
}
.item-notif {
  display: block; padding: 12px 16px; border-bottom: 1px solid #F4F1EA;
  text-decoration: none; color: inherit;
}
.item-notif:hover { background: var(--papel); }
.item-notif.nova { border-left: 3px solid var(--fogo); }
.item-notif b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.item-notif span { display: block; font-size: 12.5px; color: var(--tinta-fraca); }
.item-notif time { font-size: 11.5px; color: var(--tinta-tenue, #A8A29A); }
.vazio-notif {
  padding: 30px 16px; text-align: center; color: var(--tinta-fraca); font-size: 13.5px;
}

@media (max-width: 700px) {
  .perfil-btn { padding: 3px; border-color: transparent; }
  .menu-conta, .painel-notif { right: -6px; }
}

/* o código oficial no cabeçalho da trilha */
.codigo-oficial {
  font-size: 14px; letter-spacing: .06em; color: var(--tinta);
  background: #fff; border: 1px solid var(--linha); border-radius: 7px;
  padding: 5px 11px; display: inline-block; margin: 4px 0 0;
}

/* abas do resultado da validação */
.abas-trilha {
  display: flex; gap: 4px; margin: 26px 0 0; border-bottom: 1px solid var(--linha);
  overflow-x: auto; scrollbar-width: none;
}
.abas-trilha::-webkit-scrollbar { display: none; }
.abas-trilha button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 15px; font-family: inherit; font-size: 14px; cursor: pointer;
  color: var(--tinta-fraca); white-space: nowrap; margin-bottom: -1px;
}
.abas-trilha button:hover { color: var(--tinta); }
.abas-trilha button.ativa {
  color: var(--tinta); font-weight: 600; border-bottom-color: var(--fogo);
}
.abas-trilha .cont {
  display: inline-block; background: var(--papel); border: 1px solid var(--linha);
  border-radius: 20px; padding: 1px 8px; font-size: 11.5px; margin-left: 5px;
  font-weight: 500; color: var(--tinta-fraca);
}
.painel-aba { padding-top: 20px; }
.painel-aba[hidden] { display: none; }

/* ============================================ página de confirmação de e-mail */

.confirmacao {
  max-width: 470px; margin: 40px auto; text-align: center;
  background: #fff; border: 1px solid var(--linha); border-radius: 16px;
  padding: 44px 32px 38px;
}
.marca-ok { color: var(--mata); margin-bottom: 18px; }
.marca-erro { color: var(--fogo); margin-bottom: 18px; }
.confirmacao h1 { font-size: 25px; margin: 0 0 10px; }
.confirmacao p { font-size: 15px; line-height: 1.6; margin: 0 0 8px; }
.confirmacao .secundario { font-size: 14px; color: var(--tinta-fraca); }
.confirmacao .botao { margin-top: 22px; display: inline-block; width: auto; min-width: 220px; }
.confirmacao .volte {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linha);
  font-size: 13px; color: var(--tinta-fraca);
}
.acoes-confirma { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.acoes-confirma .botao { min-width: 190px; }