/* Entrada do EPGO (login.html): canvas 3D fixo atrás, capítulos em rolagem por cima,
   HUD técnico nos cantos e o cartão de acesso no fim. Visual sempre escuro. */
:root {
  --deep: #040c1e;
  --navy: #071a3d;
  --blue: #1677e8;
  --ice: #9cc8ff;
  --gold: #e6b94a;
  --ink: #e9eff9;
  --ink-2: #9fb0cd;
  --line: rgba(120, 160, 230, 0.22);
  --f-display: "Poppins", "Archivo", system-ui, sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--deep); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(2, 6, 16, 0.75) 100%); }

/* HUD */
.hud { position: fixed; z-index: 5; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); pointer-events: none; }
.hud-tl { top: calc(18px + env(safe-area-inset-top, 0px)); left: max(18px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 12px; }
.hud-brand { display: flex; align-items: center; gap: 10px; opacity: 0; }
.hud-brand img { height: 32px; width: auto; }
.hud-brand svg { height: 21px; width: auto; overflow: visible; }
.hud-tr { top: calc(16px + env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); pointer-events: auto; display: flex; gap: 8px; }
.hud-tr, .hud-bl { transition: opacity 0.3s; }
.hud.away { opacity: 0; pointer-events: none; }
.hud-bl { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: max(18px, env(safe-area-inset-left, 0px)); display: grid; gap: 8px; width: min(240px, 42vw); }
.hud-br { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); text-align: right; display: grid; gap: 4px; }
.hud b { color: var(--ink); font-weight: 500; }
.meter { height: 2px; background: rgba(159, 176, 205, 0.18); border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--ice)); box-shadow: 0 0 10px var(--blue); }
.pill { cursor: pointer; font: 600 13px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); text-decoration: none;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(7, 26, 61, 0.55); backdrop-filter: blur(8px); }
.pill.solid { background: linear-gradient(180deg, #2a86ff, #1463d6); border-color: transparent; box-shadow: 0 6px 20px rgba(22, 119, 232, 0.45); }
/* "Planos": mesmo formato no celular e no computador. */
.pill--quiet { background: rgba(7, 26, 61, 0.45); color: var(--ink-2); }
.pill--quiet:hover { color: var(--ink); }
/* Celular: botões um pouco mais compactos para os três caberem. */
@media (max-width: 560px) {
  .hud-tr { gap: 6px; right: max(12px, env(safe-area-inset-right, 0px)); }
  .hud-tr .pill { padding: 9px 12px; font-size: 12.5px; }
}
@media (max-width: 400px) { .hud-brand svg { display: none; } }
@media (max-width: 380px) {
  .hud-tr .pill { padding: 8px 10px; font-size: 12px; }
  .hud-tl { left: max(12px, env(safe-area-inset-left, 0px)); }
}
.pill:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Capítulos */
main { position: relative; z-index: 3; }
.chapter { min-height: 100vh; display: flex; align-items: center; padding-block: 18vh; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.chapter .wrap { width: min(1180px, 100%); margin: 0 auto; }
.chapter .copy { max-width: 30rem; display: grid; gap: 14px; }
.chapter.right .copy { margin-left: auto; text-align: left; }
.chapter.center .copy { margin: 0 auto; text-align: center; justify-items: center; max-width: 44rem; }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.center .eyebrow::before { display: none; }
h1, h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 7vw, 92px); }
h2 { font-size: clamp(32px, 4.6vw, 60px); }
.grad { background: linear-gradient(90deg, #1f6bff, #3b8cff 55%, #9cc8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: #c4d2ea; font-size: clamp(16px, 1.4vw, 19px); margin: 0; max-width: 34ch; }
.center .lead { max-width: 44ch; }
.spec { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0.08em; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.spec span b { color: var(--ice); font-weight: 500; }
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-2); text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--ice), transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.js .chapter .copy > * { transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); }
.js .chapter:not(.in) .copy > * { opacity: 0; transform: translateY(26px); }
.js .chapter.in .copy > *:nth-child(2) { transition-delay: 0.08s; }
.js .chapter.in .copy > *:nth-child(3) { transition-delay: 0.16s; }
.js .chapter.in .copy > *:nth-child(4) { transition-delay: 0.24s; }

/* Logo da cena da marca: centrada nos prédios. Escala máxima 1 e sem will-change,
   para o navegador desenhar o vetor no tamanho final (nada esticado, nada borrado). */
#bigLogo { position: fixed; z-index: 2; left: 50%; top: 55vh; width: min(360px, 64vw); height: auto; overflow: visible; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8); opacity: 0; filter: drop-shadow(0 6px 26px rgba(4, 12, 30, 0.85)) drop-shadow(0 0 30px rgba(22, 119, 232, 0.35)); }

/* Cadastro */
/* Cena da marca: o título para no alto e a logo cresce embaixo, antes do cartão chegar. */
.chapter#marca { display: block; height: 200vh; min-height: 0; padding-block: 0; }
#marca .wrap { position: sticky; top: 13vh; }
#marca .copy { background: none; }
/* O cartão fica parado no centro da tela enquanto a rolagem segue até a obra recomeçar.
   --card-top vem do entrada.js; cartão mais alto que a tela (.tall) rola normalmente. */
.chapter.signup { display: block; position: relative; height: 210vh; min-height: 0; padding-block: 0; }
.signup .wrap { position: sticky; top: var(--card-top, 16px); }
.signup.tall .wrap { position: static; padding-top: 12vh; }
.entry-card { width: min(420px, 100%); margin-left: auto; padding: 20px 24px 16px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(20, 40, 80, 0.62), rgba(8, 18, 40, 0.62)); border: 1px solid rgba(120, 160, 230, 0.24);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); display: grid; gap: 12px; }
.entry-card h2 { font-size: clamp(22px, 2.2vw, 27px); }
.entry-card .lead { font-size: 14px; line-height: 1.45; }
.field { display: grid; gap: 5px; }
.field label { font-size: 13px; font-weight: 600; color: #d6e1f3; }
.field input { font: inherit; font-size: 15px; color: #fff; background: rgba(4, 12, 30, 0.7); border: 1px solid rgba(120, 160, 230, 0.24); border-radius: 10px; padding: 10px 13px; width: 100%; box-sizing: border-box; }
.field input::placeholder { color: #61739a; }
.field input:focus { border-color: #3b8cff; box-shadow: 0 0 0 4px rgba(59, 140, 255, 0.18); outline: none; }
.entry-card .go { font: 700 15.5px/1 var(--f-body); color: #fff; border: 0; border-radius: 11px; padding: 13px 18px; cursor: pointer;
  background: linear-gradient(180deg, #2a86ff, #1463d6); box-shadow: 0 10px 30px rgba(22, 119, 232, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.fine { font-size: 12.5px; color: var(--ink-2); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fine span::before { content: "✓ "; color: var(--gold); font-weight: 700; }
.entry-card .go:disabled { opacity: 0.6; cursor: progress; }
.entry-card form { display: grid; gap: 10px; }
.entry-card form[hidden] { display: none; }
.entry-mark { width: 30px; height: 30px; margin-bottom: -2px; justify-self: center; filter: drop-shadow(0 6px 18px rgba(22, 119, 232, 0.5)); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(4, 12, 30, 0.7); border: 1px solid var(--line); }
.auth-tabs button { font: 600 14px/1 var(--f-body); color: var(--ink-2); background: none; border: 0; border-radius: 9px; padding: 9px; cursor: pointer; }
.auth-tabs button.on { color: #fff; background: linear-gradient(180deg, #2a86ff, #1463d6); box-shadow: 0 6px 18px rgba(22, 119, 232, 0.35); }
.field small, .field .opt { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 46px; }
.pass-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; font-size: 15px; opacity: 0.7; }
.pass-eye.on { opacity: 1; }
.link-btn { font: inherit; color: var(--ice); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(156, 200, 255, 0.4); }
.link-btn:hover { color: #fff; }
.auth-row { display: flex; justify-content: flex-end; margin-top: -6px; font-size: 13px; }
.auth-switch { margin: 0; text-align: center; font-size: 13.5px; color: var(--ink-2); }
.alert { font-size: 13.5px; line-height: 1.45; border-radius: 10px; padding: 10px 12px; margin: 0; border: 1px solid; }
.alert[hidden] { display: none; }
.alert-error { color: #ffc9c9; background: rgba(220, 60, 60, 0.12); border-color: rgba(240, 110, 110, 0.4); }
.alert-ok { color: #c6f2d6; background: rgba(40, 170, 100, 0.12); border-color: rgba(90, 200, 140, 0.4); }
.alert-warn { color: #f2d48a; background: rgba(230, 185, 74, 0.1); border-color: rgba(230, 185, 74, 0.4); }
.entry-foot { margin: 4px 0 0; font-size: 12px; text-align: center; font-size: 12.5px; color: var(--ink-2); }
.entry-foot a { color: var(--ice); }
/* Sem WebGL: fundo estático e marca visível. */
.no-3d body { background: radial-gradient(120% 80% at 50% 100%, #0d2a5c, var(--deep) 60%); }
.no-3d .hud-brand { opacity: 1; }
.no-3d #bigLogo, .no-3d .hud-bl, .no-3d .loop-hint { display: none; }
.loop-hint { position: absolute; left: 0; right: 0; bottom: 4vh; margin: 0; text-align: center; z-index: -1; font-family: var(--f-mono); letter-spacing: 0.24em; text-transform: uppercase; font-size: 12px; color: var(--ink-2); }

@media (max-width: 760px) {
  .chapter { align-items: flex-end; padding-block: 12vh 16vh; }
  .chapter .copy, .chapter.right .copy { margin: 0; background: linear-gradient(180deg, transparent, rgba(4, 12, 30, 0.82) 22%); padding: 22px 0 6px; }
  .entry-card { margin: 0 auto; }
  .hud-br { display: none; }
  #bigLogo { top: 57vh; width: 54vw; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue i { animation: none; }
  .js .chapter .copy > * { transition: none; }
}
/* Telas baixas (notebook): cartão mais enxuto para caber inteiro e ficar fixo no centro. */
@media (max-height: 780px) {
  .entry-mark, .entry-card .lead { display: none; }
}