/* =====================================================================
   Área interna — depois do login.

   Preta de propósito, e não pela estética: aqui a pessoa vai passar horas
   assistindo aula. Fundo escuro cansa menos a vista em sessão longa, e
   separa na cabeça o que é o site de vendas do que é a sala de aula.

   Arquivo próprio: nada aqui vaza para as páginas públicas.
   ===================================================================== */

/* O QUE FALTAVA AQUI, E CUSTOU CARO NO CELULAR.
   O style.css e o estilo.css declaram isto na primeira linha; este
   arquivo nasceu sem. Sem `border-box`, a largura de 100% do
   .i-container NAO conta os 22px de padding de cada lado — o cabecalho
   ficava 44px mais largo que a tela, empurrava a pagina para o lado e
   cortava o fim de cada titulo de aula. Uma linha, e a sala de aula
   passa a caber no telefone. */
*,*::before,*::after{box-sizing:border-box}

:root{
  --preto:    #080d14;
  --carvao:   #101923;
  --carvao2:  #16212e;
  --linha-i:  #243141;
  --ambar:    #f5a800;
  --ambar-esc:#d99400;
  --claro:    #e8eef5;
  --meio:     #8b9bad;
  --verde:    #35c47a;
  --vermelho: #ef6a68;
}

body.interno{
  margin:0;background:var(--preto);color:var(--claro);
  font:400 16px/1.65 'Inter',system-ui,-apple-system,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
body.interno h1,body.interno h2,body.interno h3{
  font-family:'Poppins',system-ui,Arial,sans-serif;color:#fff;
  line-height:1.25;margin:0}
body.interno a{color:inherit;text-decoration:none}
.i-container{width:100%;max-width:1240px;margin:0 auto;padding:0 22px}

/* ---------- abertura ----------
   A tela nasce preta e o conteúdo entra depois. Dura menos de um segundo:
   é para dar a sensação de entrar num lugar, não para fazer esperar. */
.abertura{position:fixed;inset:0;z-index:200;background:var(--preto);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease,visibility .5s}
.abertura.sumiu{opacity:0;visibility:hidden}
.abertura img{width:120px;opacity:0;animation:pulsar 1.5s ease forwards}
@keyframes pulsar{
  0%{opacity:0;transform:scale(.82)}
  45%{opacity:1;transform:scale(1)}
  100%{opacity:1;transform:scale(1)}
}
.abertura__risco{position:absolute;bottom:34%;width:0;height:2px;
  background:var(--ambar);animation:crescer 1.1s .35s ease forwards}
@keyframes crescer{to{width:180px}}

.entra{opacity:0;transform:translateY(14px);
  animation:subir .55s cubic-bezier(.22,.61,.36,1) forwards}
.entra:nth-child(2){animation-delay:.06s}
.entra:nth-child(3){animation-delay:.12s}
.entra:nth-child(4){animation-delay:.18s}
.entra:nth-child(5){animation-delay:.24s}
.entra:nth-child(6){animation-delay:.3s}
@keyframes subir{to{opacity:1;transform:none}}
/* quem pediu menos movimento no widget de acessibilidade não vê nada disso */
body.a11y-noanim .entra,body.a11y-noanim .abertura img{animation:none;opacity:1;
  transform:none}

/* ---------- topo ---------- */
.i-topo{position:sticky;top:0;z-index:60;background:rgba(8,13,20,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linha-i)}
.i-topo__in{display:flex;align-items:center;gap:1rem;height:70px}
.i-marca{display:flex;align-items:center;gap:.7rem}
.i-marca img{height:34px;background:#fff;border-radius:9px;padding:.35rem .5rem}
.i-marca b{font:700 .98rem 'Poppins',sans-serif;color:#fff;display:block;
  line-height:1.2}
.i-marca span{font-size:.66rem;color:var(--ambar);letter-spacing:.15em;
  text-transform:uppercase;font-weight:700}
.i-topo__dir{margin-left:auto;display:flex;align-items:center;gap:1rem}
.i-quem{font-size:.88rem;color:var(--meio)}
.i-sair{border:1px solid var(--linha-i);background:transparent;color:var(--claro);
  padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;font:600 .85rem
  'Poppins',sans-serif;transition:border-color .2s,background .2s}
.i-sair:hover{border-color:var(--ambar);color:var(--ambar)}

/* ---------- painel de módulos ---------- */
.painel{padding:4rem 0 5rem}
.painel__cab{text-align:center;margin-bottom:3rem}
.painel__cab h1{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.painel__cab p{color:var(--meio);margin:.8rem 0 0}
.modulos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.modulo{position:relative;background:var(--carvao);border:1px solid var(--linha-i);
  border-radius:16px;padding:1.7rem 1.6rem;display:flex;flex-direction:column;
  min-height:210px;transition:transform .3s cubic-bezier(.22,.61,.36,1),
  border-color .3s,box-shadow .3s}
.modulo:hover{transform:translateY(-6px);border-color:var(--ambar);
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.modulo__tag{display:inline-block;align-self:flex-start;background:var(--carvao2);
  color:var(--ambar);border:1px solid var(--linha-i);font:700 .74rem 'Poppins',
  sans-serif;letter-spacing:.05em;padding:.32rem .68rem;border-radius:999px;
  margin-bottom:.9rem}
.modulo h3{font-size:1.12rem;margin-bottom:.4rem}
.modulo p{color:var(--meio);font-size:.9rem;margin:0 0 1.1rem}
.modulo__pe{margin-top:auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem}
.modulo__ir{color:var(--ambar);font:600 .9rem 'Poppins',sans-serif}

/* a barra de progresso do módulo */
.barra{height:5px;border-radius:3px;background:var(--carvao2);overflow:hidden;
  margin-bottom:.7rem}
.barra i{display:block;height:100%;background:var(--ambar);border-radius:3px;
  transition:width .5s ease}
.modulo__quanto{font-size:.8rem;color:var(--meio)}

.modulo.venceu{opacity:.55}
.modulo.venceu:hover{transform:none;border-color:var(--linha-i);box-shadow:none}
.modulo.venceu .modulo__tag{color:var(--meio)}
.modulo.feito .modulo__tag{color:var(--verde);border-color:rgba(53,196,122,.4)}
.i-vazio{text-align:center;color:var(--meio);max-width:560px;margin:3rem auto;
  line-height:1.8}

/* ---------- sala de aula ---------- */
.aula{display:grid;grid-template-columns:320px 1fr;min-height:calc(100vh - 70px)}
.lista{background:var(--carvao);border-right:1px solid var(--linha-i);
  padding:1.6rem 0;overflow-y:auto}
.lista h2{font-size:1rem;padding:0 1.4rem;margin-bottom:.3rem}
.lista__sub{font-size:.8rem;color:var(--meio);padding:0 1.4rem 1.2rem;
  border-bottom:1px solid var(--linha-i);margin-bottom:.9rem}
.item{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1.4rem;
  cursor:pointer;border-left:3px solid transparent;transition:background .2s}
.item:hover{background:var(--carvao2)}
.item.atual{background:var(--carvao2);border-left-color:var(--ambar)}
.item__n{flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--carvao2);border:1px solid var(--linha-i);color:var(--meio);
  font:700 .72rem 'Poppins',sans-serif;display:flex;align-items:center;
  justify-content:center;margin-top:.15rem}
.item.feito .item__n{background:var(--verde);border-color:var(--verde);
  color:#06301b}
.item.travado{opacity:.45;cursor:not-allowed}
.item.travado:hover{background:none}
.item__txt{flex:1;min-width:0}
.item__txt b{display:block;font:500 .92rem/1.4 'Inter',sans-serif;
  color:var(--claro);overflow-wrap:anywhere}
.item__txt span{font-size:.78rem;color:var(--meio)}

.palco{padding:2rem 2.4rem 3rem;max-width:1000px}
.palco h1{font-size:1.35rem;margin-bottom:.4rem}
.palco__sub{color:var(--meio);font-size:.9rem;margin:0 0 1.4rem}
.video{position:relative;background:#000;border-radius:14px;overflow:hidden;
  border:1px solid var(--linha-i)}
.video video{width:100%;display:block;background:#000}
/* a linha do tempo é nossa: a do navegador deixa arrastar, e arrastar é
   exatamente o que não pode */
.tempo{height:6px;background:var(--carvao2);position:relative}
.tempo i{display:block;height:100%;background:var(--ambar);width:0;
  transition:width .25s linear}
.video__pe{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;
  background:var(--carvao);font-size:.85rem;color:var(--meio)}
.video__pe button{border:0;background:var(--ambar);color:#16202c;cursor:pointer;
  font:700 .85rem 'Poppins',sans-serif;padding:.5rem 1.2rem;border-radius:999px}
.video__pe button:disabled{background:var(--carvao2);color:var(--meio);
  cursor:default}
.recado{margin-top:1.2rem;padding:.9rem 1.1rem;border-radius:10px;
  background:var(--carvao);border:1px solid var(--linha-i);color:var(--meio);
  font-size:.88rem;line-height:1.6}
.recado b{color:var(--ambar)}

/* ---------- prova, no escuro ---------- */
.i-prova{max-width:820px}
.i-prova h1{font-size:1.5rem;margin-bottom:.5rem}
.i-pergunta{background:var(--carvao);border:1px solid var(--linha-i);
  border-radius:14px;padding:1.4rem 1.5rem;margin-bottom:1rem}
.i-pergunta b{display:block;font:600 1rem/1.5 'Poppins',sans-serif;color:#fff;
  margin-bottom:1rem}
.i-alt{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem .9rem;
  border:1px solid var(--linha-i);border-radius:10px;margin-bottom:.55rem;
  cursor:pointer;font-size:.94rem;line-height:1.5;transition:border-color .2s,
  background .2s}
.i-alt:hover{border-color:var(--ambar);background:var(--carvao2)}
.i-alt input{margin-top:.25rem;accent-color:var(--ambar);flex-shrink:0}
.i-alt:has(input:checked){border-color:var(--ambar);background:rgba(245,168,0,.09)}
.i-erro{display:none;margin:1rem 0;padding:.8rem 1rem;border-radius:10px;
  background:rgba(239,106,104,.12);color:var(--vermelho);font-size:.9rem}
.i-resultado{max-width:560px;margin:2rem auto;text-align:center;
  background:var(--carvao);border:1px solid var(--linha-i);border-radius:16px;
  padding:2.6rem 2rem}
.i-resultado .nota{font:800 3.4rem/1 'Poppins',sans-serif;margin:.7rem 0 1rem}
.i-resultado.passou .nota,.i-resultado.passou h2{color:var(--verde)}
.i-resultado.reprovou .nota,.i-resultado.reprovou h2{color:var(--vermelho)}
.i-resultado p{color:var(--meio);margin:0 0 1rem}
.i-botao{display:inline-block;background:var(--ambar);color:#16202c;border:0;
  cursor:pointer;font:700 .9rem 'Poppins',sans-serif;padding:.75rem 1.6rem;
  border-radius:999px;margin-top:.5rem}
.i-botao--linha{background:transparent;color:var(--claro);
  border:1px solid var(--linha-i)}

/* ---------- o botão de acessibilidade, na área interna ----------
   No site público ele fica na lateral esquerda, no meio da altura, onde
   não atrapalha nada. Aqui a esquerda é o menu de aulas, e ele caía em
   cima da lista — dava para ver na amostra, tapando a aula 3. Vai para o
   canto de baixo à direita, longe do menu e do vídeo. */
body.interno .a11y-fab{left:auto;right:20px;top:auto;bottom:20px;
  transform:none;background:var(--carvao2);color:var(--claro);
  border:1px solid var(--linha-i);box-shadow:0 8px 26px rgba(0,0,0,.55)}
body.interno .a11y-fab:hover{transform:scale(1.07);border-color:var(--ambar)}

@media(max-width:1024px){
  .modulos{grid-template-columns:repeat(2,1fr)}
  .aula{grid-template-columns:1fr}
  .lista{border-right:0;border-bottom:1px solid var(--linha-i);max-height:320px}
  .palco{padding:1.6rem 1.2rem 2.4rem}
}
@media(max-width:640px){
  .modulos{grid-template-columns:1fr}
  .painel{padding:2.6rem 0 3.4rem}
}

/* ===================================================================
   SELETOR DE IDIOMA — versao escura
   O estilo foi para o style.css e para o estilo.css, mas NAO para ca: na
   sala de aula e no painel o menu saia como lista com marcador, solta em
   cima do cabecalho. Aqui ele nasce escuro, para nao virar um retangulo
   branco no meio do preto.
   =================================================================== */
.lang{position:relative;display:inline-block}
.lang__abre{display:inline-flex;align-items:center;gap:.35rem;
  background:transparent;border:1px solid var(--linha-i);color:var(--claro);
  cursor:pointer;font:700 .78rem 'Poppins',sans-serif;padding:.42rem .7rem;
  border-radius:999px;letter-spacing:.04em;transition:border-color .2s}
.lang__abre:hover{border-color:var(--ambar);color:var(--ambar)}
.lang__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:120;
  min-width:160px;list-style:none;margin:0;padding:.3rem;
  background:var(--carvao2);border:1px solid var(--linha-i);
  border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.lang.aberto .lang__menu{opacity:1;visibility:visible;transform:none}
.lang__menu li{display:flex;align-items:center;justify-content:space-between;
  padding:.55rem .8rem;border-radius:8px;cursor:pointer;
  font:500 .9rem 'Inter',sans-serif;color:var(--claro)}
.lang__menu li:hover{background:var(--carvao)}
.lang__menu li.on{font-weight:700;background:var(--carvao)}
.lang__menu li span{color:var(--ambar);font-weight:700}
/* ===================================================================
   CELULAR — e onde o curso vai ser feito de verdade

   O trabalhador assiste no intervalo, no telefone dele, muitas vezes num
   4G ruim. A tela larga era a que estava sendo testada, e o celular
   acumulou tres defeitos que so aparecem la:

   1. A PAGINA ROLAVA PARA O LADO. Item de flex nao encolhe abaixo do
      tamanho do conteudo, a nao ser que se diga `min-width:0`. Sem isso,
      um titulo longo de aula empurrava a pagina inteira, e o video, os
      botoes e metade das frases ficavam fora da tela — com uma barra
      horizontal embaixo que ninguem espera num site.
   2. O cabecalho nao cabia: marca + "Meus modulos" + "Sair" + idioma numa
      linha so de 390 px.
   3. Na prova, a alternativa longa vazava do cartao.
   =================================================================== */
@media(max-width:640px){
  /* a raiz do problema: deixar os itens de flex encolherem */
  .i-topo__in,.item,.video__pe,.modulo__pe{flex-wrap:wrap}
  /* `min-width:0` nao vale em elemento inline, e `.item__txt` e um <span>.
     Sem virar bloco, ele continuava com a largura do conteudo e o titulo
     saia cortado — antes empurrando a pagina, e agora escondido pelo
     overflow. Texto cortado e pior que texto quebrado. */
  .item__txt,.aulaadm__txt{display:block;flex:1;min-width:0}
  .modulo__pe>div{min-width:0}
  .item__txt b,.item__txt span,.palco h1,.palco__sub,.recado,
  .i-pergunta b,.i-alt{overflow-wrap:anywhere}

  /* cabecalho em duas linhas, com a marca inteira na primeira */
  .i-topo__in{height:auto;padding-top:.6rem;padding-bottom:.6rem;
    row-gap:.5rem}
  .i-marca{flex:1 1 100%}
  .i-marca img{height:30px}
  .i-topo__dir{margin-left:0;flex:1 1 100%;justify-content:flex-start;
    gap:.5rem;flex-wrap:wrap}
  .i-sair{padding:.42rem .85rem;font-size:.8rem}

  /* a lista de aulas nao rouba altura: ela rola, o video fica logo abaixo */
  .lista{max-height:none;padding:1rem 0}
  .lista h2,.lista__sub{padding-left:1rem;padding-right:1rem}
  .item{padding:.75rem 1rem}
  .palco{padding:1.2rem 1rem 2rem}
  .palco h1{font-size:1.15rem}

  /* o pe do video em duas linhas: o recado nao empurra mais o botao */
  .video__pe{row-gap:.5rem;padding:.8rem}
  .video__pe span:last-child{margin-left:0;flex:1 1 100%;font-size:.8rem}

  /* prova: alternativa com area de toque grande e texto que quebra */
  .i-prova h1{font-size:1.25rem}
  .i-pergunta{padding:1.1rem 1rem}
  .i-alt{padding:.85rem .8rem;font-size:.95rem}
  .i-resultado{padding:2rem 1.2rem;margin:1.2rem 0}
  .i-resultado .nota{font-size:2.8rem}

/* O relógio da espera, na tela de reprovado. Numero em fonte de largura
   fixa: sem isso o texto inteiro treme a cada segundo, porque o "1" e o
   "8" tem larguras diferentes e a linha se reajusta. */
.conta{font:600 .95rem 'Poppins',sans-serif;color:var(--ambar,#f5a800);
  margin:.6rem 0 .2rem;font-variant-numeric:tabular-nums}
.i-botao[disabled]{opacity:.45;cursor:not-allowed}

  .i-botao{width:100%;text-align:center}

  /* cartoes do painel */
  .modulo{padding:1.3rem 1.1rem;min-height:0}
  .modulo__pe{row-gap:.6rem}
  .modulo__ir{margin-left:auto}
}

/* Rede de seguranca: se algum conteudo novo escapar da largura, ele fica
   contido em vez de deslocar a pagina inteira. Nao substitui o conserto
   acima — mas impede que um texto esquecido estrague a tela toda. */
body.interno{overflow-x:hidden}