/* ========================================================================== PÁGINAS INTERNAS Carregado pelas 12 páginas da raiz que não são a home, e pelo blog. Leva a mesma linguagem da home num tom mais sóbrio: o topo é escuro e a tipografia é grande, mas sem hero de tela cheia e sem esteira. Página de serviço é página de leitura e de busca, então respiro e legibilidade vêm antes de efeito. Os tokens (--palco, --t-h2, --sec-y, --ease, --nav-h) vêm do styles.css. ========================================================================== */ body.interna{overflow-x:clip} /* ---------- topo escuro ---------- */ body.interna main.hero{ position:relative; background:var(--palco); color:#fff; padding:calc(var(--nav-h) + clamp(56px,7vw,96px)) 0 clamp(48px,6vw,80px); margin-bottom:clamp(40px,5vw,72px); overflow:hidden; isolation:isolate; } body.interna main.hero .wrap{position:relative;z-index:1} /* O brilho fica no canto, longe do texto, e é o que evita o retângulo chapado. */ body.interna main.hero::before{ content:"";position:absolute;right:-160px;top:-180px; width:720px;height:640px;border-radius:50%;pointer-events:none;z-index:-1; background:radial-gradient(circle,rgba(27,159,96,.22),transparent 66%); } /* Quando a página tem imagem de topo, ela entra por trás com o mesmo véu do hero da home: contraste garantido independentemente da foto. */ body.interna .hero-fundo{position:absolute;inset:0;z-index:-2;margin:0;overflow:hidden} body.interna .hero-fundo img{width:100%;height:100%;object-fit:cover;display:block;opacity:.52} body.interna .hero-veu{ position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(90deg,rgba(7,16,12,.95) 0%,rgba(7,16,12,.86) 42%,rgba(7,16,12,.52) 100%); } @media(max-width:820px){ body.interna .hero-veu{background:linear-gradient(180deg,rgba(7,16,12,.88),rgba(7,16,12,.82))} } body.interna main.hero .eyebrow{color:#5BE49B} body.interna main.hero h1{ font-size:var(--t-h2);color:#fff;letter-spacing:-.03em; margin-top:14px;max-width:16ch;text-wrap:balance; } body.interna main.hero p.sub{ color:rgba(255,255,255,.74);font-size:var(--t-lead); margin:20px 0 26px;max-width:56ch;line-height:1.55; } body.interna main.hero .hero-points{gap:13px;margin-bottom:30px} body.interna main.hero .hero-points li{color:rgba(255,255,255,.86);font-size:15.5px} body.interna main.hero .hero-points .ck{background:rgba(91,228,155,.16);color:#5BE49B;width:22px;height:22px;flex:0 0 22px} body.interna main.hero .btn-primary{padding:14px 26px;font-size:15px} body.interna main.hero .trustline{border-top-color:var(--palco-linha);color:var(--palco-txt-soft)} body.interna main.hero .trustline b{color:#fff} /* ---------- ritmo das seções ---------- */ body.interna section{padding:clamp(48px,5.5vw,78px) 0} body.interna .sec-head{max-width:620px;margin-bottom:clamp(28px,3.4vw,44px)} body.interna .sec-head h2{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.025em;margin-top:12px} body.interna .card,body.interna .step{padding:26px 24px;border-radius:16px} body.interna .card h3,body.interna .step h3{font-size:18.5px} body.interna .card .ic{width:44px;height:44px;border-radius:12px} body.interna .card .ic svg{width:23px;height:23px} body.interna .faq{max-width:760px} body.interna #faq summary{font-size:17px} body.interna .final{border-radius:22px;padding:clamp(48px,6vw,82px) 24px} body.interna .final h2{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.025em} /* ---------- blog ---------- O topo do post usa o mesmo palco escuro das outras internas, então o que estava escrito para fundo claro (a meta, a etiqueta, o link de voltar) precisa ser reescrito aqui. O corpo do artigo segue claro, que é o certo para leitura longa. */ body.interna main.post-hero .voltar{color:#5BE49B;font-size:13px;font-weight:600;text-decoration:none} body.interna main.post-hero .voltar:hover{color:#fff} body.interna main.post-hero h1{max-width:20ch} body.interna main.post-hero .post-meta{color:var(--palco-txt-soft);margin-top:20px} body.interna main.post-hero .post-meta .tag{background:rgba(91,228,155,.16);color:#5BE49B} body.interna .post-body{padding-top:0} /* ========================================================================== TEXTO CORRIDO NAS PÁGINAS DE SERVIÇO As páginas tinham de 223 a 400 palavras, quando quem lidera essas buscas tem de 2.500 a 4.500. Página magra não ranqueia para termo disputado, por melhor que esteja escrita. Isto é a caixa onde o texto longo cabe sem cansar. ========================================================================== */ .prosa{max-width:720px} .prosa p{color:var(--ink-soft);font-size:17px;line-height:1.75;margin:0 0 18px} .prosa h3{font-size:21px;margin:36px 0 12px;color:var(--ink)} .prosa h3:first-child{margin-top:0} .prosa ul{color:var(--ink-soft);font-size:17px;line-height:1.75;margin:0 0 20px;padding-left:22px} .prosa li{margin-bottom:9px} .prosa li::marker{color:var(--teal-txt)} .prosa strong{color:var(--ink);font-weight:600} .prosa a{color:var(--teal-txt);font-weight:600} /* A tabela de comparação. Rola sozinha no celular em vez de espremer a coluna. */ .tabela-rolagem{overflow-x:auto;margin:0 0 22px} .prosa table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px} .prosa th,.prosa td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top} .prosa th{font-family:"Inter",sans-serif;font-weight:600;color:var(--ink);font-size:14px} .prosa td{color:var(--ink-soft);line-height:1.5} .prosa tbody tr:last-child td{border-bottom:0} /* Caixa de destaque, para o aviso que evita retrabalho caro. */ .aviso{ background:var(--teal-light);border:1px solid rgba(27,159,96,.22); border-left:3px solid var(--teal-txt); border-radius:12px;padding:20px 22px;margin:0 0 22px; } .aviso p{margin:0;font-size:16px;color:var(--ink)} .aviso p+p{margin-top:10px} /* --------------------------------------------------------------------------- Filtro do blog. Vive só em /blog/, mas mora aqui porque toda página interna já baixa este arquivo e um