/* ============================================================
   FX STUDIOS | Acesso e Portal do aluno
   ============================================================ */

/* ---------------- tela de acesso ---------------- */
.acesso{
  min-height:100vh; min-height:100dvh;
  display:grid;
}
@media (min-width:960px){
  .acesso{ grid-template-columns:1fr 1fr; }
}

.acesso__lado{
  display:none;
  position:relative; overflow:hidden;
  background:linear-gradient(165deg,#141210,#0B0A08);
  border-right:1px solid var(--linha);
  padding:56px 48px;
  flex-direction:column; justify-content:space-between;
}
@media (min-width:960px){ .acesso__lado{ display:flex; } }
.acesso__lado::after{
  content:""; position:absolute; inset:auto -20% -30% -20%; height:70%;
  background:radial-gradient(50% 60% at 30% 100%, rgba(201,162,75,.16), transparent 68%);
  pointer-events:none;
}
.acesso__lado > *{ position:relative; z-index:1; }
.acesso__lado h2{ font-size:clamp(30px,3.4vw,44px); max-width:15ch; margin:0 0 20px; }
.acesso__lado p{ color:var(--texto-2); max-width:38ch; font-size:16.5px; }
.acesso__lado .lista{ margin:30px 0 0; padding:0; list-style:none; display:grid; gap:14px; }
.acesso__lado .lista li{ font-size:15.5px; color:var(--texto-2); padding-left:26px; position:relative; }
.acesso__lado .lista li svg{ position:absolute; left:0; top:.3em; color:var(--ouro); }

.acesso__forma{
  display:flex; flex-direction:column; justify-content:center;
  padding:40px 24px 56px;
}
.acesso__caixa{ width:100%; max-width:420px; margin:0 auto; }
.acesso__caixa > .marca{ margin-bottom:38px; }
.acesso__caixa h1{ font-size:clamp(28px,5vw,38px); margin-bottom:10px; }
.acesso__caixa .sub{ color:var(--texto-2); font-size:16px; margin-bottom:32px; }

.campo{ margin-bottom:18px; }
.campo label{
  display:block; font-size:13px; font-weight:500; color:var(--texto-2);
  margin-bottom:8px; letter-spacing:.01em;
}
.campo input{
  width:100%; padding:14px 16px;
  background:var(--preto-2);
  border:1px solid var(--linha);
  border-radius:var(--raio-s);
  color:var(--papel); font-size:16px;
  transition:border-color .16s ease, background .16s ease;
}
.campo input::placeholder{ color:var(--texto-3); }
.campo input:hover{ border-color:var(--linha-forte); }
.campo input:focus{ outline:none; border-color:var(--ouro); background:var(--preto-3); }
.campo input[aria-invalid="true"]{ border-color:var(--vermelho); }
.campo .dica{ font-size:12.5px; color:var(--texto-3); margin:7px 0 0; line-height:1.55; }
.campo .dica a{ color:var(--ouro-claro); text-decoration:underline; text-underline-offset:3px; }
.campo .dica a:hover{ color:var(--ouro); }
.campo .dica[hidden]{ display:none; }

.aviso{
  padding:13px 16px; border-radius:var(--raio-s);
  font-size:14.5px; line-height:1.5; margin-bottom:20px;
  border:1px solid;
}
.aviso--erro{ background:rgba(181,84,74,.1); border-color:rgba(181,84,74,.42); color:#E7A79F; }
.aviso--ok{ background:rgba(78,158,106,.1); border-color:rgba(78,158,106,.42); color:#9BD0AF; }
.aviso--nota{ background:var(--ouro-fundo); border-color:var(--linha-forte); color:var(--texto-2); }
.aviso[hidden]{ display:none; }

/* Alvos de toque de 44px: o padding faz o alvo, o texto continua do mesmo tamanho. */
.troca{ margin-top:18px; font-size:14.5px; color:var(--texto-2); text-align:center; }
.troca button{
  background:none; border:0; padding:12px 8px; cursor:pointer;
  min-height:44px;
  color:var(--ouro-claro); font-size:inherit; font-weight:500;
  text-decoration:underline; text-underline-offset:3px;
}
.troca button:hover{ color:var(--ouro); }

.voltar{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px;
  font-size:14px; color:var(--texto-3); margin-top:22px;
  transition:color .16s;
}
.voltar:hover{ color:var(--texto-2); }

.acesso__caixa > .marca,
.acesso__lado .marca{ min-height:44px; }

/* ---------------- carregando ---------------- */
/* display:inline-block e obrigatorio: em <span>, que e inline por padrao,
   width e height nao valem e o spinner nunca aparece. */
.girando{
  display:inline-block; vertical-align:middle;
  width:16px; height:16px; border-radius:50%; flex:none;
  border:2px solid rgba(0,0,0,.25); border-top-color:currentColor;
  animation:gira .7s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg); } }

/* ============================================================
   PORTAL
   ============================================================ */

.portal{
  display:grid;
  min-height:100vh; min-height:100dvh;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .portal{ grid-template-columns:264px 1fr; }
}

/* ---------------- barra lateral ---------------- */
.lateral{
  background:#0B0A08;
  border-right:1px solid var(--linha);
  display:flex; flex-direction:column;
  padding:22px 16px;
}
@media (min-width:900px){
  .lateral{ position:sticky; top:0; height:100vh; height:100dvh; }
}
@media (max-width:899px){
  .lateral{
    position:fixed; inset:0 auto 0 0; width:min(280px,84vw); z-index:70;
    transform:translateX(-101%); transition:transform .26s cubic-bezier(.2,.7,.3,1);
  }
  /* A sombra so existe quando a gaveta esta aberta. Na regra base ela pintava
     sobre o conteudo mesmo com o painel fora da tela. */
  .lateral.aberta{ transform:none; box-shadow:24px 0 60px rgba(0,0,0,.6); }
}

.lateral .marca{ padding:6px 10px 26px; }

.lateral nav{ display:grid; gap:3px; }
.lateral nav .grupo{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-3); padding:22px 12px 9px;
}
.aba{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left;
  padding:11px 12px; border-radius:9px;
  background:none; border:0; cursor:pointer;
  font-size:15px; color:var(--texto-2);
  transition:background .16s ease, color .16s ease;
}
.aba svg{ flex:none; opacity:.8; }
.aba:hover{ background:rgba(255,255,255,.045); color:var(--papel); }
.aba[aria-current="page"]{
  background:var(--ouro-fundo); color:var(--ouro-claro);
  box-shadow:inset 2px 0 0 var(--ouro);
}
.aba[aria-current="page"] svg{ opacity:1; }
.aba .selo{
  margin-left:auto; font-family:var(--mono); font-size:10.5px;
  background:rgba(201,162,75,.16); color:var(--ouro-claro);
  padding:2px 7px; border-radius:99px;
}

.lateral__base{ margin-top:auto; padding-top:22px; border-top:1px solid var(--linha); }
.lateral__usuario{ display:flex; align-items:center; gap:11px; padding:8px 12px 14px; }
.lateral__usuario .bolha{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--ouro-fundo); border:1px solid var(--linha-forte);
  color:var(--ouro-claro); font-weight:600; font-size:14px;
}
.lateral__usuario .quem{ min-width:0; flex:1 1 auto; }
/* display:block e obrigatorio aqui. Os dois sao <span>, e span e inline por
   padrao: em caixa inline, `text-overflow:ellipsis` simplesmente nao se aplica
   e `overflow:hidden` nao produz caixa para cortar. O e-mail longo era cortado
   seco na borda da barra, sem reticencia, e o aluno nao conseguia ler o proprio
   endereco de conta nem sabia que faltava pedaco. Mesma classe de defeito do
   spinner que nao girava: <span> com regra que so vale em caixa de bloco. */
.lateral__usuario .n,
.lateral__usuario .e{
  display:block; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lateral__usuario .n{ font-size:14px; color:var(--papel); }
.lateral__usuario .e{ font-size:12px; color:var(--texto-3); }

.cortina{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:65;
  opacity:0; pointer-events:none; transition:opacity .26s ease;
}
.cortina.visivel{ opacity:1; pointer-events:auto; }
@media (min-width:900px){ .cortina{ display:none; } }

/* ---------------- conteudo ---------------- */
.conteudo{ min-width:0; display:flex; flex-direction:column; }

.barra-portal{
  display:flex; align-items:center; gap:14px;
  padding:14px 20px; border-bottom:1px solid var(--linha);
  background:rgba(14,13,11,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:40;
}
.menu-botao{
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  border:1px solid var(--linha); border-radius:9px;
  background:none; cursor:pointer; color:var(--texto-2);
}
.menu-botao:hover{ color:var(--papel); border-color:var(--linha-forte); }
@media (min-width:900px){ .menu-botao{ display:none; } }
.barra-portal h1{
  font-family:var(--sans); font-size:16px; font-weight:600;
  margin:0; color:var(--papel); letter-spacing:-.01em;
}
.barra-portal .direita{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.painel{ padding:clamp(24px,4vw,44px) clamp(20px,4vw,44px) 72px; max-width:1000px; width:100%; }
.painel[hidden]{ display:none; }
.painel__cabeca{ margin-bottom:32px; }
.painel__cabeca h2{ font-size:clamp(26px,4vw,38px); margin-bottom:10px; }
.painel__cabeca p{ color:var(--texto-2); max-width:58ch; margin:0; }

/* ---------------- cursos ---------------- */
.curso{
  border:1px solid var(--linha-forte); border-radius:var(--raio);
  background:linear-gradient(168deg,#16130F,#100E0C);
  overflow:hidden; margin-bottom:22px;
}
.curso__topo{
  padding:28px 26px; border-bottom:1px solid var(--linha);
  display:grid; gap:22px;
}
@media (min-width:720px){ .curso__topo{ grid-template-columns:1fr auto; align-items:center; } }
.curso__topo h3{ font-size:clamp(22px,3vw,29px); margin-bottom:9px; }
.curso__topo p{ color:var(--texto-2); font-size:15.5px; max-width:48ch; margin:0 0 14px; }
.curso__meta{ display:flex; flex-wrap:wrap; gap:8px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--texto-3); text-transform:uppercase; }
.curso__acao{ display:flex; flex-direction:column; gap:9px; align-items:stretch; }
@media (min-width:720px){ .curso__acao{ min-width:220px; } }

.modulos{ display:grid; }
.modulo{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 26px; border-bottom:1px solid var(--linha);
  transition:background .16s ease;
}
.modulo:last-child{ border-bottom:0; }
.modulo:hover{ background:rgba(255,255,255,.018); }
.modulo .n{
  width:30px; height:30px; flex:none; border-radius:8px;
  display:grid; place-items:center;
  background:var(--ouro-fundo); border:1px solid var(--linha);
  font-family:var(--mono); font-size:12px; color:var(--ouro-claro);
}
.modulo h4{ font-family:var(--sans); font-size:16px; font-weight:600; margin:0 0 5px; color:var(--papel); }
.modulo p{ font-size:14.5px; color:var(--texto-2); margin:0; line-height:1.55; }
.modulo .dur{ font-family:var(--mono); font-size:10.5px; color:var(--texto-3); letter-spacing:.08em; text-transform:uppercase; margin-top:8px; display:block; }

/* ---------------- vazio ---------------- */
.vazio{
  border:1px dashed var(--linha-forte); border-radius:var(--raio);
  padding:clamp(34px,6vw,64px) 28px; text-align:center;
  background:rgba(255,255,255,.012);
}
.vazio .ico{
  width:52px; height:52px; margin:0 auto 20px; border-radius:13px;
  display:grid; place-items:center;
  background:var(--ouro-fundo); border:1px solid var(--linha-forte); color:var(--ouro);
}
.vazio h3{ font-size:clamp(21px,3vw,27px); margin-bottom:10px; }
.vazio p{ color:var(--texto-2); max-width:44ch; margin:0 auto 26px; font-size:15.5px; }

/* ---------------- tabela de compras ---------------- */
.envelope-tabela{
  border:1px solid var(--linha); border-radius:var(--raio);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--preto-2);
}
table.compras{ width:100%; border-collapse:collapse; min-width:620px; font-size:14.5px; }
table.compras th{
  text-align:left; padding:14px 18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-3); font-weight:500;
  border-bottom:1px solid var(--linha); white-space:nowrap;
}
table.compras td{ padding:16px 18px; border-bottom:1px solid var(--linha); color:var(--texto-2); vertical-align:middle; }
table.compras tr:last-child td{ border-bottom:0; }
table.compras tr:hover td{ background:rgba(255,255,255,.016); }
table.compras .produto{ color:var(--papel); font-weight:500; }
table.compras .valor{ font-family:var(--mono); color:var(--papel); white-space:nowrap; }
table.compras .celula-vazia{ color:var(--texto-3); }
table.compras .numero-pedido{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--texto-3); margin-top:4px; font-weight:400;
}
table.compras a{ color:var(--ouro-claro); text-decoration:underline; text-underline-offset:3px; }
table.compras a:hover{ color:var(--ouro); }

.estado{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:500; padding:5px 11px; border-radius:99px;
  border:1px solid; white-space:nowrap;
}
.estado i{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.estado--pago{ color:#9BD0AF; border-color:rgba(78,158,106,.4); background:rgba(78,158,106,.1); }
.estado--pendente{ color:var(--ouro-claro); border-color:var(--linha-forte); background:var(--ouro-fundo); }
.estado--falhou,.estado--divergente{ color:#E7A79F; border-color:rgba(181,84,74,.4); background:rgba(181,84,74,.1); }
.estado--revogado{ color:var(--texto-3); border-color:var(--linha); background:rgba(255,255,255,.03); }

/* ---------------- conta ---------------- */
.forma-conta{ max-width:460px; }
.forma-conta .cartao{ margin-bottom:20px; }
.forma-conta h3{ font-family:var(--sans); font-size:17px; font-weight:600; margin-bottom:6px; color:var(--papel); }
.forma-conta .cartao > p{ font-size:14.5px; color:var(--texto-2); margin-bottom:22px; }

/* ---------------- obrigado ---------------- */
.obrigado{
  min-height:100vh; min-height:100dvh;
  display:grid; place-items:center; padding:40px 24px;
  text-align:center;
}
.obrigado__caixa{ max-width:520px; }
.obrigado__ico{
  width:74px; height:74px; margin:0 auto 28px; border-radius:20px;
  display:grid; place-items:center;
  background:var(--ouro-fundo); border:1px solid var(--linha-forte); color:var(--ouro-claro);
}
.obrigado h1{ font-size:clamp(30px,5.6vw,46px); margin-bottom:16px; }
.obrigado p{ color:var(--texto-2); font-size:16.5px; max-width:44ch; margin:0 auto 14px; }
.obrigado .acoes{ margin-top:32px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.obrigado .pulso{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ouro); margin-bottom:22px;
}

/* ---------- ver senha ---------- */

.campo__comBotao{ position:relative; }
/* O padding da direita e o que impede a senha de correr por baixo do botao. */
.campo__comBotao input{ padding-right:46px; }

.verSenha{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:8px; padding:0;
  color:var(--texto-3); cursor:pointer;
  transition:color .16s, background .16s;
}
.verSenha:hover{ color:var(--ouro); }
.verSenha:focus-visible{ outline:2px solid var(--ouro); outline-offset:2px; }
.verSenha .olho--corte{ display:none; }
.verSenha[aria-pressed="true"]{ color:var(--ouro); }
.verSenha[aria-pressed="true"] .olho{ display:none; }
.verSenha[aria-pressed="true"] .olho--corte{ display:block; }

/* ============================================================
   A PAGINA DO CURSO
   Registro de produto: familiaridade ganha de invencao. Nada aqui e
   affordance nova, e a escala de tipo e fixa em rem, nao fluida.
   ============================================================ */

/* ---------------- o cartao da lista, que agora e porta ---------------- */

.curso__abrir{
  width:100%; display:flex; align-items:center; gap:18px;
  padding:22px 24px; background:transparent; border:0; cursor:pointer;
  text-align:left; color:inherit; font:inherit;
  transition:background .16s ease;
}
.curso__abrir:hover{ background:rgba(255,255,255,.022); }
.curso__abrir:focus-visible{ outline:2px solid var(--ouro); outline-offset:-2px; }

.curso__info{ flex:1; min-width:0; display:grid; gap:7px; }
.curso__nome{
  font-family:var(--display); font-size:1.5rem; line-height:1.15;
  color:var(--papel);
}
.curso__desc{
  font-size:.94rem; color:var(--texto-2); line-height:1.5;
  max-width:52ch;
}
.curso__seta{
  flex:none; color:var(--texto-3);
  transition:color .16s ease, transform .16s ease;
}
.curso__abrir:hover .curso__seta{ color:var(--ouro); transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){
  .curso__abrir:hover .curso__seta{ transform:none; }
}

/* ---------------- voltar ---------------- */

.voltar{
  display:inline-flex; align-items:center; gap:7px;
  margin-bottom:24px; padding:7px 12px 7px 8px;
  background:transparent; border:1px solid transparent; border-radius:var(--raio-s);
  color:var(--texto-3); font:inherit; font-size:.88rem; cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.voltar:hover{ color:var(--ouro); border-color:var(--linha); }
.voltar:focus-visible{ outline:2px solid var(--ouro); outline-offset:2px; }

/* ---------------- a ficha do produto ---------------- */

.ficha{
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start;
  justify-content:space-between;
  padding-bottom:28px; margin-bottom:8px;
  border-bottom:1px solid var(--linha);
}
.ficha__txt{ flex:1 1 300px; min-width:0; }
.ficha__txt h2{
  font-family:var(--display); font-size:2rem; line-height:1.12;
  margin:0 0 8px; color:var(--papel);
}
.ficha__txt > p{
  color:var(--texto-2); font-size:1rem; margin:0 0 14px; max-width:56ch;
}
.ficha__acao{ display:flex; flex-direction:column; gap:9px; align-items:stretch; }
@media (min-width:640px){ .ficha__acao{ min-width:210px; } }

/* ---------------- blocos ---------------- */

.bloco{ padding:38px 0; border-bottom:1px solid var(--linha); }
.bloco:last-child{ border-bottom:0; padding-bottom:12px; }
.bloco__t{
  font-family:var(--sans); font-size:1.06rem; font-weight:600;
  color:var(--papel); margin:0 0 8px; letter-spacing:-.005em;
}
.bloco__sub{
  color:var(--texto-2); font-size:.94rem; margin:0 0 22px; max-width:64ch;
  line-height:1.6;
}
.bloco__sub strong{ color:var(--texto); font-weight:600; }
.bloco__sub em{ color:var(--ouro-claro); font-style:normal; }

/* ---------------- abas de ferramenta ---------------- */

/* Em 375px cabia UMA aba de quatro, e sem indicacao de corte a pessoa nao
   descobre que existem as outras tres: ela le o passo a passo do Claude Code
   achando que e o unico caminho. Duas correcoes, e as duas importam.

   1. A etiqueta some abaixo de 560px. Ela e contexto, nao identidade, e era
      ela que fazia cada aba ocupar o dobro da largura necessaria.
   2. Um vinco na borda direita, so quando ha o que rolar, dizendo que a lista
      continua. Mascara, e nao gradiente sobreposto, para funcionar sobre
      qualquer fundo sem eu ter que repetir a cor do painel aqui. */
.ferra__abas{
  display:flex; gap:6px; margin-bottom:26px;
  overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--linha);
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.ferra__abas::-webkit-scrollbar{ display:none; }
.ferra__aba{ scroll-snap-align:start; }

@media (max-width:560px){
  .ferra__etq{ display:none; }
  .ferra__aba{ padding-inline:13px; }
  /* O vinco so aparece onde ha corte, e nunca em tela larga. */
  .ferra__abas{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  }
}

.ferra__aba{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:11px 15px; background:transparent; border:0; cursor:pointer;
  color:var(--texto-3); font:inherit; font-size:.92rem; font-weight:500;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .16s ease, border-color .16s ease;
  white-space:nowrap;
}
.ferra__aba:hover{ color:var(--texto-2); }
.ferra__aba:focus-visible{ outline:2px solid var(--ouro); outline-offset:-2px; border-radius:4px 4px 0 0; }
.ferra__aba[aria-selected="true"]{ color:var(--papel); border-bottom-color:var(--ouro); }

.ferra__etq{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ouro);
  padding:2px 6px; border-radius:4px; background:var(--ouro-fundo);
}
/* Na aba inativa a etiqueta some do primeiro plano: cor cheia em estado
   inativo e o que faz interface de produto parecer arvore de natal. */
.ferra__aba[aria-selected="false"] .ferra__etq{ color:var(--texto-3); background:rgba(255,255,255,.04); }

.ferra__resumo{
  color:var(--texto-2); font-size:.97rem; line-height:1.62;
  margin:0 0 20px; max-width:66ch;
}

/* ---------------- o que a ferramenta faz ---------------- */

.capac{
  display:grid; gap:1px; background:var(--linha);
  border:1px solid var(--linha); border-radius:var(--raio-s);
  overflow:hidden; margin:0 0 26px;
}
@media (min-width:620px){ .capac{ grid-template-columns:repeat(3,1fr); } }
.capac > div{
  background:var(--preto-2); padding:13px 15px; display:grid; gap:5px;
}
.capac dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--texto-3);
}
.capac dd{ margin:0; font-size:.92rem; font-weight:500; }
.capac dd.sim{ color:var(--ouro-claro); }
.capac dd.nao{ color:var(--texto-3); }
.capac dd.parcial{ color:var(--texto-2); }

/* ---------------- passos ---------------- */

.passos{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }

.passo{
  display:flex; gap:15px; padding:16px 0;
  border-bottom:1px solid rgba(201,162,75,.11);
}
.passo:last-child{ border-bottom:0; }
.passo__n{
  flex:none; width:25px; height:25px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--preto-3); border:1px solid var(--linha);
  color:var(--texto-2); font-family:var(--mono); font-size:.72rem; font-weight:600;
}
.passo--chave .passo__n{
  background:var(--ouro-fundo); border-color:var(--linha-forte); color:var(--ouro);
}
.passo__corpo{ flex:1; min-width:0; }
.passo__corpo h4{
  font-family:var(--sans); font-size:.95rem; font-weight:600;
  color:var(--papel); margin:0 0 5px;
}
.passo__corpo p{
  font-size:.92rem; color:var(--texto-2); margin:0; line-height:1.6;
  max-width:66ch;
}
.passo__corpo code{
  font-family:var(--mono); font-size:.85em; color:var(--ouro-claro);
  background:rgba(201,162,75,.07); padding:1px 5px; border-radius:4px;
}
.passo__corpo em{ color:var(--ouro-claro); font-style:normal; }
.passo__corpo pre{
  font-family:var(--mono); font-size:.78rem; line-height:1.65;
  background:var(--preto-2); border:1px solid var(--linha);
  border-radius:var(--raio-s); padding:12px 14px; margin:11px 0 0;
  color:var(--texto-2);
  /* Pre nao quebra sozinho, e sem isto o painel inteiro ganha rolagem
     lateral no celular por causa de uma linha de comando. */
  white-space:pre-wrap; overflow-wrap:anywhere;
}

/* ---------------- quadro ---------------- */

.quadro{ margin:26px 0 0; }
.quadro__t{
  font-family:var(--sans); font-size:.85rem; font-weight:600;
  color:var(--texto); margin:0 0 11px;
}
/* A tabela rola dentro da propria caixa. A pagina nunca rola de lado. */
.quadro__rolar{
  overflow-x:auto;
  border:1px solid var(--linha); border-radius:var(--raio-s);
}
.quadro table{ width:100%; border-collapse:collapse; font-size:.87rem; min-width:400px; }
.quadro th,.quadro td{
  text-align:left; padding:9px 13px; vertical-align:top;
  border-bottom:1px solid var(--linha);
}
.quadro tr:last-child td{ border-bottom:0; }
.quadro th{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ouro);
  background:var(--preto-3);
}
.quadro td{ color:var(--texto-2); }
.quadro .td--forte{ color:var(--texto); font-weight:500; white-space:nowrap; }
.quadro__nota{
  font-size:.87rem; color:var(--texto-3); margin:11px 0 0; line-height:1.55;
  max-width:66ch;
}

/* ---------------- aviso ---------------- */

.aviso{
  margin:24px 0 0; padding:15px 17px;
  background:var(--ouro-fundo); border:1px solid var(--linha);
  border-radius:var(--raio-s);
}
.aviso h4{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ouro); margin:0 0 9px; font-weight:600;
}
.aviso ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.aviso li{
  font-size:.9rem; color:var(--texto-2); line-height:1.55;
  padding-left:15px; position:relative; max-width:64ch;
}
.aviso li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--ouro);
}

/* ---------------- regra e socorro ---------------- */

.regra{
  display:grid; gap:1px; background:var(--linha);
  border:1px solid var(--linha); border-radius:var(--raio-s); overflow:hidden;
  margin:0;
}
.regra > div{
  background:var(--preto-2); padding:14px 16px;
  display:grid; gap:5px;
}
@media (min-width:640px){
  .regra > div{ grid-template-columns:180px 1fr; gap:20px; align-items:baseline; }
}
.regra dt{ font-size:.9rem; font-weight:600; color:var(--texto); }
.regra dd{ margin:0; font-size:.9rem; color:var(--texto-2); line-height:1.55; }
.regra--socorro dt{ color:var(--ouro-claro); font-weight:500; }

/* ---------------- ajustes do que ja existia ---------------- */

/* Na pagina do curso os modulos ganham a moldura que o cartao dava antes. */
.bloco .modulos{
  border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden;
}

/* ---------------- suporte ---------------- */

.suporte{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.suporte .btn{ display:inline-flex; align-items:center; gap:9px; }
/* O e-mail nao e botao de proposito: sao dois canais, mas o WhatsApp
   responde mais rapido e e o que deve ganhar o clique por reflexo. */
.suporte__email{
  font-family:var(--mono); font-size:13px; color:var(--texto-3);
  text-decoration:none; border-bottom:1px solid var(--linha);
  transition:color .16s ease, border-color .16s ease;
}
.suporte__email:hover,.suporte__email:focus-visible{
  color:var(--ouro); border-color:var(--ouro);
}