/* =========================================================
   BASE — vale para o site inteiro
   Cores (tema escuro), fontes, reset, títulos de seção,
   botões e etiquetas reaproveitados em várias seções.
   As cores do tema claro ficam em tema-claro.css.
   ========================================================= */

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

:root {
  /* curvas de animação */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* cores */
  --cream: #F5F0E8;       /* texto principal */
  --dark: #08090b;        /* fundo da página */
  --card-bg: #111318;
  --accent: #8e401e;      /* laranja-ferrugem (destaque) */
  --accent-glow: rgba(229, 169, 99, 0.25);
  --gray: #8A897F;        /* texto secundário */
  --mid: #16181e;         /* superfície dos cards */
  --border: rgba(255, 255, 255, 0.08);

  /* fundos e efeitos */
  --nav-bg: rgba(8, 9, 11, 0.75);
  --nav-scroll: rgba(8, 9, 11, 0.95);
  --spotlight: rgba(252, 254, 255, 0.08);
  --badge-bg: rgba(8, 9, 11, 0.85);
  --services-bg: #0c0e12;

  /* fontes */
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'DM Mono', monospace;
  --sans: 'Syne', sans-serif;
}

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--dark);
  color: var(--cream);
  font-family: var(--sans);
  /* clip (e não hidden): elementos que entram pela lateral não criam rolagem horizontal */
  overflow-x: clip;
  cursor: default;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ---------- seções ---------- */
section { padding: 8rem 4rem; }

.section-label {
  font-family: var(--mono); font-size: 0.75rem; color: var(--accent);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem;
}
.section-label::before { content: ''; width: 32px; height: 1px; background: var(--accent); }

h2.section-title {
  font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1rem;
}

/* ---------- botões ---------- */
.btn-primary {
  background: var(--accent); color: #08090b; /* fixo para leitura sobre o laranja */
  padding: 0.9rem 2.2rem; border-radius: 2rem; font-weight: 700;
  text-decoration: none; font-size: 0.9rem; letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-glow); }

.btn-ghost {
  color: var(--cream); padding: 0.9rem 2.2rem; border-radius: 2rem;
  font-weight: 500; text-decoration: none; font-size: 0.9rem;
  border: 1px solid var(--border); letter-spacing: 0.02em;
  transition: border-color 0.2s, background 0.2s;
}
.btn-ghost:hover { border-color: var(--accent); background: rgba(255,255,255,0.03); }

/* ---------- etiquetas (Serviços, Formações, Laboratório) ---------- */
.service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
  font-family: var(--mono); font-size: 0.7rem; color: var(--gray);
  border: 1px solid var(--border); border-radius: 2rem;
  padding: 0.25rem 0.65rem;
}

@media (max-width: 900px) {
  section { padding: 5rem 2rem; }
}