/* Site KSG. Cores e tipos: docs/marca/tokens.css (fonte única, copiada pelo
   script de publicação). Direção aprovada pelo fundador em 24/08 a partir de
   referências institucionais: abertura escura e imponente em grafite, areia
   no papel do dourado (sobre grafite ela é liberada para texto: 7,32:1),
   miolo claro em creme, e o bloco de conversa final de volta ao escuro.
   Areia nunca vira texto sobre fundo claro (regra dos tokens). */

@import url("tokens.css");

:root{
  color-scheme: light;
  --fundo: var(--creme);
  --tinta: var(--grafite);
  --titulo: var(--ardosia);
  --filete: var(--areia);
  --apoio: var(--sepia);
  --erro-cor: #8a2f2b;
  --grafite-suave: #2b2927; /* degrau do grafite para dar profundidade ao escuro */
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-texto);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.miolo{
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.miolo-estreito{ max-width: 46rem; }

h1, h2, h3{
  font-family: var(--fonte-display);
  color: var(--titulo);
  line-height: 1.1;
  margin: 0 0 1.25rem;
}
h1{
  font-size: clamp(2.2rem, 5.2vw, 3.7rem);
  font-weight: var(--peso-titulo-forte);
  letter-spacing: -0.015em;
  max-width: 21ch;
  color: var(--creme);
}
h1 em{ font-style: italic; color: var(--areia); }
h2{
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  font-weight: var(--peso-titulo);
  letter-spacing: -0.01em;
  max-width: 24ch;
}
h3{ font-size: 1.25rem; font-weight: var(--peso-titulo); }

p{ margin: 0 0 1.1rem; max-width: 62ch; }
a{ color: var(--titulo); text-underline-offset: 3px; }

:focus-visible{
  outline: 2px solid var(--ardosia);
  outline-offset: 3px;
  border-radius: 2px;
}
.abertura :focus-visible, .topo :focus-visible, .secao-escura :focus-visible, .rodape :focus-visible{
  outline-color: var(--areia);
}

/* Olho de seção: caixa-alta com filete, como nas referências */
.olho{
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.82rem;
  font-weight: var(--peso-texto-forte);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--apoio);
  margin: 0 0 1.3rem;
}
.olho::before{
  content: "";
  width: 2.6rem;
  height: 2px;
  background: var(--filete);
}
.olho-claro{ color: var(--areia); }

/* Botões: canto 2px em tudo, um sistema só */
.botao{
  display: inline-block;
  font-family: var(--fonte-texto);
  font-weight: var(--peso-texto-forte);
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  padding: 0.95rem 1.8rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}
.botao:active{ transform: translateY(1px); }
/* Sobre escuro: areia cheia (texto grafite: 7,32:1) e contorno claro */
.botao-areia{ background: var(--areia); color: var(--grafite); border-color: var(--areia); }
.botao-areia:hover{ background: #d3bda3; border-color: #d3bda3; }
.botao-claro{ background: transparent; color: var(--creme); border-color: rgba(233, 223, 213, 0.55); }
.botao-claro:hover{ border-color: var(--creme); background: rgba(233, 223, 213, 0.08); }
/* Sobre claro: grafite cheio */
.botao-cheio{ background: var(--grafite); color: var(--creme); border-color: var(--grafite); }
.botao-cheio:hover{ background: var(--ardosia); border-color: var(--ardosia); }
/* Sobre claro, o secundario: contorno grafite */
.botao-contorno{ background: transparent; color: var(--grafite); border-color: var(--grafite); }
.botao-contorno:hover{ background: rgba(35, 33, 32, 0.06); }

/* Topo escuro, fixo */
.topo{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--grafite);
  border-bottom: 1px solid rgba(197, 171, 142, 0.35);
}
.topo-linha{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.marca-lockup{
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.marca-simbolo{ height: 2.6rem; width: 2.6rem; display: block; }
.marca-descritor{
  font-size: 0.78rem;
  font-weight: var(--peso-texto-forte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--creme);
  max-width: 15rem;
  line-height: 1.35;
}
.topo .botao{ padding: 0.55rem 1.2rem; font-size: 0.92rem; }

/* Abertura escura e imponente */
.abertura{
  background:
    radial-gradient(60rem 34rem at 82% 0%, rgba(57, 82, 96, 0.35), transparent 60%),
    radial-gradient(46rem 30rem at 8% 100%, rgba(94, 80, 63, 0.28), transparent 55%),
    var(--grafite);
  color: var(--creme);
  padding: 6.5rem 0 0;
  overflow: hidden;
}
.abertura-grade{
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 3rem;
  align-items: center;
  padding-bottom: 5.5rem;
}
.abertura-apoio{
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.55;
  color: rgba(233, 223, 213, 0.82);
  margin: 1.7rem 0 2.6rem;
  max-width: 42ch;
}
.abertura-acoes{ display: flex; flex-wrap: wrap; gap: 1rem; }
/* O selo: símbolo positivo sobre papel creme, o par canônico da marca,
   aplicado como carimbo de papelaria sobre o herói escuro */
/* --- Herói: a tela do sistema como argumento, não como enfeite -------------
   A tese da página é "quantas pessoas você tem para o sistema funcionar?".
   A lista de módulos É essa pergunta em imagem, e por isso ela entra em vez
   do cartão com o símbolo, que ocupava o lugar sem dizer nada. */
.abertura-tela{
  margin: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tela-moldura{
  border: 1px solid rgba(197,171,142,0.42);
  padding: 0.5rem;
  border-radius: 3px;
  background: rgba(233,223,213,0.05);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.75);
  line-height: 0;
  /* A lista TRANSBORDA de proposito: ela some no rodape da moldura em vez de
     terminar. O corte diz "tem mais do que cabe" sem precisar escrever. */
  max-height: 30rem;
  overflow: hidden;
  position: relative;
}
.tela-moldura::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 7.5rem;
  background: linear-gradient(to bottom, rgba(35,33,32,0), rgba(35,33,32,0.97));
  pointer-events: none;
}
.tela-moldura img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1px;
}
.abertura-tela figcaption{
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--areia);
  max-width: 38ch;
}
@media (max-width: 860px){
  .abertura-tela{ display: block; margin-top: 0.5rem; }
  .abertura-tela figcaption{ margin-top: 0.85rem; max-width: none; }
}

.abertura-simbolo{
  justify-self: end;
  align-self: center;
  background: var(--creme);
  padding: 2rem;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
}
.abertura-simbolo img{
  width: 100%;
  max-width: 11.5rem;
  display: block;
}

/* A frase, ainda dentro do escuro, separada por um fio de areia */
.abertura-frase-bloco{
  border-top: 1px solid rgba(197, 171, 142, 0.35);
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.6rem;
  align-items: start;
  padding-top: 3.4rem;
  padding-bottom: 4.2rem;
}
.abertura-frase-bloco::before{
  content: "";
  height: 3px;
  background: var(--areia);
  margin-top: 1.05rem;
}
.faixa-frase{
  color: var(--creme);
  font-family: var(--fonte-display);
  font-weight: var(--peso-titulo);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.5;
  margin: 0;
  max-width: 34ch;
}
.faixa-frase strong{
  color: var(--areia);
  font-weight: var(--peso-titulo);
}

/* Seções claras */
.secao{ padding: 5.5rem 0; scroll-margin-top: 4.5rem; }
.secao-areia{
  background: rgba(197, 171, 142, 0.16);
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
}
.secao h2::before{
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  background: var(--filete);
  margin-bottom: 1.4rem;
}
.secao .olho + h2::before{ display: none; } /* quando há olho, o filete é dele */

.duas-colunas{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.duas-colunas-divisa{ position: relative; }
.duas-colunas-divisa::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--filete);
}

/* Lista de horas: fio de razão contábil */
.lista-horas{
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: center;
}
.lista-horas li{
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.85rem 0;
  border-bottom: 1px dotted var(--sepia);
  font-weight: var(--peso-texto-forte);
}
.lista-horas li::before{
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--filete);
  transform: translateY(-1px);
}
.lista-horas li:first-child{ border-top: 1px dotted var(--sepia); }

/* A tese da pagina inteira. Sangra a largura toda e troca de fundo: e o unico
   momento em que a pagina para de explicar e faz UMA pergunta. Grafite sobre
   areia = 7,32:1 (tokens.css), liberado para texto corrido. */
.pergunta-central{
  font-family: var(--fonte-display);
  font-weight: var(--peso-titulo);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.32;
  color: var(--grafite);
  background: var(--areia);
  margin: 3.5rem calc(50% - 50vw) 0;
  padding: 3.4rem max(1.5rem, calc(50vw - 33rem));
  max-width: none;
  text-wrap: balance;
}
.pergunta-central strong{ font-weight: var(--peso-titulo-forte); }

/* Para quem */
.lista-recusa{
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista-recusa li{
  margin-bottom: 1.2rem;
  padding-left: 1.2rem;
  border-left: 3px solid var(--filete);
}

/* Método: numeração serifada grande em sépia */
.metodo{
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
  max-width: 48rem;
}
.metodo li{
  counter-increment: passo;
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.6rem;
  row-gap: 0.45rem;
  padding: 2.2rem 0;
}
.metodo li + li{ border-top: 1px solid var(--filete); }
.metodo li::before{
  content: counter(passo, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--fonte-display);
  font-weight: var(--peso-titulo-forte);
  font-size: 3rem;
  line-height: 1;
  color: var(--apoio);
  opacity: 0.55;
}
.metodo h3{ grid-column: 2; grid-row: 1; margin: 0; font-size: 1.4rem; }
.metodo li p{ grid-column: 2; grid-row: 2; margin: 0; }

.frase-portao{
  font-family: var(--fonte-display);
  font-weight: var(--peso-titulo);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--titulo);
  border-top: 1px solid var(--filete);
  padding-top: 1.8rem;
  margin: 2.2rem 0 2rem;
  max-width: 48rem;
}

/* Por que acreditar: três colunas com fio, sem cartão */
.provas{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5rem;
}
.prova{
  border-top: 3px solid var(--filete);
  padding-top: 1.3rem;
}
.prova h3{ margin-bottom: 0.5rem; }
.prova p{ margin: 0; }

/* Fundador: foto + carta */
.fundador-grade{
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 3rem;
  align-items: start;
}
.fundador-foto{
  margin: 0;
  position: sticky;
  top: 6rem;
}
.fundador-foto img{
  width: 100%;
  height: auto;
  display: block;
  /* O retrato e' PNG/WebP com o fundo recortado de verdade, entao ele nao tem
     borda para esconder: a silhueta apoia direto no grafite da secao.
     Antes daqui houve uma mascara em gradiente tentando dissolver o quadrado do
     JPG. Era veu por cima de fundo errado -- o recorte resolve na origem. */
}
.fundador-foto figcaption{
  font-size: 0.92rem;
  color: var(--areia);
  margin-top: -0.6rem;
}

/* FAQ: acordeão nativo com fio */
.faq{ display: grid; }
.faq details{
  border-bottom: 1px solid var(--filete);
}
.faq details:first-child{ border-top: 1px solid var(--filete); }
.faq summary{
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-display);
  font-weight: var(--peso-titulo);
  font-size: 1.2rem;
  color: var(--titulo);
  padding: 1.2rem 2.5rem 1.2rem 0;
  position: relative;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-texto);
  font-size: 1.6rem;
  color: var(--apoio);
}
.faq details[open] summary::after{ content: "\2212"; }
.faq details p{
  margin: 0 0 1.4rem;
  max-width: 58ch;
}

/* Quem está por trás: tratamento de carta, com capitular */
.sobre-texto div > p:first-child::first-letter{
  font-family: var(--fonte-display);
  font-weight: var(--peso-titulo-forte);
  font-size: 3.6em;
  line-height: 0.8;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--titulo);
}
.frase-fecho{
  font-family: var(--fonte-display);
  font-weight: var(--peso-titulo);
  font-size: 1.45rem;
  color: var(--titulo);
  border-top: 1px solid var(--filete);
  padding-top: 1.6rem;
  margin-top: 2rem;
}

/* Contato: bloco escuro de fechamento, como nas referências */
.secao-escura{
  background:
    radial-gradient(50rem 30rem at 90% 10%, rgba(57, 82, 96, 0.30), transparent 60%),
    var(--grafite);
  color: var(--creme);
}
.secao-escura h2{ color: var(--creme); }
.secao-escura h2::before{ background: var(--areia); }
.secao-escura > .miolo > p{ color: rgba(233, 223, 213, 0.85); }
.secao-escura a{ color: var(--areia); }
.secao-escura a.botao-areia{ color: var(--grafite); text-decoration: none; }

/* Formulário: folha de papel sobre o escuro */
.formulario-moldura{
  background: #fdfbf8;
  color: var(--tinta);
  border: 1px solid rgba(197, 171, 142, 0.5);
  border-radius: 2px;
  padding: 2.25rem;
  margin-top: 2.25rem;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
}
.formulario-moldura a{ color: var(--titulo); }
#formulario-lead{ display: grid; gap: 1.35rem; }
.campo{ display: grid; gap: 0.45rem; margin: 0; padding: 0; border: 0; }
.campo label, .campo legend{
  font-weight: var(--peso-texto-forte);
  font-size: 0.98rem;
  padding: 0;
}
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo select{
  font: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1px solid rgba(94, 80, 63, 0.55);
  border-radius: 2px;
  padding: 0.75rem 0.85rem;
  width: 100%;
  transition: border-color 0.14s ease;
}
.campo input:focus, .campo select:focus{ border-color: var(--ardosia); }
.campo-par{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
}
.opcoes{ display: flex; flex-wrap: wrap; gap: 0.6rem; }
.opcao{
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(94, 80, 63, 0.55);
  border-radius: 2px;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  background: #fff;
  font-weight: var(--peso-texto-forte);
  font-size: 0.98rem;
  transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.opcao input{
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  cursor: pointer;
}
.opcao:has(input:checked){
  background: var(--grafite);
  color: var(--creme);
  border-color: var(--grafite);
}
.opcao:has(input:focus-visible){
  outline: 2px solid var(--ardosia);
  outline-offset: 3px;
}
.campo-oculto{ position: absolute; left: -9999px; }
.erro{ color: var(--erro-cor); font-size: 0.92rem; margin: 0; }
#formulario-lead .botao{ justify-self: start; }
.aviso-ok{
  border-left: 3px solid var(--areia);
  padding: 1rem 1.2rem;
  background: rgba(233, 223, 213, 0.1);
  color: var(--creme);
  font-weight: var(--peso-texto-forte);
  margin-top: 2rem;
}
.aviso-falha{
  border-left: 3px solid var(--areia);
  padding: 1rem 1.2rem;
  background: rgba(233, 223, 213, 0.1);
  color: var(--creme);
  font-weight: var(--peso-texto-forte);
  margin-top: 2rem;
}
#fallback .botao{ margin-top: 0.5rem; }
.contato-direto{
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px dotted rgba(197, 171, 142, 0.5);
  color: rgba(233, 223, 213, 0.85);
}

/* Rodapé: continua o escuro, separado por um fio */
.rodape{ background: var(--grafite); border-top: 1px solid rgba(197, 171, 142, 0.35); }
.rodape-linha{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.rodape a{ color: var(--creme); }

/* Revelação suave ao rolar: só com JS ligado e sem preferência por menos
   movimento; sem JS, tudo nasce visível */
/* ---------------------------------------------------------------------------
   PÁGINA /metodo — a que CONFIRMA.
   Ela herda tudo da LP e acrescenta só o que a LP não tinha: tabelas, os
   cartões de camada e a nota longa. Nada aqui redefine classe da LP — se
   redefinisse, as duas páginas passariam a divergir sem ninguém perceber.
   ------------------------------------------------------------------------ */

/* Abertura mais quieta: quem chega no método está avaliando, não decidindo. */
.abertura-metodo{ padding-bottom: 3.5rem; }
.abertura-metodo h1{ max-width: 22ch; }

.miolo-estreito-texto{ max-width: 62ch; }

/* Cartões de camada — usados pelas três camadas da base e pelas três travas. */
.camadas{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin: 2.4rem 0 0;
}
.camada{ border-top: 3px solid var(--filete); padding-top: 1.2rem; }
.camada h3{ margin: 0 0 .6rem; color: var(--titulo); }
.camada p{ margin: 0; }
/* A trava é uma proibição, não uma qualidade: filete em sépia a diferencia
   das camadas da base sem inventar cor nova. */
.camada-trava{ border-top-color: var(--apoio); }

/* Tabelas do método. A rolagem própria existe para o corpo da página nunca
   rolar de lado no celular. */
.tabela-rolagem{ overflow-x: auto; margin: 2rem 0 0; }
.tabela-metodo{ width: 100%; border-collapse: collapse; font-size: .98rem; min-width: 34rem; }
.tabela-metodo th{
  text-align: left;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apoio);
  padding: 0 1rem .7rem 0;
  border-bottom: 2px solid var(--filete);
}
.tabela-metodo td{
  padding: .95rem 1rem .95rem 0;
  border-bottom: 1px solid rgba(35,33,32,.12);
  vertical-align: top;
}
.tabela-metodo tr:last-child td{ border-bottom: 0; }
.col-num{ width: 2.5rem; color: var(--apoio); font-variant-numeric: tabular-nums; }
/* A linha do humano é a única que muda de peso — é o portão, e ele é o produto. */
.linha-portao td{ background: rgba(197,171,142,.22); }
.secao-areia .linha-portao td{ background: rgba(35,33,32,.06); }

/* "O que não é" — lista de definição, porque cada item é um termo e a razão dele. */
.nao-e{ margin: 2rem 0 0; max-width: 62ch; }
.nao-e dt{
  font-family: var(--fonte-display);
  font-weight: var(--peso-titulo);
  font-size: 1.15rem;
  color: var(--titulo);
  margin-top: 1.7rem;
}
.nao-e dt:first-child{ margin-top: 0; }
.nao-e dd{ margin: .45rem 0 0; }

.nota-pessoas{
  margin-top: 2.6rem;
  padding: 1.5rem 1.6rem;
  border-left: 4px solid var(--apoio);
  background: rgba(94,80,63,.06);
  max-width: 66ch;
}
.nota-pessoas h3{ margin: 0 0 .7rem; }
.nota-pessoas p{ margin: 0 0 .8rem; }
.nota-pessoas p:last-child{ margin-bottom: 0; }

.rodape-links{ display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }

/* Página de privacidade: texto longo, uma coluna, sem floreio. */
.legal{ max-width: 68ch; }
.legal h2{ margin-top: 2.6rem; }
.legal h2:first-of-type{ margin-top: 1.5rem; }
.legal ul{ margin: .8rem 0 0; padding-left: 1.2rem; }
.legal li{ margin: .45rem 0; }
.legal .atualizado{ color: var(--apoio); font-size: .92rem; }

@media (prefers-reduced-motion: no-preference){
  html.js .revela{
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  html.js .revela.visivel{
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ transition: none !important; animation: none !important; }
}

/* Celular */
@media (max-width: 47.9rem){
  body{ font-size: 1.0625rem; }
  .abertura{ padding: 3.25rem 0 0; }
  .abertura-grade{ grid-template-columns: 1fr; gap: 2rem; padding-bottom: 3rem; }
  .abertura-simbolo{ display: none; }
  .abertura-frase-bloco{ grid-template-columns: 1fr; gap: 1rem; padding-top: 2.4rem; padding-bottom: 3rem; }
  .abertura-frase-bloco::before{ width: 3.5rem; margin-top: 0; }
  .duas-colunas{ grid-template-columns: 1fr; gap: 2rem; }
  .duas-colunas-divisa::before{ display: none; }
  .provas{ grid-template-columns: 1fr; gap: 1.8rem; }
  .fundador-grade{ grid-template-columns: 1fr; gap: 2rem; }
  .fundador-foto{ position: static; max-width: 22rem; }
  .campo-par{ grid-template-columns: 1fr; }
  .secao{ padding: 3.25rem 0; }
  .metodo li{ grid-template-columns: 3.4rem 1fr; column-gap: 1rem; padding: 1.6rem 0; }
  .metodo li::before{ font-size: 2.2rem; }
  .formulario-moldura{ padding: 1.4rem; }
  .botao{ width: 100%; white-space: normal; }
  .topo .botao{ width: auto; }
  #formulario-lead .botao{ width: 100%; }
  .camadas{ grid-template-columns: 1fr; gap: 1.8rem; }
  .abertura-metodo{ padding-bottom: 2.4rem; }
  .rodape-links{ gap: .9rem; }
}

/* --- O portão humano quebra a sequência ------------------------------------
   Regra de desenho: estrutura é informação. O passo 2 não é "mais um passo" —
   é o único ponto em que a decisão sai da máquina. Desenhá-lo igual aos outros
   contaria uma mentira sobre o produto. Por isso ele inverte o fundo, ganha
   etiqueta e interrompe a numeração corrida. */
.metodo .passo-portao{
  position: relative;
  background: var(--grafite);
  color: var(--creme);
  margin: 1.6rem -1.4rem;
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: 3px;
  border-left: 4px solid var(--areia);
}
.metodo .passo-portao h3{ color: var(--creme); }
.metodo .passo-portao p{ color: rgba(233,223,213,0.86); }
.metodo .passo-portao::before{ color: var(--areia); }
/* A etiqueta "o portao" saiu no passe de gosto: era o QUARTO olho da pagina
   (teto: 3) e a terceira vez que a pagina dizia "portao" no mesmo bloco. A
   inversao de fundo e o filete de areia ja marcam o momento sem rotulo. */
@media (max-width: 860px){
  .metodo .passo-portao{ margin-left: -1rem; margin-right: -1rem; padding: 1.25rem 1rem 1.35rem; }
}

/* --- Bloco do fundador em grafite ------------------------------------------
   Motivo de desenho, nao de gosto: eram CINCO secoes creme seguidas, e o
   limite e duas. Este e o bloco certo para inverter porque a foto ja foi feita
   contra fundo escuro: ela encaixa sem recorte, em vez de virar retangulo
   colado por cima. Tambem da a segunda ancora escura no meio da pagina. */
.secao-fundador h3, .secao-fundador strong{ color: var(--creme); }
.secao-fundador p{ color: rgba(233,223,213,0.87); }
.secao-fundador figcaption,
.secao-fundador .legenda{ color: var(--areia); }
/* A capitular herdava ardosia, que sobre grafite mede 1,95:1 e os tokens
   PROIBEM. Sobre fundo escuro ela vira areia (7,32:1). */
.secao-fundador .sobre-texto div > p:first-child::first-letter{ color: var(--areia); }

/* ---------------------------------------------------------------------------
   SITE INSTITUCIONAL (27/08). A landing e' pagina unica e nunca precisou de
   menu; o institucional tem cinco paginas e precisa dizer onde voce esta'.
   Tudo abaixo usa os tokens e o vocabulario que a landing ja' estabeleceu:
   nenhuma cor nova, nenhuma fonte nova. ------------------------------------ */

.topo-nav{
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
  margin-right: 1.6rem;
}
.topo-nav a{
  color: rgba(233, 223, 213, 0.82);
  text-decoration: none;
  font-size: 0.94rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
}
.topo-nav a:hover{ color: var(--creme); border-bottom-color: rgba(197, 171, 142, 0.5); }
/* Estado ativo pelo aria-current: o mesmo atributo serve o leitor de tela e o
   olho, em vez de uma classe que so' o olho enxerga. */
.topo-nav a[aria-current="page"]{
  color: var(--creme);
  border-bottom-color: var(--areia);
}
@media (max-width: 900px){
  .topo-nav{ display: none; }
}

/* A abertura institucional respira mais que a da landing: ela nao tem tela de
   sistema para mostrar, tem uma frase para sustentar. */
.abertura-institucional .abertura-grade{ align-items: center; }
/* A manchete institucional e' mais longa que a da landing (ela explica o modelo
   de entrega, nao grita a dor), entao aqui ela cede um degrau de corpo e ganha
   linha mais larga. Sem isso sao quatro linhas de titulo e os botoes caem para
   fora da primeira tela, que e' o pior lugar para um CTA institucional. */
.abertura-institucional h1{
  max-width: 26ch;
  font-size: clamp(2rem, 4.1vw, 3rem);
}

a.marca-lockup{ text-decoration: none; }

/* Fundo claro alternativo: o ritmo da home alterna escuro, areia e creme, e
   duas secoes claras seguidas precisavam de um degrau entre elas. */
.secao-clara-alt{ background: #f2ece4; }

/* As tres alternativas honestas. Larguras DIFERENTES de proposito: tres
   cartoes identicos em grade sao o tell numero um de pagina gerada, e aqui a
   assimetria tambem diz a verdade -- a do meio e' a comparacao que mais
   aparece na boca do cliente, entao ocupa mais. */
.alternativas{
  display: grid;
  gap: 2.2rem;
  margin-top: 2.4rem;
}
.alternativas article{
  border-top: 3px solid var(--filete);
  padding-top: 1.2rem;
  /* Sem max-width em ch aqui: 62ch da' ~555px e ANULAVA as larguras
     percentuais abaixo, deixando as tres iguais -- exatamente o cartao repetido
     que a assimetria existia para evitar. Medido em 27/08: 555, 555, 555.
     A medida de leitura confortavel volta no <p>, onde ela pertence. */
}
.alternativas article p{ max-width: 58ch; }
.alternativas article h3{ margin: 0 0 .6rem; color: var(--titulo); }
.alternativas article p{ margin: 0; }
.alternativas article:nth-child(2){ margin-left: auto; }
@media (min-width: 900px){
  .alternativas article:nth-child(1){ width: 84%; }
  .alternativas article:nth-child(2){ width: 92%; }
  .alternativas article:nth-child(3){ width: 76%; }
}

/* Destaque com fio: leva o peso sem virar caixa colorida. */
.destaque-fio{
  border-left: 3px solid var(--areia);
  padding-left: 1.2rem;
  margin: 1.8rem 0;
}

/* A faixa da frase nasceu para fundo ESCURO, onde o creme da' 12,20:1. Em secao
   clara ela caia para 1,67:1 -- que e' exatamente o numero que o tokens.css
   marca como PROIBIDO para qualquer texto. Medido em 27/08 na home
   institucional, com o texto praticamente invisivel.
   A correcao e' por CONTEXTO, nao por classe extra: qualquer faixa que venha a
   ser posta em secao clara se corrige sozinha, sem ninguem precisar lembrar. */
.secao-areia .faixa-frase,
.secao-clara-alt .faixa-frase{ color: var(--tinta); }        /* 12,20:1 */
.secao-areia .faixa-frase strong,
.secao-clara-alt .faixa-frase strong{ color: var(--titulo); } /*  6,27:1 */

/* Retrato no alto da pagina /sobre: aqui ele e' o assunto, nao um apoio ao
   lado do texto, entao nao ganha o sticky da secao do fundador na home. */
.fundador-foto-retrato{ position: static; justify-self: end; max-width: 20rem; }
.fundador-foto-retrato figcaption{ text-align: right; }

/* Leitura longa: os capitulos da historia precisam de ar entre eles, senao a
   pagina vira um bloco unico de texto. */
.historia h2{ margin-top: 3rem; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.historia h2:first-child{ margin-top: 0; }
.historia p{ max-width: 64ch; }

/* ---------------------------------------------------------------------------
   MOBILE DO SITE INSTITUCIONAL (27/08, corrigindo dois defeitos medidos no ar)

   1. O MENU SUMIA E NADA ENTRAVA NO LUGAR. Escondido abaixo de 900px, o site de
      quatro paginas ficava sem navegacao nenhuma no celular -- e a spec diz que
      o socio abre no celular. Aqui o topo passa a EMPILHAR: marca e WhatsApp na
      primeira linha, navegacao na segunda, rolando na horizontal se nao couber.
      Sem hamburger de proposito: hamburger pede JS, e JS quebrado e' um menu
      morto, que e' pior que um menu simples.

   2. O SELO SUMIA. A regra `.abertura-simbolo{display:none}` veio da landing
      antiga e escondia a unica imagem do heroi institucional. Aqui ele volta,
      menor e no fluxo. --------------------------------------------------- */
@media (max-width: 900px){
  .topo-nav{
    display: flex;
    order: 3;
    width: 100%;
    margin: 0.35rem 0 0;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
  }
  .topo-nav::-webkit-scrollbar{ display: none; }
  .topo-nav a{ white-space: nowrap; font-size: 0.88rem; }
  .topo-linha{ flex-wrap: wrap; }
}

@media (max-width: 47.9rem){
  /* so' no institucional: na landing o selo continua fora, porque la' quem
     ocupa o heroi e' a tela do ERP. */
  .abertura-institucional .abertura-simbolo{
    display: block;
    justify-self: start;
    padding: 1.4rem;
  }
  .abertura-institucional .abertura-simbolo img{ max-width: 7rem; }
  .fundador-foto-retrato{ justify-self: start; max-width: 15rem; }
  .fundador-foto-retrato figcaption{ text-align: left; }
}

/* O italico do titulo estende ~6px alem da caixa do h1 (medido em 27/08), e a
   .abertura tem overflow:hidden. Hoje nao corta porque nenhuma ultima linha
   termina em perna longa. E' sorte, nao desenho: esta reserva garante que siga
   inteiro se a copy mudar. */
h1 em{ padding-bottom: 0.08em; }

/* ---------------------------------------------------------------------------
   SECAO COM FOTO DE FUNDO (27/08). O site institucional precisa de densidade
   visual que a landing nao precisa: quem chega aqui esta' avaliando, e parede
   de texto sobre cor solida nao sustenta isso. Referencia dada pelo fundador:
   veritascontabil.com, que resolve exatamente assim.

   A montagem usa DOIS pseudo-elementos em z-index -1 com isolation na secao.
   Motivo: por um `.secao > * { z-index: 1 }` cada filho viraria contexto de
   empilhamento proprio e os overlaps entre secoes quebrariam.

   O veu e' opaco de proposito. A conta que importa aqui nao e' "quanto da foto
   aparece", e' o contraste do texto por cima: medido em 27/08, o creme sobre
   estas fotos veladas fica acima de 4.5:1 -- abaixo disso a foto sai. ------- */
.secao-foto{
  position: relative;
  isolation: isolate;
  background: var(--grafite);
}
.secao-foto::before,
.secao-foto::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.secao-foto::before{
  background-image: var(--foto-mob);
  background-size: cover;
  background-position: center;
}
.secao-foto::after{
  /* mais fechado em cima, onde mora o titulo; mais aberto embaixo, onde a foto
     pode respirar sem competir com texto */
  /* 🔴 O MEIO SUBIU DE 0,72 PARA 0,80 EM 29/08, e é correção de defeito, não
     ajuste de gosto. A medição de 27/08 conferiu só o texto CREME sobre as
     fotos e deu certo; o rótulo em AREIA, que é menor e mais claro, nunca foi
     medido — e estava em 4,05:1 na abertura da home e 4,31:1 no contato,
     contra o mínimo de 4,5 que o próprio tokens.css manda. Com 0,80 os dois
     passam. A foto escurece um degrau, e a regra da casa é essa: abaixo de
     4,5 quem sai é a foto, não o texto. */
  background: linear-gradient(to bottom,
    rgba(35, 33, 32, 0.88) 0%,
    rgba(35, 33, 32, 0.80) 55%,
    rgba(35, 33, 32, 0.84) 100%);
}
@media (min-width: 48rem){
  .secao-foto::before{ background-image: var(--foto); }
}
/* Texto sobre foto herda o tratamento das secoes escuras. */
.secao-foto h2, .secao-foto h3{ color: var(--creme); }
.secao-foto p{ color: rgba(233, 223, 213, 0.92); }
.secao-foto .olho{ color: var(--areia); }
.secao-foto h2::before{ background: var(--areia); }

/* A abertura com foto: a imagem entra na propria secao, e o selo de papel sai.
   Os dois juntos brigam -- um diz "documento", o outro diz "lugar". */
.abertura-foto{ background: var(--grafite); }
/* So' a partir do tablet. Sem o @media esta regra vencia a do celular (mais
   especifica e escrita depois) e o titulo usava METADE da largura do telefone,
   em 7 a 10 linhas -- medido em 12/10 em 360, 390 e 430 px. */
@media (min-width: 48rem){
  .abertura-foto .abertura-grade{ grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

/* A faixa sobre FOTO volta ao creme: a regra de secao clara acima nao se aplica
   aqui, e aplicar deixaria grafite sobre foto escura (ilegivel). */
.secao-foto .faixa-frase{ color: var(--creme); }
.secao-foto .faixa-frase strong{ color: var(--areia); }

/* Os titulos das alternativas usam --titulo (ardosia), que existe para fundo
   CLARO. Sobre foto escura eles somem, e a regra generica `.secao-foto h3`
   perdia na especificidade para `.alternativas article h3`. Medido em 27/08:
   ilegiveis na primeira montagem com foto. */
.secao-foto .alternativas article h3{ color: var(--creme); }
.secao-foto .alternativas article p{ color: rgba(233, 223, 213, 0.92); }
.secao-foto .alternativas article{ border-top-color: var(--areia); }

/* A cidade no rodape e' endereco, nao "faixa de localidade" decorativa: ela
   existe porque o site precisa ser achado, e entra tambem nos dados
   estruturados. A area atendida continua sendo o Brasil. */
.rodape-local{ color: var(--areia); opacity: .8; }

/* ---------------------------------------------------------------------------
   REVISÃO DE 28/08 — três coisas que o fundador cobrou olhando o site no ar:
   "Não vi as redes sociais. Na aba soluções, precisa passar o mouse e vir
   algumas opções. Falta imagens e gráficos demonstrando o método."

   A referência que ele deu (machadoreolon.com.br) resolve as três com o mesmo
   vocabulário que a KSG já tem: geometria, filete e tipografia. NENHUMA cor
   nova entra aqui, e nenhum gráfico vira imagem — tudo é HTML, então cresce
   com a tela, é lido por leitor de tela e não borra em retina.
   ------------------------------------------------------------------------ */

/* --- 1. Menu suspenso em Soluções -----------------------------------------
   Sem JS, de propósito: a mesma razão que manteve o hambúrguer fora do
   celular (JS quebrado = menu morto). Abre no :hover para o mouse e no
   :focus-within para o teclado — o mesmo menu serve os dois. */
.topo-item{ position: relative; display: inline-flex; align-items: center; }

/* A ponte invisível: sem ela o menu fecha no vão entre o link e o painel,
   porque o header tem 1rem de respiro embaixo. */
.topo-item-menu::after{
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 1.2rem;
}
.topo-item-menu > a::after{
  content: ""; display: inline-block; margin-left: .42rem;
  width: .38rem; height: .38rem;
  border: solid currentColor; border-width: 0 1.4px 1.4px 0;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform .16s ease;
}
.topo-item-menu:hover > a::after,
.topo-item-menu:focus-within > a::after{ transform: translateY(.06em) rotate(225deg); }

.topo-menu{
  position: absolute; top: calc(100% + 1.15rem); left: -1.1rem;
  min-width: 22rem;
  background: var(--grafite-suave);
  border: 1px solid rgba(197, 171, 142, 0.35);
  padding: .5rem 0;
  opacity: 0; visibility: hidden; transform: translateY(-.4rem);
  transition: opacity .16s ease, transform .16s ease, visibility 0s .16s;
  z-index: 20;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
}
.topo-item-menu:hover .topo-menu,
.topo-item-menu:focus-within .topo-menu{
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
.topo-menu a{
  display: block; padding: .7rem 1.1rem; border-bottom: none;
  color: var(--creme); font-size: .92rem; line-height: 1.35;
}
.topo-menu a + a{ border-top: 1px solid rgba(197, 171, 142, 0.16); }
.topo-menu a:hover{ background: rgba(197, 171, 142, 0.12); border-bottom: none; }
.topo-menu .menu-rotulo{
  display: block; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--areia); margin-bottom: .18rem;
}
.topo-menu .menu-todas{ color: var(--areia); font-weight: var(--peso-texto-forte); }

@media (max-width: 900px){
  /* No celular a navegação já é uma faixa que rola: um painel suspenso ali
     seria um alvo que ninguém alcança. As três portas continuam a um toque,
     pela própria página. */
  .topo-menu{ display: none; }
  .topo-item-menu::after{ display: none; }
  .topo-item-menu > a::after{ display: none; }
}

/* --- 2. Redes sociais no rodapé -------------------------------------------
   Quadrado com filete, como o resto da papelaria. Areia sobre grafite é
   liberada (7,32:1); no hover a peça inverte e a areia vira fundo. */
/* Separado do resto da linha por um fio: no primeiro teste os dois ícones
   ficavam colados em "Canoas, RS" e liam como continuação do endereço. */
.rodape-social{
  display: flex; gap: .55rem; align-items: center;
  padding-left: 1.4rem; margin-left: .2rem;
  border-left: 1px solid rgba(197, 171, 142, 0.3);
}
@media (max-width: 62rem){
  /* Quando a linha quebra, o fio à esquerda vira um risco solto. */
  .rodape-social{ padding-left: 0; margin-left: 0; border-left: none; }
}
.rodape-social a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid rgba(197, 171, 142, 0.45);
  color: var(--areia);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.rodape-social a:hover{
  background: var(--areia); color: var(--grafite); border-color: var(--areia);
}
.rodape-social svg{ width: 1.15rem; height: 1.15rem; fill: currentColor; display: block; }

/* --- 2b. Onde as âncoras do menu param -----------------------------------
   🔴 DEFEITO MEDIDO NO AR, não no código: clicando "Jurídico" no menu, o
      destino caía a 85px ACIMA do topo da janela, ou seja, atrás do cabeçalho
      fixo. O menu funcionava e levava a lugar nenhum.
   O respiro é maior que o cabeçalho de propósito: parar colado nele faz o
   título parecer cortado. */
[id="contabilidade"], [id="juridico"], [id="sob-medida"], [id="contato"]{
  scroll-margin-top: 11.5rem;
}
@media (max-width: 900px){
  /* No celular o cabeçalho empilha em duas linhas e chega a 175px medidos:
     14rem ainda deixava o destino 22px atrás dele. */
  [id="contabilidade"], [id="juridico"], [id="sob-medida"], [id="contato"]{
    scroll-margin-top: 17rem;
  }
}

/* --- 3a. Fluxo horizontal: uma sequência que se lê de uma vez -------------
   Serve os quatro movimentos do /solucoes. A régua de cima é contínua e as
   setas se sentam nela: é o que faz o conjunto ler como UM percurso, e não
   como quatro cartões soltos. */
.fluxo{
  list-style: none; margin: 2.8rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  counter-reset: fluxo;
}
.fluxo li{
  position: relative; padding: 1.5rem 1.5rem 0 0;
  border-top: 2px solid var(--filete);
}
.fluxo li + li{ padding-left: 1.6rem; }
.fluxo li::before{
  counter-increment: fluxo; content: "0" counter(fluxo);
  display: block; font-family: var(--fonte-display);
  font-size: 1.05rem; color: var(--apoio); letter-spacing: .06em;
  margin-bottom: .5rem;
}
/* A seta sobre a régua, apontando o sentido da leitura. */
.fluxo li + li::after{
  content: ""; position: absolute; top: -.44rem; left: .35rem;
  width: .62rem; height: .62rem;
  border: solid var(--apoio); border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.fluxo h3{ font-size: 1.12rem; margin: 0 0 .45rem; }
.fluxo p{ margin: 0; font-size: .98rem; line-height: 1.55; max-width: none; }

@media (max-width: 60rem){
  .fluxo{ grid-template-columns: 1fr 1fr; }
  .fluxo li:nth-child(3){ padding-left: 0; }
  .fluxo li:nth-child(3)::after{ display: none; }
}
@media (max-width: 34rem){
  .fluxo{ grid-template-columns: 1fr; }
  .fluxo li, .fluxo li + li{ padding: 1.4rem 0 0; }
  /* Em coluna a seta aponta para baixo, senão ela mente sobre a direção. */
  .fluxo li + li::after{ left: auto; right: .2rem; top: -.5rem; transform: rotate(135deg); }
  .fluxo li:nth-child(3)::after{ display: block; }
}

/* --- 3b. O desenho da arquitetura ----------------------------------------
   O gráfico que faltava: a base embaixo, o agente, o auditor, o portão
   humano e só então o cliente. É a tese inteira da KSG em uma figura.

   🔴 ELE É UMA LISTA ORDENADA POR DENTRO. Sem CSS, sem cor e num leitor de
      tela ele continua sendo o método em ordem — um desenho que só existe
      quando o CSS carrega é um desenho que uma parte das pessoas nunca vê. */
.arquitetura{
  margin: 2.8rem 0 0; padding: 2.2rem 1.8rem 1.9rem;
  background: var(--grafite);
  border: 1px solid rgba(197, 171, 142, 0.28);
}
.secao-escura .arquitetura{ background: rgba(233, 223, 213, 0.04); }
.arq-titulo{
  font-size: .74rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--areia); margin: 0 0 1.5rem; max-width: none;
}
.arq-base{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
  padding: 1rem; border: 1px dashed rgba(197, 171, 142, 0.4);
}
.arq-base-rotulo{
  /* Ele é o rótulo da caixa inteira, então atravessa as três colunas. */
  grid-column: 1 / -1;
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--areia); margin: 0 0 .1rem; max-width: none;
}
.arq-camada{
  background: rgba(197, 171, 142, 0.09);
  border-left: 2px solid var(--areia);
  padding: .7rem .85rem;
  font-size: .92rem; line-height: 1.4; color: var(--creme);
}
/* A haste que liga a base à esteira. */
.arq-haste{
  width: 2px; height: 2.1rem; margin: 0 auto;
  background: linear-gradient(to bottom, rgba(197,171,142,.7), rgba(197,171,142,.25));
  position: relative;
}
.arq-haste::after{
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: .58rem; height: .58rem; margin-left: -.29rem;
  border: solid var(--areia); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-.06rem, -.06rem);
}
.arq-esteira{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem;
  align-items: stretch;
}
.arq-passo{
  position: relative;
  border: 1px solid rgba(197, 171, 142, 0.35);
  padding: .95rem 1rem 1.05rem;
  color: var(--creme);
}
.arq-passo b{
  display: block; font-family: var(--fonte-display);
  font-size: 1.05rem; font-weight: var(--peso-titulo);
  color: var(--creme); margin-bottom: .3rem;
}
.arq-passo span{ display: block; font-size: .88rem; line-height: 1.45; color: rgba(233,223,213,.82); }
.arq-passo + .arq-passo::before{
  content: ""; position: absolute; top: 50%; left: -.72rem;
  width: .5rem; height: .5rem; margin-top: -.25rem;
  border: solid var(--areia); border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
/* O portão não é mais um passo: é onde a máquina para. Por isso ele é o
   único preenchido, e o único que muda de cor. */
.arq-passo-portao{ background: var(--areia); border-color: var(--areia); }
.arq-passo-portao b{ color: var(--grafite); }
/* O portão é a caixa que mais importa, então ela é a que menos pode
   desbotar: grafite cheio sobre areia mede 7,32:1, contra 4,92:1 se
   ficasse a 82% — passava, mas lia mais fraco que os vizinhos. */
.arq-passo-portao span{ color: var(--grafite); }
.arq-nota{
  margin: 1.35rem 0 0; font-size: .88rem; line-height: 1.5;
  color: rgba(233, 223, 213, 0.72); max-width: 62ch;
}
.arq-nota strong{ color: var(--areia); font-weight: var(--peso-texto-forte); }

@media (max-width: 62rem){
  .arq-esteira{ grid-template-columns: 1fr 1fr; gap: 1.4rem .7rem; }
  .arq-passo:nth-child(3)::before{ display: none; }
}
@media (max-width: 40rem){
  .arquitetura{ padding: 1.6rem 1.1rem 1.4rem; }
  .arq-base{ grid-template-columns: 1fr; }
  .arq-esteira{ grid-template-columns: 1fr; gap: 1.5rem; }
  .arq-passo::before{ display: none !important; }
  /* Em coluna, a seta vira uma haste curta entre os passos. */
  .arq-passo + .arq-passo::after{
    content: ""; position: absolute; top: -1.1rem; left: 50%;
    width: 2px; height: .8rem; margin-left: -1px;
    background: rgba(197, 171, 142, .55);
  }
}

/* ---------------------------------------------------------------------------
   MOVIMENTO E TEXTURA — 29/08. O fundador liberou imagem e "imagem dinâmica"
   depois de ver a revisão: "o que ficar melhor visualmente".

   🔴 O MOVIMENTO AQUI CONTA UMA COISA, não enfeita. O pulso percorre a esteira
      e PARA no portão, que é exatamente o que o método faz. Animação que só
      pisca é a diferença entre um site que explica e um que se exibe.
   🔒 Tudo abaixo desaparece com prefers-reduced-motion. Movimento involuntário
      não é escolha de gosto para quem tem enxaqueca ou vertigem.
   ------------------------------------------------------------------------ */

/* --- O pulso que percorre a esteira e para no portão ---------------------- */
@keyframes arq-acende{
  0%, 100%{ border-color: rgba(197, 171, 142, 0.35); box-shadow: none; }
  8%, 18% { border-color: rgba(197, 171, 142, 0.95);
            box-shadow: inset 0 0 0 1px rgba(197, 171, 142, 0.35),
                        0 0 24px -6px rgba(197, 171, 142, 0.55); }
}
/* O portão acende MAIS e segura MAIS TEMPO: é onde a máquina para e espera
   uma pessoa. Ele já é areia cheia, então o que pulsa é o halo em volta. */
@keyframes arq-portao{
  0%, 100%{ box-shadow: none; }
  8%, 30% { box-shadow: 0 0 0 3px rgba(197, 171, 142, 0.28),
                        0 0 34px -4px rgba(197, 171, 142, 0.5); }
}
/* A seta que entrega o bastão ao passo seguinte. */
@keyframes arq-seta{
  0%, 100%{ opacity: .55; transform: rotate(45deg) translate(0, 0); }
  10%     { opacity: 1;   transform: rotate(45deg) translate(.12rem, -.12rem); }
}

.arq-passo{ animation: arq-acende 9s ease-in-out infinite; }
.arq-passo:nth-child(1){ animation-delay: 0s; }
.arq-passo:nth-child(2){ animation-delay: 1.1s; }
.arq-passo:nth-child(3){ animation: arq-portao 9s ease-in-out infinite 2.2s; }
.arq-passo:nth-child(4){ animation-delay: 4.6s; }

.arq-passo + .arq-passo::before{ animation: arq-seta 9s ease-in-out infinite; }
.arq-passo:nth-child(2)::before{ animation-delay: .7s; }
.arq-passo:nth-child(3)::before{ animation-delay: 1.8s; }
.arq-passo:nth-child(4)::before{ animation-delay: 4.2s; }

/* A haste que desce da base pinga junto com o começo do ciclo: é a base
   alimentando a esteira, e não um enfeite que pisca sozinho. */
@keyframes arq-desce{
  0%, 100%{ opacity: .45; }
  4%      { opacity: 1; }
}
.arq-haste{ animation: arq-desce 9s ease-in-out infinite; }

/* --- Textura geométrica dos blocos escuros --------------------------------
   Anéis concêntricos muito fracos, do mesmo areia. Resolve o vazio da metade
   direita das aberturas sem foto (/solucoes e /metodo) sem pesar um byte de
   imagem. Fica ATRÁS do conteúdo e nunca encosta em contraste de texto. */
.abertura-metodo{ position: relative; overflow: hidden; }
.abertura-metodo::before{
  content: "";
  position: absolute;
  top: 50%; right: -14rem;
  width: 46rem; height: 46rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33%, rgba(197,171,142,.13) 33% 33.25%, transparent 33.25%),
    radial-gradient(circle, transparent 0 46%, rgba(197,171,142,.10) 46% 46.2%, transparent 46.2%),
    radial-gradient(circle, transparent 0 62%, rgba(197,171,142,.07) 62% 62.15%, transparent 62.15%);
  pointer-events: none;
}
.abertura-metodo > .miolo{ position: relative; z-index: 1; }

@media (max-width: 62rem){
  /* No celular a coluna de texto ocupa a largura toda: o anel passaria por
     baixo das letras em vez de ficar ao lado delas. */
  .abertura-metodo::before{ right: -22rem; opacity: .55; }
}

/* --- A revelação ao rolar, aplicada ao desenho ---------------------------- */
.arquitetura{ position: relative; }

/* 🔒 A cláusula que desliga tudo. */
@media (prefers-reduced-motion: reduce){
  .arq-passo,
  .arq-passo + .arq-passo::before,
  .arq-haste{ animation: none !important; }
}

/* --- O retrato de estúdio da /sobre (29/08) -------------------------------
   ⚠️ Ele NÃO é recorte: tem fundo de estúdio próprio. A regra do retrato sem
      borda vale para o recorte, que apoia a silhueta direto no grafite — aqui
      ela produziria um retângulo colado. A moldura resolve declarando: filete
      areia deslocado, como as peças impressas da marca. */
/* ⚠️ SEM sticky aqui. O retrato do topo gruda porque ao lado dele correm seis
      capítulos; nesta seção correm quatro parágrafos, e o grudado deixava a
      foto pendurada na borda de baixo, invadindo a seção seguinte. */
.fundador-foto-emoldurada{ position: relative; top: auto; }
/* A moldura vive na FOTO, não na figura: com inset na figura ela envolvia
   também a legenda, e o filete passava por baixo do texto. */
.fundador-foto-emoldurada picture{ position: relative; display: block; }
.fundador-foto-emoldurada picture::before{
  content: ""; position: absolute; inset: 0;
  transform: translate(.85rem, .85rem);
  border: 1px solid var(--areia);
  z-index: 0; pointer-events: none;
}
.fundador-foto-emoldurada img{ position: relative; z-index: 1; filter: none; }
.fundador-foto-emoldurada figcaption{
  margin-top: 1.1rem; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--apoio);
}
@media (max-width: 47.9rem){
  .fundador-foto-emoldurada::before{ transform: translate(.5rem, .5rem); }
}

/* ---------------------------------------------------------------------------
   O CELULAR, MEDIDO EM 29/08 — dois defeitos que só aparecem no telefone.

   🔴 1. O CABEÇALHO COMIA 28% DA TELA, GRUDADO. Medido em 320, 360, 390 e
      414px: 235px de cabeçalho fixo numa tela de 844px, em toda página e
      durante toda a rolagem. Ele empilhava em TRÊS blocos — marca, botão do
      WhatsApp e navegação em duas linhas.
      A causa da terceira linha é uma contradição interna: o comentário de
      27/08 diz "navegação na segunda linha, ROLANDO NA HORIZONTAL se não
      couber", e o `overflow-x: auto` está lá — mas o `flex-wrap: wrap` da
      regra base nunca foi desligado, então a lista quebrava em vez de rolar,
      e a rolagem jamais entrava em ação.
   ------------------------------------------------------------------------ */
@media (max-width: 900px){
  /* Uma linha que rola, que era a intenção escrita desde o começo. */
  .topo-nav{ flex-wrap: nowrap; }
}

@media (max-width: 34rem){
  /* No telefone a marca e o botão dividem a primeira linha. O que impedia
     isso era o descritor em duas linhas ocupando a largura toda. */
  .topo-linha{ padding-top: .7rem; padding-bottom: .7rem; row-gap: .5rem; }
  .marca-simbolo{ height: 2.1rem; width: 2.1rem; }
  .marca-lockup{ gap: .6rem; flex: 1 1 auto; min-width: 0; }
  /* O descritor estreita para ABRIR ESPAÇO AO BOTÃO na mesma linha. Ele fica
     com três linhas curtas em vez de duas largas, e a troca vale: a linha
     inteira que o botão ocupava sozinho desaparece do cabeçalho grudado. */
  .marca-descritor{
    font-size: .6rem; letter-spacing: .09em; line-height: 1.25; max-width: 8.2rem;
  }
  .topo .botao{ padding: .45rem .85rem; font-size: .82rem; flex: 0 0 auto; }
  .topo-nav{ margin-top: .15rem; }
  .topo-nav a{ font-size: .85rem; }
}

/* ---------------------------------------------------------------------------
   🔴 2. AS TABELAS DO /metodo ESCONDIAM A COLUNA QUE MAIS IMPORTA.

   Elas têm `min-width: 34rem` dentro de um contêiner que rola de lado, e no
   telefone o contêiner nasce rolado em zero: some a coluna "quem faz" da
   tabela dos seis passos, que é justamente onde se lê AGENTE ou HUMANO, e
   some o destinatário da tabela da entrega. O leitor via os passos sem saber
   de quem eles são — que é o oposto do que aquelas tabelas existem para
   dizer. E não havia sinal nenhum de que dava para arrastar.

   Aqui elas param de ser tabela no telefone e viram blocos empilhados, com o
   rótulo da coluna ao lado de cada valor. A tabela continua tabela no HTML:
   quem usa leitor de tela e quem abre no computador não perde nada.
   ------------------------------------------------------------------------ */
@media (max-width: 47.9rem){
  .tabela-rolagem{ overflow-x: visible; }
  .tabela-metodo{ min-width: 0; display: block; }
  .tabela-metodo thead{
    /* Some da tela, fica para o leitor de tela. */
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .tabela-metodo tbody, .tabela-metodo tr, .tabela-metodo td{ display: block; width: auto; }
  .tabela-metodo tr{
    border-top: 1px solid rgba(94, 80, 63, .22);
    padding: 1rem 0 1.05rem;
  }
  .tabela-metodo tr:first-child{ border-top: 2px solid var(--filete); }
  /* ⚠️ RÓTULO EM CIMA, NÃO AO LADO. A primeira tentativa pôs os dois numa
     grade de duas colunas, e a célula que começa com <strong> quebrou: o
     negrito virou o primeiro item da grade e o resto do texto caiu na coluna
     de baixo, colado na margem. Uma célula com marcação por dentro tem mais
     de um filho, e grade conta filhos. Empilhado não tem esse problema. */
  .tabela-metodo td{ border: none; padding: 0; display: block; }
  .tabela-metodo td + td{ margin-top: .6rem; }
  .tabela-metodo td::before{
    content: attr(data-rotulo); display: block;
    font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
    color: var(--apoio); font-weight: var(--peso-texto-forte);
    margin-bottom: .1rem;
  }
  /* A coluna do número não precisa de rótulo: o número já se explica. */
  .tabela-metodo td.col-num{
    display: block; font-family: var(--fonte-display);
    font-size: 1.15rem; color: var(--apoio); margin-bottom: .35rem;
  }
  .tabela-metodo td.col-num::before{ content: none; }
  /* A linha do portão continua sendo a que muda de cor. */
  /* ⚠️ SEM margem negativa. Ela sangrava .9rem para cada lado e devolvia o
     contêiner à rolagem horizontal — o defeito que esta seção veio consertar,
     de volta pela porta dos fundos. */
  .tabela-metodo tr.linha-portao{
    background: rgba(197, 171, 142, .28);
    padding-left: .9rem; padding-right: .9rem;
    border-left: 3px solid var(--areia);
  }
}

/* ---------------------------------------------------------------------------
   A APRESENTAÇÃO INSTITUCIONAL (31/08) — /institucional

   🔴 ELA NÃO É PEÇA DE VENDA, e a diferença é o desenho inteiro. Peça de venda
      abre pela dor de quem lê, argumenta e fecha em chamada. Esta abre pela
      empresa, informa, e fecha em contato. Quem chega aqui quer CONHECER a KSG,
      não ser convencido por ela.

   🔒 E ELA É FEITA PARA SAIR DO SITE: vai por link e vai IMPRESSA. Por isso o
      bloco de impressão no fim deste arquivo não é enfeite — é metade da peça.
   ------------------------------------------------------------------------ */

/* A capa ocupa a tela inteira quando aberta no navegador, como capa de
   documento. Sem botão: material institucional não pede ação, apresenta. */
.inst-capa{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 4rem 0;
  background: var(--grafite);
  color: var(--creme);
}
/* 🔴 A CAPA TEM VÉU PRÓPRIO, E MAIS FECHADO QUE O DAS SEÇÕES. Medido: com o
   véu padrão, o rótulo em areia dava 4,07:1 sobre a foto, abaixo do mínimo de
   4,5 que o tokens.css fixa. Capa é a única tela em que a foto compete com um
   texto pequeno em areia, e por isso ela é a que menos pode desbotar. */
.inst-capa.secao-foto::after{
  background: linear-gradient(to bottom,
    rgba(35, 33, 32, 0.94) 0%,
    rgba(35, 33, 32, 0.90) 55%,
    rgba(35, 33, 32, 0.93) 100%);
}
.inst-simbolo{ display: block; width: 5rem; height: 5rem; margin-bottom: 2.2rem; }
.inst-so-papel{ display: none; }
.inst-capa h1{
  max-width: 20ch;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: 1.4rem;
}
.inst-capa .abertura-apoio{
  color: rgba(233, 223, 213, 0.8);
  font-size: 1rem;
  letter-spacing: .02em;
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(197, 171, 142, 0.4);
  max-width: 34rem;
}

/* Duas colunas iguais, para os pares de blocos institucionais. */
.inst-duas{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2.8rem;
}
.inst-duas h3{ margin-top: 0; }
@media (max-width: 52rem){
  .inst-duas{ grid-template-columns: 1fr; gap: 2rem; }
}

/* O fecho: contato, sem chamada para ação. */
.inst-fecho h2{ margin-bottom: .9rem; }
.inst-fecho p{ color: rgba(233, 223, 213, 0.88); }
.inst-contato p{ margin-bottom: .55rem; }
.inst-contato a{ color: var(--creme); }
.inst-redes{ margin-top: 1.2rem; display: flex; gap: 1.4rem; }
.inst-redes a{ color: var(--areia); }

/* O botão de baixar: discreto, porque material institucional não pede ação.
   Ele existe para quem já decidiu que quer o arquivo. */
.inst-baixar{
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  margin-top: 1.6rem;
}
.inst-baixar a{
  display: inline-block; padding: .55rem 1.1rem;
  border: 1px solid rgba(197, 171, 142, 0.55);
  color: var(--areia); font-size: .94rem; text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.inst-baixar a:hover{
  background: var(--areia); color: var(--grafite); border-color: var(--areia);
}
.inst-baixar span{ font-size: .84rem; color: rgba(233, 223, 213, 0.7); }
.inst-fecho .inst-baixar{ margin-top: 1.9rem; }

/* ---------------------------------------------------------------------------
   🖨️ A IMPRESSÃO — refeita do zero em 31/08

   🔴 O ERRO DA PRIMEIRA VERSÃO NÃO FOI DE ACABAMENTO, FOI DE MÉTODO. Ela
      traduzia a tela para o papel: pegava o layout da página e apagava o que
      não imprime bem. O resultado saía legível e sem cara de documento —
      escala tipográfica de web, capa espremida, páginas pela metade, nenhuma
      numeração. Palavras do fundador: *"se alguém tiver que imprimir isso tem
      que sair perfeito"*.

   🔒 A REGRA QUE ESTE BLOCO SEGUE: papel é outro projeto, não a mesma peça com
      menos cor. A grade muda, a escala muda, a hierarquia muda, e o que na tela
      é seção aqui é PÁGINA.

   ⚠️ O que o Chrome NÃO faz, e por isso não está aqui: caixas de margem do
      `@page` (cabeçalho e número de página em CSS). Ele ignora. A numeração e a
      linha de rodapé entram pelo gerador do PDF, em .baseline/rev28/inst.cjs,
      que é quem produz o arquivo que a KSG envia. Fingir que o CSS resolve
      seria entregar um PDF sem número de página achando que tem.
   ------------------------------------------------------------------------ */
@media print{

  /* A margem é assimétrica: mais respiro embaixo que em cima, como em livro.
     Simétrica dá aquele ar de relatório de sistema. */
  @page{ size: A4; margin: 20mm 18mm 24mm 18mm; }

  html, body{
    background: #fff !important;
    color: #1e1c1b;
    font-size: 10pt;
    line-height: 1.58;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ---------- A grade ---------------------------------------------------- */
  /* Uma medida só, generosa, e o texto nunca atravessa a página inteira: linha
     de 100 caracteres cansa e é o que mais denuncia página impressa de web. */
  .miolo{ max-width: none; padding: 0; }
  .secao{ padding: 0; margin: 0 0 9mm; }
  .secao p, .secao li{ max-width: 74ch; }

  /* ---------- A escala tipográfica --------------------------------------- */
  h1{ font-size: 30pt; line-height: 1.1; letter-spacing: -.01em; }
  h2{
    font-size: 16pt; line-height: 1.18; margin: 0 0 3.5mm;
    letter-spacing: -.005em; max-width: 26ch;
  }
  h3{ font-size: 11.2pt; margin: 0 0 1.6mm; }
  p{ margin: 0 0 3mm; }
  strong{ font-weight: 600; }

  /* O rótulo de seção: é ele que dá ritmo ao documento. Fio curto antes,
     versalete espaçado, e uma distância clara do título. */
  .olho{
    font-size: 7.2pt; letter-spacing: .2em; color: #6B5B45 !important;
    margin: 0 0 2.6mm; gap: 3mm;
  }
  .olho::before{ width: 9mm; background: #C5AB8E; }

  /* ---------- Sem cor chapada no papel ------------------------------------ */
  /* 🔴 Bloco escuro impresso encharca a folha, seca torta e faz o creme virar
     cinza sujo. E bloco tingido em página inteira é o que mais faz um PDF
     parecer barato. No papel a hierarquia vem do TIPO e do FIO, não do fundo. */
  .inst-capa, .secao-escura, .secao-foto, .secao-areia, .secao-clara-alt,
  .arquitetura{
    background: #fff !important; color: #1e1c1b !important;
    min-height: 0; padding: 0;
  }
  .secao-foto::before, .secao-foto::after{ display: none !important; }
  .inst-capa h1, .secao-escura h2, .secao-escura h3,
  .secao-foto h2, .secao-foto h3, .secao-areia h2, .secao-areia h3{
    color: #2E4450 !important;
  }
  .secao-escura p, .secao-foto p, .inst-fecho p, .arq-nota{ color: #1e1c1b !important; }
  .olho-claro, .secao-escura .olho{ color: #6B5B45 !important; }
  a{ color: #1e1c1b !important; text-decoration: none; }

  /* ---------- A capa: uma folha de rosto, não um herói espremido ---------- */
  .inst-capa{
    display: block;
    height: 247mm;                 /* a caixa útil de uma A4 com esta margem */
    position: relative;
    padding-top: 46mm;
    break-after: page;
  }
  .inst-capa .miolo{ display: block; }
  .inst-simbolo{ width: 21mm; height: 21mm; margin: 0 0 34mm; }
  .inst-capa .olho{ margin-bottom: 5mm; }
  /* ⚠️ A MEDIDA DE 15ch QUEBRAVA O TITULO EM SEIS LINHAS, uma delas com duas
     palavras ("dentro da"). Titulo de capa se lê de uma vez ou não se lê: mede
     mais largo, corpo um pouco menor, e o balanceamento fecha as linhas em
     tamanhos parecidos. */
  .inst-capa h1{
    max-width: 21ch;
    font-size: 30pt;
    line-height: 1.13;
    text-wrap: balance;
    margin: 0 0 12mm;
    color: #1e1c1b !important;
  }
  /* A linha de pé da capa fica ancorada embaixo, não colada no título:
     é o que separa capa de primeira página de texto. */
  .inst-capa .abertura-apoio{
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0; padding-top: 4mm; max-width: none;
    border-top: .6pt solid #C5AB8E;
    font-size: 8.6pt; letter-spacing: .04em; color: #5a5350 !important;
  }

  /* ---------- Abertura de seção ------------------------------------------ */
  /* 🔴 SEM QUEBRA FORCADA POR SECAO, e a primeira versao errou justamente
     aqui. Eu escrevi que "cada seção grande começa em página nova dá compasso",
     e o PDF saiu com quatro páginas de dois terços vazios: A EMPRESA sozinha,
     O PRAZO sozinho, AS TRAVAS sozinhas.

     Folheando as nove ficou óbvio que as páginas BOAS eram as densas, as que
     carregam duas seções. Compasso vem do rótulo, do fio e do respiro entre
     blocos — não de empurrar seção para a folha seguinte.

     Só o fecho ganha página própria, porque cartão de contato dividindo folha
     com texto corrido lê como rodapé, não como fim. */
  .inst-fecho{ break-before: page; }

  /* ---------- Blocos ------------------------------------------------------ */
  .camadas{ gap: 7mm; margin-top: 5mm; }
  .camada{ border-top: 1.2pt solid #C5AB8E; padding-top: 3mm; }
  .camada h3, .camada .olho{ margin-bottom: 1.8mm; }
  .camada p{ font-size: 9.4pt; line-height: 1.5; }
  .camada-trava{ border-top-color: #6B5B45; }

  .fluxo{ gap: 0; margin-top: 6mm; }
  .fluxo li{ border-top: 1pt solid #C5AB8E; padding: 3mm 5mm 0 0; }
  .fluxo li + li{ padding-left: 5mm; }
  .fluxo li::before{ font-size: 10pt; color: #6B5B45; margin-bottom: 2mm; }
  .fluxo li + li::after{ border-color: #6B5B45; }
  .fluxo h3{ font-size: 10.4pt; }
  .fluxo p{ font-size: 9pt; line-height: 1.45; }

  .destaque-fio{ border-left: 1.6pt solid #C5AB8E; padding-left: 4mm; }
  .frase-fecho{
    font-family: var(--fonte-display); font-size: 13pt; line-height: 1.3;
    color: #2E4450 !important; border-top: .6pt solid #DCCDB6;
    padding-top: 4mm; margin-top: 5mm; max-width: 40ch;
  }
  .lista-recusa li{ margin-bottom: 3mm; }

  /* ---------- O retrato --------------------------------------------------- */
  .fundador-grade{ grid-template-columns: 62mm 1fr; gap: 8mm; }
  .fundador-foto{ position: static; }
  .fundador-foto-emoldurada picture::before{ display: none; }
  .fundador-foto img{ width: 62mm; height: auto; }
  .fundador-foto figcaption{
    margin-top: 2.5mm; font-size: 7.2pt; letter-spacing: .16em; color: #6B5B45 !important;
  }
  .sobre-texto div > p:first-child::first-letter{ color: #6B5B45 !important; }

  /* ---------- O desenho da arquitetura ------------------------------------ */
  /* 🔒 Redesenhado para laser: traço de 1pt sobrevive; 0,5pt some. E nada de
     halo nem gradiente, que viram mancha cinza na impressão. */
  .arquitetura{ border: 1pt solid #C5AB8E; padding: 5mm; margin-top: 6mm; }
  .arq-titulo{ font-size: 7.2pt; letter-spacing: .18em; color: #6B5B45 !important; margin-bottom: 4mm; }
  .arq-base{ border: .8pt dashed #C5AB8E; padding: 3.5mm; gap: 3mm; }
  .arq-base-rotulo{ font-size: 7pt; letter-spacing: .14em; color: #6B5B45 !important; }
  .arq-camada{
    background: #F6F1E8 !important; color: #1e1c1b !important;
    border-left: 1.4pt solid #C5AB8E; padding: 2.4mm 3mm; font-size: 8.6pt;
  }
  .arq-haste{ height: 7mm; background: #C5AB8E !important; }
  .arq-haste::after{ border-color: #6B5B45 !important; }
  .arq-esteira{ gap: 3mm; margin-top: 0; }
  .arq-passo{
    border: 1pt solid #C5AB8E !important; padding: 3mm; color: #1e1c1b !important;
    box-shadow: none !important; animation: none !important;
  }
  .arq-passo b{ color: #1e1c1b !important; font-size: 9.6pt; margin-bottom: 1.4mm; }
  .arq-passo span{ color: #3a3430 !important; font-size: 8.4pt; line-height: 1.42; }
  .arq-passo-portao{ background: #EFE3CE !important; border-color: #6B5B45 !important; }
  .arq-passo + .arq-passo::before{ border-color: #6B5B45 !important; }
  .arq-nota{ font-size: 8.4pt; margin-top: 4mm; color: #3a3430 !important; }

  /* ---------- O fecho ------------------------------------------------------ */
  .inst-fecho{ padding-top: 10mm; }
  .inst-fecho h2{ font-size: 22pt; color: #1e1c1b !important; }
  /* ⚠️ A regra de tela colapsa `.inst-duas` para uma coluna abaixo de 52rem, e
     a largura do papel cai nessa faixa: as duas colunas viravam uma pilha, e a
     pilha esticava a seção para uma página inteira. No papel há 174mm de
     medida útil, que comportam as duas com folga. */
  .inst-duas{ grid-template-columns: 1fr 1fr; gap: 12mm; margin-top: 6mm; }
  .inst-contato p{ margin-bottom: 1.6mm; }
  .inst-redes{ margin-top: 4mm; }
  .inst-redes a{ color: #6B5B45 !important; }

  /* ---------- Órfãs, viúvas e o que não pode rachar ----------------------- */
  p, li{ orphans: 3; widows: 3; }
  h1, h2, h3, .olho{ break-after: avoid; }
  .arquitetura, .camada, .fluxo li, .fundador-foto, .inst-duas > div,
  .lista-recusa li, .arq-esteira, .arq-base, .fundador-grade{ break-inside: avoid; }

  /* O símbolo troca de versão entre tela e papel. */
  .inst-so-papel{ display: block !important; }
  .inst-so-tela{ display: none !important; }
  .inst-baixar{ display: none !important; }
}