/* ============================================================
   Consulte Medicina Ocupacional — Design Tokens
   Fonte: identidade visual oficial (skill) + logo
   ============================================================ */
:root {
  /* Paleta de marca */
  --primary:      #0E5A62;  /* teal escuro  */
  --primary-700:  #0A464C;
  --primary-900:  #063238;
  --secondary:    #17828C;  /* teal médio   */
  --accent:       #30B5AD;  /* turquesa     */
  --accent-300:   #6FD3CC;
  --bg:           #F3F6F7;  /* fundo geral  */
  --light-teal:   #E6F4F3;  /* cards suaves */
  --text-dark:    #0F1F22;
  --text-med:     #5E7579;
  --white:        #FFFFFF;
  --line:         #E3ECEE;

  /* Gradiente-assinatura */
  --grad-brand: linear-gradient(135deg, #0E5A62 0%, #17828C 55%, #30B5AD 100%);
  --grad-hero-veil: linear-gradient(180deg, rgba(6,50,56,.72) 0%, rgba(6,50,56,.30) 42%, rgba(6,50,56,.78) 100%);

  /* Tipografia */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida */
  --step--1: clamp(0.83rem, 0.78rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.3vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.10rem + 0.6vw, 1.55rem);
  --step-2:  clamp(1.60rem, 1.35rem + 1.1vw, 2.20rem);
  --step-3:  clamp(2.10rem, 1.65rem + 2.0vw, 3.40rem);
  --step-4:  clamp(2.70rem, 1.90rem + 3.6vw, 5.20rem);

  /* Espaçamento e formas */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(14,90,98,.08);
  --shadow:    0 12px 40px rgba(14,90,98,.14);
  --shadow-lg: 0 30px 80px rgba(6,50,56,.30);
  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
section[id], footer[id] { scroll-margin-top: 86px; }

/* Lenis (smooth scroll) — base recomendada */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

/* Botões */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--step--1);
  padding: .78em 1.35em; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--accent); color: #06282a; box-shadow: 0 8px 24px rgba(48,181,173,.35); }
.btn--accent:hover { box-shadow: 0 14px 34px rgba(48,181,173,.45); }
.btn--ghost { background: rgba(255,255,255,.10); color: var(--white); border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255,255,255,.18); }
.btn--solid { background: var(--primary); color: var(--white); }

.tag { display: inline-flex; align-items: center; gap: .4rem; text-transform: uppercase; letter-spacing: .12em;
  font-size: .7rem; font-weight: 700; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}