/* ==========================================================
   page.module.css
   Portado de CSS Module. Prefixo: home-
   ========================================================== */

/* =========================================================
   HOME — arquitetura v1.1
   Gestos de diagramação do IDENTIDADE: bloco sangrado,
   página dividida, rótulo de canto.
   ========================================================= */

/* ---------------------------------------------------------
   1 · HERO
   Foto sangrada, tipografia na área de respiro reservada
   no enquadramento. Único lugar do site onde texto fica
   sobre foto (DNA §3.6.1).
   --------------------------------------------------------- */

.home-hero {
  position: relative;
  /* sem trava de altura: os dois controles fixos (hamburguer e pilula
     de contato) sao ancorados na viewport, entao o hero precisa ocupa-la
     inteira para eles emoldurarem a cena em qualquer monitor. */
  min-block-size: 100svh;
  display: flex;
  overflow: hidden;
  background: var(--verde);
}

/* Ancorado no topo, e não no centro.
 *
 * O filme é 1928x1072 (1.80). Numa janela mais alta que isso o corte é
 * lateral e o enquadramento não muda; mas numa janela larga e baixa —
 * 1600x780, por exemplo — o corte vira vertical e, centralizado, levava
 * 6,2% de cima, o bastante para decepar a cabeça do homem, que está
 * quase no limite superior do quadro.
 *
 * Com `top` o corte sai todo do pé da cena, onde há piso de corredor. É
 * a parte da imagem que não carrega informação. */
.home-heroFoto {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center top;
  inline-size: 100%;
  block-size: 100%;
}

/* Véu em duas camadas.

   A foto da figueira é simétrica e tem o ponto mais claro bem no centro —
   ela não oferece a área de respiro que o DNA §3.8.3 pede. Em vez de trocar
   a imagem, que é a mais forte do acervo, construímos o respiro: um scrim
   horizontal cria a zona escura à esquerda onde a tipografia entra, e o
   vertical fecha o rodapé. A copa continua limpa à direita, que é onde ela
   é mais bonita. */
.home-heroVeu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(35, 38, 26, 0.9) 0%,
      rgba(35, 38, 26, 0.72) 26%,
      rgba(35, 38, 26, 0.34) 52%,
      rgba(35, 38, 26, 0.08) 78%
    ),
    linear-gradient(
      180deg,
      rgba(35, 38, 26, 0.42) 0%,
      rgba(35, 38, 26, 0.05) 30%,
      rgba(35, 38, 26, 0.3) 68%,
      rgba(35, 38, 26, 0.72) 100%
    );
}

.home-heroConteudo {
  position: relative;
  z-index: 2;
  /* Fora do .wrap de proposito. Dentro dele o texto seguia a coluna de
     1200px centrada e parava em 80px da borda, enquanto a logo e o menu
     leem --borda-cena e param em 40px. Sangrado, os tres alinham na
     mesma margem — que e o alinhamento do mobile.

     O filho estica com a cena (align-items default do .hero) e e aqui
     que a posicao vertical do texto e decidida: base no desktop,
     topo no mobile. Percentual de altura nao resolve contra um pai
     que so tem min-block-size, entao stretch e o caminho. */
  display: flex;
  align-items: flex-end;
  padding-block: var(--barra-h) var(--base-cena);
  /* comeca no "S" do lockup, nao na borda do simbolo: o titulo pendura
     na mesma vertical da palavra SIKKAY */
  padding-inline: calc(var(--borda-cena) + var(--recuo-s)) var(--borda-cena);
  inline-size: 100%;
}

/* 680px: a linha mais longa do H1 mede 631px no corpo maximo (57px).
   Abaixo disso a composicao de tres linhas quebra em quatro. */
.home-heroTexto {
  max-inline-size: min(100%, 680px);
  text-align: start;
}

/* 25% abaixo do --display-xl do DNA (clamp 3rem/7.4vw/4.75rem).
   O corte e no tamanho, nao no desenho: a Krisma continua no peso 400,
   que e onde ela foi desenhada. */
.home-heroTitulo {
  color: var(--respiro);
  font-family: var(--fonte-display), Georgia, serif;
  font-size: clamp(2rem, 5.55vw, 3.5625rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
  margin-block-end: var(--s3);
}

.home-heroSub {
  color: var(--linho);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}

/* No telefone o subtítulo quebra em duas linhas, e a 1.5 elas ficavam
   soltas demais uma da outra. 1.25 é metade do ESPAÇO EXTRA entre elas:
   a 18px, a entrelinha sai de 27px para 22,5px. A metade literal do
   valor (0.75) daria 13,5px por linha e os textos se sobreporiam. */
@media (max-width: 900px) {
  .home-heroSub {
    line-height: 1.25;
  }
}

/* trocam de lugar no breakpoint para mudar so a quebra do H1 */
.home-soMobile {
  display: none;
}

@media (max-width: 900px) {
  .home-soDesktop {
    display: none;
  }
  .home-soMobile {
    display: inline;
  }
}

/* ---------------------------------------------------------
   Aviso de rolagem
   Divide o trilho com a pilula: mesma --trilho-base e a mesma
   altura de 52px, entao os centros se alinham sozinhos, sem
   compensar altura de texto na mao.
   --------------------------------------------------------- */

.home-rolagem {
  position: fixed;
  inset-block-end: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 40;
  /* a caixa ocupa exatamente o vao entre a base da pilula e a base do
     video, entao centrar o conteudo dentro dela poe o aviso no eixo
     dos dois — sem numero fixo para reajustar quando a cena mudar */
  block-size: var(--trilho-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--t-ui) var(--e-ui);
}

/* aplicada via AvisoRolagem.tsx assim que a secao 2 comeca a entrar
   na tela — o aviso ja cumpriu o papel dele nesse momento */
.home-rolagemEscondida {
  opacity: 0;
}

.home-rolagemTexto {
  /* line-height 1 tira a entrelinha herdada do body (1.6), que sozinha
     somava ~4px de espaco fantasma entre a palavra e o circulo */
  line-height: 1;
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241, 239, 230, 0.82);
}

.home-rolagemTrilho {
  position: relative;
  display: block;
  inline-size: 5px;
  block-size: 12px;
}

.home-rolagemPonto {
  position: absolute;
  inset-inline-start: 0;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--respiro);
  animation: descer 2.4s var(--e-ui) infinite;
}

/* o ponto cai, some e recomeca — o movimento sugere a direcao
   sem pedir atencao */
@keyframes descer {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(7px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-rolagemPonto {
    animation: none;
    opacity: 1;
  }
}


/* ---------------------------------------------------------
   2 · O QUE NOS MOVE
   Bloco unico substitui a antiga dupla Copa-e-Raiz + NR-1.
   Fundo solido, texto centrado — composicao herdada da referencia
   CarmoFarm, sem a imagem de canto que a referencia usava.
   --------------------------------------------------------- */

.home-mover {
  position: relative;
  /* prende o multiply do grafismo a esta secao: sem isolate ele
     tentaria misturar com o que estiver atras dela na pagina */
  isolation: isolate;
  background: var(--terracota);
  padding-block: clamp(88px, 13vw, 148px);
  overflow: hidden;
}

/* Grafismo da marca sobre o terracota. O preenchimento do SVG (#61331d)
   e quase identico ao fundo (#633317) — sobreposto normal ele some, por
   mais opacidade que se de. O multiply escurece o terracota no desenho
   das formas, que e o unico jeito de elas aparecerem. O arquivo original
   trazia esse multiply dentro do SVG, onde ele so misturava com o proprio
   transparente e nao servia para nada. */
.home-mover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../svg/grafismo_2.svg");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.06;
  z-index: 0;
}

/* 840, e não 760: o teto vale para a caixa externa, e o .wrap consome
   64px de cada lado — com 760 sobravam 632px de conteúdo e o título
   pedia 676 para caber numa linha. Em 840 sobram 712, com folga.

   A coluna de leitura NÃO acompanha: ela fica presa em 632 no
   .moverTexto abaixo, porque 63ch é a medida boa para o parágrafo e
   alargar junto pioraria a leitura. Título e texto não precisam ter a
   mesma medida — um é display, o outro é leitura. */
.home-moverConteudo {
  position: relative;
  z-index: 1;
  max-inline-size: 840px;
  text-align: center;
}

/* Lato Bold, nao Krisma: pedido explicito para este titulo destoar
   do resto do site, onde a serif sempre carrega o display. */
.home-moverTitulo {
  font-family: var(--fonte-texto), -apple-system, sans-serif;
  font-weight: 700;
  font-size: var(--display-m);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--areia);
}

/* Quebra que só existe abaixo de 900px. No desktop o título fica numa
   linha; no telefone ele quebraria de qualquer jeito, e assim quebra no
   lugar escolhido em vez de onde a largura mandar. */
.home-quebraMovel {
  display: none;
}

@media (max-width: 900px) {
  .home-quebraMovel {
    display: inline;
  }
}

.home-moverTexto {
  margin-block-start: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  /* mantém os 632px de antes, agora que a caixa em volta cresceu */
  max-inline-size: 632px;
  margin-inline: auto;
}

/* text-wrap: pretty é o que impede a palavra sozinha na última linha —
   o "negócio" que fechava o segundo parágrafo. O navegador reequilibra
   as últimas linhas em vez de deixar a órfã, e continua fazendo isso
   quando o texto for editado ou a tela mudar de largura, o que travar a
   medida na mão não faria. */
.home-moverTexto p {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(207, 184, 163, 0.92);
  text-wrap: pretty;
}

.home-moverBotao {
  margin-block-start: var(--s4);
}

/* ---------------------------------------------------------
   3 · RESPIRO — enquadramento das faixas desta pagina
   O mecanismo mora em RespiroParallax.module.css. Aqui fica
   so o que e decisao desta pagina.
   --------------------------------------------------------- */

/* A foto e 16:9 e a faixa vira retrato no telefone: centrada, o corte
   ficava no vaso e no torso, com a mulher que ri saindo pela borda e a
   terceira pessoa fora do quadro. Puxar para 32% recupera as duas faces
   que sustentam a cena. */
@media (max-width: 900px) {
  .home-faixaEquipe img {
    object-position: 32% center;
  }
}

/* ---------------------------------------------------------
   4 · CAMINHOS — dois blocos alternados
   A montagem mora em Bloco.module.css, compartilhada com as
   paginas internas. Aqui fica so o fundo e o respiro externo.
   --------------------------------------------------------- */

.home-caminhos {
  background: var(--respiro);
  /* o respiro externo mora aqui, nao em cada bloco: com dois blocos
     dentro, 208px em cada um viraria 416px de vao entre eles */
  padding-block: clamp(128px, 20vw, 208px);
}

/* ---------------------------------------------------------
   Responsivo
   --------------------------------------------------------- */

@media (max-width: 900px) {
  /* mobile: o bloco desce para a base e alinha a esquerda, como no
     desktop. O padding inferior reserva a faixa do trilho (52px +
     margem) mais o respiro entre o H2 e ele. */
  .home-heroConteudo {
    align-items: flex-end;
    padding-block: var(--barra-h)
      calc(var(--respiro-controle) + 52px + var(--s4));
  }

  .home-heroTexto {
    text-align: start;
    margin-inline: 0;
  }

  /* no mobile o texto volta a margem cheia: a coluna e estreita demais
     para gastar 50px com o recuo do "S" */
  .home-heroConteudo {
    padding-inline: var(--borda-cena);
  }

  /* O corpo sai da largura da coluna, nao de um vw solto: medido, a
     linha mais longa ocupa ~11,1x o tamanho da fonte, e o divisor 11,6
     guarda a folga. Assim as tres linhas se sustentam de 320px para
     cima, inclusive depois de dobrar a margem lateral. */
  .home-heroTitulo {
    font-size: min(2.2rem, calc((100vw - 2 * var(--borda-cena)) / 11.6));
  }

  /* no mobile o aviso volta para o trilho da pilula: mesma base e a
     mesma altura de 52px, para os centros coincidirem */
  .home-rolagem {
    inset-block-end: var(--trilho-base);
    block-size: 52px;
    inset-inline-start: var(--borda-cena);
    transform: none;
    align-items: flex-start;
  }

}


/* ==========================================================
   a-sikkay/page.module.css
   Portado de CSS Module. Prefixo: asik-
   ========================================================== */

/* =========================================================
   a SIKKAY
   Ritmo da página: blocos de conteúdo em Branco Respiro e
   depoimentos em Linho, fechando no artigo em destaque.
   ========================================================= */

/* ---------------------------------------------------------
   1 · ABERTURA
   Vista de baixo do tronco da figueira: os galhos abrem em
   raio, o mesmo gesto do símbolo da marca. Mais curta que o
   hero da home de propósito — página interna abre, não se
   apresenta.
   --------------------------------------------------------- */

/* Reenquadramento da capa, o mesmo do site aprovado. A faixa das outras
   aberturas (420/62vh/640) com `object-position: bottom` cortava a copa
   e empurrava o grupo para fora do quadro. 30% mais alta (546/80.6vh/832)
   e ancorada em 82% deixa as pessoas sentadas nas raízes na faixa, o
   tronco à direita e a copa ainda visível.

   No telefone a regra do fim do arquivo reduz a altura de novo: senão
   a capa tomaria a tela inteira antes do primeiro texto. */
.asik-abertura {
  position: relative;
  min-block-size: clamp(546px, 80.6vh, 832px);
  display: flex;
  overflow: hidden;
  background: var(--verde);
}

/* 82%, e não o centro nem a base: o centro devolve o tronco para o meio
   da faixa; a base corta a copa. */
.asik-aberturaFoto {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 82%;
}

/* Véu em duas camadas: a foto não tem área de respiro própria, então ela
   é construída. O gradiente horizontal abre a zona fechada à esquerda
   onde o texto entra; o vertical assenta o topo e o pé.

   Argila Raiz (#8C4721) no lugar do quase-preto esverdeado que o hero da
   home usa. Como é um tom médio, e não uma sombra, ele tinge em vez de
   apagar.

   Dosagem atual: metade dos ~15% anteriores. O desenho do véu continua o
   mesmo — mais fechado à esquerda, aberto à direita — mas agora é um
   banho de cor bem leve, não uma máscara. O pico é 0,075 na horizontal;
   somado ao vertical dá ~0,11 no canto inferior esquerdo, onde o título
   mora. */
/* Sem filtro de cor sobre a cena: a foto aparece como é.
 *
 * O que sustenta a legibilidade são as duas pontas, o mesmo recurso da
 * capa de Parceiros — escurece só onde há texto por cima e deixa o miolo
 * limpo. Em cima é a logo fixa que precisa de chão; embaixo, o título.
 *
 * Verde Figueira, e não Argila: aqui a camada é sombra, não tingimento —
 * é justamente o banho de cor que saiu.
 *
 * As duas pontas têm dosagens diferentes porque resolvem problemas de
 * tamanhos diferentes. Em cima a logo cai sobre o vidro claro do lobby e
 * sem camada fica em 1,59:1; os 0,5 levam a 3,50:1. Embaixo o título já
 * cai sobre o grupo, que é escuro, e mede 10,02:1 sozinho — ali a camada
 * não é legibilidade, é só assentar o texto, e 0,3 bastam. */
.asik-aberturaVeu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(35, 38, 26, 0.5) 0%,
    rgba(35, 38, 26, 0.5) 16%,
    transparent 40%,
    transparent 52%,
    rgba(35, 38, 26, 0.3) 82%,
    rgba(35, 38, 26, 0.3) 100%
  );
}

.asik-aberturaConteudo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  inline-size: 100%;
  padding-block: var(--barra-h) clamp(48px, 7vw, 88px);
  /* mesmo eixo do "S" do lockup que os blocos usam */
  padding-inline: calc(var(--borda-cena) + var(--recuo-s) * 2)
    var(--borda-cena);
}

.asik-aberturaTexto {
  inline-size: 100%;
}

.asik-aberturaTitulo {
  max-inline-size: 15ch;
  color: var(--respiro);
  font-family: var(--fonte-display), Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.875rem, 4.6vw, 3.125rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Krisma num corpo bem menor: é a mesma voz, dita mais baixo. A medida em
   ch impede que a linha estique além do nome da página em telas largas. */
.asik-aberturaSubtitulo {
  /* metade do respiro anterior: colado no título, ele lê como segunda
     linha do mesmo bloco em vez de parágrafo solto */
  margin: calc(var(--s3) / 2) 0 0;
  max-inline-size: 34ch;
  font-family: var(--fonte-display), Georgia, serif;
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(241, 239, 230, 0.88);
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   Seções de blocos
   A montagem vem de Bloco.module.css; aqui só o fundo e o
   respiro externo.
   --------------------------------------------------------- */

/* Os títulos dos blocos desta página são Terracota Origem, e não o Verde
   Figueira padrão. A cor entra pela variável que Bloco.module.css lê, e
   não por uma regra concorrente — as duas teriam a mesma especificidade
   e o resultado dependeria da ordem dos módulos no bundle. Como a
   variável fica na seção, vale para os quatro blocos de uma vez e não
   alcança a home, que segue no verde. */
.asik-blocos {
  --cor-titulo-bloco: var(--terracota);
  background: var(--respiro);
  padding-block: clamp(96px, 14vw, 168px);
}

/* Quadro de retrato — seção "Uma atuação construída na prática".
   A foto da Patty é a única vertical do acervo (1792x2400). Num quadro
   16/9 de 720px o corte mostraria do queixo às mãos: a cabeça ficava de
   fora.

   3/4 é praticamente a proporção do arquivo (0,747), então quase não há
   corte — a foto lê como retrato em vez de faixa.

   A largura continua sendo a da coluna, e não uma medida própria: com a
   foto travada em 480px dentro da coluna de 696px sobravam 216px mortos
   ali dentro, e o vão entre foto e texto lia 282px em vez dos 66px do
   grid. É a mesma armadilha da home — o que aproxima os dois não é
   mexer no vão, é a coluna abraçar o conteúdo.

   Telefone em 2/3, o dobro exato da altura que o 4/3 padrão dava: em
   375px de largura sai de 281px para 562px. Como o quadro fica mais
   alto que a proporção do arquivo, o corte passa para as laterais, ~5%
   de cada lado, longe da figura, que ocupa de 16% a 72% da largura. */
.asik-retrato {
  --foto-proporcao: 3 / 4;
  --foto-proporcao-movel: 2 / 3;
}

/* O corpo dos blocos é Lato Light (300). O nome sobe para Regular e é
   só isso: um degrau de peso no mesmo alfabeto basta para ele sair do
   parágrafo sem virar destaque gráfico. */
.asik-nome {
  font-weight: 400;
}

/* link do LinkedIn dentro do corpo do bloco */
.asik-linkExterno {
  color: var(--argila);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--t-ui) var(--e-ui);
}

.asik-linkExterno:hover {
  opacity: 0.72;
}

/* ---------------------------------------------------------
   Artigo em destaque — fecha a página
   --------------------------------------------------------- */

.asik-artigo {
  background: var(--respiro);
  padding-block: clamp(96px, 14vw, 168px);
}

/* Mesmo recuo e mesmo teto dos blocos alternados (as medidas vêm de
   Bloco.module.css, via a classe .secao na seção). Centrado no .wrap o
   artigo flutuava no meio da página, quebrando a vertical que desce
   desde a abertura. */
.asik-artigoGrade {
  display: grid;
  gap: var(--s4);
  max-inline-size: calc(
    var(--medida) + var(--vao) + var(--foto) + var(--recuo-esq) +
      var(--recuo-dir)
  );
  margin-inline: auto;
  padding-inline: var(--recuo-esq) var(--recuo-dir);
}

/* 26ch em vez de 22: a 22 o título quebrava em cinco linhas curtas e
   perdia a cadência de manchete */
.asik-artigoTitulo {
  max-inline-size: 26ch;
  color: var(--terracota);
}

.asik-artigoTexto {
  max-inline-size: 52ch;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.86);
}

.asik-artigoBotao {
  justify-self: start;
}

@media (max-width: 900px) {
  .asik-aberturaConteudo {
    padding-inline: var(--borda-cena);
  }

  /* Encaixa a cabeça do homem no vão entre a logo e o hambúrguer.

     A conta: a cabeça inteira — cabelo E rosto — ocupa de 46,0% a 54,3%
     da largura da foto, ou 8,3% dela. A janela do telefone mostra 39,2%
     da largura, então na tela a cabeça mede 79px. O vão entre os dois
     controles vai de 203px a 303px, centro em 253. Resolvendo para o
     centro da cabeça (50,2% da foto) cair nos 253, o eixo dá 39%: a
     cabeça fica de 213 a 293, com 10px de folga de cada lado.

     Medir só o cabelo escuro dava 37% e encostava no menu — o rosto
     ficava de fora da conta e a cabeça terminava em 304px, um pixel
     depois de onde o hambúrguer começa.

     No desktop o corte é `center 82%`: a faixa fica nas pessoas, nas raízes
     e na copa, com o tronco à direita. */
  .asik-aberturaFoto {
    object-position: 39% top;
  }

  /* Menos zoom na capa. A foto é muito larga (2,36:1) e o quadro do
     telefone é vertical, então o `cover` escala pela ALTURA — é a altura
     do hero que define quanto de zoom entra. A 62vh cabiam só 32% da
     largura da foto e o homem enchia o quadro, com a cabeça na altura da
     logo. A 50vh entram 39%, a figura recua e sobra céu no topo, onde a
     logo mora. Reduzir a altura é o único jeito de tirar zoom aqui: o
     object-position no eixo y não tem efeito, porque na vertical a foto
     já cabe exata. */
  .asik-abertura {
    min-block-size: clamp(380px, 50vh, 460px);
  }

  /* mesmo motivo do bloco alternado: empilhado, o recuo do "S" só
     empurra o texto para dentro sem alinhar com nada */
  .asik-artigoGrade {
    padding-inline: var(--borda-cena);
  }
}

/* Quebra que só existe abaixo de 900px: no desktop o subtítulo cabe numa
   linha, no telefone ele quebraria de qualquer jeito — assim quebra no
   ponto escolhido em vez de onde a largura mandar. Mesmo padrão da home. */
.asik-quebraMovel {
  display: none;
}

@media (max-width: 900px) {
  .asik-quebraMovel {
    display: inline;
  }
}


/* ==========================================================
   solucoes/page.module.css
   Portado de CSS Module. Prefixo: sol-
   ========================================================== */

/* =========================================================
   SOLUÇÕES
   Sete programas numa lista. Sem foto por item de propósito:
   sete fotos alternadas viraria catálogo, e o que diferencia
   um programa do outro é o texto, não a imagem.
   ========================================================= */

/* Véu em Terracota Origem sobre a cena: tinge em vez de escurecer, e
   é o que liga a capa ao resto da página.

   A 49% da dosagem padrão, em três passos: 0,30 (70% mais leve), depois
   +30% para 0,39, depois +25% para 0,49 — a fotografia dominava e o
   título perdia leitura a cada parada anterior. */
.sol-capa {
  --capa-veu: 99, 51, 23;
  --capa-veu-forca: 0.49;
}

/* ---------------------------------------------------------
   Abertura — antes da lista numerada
   --------------------------------------------------------- */

.sol-abertura {
  background: var(--respiro);
  padding-block: clamp(80px, 11vw, 144px) 0;
}

/* Mesmo eixo e mesmo teto da lista abaixo, para o texto de abertura
   nascer na mesma vertical dos programas. */
.sol-coluna {
  --recuo-esq: calc(var(--borda-cena) + var(--recuo-s) * 2);
  --recuo-dir: calc(var(--borda-cena) + clamp(28px, 3.4vw, 40px) + 60px);

  max-inline-size: calc(1204px + var(--recuo-esq) + var(--recuo-dir));
  margin-inline: auto;
  padding-inline: var(--recuo-esq) var(--recuo-dir);
}

.sol-aberturaTitulo {
  max-inline-size: 24ch;
  color: var(--terracota);
}

.sol-aberturaTexto {
  margin-block-start: var(--s4);
  max-inline-size: 62ch;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.86);
}

.sol-lista {
  background: var(--respiro);
  padding-block: clamp(56px, 8vw, 96px) clamp(88px, 12vw, 152px);
}

/* Mesmo teto e mesmos recuos dos blocos alternados — as medidas vêm de
   Bloco.module.css. Aqui a seção não usa .secao, então os valores são
   repetidos; se aquele arquivo mudar, este acompanha. */
.sol-itens {
  --medida: 418px;
  --foto: 720px;
  --vao: clamp(36px, 4.6vw, 66px);
  --recuo-esq: calc(var(--borda-cena) + var(--recuo-s) * 2);
  --recuo-dir: calc(var(--borda-cena) + clamp(28px, 3.4vw, 40px) + 60px);

  list-style: none;
  margin: 0;
  padding-inline: var(--recuo-esq) var(--recuo-dir);
  max-inline-size: calc(
    var(--medida) + var(--vao) + var(--foto) + var(--recuo-esq) +
      var(--recuo-dir)
  );
  margin-inline: auto;
}

/* O número ocupa uma coluna própria e estreita: fica fora da medida do
   texto, então a coluna de leitura continua a mesma dos outros blocos
   do site em vez de encolher para caber a numeração. */
.sol-item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--vao);
  align-items: start;
}

/* filete entre um programa e o outro, na linha derivada da tinta */
.sol-item + .sol-item {
  margin-block-start: clamp(48px, 6vw, 80px);
  padding-block-start: clamp(48px, 6vw, 80px);
  border-block-start: 1px solid var(--linha);
}

.sol-numero {
  font-family: var(--fonte-display), Georgia, serif;
  font-size: var(--title-l);
  line-height: 1;
  color: var(--argila);
  font-variant-numeric: tabular-nums;
  /* desce até a altura-x do título ao lado, em vez de flutuar acima */
  padding-block-start: 0.12em;
}

.sol-corpo {
  min-inline-size: 0;
}

.sol-titulo {
  max-inline-size: 22ch;
  color: var(--terracota);
}

/* O subtítulo é a segunda linha do mesmo título — "O ROI nasce das
   pessoas. / O Capital Humano como ativo estratégico." — então ele vive
   dentro do h2 e só troca de corpo, sem virar outro nível de hierarquia
   na leitura de tela. */
.sol-subtitulo {
  display: block;
  margin-block-start: 0.15em;
  font-size: 0.62em;
  color: var(--argila);
}

.sol-texto {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-block-start: var(--s4);
  max-inline-size: 62ch;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.86);
}

/* ---------------------------------------------------------
   NR-1 — frente própria, não o oitavo item
   --------------------------------------------------------- */

.sol-nr1 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--figo);
  padding-block: clamp(88px, 12vw, 140px);
  /* a tinta do botão de Linho, lida em botoes.module.css */
  --btn-linho-tinta: var(--terracota);
}

/* grafismo_5: Areia (#CAB8A5) sobre o Rosa Figo, mais claro que o fundo.
   Sem mix-blend-mode pelo mesmo motivo dos outros: multiply o apagaria.
   Sem opacidade própria também — o arquivo já traz 13% embutidos, e é
   essa a dosagem em avaliação. */
.sol-nr1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../svg/grafismo_5.svg");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.sol-nr1Conteudo {
  position: relative;
  z-index: 1;
  max-inline-size: calc(720px + var(--borda-cena) * 2 + var(--recuo-s) * 2);
  margin-inline: auto;
  padding-inline: calc(var(--borda-cena) + var(--recuo-s) * 2)
    var(--borda-cena);
}

.sol-nr1Titulo {
  max-inline-size: 20ch;
  color: var(--terracota);
}

.sol-nr1Texto {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-block-start: var(--s4);
  max-inline-size: 56ch;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: var(--terracota);
}

.sol-nr1Botao {
  margin-block-start: var(--s4);
}

/* mesma proporção presa à largura do fecho de Contato: o corte fica
   igual em qualquer largura de desktop */
.sol-fecho {
  --faixa-h: max(360px, 34vw);
}

@media (max-width: 900px) {
  /* No telefone o título desce sobre a folha clara da mesa, e só o véu
     não dava conta: o topo da primeira linha ficava em 3,21:1 e, nos
     pontos mais claros do papel, em 1,30:1. Esta base escurece o pé da
     capa — a mesma camada usada na capa de Parceiros — e leva a média a
     4,50:1 com o pior ponto em 3,08:1. Só aqui: no desktop a capa é mais
     baixa e o título cai sobre a madeira, que já segura sozinha. */
  .sol-capa {
    --capa-base: 0.65;
  }

  /* Sem esta regra a abertura herdava o recuo do "S" do lockup, que só
     faz sentido no desktop: no telefone ela começava em 133px contra os
     32px da lista abaixo, e a coluna sobrava com 110px — o título
     quebrava em dez linhas. */
  .sol-coluna,
  .sol-itens {
    padding-inline: var(--borda-cena);
  }

  /* No telefone o título usa a largura toda: a medida de 24ch existe
     para segurar a linha em telas largas, e aqui só apertaria.

     O corpo fica no padrão (32px). Testado: de 32px a 23px a frase dá
     cinco linhas de qualquer jeito — só cairia para quatro a 22px, e aí
     a abertura ficaria menor que os títulos dos programas logo abaixo,
     invertendo a hierarquia. O que resolvia a quebra era a largura, não
     o tamanho: a coluna saiu de 110px para 311px. */
  .sol-aberturaTitulo {
    max-inline-size: none;
  }

  /* empilhado, o número sobe para cima do título: numa coluna de 3,5rem
     ao lado de um título de três linhas ele ficava sozinho num vão */
  .sol-item {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }

  .sol-nr1Conteudo {
    padding-inline: var(--borda-cena);
  }
}


/* ==========================================================
   nr-1/page.module.css
   Portado de CSS Module. Prefixo: nr1-
   ========================================================== */

/* =========================================================
   NR-1
   Página de conformidade: muito texto, uma sequência de
   etapas e um acordeão de perguntas. O ritmo vem da
   tipografia e das faixas de cor, não de fotografia.
   ========================================================= */

/* Véu em Verde Figueira, o mesmo tom das faixas de cor da página. */
.nr1-capa {
  --capa-veu: 35, 38, 26;
  --capa-tinta: var(--linho);
  /* Metade da dosagem padrão: a cena do corredor tem contraste próprio
     de sobra e o véu cheio a achatava. */
  --capa-veu-forca: 0.5;
  /* Alinhada pelo topo: a cena tem o teto do corredor e a copa da
     figueira em cima, e o piso vazio embaixo — o corte central comia
     justamente a parte que interessa. */
  --capa-corte: top;
}

/* Coluna única alinhada ao eixo do "S" do lockup, como o resto do site.
   As medidas repetem as de Bloco.module.css porque estas seções não
   usam a classe .secao. */
.nr1-coluna {
  --recuo-esq: calc(var(--borda-cena) + var(--recuo-s) * 2);
  --recuo-dir: calc(var(--borda-cena) + clamp(28px, 3.4vw, 40px) + 60px);

  max-inline-size: calc(1204px + var(--recuo-esq) + var(--recuo-dir));
  margin-inline: auto;
  padding-inline: var(--recuo-esq) var(--recuo-dir);
}

.nr1-abertura,
.nr1-etapas,
.nr1-perguntas {
  background: var(--respiro);
}

.nr1-abertura {
  padding-block: clamp(80px, 11vw, 144px);
}

.nr1-etapas {
  padding-block: 0 clamp(80px, 11vw, 144px);
}

.nr1-perguntas {
  padding-block: clamp(80px, 11vw, 144px);
}

.nr1-tituloSecao {
  max-inline-size: 24ch;
  color: var(--terracota);
}

.nr1-texto {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-block-start: var(--s4);
  max-inline-size: 62ch;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.86);
}

/* ---------------------------------------------------------
   Etapas
   --------------------------------------------------------- */

.nr1-etapasLista {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  max-inline-size: 68ch;
}

.nr1-etapa {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
}

/* Disco em terracota: as etapas são um caminho, e o número precisa ler
   como marco, não como marcador de lista. */
.nr1-etapaNumero {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--terracota);
  color: var(--respiro);
  font-family: var(--fonte-display), Georgia, serif;
  font-size: 1.25rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nr1-etapaTitulo {
  margin: 0;
  padding-block-start: 0.35rem;
  font-size: var(--title-s);
  font-weight: 700;
  line-height: 1.3;
  color: var(--verde);
}

.nr1-etapaTexto {
  margin: var(--s2) 0 0;
  font-size: var(--body-m);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.86);
}

/* ---------------------------------------------------------
   Raízes — faixa de cor antes das perguntas
   --------------------------------------------------------- */

.nr1-raizes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--verde);
  padding-block: clamp(88px, 12vw, 148px);
}

.nr1-raizes::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../svg/grafismo_4.svg");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.nr1-raizesConteudo {
  position: relative;
  z-index: 1;
  max-inline-size: calc(720px + var(--borda-cena) * 2 + var(--recuo-s) * 2);
  margin-inline: auto;
  padding-inline: calc(var(--borda-cena) + var(--recuo-s) * 2)
    var(--borda-cena);
}

.nr1-raizesTitulo {
  max-inline-size: 20ch;
  color: var(--linho);
}

.nr1-raizesTexto {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-block-start: var(--s4);
  max-inline-size: 56ch;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(224, 214, 199, 0.86);
}

.nr1-raizesBotao {
  margin-block-start: var(--s4);
}

/* ---------------------------------------------------------
   Acordeão
   --------------------------------------------------------- */

.nr1-acordeao {
  margin-block-start: clamp(40px, 5vw, 64px);
  max-inline-size: 68ch;
  border-block-start: 1px solid var(--linha);
}

.nr1-pergunta {
  border-block-end: 1px solid var(--linha);
}

/* `list-style: none` mais o ::-webkit-details-marker: sem os dois, o
   triângulo padrão do navegador aparece ao lado do nosso sinal. */
.nr1-perguntaTitulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s3);
  cursor: pointer;
  list-style: none;
  font-size: var(--body-l);
  font-weight: 400;
  line-height: 1.45;
  color: var(--verde);
  transition: color var(--t-ui) var(--e-ui);
}

.nr1-perguntaTitulo::-webkit-details-marker {
  display: none;
}

.nr1-perguntaTitulo:hover {
  color: var(--terracota);
}

.nr1-perguntaTitulo:focus-visible {
  outline: 2px solid var(--argila);
  outline-offset: 4px;
}

/* Sinal de mais desenhado com duas barras: a horizontal fica, a
   vertical some quando abre. Vira um menos sem trocar de glifo, então
   não depende de nenhuma fonte de ícones. */
.nr1-sinal {
  position: relative;
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 0.35em;
}

.nr1-sinal::before,
.nr1-sinal::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  inline-size: 16px;
  block-size: 1.5px;
  background: var(--argila);
  transition: transform var(--t-ui) var(--e-ui);
}

.nr1-sinal::after {
  transform: rotate(90deg);
}

.nr1-pergunta[open] .nr1-sinal::after {
  transform: rotate(0deg);
}

.nr1-resposta {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding-block: 0 var(--s4);
  padding-inline-end: calc(16px + var(--s3));
  font-size: var(--body-m);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(51, 54, 38, 0.82);
}

.nr1-resposta p {
  margin: 0;
}

.nr1-fecho {
  --faixa-h: max(360px, 34vw);
}

@media (prefers-reduced-motion: reduce) {
  .nr1-sinal::before,
  .nr1-sinal::after {
    transition: none;
  }
}

@media (max-width: 900px) {
  .nr1-coluna,
  .nr1-raizesConteudo {
    padding-inline: var(--borda-cena);
  }
}


/* ==========================================================
   a-figueira/page.module.css
   Portado de CSS Module. Prefixo: fig-
   ========================================================== */

/* =========================================================
   a FIGUEIRA
   A página que explica o símbolo. Abre no nome, mostra a
   árvore, argumenta em três blocos e fecha na palavra.
   ========================================================= */

/* Véu em Verde Figueira: a foto já é verde e quente, e o verde
   institucional aprofunda a cena em vez de tingi-la de outra cor. */
.fig-capa {
  --capa-veu: 35, 38, 26;
  --capa-tinta: var(--linho);
}

/* ---------------------------------------------------------
   Entrada — parágrafo solto
   Corpo maior que o texto dos blocos: é uma abertura, e ela
   precisa soar como voz da marca antes de virar argumento.
   --------------------------------------------------------- */

.fig-entrada {
  background: var(--respiro);
  padding-block: clamp(72px, 10vw, 128px) 0;
}

.fig-entradaTexto {
  max-inline-size: 46ch;
  margin-inline: auto;
  padding-inline: var(--borda-cena);
  font-family: var(--fonte-display), Georgia, serif;
  font-size: clamp(1.25rem, 2.1vw, 1.6875rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--verde);
  text-align: center;
  text-wrap: pretty;
}

.fig-blocos {
  background: var(--respiro);
  padding-block: clamp(88px, 12vw, 152px);
  --cor-titulo-bloco: var(--terracota);
}

/* ---------------------------------------------------------
   Fecho — o nome
   --------------------------------------------------------- */

.fig-nome {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--figo);
  padding-block: clamp(88px, 12vw, 148px);
}

/* Mesmo par que a faixa NR-1 de Soluções Corporativas: grafismo_5 em
   Areia (#CAB8A5) sobre o Rosa Figo. Sem mix-blend-mode — o grafismo é
   mais claro que o fundo e o multiply o apagaria — e sem opacidade
   própria, porque o arquivo já traz 13% embutidos. */
.fig-nome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../svg/grafismo_5.svg");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Fecho centralizado: aqui a página sai do eixo à esquerda que rege o
   resto do site. O recuo assimétrico daria uma centralização torta, por
   isso o padding é igual dos dois lados; título e texto são centrados
   pela caixa (margin-inline: auto) e pela linha (text-align). */
.fig-nomeConteudo {
  position: relative;
  z-index: 1;
  max-inline-size: calc(720px + var(--borda-cena) * 2 + var(--recuo-s) * 2);
  margin-inline: auto;
  padding-inline: var(--borda-cena);
  text-align: center;
}

.fig-nomeTitulo {
  max-inline-size: 16ch;
  margin-inline: auto;
  color: var(--terracota);
}

.fig-nomeTexto {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-block-start: var(--s4);
  margin-inline: auto;
  max-inline-size: 56ch;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: var(--terracota);
}

@media (max-width: 900px) {
  /* A centralização do fecho vale só no desktop. No telefone a coluna é
     estreita e o texto centrado vira um bloco de bordas serrilhadas, então
     ele volta ao eixo à esquerda como o resto da página. */
  .fig-nomeConteudo {
    padding-inline: var(--borda-cena);
    text-align: start;
  }

  .fig-nomeTitulo,
  .fig-nomeTexto {
    margin-inline: 0;
  }

  .fig-entradaTexto {
    text-align: start;
  }
}


/* ==========================================================
   parceiros/page.module.css
   Portado de CSS Module. Prefixo: par-
   ========================================================== */

/* =========================================================
   PARCEIROS
   Cinco perfis. Foto e texto alternando de lado, como os
   blocos das outras páginas — o mesmo gesto de ritmo,
   aplicado a pessoas.
   ========================================================= */

.par-capa {
  --capa-veu: 99, 51, 23;
  /* Mesma dosagem do véu da abertura de Conheça a SIKKAY: lá os alfas
     são literais e vão de 0.86 a 0.075 no primeiro gradiente, e a razão
     entre os dois véus é constante (~0.09) em todas as sete paradas. */
  --capa-veu-forca: 0.09;
  /* Com o véu tão leve, a cena clara sob o título deixava o "Parceiros"
     em 1,46:1. Em vez de devolver o filtro sobre a foto toda, o pé
     recebe esta base: 0.68 é o mínimo que leva o título a 3:1, o piso
     da WCAG para texto grande. */
  --capa-base: 0.68;
}

.par-coluna {
  --recuo-esq: calc(var(--borda-cena) + var(--recuo-s) * 2);
  --recuo-dir: calc(var(--borda-cena) + clamp(28px, 3.4vw, 40px) + 60px);

  max-inline-size: calc(1204px + var(--recuo-esq) + var(--recuo-dir));
  margin-inline: auto;
  padding-inline: var(--recuo-esq) var(--recuo-dir);
}

.par-abertura {
  background: var(--respiro);
  padding-block: clamp(80px, 11vw, 144px) 0;
}

.par-titulo {
  max-inline-size: 20ch;
  color: var(--terracota);
}

.par-texto {
  margin-block-start: var(--s4);
  max-inline-size: 56ch;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.86);
}

/* ---------------------------------------------------------
   A rede
   --------------------------------------------------------- */

.par-rede {
  background: var(--respiro);
  padding-block: clamp(72px, 10vw, 120px);
}

.par-lista {
  --medida: 418px;
  --retrato: 420px;
  --vao: clamp(36px, 4.6vw, 66px);
  --recuo-esq: calc(var(--borda-cena) + var(--recuo-s) * 2);
  --recuo-dir: calc(var(--borda-cena) + clamp(28px, 3.4vw, 40px) + 60px);

  list-style: none;
  margin-inline: auto;
  padding: 0;
  padding-inline: var(--recuo-esq) var(--recuo-dir);
  max-inline-size: calc(
    var(--retrato) + var(--vao) + 720px + var(--recuo-esq) + var(--recuo-dir)
  );
}

/* Nenhuma coluna é 1fr: as duas têm teto próprio, então não sobra folga
   morta dentro delas — a mesma regra do bloco alternado. */
.par-perfil {
  display: grid;
  grid-template-columns: minmax(0, var(--retrato)) minmax(0, 720px);
  gap: var(--vao);
  align-items: start;
}

.par-invertido {
  grid-template-columns: minmax(0, 720px) minmax(0, var(--retrato));
}

/* a foto troca de lado sem trocar de ordem no DOM: a leitura continua
   sendo nome depois de rosto, em qualquer sentido */
.par-invertido .par-moldura {
  order: 2;
}

.par-perfil + .par-perfil {
  margin-block-start: clamp(64px, 8vw, 112px);
  padding-block-start: clamp(64px, 8vw, 112px);
  border-block-start: 1px solid var(--linha);
}

/* 3/4 para todos: as fotos chegaram em proporções diferentes (de 596x775
   a 4000x6000) e um quadro comum é o que faz os cinco perfis lerem como
   um conjunto em vez de cinco recortes soltos. */
.par-moldura {
  position: relative;
  aspect-ratio: 3 / 4;
  max-inline-size: var(--retrato);
  border-radius: var(--raio-foto);
  overflow: hidden;
  background: var(--linho);
}

.par-foto {
  object-fit: cover;
  object-position: center top;
}

.par-dados {
  min-inline-size: 0;
}

.par-nome {
  font-size: var(--display-s);
  color: var(--terracota);
}

/* a marca do parceiro é a segunda linha do nome, não outro nível */
.par-marca {
  display: block;
  margin-block-start: 0.2em;
  font-size: 0.5em;
  color: var(--argila);
}

.par-lema {
  margin-block-start: var(--s3);
  max-inline-size: 44ch;
  font-family: var(--fonte-display), Georgia, serif;
  font-size: var(--title-s);
  line-height: 1.4;
  color: var(--verde);
}

.par-bio {
  margin-block-start: var(--s3);
  max-inline-size: 62ch;
  font-size: var(--body-m);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(51, 54, 38, 0.86);
}

/* Contato do parceiro: telefone e Instagram, abaixo da biografia.
   Em linha enquanto couber, empilhando quando não couber — o Marcos tem
   três itens e é ele quem define o pior caso. */
.par-contato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-block-start: var(--s3);
  font-size: var(--body-s);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.par-contato a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--argila);
  text-decoration: none;
  transition: opacity var(--t-ui) var(--e-ui);
}

.par-contato a:hover {
  opacity: 0.7;
}

/* Perfil ainda não informado: mesma linha e mesmo ícone, sem o
   comportamento de link — não é clicável nem muda no hover. */
.par-pendente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(51, 54, 38, 0.5);
}

.par-contato svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.par-fecho {
  --faixa-h: max(360px, 34vw);
}

@media (max-width: 900px) {
  /* No telefone a logo fixa cai sobre o forro de madeira e as folhas —
     fundo escuro furado por clarões de céu, onde o Areia desaparece. O
     mesmo recurso do pé, aplicado ao topo, dá chão para ela. Só aqui:
     no desktop a marca não tem esse problema nesta capa. */
  .par-capa {
    --capa-topo: 0.75;
  }

  .par-coluna,
  .par-lista {
    padding-inline: var(--borda-cena);
  }

  .par-perfil,
  .par-invertido {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  /* empilhado, o rosto abre o perfil sempre — alternar a ordem aqui só
     faria o leitor procurar de quem é a biografia */
  .par-invertido .par-moldura {
    order: 0;
  }

  .par-moldura {
    max-inline-size: 320px;
  }
}

/* Quebra que só existe abaixo de 900px: no desktop a linha cabe inteira,
   no telefone ela quebraria de qualquer jeito — assim quebra no ponto
   escolhido em vez de onde a largura mandar. Mesmo padrão da home. */
.par-quebraMovel {
  display: none;
}

@media (max-width: 900px) {
  .par-quebraMovel {
    display: inline;
  }
}


/* ==========================================================
   blog/page.module.css
   Portado de CSS Module. Prefixo: blog-
   ========================================================== */

/* =========================================================
   NOTÍCIAS — listagem
   O mais recente em largura cheia, o resto em grade de dois.
   ========================================================= */

/* Capa com foto: cena de reunião dentro da empresa. O véu vem em Verde
   Figueira, como nas demais capas fotográficas do site. */
.blog-capa {
  --capa-veu: 35, 38, 26;
  /* Metade da dosagem padrão. */
  --capa-veu-forca: 0.5;
  --capa-tinta: var(--linho);
}

@media (max-width: 900px) {
  /* Três coisas disputam a mesma moldura no telefone, e a altura é o
     que as concilia:
       - a 503px de altura (o padrão) só 42% da largura da foto cabia, e
         a cena aparecia espremida numa fatia vertical;
       - a 56.25vw, que é a proporção 16:9 exata, a foto aparecia
         inteira mas virava uma tira fina, e a logo caía sobre a cabeça
         das pessoas por falta de céu acima delas;
       - a 98vw a altura inteira da foto aparece, sobra folga acima do
         cabelo da mulher do centro — onde a logo se apoia — e a janela
         horizontal abre para 57% da largura, o bastante para ela não
         encostar na borda.
     O corte em 51% centra essa janela entre os dois rostos do meio (a
     mulher a 32% e o homem a 73%), que são os que devem ficar em
     destaque; quem está cortado pelas bordas da foto sai de cena. */
  .blog-capa {
    --capa-h: 98vw;
    --capa-corte: 51% center;
  }
}

.blog-abertura {
  background: var(--respiro);
  padding-block: clamp(80px, 11vw, 144px) 0;
}

.blog-aberturaTitulo {
  max-inline-size: 24ch;
  color: var(--terracota);
}

.blog-aberturaTexto {
  margin-block-start: var(--s4);
  max-inline-size: 62ch;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.86);
}

.blog-acervo {
  background: var(--respiro);
  padding-block: clamp(56px, 8vw, 96px) clamp(72px, 10vw, 128px);
}

.blog-coluna {
  --recuo-esq: calc(var(--borda-cena) + var(--recuo-s) * 2);
  --recuo-dir: calc(var(--borda-cena) + clamp(28px, 3.4vw, 40px) + 60px);

  max-inline-size: calc(1204px + var(--recuo-esq) + var(--recuo-dir));
  margin-inline: auto;
  padding-inline: var(--recuo-esq) var(--recuo-dir);
}

.blog-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-block-end: clamp(40px, 5vw, 72px);
}

.blog-filtro {
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n500);
}

.blog-filtro[aria-current="page"] {
  color: var(--terracota);
}

.blog-filtro:hover {
  color: var(--argila);
}

.blog-filtros + .blog-grade {
  margin-block-start: 0;
}

/* linha de apoio de cada cartão: categorias à esquerda, data à direita */
.blog-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-block-start: var(--s3);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--argila);
}

.blog-meta time {
  flex: none;
  font-weight: 400;
  color: var(--n300);
  font-variant-numeric: tabular-nums;
}

.blog-categorias {
  min-inline-size: 0;
}

.blog-resumo {
  margin-block-start: var(--s2);
  max-inline-size: 58ch;
  font-size: var(--body-m);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.8);
}

/* ---------------------------------------------------------
   Destaque
   --------------------------------------------------------- */

.blog-destaque {
  display: block;
}

.blog-destaqueFoto {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-foto);
  overflow: hidden;
  background: var(--linho);
}

.blog-destaqueFoto img {
  object-fit: cover;
  transition: transform 600ms var(--e-conteudo);
}

.blog-destaque:hover .blog-destaqueFoto img {
  transform: scale(1.03);
}

.blog-destaqueTitulo {
  margin-block-start: var(--s2);
  max-inline-size: 24ch;
  color: var(--terracota);
  transition: color var(--t-ui) var(--e-ui);
}

.blog-destaque:hover .blog-destaqueTitulo,
.blog-card:hover .blog-cardTitulo {
  color: var(--argila);
}

/* ---------------------------------------------------------
   Grade
   --------------------------------------------------------- */

.blog-grade {
  list-style: none;
  margin: clamp(64px, 8vw, 104px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px) var(--vao, clamp(36px, 4.6vw, 66px));
}

.blog-card {
  display: block;
}

.blog-cardFoto {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--raio-foto);
  overflow: hidden;
  background: var(--linho);
}

.blog-cardFoto img {
  object-fit: cover;
  transition: transform 600ms var(--e-conteudo);
}

.blog-card:hover .blog-cardFoto img {
  transform: scale(1.03);
}

.blog-cardTitulo {
  margin-block-start: var(--s2);
  font-size: var(--title-l);
  max-inline-size: 22ch;
  color: var(--terracota);
  transition: color var(--t-ui) var(--e-ui);
}

@media (prefers-reduced-motion: reduce) {
  .blog-destaqueFoto img,
  .blog-cardFoto img {
    transition: none;
  }
  .blog-destaque:hover .blog-destaqueFoto img,
  .blog-card:hover .blog-cardFoto img {
    transform: none;
  }
}

@media (max-width: 900px) {
  .blog-coluna {
    padding-inline: var(--borda-cena);
  }

  .blog-grade {
    grid-template-columns: 1fr;
  }

  /* empilhado, categorias e data lado a lado espremiam as duas: a data
     desce e ganha a própria linha */
  .blog-meta {
    flex-direction: column;
    gap: 6px;
  }
}


/* ==========================================================
   blog/[slug]/page.module.css
   Portado de CSS Module. Prefixo: art-
   ========================================================== */

/* =========================================================
   NOTÍCIAS — artigo
   Coluna única e estreita: é uma página para ler do começo
   ao fim, e a medida manda mais que a composição.
   ========================================================= */

.art-artigo {
  background: var(--respiro);
}

.art-coluna {
  --recuo-esq: calc(var(--borda-cena) + var(--recuo-s) * 2);
  --recuo-dir: calc(var(--borda-cena) + clamp(28px, 3.4vw, 40px) + 60px);

  max-inline-size: calc(1204px + var(--recuo-esq) + var(--recuo-dir));
  margin-inline: auto;
  padding-inline: var(--recuo-esq) var(--recuo-dir);
}

/* topo pela altura da barra fixa: sem foto de capa aqui, o título subiria
   por baixo da logo */
.art-cabecalho {
  padding-block: calc(var(--barra-h) + clamp(24px, 4vw, 56px))
    clamp(32px, 4vw, 56px);
}

.art-data {
  display: block;
  font-size: var(--label);
  letter-spacing: 0.14em;
  color: var(--n300);
  font-variant-numeric: tabular-nums;
}

.art-titulo {
  margin-block-start: var(--s2);
  max-inline-size: 22ch;
  color: var(--terracota);
}

.art-categorias {
  margin-block-start: var(--s3);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--argila);
}

.art-categorias a:hover {
  color: var(--terracota);
}

/* sangrada, como as faixas de respiro do resto do site */
.art-foto {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--linho);
}

.art-foto img {
  object-fit: cover;
}

.art-corpo {
  padding-block: clamp(48px, 7vw, 88px) clamp(72px, 10vw, 120px);
}

.art-corpo .art-coluna {
  max-inline-size: calc(68ch + var(--recuo-esq) + var(--recuo-dir));
}

/* O resumo vira o lead: mesma frase da listagem, em corpo maior. Repetir
   aqui é de propósito — quem chegou pela listagem reencontra a promessa,
   quem chegou por busca recebe o resumo antes do texto. */
.art-lead {
  margin: 0;
  font-family: var(--fonte-display), Georgia, serif;
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--verde);
  text-wrap: pretty;
}

.art-secao {
  margin-block-start: clamp(36px, 4.5vw, 56px);
}

.art-secaoTitulo {
  margin: 0 0 var(--s3);
  font-size: var(--title-l);
  font-family: var(--fonte-display), Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
  color: var(--verde);
}

.art-secao p {
  margin: 0 0 var(--s3);
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(51, 54, 38, 0.86);
}

.art-secao p:last-child {
  margin-block-end: 0;
}

.art-voltar {
  display: inline-block;
  margin-block-start: clamp(48px, 6vw, 72px);
  font-size: var(--body-s);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--argila);
  transition: opacity var(--t-ui) var(--e-ui);
}

.art-voltar:hover {
  opacity: 0.7;
}

/* ---------------------------------------------------------
   Continue lendo
   --------------------------------------------------------- */

.art-outros {
  background: var(--linho);
  padding-block: clamp(72px, 10vw, 120px);
}

.art-outrosLista {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4.6vw, 66px);
}

.art-outroCard {
  display: block;
}

.art-outroFoto {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--raio-foto);
  overflow: hidden;
  background: var(--respiro);
}

.art-outroFoto img {
  object-fit: cover;
  transition: transform 600ms var(--e-conteudo);
}

.art-outroCard:hover .art-outroFoto img {
  transform: scale(1.03);
}

.art-outroData {
  display: block;
  margin-block-start: var(--s3);
  font-size: var(--label);
  letter-spacing: 0.14em;
  color: var(--n500);
  font-variant-numeric: tabular-nums;
}

.art-outroTitulo {
  margin-block-start: var(--s1);
  font-size: var(--title-l);
  max-inline-size: 22ch;
  color: var(--terracota);
  transition: color var(--t-ui) var(--e-ui);
}

.art-outroCard:hover .art-outroTitulo {
  color: var(--argila);
}

@media (prefers-reduced-motion: reduce) {
  .art-outroFoto img {
    transition: none;
  }
  .art-outroCard:hover .art-outroFoto img {
    transform: none;
  }
}

@media (max-width: 900px) {
  .art-coluna {
    padding-inline: var(--borda-cena);
  }

  .art-foto {
    aspect-ratio: 16 / 10;
  }

  .art-outrosLista {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   contato/page.module.css
   Portado de CSS Module. Prefixo: cnt-
   ========================================================== */

/* =========================================================
   CONTATO
   Única página do site sem fotografia. O bloco de cor no topo
   faz o trabalho que a imagem faz nas outras: dá peso à
   abertura e separa o cabeçalho do conteúdo.
   ========================================================= */

/* ---------------------------------------------------------
   1 · ABERTURA
   A montagem mora em Capa.module.css, compartilhada com
   Soluções, a Figueira e NR-1. Aqui só o tom.

   Verde Figueira, e não terracota, por dois motivos: o rodapé
   já é terracota e os dois blocos fechariam a página na mesma
   cor com o formulário espremido no meio; e o hambúrguer fixo
   é terracota — sobre terracota ele perderia o corpo e só
   sobrariam os três fios brancos soltos na tela.
   --------------------------------------------------------- */

.cnt-capa {
  --capa-fundo: var(--verde);
}

/* ---------------------------------------------------------
   2 · CORPO
   As medidas vêm de Bloco.module.css (.secao na seção): a
   coluna estreita é a mesma dos textos dos blocos alternados
   e a larga é a mesma das fotos. O formulário cai, então, nos
   dois eixos verticais que descem o site inteiro.
   --------------------------------------------------------- */

.cnt-corpo {
  background: var(--respiro);
  padding-block: clamp(80px, 11vw, 144px);
}

.cnt-grade {
  display: grid;
  grid-template-columns: minmax(0, var(--medida)) minmax(0, var(--foto));
  gap: var(--vao);
  align-items: start;
  max-inline-size: calc(
    var(--medida) + var(--vao) + var(--foto) + var(--recuo-esq) +
      var(--recuo-dir)
  );
  margin-inline: auto;
  padding-inline: var(--recuo-esq) var(--recuo-dir);
}

.cnt-introTitulo {
  max-inline-size: 14ch;
  color: var(--verde);
}

.cnt-introTexto {
  margin-block-start: var(--s4);
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.86);
}

/* o formulário começa na mesma linha de base do título ao lado, não
   colado no topo da caixa */
.cnt-colunaForm {
  padding-block-start: 6px;
}

/* ---------------------------------------------------------
   3 · RESPIRO — enquadramento da faixa de fecho
   O mecanismo (parallax, sangria, zoom) mora em
   RespiroParallax.module.css. Aqui só a altura.
   --------------------------------------------------------- */

/* Altura em vw, e não em vh como o fecho da home. A foto é cortada na
   vertical, e o quanto sobra dela depende da razão entre a altura da
   faixa e a LARGURA da tela — com a altura em vh, cada proporção de
   monitor dava um enquadramento diferente e o grupo subia ou descia
   sozinho. Presa à largura, a fatia visível é sempre a mesma: 75,5% da
   foto, em 1280, 1440, 1920 ou num ultrawide.

   34vw dá 490px em 1440 e 653px em 1920 — mais alta que a abertura,
   porque uma imagem precisa de mais campo que uma palavra, e ainda
   abaixo do fecho da home, que é a última declaração daquela página.
   O piso de 360px cobre a faixa entre 901px e 1059px de tela. */
.cnt-fecho {
  --faixa-h: max(360px, 34vw);
}

/* O grupo ocupa x54–x86 e y44–y80 da foto — medido na fonte. No desktop
   a faixa é mais larga que 16:9, então o corte é só vertical: nada é
   perdido nas laterais e o eixo horizontal fica centrado.

   Os 99% no eixo vertical saem de uma conta, não do olho. Com a faixa
   em 34vw a janela mostra 75,5% da foto; no meio da travessia ela cai
   entre 33% e 92%, e o centro dela bate nos 62% onde está o centro do
   grupo. Resultado: ~19% de respiro acima das cabeças e ~20% abaixo dos
   pés — equilibrado. Nos extremos do parallax a janela ainda começa em
   38% (5 pontos acima das cabeças) e termina em 87% (7 pontos abaixo
   dos pés), então ninguém é cortado em nenhum ponto da rolagem. */
.cnt-fecho img {
  object-position: center 99%;
}

@media (max-width: 900px) {
  /* No telefone a faixa fica mais estreita que a foto e o corte passa a
     ser horizontal: cabe pouco menos da metade da largura.

     O grupo ocupa x54–x86, centro em x70. Medido na página, a janela
     cai assim: a 70% ela terminava em 84% e cortava a pessoa da ponta;
     a 80% o grupo cabia mas ficava 4,8 pontos à direita do centro; a
     90% o centro da janela bate em 70,2 — o centro do grupo. É o
     deslocamento que centraliza de fato.

     O máximo (100%) existe, mas passa do ponto: joga o centro para
     75,3 e o grupo fica 5,3 pontos à esquerda, o mesmo erro de antes
     espelhado. */
  .cnt-fecho img {
    object-position: 90% center;
  }

  /* empilhado, o recuo do "S" só empurraria tudo para dentro sem
     alinhar com nada — mesmo motivo do bloco alternado */
  .cnt-grade {
    grid-template-columns: 1fr;
    padding-inline: var(--borda-cena);
    gap: clamp(48px, 8vw, 72px);
  }
}


/* ==========================================================
   contato/Formulario.module.css
   Portado de CSS Module. Prefixo: form-
   ========================================================== */

/* =========================================================
   FORMULÁRIO DE CONTATO

   Campos sem caixa: só um filete embaixo, na mesma linha
   derivada da tinta que o resto do site usa (--linha). Caixa
   com borda e fundo próprio traria para a página um cinza de
   formulário que não existe na paleta.

   O filete tem 1px em todos os estados. O foco muda a COR
   (para terracota), nunca a espessura — mudar a espessura
   desloca a linha em 1px e a página inteira treme a cada
   Tab.
   ========================================================= */

.form-form {
  display: grid;
  gap: clamp(44px, 5vw, 64px);
}

/* fieldset só existe para agrupar semanticamente: a moldura padrão do
   agente de usuário sai inteira */
.form-grupo {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.form-legenda {
  padding: 0;
  font-family: var(--fonte-display), Georgia, serif;
  font-weight: 400;
  font-size: var(--title-l);
  line-height: 1.2;
  color: var(--verde);
}

.form-dica {
  margin: 0;
  font-size: var(--body-m);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(51, 54, 38, 0.72);
}

/* ---------------------------------------------------------
   Perfil — as duas opções de entrada
   --------------------------------------------------------- */

.form-perfis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  margin-block-start: var(--s1);
}

.form-perfil {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-ui);
  cursor: pointer;
  transition:
    border-color var(--t-ui) var(--e-ui),
    background-color var(--t-ui) var(--e-ui);
}

.form-perfil:hover {
  border-color: rgba(99, 51, 23, 0.45);
}

/* A marca de selecionado é dupla de propósito: o miolo do rádio e a
   borda do cartão. Onde :has() não existir, o rádio sozinho ainda diz
   qual está marcado — o cartão é reforço, não a única pista. */
.form-perfil:has(input:checked) {
  border-color: var(--terracota);
  background: var(--linho);
}

.form-perfil input[type="radio"] {
  appearance: none;
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  border: 1px solid rgba(51, 54, 38, 0.32);
  border-radius: 50%;
  background: transparent;
  transition:
    background-color var(--t-ui) var(--e-ui),
    border-color var(--t-ui) var(--e-ui);
}

/* o inset em Branco Respiro abre o anel branco entre o ponto e a
   borda, em vez de pintar a bolinha inteira */
.form-perfil input[type="radio"]:checked {
  border-color: var(--terracota);
  background: var(--terracota);
  box-shadow: inset 0 0 0 4px var(--respiro);
}

/* ---------------------------------------------------------
   Campos
   --------------------------------------------------------- */

.form-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3) var(--s3);
  margin-block-start: var(--s2);
}

.form-largo {
  grid-column: 1 / -1;
}

/* align-content: start é o que mantém os filetes de dois campos lado a
   lado na mesma altura. Sem ele, o campo mais baixo da linha (Telefone,
   que carrega uma dica embaixo) estica a célula do vizinho, e as linhas
   auto do grid interno crescem junto: o filete do E-mail descia 23px em
   relação ao do Telefone. */
.form-campo {
  display: grid;
  align-content: start;
  gap: 6px;
  margin: 0;
  min-inline-size: 0;
}

.form-rotuloCampo {
  font-size: var(--body-s);
  font-weight: 400;
  line-height: 1.4;
  color: var(--n500);
}

.form-opcional {
  color: var(--n300);
}

.form-dicaCampo {
  font-size: var(--label);
  line-height: 1.4;
  color: var(--n300);
}

.form-entrada,
.form-selecao,
.form-area {
  inline-size: 100%;
  min-inline-size: 0;
  padding: 12px 2px;
  border: 0;
  border-block-end: 1px solid var(--linha);
  border-radius: 0;
  background-color: transparent;
  color: var(--n900);
  font-size: var(--body-m);
  font-weight: 400;
  line-height: 1.5;
  transition: border-color var(--t-ui) var(--e-ui);
}

.form-entrada::placeholder,
.form-area::placeholder {
  color: var(--n300);
}

.form-entrada:hover,
.form-selecao:hover,
.form-area:hover {
  border-block-end-color: rgba(51, 54, 38, 0.3);
}

.form-entrada:focus,
.form-selecao:focus,
.form-area:focus {
  outline: none;
  border-block-end-color: var(--terracota);
}

/* devolve o anel do :focus-visible que o :focus acima tirou — vem
   depois de propósito, mesma especificidade, ordem decide */
.form-entrada:focus-visible,
.form-selecao:focus-visible,
.form-area:focus-visible {
  outline: 2px solid var(--argila);
  outline-offset: 4px;
}

.form-area {
  min-block-size: 132px;
  resize: vertical;
}

/* chevron desenhado, porque a seta nativa vem com o cinza do sistema e
   não com o da paleta */
.form-selecao {
  appearance: none;
  padding-inline-end: 26px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%236b6e5e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 14px 9px;
}

/* o placeholder do select ("Selecione uma opção") em cor de dica; as
   opções reais voltam à tinta cheia */
.form-selecao:invalid {
  color: var(--n300);
}

/* ---------------------------------------------------------
   Telefone — o +55 fica fora do campo
   O filete pertence ao invólucro, senão a linha nasceria depois do
   prefixo em vez de correr por baixo dos dois.
   --------------------------------------------------------- */

.form-telefone {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-block-end: 1px solid var(--linha);
  transition: border-color var(--t-ui) var(--e-ui);
}

.form-telefone:hover {
  border-block-end-color: rgba(51, 54, 38, 0.3);
}

.form-telefone:focus-within {
  border-block-end-color: var(--terracota);
}

.form-telefone .form-entrada {
  border-block-end: 0;
}

.form-telefone .form-entrada:hover {
  border-block-end-color: transparent;
}

/* line-height 1.5 igual ao do campo, e não o 1.6 herdado do body: os
   1,6px de diferença entre as duas caixas de linha empurravam o filete
   do telefone para baixo do filete do e-mail ao lado. */
.form-prefixo {
  flex: none;
  padding-block: 12px;
  font-size: var(--body-m);
  line-height: 1.5;
  color: var(--n500);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   Envio
   --------------------------------------------------------- */

.form-envio {
  display: grid;
  justify-items: start;
  gap: var(--s2);
}

.form-envio button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.form-consentimento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: var(--body-s);
  line-height: 1.5;
  color: var(--n500);
}

.form-consentimento input {
  flex: none;
  margin-block-start: 0.28em;
  accent-color: var(--terracota);
}

.form-consentimento span {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 0.7em;
  align-items: baseline;
}

.form-link {
  color: var(--argila);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.form-link:hover {
  opacity: 0.72;
}

.form-erro {
  margin: 0;
  font-size: var(--body-s);
  color: var(--argila);
}

/* ---------------------------------------------------------
   Confirmação — substitui o formulário no lugar dele
   --------------------------------------------------------- */

.form-confirmacao {
  display: grid;
  gap: var(--s2);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--raio-caixa);
  background: var(--linho);
}

.form-confirmacaoTitulo {
  margin: 0;
  font-family: var(--fonte-display), Georgia, serif;
  font-weight: 400;
  font-size: var(--title-l);
  line-height: 1.2;
  color: var(--verde);
}

.form-confirmacaoTexto {
  margin: 0;
  max-inline-size: 46ch;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(51, 54, 38, 0.82);
}

@media (max-width: 620px) {
  .form-perfis,
  .form-campos {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   politica-de-privacidade/page.module.css
   Portado de CSS Module. Prefixo: pol-
   ========================================================== */

/* =========================================================
   POLÍTICA DE PRIVACIDADE
   Página de leitura corrida: coluna única e estreita, sem
   imagem nenhuma. A medida manda mais que a composição.
   ========================================================= */

/* Bloco de cor, sem foto — a página não tem imagem em lugar nenhum, e
   abrir com uma contradiria isso. */
.pol-capa {
  --capa-fundo: var(--verde);
}

.pol-corpo {
  background: var(--respiro);
  padding-block: clamp(56px, 8vw, 96px) clamp(72px, 10vw, 120px);
}

/* Mesmo eixo do resto do site, com o teto do artigo do blog: 68ch é a
   medida em que um texto longo se lê sem o olho perder a linha. */
.pol-coluna {
  --recuo-esq: calc(var(--borda-cena) + var(--recuo-s) * 2);
  --recuo-dir: calc(var(--borda-cena) + clamp(28px, 3.4vw, 40px) + 60px);

  max-inline-size: calc(68ch + var(--recuo-esq) + var(--recuo-dir));
  margin-inline: auto;
  padding-inline: var(--recuo-esq) var(--recuo-dir);
}

/* A abertura vem antes da primeira seção numerada e é o que explica o
   documento: corpo um degrau acima do resto, para separar sem título. */
.pol-abertura p {
  margin: 0 0 var(--s3);
  font-family: var(--fonte-display), Georgia, serif;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--verde);
  text-wrap: pretty;
}

.pol-abertura p:last-child {
  margin-block-end: 0;
}

.pol-secao {
  margin-block-start: clamp(40px, 5vw, 64px);
}

.pol-secaoTitulo {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  font-family: var(--fonte-display), Georgia, serif;
  font-size: var(--title-l);
  font-weight: 400;
  line-height: 1.2;
  color: var(--terracota);
  text-wrap: balance;
}

/* O número é estrutura de verdade — a Política é citada por seção ("nos
   termos do item 10") —, então ele fica visível. Sai da árvore de
   acessibilidade porque o leitor de tela já anuncia a ordem da lista, e
   ouvir "zero um" antes de cada título vira ruído. */
.pol-numero {
  flex-shrink: 0;
  font-family: var(--fonte-texto), sans-serif;
  font-size: var(--body-s);
  font-weight: 700;
  letter-spacing: 0.1em;
  /* Argila Raiz, e não Areia: o Areia sobre o Branco Respiro dá 1,65:1 e
     o número sumia. Em Argila são 6,00:1 — legível, e ainda um degrau
     abaixo do Terracota do título, que é quem deve puxar o olho. */
  color: var(--argila);
  font-variant-numeric: tabular-nums;
}

.pol-secao p {
  margin: 0 0 var(--s3);
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(51, 54, 38, 0.86);
}

.pol-secao p:last-child {
  margin-block-end: 0;
}

.pol-lista {
  margin: 0 0 var(--s3);
  padding-inline-start: var(--s3);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.pol-lista li {
  position: relative;
  font-size: var(--body-l);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(51, 54, 38, 0.86);
}

/* Marcador desenhado, e não o do navegador: um disco pequeno pesa menos
   que o bullet padrão e acompanha a paleta. Em Argila pelo mesmo motivo
   do número — o Areia sobre o Branco Respiro fica em 1,65:1 e o ponto
   desaparecia. O ::before fica fora do fluxo para não empurrar a
   primeira linha. */
.pol-lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--s3) * -1);
  inset-block-start: 0.72em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--argila);
}

.pol-lista:last-child {
  margin-block-end: 0;
}

/* Assinatura: fecha o documento como um documento, não como uma página
   de site — o filete acima separa sem precisar de outro título. */
.pol-assinatura {
  margin: clamp(56px, 7vw, 88px) 0 0;
  padding-block-start: var(--s4);
  border-block-start: 1px solid rgba(51, 54, 38, 0.14);
  font-size: var(--body-s);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--argila);
}

.pol-data {
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(51, 54, 38, 0.6);
}

@media (max-width: 900px) {
  /* Sem esta regra a coluna herdaria o recuo do eixo do "S" do lockup,
     que só faz sentido no desktop — no telefone o texto começaria em
     133px e sobraria uma medida estreita demais para ler. */
  .pol-coluna {
    padding-inline: var(--borda-cena);
  }

  /* Empilhado: o número sobe para a própria linha em vez de espremer o
     título contra a borda. */
  .pol-secaoTitulo {
    flex-direction: column;
    gap: var(--s1);
  }
}

/* ==========================================================
   next/image fill

   No site em Next a foto com `fill` nasce em position:absolute
   cobrindo a caixa. Sem isto a imagem fica no fluxo e a capa,
   o retrato e o cartão mostram só uma faixa.
   ========================================================== */

.cpa-foto,
.par-foto,
.imz-moldura > img,
.rsp-moldura > img,
.blog-destaqueFoto > img,
.blog-cardFoto > img,
.art-foto > img,
.art-outroFoto > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}