/* Páginas /site-para/ (geradas por interno/fonte/gerar-seo.js). Mesmas cores da home. */
:root {
  --marinho: #0E1A36;
  --marinho-2: #16264d;
  --verde: #2BD17E;
  --verde-escuro: #1faa64;
  --verde-texto: #13804a;
  --suave: #5B6478;
  --fundo: #F6F8FB;
  --borda: #E3E8F0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--fundo); color: var(--marinho); line-height: 1.6; }
a { color: inherit; }
h1, h2, h3, .marca { font-family: 'Sora', 'Inter', sans-serif; letter-spacing: -0.02em; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.estreito { max-width: 820px; }

.topo { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); }
.topo .container { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-size: 1.25rem; line-height: 1; text-decoration: none; }
.marca svg { width: 26px; height: 26px; }
.marca b { font-weight: 800; letter-spacing: -0.035em; }
.marca i { font-style: normal; font-weight: 400; color: var(--suave); margin-left: 3px; }
.topo nav { display: flex; align-items: center; gap: 22px; font-size: .92rem; font-weight: 500; color: var(--suave); }
.topo nav a { text-decoration: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; border-radius: 999px; padding: 14px 26px; text-decoration: none; transition: transform .15s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-verde { background: var(--verde); color: #05301a; }
.btn-verde:hover { background: #3ee08f; }
.btn-pequeno { padding: 9px 18px; font-size: .88rem; }

.trilha { padding-top: 14px; padding-bottom: 14px; font-size: .85rem; color: var(--suave); }
.trilha a { color: var(--suave); }

.hero { background: linear-gradient(160deg, var(--marinho), var(--marinho-2)); color: #fff; padding: 72px 0 80px; }
.selo { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); margin-bottom: 16px; }
.hero h1 { font-size: clamp(1.9rem, 4.8vw, 3.1rem); font-weight: 800; line-height: 1.12; max-width: 820px; margin-bottom: 20px; }
.hero p { color: rgba(255,255,255,.82); font-size: 1.08rem; max-width: 720px; margin-bottom: 30px; }
.acoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.link-claro { color: rgba(255,255,255,.88); font-weight: 600; padding: 14px 6px; text-decoration: none; }

section { padding: 72px 0; }
section.claro { background: #fff; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
.sub { color: var(--suave); max-width: 720px; margin-bottom: 28px; }
.nota { color: var(--suave); font-size: .92rem; margin-top: 16px; }
.nota a { color: var(--verde-texto); font-weight: 700; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(14,26,54,.10); }
.card img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; background: var(--borda); }
.card span { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 20px; color: var(--suave); font-size: .9rem; flex: 1; }
.card b { font-family: 'Sora', sans-serif; color: var(--marinho); font-size: 1.02rem; }
.card small { display: inline-block; vertical-align: 2px; margin-left: 4px; font-size: .7rem; font-weight: 700; color: #fff; background: var(--marinho); border-radius: 999px; padding: 2px 9px; }
.card em { font-style: normal; font-weight: 700; color: var(--verde-texto); margin-top: auto; padding-top: 8px; }

.itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 24px; }
.itens > * { background: var(--fundo); border: 1px solid var(--borda); border-radius: 16px; padding: 22px; }
section:not(.claro) .itens > * { background: #fff; }
.itens h3 { font-size: 1.05rem; margin-bottom: 6px; }
.itens p { color: var(--suave); font-size: .93rem; }
.item-link { text-decoration: none; transition: border-color .2s; }
.item-link:hover { border-color: var(--verde-escuro); }
.item-link h3 { color: var(--verde-texto); }

.checks { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.checks li { position: relative; padding-left: 32px; }
.checks li::before { content: '✓'; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #e6f9ef; color: var(--verde-texto); font-weight: 800; font-size: .75rem; display: grid; place-items: center; }

.tabela { overflow-x: auto; margin-top: 20px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 520px; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { background: var(--fundo); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
tr:last-child td { border-bottom: 0; }

.passos { list-style: none; counter-reset: p; display: grid; gap: 14px; margin-top: 20px; }
.passos li { counter-increment: p; position: relative; padding: 4px 0 4px 56px; color: var(--suave); }
.passos li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--marinho); color: var(--verde); font-family: 'Sora', sans-serif; font-weight: 800; display: grid; place-items: center; }
.passos b { display: block; color: var(--marinho); }

.faq { display: grid; gap: 10px; margin-top: 20px; }
.faq details { background: var(--fundo); border: 1px solid var(--borda); border-radius: 14px; padding: 16px 18px; }
.faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--verde-texto); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--suave); margin-top: 10px; font-size: .95rem; }

.vit-estatica { columns: 3 240px; column-gap: 28px; font-size: .9rem; }
.vit-estatica section { break-inside: avoid; padding: 0 0 16px; }
.vit-estatica h3 { font-size: 1rem; margin-bottom: 4px; }
.vit-estatica ul { list-style: none; color: var(--suave); }
.vit-estatica a { color: var(--marinho); font-weight: 600; }

.cta { text-align: center; }
.cta p { color: var(--suave); margin-bottom: 26px; }

footer { background: var(--marinho); color: rgba(255,255,255,.72); padding: 40px 0; font-size: .88rem; }
footer .container { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
footer .marca { color: #fff; font-size: 1.1rem; }
footer .marca i { color: rgba(255,255,255,.7); }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
footer a { text-decoration: none; }
footer a:hover { color: #fff; }

@media (max-width: 760px) {
  .topo nav a:not(.btn) { display: none; }
  .hero { padding: 52px 0 60px; }
  section { padding: 56px 0; }
}