/* ================================================================
   global.css — Design tokens, reset, utilitários
   Espaço Acolher · Identidade editorial (consultório particular)
   ⚠ As cores são injetadas via config.js (mesmos valores do :root)
================================================================ */

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

/* ── Tokens base (sobrescritos pelo config.js) ── */
:root {
  /* superfícies */
  --bg:          #f7f5f1;   /* marfim base */
  --bg-alt:      #efece6;   /* seções alternadas */
  --surface:     #ffffff;   /* cards */

  /* tinta */
  --ink:         #1a2332;   /* grafite azulado — títulos */
  --ink-2:       #3d4a5c;   /* corpo de texto */
  --ink-muted:   #5c6672;   /* secundário */

  /* hairlines */
  --line:        #dcd7cf;
  --line-2:      #c9c3b9;

  /* accent único — azul-petróleo */
  --accent:      #2c4a52;
  --accent-dark: #1f363c;   /* hover */
  --accent-soft: #eaeeef;   /* fundo tingido do card destaque */
  --accent-line: #a9bcc0;   /* borda / ornamento accent suave */

  --ff-d: 'Lora', Georgia, 'Times New Roman', serif;
  --ff-b: 'Inter', system-ui, -apple-system, sans-serif;

  --radius:     4px;
  --radius-sm:  2px;
  --transition: .2s ease;
  --shadow:     0 1px 2px rgba(26,35,50,.04), 0 8px 24px rgba(26,35,50,.06);
}

/* ── Base ── */
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-b);
  background: var(--bg);
  color: var(--ink-2);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}
img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: var(--ff-b); }

/* ── Container ── */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* ── Eyebrow / rótulo de seção ──
   Texto simples com uma linha fina abaixo. Sem fundo, sem ícone. */
.eyebrow {
  display: inline-block;
  color: var(--ink-muted);
  font-size: .70rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 22px;
  padding-bottom: 12px;
  position: relative;
}
.eyebrow::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 28px; height: 1px;
  background: var(--line-2);
}
/* Eyebrow existe só em #servicos, #planos e #faq — #sobre, #depoimentos e #cta
   entram direto no título, para o mesmo ritmo não se repetir em toda seção. */
.servicos-header .eyebrow::after,
.planos-header .eyebrow::after { left: 50%; transform: translateX(-50%); }

/* ── Destaque de palavra no título (cor sólida, nunca gradiente) ── */
.hl-accent { color: var(--accent); }
.hero-headline .hl-accent { display: block; }

/* ── Headings ── */
.display {
  font-family: var(--ff-d);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--ink);
}
.sub {
  font-size: 1.02rem; color: var(--ink-muted);
  line-height: 1.78; max-width: 560px; margin-top: 18px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent);
  color: #fff; font-family: var(--ff-b); font-weight: 600;
  font-size: .95rem; padding: 15px 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); cursor: pointer; transition: var(--transition);
  letter-spacing: .01em; text-decoration: none;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--ink);
  font-family: var(--ff-b); font-weight: 500; font-size: .95rem;
  padding: 15px 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  cursor: pointer; transition: var(--transition); text-decoration: none;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── Fade-in ── */
.fade { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.fade.in { opacity:1; transform:translateY(0); }

/* ── WhatsApp float ── */
.wa-float {
  position: fixed; bottom: 24px; right: 28px; z-index: 200;
  width: 54px; height: 54px; background: #25D366;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(26,35,50,.18); transition: var(--transition);
}
.wa-float:hover { background: #1DA851; }
.wa-float svg { width:27px; height:27px; fill:white; }