/* Design tokens — Vipilates Alphaville · arquétipo clean-b2b (variação wellness/teal). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400..700&family=EB+Garamond:ital@1&family=Inter:wght@400..600&display=swap');

:root {
  --bg: #f7f6f2;
  --fg: #131512;
  --muted: color-mix(in srgb, var(--fg) 60%, transparent);
  --accent: #1fb6a6;
  --font-display: "Archivo", "Space Grotesk", Helvetica, sans-serif;
  --font-serif-touch: "EB Garamond", serif;
  --font-body: "Inter", system-ui, sans-serif;
  --tracking-caps: 0.12em;
  --radius: 16px;
  --section-pad: clamp(4rem, 10vh, 8rem);
}

/* Exceção boutique: a palavra em <em> das headlines vai em serif itálica.
   Tom mais profundo que o accent para manter contraste sobre fundo claro. */
.headline em { font-family: var(--font-serif-touch); font-weight: 400; color: #0c7d73; }

/* Fundo claro: overlay do hero ganha véu suave em vez de sombra */
.hero-overlay {
  text-shadow: none;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--bg) 78%, transparent) 0%,
    transparent 72%);
  padding: clamp(24px, 6vw, 64px);
}

/* Botões e badges: texto branco sobre teal */
.btn { color: #fff; }
.badge { color: #fff; }

/* Prova social do hero legível sobre a foto */
.hero-social-proof {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 10px 22px; border-radius: 999px;
  width: fit-content; margin-inline: auto;
}