/* ═══════════════════════════════════════════════════════════
   SISTEMA DE DESIGN DO SITE — Schafer & Gambarra

   Extraido do <style> que estava embutido em `index.html`. Nenhuma
   regra foi alterada na extracao: so saiu a indentacao que o bloco
   carregava por estar dentro do HTML.

   O nome NAO e `home.css` de proposito. Hoje so a pagina inicial
   referencia esta folha, mas as 5 paginas de cidade em `home/ro/`
   usam o MESMO sistema — 196 das 200 regras delas sao identicas as
   daqui, com as mesmas classes (`about-inner`, `diff-item`,
   `contact-card`, `btn-primary`...). Elas ainda carregam uma copia
   embutida; quando forem extraidas, apontam para este arquivo.

   Mora em `assets/css/` pela mesma razao que `assets/fonts/` e
   `assets/images/`: recurso compartilhado, nao conteudo de pagina.

   ── Alinhamento com as folhas irmas ─────────────────────────
   As paginas de area (`area-pages.css`) e as de especialidade
   (`lead-pages.css`) passaram por uma revisao de acabamento que
   esta folha nao acompanhou: ficaram com os mesmos tres degraus de
   raio, a mesma escala de elevacao em duas camadas, as mesmas duas
   curvas de movimento e o mesmo anel de foco. Como o visitante
   atravessa as tres — home, hub de area, especialidade — no mesmo
   percurso, a diferenca aparecia: o botao daqui era mais estreito
   de corpo e mais espacado de entreletra, o card do hero tinha 4px
   de raio contra 22px do hub, o filete sob o h2 media 1px contra
   3px, e a sanfona do FAQ trocava um glifo '+' onde as outras
   duas animam um sinal desenhado.

   Nada de ESTRUTURA mudou: as classes, a ordem das secoes e o
   HTML das seis paginas que consomem esta folha continuam como
   estavam. O que mudou foi so acabamento, e em tres frentes:

     1. Tokens. Raio, elevacao, movimento e foco viraram variaveis
        com os mesmos nomes e valores das folhas irmas — antes eram
        sete raios avulsos, oito sombras de uma camada so e `ease`
        puro espalhado por trinta transicoes.
     2. Componentes. Botao, filete de titulo, painel do FAQ, card,
        link da nav e anel de foco assumiram o desenho ja adotado
        la, incluindo os estados que faltavam aqui (`:active` no
        botao, `:focus-visible` na nav e nos sociais).
     3. Cor. A faixa dos diferenciais era o unico tom QUENTE do
        site — um bege herdado da identidade do agro. Passou para a
        mesma alternancia de cinzas frios das demais superficies
        claras (`--surface` -> `--surface-2`).

   As cores da marca nao mudaram: sao as mesmas de
   `cores-institucional.css`, que e o que as folhas irmas
   consomem. O que esta folha ganhou foram os pares `-rgb` da
   mesma cor, para as transparencias deixarem de ser literais.
   ═══════════════════════════════════════════════════════════ */

*, *::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 derivados abaixo sao tons da mesma familia, usados para
   garantir hierarquia e contraste minimo AA (4.5:1) no texto. */
:root {
  /* cores da marca */
  --navy:        #031c2d;   /* Pantone 296 C          */
  --gray:        #73787c;   /* Pantone Cool Gray 09 C */
  --white:       #ffffff;   /* Branco                 */

  /* derivados */
  --navy-soft:   #0a2c44;   /* navy clareado: hover de botao, gradientes */
  --gray-light:  #a7abaf;   /* cinza claro: texto e detalhes sobre navy  */
  --surface:     #f2f4f5;   /* cinza a 6%: fundo das secoes claras       */
  --surface-2:   #e6eaec;   /* cinza a 12%: a faixa clara mais funda     */
  --text-dark:   #031c2d;   /* titulos                                   */
  --text-muted:  #5a6065;   /* corpo de texto (cinza escurecido p/ AA)   */

  /* ─── TRILHO DE CONTEUDO ───────────────────────────────
     Uma unica largura util para a pagina inteira: sem ela cada
     secao parava num x diferente (o cabecalho da secao "sobre"
     comecava 280px a direita do titulo dos diferenciais numa tela
     de 1920). O `--gutter` e a margem lateral que centraliza esse
     trilho: enquanto a tela e menor que 1240 ele vale 6vw, o
     respiro de sempre; acima disso ele cresce e absorve a sobra,
     metade de cada lado. Como o `100%` de um custom property so
     e resolvido no elemento que o usa, ele mede a largura da
     propria secao — por isso serve para todas elas. */
  --rail:   1240px;
  --gutter: max(6vw, calc((100% - var(--rail)) / 2));

  /* medida de leitura: o mesmo teto que as folhas irmas usam para
     o texto corrido, quando ele mora numa faixa mais larga que ele */
  --medida: 34em;

  /* ─── AS MESMAS COR EM COMPONENTES ─────────────────────
     Os tokens terminados em `-rgb` guardam a MESMA cor acima, sem
     a funcao `rgb()` em volta, para que a folha possa pedir a cor
     em transparencia — `rgb(var(--navy-rgb) / 0.08)`. Sem o par
     nao ha como aplicar alfa sobre um token que ja e `#rrggbb`, e
     era por isso que as sombras e as bordas desta folha estavam
     todas escritas em `rgba(3,28,45,...)` literal: trinta e uma
     ocorrencias do mesmo azul, digitado a mao. Mesmo criterio de
     `cores-institucional.css`. */
  --navy-rgb:       3 28 45;
  --white-rgb:      255 255 255;
  --gray-light-rgb: 167 171 175;

  /* ─── ESCALA DE ARREDONDAMENTO ─────────────────────────
     Os mesmos tres degraus de `lead-pages.css` e `area-pages.css`,
     pelo mesmo motivo: esta folha tinha 4px no card do hero, no de
     contato, no mapa e nos botoes de area, 6px no painel do FAQ e
     na etapa do metodo, 14px nos blocos do "Sobre" e 22px no card
     de diferencial — sete decisoes tomadas em sete momentos, que o
     olho le como desalinho. Papel de cada degrau:

       --r-1  controle (botao, chip, botao de area, filete)
       --r-2  cartao e painel
       --r-3  bloco grande (card do hero, card de contato)

     O hero, as faixas de secao e a trilha 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 oito sombras
     avulsas de uma camada so — nenhuma lia como elevacao, so
     escureciam a borda. */
  --sombra-1: 0 1px 2px rgb(var(--navy-rgb) / 0.04),
              0 2px 8px rgb(var(--navy-rgb) / 0.05);
  --sombra-2: 0 2px 4px rgb(var(--navy-rgb) / 0.04),
              0 14px 32px rgb(var(--navy-rgb) / 0.10);
  --sombra-3: 0 4px 10px rgb(var(--navy-rgb) / 0.06),
              0 28px 64px rgb(var(--navy-rgb) / 0.18);

  /* ─── MOVIMENTO ────────────────────────────────────────
     `ease` puro sai rapido e chega devagar — em hover de card isso
     le como arrasto. As duas curvas abaixo saem devagar e assentam
     sem quicar, e sao as mesmas das folhas irmas. */
  --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 ─────────────────────────────────────
     O contorno de 2px sozinho quase nao aparecia sobre o navy das
     faixas escuras. O halo em volta o torna visivel nos dois
     fundos — dai o par, um para cada superficie. */
  --anel:       0 0 0 3px rgb(var(--navy-rgb) / 0.34);
  --anel-claro: 0 0 0 3px rgb(var(--white-rgb) / 0.35);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-texto);
  color: var(--text-dark);
}

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 var(--gutter);
  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: #031c2d;
  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(--navy-rgb) / 0.74) 35%, rgb(var(--navy-rgb) / 0.25) 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(--white-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(--white-rgb) / 0.15);
}

.hero-dot.active::after { width: 32px; background: var(--white); }

.hero-dot:focus-visible {
  outline: 2px solid var(--white);
  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 texto de
   apoio ficou em um paragrafo so — o posicionamento longo migrou
   para a secao "Sobre o escritorio". */
.hero-card {
  position: relative;
  z-index: 1;
  background: var(--white);
  max-width: 600px;
  padding: 48px 56px 64px;   /* topo enxuto: o logotipo encosta no alto */
  border-radius: var(--r-3);
  box-shadow: var(--sombra-3);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* o logotipo fica ancorado no topo do card, como um papel timbrado.
   Os dois `auto` abaixo (no eyebrow e no botao) fazem o bloco de
   texto se centralizar sozinho no espaco que sobra, sem deixar o
   card pesado embaixo. */
.logo-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 56px;   /* folga minima ate o texto */
  order: 1;
}

.logo-img {
  max-width: 170px;
  height: auto;
  display: block;
}

.eyebrow {
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* sobre fundo navy o eyebrow precisa clarear */
.faq .eyebrow { color: var(--gray-light); }

/* eyebrow do hero: mais espacado e discreto que o das demais secoes */
.hero-card .eyebrow {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  order: 3;
  margin-top: 0;
  margin-bottom: 32px;
}

.hero-card h1 {
  font-family: var(--font-titulo);
  font-size: clamp(2.5rem, 3.4vw, 3.2rem);
  font-weight: 300;            /* Kepler Light */
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 0;            /* o espaco vem do filete abaixo */
  order: 2;
}

/* filete curto: no hero ele passa para baixo do eyebrow institucional */
.hero-card h1::after {
  content: '';
  display: none;
}

/* mesmo desenho do filete de secao, um degrau abaixo: dentro do
   card os 3px da faixa pesariam contra o rotulo miudo */
.hero-card .eyebrow::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  border-radius: var(--r-1);
  background: linear-gradient(to right, var(--navy), rgb(var(--navy-rgb) / 0.1));
  opacity: 0.5;
  margin: 28px 0 0;
}

.hero-card .sub {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 44px;
  line-height: 1.75;
  max-width: 42ch;
  text-align: justify;
  text-justify: inter-word;
  order: 4;
}

/* `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. Como
   item de flex ela nunca se separa da caixa, e o `gap` faz o mesmo
   espacamento de antes. Mesmo desenho de `area-pages.css`.

   O corpo subiu de 0.9 para 0.98rem e a entreletra caiu de 0.16
   para 0.10em: e o par que as duas folhas irmas adotaram: com a
   caixa alta, 0.16em obrigava o rotulo a quebrar em duas linhas
   nos botoes longos do celular, e 0.10em devolve ~9% de largura
   sem perder o ar de versalete. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  background: var(--navy);
  color: var(--white);
  font-size: 0.98rem;
  font-weight: 700;
  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);
  margin-top: auto;
}

.btn-primary:hover {
  background: var(--navy-soft);
  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(--navy);
  outline-offset: 3px;
  box-shadow: var(--anel);
}

/* seta opcional dentro do botao (avanca no hover). O espaco vem do
   `gap` do flex, nao mais de uma margem. */
.btn-primary .seta {
  display: inline-block;
  flex-shrink: 0;
  transition: transform var(--t-2) var(--ease-saida);
}

.btn-primary:hover .seta { transform: translateX(5px); }

/* no hero o botao segue o fluxo do texto, sem ser empurrado p/ o rodape */
.hero-card .btn-primary { order: 5; margin-top: 0; margin-bottom: auto; padding: 18px 38px; }

/* ─── NAV (topo direito · só texto · fundo transparente) ─ */
.top-nav {
  position: absolute;
  top: 30px;
  /* mesmo `--gutter` das secoes: o menu para no mesmo x em que o
     conteudo para, em vez de correr ate a borda da tela */
  right: var(--gutter);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 22px;
  max-width: 72%;
}

/* rotulo de interface, nao texto de leitura: fica um degrau abaixo
   do corpo para os 6 itens caberem em uma linha ate ~930px */
/* O padding e o que faz do link um alvo de dedo: como `<a>`
   em linha ele rendia 15px 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.84rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.85;
  text-shadow: 0 1px 4px rgba(0,0,0,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 tem */
  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(--white);
  outline-offset: 4px;
  border-radius: 3px;
  opacity: 1;
}

.top-nav a:hover { opacity: 1; }
.top-nav a:hover::after { transform: scaleX(1); }

@media (max-width: 768px) {
  .top-nav { top: 18px; gap: 8px 16px; max-width: 82%; }
  .top-nav a { font-size: 0.78rem; letter-spacing: 0.1em; }
}

@media (max-width: 480px) {
  .top-nav a { font-size: 0.72rem; letter-spacing: 0.08em; }
}

/* ─── TEAM ─────────────────────────────────────────────── */
/* ─── EQUIPE ───────────────────────────────────────────────
   Os dois recortes vinham de fotos com enquadramentos diferentes
   (um em pe, outro sentado), entao renderizados na mesma altura os
   rostos saiam com tamanhos bem distintos. Os arquivos
   `*-retrato.png` sao versoes normalizadas: mesma tela 460x600,
   mesmo tamanho de cabeca e mesma altura de topo — por isso o
   `<img>` aqui nao precisa de recorte nenhum, so `width: 100%`.
   O bloco inteiro e um unico link para o perfil. */
.team {
  background: var(--navy);
  padding: 88px var(--gutter) 96px;
  text-align: left;
}

/* Tres colunas: titulo | fotos | vazia — o mesmo arranjo da secao de
   equipe da pagina do agronegocio. As duas laterais tem a mesma regra,
   entao sobra a mesma largura dos dois lados e a coluna do meio fica
   centrada NA PAGINA, nao apenas no espaco que sobra do titulo. O
   titulo, por sua vez, encosta na margem da secao, no mesmo x do
   `.diff-left h2`. A coluna do meio e `minmax(0, 900px)`: para de
   crescer em 900, que e a largura da grade, e encolhe quando aperta. */
/* DUAS colunas, nao tres. A terceira coluna vazia centralizava as
   fotos, mas so cabe com titulo pequeno: no corpo padrao dos titulos
   de secao ele precisa de uma coluna bem mais larga. Sem ela sobram
   760px para a grade — o mesmo arranjo da landing do agronegocio. */
/* A foto entra ATRAS do conteudo e SOBRE a cor da faixa. O veu usa
   o proprio navy: a imagem e clara (luminancia media 143/255) e a
   secao tem texto branco — sem veu denso o contraste desabaria.
   O conteudo sobe com `z-index`, senao o pseudo-elemento o cobriria. */
.team--foto { position: relative; overflow: hidden; }

.team--foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgb(var(--navy-rgb) / 0.95) 0%,
      rgb(var(--navy-rgb) / 0.92) 45%,
      rgb(var(--navy-rgb) / 0.88) 100%),
    /* O `?v=2` e um cache-buster: o arquivo trocou mas o nome
       continua o mesmo, entao o navegador serviria a copia velha
       indefinidamente. Mudar a query force uma URL nova. Ao trocar
       a imagem de novo, incremente o numero. */
    /* `center top`, nao `center`: a imagem e 1.50:1 e a faixa e bem mais
       larga que alta, entao `cover` sobra altura. Centralizado, o corte
       comia o topo da estatua; ancorado no topo, o excedente sai todo
       por baixo e a imagem comeca inteira na borda de cima. */
    url('/assets/images/fundo1.jpg?v=2') center top/cover no-repeat;
  pointer-events: none;
}

.team--foto > * { position: relative; z-index: 1; }

.team-inner {
  display: grid;
  grid-template-columns: minmax(430px, 1fr) minmax(0, 760px);
  gap: 0 40px;
  align-items: start;
}

.team-titulo { grid-column: 1; max-width: 430px; }

.team-titulo p {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--gray-light);
  margin-top: 24px;
}

/* Corpo PADRAO dos titulos de secao desta pagina — o mesmo valor do
   bloco agrupado la embaixo, repetido aqui porque o `.team h2` saiu
   daquele grupo. O `nowrap` mantem o titulo em uma linha; ele sai no
   colapso, senao estouraria a tela de um celular. */
.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(--white);
  margin-bottom: 0;
  white-space: nowrap;
}

.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;
}

.team-photo {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 26px 36px rgba(0,0,0,0.55));
  transition: transform var(--t-2) var(--ease-saida),
              filter var(--t-2) var(--ease-saida);
}

.team-member:hover .team-photo {
  transform: translateY(-8px);
  filter: drop-shadow(0 34px 44px rgba(0,0,0,0.65));
}

/* o fio no topo dos dados repete o criterio da secao "Sobre":
   delimita sem precisar de caixa */
.team-info {
  border-top: 1px solid rgb(var(--white-rgb) / 0.22);
  padding-top: 22px;
}

.team-name {
  font-family: var(--font-titulo);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 8px;
}

.team-oab {
  font-size: 0.95rem;
  color: var(--gray-light);
  margin-bottom: 20px;
}

.team-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.75;
  transition: opacity var(--t-1) var(--ease);
}

.team-link .seta {
  display: inline-block;
  margin-left: 10px;
  transition: transform var(--t-2) var(--ease-saida);
}

.team-member:hover .team-link { opacity: 1; }
.team-member:hover .team-link .seta { transform: translateX(5px); }

.team-carousel .carrossel__controles { display: none !important; }
.diff-carousel .carrossel__controles,
.about-carousel .carrossel__controles { display: none !important; }

/* ─── DIFFERENTIALS ────────────────────────────────────── */
/* titulo no alto da secao e a lista de cards abaixo dele, os dois
   dentro do trilho. */
.diff {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  padding: 80px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: stretch;
}

/* Sem teto proprio: o titulo usa a largura do trilho e quebra
   sozinho quando a frase nao cabe. Um `max-width` aqui forcaria
   sempre o mesmo numero de linhas, independente do texto — quem
   decide e a frase. */
.diff-left {
  max-width: 100%;
}

/* corpo menor que os demais titulos de secao, mas com o mesmo peso
   leve e o mesmo filete. `balance` so age quando a frase quebra: ai
   ele reparte as palavras entre as linhas em vez de largar duas ou
   tres soltas na ultima. Numa linha so ele nao faz nada. */
.diff-left h2 {
  font-family: var(--font-titulo);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.22;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-wrap: balance;
}

/* o mesmo filete dos h2 de secao, so que aqui ele e um elemento no
   HTML em vez de um `::after` — o desenho tem de ser o mesmo */
.diff-left .underline {
  width: 64px;
  height: 3px;
  border-radius: var(--r-1);
  background: linear-gradient(to right, var(--navy), transparent);
  opacity: 0.5;
  margin-top: 28px;
}

/* Lista: um item por linha, cada card ocupando a largura toda do
   trilho. Sem teto de largura por decisao de layout — a contrapartida
   e uma linha de corpo perto de 140 caracteres nas telas grandes. */
.diff-right {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 22px;
}

/* com a largura toda disponivel o icone volta para a esquerda do
   texto, no lugar de ficar empilhado sobre ele. */
.diff-item {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  height: 100%;
  padding: 26px 30px;
  border: 1px solid rgb(var(--navy-rgb) / 0.08);
  border-radius: var(--r-2);
  background: linear-gradient(180deg,
    rgb(var(--white-rgb) / 0.99) 0%, rgb(var(--white-rgb) / 0.94) 100%);
  box-shadow: var(--sombra-1);
  transition: transform var(--t-2) var(--ease-saida),
              box-shadow var(--t-2) var(--ease-saida),
              border-color var(--t-2) var(--ease);
}

.diff-icon {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  background: var(--surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 18px;
  box-shadow: inset 0 0 0 1px rgb(var(--navy-rgb) / 0.08);
  transition: background var(--t-2) var(--ease),
              transform var(--t-2) var(--ease-saida),
              box-shadow var(--t-2) var(--ease-saida);
}

.diff-icon svg {
  width: 44px;
  height: 44px;
  color: var(--navy);
  display: block;
  transition: color var(--t-2) var(--ease);
}

.diff-item-title {
  position: relative;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
  transition: letter-spacing var(--t-2) var(--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. */
.diff-item-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: var(--navy);
  opacity: 0.45;
  transition: width var(--t-2) var(--ease-saida);
}

.diff-item-text {
  font-size: 1.02rem;
  color: var(--text-muted);
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  transition: color var(--t-2) var(--ease);
}

.diff-item-text ul { padding-left: 18px; margin-top: 6px; }
.diff-item-text li { margin-bottom: 3px; }

/* `hover: hover` deixa de fora o toque, onde o realce ficaria preso
   aceso depois do tap. O icone inverte: o circulo enche de navy e o
   traco vira branco — o mesmo gesto usado no bloco "Como trabalhamos". */
@media (hover: hover) {
  .diff-item:hover {
    transform: translateY(-4px);
    border-color: rgb(var(--navy-rgb) / 0.18);
    box-shadow: var(--sombra-2);
  }
  .diff-item:hover .diff-icon {
    background: var(--navy);
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgb(var(--white-rgb) / 0.08);
  }
  .diff-item:hover .diff-icon svg { color: var(--white); }
  /* o texto e quem carrega o realce: o corpo fecha em navy e o
     titulo abre o espacejamento, alargando sem mudar de corpo. */
  .diff-item:hover .diff-item-text { color: var(--text-dark); }
  .diff-item:hover .diff-item-title { letter-spacing: 0.13em; }
  .diff-item:hover .diff-item-title::after { width: 46px; }
}

/* ─── SPECIALTIES ──────────────────────────────────────── */
/* A faixa de cor continua indo de ponta a ponta, mas o conteudo
   entra no mesmo trilho das outras secoes: antes a foto colava na
   borda da tela e o texto comecava em 45% dela — em 1920 o titulo
   nascia 560px a direita de todos os outros titulos da pagina, e os
   dois lados liam como dois blocos sem relacao. */
.spec {
  background: var(--navy);
  display: flex;
  min-height: 480px;
  flex-wrap: nowrap;
  align-items: stretch;
  padding-inline: var(--gutter);
  gap: 56px;
}

/* 48%: e a largura minima em que o recorte da dupla cabe INTEIRO na
   coluna. Em 45% a janela visivel media 558px contra os 575px que o
   recorte ocupa na escala desta faixa, e o `cover` cortava os dois
   pelos bracos — o mesmo ajuste feito na foto da pagina do
   agronegocio, que usa o recorte identico. */
.spec-photos {
  flex: 0 0 48%;
  min-width: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* O veu era vertical, na direita: existia para dissolver a foto no
   texto quando a coluna sangrava ate a borda da tela. Com as duas
   colunas separadas por um `gap`, ali nao ha mais nada para
   dissolver — o corte visivel passou a ser o de BAIXO, onde a faixa
   termina e as pernas ficam cortadas em linha reta. O veu mudou de
   lado: agora e o rodape da foto que se apaga no navy. */
.spec-photos::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  /* alto e com a rampa repartida em quatro paradas: espalhado em
     180px o veu deixa de ter uma frente visivel — ele so vai
     fechando ate o navy, e o corte das pernas some sem que se
     perceba onde a foto acaba. */
  height: 180px;
  background: linear-gradient(to bottom,
    rgb(var(--navy-rgb) / 0) 0%,
    rgb(var(--navy-rgb) / 0.28) 38%,
    rgb(var(--navy-rgb) / 0.72) 72%,
    var(--navy) 96%);
  pointer-events: none;
  z-index: 1;
}

/* A imagem e um recorte em PNG (fundo transparente): a sombra cai
   direto sobre o navy chapado da faixa, e sobre cor lisa o olho
   enxerga qualquer degrade. Medido na tela, o par de sombras
   anterior escurecia o fundo ao redor da dupla em 11 niveis de azul
   (45 → 34, um quarto mais escuro): virava uma nuvem com contorno
   proprio. Uma camada so, larga e a 0.18, deixa a diferenca em 3
   niveis — o suficiente para assentar as figuras, pouco demais para
   se ler como mancha. Os ternos ja se separam do fundo sozinhos: sao
   quase pretos contra um azul bem mais claro. */
.spec-photos img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  /* 56%, e nao `center`: a dupla nao esta no meio do PNG — sobram
     343px de transparencia a esquerda contra 274 a direita. Com
     `center` a janela herdava esse desequilibrio e cortava so o
     braco direito; deslocada, ela emoldura o recorte com a mesma
     folga dos dois lados. */
  object-position: 56% top;
  display: block;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.10));
}

/* o afastamento das colunas agora e o `gap` da secao, nao o padding
   lateral daqui: sem isso o texto entraria para dentro do trilho */
.spec-content {
  flex: 1;
  min-width: 280px;
  padding: 64px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spec-content h2 {
  font-family: var(--font-titulo);
  color: var(--white);
  margin-bottom: 24px;
}

.spec-content .desc {
  font-size: 1.02rem;
  color: rgb(var(--white-rgb) / 0.72);
  line-height: 1.75;
  margin-bottom: 28px;
  text-align: justify;
  text-justify: inter-word;
}

/* botoes das areas de atuacao: a antiga secao .areas foi mesclada
   aqui dentro, entao os icones vem de la e a paleta e a do navy. */
.spec-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: stretch;
}

.spec-area {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 15px 18px;
  border: 1px solid rgb(var(--white-rgb) / 0.18);
  border-radius: var(--r-1);
  background: linear-gradient(180deg,
    rgb(var(--white-rgb) / 0.06), rgb(var(--white-rgb) / 0.035));
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: inset 0 1px 0 rgb(var(--white-rgb) / 0.04);
  transition: background var(--t-1) var(--ease),
              border-color var(--t-1) var(--ease),
              transform var(--t-2) var(--ease-saida),
              box-shadow var(--t-2) var(--ease-saida);
  text-wrap: balance;
}

.spec-area:hover {
  background: linear-gradient(180deg,
    rgb(var(--white-rgb) / 0.12), rgb(var(--white-rgb) / 0.07));
  border-color: var(--gray-light);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgb(var(--white-rgb) / 0.08);
}

/* o retorno tatil do clique, igual ao do botao */
.spec-area:active {
  transform: translateY(0);
  transition-duration: var(--t-1);
}

.spec-area:focus-visible {
  outline: 2px solid var(--gray-light);
  outline-offset: 3px;
  box-shadow: var(--anel-claro);
}

.spec-area svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--gray-light);
  opacity: 0.95;
  align-self: center;
}

/* ─── CONTACT ──────────────────────────────────────────── */
.contact {
  position: relative;
  min-height: 900px;
  background:
    linear-gradient(to right,
      rgb(var(--navy-rgb) / 0.80) 32%, rgb(var(--navy-rgb) / 0.30) 100%),
    url('/assets/images/fundo.jpg') center/cover no-repeat;
  background-color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--gutter);
}

.contact-card {
  background: rgb(var(--white-rgb) / 0.93);
  padding: 56px 52px;
  width: 100%;
  border-radius: var(--r-3);
  box-shadow: var(--sombra-3);
  display: flex;
  gap: 40px;
  align-items: stretch;
}

/* `flex: 0 0 auto` fazia esta coluna assumir a largura do seu texto
   mais longo (max-content) e nunca encolher — com o corpo de texto
   maior ela empurraria o mapa para fora do card. Agora as duas
   colunas dividem a largura disponivel. */
.contact-info {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.contact-map {
  flex: 1.2 1 420px;
  min-width: 340px;
  min-height: 420px;
  aspect-ratio: 1.1 / 1;
  border: none;
  border-radius: var(--r-2);
  display: block;
}

.contact-info h2 {
  font-family: var(--font-titulo);
  color: var(--navy);
  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(--navy);
}

.contact-item p {
  font-size: 1.1rem;
  color: var(--text-muted);
  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; }

/* ─── ABOUT / SOBRE O ESCRITÓRIO ───────────────────────── */
/* ─── SOBRE O ESCRITORIO ───────────────────────────────────
   Tres faixas empilhadas em vez de duas colunas lado a lado:
   cabecalho -> texto em duas colunas -> faixa de valores aberta.
   Os valores perderam a caixa branca (mesmo principio da faixa de
   credenciais de /advogados/): so um fio no topo separa cada um. */
.about {
  background: var(--surface);
  padding: 96px var(--gutter);
}

/* o limite de largura mudou de lugar: quem segura agora e o
   `--gutter` da secao, igual para todas. */
.about-inner {
  max-width: none;
}

/* Sem teto proprio, igual ao titulo dos diferenciais: o cabecalho
   usa a largura do trilho e quebra sozinho quando a frase nao cabe.
   Os 660px de antes forcavam duas linhas mesmo quando o texto cabia
   numa — quem decide o numero de linhas e a frase. */
.about-head { max-width: 100%; }

.about-head 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(--navy);
  margin-bottom: 0;
}

.about-head h2::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  border-radius: var(--r-1);
  background: linear-gradient(to right, currentColor, transparent);
  opacity: 0.5;
  margin-top: 34px;
}

.about-text {
  margin-top: 38px;
}

.about-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 56px;
}

.about-text p {
  display: block;
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.85;
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--r-2);
  transition: transform var(--t-2) var(--ease-saida),
              color var(--t-1) var(--ease),
              background-color var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease-saida);
  transform-origin: left center;
  will-change: transform;
}

.about-text p:hover {
  transform: scale(1.025);
  color: var(--navy);
  background: rgb(var(--white-rgb) / 0.9);
  box-shadow: var(--sombra-2);
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 76px;
}

.about-action {
  margin-top: 48px;
}

.about-value {
  border-top: 1px solid rgb(var(--navy-rgb) / 0.18);
  padding: 24px 18px 18px;
  border-radius: var(--r-2);
  transition: transform var(--t-2) var(--ease-saida),
              border-color var(--t-1) var(--ease),
              background-color var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease-saida);
  transform-origin: center top;
  will-change: transform;
}

.about-value:hover {
  transform: scale(1.025);
  border-color: rgb(var(--navy-rgb) / 0.34);
  background: rgb(var(--white-rgb) / 0.92);
  box-shadow: var(--sombra-2);
}

.about-value h3 {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 12px;
  transition: letter-spacing var(--t-2) var(--ease);
}

.about-value:hover h3 {
  letter-spacing: 0.14em;
}

.about-value p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.75;
  transition: color var(--t-1) var(--ease);
}

.about-value:hover p {
  color: var(--navy);
}

/* ─── SOCIAL (contato) ─────────────────────────────────── */
.contact-social {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}

.contact-social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-1) var(--ease),
              transform var(--t-2) var(--ease-saida),
              box-shadow var(--t-2) var(--ease-saida);
}

.contact-social a:hover {
  background: var(--gray);
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
}

.contact-social a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  box-shadow: var(--anel);
}
.contact-social svg { width: 20px; height: 20px; }

/* ─── RESPONSIVE ───────────────────────────────────────── */
/* A coluna lateral do titulo cobra largura das fotos: mantida abaixo
   de 1200 elas cairiam para pouco mais de 160px. Nessa faixa o titulo
   volta para cima, recupera o corpo dos demais titulos de secao e as
   fotos ficam com a largura cheia. Precisa vir ANTES do bloco de
   768px, que reduz esse mesmo titulo de novo. */
/* Com a coluna do titulo mais larga o aperto chega antes dos 1200px
   de quando ela tinha 180. Abaixo de 1280 o titulo volta para cima e
   as fotos usam a largura cheia. */
@media (max-width: 1280px) {
  .team-inner { grid-template-columns: minmax(0, 1fr); }
  .team-titulo { max-width: none; margin-bottom: 40px; }
  .team h2 { white-space: normal; }
  .team-grid { grid-column: 1; max-width: 900px; margin: 0 auto; }
}

/* com a coluna do titulo mais larga, o que sobra para os cards nao
   aguenta mais o icone ao lado do texto: ele volta para cima. */
@media (max-width: 900px) {
  .contact-card { flex-direction: column; max-width: 100%; }
  .contact-map { min-height: 260px; aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
  /* `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;
     quem nao entende a unidade cai no `100vh` da linha anterior.
     Alem disso o card passa a ancorar no alto, com o padding-top
     reservando espaco para as duas linhas da nav. */
  .hero {
    padding: 92px 5vw 48px;
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100svh;
  }

  /* no celular o card acompanha a altura do conteudo, e os `auto` que
     centralizam o texto no desktop saem — eram eles que abriam o vao
     entre o logotipo e o texto quando sobrava altura no card. */
  .hero-card { max-width: 100%; padding: 36px 28px 40px; min-height: auto; }
  .logo-box { margin-bottom: 32px; }
  .hero-card .eyebrow { margin-top: 0; margin-bottom: 20px; }
  .hero-card .btn-primary { margin-bottom: 0; }
  .logo-img { max-width: 150px; }
  .hero-card h1 { font-size: 2.3rem; line-height: 1.18; }
  .hero-card h1::after { margin: 28px 0 26px; }
  .hero-card .sub { font-size: 1.2rem; line-height: 1.7; margin-bottom: 36px; }
  .btn-primary { font-size: 1rem; padding: 18px 28px; }

  /* mesmo corpo p/ todos os titulos de secao no mobile */
  .team h2, .spec-content h2,
  .contact-info h2, .method-head h2, .faq-head h2 { font-size: 1.9rem; }
  .team h2::after, .spec-content h2::after,
  .contact-info h2::after, .method-head h2::after,
  .faq-head h2::after { margin-top: 24px; }
  .diff-left .underline { margin-top: 24px; }

  .team { padding: 48px 5vw 52px; }
  .team-inner { gap: 0; }
  .team-titulo { margin-bottom: 28px; }
  .team-titulo p {
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.6;
  }
  .team h2 { margin-bottom: 28px; }
  .team-carousel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    padding-right: 0;
    padding-bottom: 0;
  }
  .team-carousel .carrossel__moldura {
    order: 2;
    position: relative;
    padding-bottom: 0;
  }
  .team-grid {
    grid-column: 1;
    max-width: 100%;
    margin: 0;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .team-grid::-webkit-scrollbar { display: none; }
  .team-member {
    flex: 0 0 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 .carrossel__seta { display: none; }
  .team-carousel.tem-js .carrossel__controles {
    order: 1;
    position: static;
    display: flex !important;
    margin: 0 0 18px;
    gap: 14px;
    justify-content: center;
    pointer-events: none;
  }
  .team-carousel .carrossel__pontos { pointer-events: auto; }
  .team-carousel .carrossel__ponto::after {
    background: rgb(var(--white-rgb) / 0.48);
  }
  .team-carousel .carrossel__ponto[aria-current="true"] ~ .carrossel__ponto::after {
    background: rgb(var(--white-rgb) / 0.28);
  }
  .team-carousel .carrossel__ponto[aria-current="true"]::after {
    background: var(--white);
  }
  .team-carousel .carrossel__contagem { display: none; }
  .diff-carousel,
  .about-carousel {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    padding-inline: 0;
  }
  .diff-carousel .carrossel__moldura,
  .about-carousel .carrossel__moldura {
    position: relative;
    padding-bottom: 0;
  }
  .diff-carousel .carrossel__seta,
  .about-carousel .carrossel__seta {
    display: none;
  }
  .diff-carousel.tem-js .carrossel__controles,
  .about-carousel.tem-js .carrossel__controles {
    display: flex !important;
    margin-top: 22px;
    gap: 14px;
  }
  .diff-carousel .carrossel__pontos,
  .about-carousel .carrossel__pontos {
    pointer-events: auto;
  }
  .diff-carousel .carrossel__contagem,
  .about-carousel .carrossel__contagem {
    display: none;
  }

  .about { padding: 56px 5vw; }
  .about-head h2 { font-size: 1.9rem; }
  .about-head h2::after { margin-top: 26px; }
  .about-text {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    margin-top: 30px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .about-text::-webkit-scrollbar { display: none; }
  .about-text p {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .about-values { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
  .about-value {
    border-color: rgb(var(--navy-rgb) / 0.12);
    background: transparent;
    box-shadow: none;
  }
  .about-value.em-foco {
    border-color: rgb(var(--navy-rgb) / 0.34);
    background: rgb(var(--white-rgb) / 0.92);
    box-shadow: var(--sombra-2);
  }
  .about-value.em-foco h3 {
    letter-spacing: 0.14em;
  }
  .about-value.em-foco p {
    color: var(--navy);
  }

  .diff { gap: 32px; padding: 48px 5vw; }
  .diff-left { max-width: 100%; }
  /* no mobile a coluna deixa de ser estreita: mesmo corpo dos demais */
  .diff-left h2 { font-size: 1.9rem; max-width: 100%; }
  .diff-right {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .diff-right::-webkit-scrollbar { display: none; }
  /* no mobile os cards viram trilha horizontal com snap */
  .diff-item {
    flex: 0 0 100%;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .diff-item > div:last-child { width: 100%; }
  .diff-item-text {
    text-align: left;
    text-justify: auto;
  }
  .diff-icon { width: 70px; height: 70px; padding: 12px; }
  .diff-icon svg { width: 36px; height: 36px; }

  .spec { flex-direction: column; flex-wrap: nowrap; }
  .spec-photos { flex: 0 0 auto; width: 100%; min-height: 400px; }
  .spec-photos img { min-height: 400px; }
  .spec { padding-inline: 5vw; gap: 0; }
  .spec-content { padding: 12px 0 40px; }
  .spec-content .desc { display: none; }

  .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; }

  .method-carousel {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    padding-inline: 0;
    padding-bottom: 64px;
  }
  .method-carousel .carrossel__moldura {
    position: relative;
    padding-bottom: 0;
  }
  .method-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 18px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .method-grid::-webkit-scrollbar { display: none; }
  .method-step {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .method-marker {
    justify-content: center;
  }
  .method-step h3 { min-height: 0; }
  .method-rail { display: none; }
  .method-carousel .carrossel__seta {
    position: absolute;
    top: auto;
    bottom: -64px;
    width: 42px;
    height: 42px;
    border: 1px solid rgb(var(--navy-rgb) / 0.12);
    border-radius: 50%;
    background: var(--white);
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: none;
    box-shadow: var(--sombra-2);
    transition: opacity var(--t-1) var(--ease),
                transform var(--t-2) var(--ease-saida);
    z-index: 2;
  }
  .method-carousel .carrossel__seta--anterior { left: calc(50% - 52px); }
  .method-carousel .carrossel__seta--proximo { left: calc(50% + 10px); }
  .method-carousel .carrossel__seta[disabled] {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
  }
  .method-carousel .carrossel__seta:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    box-shadow: var(--anel);
  }
}

@media (max-width: 480px) {
  .hero { padding: 86px 4vw 44px; }
  .hero-card { padding: 32px 22px 36px; }
  .hero-card h1 { font-size: 2.05rem; line-height: 1.18; }
  .hero-card h1::after { margin: 24px 0 22px; }
  .hero-card .sub { font-size: 1.12rem; line-height: 1.7; margin-bottom: 32px; }
  /* em 360px o rotulo + seta nao cabiam numa linha e o botao quebrava */
  .btn-primary {
    width: 100%;
    text-align: center;
    padding: 17px 24px;
    font-size: 0.94rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .diff-item {
    align-items: flex-start;
    gap: 12px;
    padding: 22px 18px;
  }
  .diff-item { flex-basis: 90%; }
  .method-step {
    flex-basis: 100%;
    min-width: 100%;
  }
  .method-carousel { padding-bottom: 24px; }
  .spec-content .desc { font-size: 0.9rem; }
  /* em 2 colunas os rotulos longos quebravam em 4 linhas */
  .spec-areas { grid-template-columns: 1fr; }
  .contact-item p { font-size: 1.02rem; }
}

@media (max-width: 620px) {
  .about-text p {
    flex: 0 0 90%;
    min-width: 90%;
    color: var(--navy);
    background: rgb(var(--white-rgb) / 0.9);
    box-shadow: var(--sombra-2);
    transform: none;
  }
}

/* ─── COMO TRABALHAMOS (MÉTODO) ────────────────────────── */
.method {
  background: var(--white);
  padding: 84px var(--gutter);
}

.method-head {
  max-width: 720px;
  margin: 0 auto 60px;
  text-align: center;
}

.method-head h2 {
  font-family: var(--font-titulo);
  color: var(--navy);
  margin-bottom: 22px;
}

.method-head p {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* com o corpo de texto maior, 4 colunas em 1120px davam ~20
   caracteres por linha. Grade mais larga + quebra p/ 2 colunas ja
   em 1180px, em vez de 980px. */
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* Sem cartao: as etapas repousam sobre o branco e quem as amarra e o
   trilho que sai de cada marcador ate o marcador seguinte. Assim a
   secao le como uma sequencia, e nao como quatro caixas soltas. */
/* padding 16 dos dois lados = os 32 do gap: as areas de realce de
   duas etapas vizinhas encostam sem se sobrepor. A caixa de conteudo
   nao sai do lugar, entao o trilho continua batendo certo. */
.method-step {
  position: relative;
  padding: 16px;
  margin: -16px;
  border-radius: var(--r-2);
  transition: background var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease-saida);
}

.method-marker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.method-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--t-2) var(--ease-saida),
              box-shadow var(--t-2) var(--ease-saida);
}

.method-icon svg { width: 26px; height: 26px; color: var(--white); }

.method-num {
  font-family: var(--font-titulo);
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1;
  /* sem isso o "01" fica mais estreito que o "04" e o trilho dança */
  font-variant-numeric: tabular-nums;
  color: var(--gray);
  flex-shrink: 0;
  transition: color var(--t-1) var(--ease);
}

/* a margem negativa vale o gap da grade: o trilho atravessa o vao e
   encosta no marcador da proxima etapa. */
/* z-index para o trilho passar por cima do realce da etapa vizinha,
   senao o fundo do hover cortaria a ponta do filete que chega nela. */
.method-rail {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: rgb(var(--navy-rgb) / 0.16);
  margin-right: -32px;
}

/* quem fecha a linha nao puxa trilho para lugar nenhum */
.method-step:nth-child(4n) .method-rail,
.method-step:last-child .method-rail { display: none; }

.method-step h3 {
  position: relative;
  font-family: var(--font-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.method-step h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--navy);
  opacity: 0.45;
  transition: width var(--t-2) var(--ease-saida);
}

.method-step p {
  font-size: 1.02rem;
  color: var(--text-muted);
  line-height: 1.7;
  transition: color var(--t-2) var(--ease);
}

/* o numero sai do cinza e assume o navy: a etapa sob o cursor passa
   a ser a mais forte da fileira, sem que nada mude de tamanho. */
@media (hover: hover) {
  .method-step:hover {
    background: var(--surface);
    box-shadow: var(--sombra-2);
  }
  .method-step:hover .method-num { color: var(--navy); }
  .method-step:hover .method-icon {
    transform: translateY(-3px);
    box-shadow: var(--sombra-2);
  }
  .method-step:hover p { color: var(--text-dark); }
  .method-step:hover h3::after { width: 46px; }
}

/* ─── CONTROLES DO CARROSSEL ─────────────────────────────
   Esta folha desenhava as setas do método, mas nunca os pontos:
   sem regra base, o navegador entregava a barra como bloco e os
   pontos como quatro botões cinza de sistema, do tamanho de um
   caractere vazio. As folhas irmãs (`area-pages.css`,
   `lead-pages.css`) já traziam essa base; aqui ela faltava.

   O desenho não é um ponto redondo: é um segmento de trilho. O
   argumento é o mesmo do trilho com ponta — nesta seção a ordem
   significa alguma coisa (01 → 04), então o indicador precisa
   mostrar percurso, e não quatro posições equivalentes. O trecho
   já percorrido fica firme, o que falta fica apagado, e o atual é
   o único largo. Assim a barra responde de relance às duas
   perguntas que o visitante faz no meio do trilho: onde estou e
   quanto ainda falta.

   O alvo do toque é o botão inteiro (44×28, acima do mínimo de
   44px na direção do gesto), não o traço de 3px que se vê. */
/* a barra nasce escondida e cada contexto a acende onde ela serve.
   O JS monta o carrossel quando a media casa e nunca o desmonta —
   quem carrega no celular e depois alarga a janela levava a barra
   junto para o desktop, onde a grade de quatro colunas ja mostra as
   quatro etapas de uma vez. */
.carrossel__controles {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.carrossel__pontos {
  display: flex;
  align-items: center;
  gap: 2px;
}

.carrossel__ponto {
  width: 36px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: 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(--navy-rgb) / 0.38);
  transition: width var(--t-2) var(--ease-saida),
              background var(--t-1) var(--ease);
}

/* o que ainda não foi visto fica mais apagado que o já percorrido:
   os irmãos DEPOIS do atual, e só eles */
.carrossel__ponto[aria-current="true"] ~ .carrossel__ponto::after {
  background: rgb(var(--navy-rgb) / 0.15);
}

.carrossel__ponto[aria-current="true"]::after {
  width: 32px;
  background: var(--navy);
}

.carrossel__ponto:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: var(--anel);
}

@media (hover: hover) {
  .carrossel__ponto:hover::after,
  .carrossel__ponto[aria-current="true"] ~ .carrossel__ponto:hover::after {
    background: rgb(var(--navy-rgb) / 0.62);
  }
  .carrossel__ponto[aria-current="true"]:hover::after { background: var(--navy); }
}

/* contador textual: quem usa leitor de tela precisa saber em que
   ponto do trilho está, e o `tabular-nums` impede que a barra
   estremeça quando o número troca de largura */
.carrossel__contagem {
  display: none;
}

/* o realce continua; o que sai e o deslocamento */
@media (prefers-reduced-motion: reduce) {
  .diff-item:hover,
  .diff-item:hover .diff-icon,
  .method-step:hover .method-icon,
  .btn-primary:hover,
  .spec-area:hover,
  .contact-social a:hover,
  .about-text p:hover,
  .about-value:hover { transform: none; }
  .diff-item-title,
  .diff-item-title::after,
  .method-step h3::after,
  .carrossel__ponto::after,
  .btn-primary .seta,
  .top-nav a::after,
  .faq-item summary::after { transition: none; }
  html { scroll-behavior: auto; }
}

/* ─── PERGUNTAS FREQUENTES (FAQ) ───────────────────────── */
.faq {
  background: var(--navy);
  padding: 84px var(--gutter);
}

.faq-head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.faq-head h2 {
  font-family: var(--font-titulo);
  color: var(--white);
  margin-bottom: 22px;
}

.faq-head p {
  font-size: 1.1rem;
  color: rgb(var(--white-rgb) / 0.66);
  line-height: 1.7;
}

/* ─── TITULOS DE SECAO (tratamento unico) ──────────────────
   Mesma voz do h1 do hero e do "Sobre": Kepler Light em corpo
   grande + filete curto. Cada secao acima declara so a sua cor e
   o seu espacamento; corpo, peso e filete ficam centralizados
   aqui, para haver um lugar so a mexer.
   O filete usa `currentColor`, entao acompanha a cor do titulo —
   navy nas secoes claras, branco nas escuras — sem precisar de
   uma regra por secao. */
/* `.team h2` saiu deste grupo: mora numa coluna estreita e tem corpo
   proprio, igual ao `.diff-left h2`. O `::after` abaixo ele mantem. */
.spec-content h2,
.contact-info h2,
.method-head h2,
.faq-head h2 {
  font-size: clamp(2.15rem, 2.9vw, 2.7rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.team h2::after,
.spec-content h2::after,
.contact-info h2::after,
.method-head h2::after,
.faq-head 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 navy nas claras. */
  background: linear-gradient(to right, currentColor, transparent);
  opacity: 0.5;
  margin-top: 28px;
}

/* nas secoes de titulo centralizado o filete centraliza junto */
.method-head h2::after,
.faq-head h2::after {
  margin-left: auto;
  margin-right: auto;
}

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Painel translucido, o mesmo componente de `lead-pages.css` e
   `area-pages.css` — so que ali ele vive sobre faixa clara e aqui
   sobre o navy, entao o fundo e a borda sao veus de branco em vez
   de veus de marca.

   O que mudou junto com o raio: o fio de 3px na aresta esquerda
   saiu. Ele marcava TODOS os itens igualmente, fechados ou
   abertos, e era a unica peca do site a usar esse recurso. Quem
   distingue agora e o estado — o painel aberto clareia o fundo e
   assume a borda de acento, que e o que a sanfona precisa
   comunicar. */
.faq-item {
  background: rgb(var(--white-rgb) / 0.05);
  border: 1px solid rgb(var(--white-rgb) / 0.14);
  border-radius: var(--r-2);
  overflow: hidden;
  transition: border-color var(--t-2) var(--ease),
              background var(--t-2) var(--ease);
}

@media (hover: hover) {
  .faq-item:hover { border-color: rgb(var(--white-rgb) / 0.26); }
}

.faq-item[open] {
  background: rgb(var(--white-rgb) / 0.08);
  border-color: rgb(var(--gray-light-rgb) / 0.5);
}

/* `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;
  list-style: none;
  cursor: pointer;
  padding: 22px 62px 22px 24px;
  font-family: var(--font-titulo);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--white);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:focus-visible {
  outline: 2px solid var(--gray-light);
  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(--gray-light), var(--gray-light)) center / 14px 2px no-repeat,
    rgb(var(--gray-light-rgb) / 0.14);
  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(--gray-light);
  transition: transform var(--t-2) var(--ease-saida),
              opacity var(--t-2) var(--ease);
}

.faq-item summary:hover::before { background-color: rgb(var(--gray-light-rgb) / 0.28); }

.faq-item[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq-item[open] summary::before { background-color: rgb(var(--gray-light-rgb) / 0.28); }

.faq-answer {
  padding: 0 62px 24px 24px;
  /* a lista mede 820px; no corpo desta resposta isso daria perto de
     90 caracteres por linha nas telas em que ela abre inteira */
  max-width: var(--medida);
  font-size: 1.06rem;
  color: rgb(var(--white-rgb) / 0.72);
  line-height: 1.78;
}

.faq-answer a {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Abertura animada. `<details>` 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;
  }
}

.faq-cta { text-align: center; margin-top: 36px; }

/* o btn-primary e navy: sobre a secao navy ele some, entao inverte */
.faq-cta .btn-primary { background: var(--white); color: var(--navy); }
.faq-cta .btn-primary:hover { background: var(--gray-light); }
.faq-cta .btn-primary:focus-visible {
  outline-color: var(--white);
  box-shadow: var(--anel-claro);
}

@media (max-width: 1180px) {
  .method-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 32px; }
  /* em 2 colunas quem fecha a linha passa a ser a etapa par */
  .method-step:nth-child(2n) .method-rail { display: none; }
}

/* so a altura: a margem lateral continua vindo do `--gutter`, senao
   estas duas secoes saltavam para 5vw antes das outras e as bordas
   deixavam de coincidir entre 768 e 980. */
@media (max-width: 980px) {
  .method, .faq { padding-block: 56px; }
}

/* No celular a margem de todas as secoes cai de 6vw para 5vw (bloco
   dos 768px la em cima). Estas tres regras moram AQUI, e nao la,
   porque `.method`, `.faq` e `.top-nav` sao declaradas depois
   daquele bloco: com a mesma especificidade, quem vem por ultimo no
   arquivo vence, e la elas seriam simplesmente ignoradas. */
@media (max-width: 768px) {
  .method, .faq { padding-inline: 5vw; }
  .top-nav { right: 5vw; }

  .method-carousel {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    padding-bottom: 28px;
  }
  .method-carousel .carrossel__moldura {
    position: relative;
    padding-bottom: 0;
  }
  .method-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 18px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .method-grid::-webkit-scrollbar { display: none; }
  .method-step {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .method-step h3 { min-height: 0; }
  .method-rail { display: none; }
  .method-carousel .carrossel__seta { display: none; }
  /* a barra so aparece quando o JS montou o carrossel: sem ele o
     trilho e uma lista rolavel e os pontos nao levariam a lugar
     nenhum. O desenho dos pontos vem da base — aqui fica so o
     encaixe da barra na secao. */
  .method-carousel.tem-js .carrossel__controles {
    display: flex;
    margin-top: 22px;
    gap: 14px;
  }
  /* as quatro etapas sao numeradas na propria etapa (01…04): o
     contador repetiria em texto o que o trilho ja mostra */
  .method-carousel .carrossel__contagem { display: none; }

  .faq-item summary { font-size: 1.16rem; padding: 18px 56px 18px 18px; }
  .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; }
  .faq-answer { padding: 0 18px 20px; }
}

/* os dois retratos so empilham quando as colunas ficariam estreitas
   demais; ate ai continuam lado a lado */
@media (max-width: 620px) {
  .team-grid { gap: 16px; }
}

@media (max-width: 560px) {
  .method-grid { gap: 18px; }
  /* empilhado, a propria ordem ja da a sequencia: o trilho so sujaria */
  .method-rail { display: none; }
  .method-marker { margin-bottom: 16px; }
}

/* ─── TRILHA (BREADCRUMB) ──────────────────────────────────
   Usada pelas paginas de cidade. Espelha o `BreadcrumbList` do
   dado estruturado: existe para o visitante que chega pela busca
   e cai no meio do site sem saber de onde veio. */
.trilha {
  background: var(--surface);
  padding: 14px var(--gutter);
  border-bottom: 1px solid rgb(var(--navy-rgb) / 0.08);
}

.trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* o separador vem do CSS, nao do HTML: assim ele nao entra no
   texto que o rastreador le nem no que o leitor de tela anuncia */
.trilha li + li::before {
  content: '›';
  margin-right: 8px;
  opacity: 0.5;
}

.trilha a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.trilha a:hover { opacity: 0.7; }
.trilha [aria-current="page"] { color: var(--text-muted); }