:root {
  --bg: #0A0A0F;
  --bg-alt: #14141C;
  --border: #232330;
  --text: #F2F1ED;
  --text-muted: #9B9BA5;
  --accent: #D9A24B;
  --accent-glow: rgba(217, 162, 75, 0.18);
  --font-title: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --max-width: 1280px;
}

* { box-sizing: border-box; }

/* regra de autor vence a folha do user-agent: sem isso um display: flex/grid
   deixa o elemento visível mesmo com o atributo hidden */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

p { margin: 0 0 16px; color: var(--text-muted); }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* opaco de propósito: backdrop-filter num cabeçalho fixo custa caro por
     quadro e era um dos motivos da rolagem travada. Sobre um fundo quase
     da mesma cor, ninguém vê diferença. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.logo-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  align-self: center;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.nav a:hover { color: var(--text); }

/* seção em que a leitura está agora */
.nav a.is-active { color: var(--text); }

.nav a.is-active::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 3px;
  background: var(--accent);
}

.nav a.nav-cta.is-active::after { display: none; }

.nav-cta {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #17110A !important;
  font-weight: 600 !important;
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-cta:hover {
  color: #17110A !important;
  opacity: 0.9;
  transform: translateY(-1px);
}

.nav-cta:active { transform: translateY(0) scale(0.985); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Barra de progresso de leitura — a única referência de posição numa
   página de dez mil pixels. O .site-header é sticky, que já é elemento
   posicionado, então serve de referência sem precisar de position: relative. */

.leitura {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}

/* a barra anda por transform, não por width: width força um layout por
   quadro de rolagem, scaleX desenha na GPU e não toca no layout.
   O valor padrão no var() deixa ela parada em zero sem JavaScript. */
.leitura span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  will-change: transform;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  /* zera o fundo cinza que o <button> herda do navegador */
  background: none;
  cursor: pointer;
  transition: opacity 0.2s ease, box-shadow 0.25s ease,
              border-color 0.2s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-primary {
  background: var(--accent);
  color: #17110A;
  box-shadow: 0 8px 32px var(--accent-glow);
}

.btn-primary:hover {
  opacity: 0.95;
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(217, 162, 75, 0.32);
}

/* o secundário enche de cor de baixo pra cima no hover, em vez de só
   trocar a borda. O preenchimento é um pseudo-elemento com transform,
   então anima na GPU e não mexe no layout */
.btn-secondary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  color: var(--text);
  transition: color 0.3s ease, border-color 0.3s ease,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fl-accent, var(--accent));
  transform: translateY(101%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--fl-accent, var(--accent));
  color: #17110A;
  transform: translateY(-2px);
}

.btn-secondary:hover::before,
.btn-secondary:focus-visible::before { transform: translateY(0); }

/* Afunda de volta no clique: confirma o toque sem barulho visual. Fica depois
   das variantes porque empata em especificidade com os :hover acima — quem
   vem por último vence, e o pressionado tem que ganhar do pairado. */
.btn:active,
.btn-secondary:active { transform: translateY(0) scale(0.985); }


.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.step {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.step-num {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.step h3 {
  font-size: 17px;
  margin: 12px 0 8px;
}

.step p { font-size: 14px; margin: 0; }

/* FAQ */

.faq { margin-top: 48px; }

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease, border-color 0.2s ease;
}

.faq-item summary:hover { color: var(--accent); }
.faq-item summary:hover::after { border-color: var(--accent); }

.faq-item[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--accent);
}

.faq-item p {
  margin: 0;
  padding: 0 48px 24px 0;
  max-width: 70ch;
  font-size: 15px;
  animation: faq-open 0.25s ease;
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* WhatsApp flutuante */

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent);
  color: #17110A;
  box-shadow: 0 8px 32px rgba(217, 162, 75, 0.32);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.04);
  opacity: 0.95;
}


/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}

/* Responsive */

@media (max-width: 860px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 24px;
    display: none;
  }

  .nav.open { display: flex; }

  .nav a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-cta {
    margin-top: 12px;
    text-align: center;
    border-bottom: none !important;
  }

  .nav-toggle { display: flex; }


  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }

  .faq-item summary { font-size: 16px; gap: 16px; }
  .faq-item p { padding-right: 24px; }

  /* espaço pro botão flutuante não cobrir o rodapé */
  .site-footer { padding-bottom: 88px; }
}

@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------------------------
   Tela de carregamento — a logo grande voa até o lugar dela no header.
   Sem JS ou com motion reduzido, nada disso aparece (.no-loader).
------------------------------------------------------------------ */

.no-loader .loader,
.no-loader .loader-bar,
.no-loader .loader-mark { display: none; }

body.is-loading { overflow: hidden; }
body.is-loading .site-header .logo { opacity: 0; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  transition: opacity 0.5s ease;
}

.loader-bar {
  position: fixed;
  left: 50%;
  top: calc(50% + 40px);
  z-index: 1001;
  width: 140px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.loader-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

.loader.is-done,
.loader-bar.is-done { opacity: 0; }

/* posicionada só por transform, pra medida do FLIP bater exata */
.loader-mark {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  transform-origin: 0 0;
  will-change: transform;
}

.loader-mark.is-flying {
  transition: transform 0.62s cubic-bezier(0.62, 0, 0.15, 1);
}

/* ------------------------------------------------------------------
   Miniatura: um esqueleto de página na paleta da marca fictícia.
   Mesma marcação e mesmas regras do hub em exemplos/css/hub.css —
   prova, já aqui na home, que nenhum exemplo parece o outro.
------------------------------------------------------------------ */

.mini {
  --c-bg: #F4F3EF;
  --c-ink: #2A2A2A;
  --c-accent: #999;
  aspect-ratio: 16 / 10;
  /* na coluna larga do desktop a proporção sozinha deixaria a miniatura
     dominando o card e empurrando o botão pra fora da tela */
  max-height: 240px;
  background: var(--c-bg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.mini-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mini-marca {
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}

.mini-nav { display: flex; gap: 5px; }

.mini-nav span {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-ink);
  opacity: 0.28;
}

.mini-hero {
  flex: 1 1 auto;
  border-radius: 6px;
  background: var(--c-accent);
  opacity: 0.32;
  min-height: 0;
}

.mini-linhas { display: grid; gap: 5px; }

.mini-linhas span {
  height: 4px;
  border-radius: 2px;
  background: var(--c-ink);
  opacity: 0.2;
}

.mini-linhas span:nth-child(1) { width: 62%; opacity: 0.42; height: 6px; }
.mini-linhas span:nth-child(2) { width: 88%; }
.mini-linhas span:nth-child(3) { width: 74%; }

.mini-blocos { display: flex; gap: 6px; }

.mini-blocos i {
  flex: 1;
  height: 20px;
  border-radius: 4px;
  background: var(--c-ink);
  opacity: 0.1;
}

.mini-blocos i:first-child {
  background: var(--c-accent);
  opacity: 0.55;
}

/* paletas por caso */
.mini-loja { --c-bg: #FAF4E8; --c-ink: #3A2A20; --c-accent: #B5563A; }
.mini-hora { --c-bg: #F3F4F0; --c-ink: #333D30; --c-accent: #7C8F72; }
.mini-escritorio { --c-bg: #C7D1DB; --c-ink: #1E232B; --c-accent: #4E7093; }
.mini-oficina { --c-bg: #E0DCD6; --c-ink: #24262A; --c-accent: #8A6A4F; }

/* Quando um caso muda de anatomia, a miniatura dele muda junto — aqui também,
   não só no hub. Esta é a seção que o prospect vê primeiro, e quatro
   esqueletos iguais desmentem o texto que está logo acima deles.

   O Livro Aberto virou folha sobre a mesa com o sumário numerado na margem; a
   Casa Quieta virou dobra partida com a agenda do lado. */

.mini-escritorio .mini-doc {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
}

.mini-rail {
  display: grid;
  align-content: start;
  gap: 6px;
  padding-left: 5px;
  border-left: 2px solid rgba(30, 35, 43, 0.26);
}

.mini-rail i {
  height: 3px;
  border-radius: 1px;
  background: var(--c-ink);
  opacity: 0.22;
}

.mini-rail i:first-child { background: var(--c-accent); opacity: 0.7; }

.mini-folha {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px 10px 10px 16px;
  background: #FBFCFD;
  border: 1px solid rgba(30, 35, 43, 0.12);
}

.mini-folha::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 10px;
  width: 1px;
  background: rgba(78, 112, 147, 0.4);
}

.mini-escritorio .mini-blocos { margin-top: 4px; }

.mini-linhas-pe { margin-top: 4px; }
.mini-linhas-pe span:nth-child(1) { width: 80%; opacity: 0.2; height: 4px; }
.mini-linhas-pe span:nth-child(2) { width: 58%; }

.mini-hora .mini-dobra {
  flex: 1 1 auto;
  min-height: 0;
  margin: 2px -14px -14px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
}

.mini-painel {
  background: #2B3529;
  padding: 10px 9px 11px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.mini-t {
  height: 6px;
  border-radius: 2px;
  background: #F3F4F0;
  opacity: 0.85;
}

.mini-t:nth-child(2) { width: 66%; opacity: 0.5; }

.mini-regua {
  position: relative;
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1px;
}

.mini-regua::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(243, 244, 240, 0.24);
}

.mini-regua i {
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}

.mini-regua i:nth-child(1),
.mini-regua i:nth-child(2) {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(243, 244, 240, 0.35);
}

.mini-lado {
  display: flex;
  align-items: center;
  padding: 10px 14px 11px 9px;
}

.mini-card {
  width: 100%;
  background: #FBFBF9;
  border: 1px solid rgba(51, 61, 48, 0.14);
  border-radius: 5px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mini-passos { display: flex; gap: 3px; }

.mini-passos i {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-ink);
  opacity: 0.16;
}

.mini-passos i:first-child { background: var(--c-accent); opacity: 0.85; width: 16px; }

.mini-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.mini-slots i {
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(51, 61, 48, 0.16);
}

.mini-slots i:nth-child(2) { background: var(--c-accent); border-color: var(--c-accent); }
.mini-slots i:nth-child(4) { opacity: 0.4; }

/* ------------------------------------------------------------------
   Auditoria gratuita
------------------------------------------------------------------ */

.audit h2 { font-size: clamp(28px, 3.5vw, 36px); max-width: 24ch; }
.audit > p { font-size: 17px; max-width: 62ch; }

.audit-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}

.audit-item {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.audit-item h3 { font-size: 16px; margin: 0 0 8px; }
.audit-item p { font-size: 14px; margin: 0; }

.audit-note { font-size: 13px; margin: 20px 0 0; }

/* ------------------------------------------------------------------
   Responsivo e motion reduzido dos blocos novos
------------------------------------------------------------------ */

@media (max-width: 860px) {
  .audit-list { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 520px) {
}


/* ------------------------------------------------------------------
   Páginas de documento (privacidade) — layout de leitura simples,
   na paleta da marca, sem os elementos de movimento da home.
------------------------------------------------------------------ */

.doc-topo {
  border-bottom: 1px solid var(--border);
}

.doc-topo .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.doc-voltar {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.doc-voltar:hover { color: var(--text); }

.doc {
  padding: 72px 0 96px;
}

.doc-conteudo {
  max-width: 720px;
}

.doc-conteudo h1 {
  font-size: clamp(30px, 4vw, 42px);
  margin-bottom: 8px;
}

.doc-conteudo h2 {
  font-size: 20px;
  margin: 44px 0 12px;
}

.doc-conteudo p,
.doc-conteudo li {
  font-size: 16px;
  color: var(--text-muted);
}

.doc-conteudo ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.doc-conteudo li { margin-bottom: 8px; }

.doc-conteudo a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc-data {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.doc-topicos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 28px 0 40px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.doc-topicos a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.doc-topicos a:hover { color: var(--accent); }


/* ------------------------------------------------------------------
   Arquitetura da página, repaginada de 2026-08-30.
   Segue site-notas/plano-repaginada.md. Carregada DEPOIS do style.css, que
   continua com cabeçalho, rodapé, botões, FAQ, passos e auditoria.

   A ideia que rege tudo aqui: existe uma espinha vertical de 1px que
   atravessa a página, e as quebras de linha só significam alguma coisa
   porque essa espinha está visível pra ser rompida.
------------------------------------------------------------------ */

:root {
  /* monoespaçada de sistema: zero byte a mais, e sai com a cara do
     terminal de cada sistema, que é a leitura que a gente quer */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --calha: 200px;
}

/* ---------- o bloco e a espinha ---------- */

.bloco {
  border-top: 1px solid var(--border);
}

/* A altura do bloco fica AQUI, e não no .bloco, porque a espinha é desenhada
   nesta caixa: com o respiro no pai, a linha parava a 96px de cada borda e
   virava um tracinho por seção em vez de uma linha só atravessando a página. */
.bloco-grade {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 96px 24px;
  display: grid;
  grid-template-columns: var(--calha) minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}

/* a espinha: uma linha só, de borda a borda do bloco, na divisa da calha */
.bloco-grade::before,
.bloco-grade::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(24px + var(--calha));
  width: 1px;
}

.bloco-grade::before { background: var(--border); }

/* O traço âmbar marca ONDE O BLOCO COMEÇA, num segmento curto e fixo.

   Ele já se desenhou por cima da linha cinza conforme o bloco era lido, o que
   era informação de verdade — progresso de leitura. Mas isso dependia de
   `animation-timeline: view()`, que saiu por custo em 2026-08-31. Âmbar cheio
   em todas as seções seria decoração fingindo ser indicador, e a regra da casa
   é que elemento sem informação nem função sai. Um acento de início de seção é
   uma afirmação que continua verdadeira parado. */
.bloco-grade::after {
  background: var(--accent);
  bottom: auto;
  height: 96px;
  transform-origin: top;
}

.calha {
  position: sticky;
  top: 108px;
  align-self: start;
  padding-right: 24px;
}

.calha-num,
.calha-rot {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calha-num { color: var(--accent); margin-bottom: 8px; }
.calha-rot { color: var(--text-muted); }


/* item de grade nasce com min-width: auto, ou seja, com largura mínima igual
   ao conteúdo. A trilha de miniaturas, que é larga de propósito, esticava a
   coluna inteira e levava junto o h1 e as portas: a página passava a rolar na
   horizontal em cinco das sete larguras. minmax(0, 1fr) segura a TRILHA da
   grade, não o item dentro dela. */
.dobra-grade > *,
.bloco-grade > * { min-width: 0; }

.bloco-corpo > :first-child { margin-top: 0; }

.bloco h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  max-width: 22ch;
  margin-bottom: 20px;
}

.bloco p { max-width: 62ch; }

/* ---------- 01 dobra ---------- */

.dobra {
  border-top: 0;
  padding: 132px 0 0;
}

/* position + z-index NÃO é enfeite aqui, é o que põe o conteúdo acima do
   canvas de pontos. O .hero-canvas é `position: absolute; z-index: 0`, e
   descendente POSICIONADO é pintado depois de todo conteúdo não-posicionado,
   mesmo vindo antes no DOM e mesmo com z-index menor. Sem esta regra o canvas
   não é fundo: os pontos caem por cima do h1, das portas e das miniaturas dos
   exemplos — invisível em repouso, porque ali eles são cinza e pequenos, e
   gritante quando o cursor chega perto e eles crescem e ficam âmbar. */
.dobra-grade {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}

.dobra h1 {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.04;
  margin: 0 0 20px;
  max-width: 15ch;
}

.dobra-sub {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 48ch;
  margin: 0 0 34px;
}

.rotulo {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 20px;
}

/* as três portas */
.portas {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.porta {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  padding: 16px 18px;
  color: var(--text);
  transition: background 0.18s ease;
}

.porta-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  transition: color 0.18s ease;
}

.porta-txt { font-size: 15px; line-height: 1.35; }

.porta-seta {
  font-family: var(--font-mono);
  color: var(--text-muted);
  transition: transform 0.18s ease, color 0.18s ease;
}

/* o âmbar marca o que responde ao visitante, não a seção inteira */
.porta:hover,
.porta:focus-visible { background: var(--bg-alt); outline: none; }

.porta:hover .porta-num,
.porta:focus-visible .porta-num,
.porta:hover .porta-seta,
.porta:focus-visible .porta-seta { color: var(--accent); }

.porta:hover .porta-seta,
.porta:focus-visible .porta-seta { transform: translateX(3px); }

/* ---------- as quatro miniaturas na dobra ---------- */

.trilha-rot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  /* 8 aqui + 6 de padding-top na cerca = os mesmos 14 de antes */
  margin-bottom: 8px;
}

/* QUEBRA 2: a trilha passa da borda do container e é cortada pela tela.
   O overflow fica NO INVÓLUCRO, nunca na página: rolagem horizontal em
   qualquer largura é item de reprovação do portão de entrega. */
.trilha-cerca {
  margin-right: calc((100vw - min(100vw, var(--max-width))) / -2 - 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;

  /* `overflow-x: auto` NÃO deixa o outro eixo visível: o CSS promove
     `overflow-y` a `auto` junto. Sem folga aqui, os 2px que o card sobe no
     hover são cortados fora — a "cortadinha em cima" que aparecia nos quatro. */
  padding-top: 6px;
  padding-bottom: 10px;

  /* SEM scroll-snap aqui, de propósito. Ele entrou em 2026-08-31 pra fazer a
     rolagem horizontal parar encaixada num card, e a travada voltou no mesmo
     dia. Snap obriga o navegador a reavaliar pontos de encaixe durante a
     rolagem, e com o cursor em cima desta faixa cada evento de roda ainda tem
     que decidir se o scroll é daqui ou da página. O ganho era cosmético e o
     risco não é: numa página que já foi difícil deixar lisa, não vale. */
}

/* ---------- a barra da trilha ---------- */
/* Ela carrega informação — diz que tem mais caso pro lado —, então esconder não
   é opção. O que dá é fazer ela parecer parte da página.

   NÃO usar `scrollbar-color` aqui: a partir do Chrome 121 ela tem precedência
   sobre as regras `::-webkit-scrollbar`, e ligar ela troca a barra fina de
   sobreposição pela barra clássica, com setinha nas pontas e o dobro da altura.
   Fica pior do que não mexer. O Firefox cai na barra dele, que já é discreta. */

.trilha-cerca::-webkit-scrollbar { height: 6px; }

.trilha-cerca::-webkit-scrollbar-track {
  background: var(--bg-alt);
  border-radius: 999px;
}

.trilha-cerca::-webkit-scrollbar-thumb {
  background: #32323F;
  border-radius: 999px;
}

/* o âmbar é só de quem está com o dedo na barra — pintar a faixa inteira no
   hover acende a barra sempre que o ponteiro toca um card, que é quase sempre */
.trilha-cerca::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Flex e não grid por causa da folga do fim. Num scroller, nem o padding-right
   do container nem a margin-right do último item viram espaço depois do último
   card: o padding fica preso na caixa, que é do tamanho da tela e não do
   conteúdo, e a margem final o Chrome descarta do curso da rolagem. As duas
   foram medidas, e as duas deram 0px de folga nas cinco larguras — o card
   parava colado na borda.

   O que funciona é um item de verdade no fim, e um item precisa de largura
   própria: `grid-auto-columns` dá 232px a toda coluna implícita, então em grade
   o espaçador viraria uma coluna inteira. Em flex cada item tem a sua. */
.trilha {
  display: flex;
  gap: 12px;
}

.mcaso { flex: 0 0 232px; }

.trilha::after {
  content: "";
  flex: 0 0 24px;
}

.mcaso {
  display: block;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  border-radius: 12px;
  overflow: hidden;
  color: var(--text);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.mcaso:hover,
.mcaso:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}

.mcaso-pe { padding: 12px 14px 14px; }

.mcaso-mec {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

.mcaso-nome { font-family: var(--font-title); font-size: 15px; margin: 0 0 3px; }
.mcaso-cat { font-size: 12.5px; color: var(--text-muted); margin: 0; }

/* ---------- a faixa de vitais ---------- */

/* QUEBRA 1: sangra de ponta a ponta e ignora o container.
   É o chão da dobra, não um card. */
.vitais {
  margin-top: 64px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}

.vitais-grade {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 20px 24px;
  align-items: center;
}

.vital-rot {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.vital-val {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* o âmbar só acende no que acabou de ser medido nesta visita */
.vital-val.ao-vivo { color: var(--accent); }

.vitais-nota {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  text-align: right;
  max-width: 28ch;
}

/* ---------- 02 dados ---------- */

.dados {
  display: grid;
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
  margin-top: 28px;
}

.dado {
  position: relative;
  background: var(--bg);
  padding: 24px 0 26px;
}

/* QUEBRA 3: o algarismo mora dentro da calha e cruza a espinha. É a única
   vez na página em que conteúdo passa por cima dela.
   Fica fora do fluxo de propósito: como coluna de grade ele reservava 250px
   que o número não usava, e abria um vazio entre o dado e a frase que o
   explica. O texto começa na margem do corpo, como todo o resto do bloco. */
.dado-num {
  position: absolute;
  left: calc((var(--calha) + 48px) * -1);
  top: 22px;
  font-family: var(--font-title);
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.dado-txt { font-size: 16px; margin: 0; color: var(--text); max-width: 46ch; }

.dado-fonte {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* a barra mostra a proporção. o algarismo aparece pronto e escrito:
   número que sobe de zero é enfeite, barra que preenche é informação */
.barra {
  margin-left: calc((var(--calha) + 48px) * -1);
  margin-top: 14px;
  height: 3px;
  background: var(--border);
}

.barra i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--p, 1));
}

/* ---------- 03 vitrine ---------- */

.casos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.caso {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-alt);
  overflow: hidden;
  color: var(--text);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.caso:hover,
.caso:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
  outline: none;
}

.caso-pe { padding: 18px 20px 20px; }

.caso-mec {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.caso h3 { font-size: 19px; margin: 0 0 6px; }
.caso-marca { font-size: 13.5px; color: var(--text-muted); margin: 0 0 14px; }

.caso-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }

.caso-itens li {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 14px;
}

.caso-itens li::before { content: "+"; position: absolute; left: 0; color: var(--accent); }

/* ---------- 04 entrega e portão ---------- */

.entrega {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-top: 28px;
  align-items: start;
}

.lista-tec { list-style: none; margin: 0; padding: 0; }

.lista-tec li {
  border-top: 1px solid var(--border);
  padding: 11px 0;
  font-size: 14.5px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
}

.lista-tec li:last-child { border-bottom: 1px solid var(--border); }
.lista-tec span { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }

/* QUEBRA 4: o que reprova fica pendurado fora da coluna de texto.
   O que nos expõe não fica alinhado com o resto do discurso. */
.reprova {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
  padding: 20px 22px;
  margin-right: -24px;
}

.reprova-rot {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.reprova ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.reprova li {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
  padding-left: 16px;
}

.reprova li::before { content: "\00d7"; position: absolute; left: 0; color: var(--accent); }

.nossa-regua {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---------- movimento ---------- */

/* NÃO EXISTE MAIS ANIMAÇÃO POR ROLAGEM AQUI, e a remoção foi medida.

   `animation-timeline: view()` custa por ter o mecanismo ligado, não por
   elemento: com setenta elementos animados a página fazia 273 recálculos de
   estilo por passada de ponta a ponta; cortando para seis títulos, 271 —
   praticamente o mesmo; desligando de vez, 167. Ou seja, os ~104 recálculos
   eram o preço de haver qualquer linha do tempo de rolagem na página, e reduzir
   a lista de seletores não comprava nada. Medido em 2026-08-31, depois de
   reportada uma travada intermitente que aparecia até em janela anônima.

   E a decisão não é só de custo: o nosso padrão de narrativa manda "movimento
   que muda estado porque algo aconteceu, nunca conteúdo que surge". Título que
   sobe ao entrar na tela é exatamente conteúdo que surge. Era enfeite caro, e
   enfeite que não carrega informação sai.

   O que ficou: a espinha desenhada inteira, os títulos parados e visíveis, e
   nenhuma classe a mais no HTML. O movimento da página passa a ser só o que
   responde a ação de quem lê — hover, foco, clique, abrir uma dúvida. */

/* A espinha nasce inteira em vez de crescer com a rolagem. */
.bloco-grade::after { transform: scaleY(1); }


/* ---------- estreito ---------- */

@media (max-width: 900px) {
  .dobra-grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bloco-grade { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  /* empilhado, a calha vira rótulo horizontal e a espinha some: linha
     vertical sem coluna ao lado não separa coisa nenhuma */
  .calha {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 0 12px;
    min-height: 0;
    display: flex;
    gap: 12px;
    align-items: baseline;
  }

  .calha-num { margin-bottom: 0; }
  .bloco-grade::before,
  .bloco-grade::after { display: none; }

  /* sem calha não há o que invadir: o número volta pro fluxo e pro
     alinhamento, acima da frase que ele encabeça */
  .dado-num {
    position: static;
    display: block;
    margin-bottom: 10px;
  }

  .barra { margin-left: 0; }
  .casos { grid-template-columns: minmax(0, 1fr); }
  .entrega { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .reprova { margin-right: 0; }
  .trilha-cerca { margin-right: -24px; }

  .vitais-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitais-nota { grid-column: 1 / -1; text-align: left; max-width: none; }
}

@media (max-width: 520px) {
  .bloco-grade { padding: 64px 24px; }
  .dobra { padding-top: 108px; }
  .mcaso { flex-basis: 200px; }
}

/* ---------- animações de fundo que reagem ao cursor ---------- */

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* SEM `mask-image` aqui desde 2026-08-31. O esmaecimento das bordas é
     desenhado dentro do canvas, por ponto, no `heroGrid()` do main.js.

     A máscara é camada de composição, e o navegador a refaz toda vez que a
     dobra reentra na tela — que é o que acontece rolando pra cima. Enquanto a
     aceleração por hardware está de pé isso passa; quando ela cai pra software,
     trava. Como o efeito é só apagar os pontos perto da borda, e os pontos já
     são desenhados um a um, sai de graça na hora de pintar. Os que a máscara
     apagava agora nem entram na lista: nem laço, nem conta de cursor. */
  transform: translateZ(0);
}


/* ------------------------------------------------------------------
   Luz que segue o cursor no fundo — só aparece onde a seção
   não tem fundo próprio, então nunca briga com os cards.
------------------------------------------------------------------ */

.spotlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* idem: um gradiente do tamanho da tela por baixo do conteudo inteiro
     e caro de repintar. Promovido, ele e desenhado uma vez so. */
  will-change: opacity;
  transform: translateZ(0);
  opacity: 0;
  transition: opacity 0.7s ease;
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 40%),
    rgba(217, 162, 75, 0.10),
    rgba(217, 162, 75, 0.035) 42%,
    transparent 72%
  );
}

.spotlight.is-on { opacity: 1; }

main, .site-footer { position: relative; z-index: 1; }


/* a dobra vira o palco do grid de pontos, e a faixa de vitais fica por cima */
.dobra { position: relative; overflow: hidden; }
.vitais { position: relative; z-index: 1; }

/* ---------- rede de segurança ---------- */
/* Posta pelo `redeDeSeguranca()` do main.js quando a rolagem engasga de
   verdade na máquina de quem lê. Os dois são enfeite: o grid de pontos e a luz
   do cursor. O que a página tem a dizer continua inteiro sem eles. */
.sem-efeito .hero-canvas,
.sem-efeito .spotlight { display: none; }

/* ---------- abertura: a dobra entra depois que a logo pousa ---------- */
/*
   Sequência combinada: a logo carrega no centro, sobe até o lugar
   dela no cabeçalho, e só ENTÃO as escritas aparecem, em ordem. Os dois
   primeiros passos são o FLIP do `loadingScreen()`; este bloco é o terceiro.

   `.vr-abrindo` é posta pelo inicio.js e trocada por `.vr-aberto` quando a
   logo pousa. Sem JavaScript nenhuma das duas existe e a dobra abre normal.

   Movimento disparado por evento, e não por rolagem: acontece uma vez, custa
   uma transição e some. Foi por custo por quadro que a animação por rolagem
   saiu daqui em 2026-08-31, e essa distinção é a razão de esta poder existir.

   Os delays são por posição na grade, não por classe espalhada no HTML.
*/

/* NENHUM `opacity: 0` AQUI, e essa é a decisão que faz a abertura ser viável.

   Elemento com `opacity: 0` não conta como pintado, então segurar a dobra até
   a logo pousar empurra o LCP para o fim da abertura inteira. Medido na
   primeira visita com a sessão limpa: 3.056 ms no celular com 4G lento, contra
   um limite de 2.500. Tirar só do `<h1>` não resolveu — na tela estreita o
   maior elemento passa a ser o `<p class="dobra-sub">`, que quebra em mais
   linhas, e o número não se mexeu. Perseguir o candidato a LCP largura por
   largura é frágil: qualquer texto que cresça vira o próximo.

   Com só `transform`, nenhum elemento pode ser barrado como LCP em largura
   nenhuma, e o efeito pedido continua de pé — o "aparecer" vem do véu do
   carregamento saindo, e o encadeamento vem do deslize em sequência.

   Oclusão, ao contrário de transparência, não atrasa o LCP: ficar atrás do véu
   não conta. E vale registrar que o `auditar-desempenho.ps1` não vê esse caso,
   porque reusa a aba e cai numa sessão que já tem `vr-loaded` — o cenário real
   é o prospect abrindo o link do WhatsApp pela primeira vez. */
.vr-abrindo .dobra-grade > div > *,
.vr-abrindo .vitais-grade > * {
  transform: translateY(16px);
}

.vr-aberto .dobra-grade > div > *,
.vr-aberto .vitais-grade > * {
  transform: none;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* a coluna do texto abre de cima pra baixo */
.vr-aberto .dobra-grade > div:first-child > *:nth-child(1) { transition-delay: 0.01s; }
.vr-aberto .dobra-grade > div:first-child > *:nth-child(2) { transition-delay: 0.06s; }
.vr-aberto .dobra-grade > div:first-child > *:nth-child(3) { transition-delay: 0.13s; }
.vr-aberto .dobra-grade > div:first-child > *:nth-child(4) { transition-delay: 0.19s; }
.vr-aberto .dobra-grade > div:first-child > *:nth-child(5) { transition-delay: 0.23s; }

/* a vitrine entra junto do meio do texto, pra dobra não abrir em duas etapas
   separadas demais — ela é metade do argumento da primeira tela */
.vr-aberto .dobra-grade > div:last-child > *:nth-child(1) { transition-delay: 0.15s; }
.vr-aberto .dobra-grade > div:last-child > *:nth-child(2) { transition-delay: 0.20s; }

/* o chão da dobra fecha a sequência */
.vr-aberto .vitais-grade > * { transition-delay: 0.29s; }