/* ==========================================================================
   SITE — componentes
   Toda animação usa só transform e opacity (regra do sistema de movimento).
   ========================================================================== */

/* -- Header ---------------------------------------------------------------- */

.header {
  position: fixed;
  inset-inline: 0;
  /* Flutua um pouco abaixo da borda da viewport: em cima da capa, a marca
     d'água tipográfica da própria arte nasce colada ao topo, e o menu em
     cima dela ficava ilegível. Uma folga pequena já resolve — não precisa
     descer muito. Ao ganhar fundo (.com-fundo) o header some essa folga e
     assenta liso no topo, como uma barra fixa comum. */
  top: clamp(0.5rem, 1.2vw, 0.85rem);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  padding-block: var(--espaco-sm);
  padding-inline: var(--margem-viewport);
  background: transparent;
  transition: background-color var(--dur-base) var(--ease-in-out),
    backdrop-filter var(--dur-base) var(--ease-in-out),
    padding-block var(--dur-base) var(--ease-in-out),
    top var(--dur-base) var(--ease-in-out);
}

.header.com-fundo {
  top: 0;
  background-color: rgba(249, 239, 225, 0.9);
  backdrop-filter: blur(14px);
  padding-block: var(--espaco-2xs);
  box-shadow: 0 1px 0 rgba(83, 33, 0, 0.1);
}

/* Ícone + menu + hambúrguer voltam a viver do lado esquerdo, como um grupo só
   (o space-between do .header cuida do resto: CTA isolado à direita). */
.header__grupo {
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
}

/* Símbolo isolado (só a casinha, sem o nome por extenso). Fica reservado pra
   quando o header ganha fundo — a arte de capa já mostra a marca inteira
   antes disso, então o ícone só entra depois que ela fica pra trás no
   scroll. Ocupa o mesmo lugar sempre: por isso permanece no fluxo (não é
   display:none) e só a opacidade/posição mudam. */
.header__simbolo {
  height: 1.7rem;
  width: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.com-fundo .header__simbolo {
  opacity: 1;
  transform: translateY(0);
}

.header__marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Duas versões do lockup, uma para cada fundo. Trocar o arquivo é mais fiel à
   marca do que forçar contorno ou sombra sobre uma versão só. */
.header__logo,
.header__compacta {
  width: auto;
  transition: height var(--dur-base) var(--ease-in-out),
    opacity var(--dur-base) var(--ease-in-out);
}

.header__logo {
  height: 2.6rem;
}

.header__compacta {
  height: 1.9rem;
}

/* Regra de versão, conforme as especificações. O site inteiro repousa sobre
   creme, inclusive a arte de capa, então a versão colorida vale em todos os
   estados. As variantes em creme ficam disponíveis para uso sobre escuro.
   Abaixo de 900px o lockup horizontal não cabe ao lado do CTA sem violar o
   mínimo de 160px de largura, então entra a assinatura compacta. */
.header__logo,
.header__compacta {
  display: none;
}

.header__logo--cor {
  display: block;
}

.com-fundo .header__logo--cor {
  display: none;
}

.com-fundo .header__compacta--cor {
  display: block;
}

@media (max-width: 899px) {
  .header__logo--cor {
    display: none;
  }

  .header__compacta--cor {
    display: block;
  }
}

/* Em telas estreitas a assinatura e o CTA disputam a mesma linha, e a conta
   não fechava: MEDIDO em 360px, o botão terminava em 362px — 2px FORA da
   viewport e 22px além da margem de 20px. Encolher os dois não resolve, só
   adia: 20 (margem) + 112 (assinatura) + 44 (hambúrguer) + 32 (dois gaps) +
   125 (botão) = 333 contra 340 disponíveis, sete pixels de folga.

   Abaixo de 400px a assinatura sai e fica só o símbolo — que é exatamente o
   que a home já faz no header dela. Com isso o total cai pra 248px e sobra
   folga real até 320px de tela. */
@media (max-width: 700px) {
  .header,
  .header__grupo {
    gap: var(--espaco-xs);
  }
}

@media (max-width: 480px) {
  .header__compacta {
    height: 1.2rem;
  }

  .header .btn {
    /* 44px de altura: o mínimo de alvo de toque. Antes eram 40. */
    padding: 0.85rem 1rem;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }
}

/* O símbolo dentro do link da marca (páginas internas). Só entra em cena
   onde a assinatura por extenso não cabe mais. */
.header__marca .header__simbolo {
  display: none;
  height: 1.7rem;
  width: auto;
  opacity: 1;
  transform: none;
}

@media (max-width: 399px) {
  .header__compacta,
  .header__compacta--cor,
  .com-fundo .header__compacta--cor {
    display: none;
  }

  .header__marca .header__simbolo {
    display: block;
  }
}

.header__menu {
  display: none;
  align-items: center;
  gap: var(--espaco-2xs);
  /* Distância da câmera ao plano do menu: quanto menor, mais dramático o 3D.
     800px mantém o pop perceptível sem distorcer demais um texto tão pequeno. */
  perspective: 800px;
}

/* Pop-up 3D: o item se solta do plano da página e inclina na direção do
   cursor, como um botão físico sendo pressionado por baixo. Troca o
   sublinhado que existia antes — os dois juntos conversavam mal. */
.header__menu a {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-titulo-secao);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--marrom);
  display: block;
  padding: 0.55rem 1rem;
  border-radius: var(--raio-sm);
  transform-style: preserve-3d;
  transform: translateY(0) rotateX(0deg);
  transform-origin: center bottom;
  background: transparent;
  box-shadow: 0 0 0 rgba(83, 33, 0, 0);
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.header__menu a:hover,
.header__menu a:focus-visible {
  color: var(--magenta);
  background: var(--off-white);
  transform: translateY(-5px) rotateX(14deg);
  box-shadow: 0 16px 24px -8px rgba(83, 33, 0, 0.35),
    0 4px 10px rgba(83, 33, 0, 0.15);
}

.com-fundo .header__menu a:hover,
.com-fundo .header__menu a:focus-visible {
  color: var(--magenta);
  background: var(--creme);
}

@media (min-width: 900px) {
  .header__menu {
    display: flex;
  }
}

/* -- Menu mobile (hambúrguer + painel) --------------------------------------
   Só existe abaixo de 900px, onde o .header__menu horizontal não cabe mais
   sem a logo que ocupava o lado esquerdo. */

/* O botão MEDIA 26x20px — menos da metade do alvo mínimo de toque (44x44).
   Era o pior alvo do site: o item de navegação principal do mobile, e o mais
   difícil de acertar com o dedo. A caixa cresce pra 44x44 e os três traços
   continuam com 26px de largura, centralizados dentro dela: o desenho não
   muda, só a área que responde ao toque. */
.header__hamburguer {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  margin-inline: -9px;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
}

.header__hamburguer span {
  position: absolute;
  left: 50%;
  margin-left: -13px;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--marrom);
  transition: transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

/* Centralizados na caixa de 44px: (44 - 20) / 2 = 12 de folga em cima. */
.header__hamburguer span:nth-child(1) {
  top: 12px;
}

.header__hamburguer span:nth-child(2) {
  top: 21px;
}

.header__hamburguer span:nth-child(3) {
  top: 30px;
}

/* Vira um X quando aberto: mesma linguagem de transform/opacity do resto do
   sistema de animação, sem ícone novo. */
.header__hamburguer[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.header__hamburguer[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.header__hamburguer[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Painel cobre a tela inteira — mais simples e mais robusto do que calcular
   a altura variável do header (que muda de tamanho ao ganhar fundo). O botão
   continua acima dele (z-index maior) para fechar funcionar sempre. */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-lg);
  /* Estampa da marca, arte-final da designer (ESTAMPA - PATTERN-06.png).
     O ladrilho foi RECORTADO do arquivo original, não redesenhado — a mesma
     regra do símbolo, que nunca é reconstruído em SVG.

     O período de repetição foi medido por autocorrelação no arquivo de
     4500x6000: 1150 x 1526px. Reduzir aquele recorte sozinho sujaria as
     bordas, então ele foi ladrilhado 3x3, o conjunto reduzido e o miolo
     recortado de volta — assim a costura sobrevive à reamostragem. Conferido:
     o degrau nas emendas ficou em 0,2 e 0,7 contra 2,4 de contraste próprio
     do padrão, e a prancha 3x2 não mostra linha nenhuma.

     A cor de fundo repete o #FFBEBE do arquivo, que é exatamente o
     --rosa-tinte da paleta: se a imagem falhar, o painel continua rosa.
     `background-size` em px (e não em %) mantém a densidade igual em
     qualquer largura de tela: 250px de ladrilho dão cerca de três símbolos
     atravessando um celular de 375px. */
  background-color: var(--rosa-tinte);
  background-repeat: repeat;
  background-size: 250px auto;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.menu-mobile.aberto {
  opacity: 1;
  transform: translateY(0);
}

/* Botão em relevo, não mais texto solto: sobre a estampa um link sem corpo
   próprio se perderia no padrão.

   COR — corpo em --magenta e texto em --creme, 5,28:1. A primeira versão usava
   --rosa-antigo, que dá 3,17:1: passa em AA, mas SÓ como texto grande, e o
   tokens.css é explícito ("só texto >=24px peso médio"). Ou seja, aquela cor
   travava o corpo da fonte em 24px — e era justamente o corpo de 24px que
   deixava o botão pesado. Com --magenta o contraste vale em qualquer tamanho,
   e é o que liberou os 18px. A família continua a mesma: magenta é a rosa
   primária da marca, e a espessura desceu de --magenta para --vinho.

   MEDIDA — 192 x 46px contra os 272 x 64 da primeira versão: 46% menos área.
   O que mais pesava era a entrelinha herdada de 1,65 (24px de fonte davam 40px
   só de linha); em 1,2 ela some sem apertar a caixa. A espessura do relevo caiu
   de 6 para 4px na mesma proporção.

   RELEVO — três camadas e nenhuma é borda: a espessura do botão (sombra dura,
   sem blur), a sombra projetada no chão e um fio de luz interno no topo. Ao
   pressionar, o corpo desce os mesmos 4px que a espessura tem e ela encolhe
   para 1 — o botão afunda de verdade em vez de só piscar.

   MEDIDA ÚNICA — sem o `min-width` os quatro botões teriam larguras diferentes
   ("SOBRE" media 104px contra 168 de "PROCESSO") e a pilha lia como quatro
   peças avulsas em vez de um menu. */
.menu-mobile a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-titulo-secao);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme);
  background: var(--magenta);
  min-width: min(58%, 12rem);
  padding: 0.75rem 1.5rem;
  border-radius: var(--raio-arco);
  text-align: center;
  box-shadow: 0 4px 0 var(--vinho),
    0 10px 16px -8px rgba(83, 33, 0, 0.4),
    inset 0 1px 0 rgba(249, 239, 225, 0.28);
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* Faixa de luz que atravessa a pílula no hover — o botão é uma peça física em
   relevo, e o que uma peça física faz ao ser apontada é pegar luz.

   Só transform e opacity, como manda o sistema de movimento: a faixa é um
   gradiente parado e o que anda é ela inteira. `z-index: -1` com `isolation`
   no link põe o brilho ACIMA do fundo e ABAIXO do texto — sem isso a faixa
   passaria por cima das letras e as apagaria por um instante.

   A duração vem de --dur-base, então `prefers-reduced-motion` a reduz a 1ms
   junto com o resto. */
.menu-mobile a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 36%,
    rgba(249, 239, 225, 0.4) 50%,
    transparent 64%
  );
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

@keyframes brilho-botao {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Fechado em `hover: hover` de propósito: no toque o `:hover` GRUDA depois do
   tap, e o botão ficaria levantado e brilhando depois de a pessoa já ter
   navegado. É a mesma precaução que os cartões de projeto já tomam. */
@media (hover: hover) {
  .menu-mobile a:hover,
  .menu-mobile a:focus-visible {
    /* Sobe mais um degrau: a espessura cresce junto com a distância do chão,
       senão o botão parece flutuar sem ter de onde sair. */
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--vinho),
      0 16px 22px -10px rgba(83, 33, 0, 0.45),
      inset 0 1px 0 rgba(249, 239, 225, 0.28);
  }

  .menu-mobile a:hover::after,
  .menu-mobile a:focus-visible::after {
    animation: brilho-botao var(--dur-base) var(--ease-out);
  }
}

.menu-mobile a:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--vinho),
    0 2px 6px -3px rgba(83, 33, 0, 0.35),
    inset 0 1px 0 rgba(249, 239, 225, 0.18);
}

/* O brilho também no toque, FORA da media query de hover. O painel só existe
   abaixo de 900px, ou seja: no aparelho de verdade `hover` não existe e a
   animação nunca rodaria — ela apareceria apenas para quem estreita a janela
   do desktop. No `:active` ela acontece onde o menu realmente é usado. */
.menu-mobile a:active::after {
  animation: brilho-botao var(--dur-base) var(--ease-out);
}

/* Trava o scroll da página com o painel aberto. */
.menu-mobile-aberto {
  overflow: hidden;
}

/* A imagem da estampa fica FORA da regra base, presa a esta media query: o
   painel é `display: none !important` acima de 900px, mas o navegador baixava
   o PNG de todo jeito (conferido em 1440px: a entrada aparecia no
   `performance.getEntriesByType('resource')`). São 11,8KB, mas é download
   para um elemento que nunca vai existir naquela largura. */
@media (max-width: 899px) {
  .menu-mobile {
    background-image: url("../assets/img/marca/estampa-rosa.png");
  }
}

@media (min-width: 900px) {
  .header__hamburguer,
  .menu-mobile {
    display: none !important;
  }
}

/* -- Cortina de transição ---------------------------------------------------
   Sobe para cobrir a tela ao sair de uma página e recolhe ao entrar na
   seguinte, sempre no mesmo sentido, para as duas metades lerem como um
   movimento só. Sem JS ela nasce recolhida e nunca aparece. */

.cortina {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--marrom);
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: bottom;
}

.cortina__marca {
  width: min(26vw, 11rem);
  height: auto;
  opacity: 0;
}

/* Estado de chegada: a página nasce coberta. */
.js-enabled .cortina {
  transform: scaleY(1);
  transform-origin: top;
}

.js-enabled .cortina__marca {
  opacity: 1;
}

/* ...e a cortina se recolhe para cima assim que a página está pronta. */
.js-enabled.entrou .cortina {
  transform: scaleY(0);
  transition: transform 760ms var(--ease-in-out);
}

.js-enabled.entrou .cortina__marca {
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}

/* Saída: volta a cobrir, agora crescendo de baixo. */
.js-enabled.saindo .cortina {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 560ms var(--ease-in-out);
}

.js-enabled.saindo .cortina__marca {
  opacity: 1;
  transition: opacity 400ms var(--ease-out) 160ms;
}

@media (prefers-reduced-motion: reduce) {
  .cortina,
  .js-enabled .cortina {
    display: none;
  }
}

/* -- Botões ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2xs);
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-titulo-secao);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.9rem 1.7rem;
  border-radius: var(--raio-arco);
  transition: transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

.btn--primario {
  background: var(--magenta);
  color: var(--off-white);
}

.btn--primario:hover,
.btn--primario:focus-visible {
  background: var(--vinho);
}

.btn--fantasma {
  background: transparent;
  color: var(--creme);
  border: 1px solid rgba(249, 239, 225, 0.5);
}

.btn--fantasma:hover,
.btn--fantasma:focus-visible {
  background: rgba(249, 239, 225, 0.14);
  border-color: var(--creme);
}

/* Contorno para uso sobre fundo claro, onde o fantasma (creme) sumiria. */
.btn--contorno {
  background: transparent;
  color: var(--vinho);
  border: 1px solid rgba(124, 0, 38, 0.35);
}

.btn--contorno:hover,
.btn--contorno:focus-visible {
  background: var(--vinho);
  border-color: var(--vinho);
  color: var(--creme);
}

.btn--secao {
  background: var(--marrom);
  color: var(--creme);
}

.btn--secao:hover,
.btn--secao:focus-visible {
  background: var(--vinho);
}

/* -- Hero -------------------------------------------------------------------- */

/* A capa é a arte oficial da marca e preenche a primeira tela inteira. O
   cabeçalho repousa sobre ela, aproveitando a faixa livre no topo da
   composição: nenhum espaço vazio é reservado acima da imagem. */
.hero {
  position: relative;
  background: var(--creme);
  height: 100svh;
  overflow: hidden;
}

/* O <picture> precisa repassar a altura, senão o height:100% da img não tem
   contra o que resolver e a imagem cresce até a altura natural. */
.hero picture {
  display: block;
  height: 100%;
}

.hero__imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* O lockup é centralizado na arte, então o recorte também centraliza. */
  object-position: center;
}

/* Em telas largas e baixas o corte vertical seria agressivo demais. Ali a arte
   respeita a própria proporção e a seção acompanha a altura dela. */
@media (min-aspect-ratio: 16/9) {
  .hero,
  .hero picture {
    height: auto;
  }

  .hero__imagem {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Em telas altas e estreitas, preencher a tela inteira em 16:9 cortaria a
   lateral do padrão gráfico sem necessidade, já que o lockup é centralizado.
   Ali a altura cede para uma proporção mais vertical.

   4/5 era vertical DEMAIS. A conta: a arte é 3840x2160, e `cover` num quadro
   de 375x469 escala por 469/2160 = 0,217 — a arte vira 834px de largura e
   perde 459px de recorte lateral. O lockup, que ocupa cerca de 40% da arte,
   chegava a 89% da tela: "MONTEIRO" quase encostando nas duas bordas, e a
   capa comendo 58% da primeira tela.

   Em 1/1 a escala cai pra 0,174, o recorte lateral cai pra 292px e o lockup
   passa a ocupar 71% da tela — presença de capa, com margem. */
@media (max-width: 767px) {
  .hero,
  .hero picture {
    height: auto;
  }

  .hero__imagem {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* O lockup não é o centro exato da ARTE: medido pixel a pixel no arquivo de
     3840x2160, o miolo do desenho (símbolo + "LARA MONTEIRO" + "ARQUITETA")
     vai de x=1187 a x=2514, centro em x=1850 — 70px à esquerda do centro real
     da tela (x=1920). Com `object-position: center` (herdado da regra base) o
     corte de 1:1 é simétrico em torno do centro da ARTE, não do DESENHO, e a
     marca nasce ~13px deslocada pra esquerda numa tela de 390px — reportado
     num aparelho real, print em mãos.

     O recorte de 1:1 sempre mostra a altura inteira (2160px) e corta só a
     largura, então a janela visível tem SEMPRE 2160px de largura, não importa
     o tamanho da tela — por isso um deslocamento fixo em % re-centraliza em
     qualquer largura de celular, não só na que foi medida.

     Conta: sobra de corte = 3840 − 2160 = 1680px. Corte-padrão (50%) começa em
     840px. Pra o centro do corte cair em 1850 (não 1920), o corte precisa
     começar em 1850 − 1080 = 770px → 770 / 1680 = 45,8%. */
  .hero__imagem {
    object-position: 45.8% center;
  }
}

.linha {
  display: block;
  overflow: hidden;
}

.linha__inner {
  display: block;
}

/* -- Cabeçalho de seção -------------------------------------------------------
   A sigla vive à ESQUERDA do título, na mesma faixa horizontal — não mais
   sozinha numa linha acima. A versão anterior empilhava sigla, título e apoio
   em três blocos separados por 6rem de respiro, e o resultado era uma coluna
   de texto boiando em ar: muito espaço vazio entre coisas que precisam ser
   lidas juntas. Agora sigla e título dividem a mesma linha de topo, e o
   parágrafo de apoio nasce logo abaixo do título, alinhado com ele. */

.secao-cabecalho {
  margin-bottom: var(--espaco-lg);
  display: grid;
  gap: var(--espaco-xs);
}

.secao-cabecalho__sigla {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-titulo-curto);
  text-transform: uppercase;
  color: var(--magenta);
}

/* Ponto de marcação antes da sigla: ancora a palavra e evita que ela pareça
   um título curto perdido na margem. */
.secao-cabecalho__sigla::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.secao-cabecalho--claro .secao-cabecalho__sigla {
  color: var(--rosa-tinte);
}

.secao-cabecalho__corpo {
  display: grid;
  gap: var(--espaco-xs);
}

@media (min-width: 900px) {
  .secao-cabecalho {
    grid-template-columns: minmax(8rem, 15ch) minmax(0, 1fr);
    gap: var(--espaco-md);
    align-items: start;
  }

  /* Desce a sigla até a altura-x da primeira linha do título ao lado. */
  .secao-cabecalho__sigla {
    padding-top: 0.5em;
  }
}

.secao-cabecalho__apoio {
  font-size: var(--fs-corpo-grande);
  max-width: 52ch;
  color: rgba(83, 33, 0, 0.78);
}

.secao-cabecalho--claro .secao-cabecalho__apoio,
.secao-cabecalho--claro .titulo-secao {
  color: var(--creme);
}

/* -- Manifesto ---------------------------------------------------------------
   Faixa curta de propósito. O padding é enxuto de propósito: é uma frase de
   efeito, não um bloco de leitura — sobrar ar em volta dela esvaziava a
   seção em vez de dar destaque.

   Media original: 418px de altura em 1440px de largura, com o texto sozinho
   quebrando em 5 linhas dentro de um `max-width` de 44rem. O selo entrou como
   segunda coluna (preenche o vazio à direita que a faixa tinha) e o padding
   e o tamanho de fonte encolheram — as duas coisas empurravam a altura,
   então corrigir só uma teria deixado a seção ainda alta. */

.manifesto {
  background: var(--vinho);
  color: var(--off-white);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.manifesto__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-lg);
}

.manifesto__texto {
  font-family: var(--fonte-display);
  font-weight: 300;
  /* Teto reduzido de 2,75rem para 2,15rem: é o principal responsável pela
     altura da faixa, mais até do que o padding.

     O PISO caiu de 1,35rem para 1,125rem. Medido em 375px: 21,6px de corpo
     davam **29 caracteres por linha** — linha curta demais, o olho volta pra
     esquerda a cada três palavras. Em 18px são cerca de 35, e a frase inteira
     cabe em menos altura.

     A curva foi refeita, não só o piso: o termo em vw sozinho já entregava
     20,4px em 375px, então baixar o piso quase não mudaria nada. A inclinação
     nova (1,87vw + 0,685rem) passa por 18px em 375 e encosta no teto de
     2,15rem na MESMA largura de antes, 1250px — conferido em 1440px, o corpo
     continua idêntico. */
  font-size: clamp(1.125rem, 1.87vw + 0.685rem, 2.15rem);
  letter-spacing: 0.01em;
  text-transform: none;
  max-width: 42rem;
  line-height: 1.32;
  /* O corpo menor mudou onde as linhas quebram e deixou UMA palavra sozinha na
     última: medido em 82px de tinta contra 335 de caixa. `pretty` não resolveu
     (subiu só pra 106px). `balance` iguala as cinco linhas — 213 a 261px, sem
     viúva, na mesma altura de 119px. Mesmo recurso que o `.cta-final h2` já
     usa; acima de seis linhas o navegador ignora sozinho e volta ao normal. */
  text-wrap: balance;
}

.manifesto__texto strong {
  font-weight: 500;
  color: var(--rosa-tinte);
}

/* O selo é ornamento de marca, não conteúdo: só aparece a partir de onde há
   coluna de sobra para ele sem apertar o texto. Abaixo disso, midia:none — a
   faixa continua curta, mas sem disputar espaço com a frase. */
.manifesto__selo {
  display: none;
  flex-shrink: 0;
}

.manifesto__selo img {
  display: block;
  width: clamp(5.5rem, 8vw, 7.5rem);
  height: auto;
  /* O selo em creme lê sobre o vinho com contraste alto — mais alto do que a
     versão em duas cores (magenta + marrom) que ele substituiu, cujo losango
     marrom quase se perdia no fundo escuro. Com esse contraste, 0,9 de
     opacidade (calibrado pra versão anterior) deixava o selo competindo com
     o texto; 0,7 mantém ele como assinatura, não como destaque. */
  opacity: 0.7;
}

@media (min-width: 700px) {
  .manifesto__selo {
    display: block;
  }
}

/* -- Projetos ----------------------------------------------------------------
   Trilho horizontal, não grade. Três projetos numa grade de três colunas
   ficam parados: cada cartão termina exatamente onde o vizinho começa, e a
   seção inteira se lê de uma vez só. No trilho, os cartões atravessam a borda
   da tela — sempre há algo entrando e algo saindo, e é isso que dá movimento
   a um portfólio curto.
   ---------------------------------------------------------------------------- */

.secao-projetos {
  position: relative;
  padding-block: var(--pad-secao);
  overflow: hidden;
}

/* Malha técnica de fundo, na opacidade de uma marca d'água de prancha.
   Desaparece nas bordas para não virar uma moldura. */
.secao-projetos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(83, 33, 0, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(83, 33, 0, 0.055) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 26%, transparent 76%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 26%, transparent 76%);
  pointer-events: none;
}

.secao-projetos > * {
  position: relative;
  z-index: 1;
}

/* -- Palco e marca d'água -- */

.palco {
  position: relative;
  margin-top: var(--espaco-lg);
}

/* A palavra atrás da cena dá profundidade e nomeia a seção sem gastar uma
   linha de texto.

   Duas medidas vêm de medição, não de palpite:

   LARGURA — "PROJETOS" ocupa 5,211em de largura nesta fonte, com este peso e
   este tracking. Para a palavra atravessar a tela inteira, o corpo precisa ser
   100 / 4,752 = 21,04vw — a conta é sobre a TINTA, não sobre a caixa: as
   laterais do "P" e do "S" têm folga dentro dela, e medir a caixa deixava
   a palavra 6% mais curta do que a tela. 21,1vw encosta nas duas bordas.
   Sem `clamp`: o objetivo é preencher a largura em QUALQUER tela, e um teto
   em rem deixaria sobra nas telas largas.

   ALTURA — fica ancorada na base da SEÇÃO (não do palco): é a borda inferior
   da seção que tem o `overflow: hidden`, então é ela que corta a palavra.
   -0,435em esconde 44% da altura da tinta, pouco menos da metade. O valor
   está em `em` de propósito: assim a proporção do corte não muda quando o
   corpo cresce ou encolhe com a largura da tela.

   O `margin-right` negativo cancela o tracking que sobra depois da última
   letra; sem ele o `translateX(-50%)` centraliza a caixa, e não a palavra. */
.secao-projetos__marca-dagua {
  position: absolute;
  left: 50%;
  bottom: -0.435em;
  transform: translateX(-50%);
  margin-right: -0.04em;
  z-index: 0;
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: 21.1vw;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--marrom);
  opacity: 0.07;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* -- Trilho -- */

.trilho {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--espaco-sm) var(--espaco-md);
}

.trilho::-webkit-scrollbar {
  display: none;
}

.js-enabled .trilho {
  cursor: grab;
}

.js-enabled .trilho.arrastando {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* O recuo acompanha o container: o primeiro cartão nasce alinhado com o
   título da seção, mesmo em telas mais largas que o container. */
.trilho__pista {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 1.8vw, 2.25rem);
  padding-inline-start: max(
    var(--margem-viewport),
    (100% - var(--container-max)) / 2 + var(--margem-viewport)
  );
}

/* O recuo final precisa ser um item de verdade, não padding: navegador
   nenhum garante que o padding-inline-end de um flex container entre na
   área rolável, e sem ele o último cartão encosta na borda da tela. */
.trilho__pista::after {
  content: "";
  flex: 0 0 auto;
  width: max(var(--margem-viewport), (100% - var(--container-max)) / 2 + var(--margem-viewport));
  align-self: stretch;
}

.trilho__item {
  flex: 0 0 clamp(16rem, 29vw, 28rem);
  scroll-snap-align: center;
}

/* Escalonamento vertical. Sem ele o trilho vira uma régua.

   Só a partir de 700px: o escalonamento é um ritmo que se lê quando três
   cartões aparecem juntos. Em 375px só um cartão cabe na tela, e o de índice
   par entrava 20px mais baixo que o anterior — sem vizinho pra comparar, isso
   não lê como ritmo, lê como cartão desalinhado. */
@media (min-width: 700px) {
  .trilho__item:nth-child(even) {
    margin-top: clamp(1.25rem, 4vw, 3.5rem);
  }
}

/* -- Cartão -- */

.cartao__link {
  display: grid;
  gap: var(--espaco-xs);
  text-decoration: none;
  color: inherit;
}

/* Quadrado, e não retrato. Todos os renders de origem são 16/9: um cartão em
   4/5 descartaria mais da metade da largura da fachada, que é justamente o
   que a imagem existe para mostrar. O quadrado é o recorte mais generoso que
   ainda dá presença vertical ao cartão. */
.cartao__midia {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-lg);
  aspect-ratio: 1 / 1;
  background: var(--off-white);
  box-shadow: 0 16px 36px -26px var(--sombra-card);
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* <picture> nasce inline e sem altura própria: sem isto o `height: 100%` da
   imagem não tem contra o que resolver e a foto ocupa só a faixa 16/9 no
   topo do cartão. */
.cartao__midia picture {
  display: block;
  width: 100%;
  height: 100%;
}

.cartao__link:hover .cartao__midia,
.cartao__link:focus-visible .cartao__midia {
  transform: translateY(-10px);
  box-shadow: 0 38px 64px -38px rgba(83, 33, 0, 0.48);
}

.cartao__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.cartao__link:hover .cartao__imagem,
.cartao__link:focus-visible .cartao__imagem {
  transform: scale(1.07);
}

/* Etiquetas: tipologia e cidade, legíveis sobre qualquer render porque a
   pílula carrega o próprio fundo. */
.cartao__etiquetas {
  position: absolute;
  top: var(--espaco-xs);
  left: var(--espaco-xs);
  right: var(--espaco-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  z-index: 2;
}

.cartao__etiquetas span {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--marrom);
  background: rgba(255, 251, 245, 0.92);
  backdrop-filter: blur(10px);
  border-radius: var(--raio-arco);
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
}

.cartao__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(83, 33, 0, 0.9) 0%,
    rgba(83, 33, 0, 0.4) 46%,
    rgba(83, 33, 0, 0.05) 100%
  );
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* A tese só aparece no hover: em repouso o cartão é a foto, e é a foto que
   convence primeiro. */
.cartao__tese {
  position: absolute;
  left: var(--espaco-xs);
  right: var(--espaco-xs);
  bottom: var(--espaco-xs);
  z-index: 2;
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.15rem);
  line-height: 1.3;
  color: var(--creme);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.cartao__link:hover .cartao__veu,
.cartao__link:focus-visible .cartao__veu,
.cartao__link:hover .cartao__tese,
.cartao__link:focus-visible .cartao__tese {
  opacity: 1;
}

.cartao__link:hover .cartao__tese,
.cartao__link:focus-visible .cartao__tese {
  transform: none;
}

/* Lente que segue o cursor dentro do cartão. O deslocamento vem do JS em
   --lente-x / --lente-y; sem JS ela simplesmente fica no centro. */
.cartao__lente {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 5.25rem;
  height: 5.25rem;
  margin: -2.625rem 0 0 -2.625rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--magenta);
  color: var(--creme);
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--lente-x, 0px), var(--lente-y, 0px)) scale(0.55);
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.cartao__link:hover .cartao__lente,
.cartao__link:focus-visible .cartao__lente {
  opacity: 1;
  transform: translate(var(--lente-x, 0px), var(--lente-y, 0px)) scale(1);
}

/* Enquanto o dedo arrasta o trilho, nenhuma lente deve piscar sob o cursor. */
.trilho.arrastando .cartao__lente,
.trilho.arrastando .cartao__veu,
.trilho.arrastando .cartao__tese {
  opacity: 0;
}

.cartao__legenda {
  display: grid;
  gap: 0.3rem;
  padding-inline: 0.25rem;
}

.cartao__indice {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: var(--tracking-titulo-curto);
  color: var(--magenta);
}

.cartao__nome {
  font-size: clamp(1.1rem, 0.9vw + 0.85rem, 1.45rem);
  letter-spacing: 0.08em;
  color: var(--marrom);
  transition: color var(--dur-fast) var(--ease-out);
}

.cartao__link:hover .cartao__nome,
.cartao__link:focus-visible .cartao__nome {
  color: var(--vinho);
}

.cartao__meta {
  font-size: var(--fs-legenda);
  color: rgba(83, 33, 0, 0.65);
}

.cartao__meta span {
  margin-inline: 0.35em;
}

/* -- Cartão-convite (fecha o trilho) --------------------------------------

   O cartão é um QUADRADO cujo lado é `clamp(16rem, 29vw, 28rem)` — preso no
   piso de 256px em QUALQUER viewport até ~883px, e só then começa a crescer.
   O padding e as fontes do conteúdo, porém, usavam tokens em `vw` — pensados
   pra crescer junto com o VIEWPORT, não com o CARTÃO. Nessa faixa (256px de
   cartão, viewport subindo até 883px) o padding e as fontes cresciam sem que
   o cartão ganhasse um pixel a mais de espaço: o conteúdo, que já entalava
   38em 390px, media 316,8px de altura em 882px de viewport — 60,8px maior
   que os 256px do cartão, quase um quarto da própria altura dele. Um bug
   sério, e mais grave que o do print (que era só o piso, em 390px).

   A correção certa é medir o cartão, não o viewport: `container-type:
   inline-size` no `.cartao__midia` transforma sua LARGURA num container-de-
   consulta, e o padding e as fontes abaixo passam a usar `cqi` (1% da
   largura do CONTAINER) em vez de `vw`. Resultado: enquanto o cartão está no
   piso de 256px — a esmagadora maioria dos aparelhos — padding e fonte
   ficam TRAVADOS no valor mínimo, porque a matemática abaixo é calibrada pra
   só começar a crescer a partir de 256px de container. Só crescem de
   verdade quando o cartão em si cresce (telas largas, >883px de viewport). */

.cartao--convite .cartao__midia {
  background: linear-gradient(155deg, var(--marrom) 0%, var(--vinho) 100%);
  display: grid;
  align-items: end;
  container-type: inline-size;
}

/* Padding: 28px (piso) a 256px de container, 40px (teto) a 448px — os
   mesmos limites de --espaco-md, só que amarrados ao cartão. Conta:
   28 = 0,0625×256 + 12  |  40 = 0,0625×448 + 12  →  0,75rem + 6,25cqi.

   (Aqui vale registrar um erro que passou pela primeira medição: a conta do
   título, embaixo, resolve pra 3,75cqi porque o alvo dele é outro (1,35rem a
   1,8rem, não 1,75rem a 2,5rem) — copiei o coeficiente errado na primeira
   tentativa, e só a medição em 1600px pegou: o padding parou em 28,8px no
   teto do cartão, não nos 40px pretendidos.) */
.cartao__convite {
  display: grid;
  gap: var(--espaco-2xs);
  padding: clamp(1.75rem, 0.75rem + 6.25cqi, 2.5rem);
  color: var(--creme);
}

.cartao__convite .cartao__indice {
  color: var(--rosa-tinte);
}

/* Título: mesma lógica, presa aos limites originais (1,35rem–1,8rem) mas
   amarrada ao container: 21,6 = 0,75rem + 3,75cqi a 256px de container;
   28,8 = 0,75rem + 3,75cqi a 448px. */
.cartao__convite-titulo {
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 0.75rem + 3.75cqi, 1.8rem);
  line-height: 1.2;
  /* Sem margin-top próprio: o `gap` do grid pai já abre --espaco-2xs entre
     índice e título. Os dois juntos dobravam a folga (16px medidos, contra
     8px pretendidos) — foi um dos itens que fazia o cartão entalar. */
}

/* Apoio: `--fs-legenda` (0,875rem–0,9375rem) reescrito com a mesma conta,
   presa ao container em vez do viewport: 14 = 0,79rem + 0,52cqi a 256px;
   15 = 0,79rem + 0,52cqi a 448px.

   `line-height: 1.65` (herdado do corpo do site) é pensado pra parágrafo
   longo, não pra legenda de 4 linhas dentro de um cartão apertado: a 14px de
   fonte, cada linha ocupava 23,1px. Em 1,4 — ainda confortável pra leitura —
   cada linha cai pra ~19,6px; nas quatro linhas do texto, são ~14px
   recuperados. */
.cartao__convite-apoio {
  font-size: clamp(0.875rem, 0.79rem + 0.52cqi, 0.9375rem);
  line-height: 1.4;
  color: rgba(249, 239, 225, 0.76);
  max-width: 26ch;
}

/* `justify-content: center` centraliza só esta linha (texto + seta) — título
   e apoio continuam alinhados à esquerda, de propósito: é a "ação" que deve
   ler como botão dentro do cartão, não o texto de apoio acima dela. */
.cartao__convite-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* --espaco-2xs, não --espaco-xs: mesmo depois de travar padding e fontes
     ao container, ainda sobravam alguns pixels de conteúdo vazando por baixo
     do cartão no piso de 256px (medido). Reduzir esta margem em 8px fecha a
     conta — o espaço que sobra é embaixo da ação, contra a borda, que é onde
     o print pedia respiro; aqui em cima o apoio continua com uma folga real. */
  margin-top: var(--espaco-2xs);
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-titulo-curto);
  text-transform: uppercase;
  color: var(--rosa-tinte);
}

.cartao__convite-acao svg {
  transition: transform var(--dur-fast) var(--ease-out);
}

.cartao--convite .cartao__link:hover .cartao__convite-acao svg {
  transform: translateX(6px);
}

/* -- Controles do trilho -- */

/* Dica e barra formam um par à esquerda; os botões ficam isolados à direita.
   A barra tem largura fixa de propósito: esticada de ponta a ponta ela lia
   como um filete divisor de seção, não como indicador de posição. */
.trilho__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  margin-top: var(--espaco-sm);
  position: relative;
}

.trilho__dica {
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: var(--fs-legenda);
  letter-spacing: var(--tracking-titulo-curto);
  text-transform: uppercase;
  color: rgba(83, 33, 0, 0.5);
  white-space: nowrap;
}

.trilho__progresso {
  flex: 0 1 11rem;
  margin-right: auto;
  height: 2px;
  border-radius: var(--raio-arco);
  background: rgba(83, 33, 0, 0.14);
  overflow: hidden;
}

.trilho__progresso span {
  display: block;
  height: 100%;
  width: 18%;
  border-radius: inherit;
  background: var(--magenta);
  transition: width 140ms linear;
}

/* Sem JS os botões não fazem nada — o trilho continua rolável no dedo e na
   roda do mouse, então eles simplesmente não existem nesse cenário. */
.trilho__botoes {
  display: none;
  gap: 0.5rem;
}

.js-enabled .trilho__botoes {
  display: flex;
}

.trilho__botao {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  border: 1px solid rgba(83, 33, 0, 0.22);
  display: grid;
  place-items: center;
  color: var(--marrom);
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.trilho__botao:hover:not([disabled]) {
  background: var(--marrom);
  border-color: var(--marrom);
  color: var(--creme);
}

.trilho__botao[disabled] {
  opacity: 0.28;
  cursor: default;
}

@media (max-width: 640px) {
  .trilho__dica {
    display: none;
  }
}

/* No toque não existe hover: a tese e a lente ficariam inalcançáveis, então
   a tese entra fixa no rodapé da foto e a lente sai de cena. */
@media (hover: none) {
  .cartao__veu,
  .cartao__tese {
    opacity: 1;
    transform: none;
  }

  .cartao__veu {
    background: linear-gradient(
      to top,
      rgba(83, 33, 0, 0.82) 0%,
      rgba(83, 33, 0, 0.22) 42%,
      rgba(83, 33, 0, 0) 72%
    );
  }

  .cartao__lente {
    display: none;
  }
}

/* -- Página de categoria ------------------------------------------------------
   Reaproveita `.secao-projetos`, `.palco`, `.trilho` e `.cartao` sem nenhuma
   variação: aqui só entram os dois elementos que não existem na home — o
   caminho de volta e o atalho para as outras frentes. */

/* A página de categoria não tem capa: o header já nasce com fundo, então a
   seção precisa da folga que na home vem da altura da capa. */
.secao-projetos--categoria {
  padding-top: clamp(6rem, 10vw, 9rem);
}

/* A sigla da seção vira o caminho de volta. Mantém o ponto de marcação do
   padrão, e a seta é o que anuncia que ali se clica. */
.voltar {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.voltar::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.5em;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  transition: transform var(--dur-fast) var(--ease-out);
}

.voltar:hover {
  color: var(--vinho);
}

.voltar:hover::after {
  transform: rotate(45deg) translate(-0.15em, 0.05em);
}

/* Atalho para as outras frentes: evita obrigar a voltar à home para trocar
   de categoria. Fica no fim da seção, depois do trilho. */
.outras-frentes {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--espaco-sm);
  margin-top: var(--espaco-lg);
  padding-top: var(--espaco-md);
  border-top: 1px solid rgba(83, 33, 0, 0.16);
}

@media (min-width: 700px) {
  .outras-frentes {
    grid-template-columns: minmax(8rem, 15ch) minmax(0, 1fr);
    gap: var(--espaco-md);
    align-items: baseline;
  }
}

.outras-frentes__rotulo {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-titulo-curto);
  text-transform: uppercase;
  color: var(--magenta);
}

.outras-frentes__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-sm) var(--espaco-md);
}

.outras-frentes__lista a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.2vw + 0.8rem, 1.6rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--marrom);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.outras-frentes__lista a span {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--tracking-titulo-curto);
  text-transform: uppercase;
  color: rgba(83, 33, 0, 0.5);
}

.outras-frentes__lista a:hover {
  color: var(--vinho);
  border-color: var(--magenta);
}

/* -- Sobre --------------------------------------------------------------------
   Mesmo vocabulário da seção de projetos: malha técnica ao fundo, palavra em
   marca d'água cortada pela borda inferior, cabeçalho apertado, etiquetas
   sobre a foto e uma ficha em fios capilares fechando o bloco.

   O arco no topo do retrato saiu. Ele era uma citação da marca, mas somado às
   etiquetas e à malha técnica virava dois vocabulários na mesma cena — a foto
   passou a ser tratada como os cartões do trilho, com o mesmo raio.
   ---------------------------------------------------------------------------- */

.secao-sobre {
  position: relative;
  overflow: hidden;
  padding-block: var(--pad-secao);
  background: var(--off-white);
}

.secao-sobre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(83, 33, 0, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(83, 33, 0, 0.055) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 26%, transparent 76%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 26%, transparent 76%);
  pointer-events: none;
}

.secao-sobre > .container {
  position: relative;
  z-index: 1;
}

/* Mesma calibragem da marca d'água de projetos, refeita para esta palavra.
   "ARQUITETA" tem nove letras e uma tinta de 5,359em, contra 4,751em de
   "PROJETOS" — logo `100 / 5,359 = 18,66vw` para encostar nas duas bordas.
   O `bottom` também é outro: em `em`, o mesmo valor daria um corte diferente,
   porque o corpo aqui é menor. -0,42em iguala os 45% de corte da outra. */
.secao-sobre__marca-dagua {
  position: absolute;
  left: 50%;
  bottom: -0.42em;
  transform: translateX(-50%);
  margin-right: -0.04em;
  z-index: 0;
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: 18.66vw;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--marrom);
  opacity: 0.06;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.sobre__grid {
  display: grid;
  gap: var(--espaco-lg);
  align-items: start;
}

@media (min-width: 900px) {
  .sobre__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--espaco-xl);
  }
}

/* -- Retrato -- */

.sobre__retrato {
  margin: 0;
  width: 100%;
  max-width: 26rem;
  justify-self: center;
  /* A moldura de registro é um ::before ancorado aqui. Sem esta linha ela se
     ancorava no .container e nascia com o tamanho da seção inteira — um
     retângulo de 1400x1000 atravessando o bloco. */
  position: relative;
}

/* Moldura de registro: um fio deslocado atrás da foto, no lugar do bloco de
   cor chapado que existia antes. Conversa com a malha técnica em vez de
   competir com ela. */
.sobre__quadro {
  position: relative;
  border-radius: var(--raio-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 16px 36px -26px var(--sombra-card);
}

.sobre__retrato::before {
  --recuo: min(var(--espaco-sm), var(--margem-viewport));
  content: "";
  position: absolute;
  top: var(--espaco-sm);
  left: var(--espaco-sm);
  right: calc(var(--recuo) * -1);
  /* A figure é mais alta que a foto (leva a linha de créditos embaixo), então
     a moldura não pode se medir por ela: repete a proporção do quadro e a
     altura sai certa em qualquer largura. */
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(180, 120, 99, 0.5);
  border-radius: var(--raio-lg);
  z-index: -1;
}

.sobre__quadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.sobre__retrato:hover .sobre__quadro img {
  transform: scale(1.04);
}

/* Etiquetas idênticas às dos cartões de projeto: a pílula carrega o próprio
   fundo, então lê sobre qualquer parte da foto. */
.sobre__etiquetas {
  position: absolute;
  top: var(--espaco-xs);
  left: var(--espaco-xs);
  right: var(--espaco-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  z-index: 2;
}

.sobre__etiquetas span {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--marrom);
  background: rgba(255, 251, 245, 0.92);
  backdrop-filter: blur(10px);
  border-radius: var(--raio-arco);
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
}

/* Assinatura e @ dividem a linha sob a foto, como o crédito de uma imagem.

   O deslocamento da moldura (::before) empurra o fio dela --espaco-sm abaixo
   do quadro. Um margin-top de --espaco-sm igualava esse valor e zerava a
   folga: o fio terminava exatamente onde o texto começava, sem respiro
   nenhum entre os dois — foi medido em 0px. Agora o total soma o
   deslocamento da moldura (para o fio nunca tocar o texto) mais uma folga
   de verdade por cima dele. */
.sobre__creditos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  margin-top: calc(var(--espaco-sm) + var(--espaco-xs));
}

.sobre__assinatura {
  display: block;
  height: 1.25rem;
  width: auto;
}

/* `align-items: center`, não `flex-end`. No mobile este link ganha
   `min-height: 44px` de alvo de toque (ver a media query dos alvos de
   toque), e com `flex-end` o texto se colava na base dessa caixa alta —
   medido: o "@" nascia 12,5px abaixo do centro do logo ao lado, claramente
   desalinhado. Com `center`, o texto centraliza na própria caixa (de
   qualquer altura, 44px ou natural) e passa a bater exatamente com o centro
   do `.sobre__assinatura`, que o `.sobre__creditos` pai já alinha por
   `align-items: center`. */
.sobre__creditos a {
  display: inline-flex;
  align-items: center;
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: var(--tracking-titulo-curto);
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(83, 33, 0, 0.55);
  transition: color var(--dur-fast) var(--ease-out);
}

.sobre__creditos a:hover {
  color: var(--magenta);
}

/* -- Texto -- */

.sobre__texto p {
  font-size: var(--fs-corpo-grande);
  color: rgba(83, 33, 0, 0.82);
}

.sobre__texto p + p {
  margin-top: var(--espaco-sm);
}

/* Citação de abertura da coluna, com o fio à esquerda que a separa do texto
   corrido sem precisar de aspas. */
.sobre__destaque {
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 1.8vw + 1rem, 2.15rem) !important;
  line-height: 1.28;
  color: var(--vinho) !important;
  max-width: 24ch;
  padding-left: var(--espaco-sm);
  border-left: 2px solid var(--magenta);
  margin-bottom: var(--espaco-md);
}

/* -- Ficha -- */

.sobre__ficha {
  margin: var(--espaco-xl) 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(83, 33, 0, 0.16);
}

@media (min-width: 800px) {
  .sobre__ficha {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espaco-lg);
  }
}

.sobre__ficha-item {
  display: grid;
  gap: var(--espaco-2xs);
  padding-block: var(--espaco-sm);
  border-bottom: 1px solid rgba(83, 33, 0, 0.08);
}

@media (min-width: 800px) {
  .sobre__ficha-item {
    border-bottom: 0;
  }
}

.sobre__ficha dt {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: var(--tracking-titulo-curto);
  text-transform: uppercase;
  color: var(--magenta);
}

.sobre__ficha dd {
  margin: 0;
  font-size: var(--fs-corpo);
  color: var(--marrom);
}

/* -- Processo ------------------------------------------------------------------ */

.secao-processo {
  padding-block: var(--pad-secao);
  background: var(--marrom);
  color: var(--creme);
}

.processo {
  display: grid;
  gap: var(--espaco-sm);
  counter-reset: etapa;
}

@media (min-width: 768px) {
  .processo {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Cinco etapas, uma coluna cada — é o método completo da arquiteta, do
   briefing ao detalhamento, e quebrar a fileira esconderia essa leitura.
   Em compensação a coluna fica estreita: o respiro interno e o número
   encolhem junto, senão sobra moldura e falta linha de texto. */
@media (min-width: 1200px) {
  .processo {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--espaco-xs);
  }

  .processo__etapa {
    padding: var(--espaco-sm);
    gap: var(--espaco-xs);
  }

  .processo__numero {
    font-size: 2.75rem;
  }
}

.processo__etapa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  padding: var(--espaco-md);
  border-radius: var(--raio-md);
  background: rgba(249, 239, 225, 0.05);
  border: 1px solid rgba(249, 239, 225, 0.12);
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* Barra de progresso que se preenche quando a etapa entra no viewport. */
.processo__etapa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--magenta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-in-out);
}

.processo__etapa.em-vista::before {
  transform: scaleX(1);
}

.processo__etapa:hover {
  background: rgba(249, 239, 225, 0.09);
  border-color: rgba(249, 239, 225, 0.25);
  transform: translateY(-4px);
}

.processo__numero {
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 3vw + 1rem, 3.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--rosa-antigo);
  transition: color var(--dur-base) var(--ease-out);
}

/* No mobile o número deixa o fluxo e vira marca d'água no canto do cartão.

   Ele é decoração — contorno vazado, `aria-hidden`, sem texto pra ler. Mas
   MEDIA 40px de altura mais 24 de gap dentro de uma coluna única: 64px por
   etapa, 320px nas cinco, só de ornamento empilhado acima do título. Em
   posição absoluta a mesma marca continua visível e devolve essas 320px à
   navegação. */
@media (max-width: 767px) {
  .processo__etapa {
    position: relative;
    gap: 0;
  }

  /* O número tem que caber na FAIXA DO TÍTULO, não só no canto. Na primeira
     tentativa ele ficou com 3,25rem (52px de altura) contra uma linha de
     título de 20px: sobrava metade do numeral descendo sobre a primeira linha
     do parágrafo, e a colisão foi medida em 4 das 5 etapas. Em 2,25rem ele
     mede 36px e a base dele fecha acima de onde o parágrafo começa. */
  .processo__numero {
    position: absolute;
    top: calc(var(--espaco-md) - 0.6em);
    right: var(--espaco-md);
    font-size: 2.25rem;
    pointer-events: none;
  }

  /* Abre caminho pro número no canto: sem isso o título passa por baixo dele.
     3,25em em cima de 1rem = 52px, contra os ~46px do numeral mais largo. */
  .processo__corpo h3 {
    padding-right: 3.25em;
  }
}

.processo__etapa.em-vista .processo__numero {
  color: rgba(209, 101, 115, 0.18);
}

.processo__corpo h3 {
  font-size: 1rem;
  letter-spacing: var(--tracking-titulo-secao);
  color: var(--creme);
}

.processo__corpo p {
  margin-top: var(--espaco-2xs);
  color: rgba(249, 239, 225, 0.78);
  font-size: var(--fs-corpo);
}

/* -- Serviços -------------------------------------------------------------------- */

.secao-servicos {
  padding-block: var(--pad-secao);
}

/* São sete serviços — número ímpar, e nenhum grid de colunas iguais fecha
   sete sem deixar buraco. O último cartão estica para ocupar o que sobra da
   última linha, em cada quantidade de colunas. */
.grid-servicos {
  display: grid;
  gap: var(--espaco-sm);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Duas colunas, não três. Em três, a 768px cada cartão ficava com 134px de
   texto útil depois do respiro interno — menos do que "ACOMPANHAMENTO" mede
   em caixa alta com o tracking da marca. A palavra não tem onde quebrar,
   estourava o cartão e empurrava a página inteira 18px para o lado. */
@media (min-width: 700px) and (max-width: 1199px) {
  .grid-servicos {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 2 + 2 + 2 + o sétimo tomando a linha inteira. */
  .card-servico:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .grid-servicos {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 4 + 2 + o sétimo cobrindo as duas colunas restantes. */
  .card-servico:last-child {
    grid-column: span 2;
  }
}

.card-servico {
  padding: var(--espaco-md);
  background: var(--off-white);
  border-radius: var(--raio-md);
  border: 1px solid rgba(180, 120, 99, 0.28);
  transition: transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.card-servico:hover {
  transform: translateY(-5px);
  border-color: var(--terracota);
  box-shadow: 0 14px 34px rgba(83, 33, 0, 0.12);
}

.card-servico h3 {
  font-size: 0.95rem;
  letter-spacing: var(--tracking-titulo-secao);
  color: var(--vinho);
  /* Rede de segurança: título de serviço é palavra única e longa em caixa
     alta. Sem isto, uma coluna estreita demais volta a estourar a página. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.card-servico p {
  margin-top: var(--espaco-xs);
}

/* -- CTA final --------------------------------------------------------------
   Duas colunas: texto à esquerda, o mockup da proposta à direita, centrado
   verticalmente na própria coluna. Fundo creme — o mesmo do resto do site e
   da moldura ao redor do monitor no mockup, então a emenda entre seção e
   imagem fica invisível. Texto em marrom/vinho: as únicas duas cores da
   paleta aprovadas pra qualquer tamanho sobre creme (11,65:1 e 9,79:1). */

.cta-final {
  background: var(--creme);
  padding-block: var(--pad-secao);
}

.cta-final__grid {
  display: grid;
  gap: var(--espaco-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-final__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

.cta-final__texto .secao-cabecalho__sigla {
  margin-bottom: var(--espaco-xs);
}

/* Sem trava em `ch`: a unidade mede o "0" da fonte, e em caixa alta com
   tracking cada letra é bem mais larga que isso — o limite de 16ch picava a
   chamada em quatro linhas de duas palavras. Quem define a medida aqui é a
   própria coluna do grid. */
.cta-final h2 {
  font-size: clamp(1.65rem, 2.4vw + 0.9rem, 2.6rem);
  letter-spacing: var(--tracking-titulo-capa);
  text-wrap: balance;
  color: var(--marrom);
}

.cta-final p {
  margin-top: var(--espaco-xs);
  font-size: var(--fs-corpo-grande);
  color: var(--vinho);
  max-width: 34ch;
}

.cta-final .btn {
  margin-top: var(--espaco-md);
}

.cta-final__mockup {
  margin: 0;
}

.cta-final__mockup img {
  display: block;
  width: 100%;
  height: auto;
}

/* -- Footer -------------------------------------------------------------------- */

.footer {
  background: var(--marrom);
  color: var(--creme);
  padding-block: var(--espaco-xl) var(--espaco-md);
}

.footer__grid {
  display: grid;
  gap: var(--espaco-lg);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* O lockup vertical já termina na palavra "Arquiteta". A frase precisa de um
   respiro maior que o padrão para não parecer uma quarta linha do logo, e de
   uma medida de linha curta para acompanhar a largura do lockup. */
.footer__marca img {
  width: 7.5rem;
  height: auto;
}

/* No mobile o rodapé é uma coluna só, e aí a marca ganha o eixo central: o
   lockup é uma composição simétrica (símbolo sobre o nome sobre "arquiteta"),
   então encostado na margem esquerda de uma coluna de 335px ele lê como
   desalinhado, não como alinhado. A frase acompanha o lockup — ela tem
   `max-width: 26ch`, então centralizar o texto sem centralizar a CAIXA
   deixaria o bloco fora do eixo.

   Vale só abaixo de 768px: acima disso o rodapé volta a três colunas e a
   marca é a primeira delas, onde o eixo é a margem esquerda. */
@media (max-width: 767px) {
  .footer__marca {
    text-align: center;
  }

  .footer__marca img,
  .footer__marca p {
    margin-inline: auto;
  }
}

.footer__marca p {
  margin-top: var(--espaco-md);
  max-width: 26ch;
  font-size: var(--fs-legenda);
  line-height: 1.7;
  color: rgba(249, 239, 225, 0.72);
}

.footer h3 {
  font-size: 0.8rem;
  letter-spacing: var(--tracking-titulo-secao);
  color: var(--rosa-tinte);
  margin-bottom: var(--espaco-xs);
}

.footer a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding-block: 0.25rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer a:hover,
.footer a:focus-visible {
  color: var(--rosa-antigo);
}

.footer__base {
  margin-top: var(--espaco-lg);
  padding-top: var(--espaco-md);
  border-top: 1px solid rgba(249, 239, 225, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espaco-xs);
  font-size: var(--fs-legenda);
  color: rgba(249, 239, 225, 0.65);
}

/* ==========================================================================
   ALVOS DE TOQUE — só onde existe toque
   --------------------------------------------------------------------------
   Nove links e botões MEDIAM menos de 44px de altura no celular, o mínimo
   recomendado de alvo de toque. Medidas em 375px, antes:

     hambúrguer ................. 26x20   (o pior: navegação principal)
     "Ver todos os projetos" .... 22px
     "voltar" (frente) .......... 23px
     @laraomont_ (Sobre) ........ 18px
     links do rodapé ............ 34px
     atalhos de outras frentes .. 31px
     índice da prancha .......... 37px
     links do menu mobile ....... 40px
     CTA do header .............. 40px

   Tudo aqui é `min-height` com o alinhamento preservado: a caixa cresce, o
   texto não sai do lugar. E fica FECHADO nesta media query de propósito —
   com mouse, 22px se acerta sem esforço, e deixar as regras soltas mudava a
   altura do rodapé, do índice grudento e do header no desktop, que já
   estavam calibrados. */
@media (max-width: 899px) {
  .header__marca,
  .voltar,
  .outras-frentes__lista a,
  .sobre__creditos a {
    min-height: 44px;
  }

  /* O rodapé é a exceção, e é uma escolha consciente. Com 44px cada link de
     contato ficava com 8,8px de ar em cima e 8,8 embaixo de uma linha de
     26,4px — os links são adjacentes (vão entre eles MEDIDO em 0), então esse
     ar virava 17,6px de distância visual entre o WhatsApp e o e-mail, e a
     lista lia como três itens soltos em vez de um bloco de contato.

     36px aproxima os três em 24px no total e continua **bem acima do mínimo
     de 24px que a WCAG 2.5.8 pede em AA** — 44px é a recomendação AAA (e da
     Apple), não o requisito. Aqui são três links empilhados, com rótulo
     próprio e nenhum alvo vizinho para acertar por engano. */
  .footer a {
    min-height: 36px;
  }

  /* O rótulo desce junto: 16px entre "CONTATO" e o primeiro link é folga de
     coluna de desktop. Com a lista mais junta, aquele vão passava a ser o
     maior espaço do bloco e o rótulo lia como solto do que ele nomeia. */
  .footer h3 {
    margin-bottom: var(--espaco-2xs);
  }
}