/* acesso.css — o visual das páginas de acesso (/entrar, /entrar/senha).
   Mesmo sistema do /links: creme, fio preto só onde contém, menta como única cor de ação,
   sombra dura deslocada nos botões. Uma coluna só, em qualquer tela: o acesso em foco na
   primeira dobra, cercado de espaço; o resto da história fica abaixo e é convidado, não
   empilhado (decisão do Nylton, 2026-09-26: as duas colunas no desktop saíram). */
@font-face{font-family:Museo;src:url(/produtos/_comum/fontes/Museo500-Regular.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Museo;src:url(/produtos/_comum/fontes/Museo700-Regular.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Museo;src:url(/produtos/_comum/fontes/Museo900-Regular.woff2) format('woff2');font-weight:900;font-display:swap}
/* Menta = só a ação principal (Entrar, Enviar código, Salvar), como no /links.
   O resto vem dos tons que a marca já usa: verdes claros (materiais-gratuitos, home),
   amarelo manteiga (home-v2) e roxo/lilás (LM, LF). Nada saturado em área grande. */
:root{--fundo:#F5F4F0;--fundo-2:#FFFFFF;--linha:#000;--fio:#DCD7CA;--tinta:#000;--suave:#333;
  --menta:#99FFCC;
  --amarelo:#FFE97A;--amarelo-claro:#FFF4C2;--verde:#0CF2B5;--verde-claro:#CFF7E7;
  --roxo:#6F47E5;--roxo-escuro:#4B3689;--lilas:#D9CCFF;
  --expressao:var(--roxo);--erro:#B42318;--ok:#067647}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--tinta);
  font-family:Museo,ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;
  letter-spacing:-0.2px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
::selection{background:var(--menta);color:var(--tinta)}
input{caret-color:var(--expressao)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w,.w-larga{margin:0 auto;padding:0 18px}
.w{max-width:476px}          /* 440 de conteúdo + gutter */
.w-larga{max-width:1236px}   /* o topo corre a largura da tela; o conteúdo fica estreito no meio */

/* ── topo ─────────────────────────────────────────────────────────────── */
.topo{position:relative;display:flex;justify-content:center;align-items:center;padding-top:26px;padding-bottom:26px}
.topo > a:not(.inicio){display:block;line-height:0}
/* largura fixa: percentual aqui é circular (o link encolhe ao conteúdo) e jogava o logo
   até 65px para fora do centro entre 461 e 979px */
.topo__marca{width:168px;filter:brightness(0)}
/* voltar: no celular é só a seta num círculo branco; o texto fica para leitor de tela */
.inicio{position:absolute;left:18px;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;background:var(--fundo-2);border:1px solid var(--fio);color:var(--tinta);
  text-decoration:none;transition:border-color .16s,background .16s}
.inicio span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.inicio:hover{border-color:var(--tinta)}
.inicio:focus-visible{outline:2px solid var(--expressao)}
.inicio svg{width:18px;height:18px;margin-left:-2px}
@media(max-width:460px){.topo__marca{width:min(128px,36vw)}}

/* ── cabeçalho da página ──────────────────────────────────────────────── */
.cab{text-align:center;margin:0 0 28px}
/* sem balance: o marca-texto é inline-block, e o balance empurrava palavra para a linha dele
   ("Entre na / sua área do aluno"); quebra comum dá "Entre na sua / área do aluno" */
.cab h1,.cab .h1{outline:none;font-weight:900;font-size:clamp(1.8rem,7vw,2.4rem);letter-spacing:-0.02em;line-height:1.08;margin:0 0 18px}
.cab p{color:var(--suave);margin:0;font-size:15px;text-wrap:balance}
.realce{position:relative;display:inline-block;z-index:0;margin:0 .06em}
.realce::before{content:"";position:absolute;z-index:-1;left:-.12em;right:-.12em;top:-.06em;bottom:-.1em;background:var(--menta);border-radius:2px}
.forma{position:absolute;pointer-events:none}

/* ── o formulário: o único cartão com fio preto, porque é a ação da página ── */
.login{background:var(--fundo-2);border:1px solid var(--linha);border-radius:18px;padding:26px 22px 24px}
.campo{display:block}
.campo + .campo,.erro + .campo{margin-top:18px}
.campo > span{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.campo input{width:100%;height:50px;padding:0 14px;border:1px solid #8F8A7E;border-radius:12px;
  font:inherit;font-size:16px;background:#fff;color:var(--tinta)}
.campo input:focus{outline:2px solid var(--expressao);outline-offset:1px;border-color:transparent}
.senha{position:relative;display:block}
.senha input{padding-right:84px}
.ver{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:36px;padding:0 12px;border:0;
  background:none;font:inherit;font-size:13px;font-weight:700;color:var(--suave);cursor:pointer;border-radius:8px}
.ver:focus-visible{outline:2px solid var(--expressao)}
.linha-util{display:flex;justify-content:flex-end;margin:12px 0 22px}
.linha-util a,.linha-util button{font:inherit;font-size:13px;color:var(--suave);background:none;border:0;padding:12px 4px;margin:-12px -4px;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.btn{width:100%;height:50px;border-radius:9999px;border:2px solid var(--tinta);background:var(--menta);
  box-shadow:3px 3px 0 var(--tinta);font:inherit;font-size:16px;font-weight:900;color:var(--tinta);cursor:pointer;
  transition:transform .14s,box-shadow .14s,background .16s}
.btn:hover{background:#7DF5B8;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinta)}
.btn:focus-visible{outline:2px solid var(--expressao);outline-offset:3px}
.btn[disabled],.btn[disabled]:hover{cursor:progress;background:var(--menta);transform:none;box-shadow:3px 3px 0 var(--tinta)}
/* todo link e botão de texto usa o mesmo anel roxo (os da página não caem no do navegador) */
a:focus-visible,button:focus-visible{outline:2px solid var(--expressao);outline-offset:2px;border-radius:4px}

/* ── erro: mora no campo que falhou ─────────────────────────────────────── */
.campo--erro > span{color:var(--erro)}
.campo input[aria-invalid="true"]{border-color:var(--erro);box-shadow:0 0 0 3px #FDE7E4;background:#FFFCFB}
.erro{display:flex;gap:7px;align-items:flex-start;margin:7px 2px 0;font-size:13.5px;line-height:1.4;color:var(--erro)}
.erro[hidden]{display:none}
.erro svg{flex:0 0 auto;width:15px;height:15px;margin-top:2px}
.erro a,.erro button{font:inherit;color:var(--erro);font-weight:700;background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.erro--geral{justify-content:center;text-align:center;margin:12px 0 0}
.caps{display:flex;gap:6px;align-items:center;margin:7px 2px 0;font-size:12.5px;font-weight:700;color:var(--suave)}
.caps[hidden]{display:none}
.caps svg{width:14px;height:14px}
@media(prefers-reduced-motion:no-preference){
  .treme{animation:treme .34s cubic-bezier(.36,.07,.19,.97)}
  @keyframes treme{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}}

/* ── rodapé ───────────────────────────────────────────────────────────── */
/* rodapé: só o essencial — marca, ajuda e ©. Uma linha no desktop, empilhado no celular. */
.pe{margin-top:88px;border-top:1px solid var(--fio);font-size:13.5px;color:var(--suave)}
.pe .pe__in{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:30px;padding-bottom:34px;text-align:center}
.pe__marca{display:block;line-height:0}
.pe__marca img{width:112px;filter:brightness(0)}
.pe__ajuda,.pe__copy{margin:0}
.pe__ajuda a{color:var(--tinta);font-weight:700;text-decoration-color:var(--menta);text-decoration-thickness:3px;text-underline-offset:3px}
.pe__ajuda a:hover{text-decoration-color:var(--tinta)}
.pe__copy{font-size:12px;color:#6B665C}

/* ── desktop: a mesma coluna, com mais ar em volta ─────────────────────── */
@media(min-width:980px){
  .w,.w-larga{padding:0 56px}
  .w{max-width:552px}
  .topo{padding-top:32px;padding-bottom:32px}
  .topo__marca{width:168px}
  .inicio{left:56px;width:auto;height:auto;display:inline-flex;gap:6px;padding:7px 14px 7px 9px;border-radius:999px;
    font-size:13px;font-weight:700;color:var(--suave)}
  .inicio span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .inicio:hover{color:var(--tinta)}
  .pe .pe__in{flex-direction:row;justify-content:space-between;gap:24px;padding-top:26px;padding-bottom:30px}
  .cab{margin-bottom:34px}
  .cab h1,.cab .h1{font-size:clamp(2.4rem,3vw,2.9rem);line-height:1.04}
  .cab p{font-size:16px}
  .login{padding:30px 28px 28px}
}