/* =========================================================================== Alvo — encaixe do layout dentro do Woodmart. Carrega DEPOIS do base.css e só nas páginas com modelo "Alvo — ...". Cada regra aqui conserta uma coisa que o tema pai fazia com o nosso conteúdo; nada disso alcança a loja nem o resto do site. =========================================================================== */ /* 1) O layout é de ponta a ponta. O Woodmart envolve o conteúdo num
de 1182px, o que encaixotava as faixas escuras e deixava tarja branca dos lados. */ body[class*="page-template-template-alvo-"] main#main-content { max-width: none; width: 100%; /* o padding-top de 40px do tema abria uma faixa branca acima do cabecalho do layout — o topo tem de encostar */ padding: 0; margin: 0; } body[class*="page-template-template-alvo-"] .wd-page-content { padding: 0; } /* 2) A barra de título do tema (o H6 + a trilha "Início / ...") repete o que o topo do layout já diz, e empurrava o hero para baixo. */ body[class*="page-template-template-alvo-"] .wd-page-title { display: none; } /* 3) O Woodmart pinta TODO h1..h6 com --wd-title-color (#242424). Isso apagava o título branco sobre o fundo escuro — o texto ficava cinza-escuro em cima da foto. Aqui os títulos voltam a herdar a cor do próprio bloco, que é como o layout foi desenhado. */ #conteudo h1, #conteudo h2, #conteudo h3, #conteudo h4, #conteudo h5, #conteudo h6, #conteudo .title { color: inherit; } /* 4) O container do layout tem medida própria; o do tema é 1182px. */ #conteudo .container { max-width: 1140px; padding: 0 24px; } /* 5) O tema força margem em parágrafos e listas do conteúdo; o layout controla o espaçamento por bloco. */ #conteudo p, #conteudo ul, #conteudo ol, #conteudo dl { margin: 0; } #conteudo ul, #conteudo ol { padding: 0; list-style: none; } /* 6) Imagem responsiva sem o tema esticar. */ #conteudo img { max-width: 100%; height: auto; } /* 7) O cabeçalho e o rodapé do Woodmart ficam ESCONDIDOS nestas páginas. Motivo: o layout aprovado traz o próprio topo (barra ICP-Brasil + logo + menu + botão) e o próprio rodapé. Com os dois, a página abria com DOIS logos e DOIS menus empilhados. CUSTO, e é consciente: nestas 6 páginas somem o carrinho, a busca e o "Minha conta" do tema. O caminho de compra continua — o botão "Emitir agora" vai para a loja e os cards vão para o produto —, mas quem quiser o carrinho precisa passar por outra página. Para VOLTAR ATRÁS (manter o cabeçalho da loja e tirar o do layout), troque o seletor .whb-header por #conteudo .whb-header... não: remova este bloco inteiro e me avise, que eu tiro o cabeçalho do template. */ body[class*="page-template-template-alvo-"] .whb-header, body[class*="page-template-template-alvo-"] .wd-prefooter, body[class*="page-template-template-alvo-"] .wd-footer { display: none; } /* =========================================================================== Revisão de 29/08/2026 — defeitos apontados pelo Raphael, medidos no site. =========================================================================== */ /* 8) PÍLULAS: a letra estava entrando na curva da borda. Numa pílula totalmente arredondada o raio é METADE da altura. Se o padding lateral for menor que o raio, a primeira e a última letra caem dentro da curva e parecem escapar. Medido no site: .eyebrow altura 31 → raio 15,5 · padding 14 (invadia 1,5px) .spv-tag altura 25 → raio 12,5 · padding 11 (invadia 1,5px) .chip altura 43 → raio 21,5 · padding 20 (invadia 1,5px) Regra da casa daqui em diante: padding lateral ≥ raio + 6px. Também subimos o line-height: com line-height igual ao corpo da letra, o "ç" e o "g" encostavam na borda de baixo. */ #conteudo .eyebrow { padding: 9px 24px; line-height: 1.35; } #conteudo .chip { padding: 11px 28px; line-height: 1.4; } /* O selo do card com foto (.spv-tag) e a pilula das abas (.tc-tab) foram corrigidos NA BIBLIOTECA (src/lib/sections.js), nao aqui: eles tem CSS proprio dentro do bloco, que carrega depois deste arquivo e venceria a regra. Corrigir na origem tambem conserta os proximos clientes. */ /* Selos "Mais escolhido" / "Até 36 meses" / "Recomendado para MEI" da tabela de planos. Estes vêm com o estilo no próprio elemento (style="..."), e estilo inline só perde para !important — daí a exceção. Medido: altura 25, raio 12,5 e padding lateral 16, ou seja, a letra entrava na curva. */ #conteudo [style*="border-radius:100px"], #conteudo [style*="border-radius:999px"] { padding: 7px 20px !important; line-height: 1.4 !important; } /* ...menos o que não é pílula de texto: ícone redondo, avatar, ponto. */ #conteudo .icon-chip[style*="border-radius"], #conteudo img[style*="border-radius"] { padding: revert !important; } /* Botão no verso do flip card encosta na base, senão cada card põe o botão numa altura conforme o tamanho do texto (medido: 13px de diferença). */ #conteudo .fc-back { display: flex; flex-direction: column; } #conteudo .fc-back .btn { margin-top: auto; } /* 9) BOTÕES NA MESMA GRADE COM ALTURAS DIFERENTES. Medido na e-CPF: 3 alturas (76/72/56px) e 20px de desalinho entre os quatro planos. Duas causas somadas: a) o botão de contorno tem borda de 2px e o sólido não, o que já dá 4px de diferença; b) "Emitir este certificado" quebra em duas linhas e "Renovar agora" cabe em uma. A borda transparente iguala a caixa; o min-height iguala as duas situações de linha. */ #conteudo .btn { border: 2px solid transparent; min-height: 56px; align-items: center; text-align: center; } /* ATENÇÃO: a borda transparente acima existe só para igualar a CAIXA dos botões. O botão de contorno precisa da borda de volta — sem esta linha ele fica só com o texto, sem moldura (foi o que aconteceu na primeira versão desta correção, visto no print da home). */ #conteudo .btn-ghost { border-color: currentColor; } /* dentro de grade de planos os botões encostam na base do card, alinhados */ #conteudo .ptable-grid .btn, #conteudo [class*="plc-"] .btn { margin-top: auto; width: 100%; } /* 10) PALAVRA DE FUNDO (a marca-d'água gigante em Oswald). Estava com opacidade 0,06 — contraste 1,13:1 contra o fundo, ou seja, praticamente invisível. E ficava a 22px da base do bloco com uma letra de 156px, o que dava aparência de estar cortada. 0,10 continua sendo fundo (não compete com o texto) mas se enxerga. */ #conteudo .sec-word { opacity: .10; bottom: clamp(40px, 4.5vw, 72px); } #conteudo .bgx-agua { opacity: .10; } /* 11) RITMO VERTICAL. Todo bloco tem 88px de respiro em cima e embaixo, o que dá 176px entre dois blocos. Quando o fundo MUDA isso funciona: a faixa de cor separa. Quando dois blocos do mesmo fundo se seguem, os 176px viram um buraco branco sem leitura nenhuma (só na home eram 4 emendas assim). O gerador marca essas emendas com data-alvo-emenda. */ #conteudo [data-alvo-emenda] { padding-top: clamp(34px, 4vw, 52px); } /* 12) O corpo do texto: ver a nota no fim do base.css. O Woodmart declara body{font-size:15px} e o conteúdo herdava — a proposta aprovada foi desenhada em 16px. A regra vive no base.css para nascer junto com o resto do layout. */ /* 13) O selo de publicidade do letreiro rolante ("PRAZO NÃO ESPERA...") fica congelado e cortado para quem liga "reduzir movimento" no sistema. Sem animação, mostramos o texto centralizado em vez de um pedaço. */ @media (prefers-reduced-motion: reduce) { #conteudo [class*="tm-"] { justify-content: center; } } /* 14) FAIXA DE SELOS DE CONFIANÇA. Repõe, dentro do nosso rodapé, os selos que viviam no rodapé do Woodmart (Google Safe Browsing, Let's Encrypt, SERPRO, SyngularID e o selo verificado do Reclame Aqui). Aquele rodapé saiu do DOM em 29/08/2026 porque duplicava endereço e menu — mas os selos não são enfeite: SERPRO e SyngularID são as Autoridades Certificadoras da Alvo. Ver inc/selos.php e inc/limpeza.php. */ #conteudo .alvo-selos { background: var(--dark); padding: 0 24px 34px; } #conteudo .alvo-selos-in { max-width: 1140px; margin: 0 auto; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px 38px; } #conteudo .alvo-selos-in img { height: 42px; width: auto; /* os selos vêm em cores diferentes entre si; a dessaturação leve uniformiza a faixa sem apagar a marca de cada um */ filter: grayscale(1) brightness(1.9); opacity: .72; transition: filter .2s, opacity .2s; } #conteudo .alvo-selos-in img:hover { filter: none; opacity: 1; } /* o selo do Reclame Aqui é montado por script deles: só reservamos o espaço */ #conteudo .alvo-selos-in #ra-verified-seal { min-height: 42px; display: flex; align-items: center; } @media (max-width: 640px) { #conteudo .alvo-selos-in { gap: 20px 26px; } #conteudo .alvo-selos-in img { height: 34px; } } /* 02/10/2026 — quebra de linha equilibrada (revisao e-CPF/e-CNPJ). No celular varios titulos terminavam com uma palavra sozinha ("Renda", "lugar", "rotina"). balance divide o titulo em linhas parecidas; pretty evita a palavra solta no fim do paragrafo. So muda ONDE a linha quebra: fonte, tamanho e cor ficam iguais. Navegador antigo ignora a regra. */ #conteudo h1, #conteudo h2, #conteudo h3, #conteudo summary, #conteudo .btn { text-wrap: balance; } #conteudo p, #conteudo .lead { text-wrap: pretty; }