a itens da
propria grade. O
nao carrega semantica nenhuma, so
agrupava — nada se perde na arvore de acessibilidade.
A colocacao automatica faz o resto: o bloco da marca ocupa
a coluna 1, os links caem na coluna 2 e a nota, que pede a
linha inteira, desce para a fileira de baixo. Nao ha
`grid-column` fixo em lugar nenhum, e por isso a regra
sobrevive intacta ao `grid-template-columns: 1fr` de 1000px
para baixo, onde os tres itens simplesmente empilham. */
.rodape-legal > div:last-child { display: contents; }
.rodape-legal > div:last-child > p:last-child {
grid-column: 1 / -1;
/* o `p + p` acima ainda alcanca este paragrafo, mas agora ele
esta em OUTRA fileira: os 14px se somariam ao `gap` de 24px
da grade e abririam um vao que nao existia antes. */
margin-top: 0;
/* Separacao do que vem acima. Antes a nota simplesmente comecava,
no mesmo tom e no mesmo tamanho dos blocos da fileira de cima —
nada dizia que era outra coisa. */
padding-top: 26px;
border-top: 1px solid rgb(var(--branco-rgb) / 0.12);
font-size: 0.88rem;
color: rgb(var(--branco-rgb) / 0.5);
/* ── LARGURA CHEIA · DECISAO DO ESCRITORIO ────────────────
A nota ocupa o trilho inteiro, como as demais secoes da
pagina. NAO reintroduzir limite de medida aqui.
Houve uma versao com o texto parando em 40em: a leitura fica
mais confortavel, mas a nota deixa de acompanhar a largura do
resto do rodape, e a preferencia do escritorio e que ela
acompanhe. Fica registrado o que se abre mao, para quem
encontrar isto depois nao "corrigir" de volta: sao ~150
caracteres por linha, cerca do dobro do que esta folha adota
para leitura corrida em `--medida`.
A justificacao volta a vir do bloco TEXTO JUSTIFICADO, que
alcanca `.rodape-legal p`. Nesta largura ela se comporta: ha
espacos de sobra na linha para o navegador distribuir sem
abrir rio. Era na medida estreita que ela falhava — por isso
nao ha `text-align` nenhum aqui. */
}
.rodape-legal img { height: 40px; width: auto; margin-bottom: 18px; }
.rodape-legal p { font-size: 0.96rem; line-height: 1.7; color: rgb(var(--branco-rgb) / 0.70); }
.rodape-legal a {
color: rgb(var(--branco-rgb) / 0.82);
border-bottom: 1px solid rgb(var(--branco-rgb) / 0.28);
transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.rodape-legal a:hover { color: var(--branco); border-bottom-color: var(--branco); }
.rodape-legal a:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; border-radius: 2px; }/* marcador do que ainda falta preencher — visivel de proposito */
.pendente { color: var(--acento); background: rgb(var(--acento-rgb) / 0.14); padding: 1px 6px; border-radius: 2px; }@media (max-width: 1000px) {
.hero2 { grid-template-columns: 1fr; gap: 40px; }
.form-card { max-width: 460px; }}@media (max-width: 768px) {
.beneficios, .pilares { grid-template-columns: 1fr; gap: 28px; }
/* `padding` por extenso sobrescreveria o `padding-inline` do
trilho; so o eixo que muda e declarado. */
.rodape-legal {
grid-template-columns: 1fr;
padding-block: 36px;
padding-inline: 5vw;
}
/* Empilhado, o bloco de links nao tem mais uma coluna para
ancorar e o filete da nota fica a dois itens de distancia do
que separa. A separacao passa para cima dos links tambem. */
.rodape-legal > div:last-child > p:first-child {
padding-top: 24px;
border-top: 1px solid rgb(var(--branco-rgb) / 0.12);
}
.rodape-legal > div:last-child > p:last-child { padding-top: 22px; }}/* ═══════════════════════════════════════════════════════════
AJUSTES DE NAVEGACAO E FORMULARIO
═══════════════════════════════════════════════════════════ *//* A barra do topo e `sticky` e ocupa 72px. Sem esta folga, todo
alvo de ancora (#formulario, #faq, #contato) para EMBAIXO dela
e o visitante cai no meio da secao, sem ver o titulo. */
.faixa[id],
.fechamento[id],
.form-card[id] { scroll-margin-top: calc(var(--barra-h) + 20px); }/* campo obrigatorio: o asterisco e decorativo, quem informa o
leitor de tela e o `required` do proprio input */
.campo label .req { color: var(--acento); margin-left: 2px; }/* estado de erro — anunciado por `role="alert"` no HTML */
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] { border-color: var(--acento); border-width: 2px; }
.campo__erro {
display: none;
font-size: 0.92rem;
line-height: 1.45;
color: var(--erro);
margin-top: 6px;
}
.campo__erro.visivel { display: block; }/* confirmacao apos o envio */
.form-card__ok {
display: none;
font-size: 1rem;
line-height: 1.6;
color: var(--marca);
background: rgb(var(--marca-rgb) / 0.08);
border-left: 3px solid var(--marca);
padding: 12px 14px;
margin-top: 14px;
}
.form-card__ok.visivel { display: block; }/* o botao some enquanto abre o WhatsApp, para nao haver duplo envio */
.form-card .btn[disabled] { opacity: 0.6; pointer-events: none; }/* ═══════════════════════════════════════════════════════════
COLUNA DE CONTEUDO CENTRADA
Os contêineres tinham `max-width` mas nenhum `margin: auto`:
em telas largas o conteudo encostava na esquerda e sobrava
um vao enorme so do lado direito.
Em vez de centrar cada `__inner` por dentro, o padding lateral
das SECOES e que cresce. Assim a barra fixa, as faixas e os
rodapes compartilham exatamente a mesma coluna — centrar so os
inners deixaria o logo da barra desalinhado do texto abaixo.
`max()` garante o piso de 6vw: quando a tela e menor que a
coluna, o segundo termo fica negativo e o 6vw prevalece.
Restrito a >=1024px de proposito: abaixo disso valem os
paddings menores das media queries, que vem antes no arquivo
e seriam sobrescritos por esta regra.
═══════════════════════════════════════════════════════════ */@media (min-width: 1024px) {
.barra,
.lp-hero,
.provas,
.faixa,
.fechamento,
.outras,
.rodape,
.rodape-legal {
/* `--borda-x` no lugar do `6vw` literal: e o mesmo valor ate
1333px e, acima disso, o token para de crescer enquanto o
segundo termo ja domina. Sem a troca, o rodape usaria uma
margem e as faixas outra numa faixa estreita de larguras. */
padding-inline: max(var(--borda-x), calc((100% - 1240px) / 2));
}}/* ═══════════════════════════════════════════════════════════
EQUIPE EM COLUNA LATERAL
Mesmo arranjo da secao `#equipe` da landing do agronegocio:
tres colunas — titulo | fotos | vazia. As duas laterais tem a
mesma regra, entao sobra a mesma largura dos dois lados e a
coluna do meio fica centrada; o titulo, por sua vez, encosta
na margem da secao.
Substitui aqui o par `.faixa__cabeca` + `.autoridade__grid`,
em que o titulo ficava por cima das fotos.
═══════════════════════════════════════════════════════════ *//* DUAS colunas, nao tres. A landing usa uma terceira coluna vazia
para centralizar as fotos na pagina, mas isso so cabe com titulo
pequeno: no corpo padrao (40px) "Quem vai conduzir seu caso" pede
470px em uma linha, e duas colunas de 470 dentro dos 1240 da pagina
deixariam 100px por retrato. Sem a coluna vazia sobram 760px para a
grade — cerca de 350px por foto.
A troca e deliberada: o titulo passa a nascer no MESMO x das demais
secoes e no MESMO corpo delas; as fotos e que cedem tamanho. */
.equipe-inner {
display: grid;
grid-template-columns: minmax(480px, 1fr) minmax(0, 760px);
gap: 0 40px;
align-items: start;
}
.equipe-titulo { grid-column: 1; max-width: 480px; }/* NAO reintroduzir `white-space: nowrap` aqui. Ele existia para o
titulo antigo desta secao, "Quem vai conduzir seu caso" (26
caracteres), que cabia em uma linha nos 480px da coluna. O titulo
atual, "Atendimento direto e estrategia individualizada", tem 46
caracteres e pede ~800px em corpo cheio: com `nowrap` ele NAO
quebrava, vazava 320px para dentro da coluna das fotos e passava
por cima do rosto do primeiro retrato. O `overflow: hidden` da
`.faixa--foto` escondia o sintoma no nivel da pagina — nao havia
rolagem horizontal —, e por isso o defeito passou despercebido.
Se um dia o titulo voltar a ser curto, ele cabe em uma linha
sozinho, sem precisar de trava. */
.equipe-titulo h2 {
font-family: var(--font-titulo);
/* exatamente o mesmo valor de `.faixa h2` — o corpo padrao dos
titulos de secao desta pagina */
font-size: clamp(2rem, 2.9vw, 2.5rem);
line-height: 1.18;
font-weight: 300;
letter-spacing: -0.01em;
color: var(--tinta);
margin-bottom: 0;
/* medida de seguranca: mesmo sem `nowrap`, uma palavra unica muito
longa poderia estourar a coluna estreita */
overflow-wrap: break-word;
}
.equipe-titulo h2::after {
content: '';
display: block;
width: 56px;
height: 1px;
background: var(--acento);
margin-top: 26px;
}
.equipe-titulo p {
font-size: 1.08rem;
line-height: 1.7;
color: var(--tinta);
margin-top: 24px;
}/* Sem isto o botao encosta no ultimo paragrafo. O `.btn` nao tem
margem propria e o `p` acima so empurra para cima — nada separava
os dois. */
.equipe-titulo .btn { margin-top: 30px; }
.equipe-grid {
grid-column: 2;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
.equipe-membro { display: flex; flex-direction: column; color: inherit; }/* A mascara resolve o corte seco na base do recorte 460x600: o terno
termina numa reta, e o fio dos dados vem poucos pixels abaixo — duas
horizontais competindo. Dissolvida no fundo, a foto deixa o fio ser
a unica linha da composicao. Como o `mask` e aplicado DEPOIS do
`filter`, a sombra desvanece junto e nao fica flutuando solta. */
.equipe-foto {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 18px 26px rgb(var(--marca-rgb) / 0.22));
/* 88%, nao 76%: as maos dos dois retratos caem por volta de 85% da
altura e comecavam a sumir junto com o corte. A transicao curta
resolve a aresta sem apagar conteudo da foto. */
-webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
transition: transform 0.35s ease, filter 0.35s ease;
}
.equipe-membro:hover .equipe-foto {
transform: translateY(-8px);
filter: drop-shadow(0 24px 34px rgb(var(--marca-rgb) / 0.30));
}/* o fio no topo dos dados delimita sem precisar de caixa */
.equipe-dados {
border-top: 1px solid rgb(var(--marca-rgb) / 0.30);
padding-top: 22px;
margin-top: 26px;
}
.equipe-nome {
font-family: var(--font-titulo);
font-size: 1.58rem;
font-weight: 400;
line-height: 1.2;
color: var(--tinta);
margin-bottom: 6px;
}
.equipe-oab { font-size: 1.08rem; color: var(--tinta); }/* A coluna do titulo cobra largura das fotos: com 480px reservados a
esquerda, abaixo de 1280 os retratos cairiam para menos de 280px
cada. Empilhado, eles recuperam a largura cheia — a secao fica mais
alta, mas a alternativa nessa faixa seria retrato de miniatura. */@media (max-width: 1280px) {
.equipe-inner { grid-template-columns: minmax(0, 1fr); }
.equipe-titulo {
grid-column: 1;
max-width: none;
margin-bottom: 40px;
}
.equipe-grid { grid-column: 1; max-width: 900px; margin: 0 auto; }}@media (max-width: 620px) {
.equipe-grid { grid-template-columns: 1fr; gap: 48px; }
.equipe-membro { max-width: 340px; }}@media (prefers-reduced-motion: reduce) {
.equipe-membro:hover .equipe-foto { transform: none; }}/* ═══════════════════════════════════════════════════════════
FAQ COM FORMULARIO AO LADO
O card de captura saiu do hero e passou a acompanhar as
duvidas: o visitante le a objecao e a resposta com o campo de
contato ja no campo de visao, sem precisar rolar de volta.
═══════════════════════════════════════════════════════════ */
.faq-com-form {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
gap: 56px;
align-items: start;
}/* dentro da grade o `max-width` do bloco de perguntas so atrapalha */
.faq-com-form .faq { max-width: none; }/* O card nasceu sobre a foto escura do hero, dai a sombra pesada e o
fundo branco. Na secao branca ele sumiria: aqui ganha superficie
propria e a sombra vira apenas um assentamento leve. */
.form-card--claro {
background: var(--superficie);
border: 1px solid rgb(var(--marca-rgb) / 0.14);
box-shadow: 0 6px 20px rgb(var(--tinta-rgb) / 0.06);
}
.form-card--claro .campo input,
.form-card--claro .campo select { background: var(--branco); }
/* No hero o card flutua sobre fotografia e a sombra pesada faz
sentido. Aqui ele fica sobre faixa clara, ao lado do FAQ: a
mesma sombra virava uma mancha cinza em volta do card. */
.form-card--claro {
box-shadow: var(--sombra-2);
border: 1px solid rgb(var(--marca-rgb) / 0.1);
}/* o card gruda no topo enquanto as perguntas rolam */@media (min-width: 1025px) {
.faq-com-form .form-card {
position: sticky;
top: calc(var(--barra-h) + 24px);
}}@media (max-width: 1024px) {
.faq-com-form { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.faq-com-form .form-card { max-width: 460px; }}/* ═══════════════════════════════════════════════════════════
MAPA NO FECHAMENTO
═══════════════════════════════════════════════════════════ *//* O texto fica travado em 560px — sua medida de leitura — e o mapa
toma TODO o resto da largura. `align-items: stretch` faz as duas
colunas terem a mesma altura, e o iframe cresce dentro da sua com
`flex: 1`, ocupando tambem a altura toda. */
.fechamento__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
gap: 56px;
align-items: stretch;
max-width: 1240px;
}
.fechamento__grid .fechamento__inner { max-width: none; }
.fechamento__mapa {
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
}/* Sem `aspect-ratio`: a altura deixa de ser calculada pela largura e
passa a ser o que sobra da coluna. O `min-height` cobre o caso em
que a coluna de texto encolhe (telas largas com fonte pequena) e o
mapa ficaria baixo demais. */
.fechamento__mapa iframe {
width: 100%;
flex: 1 1 auto;
min-height: 400px;
border: 0;
border-radius: 4px;
display: block;
/* o mapa vem claro e a faixa e verde escura: sem a moldura ele
flutua como um retangulo colado */
box-shadow: 0 14px 34px rgb(var(--sombra-rgb) / 0.28);
}
.fechamento__rota {
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--branco);
opacity: 0.88;
border-bottom: 1px solid rgb(var(--branco-rgb) / 0.4);
align-self: flex-start;
transition: opacity 0.2s;
}
.fechamento__rota:hover { opacity: 1; border-bottom-color: var(--branco); }
.fechamento__rota:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; }@media (max-width: 1000px) {
.fechamento__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.fechamento__grid .fechamento__inner { max-width: none; }
.fechamento__mapa { max-width: none; height: auto; }
.fechamento__mapa iframe { flex: none; aspect-ratio: 16 / 10; min-height: 0; }}@media (max-width: 480px) {
.fechamento__mapa iframe { aspect-ratio: 4 / 3; min-height: 0; }}/* ═══════════════════════════════════════════════════════════
ANIMACAO DOS TRES PILARES COM ICONE
Vale so onde a pagina declara `js` no — as demais
paginas nao carregam o script e seguem estaticas, sem risco
de o conteudo ficar invisivel nelas.
═══════════════════════════════════════════════════════════ *//* Estado inicial SO com JS presente. Sem o script, `.solucao`
nunca fica opaca — conteudo nao pode depender de animacao. */
.js .solucao {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.7s cubic-bezier(.22,.61,.36,1),
transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.js .solucao__icone {
transform: scale(0.82);
transition: transform 0.7s cubic-bezier(.22,.61,.36,1) 0.1s,
background 0.3s ease, box-shadow 0.3s ease;
}
.js .solucao.visivel { opacity: 1; transform: none; }
.js .solucao.visivel .solucao__icone { transform: none; }/* escalonamento: os tres nao entram juntos, o olho acompanha */
.js .solucao:nth-child(2) { transition-delay: 0.13s; }
.js .solucao:nth-child(3) { transition-delay: 0.26s; }
.js .solucao:nth-child(2) .solucao__icone { transition-delay: 0.23s; }
.js .solucao:nth-child(3) .solucao__icone { transition-delay: 0.36s; }/* ─── HOVER ────────────────────────────────────────────────
Mesmo gesto da landing: o circulo enche de cor e o traco
inverte. Os PNG sao traco preto sobre branco opaco, sem alfa
— `invert` deixa o traco branco e o fundo preto, e `screen`
derruba esse preto contra o terracota. */@media (hover: hover) {
.solucao__icone {
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}/* No destaque o circulo abre para BRANCO e o traco volta a ser
escuro: `multiply` derruba o branco do PNG contra o circulo. */
.solucao:hover .solucao__icone {
background: var(--branco);
transform: translateY(-6px);
box-shadow: 0 14px 26px rgb(var(--sombra-rgb) / 0.28);
}
.solucao:hover .solucao__icone img {
filter: none;
mix-blend-mode: multiply;
}/* O titulo NAO muda de cor no hover: ele ja e branco, e qualquer
tom da paleta sobre o verde e mais escuro — o realce viraria
apagamento. Quem carrega o destaque e o espacejamento, o filete
que cresce e o corpo fechando em branco pleno. */
.solucao h3 { transition: letter-spacing 0.3s ease; }}/* quem pediu menos movimento recebe o conteudo parado, nao ausente */@media (prefers-reduced-motion: reduce) {
.js .solucao,
.js .solucao__icone {
opacity: 1;
transform: none;
transition: none;
}
.solucao:hover .solucao__icone { transform: none; }}/* ═══════════════════════════════════════════════════════════
DESTAQUE NOS TEXTOS DOS PILARES
O icone entrava sozinho; agora titulo e corpo entram em
camadas depois dele, e reagem ao hover junto com o circulo.
═══════════════════════════════════════════════════════════ *//* ─── ENTRADA EM CAMADAS ───────────────────────────────────
O item inteiro sobe primeiro, depois o titulo, depois o
corpo. Os atrasos sao absolutos a partir do momento em que
`.visivel` entra — nao encadeados —, entao cada valor ja
embute o escalonamento do proprio item. */
.js .solucao h3,
.js .solucao p {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.6s cubic-bezier(.22,.61,.36,1),
transform 0.6s cubic-bezier(.22,.61,.36,1),
color 0.3s ease;
}
.js .solucao.visivel h3,
.js .solucao.visivel p { opacity: 1; transform: none; }
.js .solucao:nth-child(1).visivel h3 { transition-delay: 0.18s; }
.js .solucao:nth-child(1).visivel p { transition-delay: 0.27s; }
.js .solucao:nth-child(2).visivel h3 { transition-delay: 0.31s; }
.js .solucao:nth-child(2).visivel p { transition-delay: 0.40s; }
.js .solucao:nth-child(3).visivel h3 { transition-delay: 0.44s; }
.js .solucao:nth-child(3).visivel p { transition-delay: 0.53s; }/* ─── FILETE QUE CRESCE SOB O TITULO ───────────────────────
Mesma linguagem do filete fixo dos h2 de secao, mas aqui ele
entra no hover. `position: absolute` para nascer dentro do
`margin-bottom` e nao empurrar o texto abaixo. */
.solucao h3 { position: relative; }
.solucao h3::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 1px;
background: var(--acento);
transition: width 0.35s ease;
}/* ─── HOVER ────────────────────────────────────────────────*/@media (hover: hover) {/* o par padding/margem negativa cria a area do realce sem
deslocar nada: a caixa de conteudo fica onde ja estava */
.solucoes > .solucao {
padding: 18px;
margin: -18px;
border-radius: 6px;
transition: background 0.35s ease;
}
.solucoes > .solucao:hover { background: rgb(var(--branco-rgb) / 0.06); }/* o titulo abre o espacejamento em vez de mudar de corpo:
alarga sem deslocar a linha de baixo */
.solucoes > .solucao:hover h3 { letter-spacing: 0.02em; }
.solucoes > .solucao:hover h3::after { width: 52px; }/* o corpo fecha em branco pleno — e ele que carrega o realce */
.solucoes > .solucao:hover p { color: var(--branco); }}@media (prefers-reduced-motion: reduce) {
.js .solucao h3,
.js .solucao p {
opacity: 1;
transform: none;
transition: none;
}
.solucao h3::after { transition: none; }}/* ═══════════════════════════════════════════════════════════
DESTAQUE NOS BENEFICIOS
Mesmo comportamento dos pilares com icone, transposto para
fundo CLARO: la o corpo fecha em branco pleno, aqui ele
escurece; la o painel do hover clareia, aqui ele acinzenta.
═══════════════════════════════════════════════════════════ *//* ─── ENTRADA EM CAMADAS ───────────────────────────────────*/
.js .beneficio {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.7s cubic-bezier(.22,.61,.36,1),
transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.js .beneficio h3,
.js .beneficio p {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.6s cubic-bezier(.22,.61,.36,1),
transform 0.6s cubic-bezier(.22,.61,.36,1),
color 0.3s ease;
}
.js .beneficio.visivel,
.js .beneficio.visivel h3,
.js .beneficio.visivel p { opacity: 1; transform: none; }/* sao QUATRO itens, nao tres: o escalonamento vai ate o 4o */
.js .beneficio:nth-child(2) { transition-delay: 0.11s; }
.js .beneficio:nth-child(3) { transition-delay: 0.22s; }
.js .beneficio:nth-child(4) { transition-delay: 0.33s; }
.js .beneficio:nth-child(1).visivel h3 { transition-delay: 0.16s; }
.js .beneficio:nth-child(1).visivel p { transition-delay: 0.24s; }
.js .beneficio:nth-child(2).visivel h3 { transition-delay: 0.27s; }
.js .beneficio:nth-child(2).visivel p { transition-delay: 0.35s; }
.js .beneficio:nth-child(3).visivel h3 { transition-delay: 0.38s; }
.js .beneficio:nth-child(3).visivel p { transition-delay: 0.46s; }
.js .beneficio:nth-child(4).visivel h3 { transition-delay: 0.49s; }
.js .beneficio:nth-child(4).visivel p { transition-delay: 0.57s; }/* ─── FILETE QUE CRESCE SOB O TITULO ───────────────────────*/
.beneficio h3 { position: relative; }
.beneficio h3::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 1px;
background: var(--acento);
transition: width 0.35s ease;
}/* ─── HOVER ────────────────────────────────────────────────*/@media (hover: hover) {/* padding com margem negativa: o realce ganha area sem
deslocar a caixa de conteudo */
.beneficio {
padding: 18px;
margin: -18px;
border-radius: 6px;
transition: background 0.35s ease, box-shadow 0.35s ease;
}
.beneficio:hover {
background: var(--superficie);
box-shadow: 0 8px 24px rgb(var(--tinta-rgb) / 0.07);
}/* o titulo ja e verde sobre branco e nao muda de cor: so abre
o espacejamento, como nos pilares */
.beneficio h3 { transition: letter-spacing 0.3s ease; }
.beneficio:hover h3 { letter-spacing: 0.02em; }
.beneficio:hover h3::after { width: 52px; }/* no fundo claro o realce e o corpo ESCURECENDO — o inverso do
que acontece na faixa verde */
.beneficio:hover p { color: var(--tinta); }}@media (prefers-reduced-motion: reduce) {
.js .beneficio,
.js .beneficio h3,
.js .beneficio p {
opacity: 1;
transform: none;
transition: none;
}
.beneficio h3::after { transition: none; }}/* ═══════════════════════════════════════════════════════════
DESTAQUE NOS CARDS DE PROVA
Mesmo comportamento dos beneficios: entrada em camadas e
realce no hover. Aqui o item e um card, entao o realce inclui
elevacao — nao so mudanca de fundo.
═══════════════════════════════════════════════════════════ *//* ─── ENTRADA EM CAMADAS ───────────────────────────────────*/
.js .prova {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.65s cubic-bezier(.22,.61,.36,1),
transform 0.65s cubic-bezier(.22,.61,.36,1),
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.js .prova__valor,
.js .prova__rotulo {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.55s cubic-bezier(.22,.61,.36,1),
transform 0.55s cubic-bezier(.22,.61,.36,1),
color 0.3s ease;
}
.js .prova.visivel,
.js .prova.visivel .prova__valor,
.js .prova.visivel .prova__rotulo { opacity: 1; transform: none; }
.js .prova:nth-child(2) { transition-delay: 0.09s; }
.js .prova:nth-child(3) { transition-delay: 0.18s; }
.js .prova:nth-child(4) { transition-delay: 0.27s; }
.js .prova:nth-child(1).visivel .prova__valor { transition-delay: 0.14s; }
.js .prova:nth-child(1).visivel .prova__rotulo { transition-delay: 0.21s; }
.js .prova:nth-child(2).visivel .prova__valor { transition-delay: 0.23s; }
.js .prova:nth-child(2).visivel .prova__rotulo { transition-delay: 0.30s; }
.js .prova:nth-child(3).visivel .prova__valor { transition-delay: 0.32s; }
.js .prova:nth-child(3).visivel .prova__rotulo { transition-delay: 0.39s; }
.js .prova:nth-child(4).visivel .prova__valor { transition-delay: 0.41s; }
.js .prova:nth-child(4).visivel .prova__rotulo { transition-delay: 0.48s; }/* ─── FILETE QUE CRESCE SOB O VALOR ────────────────────────*/
.prova__valor { position: relative; }
.prova__valor::after {
content: '';
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 1px;
background: var(--acento);
transition: width 0.35s ease;
}/* ─── HOVER ────────────────────────────────────────────────*/@media (hover: hover) {
.prova {
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}/* card sobe: aqui o realce nao pode ser mudanca de fundo, porque o
card ja e branco sobre a superficie clara da faixa */
.prova:hover {
transform: translateY(-4px);
border-color: var(--acento);
box-shadow: 0 12px 28px rgb(var(--tinta-rgb) / 0.10);
}
.prova__valor { transition: letter-spacing 0.3s ease; }
.prova:hover .prova__valor { letter-spacing: 0.01em; }
.prova:hover .prova__valor::after { width: 44px; }
.prova:hover .prova__rotulo { color: var(--tinta); }}@media (prefers-reduced-motion: reduce) {
.js .prova,
.js .prova__valor,
.js .prova__rotulo {
opacity: 1;
transform: none;
transition: none;
}
.prova:hover { transform: none; }
.prova__valor::after { transition: none; }}/* Em duas colunas abaixo de 560px o card fica com ~196px e o texto
quebra em duas ou tres palavras por linha — "OAB-RO 7176 · 11445"
chega a partir no meio. Coluna unica devolve a linha inteira. */@media (max-width: 560px) {
.provas__inner { grid-template-columns: minmax(0, 1fr); }}/* ═══════════════════════════════════════════════════════════
DESTAQUE NOS SINTOMAS
Mesma animacao dos beneficios, com uma diferenca de estrutura:
o sintoma e um paragrafo unico, sem par titulo/corpo, entao
nao ha camadas internas para escalonar — so o item entra.
═══════════════════════════════════════════════════════════ */
.js .sintoma {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s cubic-bezier(.22,.61,.36,1),
transform 0.6s cubic-bezier(.22,.61,.36,1),
background 0.35s ease;
}
.js .sintoma.visivel { opacity: 1; transform: none; }
.js .sintoma:nth-child(2) { transition-delay: 0.09s; }
.js .sintoma:nth-child(3) { transition-delay: 0.18s; }
.js .sintoma:nth-child(4) { transition-delay: 0.27s; }/* o ponto terracota entra junto, crescendo do centro */
.js .sintoma::before {
transform: scale(0.4);
transition: transform 0.5s cubic-bezier(.34,1.4,.64,1) 0.1s;
}
.js .sintoma.visivel::before { transform: none; }@media (hover: hover) {/* padding = metade do gap de linha (20px), entao as areas de
realce de dois itens vizinhos encostam sem se sobrepor */
.sintoma {
padding: 10px 16px;
margin: -10px -16px;
border-radius: 6px;
transition: background 0.35s ease;
}/* No Warm Gray diluido o realce e CLAREAR: o texto ja esta no
tom mais escuro da paleta e nao tem para onde fechar. */
.sintoma:hover { background: rgb(var(--branco-rgb) / 0.55); }
.sintoma::before { transition: transform 0.3s ease; }
.sintoma:hover::before { transform: scale(1.35); }}@media (prefers-reduced-motion: reduce) {
.js .sintoma,
.js .sintoma::before {
opacity: 1;
transform: none;
transition: none;
}
.sintoma:hover::before { transform: none; }}/* ═══════════════════════════════════════════════════════════
DESTAQUE NOS PILARES DE AUTORIDADE
Faixa verde, como os pilares com icone — mas aqui o rotulo
nasce em `--gray-light`, nao em branco. Isso abre uma folga
que os outros grupos nao tinham: no hover ele pode CLAREAR
ate o branco, virando um realce de verdade.
═══════════════════════════════════════════════════════════ *//* ─── ENTRADA EM CAMADAS ───────────────────────────────────*/
.js .pilar {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.68s cubic-bezier(.22,.61,.36,1),
transform 0.68s cubic-bezier(.22,.61,.36,1),
background 0.35s ease;
}
.js .pilar h3,
.js .pilar p {
opacity: 0;
transform: translateY(13px);
transition: opacity 0.58s cubic-bezier(.22,.61,.36,1),
transform 0.58s cubic-bezier(.22,.61,.36,1),
color 0.3s ease,
letter-spacing 0.3s ease;
}
.js .pilar.visivel,
.js .pilar.visivel h3,
.js .pilar.visivel p { opacity: 1; transform: none; }
.js .pilar:nth-child(2) { transition-delay: 0.11s; }
.js .pilar:nth-child(3) { transition-delay: 0.22s; }
.js .pilar:nth-child(4) { transition-delay: 0.33s; }
.js .pilar:nth-child(1).visivel h3 { transition-delay: 0.16s; }
.js .pilar:nth-child(1).visivel p { transition-delay: 0.24s; }
.js .pilar:nth-child(2).visivel h3 { transition-delay: 0.27s; }
.js .pilar:nth-child(2).visivel p { transition-delay: 0.35s; }
.js .pilar:nth-child(3).visivel h3 { transition-delay: 0.38s; }
.js .pilar:nth-child(3).visivel p { transition-delay: 0.46s; }
.js .pilar:nth-child(4).visivel h3 { transition-delay: 0.49s; }
.js .pilar:nth-child(4).visivel p { transition-delay: 0.57s; }/* ─── FILETE QUE CRESCE SOB O ROTULO ───────────────────────*/
.pilar h3 { position: relative; }
.pilar h3::after {
content: '';
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 1px;
background: var(--acento);
transition: width 0.35s ease;
}/* ─── HOVER ────────────────────────────────────────────────*/@media (hover: hover) {/* padding = metade do gap de linha (32px); no eixo horizontal
fica abaixo da metade do gap de 48px */
.pilar {
padding: 16px;
margin: -16px;
border-radius: 6px;
transition: background 0.35s ease;
}
.pilar:hover { background: rgb(var(--branco-rgb) / 0.06); }/* o rotulo sai do Warm Gray clareado para o branco: aqui o realce
PODE ser cor, ao contrario dos pilares com icone */
.pilar:hover h3 { color: var(--branco); letter-spacing: 0.11em; }
.pilar:hover h3::after { width: 46px; }
.pilar:hover p { color: var(--branco); }}@media (prefers-reduced-motion: reduce) {
.js .pilar,
.js .pilar h3,
.js .pilar p {
opacity: 1;
transform: none;
transition: none;
}
.pilar h3::after { transition: none; }}/* ─── LINK DE SALTO ────────────────────────────────────────
Fora da tela ate receber foco pelo teclado. `top` considera a
barra fixa para nao aparecer atras dela. */
.pular {
position: absolute;
left: -9999px;
z-index: 100;
background: var(--acento);
color: var(--branco);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.9rem;
padding: 14px 22px;
}
.pular:focus {
left: 6vw;
top: calc(var(--barra-h) + 10px);
}/* ═══════════════════════════════════════════════════════════
FOTO DE FUNDO NA FAIXA DA EQUIPE
A imagem entra ATRAS do conteudo e SOBRE a cor de fundo da
faixa, em opacidade baixa — a cor continua mandando e a foto
so da textura.
Ordem de pintura: o `background` da secao vem primeiro, o
`::before` posicionado pinta por cima dele, e o conteudo sobe
com `position: relative` para ficar acima dos dois. Sem esse
`z-index` no conteudo, o pseudo-elemento cobriria o texto.
═══════════════════════════════════════════════════════════ */
.faixa--foto {
position: relative;
overflow: hidden;
}/* Em vez de um `opacity` uniforme, a foto leva um veu na PROPRIA cor
da faixa, mais denso do lado esquerdo. Motivo: com opacidade plana
as manchas escuras da imagem derrubavam o contraste do texto para
4,32:1, abaixo do minimo AA. O veu protege a coluna de texto e
deixa a foto respirar do lado dos retratos, onde nao ha leitura. */
.faixa--foto::before {
content: '';
position: absolute;
inset: 0;
/* caminho relativo a esta folha, que mora em /rural/ —
mesma forma usada pelo fundo do bloco de fechamento */
background:
linear-gradient(to right,
rgb(var(--superficie-2-rgb) / 0.97) 0%,
rgb(var(--superficie-2-rgb) / 0.94) 34%,
rgb(var(--superficie-2-rgb) / 0.84) 52%,
rgb(var(--superficie-2-rgb) / 0.80) 100%),
var(--foto-equipe) center/cover no-repeat;
pointer-events: none;
}
.faixa--foto > * { position: relative; z-index: 1; }/* No celular a foto compete com o texto num espaco bem menor;
alem disso o arquivo tem 4096px de largura para uma faixa de
390 — reduzir a presenca evita ruido sem custo nenhum. *//* Empilhado, o texto passa a ocupar a largura toda e o gradiente
lateral deixa de proteger — o veu vira uniforme e mais denso. */@media (max-width: 1280px) {
.faixa--foto::before {
background:
linear-gradient(rgb(var(--superficie-2-rgb) / 0.92), rgb(var(--superficie-2-rgb) / 0.92)),
var(--foto-equipe) center/cover no-repeat;
}}/* ═══════════════════════════════════════════════════════════
AJUSTES MOBILE · REESTRUTURACAO DE DIVIDAS RURAIS
Isolados por classe no para nao alterar as demais
especialidades que compartilham esta folha.
═══════════════════════════════════════════════════════════ */@media (max-width: 768px) {
body.lead-page {
--barra-h: 64px;
padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
body.lead-page .barra {
gap: 14px;
padding-inline: 5vw;
}
body.lead-page {
--barra-h: 64px;
}
body.lead-page .barra {
gap: 12px;
padding-inline: 16px;
}
body.lead-page .barra__logo img {
height: 26px;
}
body.lead-page .barra__links {
gap: 10px;
}
body.lead-page .lp-hero {
padding-top: 28px;
padding-bottom: 38px;
}
body.lead-page .lp-hero__bg::after {
background: linear-gradient(to bottom, rgb(var(--marca-funda-rgb) / 0.90) 0%, rgb(var(--marca-funda-rgb) / 0.78) 46%, rgb(var(--marca-funda-rgb) / 0.72) 100%);
}
body.lead-page .lp-hero__inner {
max-width: none;
}
body.lead-page .trilha {
font-size: 0.78rem;
line-height: 1.5;
margin-bottom: 8px;
max-width: 30ch;
}/* O `max-width: 11ch` daqui servia ao titulo curto e publicitario da
versao anterior ("Proteja seu Patrimonio..."), que ganhava forca
quebrado em poucas palavras por linha. O titulo atual e descritivo
e tem 78 caracteres: com 11ch ele viraria uma coluna de oito
linhas. Sem o cap, e um degrau menor de corpo, ele fecha em tres. */
body.lead-page .eyebrow {
padding: 5px 10px;
margin-bottom: 10px;
}
/* O h1 e a primeira coisa que se le na pagina e estava menor
que o h2 das secoes de baixo: 39px de teto contra os 40px
que o desktop ja da.
Mas o corpo nao pode sair so da largura da tela: quem
decide se o titulo fecha em duas linhas ou em tres e o
COMPRIMENTO dele, e ele vai de 15 a 41 caracteres entre as
paginas. O mesmo `clamp` que deixa "Locação urbana" pequeno
demais quebra "Contratos bancários e revisão de encargos"
em quatro linhas.
Por isso a inclinacao mora no HTML, em `--h1-vw`, um valor
por titulo: a razao entre o corpo que cabe em duas linhas e
a largura da tela e praticamente constante (medida em 320,
360 e 412px, o mesmo titulo pede 9,69 / 9,72 / 9,95vw), de
modo que um unico numero por pagina resolve todas as
larguras de celular. Os valores saem medidos, com 1,5% de
folga, e vao de 8,2vw (titulo mais longo) a 11,75vw.
O piso de 1,6rem e o teto de 3,25rem so aparecem nas pontas
— telas muito estreitas e o limite acima do qual o hero
comeria a dobra.
Editou um titulo? `lead-pages.js` remede e corrige sozinho
no celular; o `--h1-vw` e que fica desatualizado, e vale
reajusta-lo para a pagina nascer certa.
Uma declaracao so para as duas faixas de celular: a de
480px continua ajustando entrelinha e respiro, que sao
outra conversa. */
body.lead-page .lp-hero h1 {
font-size: clamp(1.6rem, var(--h1-vw, 12.5vw), 3.25rem);
line-height: 1.14;
margin-bottom: 14px;
}
body.lead-page .lp-hero .lead {
font-size: 1.04rem;
line-height: 1.68;
margin-bottom: 18px;
max-width: none;
}
/* `1fr 1fr auto`: as duas primeiras faixas sao os CTAs e saem
com a MESMA altura — faixas `fr` de mesmo fator se igualam
pela maior, como `.passos--resumo` ja faz com os cards. A
terceira e a nota de atendimento, que continua medindo o
proprio texto: fosse `grid-auto-rows: 1fr`, ela esticaria
junto e abriria um vao de 60px no fim do hero.
Sem isto o botao cheio, agora com o rotulo mais curto,
fechava em uma linha e ficava visivelmente mais baixo que o
vazado, que continua em duas. */
body.lead-page .lp-hero__acao {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr auto;
gap: 14px;
align-items: stretch;
}/* No celular o CTA perde o "agora": com ele o rotulo ocupava
duas linhas para dizer o que cabe em uma, e a urgencia ja
esta no verbo. No desktop, onde o botao e uma linha so, a
palavra fica. */
body.lead-page .some-no-celular { display: none; }/* O `.btn` recebe `white-space: nowrap` no bloco responsivo geral
desta folha. Rótulos curtos ("Fale conosco") cabem; "Solicitar
contato do escritório" e "Falar com os advogados responsáveis" não
— eles estouravam a lateral e criavam rolagem horizontal na
página inteira. Aqui todo botão de corpo passa a quebrar linha e a
ocupar a largura da coluna. */
body.lead-page .lp-hero__acao .btn,
body.lead-page .acoes .btn,
body.lead-page .faixa .btn,
body.lead-page .equipe-titulo .btn,
body.lead-page .fechamento .btn {
width: 100%;
justify-content: center;
white-space: normal;
text-align: center;
padding-inline: 20px;
}
body.lead-page .lp-hero__nota {
max-width: none;
font-size: 0.94rem;
line-height: 1.6;
padding: 0 2px;
}
body.lead-page .faixa__cabeca {
margin-bottom: 28px;
}
body.lead-page .faixa h2,
body.lead-page .equipe-titulo h2,
body.lead-page .fechamento h2 {
font-size: clamp(1.85rem, 8vw, 2.35rem);
line-height: 1.12;
}
body.lead-page .faixa__intro,
body.lead-page .equipe-titulo p,
body.lead-page .fechamento p {
font-size: 1.02rem;
line-height: 1.72;
}
body.lead-page .sintomas,
body.lead-page .solucoes,
body.lead-page .beneficios,
body.lead-page .pilares {
gap: 18px;
}
body.lead-page .sintoma,
body.lead-page .solucao,
body.lead-page .beneficio,
body.lead-page .pilar {
border-radius: 8px;
padding: 20px 18px;
margin: 0;
}/* Sintoma é uma linha de texto, não um bloco: com 20px de
folga acima e abaixo mais os 18 do gap, dez deles somavam
580px de espaço vazio — quase um terço da altura da seção,
para dez frases curtas. Os demais cartões continuam com a
folga cheia porque de fato têm título e parágrafo dentro. */
body.lead-page .sintomas { gap: 12px; }
body.lead-page .sintoma { padding: 14px 16px; }/* O branco a 46% nasceu para a faixa CINZA, onde clareia o
fundo e desenha o cartão. Nas faixas branca e clara ele é
branco sobre branco: o cartão some e o que resta na tela
são bullets separados por 58px de vazio inexplicado — o
padding do cartão invisível somado ao gap da lista.
Mesmo critério que `.destaque` já usa: quem muda é o fundo,
conforme a faixa; a cor sai sempre da paleta da página. */
body.lead-page .sintoma {
background: rgb(var(--branco-rgb) / 0.46);
font-size: 1.04rem;
line-height: 1.62;
}
body.lead-page .faixa--branca .sintoma { background: var(--superficie); }
body.lead-page .faixa--clara .sintoma { background: var(--branco); }
body.lead-page .faixa--navy .sintoma,
body.lead-page .faixa--verde .sintoma { background: rgb(var(--branco-rgb) / 0.07); }
body.lead-page .solucao {
background: rgb(var(--branco-rgb) / 0.05);
}/* Nesta seção comparativa com três cards, os cartões ficam
mais legíveis um pouco mais estreitos e com respiro maior
entre si. O objetivo aqui não é "encher a linha", e sim
evitar a sensação de blocos colados lateralmente. */
body.lead-page .faixa--navy .carrossel--solucoes .carrossel__trilho,
body.lead-page .faixa--verde .carrossel--solucoes .carrossel__trilho {
--carrossel-gap: 26px;
padding-left: 18px;
padding-right: 18px;
}/* O comparativo desta página funciona melhor como leitura
sequencial: um card por vez, mesmo no desktop. */
body.lead-page .faixa--navy .carrossel--comparativo .carrossel__trilho,
body.lead-page .faixa--verde .carrossel--comparativo .carrossel__trilho {
--slides: 1 !important;
grid-auto-columns: 100% !important;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
body.lead-page .faixa--navy .carrossel--comparativo,
body.lead-page .faixa--verde .carrossel--comparativo {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
body.lead-page .faixa--navy .carrossel--comparativo .carrossel__controles,
body.lead-page .faixa--verde .carrossel--comparativo .carrossel__controles {
max-width: 760px;
}
body.lead-page .beneficio {
background: var(--superficie);
box-shadow: 0 6px 18px rgb(var(--tinta-rgb) / 0.05);
}
body.lead-page .pilar {
background: rgb(var(--branco-rgb) / 0.05);
}
body.lead-page .solucao__icone {
width: 76px;
height: 76px;
margin-bottom: 18px;
padding: 15px;
}
body.lead-page .solucao h3,
body.lead-page .beneficio h3 {
font-size: 1.24rem;
line-height: 1.22;
}
body.lead-page .solucao p,
body.lead-page .beneficio p,
body.lead-page .pilar p,
body.lead-page .faq__resposta {
font-size: 1rem;
line-height: 1.68;
}
body.lead-page .equipe-titulo {
margin-bottom: 28px;
}
body.lead-page .equipe-grid {
gap: 34px;
}/* Era `max-width: none`, e isso anulava o teto de 340px que a folha
base aplica abaixo de 620px (esta regra vem depois no arquivo e
tem especificidade maior). Sem teto, em coluna unica cada retrato
assumia a largura inteira da faixa — ~490px num aparelho de 620 —
e a secao passava de 2000px de altura para mostrar duas fotos de
rosto. Com o teto de volta, e centralizado, ela cai para menos de
um terco disso. */
body.lead-page .equipe-membro {
max-width: 330px;
margin-inline: auto;
width: 100%;
}
body.lead-page .equipe-dados {
margin-top: 18px;
padding-top: 16px;
}
body.lead-page .equipe-nome {
font-size: 1.34rem;
}
body.lead-page .faq-com-form {
gap: 28px;
}
body.lead-page .faq-com-form .form-card {
order: -1;
max-width: none;
padding: 24px 20px 22px;
}
body.lead-page .form-card h2 {
font-size: 1.28rem;
line-height: 1.24;
}
body.lead-page .form-card__nota,
body.lead-page .form-card__lgpd {
font-size: 0.94rem;
line-height: 1.58;
}
body.lead-page .campo {
margin-bottom: 14px;
}
body.lead-page .campo label {
font-size: 0.82rem;
letter-spacing: 0.08em;
}
body.lead-page .campo input,
body.lead-page .campo select {
min-height: 52px;
font-size: 1rem;
padding: 14px 13px;
}
/* Este bloco nasceu quando a sanfona era uma pilha de filetes: ele
recriava no celular, a mao, o cartao que o desktop nao tinha —
fundo, raio, `border-bottom: 0` para apagar o filete e um
`margin-top` para separar os itens. O componente base agora ja
entrega tudo isso, entao aqui sobra so o que muda de fato no
celular: a escala. Repetir fundo e raio duplicaria a decisao em
dois lugares, e um dia so um dos dois seria atualizado.
O `padding` lateral tambem SAI do `details` e vai para o
`summary` e a resposta. No `details` ele empurrava o disco do
sinal para dentro, e o disco e posicionado em relacao ao
`summary`: as duas medidas brigavam. */
body.lead-page .faq details + details { margin-top: 0; }
body.lead-page .faq summary {
padding: 18px 56px 18px 18px;
font-size: 1.08rem;
line-height: 1.34;
}
/* disco e barra encolhem juntos e continuam concentricos: a barra
fica em `right` do disco + metade da largura dele - 1px */
body.lead-page .faq summary::before {
right: 14px;
width: 30px;
height: 30px;
background-size: 12px 2px;
}
body.lead-page .faq summary::after {
right: 28px;
height: 12px;
margin-top: -6px;
}
body.lead-page .faq__resposta {
padding: 0 18px 20px;
}
body.lead-page .fechamento {
padding-top: 56px;
padding-bottom: 56px;
}
body.lead-page .fechamento__grid {
gap: 28px;
}
body.lead-page .fechamento__mapa {
gap: 12px;
}
body.lead-page .fechamento__mapa iframe {
border-radius: 8px;
aspect-ratio: 4 / 3;
}
body.lead-page .fechamento__rota {
font-size: 0.94rem;
line-height: 1.5;
}
body.lead-page .outras {
padding-top: 46px;
padding-bottom: 46px;
}
body.lead-page .outras h2 {
font-size: 1.36rem;
line-height: 1.2;
margin-bottom: 18px;
}
body.lead-page .outras__grid {
gap: 10px;
}
body.lead-page .outras__grid a {
padding: 14px 14px;
font-size: 0.98rem;
line-height: 1.4;
}
body.lead-page .rodape-legal {
gap: 18px;
}
body.lead-page .cta-fixo {
padding: 10px 5vw calc(10px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -10px 24px rgb(var(--sombra-rgb) / 0.18);
}
body.lead-page .cta-fixo .btn {
min-height: 54px;
border-radius: 4px;
white-space: normal;
text-align: center;
line-height: 1.3;
}}@media (max-width: 480px) {
body.lead-page .barra {
gap: 10px;
padding-inline: 14px;
}
body.lead-page .barra__logo img {
height: 23px;
}
body.lead-page .trilha {
font-size: 0.72rem;
line-height: 1.36;
margin-bottom: 6px;
max-width: 26ch;
}/* mesmo motivo do bloco de 768px: o cap em caracteres servia ao
titulo curto anterior e sufoca o descritivo atual */
body.lead-page .eyebrow {
font-size: 0.64rem;
letter-spacing: 0.12em;
padding: 4px 9px;
margin-bottom: 8px;
}
/* o corpo vem do bloco de 768px; aqui muda so o ritmo */
body.lead-page .lp-hero h1 {
line-height: 1.08;
margin-bottom: 10px;
}
body.lead-page .lp-hero .lead,
body.lead-page .faixa__intro,
body.lead-page .equipe-titulo p,
body.lead-page .fechamento p {
font-size: 0.98rem;
}
body.lead-page .lp-hero .lead {
margin-bottom: 16px;
}
body.lead-page .sintoma,
body.lead-page .solucao p,
body.lead-page .beneficio p,
body.lead-page .pilar p,
body.lead-page .faq__resposta {
font-size: 0.97rem;
}
body.lead-page .solucao,
body.lead-page .beneficio,
body.lead-page .pilar,
body.lead-page .sintoma {
padding: 18px 16px;
}
body.lead-page .faq-com-form .form-card {
padding: 22px 16px 20px;
}
body.lead-page .campo__erro,
body.lead-page .form-card__ok {
font-size: 0.9rem;
}}/* ═══════════════════════════════════════════════════════════
TEXTO JUSTIFICADO
Toda a leitura corrida da folha passa a ser justificada. A
justificação só é honesta com hifenização junto: sem ela o
navegador estica os espaços da linha para fechar a margem
direita, e em coluna estreita isso abre os "rios" brancos
verticais que atravessam o parágrafo. O `hyphens: auto`
depende do `lang` do documento — as páginas declaram
`lang="pt-BR"`, então o dicionário certo é carregado.
Justificam-se os blocos de MEDIDA LARGA (`--medida`, ~70
caracteres). Ficam de fora, de propósito:
· itens de grade estreita (`.solucao p`, `.passo p`,
`.beneficio p`, `.pilar p`, `.escopo__texto`) — 45
caracteres por linha; justificados, viram rio puro;
· listas e rótulos (`.sintoma`, `.lista-dupla li`,
`.prova__rotulo`, `.trilha`) — não são texto corrido, e o
alinhamento à esquerda é o que deixa o marcador legível;
· títulos e botões, onde justificar não faz sentido nenhum.
═══════════════════════════════════════════════════════════ */
.lp-hero .lead,
.faixa__intro,
.faixa--split .faixa__corpo p,
.faixa__texto,
.destaque,
.subtema p,
.faq__resposta,
.equipe-titulo p,
.fechamento p,
.rodape-legal p {
text-align: justify;
text-justify: inter-word;
hyphens: auto;
-webkit-hyphens: auto;
}/* A ÚLTIMA linha de um parágrafo justificado fica alinhada à
esquerda por padrão — é o que se quer. Mas quando ela tem
uma palavra só, sobra uma órfã solta sob uma linha cheia.
`text-wrap: pretty` pede ao navegador que redistribua as
últimas linhas para evitar isso; onde não houver suporte, o
comportamento antigo continua valendo. */
.lp-hero .lead,
.faixa__intro,
.faixa--split .faixa__corpo p,
.faixa__texto,
.destaque,
.subtema p,
.faq__resposta,
.equipe-titulo p,
.fechamento p { text-wrap: pretty; }/* ─── PARAGRAFO CURTO ──────────────────────────────────────
Justificar so compensa a partir de tres linhas. Com duas, a
primeira precisa esticar os espacos ate a margem direita e o
que se ve e uma fileira de vaos brancos — o defeito que a
justificacao deveria evitar, concentrado numa linha so.
Sao quase sempre as mesmas frases: introducoes de uma
sentenca, em geral anunciando uma lista logo abaixo. Elas
ficam alinhadas a esquerda; o texto corrido de verdade, ao
redor, segue justificado.
═══════════════════════════════════════════════════════════ */
.curto {
text-align: left;
hyphens: manual;
-webkit-hyphens: manual;
}/* Títulos NÃO se justificam, mas se equilibram: sem isto um h2
de duas linhas costuma fechar com uma palavra sozinha na
segunda. `balance` divide as linhas em larguras próximas. */
.lp-hero h1,
.hero2 h1,
.faixa h2,
.equipe-titulo h2,
.fechamento h2,
.solucao h3,
.beneficio h3,
.passo h3,
.faq summary { text-wrap: balance; }/* ─── ONDE A JUSTIFICAÇÃO PARA ──────────────────────────────
A medida é fixa em `em`, então quem a limita nas telas
pequenas é a largura da tela: a 1440px um parágrafo lê a 70
caracteres por linha, a 390px lê a 41.
Justificar a 41 caracteres só funcionaria com hifenização, e
ela NÃO é garantida: o `hyphens: auto` depende de o navegador
ter o dicionário do idioma instalado, e há navegadores em
circulação — Chrome no Linux entre eles — que simplesmente
não hifenizam em português. Sem hífen, o navegador fecha a
margem esticando os espaços da linha, e numa coluna estreita
isso abre os vãos brancos que a justificação existia para
evitar. Foi o que apareceu no teste em 390px: linhas com três
palavras e dois vãos enormes entre elas.
560px de tela deixa ~63 caracteres por linha, folga
suficiente para os espaços se distribuírem sem estourar. Daí
para baixo vale a margem irregular, que é o menor defeito. */@media (max-width: 560px) {
.lp-hero .lead,
.faixa__intro,
.faixa--split .faixa__corpo p,
.faixa__texto,
.destaque,
.subtema p,
.faq__resposta,
.equipe-titulo p,
.fechamento p,
.rodape-legal p { text-align: left; hyphens: manual; -webkit-hyphens: manual; }}/* ═══════════════════════════════════════════════════════════
ALVOS DE TOQUE
O mínimo utilizável no dedo é 44px de altura. Vários links
desta folha renderizavam entre 17 e 25px: os do rodapé
legal, o logotipo da barra e o link de rota do mapa. O
`inline-block` é necessário — um `
` inline ignora padding
vertical no cálculo da área de clique.
Só abaixo de 768px: no desktop o ponteiro é preciso e o
respiro extra afastaria demais as linhas do rodapé.
═══════════════════════════════════════════════════════════ */@media (max-width: 768px) {
.rodape-legal a,
.rodape a,
.fechamento__rota,
.trilha a {
display: inline-block;
padding-block: 11px;
/* o padding empurraria as linhas do parágrafo para longe
umas das outras; a margem negativa devolve o espaço */
margin-block: -11px;
}
.barra__logo { display: flex; align-items: center; min-height: 44px; }}/* ═══════════════════════════════════════════════════════════
CARROSSEL
Grade que rola na horizontal com encaixe. A rolagem é
NATIVA: sem JavaScript o visitante ainda arrasta o dedo ou
usa a roda com shift, e o conteúdo todo continua no HTML —
nada aqui esconde texto do buscador.
Os controles (setas e pontos) só existem quando o script os
cria. Por isso ficam ocultos por padrão e o próprio script
os revela: numa página sem JS não sobra um botão morto.
═══════════════════════════════════════════════════════════ */
.carrossel {
position: relative;
/* Sem `overflow: hidden` aqui: e nesta caixa que as setas se
apoiam, e o recorte as comia. As copias do giro (que so
existem sob `data-loop="true"`) ja ficam contidas pelo
proprio trilho, que e quem rola. */
}/* `grid-auto-flow: column` em vez de flex: assim `grid-auto-columns`
define a largura do slide numa linha só, e todos os itens saem
com a MESMA altura sem precisar de `align-items: stretch` nem de
altura fixa — o item mais alto puxa a fileira. */
.carrossel__trilho {
display: grid;
grid-auto-flow: column;
/* Quem dimensiona a coluna do trilho e `grid-auto-columns`, e so
ele. `none` aqui apaga qualquer trilha explicita que outra
classe do mesmo elemento tenha declarado — e o caso do
"Como ajudamos", em que o mesmo `` e a grade de cartoes
no desktop e o trilho no celular. Sem isto a primeira coluna
sai da grade (uma faixa de 54px com o texto vazando) e as
outras saem do trilho. */
grid-template-columns: none;
grid-auto-columns: calc((100% - (var(--slides) - 1) * var(--carrossel-gap, 16px)) / var(--slides));
gap: var(--carrossel-gap, 16px);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
/* a sombra dos cartões é cortada pelo `overflow`; o respiro
vertical devolve espaço para ela aparecer */
padding: 6px 4px 18px;
margin: -6px -4px -18px;
scrollbar-width: none;
--slides: 3;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho > * {
scroll-snap-align: start;
/* sem isto um cartão de texto longo estoura a coluna da grade */
min-width: 0;
}/* ─── CONTROLES ────────────────────────────────────────────*/
.carrossel__controles {
display: none;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 22px;
}
.carrossel.tem-js .carrossel__controles { display: flex; }/* Trilho que cabe inteiro na tela não é carrossel, é uma fileira.
O script marca esse caso e a barra de controles some — setas
apagadas e pontos que não levam a lugar nenhum são pior que
controle nenhum. Volta a aparecer sozinho quando a janela
encolhe e o trilho passa a rolar de novo. */
.carrossel.carrossel--fixo .carrossel__controles { display: none; }/* As cópias que fazem o giro infinito. Somem quando o trilho
cabe inteiro na tela: ali não há para onde girar, e sem esta
regra a fileira mostraria os mesmos itens repetidos lado a
lado. O script recalcula isso a cada `resize`. */
.carrossel.carrossel--fixo .carrossel__trilho > [data-copia] { display: none; }
.carrossel__seta {
position: absolute;
/* lugar padrao: as pontas da linha de controles, ladeando os
pontos. So no desktop, onde ha folga lateral para reservar,
a seta sobe para o meio do trilho — ver o fim da folha. */
bottom: 0;
z-index: 3;
width: 44px;
height: 44px;
padding: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(var(--marca-rgb) / 0.14);
border-radius: 50%;
background: var(--branco);
box-shadow: 0 4px 14px rgb(var(--marca-rgb) / 0.12);
color: var(--marca);
line-height: 1;
cursor: pointer;
transition: opacity 0.2s, transform 0.2s, background 0.2s,
border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.carrossel__seta:hover {
background: var(--marca);
border-color: var(--marca);
color: var(--branco);
transform: scale(1.06);
}
.carrossel__seta:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }/* Ponta da rolagem: o botão continua no fluxo (a fileira não
dança quando ele apaga) mas sai da ordem de foco por conta do
`disabled` que o script aplica. */
.carrossel .carrossel__seta[disabled] {
opacity: 0.25;
transform: none;
box-shadow: none;
pointer-events: none;
}
.carrossel__pontos {
display: flex;
align-items: center;
gap: 2px;
}
.carrossel__ponto {
width: 36px;
height: 30px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-1);
-webkit-tap-highlight-color: transparent;
}
.carrossel__ponto::after {
content: '';
width: 20px;
height: 3px;
border-radius: 999px;
background: rgb(var(--marca-rgb) / 0.38);
transition: width var(--t-2) var(--ease-saida),
background var(--t-1) var(--ease);
}
.carrossel__ponto[aria-current="true"] ~ .carrossel__ponto::after {
background: rgb(var(--marca-rgb) / 0.15);
}
.carrossel__ponto[aria-current="true"]::after {
width: 32px;
background: var(--marca);
}
.carrossel__ponto:focus-visible {
outline: 2px solid var(--acento);
outline-offset: 2px;
box-shadow: var(--anel);
}
.carrossel__contagem {
display: none;
}/* sobre a faixa verde os controles precisam clarear */
/* A seta NAO muda sobre a faixa escura. Ela flutua sobre o
cartao, nao sobre o fundo da faixa — e o cartao e claro dos
dois lados. Um disco escurecido aqui sumiria dentro dele. */
.faixa--navy .carrossel__ponto::after,
.faixa--verde .carrossel__ponto::after { background: rgb(var(--branco-rgb) / 0.38); }
.faixa--navy .carrossel__ponto[aria-current="true"] ~ .carrossel__ponto::after,
.faixa--verde .carrossel__ponto[aria-current="true"] ~ .carrossel__ponto::after { background: rgb(var(--branco-rgb) / 0.15); }
.faixa--navy .carrossel__ponto[aria-current="true"]::after,
.faixa--verde .carrossel__ponto[aria-current="true"]::after { background: var(--claro); }
.faixa--navy .carrossel__contagem,
.faixa--verde .carrossel__contagem { display: none; }/* ═══════════════════════════════════════════════════════════
ESCOPO EM TRILHO
Dez frentes de atuação numa grade de duas colunas ocupavam,
no celular, cerca de 3.000px de coluna única — mais de três
telas para uma seção só. Em trilho as mesmas dez ocupam a
altura de uma.
Fora do trilho o `.escopo__item` não tem moldura: os itens se
separam pelo espaço da grade. Lado a lado e rolando, esse
espaço deixa de bastar — sem contorno, dois itens vizinhos
leem como um parágrafo só. Ganham então o mesmo cartão que a
folha já usa em `.prova` e `.subtema`: superfície própria,
fio de 1px na cor do verde diluído e o mesmo raio de 6px.
Nenhuma cor nova entra por causa disto.
═══════════════════════════════════════════════════════════ */
.carrossel--escopo .escopo__item {
display: flex;
flex-direction: column;
padding: 28px 26px;
background: var(--branco);
border: 1px solid rgb(var(--marca-rgb) / 0.14);
border-radius: 6px;
box-shadow: 0 2px 10px rgb(var(--tinta-rgb) / 0.04);
}/* na faixa branca o cartão branco desapareceria — mesmo critério
que `.faixa--branca .destaque` já aplica */
.faixa--branca .carrossel--escopo .escopo__item { background: var(--superficie); box-shadow: none; }/* sobre o verde a caixa clareia em vez de escurecer */
.faixa--navy .carrossel--escopo .escopo__item,
.faixa--verde .carrossel--escopo .escopo__item {
background: rgb(var(--branco-rgb) / 0.07);
border-color: rgb(var(--branco-rgb) / 0.16);
box-shadow: none;
}/* O link de ação desce para a base do cartão: com textos de
tamanhos diferentes ele pararia numa altura por cartão.
Precisa das DUAS regras: o `
` está dentro do
`.escopo__texto`, não é filho direto do cartão, então
`margin-top: auto` só empurra alguma coisa se o parágrafo
também for um contêiner de flex que ocupe a altura livre. */
.carrossel--escopo .escopo__texto {
flex: 1;
display: flex;
flex-direction: column;
}
.carrossel--escopo .escopo__texto a { margin-top: auto; padding-top: 14px; }@media (max-width: 1100px) { .carrossel__trilho { --slides: 2; }}@media (max-width: 700px) {
.carrossel__trilho { --slides: 1; }}@media (prefers-reduced-motion: reduce) {
.carrossel__trilho { scroll-behavior: auto; }
.carrossel__ponto::after { transition: none; }}/* ═══════════════════════════════════════════════════════════
REVELAÇÃO NA ROLAGEM — BLOCOS QUE FALTAVAM
A folha já animava `.solucao`, `.beneficio`, `.prova`,
`.sintoma` e `.pilar`. Faltavam as etapas, os itens de escopo,
os retratos e as perguntas — justamente os blocos longos, onde
a entrada escalonada quebra a parede de texto.
Mesmo contrato dos demais: o estado inicial só existe sob
`.js`, então numa página sem script nada fica invisível.
═══════════════════════════════════════════════════════════ */
.js .passo,
.js .equipe-membro,
.js .faq details {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.65s cubic-bezier(.22,.61,.36,1),
transform 0.65s cubic-bezier(.22,.61,.36,1);
}
.js .passo.visivel,
.js .equipe-membro.visivel,
.js .faq details.visivel { opacity: 1; transform: none; }/* escalonamento por posição na fileira */
.js .passo:nth-child(2) { transition-delay: 0.09s; }
.js .passo:nth-child(3) { transition-delay: 0.18s; }
.js .passo:nth-child(4) { transition-delay: 0.27s; }
.js .passo:nth-child(5) { transition-delay: 0.36s; }
.js .equipe-membro:nth-child(2) { transition-delay: 0.12s; }/* No FAQ o atraso é menor e some depois da quarta: são até sete
perguntas, e 7 × 0,09s deixaria a última entrando quase um
segundo depois da primeira. */
.js .faq details:nth-child(2) { transition-delay: 0.06s; }
.js .faq details:nth-child(3) { transition-delay: 0.12s; }
.js .faq details:nth-child(4) { transition-delay: 0.18s; }/* O numeral da etapa entra depois do bloco, como o ícone dos
pilares: sobe de baixo e assenta. */
.js .passo__num {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.55s ease 0.12s, transform 0.55s ease 0.12s;
}
.js .passo.visivel .passo__num { opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce) {
.js .passo,
.js .passo__num,
.js .equipe-membro,
.js .faq details {
opacity: 1;
transform: none;
transition: none;
}}/* ─── REVELAÇÃO DENTRO DO CARROSSEL ────────────────────────
Item de trilho NÃO pode ser observado um a um. O observador
dispara quando o elemento cruza a viewport, e um cartão
parado 2.000px à direita nunca cruza: ele fica com
`opacity: 0` para sempre. Se o visitante pula para o fim do
trilho — clicando no último ponto, ou arrastando rápido — os
cartões do meio aparecem em branco. Foi exatamente o que o
teste mostrou: dos dez, oito continuavam invisíveis depois de
rolar o trilho inteiro.
Quem é observado, então, é o CARROSSEL. Quando ele entra em
cena, todos os cartões acendem juntos; o escalonamento fica
só nos primeiros, que são os que o olho realmente vê entrar.
═══════════════════════════════════════════════════════════ */
.js .carrossel__trilho > * {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.65s cubic-bezier(.22,.61,.36,1),
transform 0.65s cubic-bezier(.22,.61,.36,1);
}
.js .carrossel.visivel .carrossel__trilho > * { opacity: 1; transform: none; }
.js .carrossel.visivel .carrossel__trilho > *:nth-child(2) { transition-delay: 0.09s; }
.js .carrossel.visivel .carrossel__trilho > *:nth-child(3) { transition-delay: 0.18s; }/* os controles acompanham o trilho, um pouco depois */
.js .carrossel .carrossel__controles {
opacity: 0;
transition: opacity 0.5s ease 0.3s;
}
.js .carrossel.visivel .carrossel__controles { opacity: 1; }@media (prefers-reduced-motion: reduce) {
.js .carrossel__trilho > *,
.js .carrossel .carrossel__controles {
opacity: 1;
transform: none;
transition: none;
}}/* ─── SOLUÇÕES EM TRILHO ───────────────────────────────────
No celular esta faixa era a mais alta da página inteira:
2.247px, cinco blocos de ícone + título + parágrafo
empilhados. Em trilho, os mesmos cinco cabem numa tela.
Os itens já tinham entrada animada PRÓPRIA — o ícone cresce
de 0,82, o título e o corpo sobem em camadas — e ela é
disparada pela classe `.visivel` no `.solucao`, que agora não
chega mais: quem o observador acompanha é o carrossel, não
cada cartão. Sem as três regras abaixo o ícone ficaria
encolhido e o texto transparente para sempre. É o mesmo
assentamento de antes, comandado pelo trilho.
═══════════════════════════════════════════════════════════ */
.js .carrossel.visivel .solucao,
.js .carrossel.visivel .solucao h3,
.js .carrossel.visivel .solucao p { opacity: 1; transform: none; }
.js .carrossel.visivel .solucao__icone { transform: none; }/* Fora do trilho o `.solucao` se apoiava no espaço da grade
para se separar do vizinho. Lado a lado e rolando, ganha a
mesma superfície discreta que o celular já lhe dava — o
branco a 5% sobre o verde, nada de cor nova. */
.carrossel--solucoes .solucao {
display: flex;
flex-direction: column;
padding: 28px 26px;
margin: 0;
min-width: 0;
box-sizing: border-box;
background: rgb(var(--branco-rgb) / 0.06);
border: 1px solid rgb(var(--branco-rgb) / 0.14);
border-radius: 10px;
overflow: hidden;
}
.carrossel--solucoes .carrossel__trilho {
--carrossel-gap: 28px;
padding-left: 14px;
padding-right: 14px;
margin-left: 0;
margin-right: 0;
}/* nas páginas em que esta faixa é clara, a caixa fecha em vez
de clarear — mesmo critério de `.faixa--branca .destaque` */
.faixa--branca .carrossel--solucoes .solucao,
.faixa--clara .carrossel--solucoes .solucao,
.faixa--cinza .carrossel--solucoes .solucao {
background: rgb(var(--tinta-rgb) / 0.04);
border-color: rgb(var(--marca-rgb) / 0.14);
}/* ═══════════════════════════════════════════════════════════
FAIXA INTERMEDIÁRIA — 900 a 1100px
O tablet em pé caía no mesmo desenho do celular: coluna
única em `.escopo` e `.sintomas`, com cada item ocupando
~700px de largura para duas linhas de texto. Duas colunas
nessa faixa devolvem a proporção sem apertar a medida.
═══════════════════════════════════════════════════════════ */@media (min-width: 701px) and (max-width: 1100px) {
.escopo { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 36px; }
.sintomas { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 32px; }}/* ─── HERO ─────────────────────────────────────────────────────
O hero das especialidades abre logo abaixo da barra fixa. O
respiro de 96px herdado empurrava o H1 para fora da primeira
dobra em telas de notebook; 22px encosta o bloco no topo sem
colar o texto na barra. */
body.lead-page .lp-hero {
padding-top: 22px;
}
body.lead-page .lp-hero__inner {
margin-top: -14px;
max-width: 760px;
}/* A seta de "continuar lendo" so aparece nas paginas com leads
colapsados. Mantida aqui para que essas paginas continuem com o
mesmo posicionamento quando ganharem o toggle. */
body.lead-page .trilha,
body.lead-page .eyebrow {
width: 100%;
max-width: 28rem;
}
body.lead-page .eyebrow {
width: fit-content;
max-width: 100%;
}
body.lead-page .lp-hero h1 {
width: 100%;
max-width: 42ch;
}
body.lead-page .lp-hero__toggle {
margin-top: -26px;
margin-bottom: -12px;
margin-left: 0;
left: calc(min(700px, 100%) / 2 - 27px);
transform: translateY(-38px);
}/* Os dois CTAs empilham em coluna, alinhados a esquerda e com a
mesma largura: lado a lado eles competiam entre si, e com largura
propria o botao vazado ficava visivelmente menor que o cheio. */
body.lead-page .lp-hero__acao {
display: grid;
grid-template-columns: 1fr;
justify-items: start;
width: 100%;
max-width: 28rem;
}
body.lead-page .lp-hero__acao .btn,
body.lead-page .lp-hero__acao .btn--vazado {
width: 100%;
min-height: 54px;
box-sizing: border-box;
justify-content: flex-start;
text-align: left;
align-items: center;
}/* A nota de atendimento e apoio, nao leitura corrida: acompanha a
largura do bloco de acao em vez da medida de texto. */
body.lead-page .lp-hero__nota {
width: 100%;
max-width: 28rem;
}/* ─── BLOCOS DE TEXTO EM LARGURA TOTAL ─────────────────────────
Para paragrafos de transicao que introduzem uma grade logo
abaixo: a medida de leitura os deixaria estreitos demais em
relacao ao que vem em seguida. */
body.lead-page .lp-hero .lead {
width: 100%;
max-width: 28rem;
}
.faixa__texto--largo {
max-width: none;
width: 100%;
}/* ─── COMPARATIVO ESTATICO ─────────────────────────────────────
Variante do bloco `.solucao` para quando os cards existem para
ser comparados entre si, e nao percorridos um a um: grade fixa
no lugar do carrossel, sem o hover que desloca o card. */
.comparativo-estatico {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
width: 100%;
}
.comparativo-estatico .solucao {
display: flex;
flex-direction: column;
padding: 28px 26px;
margin: 0;
background: rgb(var(--branco-rgb) / 0.06);
border: 1px solid rgb(var(--branco-rgb) / 0.14);
border-radius: 8px;
min-width: 0;
box-sizing: border-box;
}@media (hover: hover) {
.comparativo-estatico .solucao {
padding: 28px 26px;
margin: 0;
}}@media (max-width: 980px) {
.comparativo-estatico {
grid-template-columns: 1fr;
}}
/* ═══════════════════════════════════════════════════════════════
BOTAO PRINCIPAL SOBRE FAIXA ESCURA
O `.btn` e navy cheio. Na folha do agro ele era terracota e podia
aparecer sobre a faixa escura sem mais nada; aqui ele tem a cor da
propria faixa e sumiria dentro dela. Sobre o escuro, portanto, ele
inverte: branco com texto navy — a mesma solucao de
`assets/css/site.css` no CTA do FAQ e de `familia-pages.css` no
fechamento do hub.
O hero entra na regra pelo mesmo motivo: a foto de fundo dele leva
um veu navy, e o botao cheio virava um retangulo escuro sobre
escuro. A barra fixa do topo fica de fora — la o botao e menor,
tem borda propria e o branco cheio competiria com o logotipo.
═══════════════════════════════════════════════════════════════ */
.lp-hero .btn:not(.btn--vazado):not(.btn--claro),
.faixa--navy .btn:not(.btn--vazado):not(.btn--claro),
.faixa--verde .btn:not(.btn--vazado):not(.btn--claro),
.fechamento .btn:not(.btn--vazado):not(.btn--claro) {
background: var(--btn-escuro-fundo);
color: var(--btn-escuro-texto);
}
.lp-hero .btn:not(.btn--vazado):not(.btn--claro) {
box-shadow: none !important;
filter: none !important;
-webkit-box-shadow: none !important;
appearance: none;
-webkit-appearance: none;
}
.lp-hero .btn:not(.btn--vazado):not(.btn--claro):hover,
.faixa--navy .btn:not(.btn--vazado):not(.btn--claro):hover,
.faixa--verde .btn:not(.btn--vazado):not(.btn--claro):hover,
.fechamento .btn:not(.btn--vazado):not(.btn--claro):hover {
background: var(--btn-escuro-fundo-hover);
color: var(--btn-escuro-texto);
}
/* ═══════════════════════════════════════════════════════
CARROSSEL — AS SETAS FICAM FORA DOS CARTOES
Flutuando sobre o trilho, a seta cobria a lateral do
cartao: um disco branco por cima da primeira palavra de
cada linha. Escondê-la ate o hover so adiava o problema —
quando aparecia, era em cima do texto.
Agora ela tem faixa propria. No desktop o carrossel ganha
recuo lateral, o trilho encolhe na mesma medida e a seta
ocupa a folga: fica ao lado dos cartoes, nunca sobre eles.
Como nao cobre nada, tambem nao precisa se esconder — e a
seta sempre visivel mostra, apagada, onde o trilho acaba.
Onde nao ha folga a dar — telas estreitas, toque — o lugar
e nas pontas da linha de controles, ladeando os pontos.
Tambem ali ela nao cobre nada.
`--ativa` e o estado que o script acende enquanto a deriva
corre: levar o ponteiro para a lateral poe o trilho a rolar
naquele sentido, e o realce diz de onde vem o movimento sem
precisar de texto.
═══════════════════════════════════════════════════════ */
.carrossel__seta--anterior { left: 0; }
.carrossel__seta--proximo { right: 0; }
/* o vao lateral reserva o lugar das setas: sem ele os pontos
passariam por baixo delas nas telas estreitas */
.carrossel.tem-js .carrossel__controles {
min-height: 44px;
padding: 0 52px;
}
.carrossel__seta--ativa {
background: var(--marca);
border-color: var(--marca);
color: var(--branco);
}
/* Fileira que cabe inteira na tela nao rola: seta ali nao tem
para onde levar. */
.carrossel.carrossel--fixo .carrossel__seta { display: none; }
/* A faixa lateral so existe onde sobra largura para ela. Abaixo
disso o cartao ja esta apertado, e tirar 112px dele para pôr
duas setas seria trocar conteudo por controle. O ponteiro
fino entra na conta porque no toque a seta e o ultimo
recurso: ali se arrasta. */
@media (hover: hover) and (pointer: fine) and (min-width: 860px) {
/* a medida da faixa mora numa variavel porque duas paginas
ja escreviam o recuo lateral do carrossel por conta propria
— lendo a variavel, elas abrem a faixa junto */
.carrossel {
--carrossel-lateral: 56px;
padding-left: var(--carrossel-lateral);
padding-right: var(--carrossel-lateral);
}
/* a moldura envolve so o trilho: e ela que da o eixo vertical
dos cartoes. Medida pelo carrossel inteiro, a seta desceria
junto com a linha de pontos. */
.carrossel__moldura { position: relative; }
.carrossel__seta {
top: 50%;
bottom: auto;
/* centra pela margem, nao por `transform`: assim o transform
fica livre para o realce do hover e da deriva */
margin-top: -22px;
}
/* de volta ao recuo do carrossel: a seta sai da area do trilho */
.carrossel__seta--anterior { left: calc(var(--carrossel-lateral, 56px) * -1); }
.carrossel__seta--proximo { right: calc(var(--carrossel-lateral, 56px) * -1); }
.carrossel.tem-js .carrossel__controles {
min-height: 0;
padding: 0;
}
}
/* a seta apagada ainda ocupa o lugar — a moldura nao danca —
mas sai da ordem de foco pelo `disabled` que o script poe */
.carrossel .carrossel__seta[disabled] {
opacity: 0.28;
transform: none;
box-shadow: none;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════
TRILHA — SUBLINHADO QUE NAO INVADE A LINHA DE BAIXO
═══════════════════════════════════════════════════════════
Esta e a UNICA divergencia de layout entre esta folha e as
irmas `familia/familia-lead-pages.css` e `rural/agro-lead-pages.css`
(as de empresarial, civil e trabalhista ja a trazem) —
considere-a ao rodar o `diff` que o cabecalho recomenda.
O bloco "ALVOS DE TOQUE", acima, da a `.trilha a` um
`display: inline-block` com `padding-block: 11px` para chegar
aos 44px de alvo no dedo. O efeito colateral e que o
`border-bottom` do link deixa de acompanhar o texto e passa a
ser desenhado na base da caixa preenchida, 11px abaixo dele.
Enquanto a trilha cabe em uma linha, ninguem nota. Quando ela
quebra em duas — e abaixo de 768px o `max-width: 30ch` faz
quase toda trilha quebrar — esse filete cai exatamente sobre a
segunda linha e vira um risco no meio do texto.
`text-decoration` resolve na raiz: ela segue o texto, nao a
caixa, entao o alvo de toque continua com os 44px e o
sublinhado volta para debaixo da palavra. */
@media (max-width: 768px) {
.trilha a {
border-bottom: 0;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(var(--claro-rgb) / 0.45);
text-underline-offset: 3px;
}
.trilha a:hover {
text-decoration-color: var(--branco);
}
}
/* ═══════════════════════════════════════════════════════════
ICONES DOS CARDS DE SOLUCAO EM SVG EMBUTIDO
═══════════════════════════════════════════════════════════
Segunda divergencia desta folha em relacao as irmas — a
primeira e o bloco da trilha, acima.
`.solucao__icone img`, logo acima, foi escrito para os PNG que
`/rural/images/` guarda: traco preto sobre branco opaco, sem
alfa, que so viram branco por `filter: invert(1)` somado a
`mix-blend-mode: screen`. A area bancaria nao tem esse jogo de
PNG. Herdou tres icones da leadpage de campanha que ocupava
`/bancario/` — mas um deles e uma pa com uma muda, do agro, e
seriam precisos dezoito no total, tres por pagina.
Por isso os cards usam SVG embutido no HTML. Ele chega branco
por `currentColor`, que e o caminho natural de um traco vetorial
e dispensa o par filtro + blend. As duas regras convivem: no dia
em que os PNG existirem, o `img` volta a funcionar sem que nada
aqui precise mudar. */
.solucao__icone svg {
width: 100%;
height: 100%;
display: block;
color: var(--branco);
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ═══════════════════════════════════════════════════════════
CIRCULO DO ICONE DE SOLUCAO SOBRE A FAIXA ESCURA
═══════════════════════════════════════════════════════════
Terceira e ultima divergencia desta folha em relacao as irmas.
Na folha do agro, de onde `.solucao__icone` veio, o circulo e
pintado em `--terracota` e a faixa que o abriga em `--verde`:
duas cores distintas, e o disco se destaca. A repintura para a
paleta da casa colapsou o acento no proprio navy — e como a
faixa que hospeda os cards tambem e navy, o circulo passou a
ser invisivel, um disco da cor exata do fundo.
O defeito estava latente: familia, empresarial, civil e
trabalhista herdaram a mesma regra, mas nenhuma delas chegou a
usar o bloco `.solucoes`. Ele so aparece agora, que a area
bancaria adotou o gabarito das paginas de `/rural/`.
A correcao segue o que o cabecalho desta folha ja estabelece
para superficies escuras: sobre o navy, quem faz o papel de
acento e o `--gray-light`. Aqui ele entra diluido, como veu, com
um fio de contorno — o suficiente para o disco existir sem
competir com o traco branco do icone. */
.faixa--navy .solucao__icone,
.faixa--verde .solucao__icone {
background: var(--icone-fundo-escuro);
border: var(--icone-borda-escuro);
}
/* ═══════════════════════════════════════════════════════════
MOVIMENTO REDUZIDO · REGRAS NOVAS
Complementa os blocos `prefers-reduced-motion` que ja existem
por secao. Aqui ficam so os movimentos introduzidos no
refactor: o assentar da foto do hero, a elevacao dos cartoes,
a seta de `.outras` e a abertura animada da sanfona.
O padrao da folha e o mesmo de sempre: quem pede menos
movimento recebe o conteudo PARADO, nunca ausente. Nenhuma
regra abaixo esconde nada — todas anulam deslocamento.
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.lp-hero__bg { animation: none; }
.btn,
.escopo--cards-resumo .escopo__item,
.passos--resumo .passo,
.resumo-topo .sintoma,
.outras__grid a {
transition: background-color var(--t-1) linear, border-color var(--t-1) linear;
}
.btn:hover,
.btn:active,
.escopo--cards-resumo .escopo__item:hover,
.passos--resumo .passo:hover,
.resumo-topo .sintoma:hover,
.outras__grid a:hover { transform: none; }
/* o filete e a seta continuam aparecendo, so nao deslizam */
.barra__links a:not(.btn)::after,
.escopo--cards-resumo .escopo__item::before { transition: none; }
.outras__grid a::after { transition: opacity var(--t-1) linear; transform: none; }
.faq summary::after { transition: opacity var(--t-1) linear; }
@supports (interpolate-size: allow-keywords) {
.faq details::details-content { transition: none; }
}
}
/* ═══════════════════════════════════════════════════════════
BLOCOS NOVOS SOBRE FAIXA ESCURA
Nenhuma leadpage monta hoje a sanfona nem o resumo sobre
`.faixa--verde` / `.faixa--navy` — as 126 paginas usam so as
faixas clara e branca. Mas o refactor deu FUNDO PROPRIO a
dois blocos que antes eram transparentes (a ficha de sintoma
e o painel de pergunta), e um fundo branco fixo sobre a
faixa escura seria uma mancha. As regras abaixo devolvem a
esses dois blocos o comportamento das demais superficies da
folha: veu claro sobre o escuro, no lugar do branco.
Sem elas o problema so apareceria no dia em que alguem
montasse a secao na faixa escura — e ai o motivo ja teria se
perdido. Custam 20 linhas; a caca ao bug custaria mais.
═══════════════════════════════════════════════════════════ */
.faixa--navy .resumo-topo .sintoma,
.faixa--verde .resumo-topo .sintoma {
background: rgb(var(--branco-rgb) / 0.07);
border-color: rgb(var(--branco-rgb) / 0.14);
border-left-color: rgb(var(--claro-rgb) / 0.7);
color: rgb(var(--branco-rgb) / 0.9);
box-shadow: none;
}
.faixa--navy .resumo-bloco h3, .faixa--verde .resumo-bloco h3,
.faixa--navy .resumo-topo > h3, .faixa--verde .resumo-topo > h3,
.faixa--navy .resumo-base > h3, .faixa--verde .resumo-base > h3 { color: var(--claro); }
.faixa--navy .resumo-topo > h3::after, .faixa--verde .resumo-topo > h3::after,
.faixa--navy .resumo-base > h3::after, .faixa--verde .resumo-base > h3::after {
background: linear-gradient(to right, rgb(var(--claro-rgb) / 0.4), rgb(var(--claro-rgb) / 0));
}
.faixa--navy .faq details,
.faixa--verde .faq details {
background: rgb(var(--branco-rgb) / 0.06);
border-color: rgb(var(--branco-rgb) / 0.14);
}
.faixa--navy .faq details[open],
.faixa--verde .faq details[open] {
background: rgb(var(--branco-rgb) / 0.1);
border-color: rgb(var(--claro-rgb) / 0.4);
box-shadow: none;
}
/* o terracota rende 1,59:1 sobre o verde: sobre faixa escura quem
faz o papel de acento e o `--claro` — a mesma troca que a folha
ja aplica ao escopo, a lista dupla e ao filete do h2 */
.faixa--navy .faq summary, .faixa--verde .faq summary { color: var(--branco); }
.faixa--navy .faq summary:hover, .faixa--verde .faq summary:hover { color: var(--claro); }
.faixa--navy .faq summary::before,
.faixa--verde .faq summary::before {
background:
linear-gradient(var(--claro), var(--claro)) center / 14px 2px no-repeat,
rgb(var(--branco-rgb) / 0.12);
}
.faixa--navy .faq summary::after,
.faixa--verde .faq summary::after { background: var(--claro); }
.faixa--navy .faq__resposta,
.faixa--verde .faq__resposta { color: rgb(var(--branco-rgb) / 0.86); }
/* ═══════════════════════════════════════════════════════════
COLISAO DE CASCATA · REVELACAO vs. INTERACAO
═══════════════════════════════════════════════════════════
As regras de entrada (`.js .passo`, `.js .sintoma`,
`.js .faq details`) declaram `transition` com a lista COMPLETA
das propriedades que animam — opacidade e deslocamento. Uma
declaracao de `transition` substitui a anterior inteira, nao
se soma a ela. E como essas regras aparecem depois na folha e
tem a mesma especificidade (ou mais) que as dos componentes,
elas apagavam a transicao de HOVER dos tres blocos.
O efeito era discreto e por isso passava: o cartao subia e a
sombra aparecia, mas de um quadro para o outro, sem percurso.
Aqui a lista e remontada com os dois papeis juntos — entrada
e interacao —, uma vez so, depois de todas as outras.
Ao mexer numa das duas pontas, mexer nesta tambem. */
.js .passos--resumo .passo {
transition: opacity 0.65s cubic-bezier(.22,.61,.36,1),
transform 0.65s cubic-bezier(.22,.61,.36,1),
box-shadow var(--t-2) var(--ease-saida),
border-color var(--t-2) var(--ease),
background var(--t-2) var(--ease);
}
.js .resumo-topo .sintoma {
transition: opacity 0.6s cubic-bezier(.22,.61,.36,1),
transform 0.6s cubic-bezier(.22,.61,.36,1),
box-shadow var(--t-2) var(--ease-saida),
border-left-color var(--t-2) var(--ease);
}
.js .faq details {
transition: opacity 0.65s cubic-bezier(.22,.61,.36,1),
transform 0.65s cubic-bezier(.22,.61,.36,1),
box-shadow var(--t-2) var(--ease-saida),
border-color var(--t-2) var(--ease),
background var(--t-2) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
.js .passos--resumo .passo,
.js .resumo-topo .sintoma,
.js .faq details { transition: none; }
}
/* ═══════════════════════════════════════════════════════════
COMO AJUDAMOS — TRILHO SO NO CELULAR
Os quatro cartoes da secao "Como ajudamos" cabem lado a lado
a partir de 769px: ali a secao continua sendo a grade de
sempre (`.escopo--cards-resumo`), e nada muda. No celular ela
virava quatro cartoes empilhados, cada um com titulo, corpo e
botao — perto de 1.600px de coluna unica para uma secao so.
Em trilho os mesmos quatro cabem na altura de um.
O HTML e um so para as duas larguras: o mesmo elemento leva
`.escopo--cards-resumo` e `.carrossel__trilho`. Quem escolhe
qual dos dois vale e o breakpoint — 768px, o mesmo em que a
grade ja caia para coluna unica.
O script nao monta o carrossel no desktop (`data-carrossel-em`
em `carrossel.js`), entao aqui nao ha controles a esconder
numa primeira carga larga. As regras de desligamento abaixo
existem para o caminho inverso: janela estreita que o
visitante alarga depois, com o trilho ja montado.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* `grid-template-columns` da grade e `grid-auto-flow: column`
do trilho nao convivem: a coluna explicita ficaria com a
largura da grade e so o resto seguiria `--slides`. No
trilho quem manda e `grid-auto-columns`. */
.carrossel--ajuda .carrossel__trilho {
/* de novo `none`, e nao so na base do trilho: entre 701 e
768px a regra de `.escopo` vem depois dela na folha e
devolveria duas colunas explicitas ao trilho — as duas
primeiras esmagadas, as outras inteiras */
grid-template-columns: none;
--carrossel-gap: 18px;
/* `gap` escrito de novo, e nao so a variavel: entre 701 e
1100px a regra de `.escopo` vem depois da do trilho na
folha e imporia 36px de vao. A largura da coluna sai da
variavel, entao um vao diferente dela desalinharia o
encaixe — o item pararia sempre um pouco fora da borda. */
gap: var(--carrossel-gap);
}
/* Quatro pontos ocupam 96px — cabem em qualquer celular. A
regra geral os esconde por causa dos trilhos de dez e onze
itens, cuja linha de pontos vazava a tela. */
.carrossel--ajuda .carrossel__pontos { display: flex; }
}
@media (min-width: 769px) {
/* de volta a grade: sem rolagem, sem encaixe e sem a faixa
lateral que o desktop reserva para as setas */
.carrossel--ajuda { padding-left: 0; padding-right: 0; }
.carrossel--ajuda .carrossel__trilho {
grid-auto-flow: row;
/* a grade escrita por extenso: o `grid-template-columns: none`
da base do trilho apaga a trilha de `.escopo--cards-resumo`,
e sem ela os quatro cartoes empilhavam numa coluna so */
grid-template-columns: repeat(4, minmax(0, 1fr));
overflow: visible;
scroll-snap-type: none;
/* o vao da grade, repetido aqui pelo mesmo motivo: o `gap`
do trilho vem depois na folha e venceria */
gap: 24px;
padding: 0;
margin: 0;
}
.carrossel--ajuda .carrossel__trilho > * { scroll-snap-align: none; }
.carrossel--ajuda .carrossel__controles,
.carrossel--ajuda .carrossel__seta { display: none; }
}
/* entre 769 e 1100px a grade de escopo abre 28px de linha e 36px
de coluna — o mesmo respiro que a secao tinha antes do trilho */
@media (min-width: 769px) and (max-width: 1100px) {
.carrossel--ajuda .carrossel__trilho {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 36px;
}
}
/* ═══════════════════════════════════════════════════════════
COMO ATUAMOS — TRILHO SO NO CELULAR
Mesmo desenho de `.carrossel--ajuda`, uma secao adiante: as
tres etapas cabem lado a lado a partir de 769px e ali seguem
sendo a grade de sempre. No celular elas empilhavam tres
cartoes de medalhao, titulo e paragrafo — quase mil pixels de
coluna unica logo depois da lista de sintomas.
O mesmo elemento leva `.passos--resumo` e `.carrossel__trilho`,
e o breakpoint escolhe qual dos dois vale. Como o trilho
apaga qualquer trilha explicita (`grid-template-columns: none`
na base), o ramo do desktop reescreve a grade por extenso.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.carrossel--atuacao .carrossel__trilho {
/* entre 701 e 768px `.passos--resumo` ainda pede duas colunas
explicitas; `none` devolve o dimensionamento ao trilho */
grid-template-columns: none;
--carrossel-gap: 18px;
/* o `gap` do trilho vem antes de `.passos` na folha: escrito
aqui, ele volta a casar com a largura da coluna */
gap: var(--carrossel-gap);
}
/* tres pontos cabem folgados em qualquer celular */
.carrossel--atuacao .carrossel__pontos { display: flex; }
}
@media (min-width: 769px) {
.carrossel--atuacao { padding-left: 0; padding-right: 0; }
.carrossel--atuacao .carrossel__trilho {
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: visible;
scroll-snap-type: none;
gap: 22px;
padding: 0;
margin: 0;
}
.carrossel--atuacao .carrossel__trilho > * { scroll-snap-align: none; }
.carrossel--atuacao .carrossel__controles,
.carrossel--atuacao .carrossel__seta { display: none; }
}
/* ate 1100px a grade de etapas ja caia para duas colunas, e com
vao maior: quem escreve isso e a regra de `.passos`, que vem
depois de `.passos--resumo` na folha */
@media (min-width: 769px) and (max-width: 1100px) {
.carrossel--atuacao .carrossel__trilho {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 34px;
}
}