/* Valor do Hectare: "a terra vista de cima, com precisão" (brief de 07/10/2026, seções 2 e 3).
   Base clara de papel, tinta quase preta, verde-escuro, UMA cor de destaque terrosa para número e chamada.
   Fraunces (exibição) + Inter (texto), algarismos tabulares nas tabelas. Escala de espaço base 4. */
:root {
  color-scheme: light;
  --papel: #f6f2e9;
  --papel-2: #eee8da;
  --papel-3: #e4dccb;
  --tinta: #1b1d18;
  --suave: #4f544a;
  --verde: #1e3a2a;
  --verde-2: #2f5a41;
  --terra: #9a461b;
  --terra-escura: #7d3713;
  --linha: #d3cab6;
  --branco: #fffdf8;
  --erro: #9b1c1c;
  --ok: #1e5c35;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --largura: 1120px;
  --serif: "Fraunces", "Source Serif 4", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 17px/1.45 var(--sans); font-feature-settings: "cv11", "ss01";
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); text-underline-offset: 3px; }
a:hover { color: var(--terra-escura); }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0 0 var(--e4); color: var(--verde); font-optical-sizing: auto; }
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.2rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; margin-bottom: var(--e2); }
p { margin: 0 0 var(--e4); max-width: 65ch; }
.envolve { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e4); }
.estreito { max-width: 720px; margin: 0 auto; padding: var(--e7) var(--e4); }
.secao { padding: var(--e8) 0; border-top: 1px solid var(--linha); }
.secao > .envolve > h2 + p.lead { margin-top: calc(-1 * var(--e2)); }
.lead { font-size: 1.15rem; color: var(--suave); }
.rotulo { font: 600 0.78rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--terra); margin-bottom: var(--e3); }
.fonte { font-size: 0.86rem; color: var(--suave); }
.num { font-variant-numeric: tabular-nums; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: var(--e4); top: var(--e4); background: var(--branco); padding: var(--e2) var(--e3); z-index: 10; }

/* Topo */
.topo { border-bottom: 1px solid var(--linha); background: var(--papel); }
.topo .envolve { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); min-height: 64px; }
.marca { display: inline-flex; align-items: center; gap: var(--e2); font: 600 1.1rem/1 var(--serif); color: var(--verde); text-decoration: none; }
.marca svg { width: 28px; height: 28px; flex: none; }
.topo nav { display: flex; gap: var(--e5); font-size: 0.95rem; }
.topo nav a { color: var(--tinta); text-decoration: none; }
.topo nav a:hover { text-decoration: underline; }
@media (max-width: 720px) { .topo nav .opcional { display: none; } }

/* Herói */
.heroi { position: relative; padding: var(--e8) 0 var(--e8); overflow: hidden; }
.heroi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: var(--curvas, none); background-size: 900px auto; background-position: right -120px top -40px; background-repeat: no-repeat;
}
.heroi .envolve { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--e7); align-items: center; }
@media (max-width: 880px) { .heroi .envolve { grid-template-columns: 1fr; gap: var(--e6); } .heroi { padding-top: var(--e7); } }
.heroi h1 { margin-bottom: var(--e4); }
.heroi .lead { margin-bottom: var(--e5); }
.figura { margin: 0; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--e2); box-shadow: 0 1px 0 rgba(27,29,24,.04), 0 12px 32px -18px rgba(27,29,24,.35); }
.figura img { border-radius: 3px; }
.figura figcaption { font-size: 0.8rem; color: var(--suave); padding: var(--e2) var(--e1) 0; line-height: 1.35; }
.amostra-cartao { margin-top: var(--e3); display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: var(--e2); }
.amostra-cartao div { background: var(--papel-2); border-radius: 4px; padding: var(--e2) var(--e3); }
.amostra-cartao b { display: block; white-space: nowrap; font: 600 1.1rem/1.15 var(--serif); color: var(--terra); font-variant-numeric: tabular-nums; }
.amostra-cartao span { font-size: 0.76rem; color: var(--suave); line-height: 1.25; display: block; }

/* Formulário do CAR */
.pedido { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--e5); max-width: 560px; }
.pedido label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: var(--e1); }
.pedido .ajuda { font-size: 0.85rem; color: var(--suave); margin: 0 0 var(--e2); }
.campo { width: 100%; font: 500 1rem/1.3 var(--sans); padding: var(--e3) var(--e3); border: 1.5px solid #9b927f; border-radius: 4px; background: #fff; color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.campo:focus { border-color: var(--verde); outline: 3px solid rgba(154,70,27,.35); outline-offset: 1px; }
.campo[aria-invalid="true"] { border-color: var(--erro); }
.linha-campos { display: grid; gap: var(--e4); margin-bottom: var(--e4); }
.erro-campo { color: var(--erro); font-size: 0.88rem; margin: var(--e1) 0 0; min-height: 1.2em; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 48px; padding: 0 var(--e5); border: 0; border-radius: 4px; background: var(--terra); color: #fff; font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; }
.botao:hover { background: var(--terra-escura); color: #fff; }
.botao.sec { background: transparent; color: var(--verde); border: 1.5px solid var(--verde); }
.botao.sec:hover { background: var(--verde); color: #fff; }
.botao[disabled] { opacity: .55; cursor: progress; }
.pedido .botao { width: 100%; margin-top: var(--e3); }
.pedido .nota { font-size: 0.82rem; color: var(--suave); margin: var(--e3) 0 0; }
.aviso { border-left: 3px solid var(--terra); background: var(--papel-2); padding: var(--e3) var(--e4); border-radius: 0 4px 4px 0; font-size: 0.95rem; }

/* Cartões e grades */
.grade { display: grid; gap: var(--e4); }
.grade.g2 { grid-template-columns: repeat(2, 1fr); }
.grade.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .grade.g3, .grade.g2 { grid-template-columns: 1fr; } }
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--e5); }
.cartao h3 { color: var(--tinta); font-family: var(--sans); font-size: 1.05rem; font-weight: 600; }
.cartao p { font-size: 0.95rem; margin-bottom: 0; }
.cartao .fonte { margin-top: var(--e3); }
.capitulos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--e6); }
.capitulos li { padding: var(--e4) 0; border-top: 1px solid var(--linha); }
.capitulos b { display: block; font-weight: 600; }
.capitulos span { font-size: 0.92rem; color: var(--suave); }
.capitulos em { font-style: normal; font-size: 0.78rem; color: var(--terra); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-left: var(--e1); }
@media (max-width: 720px) { .capitulos { grid-template-columns: 1fr; } }

/* Comparação Receita x estudo */
.versus { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--branco); }
.versus > div { padding: var(--e5); }
.versus > div + div { border-left: 1px solid var(--linha); background: #fbf8f1; }
.versus h3 { font-family: var(--sans); font-size: 1rem; color: var(--tinta); }
.versus ul { margin: 0; padding-left: 1.1em; font-size: 0.95rem; }
.versus li { margin-bottom: var(--e2); }
@media (max-width: 720px) { .versus { grid-template-columns: 1fr; } .versus > div + div { border-left: 0; border-top: 1px solid var(--linha); } }

/* Passos e preços */
.passos { counter-reset: p; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
.passos li { counter-increment: p; }
.passos li::before { content: counter(p); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--terra); color: var(--terra); font: 600 1rem/1 var(--serif); margin-bottom: var(--e3); }
@media (max-width: 720px) { .passos { grid-template-columns: 1fr; } }
.precos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); align-items: stretch; }
.preco { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--e5); display: flex; flex-direction: column; }
.preco.destaque { border: 2px solid var(--verde); }
.preco h3 { font-family: var(--sans); font-size: 1rem; color: var(--tinta); }
.preco .valor { font: 600 2.2rem/1.1 var(--serif); color: var(--terra); font-variant-numeric: tabular-nums; margin: var(--e2) 0 var(--e3); }
.preco p { font-size: 0.93rem; flex: 1; }
@media (max-width: 880px) { .precos { grid-template-columns: 1fr; } }

/* Número grande e tabelas */
.numero-grande { font: 600 clamp(2.3rem, 6vw, 3.8rem)/1.05 var(--serif); color: var(--terra); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: var(--e2) 0 var(--e2); }
.numero-grande small { font: 500 1rem/1 var(--sans); color: var(--suave); letter-spacing: 0; }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--papel-3); vertical-align: top; }
thead th { font-weight: 600; font-size: 0.85rem; color: var(--suave); background: var(--papel-2); }
tbody th { font-weight: 500; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.sobe { color: var(--ok); }
.desce { color: var(--erro); }
.marca-historico { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--terra-escura); background: #f3e3d6; border-radius: 3px; padding: 1px 6px; margin-left: var(--e1); }
th button { all: unset; cursor: pointer; }
th button:focus-visible { outline: 2px solid var(--terra); }

/* Caixa de conversão */
.conversao { background: var(--verde); color: #f3efe4; border-radius: var(--raio); padding: var(--e6); display: grid; grid-template-columns: 1fr auto; gap: var(--e5); align-items: center; margin: var(--e7) 0; }
.conversao h2, .conversao h3 { color: #fff; }
.conversao p { color: #e3ddcf; margin: 0; }
.conversao .botao { background: #e9a873; color: #1b1d18; }
.conversao .botao:hover { background: #f2bd8f; color: #1b1d18; }
@media (max-width: 720px) { .conversao { grid-template-columns: 1fr; padding: var(--e5); } }

/* Perguntas */
details { border-top: 1px solid var(--linha); padding: var(--e4) 0; }
details:last-of-type { border-bottom: 1px solid var(--linha); }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--e4); }
summary::after { content: "+"; font: 400 1.4rem/1 var(--sans); color: var(--terra); }
details[open] summary::after { content: "−"; }
details p { margin: var(--e3) 0 0; color: var(--suave); }

/* Migalhas, listas de links */
.migalhas { font-size: 0.86rem; color: var(--suave); padding-top: var(--e4); }
.migalhas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.migalhas li + li::before { content: "/"; margin-right: var(--e2); color: var(--linha); }
.links-colunas { columns: 3 220px; column-gap: var(--e6); padding: 0; list-style: none; }
.links-colunas li { break-inside: avoid; padding: var(--e1) 0; }

/* Página do pedido */
.estado { display: flex; gap: var(--e3); align-items: center; font-weight: 600; }
.estado::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--terra); flex: none; }
.estado[data-s="entregue"]::before { background: var(--ok); }
.estado[data-s="recusado"]::before, .estado[data-s="falha"]::before { background: var(--erro); }

/* Rodapé e botão fixo no celular */
.rodape { border-top: 1px solid var(--linha); padding: var(--e7) 0 calc(var(--e7) + 64px); font-size: 0.9rem; color: var(--suave); }
.rodape .envolve { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e4); }
.fixo { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--e2) var(--e4) calc(var(--e2) + env(safe-area-inset-bottom)); background: rgba(246,242,233,.96); border-top: 1px solid var(--linha); display: none; z-index: 5; }
.fixo .botao { width: 100%; }
@media (max-width: 720px) { .fixo { display: block; } }
@media (min-width: 721px) { .rodape { padding-bottom: var(--e7); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 520px) {
  .amostra-cartao { grid-template-columns: 1fr; }
  .amostra-cartao div { display: flex; align-items: baseline; gap: var(--e3); }
  .amostra-cartao b { white-space: nowrap; }
}

/* pedidos guardados neste aparelho (home e /pedido/) */
.lista-pedidos { list-style: none; padding: 0; margin: var(--e4) 0; display: grid; gap: var(--e2); }
.lista-pedidos a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e2) var(--e4); padding: var(--e3) var(--e4); border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--tinta); text-decoration: none; }
.lista-pedidos a:hover, .lista-pedidos a:focus-visible { border-color: var(--verde); }
.lista-pedidos .num { overflow-wrap: anywhere; }

/* o botão fixo sai de baixo quando o formulário ou a caixa da prévia está visível (app.js) */
.fixo { transition: transform .2s ease, visibility 0s linear 0s; }
.fixo.escondido { transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
@media (prefers-reduced-motion: reduce) { .fixo, .fixo.escondido { transition: none; } }

.junto { white-space: nowrap; }
/* no celular a tabela de classes mostra 2026 e a variação; o valor de 2025 fica no desktop (a variação já o resume) */
@media (max-width: 600px) { .hist { display: none; } thead th.n { white-space: normal; } .tabela-rolagem th, .tabela-rolagem td { padding-left: var(--e2); padding-right: var(--e2); } }

.busca { margin: var(--e4) 0 var(--e3); max-width: 420px; }
.busca label { display: block; font-weight: 600; margin-bottom: var(--e2); }
.busca .fonte { margin: var(--e2) 0 0; min-height: 1.4em; }

/* sombra de rolagem: quando a tabela é mais larga que a tela, a borda direita escurece e avisa que há mais colunas */
.tabela-rolagem {
  background:
    linear-gradient(to right, var(--branco) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--branco) 30%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(27,29,24,.22), rgba(27,29,24,0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(27,29,24,.22), rgba(27,29,24,0)) right center / 12px 100% no-repeat scroll,
    var(--branco);
}

/* rodada 2 (07/10/2026): margem da faixa da amostra e páginas de termos e privacidade */
.margem { padding: var(--e6) 0 0; max-width: 720px; }
.margem h3 { font-family: var(--sans); font-size: 1rem; color: var(--tinta); margin-bottom: var(--e2); }
.legal h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
.legal h2 { font-size: 1.25rem; margin-top: var(--e6); }
.legal .aviso { margin: 0 0 var(--e5); }
.legal td { font-size: 0.9rem; }
@media (max-width: 600px) { .legal .tabela-rolagem th, .legal .tabela-rolagem td { padding-left: var(--e2); padding-right: var(--e2); } }
@media (max-width: 400px) { .legal td, .legal th { font-size: 0.82rem; } }
@media (max-width: 720px) { .rodape p a { display: inline-block; padding: 10px 0; } }