/* ============================================================================
   A AREA DE MEMBROS, NA IDENTIDADE DA MARCA.

   POR QUE ESTE ARQUIVO EXISTE

   Ate 08/09/2026 o brandbook parava na porta. A pagina de vendas carregava o marca.css e a
   area de membros nao. Medido: fundo #16213A contra #02031B, dourado #FFB800 que ela mandou
   matar la fora, Raleway e Montserrat no lugar de Sora e Manrope, e nenhuma linha da FAI em
   4.853 linhas de membros.html. A aluna atravessava a experiencia inteira da FAI, pagava,
   entrava, e caia num produto de outra marca.

   Palavras dela: "preciso mudar tudo dentro do site para o membro viver de fato essa
   experiencia em continuidade ao entrar."

   POR QUE NAO EDITAR O estilo.css DIRETO

   O estilo.css e carregado por 11 paginas, e tres delas sao o caminho do dinheiro:
   cadastro, oferta e obrigado. Mexer nele mexe no checkout. Entao a identidade entra por
   cima, na mesma ordem que ja funciona no index.html:

       estilo.css     a estrutura, compartilhada por 11 paginas, intocada
       marca.css      os tokens do brandbook, que viram as 361 chamadas de var() sozinhas
       dentro.css     este arquivo, so no membros.html

   O QUE SOBRA PARA ESTE ARQUIVO

   Trocar o token conserta 361 lugares de uma vez, mas nao alcanca cor escrita na mao. Medi
   no navegador, tela por tela, nas 23 abas, contando so cor solida (alfa acima de 0,5,
   porque veu de 4% nao e cor, e ruido de medicao): sobraram nove.
   ============================================================================ */


/* ---- 1. TEXTO DAS CAIXAS DE INSTRUCAO ------------------------------------
   77 elementos em cinza chapado #ddd. Cinza puro nao existe no brandbook: a paleta tem
   nove cores e o texto claro e sempre o off-white #F3ECDE. Em corpo de texto ele entra
   rebaixado, senao briga com o titulo. */
.instrucoes-passo { color: rgba(243, 236, 222, .82); }
.instrucoes-passo b { color: var(--cream); }


/* ---- 2. O AVISO DE CARD, QUE ERA DOURADO ---------------------------------
   #FFD48A sobre fundo ambar. E o mesmo dourado que ela mandou tirar da pagina de vendas em
   07/09, sobrevivendo aqui dentro em 56 lugares. O aviso e sempre um alerta (comeca com um
   sinal de atencao), entao a cor certa do brandbook e o Laranja Vibrante. */
.card-aviso {
  color: var(--amber);
  background: rgba(234, 85, 42, .11);
  border-color: rgba(234, 85, 42, .30);
}


/* ---- 3. A ETIQUETA DE CATEGORIA SOBRE A FOTO -----------------------------
   Vidro em #081A22, um quase-preto esverdeado que nao e da casa. O brandbook pede vidro
   sutil sobre o Azul Noite. Vale para a etiqueta e para o botao de play. */
.card-cat,
.card-play { background: rgba(2, 3, 27, .60); border-color: rgba(243, 236, 222, .18); }


/* ---- 4. OS DOIS CREMES ERRADOS DAS AULAS ---------------------------------
   #E7E2D9 no titulo da aula e #EFE9DF no titulo do modulo. Sao dois off-whites vizinhos do
   oficial, perto o bastante para ninguem notar e errados o bastante para a tela nunca
   assentar. Off-white e um so. */
.aulas-item-titulo,
.aulas-modulo-titulo { color: var(--cream); }


/* ---- 5. O AVISO GRANDE DO INDIQUE E GANHE --------------------------------
   Terra queimada #C1652E. Vira Laranja Ignea, que e a base oficial do gradiente. */
.aviso-destaque {
  background: linear-gradient(135deg, rgba(213, 65, 35, .18), rgba(213, 65, 35, .05));
  border-color: rgba(213, 65, 35, .5);
}


/* ---- 6. DOIS LARANJAS SOLTOS ---------------------------------------------
   O botao do aplicativo no contato estava em #FF6B00 e o foco da busca do minerador em um
   halo de #FF6A00. Ambos sao o laranja antigo, um tom abaixo do Laranja Pulso. */
.contato-link.app { background: var(--orange); }
.mn-busca:focus-within { box-shadow: 0 0 0 4px rgba(255, 106, 43, .14); }


/* ---- 7. O ESTADO DE FEITO ------------------------------------------------
   Aula concluida e prompt copiado eram verde #4ED18C. A paleta oficial do brandbook tem
   nove cores e nenhuma delas e verde:

       #02031B  #0A0C2D  #131843  #202868  #2D4FB8  #D54123  #EA552A  #FF6A2B  #F3ECDE

   O proprio manual reserva o Azul Eletrico #2D4FB8 para "estado, foco, item ativo, NUNCA
   botao de compra". Feito e exatamente um estado, entao e essa a cor.

   Ele entra como preenchimento, nao como texto: #2D4FB8 sobre o Azul Noite tem contraste
   baixo demais para palavra escrita, mas com o off-white por cima fica limpo e legivel. */
.copy-btn.done,
.copy-btn.blue.done {
  background: rgba(45, 79, 184, .22);
  border-color: rgba(45, 79, 184, .65);
  color: var(--cream);
}
.aulas-concluir.concluida {
  background: rgba(45, 79, 184, .18);
  border-color: rgba(45, 79, 184, .55);
  color: var(--cream);
}
.aulas-concluir.concluida .aulas-concluir-check,
.aulas-item.feita .aulas-item-check {
  background: #2D4FB8;
  border-color: #2D4FB8;
  color: var(--cream);
}

/* ---- 8. AS FONTES ---------------------------------------------------------
   O brandbook manda Sora para titulo e Manrope para corpo. O estilo.css, que serve 11
   paginas e nao pode ser tocado por causa do checkout, fixa 'Raleway' em 96 regras e
   'Montserrat' em 49. Trocar o token nao alcanca fonte escrita dentro da regra.

   Este bloco e GERADO pelo gerar-fontes.mjs a partir do proprio estilo.css: ele copia os
   mesmos seletores e so troca a familia. Ficaram de fora 35 regras cujos seletores nao
   existem no membros.html, que sao de outras paginas.

   Se o estilo.css mudar, rode o gerador de novo em vez de editar isto na mao.
   ------------------------------------------------------------------------- */

/* Raleway vira Sora, a fonte de display do brandbook (70 regras) */
.eyebrow,
.btn-primary,
.nav-logo,
.step-num,
.step h3,
.offer-price .now,
.faq-q,
.lock-box h1,
.members-hi,
.instrucoes-titulo,
.aviso-destaque .aviso-destaque-label,
.indique-secao-titulo,
.painel-comando-titulo,
.prompt-label,
.sidebar-grupo-titulo,
.tab,
.card-cat,
.card-nota,
.card-name,
.card-universal,
.copy-btn,
.toast,
.aulas-hero-badge,
.aulas-hero-titulo,
.aulas-hero-card h3,
.aulas-hero-dica p,
.aulas-convite-badge,
.aulas-convite-destaque,
.aulas-player-embreve span,
.aulas-eyebrow,
.aulas-player-info h2,
.aulas-concluir,
.aulas-progresso-num,
.aulas-progresso-txt span,
.aulas-modulo-num,
.aulas-modulo-titulo,
.aulas-modulo-progresso,
.outros-intro h2,
.prod-tag,
.prod-body h3,
.prod-btn,
.indique-badge,
.indique-titulo,
.indique-step-num,
.indique-step h3,
.indique-linkbox-label,
.indique-copiar-btn,
.indique-stat-label,
.indique-stat-valor,
.contato h2,
.contato-link,
.senha-box .label,
.senha-box .valor,
.form-field label,
.bottom-nav-item span,
.aviso-instalar-app-texto strong,
.aviso-instalar-app-btn,
.modal-app-caixa h3,
.modal-app-passo span,
.streak-contador,
.streak-bolinha,
.mn-buscar,
.mn-btn,
.mn-vazio-tit,
.mn-alta-tit,
.mn-aba,
.mn-mais,
.contador-n,
.atu-dia,
.atu-selo { font-family: var(--fonte-titulo); }

/* Montserrat vira Manrope, a fonte de corpo do brandbook (40 regras) */
body,
body,
.hero-sub,
.compra-toast .txt,
.busca-input-header,
.instrucoes-passo,
.aviso-destaque-texto,
.indique-lista-item p,
.subtab,
.filter,
.busca-input,
.prompt-info,
.card-aviso,
.form-recebedor input, .form-recebedor select,
.indique-linkbox-valor,
.indique-periodo-tab,
.form-field input, .form-field textarea,
.form-field textarea,
.mn-busca input,
.mn-ordem,
.mn-contagem,
.mn-tag,
.mn-vazio-txt,
.mn-aviso,
.mn-alta-data,
.mn-alta-termo,
.mn-aba-n,
.mn-salvo-em,
.mn-nome,
.mn-loja,
.mn-preco,
.mn-off,
.mn-vendas,
.mn-d-rot,
.mn-d-val,
.mn-garimpo,
.mn-garimpo-aviso,
.mn-fim,
.contador-txt,
.atu-item { font-family: var(--fonte-corpo); }


/* ---- 9. AS DUAS ULTIMAS SOBRAS -------------------------------------------
   Achadas medindo de novo depois das trocas acima. O texto das regras do indique estava no
   mesmo cinza #ddd das caixas de instrucao, e o link de reembolso no contato tinha um
   vermelho coral #D94F3D escrito na propria tag (esse foi corrigido no membros.html).

   Uma terceira leitura, um #DA5F35 na busca do minerador, era artefato meu: a borda tem
   transicao de 0,25s e eu medi no meio do caminho entre a linha e o laranja. Nao e cor. */
.indique-lista-item p { color: rgba(243, 236, 222, .82); }
.indique-lista-item p b { color: var(--cream); }


/* ============================================================================
   A PRIMEIRA TELA DE DENTRO

   Quem entra hoje ve a mesma tela de quem ja criou cem videos: boas-vindas e o que chegou
   por ultimo. O brandbook dela resolve isso em uma linha, na secao de onboarding:

       "Escolha seu caminho: aprender uma habilidade ou criar um resultado agora."

   E logo antes, na arquitetura da experiencia:

       "Dois caminhos, uma so experiencia.
        1. Quero aprender  2. Quero criar agora  3. Quero melhorar"

   Entao a primeira tela pergunta isso, em vez de despejar 23 portas.
   ============================================================================ */

/* ---- a FAI recebe --------------------------------------------------------- */
.dentro-hero {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 26px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 72%);
  border: 1px solid var(--line); border-radius: 22px;
  padding: 30px 32px; margin-bottom: 26px;
  position: relative; overflow: hidden;
}
/* a orbita do brandbook, discreta, atras da raposinha */
.dentro-hero::after {
  content: ""; position: absolute; right: -60px; top: 50%; width: 340px; height: 340px;
  transform: translateY(-50%); border-radius: 50%;
  border: 1px solid rgba(255, 106, 43, .16); pointer-events: none;
}
.dentro-eyebrow {
  display: inline-block; font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 10px;
}
.dentro-hero h2 {
  font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.1; color: var(--cream); margin: 0;
}
.dentro-hero h2 span { color: var(--orange); }
.dentro-fala {
  font-family: var(--fonte-titulo); font-weight: 600; font-style: italic;
  font-size: clamp(15px, 1.9vw, 18px); color: var(--amber);
  margin: 8px 0 12px; line-height: 1.35;
}
.dentro-hero-sub {
  font-size: 14.5px; line-height: 1.62; color: rgba(243, 236, 222, .82);
  max-width: 56ch; margin: 0;
}
.dentro-hero-sub b { color: var(--cream); font-weight: 700; }
.dentro-hero-fai { position: relative; z-index: 1; flex-shrink: 0; }
.dentro-hero-fai img { display: block; width: clamp(130px, 17vw, 190px); height: auto; }

/* ---- os tres caminhos ----------------------------------------------------- */
.dentro-secao {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 14px;
}
.dentro-caminhos { margin-bottom: 30px; }
.dentro-caminhos-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px;
}
.dentro-caminho {
  position: relative; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 22px 20px; color: inherit;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.dentro-caminho:hover {
  border-color: rgba(255, 106, 43, .55); transform: translateY(-2px);
  background: var(--surface2);
}
.dentro-caminho:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.dentro-caminho-num {
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; color: var(--amber);
}
.dentro-caminho h4 {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 18.5px;
  letter-spacing: -.01em; color: var(--cream); margin: 0; line-height: 1.2;
}
.dentro-caminho p {
  font-size: 13.5px; line-height: 1.58; color: rgba(243, 236, 222, .74); margin: 0;
}
.dentro-caminho-cta {
  margin-top: auto; padding-top: 6px;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px;
  color: var(--orange);
}
.dentro-caminho-cta::after { content: " \2192"; }

/* ---- o que chegou --------------------------------------------------------- */
.dentro-novo { margin-bottom: 8px; }

/* ---- celular -------------------------------------------------------------- */
@media (max-width: 760px) {
  .dentro-hero {
    grid-template-columns: 1fr; text-align: left;
    padding: 24px 22px; gap: 6px;
  }
  .dentro-hero::after { display: none; }
  .dentro-hero-fai { order: -1; }
  .dentro-hero-fai img { width: 108px; }
  .dentro-caminho { padding: 18px 18px 16px; }
}


/* ---- o conteiner da primeira tela ----------------------------------------
   O .instrucoes e o .grid da casa sao "max-width 1320px, centrado, 24px de lado, e 12px no
   celular". As secoes novas precisam do mesmo, senao o titulo de secao encosta na borda da
   tela enquanto os cartoes ficam recuados. Medido no celular a 375px: encostava. */
.dentro-inicio { max-width: 1368px; margin: 0 auto; padding: 16px 24px 0; }
.dentro-inicio .grid { max-width: none; padding-left: 0; padding-right: 0; padding-top: 0; }
@media (max-width: 760px) {
  .dentro-inicio { padding: 12px 12px 0; }
}


/* ---- tela vazia ------------------------------------------------------------
   Sete abas diziam "a Brenda vai subir os primeiros prompts em breve", o que quebra a regra
   do projeto de o texto de sistema falar como empresa e equipe. Agora quem aparece e a
   raposinha pensativa, que e o uso previsto no material de marca para tela vazia. */
.dentro-vazio {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 24px; text-align: left;
}
.dentro-vazio img { width: 74px; height: auto; flex-shrink: 0; margin-top: -4px; }
.dentro-vazio b {
  display: block; font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 16px; color: var(--cream); margin-bottom: 6px;
}
.dentro-vazio p {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(243, 236, 222, .78);
}
@media (max-width: 600px) {
  .dentro-vazio { flex-direction: column; gap: 10px; padding: 20px; }
  .dentro-vazio img { width: 60px; }
}

/* ---- 10. AS CORES EM VEU ---------------------------------------------------
   Meu primeiro varrimento so contou cor solida, com alfa acima de 0,5, para nao chamar de
   cor um veu de 4%. Foi um corte errado: veu tambem tinge. Medindo de novo com o corte
   baixado, apareceram oito bases fora da paleta, em 80 declaracoes do estilo.css:

       #F1E9DC   316 usos   off-white vizinho do oficial, na borda de todo card
       #6FA0D6   290 usos   azul claro antigo, no botao de copiar e nos numeros
       #1F5FFF    72 usos   fundo da caixa de instrucao, a caixa mais usada de dentro
       #2B7FFF    41 usos   borda da mesma caixa
       #FF4D00    24 usos   etiqueta dos agentes
       #C1652E     8 usos   icone do indique
       #FF5A1F     2 usos   modulo de aula
       #FFB800     2 usos   o dourado que ela mandou matar, vivo a 7% de opacidade

   Este bloco e GERADO a partir do proprio estilo.css: mesmos seletores, mesmas propriedades,
   mesma opacidade, so a base da cor troca. 55 regras aqui, 159 descartadas por serem de outra
   pagina. Se o estilo.css mudar, rode o gerador de novo.
   ------------------------------------------------------------------------- */

body { /* nunca cor sólida chapada — sempre um brilho quente baixíssimo vindo de um canto,
     como luz de estúdio entrando de lado,por cima do azul profundo de base. */
  background:
    radial-gradient(ellipse 1100px 700px at 12% -8%,rgba(255,106,43,0.05),transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 100%,rgba(34,49,99,0.5),transparent 65%),
    var(--bg); }
.btn-primary { box-shadow: 0 10px 30px -10px rgba(255,106,43,0.55); }
.btn-primary:hover { box-shadow: 0 14px 34px -10px rgba(255,106,43,0.65); }
.step { border: 1px solid rgba(243,236,222,0.08); }
.inside-card.mov .inside-tag { background: rgba(45,79,184,0.15); border: 1px solid rgba(45,79,184,0.3); }
.offer-list li:has(.ic.bonus) { background: rgba(45,79,184,0.08); }
.busca-input-header:focus { box-shadow: 0 0 0 4px rgba(255,106,43,.12); }
.instrucoes-box { background: rgba(45,79,184,0.08); border: 1px solid rgba(45,79,184,0.3); }
.aviso-destaque { background: linear-gradient(135deg,rgba(213,65,35,0.18),rgba(213,65,35,0.05)); border: 1px solid rgba(213,65,35,0.5); }
.aviso-destaque-icone { background: rgba(213,65,35,0.22); }
.indique-lista-icone { background: rgba(213,65,35,0.15); }
.painel-comando-caixa { background: rgba(45,79,184,0.08); border: 1px solid rgba(45,79,184,0.3); }
.prompt-label .num { border: 1px solid rgba(243,236,222,0.3); }
.prompt-label.video .num { border-color: rgba(45,79,184,0.45); }
.copy-btn.blue { background: rgba(45,79,184,0.045); border-color: rgba(45,79,184,0.22); }
.copy-btn.blue:hover { background: linear-gradient(180deg,rgba(45,79,184,0.2),rgba(45,79,184,0.06)); border-color: rgba(45,79,184,0.55); box-shadow: 0 8px 18px -8px rgba(45,79,184,0.5); }
.tab.active { background: linear-gradient(90deg,rgba(255,106,43,0.13),rgba(255,106,43,0.015)); }
.subtab.active { background: rgba(45,79,184,0.15); }
.filter.active { background: rgba(255,106,43,0.13); border-color: rgba(255,106,43,0.5); }
.card { border: 1px solid rgba(243,236,222,0.08); }
.card::after { background-image: repeating-linear-gradient(128deg,rgba(243,236,222,0.03) 0px,rgba(243,236,222,0.03) 1px,transparent 1px,transparent 7px); }
.card:hover { border-color: rgba(255,106,43,0.38); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,0 26px 46px -22px rgba(0,0,0,0.78),0 0 22px -6px rgba(255,106,43,0.22); }
.card-cat { border: 1px solid rgba(243,236,222,0.16); }
.card-play { border: 1px solid rgba(243,236,222,0.28); }
.card:hover .card-play { border-color: rgba(255,106,43,0.55); }
.card-aviso { background: rgba(234,85,42,0.12); border: 1px solid rgba(234,85,42,0.35); }
.copy-btn { background: rgba(243,236,222,0.045); border: 1px solid rgba(243,236,222,0.18); }
.copy-btn:hover { background: linear-gradient(180deg,rgba(255,106,43,0.16),rgba(255,106,43,0.05)); border-color: rgba(255,106,43,0.55); box-shadow: 0 8px 20px -8px rgba(255,106,43,0.5); }
.toast { box-shadow: 0 10px 30px rgba(45,79,184,0.4); }
.aulas-hero-badge { border: 1px solid rgba(243,236,222,0.2); background: rgba(243,236,222,0.04); }
.aulas-hero-card:hover { border-color: rgba(255,106,43,0.4); box-shadow: 0 20px 40px -24px rgba(255,106,43,0.25); }
.aulas-hero-card-ic { background: rgba(243,236,222,0.05); border: 1px solid rgba(243,236,222,0.2); }
.aulas-convite { background: linear-gradient(150deg,rgba(243,236,222,0.035),rgba(243,236,222,0.005)); border: 1px solid rgba(243,236,222,0.14); }
.aulas-player-box { border: 1px solid rgba(243,236,222,0.14); }
.aulas-concluir { background: rgba(243,236,222,0.04); border: 1px solid rgba(243,236,222,0.2); }
.aulas-concluir:hover { background: rgba(255,106,43,0.1); border-color: rgba(255,106,43,0.45); }
.aulas-concluir-check { border: 1.5px solid rgba(243,236,222,0.35); }
.aulas-progresso-barra div { box-shadow: 0 0 10px rgba(255,106,43,0.5); }
.aulas-modulo.aberto { border-color: rgba(255,106,43,0.3); background: rgba(255,106,43,0.03); }
.aulas-modulo-num { border: 1.5px solid rgba(243,236,222,0.25); }
.aulas-modulo.aberto .aulas-modulo-num { box-shadow: 0 0 12px -2px rgba(255,106,43,0.6); }
.aulas-item.active { background: linear-gradient(90deg,rgba(255,106,43,0.15),rgba(255,106,43,0.03)); }
.prod-tag { background: rgba(255,106,43,0.12); border: 1px solid rgba(255,106,43,0.3); }
.indique-badge { background: rgba(255,106,43,0.12); border: 1px solid rgba(255,106,43,0.35); }
.indique-step-ic { background: rgba(45,79,184,0.12); }
.indique-periodo-tab { background: rgba(243,236,222,0.04); border: 1px solid rgba(243,236,222,0.16); }
.indique-periodo-tab.active { background: rgba(255,106,43,0.13); border-color: rgba(255,106,43,0.5); }
.mn-busca:focus-within { box-shadow: 0 0 0 4px rgba(255,106,43,.12); }
.mn-tag-alta-com { background: rgba(234,85,42,.15); border-color: rgba(234,85,42,.42); }
.mn-tag-fogo { background: rgba(255,106,43,.15); border-color: rgba(255,106,43,.4); }
.mn-tag-tracao { background: rgba(45,79,184,.14); border-color: rgba(45,79,184,.36); }
.mn-alta-tit::before { box-shadow: 0 0 0 4px rgba(255,106,43,.16); }
.mn-dinheiro { background: rgba(234,85,42,.055); border: 1px solid rgba(234,85,42,.16); }
.mn-d-destaque { border-top: 1px solid rgba(234,85,42,.16); }
.contador-prompts { background: linear-gradient(150deg,rgba(255,106,43,0.10),rgba(234,85,42,0.05)); }


/* ---- 11. AS DUAS ULTIMAS, ACHADAS DEPOIS -----------------------------------
   O rotulo de grupo da barra lateral (ESTILOS DE VIDEO, POR NICHO, CONTA) estava em #6d7a86,
   um cinza azulado que nao e da paleta. Passou por dois varrimentos meus sem aparecer porque
   eu media so o #conteudo, e ele mora na lateral. Vira o cinza oficial.

   O dourado tambem estava escrito dentro de tags no membros.html, em seis lugares do indique,
   onde nenhum gerador que le CSS ia achar. Esses foram corrigidos no proprio HTML. */
.sidebar-grupo-titulo { color: var(--muted); }


/* ============================================================================
   A FAI COMO PROFESSORA DE DENTRO

   Pedido dela em 08/09/2026: "a jornada com a FAI e que ela guie o usuario o tempo todo, que
   ela explique cada topico, cada subtopico". E sobre o comportamento: "a pessoa pode fechar
   ela caso nao queira a ajuda, dai o icone dela fica ali disponivel mas que nao atrapalhe a
   usabilidade do usuario, mas pra quem nao sabe, ela vai explicando como se fosse uma
   professora mesmo".

   Entao: ela abre sozinha uma vez por topico, fechar e definitivo naquele topico, e o botao
   do canto continua ali para quem mudar de ideia.

   O manual da marca poe o limite do quanto ela pode aparecer: os arquetipos "nao devem virar
   personagem infantil, guru ou professor tradicional". Por isso ela explica e sai, em vez de
   ficar na tela.
   ============================================================================ */

/* ---- o cartao dela na barra lateral --------------------------------------- */
.fai-lateral {
  display: flex; align-items: center; gap: 11px; width: 100%;
  margin: 18px 0 10px; padding: 11px 12px;
  background: linear-gradient(135deg, rgba(255, 106, 43, .10), rgba(45, 79, 184, .10));
  border: 1px solid rgba(255, 106, 43, .30); border-radius: 14px;
  cursor: pointer; text-align: left; color: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.fai-lateral:hover { border-color: rgba(255, 106, 43, .62); }
.fai-lateral:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.fai-lateral img {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; object-position: center 12%;
  background: var(--surface2); border: 1px solid rgba(255, 106, 43, .45);
}
.fai-lateral-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fai-lateral-txt b {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; color: var(--cream);
}
.fai-lateral-txt i { font-style: normal; font-size: 11.5px; line-height: 1.3; color: var(--muted); }

/* ---- o botao do canto ------------------------------------------------------
   Fica acima do balao no empilhamento, abaixo de qualquer modal, e no celular sobe o
   suficiente para nao encostar na barra de navegacao de baixo. */
.fai-botao {
  position: fixed; z-index: 8900; right: 18px; bottom: 18px;
  width: 54px; height: 54px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 106, 43, .55);
  background: var(--surface2);
  cursor: pointer; overflow: visible;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  transition: transform .18s ease, border-color .18s ease;
}
.fai-botao img {
  width: 100%; height: 100%; border-radius: 50%; display: block;
  object-fit: cover; object-position: center 10%;
}
.fai-botao:hover { transform: translateY(-2px); border-color: var(--orange); }
.fai-botao:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.fai-botao.aberta { border-color: var(--orange); }

/* o aviso de "desliguei" mora no proprio botao: o toast da casa e fixo em "prompt copiado" */
.fai-botao-aviso {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none;
  padding: 9px 13px; border-radius: 12px;
  background: var(--surface2); border: 1px solid rgba(255, 106, 43, .4);
  font-family: var(--fonte-corpo); font-size: 12.5px; color: var(--cream);
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.fai-botao.avisando .fai-botao-aviso { opacity: 1; visibility: visible; }

/* ---- o balao ---------------------------------------------------------------
   Nasce no canto de baixo, do lado do botao, e nao no meio da tela: guia que toma a tela
   inteira interrompe, e ela nao deve interromper. */
#faiBalao {
  position: fixed; z-index: 8800;
  right: 18px; bottom: 84px; width: min(390px, calc(100vw - 36px));
  /* COLUNA, E COM TETO QUE APERTA DE VERDADE.
     Ela mandou print em 08/09/2026: a resposta veio longa e o texto escapou do balao,
     escorrendo por cima da pagina, com uma barra de rolagem solta no canto. O arranjo antigo
     era um flex que quebrava linha, e ali teto de altura nao aperta ninguem.
     O overflow hidden e o que garante que nada mais vaze, aconteca o que acontecer. */
  display: flex; flex-direction: column;
  max-height: min(78vh, 620px); overflow: hidden;
  padding: 18px 18px 18px 16px;
  background: linear-gradient(150deg, var(--surface2), var(--surface));
  border: 1px solid rgba(255, 106, 43, .38); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: faiEntra .24s ease-out;
}

/* o que rola: retrato, explicacao e conversa. O min-height zero e obrigatorio, senao um
   filho de flex se recusa a encolher abaixo do proprio conteudo e o overflow nunca acontece. */
.fai-balao-rolagem {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 4px;
}
.fai-balao-topo { display: flex; align-items: flex-start; gap: 13px; }

/* a barra de rolagem, discreta, dentro do balao */
.fai-balao-rolagem::-webkit-scrollbar { width: 8px; }
.fai-balao-rolagem::-webkit-scrollbar-track { background: transparent; }
.fai-balao-rolagem::-webkit-scrollbar-thumb {
  background: rgba(243, 236, 222, .18); border-radius: 100px;
}
.fai-balao-rolagem::-webkit-scrollbar-thumb:hover { background: rgba(255, 106, 43, .5); }
.fai-balao-rolagem { scrollbar-width: thin; scrollbar-color: rgba(243,236,222,.22) transparent; }
@keyframes faiEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fai-balao-retrato { width: 66px; height: auto; flex-shrink: 0; margin-top: -6px; }
.fai-balao-quem {
  display: block; font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 10.5px; letter-spacing: .18em; color: var(--orange); margin-bottom: 3px;
}
.fai-balao-txt h4 {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px;
  color: var(--cream); margin: 0 0 8px; line-height: 1.25;
}
.fai-balao-txt p {
  font-size: 13.5px; line-height: 1.6; color: rgba(243, 236, 222, .86); margin: 0 0 8px;
}
.fai-balao-txt p:last-of-type { margin-bottom: 0; }
.fai-balao-txt b { color: var(--cream); font-weight: 700; }
.fai-balao-nota {
  padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .09);
  color: var(--muted) !important; font-size: 12.5px !important;
}
.fai-balao-desligar {
  margin-top: 12px; padding: 0; border: none; background: none;
  color: var(--muted); font-family: var(--fonte-corpo); font-size: 12px;
  text-decoration: underline; cursor: pointer;
}
.fai-balao-desligar:hover { color: var(--cream); }
.fai-balao-x {
  position: absolute; right: 8px; top: 6px;
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.fai-balao-x:hover { color: var(--cream); }

@media (max-width: 760px) {
  /* acima da barra de navegacao da casa, que ocupa a largura toda embaixo */
  .fai-botao { right: 14px; bottom: 74px; width: 48px; height: 48px; }
  /* teto menor no celular. Com o teto do computador, o balao ocupava 620 de 812 pixels e
     virava tela cheia, e a regra dela e "que nao atrapalhe a usabilidade do usuario".
     Com 58vh a pagina continua aparecendo atras, e a conversa rola por dentro. */
  #faiBalao { left: 10px; right: 10px; bottom: 132px; width: auto; max-height: 58vh; }
  .fai-balao-retrato { width: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  #faiBalao { animation: none; }
  .fai-botao { transition: none; }
}


/* ---- a conversa com a FAI --------------------------------------------------
   Palavras dela: "o intuito e fazer com que tenha o chat da FAI para evitar ao MAXIMO que o
   usuario busque perguntar alguma coisa no whatsapp. WHATSAPP E PRA ULTIMO CASO."

   O balao cresce para caber a conversa, mas nunca vira janela: teto de altura e rolagem so
   dentro da area das falas. Guia que toma a tela inteira interrompe. */
#faiBalao .fai-balao-txt { flex: 1 1 auto; min-width: 0; }

.fai-conversa {
  width: 100%;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px;
}
.fai-conversa:empty { display: none; }
.fai-fala {
  max-width: 88%; padding: 10px 13px; border-radius: 14px;
  font-family: var(--fonte-corpo); font-size: 13px; line-height: 1.55;
}
.fai-fala-voce {
  align-self: flex-end; background: rgba(45, 79, 184, .28);
  border: 1px solid rgba(45, 79, 184, .5); color: var(--cream);
  border-bottom-right-radius: 5px;
}
.fai-fala-fai {
  align-self: flex-start; background: rgba(243, 236, 222, .06);
  border: 1px solid rgba(243, 236, 222, .13); color: rgba(243, 236, 222, .92);
  border-bottom-left-radius: 5px;
}

/* os tres pontinhos de "estou pensando" */
.fai-pensando { display: inline-flex; gap: 4px; align-items: center; height: 12px; }
.fai-pensando span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
  animation: faiPulsa 1s infinite ease-in-out;
}
.fai-pensando span:nth-child(2) { animation-delay: .16s; }
.fai-pensando span:nth-child(3) { animation-delay: .32s; }
@keyframes faiPulsa { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* card citado vira clique: a resposta deixa de ser texto e vira caminho */
.fai-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fai-atalho {
  padding: 6px 11px; border-radius: 100px; cursor: pointer;
  background: rgba(255, 106, 43, .12); border: 1px solid rgba(255, 106, 43, .38);
  color: var(--cream); font-family: var(--fonte-corpo); font-size: 11.5px; line-height: 1.3;
  text-align: left;
}
.fai-atalho:hover { background: rgba(255, 106, 43, .24); border-color: var(--orange); }
.fai-atalho-wpp { background: rgba(45, 79, 184, .18); border-color: rgba(45, 79, 184, .5); }

/* A PERGUNTA DO FIM DO TOPICO (15/09/2026). E fala da FAI como as outras, com um fio laranja
   na borda so para o olho entender que ali e a vez da pessoa responder. */
.fai-fala-pergunta { border-color: rgba(255, 106, 43, .34); }

/* "isso ajudou? sim · nao" (15/09/2026). Tem que caber embaixo de toda resposta sem virar
   parte dela: letra menor que a da fala, cor apagada, e botao que parece palavra. */
.fai-avaliar {
  display: block; margin-top: 8px;
  font-family: var(--fonte-corpo); font-size: 11.5px; line-height: 1.4; color: var(--muted);
}
.fai-avaliar button {
  padding: 2px 1px; border: none; background: none; cursor: pointer;
  color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.fai-avaliar button:hover { color: var(--cream); }
.fai-avaliar button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

/* preso embaixo, fora da area que rola: quem quer perguntar de novo nao precisa procurar */
.fai-perguntar {
  flex: 0 0 auto; width: 100%;
  display: flex; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .09);
}
.fai-perguntar input {
  flex: 1; min-width: 0; padding: 10px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16);
  color: var(--cream); font-family: var(--fonte-corpo); font-size: 13px;
}
.fai-perguntar input::placeholder { color: var(--muted); }
.fai-perguntar input:focus {
  outline: none; border-color: rgba(255, 106, 43, .6);
  box-shadow: 0 0 0 3px rgba(255, 106, 43, .14);
}
.fai-perguntar button {
  flex-shrink: 0; width: 40px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(90deg, #FA480D, #C62A08); border: none;
  color: #fff; font-size: 17px; line-height: 1;
}
.fai-perguntar button:hover { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .fai-pensando span { animation: none; opacity: .6; }
}


/* O CARD REPAGINADO FOI RETIRADO EM 09/09/2026.
   Ele quebrou: as pastilhas escaparam para fora do card, o aviso subiu para o lado do nome
   e os botoes ficaram cortados na borda direita. Ela mandou o print de manha.
   A causa foi o display:contents no .prompt-bloco somado a flex:0 0 auto nas pastilhas:
   pastilha que nao encolhe, dentro de fileira que quebra linha, transborda em vez de quebrar.
   Nao vou remendar, porque a decisao dela foi refazer a area de membros do zero. */

/* ============================================================================
   A TELA QUE INFORMA, E AS BORDAS QUE ENTRAM NA PALETA

   Quatro coisas que eu medi no navegador antes de mexer, todas pequenas e todas do tipo que
   o olho sente sem saber nomear:

     o cabecalho tem 89px e a lateral comeca em 69px .... 20px da lista escondidos atras dele
     a caixa de filtros existe no HTML e esta vazia ...... 32px de nada empurrando a grade
     as subabas alinham em 16px e a grade em 24px ........ 8px de desencontro na mesma coluna
     o fundo do cabecalho e rgba(10,10,10,.9) ............ preto que nao e nenhuma das nove
   ============================================================================ */

/* ---- as bordas entram na paleta ------------------------------------------- */
.members-header { background: rgba(2, 3, 27, .88); }
.bottom-nav { background: rgba(2, 3, 27, .95); }
/* a barra de baixo dizia "voce esta aqui" num laranja e a lateral em outro. Passa a ser um. */
.bottom-nav-item.active { color: var(--orange); }

/* ---- a lateral para de escorregar atras do cabecalho ---------------------- */
@media (min-width: 901px) {
  .members-sidebar { top: 89px; height: calc(100vh - 89px); }
}

/* ---- a caixa de filtros vazia para de ocupar lugar ------------------------ */
#filters:empty { display: none; padding: 0; margin: 0; }

/* ---- subabas e grade na mesma regua --------------------------------------- */
.subtabs { padding-left: 24px; padding-right: 24px; justify-content: flex-start; }
.subtabs .subtabs { padding-left: 0 !important; padding-right: 0 !important; }
.subtabs:empty { display: none; padding: 0; }

/* o cinza #ccc do estilo.css nao e nenhuma das nove, e o item ativo pintava o TEXTO de
   Azul Eletrico, que sobre fundo escuro quase some. Agora o azul e o fundo. */
.subtab { color: rgba(243, 236, 222, .78); background: rgba(19, 24, 67, .7); border-color: rgba(32, 40, 104, .9); }
.subtab.active { color: var(--cream); background: rgba(45, 79, 184, .24); border-color: rgba(45, 79, 184, .7); }

/* ---- o numero de cards, contado na hora ----------------------------------- */
.tab[data-n]::after {
  content: attr(data-n);
  margin-left: auto; flex-shrink: 0;
  font-family: var(--fonte-corpo); font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(243, 236, 222, .5);
  background: rgba(32, 40, 104, .55);
  border: 1px solid rgba(32, 40, 104, .95);
  border-radius: 999px; padding: 2px 7px;
}
.tab.active[data-n]::after {
  color: var(--cream);
  background: rgba(45, 79, 184, .3); border-color: rgba(45, 79, 184, .75);
}
.subtab[data-n]::after {
  content: attr(data-n); margin-left: 7px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: rgba(243, 236, 222, .42);
}
.subtab.active[data-n]::after { color: var(--cream); }


/* ---- os prompts a mais do painel (15/09/2026) ------------------------------
   O rotulo e escrito pela equipe na consulta e pode ser comprido. Dentro da fileira flex do
   rotulo, texto sem permissao de encolher empurra a bolinha e escapa do card no celular. */
.prompt-rotulo { min-width: 0; overflow-wrap: anywhere; }

/* Botao de copiar seguido de bloco de prompt: o movimento e o cenario tem o botao solto, sem
   bloco em volta, e o prompt a mais que vem do painel encostava nele sem respiro nenhum. */
.copy-btn + .prompt-bloco { margin-top: 12px; }

/* Nome, nota e aviso do card tambem chegam do painel agora (revisao de 15/09/2026), e quem
   escreve pode colar um link ou uma palavra sem espaco. O card tem overflow escondido, entao
   nada empurra a pagina para o lado: o texto simplesmente era cortado na borda. Medido a
   375px: um aviso com link do TikTok ocupava 420px numa caixa de 143px. Palavra que cabe
   continua quebrando nos espacos, entao nenhum card de hoje muda. */
.card-name,
.card-nota,
.card-aviso { overflow-wrap: anywhere; word-break: break-word; }


/* ---- a busca em toda aba, e a logo que nao some (16/09/2026) ----------------
   Ate hoje a busca do topo ficava escondida em 11 das 24 telas, e ela pediu que existisse em
   todas. Com ela sempre presente, a faixa de 901 a 1100px ficou sem espaco: medido a 910px,
   os atalhos da direita somam 624px, a busca tem 190px fixos, e quem cedia era a logo, que
   encolhia ate 3px e sumia. Isso ja acontecia nas abas de cards; agora aconteceria em todas.

   Nessa faixa a logo fica com tamanho proprio e nao encolhe, o botao de idioma mostra so o
   globo (o mesmo que o celular ja faz, e o nome do idioma continua no aria-label), os
   atalhos apertam um pouco, e a busca ocupa o que sobra. Abaixo de 901px o cabecalho ja e
   outro (menu em gaveta), e acima de 1100px tudo cabe como sempre coube. */
@media (min-width: 901px) and (max-width: 1100px) {
  .members-header .nav-logo { flex-shrink: 0; width: 132px; height: 44px; }
  .members-header .idioma-btn { padding: 9px 11px; }
  .members-header .idioma-btn .ic-rotulo { display: none; }
  .members-header-right { gap: 12px; }
  .members-hi { font-size: 13.5px; }
  .busca-input-header { flex: 1 1 auto; width: auto; min-width: 0; max-width: 300px; }
}


/* ---- OS EXTRAS NA ABA OUTROS PRODUTOS (08/10/2026) -------------------------
   Os dois cartoes novos usam o mesmo .prod-card dos tres de sempre. As fotos sao cenas de video
   em pe (9:16) e a moldura e 16:9: ancorar o corte no meio-alto mostra o produto e o rosto em
   vez do teto da loja. O preco e uma <div> (e nao <p>) para nao entrar na regra ".prod-body p",
   que estica o texto para empurrar o botao para baixo. */
.prod-media-extra img { object-position: 50% 40%; }
.prod-preco { margin: 0 0 12px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 20px; color: var(--cream); }
.prod-preco span { font-family: var(--fonte-corpo); font-weight: 600; font-size: 13px; color: rgba(243, 236, 222, .7); }
.prod-preco-tem { font-size: 14px; font-weight: 700; color: rgba(243, 236, 222, .86); }
/* botao de verdade com a cara do link .prod-btn */
button.prod-btn { width: 100%; border: 0; cursor: pointer; }
/* "abre em breve" e "um instante": ocupam o lugar do botao, sem parecer clicaveis */
.prod-btn-espera { background: rgba(243, 236, 222, .08); color: rgba(243, 236, 222, .82); border: 1.5px dashed rgba(243, 236, 222, .3); cursor: default; }
.prod-btn-espera:hover { opacity: 1; }
button.prod-btn:focus-visible, a.prod-btn:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

/* === MODAL DE COMPRA DOS EXTRAS (inicio) ===
   COPIA IDENTICA em meus-extras.css e dentro.css (08/10/2026); o teste
   docs/ferramentas/testes-extras-entrada.mjs confere que as duas ficam iguais. So usa tokens
   que os dois lugares ja tem (marca.css) e valores literais da paleta, porque o modal mora no
   <body>, fora de qualquer pagina com variaveis proprias.

   O iframe da /extras entra aqui dentro: o fundo da caixa e o Azul Profundo (#0A0C2D) para a
   pagina embutida e a casca parecerem uma peca so, e o iframe nasce transparente ate carregar. */
.exm-travado { overflow: hidden !important; scrollbar-gutter: stable; }
.exm-fundo {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(2, 3, 27, .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.exm-caixa {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 520px; max-height: 90vh; max-height: 90dvh;
  background: #0A0C2D; color: #F3ECDE;
  border: 1px solid #202868; border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  overflow: hidden; outline: none;
}
.exm-cabeca {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 20px; border-bottom: 1px solid rgba(243, 236, 222, .1);
}
.exm-titulo {
  margin: 0; min-width: 0; font-family: var(--fonte-titulo, 'Sora', system-ui, sans-serif) !important;
  font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: #F3ECDE;
  overflow-wrap: anywhere;
}
/* alvo de toque de 44px; o foco precisa aparecer em fundo escuro */
.exm-x {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto;
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: #F3ECDE; font-size: 18px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.exm-x:hover { background: rgba(243, 236, 222, .1); }
.exm-x:focus-visible { outline: 3px solid #F3ECDE; outline-offset: 1px; }
.exm-quadro { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.exm-carregando {
  position: absolute; inset: 0; z-index: 0; margin: 0; padding: 40px 24px; text-align: center;
  font-size: 14.5px; line-height: 1.55; color: rgba(243, 236, 222, .82);
}
.exm-carregando a { color: #FF6A2B; text-decoration: underline; text-underline-offset: 2px; }
.exm-iframe { position: relative; z-index: 1; flex: 0 0 auto; display: block; width: 100%; height: 420px; border: 0; background: transparent; opacity: 0; }
.exm-iframe.exm-pronto { opacity: 1; }

/* o estado "Liberado" */
.exm-liberado { padding: 34px 24px 28px; text-align: center; display: flex; flex-direction: column; gap: 12px; margin: auto 0; }
.exm-selo {
  margin: 0; font-family: var(--fonte-titulo, 'Sora', system-ui, sans-serif) !important;
  font-weight: 800; font-size: 28px; line-height: 1.15; color: #F3ECDE;
}
.exm-liberado-txt { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: rgba(243, 236, 222, .86); }
.exm-bt {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 13px 22px; border: 0; border-radius: 100px; width: 100%;
  background: linear-gradient(90deg, #D54123, #C62A08); color: #fff;
  font-family: var(--fonte-titulo, 'Sora', system-ui, sans-serif) !important;
  font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 12px 30px rgba(213, 65, 35, .34), inset 0 1px 0 rgba(255, 255, 255, .18);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.exm-bt:focus-visible { outline: 3px solid #F3ECDE; outline-offset: 3px; }
.exm-bt-leve { min-height: 48px; background: rgba(2, 3, 27, .4); color: #F3ECDE; border: 1.5px solid rgba(243, 236, 222, .32); box-shadow: none; text-transform: none; font-size: 14px; font-weight: 700; }

/* celular: tela cheia, respeitando o recorte (notch) e a barra de baixo */
@media (max-width: 600px) {
  .exm-fundo { padding: 0; align-items: stretch; background: #0A0C2D; }
  .exm-caixa { max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .exm-cabeca {
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(6px + env(safe-area-inset-right, 0px));
  }
  .exm-quadro { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .exm-iframe { flex: 1 1 auto; height: auto !important; min-height: 0; }
  .exm-liberado { padding-left: calc(24px + env(safe-area-inset-left, 0px)); padding-right: calc(24px + env(safe-area-inset-right, 0px)); }
}

/* movimento so para quem nao pediu para reduzir */
@media (prefers-reduced-motion: no-preference) {
  .exm-fundo { animation: exm-fundo-entra .18s ease-out; }
  .exm-caixa { animation: exm-caixa-entra .26s cubic-bezier(.16, 1, .3, 1); }
  .exm-iframe { transition: opacity .18s ease-out; }
}
@keyframes exm-fundo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes exm-caixa-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
/* === MODAL DE COMPRA DOS EXTRAS (fim) === */

/* 20/10/2026: linha miuda do minerador com a taxa maxima (comprador novo) e o aviso da estimativa */
.mn-d-ate { font-size: 12px; line-height: 1.4; opacity: .72; margin-top: 6px; }

/* 27/10/2026: o material da aula para baixar (os slides de uma aula ao vivo), no mesmo desenho
   do botao de baixar das paginas de tutoriais, para quem ja viu um reconhecer o outro */
.aulas-material { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; max-width: 520px; }
.aulas-material-baixar {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 8px 8px 12px;
  text-decoration: none; color: var(--cream); -webkit-tap-highlight-color: transparent;
  background: rgba(243, 236, 222, .05); border: 1px solid rgba(243, 236, 222, .2); border-radius: 14px;
  transition: background .18s, border-color .18s, transform .12s;
}
.aulas-material-baixar:hover { background: rgba(243, 236, 222, .09); border-color: rgba(255, 106, 43, .34); }
.aulas-material-baixar:active { transform: scale(.985); }
.aulas-material-baixar:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.aulas-material-ic { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 106, 43, .09); color: var(--orange); }
.aulas-material-ic svg { width: 20px; height: 20px; }
.aulas-material-rotulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aulas-material-rotulo small {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(243, 236, 222, .6); line-height: 1.3;
}
.aulas-material-rotulo b { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--cream); overflow-wrap: anywhere; }
.aulas-material-acao {
  flex-shrink: 0;
  background: linear-gradient(90deg, #FA480D, #C62A08); color: #fff;
  border-radius: 100px; padding: 10px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1;
}