/* Apogeu Academy — camada de marca sobre o app.css do MembroClub.
   Servida de BRAND_DIR (/marca.css) e carregada depois do app.css, entao os
   seletores daqui vencem sem precisar de !important.

   O xadrez diagonal e a assinatura visual do Apogeu: dois gradientes de 45 graus
   deslocados em meio quadrado, iguais aos da lp.apogeudopalestrante.com.br.
   Vive num ::before mascarado para nao competir com o conteudo. */

:root {
  --brasa-300: #FBC97A;
  --brasa-400: #FBB44C;
  --brasa-500: #ED7D2B;
  --brasa-600: #D9641A;
  --brasa-700: #B23E0C;
  --grafite-950: #141417;
  --grafite-900: #1C1C20;
  --grafite-800: #2A2A30;
  --marfim: #F6F4F1;

  /* o app.css usa --page como fundo geral; marfim no lugar do cinza esverdeado */
  --page: #F1EEEA;
}

/* ============================ xadrez reutilizavel ========================= */

.xadrez-fundo,
.acesso,
.topo,
.hero {
  position: relative;
  isolation: isolate;
}

.xadrez-fundo::before,
.acesso::before,
.topo::before,
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.055;
  background-image:
    linear-gradient(45deg, var(--marfim) 25%, transparent 25%, transparent 75%, var(--marfim) 75%),
    linear-gradient(45deg, var(--marfim) 25%, transparent 25%, transparent 75%, var(--marfim) 75%);
  background-size: 96px 96px;
  background-position: 0 0, 48px 48px;
}

/* No mobile o quadrado de 96px vira quase uma listra: reduz junto com a tela. */
@media (max-width: 720px) {
  .xadrez-fundo::before,
  .acesso::before,
  .topo::before,
  .hero::before {
    background-size: 64px 64px;
    background-position: 0 0, 32px 32px;
  }
}

/* ================================= login ================================== */

.acesso {
  background: radial-gradient(80% 70% at 50% 0%, #26262C, var(--grafite-950) 75%);
}
/* xadrez esmaecendo do topo para a base, como no hero da LP */
.acesso::before {
  -webkit-mask-image: radial-gradient(75% 65% at 50% 25%, #000, transparent 82%);
  mask-image: radial-gradient(75% 65% at 50% 25%, #000, transparent 82%);
}
/* brilho brasa subindo do rodape */
.acesso::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(237, 125, 43, 0.16), transparent 75%);
}

.acesso__caixa {
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}
/* O logo aqui e so o elmo: o nome vem do texto ao lado, sem repetir a marca. */
.acesso__marca { --marca-balao: transparent; }
.acesso__marca img { width: auto; max-height: 72px; }
.acesso__marca .eyebrow { color: var(--brasa-600); }

/* ============================= topo (navegacao) ============================ */

.topo {
  background: var(--grafite-950);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.topo::before {
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
/* Elmo + "Apogeu Academy" escrito. O logo com o nome embutido brigava com o
   texto ao lado, entao aqui entra so o simbolo. */
.topo img.marca__logo { max-height: 32px; width: auto; }
.marca { gap: 11px; }
.marca__nome { letter-spacing: -0.01em; }

/* ================================== hero ================================== */

.hero {
  background: radial-gradient(85% 75% at 30% 0%, #26262C, var(--grafite-950) 78%);
}
.hero::before {
  -webkit-mask-image: radial-gradient(70% 70% at 40% 30%, #000, transparent 80%);
  mask-image: radial-gradient(70% 70% at 40% 30%, #000, transparent 80%);
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 100% at 35% 100%, rgba(237, 125, 43, 0.14), transparent 75%);
}
.hero h1 em { font-style: italic; color: var(--brasa-400); }

/* ============================== cartoes de curso ========================== */

/* Capa sem imagem cai no monograma sobre fundo liso; aqui ganha o xadrez. */
.curso__capa {
  background-color: var(--grafite-900);
  background-image:
    linear-gradient(45deg, rgba(246, 244, 241, 0.045) 25%, transparent 25%, transparent 75%, rgba(246, 244, 241, 0.045) 75%),
    linear-gradient(45deg, rgba(246, 244, 241, 0.045) 25%, transparent 25%, transparent 75%, rgba(246, 244, 241, 0.045) 75%);
  background-size: 56px 56px;
  background-position: 0 0, 28px 28px;
}
.curso__capa img { z-index: 1; }
.curso__cadeado { z-index: 2; }
.curso__mono { position: relative; z-index: 1; color: var(--brasa-400); }

/* ============================== responsivo ================================ */

/* O app.css ja quebra em 720px. Estes ajustes cobrem o telefone estreito, onde
   a barra de navegacao e o bloco do usuario disputavam a mesma linha. */
@media (max-width: 720px) {
  .topo__inner {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 18px;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .usuario { margin-left: auto; }
  .usuario__texto { display: none; }
  .marca__nome { font-size: 17px; }
}

@media (max-width: 420px) {
  .acesso { padding: 24px 14px; }
  .acesso__marca img { max-height: 54px; }
  .hero { padding-bottom: 48px; }
  .secao { padding: 36px 0 28px; }
  .secao__titulo { font-size: 25px; }
}

/* Nenhuma tabela ou bloco largo deve empurrar a pagina na horizontal. */
body { overflow-x: hidden; }
.tabela-rolavel { overflow-x: auto; }