/* ============================================================
   FX STUDIOS | Paginas de material gratuito (iscas e manual)
   Tokens, botoes, topo, rodape e a caixa .prompt continuam vindo de
   base.css e vendas.css. Aqui mora so o que as iscas tem de proprio:
   selo de passo, passo numerado, bloco "repara", abas Mac e Windows,
   o "como saber que deu certo" e o glossario.
   Mobile primeiro: tudo nasce em coluna unica e so abre a partir de 860px.
   ============================================================ */

.isca-abertura{ padding:clamp(44px,8vw,92px) 0 clamp(30px,5vw,48px); }
.isca-abertura h1{
  font-size:clamp(34px,7.4vw,60px);
  letter-spacing:-.026em;
  max-width:16ch;
  margin-bottom:.4em;
}
.isca-abertura h1 em{ font-style:italic; color:var(--ouro-claro); }

/* Ficha curta logo abaixo do lead: o que custa, quanto tempo, o que precisa. */
.isca-ficha{ display:flex; flex-wrap:wrap; gap:14px 26px; margin:26px 0 0; padding:0; list-style:none; }
.isca-ficha li{ display:grid; gap:2px; }
.isca-ficha .r{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--texto-3);
}
.isca-ficha .v{ font-size:14.5px; color:var(--texto); font-weight:500; }

/* ---------- selo mono em pilula ("passo 01 · ...") ---------- */
.selo-passo{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; color:var(--ouro);
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--linha-forte); background:var(--ouro-fundo);
  margin:0 0 16px;
}

/* ---------- texto corrido das iscas ---------- */
.isca-texto{ max-width:var(--max-texto); }
.isca-texto p{ color:var(--texto-2); font-size:16.5px; line-height:1.72; margin:0 0 1em; }
.isca-texto p b, .isca-texto li b{ color:var(--texto); font-weight:600; }
.isca-texto h2{ font-size:clamp(27px,4.6vw,40px); letter-spacing:-.02em; max-width:20ch; }
.isca-texto h3{ font-size:clamp(22px,3.4vw,28px); letter-spacing:-.016em; margin-top:1.4em; }
.isca-texto ul, .isca-texto ol{ color:var(--texto-2); font-size:16px; line-height:1.65; padding-left:1.2em; margin:0 0 1.2em; }
.isca-texto li{ margin:0 0 .45em; }
.isca-texto a{ color:var(--ouro); text-decoration:underline; text-underline-offset:3px; }
.isca-texto a:hover{ color:var(--ouro-claro); }

/* codigo em linha: nome de arquivo, pasta, comando curto dentro da frase */
.isca-texto code, .cmd-linha{
  font-family:var(--mono); font-size:.86em;
  background:var(--preto-3); border:1px solid var(--linha);
  border-radius:6px; padding:1px 6px; color:var(--ouro-claro);
  overflow-wrap:anywhere;
}

/* ---------- passos numerados ----------
   Um painel por passo, separados por fio. Mesma construcao da grade de
   ferramentas: celula com material, nao cartao solto repetido. */
.passos{ display:grid; gap:18px; margin:30px 0 0; }
.passo-isca{
  border:1px solid var(--linha); border-radius:var(--raio);
  background:linear-gradient(178deg,#161310,#100F0D);
  padding:clamp(22px,4vw,34px);
  box-shadow:var(--luz-borda), var(--sombra-painel);
}
.passo-isca h3{
  font-size:clamp(23px,3.6vw,30px); letter-spacing:-.016em;
  margin:0 0 .45em; max-width:24ch;
}
.passo-isca > p{ color:var(--texto-2); font-size:16px; line-height:1.68; margin:0 0 1em; max-width:62ch; }
.passo-isca > p b{ color:var(--texto); font-weight:600; }
.passo-isca .prompt{ margin-top:18px; }

/* Prompt curto nao precisa de rolagem nem da sombra de "tem mais embaixo". */
.prompt--inteiro .prompt__corpo{ max-height:none; overflow:visible; }
.prompt--inteiro::after{ display:none; }

/* O que trocar no prompt, logo abaixo da caixa. */
.trocar{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.trocar li{
  font-family:var(--mono); font-size:11.5px; color:var(--texto-2);
  border:1px dashed var(--linha-forte); border-radius:999px; padding:5px 11px;
}
.trocar__rotulo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-3); margin:16px 0 0;
}

/* ---------- bloco "repara" ----------
   O aviso honesto no meio da pagina. Tracejado para nao competir com o
   passo, e sem icone: o rotulo ja diz o que e. */
.repara{
  border:1px dashed var(--linha-forte); border-radius:var(--raio);
  padding:22px clamp(18px,3.4vw,28px); margin:30px 0;
  background:rgba(201,162,75,.035);
  max-width:var(--max-texto);
}
.repara__rotulo{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ouro); margin:0 0 8px;
}
.repara p{ margin:0; color:var(--texto-2); font-size:15.6px; line-height:1.66; }
.repara p + p{ margin-top:.7em; }
.repara b{ color:var(--texto); font-weight:600; }
.repara a{ color:var(--ouro); }

/* ---------- regras (os tres principios do revisor) ---------- */
.regras{ display:grid; gap:1px; background:var(--linha); border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; margin:28px 0 0; }
@media (min-width:860px){ .regras{ grid-template-columns:repeat(3,1fr); } }
.regra{ background:linear-gradient(178deg,#161310,#100F0D); padding:26px 24px; }
.regra__n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ouro); text-transform:uppercase; margin:0 0 10px; }
.regra h3{ font-size:22px; margin:0 0 .4em; letter-spacing:-.012em; }
.regra p{ font-size:15px; line-height:1.62; color:var(--texto-2); margin:0; }

/* ---------- abas Mac e Windows ----------
   Sem JavaScript as duas versoes aparecem uma embaixo da outra, cada uma
   com seu titulo. Com JavaScript viram abas. A escolha fica lembrada na
   pagina inteira: quem escolheu Windows no passo 1 nao quer ver Mac no 4. */
.abas{ margin:20px 0 0; }
.abas__lista{ display:none; }
.js .abas__lista{
  display:inline-flex; gap:4px; padding:4px; margin:0 0 16px;
  border:1px solid var(--linha); border-radius:999px; background:var(--preto-2);
}
.abas__botao{
  font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--texto-2); background:transparent; border:0;
  border-radius:999px; padding:9px 18px; min-height:44px; cursor:pointer;
}
.abas__botao[aria-selected="true"]{ background:var(--ouro); color:var(--preto); }
.abas__botao:focus-visible{ outline:2px solid var(--ouro-claro); outline-offset:2px; }
.aba__titulo{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-3); margin:18px 0 10px;
}
.js .aba__titulo{ display:none; }
.js .aba[hidden]{ display:none !important; }
/* Antes do script rodar (ele e defer), so a primeira aba aparece. Sem isto
   as duas versoes piscam abertas por um instante. */
.js:not(.abas-prontas) .aba + .aba{ display:none; }

/* ---------- caixa de comando ----------
   Reaproveita a .prompt, com corpo de uma linha so. */
.cmd{ margin:12px 0 0; }
/* Comando nao quebra linha: quebrado no meio de uma URL, quem redigita de
   olho erra. Rola dentro da caixa, e a pagina continua parada. */
.cmd .prompt__corpo{ max-height:none; overflow-x:auto; overflow-y:visible; white-space:pre; overflow-wrap:normal; padding:16px 18px; color:var(--ouro-claro); font-size:13.5px; }
.cmd::after{ display:none; }
.cmd__nota{ font-size:14px; color:var(--texto-3); margin:8px 0 0; line-height:1.55; }

/* ---------- como saber que deu certo ---------- */
.deu-certo{
  border-left:2px solid var(--verde);
  background:rgba(78,158,106,.07);
  border-radius:0 var(--raio-s) var(--raio-s) 0;
  padding:14px 18px; margin:18px 0 0;
}
.deu-certo__rotulo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#7FC497; margin:0 0 6px;
}
.deu-certo p{ margin:0; font-size:15px; line-height:1.6; color:var(--texto-2); }
.deu-certo p + p{ margin-top:.5em; }

.deu-errado{
  border-left:2px solid var(--vermelho);
  background:rgba(181,84,74,.07);
  border-radius:0 var(--raio-s) var(--raio-s) 0;
  padding:14px 18px; margin:14px 0 0;
}
.deu-errado__rotulo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#D98B82; margin:0 0 6px;
}
.deu-errado p{ margin:0; font-size:15px; line-height:1.6; color:var(--texto-2); }
.deu-errado p + p{ margin-top:.5em; }

/* ---------- indice do manual ---------- */
.indice{ display:grid; gap:18px; margin:30px 0 0; }
@media (min-width:860px){ .indice{ grid-template-columns:repeat(3,1fr); } }
.indice__parte{
  border:1px solid var(--linha); border-radius:var(--raio); padding:22px 22px 18px;
  background:var(--preto-2);
}
.indice__parte p{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ouro); margin:0 0 12px; }
.indice__parte ol{ margin:0; padding:0; list-style:none; display:grid; gap:4px; counter-reset:item; }
.indice__parte a{ display:flex; gap:10px; align-items:baseline; min-height:44px; color:var(--texto-2); font-size:15px; line-height:1.4; padding:8px 0; }
.indice__parte a:hover{ color:var(--papel); }
.indice__parte a span{ font-family:var(--mono); font-size:12px; color:var(--texto-3); flex:none; }

.parte-rotulo{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--texto-3); margin:0 0 6px;
}

/* ---------- tabela de comandos ----------
   Tabela de verdade no desktop, lista empilhada no celular. Tabela de
   duas colunas espremida em 340px vira coluna de uma palavra por linha. */
.comandos{ width:100%; border-collapse:collapse; margin:18px 0 0; font-size:15px; }
.comandos th{
  text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texto-3); font-weight:500;
  padding:0 12px 10px 0; border-bottom:1px solid var(--linha-forte);
}
.comandos td{ padding:12px 12px 12px 0; border-bottom:1px solid var(--linha); vertical-align:top; color:var(--texto-2); line-height:1.55; }
.comandos td:first-child{ white-space:nowrap; }
.comandos code{ font-family:var(--mono); font-size:13px; color:var(--ouro-claro); }
@media (max-width:640px){
  .comandos thead{ display:none; }
  .comandos, .comandos tbody, .comandos tr, .comandos td{ display:block; width:100%; }
  .comandos tr{ border-bottom:1px solid var(--linha); padding:10px 0; }
  .comandos td{ border:0; padding:2px 0; white-space:normal; }
}

/* ---------- glossario ---------- */
.glossario{ display:grid; gap:1px; background:var(--linha); border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; margin:24px 0 0; }
@media (min-width:860px){ .glossario{ grid-template-columns:repeat(2,1fr); } }
.glossario div{ background:var(--preto-2); padding:18px 20px; }
.glossario dt{ font-family:var(--mono); font-size:13.5px; color:var(--ouro-claro); margin:0 0 4px; }
.glossario dd{ margin:0; font-size:15px; line-height:1.6; color:var(--texto-2); }

/* ---------- versao profissional (fecho de venda das iscas) ---------- */
.pro{
  border:1px solid var(--linha-forte); border-radius:var(--raio);
  background:
    radial-gradient(88% 120% at 86% 0%, rgba(201,162,75,.10), transparent 62%),
    linear-gradient(168deg,var(--preto-3),var(--preto-2));
  padding:clamp(26px,5vw,48px);
  box-shadow:var(--luz-borda-alta), var(--sombra-painel);
}
.pro h2{ font-size:clamp(27px,4.6vw,42px); letter-spacing:-.02em; max-width:20ch; }
.pro h2 em{ font-style:italic; color:var(--ouro-claro); }
.pro p{ color:var(--texto-2); font-size:16px; line-height:1.7; max-width:60ch; margin:0 0 1em; }
.pro ul{ margin:6px 0 24px; padding:0; list-style:none; display:grid; gap:9px; }
.pro li{ font-size:15.4px; line-height:1.55; color:var(--texto-2); padding-left:20px; position:relative; }
.pro li::before{ content:""; position:absolute; left:0; top:.72em; width:10px; height:1px; background:var(--ouro); }
.pro li b{ color:var(--texto); font-weight:600; }
.pro__botoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.pro__nota{ font-size:13.6px; color:var(--texto-3); margin:18px 0 0; }
.pro__nota a{ color:var(--ouro); }

/* Botao de largura cheia no celular: alvo grande e sem botao pela metade. */
@media (max-width:560px){
  .pro__botoes .btn, .isca-cta .btn{ width:100%; justify-content:center; }
  .btn--grande{ padding:18px 22px; }
}

/* ---------- link de volta ao topo do manual ---------- */
.subir{ display:inline-flex; margin:22px 0 0; font-size:14px; color:var(--texto-3); min-height:44px; align-items:center; }
.subir:hover{ color:var(--ouro); }

/* Ancora de secao nao pode parar embaixo do topo pegajoso. */
.ancora{ scroll-margin-top:84px; }

/* Lista dentro de um passo (requisitos, onde fica cada arquivo). */
.lista{ margin:0 0 1.1em; padding-left:1.15em; color:var(--texto-2); font-size:15.6px; line-height:1.62; }
.lista li{ margin:0 0 .4em; }
.lista b{ color:var(--texto); font-weight:600; }
.lista code, .passo-isca code, .repara code, .deu-certo code, .deu-errado code, .cmd__nota code{
  font-family:var(--mono); font-size:.86em;
  background:var(--preto-3); border:1px solid var(--linha);
  border-radius:6px; padding:1px 6px; color:var(--ouro-claro);
  overflow-wrap:anywhere;
}
.passo-isca a:not(.btn), .cmd__nota a{ color:var(--ouro); text-decoration:underline; text-underline-offset:3px; }

/* Item de grade tem min-width:auto e cresce ate o tamanho do comando mais
   longo. Sem isto, um <pre> sem quebra empurra a pagina inteira pro lado
   no celular, em vez de rolar dentro da propria caixa. */
.passos > *, .passo-isca, .abas, .aba, .cmd{ min-width:0; max-width:100%; }