:root { --cor: #0f5132; --cor2: #198754; --fundo: #f6f8f7; --texto: #1d2420; --borda: #d4ddd8; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fundo); }
a { color: var(--cor2); }
header.topo { background: #fff; border-bottom: 1px solid var(--borda); }
header.topo .wrap { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: space-between; padding: 14px 20px; }
.marca { font-weight: 800; font-size: 1.15rem; color: var(--cor); text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hero { padding: 36px 0 12px; }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.2; margin: 0 0 10px; }
.hero p { font-size: 1.08rem; max-width: 760px; margin: 0; }
.selos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .95rem; }
.selos li::before { content: "✓ "; color: var(--cor2); font-weight: 700; }
.grade { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 24px 0 48px; }
@media (min-width: 960px) { .grade { grid-template-columns: 1fr 1fr; } .coluna-previa { position: sticky; top: 16px; align-self: start; } }
fieldset { border: 1px solid var(--borda); border-radius: 10px; background: #fff; padding: 14px 16px 6px; margin: 0 0 16px; }
legend { font-weight: 700; padding: 0 6px; }
.campo { margin-bottom: 12px; }
.campo-erro input, .campo-erro textarea, .campo-erro select { border-color: #b02a37; background: #fdf0f1; box-shadow: 0 0 0 2px rgba(176, 42, 55, .15); }
.campo-erro label { color: #b02a37; }
.aviso-campo { display: block; color: #b02a37; font-size: .82rem; min-height: 0; margin-top: 3px; }
.aviso-campo:empty { display: none; }
.campo label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
.req { color: #b02a37; }
input, select, textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cor2); border-color: transparent; }
.campo-erro input:focus, .campo-erro textarea:focus, .campo-erro select:focus { outline-color: #b02a37; }
.previa-caixa { position: relative; background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 28px 30px; max-height: 78vh; overflow: auto;
  font-family: "Times New Roman", Times, serif; font-size: .95rem; text-align: justify; }
.previa-caixa::after { content: "PRÉVIA"; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 800 5rem system-ui; color: rgba(15, 81, 50, .07); transform: rotate(-30deg); }
.previa-caixa h3 { text-align: center; font-size: 1.05rem; }
.previa-caixa h4 { font-size: .95rem; margin: 1.2em 0 .3em; }
.borrado { filter: blur(4px); user-select: none; }
.compra { background: #fff; border: 2px solid var(--cor2); border-radius: 10px; padding: 16px; margin-top: 16px; }
.compra .preco { font-size: 1.6rem; font-weight: 800; color: var(--cor); }
.botao { display: inline-block; width: 100%; padding: 14px; border: 0; border-radius: 9px; background: var(--cor2); color: #fff; font: 700 1.05rem system-ui; cursor: pointer; text-align: center; text-decoration: none; margin-top: 10px; }
.botao:hover { background: var(--cor); }
.botao.sec { background: #fff; color: var(--cor); border: 2px solid var(--cor2); }
.erro { color: #b02a37; font-weight: 600; min-height: 1.4em; margin: 8px 0 0; }
.miudo { font-size: .85rem; color: #55605a; }
#modal { border: 0; padding: 0; background: transparent; max-width: calc(100% - 32px); width: 420px; max-height: calc(100% - 32px); }
#modal::backdrop { background: rgba(0, 0, 0, .55); }
.janela { background: #fff; border-radius: 12px; padding: 22px; width: 100%; text-align: center; position: relative; }
.janela img { width: 240px; height: 240px; background: #fff; border: 1px solid #dfe5e1; border-radius: 8px; }
#copiacola { width: 100%; font-size: .8rem; margin-bottom: 8px; }
#fechar { position: absolute; right: 10px; top: 6px; border: 0; background: none; font-size: 1.6rem; cursor: pointer; }
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 20px 0 40px; }
.card { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.card h2 { font-size: 1.15rem; margin: 0 0 8px; }
.card p { flex: 1; margin: 0 0 8px; }
section.texto { background: #fff; border-top: 1px solid var(--borda); padding: 28px 0 40px; }
section.texto h2 { font-size: 1.3rem; }
details { border-bottom: 1px solid var(--borda); padding: 10px 0; }
summary { font-weight: 600; cursor: pointer; }
footer { padding: 26px 0 40px; font-size: .85rem; color: #55605a; }
footer a { display: inline-block; margin: 0 14px 6px 0; }
.grade > * { min-width: 0; }
.previa-caixa { overflow-wrap: anywhere; }
/* Como funciona */
.passos { padding: 8px 0 36px; }
.passos h2 { font-size: 1.3rem; margin: 0 0 14px; }
.passos ol { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.passos li { counter-increment: passo; background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 16px 16px 16px 62px; position: relative; }
.passos li::before { content: counter(passo); position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cor2); color: #fff; font-weight: 800; display: grid; place-items: center; }
.passos strong { display: block; margin-bottom: 2px; }
.passos span { font-size: .93rem; color: #3d4741; }
.vantagens { padding-left: 1.1em; }
.vantagens li { margin-bottom: 8px; }
/* Barra de compra fixa: só no celular, enquanto o bloco de pagamento não está à vista */
.barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; justify-content: space-between;
  background: #fff; border-top: 1px solid var(--borda); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.barra-compra[hidden] { display: none; }
.barra-compra strong { color: var(--cor); font-size: 1.15rem; }
.barra-compra .botao { width: auto; margin: 0; padding: 11px 18px; }
@media (min-width: 960px) { .barra-compra { display: none !important; } }
.botao:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--cor2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
html { scroll-behavior: smooth; }
/* Calculadoras */
.secao { font-size: 1.3rem; margin: 8px 0 0; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: .93rem; margin: 4px 0 12px; }
.check input { width: auto; margin-top: 4px; }
.resultado { background: #fff; border: 2px solid var(--cor2); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.resultado .valor { font-size: 2rem; font-weight: 800; color: var(--cor); line-height: 1.2; }
.resultado p { margin: 8px 0 0; }
.oferta { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 16px 18px; }
.oferta p { margin: 0; }
.garantia { font-size: .88rem; margin: 10px 0 0; padding: 9px 11px; background: #eef7f1; border-radius: 8px; }
.guardar { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda); }
.guardar p { margin: 0 0 4px; }
.conteudo { padding: 8px 0 36px; }
.conteudo .grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.conteudo .grupo { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 14px 18px; }
.conteudo h3 { font-size: 1rem; margin: 0 0 6px; color: var(--cor); }
.conteudo ul { margin: 0; padding-left: 18px; }
.conteudo li { margin: 2px 0; }
.avaliar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); }
.avaliar p { margin: 0 0 4px; }
.estrelas { display: flex; gap: 4px; justify-content: center; margin: 4px 0 8px; }
.estrelas button { font-size: 2rem; line-height: 1; background: none; border: 0; cursor: pointer; color: #c9d2cd; padding: 2px 4px; }
.estrelas button.on { color: #e0a100; }

/* Cards por tema, relacionados e guias */
.card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.card-preco { font-weight: 700; color: var(--cor); font-size: 1.1rem; margin: 4px 0 0; }
.cards + .secao, .lista-guias + .secao { margin-top: 4px; }
.barra-compra .botao.sec { padding: 9px 14px; }
.barra-compra span { margin-right: auto; }
section.relacionados { padding: 28px 0 8px; }
section.relacionados h2 { font-size: 1.3rem; margin: 0; }
section.relacionados .cards { padding-bottom: 24px; }
.lista-guias { padding-left: 1.1em; margin: 10px 0 36px; }
.lista-guias li { margin-bottom: 8px; }
.guia { max-width: 780px; padding-top: 22px; padding-bottom: 32px; }
.guia h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.2; margin: 8px 0 10px; }
.guia h2 { font-size: 1.25rem; margin: 26px 0 8px; }
.guia .lead { font-size: 1.08rem; }
.guia .oferta { margin: 28px 0 18px; }
.guia .cards { padding-top: 14px; }
.formula { background: #fff; border-left: 4px solid var(--cor2); padding: 10px 14px; font-weight: 600; }
.trilha a { color: inherit; }
section.relacionados .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }