/* BPO Alliance · página única
   Direção: livro-razão (ADR-004). A página inteira é uma folha de livro contábil:
   pauta de linha única, margem dupla em ouro do topo ao rodapé, lançamentos que fecham em saldo.
   Contrato de direção: .impeccable/surfaces/frontend-index-html.md */

/* ---------------------------------------------------------------- Fontes */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  /* Recortada por assets/subconjunto-fontes.py: só os eixos e caracteres que a página usa. */
  font-weight: 400 600;
  font-stretch: 100% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("../fonts/azeret-mono-var.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}
/* Reservas calibradas. A Archivo larga é bem mais ampla que a Arial; sem o ajuste, o H1 troca de
   largura e de número de linhas quando a fonte chega, e como ele está ancorado na base do hero,
   cresce para cima e desloca tudo. Números medidos no Chrome contra a Archivo real
   (assets/medir-regioes.mjs; procedimento em docs/frontend.md). */
@font-face {
  font-family: "Archivo Reserva";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
  size-adjust: 98.4%;       /* Archivo 400 a 100% de largura / Arial, no texto corrido da página */
  ascent-override: 89.4%;   /* 0,88 da Archivo dividido pelo size-adjust */
  descent-override: 21.3%;  /* 0,21 dividido pelo size-adjust */
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Larga Reserva";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
  size-adjust: 115.2%;      /* Archivo 560 a 112% de largura / Arial, nos títulos reais */
  ascent-override: 76.4%;
  descent-override: 18.2%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- Tokens */

:root {
  /* Cores medidas na logo entregue pelo cliente. Contraste WCAG sobre o carvão entre parênteses,
     recalculado em 27/09/2026 (a versão anterior dizia 17,4 para o osso; o certo é 16,64). */
  --carvao: #090A0C;
  --ouro: #C9974A;          /* 7,55:1 */
  --ouro-claro: #E0B569;    /* 10,36:1; hover e foco: clareia, nunca escurece (regra 5.10) */
  --ouro-fundo: #BC8C42;    /* rótulo carvão sobre ele: 6,57:1; no hover, ouro-claro: 10,36:1 */
  --prata: #ACACAC;         /* 8,72:1 */
  --prata-2: #8A8A8A;       /* 5,74:1 */
  --osso: #EEEBE4;          /* 16,64:1 */
  --fio: rgb(172 172 172 / .16);
  --fio-pauta: rgb(172 172 172 / .12);

  /* Pauta do livro: todo ritmo vertical é múltiplo desta linha. */
  --linha: clamp(1.75rem, 2.3vw, 2.25rem);
  /* A margem dupla fica a 7vw da borda; o texto começa 40px depois dela. */
  --margem: clamp(20px, 7vw, 128px);
  --recuo: calc(var(--margem) + 40px);
  --lateral: clamp(16px, 4vw, 48px);

  --fonte: "Archivo", "Archivo Reserva", system-ui, sans-serif;
  --fonte-larga: "Archivo", "Archivo Larga Reserva", system-ui, sans-serif;
  --fonte-dado: "Azeret Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Entrar e sair: desacelera no fim. Mover na tela: acelera e desacelera. Nunca ease-in. */
  --ease-saida: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-mover: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: dark;
  scrollbar-color: #3a3c41 var(--carvao);
}

/* ---------------------------------------------------------------- Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carvao);
  color: var(--osso);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, table { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .3em; }
em { font-style: normal; color: var(--ouro); }
strong { font-weight: 600; }

::selection { background: var(--ouro); color: var(--carvao); }
:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Barra de rolagem no carvão, para o navegador não pintar a cinza padrão dele. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--carvao); }
::-webkit-scrollbar-thumb { background: #3a3c41; border: 3px solid var(--carvao); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #55575d; }

.icone { width: 20px; height: 20px; flex: none; }
.icone--p { width: 16px; height: 16px; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.pular {
  position: absolute; left: 16px; top: 12px; z-index: 100;
  padding: 12px 16px; border-radius: 2px;
  background: var(--osso); color: var(--carvao); font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.pular:focus-visible { transform: none; }

/* ---------------------------------------------------------------- Botões e links */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: 0 1.25rem;
  border-radius: 2px;
  background: var(--ouro-fundo); color: var(--carvao);
  font: 600 .9375rem/1 var(--fonte); font-stretch: 110%;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease-saida), transform .16s var(--ease-saida);
  -webkit-tap-highlight-color: transparent;
}
.botao:active { transform: scale(.97); }

.link-seco {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  color: var(--osso); font-weight: 500; font-stretch: 110%;
  text-decoration: underline; text-decoration-color: rgb(238 235 228 / .38);
  text-underline-offset: .45em;
  transition: color .2s var(--ease-saida), text-decoration-color .2s var(--ease-saida);
}

@media (hover: hover) and (pointer: fine) {
  .botao:hover { background: var(--ouro-claro); }
  .link-seco:hover { color: var(--ouro-claro); text-decoration-color: var(--ouro-claro); }
}

/* ---------------------------------------------------------------- Margem dupla
   A assinatura da direção: dois fios de 1px em ouro que descem do topo ao rodapé sem
   interrupção. Cada seção carrega o seu trecho, colado no da anterior. O trecho tem um fio
   base discreto sempre visível e, por cima, a tinta cheia. Onde o navegador aceita linha do
   tempo de rolagem, a tinta desce junto com a leitura; onde não aceita, fica inteira. */

.margem-dupla {
  position: absolute; top: 0; bottom: 0; left: var(--margem); z-index: 1;
  width: 4px; pointer-events: none;
  /* 55%: parado, sem a tinta, ainda lê como ouro. A 30% media (66,52,30) e lia marrom. */
  border-inline: 1px solid rgb(201 151 74 / .55);
}
.margem-dupla::before {
  content: ""; position: absolute; inset: 0 -1px;
  border-inline: 1px solid var(--ouro);
  opacity: .82;
  transform-origin: top;
}

/* ---------------------------------------------------------------- Topo */

.topo {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; gap: 2rem;
  height: 88px;
  padding: 0 var(--lateral) 0 calc(var(--recuo) - 10px);
}
.topo__marca { display: block; flex: none; }
/* 52px de altura: é o mínimo em que o ALLIANCE espaçado da logo ainda se lê. */
.topo__marca img { height: 52px; width: auto; }
.topo__nav { margin-left: auto; display: flex; gap: .25rem; }
.topo__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem;
  color: var(--prata); font-size: .9375rem; font-stretch: 110%; text-decoration: none;
  transition: color .2s var(--ease-saida);
}
.botao--topo { min-height: 44px; margin-left: auto; }
.topo__nav + .botao--topo { margin-left: 0; }
@media (hover: hover) and (pointer: fine) {
  .topo__nav a:hover { color: var(--osso); }
}

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

.hero {
  position: relative; isolation: isolate;
  /* A pauta do hero se estende para os lados além do bloco de texto; o recorte horizontal
     evita rolagem lateral sem criar contêiner de rolagem. */
  overflow-x: clip;
  /* Corpo do título e do subtítulo: entram na conta que põe as linhas-base sobre a pauta. */
  --h1: calc(var(--linha) * 2);
  --sub: 1.125rem;
  display: grid; grid-template-rows: 1fr auto;
  /* svh e não dvh: dvh muda quando a barra do navegador do celular some, e isso é deslocamento de layout. */
  min-height: 100svh;
  min-height: max(100svh, 640px);
}
.hero__midia { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--carvao); }
.hero__poster, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.hero__video { opacity: 0; transition: opacity .9s var(--ease-saida); }
.hero__video.tocando { opacity: 1; }

/* Véu do hero, em duas partes.
   1. .hero::before: só o que depende da tela. O topo em px segura logo e navegação quando o
      drone passa por prédio claro; a lateral e a base, leves, dão profundidade à cidade.
   2. .hero__pauta::after: o véu que garante o contraste. Fica preso ao bloco do título e do
      subtítulo e desce até a faixa, então acompanha o texto em qualquer altura de tela. Antes o
      véu era porcentagem da altura do hero, e em tela baixa (320x640, 375x667) o texto subia
      para onde ele quase não existia (DEF-01 do QA).
   Medido, não estimado: assets/medir-regioes.mjs fotografa o véu real do navegador sobre fundo
   preto e branco em 10 telas, e assets/medir-veu.py compõe cada quadro do vídeo (pôster mais
   um a cada 0,5 s) e mede o pior pixel de cada linha de texto. Números em docs/frontend.md;
   o pior caso de cada região, entre as 10 telas:
     véu do texto (--veu-texto) 0,80; topo .92 / .80 a 70px / 0 a 200px
     links da navegação, prata ................ 6,27:1 (1440x900)   AA 4,5
     título, osso ............................. 8,90:1 (375x667)    AA grande 3
     "fechando", ouro ......................... 4,05:1 (375x667)    AA grande 3
     subtítulo, prata ......................... 4,76:1 (375x667)    AA 4,5
     link "Ver serviços", osso ................ 10,32:1 (1024x768)  AA 4,5
     faixa, nome em osso ...................... 14,22:1 (360x740)   AA 4,5
     faixa, descrição em prata-2 .............. 4,89:1 (320x640)    AA 4,5
     botão de pausa, ícone em osso ............ 3,40:1 (1280x720)   componente 3
     logo, ALLIANCE em prata (referência) ..... 3,11:1 (360x740)
   Medido em 27/09/2026 sobre o pôster e 33 quadros de hero-540.mp4 e hero-1080.mp4.
   Quem mudar uma opacidade aqui roda os dois scripts de novo e atualiza estes números. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(9 10 12 / .92) 0, rgb(9 10 12 / .80) 70px, rgb(9 10 12 / 0) 200px),
    linear-gradient(90deg, rgb(9 10 12 / .55) 0%, rgb(9 10 12 / .30) 50%, rgb(9 10 12 / .12) 100%),
    linear-gradient(0deg, rgb(9 10 12 / .60) 0%, rgb(9 10 12 / 0) 45%);
}
.hero__pauta::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  /* Desce até passar da faixa: sem isso sobrava uma tira de vídeo claro entre o botão e a faixa
     e à esquerda dela no celular. O que passa da base do hero pinta carvão sobre carvão. */
  top: calc(var(--linha) * -4); bottom: calc(var(--linha) * -16);
  left: calc(var(--recuo) * -1); right: -100vw;
  /* Opacidade plena a partir de uma linha acima do título, esmaecendo nas três de cima. */
  background: linear-gradient(to bottom,
    rgb(9 10 12 / 0) 0,
    rgb(9 10 12 / var(--veu-texto)) calc(var(--linha) * 3),
    rgb(9 10 12 / var(--veu-texto)) 100%);
  /* No desktop o véu some para a direita, onde não há texto e a cidade aparece. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--recuo) + 46rem), transparent calc(var(--recuo) + 46rem + 32vw));
          mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--recuo) + 46rem), transparent calc(var(--recuo) + 46rem + 32vw));
}
/* A pauta: fios horizontais do livro, ancorados no bloco do título para que cada linha-base
   do H1 e do subtítulo caia exatamente sobre um fio, no desktop e no celular.
   Conta: numa caixa de linha de altura L, a linha-base da Archivo fica a L/2 + 0,335 x corpo
   do topo (0,335 = (ascendente 0,88 menos descendente 0,21) / 2, medidos na fonte; a reserva
   calibrada tem as mesmas métricas). O subtítulo tem L = uma --linha, então a fase do fio é
   --linha/2 + 0,335 x --sub. O H1 tem L = duas --linha e desce
   --linha/2 - 0,335 x (--h1 - --sub) para cair na mesma fase. */
.hero__pauta {
  position: relative;
  --fase: calc(var(--linha) / 2 + 0.335 * var(--sub));
  --veu-texto: .80;
}
.hero__pauta::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: calc(var(--linha) * -5); bottom: calc(var(--linha) * -4); left: -100vw; right: -100vw;
  background: repeating-linear-gradient(to bottom,
    transparent 0 var(--fase),
    var(--fio-pauta) var(--fase) calc(var(--fase) + 1px),
    transparent calc(var(--fase) + 1px) var(--linha));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--linha) * 3), #000 calc(100% - var(--linha) * 2), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--linha) * 3), #000 calc(100% - var(--linha) * 2), transparent 100%);
}

.margem-dupla--hero { z-index: 2; }

.hero__texto {
  align-self: end;
  width: 100%; max-width: 1240px;
  padding: calc(var(--linha) * 4) var(--lateral) calc(var(--linha) * 2) var(--recuo);
}
/* O H1 é a maior frase da página: 66px em 1440 (o fechamento fica em 56px). */
.hero h1 {
  position: relative; top: calc(var(--linha) / 2 - 0.335 * (var(--h1) - var(--sub)));
  max-width: 16ch;
  font-family: var(--fonte-larga); font-weight: 560; font-stretch: 112%;
  font-size: var(--h1); line-height: calc(var(--linha) * 2);
  letter-spacing: -.028em;
  text-wrap: balance;
}
.hero__sub {
  max-width: 46ch; margin-top: var(--linha);
  color: var(--prata); font-size: var(--sub); line-height: var(--linha);
  text-wrap: pretty;
}
.hero__acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem;
  margin-top: var(--linha);
}

/* Faixa densa ao pé do hero: os quatro serviços como colunas do razão, cada uma levando ao razonete.
   Fundo de 84% sobre o véu. Pior pixel entre as 10 telas: nome em osso 14,22:1 (360x740), descrição em
   prata-2 #8A8A8A 4,89:1 (320x640). */
.faixa {
  position: relative; z-index: 3;
  margin-left: calc(var(--margem) + 4px);
  background: rgb(9 10 12 / .84);
  border-top: 1px solid var(--fio);
}
.faixa__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.faixa__lista a {
  display: block; height: 100%;
  padding: calc(var(--linha) * .5) 1.25rem calc(var(--linha) * .6);
  border-right: 1px solid var(--fio);
  text-decoration: none;
  outline-offset: -3px;  /* o hero recorta na horizontal; o anel de foco fica dentro da célula */
  transition: background-color .2s var(--ease-saida);
}
.faixa__lista li:first-child a { padding-left: 36px; }
.faixa strong { display: block; font-weight: 600; font-stretch: 110%; font-size: .9375rem; line-height: 1.35; }
.faixa span { display: block; margin-top: .25rem; color: var(--prata-2); font-size: .8125rem; line-height: 1.4; }
/* O controle do vídeo fica sobre o vídeo, no canto direito, logo acima da faixa. No DOM ele vem
   antes dos links da faixa, então o Tab segue a ordem em que se vê (DEF-07). */
.faixa__pausa { position: absolute; right: var(--lateral); bottom: calc(100% + 16px); }
@media (hover: hover) and (pointer: fine) {
  .faixa__lista a:hover { background-color: rgb(201 151 74 / .09); }
  .faixa__lista a:hover strong { color: var(--ouro-claro); }
}

.botao-pausa {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgb(238 235 228 / .34); border-radius: 50%;
  background: rgb(9 10 12 / .62); color: var(--osso);
  cursor: pointer;
  transition: border-color .2s var(--ease-saida), background-color .2s var(--ease-saida), transform .16s var(--ease-saida);
}
.botao-pausa .icone { width: 18px; height: 18px; }
.botao-pausa:active { transform: scale(.97); }
.botao-pausa .icone-play { display: none; }
.botao-pausa[data-estado="pausado"] .icone-play { display: block; }
.botao-pausa[data-estado="pausado"] .icone-pausa { display: none; }
/* Sem vídeo (falha de rede, arquivo ausente) o botão não tem o que controlar. */
.botao-pausa[data-estado="indisponivel"] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .botao-pausa:hover { border-color: var(--ouro-claro); background: rgb(9 10 12 / .75); }
}

/* ---------------------------------------------------------------- Seções */

.secao {
  position: relative;
  padding: calc(var(--linha) * 4) var(--lateral) calc(var(--linha) * 4) var(--recuo);
}
.titulo-secao {
  max-width: 20ch;
  margin-bottom: calc(var(--linha) * 2);
  font-family: var(--fonte-larga); font-weight: 540; font-stretch: 110%;
  font-size: calc(var(--linha) * 1.2); line-height: calc(var(--linha) * 1.5);
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- Como funciona: partidas dobradas */

/* A folha do razão: a mesma pauta de 12% do hero, com passo de uma --linha, alinhada aos fios dos
   lançamentos (cabeçalho de uma linha, lançamento de duas, saldo de três) e dissolvendo em cima
   e embaixo. Vem antes da tabela no DOM; as linhas da tabela são posicionadas e pintam por cima. */
.razao { overflow-x: clip; }
.livro-folha { position: relative; max-width: 1120px; }
.livro-folha::before {
  content: ""; position: absolute; pointer-events: none;
  top: calc(var(--linha) * -3); bottom: calc(var(--linha) * -3); left: -100vw; right: -100vw;
  background: repeating-linear-gradient(to bottom,
    transparent 0 calc(var(--linha) - 1px), var(--fio-pauta) calc(var(--linha) - 1px) var(--linha));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--linha) * 3), #000 calc(100% - var(--linha) * 3), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--linha) * 3), #000 calc(100% - var(--linha) * 3), transparent 100%);
}
.livro { position: relative; width: 100%; border-collapse: collapse; }
.livro tr {
  position: relative;
  display: grid; grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem;
  align-items: end;
  min-height: calc(var(--linha) * 2);
  padding-bottom: .55rem;
  /* Colunas do razão: fio vertical no meio de cada vão entre colunas, nunca nas bordas de fora.
     Prazo tem 15rem e vão de 2rem, então o primeiro fio fica em 16rem; as outras duas colunas
     dividem o resto, e o segundo fio cai em 50% + 8,5rem. */
  background:
    linear-gradient(var(--fio), var(--fio)) 16rem 0 / 1px 100% no-repeat,
    linear-gradient(var(--fio), var(--fio)) calc(50% + 8.5rem) 0 / 1px 100% no-repeat;
}
.livro th, .livro td { padding: 0; text-align: left; font-weight: inherit; }
/* O fio de cada lançamento, desenhado da margem para a direita. */
.livro tr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--fio);
  transform-origin: left;
}
.livro__cabeca { min-height: var(--linha); }
.livro__cabeca th {
  color: var(--prata-2);
  font-size: .75rem; font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase;
}
.livro__cabeca::after { display: none; }
.livro__prazo {
  color: var(--ouro);
  font-family: var(--fonte-dado); font-size: .8125rem; line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.livro__debito { color: var(--prata); font-size: 1.0625rem; line-height: 1.45; }
.livro__credito { color: var(--osso); font-size: 1.0625rem; line-height: 1.45; font-weight: 500; }

.livro__saldo { min-height: calc(var(--linha) * 3); padding-bottom: .7rem; }
/* O total ocupa as duas colunas: só o fio do prazo segue até o saldo. */
.livro tr.livro__saldo { background: linear-gradient(var(--fio), var(--fio)) 16rem 0 / 1px 100% no-repeat; }
.livro__rotulo {
  color: var(--ouro);
  font-family: var(--fonte-dado); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
}
.livro__total {
  grid-column: 2 / 4;
  font-family: var(--fonte-larga); font-weight: 560; font-stretch: 110%;
  font-size: calc(var(--linha) * 1.05); line-height: 1.2; letter-spacing: -.02em;
}
/* Duplo sublinhado: é assim que o contador fecha o total. */
.livro tr.livro__saldo::after {
  height: 4px; background: none;
  border-top: 1px solid var(--ouro); border-bottom: 1px solid var(--ouro);
}

/* ---------------------------------------------------------------- Serviços: razonetes
   Cada serviço é uma conta em T: nome e frase na barra, a rotina à esquerda do fio vertical
   e o que o cliente recebe à direita, como débito e crédito. */

.razonetes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--linha) * 3) clamp(2.5rem, 5vw, 5.5rem);
  max-width: 1180px;
}
.razonete { scroll-margin-top: calc(var(--linha) * 2); }
.razonete__barra { position: relative; padding-bottom: calc(var(--linha) * .6); }
.razonete__barra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ouro); opacity: .85;
  transform-origin: left;
}
.razonete h3 {
  font-family: var(--fonte-larga); font-weight: 560; font-stretch: 118%;
  font-size: 1.5rem; line-height: var(--linha); letter-spacing: -.015em;
}
.razonete__barra p {
  max-width: 46ch; margin-top: calc(var(--linha) * .35);
  color: var(--prata); font-size: 1rem; line-height: 1.55;
  text-wrap: pretty;
}
.razonete__corpo { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.razonete__corpo::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: var(--ouro); opacity: .85;
  transform-origin: top;
}
.razonete__lado { min-width: 0; padding: calc(var(--linha) * .55) 1.25rem 0 0; }
.razonete__lado + .razonete__lado { padding: calc(var(--linha) * .55) 0 0 1.25rem; }
.razonete__rotulo {
  margin-bottom: .35rem;
  color: var(--prata-2);
  font-size: .75rem; font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase;
}
.razonete li {
  padding: .45rem 0;
  border-bottom: 1px solid var(--fio-pauta);
  font-size: .9844rem; line-height: 1.4;
  overflow-wrap: break-word;
}
.razonete__lado:first-child li { color: var(--prata); }
.razonete__lado + .razonete__lado li { color: var(--osso); }

/* Também fazemos: nota de rodapé do razão. Menor, em linha, separada por fio fino, sem ouro. */
.complementares {
  display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: 2rem;
  max-width: 1180px;
  margin-top: calc(var(--linha) * 4);
  padding-top: calc(var(--linha) * .8);
  border-top: 1px solid var(--fio);
}
.complementares h3 {
  color: var(--prata);
  font-family: var(--fonte-larga); font-weight: 560; font-stretch: 118%;
  font-size: 1rem; line-height: 1.4;
}
.complementares__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.complementares__lista li { padding: 0 1.5rem; border-left: 1px solid var(--fio); }
.complementares__lista li:first-child { padding-left: 0; border-left: 0; }
.complementares__lista strong { display: block; font-weight: 600; font-stretch: 110%; font-size: .9375rem; }
.complementares__lista span { display: block; margin-top: .3rem; color: var(--prata-2); font-size: .875rem; line-height: 1.5; }

/* ---------------------------------------------------------------- Sobre nós */

/* Sem respiro em cima: a própria máscara da faixa já é a transição vinda da seção anterior. */
.sobre { padding-top: 0; }
.sobre__palco {
  display: grid;
  /* A faixa do horizonte sangra até as bordas da tela, saindo do recuo da seção. */
  margin: 0 calc(var(--lateral) * -1) 0 calc(var(--recuo) * -1);
}
.sobre__palco > * { grid-area: 1 / 1; }
.sobre__horizonte {
  position: relative;
  height: clamp(380px, 45.8vw, 700px);  /* 1920x880: em 1440 mostra o quadro inteiro, sem corte */
  /* A imagem dissolve no carvão em cima e embaixo; nunca encosta com borda dura (regra 4.2). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 50%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 50%, transparent 100%);
}
.sobre__horizonte img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%;
}
/* Véu do horizonte, medido com assets/medir-veu.py sobre a imagem já mascarada (quadro novo, 1920x880
   nativo). Pior pixel do título em osso entre as 10 telas: 11,46:1 em 768x1024; 14,81:1 em 1440x900. */
.sobre__horizonte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(9 10 12 / .30) 0%, rgb(9 10 12 / .45) 45%, rgb(9 10 12 / .80) 72%, rgb(9 10 12 / .9) 100%);
}
.sobre__titulo {
  align-self: end; z-index: 2;
  max-width: 18ch; margin: 0; padding: 0 var(--lateral) calc(var(--linha) * .5) var(--recuo);
  box-sizing: content-box;
}
.sobre__colunas {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: calc(var(--linha) * 1.5) clamp(2.5rem, 6vw, 6rem);
  max-width: 1180px;
  margin-top: calc(var(--linha) * 2);
}
.sobre__texto p {
  max-width: 60ch;
  color: var(--prata); font-size: 1.125rem; line-height: var(--linha);
  text-wrap: pretty;
}
.sobre__texto p + p { margin-top: var(--linha); }
/* Princípios como nota na margem do livro: separados da leitura por um fio fino. */
.principios { padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--fio); }
.principios li { color: var(--prata); font-size: 1rem; line-height: 1.6; max-width: 42ch; }
.principios li + li { margin-top: var(--linha); padding-top: var(--linha); border-top: 1px solid var(--fio-pauta); }
.principios strong {
  display: block; margin-bottom: .2rem;
  color: var(--osso); font-family: var(--fonte-larga); font-weight: 560; font-stretch: 118%;
  font-size: 1.25rem; letter-spacing: -.01em;
}

/* ---------------------------------------------------------------- Fechamento */

.fechamento { padding-top: calc(var(--linha) * 3); padding-bottom: calc(var(--linha) * 4.5); }
.fechamento__titulo {
  width: fit-content; max-width: 16ch;
  font-family: var(--fonte-larga); font-weight: 560; font-stretch: 115%;
  /* Sempre abaixo do H1 do hero (2 x --linha): 56px contra 66px em 1440. */
  font-size: clamp(2.25rem, 3.8vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em;
  text-wrap: balance;
}
/* A página fecha como um saldo: o mesmo duplo sublinhado dourado da linha Saldo da tabela. */
.fechamento__titulo::after {
  content: ""; display: block; height: 4px; margin-top: calc(var(--linha) * .6);
  border-top: 1px solid var(--ouro); border-bottom: 1px solid var(--ouro);
  transform-origin: left;
}
.fechamento__acao {
  display: grid; grid-template-columns: minmax(0, 40ch) auto; align-items: end;
  gap: var(--linha) clamp(2rem, 6vw, 6rem);
  max-width: 1180px;
  margin-top: calc(var(--linha) * 1.5);
}
.fechamento__acao p { color: var(--prata); font-size: 1.125rem; line-height: var(--linha); text-wrap: pretty; }
.fechamento__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.fechamento__numero {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--osso); font-size: 1.125rem; font-weight: 500; font-stretch: 110%;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  text-decoration: underline; text-decoration-color: rgb(201 151 74 / .6); text-underline-offset: .4em;
  transition: color .2s var(--ease-saida), text-decoration-color .2s var(--ease-saida);
}
@media (hover: hover) and (pointer: fine) {
  .fechamento__numero:hover { color: var(--ouro-claro); text-decoration-color: var(--ouro-claro); }
}

/* ---------------------------------------------------------------- Rodapé */

.rodape {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end;
  gap: calc(var(--linha) * 1.2) 3rem;
  padding: calc(var(--linha) * 1.5) var(--lateral) calc(var(--linha) * 1.5) var(--recuo);
  border-top: 1px solid var(--fio);
}
.rodape__marca img { height: 60px; width: auto; }
.rodape__slogan { margin-top: .6rem; color: var(--prata); font-size: .9375rem; }
.rodape__dados {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 2rem;
  color: var(--prata-2); font-size: .875rem;
}
/* Alvo de toque de 45px de altura sem mudar o desenho: preenchimento compensado por margem negativa. */
.rodape__credito a {
  display: inline-block; padding: 15px 0; margin: -15px 0;
  color: var(--prata); text-decoration-color: rgb(172 172 172 / .35);
  transition: color .2s var(--ease-saida);
}
@media (hover: hover) and (pointer: fine) {
  .rodape__credito a:hover { color: var(--ouro-claro); }
}

/* ---------------------------------------------------------------- Botão flutuante
   Só aparece quando o hero sai da tela e some de novo no fechamento, que já tem o botão.
   Sem JS ele fica sempre visível: é o único caminho de ação e não pode depender de script. */

.flutuante {
  position: fixed; z-index: 20;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 2px;
  background: var(--ouro-fundo); color: var(--carvao);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / .7), 0 2px 6px rgb(0 0 0 / .35);
  transition: background-color .2s var(--ease-saida);
  -webkit-tap-highlight-color: transparent;
}
.flutuante .icone { width: 26px; height: 26px; }
.js .flutuante {
  transition: opacity .16s linear, visibility 0s linear .16s, background-color .2s var(--ease-saida);
}
.js .flutuante:not(.visivel) { opacity: 0; visibility: hidden; pointer-events: none; }
.js .flutuante.visivel { transition: opacity .16s linear, visibility 0s, background-color .2s var(--ease-saida); }
@media (hover: hover) and (pointer: fine) {
  .flutuante:hover { background: var(--ouro-claro); }
}

/* ---------------------------------------------------------------- Movimento
   Tudo é visível sem JS e com movimento reduzido. O movimento só existe quando o JS marcou a
   página (.js para a entrada do hero, .anima para as revelações) e o usuário não pediu menos
   movimento. Animação com atraso declara fill-mode (regra 5.9). */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Entrada do hero, uma vez. O H1 entra só com deslocamento e foco, sem sumir: ele pode ser o
     elemento de LCP e opacidade zero atrasaria a medição. */
  .js .entra {
    animation: entra .8s var(--ease-saida) both;
    animation-delay: calc(var(--i, 0) * 80ms + 80ms);
  }
  .js h1.entra { animation-name: entra-foco; animation-delay: 0ms; }
  @keyframes entra { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
  @keyframes entra-foco { from { transform: translateY(10px); filter: blur(5px); } }

  /* Botão flutuante: entra subindo pouco e sai pelo mesmo caminho. Transição, não keyframe,
     para poder ser interrompida no meio quando a rolagem muda de sentido. */
  .js .flutuante {
    transition: opacity .28s var(--ease-saida), transform .28s var(--ease-saida),
                visibility 0s linear .28s, background-color .2s var(--ease-saida);
  }
  .js .flutuante:not(.visivel) { transform: translateY(14px) scale(.96); }
  .js .flutuante.visivel {
    transition: opacity .28s var(--ease-saida), transform .28s var(--ease-saida),
                visibility 0s, background-color .2s var(--ease-saida);
  }
  .flutuante:active { transform: scale(.97); }

  /* Lançamentos: o fio desenha da margem para a direita, o débito entra e o crédito vem 120ms depois. */
  .anima .lancamento::after { transform: scaleX(0); transition: transform .7s var(--ease-saida) var(--atraso, 0ms); }
  .anima .lancamento > * {
    opacity: 0; transform: translateX(-8px);
    transition: opacity .5s var(--ease-saida) var(--atraso, 0ms), transform .6s var(--ease-saida) var(--atraso, 0ms);
  }
  .anima .lancamento > .livro__credito,
  .anima .lancamento > .livro__total {
    transition-delay: calc(var(--atraso, 0ms) + 120ms);
  }
  .anima .lancamento.revelado::after { transform: scaleX(1); }
  .anima .lancamento.revelado > * { opacity: 1; transform: none; }

  /* Razonetes: a barra do T desenha, o fio vertical desce, os itens assentam na pauta. */
  .anima .razonete .razonete__barra::after { transform: scaleX(0); transition: transform .7s var(--ease-saida) var(--atraso, 0ms); }
  .anima .razonete .razonete__corpo::before { transform: scaleY(0); transition: transform .6s var(--ease-saida) calc(var(--atraso, 0ms) + 250ms); }
  .anima .razonete li {
    opacity: 0; transform: translateY(6px);
    transition: opacity .45s var(--ease-saida), transform .5s var(--ease-saida);
    transition-delay: calc(var(--atraso, 0ms) + 300ms + var(--j, 0) * 45ms);
  }
  .anima .razonete .razonete__lado + .razonete__lado li { transition-delay: calc(var(--atraso, 0ms) + 420ms + var(--j, 0) * 45ms); }
  .razonete li:nth-child(2) { --j: 1; }
  .razonete li:nth-child(3) { --j: 2; }
  .razonete li:nth-child(4) { --j: 3; }
  .anima .razonete.revelado .razonete__barra::after { transform: scaleX(1); }
  .anima .razonete.revelado .razonete__corpo::before { transform: scaleY(1); }
  .anima .razonete.revelado li { opacity: 1; transform: none; }

  /* Complementares e princípios: só assentam, sem desenho. */
  .anima .complementares, .anima .principios li {
    opacity: 0; transform: translateY(10px);
    transition: opacity .6s var(--ease-saida) var(--atraso, 0ms), transform .7s var(--ease-saida) var(--atraso, 0ms);
  }
  .anima .complementares.revelado, .anima .principios li.revelado { opacity: 1; transform: none; }

  /* Duplo sublinhado do fechamento: desenha uma vez, da esquerda, como o fio dos lançamentos. */
  .anima .fechamento__titulo::after { transform: scaleX(0); transition: transform .9s var(--ease-saida) .15s; }
  .anima .fechamento__titulo.revelado::after { transform: scaleX(1); }

  /* A tinta da margem dupla desce junto com a leitura: a ponta acompanha 70% da altura da tela. */
  @supports (animation-timeline: view()) {
    .secao, .rodape { view-timeline: --folha block; view-timeline-inset: 0% 30%; }
    .secao > .margem-dupla::before, .rodape > .margem-dupla::before {
      animation: desce linear both;
      animation-timeline: --folha;
      animation-range: entry-crossing 0% exit-crossing 0%;
    }
    @keyframes desce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

/* Movimento reduzido: nada se desloca, o vídeo não toca (fica o pôster) e a única troca de
   estado que sobra, a do botão flutuante, vira opacidade curta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* ---------------------------------------------------------------- Telas médias */

@media (max-width: 1100px) {
  .faixa__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faixa__lista li:nth-child(odd) a { padding-left: 36px; }
  /* As duas linhas da faixa se separam por espaço, não por fio: nada fechado em caixa. */
  .faixa__lista { row-gap: calc(var(--linha) * .4); padding-bottom: calc(var(--linha) * .25); }
}

@media (max-width: 900px) {
  .razonetes { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .sobre__colunas { grid-template-columns: minmax(0, 1fr); }
  .principios { padding-left: 0; border-left: 0; padding-top: var(--linha); border-top: 1px solid var(--fio); }
  .fechamento__acao { grid-template-columns: minmax(0, 1fr); }
  .complementares { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* ---------------------------------------------------------------- Celular */

@media (max-width: 767px) {
  :root { --margem: 16px; --recuo: 32px; --lateral: 16px; --linha: 1.75rem; }

  .topo { height: 76px; padding-left: 26px; }
  .topo__nav { display: none; }
  .topo__nav + .botao--topo { margin-left: auto; }
  .topo__marca img { height: 48px; }
  .botao--topo { width: 48px; min-height: 48px; padding: 0; }
  .botao--topo .botao__rotulo {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* No celular o texto ocupa a largura toda, então o véu lateral não protege nada: o véu vem
     de cima e de baixo. Pior pixel, 390x844:
       topo, logo e botão ................................ logo 4,30:1 (o botão tem fundo próprio)
       título em osso .................................... 6,87:1 (AA grande 3)
       "fechando" em ouro ................................ 4,29:1 (AA grande 3)
       subtítulo em prata ................................ 5,71:1 (AA 4,5)
       link "Ver serviços" ............................... 12,53:1 (AA 4,5) */
  .hero::before {
    background:
      linear-gradient(180deg, rgb(9 10 12 / .80) 0, rgb(9 10 12 / .5) 90px, rgb(9 10 12 / 0) 200px),
      linear-gradient(0deg, rgb(9 10 12 / .55) 0%, rgb(9 10 12 / .25) 60%, rgb(9 10 12 / .15) 100%);
  }
  /* No celular a pauta do hero tem passo de 24px: o H1 de 2,15rem assenta em dois fios (48px)
     e o subtítulo de 17px em um. Largura de 110%: "fechando todo mês." mede cerca de 329px e
     cabe nos 342 disponíveis. */
  /* O corpo do H1 acompanha a largura para "fechando todo mês." (9,5 em de largura a 110%)
     caber numa linha até em 320 px: 3 linhas em qualquer celular. Teto de 2,15rem a partir de 390. */
  .hero { --linha: 1.5rem; --h1: min(2.15rem, calc((100vw - 50px) / 9.7)); --sub: 1.0625rem; }
  .hero h1 { font-stretch: 110%; letter-spacing: -.03em; }
  /* O texto ocupa a primeira tela e assenta na base dela; de 375x812 para cima a faixa mostra a
     borda de cima (64px) e segue abaixo da dobra, como no protótipo aprovado. Em tela mais baixa
     (320x640, 360x740) o texto já ocupa tudo e a faixa começa abaixo da dobra. */
  .hero__texto {
    min-height: calc(100svh - 64px);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: 120px; padding-bottom: calc(var(--linha) + 60px);
  }
  .hero__acoes { gap: .75rem 1.5rem; }

  .faixa { margin-left: 20px; }
  .faixa__lista a, .faixa__lista li:nth-child(odd) a { padding: .9rem 1rem .95rem; }
  .faixa__lista li:nth-child(odd) a { padding-left: 12px; }
  .faixa__pausa { bottom: calc(100% + 12px); }

  /* Cada frase do título numa linha inteira: "Você manda o que tem." mede 11,4 em a 110% de largura,
     então o corpo segue a tela (28px em 375 e 390, 23,5px em 320) e nenhuma palavra fica sozinha. */
  .titulo-secao { font-size: min(1.75rem, calc((100vw - 50px) / 11.5)); line-height: 1.3; }

  .livro tr { grid-template-columns: minmax(0, 1fr); row-gap: .15rem; min-height: 0; padding: .95rem 0; }
  .livro tr, .livro tr.livro__saldo { background: none; }
  /* Na grade do celular as linhas têm alturas variáveis: pauta e colunas não teriam onde assentar. */
  .livro-folha::before { display: none; }
  .livro__cabeca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .livro__debito, .livro__credito { font-size: 1rem; }
  .livro__saldo { padding-top: 1.25rem; }
  .livro__total { grid-column: auto; font-size: 1.6rem; }

  .razonete h3 { font-size: 1.3125rem; font-stretch: 112%; }
  .razonete__lado { padding-right: .85rem; }
  .razonete__lado + .razonete__lado { padding-left: .85rem; }
  .razonete li { font-size: .9375rem; }

  .complementares__lista { grid-template-columns: minmax(0, 1fr); }
  .complementares__lista li, .complementares__lista li:first-child {
    padding: .8rem 0; border-left: 0; border-top: 1px solid var(--fio-pauta);
  }

  .sobre__horizonte { height: 420px; }
  .sobre__horizonte img { object-position: 38% 45%; }

  /* "mês com a gente." (9 em a 115%) inteiro na segunda linha até em 320 px. */
  .fechamento__titulo { font-size: min(2rem, calc((100vw - 50px) / 9.2)); line-height: 1.12; }
  .fechamento__botoes .botao { width: 100%; }

  .rodape { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--linha) * 1.5 + 72px); }
  .rodape__dados { flex-direction: column; justify-content: flex-start; }
}