/* ═══════════════════════════════════════════════════════════════════════
   Apresentação de entrega · Carvalho AI
   Modelo reutilizável: cada cliente é uma cópia com outro conteúdo.
   Marca travada em agencia/marca/DECISOES.md — não improvise cor nem fonte.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Nasalization";
  src: url("fontes/Nasalization-Rg.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fontes/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  /* Paleta Brasa — medida, não inventada. Contrastes conferidos sobre os dois
     fundos escuros: concreto 11.5:1, brasa 5.48:1, brilho 7.84:1 (todos AA).
     O brasa NÃO serve de texto sobre o cinza #CDCDCB (2.9:1) — por isso o
     deck inteiro é escuro. */
  /* ── Tema escuro: a pagina e a tinta, o brasa e a linha ─────────────
     Voltou ao escuro por medicao, nao por gosto: texto claro sobre
     #121420 da 11,5 de contraste, contra 5,48 do preto sobre brasa. Mais
     que o dobro de folga — e e isso que deixa o texto miudo confortavel
     com as linhas correndo atras. */
  --profundo: #121420;
  --tinta: #1c1e2a;
  --concreto: #cdcdcb;
  --brasa: #fb5102;
  --brilho: #ff8a4c;

  --linha: rgba(205, 205, 203, 0.16);
  --linha-forte: rgba(205, 205, 203, 0.34);
    /* Opaco: transparencia sobre o fundo virava cinza abaixo do minimo.
     6,50 sobre o profundo e 5,87 sobre a tinta. */
  --apagado: #9a9a98;

  --display: "Nasalization", "Arial Black", sans-serif;
  --texto: "Satoshi", "Segoe UI", system-ui, sans-serif;

  /* margem lateral reservada para os trilhos da paleta */
  --trilho: 26px;  /* respiro lateral; o campo laranja vive fora dele */
  --gutter: clamp(20px, 5vw, 76px);
  --largura: 980px;   /* cabe dentro da coluna escura; nao aumentar sem alargar a coluna */

  /* tokens de deslocamento — reverter o movimento é mexer só aqui */
  --sobe: 34px;
  /* 1 = a revelacao NAO mexe em opacidade. Quatro vezes nesta folha o
     Lighthouse pegou um par de cores no meio do fade e reprovou o contraste
     — o texto estava certo em repouso e errado em transito. Movimento
     sozinho ja comunica a entrada, e sem opacidade o problema nao volta. */
  --op-in: 1;  /* sobre laranja, 0.85 ja derrubava o preto para perto do minimo */
  --saida: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }

/* ── O campo e a coluna ────────────────────────────────────────────────
   #campo é o laranja chapado com os pontos, pintado em canvas, fixo atrás
   de tudo. #coluna é a faixa escura no centro que segura a leitura.

   A coluna NÃO é decoração: texto claro sobre o brasa dá 2,10 de contraste
   e reprova. Ela é o que torna a página legível. Estreitá-la sem escurecer
   o texto quebra a acessibilidade da apresentação inteira. */
#campo {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--profundo);   /* se o WebGL falhar, sobra a cor, nao um buraco */
}
/* o componente cria o canvas dentro deste container */
#campo > div { width: 100%; height: 100%; }
#campo canvas { display: block; width: 100% !important; height: 100% !important; }

/* A coluna, medida e nao chutada: texto #cdcdcb em cima de uma particula
   acesa (#ff8a4c) da 1,47 de contraste — reprova com folga. Com este veu
   por cima, o mesmo pixel vai a 5,5, que passa. O veu era mais forte (0,86)
   quando o campo era a matriz de pontos, densa; as particulas cobrem uns
   2% da tela, entao 0,62 basta e deixa o efeito aparecer. O ponto fraco
   que sobra: o texto secundario, mais apagado (#9a9a98), cai a 3,1 se um
   caractere calhar exatamente em cima de uma particula acesa — o halo
   escuro do texto (text-shadow no body) e o que segura esse caso.
   Nas margens o veu vale zero, que e onde o efeito e para ser visto. */
#coluna {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(18, 20, 32, 0)    0%,
    rgba(18, 20, 32, 0.55) 12%,
    rgba(18, 20, 32, 0.62) 50%,
    rgba(18, 20, 32, 0.55) 88%,
    rgba(18, 20, 32, 0)   100%
  );
}

/* No celular quase nao ha margem sobrando: o texto ocupa a largura toda,
   entao a faixa clara tem de comecar praticamente na borda. */
@media (max-width: 760px) {
  #coluna {
    background: linear-gradient(
      90deg,
      rgba(18, 20, 32, 0)    0%,
      rgba(18, 20, 32, 0.60) 5%,
      rgba(18, 20, 32, 0.66) 50%,
      rgba(18, 20, 32, 0.60) 95%,
      rgba(18, 20, 32, 0)   100%
    );
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--profundo);
  color: var(--concreto);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }

a { color: var(--brilho); }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brasa);
  outline-offset: 3px;
  border-radius: 3px;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brasa);
  color: var(--profundo);
  padding: 12px 20px;
  z-index: 999;
  font-weight: 700;
}
.pular:focus { left: 12px; top: 12px; }

/* Texto que existe para o leitor de tela e some da tela. Substitui o icone de
   seta que marcava "abre em outra aba": a informacao continua, o icone
   generico sai. */
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ── Cabeçalho fixo ──────────────────────────────────────────────────── */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px calc(var(--trilho) + 16px);
  background: color-mix(in srgb, var(--profundo) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--saida), background 0.35s var(--saida);
}
.topo.rolado { border-bottom-color: var(--linha); }
.topo .marca { display: flex; align-items: center; gap: 12px; color: var(--concreto); }
.topo .marca svg { height: 22px; width: auto; }
.topo .marca span {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--apagado);
  border-left: 1px solid var(--linha-forte);
  padding-left: 12px;
}
@media (max-width: 720px) { .topo .marca span { display: none; } }

.indice {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.indice a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 0.68rem;
  color: var(--apagado);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.indice a:hover { color: var(--concreto); border-color: var(--linha-forte); }
.indice a[aria-current="true"] {
  color: var(--profundo);
  background: var(--brasa);
  border-color: var(--brasa);
}
/* O ultimo item do indice nao e numero, entao nao cabe no circulo: vira
   pilula com o nome escrito. Antes era uma seta sozinha — item de menu sem
   nome nenhum. */
.indice__nome {
  width: auto;
  padding: 0 14px;
  border-radius: 999px;
  border-color: var(--linha-forte);
  letter-spacing: 0.1em;
}
/* No celular o indice NAO some: sem ele a unica forma de chegar ao quinto
   projeto e rolar a apresentacao inteira. Os circulos encolhem e o rotulo
   "Entrega" sai — os cinco numeros cabem em 390px de largura. */
@media (max-width: 560px) {
  .indice { gap: 2px; }
  .indice a { width: 26px; height: 26px; font-size: .6rem; }
  /* .indice a vale 0-1-1 e .indice__nome vale 0-1-0: a classe sozinha PERDE,
     e media query nao soma especificidade. Por isso o seletor precisa ser
     tao especifico quanto o que ele esta sobrescrevendo. */
  .indice a.indice__nome { display: none; }
  .topo { padding: 10px 12px; }
  .topo .marca svg { height: 17px; }
}

/* ── Grade base ──────────────────────────────────────────────────────── */
.faixa { padding: clamp(64px, 11vh, 128px) calc(var(--trilho) + var(--gutter)); }
.centro { max-width: var(--largura); margin-inline: auto; }
.estreito { max-width: 780px; }

.rotulo {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brilho);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rotulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--linha-forte), transparent);
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; }
h1 { font-size: clamp(2.1rem, 1.2rem + 4.2vw, 4.6rem); margin: 0 0 22px; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.7rem); margin: 0 0 20px; }
h3 { font-size: clamp(1.02rem, 0.94rem + 0.5vw, 1.24rem); margin: 0 0 10px; }

p { margin: 0 0 16px; max-width: 68ch; }
.grande { font-size: clamp(1.06rem, 1rem + 0.4vw, 1.3rem); line-height: 1.6; }
.fraco { color: var(--apagado); }

/* explicação leiga: fica visualmente separada do parágrafo técnico */
.leigo {
  border-left: 2px solid var(--brasa);
  padding: 2px 0 2px 16px;
  margin: 0 0 16px;
  color: var(--apagado);
  font-size: 0.95rem;
  max-width: 62ch;
}
.leigo b { color: var(--concreto); font-weight: 700; }

/* ── Capa ────────────────────────────────────────────────────────────── */
.capa {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px calc(var(--trilho) + var(--gutter)) 64px;
  position: relative;
  overflow: hidden;
}
/* Grade, nao flex: em flex os pares quebravam um por linha e o rotulo ficava
   colado no valor de CIMA — lia-se "James Andrade / CARGO" como um bloco so.
   Em grade cada par ocupa a propria celula. */
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  justify-content: center;
  gap: 26px 44px;
  margin: 44px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--linha);
  max-width: 840px;
}
.ficha div { min-width: 0; }
.ficha dt {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 5px;
}
.ficha dd { margin: 0; font-weight: 700; font-size: 1.02rem; }

.role {
  margin-top: 52px;
  font-family: var(--display);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: var(--apagado);
  display: flex;
  align-items: center;
  gap: 12px;
}
.role::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--brasa);
  animation: puxa 2.4s var(--saida) infinite;
}
@keyframes puxa {
  0%, 100% { transform: scaleX(0.35); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
}

/* ── Sumário ─────────────────────────────────────────────────────────── */
.sumario ol { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.sumario li { counter-increment: p; border-top: 1px solid var(--linha); }
.sumario li:last-child { border-bottom: 1px solid var(--linha); }
.sumario a {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 22px 8px;
  text-decoration: none;
  color: var(--concreto);
  transition: background 0.35s var(--saida), padding-left 0.35s var(--saida);
}
.sumario a:hover, .sumario a:focus-visible {
  background: rgba(251, 81, 2, 0.08);
  padding-left: 18px;
}
.sumario a::before {
  content: counter(p, decimal-leading-zero);
  font-family: var(--display);
  font-size: 0.82rem;
  color: var(--brasa);
}
.sumario .nome { font-family: var(--display); font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.7rem); }
.sumario .diz { color: var(--apagado); font-size: 0.9rem; }
@media (max-width: 640px) {
  .sumario a { grid-template-columns: 40px 1fr; }
  .sumario .diz { grid-column: 2; }
}

/* ── Hero de projeto: captura real + véu laranja ────────────────────────
   A captura é do site no ar, tirada em 1600×900. O véu é uma camada única
   de brasa em multiply mais um degradê de leitura embaixo — sem isso o
   texto branco cai em cima de foto clara e o contraste morre. */
.hero {
  /* o hero continua escuro: e foto com veu, e o texto branco vive dela */
  background: #121420;
  position: relative;
  min-height: min(88svh, 760px);
  display: flex;
  align-items: flex-end;
  padding: clamp(48px, 9vh, 96px) calc(var(--trilho) + var(--gutter));
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--linha);
}
.hero .chapa {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero .chapa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.72) contrast(1.04);
  will-change: transform;
}
/* Duas camadas, cada uma com um trabalho:
   1) a base escura garante que MEU texto ganhe do texto que já existe dentro
      da captura — sem ela o título do site fotografado compete com o título
      da apresentação e os dois ficam ilegíveis;
   2) o laranja é o véu de marca pedido, por cima da foto e por baixo da base. */
.hero .veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(18,20,32,.97) 0%, rgba(18, 20, 32, 0.94) 42%, rgba(18, 20, 32, 0.62) 70%, rgba(18, 20, 32, 0.28) 100%),
    linear-gradient(118deg, rgba(251, 81, 2, 0.78), rgba(255, 138, 76, 0.42) 52%, rgba(251, 81, 2, 0.66));
}
.hero .conteudo { max-width: 900px; }
/* O numero sai do fluxo e vira marca d'agua no alto: em cima do titulo ele
   colidia com o texto que ja existe DENTRO da captura, e os dois ficavam
   ilegiveis. Fora do fluxo, some da leitura e continua marcando o capitulo. */
.hero .numero {
  position: absolute;
  top: clamp(72px, 12vh, 130px);
  right: calc(var(--trilho) + var(--gutter));
  font-family: var(--display);
  font-size: clamp(3.4rem, 2rem + 8vw, 9.5rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.34);
  margin: 0;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 700px) { .hero .numero { font-size: 4rem; top: 84px; } }
.hero h2 {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.1rem);
  color: #fff;
  margin: 0 0 14px;
  text-shadow: 0 2px 30px rgba(18, 20, 32, 0.6);
}
.hero .linhafina {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.22rem);
  color: rgba(255, 255, 255, 0.94);
  max-width: 56ch;
  margin-bottom: 26px;
  text-shadow: 0 1px 18px rgba(18, 20, 32, 0.7);
}

/* ── Botões ──────────────────────────────────────────────────────────── */
/* max-width e quebra: o botao da auditoria tem a URL inteira como rotulo, e
   "ceasasustentabilidade.vercel.app/bancodealimentos" empurrava a tela do
   celular 51px para fora. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 4px;
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.25s var(--saida), background 0.25s, border-color 0.25s, color 0.25s;
}
.botao:hover { transform: translateY(-2px); }
/* ── Botão no gesto do Auros ────────────────────────────────────────────
   Mecanismo copiado da extensão: um degradê de quatro paradas esticado a
   280% da largura, parado na ponta mais fechada e deslizando para a mais
   clara no hover. Não usa @keyframes — é só background-position em
   transição, que roda no compositor e não custa quadro.
   O que mudou foi a paleta: as quatro paradas são todas laranja, de propósito.
   No original o degradê termina quase preto, e com o rótulo escuro que a peça
   usa isso apagaria o texto no fim do percurso. Aqui o pior caso é o brasa
   puro, que com o preto dá 5,48. */
.botao--brasa {
  background: linear-gradient(90deg, #ffd3b8, #ffa070, #ff8a4c, #fb5102);
  background-size: 280% 100%;
  background-position: 100% 0%;
  /* TEXTO PRETO, e não --concreto. Quando o tema voltou ao escuro, o
     --concreto virou cinza-claro e este botão ficou com 2,10 de contraste
     sobre o gradiente laranja. O Lighthouse não pegou: ele NÃO SABE medir
     contraste sobre gradiente e simplesmente pula o elemento — ponto cego
     da ferramenta, achado a olho.
     Medido nas quatro paradas do gradiente, com #121420:
       #ffd3b8 13,31 · #ffa070 9,17 · #ff8a4c 7,84 · #fb5102 5,48 */
  color: #121420;
  font-weight: 700;
  border-color: transparent;
  transition: background-position 0.5s ease, transform 0.12s var(--saida);
}
.botao--brasa:hover { background-position: 0% 0%; transform: none; }

.botao--linha { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.botao--linha:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }
.botao--escuro { border-color: var(--linha-forte); color: var(--concreto); }
.botao--escuro:hover { border-color: var(--brasa); color: var(--brilho); }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Blocos de conteúdo ──────────────────────────────────────────────── */
.duas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) { .duas { grid-template-columns: 1fr; } }

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
/* OPACO de proposito: painel translucido deixaria o ponto preto do campo
   passar por tras do texto, e ai o contraste medio nao vale nada. */
.cartao {
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 22px;
  background: var(--tinta);
  transition: border-color 0.35s var(--saida), transform 0.35s var(--saida);
}
.cartao:hover { border-color: rgba(251, 81, 2, 0.5); transform: translateY(-3px); }
.cartao h3 { color: var(--concreto); }
.cartao p { font-size: 0.94rem; color: var(--apagado); margin: 0; }
.cartao .marca-num {
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--brasa);
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-top: 1px solid var(--linha);
  font-size: 0.98rem;
}
.lista li:last-child { border-bottom: 1px solid var(--linha); }
.lista li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  width: 9px;
  height: 2px;
  background: var(--brasa);
}
.lista b { color: #fff; font-weight: 700; }

/* ── Auditoria ───────────────────────────────────────────────────────── */
/* sem fundo proprio: quem escurece e a coluna. Fundo de ponta a ponta
   taparia o campo laranja nas margens. */
.auditoria { border-block: 1px solid var(--linha); }

.notas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 26px 0 8px;
}
.nota {
  /* painel PRETO de proposito: sobre o laranja nenhum verde ou ambar passa
     em AA (medi 2,43 e 2,86). No preto as cores do proprio Lighthouse
     voltam com folga, e o cartao ganha destaque na pagina laranja. */
  border: 1px solid var(--concreto);
  border-radius: 8px;
  padding: 18px 16px;
  background: #121420;
  text-align: center;
}
.nota .val {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem);
  line-height: 1;
  display: block;
}
.nota .cat {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);
  font-weight: 700;
}
/* Medidos sobre o painel preto #121420: verde 9,3 · ambar 11,6 · brilho 7,8 */
.nota[data-faixa="bom"] .val { color: #6fd08c; }
.nota[data-faixa="medio"] .val { color: #ffc14d; }
.nota[data-faixa="ruim"] .val { color: #ff8a4c; }
.nota .cat { color: #cdcdcb; }

.medidas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--linha);
  list-style: none;
  font-size: 0.9rem;
}
.medidas b { font-family: var(--display); color: var(--concreto); font-weight: 400; }
.medidas span { color: var(--apagado); }

.aba {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  margin-bottom: 4px;
}
.aba button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--apagado);
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  min-height: 34px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.aba button[aria-selected="true"] { background: var(--brasa); color: var(--profundo); }
.aba button:hover:not([aria-selected="true"]) { color: var(--concreto); }

/* ── Prazos ──────────────────────────────────────────────────────────── */
.prazos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.prazo {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--brasa);
  border-radius: 8px;
  padding: 26px;
  background: var(--tinta);
}
.prazo .dias {
  font-family: var(--display);
  font-size: 2.6rem;
  color: var(--brasa);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.prazo h3 { margin-bottom: 10px; }
.prazo p { font-size: 0.95rem; color: var(--apagado); margin-bottom: 0; }
.prazo ul { margin: 12px 0 0; padding-left: 18px; font-size: 0.93rem; color: var(--apagado); }
.prazo li { margin-bottom: 5px; }

/* ── Próximos passos ─────────────────────────────────────────────────── */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 16px; }
.passo {
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 24px;
  background: var(--tinta);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.35s var(--saida), transform 0.35s var(--saida);
}
.passo:hover { border-color: rgba(251, 81, 2, 0.55); transform: translateY(-3px); }
.passo .tag {
  align-self: flex-start;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  background: rgba(251, 81, 2, 0.16);
  color: var(--brilho);
}
.passo p { font-size: 0.94rem; color: var(--apagado); margin: 0; }
.passo .porque { font-size: 0.88rem; color: var(--concreto); margin: 0; }
.passo .porque b { color: var(--brilho); }

/* ── Rodapé ──────────────────────────────────────────────────────────── */
.rodape {
  border-top: 1px solid var(--linha);
  padding: clamp(56px, 9vh, 96px) calc(var(--trilho) + var(--gutter)) 44px;
}
.rodape .assinatura svg { height: 30px; color: var(--concreto); }
.rodape .contato {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  align-items: center;
  margin: 26px 0 34px;
}
.rodape .fino {
  font-size: 0.82rem;
  color: var(--apagado);
  border-top: 1px solid var(--linha);
  padding-top: 20px;
  margin: 0;
}

/* ── Reveal ──────────────────────────────────────────────────────────── */
/* A opacidade não cai a zero (fica em --op-in): texto em fade de 0 quebra a
   leitura do contraste no meio da animação e some se o script falhar. */
.reveal { opacity: var(--op-in); transform: translateY(var(--sobe)); }
.reveal.visivel { transform: none; transition: transform 0.7s var(--saida); }
/* sem JS o conteúdo tem que aparecer inteiro */
.sem-js .reveal { opacity: 1; transform: none; }

@media print {
  .trilho, .topo, .role { display: none; }
  body { background: #fff; color: #000; }
}

/* Cartões de IA: mesma peça, borda de brasa à esquerda para separar os dois
   blocos de próximos passos sem inventar um segundo estilo de cartão. */
.passo--ia { border-left: 3px solid var(--brasa); }
.passo--ia .tag {
  /* Brilho, nao brasa. O container e .reveal e para em opacity .85 durante a
     entrada — brasa com texto tinta cai para 4.23 nesse instante e reprova.
     O brilho no mesmo ponto da 5.95. Pela terceira vez nesta pagina: mede-se
     o contraste na cor JA misturada, nunca na declarada. */
  background: var(--brilho);
  color: var(--profundo);
  font-weight: 700;
}
.passo i { font-style: italic; }


/* ── Texto centralizado ────────────────────────────────────────────────
   Centralizado no bloco, mas NÃO na lista: item de lista centralizado perde
   o alinhamento da marca e vira um monte de linhas soltas. Lista, tabela e
   cartão continuam alinhados à esquerda por dentro. */
.capa,
.faixa .centro,
.rodape .centro { text-align: center; }

.capa p, .faixa p, .rodape p,
.capa h1, .faixa h2, .faixa h3 { margin-inline: auto; }

.rotulo { justify-content: center; }
.rotulo::after { display: none; }
.rotulo::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brasa);
  flex: none;
}

.capa { align-items: center; }
.capa .assinatura { display: flex; justify-content: center; }
/* SEM ALTURA, o SVG colapsa para 0x0 e a marca some da capa — foi o que
   aconteceu quando uma limpeza minha levou esta regra junto. O elemento
   continuava no HTML, invisivel. Se voltar a sumir, e aqui que se olha. */
.capa .assinatura svg {
  height: clamp(34px, 5.2vw, 54px);
  width: auto;
  color: var(--concreto);
}
.capa h1, .capa .subtitulo { margin-inline: auto; }
.ficha { justify-content: center; text-align: center; }
.role { justify-content: center; }
.botoes { justify-content: center; }
.contato { justify-content: center; }

/* a explicação leiga vira bloco centrado com filete em cima: barra à
   esquerda com texto centralizado fica torta */
.leigo {
  border-left: 0;
  border-top: 2px solid var(--brasa);
  padding: 14px 0 0;
  text-align: center;
  margin-inline: auto;
}

/* o que continua à esquerda, de propósito */
.lista li, .sumario a, table, .medidas { text-align: left; }
.duas > div { text-align: center; }
.cartao, .passo, .prazo { text-align: center; }
.passo .tag { align-self: center; }
.prazo { border-left: 0; border-top: 3px solid var(--brasa); }
.prazo ul { padding-left: 0; list-style: none; }
.lista li::before { display: none; }
.lista li { padding-left: 0; }
.medidas { justify-content: center; text-align: center; }
.notas { justify-items: center; }
.aba { margin-inline: auto; }
.pagina-auditada > div:first-child { justify-content: center !important; }

/* ── Celular ───────────────────────────────────────────────────────────
   A ficha em duas colunas vazava a tela e o `overflow-x: hidden` do body
   escondia o vazamento em vez de resolver — o teste de largura dava zero
   e mentia. Uma coluna só resolve de fato. */
@media (max-width: 860px) {
  .ficha {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 100%;
  }
  .ficha dd { font-size: 0.98rem; }
  .duas { gap: 34px; }
}


/* ── Sombra de leitura ─────────────────────────────────────────────────
   Agora o ponto preto cobre a tela inteira, inclusive atrás das palavras.
   A média de contraste continua 5,48 (preto sobre brasa), mas onde o ponto
   encosta na haste da letra o contraste local vai a zero e a leitura sofre.

   A sombra é um halo da PRÓPRIA cor do chão: ela apaga o ponto no raio de
   poucos pixels ao redor do glifo, sem clarear nem escurecer o texto. Por
   isso o Lighthouse continua medindo o par preto/laranja — a sombra não
   muda a cor de nada, só limpa o fundo imediato. */
body {
  /* camadas REPETIDAS de proposito: text-shadow soma opacidade a cada
     repeticao, e uma so nao apagava o ponto colado na haste da letra. */
  /* Halo da cor do chao, agora escuro: limpa a linha que passa colada na
     haste da letra sem clarear nem escurecer o texto. Camadas repetidas
     porque text-shadow soma opacidade a cada repeticao. */
  text-shadow:
    0 0 2px #121420, 0 0 2px #121420, 0 0 2px #121420,
    0 0 5px #121420, 0 0 5px #121420,
    0 0 10px #121420;
}
/* dentro de painel opaco não há ponto atrás, então a sombra só sujaria */
/* Estes tem fundo proprio, entao nao ha ponto atras deles e o halo so
   sujaria. No botao o halo era pior que sujeira: o laranja da sombra
   sangrava sobre o preto do fundo e produzia #8b3410, que o Lighthouse
   media como o par real e reprovava em 2,41. */
.nota, .cartao, .passo, .prazo, .hero, .topo,
.botao, .aba button, .indice a { text-shadow: none; }

/* ── Cartões ───────────────────────────────────────────────────────────
   A caixa escura sobre o laranja foi reprovada pelo dono. Agora é contorno
   preto sobre o próprio chão: peça chapada, linguagem de cartaz. O que
   antes era cor de fundo virou espessura de traço. */
.cartao, .passo, .prazo, .nota {
  /* OPACO: painel translucido deixaria a linha do campo passar por tras do
     texto, e ai o contraste medio nao vale nada. */
  background: var(--tinta);
  border: 1px solid var(--linha);
  border-radius: 10px;
  text-shadow: none;
}
.cartao:hover, .passo:hover { border-color: rgba(251,81,2,.6); transform: translateY(-3px); }
.passo--ia { border-top: 4px solid var(--brasa); }
.prazo { border-top: 4px solid var(--brasa); }
.cartao p, .passo p, .prazo p, .prazo li { color: var(--apagado); }
.passo .porque b, .cartao .marca-num, .prazo .dias { color: var(--brilho); }

/* etiqueta: preenchida em preto, texto laranja — 5,48 */
.passo .tag, .passo--ia .tag {
  background: var(--brasa);
  color: var(--profundo);
  font-weight: 700;
}

/* ── Nota do Lighthouse ────────────────────────────────────────────────
   Sem caixa escura e sem número colorido: sobre laranja nenhum verde ou
   âmbar passa em AA (medi 2,43 e 2,86). O número fica preto, e o estado
   bom/médio/fraco é dito por uma BARRA proporcional — que também resolve o
   critério de não usar cor como único portador de significado. */
.nota { padding: 20px 16px 14px; position: relative; overflow: hidden; }
/* .nota[data-faixa=...] .val vale 0-2-1; .nota .val vale 0-2-0 e PERDERIA,
   deixando o numero verde/ambar do tema escuro. Segunda vez que esta
   armadilha aparece nesta folha. */
/* medidos sobre o painel #1c1e2a: verde 9,0 · ambar 11,2 · brilho 7,1 */
.nota[data-faixa="bom"] .val { color: #6fd08c; }
.nota[data-faixa="medio"] .val { color: #ffc14d; }
.nota[data-faixa="ruim"] .val { color: #ff8a4c; }
.nota[data-faixa] .cat { color: var(--apagado); font-weight: 700; }
.nota::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background: rgba(205, 205, 203, 0.14);
}
.nota::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 8px;
  width: var(--preenchido, 0%);
  background: var(--brasa);
}


/* mesmo gesto de pressao em todo botao, como na extensao */
.botao:active, .aba button:active { transform: scale(0.98); }

/* os de contorno ganham o mesmo deslize, so que preenchendo o vazio */
.botao--escuro, .botao--linha {
  background: linear-gradient(90deg, #ffd3b8, #ffa070, #ff8a4c, #fb5102);
  background-size: 280% 100%;
  background-position: 100% 0%;
  transition: background-position 0.5s ease, transform 0.12s var(--saida), border-color 0.25s;
}
.botao--escuro { background: none; border-color: var(--linha-forte); color: var(--concreto); }
.botao--escuro:hover { background: linear-gradient(90deg,#ffd3b8,#ffa070,#ff8a4c,#fb5102); background-size:280% 100%; background-position: 0% 0%; color: var(--profundo); border-color: var(--brasa); }
/* no hero o fundo e escuro: la o botao continua vazado com texto claro */
.hero .botao--linha { background: transparent; border-color: rgba(255,255,255,.55); }
.hero .botao--linha:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ── Peso do texto ─────────────────────────────────────────────────────
   Satoshi e variavel de 300 a 900, entao dava para subir o corpo inteiro
   sem trocar de arquivo nem pesar um byte a mais. A Nasalization dos
   titulos so tem um peso — la o destaque continua vindo do tamanho. */
body { font-weight: 500; }
p, li, dd, td, th, .diz, .porque, .leigo, .medidas, .var__diz { font-weight: 500; }
b, strong, .lista b, .medidas b { font-weight: 800; }
.fraco, .apagado { font-weight: 500; }
.cat, .tag, .rotulo, .nota .cat { font-weight: 700; }
.botao { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   ABERTURA
   ══════════════════════════════════════════════════════════════════════ */
#abertura {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--profundo);
  transition: opacity 0.6s var(--saida), visibility 0.6s;
}
#abertura[hidden] { display: none; }
#abertura.saiu { opacity: 0; visibility: hidden; pointer-events: none; }

.abertura__miolo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: min(420px, 78vw);
}
.abertura__marca {
  width: 100%;
  height: auto;
  color: var(--concreto);
  /* o traço da marca se desenha enquanto carrega */
  animation: respira-marca 2.6s var(--saida) infinite;
}
@keyframes respira-marca {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}
.abertura__barra {
  width: 100%;
  height: 3px;
  background: rgba(205, 205, 203, 0.16);
  border-radius: 3px;
  overflow: hidden;
}
.abertura__barra i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brasa), var(--brilho));
  /* a largura é escrita pelo JS conforme os arquivos chegam */
  transition: width 0.35s var(--saida);
}
.abertura__conta {
  margin: 0;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--apagado);
  font-variant-numeric: tabular-nums;
}

/* enquanto carrega, a página fica parada embaixo da cortina */
html.carregando body { overflow: hidden; }

/* ── Entrada, depois que a cortina sobe ────────────────────────────────
   Escalonada: cada peça da capa entra com um atraso próprio. É o momento
   de maior impacto da peça, e é onde vale gastar movimento. */
html.carregando .capa > *:not(.reticula) { opacity: 0; }
body.pronto .capa > *:not(.reticula) {
  animation: sobe-entrada 0.9s var(--saida) both;
}
body.pronto .capa .assinatura { animation-delay: 0.05s; }
body.pronto .capa .rotulo     { animation-delay: 0.16s; }
body.pronto .capa h1          { animation-delay: 0.26s; }
body.pronto .capa .subtitulo  { animation-delay: 0.38s; }
body.pronto .capa .ficha      { animation-delay: 0.5s; }
body.pronto .capa .role       { animation-delay: 0.66s; }
@keyframes sobe-entrada {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* a barra da nota cresce até o valor, em vez de já nascer cheia */
.nota::after { transition: width 1.1s var(--saida); }