/* Página de gatilho · sistema visual da home do brunoenrike.com.br
   Tokens tirados de /assets/css/style.css, para a página ser a mesma coisa que
   a home e não uma prima dela.
   ⚠️ A home usa #FF4000 e o arquivo de marca diz #FF3B00. Divergência real,
   reportada em 05/09/2026. Aqui manda a home, que foi o pedido.
   ⚠️ MOBILE PRIMEIRO: o estilo base é o do telefone, e a tela grande vem
   depois por min-width. Escrever ao contrário produz página que "também
   funciona" no celular em vez de página feita para ele. */
:root{
  --canvas:#DEDEDE; --papel:#FBFBFB; --tinta:#040404;
  --fraco:#6E6E6E; --apagado:#8A8A8A;
  --laranja:#FF4000; --brilho:rgba(255,64,0,.45);
  --card:22px; --gigante:28px;
  --fonte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* 16px no telefone: abaixo disso o iOS dá zoom sozinho ao focar campo */
body{background:var(--papel);color:var(--tinta);font-family:var(--fonte);
  line-height:1.55;-webkit-font-smoothing:antialiased;font-size:16px}

.tela{padding:8px}
.canvas{background:var(--canvas);border-radius:var(--gigante);
  padding:18px 18px 40px;position:relative;overflow:hidden}

/* o feixe: núcleo quase branco com duas sombras, uma curta e forte e uma
   longa e fraca. Com uma sombra só vira risco, e não luz. */
.feixe{position:absolute;left:-8%;width:116%;height:3px;top:132px;
  background:#FFF3E6;box-shadow:0 0 14px 5px var(--brilho),0 0 52px 20px rgba(255,64,0,.18);
  transform:rotate(-1.4deg);pointer-events:none}

.topo{display:flex;justify-content:space-between;align-items:center;
  position:relative;z-index:2}
.marca{display:inline-flex;align-items:flex-start;gap:2px;font-weight:600;
  font-size:23px;letter-spacing:-.055em;line-height:1;text-decoration:none;color:var(--tinta)}
.marca sup{font-size:11px;font-weight:500;margin-top:3px;opacity:.6;letter-spacing:0}
.arroba{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fraco)}

.capa{position:relative;z-index:2;padding-top:76px}
.rotulo{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--laranja);font-weight:600;margin-bottom:14px}
h1{font-size:29px;font-weight:800;letter-spacing:-.032em;line-height:1.08;text-wrap:balance}
.linha{margin-top:16px;font-size:16px;color:#2B2B2B}

h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:36px 0 12px}
p{margin-bottom:12px;color:#2B2B2B}

.conteudo{position:relative;z-index:2}
.bloco{background:#0E0E10;border-radius:var(--card);border-left:5px solid var(--laranja);
  padding:20px 18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bloco pre{font-family:var(--mono);font-size:14px;line-height:1.62;color:#F2EFE7;
  white-space:pre-wrap;word-break:break-word}
.bloco i{font-style:normal;color:#FF7A4D;font-weight:600}
.copiar{margin-top:12px;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 20px;border:0;border-radius:9999px;
  background:var(--tinta);color:var(--papel);font:600 15px var(--fonte);cursor:pointer}
.copiar:hover{background:var(--laranja)}
.copiado{font-size:13px;color:#146B3A;margin-left:10px;display:none}

.oferta{position:relative;z-index:2;background:var(--papel);border-radius:var(--card);
  padding:22px 18px;margin-top:30px;box-shadow:0 14px 34px rgba(4,4,4,.08)}
.oferta h2{margin:0 0 4px;font-size:18px}
.oferta p{font-size:14px;color:var(--fraco);margin-bottom:16px}
form{display:grid;gap:10px}
input[type=email]{width:100%;border:1px solid rgba(4,4,4,.16);border-radius:9999px;
  padding:0 18px;min-height:48px;font:500 16px var(--fonte);background:#fff;color:var(--tinta)}
input[type=email]:focus{outline:none;border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(255,64,0,.16)}
button.enviar{width:100%;min-height:48px;border:0;border-radius:9999px;
  background:var(--tinta);color:var(--papel);font:600 16px var(--fonte);cursor:pointer}
button.enviar:hover{background:var(--laranja)}
button.enviar[disabled]{opacity:.55;cursor:progress}
.aviso{margin-top:12px;font-size:12.5px;color:var(--apagado)}
.recado{margin-top:12px;font-size:14.5px;font-weight:600;display:none}
.recado.ok{display:block;color:#146B3A}
.recado.erro{display:block;color:#A32014}

.direct{position:relative;z-index:2;margin-top:18px;font-size:13px;color:var(--fraco)}
.direct b{color:var(--tinta)}

footer{padding:22px 18px 36px;display:flex;justify-content:space-between;gap:12px;
  flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--apagado)}
footer a{color:var(--fraco);text-decoration:none}

@media (min-width:720px){
  .tela{padding:14px;max-width:1180px;margin:0 auto}
  .canvas{border-radius:44px;padding:26px 30px 64px}
  .feixe{top:196px;transform:rotate(-1.2deg)}
  .marca{font-size:26px} .marca sup{font-size:13px}
  .capa{padding-top:120px;max-width:760px}
  h1{font-size:52px;letter-spacing:-.035em}
  .linha{font-size:19px;max-width:620px}
  .bloco{max-width:760px} .bloco pre{font-size:15px}
  .conteudo{max-width:760px}
  .oferta{max-width:560px}
  form{grid-template-columns:1fr auto}
  button.enviar{width:auto;padding:0 28px}
}
/* Reduzir movimento não é desligar movimento: a página não some, só para de
   animar transição. */
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* Passos e dica, acrescentados em 06/09/2026 junto com o conserto do prompt.
   A pagina antes so mostrava o prompt, e prompt sem instrucao nao funciona. */
.passos{margin:0 0 26px;padding-left:22px;counter-reset:p}
.passos li{margin-bottom:10px;font-size:15.5px;color:#2B2B2B}
.passos li b{color:var(--tinta)}
.dica{margin-top:22px;background:var(--papel);border-radius:var(--card);
  border-left:5px solid var(--laranja);padding:18px 18px}
.dica b{display:block;font-size:14px;margin-bottom:5px;letter-spacing:-.01em}
.dica p{margin:0;font-size:14.5px;color:var(--fraco)}
@media (min-width:720px){ .passos,.dica{max-width:760px} }

/* Biblioteca de prompt, acrescentado em 07/09/2026 para a página MOTION.
   ⚠️ Ela tem 54 blocos. O que resolve isso no celular é índice fixo no alto e
   marca que abre e fecha, e não fonte menor. */
.indice{position:sticky;top:0;z-index:5;margin:0 -18px 24px;padding:10px 18px;
  background:rgba(222,222,222,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(4,4,4,.10);display:flex;gap:8px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.indice::-webkit-scrollbar{display:none}
.indice a{flex:0 0 auto;text-decoration:none;font:600 13px var(--fonte);
  color:var(--tinta);background:var(--papel);border:1px solid rgba(4,4,4,.12);
  border-radius:9999px;padding:8px 14px;min-height:36px;display:inline-flex;
  align-items:center}
.indice a:hover{border-color:var(--laranja);color:var(--laranja)}

.marca-bloco{border-top:1px solid rgba(4,4,4,.12);margin-top:8px}
.marca-bloco>summary{cursor:pointer;list-style:none;padding:18px 0;
  display:flex;align-items:baseline;gap:10px;font:800 22px var(--fonte);
  letter-spacing:-.025em;color:var(--tinta)}
.marca-bloco>summary::-webkit-details-marker{display:none}
.marca-bloco>summary::after{content:'abrir';margin-left:auto;font:600 12px var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--fraco)}
.marca-bloco[open]>summary::after{content:'fechar'}
.marca-bloco>summary small{font:500 12px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fraco)}

.cena{padding:0 0 26px}
.cena h4{font:800 17px var(--fonte);letter-spacing:-.015em;margin:0 0 12px;
  color:var(--tinta)}
.par{display:grid;gap:14px}
.prompt-rotulo{font:600 11px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--laranja);margin-bottom:7px}
.copiar.deu-errado{background:#A32014}
.copiar .copiado{display:none;margin-left:9px;font-weight:500;font-size:13px;
  color:#8CE6AE}
@media (min-width:720px){
  .indice{margin:0 0 30px;border-radius:14px;border:1px solid rgba(4,4,4,.10)}
  .cena h4{font-size:19px}
}

/* Página de link da bio, 07/09/2026.
   ⚠️ Cartão é bloco inteiro clicável, e não título com link. No celular, alvo
   pequeno é o que faz a pessoa desistir. */
.cartao{display:block;text-decoration:none;position:relative;
  background:var(--papel);border-radius:var(--card);padding:16px 16px;
  border:1px solid rgba(4,4,4,.08);box-shadow:0 8px 22px rgba(4,4,4,.05)}
.cartao:hover{border-color:var(--laranja)}
.cartao-rotulo{display:block;font:600 10px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--laranja);margin-bottom:7px}
.cartao-titulo{display:block;font:800 16.5px var(--fonte);letter-spacing:-.02em;
  color:var(--tinta);line-height:1.2;margin-bottom:6px}
.cartao-linha{display:block;font:400 13.5px var(--fonte);color:var(--fraco);
  line-height:1.45}
.cartao.grande{margin-bottom:8px;border-left:5px solid var(--laranja)}
.cartao.grande .cartao-titulo{font-size:21px}
/* ⚠️ O selo fica por cima do rótulo no celular se o rótulo puder
   correr até a borda. O recuo é do tamanho do selo mais folga. */
.cartao.grande .cartao-rotulo{padding-right:118px}
.selo{position:absolute;top:14px;right:14px;font:600 10px var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--papel);
  background:var(--tinta);border-radius:9999px;padding:5px 10px}
.grade{display:grid;gap:10px;margin-bottom:26px}
.redes{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;
  margin-top:22px}
.redes a{text-decoration:none;font:600 13px var(--fonte);color:var(--tinta);
  background:var(--papel);border:1px solid rgba(4,4,4,.12);border-radius:9999px;
  padding:10px 16px;min-height:40px;display:inline-flex;align-items:center}
.redes a:hover{border-color:var(--laranja);color:var(--laranja)}
@media (min-width:720px){
  .grade{grid-template-columns:1fr 1fr;max-width:760px}
  .cartao.grande{max-width:760px}
  .redes{max-width:760px}
}

/* Cofre: o prompt aparece em prévia e abre com o cadastro. 07/09/2026.
   ⚠️ A prévia é de verdade, e não enfeite: as primeiras linhas ficam legíveis
   para a pessoa julgar se vale deixar o contato. Esconder tudo faz o visitante
   sair sem saber o que recusou. */
.bloco.cofre{position:relative;max-height:236px;overflow:hidden}
.bloco.cofre pre{user-select:none}
/* ⚠️ z-index é OBRIGATÓRIO aqui. A opacidade das marcas de trás cria
   contexto de empilhamento e as promove para a mesma camada da tampa;
   como elas vêm depois no HTML, pintavam POR CIMA dela. */
.tampa{position:absolute;left:0;right:0;bottom:0;top:34%;z-index:3;padding:18px 18px 20px;
  background:linear-gradient(180deg,rgba(14,14,16,0) 0%,rgba(14,14,16,.90) 44%,#0E0E10 100%);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:5px}
.tampa b{color:#F2EFE7;font-size:15px;letter-spacing:-.01em}
.tampa p{margin:0;color:#A8A5A0;font-size:13.5px;line-height:1.45}
.tampa .enviar{margin-top:8px;width:auto;padding:0 22px;min-height:44px;
  background:var(--laranja);color:#0E0E10;text-decoration:none;
  display:inline-flex;align-items:center;border-radius:9999px;
  font:700 15px var(--fonte)}

/* Cofre de trecho, usado na MOTION, que tem 54 prompts. Ali a primeira marca
   inteira fica aberta, com 18 prompts, e só as outras duas ficam atrás do
   cadastro. ⚠️ A tampa aqui é CLARA, porque cobre o fundo da página e não o
   bloco escuro de código. */
.trecho-cofre{position:relative;min-height:210px;overflow:hidden}
/* ⚠️ Painel SÓLIDO, e não véu em degradê. As marcas de trás ficam recolhidas
   em <details>, então a região mede uns 170px e não existe conteúdo para
   espiar: o degradê só deixava o título de trás aparecendo por baixo do texto
   da tampa, ilegível. Medido no navegador em 07/09/2026. */
.trecho-cofre>details{pointer-events:none;opacity:.35}
.tampa.clara{top:0;background:var(--canvas);justify-content:center;
  align-items:flex-start;gap:6px}
.tampa.clara b{color:var(--tinta);font-size:16px}
.tampa.clara p{color:var(--fraco)}

/* Aceite. ⚠️ Alvo de toque de 20px no mínimo, senão no celular ninguém marca. */
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:13px;
  color:var(--fraco);line-height:1.45;cursor:pointer;margin:2px 0}
.aceite input{margin-top:2px;width:20px;height:20px;flex:0 0 20px;
  accent-color:var(--laranja)}

/* ⚠️ Com três campos a grade de duas colunas quebra. Uma coluna em qualquer
   tela, e o botão ocupa a linha inteira. Vem depois da regra antiga de
   propósito, para vencer sem precisar de !important. */
@media (min-width:720px){
  form{grid-template-columns:1fr}
  button.enviar{width:100%;padding:0}
}

/* Ferramentas e perguntas, 07/09/2026. */
.ferramentas{margin:0 0 10px;padding-left:20px}
.ferramentas li{margin-bottom:9px;font-size:15px;color:#2B2B2B;line-height:1.5}
.ferramentas a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.ferramentas a:hover{color:var(--laranja)}
.pergunta{font:800 16px var(--fonte);letter-spacing:-.015em;margin:22px 0 6px;
  color:var(--tinta)}
@media (min-width:720px){ .ferramentas{max-width:760px} }

/* Conserto de 08/09/2026, mais o cartão da ferramenta. */

/* ⚠️ O telefone entra na MESMA regra do e-mail. Antes a regra citava só
   input[type=email] e o campo de WhatsApp aparecia sem estilo nenhum. */
input[type=tel]{width:100%;border:1px solid rgba(4,4,4,.16);border-radius:9999px;
  padding:0 18px;min-height:48px;font:500 16px var(--fonte);background:#fff;
  color:var(--tinta)}
input[type=tel]:focus{outline:none;border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(255,64,0,.16)}

/* ⚠️ Link dentro de aviso ficava no azul padrão do navegador. */
.aviso a{color:var(--fraco);text-decoration:underline;text-underline-offset:3px}
.aviso a:hover{color:var(--laranja)}

/* O cartão da ferramenta: UM botão, e não lista de link. */
.parceiro{position:relative;z-index:2;background:var(--tinta);
  border-radius:var(--card);padding:22px 20px 20px;margin-top:26px;
  box-shadow:0 16px 38px rgba(4,4,4,.16)}
.parceiro-rotulo{display:block;font:600 10.5px var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--laranja);margin-bottom:9px}
.parceiro h2{margin:0 0 6px;font-size:26px;letter-spacing:-.03em;
  color:var(--papel)}
.parceiro p{margin:0 0 18px;font-size:14.5px;line-height:1.5;color:#A8A5A0}
.parceiro .enviar{display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;border-radius:9999px;background:var(--laranja);
  color:#0E0E10;font:700 16px var(--fonte);text-decoration:none}
.parceiro .enviar:hover{filter:brightness(1.08)}
.parceiro .aviso{margin-top:12px;color:#7A7772;font-size:12.5px}

/* As perguntas viram bloco recolhido: elas existem para o motor de resposta, e
   não para competir com a chamada. Recolhido continua indexável. */
.duvidas{margin-top:26px;border-top:1px solid rgba(4,4,4,.12);padding-top:14px}
.duvidas>summary{cursor:pointer;list-style:none;font:600 14px var(--fonte);
  color:var(--fraco);display:flex;align-items:center;min-height:40px}
.duvidas>summary::-webkit-details-marker{display:none}
.duvidas>summary::after{content:'ver';margin-left:auto;font:600 11px var(--mono);
  letter-spacing:.12em;text-transform:uppercase}
.duvidas[open]>summary::after{content:'fechar'}
@media (min-width:720px){ .parceiro,.duvidas{max-width:760px} }

/* Página de perfil, 08/09/2026. */
.canvas.perfil{padding:0 0 40px;overflow:visible}

.hero{position:relative;height:340px;border-radius:var(--gigante);
  overflow:hidden;background:#0A0A0C}
.hero .retrato{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:grayscale(1) contrast(1.06)}
/* ⚠️ Enquanto a foto não chega, o herói é campo escuro com uma vinheta suave.
   Sem isso ele fica um retângulo preto chapado, que parece erro de carregamento. */
.hero .retrato.vazio{background:
  radial-gradient(120% 90% at 50% 0%,#1C1C22 0%,#0A0A0C 62%)}
.hero .feixe{top:auto;bottom:96px;left:-8%;width:116%}
.hero-topo{position:absolute;top:0;left:0;right:0;padding:18px;
  display:flex;justify-content:space-between;align-items:center;z-index:2}
.marca.clara{color:var(--papel)}
.arroba.clara{color:rgba(246,243,238,.66)}

.ficha{position:relative;z-index:3;margin:-84px 14px 0;background:#0E0E10;
  border-radius:var(--gigante);padding:22px 20px 20px;
  box-shadow:0 22px 50px rgba(4,4,4,.30)}
.ficha h1{font-size:44px;line-height:.95;letter-spacing:-.045em;font-weight:900;
  color:var(--papel);margin:0}
.ficha-arroba{margin-top:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#7A7772}
.ficha-linha{margin:12px 0 0;font-size:15px;line-height:1.5;color:#A8A5A0}
.numeros{display:flex;gap:22px;margin:18px 0 18px;flex-wrap:wrap}
.numeros b{display:block;font-size:24px;letter-spacing:-.03em;color:var(--papel);
  line-height:1}
.numeros span{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:#7A7772}
.enviar.principal{display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;border-radius:9999px;background:var(--laranja);
  color:#0E0E10;font:700 16px var(--fonte);text-decoration:none}
.enviar.principal:hover{filter:brightness(1.08)}

.pilulas{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:20px 18px 4px;scroll-margin-top:12px}
.pilulas::-webkit-scrollbar{display:none}
.pilulas a{flex:0 0 auto;text-decoration:none;font:600 13px var(--fonte);
  color:var(--tinta);background:var(--papel);border:1px solid rgba(4,4,4,.12);
  border-radius:9999px;padding:9px 15px;min-height:38px;display:inline-flex;
  align-items:center}
.pilulas a:hover{border-color:var(--laranja);color:var(--laranja)}

/* ⚠️ Carrossel horizontal com encaixe. No celular, cartão de 78% deixa o
   próximo aparecendo pela beirada, que é o que avisa que dá para arrastar. */
.carrossel{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 -18px 26px;padding:0 18px 6px}
.carrossel::-webkit-scrollbar{display:none}
.carrossel>.cartao{flex:0 0 78%;scroll-snap-align:start}

.redes-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.redes-grade a{text-decoration:none;background:var(--papel);
  border:1px solid rgba(4,4,4,.10);border-radius:var(--card);padding:14px 14px;
  display:block}
.redes-grade a:hover{border-color:var(--laranja)}
.redes-grade b{display:block;font-size:14.5px;color:var(--tinta);
  letter-spacing:-.01em}
.redes-grade span{display:block;margin-top:3px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;color:var(--fraco)}

.canvas.perfil .conteudo{padding:0 18px}
.canvas.perfil .oferta{margin:26px 18px 0}

@media (min-width:720px){
  .hero{height:440px}
  .ficha{margin:-110px auto 0;max-width:720px;padding:30px 30px 26px}
  .ficha h1{font-size:66px}
  .pilulas,.canvas.perfil .conteudo{max-width:756px;margin-left:auto;margin-right:auto}
  .carrossel>.cartao{flex:0 0 46%}
  .canvas.perfil .oferta{max-width:560px;margin-left:auto;margin-right:auto}
  .redes-grade{grid-template-columns:1fr 1fr 1fr}
}

/* Convite para o pack nas páginas de portão, 23/09/2026. */
.convite{margin:8px 0 0;padding:20px 20px 18px;border:1px solid rgba(4,4,4,.12);
  border-radius:var(--card,14px);background:var(--papel,#F6F3EE)}
.convite b{display:block;font-size:16px;letter-spacing:-.01em;color:var(--tinta,#040404)}
.convite p{margin:6px 0 14px;font-size:14.5px;line-height:1.5;color:var(--fraco,#6E6E6E)}
/* ⚠️ Estilo completo de propósito: a regra .enviar da página só vale dentro do
   formulário, e fora dele a âncora saía como link azul sublinhado. */
.convite .enviar{display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-width:160px;min-height:46px;padding:0 20px;border-radius:9999px;
  background:var(--laranja,#FF4000);color:#0E0E10;font:700 15px var(--fonte,inherit);
  text-decoration:none;letter-spacing:-.01em}
.convite .enviar:hover{filter:brightness(1.08)}