/* ============================================
   BASE
   ============================================ */

/* -------------------- VARIÁVEIS -------------------- */
:root {
  --color-bg: #0a0f1a;
  --color-bg-2: #070b14;
  --color-bg-dark: #091427;
  --color-bg-dark-2: #0A1628;
  --color-surface: rgba(255, 255, 255, 0.03);
  --color-surface-elevated: rgba(255, 255, 255, 0.06);

  --color-text: #f8fafc;
  --color-text-secondary: rgba(248, 250, 252, 0.75);
  --color-text-muted: rgba(248, 250, 252, 0.55);
  --color-text-dark: #0f172a;
  --color-text-dark-secondary: #475569;

  --color-primary: #5f84ff;
  --color-primary-light: #6e92ff;
  --color-primary-dark: #4f78ff;
  --color-accent: #b48b43;
  --color-accent-soft: rgba(245, 158, 11, 0.15);

  --color-line: rgba(255, 255, 255, 0.06);
  --color-line-strong: rgba(255, 255, 255, 0.12);
  --color-line-dark: rgba(255, 255, 255, 0.08);
  --color-line-accent: rgba(95, 132, 255, 0.3);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3);
  --shadow-dark: 0 20px 40px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 40px rgba(95, 132, 255, 0.15);
  --shadow-button: 0 4px 14px rgba(95, 132, 255, 0.35);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --container-width: 1280px;
  --header-height: 80px;
  --section-padding: 80px;

  --space-x-desktop: 60px;
  --space-x-tablet: 32px;
  --space-x-mobile: 20px;
  --space-x-mobile-small: 16px;

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -------------------- RESET E BASE -------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-base);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--space-x-desktop);
  padding-right: var(--space-x-desktop);
}

/* -------------------- RESPONSIVO GLOBAL DO CONTAINER -------------------- */
@media (max-width: 991px) {
  :root {
    --header-height: 74px;
  }

  .container {
    padding-left: var(--space-x-tablet);
    padding-right: var(--space-x-tablet);
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 70px;
  }

  .container {
    padding-left: var(--space-x-mobile);
    padding-right: var(--space-x-mobile);
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: var(--space-x-mobile-small);
    padding-right: var(--space-x-mobile-small);
  }
}