/* ============================================================
   HAAS — Sistema brutalista-gótico

   Conceito: Haas × Haas. A grotesca que define o modernismo
   suíço, e por herança o brutalismo gráfico, nasceu em 1957
   como Neue Haas Grotesk, na Haas'sche Schriftgiesserei. O
   sobrenome do cliente é o nome da tipografia do brutalismo.

   O wordmark não é logo, é estrutura: uma didone de alto
   contraste, fio finíssimo contra haste pesada — fragilidade
   e massa na mesma letra. Isso é o gótico-financeiro.

   A profundidade NÃO vem de desfoque. Vem de três coisas:
   fio, massa e inversão. O vidro sobrevive como exceção
   documentada (seção 11), no máximo um momento por página.

   00 Tokens · 01 Reset · 02 Tipografia · 03 Grade
   04 Inversão · 05 Estrutura · 06 Dados · 07 Ações
   08 Blocos · 09 Abertura · 09b Cena · 10 Ferramentas
   11 Vidro · 12 Movimento · 13 Rodapé · 14 Menu
   15 Passos · 16 Tarja e selo · 17 Tabela · 18 Linha do tempo
   ============================================================ */

/* ===== 00 · TOKENS ========================================= */
:root {
  /* --- Terrenos ---------------------------------------------
     Dois fundos, sem meio-termo. A passagem de um para o outro
     é corte seco, nunca degradê — a virada é a assinatura. */
  --void:     #050505;   /* base */
  --concreto: #101010;   /* superfície elevada sobre o preto */
  --osso:     #e8e4dc;   /* pergaminho, não papel: branco quente */
  --osso-2:   #dcd7cc;   /* superfície sobre o osso */

  /* --- Tinta sobre o preto --- */
  --tinta:   #f2efe9;    /* 17,8:1 sobre --void */
  --tinta-2: #9a958c;    /*  6,4:1 */
  --tinta-3: #5e5a54;    /*  2,97:1 — REPROVA em texto. Só ornamento
                            que não carrega informação: contorno, filete,
                            fantasma. Rótulo e nota de rodapé são texto
                            funcional e usam --tinta-2. */

  /* --- Tinta sobre o osso --- */
  --breu:   #0a0a0a;
  --breu-2: #4a4640;
  --breu-3: #7c766c;

  /* --- Ouro oxidado ------------------------------------------
     Dois valores porque um só não atravessa os dois terrenos.
     Medidos, não escolhidos no olho: 7,1:1 sobre o preto e
     6,0:1 sobre o osso — os dois passam em texto pequeno.
     Usar com avareza: um fio, um algarismo, um corte. Nunca
     área, nunca fundo. O ouro é sotaque, não voz. */
  --gilt:     #b8925a;
  --gilt-esc: #6b4f1f;

  /* --- Fios --------------------------------------------------
     Brutalismo mostra a estrutura. O fio de 1px é elemento de
     primeira classe aqui, não acabamento. */
  --fio:      rgba(242, 239, 233, 0.14);
  --fio-2:    rgba(242, 239, 233, 0.32);
  --fio-inv:  rgba(10, 10, 10, 0.16);
  --fio-inv-2:rgba(10, 10, 10, 0.36);

  /* --- Famílias ----------------------------------------------
     Bodoni Moda fica: é a língua do wordmark.
     Archivo entra no lugar da Inter — grotesca com espinha,
     a Inter era neutra demais para carregar brutalismo.
     IBM Plex Mono entra para dado e rótulo: informação técnica
     exposta é assinatura brutalista. */
  --serif: "Bodoni Moda", "Times New Roman", Georgia, serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Escala ------------------------------------------------
     Fluida em vw como a referência, mas com piso e teto em
     TODOS os degraus. A escala em vw puro é exatamente o que
     derruba a acessibilidade deles para 6,6: sem piso, o tipo
     encolhe até sumir no celular. Copiar a fluidez, corrigir
     o defeito. */
  --t-monumento: clamp(2.75rem,    9.6vw, 10rem);
  --t-1:         clamp(2.25rem,    6.4vw,  5.5rem);
  --t-2:         clamp(1.75rem,    3.8vw,  3.25rem);
  --t-3:         clamp(1.1875rem,  2.1vw,  1.75rem);
  --t-corpo:     clamp(1rem,      1.15vw,  1.1875rem);
  --t-peq:       clamp(0.8125rem,  0.9vw,  0.9375rem);
  --t-micro:     clamp(0.6875rem, 0.78vw,  0.75rem);

  /* --- Entrelinha e tracking ---------------------------------
     Lição paga três vezes: o choque entre linhas NÃO se resolve
     na entrelinha, se resolve na horizontal.

     A cauda do "p" e a haste do "b" desciam e subiam na mesma
     vertical e se fundiam num traço só. Afrouxar a entrelinha só
     transformava a fusão em linha tracejada — e a 1,2, onde
     enfim limpava, não era mais display, era texto comum.

     O que resolve é o degrau da escada tirar um glifo de baixo
     do outro. Com a headline curta e degrau de 12%, fica limpo
     até 0,74. Fica em 0,80 por uma razão medida: o "b" sobe
     104px, e abaixo de 0,754 ele ultrapassa a linha de base da
     linha de cima e bate nas letras comuns, não só nas altas.

     Headline nova: rodar o verificador antes de publicar. */
  --lh-monumento: 0.80;
  --lh-1: 0.86;
  --lh-2: 1.0;
  --lh-corpo: 1.55;

  --tr-monumento: -0.035em;
  --tr-1: -0.03em;
  --tr-2: -0.02em;
  --tr-mono: 0.18em;   /* rótulo monoespaçado respira */

  /* --- Curvas ------------------------------------------------
     As mesmas da referência, expostas como token. */
  --expo-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --expo-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --dur: 0.6s;
  --dur-longa: 1.05s;

  /* --- Espaço --- */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px;  --e6: 32px;  --e7: 48px;  --e8: 64px;
  --e9: 96px;  --e10: 128px; --e11: 176px;
  --secao: clamp(var(--e8), 9vw, var(--e11));

  /* --- Medida --------------------------------------------
     Sem raio em lugar nenhum. Aresta é o ponto. O único raio
     que sobrevive está na exceção de vidro (seção 10). */
  --barra-alt: 72px;
  --largura: 1560px;
  --margem: clamp(16px, 3.2vw, 44px);
  --calha: clamp(12px, 1.6vw, 24px);
}

/* ===== 01 · RESET ========================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--void);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  letter-spacing: -0.005em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--gilt); color: var(--void); }

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

/* ===== 02 · TIPOGRAFIA ===================================== */
.monumento,
.d1, .d2, .d3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  text-wrap: balance;
}

.monumento {
  font-size: var(--t-monumento);
  line-height: var(--lh-monumento);
  letter-spacing: var(--tr-monumento);
}

.d1 { font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: var(--tr-1); }
.d2 { font-size: var(--t-2); line-height: var(--lh-2); letter-spacing: var(--tr-2); }
.d3 { font-size: var(--t-3); line-height: 1.15; letter-spacing: -0.015em; }

/* A escada: cada linha entra mais do que a anterior. Sem isso
   a headline gigante vira um bloco retangular e morre. */
.escada { display: block; }
.escada > span { display: block; }
/* O degrau não é só ritmo: é o que impede glifo de bater em
   glifo. Medi 5,5% na referência e copiei — mas lá as linhas são
   curtas ("Drive to grow") e o degrau já basta. Com linha longa o
   degrau some em proporção e as colunas de texto se empilham.

   12 · 22 · 32 não foi escolhido no olho: varri as combinações de
   degrau para a headline de quatro linhas medindo glifo a glifo, e
   esta é a que zera colisão com o degrau mais parelho — 12, 10 e
   10. A entrelinha é a mesma em todas as linhas, então o ritmo
   vertical não muda; quem resolve o encosto é a horizontal. */
.escada > span:nth-child(2) { padding-left: 12%; }
.escada > span:nth-child(3) { padding-left: 22%; }
.escada > span:nth-child(4) { padding-left: 32%; }

@media (max-width: 749px) {
  .escada > span { padding-left: 0 !important; }
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--tinta);
  max-width: 34ch;
}

.corpo { color: var(--tinta-2); max-width: 62ch; }
.corpo + .corpo { margin-top: var(--e5); }

/* Grifo em ouro dentro de texto corrido — o acento em dose
   homeopática, que é a única dose que funciona. */
.gilt { color: var(--gilt); }

/* ===== 03 · GRADE ========================================== */
.envelope {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--calha);
}

/* Colunas ancoradas. NUNCA combinar `span N` com
   `grid-column-start`: o shorthand define início e fim, e o
   start seguinte deixa o fim em auto, colapsando o bloco para
   uma coluna. Armadilha já paga no sistema antigo. */
.c-2  { grid-column: span 2; }
.c-3  { grid-column: span 3; }
.c-4  { grid-column: span 4; }
.c-5  { grid-column: span 5; }
.c-6  { grid-column: span 6; }
.c-7  { grid-column: span 7; }
.c-8  { grid-column: span 8; }
.c-12 { grid-column: 1 / -1; }
/* Coluna de conteúdo ao lado do trilho de meta. Existe como classe,
   e não como grid-column inline, por um motivo prático: estilo
   inline não entra na regra de colapso do celular, e a coluna
   continuava com três doze avos de largura numa tela de 390px —
   o conteúdo então vazava para fora da página. */
.c-de-4 { grid-column: 4 / -1; }
.c-fim-3 { grid-column: 10 / -1; }
.c-fim-4 { grid-column: 9 / -1; }
.c-fim-5 { grid-column: 8 / -1; }
.c-fim-6 { grid-column: 7 / -1; }

@media (max-width: 899px) {
  .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-de-4,
  .c-fim-3, .c-fim-4, .c-fim-5, .c-fim-6 { grid-column: 1 / -1; }
}

.secao { padding-block: var(--secao); }
.secao--rente { padding-block: clamp(var(--e7), 5vw, var(--e9)); }

/* --- A armadura exposta -------------------------------------
   Brutalismo mostra a estrutura em vez de escondê-la. Estas
   são as colunas do layout, desenhadas. Decorativa e inerte:
   fica atrás de tudo e não recebe evento. */
.armadura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--calha);
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}
.armadura span { border-left: 1px solid var(--fio); }
.armadura span:last-child { border-right: 1px solid var(--fio); }

@media (max-width: 899px) {
  .armadura span:nth-child(n + 5) { display: none; }
  .armadura { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== 04 · INVERSÃO ======================================= */
/* Preto vira osso sem transição nenhuma. O corte seco entre
   as duas superfícies é o gesto mais brutalista do sistema —
   qualquer degradê aqui destrói o efeito. */
.inverso {
  background: var(--osso);
  color: var(--breu);

  --tinta:   var(--breu);
  --tinta-2: var(--breu-2);
  --tinta-3: var(--breu-3);
  --gilt:    var(--gilt-esc);
  --fio:     var(--fio-inv);
  --fio-2:   var(--fio-inv-2);
  --concreto: var(--osso-2);
}

.inverso ::selection { background: var(--gilt-esc); color: var(--osso); }

/* ===== 05 · ESTRUTURA ====================================== */
.fio { border: 0; border-top: 1px solid var(--fio); margin: 0; }
.fio--forte { border-top-color: var(--fio-2); }
.fio--gilt { border-top-color: var(--gilt); }

/* Regra: fio em cima marca começo de bloco; fio embaixo marca
   fim de lista. Não usar os dois no mesmo elemento. */
.bloco { padding-block: var(--e6); border-top: 1px solid var(--fio); }

/* Nota de rodapé minúscula com asterisco — o aparte técnico,
   deliberadamente pequeno, que a referência usa no canto. */
.aparte {
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 30ch;
}
.aparte::before { content: "*"; color: var(--gilt); margin-right: 0.4em; }

/* ===== 06 · DADOS ========================================== */
/* Rótulo monoespaçado em caixa alta. É o que diz "isto é
   informação técnica", e é metade da identidade brutalista. */
.rotulo {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--tinta-2);
}
.rotulo--gilt { color: var(--gilt); }

/* Trilho de dados alinhado à direita: rótulo minúsculo em cima,
   valor grande embaixo, tudo encostado na margem direita. */
.trilho { display: grid; gap: var(--e5); }
.trilho__item {
  display: grid;
  gap: var(--e2);
  padding-top: var(--e3);
  border-top: 1px solid var(--fio);
  text-align: right;
}
.trilho__valor {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

/* Caixa de número com fio. Desalinhadas de propósito no
   layout — a grade regular é o que se quer quebrar. */
.cifra {
  padding: var(--e5);
  border: 1px solid var(--fio);
  display: grid;
  gap: var(--e4);
  align-content: space-between;
  min-height: clamp(150px, 15vw, 210px);
}
.cifra__valor {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cifra__nota { font-size: var(--t-peq); color: var(--tinta-2); line-height: 1.4; }
.cifra--gilt { border-color: var(--gilt); }
.cifra--gilt .cifra__valor { color: var(--gilt); }

/* Algarismo fantasma: contorno vazado, monumental, atrás do
   conteúdo. Herdado do sistema antigo, onde já funcionava. */
.fantasma {
  font-family: var(--serif);
  font-size: clamp(5rem, 13vw, 12rem);
  line-height: 0.75;
  color: transparent;
  -webkit-text-stroke: 1px var(--fio-2);
  user-select: none;
  pointer-events: none;
}

/* ===== 07 · AÇÕES ========================================== */
/* Sem raio, sem gradiente, sem sombra. Um retângulo e um fio.
   O estado de foco é uma inversão, não um brilho. */
.acao {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) var(--e6);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  border: 1px solid var(--tinta);
  color: var(--tinta);
  background: transparent;
  transition: background-color var(--dur) var(--expo-out),
              color var(--dur) var(--expo-out);
}
.acao:hover { background: var(--tinta); color: var(--void); }
.inverso .acao:hover { color: var(--osso); }

.acao--cheia { background: var(--tinta); color: var(--void); }
.inverso .acao--cheia { color: var(--osso); }
.acao--cheia:hover { background: transparent; color: var(--tinta); }

.acao--gilt { border-color: var(--gilt); color: var(--gilt); }
.acao--gilt:hover { background: var(--gilt); color: var(--void); }

/* Link de texto: o sublinhado cresce da esquerda, não aparece
   de uma vez. Detalhe barato que muda a sensação de acabamento. */
.elo {
  position: relative;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  padding-bottom: var(--e2);
}
.elo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--expo-out);
}
.elo:hover::after { transform: scaleX(1); }

/* ===== 08 · BLOCOS ========================================= */
/* Fotografia: cinza duro, contraste alto. O concreto das fotos
   é o material da casa — não é ilustração de apoio. */
.chapa { position: relative; overflow: hidden; background: var(--concreto); }
.chapa img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.42) brightness(0.74);
}
.chapa--alta { aspect-ratio: 3 / 4; }
.chapa--larga { aspect-ratio: 16 / 9; }

/* Corte diagonal. clip-path em vez de máscara para que o
   recorte valha também para o fundo do elemento. */
.chapa--corte { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.chapa--corte-inv { clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }

/* Índice fixo: lista onde o item ativo acende conforme a
   página rola. O inativo não some, apaga — a lista inteira
   continua legível, que é o que a referência acerta. */
.indice { display: grid; gap: var(--e4); }
/* Navegação é interface, não display: vive na Archivo. Na cena
   havia quatro peças em Bodoni na mesma tela — título, índice e
   dois valores — e a repetição matava a hierarquia. A regra que
   sai daqui vale para o sistema todo: a Bodoni é UM momento por
   tela; figura e navegação ficam na fonte de estrutura. */
.indice__item {
  font-family: var(--sans);
  font-size: var(--t-2);
  line-height: 1.05;
  letter-spacing: var(--tr-2);
  color: var(--tinta-2);
  transition: color var(--dur) var(--expo-out);
}
.indice__item.is-ativo { color: var(--tinta); }
.indice__item.is-ativo::before {
  content: "";
  display: inline-block;
  width: 0.5em; height: 1px;
  background: var(--gilt);
  vertical-align: middle;
  margin-right: 0.4em;
}

.grude { position: sticky; top: clamp(80px, 12vh, 140px); }

/* ===== 09 · ABERTURA ======================================= */
/* A barra e o hero, no molde da referência: a abertura é movida
   a TIPO, não a objeto. O wordmark aqui é logo pequeno na barra
   e nada mais — peça central grande no meio da tela é dramática
   demais e rouba a headline.

   A barra é sangrada, sem envelope: o bloco do canto encosta na
   quina da janela sem margem. É o gesto mais brutalista da
   composição e some se alguém enfiar a barra num container. */
.barra {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: var(--barra-alt);
  border-bottom: 1px solid var(--fio);
}

/* A marca de ouro na quina absoluta. A referência põe um risco
   vermelho aqui; é o único lugar do sistema onde o acento
   aparece sem ter função — e por isso mede 9px. */
.barra::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 9px; height: 9px;
  background: var(--gilt);
}

.barra__marca { display: flex; align-items: center; padding-inline: var(--margem); }
.barra__marca img { width: clamp(92px, 9vw, 128px); }

.barra__nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--e4), 2.2vw, var(--e7));
  margin-inline: auto;
  padding-inline: var(--e5);
}
.barra__elo {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--tinta-2);
  transition: color var(--dur) var(--expo-out);
}
.barra__elo:hover, .barra__elo[aria-current] { color: var(--tinta); }

.barra__cela {
  display: flex;
  align-items: center;
  padding-inline: clamp(var(--e4), 1.6vw, var(--e5));
  border-left: 1px solid var(--fio);
}

/* Encosta na quina: sem raio, sem margem, sem sombra. */
.barra__canto {
  display: flex;
  align-items: center;
  padding-inline: clamp(var(--e5), 3vw, var(--e7));
  background: var(--osso);
  color: var(--void);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  transition: background-color var(--dur) var(--expo-out);
}
.barra__canto:hover { background: var(--gilt); }

@media (max-width: 899px) {
  .barra__nav { display: none; }
  .barra__marca { margin-right: auto; }
}

/* --- O hero -------------------------------------------------
   A headline ocupa a esquerda e para na metade; o vazio à
   direita é conteúdo, não sobra. O apoio é pequeno e desce
   para a base da coluna direita, abaixo da última linha do
   título — na referência ele fica bem embaixo, quase no rodapé
   da dobra, e é isso que faz a headline parecer enorme. */
.abertura {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--calha);
  align-content: center;
  min-height: clamp(540px, 86vh, 920px);
  padding-block: clamp(var(--e8), 11vh, var(--e10)) var(--e10);
}

/* Nove colunas, não oito: o português é mais longo que o
   inglês da referência, e a oitava coluna fazia a última linha
   quebrar sozinha — o que desmonta a escada, porque a linha
   quebrada não recebe degrau. */
.abertura__titulo { grid-column: 1 / span 9; }

.abertura__apoio {
  grid-column: 10 / -1;
  align-self: end;
  display: grid;
  gap: var(--e5);
  justify-items: start;
}
.abertura__apoio p {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.42;
  color: var(--tinta);
}

.abertura__rolar {
  position: absolute;
  left: 0; bottom: var(--e7);
  display: flex;
  align-items: center;
  gap: var(--e3);
}
.abertura__rolar::after {
  content: "";
  width: 34px; height: 1px;
  background: var(--fio-2);
}

@media (max-width: 899px) {
  .abertura__titulo, .abertura__apoio { grid-column: 1 / -1; }
  .abertura__apoio { margin-top: var(--e8); justify-items: start; }
  .abertura__rolar { display: none; }
}

/* --- O monumento em linhas ---------------------------------
   A referência põe um pico em 3D fixo atrás da abertura, que
   se revela conforme a página rola. Aqui o objeto é uma
   megaestrutura brutalista e ela não se revela: ela SE DESENHA,
   traço a traço, amarrada à rolagem.

   A escolha não é estética por acaso. O material deste sistema
   é fio — o desenho é o próprio sistema se construindo na
   frente de quem olha. E, ao contrário do 3D, funciona sem
   WebGL, sem biblioteca e sem placa de vídeo.

   Como a cena, isto é progressivo: sem JS o palco não gruda e
   o monumento aparece inteiro, já desenhado. */
.intro { position: relative; }
.intro__palco { position: relative; min-height: 100vh; }

.intro__desenho {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  color: var(--gilt);
  pointer-events: none;
}
/* Sangra pelos dois lados: o cenário fecha a tela de ponta a
   ponta, e o palco recorta o que passar. */
.intro__desenho svg { width: 104%; height: auto; opacity: 0.92; }

/* A face é preenchida com a cor da própria página: some como cor e
   sobra como oclusão. É o que separa cidade de diagrama. */
.intro__desenho [data-face] { fill: var(--void); }

/* Profundidade por peso de traço, não por posição. Quanto mais
   longe, mais fino e mais apagado — é o que impede o skyline de
   competir com o edifício e o edifício de competir com a headline. */
.intro__desenho path { stroke-width: 1.25; }
.intro__desenho [data-tipo="laje"]            { stroke-width: 0.9;  opacity: 0.6; }
.intro__desenho [data-tipo="montante"]        { stroke-width: 0.75; opacity: 0.34; }
.intro__desenho [data-tipo="laje-fraca"]      { stroke-width: 0.8;  opacity: 0.3; }
.intro__desenho [data-tipo="montante-fraco"]  { stroke-width: 0.7;  opacity: 0.2; }
.intro__desenho [data-tipo="fundo"]           { stroke-width: 0.9;  opacity: 0.24; }
.intro__desenho [data-tipo="vizinho"]         { stroke-width: 1;    opacity: 0.46; }
.intro__desenho [data-tipo="terra"]           { opacity: 0.4; }
.intro__desenho [data-tipo="rua"]             { stroke-width: 1;    opacity: 0.42; }
.intro__desenho [data-tipo="faixa"]           { stroke-width: 1;    opacity: 0.3; }
.intro__desenho [data-tipo="arvore"]          { stroke-width: 1.05; opacity: 0.72; }
.intro__desenho [data-tipo="poste"]           { stroke-width: 1;    opacity: 0.6; }
.intro__desenho [data-tipo="balizador"]       { stroke-width: 0.9;  opacity: 0.42; }

.intro__frente {
  position: relative;
  z-index: 1;
  min-height: inherit;
  height: 100%;
  display: grid;
  align-content: center;
}

/* Dentro do palco a abertura não manda na altura: quem define
   é a janela, senão a soma das duas estoura os 100vh do sticky. */
.intro .abertura { min-height: 0; padding-block: 0; }

/* O "Rolar" pertence ao palco, não à headline: dentro do palco a
   abertura perde altura própria e o marcador subia para o meio da
   tela. Ancorado na frente — que é o envelope e tem a margem da
   página —, ele volta para o rodapé da dobra. */
.intro__frente > .abertura__rolar { left: var(--margem); bottom: var(--e7); }

/* Sem o efeito o marcador nao tem trabalho: ele anuncia uma
   animacao de rolagem que, no estado degradado, nao existe. */
.intro:not(.is-viva) .abertura__rolar { display: none; }

/* Desconta a barra. Ela rola embora, mas no topo absoluto da
   página ela empurra o palco 72px para baixo e o marcador de
   rolagem caía fora da dobra. Depois de fixado sobram 72px no
   rodapé do palco — invisíveis, porque atrás dele só existe o
   próprio preto da página. */
.intro.is-viva .intro__palco {
  position: sticky;
  top: 0;
  height: calc(100vh - var(--barra-alt));
  min-height: 0;   /* zera o piso do estado parado, senao a frente herda 100vh e o rodape do palco escapa da dobra */
  overflow: hidden;
}

@media (max-width: 899px) {
  .intro__desenho svg { width: 210%; opacity: 0.4; }
}

/* ===== 09b · CENA ========================================== */
/* A cena fixada: o palco gruda no topo da janela e camadas
   inteiras — foto, marca, título, dados e descrição — entram
   por cima umas das outras enquanto a página rola.

   A transição é CORTINA, não fade. Uma aresta reta atravessa a
   tela e a cena nova aparece atrás dela. Fade seria macio, e
   macio é a gramática que este sistema abandonou.

   Progressivo por construção: por padrão as camadas são blocos
   normais, empilhados na vertical e legíveis sem uma linha de
   JS. Só quando o script confirma que assumiu o controle é que
   `.is-viva` as transforma em camadas absolutas. Sem GSAP a
   seção vira uma lista comum — mais longa, porém inteira. */
.cena { position: relative; }

.cena__palco { position: relative; }

.cena__camada {
  position: relative;
  min-height: 78vh;
  padding-block: var(--e9);
  border-top: 1px solid var(--fio);
}

.cena__foto { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.cena__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.5) brightness(0.26);
}
/* Véu: a foto é material, não ilustração — ela apanha para o
   texto viver em cima dela sem contorno nem sombra. */
.cena__foto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0.74) 0%, rgba(5,5,5,0.6) 42%, rgba(5,5,5,0.88) 100%);
}

.cena__frente {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--calha);
  align-content: space-between;
  min-height: inherit;
  height: 100%;
}

.cena__titulo { grid-column: 3 / span 8; align-self: center; text-align: center; }
.cena__desc   { grid-column: 1 / span 3; align-self: end; }
.cena__dados  { grid-column: 10 / -1; align-self: end; }

/* A marca. A referência usa um sinal vermelho chapado; aqui é
   contorno, porque neste sistema o ouro é fio e nunca área. */
.cena__marca {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: clamp(180px, 26vw, 380px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}
.cena__marca svg { width: 100%; height: 100%; }
.cena__marca [stroke] { stroke: var(--gilt); fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* Índice persistente, por cima de todas as camadas. */
.cena__indice { grid-column: 1 / span 3; align-self: start; }

@media (max-width: 899px) {
  .cena__titulo, .cena__desc, .cena__dados, .cena__indice { grid-column: 1 / -1; }
  .cena__titulo { text-align: left; }
  .cena__marca { display: none; }
}

/* --- Estado vivo: o JS assumiu ---------------------------- */
.cena.is-viva .cena__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.cena.is-viva .cena__camada {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding-block: 0;
  border-top: 0;
  display: flex;
  align-items: stretch;
}
.cena.is-viva .cena__camada > .envelope {
  width: 100%;
  display: flex;
  padding-block: clamp(var(--e8), 11vh, var(--e10));
}
.cena.is-viva .cena__indice-fixo {
  position: absolute;
  left: 0; right: 0;
  z-index: 3;
  top: clamp(var(--e8), 11vh, var(--e10));
}

/* ===== 11 · VIDRO, A EXCEÇÃO =============================== */
/* REGRA, e ela é curta: no máximo UM vidro por página.
   O material da casa é fio, massa e inversão. O vidro é o
   momento em que a luz atravessa — se estiver em toda parte,
   não é momento nenhum, e o sistema volta a ser o antigo.
   O raio de 20px existe só aqui, de propósito: é o sinal de
   que a peça não pertence à gramática de aresta dura. */
.vidro {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(242, 239, 233, 0.20);
  background: linear-gradient(140deg,
    rgba(242, 239, 233, 0.12) 0%,
    rgba(242, 239, 233, 0.04) 46%,
    rgba(242, 239, 233, 0.02) 100%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(242, 239, 233, 0.34),
              0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ===== 12 · MOVIMENTO ====================================== */
/* Nada aqui esconde conteúdo por CSS. O estado inicial das
   animações é aplicado por JS, sempre: se o script falhar, o
   texto tem que estar na tela, legível. Armadilha já paga uma
   vez no sistema antigo — headline escondida por CSS somiu de
   vez quando o GSAP não carregou. */
[data-revela] { will-change: opacity, transform; }

/* A revelação palavra a palavra amarrada ao scroll é o efeito
   principal do sistema. A cor de partida fica aqui; o resto é
   o JS que interpola. */
.palavra { will-change: opacity; }

/* Máscara de linha: o texto sobe de dentro de uma fenda. */
.fenda { display: inline-block; overflow: hidden; vertical-align: bottom; }
.fenda__in { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .palavra { opacity: 1 !important; }
  .indice__item { color: var(--tinta); }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== 10 · FERRAMENTAS ==================================== */
/* O diagnóstico. Caixa de fio, sem vidro e sem raio: é uma peça
   de interface, não um cartão flutuante. A opção é uma linha que
   inverte ao ser apontada — o mesmo gesto do botão. */
.ferramenta { border: 1px solid var(--fio-2); padding: clamp(var(--e5), 3vw, var(--e7)); }

.quiz__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4); padding-bottom: var(--e5); border-bottom: 1px solid var(--fio); }
.quiz__passo h4 { font-family: var(--serif); font-size: var(--t-3); line-height: 1.15; letter-spacing: -0.015em; margin-block: var(--e6) var(--e5); }

.quiz__opcoes { display: grid; gap: 0; }
.quiz__opt {
  text-align: left;
  padding: var(--e4) var(--e5);
  border: 1px solid var(--fio);
  margin-top: -1px;               /* fios colapsam num fio só */
  color: var(--tinta);
  font-size: var(--t-peq);
  line-height: 1.4;
  transition: background-color var(--dur) var(--expo-out), color var(--dur) var(--expo-out);
}
.quiz__opt:hover, .quiz__opt.is-on { background: var(--tinta); color: var(--void); position: relative; z-index: 1; }
.inverso .quiz__opt:hover, .inverso .quiz__opt.is-on { color: var(--osso); }

.quiz__resultado h4 { font-family: var(--serif); font-size: var(--t-2); line-height: 1; letter-spacing: var(--tr-2); margin-block: var(--e3) var(--e5); }
.quiz__resultado p { color: var(--tinta-2); font-size: var(--t-peq); line-height: 1.6; }
.quiz__resultado p + p { margin-top: var(--e3); }
.quiz__acoes { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center; margin-top: var(--e6); }
.quiz__refazer { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--tinta-2); }
.quiz__refazer:hover { color: var(--tinta); }

/* ===== 13 · RODAPÉ ========================================= */
.rodape { border-top: 1px solid var(--fio-2); padding-block: clamp(var(--e8), 7vw, var(--e10)) var(--e7); }

.rodape__topo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--calha) var(--calha);
  padding-bottom: var(--e8);
}
.rodape__marca { grid-column: span 5; }
.rodape__marca img { width: clamp(112px, 12vw, 168px); margin-bottom: var(--e5); }
.rodape__marca p { color: var(--tinta-2); font-size: var(--t-peq); max-width: 34ch; line-height: 1.6; }
.rodape__col { grid-column: span 3; }
.rodape__col h4 { margin-bottom: var(--e4); }
.rodape__col li + li { margin-top: var(--e3); }
.rodape__col a { font-size: var(--t-peq); color: var(--tinta-2); transition: color var(--dur) var(--expo-out); }
.rodape__col a:hover { color: var(--tinta); }

.rodape__legal {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--calha);
  padding-top: var(--e6);
  border-top: 1px solid var(--fio);
}
.rodape__ente { grid-column: span 4; }
.rodape__ente p, .rodape__termos p, .rodape__copia p {
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.7;
  color: var(--tinta-3);
}
/* A razão social é a única linha do rodapé que precisa ser lida. */
.rodape__ente p:first-child { color: var(--tinta-2); letter-spacing: 0.06em; }
.rodape__termos { grid-column: span 5; }
.rodape__termos p { color: var(--tinta-2); }
.rodape__copia { grid-column: 10 / -1; text-align: right; }

@media (max-width: 899px) {
  .rodape__marca, .rodape__col, .rodape__ente, .rodape__termos, .rodape__copia { grid-column: 1 / -1; }
  .rodape__copia { text-align: left; }
  .rodape__legal { gap: var(--e5); }
}

/* ===== 14 · MENU ========================================== */
/* Painel de tela cheia. Só existe no celular, onde a navegação da
   barra não cabe. Sem JS o botão não aparece — a navegação da
   barra volta a ser a única, e ela é um link comum. */
.barra__botao { display: none; align-items: center; padding-inline: var(--margem); border-left: 1px solid var(--fio); }
.barra__botao svg { width: 22px; height: 22px; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--void);
  display: grid;
  align-content: center;
  gap: var(--e5);
  padding: var(--margem);
}
.menu[hidden] { display: none; }
.menu a { font-family: var(--serif); font-size: var(--t-2); line-height: 1; letter-spacing: var(--tr-2); }
.menu__fechar { position: absolute; top: var(--e5); right: var(--margem); }

@media (max-width: 899px) {
  .barra__botao { display: flex; }
  .barra__cela { display: none; }
  .barra__canto { padding-inline: var(--e5); }
}

/* ===== 15 · PASSOS ========================================= */
/* A lista de etapas. O algarismo fantasma à direita já diz o
   número — não existe coluna "Etapa 0X" repetindo a informação. */
.passos { border-top: 1px solid var(--fio); }

.passo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--calha);
  align-items: center;
  padding-block: clamp(var(--e6), 3.6vw, var(--e8));
  border-bottom: 1px solid var(--fio);
  overflow: hidden;
}

/* O fantasma herda um corpo pensado para bloco solto, e ali ele
   fica mais alto que a linha: o recorte da linha decepava o
   algarismo em cima e embaixo. Aqui ele é redimensionado para
   caber inteiro dentro da própria etapa. */
.passo__ghost {
  position: absolute;
  right: 0; top: 50%;
  translate: 0 -50%;
  z-index: 0;
  font-size: clamp(3.25rem, 7vw, 6.5rem);
  line-height: 0.9;
}
.passo > *:not(.passo__ghost) { position: relative; z-index: 1; }
.passo__titulo { grid-column: 1 / span 5; }
.passo__desc   { grid-column: 6 / span 5; }

.passo:hover .passo__ghost { -webkit-text-stroke-color: var(--gilt); }

@media (max-width: 899px) {
  .passo__titulo, .passo__desc { grid-column: 1 / -1; }
  .passo__desc { margin-top: var(--e3); }
  .passo__ghost { font-size: 4.5rem; top: var(--e5); translate: 0; }
}

/* ===== 16 · TARJA E SELO =================================== */
/* Faixa de palavras-chave entre seções. Fio em cima e embaixo,
   nada dentro: é respiro com informação. */
.tarja { border-block: 1px solid var(--fio); background: var(--concreto); }
.tarja__interno { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); padding-block: var(--e4); }
.tarja__item { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--tinta-2); }
/* O ponto separador é gerado, nunca digitado: lista que muda não
   pode depender de alguém lembrar de mexer no separador. */
.tarja__item + .tarja__item::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--gilt);
  vertical-align: middle;
  margin-right: var(--e5);
}

.selos { display: flex; flex-wrap: wrap; gap: var(--e2); }
.selo {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  border: 1px solid var(--fio);
  padding: var(--e2) var(--e4);
}

/* ===== 17 · TABELA ========================================= */
/* Sem zebra, sem fundo, sem raio. Só fio e alinhamento — a
   tabela é o lugar onde o brutalismo já era nativo. */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td {
  text-align: left;
  vertical-align: top;
  padding: var(--e5) var(--e5) var(--e5) 0;
  border-bottom: 1px solid var(--fio);
}
.tabela th {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--tinta-3);
  border-bottom-color: var(--fio-2);
  padding-bottom: var(--e3);
}
.tabela td { font-size: var(--t-peq); color: var(--tinta-2); line-height: 1.6; }
.tabela td:first-child { color: var(--tinta); }
.tabela tr:last-child td { border-bottom: 0; }

@media (max-width: 749px) {
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela thead { display: none; }
  .tabela tr { border-bottom: 1px solid var(--fio-2); padding-block: var(--e5); }
  .tabela td { border: 0; padding: 0 0 var(--e2); }
  /* Sem cabeçalho na tela estreita, o rótulo da coluna vira
     prefixo da célula — senão a segunda coluna vira texto solto. */
  .tabela td::before { content: attr(data-col) " "; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--tinta-3); display: block; margin-bottom: var(--e1); }
}

/* ===== 18 · LINHA DO TEMPO ================================= */
.tempo__trilho { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fio-2); }
.tempo__marca {
  text-align: left;
  padding: var(--e5) var(--e4) var(--e5) 0;
  border-top: 2px solid transparent;
  margin-top: -1px;
  color: var(--tinta-3);
  transition: color var(--dur) var(--expo-out), border-color var(--dur) var(--expo-out);
}
.tempo__marca .meses { display: block; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: var(--tr-mono); text-transform: uppercase; }
.tempo__marca .nome { display: block; margin-top: var(--e2); font-size: var(--t-peq); line-height: 1.3; }
.tempo__marca.is-on { color: var(--tinta); border-top-color: var(--gilt); }
.tempo__marca:hover { color: var(--tinta-2); }

.tempo__painel { padding-top: var(--e7); }
.tempo__painel[hidden] { display: none; }
.tempo__painel h4 { font-family: var(--serif); font-size: var(--t-3); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: var(--e4); }
.tempo__painel p { color: var(--tinta-2); font-size: var(--t-peq); line-height: 1.65; max-width: 60ch; }
.tempo__painel ul { margin-top: var(--e5); display: grid; gap: var(--e3); }
.tempo__painel li { font-size: var(--t-peq); color: var(--tinta-2); padding-left: var(--e5); position: relative; }
.tempo__painel li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 10px; height: 1px; background: var(--gilt); }

@media (max-width: 899px) {
  .tempo__trilho { grid-template-columns: 1fr 1fr; }
}