/* Área do aluno no visual da landing (carrega depois de /lp/lp.css e usa os mesmos tokens).
   Fundo escuro com luz azul no topo, cartões de vidro, botão prata com seta azul,
   pílula mono só no selo de seção. */

body.al {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(60% 38% at 50% -6%, rgba(26, 75, 255, .30), transparent 70%),
    radial-gradient(40% 30% at 90% 10%, rgba(92, 141, 255, .10), transparent 70%),
    var(--bg);
}
.al .barra { position: relative; z-index: 2; background: rgba(10, 13, 20, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.al .barra form { margin: 0; }
.al .btn-borda { cursor: pointer; }
.al-main { flex: 1; padding: 0 0 56px; }

/* ---------- topo ---------- */
.al-topo { padding-top: 48px; padding-bottom: 8px; display: grid; gap: 18px; justify-items: start; }
.al-ola { margin: 0; }
@media (min-width: 900px) { .al-topo { padding-top: 72px; } }

.al-sec { margin-top: 32px; }
.al-sec-titulo { font-size: 15px; font-weight: 500; color: var(--tx-2); letter-spacing: 0; margin: 0 0 14px; }

/* ---------- aula ---------- */
.al-aula {
  display: grid; gap: 20px; padding: 14px; border-radius: 22px;
  border: 1px solid var(--linha-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  box-shadow: 0 30px 80px -40px rgba(26, 75, 255, .55);
}
.al-aula-tela { position: relative; border-radius: 14px; overflow: hidden; background: #05070C; aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px rgba(143, 176, 255, .18); }
.al-aula-tela video { width: 100%; height: 100%; object-fit: contain; background: #05070C; }
.al-aula-info { display: grid; gap: 8px; align-content: center; padding: 4px 6px 8px; }
.al-aula-info .h3 { color: #fff; }
@media (min-width: 900px) {
  .al-aula { grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); padding: 16px; gap: 28px; }
  .al-aula-info { padding: 8px 12px 8px 0; }
}

.al-desc { color: var(--tx-2); font-size: 15px; line-height: 1.55; }
.al-erro { color: #FFB4A8; font-size: 14px; }

/* ---------- arquivos ---------- */
.al-grade { display: grid; gap: 12px; }
@media (min-width: 760px) { .al-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

.al-arq {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic tx" "bt bt";
  gap: 14px 16px; align-items: start; padding: 18px; border-radius: var(--raio);
  border: 1px solid var(--linha); background: rgba(255, 255, 255, .03);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.al-arq:hover { border-color: rgba(143, 176, 255, .35); background: rgba(92, 141, 255, .05); }
@media (min-width: 520px) {
  .al-arq { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic tx bt"; align-items: center; }
}
.al-arq-icone {
  grid-area: ic; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  color: var(--az-tx); background: rgba(92, 141, 255, .10); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .28);
}
.al-arq-texto { grid-area: tx; display: grid; gap: 4px; min-width: 0; }
.al-arq-texto h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: #fff; }
.al-formato { font-family: var(--fm); font-size: 12px; letter-spacing: .02em; color: var(--tx-3); }

.al-baixar {
  grid-area: bt; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 12px; text-decoration: none; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: #0A0D14;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6E9EF 55%, #CBD1DB 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(10, 13, 20, .12), 0 10px 26px -12px rgba(40, 90, 255, .8);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.al-baixar .icone { width: 18px; height: 18px; color: var(--az-1); }
.al-baixar:hover { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(143, 176, 255, .9), 0 14px 34px -10px rgba(60, 110, 255, .95); }
.al-baixar:active { transform: translateY(1px); }

.al-nota { color: var(--tx-3); font-size: 14px; }

.al-suporte {
  display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--raio);
  border: 1px dashed var(--linha-2); color: var(--tx-2); font-size: 15px;
}
.al-suporte a { color: var(--az-tx); text-underline-offset: 3px; }

/* ---------- telas de entrada (login, entrar, e-mail enviado) ---------- */
.al-entrada .al-main { display: grid; place-items: start center; padding: 56px var(--lado) 56px; }
@media (min-width: 900px) { .al-entrada .al-main { padding-top: 96px; } }
.al-cartao {
  width: 100%; display: grid; gap: 16px; justify-items: start; padding: 28px 24px; border-radius: 22px;
  border: 1px solid var(--linha-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  box-shadow: 0 30px 80px -40px rgba(26, 75, 255, .55);
}
.al-estreito { max-width: 480px; }
.al-titulo { margin: 0; }
.al-cartao .sub { font-size: 16px; }
.al-form { width: 100%; display: grid; gap: 8px; margin-top: 4px; }
.al-form label { font-size: 14px; font-weight: 500; color: var(--tx-2); }
.al-form input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 16px; color: var(--tx);
  background: rgba(5, 7, 12, .6); border: 1px solid var(--linha-2); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.al-form input::placeholder { color: #5E6678; }
.al-form input:focus { border-color: rgba(143, 176, 255, .8); box-shadow: 0 0 0 3px rgba(92, 141, 255, .2); }
.al-form .btn { margin-top: 10px; }
.al-aviso { width: 100%; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; color: #FFD2CA; background: rgba(255, 90, 60, .10); border: 1px solid rgba(255, 120, 90, .35); }

/* ---------- rodapé discreto ---------- */
.al .rodape { margin-top: auto; padding: 22px 16px 36px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--tx-3); border-top: 1px solid var(--linha); }
.al .rodape p { margin: 2px 0; }
.al .rodape strong { color: var(--tx-2); font-weight: 600; }
.al .rodape a { color: var(--tx-3); text-underline-offset: 2px; }
.al .rodape a:hover { color: var(--tx); }

@media (prefers-reduced-motion: reduce) { .al-arq, .al-baixar { transition: none; } }

/* o kit: o arquivo principal, ocupa a linha inteira e ganha a borda azul */
.al-arq-destaque { border-color: rgba(143, 176, 255, .45); background: linear-gradient(120deg, rgba(26, 75, 255, .16), rgba(92, 141, 255, .04)); }
@media (min-width: 760px) { .al-arq-destaque { grid-column: 1 / -1; } }
.al-arq-destaque .al-arq-icone { color: #fff; background: var(--az-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px -6px rgba(26, 75, 255, .9); }
.al-nw { white-space: nowrap; }