/* ============================================================
   Rolamentos Betim — Design Tokens
   Paleta extraída do manual da marca e das peças gráficas reais
   (logotipo cromado/azul, panfleto institucional). Conceito:
   INDUSTRIAL CLARITY + ANTIGRAVIDADE.
   ============================================================ */
:root {
  /* Cores institucionais */
  --rb-blue: #005EB8;
  --rb-blue-dark: #003B75;
  --rb-blue-darker: #001C3D;
  --rb-blue-light: #2E86DE;
  --rb-chrome-1: #F4F6F8;
  --rb-chrome-2: #D7DCE2;
  --rb-chrome-3: #9AA5B1;
  --rb-steel: #5C6773;

  /* Superfícies — seções claras */
  --bg-light: #FFFFFF;
  --bg-light-alt: #F4F6F8;
  --bg-ice: #EEF2F6;
  --text-dark: #12181F;
  --text-dark-muted: #4B5763;

  /* Superfícies — seções escuras */
  --bg-dark: #051425;
  --bg-dark-alt: #071E33;
  --bg-dark-elev: #0B2A45;
  --text-light: #F4F8FC;
  --text-light-muted: #9CB3C7;

  /* Bordas / linhas */
  --line-light: rgba(18, 24, 31, 0.08);
  --line-dark: rgba(244, 248, 252, 0.12);

  /* Sombra */
  --shadow-soft: 0 20px 60px -20px rgba(5, 20, 37, 0.25);
  --shadow-deep: 0 30px 80px -20px rgba(0, 0, 0, 0.55);

  /* Tipografia */
  --font-display: 'Orbitron', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Ritmo */
  --section-pad: clamp(64px, 10vw, 140px);
  --container-w: 1320px;

  /* Transições */
  --ease-industrial: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-light);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

.section-light { background: var(--bg-light); color: var(--text-dark); }
.section-ice { background: var(--bg-ice); color: var(--text-dark); }
.section-dark {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-alt) 100%);
  color: var(--text-light);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rb-blue);
}
.section-dark .eyebrow { color: var(--rb-blue-light); }
.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.section-title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  margin: 12px 0 16px;
}

.section-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark-muted);
  max-width: 620px;
  margin: 0 0 40px;
}
.section-dark .section-lede { color: var(--text-light-muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .35s var(--ease-industrial), box-shadow .35s var(--ease-industrial), background .35s var(--ease-industrial), border-color .35s var(--ease-industrial);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--rb-blue) 0%, var(--rb-blue-dark) 100%);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(0, 94, 184, 0.55);
}
.btn-primary:hover { box-shadow: 0 18px 40px -10px rgba(0, 94, 184, 0.65); }

.btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--text-dark);
}
.section-dark .btn-ghost { color: var(--text-light); }
.btn-ghost:hover { background: rgba(0, 94, 184, 0.08); }

.btn-whatsapp {
  background: #1FAE5B;
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(31, 174, 91, 0.55);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 94, 184, 0.08);
  color: var(--rb-blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

::selection { background: var(--rb-blue); color: #fff; }

/* Placeholder de páginas internas ainda não desenvolvidas (item 22/23) */
a[data-soon] { position: relative; }