/* ============================================================
   FX STUDIOS | Pagina de vendas do FX Estrategista Magnetico
   ============================================================ */

/* ---------------- topo fixo ---------------- */
.topo{
  position:sticky; top:0; z-index:var(--z-topo);
  background:rgba(14,13,11,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.topo.rolou{
  border-bottom-color:var(--linha); background:rgba(14,13,11,.9);
  box-shadow:0 18px 40px -34px rgba(0,0,0,.95);
}

/* Progresso de leitura.
   A pagina tem 11 secoes e um FAQ de 19 perguntas: sem uma medida, quem rola
   no celular nao sabe se falta um terco ou tres. O filete cresce da esquerda
   e e a unica coisa em movimento continuo na pagina, entao ele nao compete
   com nada. Sem JS, --lido nao existe, scaleX(0) esconde e nada quebra. */
.topo__progresso{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  transform:scaleX(var(--lido,0)); transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(201,162,75,.55), var(--ouro-claro));
  opacity:0; transition:opacity .3s ease;
  will-change:transform;
}
.topo.rolou .topo__progresso{ opacity:1; }
.topo .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:66px; }

/* .marca vive no base.css: e usada por todas as paginas, nao so por esta. */
.topo nav{ display:none; align-items:center; gap:6px; }
/* 7 links a 14,5px dao cerca de 574px, mais marca (140) e acoes (250) passa de
   960. Em 900px o menu entrava espremido. Liga so quando ha espaco de verdade. */
@media (min-width:1040px){ .topo nav{ display:flex; } }
.topo nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14.5px; color:var(--texto-2); padding:0 13px; border-radius:7px;
  transition:color .16s, background .16s;
}
.topo nav a:hover{ color:var(--papel); background:rgba(255,255,255,.04); }
.topo .acoes{ display:flex; align-items:center; gap:8px; flex:none; }
.topo .btn{ padding:12px 20px; font-size:14px; min-height:44px; }
.topo .btn--fantasma{ padding:12px 14px; font-size:14px; min-height:44px; }
@media (max-width:520px){ .topo .btn--fantasma{ display:none; } }

/* ---------------- hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(72px,12vw,140px) 0 clamp(60px,8vw,100px);
}

.hero__luz{
  position:absolute; inset:-30% -10% auto -10%; height:130%; pointer-events:none;
  background:
    radial-gradient(56% 44% at 22% 6%, rgba(201,162,75,.22), transparent 66%),
    radial-gradient(46% 38% at 88% 30%, rgba(201,162,75,.11), transparent 70%);
}

/* Luz que segue o ponteiro.
   Elemento proprio, com gradiente FIXO, movido so por transform: assim o
   navegador compoe a camada e nao repinta o gradiente a cada quadro. Mexer
   no `at X% Y%` de um radial-gradient de 1400px por 800px faria repintura
   inteira a 60 quadros por segundo, que e exatamente o tipo de efeito bonito
   que trava celular.
   opacity:0 no padrao: so o JS acende, e so em ponteiro fino. */
.hero__seguidor{
  position:absolute; top:0; left:0; z-index:1;
  width:620px; height:620px;
  margin:-310px 0 0 -310px; pointer-events:none;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(230,204,133,.13), rgba(230,204,133,.05) 42%, transparent 72%);
  opacity:0; transition:opacity .5s ease;
  will-change:transform;
}
.hero__seguidor.acesa{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero__seguidor{ display:none; }
}

/* Duas malhas: a fina de 64px que ja existia e uma grossa de 256px por cima.
   Malha unica em tela grande le como papel milimetrado; duas escalas leem
   como planta tecnica, que e o que o produto e. */
.hero__grade{
  position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:
    linear-gradient(rgba(201,162,75,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,75,.05) 1px, transparent 1px),
    linear-gradient(rgba(201,162,75,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,75,.075) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px, 256px 256px, 256px 256px;
  mask-image:radial-gradient(76% 62% at 50% 10%, #000 18%, transparent 80%);
  -webkit-mask-image:radial-gradient(76% 62% at 50% 10%, #000 18%, transparent 80%);
}

/* Feixe. Uma faixa clara atravessando o alto do hero na diagonal, cortada
   pelo overflow da secao. E a assinatura visual da marca (FX, farol) e o
   unico elemento da pagina que existe so para ser bonito. */
.hero__feixe{
  position:absolute; top:-40%; left:-10%; width:56%; height:180%;
  pointer-events:none; transform:rotate(14deg); transform-origin:top center;
  background:linear-gradient(90deg,
    transparent, rgba(230,204,133,.045) 38%, rgba(230,204,133,.075) 50%, rgba(230,204,133,.045) 62%, transparent);
  filter:blur(14px);
  mask-image:linear-gradient(180deg,#000 0 42%,transparent 88%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 42%,transparent 88%);
}
@media (max-width:719px){ .hero__feixe{ display:none; } }

.hero .wrap{ position:relative; z-index:2; }

.hero h1{
  font-size:clamp(38px,7.7vw,80px);
  max-width:16ch;
  margin:0 0 26px;
  letter-spacing:-.026em;
}
/* A palavra que carrega o titulo inteiro. Sublinhado de tinta em vez de
   text-decoration: a linha nasce embaixo do italico e nao corta descendente. */
.hero h1 em{
  font-style:italic; color:var(--ouro-claro);
  position:relative; display:inline-block;
}
/* O padrao e VISIVEL. So esconde quando o vendas.js de fato marcou o titulo
   para revelar, e ai a marcacao de .visivel devolve. Assim, JS desligado,
   observador que nao dispara ou aba em segundo plano nunca deixam o
   sublinhado sumido. */
.hero h1 em::after{
  content:""; position:absolute; left:0; right:.06em; bottom:.02em; height:2px;
  background:linear-gradient(90deg, rgba(201,162,75,.15), var(--ouro) 22%, var(--ouro-claro) 78%, rgba(201,162,75,.15));
  transform:scaleX(1); transform-origin:0 50%;
}
.js h1.aparece em::after{
  transform:scaleX(0);
  transition:transform 1s var(--saida-longa) .45s;
}
.js h1.aparece.visivel em::after{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .js h1.aparece em::after{ transform:scaleX(1); transition:none; }
}
.hero .sub{
  font-size:clamp(17px,2.5vw,21px);
  color:var(--texto-2);
  max-width:56ch; line-height:1.58;
  margin-bottom:34px;
}
.hero .botoes{ display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; }
/* Um CTA por peca. Dois botoes grandes lado a lado dividem a acao e nenhuma
   acontece, que e a regra escrita em vendas/01-semantica-de-sins.md do proprio
   pacote. O segundo caminho continua existindo, como link. */
.link-hero{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:16px; color:var(--texto-2);
  text-decoration:underline; text-underline-offset:5px;
  text-decoration-color:var(--linha-forte);
  transition:color .16s, text-decoration-color .16s;
}
.link-hero:hover{ color:var(--ouro-claro); text-decoration-color:var(--ouro); }
/* Placa gravada. Antes eram tres numeros soltos sob uma linha; agora e um
   bloco com fundo proprio, filete de luz no alto e divisorias verticais
   entre os itens, que e o que separa "informacao" de "enfeite de rodape". */
.hero .assinatura{
  margin-top:40px; padding:20px 22px;
  border:1px solid var(--linha);
  border-radius:var(--raio-s);
  background:linear-gradient(168deg, rgba(35,32,25,.55), rgba(20,18,16,.3));
  box-shadow:var(--luz-borda);
  display:grid; gap:18px;
  max-width:680px;
  position:relative; overflow:hidden;
}
.hero .assinatura::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.6),transparent);
}
@media (min-width:640px){
  .hero .assinatura{ grid-template-columns:auto 1fr 1fr; gap:0; align-items:stretch; }
  .hero .assinatura .item + .item{
    padding-left:20px; margin-left:20px;
    border-left:1px solid var(--linha);
  }
}
.hero .assinatura .item{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.hero .assinatura .num{
  font-family:var(--display); font-size:clamp(28px,4.4vw,34px);
  color:var(--ouro-claro); line-height:1; letter-spacing:-.018em;
  font-variant-numeric:tabular-nums;
}
/* --texto-3 em 10,5px sobre a placa clara dava 4,4:1, logo abaixo do minimo
   de 4,5. O rotulo aqui nao e enfeite: e ele que diz o que o numero mede.
   Sobe para --texto-2 e passa com folga. */
.hero .assinatura .rot{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-2); line-height:1.5;
  opacity:.8; text-wrap:pretty;
}

/* ---------------- terminal ---------------- */
.terminal{
  border:1px solid var(--linha-forte);
  border-radius:12px; overflow:hidden;
  background:#0B0A08;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4), var(--luz-borda);
  font-family:var(--mono);
  font-size:13px; line-height:1.85;
  position:relative;
}
/* Varredura horizontal fininha, de 3 em 3px, mais o brilho de fosforo no
   alto. E a textura que diz "isto e uma tela", e nao "um cartao com fonte
   monoespacada dentro". Fica no .terminal, e nao no .terminal__corpo, porque
   o corpo rola na horizontal e a camada andaria junto com o texto. */
.terminal::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(100% 62% at 50% 0%, rgba(201,162,75,.07), transparent 72%),
    repeating-linear-gradient(180deg, rgba(0,0,0,.17) 0 1px, transparent 1px 4px);
}
.terminal__barra{
  display:flex; align-items:center; gap:8px;
  padding:11px 14px; border-bottom:1px solid rgba(201,162,75,.13);
  background:linear-gradient(180deg,#151310,#0F0E0C);
}
.terminal__barra i{ width:9px; height:9px; border-radius:50%; background:#2E2A24; flex:none; }
.terminal__barra i:first-child{ background:#3A332A; }
.terminal__barra span{ margin-left:6px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); }
.terminal__corpo{ padding:18px 16px; overflow-x:auto; }
.terminal__corpo pre{ margin:0; white-space:pre; color:var(--texto-2); }
.terminal .cmd{ color:var(--ouro-claro); }
.terminal .ok{ color:var(--verde); }
.terminal .dim{ color:var(--texto-3); }
.terminal .nota{ color:var(--ouro); }

/* Log que corre linha a linha.
   O bloco descreve uma auditoria que reprovou os seis eixos. Tudo de uma vez,
   e um paragrafo em fonte monoespacada; correndo, e uma rodada acontecendo,
   que e o que ele de fato foi.
   O padrao e TUDO VISIVEL: opacity:0 so entra depois que o JS conseguiu
   separar as linhas, e ele nem tenta se a pessoa pediu menos movimento. Se
   qualquer coisa falhar no caminho, o log fica na tela como sempre esteve. */
.terminal__corpo pre.corre .ln{
  opacity:0;
  transition:opacity .34s var(--saida-longa);
}
.terminal__corpo pre.corre.rodou .ln{ opacity:1; }
/* Cursor piscando enquanto o log corre, e so enquanto ele corre: antes de
   comecar nao ha nada acontecendo, e depois de terminar ele viraria um
   pisca-pisca permanente competindo com o resto da pagina. */
.terminal__corpo pre.corre.rodou::after{
  content:"\2588"; color:var(--ouro);
  animation:cursor-pisca 1.05s steps(1) infinite;
}
.terminal__corpo pre.corre.terminou::after{ content:none; animation:none; }
@keyframes cursor-pisca{ 0%,49%{ opacity:.9; } 50%,100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .terminal__corpo pre.corre .ln{ opacity:1; transition:none; }
  .terminal__corpo pre.corre.rodou::after{ content:none; animation:none; }
}

/* ---------------- previa de arquivo ---------------- */
.arquivo{
  border:1px solid var(--linha-forte); border-radius:12px; overflow:hidden;
  background:#0B0A08; max-width:760px;
  box-shadow:0 40px 90px -44px rgba(0,0,0,.9);
}
.arquivo__barra{
  display:flex; align-items:center; gap:9px;
  padding:12px 16px; border-bottom:1px solid rgba(201,162,75,.13);
  background:linear-gradient(180deg,#151310,#0F0E0C);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--texto-3);
}
.arquivo__barra svg{ color:var(--ouro); flex:none; }
.arquivo__corpo{ padding:20px 18px; overflow-x:auto; }
.arquivo__corpo pre{
  margin:0; font-family:var(--mono); font-size:12.5px; line-height:1.75;
  color:var(--texto-2); white-space:pre;
}
.arquivo .ch{ color:var(--texto-3); }
.arquivo .cv{ color:var(--ouro); }
.arquivo .ct{ color:var(--ouro-claro); }
.arquivo .cd{ color:var(--papel); }

/* ---------------- semantica de sins ---------------- */
/* Antes era um gradiente de #0E0D0B para #100E0C: 2 pontos de diferenca, que
   nao aparece em tela nenhuma. Se a secao vai se destacar, que se destaque. */
.sins{
  background:
    radial-gradient(64% 42% at 50% 0%, rgba(201,162,75,.055), transparent 68%),
    linear-gradient(180deg,var(--preto),#151210 46%,var(--preto));
}
.sins__caixa{
  border:1px solid var(--linha-forte);
  border-radius:var(--raio);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201,162,75,.07), transparent 62%),
    linear-gradient(168deg,#16130F,#100E0C);
  padding:clamp(26px,4vw,44px);
  max-width:760px;
  position:relative; overflow:hidden;
  box-shadow:var(--luz-borda-alta), var(--sombra-painel);
}
.sins__caixa::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent); opacity:.6;
}
/* Trama diagonal na caixa inteira. E o bloco onde a pessoa fica mais tempo
   parada, entao e onde vale mais ter material embaixo do texto. */
.sins__caixa::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(128deg,
    rgba(247,244,238,.017) 0 1px, transparent 1px 5px);
}
.sins__caixa > *{ position:relative; z-index:1; }

/* A barra de progresso agora se enche da esquerda em vez de trocar de cor
   de uma vez: quem responde ve o passo andar, que e o feedback do clique. */
.sins__prog{
  display:flex; gap:7px; margin-bottom:28px;
}
.sins__prog i{
  height:3px; flex:1; border-radius:99px; background:rgba(201,162,75,.16);
  position:relative; overflow:hidden;
}
.sins__prog i::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg,var(--ouro),var(--ouro-claro));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--saida-longa);
}
.sins__prog i.on::after{ transform:scaleX(1); }
.sins__prog i.on{ box-shadow:0 0 12px -2px rgba(201,162,75,.55); }
@media (prefers-reduced-motion: reduce){
  .sins__prog i::after{ transition:none; }
}

.pergunta{ display:none; }
.pergunta.ativa{ display:block; animation:sobe .45s cubic-bezier(.2,.7,.3,1); }
@keyframes sobe{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }
.pergunta .cont{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-3); margin-bottom:14px; }
.pergunta h3{ font-size:clamp(23px,3.6vw,33px); max-width:22ch; margin-bottom:20px; }
.pergunta .opcoes{ display:flex; gap:10px; flex-wrap:wrap; }
.pergunta .opcoes .btn{ min-width:132px; }

.sins__eco{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--linha);
  font-size:15.5px; color:var(--texto-2); min-height:24px;
}
/* display:none tira a regiao viva da arvore no instante em que o JS escreve
   nela, e leitor de tela nao anuncia o que nasce e e preenchido na mesma
   batida. Colapsa o espaco sem tirar do fluxo. */
.sins__eco:empty{ border-top-color:transparent; padding-top:0; margin-top:0; min-height:0; }

.sins__final{ display:none; }
.sins__final.ativa{ display:block; animation:sobe .5s cubic-bezier(.2,.7,.3,1); }
.sins__final h3{ font-size:clamp(25px,4vw,38px); max-width:20ch; }
.sins__final .placar{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ouro); margin-bottom:16px;
}

/* ---------------- sobre ---------------- */
.sobre{ display:grid; gap:38px; }
@media (min-width:900px){
  .sobre{ grid-template-columns:1fr 300px; gap:56px; align-items:start; }
}
.sobre__texto{ max-width:62ch; font-size:clamp(17px,2.2vw,18.5px); line-height:1.74; }
.sobre__texto p{ margin-bottom:1.25em; color:var(--texto-2); }

/* A primeira linha responde a pergunta do titulo. Ela carrega a secao. */
.sobre__abertura{
  font-family:var(--display);
  font-size:clamp(23px,3.6vw,31px);
  line-height:1.28; color:var(--papel);
  margin-bottom:1.1em !important;
  max-width:24ch;
}
/* Mesma correcao da citacao: sem barra lateral. E o paragrafo que fecha a
   historia, entao ele vira um painel com fundo proprio e filete de luz. */
.sobre__fecho{
  padding:20px 22px;
  border:1px solid var(--linha);
  border-radius:var(--raio-s);
  background:var(--ouro-fundo);
  box-shadow:var(--luz-borda);
  color:var(--texto) !important;
  margin-top:1.8em;
  position:relative; overflow:hidden;
}
.sobre__fecho::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent); opacity:.55;
}

.sobre__credenciais{
  margin-top:38px; padding-top:26px;
  border-top:1px solid var(--linha);
}
.sobre__credenciais-rotulo{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-3); margin-bottom:14px !important;
}
.sobre__credenciais-nota{
  font-size:14px; color:var(--texto-3); margin-top:16px !important; max-width:56ch;
}

/* Retrato. Sem o arquivo em assets/felipe.jpg, fica o gradiente, nunca um
   icone de imagem quebrada. Basta soltar o arquivo para a foto aparecer. */
.sobre__foto{ margin:0; position:sticky; top:96px; }

/* O retrato e de estudio, com fundo cinza claro, e a pagina e preta. Sem
   tratamento ele vira um retangulo aceso no meio do escuro.
   A base escurece ate o fundo da pagina, e um leve dourado por cima costura
   a foto na paleta da marca sem falsear a pele. */
.sobre__foto-imagem{
  position:relative;
  width:100%; aspect-ratio:9/11; border-radius:12px;
  border:1px solid var(--linha-forte);
  overflow:hidden;
  background-color:var(--preto-3);
  background-image:
    url("felipe.jpg"),
    radial-gradient(70% 60% at 50% 32%, rgba(201,162,75,.15), transparent 72%);
  background-size:cover, cover;
  background-position:center 18%, center;
  background-repeat:no-repeat, no-repeat;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
}
.sobre__foto-imagem::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 52%, rgba(14,13,11,.35) 78%, rgba(14,13,11,.88) 100%),
    linear-gradient(180deg, rgba(201,162,75,.10), transparent 45%);
}
.sobre__foto figcaption{
  margin-top:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--texto-3); line-height:1.85;
}
.sobre__foto figcaption strong{
  display:block; font-family:var(--sans); font-size:15px; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--papel); margin-bottom:4px;
}
.sobre__foto figcaption a{
  color:var(--ouro); text-transform:none; letter-spacing:0;
  font-family:var(--sans); font-size:13.5px;
}
.sobre__foto figcaption a:hover{ color:var(--ouro-claro); }

/* ---------------- historia ---------------- */
.historia__corpo{ max-width:640px; font-size:clamp(17px,2.2vw,19px); line-height:1.75; }
.historia__corpo p{ margin-bottom:1.3em; }
/* Citacao de abertura. A barra dourada de 2px na lateral saiu: e o desenho
   mais generico que existe para bloco de destaque, e aqui ele estava numa
   frase que e o eixo da pagina inteira. Agora a aspa e grande, dourada e
   fica ATRAS do texto, como marca d'agua de pagina de livro. */
.destaque{
  font-family:var(--display);
  font-size:clamp(25px,4.4vw,40px);
  line-height:1.22; color:var(--papel);
  padding:34px 0 30px; margin:48px 0; max-width:24ch;
  position:relative; isolation:isolate;
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
}
/* isolation:isolate acima cria o contexto de empilhamento, entao o z-index -1
   aqui poe a aspa atras do texto do proprio bloco, e nao atras da secao. */
.destaque::before{
  content:"\201C"; position:absolute; top:-.14em; left:-.04em; z-index:-1;
  font-family:var(--display); font-size:150px; line-height:1;
  color:var(--ouro); opacity:.14; pointer-events:none;
}
.destaque cite{
  display:block; font-family:var(--mono); font-style:normal; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--texto-3); margin-top:18px;
}

/* O bloco de chip em pilula que existia aqui foi apagado: ele era
   sobrescrito pelo bloco de monograma la embaixo, mas a borda de 99px e o
   font-family mono sobreviviam, entao os nomes dos mentores renderizavam em
   JetBrains Mono 12px dentro de um contorno de pilula colado no circulo. */

/* ---------------- dialogo do ingles ----------------
   E uma conversa, e conversa tem tempo. Com .escada no HTML, as falas
   entram uma depois da outra conforme a pessoa rola, no ritmo em que ela
   leria. Sem movimento, ficam todas na tela de uma vez, e nada se perde. */
.dialogo{ display:grid; gap:11px; max-width:680px; margin-top:8px; }
.fala{
  border:1px solid var(--linha); border-radius:14px;
  padding:15px 19px; font-size:16px; line-height:1.55;
  background:var(--preto-2);
  position:relative;
  box-shadow:var(--luz-borda);
}
.fala .quem{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--texto-3); margin-bottom:7px;
}
/* Cantos: a fala de quem pergunta encosta na esquerda, a de quem responde
   na direita. E o mesmo desenho de balao de mensagem, sem desenhar balao. */
.fala--eu{
  border-color:var(--linha-forte);
  background:linear-gradient(160deg,#1B1711,#110F0C);
  border-bottom-left-radius:4px;
}
.fala--eu .quem{ color:var(--ouro); }
.fala--ele{
  margin-left:clamp(0px,7vw,64px);
  border-bottom-right-radius:4px;
  color:var(--texto-2);
}
.fala--ele .quem{ color:var(--texto-3); }
/* A ultima fala e a pergunta que fecha o metodo inteiro. Ela recebe o unico
   realce do bloco, porque e ela que o paragrafo seguinte comenta. */
.fala--eu:last-of-type{
  border-color:var(--ouro);
  box-shadow:var(--luz-borda), 0 0 0 1px rgba(201,162,75,.18), 0 18px 40px -28px rgba(201,162,75,.5);
}
.fala--eu:last-of-type .quem{ color:var(--ouro-claro); }
.dialogo .fecho{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--linha);
  font-size:15.5px; color:var(--texto-2);
}

/* ---------------- explorador de agentes ---------------- */
/* Mostra o arquivo REAL de cada agente, gerado de entrega/agentes/.
   Era o buraco mais obvio da pagina: produto digital sem mostrar o produto. */
.explorador{
  margin-top:34px;
  border:1px solid var(--linha-forte); border-radius:var(--raio);
  overflow:hidden;
  background:linear-gradient(178deg,#141210,#0F0E0C);
  display:grid; grid-template-columns:1fr;
  box-shadow:var(--luz-borda-alta), var(--sombra-painel);
}
@media (min-width:900px){
  .explorador{ grid-template-columns:264px 1fr; min-height:560px; }
}

.explorador__lista{
  display:flex; overflow-x:auto; gap:0;
  border-bottom:1px solid var(--linha);
  scrollbar-width:thin;
}
@media (min-width:900px){
  .explorador__lista{
    display:block; overflow-y:auto; overflow-x:hidden; max-height:640px;
    border-bottom:0; border-right:1px solid var(--linha);
    background:#0B0A08;
  }
}

.explorador__item{
  display:flex; align-items:center; gap:11px;
  width:100%; text-align:left; flex:none;
  padding:13px 16px; min-height:52px;
  background:none; border:0; cursor:pointer;
  color:var(--texto-2); font-size:14.5px;
  border-bottom:1px solid transparent;
  transition:background .16s ease, color .16s ease;
  white-space:nowrap;
}
@media (min-width:900px){
  .explorador__item{ white-space:normal; border-bottom:1px solid var(--linha); }
}
/* No celular a lista e um scroller horizontal. Com width:100% cada aba ocupava
   a tela toda, entao varrer os 6 agentes exigia 5 deslizes, sem indicacao de
   que havia mais. Larguras naturais cabem 2 ou 3 por tela e o snap ajuda. */
@media (max-width:899px){
  .explorador__lista{ scroll-snap-type:x proximity; padding:4px; }
  .explorador__item{ width:auto; min-width:0; flex:0 0 auto; scroll-snap-align:start; }
}
.explorador__item:hover{ background:rgba(255,255,255,.04); color:var(--papel); }
.explorador__item[aria-selected="true"]{
  background:var(--ouro-fundo); color:var(--ouro-claro);
  box-shadow:inset 3px 0 0 var(--ouro);
}
.explorador__item .num{
  font-family:var(--mono); font-size:11px; color:var(--texto-3); flex:none;
}
.explorador__item[aria-selected="true"] .num{ color:var(--ouro); }
/* Classe propria, nao `.rotulo`.
   `.rotulo` e o olho de secao global do base.css: mono, caixa alta, dourado,
   letter-spacing .2em, 22px de margem e um traco decorativo no ::before.
   Reusar aquele nome fazia os 6 nomes de agente virarem 6 rotulos de secao,
   com traco e tudo, dentro do componente que prova que o produto existe. */
.explorador__rotulo{
  display:flex; flex-direction:column; min-width:0; gap:1px;
  font-family:var(--sans); font-size:14.5px; font-weight:400;
  letter-spacing:normal; text-transform:none; color:inherit; margin:0;
}
.explorador__rotulo::before{ content:none; }
.explorador__rotulo b{ font-weight:600; font-size:14.5px; color:var(--papel); }
.explorador__rotulo span{ font-size:12px; color:var(--texto-3); }
.explorador__item[aria-selected="true"] .explorador__rotulo b{ color:var(--ouro-claro); }
@media (max-width:899px){ .explorador__rotulo span{ display:none; } }

.explorador__painel{ padding:clamp(22px,3.4vw,32px); min-width:0; display:flex; flex-direction:column; }
/* Troca de aba com transicao. Sem ela, seis arquivos diferentes piscavam no
   mesmo retangulo e nada dizia que o conteudo TROCOU: parecia falha de
   renderizacao. O JS tira e devolve a classe para reiniciar a animacao.
   Se a animacao nao rodar, o conteudo ja esta na tela do mesmo jeito. */
.explorador__painel.trocou > *{ animation:aba-entra .34s var(--saida-longa) both; }
.explorador__painel.trocou > *:nth-child(2){ animation-delay:.04s; }
.explorador__painel.trocou > *:nth-child(3){ animation-delay:.08s; }
.explorador__painel.trocou > *:nth-child(4){ animation-delay:.12s; }
@keyframes aba-entra{
  from{ opacity:0; transform:translateY(9px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .explorador__painel.trocou > *{ animation:none; }
}
.explorador__cabeca{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-bottom:16px;
}
.explorador__n{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--ouro); margin:0 0 8px;
}
.explorador__nome{ font-size:clamp(24px,3.4vw,32px); margin:0 0 4px; }
.explorador__papel{ font-size:15px; color:var(--texto-2); margin:0; }
.explorador__arquivo{
  font-family:var(--mono); font-size:11.5px; color:var(--texto-3);
  border:1px solid var(--linha); border-radius:6px; padding:6px 11px;
  white-space:nowrap;
}
.explorador__descricao{
  font-size:15px; color:var(--texto-2); line-height:1.6;
  margin:0 0 20px; padding-bottom:20px; border-bottom:1px solid var(--linha);
  max-width:66ch;
}
.explorador__corpo{
  background:#0B0A08; border:1px solid var(--linha); border-radius:9px;
  padding:18px 16px; overflow:auto; flex:1; max-height:340px;
}
.explorador__corpo pre{
  margin:0; font-family:var(--mono); font-size:12.5px; line-height:1.72;
  color:var(--texto-2); white-space:pre-wrap; word-break:break-word;
}
.explorador__corpo .t{ color:var(--ouro-claro); font-weight:500; }
.explorador__corpo .b{ color:var(--ouro); }
.explorador__rodape{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--texto-3); margin:14px 0 0;
}

/* ---------------- calculadora ---------------- */
/* Nao promete nada. Devolve para a pessoa a conta que ela mesma deu. */
.calc{
  border:1px solid var(--linha-forte); border-radius:var(--raio);
  background:linear-gradient(168deg,#16130F,#100E0C);
  padding:clamp(24px,4vw,38px); max-width:820px;
  position:relative; overflow:hidden;
  box-shadow:var(--luz-borda-alta), var(--sombra-painel);
}
.calc::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.7),transparent);
}
/* Papel quadriculado atras da conta. A secao e literalmente "faca a conta",
   entao o fundo dela e uma folha de caderno, apagada ate quase sumir. */
.calc::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(201,162,75,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,75,.035) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(90% 80% at 80% 100%, #000, transparent 72%);
  -webkit-mask-image:radial-gradient(90% 80% at 80% 100%, #000, transparent 72%);
}
.calc > *{ position:relative; z-index:1; }
.calc__campos{ display:grid; gap:26px; }
@media (min-width:700px){ .calc__campos{ grid-template-columns:repeat(2,1fr); gap:26px 34px; } }
.calc__campo label{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:15px; color:var(--texto-2); margin-bottom:12px;
}
.calc__campo label b{
  font-family:var(--mono); font-size:16px; color:var(--ouro-claro); font-weight:500;
}
.calc__campo input[type=range]{
  width:100%; height:44px; background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
/* Trilho com a parte percorrida acesa. --p e a posicao em 0..100, escrita
   pelo interativo.js a cada input. Sem JS, --p cai no padrao 0 e o trilho
   fica todo apagado, exatamente como era antes. Um controle que nao mostra
   o quanto ja andou obriga a pessoa a ler o numero para saber onde esta. */
.calc__campo input[type=range]::-webkit-slider-runnable-track{
  height:5px; border-radius:99px;
  background:
    linear-gradient(90deg, var(--ouro) 0 calc(var(--p, 0) * 1%), rgba(201,162,75,.18) calc(var(--p, 0) * 1%) 100%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
}
.calc__campo input[type=range]::-moz-range-track{
  height:5px; border-radius:99px; background:rgba(201,162,75,.18);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
}
.calc__campo input[type=range]::-moz-range-progress{
  height:5px; border-radius:99px; background:var(--ouro);
}
.calc__campo input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%; margin-top:-9.5px;
  background:linear-gradient(160deg,#F2E0B0,var(--ouro-claro) 32%,var(--ouro) 76%,#A8842F);
  border:0;
  box-shadow:0 3px 12px rgba(0,0,0,.6), 0 0 0 1px rgba(14,13,11,.7), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .16s var(--saida), box-shadow .16s ease;
}
.calc__campo input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; border:0;
  background:linear-gradient(160deg,#F2E0B0,var(--ouro-claro) 32%,var(--ouro) 76%,#A8842F);
  box-shadow:0 3px 12px rgba(0,0,0,.6), 0 0 0 1px rgba(14,13,11,.7), inset 0 1px 0 rgba(255,255,255,.45);
}
.calc__campo input[type=range]:hover::-webkit-slider-thumb,
.calc__campo input[type=range]:active::-webkit-slider-thumb{
  transform:scale(1.12);
  box-shadow:0 4px 18px rgba(0,0,0,.6), 0 0 0 6px rgba(201,162,75,.14), inset 0 1px 0 rgba(255,255,255,.5);
}
.calc__campo input[type=range]:focus-visible{ outline:2px solid var(--ouro-claro); outline-offset:6px; }

.calc__saida{
  margin-top:34px; padding-top:28px; border-top:1px solid var(--linha);
}
.calc__numeros{ display:grid; gap:20px; }
@media (min-width:620px){
  .calc__numeros{ grid-template-columns:repeat(3,1fr); gap:0; }
  .calc__numero + .calc__numero{ padding-left:20px; margin-left:20px; border-left:1px solid var(--linha); }
}
.calc__numero .v{
  font-family:var(--display); font-size:clamp(32px,5vw,44px);
  color:var(--ouro-claro); line-height:1; display:block; margin-bottom:8px;
  font-variant-numeric:tabular-nums;
  transition:color .5s ease, text-shadow .5s ease;
}
/* Pulso curto quando o numero muda. Confirma que o controle mexeu no numero,
   que e o unico jeito de saber que a conta e ao vivo sem ler tudo de novo. */
.calc__numero .v[data-mudou="1"]{
  color:#FBEFCC; text-shadow:0 0 22px rgba(230,204,133,.5);
  transition:color .06s ease, text-shadow .06s ease;
}
@media (prefers-reduced-motion: reduce){
  .calc__numero .v,
  .calc__numero .v[data-mudou="1"]{ transition:none; text-shadow:none; color:var(--ouro-claro); }
}
.calc__numero .r{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-3);
}
.calc__frase{
  margin-top:28px; font-size:clamp(17px,2.4vw,20px); line-height:1.5;
  color:var(--papel); font-family:var(--display); max-width:44ch;
}
.calc__nota{ margin-top:16px; font-size:13.5px; color:var(--texto-3); max-width:56ch; }

/* ---------------- gauntlet ---------------- */
.gauntlet{ position:relative; }
.gauntlet__fluxo{ display:grid; gap:14px; margin-top:38px; position:relative; }
@media (min-width:860px){
  .gauntlet__fluxo{ grid-template-columns:1fr auto 1fr; align-items:stretch; }
  /* Fio ligando os dois lados por tras do "vs". A tecnica e um confronto,
     entao os dois painteis precisam estar visivelmente ligados, e nao
     apenas vizinhos. */
  .gauntlet__fluxo::before{
    content:""; position:absolute; top:50%; left:12%; right:12%; height:1px;
    background:linear-gradient(90deg, transparent, var(--linha-forte) 22%, var(--linha-forte) 78%, transparent);
  }
}
.gauntlet__lado{
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:28px 26px;
  background:linear-gradient(178deg,#151310,#0F0E0C);
  position:relative; z-index:1;
  box-shadow:var(--luz-borda), var(--sombra-painel);
}
/* Os dois lados NAO sao iguais: quem constroi e quem reprova. O critico fica
   mais frio e mais duro, e e assim que a imagem conta a mesma coisa que o
   texto ao lado dela. */
.gauntlet__lado:last-of-type{
  border-color:rgba(247,244,238,.14);
  background:linear-gradient(178deg,#121212,#0D0D0D);
}
.gauntlet__lado:last-of-type h3{ color:var(--papel); }
.gauntlet__lado:last-of-type li::before{ background:var(--texto-2); }
.gauntlet__lado h3{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ouro); margin-bottom:14px; }
.gauntlet__lado ul{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.gauntlet__lado li{ font-size:15px; color:var(--texto-2); line-height:1.5; padding-left:18px; position:relative; }
.gauntlet__lado li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--ouro); opacity:.75; }
.gauntlet__vs{
  display:grid; place-items:center; padding:10px;
  position:relative; z-index:2;
}
.gauntlet__vs span{
  font-family:var(--display); font-size:26px; color:var(--ouro-claro);
  border:1px solid var(--linha-forte); border-radius:99px;
  width:62px; height:62px; display:grid; place-items:center;
  background:radial-gradient(70% 70% at 50% 30%, #1D1913, var(--preto) 78%);
  box-shadow:0 0 0 6px var(--preto), 0 0 28px -6px rgba(201,162,75,.45), var(--luz-borda);
}
.nota-caixa{
  margin-top:16px; border:1px solid var(--linha-forte); border-radius:var(--raio);
  padding:22px 24px; background:linear-gradient(160deg,#16130F,#100E0C);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
}
/* Regua interna de QA nao compete com numero de prova. Antes estava em serif
   de ate 62px, maior que todo numero da secao Prova (46px) e mais que o dobro
   dos do hero (26px). Numero grande na tela le como conquista. */
.nota-caixa .n{ font-family:var(--mono); font-size:clamp(30px,4vw,40px); color:var(--ouro); line-height:1; letter-spacing:-.02em; }
.nota-caixa p{ margin:0; font-size:15.5px; color:var(--texto-2); max-width:46ch; }

/* ---------------- prova ---------------- */
.prova{
  display:grid; gap:1px; background:var(--linha);
  border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden;
  box-shadow:var(--sombra-painel);
}
@media (min-width:640px){ .prova{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .prova{ grid-template-columns:repeat(4,1fr); } }
.prova__item{
  background:linear-gradient(178deg,#161310,#100F0D);
  padding:30px 24px 28px;
  position:relative; overflow:hidden;
  box-shadow:var(--luz-borda);
  transition:background .28s ease;
}
/* Halo dourado por tras do numero, aceso so no hover. Nao inventa dado
   nenhum: acende a celula que a pessoa esta lendo, e apaga as outras. */
.prova__item::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(72% 46% at 14% 12%, rgba(201,162,75,.14), transparent 70%);
  opacity:0; transition:opacity .3s ease;
}
.prova__item:hover{ background:linear-gradient(178deg,#1B1712,#121110); }
.prova__item:hover::before{ opacity:1; }
.prova__item > *{ position:relative; z-index:1; }
.prova__item .n{
  font-family:var(--display); font-size:clamp(36px,5.2vw,50px);
  color:var(--ouro-claro); line-height:1; margin-bottom:14px;
  letter-spacing:-.022em;
  /* A largura muda enquanto o numero sobe. Sem isto, o texto de baixo pula. */
  font-variant-numeric:tabular-nums;
}
.prova__item p{ font-size:14.8px; color:var(--texto-2); line-height:1.55; margin:0 0 12px; }
.prova__item .fonte{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--texto-3);
  margin:0; padding-top:12px; border-top:1px solid var(--linha);
}

/* ---------------- entrega ----------------
   Eram 8 cartoes iguais, com icone, titulo e paragrafo, dois a dois. Oito
   retangulos do mesmo tamanho nao criam hierarquia nenhuma: o olho le o
   primeiro, reconhece a forma e pula os outros sete.
   Agora e um MANIFESTO: linhas de um inventario, separadas por filete,
   dentro de uma unica placa. E o que o bloco de fato e, uma lista do que
   vem no arquivo, e ler oito linhas custa menos que ler oito cartoes. */
.entrega{
  display:grid;
  border:1px solid var(--linha); border-radius:var(--raio);
  background:linear-gradient(176deg,#141210,#0F0E0C);
  overflow:hidden;
  box-shadow:var(--luz-borda), var(--sombra-painel);
}
@media (min-width:840px){
  .entrega{ grid-template-columns:repeat(2,1fr); }
  /* Filete vertical no meio: separa as duas colunas sem virar dois blocos. */
  .entrega__item:nth-child(odd){ border-right:1px solid var(--linha); }
}
.entrega__item{
  padding:24px 24px 26px;
  border-bottom:1px solid var(--linha);
  display:flex; gap:16px; align-items:flex-start;
  position:relative;
  transition:background .24s ease;
}
/* Na coluna dupla, as duas ultimas linhas nao levam filete embaixo. */
@media (min-width:840px){
  .entrega__item:nth-last-child(-n+2){ border-bottom:0; }
}
@media (max-width:839px){
  .entrega__item:last-child{ border-bottom:0; }
}
.entrega__item:hover{ background:rgba(201,162,75,.045); }
.entrega__item .ico{
  width:38px; height:38px; flex:none; border-radius:10px;
  display:grid; place-items:center;
  background:var(--ouro-fundo); border:1px solid var(--linha-forte);
  color:var(--ouro-claro);
  box-shadow:var(--luz-borda);
  transition:background .24s ease, border-color .24s ease, transform .24s var(--saida);
}
.entrega__item:hover .ico{
  background:rgba(201,162,75,.18); border-color:var(--ouro); transform:translateY(-2px);
}
.entrega__item h3{ font-family:var(--sans); font-size:16.5px; font-weight:600; margin-bottom:6px; color:var(--papel); letter-spacing:-.005em; }
.entrega__item p{ font-size:14.8px; color:var(--texto-2); margin:0; line-height:1.56; }
.entrega__item code{
  font-family:var(--mono); font-size:.86em; color:var(--ouro);
  background:var(--ouro-fundo); border-radius:4px; padding:1px 5px;
  overflow-wrap:anywhere;
}

/* ---------------- para quem ---------------- */
/* Duas colunas com o mesmo peso visual pediam leitura igual das duas, e a
   secao existe para separar quem fica de quem sai. A coluna do sim ficou
   acesa e levantada; a do nao, recuada e sem luz. A hierarquia agora diz a
   mesma coisa que o texto. */
.filtro{ display:grid; gap:16px; }
@media (min-width:760px){ .filtro{ grid-template-columns:repeat(2,1fr); align-items:start; } }
.filtro__col{
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:28px 26px; background:var(--preto-2);
  position:relative; overflow:hidden;
}
.filtro__col--sim{
  border-color:var(--linha-forte);
  background:
    radial-gradient(110% 70% at 0% 0%, rgba(201,162,75,.10), transparent 62%),
    linear-gradient(168deg,#191510,#110F0D);
  box-shadow:var(--luz-borda-alta), var(--sombra-painel);
}
.filtro__col--sim::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent); opacity:.6;
}
.filtro__col--nao{
  background:#0C0B09;
  box-shadow:inset 0 2px 14px rgba(0,0,0,.5);
}
.filtro__col h3{ font-family:var(--sans); font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:18px; }
.filtro__col--sim h3{ color:var(--ouro-claro); }
.filtro__col--nao h3{ color:var(--texto-3); }
/* O item da coluna do nao NAO e apagado: quem se reconhece nela precisa
   conseguir ler a linha inteira. O recuo e do painel, nao do texto. */
.filtro__col ul{ margin:0; padding:0; list-style:none; display:grid; gap:13px; }
.filtro__col li{ font-size:15.5px; line-height:1.55; padding-left:26px; position:relative; color:var(--texto-2); }
.filtro__col li svg{ position:absolute; left:0; top:.28em; }
.filtro__col--sim li svg{ color:var(--ouro); }
.filtro__col--nao li svg{ color:var(--texto-3); }

/* ---------------- oferta ----------------
   E o clima da pagina. Recebe mais material que qualquer outro bloco: luz
   entrando pela quina de cima, trama diagonal, filete aceso na borda e uma
   sombra funda embaixo, para a caixa parecer pousada sobre a pagina. */
.oferta{ position:relative; }
.oferta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(66% 46% at 50% 34%, rgba(201,162,75,.09), transparent 68%);
}
.oferta .wrap{ position:relative; }
.oferta__caixa{
  border:1px solid var(--linha-forte); border-radius:18px;
  background:
    radial-gradient(96% 62% at 12% 0%, rgba(201,162,75,.13), transparent 60%),
    linear-gradient(168deg,#1A1611,#0F0D0B);
  padding:clamp(28px,5vw,54px);
  max-width:860px;
  position:relative; overflow:hidden;
  box-shadow:
    var(--luz-borda-alta),
    0 0 0 1px rgba(201,162,75,.08),
    0 50px 110px -50px rgba(0,0,0,.95),
    0 0 90px -40px rgba(201,162,75,.35);
}
.oferta__caixa::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,var(--ouro-claro),transparent);
}
.oferta__caixa::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(128deg,
    rgba(247,244,238,.018) 0 1px, transparent 1px 5px);
}
.oferta__caixa > *{ position:relative; z-index:1; }
.oferta__topo{ display:grid; gap:28px; }
@media (min-width:760px){ .oferta__topo{ grid-template-columns:1fr auto; align-items:end; } }
.oferta__caixa h2{ font-size:clamp(27px,4.4vw,42px); max-width:16ch; margin-bottom:14px; }
.oferta__caixa .desc{ color:var(--texto-2); font-size:16.5px; max-width:44ch; margin:0; }

.preco{ text-align:left; }
@media (min-width:760px){ .preco{ text-align:right; } }
.preco .parcela{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); margin-bottom:6px; }
.preco .valor{ display:flex; align-items:baseline; gap:4px; }
@media (min-width:760px){ .preco .valor{ justify-content:flex-end; } }
.preco .cifra{ font-family:var(--display); font-size:28px; color:var(--ouro-claro); }
.preco .n{
  font-family:var(--display); font-size:clamp(56px,9vw,84px);
  color:var(--papel); line-height:.86; letter-spacing:-.032em;
  font-variant-numeric:tabular-nums;
  /* Um halo minimo atras do numero. Ele e o unico texto da pagina que a
     pessoa precisa achar sem procurar. */
  text-shadow:0 0 46px rgba(230,204,133,.22);
}
.preco .vista{ font-size:14px; color:var(--texto-2); margin-top:10px; }
.preco .juros{ display:block; font-size:12.5px; line-height:1.5; margin-top:7px; max-width:34ch; }
@media (min-width:760px){ .preco .juros{ margin-left:auto; } }

/* aviso de requisito: precisa ler como informacao honesta, nao como alerta de erro */
.aviso-requisito{
  display:flex; gap:12px; align-items:flex-start;
  max-width:62ch; margin:22px 0 0;
  padding:16px 18px; border-radius:var(--raio-s);
  border:1px solid var(--linha-forte); background:var(--ouro-fundo);
  font-size:15px; line-height:1.58; color:var(--texto-2);
}
.aviso-requisito svg{ flex:none; color:var(--ouro); margin-top:2px; }
.aviso-requisito strong{ color:var(--papel); }

.oferta__lista{
  margin:34px 0 0; padding:30px 0 0; border-top:1px solid var(--linha);
  list-style:none; display:grid; gap:13px;
}
@media (min-width:700px){ .oferta__lista{ grid-template-columns:repeat(2,1fr); gap:13px 30px; } }
.oferta__lista li{ font-size:15.5px; color:var(--texto-2); padding-left:27px; position:relative; line-height:1.5; }
.oferta__lista li svg{ position:absolute; left:0; top:.26em; color:var(--ouro); }
.oferta__acao{ margin-top:34px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.oferta__acao .btn{ min-width:min(340px,100%); }
.oferta__seguro{ font-size:15px; color:var(--texto-2); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.oferta__seguro svg{ color:var(--ouro); flex:none; }

/* Era uma barra dourada de 2px na lateral. Fora do lugar duas vezes: e o
   desenho mais generico que existe para "nota", e ele pinta de dourado, na
   cor do CTA, justamente o paragrafo que diz que ninguem vai te empurrar
   nada. Virou uma nota escrita a margem, com filete de 1px em cima. */
.oferta__neutro{
  margin-top:30px; padding-top:22px;
  border-top:1px solid var(--linha);
  font-size:15.5px; color:var(--texto-2); max-width:56ch;
}

/* ---------------- fechamento ----------------
   Ultimo bloco antes do rodape. Era um div com max-width no atributo style
   e mais nada: a pagina terminava do mesmo jeito que qualquer secao do meio.
   Aqui ela fecha centrada, com a luz subindo do pe da tela. */
.fechamento{
  max-width:640px; margin:0 auto; text-align:center;
  position:relative; isolation:isolate;
}
.fechamento::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:50%; width:min(820px,150%); height:420px;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(201,162,75,.11), transparent 70%);
}
.fechamento .titulo-secao{ max-width:none; margin-left:auto; margin-right:auto; }
.fechamento .lead{ margin-left:auto; margin-right:auto; }
.fechamento .btn{ min-width:min(320px,100%); }

/* ---------------- faq ---------------- */
.faq{ max-width:820px; margin-top:36px; }

/* Rotulo de grupo: 19 perguntas soltas viram parede. Agrupadas por estagio de
   decisao, quem esta travado no preco chega la sem ler sobre instalacao. */
.faq__grupo{
  font-family:var(--mono); font-size:11px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ouro); margin:0; padding:34px 0 12px;
  border-bottom:1px solid var(--linha-forte);
}
.faq__grupo:first-child{ padding-top:0; }

.faq details{
  border-bottom:1px solid var(--linha);
  position:relative;
  transition:background .22s ease;
}
/* A pergunta aberta ganha fundo e um filete aceso no pe: numa lista de 19,
   quem rola de volta precisa achar em qual estava sem reler todas. */
.faq details[open]{ background:rgba(201,162,75,.035); }
.faq details[open]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, var(--ouro), rgba(201,162,75,.06) 68%, transparent);
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:24px 46px 24px 0; position:relative;
  font-size:clamp(17px,2.4vw,20px); font-weight:500; color:var(--papel);
  transition:color .16s ease;
}
/* O recuo do item aberto NAO e animado de proposito: padding em transicao
   reflui o texto a cada quadro e a pergunta rearranja as linhas na mao de
   quem esta lendo. Aqui ele troca de uma vez. */
.faq details[open] > summary{ padding-left:14px; color:var(--ouro-claro); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--ouro-claro); }
/* Sinal de mais que vira menos. Duas barras cruzadas: a vertical some ao
   abrir. Le mais rapido que a seta girando, e nao ocupa mais espaco. */
.faq summary::before,
.faq summary::after{
  content:""; position:absolute; right:10px; top:50%;
  background:var(--ouro); border-radius:2px;
  transition:transform .28s var(--saida), opacity .2s ease;
}
.faq summary::before{ width:13px; height:1.5px; transform:translateY(-50%); }
/* O traco vertical nasce alinhado a direita, entao ele volta 5,75px para
   ficar no centro do traco horizontal, que tem 13px. */
.faq summary::after{ width:1.5px; height:13px; transform:translate(-5.75px,-50%); }
.faq details[open] > summary::after{ transform:translate(-5.75px,-50%) rotate(90deg); opacity:0; }

.faq .resposta{ padding:0 0 28px; color:var(--texto-2); font-size:16px; max-width:64ch; }
.faq details[open] > .resposta{ padding-left:14px; padding-right:14px; }
.faq .resposta p:last-child{ margin-bottom:0; }
/* Abre deslizando. `details` nao anima altura sozinho, entao a animacao e
   no conteudo, que so existe quando ja esta aberto. Sem movimento, ele
   aparece na hora, exatamente como o `details` nativo. */
.faq details[open] > .resposta{ animation:faq-abre .34s var(--saida-longa); }
@keyframes faq-abre{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .faq details[open] > .resposta{ animation:none; }
  .faq summary,
  .faq summary::before,
  .faq summary::after{ transition:none; }
}

/* ---------------- rodape ---------------- */
/* A barra fixa mede cerca de 70px e vive sobre o conteudo no mobile.
   Sem esta folga ela cobre a ultima linha do rodape. */
.rodape{
  padding:60px 0 40px;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(201,162,75,.05), transparent 62%),
    #0A0908;
  position:relative;
}
.rodape::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.42),transparent);
}
@media (max-width:899px){
  .rodape{ padding-bottom:calc(40px + 78px + env(safe-area-inset-bottom)); }
}
.rodape__topo{ display:grid; gap:32px; margin-bottom:38px; }
@media (min-width:800px){ .rodape__topo{ grid-template-columns:1.4fr 1fr 1fr; } }
.rodape h4,
.rodape__titulo{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-3); margin:0 0 10px; font-weight:500;
}
.rodape ul{ margin:0; padding:0; list-style:none; display:grid; gap:2px; }
/* Alvo de toque de 44px: o link tem 18px de linha, o resto vem do padding. */
.rodape ul a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14.5px; color:var(--texto-2); transition:color .16s;
}
.rodape ul a:hover{ color:var(--ouro-claro); }
.rodape__base a{ display:inline-flex; align-items:center; min-height:44px; }
.rodape__sobre p{ font-size:14.8px; color:var(--texto-2); max-width:38ch; }
.rodape__base{
  border-top:1px solid var(--linha); padding-top:24px;
  display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--texto-3);
}
.rodape__fornecedor{
  border-top:1px solid var(--linha); padding-top:22px; margin-bottom:22px;
  font-size:12.5px; line-height:1.75; color:var(--texto-3); max-width:70ch;
}
.rodape__fornecedor strong{ color:var(--texto-2); font-weight:500; }
.rodape__fornecedor a{
  color:var(--texto-2); text-decoration:underline; text-underline-offset:3px;
  padding:4px 1px;
}
.rodape__fornecedor a:hover{ color:var(--ouro-claro); }

/* Link de termos antes da compra: inline dentro da frase, entao vale a excecao
   de tamanho de alvo da WCAG. Mesmo assim ganha folga vertical para o toque. */
.oferta__termos{
  margin:20px 0 0; font-size:14px; color:var(--texto-2); max-width:52ch;
}
.oferta__termos a{
  color:var(--ouro-claro); text-decoration:underline; text-underline-offset:3px;
  padding:8px 2px;
}
.oferta__termos a:hover{ color:var(--ouro); }

/* ---------------- barra fixa mobile ---------------- */
.barra-fixa{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-barra);
  background:rgba(14,13,11,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--linha-forte);
  box-shadow:var(--luz-borda), 0 -20px 40px -30px rgba(0,0,0,.95);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  transform:translateY(110%); transition:transform .34s var(--saida-longa);
}
.barra-fixa.visivel{ transform:none; }
.barra-fixa .info{ display:flex; flex-direction:column; line-height:1.25; }
.barra-fixa .info .t{ font-size:13.5px; color:var(--texto-2); }
.barra-fixa .info .p{ font-size:16px; color:var(--papel); font-weight:600; }
.barra-fixa .btn{ padding:14px 24px; font-size:14.5px; flex:none; }
@media (min-width:900px){ .barra-fixa{ display:none; } }

/* ---------------- dor ----------------
   A pagina explicava a maquina em quatro secoes e so o hero falava da dor.
   Esta nomeia as tres dores na voz de quem le, e diz o que resolve cada uma,
   antes de qualquer explicacao de como funciona. */
.dor{
  display:grid; gap:1px; background:var(--linha);
  border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden;
  box-shadow:var(--sombra-painel);
}
@media (min-width:900px){ .dor{ grid-template-columns:repeat(3,1fr); } }

/* Celula gravada em pedra: luz na quina de cima, escuro no pe. Sao tres
   falas de dor, entao a celula precisa parecer funda, nao um cartao claro. */
.dor__item{
  background:linear-gradient(178deg,#161310,#100F0D);
  padding:32px 26px 28px; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  box-shadow:var(--luz-borda);
  transition:background .3s ease;
}
/* Aspas gigantes como textura, nao como icone: ficam atras do texto, cortadas
   pela borda da celula, no tamanho de um numero de placa. */
.dor__item::before{
  content:"\201C"; position:absolute; top:-.34em; right:.06em;
  font-family:var(--display); font-size:170px; line-height:1;
  color:var(--ouro); opacity:.07; pointer-events:none;
  transition:opacity .3s ease, transform .5s var(--saida-longa);
}
.dor__item:hover{ background:linear-gradient(178deg,#1B1712,#121110); }
.dor__item:hover::before{ opacity:.11; transform:translateY(4px); }
.dor__item > *{ position:relative; z-index:1; }

.dor__fala{
  font-family:var(--display); font-size:clamp(21px,2.6vw,26px); line-height:1.26;
  color:var(--papel); margin:0 0 14px; letter-spacing:-.014em;
}
.dor__custo{ font-size:15px; line-height:1.6; color:var(--texto-2); margin:0 0 22px; }
/* A resposta e o que a pessoa veio buscar. Ela ganha fundo proprio dentro da
   celula, entao a leitura vira "dor escura em cima, saida acesa embaixo". */
.dor__resolve{
  margin-top:auto; padding:16px 16px 15px;
  margin-left:-4px; margin-right:-4px;
  border:1px solid var(--linha); border-radius:var(--raio-s);
  background:var(--ouro-fundo);
  transition:border-color .3s ease, background .3s ease;
}
.dor__item:hover .dor__resolve{
  border-color:var(--linha-forte); background:rgba(201,162,75,.13);
}
.dor__resolve b{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ouro); font-weight:500; margin-bottom:8px;
}
.dor__resolve span{ display:block; font-size:15px; line-height:1.55; color:var(--texto-2); }

/* ==================== AMOSTRA GRATIS: prompt + laudo de exemplo ==================== */

/* A amostra e o unico bloco da pagina que a pessoa pode LEVAR sem pagar.
   Ele ganha a cara de um arquivo aberto num editor, e nao de um cartao de
   marketing com texto dentro. */
.amostra{
  background:
    radial-gradient(70% 40% at 84% 0%, rgba(201,162,75,.06), transparent 66%),
    linear-gradient(180deg, var(--preto), #100E0C 50%, var(--preto));
}
.prompt{
  border:1px solid var(--linha-forte); border-radius:var(--raio);
  background:#0B0A08; overflow:hidden;
  position:relative;
  box-shadow:var(--luz-borda), var(--sombra-painel);
}
/* Sombra de rolagem no pe da caixa. O prompt tem 100 linhas e so 340px de
   altura: sem essa borda esfumacada, ele parece um texto que acaba ali. */
.prompt::after{
  content:""; position:absolute; left:1px; right:1px; bottom:0; height:56px;
  pointer-events:none; border-radius:0 0 var(--raio) var(--raio);
  background:linear-gradient(180deg, transparent, rgba(11,10,8,.96));
}
.prompt__topo{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 18px; border-bottom:1px solid var(--linha);
  background:linear-gradient(180deg,#171410,#100E0C);
}
.prompt__nome{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  color:var(--texto-3); text-transform:lowercase;
  /* o nome cede espaco antes do botao: em tela estreita quem some e o rotulo,
     nunca a acao. */
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.prompt__copiar{
  flex:0 0 auto;
  font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--ouro); background:transparent;
  border:1px solid var(--linha-forte); border-radius:var(--raio-s);
  padding:7px 15px; cursor:pointer; transition:background .16s, color .16s;
}
.prompt__copiar:hover,.prompt__copiar:focus-visible{ background:var(--ouro-fundo); color:var(--ouro-claro); }
.prompt__copiar[data-feito="1"]{ color:var(--verde); border-color:var(--verde); }
.prompt__corpo{
  margin:0; padding:22px 20px;
  font-family:var(--mono); font-size:13px; line-height:1.75; color:var(--texto-2);
  /* pre nao quebra sozinho, e sem isto a pagina inteira ganha scroll lateral
     no celular. Quebra dentro da caixa, e o resto da pagina nao se mexe. */
  white-space:pre-wrap; overflow-wrap:anywhere;
  max-height:340px; overflow-y:auto;
}

.amostra__ponte{
  max-width:var(--max-texto); margin:34px 0 26px;
  font-size:16.5px; line-height:1.7; color:var(--texto-2);
}

.laudo{
  border:1px solid var(--linha-forte); border-radius:var(--raio);
  background:var(--preto-2); overflow:hidden;
}
.laudo__topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--linha); background:var(--preto-3);
}
.laudo__arquivo{ font-family:var(--mono); font-size:12.5px; color:var(--ouro); }
.laudo__tag{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--texto-3);
}
.laudo__corpo{ padding:26px 24px; }
.laudo__abertura{
  font-size:16px; line-height:1.65; color:var(--texto);
  padding-bottom:20px; margin-bottom:6px; border-bottom:1px solid var(--linha);
}
.laudo__eixo{
  display:grid; grid-template-columns:132px 34px 1fr; gap:14px; align-items:start;
  padding:14px 0; border-bottom:1px solid rgba(201,162,75,.12);
}
.laudo__nome{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--texto); }
.laudo__nota{
  font-family:var(--mono); font-size:15px; font-weight:700; text-align:center;
  border-radius:var(--raio-s); padding:1px 0;
}
.laudo__nota--baixa{ color:var(--vermelho); background:rgba(181,84,74,.13); }
.laudo__nota--media{ color:var(--ouro); background:var(--ouro-fundo); }
.laudo__obs{ font-size:14.5px; line-height:1.6; color:var(--texto-2); }

.laudo__plano-titulo{
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ouro); margin:26px 0 14px;
}
.laudo__plano{ margin:0; padding-left:20px; display:grid; gap:12px; }
.laudo__plano li{ font-size:15px; line-height:1.6; color:var(--texto-2); }
.laudo__plano strong{ color:var(--texto); font-weight:600; }
.laudo__bom{
  margin-top:24px; padding:14px 16px;
  border-left:2px solid var(--verde); background:rgba(78,158,106,.07);
  border-radius:0 var(--raio-s) var(--raio-s) 0;
  font-size:14.5px; line-height:1.6; color:var(--texto-2);
}
.laudo__bom strong{ color:var(--texto); }

@media (max-width:640px){
  /* tres colunas em 340px de largura esmagam a observacao. A nota sobe para a
     linha do nome e a observacao ganha a largura inteira. */
  .laudo__eixo{ grid-template-columns:1fr 34px; gap:8px 12px; }
  .laudo__obs{ grid-column:1 / -1; }
  .prompt__corpo{ font-size:12px; padding:18px 15px; }
}

/* ==================== MENTORIA ====================
   Ar diferente do resto da pagina, de proposito: aqui nao se vende o pacote
   de R$ 297, e o bloco precisa ler como outro assunto sem virar outro site.
   O fundo esfria e escurece, e o dourado recua para o pe da secao. */

.mentoria{
  background:
    radial-gradient(80% 46% at 50% 100%, rgba(201,162,75,.06), transparent 68%),
    linear-gradient(180deg, var(--preto), #0B0A08 40%, #0B0A08 72%, var(--preto));
}
.mentoria .mentoria__col,
.mentoria .mentoria__conversa,
.mentoria .mentoria__ficha > div{
  background:linear-gradient(178deg,#141210,#0F0E0C);
  box-shadow:var(--luz-borda);
}

/* CSS apenas: nenhuma palavra desta secao foi tocada.
   A barra lateral de 2px saiu; virou uma etiqueta discreta com filete em
   cima, que e o que uma ponte entre secoes deve parecer. */
.mentoria__ponte{
  font-size:14px; color:var(--texto-2); margin:22px 0 0;
  padding-top:16px; border-top:1px solid var(--linha);
  max-width:58ch; line-height:1.6;
}

/* Ficha de mecanica. Fica `hidden` no HTML enquanto os quatro campos nao
   existirem: painel com "A DEFINIR" no ar e pior que painel nenhum. */
.mentoria__ficha{
  display:grid; gap:1px; background:var(--linha);
  border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; margin-bottom:34px;
}
@media (min-width:700px){ .mentoria__ficha{ grid-template-columns:repeat(4,1fr); } }
.mentoria__ficha > div{ background:var(--preto-2); padding:18px 20px; display:grid; gap:6px; }
.mentoria__ficha .r{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--texto-3);
}
.mentoria__ficha .v{ font-size:15px; color:var(--texto); font-weight:500; }

.mentoria__titulo{
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ouro); margin:38px 0 16px;
}

.mentoria__grade{ display:grid; gap:1px; background:var(--linha); border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; }
@media (min-width:820px){ .mentoria__grade{ grid-template-columns:1fr 1fr; } }
.mentoria__col{ background:var(--preto-2); padding:24px 24px; }
.mentoria__col h4{
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--texto);
  margin:0 0 14px;
}
.mentoria__col ul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.mentoria__col li{ font-size:15.2px; line-height:1.55; color:var(--texto-2); padding-left:18px; position:relative; }
.mentoria__col li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--ouro); }
.mentoria__nao li::before{ background:var(--texto-3); }
.mentoria__col a{ color:var(--ouro); }

.mentoria__entrega{ margin:0; padding:0; list-style:none; display:grid; gap:14px; }
.mentoria__entrega li{
  font-size:15.5px; line-height:1.6; color:var(--texto-2);
  padding-left:20px; position:relative;
}
.mentoria__entrega li::before{
  content:''; position:absolute; left:0; top:.68em;
  width:8px; height:1px; background:var(--ouro);
}
.mentoria__entrega strong{ color:var(--texto); font-weight:600; }
.mentoria__entrega code{ font-family:var(--mono); font-size:.88em; color:var(--ouro); }

.mentoria__conversa{
  margin-top:34px; padding:22px 24px;
  border:1px solid var(--linha); border-radius:var(--raio); background:var(--preto-2);
}
.mentoria__conversa p{ font-size:15.2px; line-height:1.65; color:var(--texto-2); margin:0 0 12px; }
.mentoria__conversa p:last-child{ margin-bottom:0; }
.mentoria__conversa strong{ color:var(--ouro); }

/* O CTA daqui e DELIBERADAMENTE mais fraco que o de compra. Dois botoes
   dourados de mesmo peso a poucas linhas um do outro dividem a atencao no
   momento em que a pagina devia estar concentrando. */
.mentoria__cta{ margin-top:30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.mentoria__frio{
  font-size:14.5px; color:var(--texto-2); text-decoration:none;
  border-bottom:1px solid var(--linha);
}
.mentoria__frio:hover{ color:var(--ouro); border-color:var(--ouro); }

/* Mestres com link. O nofollow e deliberado: eles nao me endossam, entao a
   pagina nao passa sinal de SEO como se houvesse relacao. */
.mestres a{
  color:inherit; text-decoration:none;
  display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.mestres a:hover,.mestres a:focus-visible{ color:var(--ouro-claro); }
.mestres .arroba{
  font-family:var(--mono); font-size:11.5px; color:var(--texto-3); letter-spacing:.02em;
}
.mestres a:hover .arroba{ color:var(--ouro); }

/* Monograma no lugar do retrato. Foto de rosto de terceiro em pagina comercial
   depende de autorizacao e lê como endosso, que e exatamente o que a nota
   abaixo da lista nega. */
.mestres{ display:grid; gap:14px; }
.mestres li{ padding:0; }
.mestres a{ align-items:center; gap:12px; }
.mono-ini{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--linha-forte); background:var(--preto-3);
  font-family:var(--mono); font-size:12.5px; font-weight:700;
  letter-spacing:.02em; color:var(--ouro);
}
.mestres a:hover .mono-ini,.mestres a:focus-visible .mono-ini{
  border-color:var(--ouro); color:var(--ouro-claro);
}
.mestres__nome{ display:grid; gap:2px; line-height:1.3; font-family:var(--sans); }

/* O link da secao em que a pessoa esta, aceso. Numa pagina unica, e o
   equivalente ao `.active` de um site de varias paginas: sem ele o menu nao
   diz onde voce esta, so para onde da para ir. */
.topo nav a{ position:relative; }
.topo nav a::after{
  content:''; position:absolute; left:13px; right:13px; bottom:6px;
  height:1px; background:var(--ouro);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .28s var(--saida-longa);
}
.topo nav a.ativo{ color:var(--papel); }
/* O filete cresce do meio quando a secao entra, em vez de aparecer inteiro.
   Numa pagina unica, e ele que faz o papel do "voce esta aqui". */
.topo nav a.ativo::after{ transform:scaleX(1); }
.topo nav a:hover::after{ transform:scaleX(.5); }
.topo nav a.ativo:hover::after{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .topo nav a::after{ transition:none; }
}

/* ---------- passo a passo da mentoria ----------
   Numero em disco dourado a esquerda, cartao a direita. O numero e
   aria-hidden e a ordem real vem do <ol>: leitor de tela ja anuncia
   "1 de 4", entao ler o disco de novo seria eco. */
.mentoria__intro{
  font-size:16px; line-height:1.65; color:var(--texto-2);
  max-width:56ch; margin:0 0 26px;
}

.passos{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:14px; }
@media (min-width:860px){ .passos{ grid-template-columns:1fr 1fr; gap:16px; } }

.passo{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  background:linear-gradient(178deg,var(--preto-2),#0F0E0C);
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:22px 22px 20px;
  box-shadow:var(--luz-borda);
  transition:border-color .25s var(--saida), transform .25s var(--saida);
}
.passo:hover{ border-color:var(--linha-forte); transform:translateY(-2px); }

.passo__n{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-size:18px; line-height:1;
  color:#14120F;
  background:radial-gradient(circle at 32% 26%, #F0DCA8, var(--ouro) 62%, #A8823A);
  box-shadow:0 0 22px -6px rgba(201,162,75,.55);
}

.passo h4{
  font-family:var(--display); font-weight:400;
  font-size:20px; line-height:1.25; color:var(--papel); margin:2px 0 8px;
}
.passo p{ font-size:15px; line-height:1.62; color:var(--texto-2); margin:0; }

@media (prefers-reduced-motion:reduce){
  .passo{ transition:none; }
  .passo:hover{ transform:none; }
}

/* O terminal do Gauntlet e a prova central da pagina, e no celular ele
   rolava ~900px na horizontal sem nenhuma pista de que rolava: a linha de
   sumario tem 114 caracteres, e 114 caracteres em mono 13px nao cabem numa
   caixa de 312px. O .prompt__corpo logo abaixo ja quebrava linha; o
   terminal nao tinha recebido a mesma correcao. */
@media (max-width:719px){
  .terminal{ font-size:11.5px; }
  .terminal__corpo pre{ white-space:pre-wrap; overflow-wrap:anywhere; }
}

/* Alvo de toque de 44px no botao Copiar: e a unica acao da secao que a
   pagina oferece de graca, e estava com 33px de altura. */
.prompt__copiar{ min-height:44px; padding:10px 16px; }


/* ---------------- canais no rodape ---------------- */

.rodape__canais{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.canal{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--texto-3); text-decoration:none;
  transition:color .16s ease;
}
.canal:hover,.canal:focus-visible{ color:var(--ouro); }
/* O WhatsApp ja nasce mais claro que o Instagram: e o canal de suporte, e
   quem esta procurando ajuda no rodape precisa achar ele primeiro. */
.canal--zap{ color:var(--texto-2); }
.canal svg{ flex:none; }

/* ---------- area de materiais ----------
   Cartao horizontal: capa de um lado, o que tem dentro do outro. No
   celular a capa vai pra cima, menor, pra nao empurrar o botao pra fora
   da primeira tela. */
.materiais{ display:grid; gap:1px; background:var(--linha); border:1px solid var(--linha);
  border-radius:var(--raio); overflow:hidden; }
.material{ background:var(--preto-2); padding:26px 24px; display:grid; gap:22px; align-items:center; }
@media (min-width:760px){ .material{ grid-template-columns:172px 1fr; gap:30px; padding:30px 30px; } }

.material__capa{ line-height:0; border-radius:10px; overflow:hidden; border:1px solid var(--linha);
  box-shadow:0 14px 34px rgba(0,0,0,.45); max-width:172px; }
.material__capa img{ width:100%; height:auto; display:block; }

.material__selo{ display:inline-block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro);
  border:1px solid var(--linha); border-radius:99px; padding:5px 11px; margin:0 0 14px; }
.material h3{ font-family:var(--serif); font-weight:400; font-size:25px; line-height:1.15;
  color:var(--texto); margin:0 0 10px; }
.material > div > p{ font-size:15px; line-height:1.6; color:var(--texto-2); margin:0 0 16px; }
.material ul{ margin:0 0 20px; padding:0; list-style:none; display:grid; gap:8px; }
.material li{ font-size:14.4px; line-height:1.5; color:var(--texto-2);
  padding-left:19px; position:relative; }
.material li::before{ content:""; position:absolute; left:0; top:.74em; width:10px; height:1px; background:var(--ouro); opacity:.75; }
.material__pe{ font-size:13.4px; color:var(--texto-3); margin:16px 0 0; }
.material__pe a{ color:var(--ouro); }