/* ═══════════════════════════════════════════════════════════════════
   Base das páginas públicas (landing e app-do-aluno).

   Tokens, tipografia, barra do topo com o menu sanduíche, botões e rodapé —
   tudo que as duas páginas compartilham. O que é específico de cada uma
   continua inline na própria página.

   Extraído de site/index.php quando a segunda página nasceu: manter dois
   blocos de <style> iguais garantia que um consertasse e o outro não.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   Fundo escuro porque o que se vende aqui é principalmente o app do
   ALUNO, e o app é escuro. O ERP é claro; ele aparece em print.

   O dourado é a marca e aparece pouco de propósito: eyebrow, ícone,
   botão. Quem separa as seções é o espaço e o contraste de fundo
   (.sec--alt), não ornamento.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0f1115;
  --bg-2:#141821;
  --surface:#171a21;
  --border:#2a313c;
  --text:#eef1f6;
  --muted:#97a0b0;
  --gold:#e0b341;          /* dourado lotus, a marca */
  --gold-ink:#000;         /* preto sólido sobre o dourado: o #1a1505 lavava no botão pequeno */
  --success:#34c759;

  --maxw:1140px;
  --r:16px;
}

*{box-sizing:border-box}
/* O atributo hidden esconde por uma regra de user-agent, a mais fraca que
   existe: qualquer display no style="" inline a vence e o elemento aparece.
   Foi o que deixou o modal de "pagamento confirmado" visível ao abrir a tela
   de cartão. O style.css do painel já tem esta regra; aqui faltava. */
[hidden]{display:none!important}
/* Trava de segurança: nada pode empurrar a página para o lado no celular.
   Um estouro horizontal é o defeito mais comum e o mais visível em mobile —
   a página inteira passa a "balançar" ao rolar. */
html,body{overflow-x:hidden;width:100%}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
@media(min-width:561px){ .wrap{padding:0 24px} }

/* ─── tipografia ─────────────────────────────────────────────── */
h1,h2,h3{font-family:"Barlow Condensed",Inter,sans-serif;font-weight:700;
  line-height:1.04;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(34px,8.5vw,80px);text-transform:uppercase}
h2{font-size:clamp(26px,5.6vw,50px);text-transform:uppercase}
h3{font-size:20px}
p{margin:0}

.eyebrow{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;font-size:14px;
  color:var(--gold);
}

/* ─── topo ───────────────────────────────────────────────────── */
/* z-80: ACIMA do painel (70) e do véu (60). A barra tem que continuar
   visível com o menu aberto: é onde está o X que fecha. Sem isto o
   painel cobre o próprio botão de fechar. */
.nav{position:sticky;top:0;z-index:80;background:rgba(15,17,21,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav__in{display:flex;align-items:center;gap:12px;height:58px}
@media(min-width:561px){ .nav__in{gap:20px;height:68px} }
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:700;
  font-family:"Barlow Condensed",sans-serif;font-size:23px;text-transform:uppercase;
  letter-spacing:.02em}
.brand__logo{height:48px;width:auto;display:block}
@media(min-width:521px){ .brand__logo{height:38px} }
.nav__links{margin-left:auto;display:flex;align-items:center;gap:8px}
/* :not(.btn) porque o CTA do topo também é um <a> daqui dentro: sem isso
   '.nav__links a' (0,1,1) vencia '.btn--gold' (0,1,0) e pintava o texto de
   --muted sobre o dourado, deixando o botão ilegível. O :hover fazia o
   mesmo com --text. O botão se pinta pelas próprias regras .btn. */
.nav__links a:not(.btn){text-decoration:none;color:var(--muted);font-size:14px;
  font-weight:500;padding:12px 13px;border-radius:9px;
  transition:color .15s,background .15s;
  display:inline-flex;align-items:center;min-height:44px}
.nav__links a:not(.btn):hover{color:var(--text);background:#ffffff0d}
/* No celular o menu guarda só o essencial: o CTA. O resto vai no sanduíche.
   ESPECIFICIDADE: '.nav__links a:not(.btn)' logo acima vale (0,3,1) e traz
   display:inline-flex. Um '.nav__links .hide-sm' (0,2,0) perde e as âncoras
   de desktop apareciam no celular, empurrando o logo para fora da tela.
   O seletor precisa empatar em peso, mesmo :not(.btn), mais a classe. */
.nav__links a:not(.btn).hide-sm{display:none}
@media(min-width:721px){ .nav__links a:not(.btn).hide-sm{display:inline-flex} }

/* Pular para o conteúdo: fora da tela até receber foco. */
.pular{position:absolute;left:-9999px;top:0;z-index:90;
  background:var(--gold);color:var(--gold-ink);font-weight:700;
  padding:12px 18px;border-radius:0 0 10px 0;text-decoration:none}
.pular:focus{left:0}

/* ─── menu sanduíche (só mobile) ──────────────────────────────── */
/* Ordem no HTML: .nav__check → .nav → .nav__veu → .nav__painel.
   Todo seletor de estado sai do checkbox com ~, que só enxerga irmãos
   POSTERIORES, por isso o input é o primeiro elemento do body. */
/* O checkbox some da vista mas continua no fluxo de foco: 1px recortado,
   o padrão de "visually hidden". display:none ou o atributo hidden o
   tirariam do Tab e o menu ficaria sem teclado. Fica ancorado no topo
   direito, sob a barra, para que o scroll não pule ao receber foco. */
.nav__check{position:fixed;top:14px;right:14px;width:1px;height:1px;
  opacity:0;margin:0;pointer-events:none;z-index:81}
.nav__burger{margin-left:4px;width:44px;height:44px;flex:0 0 44px;
  display:grid;place-items:center;cursor:pointer;border-radius:10px;
  border:1px solid var(--border);background:#ffffff08}
@media(min-width:721px){ .nav__burger{display:none} }

/* As três barras: uma real + duas ::before/::after deslocadas. No X a do
   meio some e as outras voltam ao centro giradas. */
.nav__burger-x,
.nav__burger-x::before,
.nav__burger-x::after{
  content:"";display:block;width:19px;height:2px;border-radius:2px;
  background:var(--text);transition:transform .22s ease,opacity .15s ease}
.nav__burger-x{position:relative}
.nav__burger-x::before{position:absolute;top:-6px}
.nav__burger-x::after{position:absolute;top:6px}
.nav__check:checked ~ .nav .nav__burger-x{background:transparent}
.nav__check:checked ~ .nav .nav__burger-x::before{transform:translateY(6px) rotate(45deg)}
.nav__check:checked ~ .nav .nav__burger-x::after{transform:translateY(-6px) rotate(-45deg)}
/* O foco vive no input escondido; o anel tem que aparecer no que se vê.
   O outline do próprio input é anulado, senão sobra um risco de 1px
   solto no canto, já que ele mede 1x1. */
.nav__check:focus-visible{outline:none}
.nav__check:focus-visible ~ .nav .nav__burger{outline:2px solid var(--gold);outline-offset:2px}

/* Véu discreto: o painel é uma folha junto ao botão, não uma tela cheia.
   Escurecer tudo faria a página sumir por causa de um menu de 7 linhas —
   aqui ele só apaga o fundo o suficiente para o toque fora ter alvo. */
.nav__veu{position:fixed;inset:0;z-index:60;background:rgba(8,10,14,.42);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.nav__check:checked ~ .nav__veu{opacity:1;visibility:visible}
@media(min-width:721px){ .nav__veu{display:none} }

/* Folha encostada no alto-direita, logo abaixo da barra, não a tela toda.
   Ocupar 100% da altura com 7 links deixava dois terços de vão morto e
   escondia a página inteira; assim o conteúdo por trás continua à vista,
   que é o que diz ao dedo que isto é uma camada e não outra página.
   A altura acompanha o conteúdo (max-height como teto, para telas baixas). */
.nav__painel{position:fixed;top:58px;right:10px;z-index:70;
  width:min(72vw,246px);max-height:calc(100dvh - 74px);
  background:var(--bg-2);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.85);
  padding:8px;margin-top:8px;
  display:flex;flex-direction:column;gap:2px;
  transform-origin:top right;
  opacity:0;transform:translateY(-8px) scale(.97);visibility:hidden;
  transition:opacity .18s ease,transform .22s cubic-bezier(.3,.8,.3,1),visibility .22s;
  overflow-y:auto;overscroll-behavior:contain}
.nav__check:checked ~ .nav__painel{opacity:1;transform:none;visibility:visible}
@media(min-width:561px){ .nav__painel{top:68px} }
@media(min-width:721px){ .nav__painel{display:none} }

.nav__painel a{text-decoration:none;color:var(--muted);font-size:16px;
  font-weight:500;padding:13px 12px;border-radius:10px;min-height:48px;
  display:flex;align-items:center;transition:color .15s,background .15s}
.nav__painel a:hover,.nav__painel a:active{color:var(--text);background:#ffffff0d}
/* "Entrar" fecha a lista: é ação, não seção. A linha acima separa. */
.nav__painel-entrar{margin-top:10px;padding-top:18px !important;
  border-top:1px solid var(--border);border-radius:0 !important;color:var(--text) !important}

/* Trava a rolagem do fundo enquanto o painel está aberto. */
body:has(.nav__check:checked){overflow:hidden}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:11px;text-decoration:none;
  font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;
  transition:transform .12s,box-shadow .2s,background .15s}
.btn--gold{background:var(--gold);color:var(--gold-ink);font-weight:700;
  box-shadow:0 6px 22px -8px rgba(224,179,65,.65)}
.btn--gold:hover{transform:translateY(-1px);box-shadow:0 12px 28px -10px rgba(224,179,65,.75)}
.btn--ghost{border-color:var(--border);color:var(--text);background:#ffffff08}
.btn--ghost:hover{background:#ffffff12}
.btn--sm{height:40px;padding:0 16px;font-size:14px}
.btn:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* rodapé */
.foot{border-top:1px solid var(--border);padding:40px 0;color:var(--muted);font-size:14px}
.foot__in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--text)}

/* "Desenvolvido por" — o crédito de quem fez, no rodapé.
   Discreto de propósito: é assinatura, não anúncio. Numa linha separada para
   não competir com o © e os links, que são do produto. */
.foot__by{display:inline-flex;align-items:center;gap:7px}
/* O logo é escuro (azul-marinho) e o rodapé aqui é claro: entra como está.
   opacity em vez de filtro — o verde da marca não deve virar cinza.
   A altura acompanha o texto ao lado: mais que isso e a linha cresce, que foi
   o que inchou o rodapé na primeira versão. */
.foot__by img{height:16px;width:auto;display:block;opacity:.75;transition:opacity .15s}
.foot__by a:hover img{opacity:1}


/* ─── dúvidas (landing e app-do-aluno) ───────────────────────── */
/* 760px é o limite de linha para leitura; sem o auto nas laterais isso ficava
   encostado na esquerda do .wrap de 1140px, com ~380px de vazio à direita. */
/* margin-left 0, não auto: o auto centralizava a coluna de 760px dentro do
   wrap de 1140, jogando os accordeons 166px à direita do título da seção
   (.sec__head é max-width sem auto, então fica à esquerda). O .faq__fecho
   logo abaixo já alinhava certo — só este bloco destoava. */
.faq{margin:44px 0 0;max-width:760px}
.faq__item{border-bottom:1px solid var(--border)}
.faq__item summary{
  cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font-weight:600;font-size:16.5px;color:var(--text);
  transition:color .15s}
.faq__item summary::-webkit-details-marker{display:none}   /* seta padrão do Safari */
.faq__item summary:hover{color:var(--gold)}
.faq__item summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;
  border-radius:6px}
/* O sinal é um + que vira ×: dois traços, o vertical gira e some. */
.faq__item summary::before,
.faq__item summary::after{content:"";position:absolute;right:8px;top:50%;
  width:15px;height:2px;border-radius:2px;background:var(--gold);
  transition:transform .22s ease}
.faq__item summary::before{transform:translateY(-50%)}
.faq__item summary::after{transform:translateY(-50%) rotate(90deg)}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(0)}
.faq__item[open] summary{color:var(--gold)}
.faq__resp{padding:4px 44px 24px 0;color:var(--muted);font-size:15px;
  display:flex;flex-direction:column;gap:12px}
.faq__resp b{color:var(--text);font-weight:600}

.faq__fecho{margin-top:46px;max-width:760px}
.faq__fecho > p{color:var(--muted);font-size:16px}
.faq__cta{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.faq__cta .btn{width:100%}
@media(min-width:561px){
  .faq__cta{flex-direction:row;flex-wrap:wrap}
  .faq__cta .btn{width:auto}
}
.faq__fine{margin-top:16px;font-size:13.5px;color:var(--muted)}


/* entrada suave, só uma vez, no load */