/* ═══════════════════════════════════════════════════════════════
   Alva — corte vertical do sobrado

   Nada aqui é herdado dos dois projetos anteriores, de propósito:

   · página CLARA, papel de areia, não preto quente;
   · o fundo vivo é uma FAIXA à direita, não um canvas de tela cheia atrás
     do texto — e é isso que resolve a legibilidade por construção, porque o
     texto nunca encosta nas camadas;
   · a navegação é a RÉGUA de profundidade, não uma pílula flutuante;
   · nenhum cartão, nenhum canto arredondado, nenhum bento: fio de 1px e
     linha de dado;
   · grotesk e monoespaçada, sem serifada e sem itálico colorido.

   O que foi herdado é só o que é lei: `overflow-x: clip` no body, nada de
   `opacity: 0 → 1` na entrada por rolagem, e nenhuma `transition` em
   propriedade que o JS reescreve por quadro.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --areia:   #E9E1D1;
  --areia2:  #DFD5C1;
  --tinta:   #221F1A;
  --tinta2:  #4A443B;
  /* precisa passar 4,5:1 sobre #E9E1D1; #6E665A dava 4,4 e reprovava por pouco */
  --tinta3:  #635C50;
  --fio:     #C7BCA5;
  --fio2:    #D7CDB8;
  /* Era #A8502A e dava 4,2:1 sobre o papel de areia — reprovava no AA em
     11 e 15px: a cota da seção, a cota que desliza na régua e a linha
     destacada da tabela. Este entra com folga e é o mesmo sienna queimado. */
  --sienna:  #8F4020;
  --ocre:    #8A6520;

  --banda:  40%;   /* largura da faixa do corte */
  --regua:  176px; /* largura da coluna da régua */

  --e-75: 8px; --e-100: 12px; --e-200: 16px; --e-300: 24px;
  --e-400: 32px; --e-500: 40px; --e-600: 48px; --e-800: 80px; --e-900: 104px;
  /* assentamento: painel, gaveta, coisa que pousa */
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  /* padrão de interface: resposta a mão, 150ms */
  --ui: cubic-bezier(0.4, 0, 0.2, 1);
  --saida: 150ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--areia);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16px; line-height: 26px;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.032em; line-height: 1.07; text-wrap: balance; }
h1 { font-size: 56px; }
h2 { font-size: 35px; }
h3 { font-size: 19px; letter-spacing: -0.014em; }
a { color: inherit; }

.rotulo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; line-height: 17px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinta3);
}

/* ════════════════════════════════ a faixa do corte, à direita ══ */

.corte {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--banda);
  z-index: 0;
  border-left: 1px solid var(--fio);
  overflow: hidden;
  background: var(--areia2);
}
.corte canvas { display: block; width: 100%; height: 100%; }
/* as camadas somem no alto e embaixo, para a faixa não bater na borda da
   janela como um bloco cortado */
.corte__véu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--areia) 0%, rgba(233,225,209,0) 9%,
      rgba(233,225,209,0) 91%, var(--areia) 100%);
}

/* ═══════════════════════════════════════════ a régua, fixa ══
   Ela é a navegação: cada marca é um link, e o indicador desliza com a
   rolagem mostrando a cota onde você está. */

.regua {
  position: fixed; top: 0; bottom: 0; right: var(--banda);
  width: var(--regua); z-index: 3;
  pointer-events: none;
}
.regua__marcas { position: absolute; inset: 0; }
.regua__marcas li { position: absolute; right: 0; transform: translateY(-50%); }
.regua__marcas a {
  pointer-events: auto;
  display: flex; align-items: baseline; justify-content: flex-end; gap: var(--e-100);
  padding: 4px var(--e-200) 4px 0;
  text-decoration: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; line-height: 16px; letter-spacing: 0.06em;
  color: var(--tinta3); white-space: nowrap;
  transition: color var(--saida) var(--ui);
}
/* O fio da marca tinha 10px e ia a 16px animando `width` — layout por
   quadro. Agora nasce com 16px e vive encolhido por `scaleX`, ancorado à
   direita: mesmo desenho, só composição. */
.regua__marcas a::after {
  content: ''; position: absolute; right: 0; top: 50%; width: 16px; height: 1px;
  background: var(--fio);
  transform: scaleX(0.625); transform-origin: right;
  transition: transform var(--saida) var(--ui), background-color var(--saida) var(--ui);
}
.regua__n, .regua__q { transition: transform var(--saida) var(--ui); }
.regua__marcas li.aqui a { color: var(--tinta); }
.regua__marcas li.aqui a::after { background: var(--sienna); transform: none; }
.regua__n { font-variant-numeric: tabular-nums; }
.regua__q { text-transform: uppercase; letter-spacing: 0.11em; }

/* A régua é o elemento central da peça, e o eixo vertical dela é a
   ESCALA: nada aqui pode se mover para cima ou para baixo, ou a marca
   passa a mentir a cota. Então o realce é só o fio esticando até o
   comprimento da marca ativa e o rótulo andando 3px no horizontal —
   confirma "esta é a profundidade" sem competir com o sienna do ativo,
   que continua sendo a única cor da coluna.

   Entra no quadro seguinte (duração 0s no :hover) e sai em 150ms: hover
   que demora a aparecer parece lento, e que demora a sair parece suave. */
@media (hover: hover) {
  .regua__marcas a:hover { color: var(--tinta); transition-duration: 0s; }
  .regua__marcas a:hover::after { transform: none; transition-duration: 0s; }
  /* O rótulo é o segundo movimento: 40ms atrás do fio, e é ele que dá vida.
     Ele recua 3px em vez de avançar — medido: avançando, a folga entre a
     última letra e o fio esticado ia de 6px para −3px e o fio cortava a
     letra. Recuando, o fio sai de dentro do rótulo e vai para a rocha, que
     é exatamente o que uma linha de chamada de desenho de sondagem faz. */
  .regua__marcas a:hover .regua__n,
  .regua__marcas a:hover .regua__q {
    transform: translateX(-3px); transition-duration: 0s; transition-delay: 40ms;
  }
}
/* no toque não existe hover: o retorno do dedo é o :active, que sai sozinho */
.regua__marcas a:active { color: var(--sienna); transition-duration: 0s; }

/* o indicador que desliza */
.regua__agora {
  position: absolute; left: calc(100% + 9px); top: 0;
  transform: translateY(-50%);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap;
  color: var(--sienna); background: var(--areia);
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
}
.regua__agora::after {
  content: ''; position: absolute; left: -9px; top: 50%;
  width: 9px; height: 1px; background: var(--sienna);
}

/* ════════════════════════════════════════════ a coluna de texto ══
   `margin-right` calculado a partir da faixa e da régua: o texto não tem
   como encostar nelas em nenhuma largura. */

.coluna {
  position: relative; z-index: 1;
  margin-left: 7vw;
  margin-right: calc(var(--banda) + var(--regua) + var(--e-300));
  max-width: 620px;
  padding: var(--e-800) 0 var(--e-900);
}

.marca { margin-bottom: var(--e-900); }
.marca__nome {
  font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: var(--e-75);
}

/* ─────────────────────────────────────────────── camadas ── */

.camada { padding: var(--e-800) 0; border-top: 1px solid var(--fio); }
.camada:first-of-type { border-top: 0; padding-top: 0; }

.camada__cota {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; line-height: 17px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinta3);
  margin-bottom: var(--e-400);
  display: flex; gap: var(--e-200); align-items: baseline;
}
.cota__n { color: var(--sienna); font-weight: 500; font-variant-numeric: tabular-nums; }

.camada h1, .camada h2 { margin-bottom: var(--e-300); }
.camada h1 br, .camada h2 br { display: none; }
@media (min-width: 1024px) { .camada h1 br, .camada h2 br { display: inline; } }

.guia { font-size: 17.5px; line-height: 29px; color: var(--tinta2); max-width: 58ch; }
.guia + .guia { margin-top: var(--e-300); }
.camada h3 { margin: var(--e-600) 0 var(--e-200); }

.acao { margin-top: var(--e-500); display: flex; flex-wrap: wrap; gap: var(--e-400); align-items: baseline; }
/* O fio de baixo deixou de ser `border`: borda não cresce por transform, e
   `border-width` reflui a linha inteira. São dois fios pintados uma vez no
   mesmo lugar — o de repouso, e o que cresce da esquerda no hover. */
.link-forte, .link-fraco {
  position: relative;
  text-decoration: none; font-weight: 600; font-size: 16px;
  padding-bottom: 5px;   /* 3px de folga + os 2px que a borda ocupava */
  transition: color var(--saida) var(--ui), transform var(--saida) var(--ui);
}
.link-forte::before, .link-fraco::before,
.link-forte::after, .link-fraco::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
}
.link-forte::before { background: var(--sienna); }
.link-fraco::before { background: var(--fio); }
/* o fio que cresce: 180ms, da esquerda para a direita. Este é o único
   realce que NÃO entra instantâneo — o gesto é a direção, e sem duração
   não há gesto nenhum para ver. */
.link-forte::after, .link-fraco::after {
  transform: scaleX(0); transform-origin: left;
  transition: transform 180ms var(--ui);
}
.link-forte::after { background: var(--tinta); }
.link-fraco::after { background: var(--tinta3); }
.link-fraco { font-weight: 500; color: var(--tinta2); }
@media (hover: hover) {
  .link-forte:hover { color: var(--sienna); transform: translateY(-1px); transition-duration: 0s; }
  .link-fraco:hover { color: var(--tinta); transform: translateY(-1px); transition-duration: 0s; }
  .link-forte:hover::after, .link-fraco:hover::after { transform: none; }
}
/* afundar no clique: 90ms, e vale para dedo também, onde é o único retorno */
.link-forte:active, .link-fraco:active { transform: scale(0.985); transition-duration: 90ms; }

/* ───────────────────────────────────── linhas de dado ── */

.dados {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--e-500) 0 0; border-top: 1px solid var(--fio);
}
.dados--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dados div { position: relative; min-width: 0; padding: var(--e-200) var(--e-200) var(--e-200) 0; }
/* Realce de leitura: o papel recebe a cor da faixa de rocha, pintada uma
   vez num pseudo e acesa por opacidade — nunca por `background-position`
   nem por sombra animada. Não é botão e não pretende parecer um: serve
   para o olho não perder a linha entre o rótulo em 10px e o número em 23. */
.dados div::before {
  content: ''; position: absolute; z-index: -1; inset: 0 0 0 -8px;
  background: var(--areia2); opacity: 0;
  transition: opacity var(--saida) var(--ui);
}
.dados dd { transition: transform var(--saida) var(--ui); }
@media (hover: hover) {
  .dados div:hover::before { opacity: 1; transition-duration: 0s; }
  .dados div:hover dd {
    transform: translateX(2px); transition-duration: 0s; transition-delay: 40ms;
  }
}
/* min-height de duas linhas: sem isto um rótulo curto sobe o número e os
   valores da fileira param de alinhar entre si. */
.dados dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; line-height: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta3); margin-bottom: 5px; min-height: 30px;
}
.dados dd { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -0.024em; }
@media (max-width: 620px) {
  .dados, .dados--tres { grid-template-columns: 1fr; }
  .dados div { border-bottom: 1px solid var(--fio2); padding-right: 0; }
  /* em coluna única o rótulo não precisa de altura reservada */
  .dados dt { min-height: 0; }
}

/* ───────────────────────────────── odômetro dos quatro números ──
   Coluna de dígitos rolando por translateY, uma vez, quando 60% do bloco
   entra na tela. As células têm a altura exata da linha do valor (26px),
   para o bloco não mudar de altura nem por um pixel quando o JS entra.

   `tabular-nums` porque a janela do dígito tem a largura do algarismo
   mais largo: sem largura fixa, "1" deixaria folga e o número final
   sairia mais largo do que o texto que ele substituiu. */
.od { font-variant-numeric: tabular-nums; }
.od__c, .od__t {
  display: inline-block; height: 26px; line-height: 26px; vertical-align: top;
}
.od__c { overflow: hidden; }
/* `pre` porque o espaço de "180 m" abre um inline-block e seria comido */
.od__t { white-space: pre; }
.od__u { display: block; height: 26px; line-height: 26px; }
/* repouso é o número CERTO. O JS estaciona a fita no zero e solta; se ele
   não rodar, o que fica na tela é o valor, não um zero. */
.od__p {
  display: block;
  transform: translateY(var(--fim, 0px));
  transition: transform 420ms var(--curva) var(--atraso, 0ms);
}
.od[data-espera] .od__p { transform: none; transition: none; }
/* o valor de verdade continua no DOM, para leitor de tela e para o Cmd+F */
.od__lido {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* ─────────────────────────────────────────────── citação ── */

/* O fio lateral virou pseudo para poder crescer de cima para baixo: numa
   página em que a rolagem é profundidade, o fio da citação desce junto.
   `border` não anima por transform, daí a troca — o texto fica no mesmo
   lugar, com os 2px devolvidos ao padding. */
.citacao {
  position: relative;
  margin: var(--e-600) 0 0; padding-left: calc(var(--e-400) + 2px);
}
.citacao::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sienna);
}
/* só com JS: sem ele o fio está inteiro desde o começo */
.js .citacao::before {
  transform: scaleY(0); transform-origin: top;
  transition: transform 380ms var(--curva);
}
.js .citacao.dentro::before { transform: none; }
.citacao p { font-size: 22px; line-height: 33px; font-weight: 500; letter-spacing: -0.014em; }
.citacao footer {
  margin-top: var(--e-200);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta3);
}


/* ───────────────────────────────────────── tabela da semana ── */

.semana { width: 100%; border-collapse: collapse; margin-top: var(--e-500); text-align: left; }
.semana caption { text-align: left; padding-bottom: var(--e-200); }
.semana th, .semana td { padding: var(--e-100) var(--e-200) var(--e-100) 0; vertical-align: baseline; }
.semana thead th:last-child, .semana tbody td { text-align: right; }
.semana thead th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta3); font-weight: 500; border-bottom: 1px solid var(--fio);
}
.semana tbody tr { border-bottom: 1px solid var(--fio2); }
.semana tbody th { width: 1%; white-space: nowrap; font-weight: 600; font-size: 15px; }
.semana tbody td { color: var(--tinta2); font-size: 15px; }
.semana .cheio th, .semana .cheio td { color: var(--sienna); }

/* A tabela é o único lugar da peça em que o olho tem de atravessar o vão
   entre parâmetro e valor. O realce acende a faixa inteira da linha —
   as duas células juntas, sangrando 8px para cada lado — e é ele que
   substitui o fio pontilhado que a peça não tem. O pseudo vai nas
   células, não no `tr`: linha de tabela não é bloco de contenção
   confiável para filho absoluto. */
.semana tbody th, .semana tbody td {
  position: relative;
  transition: transform var(--saida) var(--ui);
}
.semana tbody th::before, .semana tbody td::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: var(--areia2); opacity: 0;
  transition: opacity var(--saida) var(--ui);
}
.semana tbody th::before { left: -8px; }
.semana tbody td::before { right: -8px; }
@media (hover: hover) {
  .semana tbody tr:hover th::before,
  .semana tbody tr:hover td::before { opacity: 1; transition-duration: 0s; }
  /* o parâmetro anda 2px, 40ms depois do realce: é o segundo movimento */
  .semana tbody tr:hover th {
    transform: translateX(2px); transition-duration: 0s; transition-delay: 40ms;
  }
}

/* ───────────────────────────────────────────── perguntas ──
   Abertas, não em acordeão: são quatro e caber tudo é melhor do que
   esconder atrás de um clique. */

.perguntas { margin: var(--e-600) 0 0; }
.perguntas dt {
  font-weight: 600; font-size: 16.5px; margin-top: var(--e-400);
  padding-top: var(--e-300); border-top: 1px solid var(--fio2);
}
.perguntas dd { margin: var(--e-75) 0 0; color: var(--tinta2); font-size: 15.5px; line-height: 26px; max-width: 56ch; }

/* ───────────────────────────────────────────── encomenda ── */

.encomenda {
  margin-top: var(--e-800); padding: var(--e-500);
  border: 1px solid var(--tinta3);   /* canto reto, de propósito */
}
.encomenda__frase {
  margin: var(--e-200) 0 0; font-size: 22px; line-height: 32px;
  font-weight: 600; letter-spacing: -0.02em; max-width: 44ch;
}
.encomenda .acao { margin-top: var(--e-400); margin-bottom: var(--e-300); }

/* ──────────────────────────────────────────────── rodapé ── */

.pe {
  margin-top: var(--e-900); padding-top: var(--e-400);
  border-top: 1px solid var(--fio);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-400);
}
.pe div { min-width: 0; }
.pe p:not(.rotulo) { font-size: 14px; line-height: 22px; color: var(--tinta2); margin-top: 5px; }
.pe__fim { grid-column: 1 / -1; margin-top: var(--e-500); }
@media (max-width: 620px) { .pe { grid-template-columns: 1fr; gap: var(--e-300); } }

/* ═══════════════════════════════ larguras estreitas ══
   A faixa não encolhe até virar tira inútil: abaixo de 1024 ela vira o
   corte lateral do papel, na borda esquerda, e a régua vira uma cota só. */

@media (max-width: 1280px) { :root { --banda: 34%; --regua: 158px; } }

@media (max-width: 1024px) {
  .corte {
    left: 0; right: auto; width: 26px;
    border-left: 0; border-right: 1px solid var(--fio);
  }

  /* A régua vira BARRA INFERIOR. Antes a cota ficava fixa no alto e pousava
     em cima do texto da seção, e as marcas eram escondidas — o celular
     ficava sem navegação nenhuma. Aqui a escala continua clicável, a marca
     ativa faz o papel da cota, e a coluna reserva espaço embaixo para nada
     ficar permanentemente coberto. */
  .regua {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: auto;
    pointer-events: auto;
    background: var(--areia); border-top: 1px solid var(--fio);
    padding: 0 var(--e-100);
  }
  .regua__marcas {
    position: static; inset: auto;
    display: flex; justify-content: space-between; align-items: center; gap: 2px;
  }
  .regua__marcas li { position: static; transform: none; }
  /* Alvo de dedo: 17×32px não se acerta. 44px de altura é a diretriz de
     plataforma e 24px é o piso do WCAG AA — aqui vale a régua cheia, porque
     item de barra não é link de texto corrido. */
  .regua__marcas a { padding: 14px 8px; min-width: 44px; min-height: 44px; box-sizing: border-box; align-items: center; justify-content: center; }
  .regua__marcas a::after { display: none; }
  .regua__q { display: none; }
  .regua__marcas li.aqui a { color: var(--sienna); border-bottom: 2px solid var(--sienna); }
  .regua__agora { display: none; }

  .coluna {
    margin-left: 0; margin-right: 0;
    padding: var(--e-800) var(--e-400) calc(var(--e-900) + 72px) calc(26px + var(--e-400));
    max-width: 720px;
  }
  h1 { font-size: 42px; }
  h2 { font-size: 30px; }
}
@media (max-width: 620px) {
  /* Os CTAs são itens de uma linha flex, então o navegador os blocifica: não
     são link de texto corrido e valem o alvo de dedo cheio. Tinham 31px. */
  .link-forte, .link-fraco {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .acao { gap: var(--e-300); }
  h1 { font-size: 32px; }
  h2 { font-size: 25px; }
  .guia { font-size: 16.5px; line-height: 27px; }
  .encomenda { padding: var(--e-300); }
  .encomenda__frase { font-size: 19px; line-height: 28px; }
  .camada { padding: var(--e-600) 0; }
}

/* ──────────────────────── entrada por rolagem ──
   Só deslocamento, nunca opacidade: bloco que aparece do nada pisca na
   frente de quem lê, e se o gatilho falhar ele não aparece nunca. */
.js [data-sobe] { transform: translateY(14px); transition: transform 700ms var(--curva); }
.js [data-sobe].dentro { transform: none; }

/* ──────────────────────────── foco de teclado ──
   `:focus-visible`, não `:focus`: com `:focus` o anel aparece no clique de
   mouse também. Tinta sobre areia dá 13:1 contra o papel, muito acima do
   3:1 exigido entre focado e não focado, e o `outline-offset` tira o anel
   de cima da letra. NÃO tem transição: é o estado que a pessoa vê
   centenas de vezes por dia e animá-lo é atrasar a navegação. */
:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}
/* na barra inferior do celular o anel encostaria na borda da barra */
@media (max-width: 1024px) {
  .regua__marcas a:focus-visible { outline-offset: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  /* `.01ms`, nunca `none`: `transition: none` não dispara `transitionend`,
     e script que espera esse evento trava para sempre. A árvore continua
     exatamente a mesma — quem muda é só a duração. */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
  /* deslocamento de área grande é o que a WCAG trata como movimento:
     desligado. Crossfade e escala pequena podem ficar. */
  .js [data-sobe] { transform: none; }
  /* o fio da citação é comandado pela rolagem: nasce inteiro */
  .js .citacao::before { transform: none; }
}