/* ============================================================
   zeithco.com V7

   Esta versão NÃO é uma interpretação: é a execução do mockup que o
   Founder desenhou e entregou em 24/08/2026. Antes dela vieram duas
   tentativas minhas, as duas reprovadas por ele — a V5 (rolagem
   sequestrada, "ficou uma merda") e a V6 (preto e branco no estilo
   aeroli.to, com símbolos de linha que ele chamou de ridículos).

   O QUE FOI MEDIDO NO MOCKUP, não chutado:
     · fundo escuro  srgb(10,18,22)   -> #0A1216
     · fundo claro   srgb(240,238,234)-> #F0EEEA
     · texto escuro  srgb(33,36,37)   -> #212425
     · o acento era dourado #B08D57 e virou AZUL em 24/08 (ver :root)
     · titulo em serifa de alto contraste, corpo em sans geométrica
     · seções ALTERNAM claro e escuro; é esse ritmo que dá o tom, não
       um efeito

   Tipografia: Playfair Display (títulos) + Jost (todo o resto),
   as duas auto-hospedadas em /fonts. Zilla Slab e Courier Prime, da
   V5/V6, saíram: o mockup usa serifa de alto contraste com sans
   geométrica, e slab com monoespaçada não chega perto disso.

   As oito ilustrações são do Founder, geradas por ele, com fundo
   transparente de verdade (conferido peça por peça sobre claro e sobre
   escuro antes de entrar). Convertidas para WebP: 11MB viraram 1,5MB
   sem perder o canal alfa.
   ============================================================ */

:root {
  --tinta:        #0A1216;
  --tinta-2:      #101A20;
  --creme:        #F0EEEA;
  --creme-2:      #E7DFD3;

  /* O ACENTO E AZUL desde 24/08, por decisao do Founder ("nao to gostando
     desse dourado, troca tudo que e dourado por azul"). Isso reconcilia a
     home com identity.md §6 / D46, que ja declarava #20BDF3 canonico e que
     o preto/creme/dourado contrariava.

     SAO DOIS TONS, E NAO UM, porque o manual de identidade e explicito:
     "#20BDF3 sobre #FFFFFF: 2,18:1" e "NAO usar ZEITH Blue como texto
     normal sobre fundo branco". Trocar tudo pelo azul claro deixaria todo
     rotulo e todo preco das secoes creme ilegivel.
       · --ouro       = Blue Deep #087DA8, para as secoes CREME
       · --ouro-claro = ZEITH Blue #20BDF3
     Nas secoes escuras os dois sobem um degrau (ver a regra logo abaixo de
     :root), entao `var(--ouro)` resolve sozinho para o azul certo conforme
     a pele da secao, sem precisar duplicar regra nenhuma.

     Os nomes --ouro/--ouro-claro FICAM de proposito: renomear para --azul
     tocaria ~40 declaracoes por puro cosmetico, e o proximo que ler estas
     linhas ja sabe que o nome e historico. */
  --ouro:         #087DA8;
  --ouro-claro:   #20BDF3;

  --claro:        #F5F4F0;
  --claro-2:      rgba(245, 244, 240, .70);
  /* .46 dava 4,15:1 sobre o fundo escuro -- abaixo do minimo de 4,5:1, e
     o Lighthouse reprovou o rodape inteiro por isso em 24/08. A .56 da
     5,8:1 e continua sendo o terceiro degrau de brilho, abaixo de
     --claro (1) e --claro-2 (.70). */
  --claro-3:      rgba(245, 244, 240, .56);
  --escuro:       #212425;
  --escuro-2:     #5B5B5B;

  --fio-claro:    rgba(245, 244, 240, .16);
  --fio-escuro:   rgba(33, 36, 37, .16);

  /* INVERTIDAS a pedido do Founder: Quicksand assume os titulos e
     Special Elite assume corpo, rotulos e botoes.
     Duas consequencias que viraram regra nesta folha:
     1. Special Elite tem UM peso so (400). Qualquer font-weight acima
        disso faz o navegador engordar a letra por conta propria, e o
        desgaste da maquina de escrever vira borrao. Por isso TODO texto
        em Special Elite roda em 400, e enfase se faz por COR.
     2. Stack Sans Notch tambem tem UM PESO SO (400) -- conferido na
        API do Google Fonts, que devolve zero faces para wght@100..900.

     CONSEQUENCIA QUE MANDA NESTA FOLHA INTEIRA: as duas familias do
     site tem uma unica espessura. Nao existe negrito em lugar nenhum, e
     pedir um faz o navegador engordar a letra sozinho, o que suja as
     duas. Entao a hierarquia se faz por TAMANHO, CAIXA, COR e
     ESPACEJAMENTO -- nunca por peso. Se um dia algo aqui precisar de
     enfase, a resposta e dourado ou caixa alta, nao bold. */
  --titulo: 'Stack Sans Notch', 'Arial Narrow', Helvetica, Arial, sans-serif;
  --dado:   'Special Elite', 'Courier New', Courier, monospace;
  --serifa: var(--titulo);
  --sans:   var(--dado);

  --margem: 64px;
  --coluna: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--tinta);
  color: var(--claro);
  font-family: var(--dado);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* O acento sobe um degrau em tudo que tem fundo escuro: la o Blue Deep
   fica apagado e o ZEITH Blue e que canta. Como e redefinicao de custom
   property, todo var(--ouro) dentro destes escopos passa a resolver para
   o tom claro sozinho -- inclusive dentro dos SVG dos diagramas. */
.sec--escura, .fecho, .topo, dialog.ficha {
  --ouro:       #20BDF3;
  --ouro-claro: #75D9FF;
}

.faixa { padding: 0 var(--margem); }
.dentro { width: 100%; max-width: var(--coluna); margin: 0 auto; }

/* ============================================================
   AS DUAS PELES — o ritmo claro/escuro é o desenho
   ============================================================ */
.sec { padding: 92px 0; position: relative; overflow: hidden; }
.sec--escura { background: var(--tinta); color: var(--claro); }
/* dois capitulos escuros seguidos (03 e 04) virariam um bloco so sem
   isto: o fio marca onde um termina e o outro comeca */
.sec--escura + .sec--escura { border-top: 1px solid var(--fio-claro); }
.sec--clara  { background: var(--creme); color: var(--escuro); }

.sec--escura .corpo { color: var(--claro-2); }
.sec--clara  .corpo { color: var(--escuro-2); }
.sec--escura .fio { background: var(--fio-claro); }
.sec--clara  .fio { background: var(--fio-escuro); }

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.rotulo {
  font-family: var(--dado);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro);
}

h1, h2 {
  font-family: var(--titulo);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.008em;
}
h1 { font-size: clamp(2.125rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: 22px; }
h3 {
  font-family: var(--dado);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* Maquina de escrever no corpo pede mais ar: a letra e larga, tem
   desgaste na borda e cansa se as linhas ficarem longas ou coladas. */
.corpo {
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.78;
  max-width: 42ch;
}
.corpo + .corpo { margin-top: 15px; }
/* o primeiro paragrafo estava nascendo colado no titulo: h2 so tinha
   margem em cima, e nada empurrava o texto para baixo */
h2 + .corpo, h1 + .corpo { margin-top: 20px; }
.corpo strong { font-weight: 400; }
.sec--escura .corpo strong { color: var(--ouro-claro); }
.sec--clara  .corpo strong { color: var(--ouro); }

/* A frase que prepara o titulo. Substituiu o antigo `.grito`, que era
   caixa alta grande e nao funcionou: com uma espessura so, a Stack Sans
   Notch em caixa alta perde o caráter e lê como sans de sistema. Agora a
   preparacao e pequena e o peso fica com o titulo, que e onde a pergunta
   passou a morar. */
.lead {
  font-family: var(--dado);
  font-size: 1.0625rem;
  line-height: 1.62;
  margin-top: 20px;
  color: var(--escuro-2);
}
.sec--escura .lead { color: var(--claro-2); }
.lead + h2 { margin-top: 16px; }

/* ============================================================
   BOTÃO E LINK
   ============================================================ */
.botao {
  display: inline-block;
  margin-top: 26px;
  padding: 13px 26px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.sec--escura .botao:hover { background: var(--claro); color: var(--tinta); }
.sec--clara  .botao:hover { background: var(--escuro); color: var(--creme); }
.botao + .botao { margin-left: 12px; }

.seta { margin-left: 10px; }

/* ============================================================
   TOPO
   ============================================================ */
.topo {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 18, 22, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fio-claro);
}
.topo .dentro { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.marca { font-size: 15px; font-weight: 400; letter-spacing: .2em; color: var(--claro); }
.topo nav { display: flex; gap: 30px; font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--claro-2); }
.topo nav a:hover { color: var(--ouro-claro); }

/* ============================================================
   ABERTURA — o círculo de fio com o título dentro
   ============================================================ */
.hero { min-height: calc(100vh - 66px); display: grid; place-items: center; padding: 70px 0; }
.hero__anel {
  position: relative;
  width: min(72vw, 640px);
  aspect-ratio: 1;
  border: 1px solid rgba(32, 189, 243, .5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8%;
}
/* o ponto que marca o topo do anel, como no mockup */
.hero__anel::before {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--ouro);
}
/* O Founder nao gostou do "ZEITH CO." em dourado. A assinatura da marca
   passa a ser creme discreto; o dourado fica so nos rotulos numerados
   dos capitulos, que e onde ele funciona como acento e nao como logo. */
.hero .rotulo, .fecho .rotulo { color: var(--claro-3); letter-spacing: .3em; }
.hero h1 { margin-top: 20px; }
.hero .corpo { margin: 22px auto 0; max-width: 40ch; }
.hero__desce {
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  border: 1px solid rgba(32, 189, 243, .5);
  border-radius: 50%;
  background: var(--tinta);
  display: grid; place-items: center;
  color: var(--ouro-claro);
  font-size: 15px;
}

/* ============================================================
   CAPÍTULO — texto de um lado, ilustração do outro
   ============================================================ */
.cap .dentro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.cap--inverso .dentro > *:first-child { order: 2; }
.cap__arte { display: grid; place-items: center; }
.cap__arte img { width: 100%; max-width: 520px; }

/* a peça da premissa sangra pela borda direita, como no mockup */
.cap--sangra .dentro { gap: 20px; }
.cap--sangra .cap__arte { margin-right: calc(var(--margem) * -1); }
.cap--sangra .cap__arte img { max-width: none; }

/* ============================================================
   ENTRADA EM CENA

   A regra so vale quando o <html> tem a classe `anima`, que o proprio
   script coloca. Sem JavaScript, ou com "reduzir movimento" ligado no
   sistema, nada disso existe e a pagina aparece inteira de uma vez.
   Conteudo nunca depende de animacao para ser lido.

   So transform e opacity. Nada de animar altura, margem ou sombra: isso
   faz o navegador recalcular o layout a cada quadro.
   ============================================================ */
.anima [data-ent] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1) var(--atraso, 0ms),
              transform .9s cubic-bezier(.16, 1, .3, 1) var(--atraso, 0ms);
  will-change: transform, opacity;
}
.anima [data-ent].vis { opacity: 1; transform: none; }
.anima [data-ent].vis { will-change: auto; }

/* a ilustracao entra de lado, na direcao de onde ela mora */
.anima .cap__arte[data-ent] { transform: translateY(16px) scale(.965); }
.anima .cap__arte[data-ent].vis { transform: none; }

/* ---------- o desenho se traca ---------- */
/* pathLength=1 deixa o comprimento independente do raio, entao todos os
   circulos levam o mesmo tempo para fechar, sem calculo por peca */
.anima .dg__anel, .anima .dg__guia, .anima .dg__disco, .anima .dg__pontilhado {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.anima .vis .dg__anel, .anima .vis .dg__guia,
.anima .vis .dg__disco, .anima .vis .dg__pontilhado {
  animation: traca 1.5s cubic-bezier(.22, 1, .36, 1) forwards;
}
.anima .vis .dg__disco { animation-delay: .18s; }
.anima .vis .dg__pontilhado { animation-delay: .34s; }
@keyframes traca { to { stroke-dashoffset: 0; } }

/* os seis marcos do CRITERIO acendem um depois do outro */
.anima .dg--criterio .dg__marco, .anima .dg--criterio .dg__no,
.anima .dg--criterio .dg__rot, .anima .dg--criterio .dg__centro {
  opacity: 0;
}
.anima .vis .dg--criterio .dg__marco, .anima .vis .dg--criterio .dg__no,
.anima .vis .dg--criterio .dg__rot, .anima .vis .dg--criterio .dg__centro {
  animation: surge .7s ease forwards;
}
.anima .vis .dg--criterio .dg__centro { animation-delay: .55s; }
.anima .vis .dg--criterio .dg__marco { animation-delay: .8s; }
.anima .vis .dg--criterio .dg__no { animation-delay: .88s; }
.anima .vis .dg--criterio .dg__rot { animation-delay: 1s; }
@keyframes surge { to { opacity: 1; } }

/* as tres bolhas do venn crescem em sequencia a partir do proprio centro */
.anima .dg--logica .dg__bolha {
  opacity: 0;
  transform: scale(.82);
  transform-origin: center;
  transform-box: fill-box;
}
.anima .vis .dg--logica .dg__bolha {
  animation: bolha .95s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 160ms);
}
@keyframes bolha { to { opacity: 1; transform: scale(1); } }
.anima .dg--logica text, .anima .dg--logica .dg__risco,
.anima .dg--logica .dg__encontro, .anima .dg--logica .dg__encontro-anel { opacity: 0; }
.anima .vis .dg--logica text, .anima .vis .dg--logica .dg__risco,
.anima .vis .dg--logica .dg__encontro, .anima .vis .dg--logica .dg__encontro-anel {
  animation: surge .7s ease .62s forwards;
}
.anima .vis .dg--logica .dg__encontro,
.anima .vis .dg--logica .dg__encontro-anel { animation-delay: .95s; }

/* ---------- a regua: o ponto viaja ate o fim ---------- */
.anima .regua[data-ent] .regua__t b { transform: translateX(-100%); opacity: 0; }
.anima .regua[data-ent].vis .regua__t b {
  animation: viaja 1.1s cubic-bezier(.3, 1, .4, 1) forwards;
  animation-delay: calc(var(--l, 0) * 140ms + 200ms);
}
@keyframes viaja { from { transform: translateX(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- o anel da abertura se desenha ao carregar ---------- */
.anima .hero__anel { animation: anelAbre 1.6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes anelAbre {
  from { opacity: 0; transform: scale(.94) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}
.anima .hero__anel > div > * { animation: sobe .9s cubic-bezier(.16, 1, .3, 1) both; }
.anima .hero__anel .rotulo { animation-delay: .5s; }
.anima .hero__anel h1 { animation-delay: .64s; }
.anima .hero__anel .corpo { animation-delay: .8s; }
@keyframes sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* o cartao levanta de leve quando o ponteiro passa */
.cartao { transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.cartao:hover { transform: translateY(-3px); }
.mural img { transition: opacity .25s ease, transform .25s ease; }
.mural a:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .anima [data-ent], .anima .hero__anel, .anima .hero__anel > div > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   DIAGRAMAS EM SVG
   Desenhados em codigo, nao gerados. Herdam as fontes e as cores do
   site, entao a letra de dentro do desenho e a mesma de fora dele.
   ============================================================ */
.dg { width: 100%; max-width: 470px; height: auto; overflow: visible; }
/* fill:none so nos circulos ESTRUTURAIS. A regra antiga era `.dg circle`
   e, por ser mais especifica que `.dg__bolha--a`, apagava o
   preenchimento das tres bolhas do venn. */
.dg__anel, .dg__guia, .dg__disco, .dg__pontilhado, .dg__marco, .dg__encontro-anel { fill: none; }
.dg line { fill: none; }

.dg__anel  { stroke: var(--ouro); stroke-width: 1; opacity: .55; }
.dg__guia  { stroke: currentColor; stroke-width: 1; opacity: .14; }
.dg__disco { stroke: var(--ouro); stroke-width: 1; opacity: .8; }
.dg__pontilhado { stroke: var(--ouro); stroke-width: 1; opacity: .34; stroke-dasharray: 1.5 7; }
.dg__fio   { stroke: var(--ouro); stroke-width: 1; opacity: .6; }
.dg__marco { fill: var(--tinta) !important; stroke: var(--ouro); stroke-width: 1; }
.dg__no    { fill: var(--ouro); stroke: none; }
.sec--clara .dg__marco { fill: var(--creme) !important; }

/* 40px enchia o disco inteiro e a palavra GRITAVA onde devia ancorar --
   o Founder: "muito grande, precisa ficar coerente com o design". A 24px
   com tracking largo ela vira o centro calmo do desenho, e a leitura em
   caixa alta melhora: caixa alta pequena PEDE espacejamento. */
.dg__centro {
  font-family: var(--titulo);
  font-size: 24px;
  letter-spacing: .2em;
  /* o tracking empurra o bloco para a direita; metade dele volta */
  text-indent: .2em;
  fill: var(--claro);
}
.dg__rot {
  font-family: var(--dado);
  font-size: 17px;
  fill: var(--claro-2);
}
.sec--clara .dg__centro { fill: var(--escuro); }
.sec--clara .dg__rot { fill: var(--escuro-2); }

/* AS TRES BOLHAS SAO IDENTICAS, e essa e a correcao.
   Antes cada uma tinha cor e opacidade propria (azul solido, preto e
   cinza) -- tres coisas que a copy chama de iguais desenhadas como
   diferentes, e a preta ainda sumia no fundo preto. O Founder leu como
   amador e estava certo.

   Com a MESMA cor e a MESMA opacidade nas tres, a sobreposicao faz a
   hierarquia sozinha: 1 camada no lobo limpo de cada movimento, 2 onde
   duas se cruzam, 3 no centro. O ponto mais forte do desenho passa a ser
   exatamente onde os tres se encontram, que e o que a pagina afirma. */
.dg__bolha { fill: var(--ouro); fill-opacity: .19; stroke: var(--ouro); stroke-width: 1; stroke-opacity: .45; }

.dg__mov {
  font-family: var(--titulo);
  font-size: 19px;
  letter-spacing: .1em;
}
.dg__sub { font-family: var(--dado); font-size: 12.5px; }
/* A cor dos rotulos vem da PELE DA SECAO, nao do movimento. Antes era
   declarada peca a peca (um escuro, dois claros) porque cada bolha tinha
   um fundo diferente; agora as tres sao iguais, entao os tres rotulos
   sao iguais tambem. Uma regra no lugar de seis. */
.dg__mov, .dg__sub { fill: var(--claro); }
.dg__risco { stroke: var(--claro); stroke-width: 1; stroke-opacity: .45; }
.sec--clara .dg__mov, .sec--clara .dg__sub { fill: var(--escuro); }
.sec--clara .dg__risco { stroke: var(--escuro); }

.dg__encontro { fill: var(--ouro); stroke: none; }
.dg__encontro-anel { stroke: var(--ouro); stroke-width: 1; opacity: .55; }

/* ============================================================
   A RÉGUA — todos fizeram a mesma viagem (capítulo 02)

   A primeira versão era UM eixo com as cinco capacidades espalhadas
   entre as duas pontas. Lia errado, e o Founder pegou: dava a entender
   que Site e Conteúdo ainda eram vantagem enquanto IA, Design e Anúncio
   já eram padrão. Não é o que a copy diz. A copy diz que TODAS elas
   saíram de vantagem e chegaram em padrão.

   Agora cada capacidade tem a sua própria linha e todas percorrem o
   trilho inteiro, do círculo vazio até o ponto cheio. Nenhuma fica pelo
   caminho, que é exatamente a frase do capítulo.
   ============================================================ */
.regua { margin-top: 34px; width: 100%; max-width: 480px; }
.cap__arte .regua { width: 100%; }

.regua__topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--escuro-2);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fio-escuro);
}
.regua__topo b { font-weight: 400; color: var(--ouro); }

.regua__linhas { margin-top: 20px; display: grid; gap: 15px; }
.regua__l { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; }
.regua__l span { font-size: 12.5px; color: var(--escuro); }

/* o trilho: começa vazio à esquerda, chega cheio à direita */
.regua__t { position: relative; height: 9px; }
.regua__t::before {
  content: '';
  position: absolute; left: 4px; right: 4px; top: 4px;
  height: 1px;
  background: linear-gradient(to right, var(--fio-escuro), var(--escuro-2));
}
.regua__t i, .regua__t b {
  position: absolute; top: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
}
.regua__t i { left: 0; border: 1px solid var(--escuro-2); background: var(--creme); }
.regua__t b { right: 0; background: var(--escuro); }

/* ============================================================
   PRODUTOS — cartões
   ============================================================ */
.cartoes {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.cartao {
  border: 1px solid var(--fio-claro);
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: border-color .2s ease, background .2s ease;
}
.sec--clara .cartao { border-color: var(--fio-escuro); }
.cartao:hover { border-color: var(--ouro); background: rgba(32, 189, 243, .06); }
.cartao h3 { margin-bottom: 12px; }
.cartao__preco { font-size: 1.0625rem; font-weight: 400; letter-spacing: .04em; color: var(--ouro); }
.cartao__desc { margin-top: 12px; font-size: .875rem; font-weight: 400; line-height: 1.55; flex: 1; }
.sec--escura .cartao__desc { color: var(--claro-2); }
.sec--clara  .cartao__desc { color: var(--escuro-2); }
.cartao__ver {
  margin-top: 20px;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 9px 20px;
  opacity: .82;
}
.cartao:hover .cartao__ver { opacity: 1; color: var(--ouro-claro); }
.sec--clara .cartao:hover .cartao__ver { color: var(--ouro); }

/* ============================================================
   A CADEIA — Leandro, ZEITH, produtos (capítulo 10)
   ============================================================ */
.cadeia { margin-top: 8px; }
.cadeia > div { position: relative; padding-left: 26px; padding-bottom: 26px; }
.cadeia > div:last-child { padding-bottom: 0; }
.cadeia > div::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--ouro); background: transparent;
}
.cadeia > div:not(:last-child)::after {
  content: ''; position: absolute; left: 4px; top: 19px; bottom: 6px;
  width: 1px; background: var(--fio-escuro);
}
.cadeia b { display: block; font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.cadeia span { display: block; margin-top: 7px; font-size: .875rem; font-weight: 400; line-height: 1.5; color: var(--escuro-2); }

.livros { display: flex; gap: 18px; margin-top: 8px; }
.livros a { flex: 1; max-width: 168px; }
.livros img { width: 100%; border: 1px solid var(--fio-escuro); }
.livros p { margin-top: 12px; font-size: 10.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }

/* ============================================================
   MURAL DE CLIENTES
   ============================================================ */
.mural {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--fio-claro);
  border: 1px solid var(--fio-claro);
}
.mural a { background: var(--tinta-2); min-height: 104px; display: grid; place-items: center; padding: 20px; }
.mural a:hover { background: #16222a; }
/* Os 8 logos vem em cores e pesos diferentes: alguns ja sao brancos,
   outros sao escuros sobre transparente, e com um brilho simples metade
   deles sumia no fundo escuro. brightness(0) pinta tudo de preto e
   invert(1) devolve tudo branco, preservando o alfa: fica um mural
   uniforme, que e o que o mockup mostra. */
.mural img {
  height: var(--logo-h, 26px);
  width: auto;
  opacity: .72;
  filter: grayscale(1) brightness(0) invert(1);
  transition: opacity .2s ease;
}
.mural a:hover img { opacity: 1; }

/* ============================================================
   FECHAMENTO E RODAPÉ
   ============================================================ */
.fecho { padding: 96px 0 0; text-align: center; }
.fecho__anel {
  width: min(74vw, 500px);
  margin: 0 auto;
  aspect-ratio: 1;
  border: 1px solid rgba(32, 189, 243, .45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 9%;
}
.fecho__acoes { margin-top: 40px; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.fecho .verbos { margin-top: 18px; font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-claro); }

.rodape { margin-top: 80px; border-top: 1px solid var(--fio-claro); padding: 26px 0 34px; }
.rodape .dentro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: center; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
/* padding-block sobe o alvo de toque de ~13px para ~27px: com 11px de
   letra o link do rodape era menor que os 24px que o dedo precisa, e o
   Lighthouse reprovou por alvo pequeno. O padding cresce a area de
   clique sem mexer no tamanho da letra nem no desenho. */
.rodape a, .rodape p { font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--claro-3); }
.rodape a { display: inline-block; padding-block: 7px; }
.rodape a:hover { color: var(--ouro-claro); }

/* ============================================================
   FICHA — o texto institucional inteiro, atrás do botão
   ============================================================ */
dialog.ficha {
  width: min(700px, calc(100vw - 36px));
  max-height: 86vh;
  padding: 0;
  border: 1px solid rgba(32, 189, 243, .4);
  background: var(--tinta);
  color: var(--claro);
  overflow: auto;
}
dialog.ficha::backdrop { background: rgba(5, 9, 11, .86); }
.ficha__in { padding: 36px 38px 44px; }
.ficha h2 { font-size: 1.375rem; max-width: 26ch; margin-top: 14px; }
.ficha__preco { margin-top: 14px; font-size: 1.375rem; font-weight: 400; color: var(--ouro); }
.ficha .corpo { color: var(--claro-2); margin-top: 18px; max-width: none; }
.ficha__capa { margin-top: 20px; width: 132px; border: 1px solid var(--fio-claro); }
.ficha__blocos { margin-top: 24px; display: grid; gap: 1px; background: var(--fio-claro); border: 1px solid var(--fio-claro); }
.ficha__blocos > div { background: var(--tinta); padding: 17px 19px; }
.ficha__blocos b { display: block; font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-claro); margin-bottom: 8px; }
.ficha__blocos span { font-size: .9375rem; font-weight: 400; line-height: 1.55; color: var(--claro-2); }
.ficha ul { margin-top: 18px; padding: 0; list-style: none; }
.ficha li { position: relative; padding-left: 22px; font-size: .9375rem; font-weight: 400; line-height: 1.55; color: var(--claro-2); }
.ficha li + li { margin-top: 10px; }
.ficha li::before { content: ''; position: absolute; left: 0; top: .68em; width: 10px; height: 1px; background: var(--ouro); }
.ficha__meta { margin-top: 22px; }
.ficha__meta p { font-size: .875rem; font-weight: 400; line-height: 1.55; color: var(--claro-3); }
.ficha__meta p + p { margin-top: 11px; }
.ficha__meta b { font-weight: 400; color: var(--claro-2); }
.ficha__nota { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fio-claro); font-size: .9375rem; font-weight: 400; line-height: 1.55; color: var(--claro); }
.ficha__cta { display: inline-block; margin-top: 26px; padding: 13px 26px; border: 1px solid var(--ouro); border-radius: 999px; font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--ouro-claro); }
.ficha__cta:hover { background: var(--ouro); color: var(--tinta); }
.ficha__x { position: sticky; top: 0; float: right; margin: 12px 14px 0 0; width: 32px; height: 32px; border: 1px solid var(--fio-claro); border-radius: 50%; font-size: 17px; line-height: 1; color: var(--claro-2); }
.ficha__x:hover { color: var(--claro); border-color: var(--ouro); }

/* ============================================================
   CELULAR — coluna única. A ilustração vem antes do texto, como no
   mockup: a peça abre a seção e o texto explica embaixo.
   ============================================================ */
@media (max-width: 900px) {
  :root { --margem: 22px; }
  .topo nav { display: none; }
  .topo .dentro { height: 56px; }

  .sec { padding: 56px 0; }
  .cap .dentro { grid-template-columns: 1fr; gap: 30px; }
  .cap--inverso .dentro > *:first-child { order: 0; }
  .cap .dentro > .cap__arte { order: -1; }
  .cap__arte img { max-width: 340px; }
  .cap--sangra .cap__arte { margin-right: 0; }
  .cap--sangra .cap__arte img { max-width: 340px; }

  .hero { min-height: 0; padding: 40px 0 56px; }
  .hero__anel { width: min(92vw, 420px); padding: 11%; }
  .hero h1 { font-size: 1.875rem; }
  .hero .corpo { font-size: .9375rem; }

  .corpo { max-width: none; }
  .lead { font-size: 1rem; }
  .regua { max-width: none; }
  .cartoes { grid-template-columns: 1fr; gap: 14px; }
  .mural { grid-template-columns: repeat(2, 1fr); }
  .livros a { max-width: none; }

  .fecho { padding: 56px 0 0; }
  .fecho__anel { width: min(90vw, 380px); padding: 12%; }
  .rodape { margin-top: 48px; }
  .rodape .dentro { flex-direction: column; align-items: flex-start; }
  .ficha__in { padding: 26px 22px 34px; }
}

/* ============================================================
   PECAS DO CORTE DE ESSENCIALISMO — 2026-08-24

   A home passou de 11 capitulos para 5 batidas. Estas classes existem
   para que o corte NAO vire aperto: quando duas secoes viram uma, o
   que separa passa a ser um fio e um respiro, e nao mais um bloco
   inteiro de 112px de padding.

   Este bloco vem DEPOIS do @media de 900px de proposito: as regras de
   celular das pecas novas estao no @media do fim deste arquivo, que
   por vir por ultimo ganha sem precisar de !important.
   ============================================================ */

/* A frase que assina o capitulo. Substitui o que antes era uma ficha
   inteira: em vez de esconder a conclusao atras de um botao, ela fica
   na tela, em dourado -- que e como esta folha faz enfase, ja que as
   duas fontes tem um peso so e negrito esta proibido. */
.assinatura {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--fio-escuro);
  font-family: var(--dado);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.62;
  max-width: 42ch;
  color: var(--ouro);
}
.sec--escura .assinatura { border-top-color: var(--fio-claro); color: var(--ouro-claro); }

/* Secao que CONTINUA a anterior na mesma pele: perde o padding de cima
   e ganha um fio. Sem isto, "O sistema" e "Entender" leem como dois
   capitulos separados -- exatamente o que estamos cortando. */
.sec--junta { padding-top: 0; }
.sec--junta > .faixa > .dentro { padding-top: 54px; border-top: 1px solid var(--fio-claro); }
.sec--clara.sec--junta > .faixa > .dentro { border-top-color: var(--fio-escuro); }

/* A PONTE do movimento Decidir foi REMOVIDA da home em 24/08, por ordem
   do Founder. Ela ja tinha sido um capitulo inteiro de 1,13 tela, virou
   uma ponte de 3 linhas, e agora saiu de vez: o venn logo acima ja
   nomeia os tres movimentos, e o texto completo do Decidir continua em
   /tese#decidir. Com ela foi a numeracao "Movimento 1/3" dos rotulos --
   sem o 2 no meio, o numero so chamava atencao para a falta. */

/* AS DUAS FOTOGRAFIAS DE PRODUTO SAIRAM DA HOME e as regras delas foram
   junto. `entender-cards` era uma foto dos mesmos tres cartoes que
   estao logo acima em HTML. `aparecer-devices` (a maquete de notebook
   com tres celulares) saiu por ordem do Founder em 24/08: mesma logica,
   os 4 cartoes ja dizem o que e entregue, e a maquete custava ~390px da
   batida mais alta da pagina. As duas estao em `ativos-aposentados/`. */

/* A prova perdeu o paragrafo explicativo: oito logotipos de clientes no
   ar nao precisam de legenda dizendo que estao no ar. */
.prova .mural { margin-top: 34px; }

/* ============================================================
   /tese — A PAGINA QUE RECEBEU O QUE SAIU DA HOME

   Nada foi jogado fora no corte. Os quatro capitulos de tese, o
   movimento Decidir, a estrutura com os livros e o proposito moram
   aqui inteiros, cada um com a ilustracao que estava na home, e com o
   texto que antes ficava escondido nas fichas agora corrido na pagina.
   ============================================================ */
.tese__abre { padding-bottom: 64px; }
.tese__abre h1 { margin-top: 20px; max-width: 20ch; }

.tese__sumario {
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid var(--fio-claro);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.tese__sumario a {
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--claro-3);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}
.tese__sumario a:hover { color: var(--ouro-claro); border-bottom-color: var(--ouro); }

.tese__lista { margin-top: 14px; max-width: 46ch; }
.tese__lista li {
  position: relative;
  padding-left: 20px;
  font-size: .9375rem;
  line-height: 1.72;
  color: var(--escuro-2);
}
.tese__lista li + li { margin-top: 9px; }
.tese__lista li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 8px; height: 1px; background: var(--ouro);
}
.sec--escura .tese__lista li { color: var(--claro-2); }

.tese__blocos { margin-top: 30px; max-width: 46ch; }
.tese__blocos > div { padding: 18px 0; border-top: 1px solid var(--fio-escuro); }
.sec--escura .tese__blocos > div { border-top-color: var(--fio-claro); }
.tese__blocos b {
  display: block; font-family: var(--dado); font-size: 11px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ouro);
}
.tese__blocos span { display: block; margin-top: 9px; font-size: .9375rem; line-height: 1.7; color: var(--escuro-2); }
.sec--escura .tese__blocos span { color: var(--claro-2); }
.tese__blocos + .tese__blocos { margin-top: 8px; }

.tese__volta { text-align: center; padding: 72px 0; }
.tese__volta h2 { margin-top: 0; }
.tese__volta .botao { margin-top: 22px; }

@media (max-width: 900px) {
  .assinatura { margin-top: 20px; padding-top: 15px; max-width: none; }
  .sec--junta > .faixa > .dentro { padding-top: 38px; }
  .tese__abre { padding-bottom: 44px; }
  .tese__sumario { gap: 8px 18px; margin-top: 32px; padding-top: 22px; }
  .tese__lista, .tese__blocos { max-width: none; }
  .tese__volta { padding: 56px 0; }
}

/* ============================================================
   AS DUAS ESTRUTURAS DE PRESENCA — 24/08

   Substituiram os 4 itens avulsos (Site, Bio, Instagram,
   Impulsionamento). Nao usam `.cartao`: um item avulso cabia numa linha
   de titulo mais preco, e uma ESTRUTURA precisa de promessa, composicao
   tecnica, argumento e preco, nessa ordem de leitura. Sao duas, entao a
   grade e de duas colunas de verdade, e nao um auto-fit que colapsaria
   em tres numa tela larga.
   ============================================================ */
.estruturas {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.estrutura {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 30px 28px 26px;
  border: 1px solid var(--fio-escuro);
  transition: border-color .2s ease, background .2s ease;
}
.sec--escura .estrutura { border-color: var(--fio-claro); }
.estrutura:hover { border-color: var(--ouro); background: rgba(32, 189, 243, .06); }

.estrutura__promessa {
  /* a promessa e o titulo do cartao: sai da caixa alta dos h3 do site,
     porque aqui e frase e nao rotulo */
  font-family: var(--titulo);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.16;
  text-transform: none;
  margin-top: 14px;
}

/* a composicao tecnica: e etiqueta, nao frase. Fica pequena e espacada,
   entre a promessa e o argumento. */
.estrutura__tecnico {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--fio-escuro);
  font-family: var(--dado);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro);
}
.sec--escura .estrutura__tecnico { border-top-color: var(--fio-claro); }

.estrutura__texto {
  margin-top: 14px;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--escuro-2);
  flex: 1;
}
.sec--escura .estrutura__texto { color: var(--claro-2); }

.estrutura__preco {
  margin-top: 20px;
  font-family: var(--titulo);
  font-size: 1.75rem;
  letter-spacing: -.01em;
  color: var(--ouro);
}

.estrutura__ver {
  margin-top: 18px;
  align-self: flex-start;
  font-family: var(--dado);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 9px 20px;
  opacity: .82;
}
.estrutura:hover .estrutura__ver { opacity: 1; color: var(--ouro); }

/* ============================================================
   A SOMA — o fechamento da secao
   ============================================================ */
.soma {
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--fio-escuro);
  text-align: center;
}
.sec--escura .soma { border-top-color: var(--fio-claro); }

.soma__conta {
  font-family: var(--titulo);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  letter-spacing: -.015em;
  line-height: 1.2;
}
/* os sinais sao conectivo, nao numero: recuam para o total ganhar peso
   sem precisar de negrito, que estas fontes nao tem */
.soma__conta i { font-style: normal; opacity: .38; margin: 0 .18em; }
.soma__conta b { font-weight: 400; color: var(--ouro); }
/* nowrap por VALOR, e nao na linha inteira: no celular a conta quebrava
   no meio do total ("R$" em cima, "3.700" embaixo), partindo justamente
   o numero que a linha existe para mostrar. Assim a quebra so pode
   acontecer ENTRE os valores, que e onde ela nao machuca. */
.soma__conta span, .soma__conta b { white-space: nowrap; }

.soma__nomes {
  margin-top: 14px;
  font-family: var(--dado);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}
.soma__texto {
  margin-top: 16px;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--escuro-2);
}
.sec--escura .soma__texto { color: var(--claro-2); }

/* ============================================================
   O NUMERO EM DESTAQUE DENTRO DA FICHA
   ============================================================ */
.ficha__destaque {
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid rgba(32, 189, 243, .3);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.ficha__destaque b {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  color: var(--ouro);
}
.ficha__destaque span {
  font-family: var(--dado);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--claro-2);
}

@media (max-width: 900px) {
  .estruturas { grid-template-columns: 1fr; gap: 14px; }
  .estrutura { padding: 26px 22px 24px; }
  .estrutura__promessa { font-size: 1.25rem; }
  .soma { margin-top: 32px; padding-top: 28px; }
  .soma__conta { line-height: 1.35; }
  .ficha__destaque { padding: 18px 20px; gap: 14px; }
  .ficha__destaque b { font-size: 2.5rem; }
}

/* ============================================================
   V8 — A HOME NOVA, DIRECAO CENA (D88 a D92, 2026-08-25)

   So a HOME usa este bloco (o <body> leva a classe "pg-home"). A /tese
   fica intocada -- fundo #0A1216/creme alternado, venn com Decidir,
   fecho com o anel -- porque D88/D89 dizem explicitamente que ela NAO
   muda nesta rodada. Por isso todo seletor novo aqui e prefixado com
   ".pg-home" ou usa classe propria terminada em "-v8": nada daqui
   encosta em nenhum seletor que a /tese usa.
   ============================================================ */

body.pg-home { background: #000; }
body.pg-home .topo { background: rgba(0, 0, 0, .86); }
body.pg-home .sec--escura { background: #000; }

/* A CENA — imagem cheia, veu, sem anel e sem circulo (D88) */
.hero-v8__cena { position: relative; height: 64vh; min-height: 440px; max-height: 760px; overflow: hidden; background: #000; }
.hero-v8__cena img { width: 100%; height: 100%; object-fit: cover; }
.hero-v8__veu { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.74) 80%, #000 100%); }
.hero-v8__texto-faixa { position: relative; margin-top: -190px; z-index: 2; }
.hero-v8__texto { max-width: 640px; padding-bottom: 74px; }
.hero-v8__texto h1 { color: var(--claro); }
.hero-v8__texto .corpo { margin-top: 22px; max-width: 46ch; color: var(--claro-2); }

/* A PREMISSA — texto sozinho: falta a imagem (ver ESTADO-2026-08-25.md
   item 1). Coluna mais estreita que o resto, pra nao esticar a linha
   numa secao que nao tem ilustracao do lado segurando a largura. */
.premissa-v8 .dentro { max-width: 640px; }
.premissa-v8 .corpo { max-width: none; }
.premissa-v8 .corpo + .corpo { margin-top: 15px; }
.premissa-v8__arte { margin-bottom: 30px; }
.premissa-v8__arte img { width: 100%; height: auto; display: block; border: 1px solid var(--fio-claro); }

/* O SISTEMA — dois movimentos em sequencia vertical, sem venn (D89: o
   "Decidir" saiu, e com ele o circulo do meio). Fiel ao Home.tpl.
   (25/08: cheguei a trocar isso por um diagrama SVG achando que
   elevava o acabamento -- revertido, essa peca ja era a aprovada.) */
.passos-v8 { margin-top: 34px; display: flex; flex-direction: column; }
.passo-v8 { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 18px; }
.passo-v8__n { font-family: var(--dado); font-size: 12px; letter-spacing: .18em; color: var(--ouro-claro); padding-top: 5px; }
.passo-v8__t { font-family: var(--titulo); font-size: 1.5rem; font-weight: 400; }
.passo-v8__d { margin-top: 8px; font-size: .9375rem; line-height: 1.65; color: var(--claro-2); }
.passo-v8__fio { width: 1px; height: 40px; margin: 8px 0 8px 16px; background: linear-gradient(to bottom, rgba(32,189,243,.6), rgba(32,189,243,.08)); }

/* ENTENDER — a capa do documento ao lado do preco (D91, nivel 2: mostra
   o produto, nao ilustra em volta dele). Fiel ao Home.tpl: linhas
   simulando texto + mini grafico de barras, DESENHADA, nao foto de
   documento de cliente. (25/08: revertida de volta pra esta versao
   depois de eu ter trocado por um monograma sem devia -- essa aqui e a
   que o Founder escolheu no canvas.) */
.cartao--capa { flex-direction: row; align-items: flex-start; gap: 18px; text-align: left; }
.cartao--capa .cartao--capa__corpo { display: flex; flex-direction: column; min-width: 0; }
.cartao--capa .cartao__desc { flex: none; }
.capa-v8 { width: 92px; flex: none; aspect-ratio: 3 / 4; border: 1px solid rgba(32,189,243,.42); background: linear-gradient(160deg, #0B1620, #000 72%); padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; }
.capa-v8__marca { font-size: 5px; letter-spacing: .18em; color: var(--ouro-claro); }
.capa-v8__t { height: 5px; background: rgba(245,244,240,.6); }
.capa-v8__l { height: 2px; background: rgba(245,244,240,.2); }
.capa-v8__b { margin-top: auto; display: flex; gap: 3px; align-items: flex-end; height: 26px; }
.capa-v8__b i { flex: 1; background: rgba(32,189,243,.55); display: block; }
.capa-v8--realce { border-color: rgba(32,189,243,.7); }

/* NO AR volta a usar ".mural" (a mesma classe/regra da V7) -- o Founder
   reprovou a grade de telas reais em 25/08.

   MAS o mural em si tambem foi reprovado, mesmo dia: "sem essa merda de
   azul atras" -- os blocos navy (var(--tinta-2)) atras de cada logo, com
   linha de grade em volta, nao e o padrao premium que ele queria. A regra
   ".mural" e COMPARTILHADA com a V7 (que continua no ar do jeito que
   esta), entao a mudanca fica escopada em ".pg-home": vira uma fileira
   de logos soltos no preto, sem fundo nem grade, so espaco generoso --
   o logo em si ja e monocromatico (filtro acima) e carrega a marca
   sozinho. */
.pg-home .mural {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 46px 64px;
  background: none;
  border: none;
}
.pg-home .mural a { background: none; min-height: 0; padding: 0; display: block; }
.pg-home .mural a:hover { background: none; }

/* FECHO — uma linha, dois botoes, sem repetir a abertura (D92: o fecho
   nao repete o H1 nem aponta pro simulador) */
.fecho-v8 { padding: 88px 0 0; text-align: center; background: #000; }
.fecho-v8 .corpo { max-width: 46ch; margin: 0 auto; font-size: 1.0625rem; color: var(--claro); }
.fecho-v8__acoes { margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

@media (max-width: 900px) {
  .hero-v8__cena { height: 46vh; min-height: 320px; }
  .hero-v8__texto-faixa { margin-top: -120px; }
  .hero-v8__texto { padding-bottom: 50px; }
  .cartao--capa { gap: 14px; }
  .capa-v8 { width: 78px; }
  .fecho-v8 { padding: 56px 0 0; }
  .pg-home .mural { justify-content: flex-start; gap: 32px 40px; }
}