/* Página pública "Venda com a Tilim Pay" (0.15.0). Paleta Sálvia (propostas/marca/paletas.json). */
:root {
  --fundo: #F4F7F3; --superficie: #FFFFFF; --texto: #14261D; --texto-secundario: #4F6157; --borda: #DCE5DE;
  --primaria: #0F7A55; --primaria-hover: #0B6B4A; --texto-botao: #FFFFFF; --destaque: #E9B949; --destaque-suave: #E7F3EC;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: Inter, system-ui, -apple-system, sans-serif; line-height: 1.5; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1040px; margin: 0 auto; padding: 16px; }
.logo { height: 48px; width: auto; }
main { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; }
.hero { padding: 40px 0 24px; max-width: 720px; }
.hero h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.1; margin: 0 0 12px; }
.sub { font-size: 18px; color: var(--texto-secundario); margin: 0 0 20px; }
.nota { font-size: 14px; color: var(--texto-secundario); }
.btn { display: inline-block; background: var(--primaria); color: var(--texto-botao); text-decoration: none; font-weight: 600; padding: 14px 22px; border-radius: 10px; }
.btn:hover, .btn:focus-visible { background: var(--primaria-hover); }
.btn.sec { background: var(--superficie); color: var(--primaria); border: 1px solid var(--borda); padding: 10px 16px; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 20px; }
.cartao h2 { font-size: 18px; margin: 0 0 8px; }
.cartao p { margin: 0; color: var(--texto-secundario); }
.exemplos { margin: 32px 0; }
.tabela { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borda); font-size: 15px; }
th { background: var(--destaque-suave); font-weight: 600; }
.final { text-align: center; padding: 32px 0; }
.rodape { text-align: center; font-size: 13px; color: var(--texto-secundario); padding: 24px 16px; border-top: 1px solid var(--borda); }