/* Fontes hospedadas aqui (antes vinham do Google Fonts): uma conexao a menos e nada
   travando o primeiro desenho da pagina. So o subconjunto latino, que cobre todo o
   portugues. Os arquivos estao em /assets/fontes/. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fontes/archivo.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fontes/bricolage.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fontes/outfit.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fontes/spacemono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fontes/spacemono-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* O visual do Modo Aprovado, num arquivo so'.
 *
 * Existe porque cada pagina tinha o seu proprio estilo colado dentro dela, e
 * uma ia ficando diferente da outra sem ninguem perceber. Daqui pra frente a
 * landing manda, e toda pagina que o visitante ve' ANTES do login carrega
 * este arquivo. Mexer aqui muda todas de uma vez — que e' o ponto.
 *
 * O que mora aqui: as cores, as fontes, a barra de cima, o botao, a escala
 * dos titulos, o FAQ e o rodape. O que e' de uma pagina so' (a capa, o
 * carrossel, o relogio, as bolinhas) fica dentro dela.
 *
 * As paginas trazem a fonte no <head>:
 *   Bricolage Grotesque 600;800 · Archivo 400;500;600;700 · Space Mono
 *   400;700 · Outfit 600;700;800
 *
 * O esquema de cor vem do <html data-cor="...">: "brasa" (o do site),
 * "grafite" e "papel". A pagina de parceiros usa o papel.
 */

/* ===== AS TRÊS COMBINAÇÕES — uma cor de destaque só em cada uma ===== */
:root, [data-cor="brasa"]{
  --fundo:#0A0908; --papel:#F4F1EA; --texto:#F4F1EA;
  --cor:#FF4D1C; --cor-fraca:rgba(255,77,28,.14); --sobre-cor:#190500;
  --linha:rgba(244,241,234,.12); --fraco:rgba(244,241,234,.62); --tenue:rgba(244,241,234,.36);
  --bolha:244,241,234; --neutro-escuro:rgba(20,19,15,.3);
  --superficie:#141211; --encaixe:rgba(244,241,234,.05);
  --certo:#45D08A; --certo-fraco:rgba(69,208,138,.13); --aviso:#E8A33D;
}
[data-cor="grafite"]{
  --fundo:#0A0C12; --papel:#EEF1F7; --texto:#EEF1F7;
  --cor:#4C7DFF; --cor-fraca:rgba(76,125,255,.14); --sobre-cor:#02081C;
  --linha:rgba(238,241,247,.12); --fraco:rgba(238,241,247,.62); --tenue:rgba(238,241,247,.36);
  --bolha:238,241,247; --neutro-escuro:rgba(16,20,32,.3);
  --superficie:#141825; --encaixe:rgba(238,241,247,.05);
  --certo:#45D08A; --certo-fraco:rgba(69,208,138,.13); --aviso:#E8A33D;
}
[data-cor="papel"]{
  --fundo:#F2EFE6; --papel:#FFFFFF; --texto:#14130F;
  --cor:#B5330F; --cor-fraca:rgba(181,51,15,.1); --sobre-cor:#FFF7F3;
  --linha:rgba(20,19,15,.16); --fraco:rgba(20,19,15,.7); --tenue:rgba(20,19,15,.46);
  --bolha:20,19,15; --neutro-escuro:rgba(20,19,15,.3);
  --superficie:#FFFFFF; --encaixe:#F8F6F0;
  --certo:#1C7A4E; --certo-fraco:rgba(28,122,78,.1); --aviso:#A8690F;
}

/* ============================================================== base */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--fundo); color:var(--texto);
      font-family:'Archivo',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;
      transition:background .45s, color .45s; }
a{ color:var(--cor); }
.dsp{ font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; }
.mn{ font-family:'Space Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 48px; }
@media (max-width:700px){ .wrap{ padding:0 20px; } }
/* Grão de filme por cima de tudo: tira o plástico do fundo chapado. */
.grao{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:overlay; }

/* ========================================================= a barra */
/* O cabecalho flutua transparente sobre a capa. Quando a pagina desce ele
   ACENDE: a faixa preta entra e, pendurada embaixo dela, uma saia de luz
   branca escorre uns 42px e vai se apagando. E' a saia que separa o menu do
   conteudo — por isso nenhuma sombra escura aqui: sombra abafaria a luz. */
.topo{ position:fixed; top:0; left:0; right:0; z-index:70;
       border-bottom:1px solid transparent; transition:border-color .45s; }
/* A faixa: preta de verdade. O desfoque atras existe so' pra nenhum texto da
   pagina atravessar os 8% que faltam pro preto fechar. */
.topo::before{ content:""; position:absolute; inset:0; background:rgba(8,7,6,.93);
       opacity:0; transition:opacity .45s;
       backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.topo.preso::before{ opacity:1; }
/* A saia de luz: fica FORA da faixa (top:100%), e nao dentro. Sobe 8px
   enquanto apaga, pra parecer luz acendendo e nao um bloco aparecendo. */
.topo::after{ content:""; position:absolute; left:0; right:0; top:100%; height:42px;
       pointer-events:none; opacity:0; transform:translateY(-8px);
       transition:opacity .55s, transform .55s;
       background:linear-gradient(to bottom, rgba(255,255,255,.34) 0, rgba(255,255,255,.12) 30%,
              rgba(255,255,255,.035) 66%, rgba(255,255,255,0) 100%);
       /* apaga nas pontas: luz tem centro, bloco nao tem */
       -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
       mask-image:linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%); }
.topo.preso::after{ opacity:1; transform:none; }
/* O fio aceso na divisa da faixa com a saia */
.topo.preso{ border-bottom-color:rgba(255,255,255,.78); }
/* No esquema claro a luz branca sumiria no fundo claro: la' a saia escurece.
   E como a faixa continua preta, a tipografia e o menu viram brancos nela. */
[data-cor="papel"] .marca{ color:#14130F; }
[data-cor="papel"] .topo::after{ background:linear-gradient(to bottom, rgba(20,19,15,.16) 0,
              rgba(20,19,15,.06) 34%, rgba(20,19,15,0) 100%); }
[data-cor="papel"] .topo.preso{ border-bottom-color:rgba(255,255,255,.34); }
[data-cor="papel"] .topo.preso .marca{ color:#fff; }
[data-cor="papel"] .topo.preso .menu a{ color:rgba(255,255,255,.74); }
[data-cor="papel"] .topo.preso .menu a:hover{ color:#fff; }
.topo-in{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:14px 48px;
       display:flex; align-items:center; gap:28px; }
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
       font-family:'Outfit',system-ui,sans-serif; font-weight:700; font-size:18.5px; letter-spacing:-.012em; }
.marca-img{ width:34px; height:34px; object-fit:contain; display:block; }
.marca-txt i{ font-style:normal; color:var(--cor); margin-left:5px; }
.menu{ display:flex; gap:26px; margin-left:auto; }
.menu a{ color:var(--fraco); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .25s; }
.menu a:hover{ color:var(--texto); }
.entrar{ font-family:'Outfit',system-ui,sans-serif; font-weight:700; font-size:14px; color:var(--sobre-cor);
       background:var(--cor); text-decoration:none; border-radius:40px; padding:10px 24px;
       transition:transform .25s cubic-bezier(.2,1.5,.4,1), filter .25s; }
.entrar:hover{ transform:translateY(-2px); filter:brightness(1.08); }
@media (max-width:820px){
  .topo-in{ padding:11px 20px; gap:14px; }
  .menu{ display:none; }
  .marca{ font-size:16px; margin-right:auto; }
  .marca-txt i{ display:none; }
  .marca-img{ width:28px; height:28px; }
  .entrar{ font-size:13px; padding:9px 19px; }
}

/* ========================================================= o botao */
/* O brilho segue o cursor: o JS escreve --mx e --my em cima do botao. */
.btn{ position:relative; display:inline-block; background:var(--cor); color:var(--sobre-cor); text-decoration:none;
      font-weight:600; font-size:17px; padding:20px 40px; border-radius:100px; overflow:hidden; cursor:pointer;
      border:0; font-family:inherit; text-align:center;
      transition:transform .35s cubic-bezier(.2,.8,.3,1); }
.btn:hover{ transform:translateY(-3px) scale(1.02); }
.btn::after{ content:""; position:absolute; width:180px; height:180px; left:var(--mx,50%); top:var(--my,50%);
             transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
             background:radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 68%); opacity:0; transition:opacity .3s; }
.btn:hover::after{ opacity:1; }

/* ================================================ secao e tipografia */
.sec{ padding:clamp(76px,10vw,140px) 0; position:relative; }
h2.st{ margin:0 0 26px; font-size:clamp(30px,4.6vw,60px); line-height:.99; letter-spacing:-.04em; max-width:15ch; }
.olho{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--cor); margin-bottom:22px; }
.par{ margin:0 0 18px; font-size:clamp(16px,1.5vw,18.5px); line-height:1.66; color:var(--fraco); max-width:47ch; }
.sub{ margin:0 auto 34px; font-size:clamp(16px,1.6vw,19.5px); line-height:1.6; color:var(--fraco); max-width:52ch; text-align:center; }
.duas{ display:flex; gap:clamp(36px,6vw,80px); flex-wrap:wrap; align-items:flex-start; }
.c{ flex:1 1 400px; min-width:min(100%,300px); }
/* Texto e imagem trocam de lado de uma seção para a outra — o olho desce em
   ziguezague em vez de cair sempre na mesma coluna. No celular NÃO inverte:
   o texto tem que vir antes do gráfico. */
@media (min-width:860px){ .duas.invertida{ flex-direction:row-reverse; } }

/* Cada bloco sobe ao entrar na tela. O JS poe a classe .on. */
.rev{ opacity:0; transform:translateY(32px); transition:opacity .9s cubic-bezier(.2,.7,.25,1), transform .9s cubic-bezier(.2,.7,.25,1); }
.rev.on{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1; transform:none; transition:none; }
}

/* ============================================================= FAQ */
/* Cada duvida e' uma ficha fechada. Abrir acende a borda e tinge o fundo —
   o mesmo laranja do resto, para a secao nao parecer colada de outro site.
   O marcador padrao do navegador sai e entra um sinal que gira. */
.faq-topo{ max-width:760px; margin:0 auto clamp(34px,4.4vw,58px); text-align:center; }
.faq-topo h2.st{ margin-left:auto; margin-right:auto; max-width:18ch; }
.faq{ max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:11px; }
.faq details{ border:1px solid var(--linha); border-radius:16px;
       transition:border-color .4s, background .4s; }
.faq details:hover{ border-color:var(--tenue); }
.faq details[open]{ border-color:var(--cor); background:var(--cor-fraca); }
.faq summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:20px;
       padding:21px 22px; font-size:clamp(15.5px,1.65vw,18px); font-weight:600; line-height:1.4;
       letter-spacing:-.004em; color:var(--texto); transition:color .3s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--cor); }
.faq summary::after{ content:""; flex:0 0 auto; margin-left:auto; width:27px; height:27px; border-radius:50%;
       border:1.5px solid var(--linha); transition:transform .45s cubic-bezier(.2,.8,.3,1), border-color .4s, background .4s;
       background:linear-gradient(var(--tenue),var(--tenue)) center/11px 1.7px no-repeat,
                  linear-gradient(var(--tenue),var(--tenue)) center/1.7px 11px no-repeat; }
.faq details[open] summary::after{ border-color:var(--cor); transform:rotate(180deg);
       background:linear-gradient(var(--cor),var(--cor)) center/11px 1.7px no-repeat; }
.faq .resposta{ padding:0 22px 24px; }
/* A resposta tambem pode vir solta dentro do <details>, sem o .resposta em
   volta. Nos dois casos ela respeita a mesma margem do titulo — sem isto o
   texto cola na borda da ficha quando ela abre. */
.faq details > p, .faq details > ul{ padding-left:22px; padding-right:22px; }
.faq details > ul{ padding-left:42px; margin:10px 0 0; }
.faq details > :last-child{ padding-bottom:24px; }
.faq li{ font-size:clamp(15px,1.45vw,16.5px); line-height:1.6; color:var(--fraco); margin-bottom:7px; }
.faq p{ margin:0 0 13px; font-size:clamp(15px,1.45vw,16.5px); line-height:1.7; color:var(--fraco); max-width:68ch; }
.faq p:last-child{ margin-bottom:0; }

/* ========================================================== rodape */
/* O chao da pagina: preto nos tres esquemas, com o fio laranja em cima e o
   nome gigante quase apagado atras — o rodape fecha a pagina, nao a enfeita. */
.rodape{ position:relative; z-index:2; overflow:hidden; background:#07070A; color:rgba(255,255,255,.52);
       padding:clamp(56px,7vw,92px) 0 clamp(26px,3vw,38px); font-size:14px; line-height:1.7; }
.rodape-fio{ position:absolute; top:0; left:0; right:0; height:1px;
       background:linear-gradient(90deg, transparent, var(--cor) 22%, var(--cor) 78%, transparent); opacity:.7; }
.rodape-eco{ position:absolute; left:50%; bottom:-.3em; transform:translateX(-50%);
       font-family:'Outfit',system-ui,sans-serif; font-weight:800; white-space:nowrap; pointer-events:none;
       font-size:clamp(78px,15vw,230px); line-height:1; letter-spacing:-.05em; color:#fff; opacity:.035; }
.rodape-in{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:clamp(34px,5vw,80px);
       align-items:flex-start; padding-bottom:clamp(34px,4.5vw,56px); }
.rodape-marca{ display:flex; align-items:flex-start; gap:14px; flex:1 1 320px; min-width:min(100%,280px); }
.rodape-img{ width:46px; height:46px; object-fit:contain; flex:0 0 auto; }
.rodape-nome{ font-family:'Outfit',system-ui,sans-serif; font-weight:700; font-size:20px;
       letter-spacing:-.015em; color:#fff; }
.rodape-nome i{ font-style:normal; color:var(--cor); margin-left:6px; }
.rodape-lema{ margin:7px 0 0; color:rgba(255,255,255,.62); font-size:14px; }
.rodape-col{ display:flex; flex-direction:column; gap:11px; flex:0 1 auto; }
.rodape-rot{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
       color:var(--cor); margin-bottom:4px; }
.rodape a{ color:rgba(255,255,255,.58); text-decoration:none; font-size:14px; width:fit-content;
       transition:color .25s, transform .25s; }
.rodape a:hover{ color:#fff; transform:translateX(3px); }
.rodape-aviso{ position:relative; z-index:1; margin:0; padding-top:clamp(22px,2.6vw,30px);
       border-top:1px solid rgba(255,255,255,.09); font-size:12.5px; line-height:1.65;
       color:rgba(255,255,255,.4); max-width:86ch; }

/* ======================================== o botao de claro/escuro */
/* So' aparece por dentro do site (area do aluno e trilhas). Fica discreto:
   e' uma preferencia, nao uma funcao do produto. */
.tema-botao{ flex:0 0 auto; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
       border:1px solid var(--linha); border-radius:50%; background:transparent; color:var(--fraco);
       cursor:pointer; padding:0; transition:color .25s, border-color .25s, transform .25s; }
.tema-botao:hover{ color:var(--cor); border-color:var(--cor); transform:rotate(-18deg); }
.tema-botao svg{ display:block; }