:root{
  /* Cores base */
  --bg: #0b1220;
  --text: #eaf2ff;
  --muted: #9cb0cf;
  --brand: #3DA1FF;
  --brand-2: #00E0B8;

  /* UI */
  --card: rgba(255,255,255,.06);
  --glass: rgba(255,255,255,.08);
  --shadow: 0 10px 36px rgba(0,0,0,.28);
  --radius: 16px;

  /* Ritmo (sem caracteres especiais) */
  --space-2: 8px;
  --space-1: 12px;
  --space0: 16px;
  --space1: 24px;
  --space2: 36px;
  --space3: 56px;
  --space4: 84px;
  --space5: 120px;

  /* Medidas */
  --measure: 64ch;
  --maxw: 1160px;
}

.theme-light{
  --bg: #ffffff;
  --text: #0b1220;
  --muted: #5b6b88;
  --card: rgba(11,18,32,.06);
  --glass: rgba(11,18,32,.06);
  --shadow: 0 10px 28px rgba(11,18,32,.10);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #142949 0%, transparent 60%), var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tipografia */
h1{ font-size: clamp(30px, 6vw, 46px); line-height: 1.12; margin: 0; }
h2{ font-size: clamp(22px, 4.8vw, 32px); margin: 0; }
h3{ font-size: clamp(18px, 4vw, 22px); margin: 0; }
p, li{ font-size: clamp(15px, 3.6vw, 18px); }
.lead{ color: var(--muted); }

/* Helpers */
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space1); }
.section{ padding-block: clamp(var(--space3), 10vw, var(--space5)); }
.section + .section{ border-top: 1px solid rgba(255,255,255,.07); }
.measure{ max-width: var(--measure); }



/* Cartões e vidro */
.card{ background: var(--card); border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius); box-shadow: var(--shadow); }
.glass{ backdrop-filter: blur(10px); background: var(--glass); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); }

/* Header */
.header{
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(0,0,0,.18), transparent);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header .inner{ display: flex; align-items: center; justify-content: space-between; padding-block: var(--space1); }
.brand{ display: flex; align-items: center; gap: 10px; font-weight: 900; }
.nav{
  position: fixed; inset: 0 0 auto auto; transform: translateY(-100%); transition: .25s;
  display: flex; flex-direction: column; gap: var(--space1); padding: 88px var(--space1);
  background: rgba(11,18,32,.96); backdrop-filter: blur(8px);
}
.nav a{ color: #e3edff; text-decoration: none; font-weight: 800; }
.nav.open{ transform: translateY(0); }
.nav-toggle{ background: none; border: 0; display: grid; gap: 5px; }
.nav-toggle span{ width: 28px; height: 2px; background: #e3edff; border-radius: 2px; }
.no-scroll{ overflow: hidden; }
@media (min-width: 992px){
  .nav{ position: static; transform: none; flex-direction: row; background: transparent; padding: 0; }
  .nav a{ color: var(--muted); font-weight: 700; }
  .nav a:hover{ color: var(--text); }
  .nav-toggle{ display: none; }
}

/* Mídia padrão */
.preview{
  position: relative; aspect-ratio: 4/3; display: grid; place-items: center;
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
}
.preview img{ width: 100%; height: 100%; object-fit: contain; }
.badge{
  position: absolute; top: 12px; right: 12px; background: rgba(16,185,129,.18); color: #9ef7d9;
  border: 1px solid rgba(16,185,129,.35); border-radius: 999px; padding: 6px 12px; font-weight: 900;
}

/* Rodapé */
.footer{ padding-block: var(--space2); color: var(--muted); border-top: 1px solid rgba(255,255,255,.08); }
.footer .foot{ display: flex; align-items: center; justify-content: space-between; }
.link{ background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; }

/* ========== Tema escuro ========== */
.theme-dark {
  --bg: #0B1220;
  --text: #ffffff;
  --card: #121a2b;
  --card-border: rgba(255,255,255,0.1);
  --input-bd: rgba(255,255,255,0.2);
  --muted: rgba(255,255,255,0.6);
  --line: rgba(255,255,255,0.08);
  --button-bg: #3DA1FF;
  --button-bg-2: #00E0B8;
  --button-tx: #ffffff;
  background-color: #0B1220;
  color: var(--text);
}

/* ========== Tema claro ========== */
.theme-light {
  --bg: #FFFFFF;
  --text: #0B1220;
  --card: #f7f7f7;
  --card-border: rgba(0,0,0,0.08);
  --input-bd: rgba(0,0,0,0.15);
  --muted: rgba(0,0,0,0.55);
  --line: rgba(0,0,0,0.06);
  --button-bg: #3DA1FF;
  --button-bg-2: #00E0B8;
  --button-tx: #ffffff;
  background-color: #FFFFFF;
  color: var(--text);
}

/* Aplicar cor de fundo global */
body.theme-dark, body.theme-light {
  background-color: var(--bg);
  background-image: none !important;
}