/* ===========================================================
   Fractal — Design System (tokens + componentes)
   Reutilizável em quiz / LP / site. Estética: portal, neon sóbrio,
   profundidade. Doc: fractal/docs/18-branding-design-system-evento.md
   =========================================================== */

:root{
  /* superfícies */
  --fr-ink-900:#04060b;  --fr-ink-800:#080c14;  --fr-ink-700:#0f1422;
  --fr-line:rgba(255,255,255,.07);
  --fr-line-strong:rgba(25,240,224,.22);
  /* acentos (neon sóbrio, usado como luz/realce, não como base) */
  --fr-cyan:#19f0e0;  --fr-magenta:#ff2fd0;  --fr-violet:#7b5cff;
  --fr-grad:linear-gradient(100deg,var(--fr-cyan),var(--fr-violet) 55%,var(--fr-magenta));
  /* texto */
  --fr-text:#eef4fb;  --fr-muted:#9fb0c4;  --fr-dim:#5f7088;
  /* tipografia */
  --fr-display:"Space Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --fr-body:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  /* forma */
  --fr-r:14px;  --fr-r-lg:22px;
  --fr-shadow:0 24px 70px rgba(0,0,0,.55);
  --fr-glow:0 0 0 1px var(--fr-line-strong), 0 0 50px rgba(123,92,255,.14);
  /* espaço */
  --fr-gap:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--fr-body);
  color:var(--fr-text);
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(123,92,255,.22), transparent 60%),
    radial-gradient(820px 520px at 92% 112%, rgba(255,47,208,.14), transparent 55%),
    radial-gradient(700px 460px at 6% 108%, rgba(25,240,224,.10), transparent 55%),
    var(--fr-ink-900);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* layout */
.fr-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.fr-card{
  width:100%;max-width:600px;
  background:linear-gradient(180deg, rgba(15,20,34,.78), rgba(8,12,20,.86));
  border:1px solid var(--fr-line);
  border-radius:var(--fr-r-lg);
  padding:34px 28px;
  box-shadow:var(--fr-shadow), var(--fr-glow);
  backdrop-filter:blur(8px);
  position:relative;overflow:hidden;
}
/* hairline superior em gradiente (portal) */
.fr-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--fr-grad);opacity:.7}

/* tipografia */
.fr-eyebrow{font-family:var(--fr-display);letter-spacing:.32em;text-transform:uppercase;
  font-size:11px;font-weight:600;background:var(--fr-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fr-h1{font-family:var(--fr-display);font-weight:700;font-size:clamp(24px,5vw,32px);line-height:1.12;margin:12px 0 8px;letter-spacing:-.01em}
.fr-h2{font-family:var(--fr-display);font-weight:700;font-size:clamp(22px,4.5vw,28px);margin:6px 0;
  background:var(--fr-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fr-lead{color:var(--fr-muted);font-size:15px;line-height:1.55;margin:0 0 24px}
.fr-q{font-family:var(--fr-display);font-weight:600;font-size:19px;line-height:1.3;margin:0 0 18px}
.fr-foot{color:var(--fr-dim);font-size:12px;margin-top:18px;letter-spacing:.02em}
.fr-center{text-align:center}

/* progresso */
.fr-progress{height:5px;border-radius:99px;background:rgba(255,255,255,.07);margin-bottom:22px;overflow:hidden}
.fr-progress>i{display:block;height:100%;width:0;background:var(--fr-grad);transition:width .35s ease}

/* opções */
.fr-option{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  margin:10px 0;padding:15px 16px;border-radius:var(--fr-r);
  background:rgba(255,255,255,.025);border:1px solid var(--fr-line);
  color:var(--fr-text);font-size:15px;font-family:var(--fr-body);cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.fr-option::before{content:"";width:9px;height:9px;border-radius:99px;background:var(--fr-grad);flex:0 0 auto;opacity:.5;transition:opacity .12s}
.fr-option:hover{transform:translateY(-1px);border-color:var(--fr-line-strong);background:rgba(25,240,224,.06)}
.fr-option:hover::before{opacity:1}

/* inputs */
.fr-input{width:100%;padding:15px 16px;margin:8px 0;border-radius:var(--fr-r);
  border:1px solid var(--fr-line);background:rgba(0,0,0,.35);color:var(--fr-text);
  font-size:16px;font-family:var(--fr-body)}
.fr-input::placeholder{color:var(--fr-dim)}
.fr-input:focus{outline:none;border-color:var(--fr-cyan);box-shadow:0 0 0 3px rgba(25,240,224,.12)}

/* botões */
.fr-btn{display:block;width:100%;text-align:center;padding:16px;border:0;border-radius:var(--fr-r);
  font-family:var(--fr-display);font-weight:700;font-size:16px;letter-spacing:.01em;
  color:#04060b;background:var(--fr-grad);cursor:pointer;text-decoration:none;margin-top:12px;
  transition:filter .15s, transform .12s}
.fr-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.fr-btn--ghost{background:transparent;color:var(--fr-text);border:1px solid var(--fr-line-strong)}
.fr-btn--ghost:hover{background:rgba(255,255,255,.04)}

/* modal (lead form) */
.fr-modal-overlay{position:fixed;inset:0;background:rgba(2,4,8,.74);backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.fr-modal-overlay.open{display:flex}
.fr-modal{width:100%;max-width:420px;position:relative;
  background:linear-gradient(180deg,rgba(15,20,34,.97),rgba(8,12,20,.99));
  border:1px solid var(--fr-line-strong);border-radius:var(--fr-r-lg);padding:28px 22px;box-shadow:var(--fr-shadow)}
.fr-modal::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--fr-grad)}
.fr-modal-close{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--fr-muted);
  font-size:24px;line-height:1;cursor:pointer}

/* utils */
.fr-hide{display:none}
.fr-badge{display:inline-block;padding:6px 12px;border-radius:99px;border:1px solid var(--fr-line-strong);
  font-size:12px;color:var(--fr-muted);font-family:var(--fr-display);letter-spacing:.04em;margin-bottom:8px}