/* Páginas por nicho (seo/paginasNicho.ts): HTML puro, mesmo fundo escuro da home */
@font-face { font-family: "Red Hat Display"; src: url(/fontes/red-hat-display.woff2) format("woff2"); font-weight: 300 900; font-display: swap }
@font-face { font-family: "Albert Sans"; src: url(/fontes/albert-sans.woff2) format("woff2"); font-weight: 100 900; font-display: swap }
* { box-sizing: border-box }
body { margin: 0; background: #0B0618; color: #ECE8FB; font: 17px/1.65 "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif }
a { color: #CFC3FB }
.caixa { max-width: 1040px; margin: 0 auto; padding: 0 16px }
.topo { position: sticky; top: 0; background: rgba(11, 6, 24, .85); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, .06); z-index: 1 }
.topo .caixa { display: flex; justify-content: space-between; align-items: center; height: 64px; gap: 12px }
.topo img { height: 35px; width: auto; display: block }
.topo nav { display: flex; align-items: center; gap: 16px; font-size: 15px }
.topo nav a:not(.botao) { color: #ECE8FB; text-decoration: none }
section { padding: 56px 0 }
.hero { padding: 72px 0 56px; background: linear-gradient(180deg, #140A33, #0B0618) }
.trilha { font-size: 13px; color: #B9B2D6; margin: 0 0 16px }
.trilha a { color: #B9B2D6 }
h1, h2, h3 { font-family: "Red Hat Display", system-ui, sans-serif }
h1 { font-size: clamp(2.2rem, 7vw, 3.75rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 20px; font-weight: 700; max-width: 820px }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 28px; font-weight: 700 }
h3 { font-size: 1.1rem; margin: 0 0 6px; font-weight: 800 }
.lead { font-size: 1.2rem; color: #B9B2D6; max-width: 720px; margin: 0 0 28px }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 }
.botao { display: inline-block; background: #5B2BE0; color: #fff; padding: 14px 28px; border-radius: 999px; font-weight: 800; text-decoration: none; border: 1px solid #8b5cf6 }
.botao:hover { background: #4A22BE }
.botao.contorno { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff }
.botao.contorno:hover { background: rgba(255, 255, 255, .08) }
.botao.pequeno { padding: 8px 18px; font-size: 14px }
.confianca { margin: 20px 0 0; font-size: 14px; color: #B9B2D6 }
.grade { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px }
.grade li, .passos li { background: #140A33; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; padding: 24px }
.grade p, .passos p { margin: 0; color: #B9B2D6; font-size: 15px }
.ideias { columns: 2 260px; padding-left: 20px; margin: 0; color: #B9B2D6 }
.ideias li { margin-bottom: 8px; break-inside: avoid }
.passos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: passo }
.passos li { counter-increment: passo }
.passos li::before { content: counter(passo); display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: #5B2BE0; color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: 12px }
.preco { margin: 28px 0 0; color: #B9B2D6 }
details { border-bottom: 1px solid rgba(255, 255, 255, .12); padding: 16px 0 }
summary { cursor: pointer; font-weight: 700; font-size: 1.05rem }
details p { color: #B9B2D6; margin: 12px 0 0 }
.final { text-align: center; background: #140A33 }
.final .acoes { justify-content: center }
footer { border-top: 1px solid rgba(255, 255, 255, .1); padding: 32px 0 48px; font-size: 14px; color: #B9B2D6 }
footer p { margin: 0 0 10px }
@media (max-width: 520px) { .topo nav a:not(.botao) { display: none } .botao { width: 100%; text-align: center } }