/* ============================================================
   Gabriel Tolentino Advocacia · direção Meridiano
   Paleta e tipografia vêm do MANUAL DE IDENTIDADE VISUAL do escritório
   (dados/GTA - IDENTIDADE VISUAL estudo.pdf). Não improvisar cor aqui.
   Sistema completo em DESIGN.md.
   ============================================================ */

:root {
  /* ---- cor: os quatro valores são os do manual, com Pantone ao lado ---- */
  --tinta:      #1F1A17;   /* Process Black C · RGB 31 26 23 · terra escura */
  --marinho:    #203582;   /* Pantone 2738 C · RGB 32 53 130 · segurança e determinação */
  --ouro:       #D8A131;   /* Pantone 136 C  · RGB 216 161 49 · qualidade e conquista */
  --azul-claro: #C7D4E4;   /* Pantone 538 C  · RGB 199 212 228 · honestidade e lealdade */
  --cinza:      #A09F9F;   /* Cool Gray 7 C  · RGB 160 159 159 */
  --branco:     #FFFFFF;

  /* degraus derivados, só onde o manual não dita: superfícies e fios */
  --tinta-2:    #2A2420;                        /* cartão sobre o escuro */
  --marinho-2:  #182A68;                        /* marinho mais fundo, para faixa */
  --fio-ouro:   rgba(216, 161, 49, 0.26);
  --fio-claro:  rgba(31, 26, 23, 0.14);
  --fio-escuro: rgba(199, 212, 228, 0.16);

  /* ---- tipo ----
     O manual especifica Andalus (assinatura) e Times New Roman (símbolo).
     A Andalus é a fonte real do cliente, subsetada para o latim logo abaixo.
     O display usa Spectral porque o Times de sistema é fraco em corpo grande:
     desvio consciente, registrado no DESIGN.md. */
  --display: 'Spectral', 'Times New Roman', Georgia, serif;
  --corpo:   'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --assinatura: 'Andalus', 'Times New Roman', Georgia, serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --largura: 74rem;
  --secao: clamp(4rem, 10vh, 7.5rem);
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* A assinatura do escritório é Andalus, a fonte que o manual especifica.
   O arquivo do cliente foi subsetado para o latim: 111 KB de TTF viraram
   5,7 KB de woff2, porque os glifos árabes do original não são usados aqui. */
@font-face {
  font-family: 'Andalus';
  src: url('fonts/andalus-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--branco);
  font-family: var(--corpo);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 2px; }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ouro); color: var(--tinta);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
}
.pular:focus { left: 0; }

/* ============================================================
   Quebra de texto. `balance` iguala as linhas de título; `pretty` evita
   palavra órfã no fim de parágrafo.

   Sem `hyphens: auto`: testado no estreito, a hifenização do português
   quebrava nome próprio ("Sete La-goas", "Portu-gal"), o que num site de
   escritório lê pior que a linha curta que ela tentava consertar.

   `nowrap` é sempre pontual, nunca em coletivo de span: quando apliquei em
   todos os span do rodapé, a razão social inteira ficou sem poder quebrar e
   transbordou 23px em 390 de largura.
   ============================================================ */

/* Títulos quebram só quando não cabem. Sem balance: ele partia frase no meio
   da ideia ("Minas, dois / pontos de apoio") para IGUALAR as linhas. `pretty`
   não iguala nada, só evita palavra órfã na última linha ("... na / Europa."). */
h1, .h2 { text-wrap: pretty; }
h3 { text-wrap: balance; }
p, li, dd  { text-wrap: pretty; }
.hero-eyebrow { white-space: nowrap; }

/* Parágrafos de leitura são JUSTIFICADOS (pedido do Diego, 2026-07-27, no
   lugar dos <span> de quebra por oração, que foram todos removidos): a linha
   preenche a coluna inteira e o rag irregular deixa de existir. Sem
   `hyphens: auto` junto, que já quebrou nome próprio aqui. Título e rótulo
   ficam fora: justificar linha curta abre buraco entre palavras. */
.chamada, .hero-sub, .frente p, .marco p { text-align: justify; }

/* Justificação exige coluna larga. Medido: abaixo de ~350px de coluna, sem
   hifenização, o espaço não tem onde se diluir e abre rio ("Documento
   estrangeiro,   tradução"). Por isso os cards de área e de praça (~280px)
   ficam à esquerda SEMPRE, e o resto volta à esquerda no viewport estreito. */
@media (max-width: 40rem) {
  .chamada, .hero-sub, .frente p, .marco p { text-align: left; }
}

/* ---------- utilidades ---------- */

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

.envelope {
  width: 100%; max-width: var(--largura);
  margin-inline: auto; padding-inline: var(--gutter);
}

.rotulo {
  font-family: var(--mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 1.5rem;
  display: flex; align-items: center; gap: 0.875rem;
}
.rotulo::after { content: ''; flex: 1; height: 1px; background: var(--fio-ouro); }

.h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem);
  line-height: 1.14; letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}

/* Sem max-width próprio (pedido do Diego): a chamada corre até o limite da
   seção. Quem limita a linha é o envelope, não um teto em ch que fazia o
   texto quebrar antes de bater na largura da seção. */
.chamada {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  color: var(--azul-claro);
  margin: 0;
}

/* ---------- cabeçalho, agora com a logo de verdade ---------- */

.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.875rem var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--curva), border-color 0.4s var(--curva);
}

/* PISO DE ESCURO DO CABEÇALHO. Não é enfeite, é o que faz o topo passar em AA.
   O menu vive na faixa direita do hero, que é justamente onde a bruma clareia:
   medido em 4 quadros, o fundo atrás do seletor de idioma vai de rgb(58,61,74)
   a rgb(83,83,87). Contra o mais claro, o ouro do idioma ativo dá 4,06:1 e o
   cinza claro dá 4,39:1, os dois abaixo dos 4,5 de AA para 11px.
   Recolorir o texto não salva: o ouro é cor do manual e não se mexe, e nenhum
   cinza legível a 11px fecha 4,5 num fundo que sobe até L=0,087.
   Então o conserto é o fundo. 55% de tinta sobre o pior quadro já leva o ouro
   a 5,35:1; a rampa abaixo entrega de 0,78 a 0,70 na faixa onde o texto mora
   (y 18 a 48), com folga para quadro que eu não amostrei, e some antes dos
   120px para não virar barra sólida sobre o hero.
   Reversível: apagar este bloco devolve o desenho anterior. */
.topo::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 120px; z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(31, 26, 23, 0.78) 0%,
    rgba(31, 26, 23, 0.70) 45%,
    rgba(31, 26, 23, 0) 100%);
  transition: opacity 0.4s var(--curva);
}
/* assentado já pinta o cabeçalho inteiro: a rampa sairia por cima e escureceria duas vezes */
.topo.assentado::before { opacity: 0; }

.topo.assentado {
  background: rgba(31, 26, 23, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--fio-ouro);
}

.marca { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex-shrink: 0; }
.marca img { height: 38px; width: auto; }
/* a assinatura no topo usa Andalus, a fonte do manual, não a mono do sistema */
.marca-texto {
  font-family: var(--assinatura);
  font-size: 1.125rem;
  letter-spacing: 0.015em;
  color: var(--branco);
  white-space: nowrap;
  padding-top: 0.1em;                    /* Andalus assenta alto na caixa */
}

/* A marca do cabeçalho só aparece depois de sair do hero: no topo quem assina é
   a logo grande, e duas assinaturas na mesma tela competem.
   O seletor é ESCOPADO em .topo de propósito: a mesma composição de marca é
   reusada no rodapé, e sem o escopo a regra apagaria a assinatura de lá. */
.topo .marca { opacity: 0; pointer-events: none; transition: opacity 0.45s var(--curva); }
.topo.assentado .marca { opacity: 1; pointer-events: auto; }

.navegar { margin-left: auto; display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 1.9rem); }
.navegar a {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--azul-claro);
  transition: color 0.25s var(--curva);
}
.navegar a:hover { color: var(--ouro); }

/* lista de verdade; o separador visual é o fio entre os itens, não um span */
.idiomas { display: flex; gap: 0.2rem; align-items: center;
           list-style: none; margin: 0; padding: 0; }
.idiomas li { display: flex; align-items: center; }
.idiomas li + li { border-left: 1px solid rgba(160, 159, 159, 0.35);
                   margin-left: 0.45rem; padding-left: 0.45rem; }
/* O cinza do manual fica, mas ele só passa em AA por causa da rampa escura do
   `.topo::before`. Sem ela este `--cinza` dá 3,30:1 sobre a bruma clara, e
   clarear o cinza aqui NÃO era saída: o ouro do idioma ativo reprovava junto,
   e ouro é cor do manual, não se mexe. Medido com a rampa: 5,99:1.
   Ou seja: quem mexer no `.topo::before` reabre um defeito de acessibilidade
   nesta linha, que não tem nada a ver com ela. */
.idiomas a { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
             text-decoration: none; color: var(--cinza); padding: 0.15rem 0.3rem; }
.idiomas a[aria-current='true'] { color: var(--ouro); border-bottom: 1px solid var(--ouro); }

@media (max-width: 52rem) {
  .navegar > a { display: none; }
  /* escopado: no estreito o cabeçalho não tem espaço para a assinatura ao lado
     da navegação, mas o rodapé tem a largura inteira e mantém a dele */
  .topo .marca-texto { display: none; }
}

/* ============================================================
   HERO · duas colunas sobre a névoa em shader
   Volta ao arranjo antigo (texto à esquerda, retrato à direita), agora com a
   bruma como fundo e sem o arco. Largura total: o hero é o único bloco que
   não usa o envelope de 74rem. Atmosfera de referência: izanami-official.com.
   ============================================================ */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(6.5rem, 13vh, 8.5rem) 0 clamp(3rem, 8vh, 5rem);
  overflow: hidden;
  isolation: isolate;
  /* segura a cena se o WebGL não subir */
  background:
    radial-gradient(120% 80% at 40% 34%, rgba(32, 53, 130, 0.40), transparent 66%),
    radial-gradient(70% 50% at 50% 100%, rgba(216, 161, 49, 0.06), transparent 74%),
    var(--tinta);
}

#nevoa {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.sem-webgl #nevoa { display: none; }

/* Véu sobre a névoa. A bruma clareia até tons pálidos, e texto branco sobre a
   crista dela cairia para ~2,3:1.

   O véu inteiro vive AQUI, no ::after do hero, dimensionado em % do próprio
   hero: gradiente linear escala com a caixa, então mudar a altura ou a largura
   do hero redimensiona o véu junto. A versão anterior pendurava um radial no
   bloco de texto e não acompanhava o hero.

   Padrão de aferição: branco puro no lugar do canvas, e todo texto do hero
   tem que passar ASSIM (o shader é animado, um quadro não prova nada). */
#hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    /* coluna do texto: pesado à esquerda até DEPOIS da borda direita do texto
       (ele corre até ~53% da largura), morrendo antes do retrato (~67%) */
    linear-gradient(97deg,
      rgba(31, 26, 23, 0.92) 0%, rgba(31, 26, 23, 0.86) 56%,
      rgba(31, 26, 23, 0.38) 68%, rgba(31, 26, 23, 0.12) 76%, transparent 84%),
    /* base: linha das praças e a saída para a seção seguinte */
    linear-gradient(to top, rgba(31, 26, 23, 0.78), rgba(31, 26, 23, 0.30) 22%, transparent 40%),
    /* topo: navegação fixa */
    linear-gradient(to bottom, rgba(31, 26, 23, 0.40), transparent 20%);
}
/* no estreito o texto ocupa a largura toda: o véu vira vertical e cobre tudo */
@media (max-width: 60rem) {
  #hero::after {
    background:
      linear-gradient(to bottom,
        rgba(31, 26, 23, 0.55) 0%, rgba(31, 26, 23, 0.86) 30%,
        rgba(31, 26, 23, 0.88) 78%, rgba(31, 26, 23, 0.90) 100%);
  }
}

/* ============================================================
   ÁGUA PLENA (.com-agua, ligada pelo nevoa.js): o conteúdo do hero é
   fotografado para DENTRO do canvas e o fluido distorce texto e imagem
   junto com a bruma, como no izanami. O DOM fica invisível mas continua
   interativo (o WhatsApp clica, o tab navega); com foco de teclado o DOM
   volta a aparecer para o anel de foco ter onde viver. O véu migra para o
   shader (senão ele escureceria o texto desenhado), então o ::after sai.
   Em origem file:// as imagens não podem entrar no canvas (contaminam),
   aí só .com-agua liga: o texto dança e as imagens ficam no DOM.
   ============================================================ */
.com-agua #hero::after { content: none; }
.com-agua .hero-texto > :not(.hero-logo) { opacity: 0; }
.com-agua-img .hero-logo, .com-agua-img .hero-retrato { opacity: 0; }
.com-agua .hero-grade:focus-within .hero-texto > *,
.com-agua .hero-grade:focus-within .hero-logo,
.com-agua .hero-grade:focus-within .hero-retrato { opacity: 1; }

/* Largura total: sem o envelope de 74rem. O limite alto existe só para o
   texto não virar linha de 1200px em monitor largo. */
.hero-grade {
  position: relative; z-index: 2;
  width: 100%; max-width: 92rem;
  margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero-grade { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}

.hero-texto {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
}

/* a logo completa assina a página. Um pouco menor que na versão de tela
   cheia, porque agora divide a linha de visão com o retrato. */
.hero-logo { margin: 0 0 clamp(1.75rem, 4vh, 2.75rem); }
.hero-logo img {
  width: clamp(12rem, 24vw, 19rem);
  height: auto;
  /* leve sombra para a moldura dourada não se perder na bruma clara */
  filter: drop-shadow(0 12px 42px rgba(0, 0, 0, 0.55));
}

/* retrato à direita, na moldura da própria logo: fio dourado por fora, fio
   marinho por dentro. O fundo preto do estúdio conversa com a base da bruma.

   A proporção entre os dois fios importa mais do que parece. Com 5px de ouro
   e 3px de marinho a moldura LIA como azul: o marinho é uma linha saturada
   encostada na foto escura e ganha o olho, enquanto o ouro fica na aresta
   externa contra um fundo também escuro. Agora o ouro é a moldura (8px) e o
   marinho é só o fio de 1px que separa a moldura da fotografia. */
.hero-retrato {
  margin: 0; padding: 8px;
  background: var(--ouro);
  width: 100%; max-width: 25rem;
  justify-self: end;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
}
.hero-retrato img {
  width: 100%; aspect-ratio: 2 / 3;
  object-fit: cover; object-position: 50% 14%;
  border: 1px solid var(--marinho);
}
/* no estreito o retrato sai de cena: numa coluna só ele empurrava todo o
   conteúdo do hero para baixo da dobra */
@media (max-width: 60rem) {
  .hero-retrato { display: none; }
}

.hero-eyebrow {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ouro); margin: 0 0 1.5rem;
}

/* Sem max-width e sem balance: o pedido é quebrar SÓ quando não couber.
   O teto do clamp foi medido para a frase inteira caber numa linha na coluna
   de texto em 1440; no estreito ela quebra naturalmente. */
h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.75rem, 1.05rem + 2.15vw, 2.875rem);
  line-height: 1.1; letter-spacing: -0.024em;
  margin: 0;
  text-wrap: initial;
}
h1 em { font-style: italic; color: var(--ouro); }

.fio-titulo {
  /* o fio começa na margem do texto, não centralizado */
  width: min(9rem, 38vw); height: 1px;
  background: linear-gradient(90deg, var(--ouro), rgba(216,161,49,0));
  margin: 1.5rem 0 1.375rem;
}

/* sem teto em ch: a coluna do grid é quem limita a linha */
.hero-sub {
  font-size: clamp(1rem, 0.96rem + 0.4vw, 1.0625rem);
  color: var(--azul-claro);
  margin: 0 0 2rem;
}

.hero-acoes { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.acoes-contato { margin-top: 2rem; }

/* as três praças em texto, sem coordenada: o Diego pediu para tirar lat/long */
.pracas-linha {
  list-style: none;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--fio-ouro);
  width: min(40rem, 100%);
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--azul-claro);
  display: flex; gap: 0.75rem 1.5rem; flex-wrap: wrap;
}
.pracas-linha li { white-space: nowrap; }
.pracas-linha b { color: var(--ouro); font-weight: 500; }

/* ---------- botões ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--corpo); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; padding: 0.9rem 1.5rem;
  border: 1px solid var(--ouro); background: var(--ouro); color: var(--tinta);
  transition: background 0.28s var(--curva), border-color 0.28s var(--curva),
              transform 0.28s var(--curva);
}
.btn:hover { background: #E4B54A; border-color: #E4B54A; transform: translateY(-2px); }

.elo {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--azul-claro); text-decoration: none;
  border-bottom: 1px solid var(--fio-ouro); padding-bottom: 0.25rem;
  transition: color 0.25s var(--curva), border-color 0.25s var(--curva);
}
.elo:hover { color: var(--ouro); border-color: var(--ouro); }

/* ---------- duas frentes ---------- */

.frentes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 3rem;
}
.frente { padding-top: 1.75rem; border-top: 1px solid var(--fio-ouro); }
.frente-indice {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ouro); margin: 0 0 0.875rem;
}
.frente h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.2; margin: 0 0 0.875rem;
}
.frente p { color: var(--azul-claro); margin: 0 0 1.25rem; }

/* ============================================================
   Seção clara. Cor de corpo do site foi feita para o escuro, então tudo
   que entra aqui precisa de par claro. Medido: o OURO dá 1,9:1 sobre o
   branco e por isso NUNCA é texto aqui, só fio e moldura.
   ============================================================ */

.claro { background: var(--branco); color: var(--tinta); }
.claro .rotulo { color: var(--marinho); }              /* 9,0:1 */
.claro .rotulo::after { background: var(--fio-claro); }
.claro .chamada { color: rgba(31, 26, 23, 0.74); }
.claro .elo { color: rgba(31, 26, 23, 0.7); border-bottom-color: var(--fio-claro); }
.claro .elo:hover { color: var(--marinho); border-bottom-color: var(--marinho); }
.claro .tempo::before { background: var(--fio-claro); }
.claro .marco::before { background: var(--marinho); }
.claro .marco-ano { color: var(--marinho); }
.claro .marco p { color: rgba(31, 26, 23, 0.74); }
.claro .marco strong { color: var(--tinta); font-weight: 600; }
.claro .btn { background: var(--marinho); border-color: var(--marinho); color: var(--branco); }
.claro .btn:hover { background: var(--marinho-2); border-color: var(--marinho-2); }
/* o numeral da área é conteúdo de <ol>, não enfeite: em ouro sobre branco dava
   2,32:1. Vai a marinho, que dá 9,0:1. */
.claro .area-num { color: var(--marinho); }

/* ============================================================
   ÁREAS · grade compacta 3×3
   Nove itens em lista vertical davam duas telas e meia. Em grade cabem
   numa tela. O fio da grade é o único ornamento; sem ícone, sem cartão.
   ============================================================ */

.areas {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
}

/* cartão com fio próprio e um levantar leve no hover: sombra curta e a borda
   esquentando para o ouro. Nada de escala, que embaça texto. */
.area {
  background: var(--branco);
  border: 1px solid var(--fio-claro);
  padding: clamp(1.125rem, 2vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: transform 0.3s var(--curva), border-color 0.3s var(--curva),
              box-shadow 0.3s var(--curva);
}
.area:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 161, 49, 0.55);
  box-shadow: 0 14px 30px rgba(31, 26, 23, 0.10);
}
.area-num {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; color: var(--ouro); margin: 0;
}
.area h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.22; margin: 0;
  /* o título da área é curto: `balance` aqui evita uma palavra sozinha
     na segunda linha, que era a quebra feia da versão anterior */
  text-wrap: balance;
}
.area p {
  margin: 0; color: rgba(31, 26, 23, 0.7);
  font-size: 0.875rem; line-height: 1.55;
}

@media (max-width: 56rem) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .areas { grid-template-columns: 1fr; } }

/* ---------- a rota: aqui o marinho entra como área, não como fio ---------- */

.faixa-marinho { background: var(--marinho); }
.faixa-marinho .rotulo { color: var(--ouro); }
.faixa-marinho .rotulo::after { background: rgba(199, 212, 228, 0.28); }
.faixa-marinho .chamada { color: var(--azul-claro); }

.rota {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
  margin-top: 2.75rem;
}
.praca {
  background: var(--marinho-2);
  border: 1px solid rgba(199, 212, 228, 0.24);
  padding: clamp(1.375rem, 2.6vw, 2rem);
  transition: transform 0.3s var(--curva), border-color 0.3s var(--curva),
              box-shadow 0.3s var(--curva);
}
.praca:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 161, 49, 0.55);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.30);
}
.praca h3 { font-family: var(--display); font-weight: 400; font-size: 1.4375rem; margin: 0 0 0.4rem; }
.praca .papel {
  font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--azul-claro); margin: 0 0 0.875rem;
}
.praca p:last-child { margin: 0; color: var(--azul-claro); font-size: 0.9375rem; }

/* ============================================================
   SOBRE · split de largura total
   Modelo dado pelo Diego: a seção "What is the California criminal process?"
   de blairdefense.com. Meia tela de foto sangrando até a borda, do topo ao pé
   da seção, e o texto na outra metade com respiro grande. Sem envelope aqui.

   Uma diferença deliberada em relação à referência: lá a foto é esticada até
   a altura inteira da seção, que no nosso caso passaria de 1400px e recortaria
   o retrato num tarja estreita. Aqui ela é sticky em 100svh, então o
   enquadramento nunca aperta mais que a proporção do arquivo (0,8).
   ============================================================ */
.faixa-cheia { padding: 0; }

.split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .split { grid-template-columns: 1fr 1fr; } }

/* Como no modelo: a figura é o quadro e a imagem preenche ABSOLUTA, do topo ao
   pé da seção, na altura que o texto ditar. `object-fit: cover` com o foco no
   alto guarda o rosto; o que sobra corta pelas laterais e por baixo (paletó),
   nunca pela cabeça. O fundo é o preto do manual porque o arquivo foi gradado
   com o piso em #1F1A17: a foto dissolve na página em vez de desenhar um
   retângulo, e por isso também não há filter aqui (um grayscale por cima
   neutralizaria o piso quente e reabriria a emenda). */
.split-foto { margin: 0; position: relative; overflow: hidden; background: var(--tinta); }
.split-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;
}
@media (max-width: 60rem) {
  /* no estreito, uma tela cheia de foto antes do texto empurra a seção toda
     para baixo da dobra; a foto vira uma faixa */
  .split-foto img { position: static; height: 52vh; }
}

.split-texto { padding: clamp(3.5rem, 9vh, 6.5rem) clamp(1.25rem, 3.6vw, 4.5rem); }
/* A coluna aqui é metade da tela, não a largura da seção: no mesmo corpo das
   outras seções o título passava a três linhas com a última curta. */
.split-texto .h2 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); }

/* ---------- linha do tempo ----------
   Sempre empilhada (ano acima, texto abaixo), inclusive no desktop: dentro de
   meia tela a variante de duas colunas deixava o texto em ~300px. */
.tempo { list-style: none; margin: 2.25rem 0 0; padding: 0; position: relative; }
.tempo::before {
  content: ''; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem;
  width: 1px; background: var(--fio-ouro);
}

.marco {
  display: grid; grid-template-columns: 1fr;
  gap: 0.3rem; padding: 0 0 1.875rem 1.75rem; position: relative;
}
.marco::before {
  content: ''; position: absolute; left: -3.5px; top: 0.55rem;
  width: 8px; height: 8px; background: var(--ouro); border-radius: 50%;
}
.marco:last-child { padding-bottom: 0; }
/* "2002 · 2007" quebrava em duas linhas e partia o intervalo no meio */
.marco-ano {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; margin: 0;
  color: var(--ouro); white-space: nowrap;
}
.marco p { margin: 0; color: var(--azul-claro); font-size: 0.9375rem; }
.marco strong { color: var(--branco); font-weight: 600; }

/* ---------- contato ---------- */

.contato-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem); margin-top: 2.75rem;
}
.ficha { margin: 0; }
.ficha dt {
  font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ouro); margin-bottom: 0.5rem;
}
.ficha dd { margin: 0 0 1.5rem; color: var(--azul-claro); }
.ficha dd:last-child { margin-bottom: 0; }
.ficha a { text-decoration: none; border-bottom: 1px solid var(--fio-ouro); }
.ficha a:hover { color: var(--ouro); border-color: var(--ouro); }

/* ============================================================
   RODAPÉ · largura total, com o que antes era a barra de baixo dentro dele.
   A barra branca separada foi removida: o rodapé absorveu os dados legais e
   o "produzido por", e como o fundo volta a ser escuro todo o texto daqui
   usa o par claro (azul-claro e cinza), não o par de fundo branco.
   ============================================================ */

.rodape { border-top: 1px solid var(--fio-ouro); }
/* Largura total: fora do limite de 74rem das seções de leitura. Usa o MESMO
   trilho do hero (92rem) de propósito. Sangrando até a borda dariam três
   margens esquerdas diferentes na mesma página (borda, 92rem e 74rem), e a
   terceira lê como desalinhamento, não como decisão. */
.rodape-largo {
  width: 100%; max-width: 92rem;
  margin-inline: auto; padding-inline: var(--gutter);
}

.rodape-linha {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  align-items: center; justify-content: space-between;
  padding-block: 2.25rem;
}
/* a segunda linha é a antiga barra: fio de separação e altura menor */
.rodape-base {
  border-top: 1px solid rgba(199, 212, 228, 0.14);
  padding-block: 1.25rem;
}

/* assinatura do rodapé: símbolo à esquerda, texto à direita, na mesma
   composição da barra de navegação fixa (e na mesma Andalus do manual) */
.rodape .marca { gap: 0.85rem; }
.rodape .marca img { height: 48px; }
.rodape .marca-texto { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem); }

.rodape-dados,
.rodape-legal {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
}
.rodape-dados { color: var(--azul-claro); }
.rodape-legal { color: var(--cinza); font-size: 0.625rem; gap: 0.35rem 1.25rem; }
/* nowrap aqui transbordava: um dos itens é a razão social inteira, que não cabe
   em 390px. Só o que é atômico por natureza (número) não quebra. */
.rodape-dados a { white-space: nowrap; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--ouro); }

/* produzido por: a assinatura da Veyla, na versão para fundo escuro */
.produzido {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none;
  font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cinza);
  transition: color 0.25s var(--curva), opacity 0.25s var(--curva);
}
.produzido img { height: 20px; width: auto; opacity: 0.85; }
.produzido:hover { color: var(--branco); }
.produzido:hover img { opacity: 1; }

/* ---------- revelação ---------- */

.revela { opacity: 0; transform: translateY(16px);
          transition: opacity 0.7s var(--curva), transform 0.7s var(--curva); }
.revela.visivel { opacity: 1; transform: none; }
.revela[data-atraso='1'] { transition-delay: 0.07s; }
.revela[data-atraso='2'] { transition-delay: 0.14s; }
.revela[data-atraso='3'] { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revela { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
  /* o global zera a duração da transição, mas o transform ainda saltaria */
  .area:hover, .praca:hover { transform: none; }
}