/* ============================================================================
   LOGIN · aluno (entrar.html) e área restrita (admin-entrar.html)
   2026-10-03: no formato da área do aluno de referência (_dev/g4-spec.md §1, §3.1, §3.7, §3.8).
   Topo navy de 70 px com o logo de 60 px; ações no formato do topo (links 17/400 com
   sublinhado de 2 px no ativo, suporte 14/400); corpo em 2 colunas de 49,2 % no contêiner
   de 1170 com recuo de 25; rodapé de 4 colunas. Texto pela escala de ds-tokens.css
   (muda por faixa: ≥991 100 %, 768–990 90 %, 501–767 80 %, ≤500 100 %).
   Só tokens --ds-* (cores nossas). Nada aqui copia código da referência: só medidas.
   2026-10-03 (voz do modelo, _dev/g4-startups-spec.md): título leve (Manrope 400) com 1 trecho
   em .ds-em, etiqueta-pílula em cima do título, rótulo de campo 600, botão 800, texto fluido
   com clamp() (--ds-fl-*). O layout (caixas e ordem) é o mesmo. Celular e tablet em pé:
   1 coluna, textos centrados, cartão com no máximo 560 px, botão com 100 % da largura.
   Tela grande: o topo acompanha a coluna de 1170 e o texto cresce até o teto do clamp.
   ========================================================================== */

body.en{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  font:var(--ds-f-fl-texto); color:var(--ds-tinta);
}

/* pular para o formulário (aparece só com o foco do teclado) */
body.en .en-pular{
  position:absolute; left:16px; top:-120px; z-index:100;
  display:inline-flex; align-items:center; min-height:44px; padding:0 20px;
  background:var(--ds-branco); color:var(--ds-navy); border-radius:var(--ds-r-pilula);
  font-weight:var(--ds-peso-botao); font-size:15px; text-decoration:none; box-shadow:var(--ds-sombra-card);
}
body.en .en-pular:focus{ top:12px; }
/* foco sobre o topo e o rodapé navy: o anel navy sumia (1,2:1); fica ouro (6,7:1) */
body.en .en-topo :focus-visible, body.en .en-rodape :focus-visible, body.en .en-pular:focus-visible{ outline-color:var(--ds-ouro); }

/* ---------- topo: barra inteira de 70 px, logo 60 px a 74 px da borda ---------- */
.en-topo{ flex:none; background:var(--ds-navy); color:var(--ds-papel); }
.en-topo-in{
  display:flex; align-items:center; flex-wrap:wrap; column-gap:24px;
  min-height:var(--ds-topo);
  /* até 1512 o logo fica a 74 px da borda (medida da referência). Acima disso ele anda para dentro,
     sem salto, até alinhar com a coluna de 1170 (em 1920): nada solto no canto da tela grande.
     À direita a última ação termina na borda da coluna em toda largura (x≈1307 em 1512). */
  padding:0 max(15px, calc((100% - var(--ds-largura)) / 2 + 8.5px)) 0 max(74px, min(calc(50vw - 560px), calc(74px + (100vw - 1512px) * .8)));
}
body.en .en-topo-logo{ display:inline-flex; align-items:center; flex:none; min-height:44px; border-radius:4px; }
body.en .en-topo-logo img{ display:block; height:60px; width:auto; max-width:none; }
.en-topo-acoes{ display:flex; align-items:center; flex-wrap:wrap; gap:0 28px; margin-left:auto; }

/* links do topo: texto de menu fluido (14–16), 400; o modo ativo ganha a borda inferior de 2 px */
body.en .en-pilula{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; margin:0; padding:8px 0 6px;
  border:0; border-bottom:2px solid transparent; border-radius:0;
  background:none; color:var(--ds-papel);
  font:var(--ds-f-fl-menu); white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:border-color var(--ds-t) var(--ds-ease), color var(--ds-t) var(--ds-ease);
}
body.en .en-pilula[aria-pressed="true"],
body.en:has(#enCartao[data-modo="login"]) #pilAcessar{ border-bottom-color:var(--ds-papel); }
@media (hover:hover){ body.en .en-pilula:hover{ color:var(--ds-branco); border-bottom-color:rgba(245,244,243,.55); } }
body.en .en-pilula[aria-pressed="true"]:hover,
body.en:has(#enCartao[data-modo="login"]) #pilAcessar:hover{ border-bottom-color:var(--ds-papel); }

/* "Preciso de suporte": botão de contorno do topo (modelo: contorno de 1 px, peso 600), 44 px de toque */
body.en #pilSuporte{
  order:-1; padding:9px 24px; margin-right:5px;
  border:1px solid rgba(245,244,243,.55); border-radius:var(--ds-r-pilula);
  font:var(--ds-peso-item) var(--ds-fl-menu)/1.4 var(--ds-fonte);
}
@media (hover:hover){ body.en #pilSuporte:hover{ border-color:var(--ds-papel); } }

/* ---------- corpo: 2 colunas de 49,2 % (espaço 1,6 %) no contêiner de 1170 ---------- */
/* o bloco fica no meio da altura que sobra (tela alta ou grande: nada colado no topo com vazio embaixo) */
.en-corpo{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; background:var(--ds-papel); }
.en-corpo-in{
  display:grid;
  grid-template-columns:calc(var(--ds-col-6) - var(--ds-gutter)) calc(var(--ds-col-6) - var(--ds-gutter));
  justify-content:space-between;
  grid-template-areas:
    ".      cartao"
    "sobre  cartao"
    "titulo cartao"
    "apoio  cartao"
    ".      cartao";
  grid-template-rows:1fr auto auto auto 1fr;
  padding-block:60px;
}
/* etiqueta-pílula em cima do título (classe global .ds-etiqueta: borda de 1 px, 12 px MAIÚSCULO) */
.en-sobre{
  grid-area:sobre; justify-self:start; margin:0 0 18px;
  color:var(--ds-navy);
}
/* título da página: Manrope 400 + 1 trecho em .ds-em. Fluido: 28 px até 900, 40 em 1512, 50 de teto */
.en-titulo{
  grid-area:titulo; margin:0;
  font:var(--ds-peso-titulo) clamp(28px, calc(2vw + 10px), 50px)/1.15 var(--ds-fonte); letter-spacing:-.01em;
  color:var(--ds-navy); text-wrap:balance;
}
.en-titulo .ds-em{ letter-spacing:0; }
.en-apoio{
  grid-area:apoio; margin:24px 0 0; max-width:46ch;
  font:400 clamp(16px, 1.1vw, 20px)/1.5 var(--ds-fonte); color:var(--ds-tinta);
}

/* ---------- cartão do login: branco, raio 24, padding 30, sem sombra (cartão do curso) ---------- */
.en-cartao{
  grid-area:cartao; align-self:center;
  background:var(--ds-branco); border-radius:24px;
  padding:30px;
}
.en-cartao-titulo{ margin:0; font:var(--ds-f-fl-secao); color:var(--ds-navy); }
.en-cartao-sub{ margin:8px 0 0; font:var(--ds-f-fl-texto); color:var(--ds-tinta-2); }

.en-form{ margin:0; }
.en-form label{
  display:block; margin:20px 0 6px;
  font:var(--ds-peso-item) var(--ds-fl-dado)/1.4 var(--ds-fonte); color:var(--ds-tinta);
}
/* campo: fundo de campo, raio 4, padding lateral 22; 44 de altura no celular até 52 na tela grande;
   16 px para o iOS não ampliar */
.en-form input{
  display:block; width:100%; height:clamp(44px, 3vw, 52px); margin:0; padding:0 22px;
  font-family:var(--ds-fonte); font-size:clamp(16px, 1vw, 18px); font-weight:400; line-height:1.2; color:var(--ds-tinta);
  background:var(--ds-campo); border:1px solid #7A848E; border-radius:var(--ds-r-campo); /* borda 3,8:1 (controle ≥ 3:1) */
  transition:border-color var(--ds-t) var(--ds-ease), box-shadow var(--ds-t) var(--ds-ease), background-color var(--ds-t) var(--ds-ease);
}
.en-form input::placeholder{ color:#6B7580; opacity:1; } /* 4,7:1 */
.en-form input:hover{ border-color:var(--ds-tinta-2); }
.en-form input:focus{ background:var(--ds-branco); border-color:var(--ds-navy); box-shadow:0 0 0 3px rgba(0,31,53,.10); }

/* botão principal: navy, pílula, 100 % da largura; voz do modelo: 16 px / 800, 58 px (56 no celular) */
body.en .en-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:58px; margin:25px 0 0; padding:15px 40px;
  border:0; border-radius:var(--ds-r-pilula);
  background:var(--ds-navy); color:var(--ds-papel);
  font:var(--ds-peso-botao) clamp(16px, 1vw, 18px)/1.2 var(--ds-fonte); text-align:center;
  cursor:pointer;
  transition:background-color var(--ds-t) var(--ds-ease), transform var(--ds-t) var(--ds-ease);
}
body.en .en-btn:hover{ background:var(--ds-navy-2); }
body.en .en-btn:active{ transform:translateY(1px); }
.en-btn svg{ width:18px; height:18px; flex:none; }

/* links em forma de botão (esqueci a senha, voltar): 14–16 / 400 */
.en-acoes{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:4px 16px; margin:8px 0 0; }
body.en .en-link{
  display:inline-flex; align-items:center; min-height:44px; padding:0 2px; margin:0;
  background:none; border:0; cursor:pointer;
  font:400 var(--ds-fl-dado)/1.4 var(--ds-fonte);
  color:var(--ds-navy); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(0,31,53,.35);
}
body.en .en-link:hover{ color:var(--ds-tijolo); text-decoration-color:currentColor; }

/* mensagem de erro e de sucesso. Erro = --ds-erro. O script pinta o sucesso com
   style.color = #2E6B57 (--ds-ok). A regra abaixo cobre o HTML antigo em cache. */
.en-msg{
  margin:12px 0 0; min-height:22px;
  font:var(--ds-peso-item) var(--ds-fl-dado)/1.45 var(--ds-fonte); text-align:center;
  color:var(--ds-erro);
}
.en-msg[style*="159, 211, 180"], .en-msg[style*="9FD3B4"], .en-msg[style*="9fd3b4"]{ color:var(--ds-ok) !important; }

/* rodapé do cartão: troca de área */
.en-troca{
  margin:20px 0 0; padding-top:12px; border-top:1px solid var(--ds-linha);
  font:400 var(--ds-fl-dado)/1.5 var(--ds-fonte); color:var(--ds-tinta-2); text-align:center;
}
body.en .en-troca a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
  font-weight:var(--ds-peso-item); color:var(--ds-navy); text-underline-offset:3px;
}
body.en .en-troca a:hover{ color:var(--ds-tijolo); }

/* etiqueta da área restrita: pílula clara com o cadeado de contorno (18 px, traço 2) */
.en-etiqueta{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
  padding:5px 14px; border-radius:var(--ds-r-pilula);
  background:var(--ds-coral-claro); color:var(--ds-tijolo);
  font:var(--ds-peso-item) 12px/1.5 var(--ds-fonte);
  letter-spacing:.08em; text-transform:uppercase;
}
.en-etiqueta svg{ width:18px; height:18px; flex:none; }

/* ---------- rodapé: navy, padding 40/30, 4 colunas de 23,8 % (espaço 1,6 %) com recuo de 25 ---------- */
.en-rodape{ flex:none; background:var(--ds-navy); color:var(--ds-papel); padding:40px 0 30px; }
.en-rodape-in{
  display:grid; grid-template-columns:repeat(4, var(--ds-col-3)); column-gap:var(--ds-col-espaco);
  width:100%; max-width:calc(var(--ds-largura) + 2*var(--ds-gutter)); margin:0 auto;
}
.en-rodape-col{ min-width:0; padding:0 var(--ds-gutter); }
body.en .en-rodape-logo{ display:block; height:40px; width:auto; max-width:100%; }
.en-rodape-titulo{ margin:0; font:var(--ds-f-h3); color:var(--ds-papel); }
.en-rodape-col ul{ list-style:none; margin:0; padding:0; }
body.en .en-rodape-col a{
  display:inline-flex; align-items:center; min-height:44px;
  font:400 var(--ds-fl-texto)/1.5 var(--ds-fonte); color:var(--ds-branco); text-decoration:none;
}
@media (hover:hover){ body.en .en-rodape-col a:hover{ text-decoration:underline; text-underline-offset:3px; } }
.en-rodape-copy{
  margin:25px 0 0; padding:0 var(--ds-gutter); text-align:center;
  font:400 var(--ds-fl-dado)/1.5 var(--ds-fonte); color:var(--ds-papel);
}

/* ---------- tablet deitado (991–1366.98): igual ao desktop ---------- */

/* ---------- tablet em pé e celular (≤ 990.98): 1 coluna, textos centrados, cartão de até 560 px ---------- */
@media (max-width:990.98px){
  .en-topo-in{ padding-inline:var(--ds-gutter) 15px; }
  .en-corpo-in{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"sobre" "titulo" "apoio" "cartao";
    grid-template-rows:auto;
    justify-items:center;
    padding-block:40px 60px;
  }
  .en-sobre{ justify-self:center; }
  .en-titulo, .en-apoio{ text-align:center; }
  .en-apoio{ margin-top:16px; }
  .en-cartao{ width:100%; max-width:560px; margin-top:30px; align-self:stretch; }
  .en-rodape-in{ grid-template-columns:repeat(2, var(--ds-col-6)); row-gap:var(--ds-linha-cards); }
}
/* ---------- celular (≤ 767.98): rodapé empilhado; só "Primeiro acesso" no topo ---------- */
@media (max-width:767.98px){
  .en-topo-in{ column-gap:16px; }
  body.en #pilAcessar{ display:none; }   /* a função continua: "Voltar para o login" no cartão */
  .en-rodape-in{ grid-template-columns:minmax(0,1fr); row-gap:var(--ds-linha-cards); }
  body.en .en-btn{ min-height:56px; }
}
/* ---------- celular em pé (≤ 500.98): logo de 150 px de largura ---------- */
@media (max-width:500.98px){
  body.en .en-topo-logo img{ width:150px; height:auto; }
  .en-topo-acoes{ gap:0 16px; }
  body.en #pilSuporte{ padding-inline:16px; margin-right:0; }
  .en-corpo-in{ padding-block:30px 50px; }
  .en-cartao{ padding:25px 20px; }
  body.en .en-btn{ padding-inline:20px; }
  .en-titulo{ overflow-wrap:break-word; }
}
/* 320–360: com o suporte ligado, o logo de 150 e duas ações não cabem lado a lado: o logo encolhe */
@media (max-width:360px){
  body.en .en-topo-logo{ flex:0 1 auto; min-width:0; }
  body.en .en-topo-logo img{ width:auto; max-width:100%; height:auto; max-height:48px; }
  body.en .en-topo-logo{ max-width:130px; }
}

/* telas baixas deitadas: nada fica preso fora da tela */
@media (max-height:520px) and (orientation:landscape){
  .en-corpo-in{ padding-block:24px 32px; }
}

@media (prefers-reduced-motion:reduce){
  body.en .en-pilula, body.en .en-btn, .en-form input{ transition:none; }
  body.en .en-btn:active{ transform:none; }
}