/* ============================================
CLÍNICA GA — DRA. GLAUCIA AMBROZIO
Design System — Minimalist Premium 2026
============================================ */
/* Fontes carregadas via no (functions.php) — sem @import bloqueante */
/* Amandine — fonte proprietária da marca.
Coloque o arquivo em /img/fonts/Amandine.woff2 (ou .ttf) e a fonte carrega automaticamente.
Enquanto não estiver presente, o fallback Great Vibes (Google Fonts) é usado. */
@font-face {
font-family: 'Amandine';
src: url('../img/fonts/Amandine.woff2') format('woff2'),
url('../img/fonts/Amandine.woff') format('woff'),
url('../img/fonts/Amandine.ttf') format('truetype'),
url('../img/fonts/Amandine.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ---- Tokens ---- */
:root {
/* Brand palette (oficial Clínica GA) */
--brown: #5E3621; /* marrom escuro (palette) */
--brown-dark: #3E2415;
--brown-mid: #7D4D32;
--brown-light: #A06D48;
--gold: #D2AE7D; /* dourado/bege (palette) */
--gold-light: #E2C8A3;
--gold-dark: #AD8A5A;
--cream: #ECE6DA; /* cream (palette) */
--cream-dark: #DDD4C1;
--cream-light: #F6F2E9;
/* Neutrals */
--white: #FFFFFF;
--black: #1A0F08;
--gray-100: #F3EFE6;
--gray-200: #E0D8C8;
--gray-300: #C1B39E;
--gray-400: #8E8072;
--gray-500: #6A5D50;
--gray-600: #463C33;
--gray-700: #2A221B;
--whatsapp: #25D366;
/* Typography */
--font-serif: 'Playfair', Georgia, 'Times New Roman', serif;
--font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-script: 'Playfair', Georgia, 'Times New Roman', serif;
/* Layout */
--container: 1320px;
--section-pad: clamp(80px, 10vw, 140px);
/* Radius */
--r-xs: 2px;
--r-sm: 4px;
--r-md: 12px;
--r-lg: 20px;
--r-pill: 999px;
/* Transitions */
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
color: var(--gray-600);
background: var(--cream);
line-height: 1.7;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: inherit; }
::selection { background: var(--gold); color: var(--white); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb { background: var(--gold); }
/* ---- Layout ---- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 32px;
}
.container--narrow { max-width: 960px; }
section { padding: var(--section-pad) 0; }
/* ---- Typography ---- */
.eyebrow {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 24px;
}
.section-heading {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(2rem, 3.8vw, 3rem);
line-height: 1.15;
color: var(--brown);
letter-spacing: 0.02em;
}
.section-heading--light {
color: var(--cream);
}
.section-sub {
margin-top: 20px;
font-size: 1rem;
line-height: 1.75;
color: var(--gray-500);
max-width: 640px;
}
.section-sub--center { margin-left: auto; margin-right: auto; }
.section-sub--light { color: rgba(247, 241, 232, 0.75); }
.text-center { text-align: center; }
/* Script accent — use where a handwritten feel is desired (signature, ornament) */
.script {
font-family: var(--font-script);
font-weight: 400;
font-style: normal;
letter-spacing: 0;
font-variant: normal;
text-transform: none;
}
/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 16px 32px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.35s var(--ease);
border-radius: var(--r-pill);
white-space: nowrap;
}
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
a.btn:focus {
text-decoration: none;
}
.btn i, .btn svg { font-size: 0.9rem; transition: transform 0.35s var(--ease); }
.btn--primary {
background: var(--brown);
color: var(--cream);
border-color: var(--brown);
}
a.btn--primary,
a.btn--primary:link,
a.btn--primary:visited,
a.btn--primary:hover,
a.btn--primary:active,
a.btn--primary:focus { color: var(--cream); }
.btn--primary:hover { background: var(--black); border-color: var(--black); }
/* Botão dedicado do formulário (submit) — self-contained, evita
conflitos de user-agent styles em