/* ═══════════════════════════════════════════════════════════ CSS NÃO CRÍTICO — tudo que fica abaixo da dobra. Carregado sem bloquear a pintura (media="print" + onload). O crítico está inline no do _base.php. Vale para todas as LPs. Nada aqui é específico de campanha. ═══════════════════════════════════════════════════════════ */ /* Atalho de teclado: some da tela até receber foco. */ .pula{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--tinta);color:var(--branco); padding:12px 18px;border-radius:0 0 var(--raio) 0; font-weight:600;text-decoration:none } .pula:focus{left:0} .secao{padding:52px 0} .secao-linha{border-top:1px solid var(--linha);background:var(--branco)} .env-estreito{max-width:760px} .tit-secao{font-size:clamp(24px,5vw,34px);text-align:center;margin-bottom:32px} /* ── 4. Benefícios ─────────────────────────────────────── */ .beneficios{list-style:none;margin:0;padding:0;display:grid;gap:26px} .beneficios li{text-align:left} .bene-ic{ display:inline-flex;align-items:center;justify-content:center; width:56px;height:56px;border-radius:var(--raio); background:rgba(249,115,22,.13);color:var(--laranja-txt); margin-bottom:14px } .beneficios h3{font-size:20px;margin-bottom:6px} .beneficios p{color:var(--cinza);font-size:16px;margin:0} /* ── 5. Oferta ─────────────────────────────────────────── */ .plano{ position:relative;max-width:560px;margin-inline:auto; background:var(--creme);border:2px solid var(--tinta);border-radius:10px; padding:30px 24px 26px } .secao-linha .plano{background:var(--creme)} .plano-tarja{ position:absolute;top:-15px;left:50%;transform:translateX(-50%); background:var(--laranja);color:var(--tinta); font-family:var(--f-tit);font-weight:700;font-size:14px; letter-spacing:.04em;text-transform:uppercase; padding:7px 16px;border-radius:var(--raio);white-space:nowrap } .plano-nome{font-size:26px;margin-bottom:4px} .plano-linha{color:var(--cinza);font-size:16px;margin-bottom:18px} .plano-preco{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:22px} .plano-preco strong{font-family:var(--f-tit);font-weight:700;font-size:clamp(42px,10vw,58px); line-height:1;letter-spacing:-.03em} .plano-de{font-size:24px;color:var(--cinza);text-decoration-thickness:2px} .plano-obs{font-size:15px;color:var(--cinza);font-weight:600;width:100%} .plano-itens{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px} .plano-itens li{display:flex;align-items:flex-start;gap:11px;font-size:16px;line-height:1.45} .plano-itens .ok{ flex:none;width:24px;height:24px;border-radius:50%;margin-top:1px; background:var(--laranja);color:var(--tinta); display:flex;align-items:center;justify-content:center } .plano-notas{border-top:1px solid var(--linha);padding-top:16px;margin-bottom:22px} .plano-notas p{font-size:15px;color:var(--cinza);margin:0 0 6px} .plano-notas p:last-child{margin-bottom:0} .plano-maior{text-align:center;font-size:15px;margin:14px 0 0} /* ── 6. Portfólio ──────────────────────────────────────── */ .trabalhos{list-style:none;margin:0;padding:0;display:grid;gap:22px} .trabalhos li{ background:var(--branco);border:1px solid var(--linha);border-radius:10px; overflow:hidden;padding-bottom:20px } .secao-linha .trabalhos li{background:var(--creme)} .trabalhos img{width:100%;aspect-ratio:600/380;object-fit:cover;border-bottom:1px solid var(--linha)} .trabalho-bloco{ display:flex;align-items:center;justify-content:center; aspect-ratio:600/300;background:var(--laranja);color:var(--tinta); font-family:var(--f-tit);font-weight:700;font-size:76px;line-height:1 } .trabalhos li:nth-child(2n) .trabalho-bloco{background:var(--tinta);color:var(--creme)} .trabalho-tag{ display:inline-block;margin:18px 20px 0; font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--laranja-txt) } .trabalhos h3{font-size:20px;margin:6px 20px 4px} .trabalhos p{margin:0 20px;color:var(--cinza);font-size:16px} /* ── 7. Depoimentos ────────────────────────────────────── */ .depoimentos{list-style:none;margin:0;padding:0;display:grid;gap:22px} .depoimentos li{ background:var(--creme);border:1px solid var(--linha); border-radius:10px;padding:24px 22px } .depoimentos blockquote{margin:10px 0 18px;font-size:17px;line-height:1.55} .depoimentos blockquote::before{content:'\201C'} .depoimentos blockquote::after{content:'\201D'} .dep-quem{display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.35} .dep-ini{ flex:none;width:48px;height:48px;border-radius:var(--raio); background:var(--laranja);color:var(--tinta); display:flex;align-items:center;justify-content:center; font-family:var(--f-tit);font-weight:700;font-size:17px } /* ── 8. FAQ ────────────────────────────────────────────── */ .faq{border-bottom:1px solid var(--linha)} .faq summary{ cursor:pointer;list-style:none; padding:18px 40px 18px 0;position:relative; font-family:var(--f-tit);font-weight:600;font-size:18px } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:'';position:absolute;right:10px;top:50%; width:11px;height:11px;margin-top:-7px; border-right:2.5px solid var(--laranja-txt); border-bottom:2.5px solid var(--laranja-txt); transform:rotate(45deg);transition:transform .18s ease } .faq[open] summary::after{transform:rotate(-135deg);margin-top:-3px} .faq-r{padding:0 0 20px} .faq-r p{margin:0;color:var(--cinza);font-size:16px} /* ── 9. CTA final e rodapé ─────────────────────────────── */ .faixa{background:var(--laranja);color:var(--tinta);padding:48px 0;text-align:center} .faixa h2{font-size:clamp(25px,5.4vw,36px);margin-bottom:8px} .faixa p{font-size:18px;margin-bottom:24px} .faixa .btn{background:var(--tinta);color:var(--creme);font-size:18px;min-height:56px;padding:15px 28px} .rodape{background:var(--tinta);color:#CFC9C1;padding:40px 0;font-size:15px;text-align:center} .rodape p{margin:0 0 6px} .rodape a{color:#F5B27A} .rodape-marca{font-family:var(--f-tit);font-weight:700;font-size:19px;color:var(--branco);margin-bottom:12px} .rodape-legal{margin-top:18px;font-size:14px} /* Espaço para o botão flutuante não tapar o rodapé no celular. */ .rodape{padding-bottom:96px} /* ── Telas maiores ─────────────────────────────────────── */ @media (min-width:700px){ .beneficios{grid-template-columns:repeat(3,1fr);gap:32px} .trabalhos{grid-template-columns:repeat(2,1fr)} .depoimentos{grid-template-columns:repeat(3,1fr)} .plano{padding:36px 34px 30px} .rodape{padding-bottom:40px} } @media (min-width:860px){ .secao{padding:68px 0} .zap-flut{width:62px;height:62px;right:24px;bottom:24px} } /* ── Alvos de toque ──────────────────────────────────────── Todo link clicável tem no mínimo 44px de altura de toque. Link de texto no meio de um parágrafo é fácil de errar no dedo, e link errado numa página de tráfego pago é dinheiro que já foi gasto e não converteu. */ .plano-maior a, .rodape a{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:4px 10px } .rodape p a{margin-inline:-6px} /* O header é sticky: sem isso, clicar em "Quero o Plano" leva o topo do formulário para debaixo da barra. */ #form,#oferta{scroll-margin-top:78px} /* Os outros serviços: uma frase discreta, nunca uma tabela. Existe só para quem precisa de loja virtual não achar que aqui só se faz site de 5 páginas. */ .plano-outros{ text-align:center;font-size:14.5px;color:var(--cinza); margin:16px 0 0;line-height:1.45 } /* ── Contagem regressiva da promoção ─────────────────────── A data por extenso fica junto do relógio de propósito: número correndo sozinho parece truque, número COM data é promessa que a pessoa pode conferir. */ .crono{ display:flex;flex-direction:column;align-items:center;gap:6px; background:var(--tinta);color:var(--creme); border-radius:8px;padding:16px 18px;margin:0 0 22px;text-align:center } .crono-rot{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.82} .crono-nums{display:flex;align-items:baseline;gap:4px; font-family:var(--f-tit);font-weight:700;line-height:1} .crono-nums b{ font-size:34px;background:rgba(255,255,255,.10); border-radius:5px;padding:6px 9px;min-width:52px;text-align:center; font-variant-numeric:tabular-nums /* não "pula" a cada segundo */ } .crono-nums i{font-style:normal;font-size:15px;font-weight:600;opacity:.7;margin-right:7px} .crono-data{font-size:13.5px;opacity:.78} .crono-fim{ background:#FDECEC;border:1px solid #F3B7B7;color:#8E1616; border-radius:var(--raio);padding:12px 14px;font-size:15px; font-weight:600;margin:0 0 22px;text-align:center } /* Selo de promoção no hero: o preço do anúncio precisa aparecer antes de rolar, senão o Google Ads não reconhece a página como relevante para o anúncio e o clique fica mais caro. */ .hero-promo{ display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:9px; background:var(--laranja);color:var(--tinta); border-radius:var(--raio);padding:9px 15px;margin:0 0 16px; font-family:var(--f-tit);font-weight:700;font-size:15px } .hero-promo s{opacity:.65;font-weight:600} .hero-promo b{font-size:22px;line-height:1} @media (min-width:700px){ .crono{flex-direction:row;justify-content:center;gap:16px;flex-wrap:wrap} .crono-data{width:100%} } /* ── O problema, antes da solução ────────────────────────── Fundo escuro de propósito: quebra a página em dois e marca a virada de "o que dói" para "o que resolve". Creme sobre #1A1A1A dá 14:1, sobra contraste. */ .dores{background:var(--tinta);color:var(--creme);padding:54px 0} .dores .tit-secao{color:var(--branco);margin-bottom:12px} .dores-linha{ text-align:center;max-width:60ch;margin:0 auto 34px; color:#C9C2B9;font-size:17px } .lista-dores{list-style:none;margin:0;padding:0;display:grid;gap:20px} .lista-dores li{ background:rgba(255,255,255,.055); border-left:4px solid var(--laranja); border-radius:0 8px 8px 0;padding:22px 22px 20px } .lista-dores h3{ font-size:19px;line-height:1.25;margin-bottom:8px;color:var(--branco) } .lista-dores p{margin:0;color:#C9C2B9;font-size:16px;line-height:1.55} .dores-fecho{ text-align:center;max-width:56ch;margin:32px auto 0; font-family:var(--f-tit);font-weight:600;font-size:19px; line-height:1.4;color:var(--branco) } .dores-cta{text-align:center;margin:26px 0 0} @media (min-width:700px){ .dores{padding:70px 0} .lista-dores{grid-template-columns:repeat(2,1fr);gap:22px} .lista-dores h3{font-size:20px} } /* ── Projeto em destaque ─────────────────────────────────── Um card maior antes da grade. Serve para o projeto que o público local já conhece: reconhecimento vale mais que print bonito de cliente que ninguém ouviu falar. */ .destaque{ background:var(--tinta);color:var(--creme); border-radius:12px;overflow:hidden;margin:0 0 30px; display:grid } .destaque-foto img{ width:100%;aspect-ratio:600/410;object-fit:cover; border-bottom:4px solid var(--laranja) } .destaque-txt{padding:26px 22px 24px} .destaque-tag{ display:inline-block;background:var(--laranja);color:var(--tinta); font-family:var(--f-tit);font-weight:700;font-size:13px; letter-spacing:.07em;text-transform:uppercase; padding:6px 13px;border-radius:5px;margin-bottom:14px } .destaque h3{ font-size:28px;color:var(--branco);margin-bottom:8px; display:flex;align-items:baseline;flex-wrap:wrap;gap:12px } .destaque-anos{ font-family:var(--f-txt);font-weight:600;font-size:14px; color:var(--creme);opacity:.72;letter-spacing:.02em; border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:4px 12px } .destaque-chamada{ font-family:var(--f-tit);font-weight:600;font-size:19px; line-height:1.35;color:var(--branco);margin-bottom:12px } .destaque-corpo{color:#C9C2B9;font-size:16px;line-height:1.55;margin-bottom:18px} .destaque-fatos{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px} .destaque-fatos li{display:flex;align-items:flex-start;gap:11px;font-size:16px;line-height:1.4} .destaque-fatos .ok{ flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px; background:var(--laranja);color:var(--tinta); display:flex;align-items:center;justify-content:center } /* A nota de transparência é discreta mas legível: 5.2:1 no escuro. Ela não pode parecer letra miúda escondida, senão perde a função. */ .destaque-nota{ border-left:3px solid var(--laranja); padding:2px 0 2px 14px;margin:0; font-size:14.5px;line-height:1.5;color:#B5AEA5 } @media (min-width:760px){ .destaque{grid-template-columns:minmax(0,46%) 1fr;align-items:stretch} .destaque-foto{height:100%} .destaque-foto img{height:100%;aspect-ratio:auto;border-bottom:0;border-right:4px solid var(--laranja)} .destaque-txt{padding:30px 30px 28px} .destaque h3{font-size:31px} }