/* ============================================================
   @font-face — Fontes locais (Sora + Manrope, variable font)
   ============================================================ */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Design Tokens — CSS Custom Properties
   ============================================================ */
:root {
  /* Brand (briefing) */
  --brand-gold:      #D4AF37;
  --bg-graphite:     #1E1E1E;
  --bg-deep-blue:    #0B132B;
  --text-light:      #F8F9FA;
  --trust-neon:      #00E5FF;

  /* Surface scale */
  --surface:                  #131313;
  --surface-dim:              #0e0e0e;
  --surface-container-low:    #1b1b1b;
  --surface-container:        #1f1f1f;
  --surface-container-high:   #2a2a2a;
  --surface-container-highest:#353535;
  --surface-glass:            rgba(43, 43, 43, 0.6);

  /* Text */
  --on-surface:         #e2e2e2;
  --on-surface-variant: #d3c4b2;

  /* Borders */
  --outline:         #9c8f7e;
  --outline-variant: #4f4537;

  /* Primary — Gold accent (headings, highlights) */
  --primary:           #f5bd64;
  --primary-container: #d4a04a;
  --on-primary:        #432c00;

  /* Secondary — Silver */
  --secondary:    #c6c6c6;
  --on-secondary: #2f3131;

  /* Semantic */
  --success: #00C48C;
  --error:   #ffb4ab;

  /* Typography scale */
  --font-headline: 'Sora', system-ui, sans-serif;
  --font-body:     'Manrope', system-ui, sans-serif;

  --size-xs:   12px;
  --size-sm:   14px;
  --size-base: 16px;
  --size-lg:   18px;
  --size-xl:   24px;
  --size-2xl:  32px;
  --size-3xl:  40px;
  --size-4xl:  56px;
  --size-5xl:  72px;

  /* Spacing */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-15: 120px;

  /* Layout */
  --container-max:    1440px;
  --gutter:           24px;
  --margin-mobile:    20px;
  --margin-desktop:   80px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Effects */
  --blur-glass:  blur(12px);
  --shadow-card: 0 4px 24px -4px rgba(0,0,0,0.6);
  --glow-gold:   0 0 20px rgba(212, 160, 74, 0.25);
  --glow-neon:   0 0 16px rgba(0, 229, 255, 0.2);
  --transition:  all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Nav height — used to offset main content */
  --nav-h: 72px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: 1.6;
  color: var(--on-surface);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* ============================================================
   Typography Scale
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

.display-xl {
  font-size: clamp(var(--size-4xl), 5vw, var(--size-5xl));
  font-weight: 700;
  letter-spacing: -0.02em;
}
.headline-lg {
  font-size: clamp(var(--size-2xl), 3.5vw, var(--size-3xl));
  font-weight: 600;
}
.headline-md {
  font-size: clamp(var(--size-xl), 2.5vw, var(--size-2xl));
  font-weight: 600;
}
.headline-sm {
  font-size: var(--size-xl);
  font-weight: 600;
}
.body-lg {
  font-family: var(--font-body);
  font-size: var(--size-lg);
  line-height: 1.7;
  font-weight: 400;
  color: var(--on-surface-variant);
}
.body-md {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: 1.6;
  font-weight: 400;
  color: var(--on-surface-variant);
}
.label {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.text-muted { color: var(--on-surface-variant); }
.text-primary { color: var(--primary); }
.text-neon   { color: var(--trust-neon); }
.text-white  { color: var(--text-light); }

/* ============================================================
   Utility — Visual
   ============================================================ */
.glass-panel {
  background: var(--surface-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--outline-variant);
}
.section-divider {
  width: 56px;
  height: 3px;
  background: var(--primary);
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--outline-variant);
  background: var(--surface-glass);
  backdrop-filter: var(--blur-glass);
  color: var(--on-surface-variant);
}
.badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--trust-neon);
  flex-shrink: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-gold);
  color: #1a1200;
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: var(--glow-gold);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--outline-variant);
  color: var(--text-light);
}
.btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border-radius: var(--radius-full);
  padding: 14px 32px;
  font-size: var(--size-base);
  font-weight: 700;
}
.btn-whatsapp:hover {
  background: #1ebe5b;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
  transform: translateY(-2px);
}
.btn svg, .btn .material-symbols-outlined {
  font-size: 20px;
}

/* ============================================================
   Icon helper (Material Symbols)
   ============================================================ */
.icon {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
}
.icon-sm  { font-size: 18px; }
.icon-lg  { font-size: 32px; }
.icon-xl  { font-size: 48px; }