/* ═══════════════════════════════════════════════════════════════ AREA PAGES — folha unica das paginas de area (hubs) ═══════════════════════════════════════════════════════════════ Uma folha para TODAS as areas. Nao contem nenhum valor de cor: consome tokens que a pagina declara carregando, ANTES desta, um arquivo de paleta. E a irma de `lead-pages.css`, que faz o mesmo pelas paginas de especialidade. Uso na pagina — a paleta primeiro, a estrutura depois: ... No agro, alem da paleta propria, o `` precisa de `page-rural` — veja o bloco no fim do arquivo. O carrossel do hero fica em `/assets/js/hero.js`; os de secao, em `/assets/js/carrossel.js`. ── De onde veio ──────────────────────────────────────────────── Da unificacao das seis folhas por area: `rural/agro-pages.css`, `familia/familia-pages.css`, `empresarial/`, `civil/`, `trabalhista/` e `bancario/`. Eram tres versoes: a do agro, a de familia e um grupo de quatro identicas entre si. Das 302 regras que as duas pontas tinham em comum, 217 ja eram identicas, 75 diferiam SO em cor e 6 diferiam em layout. A estrutura veio da folha de bancario; a do agro serviu de oraculo, porque e ela que distingue `--marca` de `--acento` — papeis que a paleta institucional funde num tom so. ── As 6 regras que nao eram cor ──────────────────────────────── `.top-nav` e o bloco `.publicos-*` foram redesenhados entre as duas areas. Ficaram no fim do arquivo, sob `body.page-rural`. ── `.sec--verde` e `.sec--navy` ──────────────────────────────── As paginas do agro escrevem `sec--verde`; as demais, `sec--navy`. Os seletores afetados aceitam os dois nomes, entao nenhum HTML precisa mudar por causa disso. ── Dois `:root` e dois resets ────────────────────────────────── A folha de origem declarava as variaveis duas vezes, de proposito: o segundo bloco e o que o navegador aplica por ultimo. Ambos foram esvaziados de cor e mantem apenas `--medida`, `--coluna` e `--gutter`, que sao layout. O mesmo vale para o reset `*`, que tambem aparece duas vezes — nao remova o segundo. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── IDENTIDADE VISUAL — SITE PRINCIPAL ────────────────── Pantone 296 C (navy) · Pantone Cool Gray 09 C · Branco. Os mesmos tres tons de `assets/css/site.css`, com os mesmos nomes, para que a pagina de familia leia igual a home. Esta folha nasceu como copia da do agronegocio e vinha pintada em Pantone 3308 C (verde) com Pantone 7505 C (terracota) de acento. Os dois sairam: onde o verde era o dark da faixa entrou o navy, e onde o terracota marcava o acento — botao principal, filete, foco, `summary` em hover — entrou o navy tambem. Com uma cor de marca so, o que separa o botao de conversao do botao de navegacao passa a ser preenchido x contorno (`.btn-primary` x `.btn-ghost`), e nao mais duas cores. Nas faixas escuras o navy nao pode marcar a si mesmo: sobre ele quem faz o papel de acento e o `--gray-light`, e o botao principal inverte para branco (veja `.sec--navy .btn-primary`, no fim do arquivo). */ :root { /* Apenas tokens de LAYOUT. Todas as cores vem do arquivo de paleta que a pagina carrega ANTES desta folha — veja o cabecalho. */ --medida: 34em; --coluna: 1180px; /* recuo lateral das faixas: nunca menor que 6vw, e o bastante para centrar a coluna de leitura nas telas largas. A folha do agro ja tinha este token; a navy repetia a expressao inline em cada uso. */ --gutter: max(6vw, calc((100% - var(--coluna)) / 2)); /* ── ESCALA DE ARREDONDAMENTO ──────────────────────────────── Os mesmos tres degraus de `lead-pages.css`, pelo mesmo motivo: esta folha tinha 4px no cartao do hero, no de servico, no de etapa, no gatilho e no de contato, e 6px nos blocos herdados da folha do agro — decisoes tomadas em momentos diferentes, que o olho le como desalinho entre as duas metades do arquivo. Papel de cada degrau: --r-1 controle (botao, chip, gatilho, ficha de uma linha) --r-2 cartao e painel --r-3 bloco grande (cartao do hero, cartao de contato) O hero, as faixas de secao e a nota legal continuam de canto vivo: sao superficies de pagina, nao objetos. */ --r-1: 10px; --r-2: 16px; --r-3: 22px; /* ── ELEVACAO ──────────────────────────────────────────────── Duas camadas cada uma: uma sombra curta que assenta a borda e uma longa que da distancia. A folha vinha com sete sombras avulsas, todas de uma camada so — nenhuma lia como elevacao, so escureciam a borda. Nao sao cor: sao os tokens da paleta em transparencia. A regra do cabecalho (nenhum valor de cor nesta folha) continua valendo — nao ha hexadecimal nenhum aqui. */ --sombra-1: 0 1px 2px rgb(var(--tinta-rgb) / 0.04), 0 2px 8px rgb(var(--tinta-rgb) / 0.05); --sombra-2: 0 2px 4px rgb(var(--tinta-rgb) / 0.04), 0 14px 32px rgb(var(--tinta-rgb) / 0.10); --sombra-3: 0 4px 10px rgb(var(--tinta-rgb) / 0.06), 0 28px 64px rgb(var(--tinta-rgb) / 0.18); /* ── MOVIMENTO ─────────────────────────────────────────────── `ease` puro sai rapido e chega devagar — em hover de cartao isso le como arrasto. As duas curvas abaixo saem devagar e assentam sem quicar. */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-saida: cubic-bezier(0.22, 1, 0.36, 1); --t-1: 0.18s; /* troca de cor, estado de controle */ --t-2: 0.34s; /* deslocamento, elevacao, abertura */ /* ── ANEL DE FOCO ──────────────────────────────────────────── A folha repetia `outline: 2px solid var(--acento)` em nove lugares. O halo em volta mantem o foco visivel tambem sobre fundo escuro, onde o contorno sozinho quase nao aparecia. Os tokens acima ficam no PRIMEIRO `:root`, e nao no segundo: sao nomes novos, que nenhum outro bloco redeclara, entao nao ha empate a resolver — e aqui e onde quem abre o arquivo os encontra. */ --anel: 0 0 0 3px rgb(var(--acento-rgb) / 0.34); } html { scroll-behavior: smooth; } body { font-family: var(--font-texto); color: var(--tinta-hub); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ─── HERO ─────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 60px 6vw; overflow: hidden; } .hero-carousel { position: absolute !important; inset: 0; z-index: 0 !important; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--marca); opacity: 0; transition: opacity 1.2s ease-in-out; } .hero-slide.active { opacity: 1; } .hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgb(var(--sombra-rgb) / 0.6) 35%, rgb(var(--sombra-rgb) / 0.15) 100%); } .hero-carousel-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; z-index: 2; } .hero-dot { 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; } .hero-dot::after { content: ''; width: 20px; height: 3px; border-radius: 999px; background: rgb(var(--branco-rgb) / 0.38); transition: width var(--t-2) var(--ease-saida), background var(--t-1) var(--ease); } .hero-dot.active ~ .hero-dot::after { background: rgb(var(--branco-rgb) / 0.15); } .hero-dot.active::after { width: 32px; background: var(--branco); } .hero-dot:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; box-shadow: var(--anel-claro); } /* ─── CARD DO HERO ───────────────────────────────────────── Leitura editorial: o titulo em Kepler Light e o elemento dominante, separado do resto por um filete curto. O card cresceu de 600 para 680px e perdeu o `min-height` fixo: o texto institucional tem dois paragrafos onde a versao de campanha tinha uma frase, e com altura travada o conteudo vazava por baixo. Agora quem manda na altura e o conteudo. */ .hero-card { position: relative; z-index: 1; background: var(--superficie-hub); max-width: calc(28rem + 80px); padding: 44px 40px 52px; /* estreita o cartao sem apertar a leitura */ border-radius: var(--r-3); box-shadow: var(--sombra-3); display: flex; flex-direction: column; } /* o logotipo fica ancorado no topo do card, como um papel timbrado */ .logo-box { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } .logo-img { max-width: 170px; height: auto; display: block; } /* O corpo caiu de 0.72rem/0.08em para 0.62rem/0.05em, e a razao e o pior caso da familia, nao o gosto: `white-space: nowrap` proibe a quebra, entao o rotulo mais longo em uso define o tamanho de todos. Acima de 768px a largura util e fechada — `max-width` de 528px menos 80px de padding dao 448px de conteudo em QUALQUER viewport dessa faixa — e o rotulo de Machadinho ("Advogados de Direito do Agronegocio · Machadinho d'Oeste - RO", 61 caracteres) ocupava 518px no corpo antigo, vazando 70px para fora do card. Medido no navegador, a 0.62rem/0.05em ele ocupa 428px: 20px de folga, suficiente para variacao de fonte substituta. Vale para os seis hubs de uma vez, e nao so para o que estourou, porque um rotulo menor numa pagina e maior na vizinha faria a familia parecer desalinhada — sao a mesma peca repetida. Os 55 leads de especialidade nao entram aqui: o rotulo deles vive no `.lp-hero`, largo, a 0.48rem. */ .hero-card .eyebrow { display: block; width: min(100%, 28rem); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--acento); margin-bottom: 26px; white-space: nowrap; } /* No celular o card acompanha a viewport e a linha unica deixa de ser possivel: a 375px sobram ~290px uteis, onde 61 caracteres exigiriam corpo de 6.5px — ilegivel. Ali o rotulo quebra em duas linhas, o que tambem conserta o vazamento que os rotulos CURTOS ja produziam nessas larguras: a 375px o de Vilhena, o mais curto dos seis, ja passava da borda. */ @media (max-width: 768px) { .hero-card .eyebrow { white-space: normal; font-size: 0.66rem; line-height: 1.5; } } .hero-card .eyebrow::after { content: ''; display: block; width: 56px; height: 2px; border-radius: var(--r-1); /* mesmo desenho do filete de secao, um degrau abaixo: dentro do cartao os 3px da faixa pesariam contra o rotulo miudo */ background: linear-gradient(to right, var(--marca), rgb(var(--marca-rgb) / 0.1)); opacity: 0.5; margin-top: 12px; } /* Corpo menor que o h1 da versao de campanha: aquele titulo tinha 47 caracteres, este tem 79. No corpo antigo ele ocupava cinco linhas e empurrava os botoes para fora da primeira tela. */ .hero-card h1 { width: 100%; font-family: var(--font-titulo); font-size: clamp(1.88rem, 2.35vw, 2.28rem); font-weight: 300; /* Kepler Light */ line-height: 1.16; letter-spacing: -0.015em; color: var(--marca); margin-bottom: 0; /* o espaco vem do filete abaixo */ } /* filete curto: separa o titulo do texto de apoio */ .hero-card h1::after { display: none; } .hero-card p { font-size: 1.06rem; color: var(--tinta-suave-hub); line-height: 1.72; margin-bottom: 16px; } .hero-card p:last-of-type { margin-bottom: 32px; } .hero-resumo { display: flex; flex-direction: column; width: min(100%, 28rem); margin-bottom: 32px; } .hero-resumo p:last-child { margin-bottom: 0; } .hero-resumo > p { margin-bottom: 4px; } .hero-resumo__extra { display: none; order: 3; padding-top: 0; margin-top: -6px; } .hero-resumo.is-open .hero-resumo__extra { display: block; } .hero-resumo__toggle { display: flex; align-items: center; justify-content: flex-start; gap: 10px; order: 2; width: 100%; max-width: 28rem; height: 24px; margin: -38px auto -10px; padding: 0; border: 0; background: transparent; color: rgb(var(--marca-rgb) / 0.48); cursor: pointer; transition: transform 0.2s ease, color 0.2s ease; } .hero-resumo__toggle::before { content: 'Ler mais'; font-size: 0.78rem; line-height: 1; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .hero-resumo__toggle::after { content: '→'; font-size: 1.2rem; line-height: 1; font-weight: 400; animation: hero-seta-lateral 1.6s ease-in-out infinite; } .hero-resumo.is-open .hero-resumo__toggle::after { content: '↑'; animation: hero-seta-fechar 1.6s ease-in-out infinite; } .hero-resumo.is-open .hero-resumo__toggle { order: 4; justify-content: center; gap: 0; margin: 2px auto 0; } .hero-resumo.is-open .hero-resumo__toggle::before { content: ''; } .hero-resumo__toggle:hover { color: rgb(var(--marca-rgb) / 0.72); transform: translateY(1px); } @keyframes hero-seta-lateral { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } @keyframes hero-seta-fechar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .hero-resumo__toggle:focus-visible { outline: 2px solid rgb(var(--marca-rgb) / 0.35); outline-offset: 3px; } /* ─── BOTOES ───────────────────────────────────────────── */ /* `inline-flex` com `gap`, e nao `inline-block` com a seta recebendo `margin-left`: como bloco em linha, a seta era tratada como mais uma palavra do rotulo e, quando o texto quebrava em duas linhas no celular, ela descia sozinha para a terceira ("Falar com o escritorio" + uma linha so com a flecha). Como item de flex ela nunca se separa da caixa, e o `gap` faz o mesmo espacamento de antes. */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; background: var(--acento); color: var(--branco); font-size: 0.98rem; font-weight: 700; /* 0.16em de entreletra somado a caixa alta obrigava o rotulo a quebrar em duas linhas nos botoes longos do celular. 0.1em mantem o ar de versalete e devolve ~9% de largura — e e o mesmo valor que `lead-pages.css` adota. */ letter-spacing: 0.1em; text-transform: uppercase; padding: 18px 34px; border: none; border-radius: var(--r-1); cursor: pointer; text-decoration: none; /* `will-change` de proposito ausente: sao varios botoes por pagina e a promocao a camada propria custaria mais do que o ganho na transicao. */ transition: background var(--t-1) var(--ease), transform var(--t-2) var(--ease-saida), box-shadow var(--t-2) var(--ease-saida); } .btn-primary:hover { background: var(--acento-hover); transform: translateY(-2px); box-shadow: var(--sombra-2); } /* o retorno tatil do clique: some a elevacao e o botao afunda */ .btn-primary:active { transform: translateY(0); box-shadow: var(--sombra-1); transition-duration: var(--t-1); } .btn-primary:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; box-shadow: var(--anel); } /* Secundario: contorno em vez de preenchimento. Nao compete com o principal, mas continua sendo um alvo de clique do mesmo tamanho — o documento pede os dois lado a lado no hero. */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; background: transparent; color: var(--marca); font-size: 0.98rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 17px 30px; /* 1px a menos que o `.btn-primary`, compensando a borda */ border: 1px solid rgb(var(--marca-rgb) / 0.35); border-radius: var(--r-1); cursor: pointer; text-decoration: none; transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease), transform var(--t-2) var(--ease-saida), box-shadow var(--t-2) var(--ease-saida); } .btn-ghost:hover { background: var(--marca); border-color: var(--marca); color: var(--branco); transform: translateY(-2px); box-shadow: var(--sombra-2); } .btn-ghost:active { transform: translateY(0); box-shadow: var(--sombra-1); transition-duration: var(--t-1); } .btn-ghost:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; box-shadow: var(--anel); } /* Aqui existia `.btn-verde`, modificador que pintava de verde o botao de navegacao para separa-lo dos botoes de conversao, que eram terracota. Com a identidade da casa ha uma cor de marca so: o modificador viraria uma copia exata do `.btn-primary`. Quem faz essa separacao agora e a forma — preenchido (`.btn-primary`) para "fale conosco", contorno (`.btn-ghost`) para navegar. */ /* seta opcional dentro do botao (avanca no hover). O espaco vem do `gap` do flex, nao mais de uma margem. */ .btn-primary .seta, .btn-ghost .seta { display: inline-block; flex-shrink: 0; transition: transform var(--t-2) var(--ease-saida); } .btn-primary:hover .seta, .btn-ghost:hover .seta { transform: translateX(5px); } .acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .acoes .btn-primary, .acoes .btn-ghost { justify-content: center; width: min(100%, 28rem); } /* linha de apoio abaixo dos botoes */ .acoes-nota { width: min(100%, 28rem); font-size: 0.96rem; line-height: 1.6; color: var(--tinta-suave-hub); opacity: 0.85; margin-top: 18px; } /* ─── NAV (topo direito · só texto · fundo transparente) ─ */ .top-nav { position: absolute; top: 30px; right: 6vw; z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 22px; max-width: 72%; } /* O padding e o que faz do link um alvo de dedo: como `` em linha ele rendia 16px de altura clicavel, menos de um terco do minimo utilizavel. A margem negativa devolve o espaco ao layout para que a nav nao engorde. */ .top-nav a { display: inline-block; padding: 12px 4px; margin: -12px -4px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--branco); opacity: 0.85; text-shadow: 0 1px 4px rgb(var(--sombra-rgb) / 0.55); transition: opacity var(--t-1) var(--ease); /* o filete cresce do centro no hover: da ao link de texto o mesmo retorno visivel que o botao ao lado ja tinha */ position: relative; } /* o `inset` acompanha o padding do link, para o filete medir o rotulo e nao a area de toque */ .top-nav a::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform var(--t-2) var(--ease-saida); } .top-nav a:focus-visible { outline: 2px solid var(--branco); outline-offset: 4px; border-radius: 3px; opacity: 1; } .top-nav a:hover { opacity: 1; } .top-nav a:hover::after { transform: scaleX(1); } /* ─── FAIXAS DE SECAO ────────────────────────────────────── Uma classe de estrutura (`.sec`) e quatro de fundo, no mesmo esquema que `especialidades.css` usa nas paginas filhas. Antes cada secao desta pagina declarava o proprio padding e a propria largura; com dez secoes isso viraria dez copias da mesma regra. */ .sec { padding: 88px 6vw; } .sec--cinza { background: var(--superficie-2); } .sec--clara { background: var(--superficie-hub); } .sec--branca { background: var(--branco); } .sec--navy, .sec--verde { background: var(--marca); color: var(--branco); } .sec__inner { max-width: var(--coluna); margin: 0 auto; } /* Cabeca mais larga que a `--medida` de proposito: quem mede aqui e o TITULO, em corpo de 2,7rem. Travado na medida do texto corrido ele quebraria em quatro linhas. Quem carrega a medida de leitura e o `.sec__intro`, logo abaixo. */ .sec__cabeca { max-width: 800px; margin-bottom: 52px; } .sec__intro { font-size: 1.12rem; line-height: 1.75; color: var(--tinta-suave-hub); margin-top: 28px; max-width: var(--medida); } .sec__intro + .sec__intro { margin-top: 18px; } .sec--navy .sec__intro, .sec--verde .sec__intro { color: rgb(var(--branco-rgb) / 0.76); } body.page-agro-hub .sec--conteudo-local .sec__cabeca, body.page-agro-hub .sec--conteudo-local .sec__intro { width: 100%; max-width: none; } /* ─── TITULOS DE SECAO (tratamento unico) ────────────────── Mesma voz do h1 do hero: Kepler Light em corpo grande + filete curto. Cada secao declara so a sua cor. O filete usa `currentColor`, entao acompanha a cor do titulo — verde nas secoes claras, branco nas escuras. */ .sec h2, .contact-info h2 { font-family: var(--font-titulo); font-size: clamp(2.15rem, 2.9vw, 2.7rem); font-weight: 300; line-height: 1.18; letter-spacing: -0.01em; color: var(--rodape); } .sec--navy h2, .sec--verde h2 { color: var(--claro); } .sec h2::after, .team h2::after, .contact-info h2::after { content: ''; display: block; width: 64px; height: 3px; border-radius: var(--r-1); /* o filete de 1px sumia em tela retina; 3px com a ponta esmaecida marca o titulo sem virar uma barra chapada. `currentColor` no gradiente mantem o que ja valia: o filete acompanha a cor do titulo, clara nas faixas escuras e de marca nas claras. */ background: linear-gradient(to right, currentColor, transparent); opacity: 0.5; margin-top: 28px; } /* ─── PILARES (a abordagem · 3 blocos com icone) ─────────── Os icones sao PNG de traco preto sobre fundo branco opaco, sem canal alfa, entao quem derruba o fundo e o blend — nao ha transparencia no arquivo. Estado parado (circulo VERDE): `invert` deixa o traco branco e o fundo preto, e `screen` derruba esse preto. No hover o par se inverte junto com o circulo (ver bloco `hover: hover` abaixo). */ .pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px 36px; } /* O realce de hover era feito com `padding: 20px` + `margin: -20px`. Numa grade isso nao e neutro: a margem negativa nao encolhe a caixa, ela ALARGA o item em 40px alem da coluna. Em 360px de tela cada pilar media 349px numa faixa util de 345 e a pagina inteira ganhava rolagem horizontal. Agora o realce e um pseudo-elemento absoluto: desenha o mesmo retangulo de antes, no mesmo lugar, sem participar do calculo da grade. Os filhos sobem de camada para nao ficarem atras dele. */ .pilar { position: relative; border-radius: var(--r-2); } .pilar > * { position: relative; z-index: 1; } .pilar::before { content: ''; position: absolute; inset: -20px -18px; border-radius: var(--r-2); background: transparent; transition: background var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease-saida); z-index: 0; } .pilar__icone { width: 84px; height: 84px; background: var(--marca); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 17px; margin-bottom: 24px; transition: background 0.3s ease, transform 0.3s ease; } .pilar__icone img { width: 100%; height: 100%; object-fit: contain; display: block; filter: invert(1); mix-blend-mode: screen; } .pilar h3 { position: relative; font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--marca); margin-bottom: 14px; transition: letter-spacing 0.3s ease; } /* filete que cresce sob o titulo: mesma linguagem do filete fixo dos h2 de secao, so que aqui ele entra no hover. Absoluto, para nascer dentro do margin-bottom e nao empurrar o texto. */ .pilar h3::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--acento); transition: width 0.3s ease; } /* `--text-muted` rende so 2,7:1 contra o Warm Gray — ilegivel. Neste fundo o corpo precisa do tom cheio. */ .pilar p { font-size: 1.08rem; color: var(--tinta-hub); line-height: 1.75; } /* ─── COMO O ESCRITORIO PODE AJUDAR (trilho de servicos) ─── Cada card leva a uma pagina de especialidade. A disposicao vem do `.carrossel__trilho` mais abaixo; aqui fica so o desenho do cartao, que e o mesmo nos dois eixos. */ .ajuda__item { display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 30px 28px 28px; border: 1px solid rgb(var(--marca-rgb) / 0.14); border-radius: var(--r-2); /* Branco chapado sobre a faixa BRANCA deixava o cartao com cara de caixa desligada — so a borda de 14% o separava do fundo. O degrade parte do branco e assenta no pe de cartao que as duas paletas ja declaram (`--cartao-fundo-rgb`): o topo se funde com a faixa e a base ganha peso, que e o que da a leitura de objeto pousado em vez de retangulo pintado. E o mesmo desenho que o bloco do agro, mais abaixo, ja usava. */ background: linear-gradient(to bottom, var(--branco), rgb(var(--cartao-fundo-rgb))); box-shadow: var(--sombra-1); transition: background var(--t-2) var(--ease), border-color var(--t-2) var(--ease), transform var(--t-2) var(--ease-saida), box-shadow var(--t-2) var(--ease-saida); } /* Filete de topo que acende no hover. E o mesmo recurso do filete sob o h2, aplicado ao cartao: da o retorno de "isto responde" sem mexer em cor de texto nenhuma — que e onde o hover de cartao costuma estragar o contraste. */ .ajuda__item::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(to right, var(--acento), rgb(var(--acento-rgb) / 0.2)); transform: scaleX(0); transform-origin: left; transition: transform var(--t-2) var(--ease-saida); } /* teclado: o cartao inteiro acende quando recebe foco */ a.ajuda__item:focus-visible::before { transform: scaleX(1); } .ajuda__item h3 { font-family: var(--font-titulo); font-size: 1.42rem; font-weight: 400; line-height: 1.24; color: var(--rodape); margin-bottom: 14px; } .ajuda__item p { font-size: 1.02rem; line-height: 1.7; color: var(--tinta-suave-hub); margin-bottom: 20px; } /* empurra o link para a base: com descricoes de tamanhos diferentes os links ficariam em alturas diferentes em cada card da linha */ .ajuda__link { margin-top: auto; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento); } .ajuda__link .seta { display: inline-block; margin-left: 8px; transition: transform var(--t-2) var(--ease-saida); } a.ajuda__item:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; box-shadow: var(--anel); } /* ─── PARA QUEM ATUAMOS (foto + lista, sobre o verde) ────── Herda o layout que a versao anterior usava na grade de areas: foto sangrando a esquerda, conteudo a direita. */ .publicos-sec { background: var(--marca); display: flex; min-height: 480px; flex-wrap: nowrap; align-items: stretch; } /* 38% e nao 45%: os itens da lista so cabem confortavelmente se a coluna de texto ao lado tiver folga suficiente */ .publicos-foto { flex: 0 0 38%; min-width: 260px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; position: relative; } .publicos-foto::after { content: ''; position: absolute; top: 0; right: 0; width: 160px; height: 100%; background: linear-gradient(to right, transparent 0%, var(--marca) 100%); pointer-events: none; z-index: 1; } .publicos-foto img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; object-position: center top; display: block; filter: drop-shadow(-16px 0 26px rgb(var(--sombra-rgb) / 0.28)) drop-shadow(0 16px 26px rgb(var(--sombra-rgb) / 0.38)); } .publicos-conteudo { flex: 1; min-width: 280px; padding: 64px 40px 64px 32px; display: flex; flex-direction: column; justify-content: center; } .publicos-conteudo h2 { font-family: var(--font-titulo); font-size: clamp(2.15rem, 2.9vw, 2.7rem); font-weight: 300; line-height: 1.18; letter-spacing: -0.01em; color: var(--claro); margin-bottom: 30px; } .publicos-conteudo h2::after { content: ''; display: block; width: 64px; height: 3px; border-radius: var(--r-1); /* o filete de 1px sumia em tela retina; 3px com a ponta esmaecida marca o titulo sem virar uma barra chapada. `currentColor` no gradiente mantem o que ja valia: o filete acompanha a cor do titulo, clara nas faixas escuras e de marca nas claras. */ background: linear-gradient(to right, currentColor, transparent); opacity: 0.5; margin-top: 28px; } /* `66ch` limita a MEDIDA, nao a largura: acompanha o corpo do texto em vez de um valor fixo em pixel. */ .publicos-conteudo .desc { font-size: 1.1rem; color: rgb(var(--branco-rgb) / 0.72); line-height: 1.75; max-width: var(--medida); } .publicos-lista { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px 24px; margin: 28px 0; } .publicos-lista li { position: relative; padding-left: 20px; font-size: 1.04rem; line-height: 1.6; color: var(--branco); } .publicos-lista li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--claro); } /* ─── QUANDO PROCURAR (gatilhos) ─────────────────────────── Cartoes de uma linha: sao sinais para o visitante se reconhecer, nao paragrafos. Fundo branco sobre o creme da faixa. */ .gatilhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 12px; margin-bottom: 40px; } /* Ficha, e nao linha de texto: fundo branco, contorno leve, filete de acento a esquerda e o raio dos demais controles nos QUATRO cantos — o `0 4px 4px 0` deixava a ficha com uma ponta reta e tres arredondadas, que so se explicava porque o filete era a propria borda. Mesmo desenho da ficha de sinal de `lead-pages`. */ .gatilho { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; background: var(--branco); border: 1px solid rgb(var(--marca-rgb) / 0.1); border-left: 3px solid rgb(var(--acento-rgb) / 0.55); border-radius: var(--r-1); box-shadow: var(--sombra-1); font-size: 1.04rem; line-height: 1.6; color: var(--tinta-hub); } .gatilhos-nota { font-size: 1.08rem; line-height: 1.75; color: var(--tinta-suave-hub); max-width: var(--medida); margin-bottom: 30px; } .chamada-apoio { padding: 26px 30px; background: rgb(var(--marca-rgb) / 0.06); border-radius: var(--r-2); font-size: 1.06rem; line-height: 1.72; color: var(--tinta-hub); max-width: var(--medida); margin-bottom: 32px; } /* ─── COMO TRABALHAMOS (passos numerados) ────────────────── O numeral em Kepler grande e o marcador: dispensa circulo, moldura ou icone, e nao concorre com os icones dos pilares. */ .passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 40px 36px; } /* Mesma superficie do cartao de servico. O numeral grande em Kepler continua sendo o marcador — nao vira medalhao como em `lead-pages.css`, porque aqui ele divide a pagina com os icones dos pilares e um disco a mais competiria com eles. O que se padroniza e o CARTAO: raio, degrade, elevacao e hover. */ .passo { display: flex; flex-direction: column; padding: 30px 28px 28px; border: 1px solid rgb(var(--marca-rgb) / 0.14); border-radius: var(--r-2); background: linear-gradient(to bottom, var(--branco), rgb(var(--cartao-fundo-rgb))); box-shadow: var(--sombra-1); } .passo__num { font-family: var(--font-titulo); font-size: 3rem; font-weight: 300; line-height: 1; color: var(--acento); opacity: 0.7; margin-bottom: 16px; } .passo h3 { font-family: var(--font-titulo); font-size: 1.4rem; font-weight: 400; line-height: 1.24; color: var(--rodape); margin-bottom: 14px; } .passo p { font-size: 1.02rem; line-height: 1.7; color: var(--tinta-suave-hub); } /* ─── EQUIPE ─────────────────────────────────────────────── Os `*-retrato.png` sao versoes normalizadas dos recortes `*-sem-fundo.png`: mesma tela de 460x600, mesma largura de cabeca (132px) e mesmo topo — a convencao do site principal. Por isso o `` aqui nao precisa de recorte nenhum, so `width: 100%`. A sombra e um `drop-shadow`, que segue a silhueta em vez de desenhar um retangulo. */ .team { background: var(--superficie-2); padding: 88px 6vw 96px; text-align: left; } /* A foto entra ATRAS do conteudo e SOBRE a cor da faixa. O veu usa a propria cor, mais denso a esquerda: com opacidade plana as manchas escuras da imagem derrubavam o contraste do texto para abaixo do minimo AA. O conteudo sobe com `z-index` — sem isso o pseudo-elemento cobriria o texto. */ .team--foto { position: relative; overflow: hidden; } .team--foto::before { content: ''; position: absolute; inset: 0; 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; } .team--foto > * { position: relative; z-index: 1; } /* DUAS colunas: titulo | fotos. Os minimos cairam de `480px + 760px` para `300px + 660px` porque a secao entrou na coluna comum de 1180: a soma antiga pedia 1280px e estouraria a coluna, empurrando as fotos para fora. Com 1008px de minimo o par cabe, e o ganho e que a secao volta a ficar lado a lado ate 1080px de tela — antes ela empilhava ja em 1280 e crescia de 764 para 1235px de altura de uma largura para a outra. */ .team-inner { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 660px); gap: 0 48px; align-items: start; } .team-titulo { grid-column: 1; max-width: 480px; } .team-titulo p { font-size: 1.06rem; line-height: 1.72; color: var(--tinta-hub); margin-top: 24px; } /* Sem isto o botao encosta no ultimo paragrafo: o `.btn-primary` nao tem margem propria e o `p` acima so empurra para cima. */ .team-titulo .btn-primary { margin-top: 30px; } /* Corpo PADRAO dos titulos de secao, nao um reduzido: e por isso que a coluna precisa de 480px. */ .team h2 { font-family: var(--font-titulo); font-size: clamp(2.15rem, 2.9vw, 2.7rem); line-height: 1.18; font-weight: 300; letter-spacing: -0.01em; color: var(--rodape); margin-bottom: 0; } /* O filete da equipe sai do esquema `currentColor` das demais secoes e passa a repetir o acento da pagina: terracota CHEIA. O `opacity: 1` e obrigatorio — herdando o 0.4 do bloco comum o tom renderizado sobre o cinza nao bateria com o dos demais. */ .team h2::after { background: var(--acento); opacity: 1; } .team-grid { grid-column: 2; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .team-member { display: flex; flex-direction: column; color: inherit; } /* Sombra tingida de verde em vez de preta — mesmo criterio do realce dos pilares. No cinza medio ela precisa de mais peso que num fundo claro para o recorte descolar. */ .team-photo { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 26px rgb(var(--marca-rgb) / 0.22)); transition: transform 0.35s ease, filter 0.35s ease; } .team-member:hover .team-photo { 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 */ .team-info { border-top: 1px solid rgb(var(--marca-rgb) / 0.30); padding-top: 22px; margin-top: 26px; } .team-name { font-family: var(--font-titulo); font-size: 1.58rem; font-weight: 400; line-height: 1.2; color: var(--tinta-hub); margin-bottom: 8px; } /* Preto cheio, nao um cinza intermediario: o fundo E o Warm Gray, e qualquer tom da mesma familia sumiria nele. A hierarquia em relacao ao nome fica por conta do corpo menor, nao da cor. */ .team-oab { font-size: 1.06rem; color: var(--tinta-hub); margin-bottom: 12px; } .team-link { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento); } .team-link .seta { display: inline-block; margin-left: 8px; transition: transform 0.2s; } .team-member:focus-visible { outline: 2px solid var(--acento); outline-offset: 6px; } /* ─── FAQ ────────────────────────────────────────────────── `
` nativo: abre sem JavaScript, e o conteudo continua no HTML mesmo fechado — o buscador le todas as respostas. */ /* A secao inteira do FAQ mede 900px, nao os 1180px de `--coluna`. O `.sec__inner` ja tem `margin: 0 auto`, entao estreita-lo aqui centra o bloco todo — cabeca e lista juntas. Antes, `.faq-lista` tinha `max-width: 900px` e nenhuma margem automatica: a lista e o titulo encostavam na esquerda dos 1180px e sobravam 280px de vao so do lado direito. Centrar apenas a lista teria resolvido o vao e criado outro problema — o titulo ficaria 140px a esquerda do primeiro ``. */ #faq .sec__inner { max-width: 900px; } /* A sanfona era uma pilha de linhas separadas por filete, sem nenhum estado fechado visivel: nada dizia onde uma pergunta terminava e a outra comecava alem do fio. Cada pergunta vira um painel proprio, com fundo, contorno e raio — e o painel ABERTO se destaca dos vizinhos, que e o que a sanfona precisa comunicar. Mesmo componente de `lead-pages.css`. */ .faq-lista { max-width: 900px; display: grid; gap: 12px; } .faq-item { background: var(--superficie-hub); border: 1px solid rgb(var(--marca-rgb) / 0.1); border-radius: var(--r-2); overflow: hidden; transition: border-color var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease-saida), background var(--t-2) var(--ease); } /* sobre a faixa branca e sobre o cinza a superficie clara ja contrasta; sobre a faixa CLARA — que e a mesma cor — o painel precisa ir para o branco para nao sumir */ .sec--clara .faq-item { background: var(--branco); } @media (hover: hover) { .faq-item:hover { border-color: rgb(var(--marca-rgb) / 0.24); } } .faq-item[open] { background: var(--branco); border-color: rgb(var(--acento-rgb) / 0.35); box-shadow: var(--sombra-1); } /* `block` e nao `flex`: o sinal deixa de ser um item da linha e passa a ser posicionado, o que e o que permite as duas partes dele (disco e barra) ficarem concentricas. O recuo a direita reserva o lugar do disco. */ .faq-item summary { display: block; position: relative; padding: 22px 62px 22px 24px; cursor: pointer; list-style: none; font-family: var(--font-titulo); font-size: 1.22rem; font-weight: 400; line-height: 1.35; color: var(--rodape); transition: color var(--t-1) var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--acento); } .faq-item summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -3px; border-radius: var(--r-2); } /* Sinal em duas partes, no lugar do glifo '+' que girava 45 graus. Glifo nao anima bem: o desenho dependia de a fonte trazer o sinal centrado, e o giro para "×" nunca ficava concentrico. Aqui a horizontal e pintada no disco (`::before`, um gradiente de 14x2 no centro) e a vertical e uma barra propria (`::after`) que gira 90 graus e some. Fechado le "+", aberto le "−". */ .faq-item summary::before { content: ''; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(var(--acento), var(--acento)) center / 14px 2px no-repeat, rgb(var(--acento-rgb) / 0.1); transition: background-color var(--t-2) var(--ease); } .faq-item summary::after { content: ''; position: absolute; right: 34px; top: 50%; width: 2px; height: 14px; margin-top: -7px; background: var(--acento); transition: transform var(--t-2) var(--ease-saida), opacity var(--t-2) var(--ease); } .faq-item[open] summary::after { transform: rotate(90deg); opacity: 0; } .faq-item[open] summary::before { background-color: rgb(var(--acento-rgb) / 0.18); } .faq-resposta { padding: 0 62px 24px 24px; max-width: var(--medida); font-size: 1.06rem; line-height: 1.78; color: var(--tinta-suave-hub); } /* Abertura animada. `
` nao anima altura por padrao — `interpolate-size` liberou `height: auto` como destino, e `::details-content` e o alvo. Onde nao houver suporte a sanfona abre seca, exatamente como abria antes: nada quebra. */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .faq-item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size var(--t-2) var(--ease-saida), content-visibility var(--t-2) allow-discrete, opacity var(--t-2) var(--ease); } .faq-item[open]::details-content { block-size: auto; opacity: 1; } } /* ─── FECHAMENTO ───────────────────────────────────────────*/ .fechamento { text-align: left; } /* `margin-right: auto`, e nao `margin: 0 auto`: centralizado dentro da coluna de 1180 este bloco de 900 nascia 140px a direita do titulo da secao anterior. Encostado a esquerda, ele parte do mesmo x de todas as demais faixas. */ /* 800px, o mesmo teto do `.sec__cabeca`: e o titulo que mede aqui, e com 900 a aresta direita dele caia 100px alem da dos titulos de todas as outras faixas. `margin-right: auto` no lugar de `margin: 0 auto`: centralizado dentro da coluna, este bloco nascia 140px a direita do titulo da secao anterior. */ /* Sem teto proprio: o bloco ocupa a coluna inteira da secao. Havia aqui um `max-width: 1080px`, justificado pelo comentario acima como forma de alinhar a aresta direita do titulo com a dos titulos das outras faixas. Esse alinhamento deixou de existir quando o intro de `#atuacao` passou a ocupar a coluna toda: 1080 nao casava mais com nada, so encurtava este titulo. */ .fechamento .sec__inner { max-width: none; margin-left: 0; margin-right: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 28rem); gap: 26px 40px; align-items: center; } /* O titulo atravessa as DUAS colunas. Preso a primeira, ele media cerca de 590px numa faixa de 1240 — menos de metade — porque a segunda coluna, reservada aos botoes, comia 448px que ele nao podia usar. Os botoes descem para a linha 2, ao lado do paragrafo, e o titulo fica com a largura inteira em cima. */ .fechamento h2 { color: var(--claro); grid-column: 1 / -1; grid-row: 1; } .fechamento p { font-size: 1.14rem; line-height: 1.78; color: rgb(var(--branco-rgb) / 0.82); margin: 30px 0 0; max-width: var(--medida); grid-column: 1; grid-row: 2; } .fechamento .acoes { grid-column: 2; grid-row: 2; /* linha 2: o titulo agora ocupa a 1 inteira */ justify-self: end; align-self: center; flex-direction: column; align-items: stretch; width: min(100%, 28rem); } .fechamento .acoes .btn-primary, .fechamento .acoes .btn-ghost { width: 100%; } .fechamento .btn-ghost { color: var(--claro); border-color: rgb(var(--claro-rgb) / 0.5); } .fechamento .btn-ghost:hover { background: var(--claro); border-color: var(--claro); color: var(--marca); } /* ─── CONTATO ──────────────────────────────────────────── */ .contact { position: relative; min-height: 900px; background: linear-gradient(to right, rgb(var(--sombra-rgb) / 0.35) 40%, rgb(var(--sombra-rgb) / 0.05) 100%), var(--foto-fechamento) center/cover no-repeat; background-color: var(--marca); display: flex; align-items: center; padding: 80px 6vw; } /* 1100 e nao 900: com 900 sobravam 756px para as duas colunas e o mapa ficava preso no proprio `min-width` — 260px de largura contra 496 do texto, uma tira, nao um mapa. O card ainda para antes da coluna comum (1180) de proposito: a faixa e uma FOTO com o card flutuando sobre ela, e um card do tamanho da coluna cobriria a imagem inteira. */ /* `margin-inline: auto` centra o card na faixa. O pai e um flex sem `justify-content`, entao o padrao era `flex-start`: o card encostava na esquerda e a foto so aparecia do lado direito. A margem automatica, e nao `justify-content: center` no pai, porque ela se anula sozinha nas telas onde o card passa a `max-width: 100%` — ali nao sobra folga para repartir, e nao ha regra a desfazer nas media queries. */ .contact-card { background: rgb(var(--branco-rgb) / 0.93); padding: 56px 52px; max-width: 1100px; width: 100%; margin-inline: auto; border-radius: var(--r-3); box-shadow: var(--sombra-3); display: flex; gap: 40px; align-items: stretch; } /* As duas colunas CRESCEM juntas (grow 1 nas duas) e a sobra do card se divide meio a meio; o que muda entre elas e quem cede quando o espaco falta. O texto nao encolhe (`flex-shrink: 0`): a linha "Avenida Brigadeiro Eduardo Gomes, nº 750" mede 399px e, com o icone e o vao, pede 439px de coluna. Abaixo disso o endereco quebra em quatro linhas e o bloco cresce de forma desigual — por isso a base e 460px, e nao 420. Quem absorve o aperto e o mapa, que so precisa continuar quadrado o bastante para se ler. */ .contact-info { flex: 1 0 460px; min-width: 0; display: flex; flex-direction: column; } .contact-map { flex: 1 1 400px; min-width: 300px; min-height: 360px; aspect-ratio: 1 / 1; border: none; border-radius: var(--r-2); display: block; } .contact-info h2 { color: var(--marca); margin-bottom: 36px; } .contact-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .contact-icon { width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; color: var(--marca); } .contact-item p { font-size: 1.18rem; color: var(--tinta-suave-hub); line-height: 1.6; /* o e-mail e uma palavra unica e longa: sem isso ele estoura o card em telas estreitas */ overflow-wrap: anywhere; min-width: 0; } .contact-card .btn-primary { margin-top: 36px; } /* ─── NOTA LEGAL ─────────────────────────────────────────── Faixa discreta, fora do fluxo de leitura: o texto e um aviso de sobriedade, nao conteudo que disputa atencao com a pagina. */ .nota-legal { background: var(--rodape); padding: 26px 6vw; } /* LARGURA CHEIA, por decisao de projeto: a nota vale para a pagina inteira, entao ocupa toda a coluna da faixa em vez de ficar presa aos 34em de `--medida`, que a deixavam com menos da metade da largura. E o mesmo tratamento que a nota recebe no rodape das landing pages, para que as duas leiam igual. A `.nota-legal` continua no grupo da COLUNA COMUM, logo abaixo: assim a nota comeca e termina exatamente onde o hero, as faixas e o contato comecam e terminam. Solta-la dali a deixaria mais larga que tudo em volta, o que le como defeito de alinhamento — e nas landing pages nem seria reproduzivel sem desalinhar o rodape inteiro. O preco e conhecido e aceito: em 1180px com corpo de 0,9rem a linha passa de 160 caracteres, o dobro da medida confortavel. Como e um aviso curto, de tres frases, que ninguem le de ponta a ponta, a uniformidade pesou mais que a medida. */ .nota-legal p { max-width: none; font-size: 0.9rem; line-height: 1.7; color: rgb(var(--branco-rgb) / 0.55); } /* ═══════════════════════════════════════════════════════ COLUNA COMUM DA PAGINA Em vez de cada faixa resolver a propria largura, o PADDING LATERAL das secoes e que cresce ate deixar uma coluna de `--coluna` no meio. Assim o hero, as faixas, a equipe, o contato e a nota legal compartilham exatamente a mesma margem esquerda — que era o defeito mais visivel da pagina em telas grandes. `max()` garante o piso de 6vw: quando a tela e menor que a coluna, o segundo termo fica negativo e o 6vw prevalece. So a partir de 1024px: abaixo disso valem os paddings menores das media queries de celular e tablet, que vem DEPOIS no arquivo e sobrescreveriam esta regra de qualquer forma. */ @media (min-width: 1024px) { .hero, .sec, .team, .contact, .nota-legal { padding-inline: var(--gutter); } /* Os publicos sao a excecao: a foto SANGRA na borda esquerda, e por isso a faixa nao pode ganhar padding dos dois lados. O que se alinha aqui e a aresta DIREITA do texto, que passa a bater com a das demais secoes em vez de correr ate 120px da borda. */ .publicos-conteudo { padding-right: var(--gutter); } } /* ─── HOVER (so em ponteiro fino) ────────────────────────── `hover: hover` deixa de fora o toque, onde o realce ficaria preso aceso depois do tap. O circulo do pilar faz o caminho inverso do estado parado: de verde para branco, e o traco volta a preto (`filter: none` + `multiply`, que derruba o branco do PNG contra o circulo claro). Branco puro, nao o creme: o `.pilar` em hover fica creme, e um circulo creme sumiria dentro dele. */ @media (hover: hover) { .pilar:hover::before { background: var(--superficie-hub); box-shadow: var(--sombra-2); } .pilar:hover .pilar__icone { background: var(--branco); transform: translateY(-3px); } .pilar:hover .pilar__icone img { filter: none; mix-blend-mode: multiply; } .pilar:hover h3 { letter-spacing: 0.13em; } .pilar:hover h3::after { width: 46px; } a.ajuda__item:hover { border-color: rgb(var(--acento-rgb) / 0.5); transform: translateY(-4px); /* o degrade some no hover: o cartao vai a branco puro e sobe */ background: linear-gradient(to bottom, var(--branco), var(--branco)); box-shadow: var(--sombra-2); } a.ajuda__item:hover::before { transform: scaleX(1); } a.ajuda__item:hover .ajuda__link .seta { transform: translateX(5px); } /* a etapa nao e clicavel: sobe menos que o cartao de servico, o bastante para o bloco ler como objeto e nao como alvo */ .passo { transition: transform var(--t-2) var(--ease-saida), box-shadow var(--t-2) var(--ease-saida), border-color var(--t-2) var(--ease); } .passo:hover { transform: translateY(-3px); border-color: rgb(var(--marca-rgb) / 0.2); box-shadow: var(--sombra-2); } .gatilho { transition: transform var(--t-2) var(--ease-saida), box-shadow var(--t-2) var(--ease-saida), border-left-color var(--t-2) var(--ease); } .gatilho:hover { transform: translateY(-3px); border-left-color: var(--acento); box-shadow: var(--sombra-2); } .team-member:hover .team-link .seta { transform: translateX(5px); } } /* ─── RESPONSIVO ───────────────────────────────────────── */ /* 1080 e nao 1280: com os minimos novos da grade o par cabe lado a lado por mais 200px de largura. Abaixo disso a coluna do titulo fica estreita demais e as duas empilham. */ @media (max-width: 1080px) { .team-inner { grid-template-columns: minmax(0, 1fr); } .team-titulo { max-width: none; margin-bottom: 40px; } .team-grid { grid-column: 1; max-width: 900px; margin: 0 auto; } /* empilhado o gradiente lateral deixa de proteger o texto: o veu vira uniforme */ .team--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; } } /* 1050 e nao 900: lado a lado o card agora precisa de 460 de texto + 40 de vao + uns 320 de mapa, e abaixo de ~1050px de tela isso nao cabe mais. Empilhado o mapa ocupa a largura inteira do card, entao a troca de layout AUMENTA o mapa em vez de reduzi-lo. As bases de flex tambem saem: na coluna elas passam a valer para a ALTURA, e a base de 460px deixava um vazio no fim do bloco de texto — que e exatamente o que acontecia antes, com 420. */ @media (max-width: 1050px) { .contact-card { flex-direction: column; max-width: 100%; } .contact-info, .contact-map { flex: 0 0 auto; } .contact-map { min-height: 260px; aspect-ratio: 16 / 9; } } @media (max-width: 768px) { .top-nav { top: 18px; gap: 8px 16px; max-width: 82%; } .top-nav a { font-size: 0.83rem; letter-spacing: 0.1em; } /* `100vh` no celular conta a area atras da barra do navegador, que so aparece ao rolar: o card era centralizado num espaco maior que o visivel e "afundava". `100svh` usa a altura realmente visivel. */ .hero { padding: 92px 5vw 48px; align-items: flex-start; min-height: 100vh; min-height: 100svh; } .hero-card { max-width: 100%; padding: 34px 26px 38px; } .logo-box { margin-bottom: 30px; } .hero-card h1 { font-size: 2.1rem; line-height: 1.18; } .hero-card h1::after { margin: 24px 0 22px; } .logo-img { max-width: 150px; } .hero-card p { font-size: 1.04rem; } .btn-primary, .btn-ghost { font-size: 1.05rem; padding: 18px 28px; } .acoes { gap: 12px; } /* mesmo corpo p/ todos os titulos de secao no mobile */ .sec { padding: 56px 5vw 60px; } .sec h2, .contact-info h2, .publicos-conteudo h2, .team h2 { font-size: 1.9rem; } .sec__cabeca { margin-bottom: 36px; } .sec h2::after, .team h2::after, .contact-info h2::after, .publicos-conteudo h2::after { margin-top: 24px; } .pilares { gap: 32px; } .pilar__icone { width: 70px; height: 70px; padding: 13px; margin-bottom: 18px; } .ajuda__item { padding: 26px 22px 24px; } .publicos-sec { flex-direction: column; flex-wrap: nowrap; } .publicos-foto { flex: 0 0 auto; width: 100%; min-height: 280px; } .publicos-foto img { min-height: 280px; } .publicos-conteudo { padding: 40px 24px; } .team { padding: 56px 5vw 64px; } .team h2 { margin-bottom: 0; } .team-carousel { width: 100%; max-width: 100%; margin: 0; position: relative; padding-right: 0; } .team-carousel .carrossel__moldura { position: relative; } .team-grid.carrossel__trilho { grid-column: 1; max-width: 100%; margin: 0; display: flex !important; grid-auto-flow: unset; grid-auto-columns: unset; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 0 18px; } .team-grid.carrossel__trilho::-webkit-scrollbar { display: none; } .team-member { flex: 0 0 100%; min-width: 100%; max-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; } .team-photo { max-height: 460px; object-fit: contain; } .team-info { border-top: 0; padding-top: 18px; } .team-carousel.tem-js .carrossel__controles { display: flex !important; } .team-carousel.carrossel--fixo .carrossel__controles { display: none !important; } .team-carousel .carrossel__seta { position: absolute; top: 50%; width: 42px; height: 42px; border: 1px solid rgb(var(--branco-rgb) / 0.24); border-radius: 50%; background: rgb(var(--rodape-rgb) / 0.88); color: var(--branco); display: inline-flex; align-items: center; justify-content: center; transform: translateY(-50%); box-shadow: var(--sombra-2); transition: opacity var(--t-1) var(--ease), background var(--t-1) var(--ease), transform var(--t-2) var(--ease-saida); z-index: 2; } .team-carousel .carrossel__seta--anterior { left: 8px; } .team-carousel .carrossel__seta--proximo { right: 8px; } .team-carousel .carrossel__seta--ativa { background: var(--branco); color: var(--rodape); } .team-carousel .carrossel__seta[disabled] { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.92); } .team-carousel .carrossel__seta:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; box-shadow: var(--anel-claro); } .abordagem-carousel { width: 100%; max-width: 100%; margin: 0; position: relative; padding-inline: 0; } .abordagem-carousel .carrossel__moldura { position: relative; padding-bottom: 0; } .abordagem-carousel .carrossel__seta { display: none; } .abordagem-carousel.tem-js .carrossel__controles { display: flex !important; margin-top: 22px; gap: 14px; } .abordagem-carousel .carrossel__pontos { pointer-events: auto; } .abordagem-carousel .carrossel__contagem { display: none; } .faq-item summary { font-size: 1.16rem; padding: 18px 56px 18px 18px; } .faq-resposta { padding: 0 18px 20px; } /* disco e barra encolhem juntos e continuam concentricos: a barra fica em `right` do disco + metade da largura dele - 1px */ .faq-item summary::before { right: 14px; width: 30px; height: 30px; background-size: 12px 2px; } .faq-item summary::after { right: 28px; height: 12px; margin-top: -6px; } .contact { padding: 48px 5vw; min-height: auto; align-items: flex-start; } .contact-card { padding: 40px 28px; flex-direction: column; max-width: 100%; } .contact-info h2 { margin-bottom: 24px; } .contact-map { min-height: 220px; aspect-ratio: 16 / 9; } .contact-card .btn-primary { margin-top: 24px; } .nota-legal { padding: 22px 5vw; } .fechamento .sec__inner { grid-template-columns: 1fr; gap: 24px; } .fechamento h2, .fechamento p, .fechamento .acoes { grid-column: 1; } .fechamento .acoes { grid-row: auto; justify-self: start; width: 100%; } } @media (max-width: 620px) { .team-grid { gap: 16px; } } @media (max-width: 480px) { .top-nav a { font-size: 0.78rem; letter-spacing: 0.08em; } .hero { padding: 86px 4vw 44px; } .hero-card { padding: 30px 20px 34px; } .hero-card h1 { font-size: 1.92rem; } .hero-card h1::after { margin: 22px 0 20px; } /* em 360px o rotulo nao cabia numa linha e o botao quebrava */ .btn-primary, .btn-ghost { width: 100%; text-align: center; padding: 18px 16px; font-size: 1rem; letter-spacing: 0.1em; } .acoes { flex-direction: column; align-items: stretch; } .publicos-conteudo .desc { font-size: 1.02rem; } .contact-item p { font-size: 1.1rem; } .chamada-apoio { padding: 22px 20px; } } /* ═══════════════════════════════════════════════════════ TEXTO JUSTIFICADO A justificacao so e honesta com hifenizacao junto: sem ela o navegador estica os espacos da linha para fechar a margem direita, e o resultado sao os "rios" brancos verticais que atravessam o paragrafo. O `hyphens: auto` depende do `lang` do documento — esta pagina declara `lang="pt-BR"`, entao o dicionario certo e carregado. Ficam de FORA, de proposito: os itens de grade estreita (`.pilar p`, `.passo p`, `.ajuda__item p`), que leem a ~45 caracteres por linha e justificados viravam rio puro; as listas e gatilhos, que sao enumeracao e nao texto corrido; e titulos, rotulos e botoes. ═══════════════════════════════════════════════════════ */ .hero-card p, .sec__intro, .publicos-conteudo .desc, .gatilhos-nota, .chamada-apoio, .faq-resposta, .fechamento p, .team-titulo p, .nota-legal p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; /* redistribui as ultimas linhas para o paragrafo nao fechar com uma palavra orfa sozinha */ text-wrap: pretty; } /* Titulos nao se justificam, mas se equilibram: sem isto um h2 de duas linhas costuma terminar com uma palavra so na segunda. `balance` divide as linhas em larguras proximas. Vale para os titulos de SECAO, que flutuam numa coluna larga e nao tem borda por perto: ali o equilibrio e o que se nota. Nao vale para os titulos de CARTAO — `.hero-card h1`, `.ajuda__item h3`, `.passo h3`. Dentro de uma caixa com borda visivel o olho compara a linha com a borda, e o `balance`, que encolhe todas as linhas ate a media, deixa uma faixa branca constante a direita. Sem ele a quebra volta a ser gulosa: cada linha leva o que couber e o texto alcanca a borda. */ /* `:not(.fechamento)` — a chamada final e `class="sec sec--navy fechamento"`, ou seja, ela TAMBEM e uma `.sec`. Tirar o titulo dela do grupo la de baixo nao bastava: este seletor continuava alcancando o mesmo h2, com a mesma especificidade e vindo depois no arquivo, entao era ele quem valia. O titulo do fechamento ocupa a faixa inteira e nao pode ser equilibrado. */ .sec:not(.fechamento) h2, .publicos-conteudo h2, .team h2, .contact-info h2, .faq-item summary { text-wrap: balance; } /* ─── 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; } /* ─── 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) { .hero-card p, .sec__intro, .publicos-conteudo .desc, .gatilhos-nota, .chamada-apoio, .faq-resposta, .fechamento p, .team-titulo p, .nota-legal p { text-align: left; hyphens: manual; -webkit-hyphens: manual; } } /* ═══════════════════════════════════════════════════════ CARROSSEL — AREAS DE ATUACAO Onze cartoes numa grade de tres deixavam uma celula vazia na quarta fileira e, no celular, uma coluna de 3.048px: tres telas inteiras so para essa secao. Em trilho, os mesmos onze cartoes ocupam a altura de UM. A rolagem e NATIVA — `overflow-x` com encaixe. Sem JavaScript o visitante ainda arrasta, e os onze links continuam no HTML para o buscador. Setas e pontos sao criados pelo script e por isso nascem escondidos: numa pagina sem JS nao sobra um botao morto. ═══════════════════════════════════════════════════════ */ .carrossel { position: relative; } /* `grid-auto-flow: column` em vez de flex: `grid-auto-columns` define a largura do slide numa linha so, e todos os cartoes saem com a MESMA altura sem altura fixa — o mais alto puxa a fileira, que e o que ja acontecia na grade. */ .carrossel__trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--slides) - 1) * 14px) / var(--slides)); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; /* o `overflow` corta a sombra do hover dos cartoes; o respiro devolve o espaco dela, e a margem negativa devolve o espaco ao layout */ 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; min-width: 0; } .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: var(--sombra-1); color: var(--marca); line-height: 1; cursor: pointer; transition: opacity var(--t-1) var(--ease), transform var(--t-2) var(--ease-saida), background var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease-saida); } .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; box-shadow: var(--anel); } .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; } @media (max-width: 1100px) { .carrossel__trilho { --slides: 2; } } @media (max-width: 700px) { .carrossel__trilho { --slides: 1; } /* Os carrosseis passam a usar sempre o mesmo contador visual: barrinhas/pontos, inclusive no celular. */ } /* ═══════════════════════════════════════════════════════ REVELACAO NA ROLAGEM O estado inicial so existe sob `.js`, a classe que o script poe no antes de qualquer pintura. Numa pagina sem JavaScript nada fica invisivel — conteudo nao pode depender de animacao. ═══════════════════════════════════════════════════════ */ .js .pilar, .js .passo, .js .gatilho, .js .team-member, .js .faq-item { 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 .pilar.visivel, .js .passo.visivel, .js .gatilho.visivel, .js .team-member.visivel, .js .faq-item.visivel { opacity: 1; transform: none; } /* escalonamento: os itens de uma fileira nao entram juntos, o olho acompanha da esquerda para a direita */ .js .pilar:nth-child(2), .js .passo:nth-child(2), .js .gatilho:nth-child(2) { transition-delay: 0.10s; } .js .pilar:nth-child(3), .js .passo:nth-child(3), .js .gatilho:nth-child(3) { transition-delay: 0.20s; } .js .passo:nth-child(4), .js .gatilho:nth-child(4) { transition-delay: 0.30s; } .js .gatilho:nth-child(5) { transition-delay: 0.40s; } .js .team-member:nth-child(2) { transition-delay: 0.12s; } /* No FAQ o atraso e menor e para na quarta: sao sete perguntas, e 7 × 0,10s deixaria a ultima entrando quase um segundo depois da primeira. */ .js .faq-item:nth-child(2) { transition-delay: 0.06s; } .js .faq-item:nth-child(3) { transition-delay: 0.12s; } .js .faq-item:nth-child(4) { transition-delay: 0.18s; } /* O icone do pilar assenta depois do bloco, e o numeral da etapa faz o mesmo — dois gestos, um ritmo. */ .js .pilar__icone, .js .passo__num { opacity: 0; transform: translateY(12px) scale(0.9); transition: opacity 0.55s ease 0.14s, transform 0.55s ease 0.14s; } .js .pilar.visivel .pilar__icone, .js .passo.visivel .passo__num { opacity: 1; transform: none; } /* O `.pilar__icone` tem transicao propria no hover; aqui ela precisa ser recomposta, senao a regra acima a substitui e o circulo deixa de reagir ao ponteiro. */ .js .pilar.visivel .pilar__icone { transition: background 0.3s ease, transform 0.3s ease; } /* ─── REVELACAO DENTRO DO CARROSSEL ──────────────────── Item de trilho NAO pode ser observado um a um: o observador dispara quando o elemento cruza a viewport, e um cartao parado 2.000px a direita nunca cruza — ficaria com `opacity: 0` para sempre, e quem pulasse para o fim do trilho encontraria cartoes em branco. Quem e observado, entao, e o CARROSSEL. Quando ele entra em cena, todos os cartoes acendem juntos; o escalonamento fica so nos primeiros, que sao os que o olho ve 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; } .js .carrossel .carrossel__controles { opacity: 0; transition: opacity 0.5s ease 0.3s; } .js .carrossel.visivel .carrossel__controles { opacity: 1; } /* o realce continua; o que sai e o deslocamento */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pilar:hover .pilar__icone, .team-member:hover .team-photo, a.ajuda__item:hover { transform: none; } .pilar h3, .pilar h3::after { transition: none; } .hero-slide { transition: none; } .carrossel__trilho { scroll-behavior: auto; } .carrossel__ponto::after { transition: none; } .js .pilar, .js .passo, .js .gatilho, .js .team-member, .js .faq-item, .js .pilar__icone, .js .passo__num, .js .carrossel__trilho > *, .js .carrossel .carrossel__controles { opacity: 1; transform: none; transition: none; } } /* ═══════════════════════════════════════════════════════════════ CAMADA 2 — o que vinha de `especialidades.css` Daqui para baixo estao as regras que o navegador aplicava DEPOIS do bloco embutido acima. Sao elas que vencem os empates: mexer na ordem, ou mover uma regra daqui para cima, muda o resultado. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Apenas tokens de LAYOUT. Todas as cores vem do arquivo de paleta que a pagina carrega ANTES desta folha — veja o cabecalho. */ --medida: 34em; /* recuo lateral das faixas: nunca menor que 6vw, e o bastante para centrar a coluna de leitura nas telas largas. A folha do agro ja tinha este token; a navy repetia a expressao inline em cada uso. */ --gutter: max(6vw, calc((100% - var(--coluna)) / 2)); } html { scroll-behavior: smooth; } body { font-family: var(--font-texto); color: var(--tinta-hub); background: var(--branco); /* a barra de CTA fixa do celular nao pode tapar o rodape */ padding-bottom: 0; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .eyebrow { font-size: 0.48rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--claro); margin-bottom: 18px; white-space: nowrap; } .js .lp-hero__leads-extra { display: none; } .js .lp-hero--aberto .lp-hero__leads-extra { display: block; } .lp-hero__toggle { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-top: -26px; margin-right: 0; margin-bottom: 10px; margin-left: calc((var(--medida) - 54px) / 2); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 0; color: var(--claro); cursor: pointer; position: relative; z-index: 1; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } @media (max-width: 700px) { .lp-hero__toggle { margin-left: auto; margin-right: auto; } } .lp-hero__toggle::after { content: '↓'; font-size: 2rem; font-weight: 700; line-height: 1; animation: seta-flutua 1.6s ease-in-out infinite; } .js .lp-hero--aberto .lp-hero__toggle::after { content: '↑'; animation: none; } .lp-hero__toggle:hover { color: var(--branco); transform: translateY(-1px); } @keyframes seta-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .lp-hero__toggle:focus-visible { outline: 2px solid var(--claro); outline-offset: 3px; } /* O acabamento do hero das paginas de especialidade (respiro do topo, CTAs empilhados na mesma largura, nota em largura total) mora em `agro-lead-pages.css`, sob `body.lead-page`. */ body.page-agro-hub .sec--abordagem .sec__cabeca { width: 100%; max-width: none; } body.page-agro-hub .sec--abordagem .sec__intro { width: 100%; max-width: none; } /* O intro da secao de atuacao ocupa a coluna inteira, como o da abordagem logo acima. Antes so a variante `.curto` era liberada, e por isso a regra parecia funcionar: em Machadinho e na raiz aquele intro cabe numa linha e leva a classe. Nos hubs de cidade o texto e longo, fica sem `curto` e voltava a esbarrar nos 800px de `.sec__cabeca` — parava no meio da tela com a metade direita vazia. Quem prende e o `.sec__cabeca`, entao ele tambem entra: soltar so o paragrafo nao adiantaria, o pai continuaria estreito. */ body.page-agro-hub #atuacao .sec__cabeca, body.page-agro-hub #atuacao .sec__intro { width: 100%; max-width: none; } body.page-agro-hub .sec--abordagem .pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px 36px; } body.page-agro-hub .sec--abordagem .pilar { position: relative; border-radius: var(--r-2); background: linear-gradient(180deg, rgb(var(--branco-rgb) / 0.94), rgb(var(--branco-rgb) / 0.88)); border: 1px solid rgb(var(--marca-rgb) / 0.14); box-shadow: var(--sombra-1); padding: 28px 26px 30px; /* referencia de medida do rotulo — ver o bloco do `h3` abaixo */ container-type: inline-size; } body.page-agro-hub .sec--abordagem .pilar > * { position: relative; z-index: 1; } body.page-agro-hub .sec--abordagem .pilar::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-2); background: transparent; transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; z-index: 0; } body.page-agro-hub .sec--abordagem .pilar__icone { width: 84px; height: 84px; background: var(--marca); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 17px; margin-bottom: 24px; transition: background 0.3s ease, transform 0.3s ease; } body.page-agro-hub .sec--abordagem .pilar__icone img { width: 100%; height: 100%; object-fit: contain; display: block; filter: invert(1); mix-blend-mode: screen; } /* O rotulo fica SEMPRE numa linha so — dai o `nowrap`. Para isso o corpo tem de acompanhar a largura do CARTAO, nao a da janela. O `clamp(0.88rem, 1vw, 0.98rem)` que estava aqui media a janela, e por isso vazava: a grade mantem tres colunas enquanto couberem 280px em cada uma, entao entre ~910px e ~1180px de coluna util o cartao vai encolhendo, mas o `1vw` ja bateu no piso de 0.88rem e a fonte para de acompanhar. Nesse intervalo "DEFESA ADMINISTRATIVA E JUDICIAL" saia por cima da borda direita. `cqi` resolve na raiz: 1cqi = 1% da caixa de conteudo do cartao, que e o espaco que o rotulo tem de fato. Medidos os tres rotulos na Sarvatrik 700, o pior caso ocupa 20.87 em em repouso e 23.11 em sob hover (a entreletra abre de 0.06em para 0.13em). O teto e o caso do hover: 100 / 23.11 = 4.33cqi. Fica 4.3cqi, com folga. Trocar qualquer um dos tres rotulos por um mais longo exige refazer essa conta — e o preco de exigir uma linha so. */ body.page-agro-hub .sec--abordagem .pilar h3 { position: relative; font-size: min(0.98rem, 4.3cqi); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--marca); margin-bottom: 14px; white-space: nowrap; transition: letter-spacing 0.3s ease; } body.page-agro-hub .sec--abordagem .pilar h3::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--acento); transition: width 0.3s ease; } body.page-agro-hub .sec--abordagem .pilar p { font-size: 1.08rem; color: var(--tinta-hub); line-height: 1.75; } @media (hover: hover) { body.page-agro-hub .sec--abordagem .pilar { margin: 0; transition: transform var(--t-2) var(--ease-saida), box-shadow var(--t-2) var(--ease-saida), border-color var(--t-2) var(--ease); } body.page-agro-hub .sec--abordagem .pilar:hover { transform: translateY(-4px); border-color: rgb(var(--acento-rgb) / 0.28); box-shadow: var(--sombra-2); } body.page-agro-hub .sec--abordagem .pilar:hover::before { background: linear-gradient(180deg, rgb(var(--branco-rgb) / 0.98), rgb(var(--cartao-fundo-rgb) / 0.92)); } body.page-agro-hub .sec--abordagem .pilar:hover h3 { color: var(--marca); letter-spacing: 0.13em; } body.page-agro-hub .sec--abordagem .pilar:hover p { color: var(--tinta-hub); } } /* Este @media fica DEPOIS do bloco acima de proposito: os dois usam a mesma especificidade, entao quem vem por ultimo e que vale. Subido para junto das outras regras de celular, o `display: grid` daqui de cima voltaria a ganhar e o trilho nunca apareceria. */ @media (max-width: 768px) { /* ─── PILARES VIRAM TRILHO NO CELULAR ──────────────────── Empilhados, os quatro (ou seis) cartoes da secao de abordagem viram uma coluna longa demais: o visitante rola meia tela de conteudo repetido antes de chegar em "Como podemos ajudar". No celular eles passam a ser o MESMO trilho da secao "O que diferencia..." da home (`.diff-right` em `site.css`): flex sem quebra, `gap: 16px`, snap obrigatorio no inicio de cada cartao e a barra de rolagem escondida. Os 88% de largura deixam a beirada do proximo cartao aparecendo — e o que avisa que ha mais ao lado, ja que aqui nao existem setas nem pontos. O prefixo `body.page-agro-hub` nao e enfeite: a grade que este trilho substitui e declarada com essa mesma especificidade logo acima. Sem o prefixo, `display: grid` continuaria ganhando e o trilho nunca apareceria. */ body.page-agro-hub .sec--abordagem .pilares { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; } body.page-agro-hub .sec--abordagem .pilares::-webkit-scrollbar { display: none; } /* A entrada em camadas nao funciona dentro do trilho. O observador so acende o cartao quando 15% dele aparece, e do segundo cartao so a beirada esta em cena — ele ficaria transparente justamente onde precisa ser visto, que e o aviso de que ha mais conteudo ao lado. No celular os cartoes desta secao entram junto com a faixa, sem escalonamento. */ html.js body.page-agro-hub .sec--abordagem .pilar, html.js body.page-agro-hub .sec--abordagem .pilar h3, html.js body.page-agro-hub .sec--abordagem .pilar p, html.js body.page-agro-hub .sec--abordagem .pilar__icone { opacity: 1; transform: none; transition-delay: 0s; } body.page-agro-hub .sec--abordagem .pilar { flex: 0 0 88%; min-width: 88%; max-width: 88%; padding: 24px 22px 26px; scroll-snap-align: start; scroll-snap-stop: always; } body.page-agro-hub .sec--abordagem .pilar__icone { width: 70px; height: 70px; padding: 12px; margin-bottom: 16px; } /* No desktop o rotulo cabe numa linha so, e para isso o corpo acompanha a largura do cartao (`4.3cqi`). Num cartao de 90% de tela isso derruba a fonte para ~11px. Como o trilho copia a home, o rotulo copia tambem o `.diff-item-title`: 0.88rem fixos, com liberdade para quebrar em duas linhas. */ body.page-agro-hub .sec--abordagem .pilar h3 { font-size: 0.88rem; letter-spacing: 0.08em; white-space: normal; margin-bottom: 10px; } body.page-agro-hub .sec--abordagem .pilar p { font-size: 1.02rem; line-height: 1.75; text-align: left; text-justify: auto; } } @media (max-width: 480px) { /* mesma folga que o `.diff-item` da home ganha nesta faixa */ body.page-agro-hub .sec--abordagem .pilar { flex-basis: 90%; min-width: 90%; max-width: 90%; padding: 22px 18px 24px; } } @media (min-width: 768px) { body.page-agro-hub #atuacao .sec__intro.curto { white-space: nowrap; font-size: 1.04rem; } body.page-agro-hub .publicos-conteudo .desc.curto { max-width: none; white-space: nowrap; } } body.page-agro-hub .publicos-conteudo h2 { color: var(--claro); } body.page-agro-hub .publicos-conteudo h2::after { background: linear-gradient(to right, var(--acento), rgb(var(--acento-rgb) / 0.15)); opacity: 0.85; } body.page-agro-hub .publicos-conteudo .desc { color: rgb(var(--superficie-2-rgb) / 0.86); } body.page-agro-hub .publicos-lista li { color: rgb(var(--branco-rgb) / 0.96); transform-origin: left center; transition: transform 0.22s ease, color 0.22s ease; } body.page-agro-hub .publicos-lista li::before { background: var(--claro); box-shadow: 0 0 0 4px rgb(var(--acento-rgb) / 0.18); opacity: 1; transition: transform var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease), background var(--t-1) var(--ease); } @media (hover: hover) { body.page-agro-hub .publicos-lista li:hover { transform: scale(1.035); color: rgb(var(--branco-rgb) / 0.96); } body.page-agro-hub .publicos-lista li:hover::before { transform: scale(1.18); box-shadow: 0 0 0 6px rgb(var(--acento-rgb) / 0.18); background: var(--claro); } } body.page-agro-hub #atuacao .carrossel, body.page-agro-hub .carrossel--passos { /* O recuo lateral e o mesmo da faixa das setas: no desktop abre os 56px em que elas ficam, e fora dele volta aos 2px que so davam respiro a sombra dos cartoes. Sem `overflow: hidden`: o recorte comia as setas, e as copias que ele continha so existem sob `data-loop="true"`. */ padding-inline: var(--carrossel-lateral, 2px); } body.page-agro-hub .gatilhos-apoio { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, 1.1fr); gap: 26px 30px; align-items: stretch; } body.page-agro-hub .gatilhos-apoio .gatilhos-nota, body.page-agro-hub .gatilhos-apoio .chamada-apoio { margin: 0; height: 100%; display: flex; align-items: center; } body.page-agro-hub .chamada-apoio { margin-left: 0; } /* O agro escalava a ficha em vez de eleva-la. Escala num bloco de texto reflui a linha e o rotulo "pula"; a elevacao da o mesmo retorno sem tocar no texto. Passa a ser o gesto da folha inteira. */ body.page-agro-hub .gatilho { transform-origin: center; transition: transform var(--t-2) var(--ease-saida), box-shadow var(--t-2) var(--ease-saida), border-left-color var(--t-2) var(--ease); } @media (hover: hover) { body.page-agro-hub .gatilho:hover { transform: translateY(-3px); border-left-color: var(--acento); box-shadow: var(--sombra-2); } } body.page-agro-hub .carrossel--passos { /* O recuo lateral e o mesmo da faixa das setas: no desktop abre os 56px em que elas ficam, e fora dele volta aos 2px que so davam respiro a sombra dos cartoes. Sem `overflow: hidden`: o recorte comia as setas, e as copias que ele continha so existem sob `data-loop="true"`. */ padding-inline: var(--carrossel-lateral, 2px); } body.page-agro-hub .carrossel--passos .carrossel__trilho, body.page-agro-hub #atuacao .carrossel__trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--slides) - 1) * var(--carrossel-gap, 16px)) / var(--slides)); grid-template-columns: none; --carrossel-gap: 24px; gap: var(--carrossel-gap, 16px); padding: 8px 2px 20px; margin: -8px 0 -20px; align-items: stretch; } body.page-agro-hub .carrossel--passos .passo, body.page-agro-hub #atuacao .ajuda__item { display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; min-height: 100%; height: 100%; padding: 30px 28px 28px; border: 1px solid rgb(var(--marca-rgb) / 0.14); border-radius: var(--r-2); background: linear-gradient(180deg, rgb(var(--branco-rgb) / 0.98), rgb(var(--cartao-fundo-rgb) / 0.98)); box-shadow: var(--sombra-1); } body.page-agro-hub .carrossel--passos .passo__num { font-size: 0.88rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1; color: var(--acento); margin-bottom: 18px; } body.page-agro-hub .carrossel--passos .passo h3, body.page-agro-hub #atuacao .ajuda__item h3 { font-family: var(--font-titulo); font-size: 1.42rem; font-weight: 400; line-height: 1.24; color: var(--rodape); min-height: 3.6em; margin-bottom: 14px; } body.page-agro-hub .carrossel--passos .passo h3::after { display: none; content: none; } body.page-agro-hub .carrossel--passos .passo p, body.page-agro-hub #atuacao .ajuda__item p { font-size: 1.02rem; line-height: 1.7; color: var(--tinta-suave-hub); flex: 1; margin-bottom: 20px; } body.page-agro-hub .carrossel--passos .passo p::before, body.page-agro-hub .carrossel--passos .passo p::after { display: none; content: none; } body.page-agro-hub .carrossel--passos .carrossel__controles, body.page-agro-hub #atuacao .carrossel__controles { /* As duas primeiras colunas desta grade eram os lugares das setas, que agora flutuam sobre o trilho. Sem elas a linha e so pontos e contador, no centro. */ margin-top: 22px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; } body.page-agro-hub .carrossel--passos .carrossel__pontos, body.page-agro-hub #atuacao .carrossel__pontos { margin-left: 0; align-items: center; } body.page-agro-hub .carrossel--passos .carrossel__contagem, body.page-agro-hub #atuacao .carrossel__contagem { margin-left: 0; } @media (hover: hover) { body.page-agro-hub .carrossel--passos .passo, body.page-agro-hub #atuacao .ajuda__item { transition: transform var(--t-2) var(--ease-saida), box-shadow var(--t-2) var(--ease-saida), border-color var(--t-2) var(--ease), background var(--t-2) var(--ease); } body.page-agro-hub .carrossel--passos .passo:hover, body.page-agro-hub #atuacao a.ajuda__item:hover { transform: translateY(-4px); border-color: rgb(var(--acento-rgb) / 0.28); box-shadow: var(--sombra-2); background: linear-gradient(180deg, rgb(var(--branco-rgb) / 1), rgb(var(--cartao-fundo-rgb) / 1)); } } @media (max-width: 900px) { body.page-agro-hub .gatilhos-apoio { grid-template-columns: 1fr; } } body.page-agro-hub #atuacao .carrossel__trilho > .ajuda__item { height: 100%; } body.page-agro-hub #atuacao .ajuda__link { margin-top: auto; } @media (max-width: 1100px) { body.page-agro-hub #atuacao .carrossel__trilho, body.page-agro-hub .carrossel--passos .carrossel__trilho { --slides: 2; } } @media (max-width: 700px) { body.page-agro-hub #atuacao .carrossel__trilho, body.page-agro-hub .carrossel--passos .carrossel__trilho { --slides: 1; } body.page-agro-hub #atuacao .ajuda__item h3, body.page-agro-hub .carrossel--passos .passo h3 { min-height: 0; } } /* Par de botoes (principal + secundario) fora do hero — no fechamento, por exemplo. Mesma disposicao do `.lp-hero__acao`, mas sem os ajustes de hero que a folha aplica aquela classe no celular. */ .acoes { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; } /* ─── PASSOS ───────────────────────────────────────────────*/ .passos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; align-items: stretch; } .passo__num { font-family: var(--font-titulo); font-size: 2.4rem; font-weight: 300; line-height: 1; /* sem isso o "1" fica mais estreito que o "3" e a fileira dança */ font-variant-numeric: tabular-nums; color: var(--acento); margin-bottom: 14px; } .passo h3 { font-family: var(--font-titulo); font-size: 1.3rem; font-weight: 400; line-height: 1.25; color: var(--marca); margin-bottom: 10px; min-height: 2.5em; } .passo { display: flex; flex-direction: column; height: 100%; } .passo p { flex: 1; font-size: 1.14rem; line-height: 1.72; color: var(--tinta-suave-hub); } .js .passo--expansivel p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } .js .passo--aberto p { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .passo__toggle { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: auto; padding-top: 14px; padding: 0; border: 0; background: transparent; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento); cursor: pointer; } .passo__toggle:hover { text-decoration: underline; } .passo__toggle:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } /* ─── FECHAMENTO ───────────────────────────────────────────*/ .fechamento { position: relative; padding: 100px 6vw; background: var(--marca); overflow: hidden; } .fechamento h2 { font-family: var(--font-titulo); font-size: clamp(2.1rem, 3.1vw, 2.8rem); font-weight: 300; line-height: 1.16; color: var(--branco); margin-bottom: 22px; } .fechamento p { font-size: 1.26rem; line-height: 1.74; color: rgb(var(--branco-rgb) / 0.9); margin-bottom: 36px; } /* ─── RESPONSIVO ───────────────────────────────────────────*/ @media (max-width: 1100px) { .passos { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; } } @media (max-width: 768px) { .fechamento { padding: 64px 5vw; } .passos { grid-template-columns: 1fr; gap: 30px; } /* o CTA acompanha a rolagem no lugar da barra do topo */ body { padding-bottom: 78px; } } @media (max-width: 480px) { .passo p { font-size: 1.08rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ─── LISTA DE AUTORIDADE ──────────────────────────────────*/ .pilares { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 48px; } .pilar h3 { font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro); margin-bottom: 9px; } .pilar p { font-size: 1.14rem; line-height: 1.72; color: rgb(var(--branco-rgb) / 0.86); } @media (max-width: 768px) { .pilares { grid-template-columns: 1fr; gap: 28px; } } /* ═══════════════════════════════════════════════════════════ 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. */ .fechamento[id] { scroll-margin-top: calc(var(--barra-h) + 20px); } /* ═══════════════════════════════════════════════════════════ 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) { .fechamento { padding-inline: max(6vw, calc((100% - 1240px) / 2)); } } /* ═══════════════════════════════════════════════════════════ DESTAQUE NOS PILARES DE AUTORIDADE Faixa navy, 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: var(--r-2); transition: background var(--t-2) var(--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; } } /* ═══════════════════════════════════════════════════════════ 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. ═══════════════════════════════════════════════════════════ */ .fechamento 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. */ .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. `.passo h3` saiu daqui: e titulo de CARTAO, e cartao tem borda — ver a regra equivalente mais acima, onde essa distincao esta explicada. Esta copia vinha depois no arquivo e venceria a de la, entao nao bastava mexer numa so. `.fechamento h2` tambem saiu, por outro motivo: aquele titulo deve ocupar a largura inteira da faixa. Medido na Kepler Light, ele da 34.2 em — sao duas linhas em qualquer tela, e o `balance` as igualava em cerca de 763px cada, deixando os dois lados da faixa vazios. Sem ele a primeira linha vai ate a borda. */ /* ─── 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) { .fechamento p { text-align: left; hyphens: manual; -webkit-hyphens: manual; } } /* ═══════════════════════════════════════════════════════════ 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; 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: var(--sombra-1); color: var(--marca); line-height: 1; cursor: pointer; transition: opacity var(--t-1) var(--ease), transform var(--t-2) var(--ease-saida), background var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease-saida); } .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; box-shadow: var(--anel); } /* 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; } @media (max-width: 1100px) { .carrossel__trilho { --slides: 2; } } @media (max-width: 700px) { .carrossel__trilho { --slides: 1; } /* Com um slide por tela os pontos viram um a um: onze deles, a 24px de alvo cada, pedem 344px — mais que a faixa util de um celular, e a linha de controles vazava para fora da pagina inteira. Quem informa a posicao aqui e o contador ("3 / 11"), que cabe em qualquer largura; as setas seguem dando o comando. */ /* Os carrosseis passam a usar sempre o mesmo contador visual: barrinhas/pontos, inclusive no celular. */ } @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 { 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 { 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; } /* 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 { 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; } } /* ═══════════════════════════════════════════════════════════════ CAMADA 3 — a grade `.ajuda` dos hubs nao migrados Machadinho trocou a grade de servicos por um carrossel: os cards `.ajuda__item` passaram a morar dentro de `.carrossel__trilho` e a regra do container `.ajuda` saiu da folha dele. Os demais hubs ainda dispoem os mesmos cards numa grade. Como nenhum hub tem as duas coisas ao mesmo tempo, as duas regras convivem sem disputa: em Machadinho nada casa com `.ajuda` e este bloco fica inerte. Some daqui quando o ultimo hub adotar o carrossel. ═══════════════════════════════════════════════════════════════ */ /* ─── COMO O ESCRITORIO PODE AJUDAR (grade de servicos) ──── Cada card leva a uma pagina de especialidade. O card SEM link e um `
`, nao um `` morto: quem navega por teclado nao para num alvo que nao faz nada, e o cursor nao promete clique. */ .ajuda { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; } @media (max-width: 768px) { .ajuda { gap: 12px; } } /* ═══════════════════════════════════════════════════════════════ BOTAO PRINCIPAL SOBRE FAIXA ESCURA O `.btn-primary` e navy cheio. Enquanto esta folha era a do agro ele era terracota e podia aparecer sobre a faixa escura sem mais nada; agora ele tem a cor da propria faixa e sumiria dentro dela. Sobre o escuro, portanto, ele inverte: branco com texto navy — a mesma solucao que `assets/css/site.css` ja usa no CTA do FAQ. O botao do contato NAO entra aqui: aquela secao tem foto escura, mas o botao mora dentro do `.contact-card`, que e branco a 93%. La o navy cheio continua sendo o contraste certo. No fim do arquivo de proposito: `.sec--navy .btn-primary` tem mais especificidade que `.btn-primary`, mas `.fechamento .acoes .btn-primary` (que so mexe em largura) tem mais que as duas — e a ordem e o que garante que a cor daqui prevaleca sobre qualquer redeclaracao futura no mesmo nivel. ═══════════════════════════════════════════════════════════════ */ .sec--navy .btn-primary, .sec--verde .btn-primary, .fechamento .btn-primary { background: var(--btn-escuro-fundo); color: var(--btn-escuro-texto); } .sec--navy .btn-primary:hover, .sec--verde .btn-primary:hover, .fechamento .btn-primary: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; } /* ═══════════════════════════════════════════════════════════════ ICONES DOS PILARES EM SVG EMBUTIDO ═══════════════════════════════════════════════════════════════ O circulo navy, o tamanho e o espacamento ja vem de `.sec--abordagem .pilar__icone`, la em cima — aqui so entra o que e proprio do SVG. O `img` do mesmo lugar chega branco por `filter: invert(1)`; o SVG chega branco por `currentColor`, que e o caminho natural de um traco vetorial e evita depender de filtro. `stroke-width` cai para 1.5: os icones dos pilares das outras areas sao desenhos cheios, e o traco de 1.7 usado nos SVG do corpo do site engrossa demais dentro de um circulo de 84px com 17px de respiro. */ body.page-agro-hub .sec--abordagem .pilar__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; } /* ═══════════════════════════════════════════════════════════════ VARIANTE DO AGRO — o que NAO e cor ═══════════════════════════════════════════════════════════════ Sete seletores em que a folha do agro difere da do grupo navy por LAYOUT: a posicao da navegacao, o bloco "Para quem atuamos" inteiro e o recuo do fechamento. No agro a foto ocupa 45% e o degrade sobe de baixo para cima; nas demais areas ela ocupa 38% e o degrade corre da direita para a esquerda. E o fechamento do agro centra a coluna em 1180px (o `--gutter`), enquanto as areas navy usam 1240px. Como e diferenca de desenho, e nao de cor, nao cabe no arquivo de paleta — fica aqui, sob uma classe. ── Por que cada regra reaparece nos @media ───────────────────── `body.page-rural X` tem MAIS especificidade que `X`. Uma regra solta no fim do arquivo venceria tambem dentro das media queries e congelaria o desktop no mobile. Por isso cada seletor e redeclarado em TODO contexto em que a folha o ajusta — com os valores que o agro tinha ali. O bloco `min-width: 1024px` faz o inverso: desfaz dois ajustes que so as areas navy tem e que o agro nunca teve. EXIGE `page-rural` no ``, ao lado de `page-agro-hub`. ═══════════════════════════════════════════════════════════════ */ body.page-rural .top-nav { position: absolute; top: 30px; right: var(--gutter); z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 22px; max-width: 72%; } body.page-rural .publicos-sec { background: var(--marca); display: flex; min-height: 480px; flex-wrap: nowrap; align-items: stretch; padding-inline: var(--gutter); gap: 48px; } body.page-rural .publicos-foto { flex: 0 0 45%; min-width: 260px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; position: relative; } body.page-rural .publicos-foto::after { content: ''; position: absolute; inset: auto 0 0 0; height: 180px; background: linear-gradient(to bottom, rgb(var(--marca-rgb) / 0) 0%, rgb(var(--marca-rgb) / 0.28) 38%, rgb(var(--marca-rgb) / 0.72) 72%, var(--marca) 96%); pointer-events: none; z-index: 1; } body.page-rural .publicos-foto img { width: 100%; height: 100%; min-height: 480px; max-height: 580px; align-self: flex-end; object-fit: cover; object-position: 56% top; display: block; filter: drop-shadow(0 10px 40px rgb(var(--sombra-rgb) / 0.10)); } body.page-rural .publicos-conteudo { flex: 1; min-width: 280px; padding: 64px 0; display: flex; flex-direction: column; justify-content: center; } body.page-rural .fechamento { position: relative; padding: 100px var(--gutter); background: var(--marca); overflow: hidden; } /* desfaz o recuo extra que so as areas navy tem */ @media (min-width: 1024px) { body.page-rural .publicos-conteudo { padding: 64px 0; } body.page-rural .fechamento { padding-inline: var(--gutter); } } @media (max-width: 768px) { body.page-rural .top-nav { top: 18px; gap: 8px 16px; max-width: 82%; right: 5vw; } body.page-rural .publicos-sec { flex-direction: column; flex-wrap: nowrap; padding-inline: 5vw; gap: 0; } body.page-rural .publicos-foto { flex: 0 0 auto; width: 100%; min-height: 280px; } body.page-rural .publicos-foto img { min-height: 280px; } body.page-rural .publicos-conteudo { padding: 40px 0; } body.page-rural .fechamento { padding: 64px 5vw; } } /* ═══════════════════════════════════════════════════════════════ REGRAS QUE SO A AREA DO AGRO USA ═══════════════════════════════════════════════════════════════ `.btn-verde` e o botao pintado com a cor de MARCA, em vez da de acento — existe so nos hubs do agro. `.sec--conteudo-local` e o bloco de texto local das paginas por cidade, com links sublinhados. Nao precisam de escopo por classe de pagina: as demais areas nao usam nenhuma das duas classes no HTML, entao as regras ficam inertes la. Vieram para ca porque a folha que serviu de base (a de bancario) nao as tinha. */ .btn-verde { background: var(--marca); } .btn-verde:hover { background: var(--marca-hover); } .sec--conteudo-local .sec__intro a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(var(--acento-rgb) / 0.55); transition: color 0.2s, text-decoration-color 0.2s; } .sec--conteudo-local .sec__intro a:hover { color: var(--acento); text-decoration-color: var(--acento); } .sec--conteudo-local .sec__intro a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } /* ═══════════════════════════════════════════════════════════ TRANSICOES RECOMPOSTAS SOB `.js` O bloco de revelacao no scroll declara `transition` inteira em `.js .passo`, `.js .gatilho`, `.js .faq-item` e `.js .carrossel__trilho > *` — e `transition` e propriedade de atalho: ela SUBSTITUI a lista, nao acrescenta. Sem o que vem abaixo, os mesmos blocos que ganharam elevacao no hover perderiam a transicao dela em toda pagina com JavaScript, que sao todas — o realce apareceria de estalo. Cada regra repete a entrada (opacidade e deslocamento, com a curva e a duracao do bloco de revelacao) e acrescenta o que o hover usa. Ao mexer numa das duas pontas, mexer nesta tambem. ═══════════════════════════════════════════════════════════ */ .js .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); } .js .gatilho { 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-left-color var(--t-2) var(--ease); } .js .faq-item { 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); } /* O cartao de servico e observado pelo CARROSSEL, nao um a um: quem declara a transicao de entrada dele e o seletor do trilho. E ele, portanto, que precisa recompor. */ .js .carrossel__trilho > .ajuda__item { 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); } /* ═══════════════════════════════════════════════════════════ MOVIMENTO REDUZIDO · GESTOS NOVOS Complementa o bloco `prefers-reduced-motion` que ja existe mais acima. Aqui ficam so os movimentos introduzidos na padronizacao: a elevacao do botao e dos cartoes, o filete da nav e do cartao de servico e a abertura animada da sanfona. O padrao da folha e o 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) { .btn-primary, .btn-ghost, .passo, .gatilho, .ajuda__item, .carrossel__seta { transition: background-color var(--t-1) linear, border-color var(--t-1) linear; } .btn-primary:hover, .btn-primary:active, .btn-ghost:hover, .btn-ghost:active, .passo:hover, .gatilho:hover, a.ajuda__item:hover, body.page-agro-hub .gatilho:hover, body.page-agro-hub .carrossel--passos .passo:hover, body.page-agro-hub #atuacao a.ajuda__item:hover { transform: none; } .btn-primary:hover .seta, .btn-ghost:hover .seta, a.ajuda__item:hover .ajuda__link .seta, .team-member:hover .team-link .seta { transform: none; } /* os filetes continuam aparecendo, so nao deslizam */ .top-nav a::after, .ajuda__item::before { transition: none; } .faq-item summary::after { transition: opacity var(--t-1) linear; } @supports (interpolate-size: allow-keywords) { .faq-item::details-content { transition: none; } } }