/* ============================================================
   base.css | Design Tokens — Dra. Leila Márcia
   Odontologia Especializada | 2025
   Paleta: creme · branco · dourado · rosé
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

:root {
  /* ── Palette ── */
  --cream:       #FAF8F4;   /* background principal */
  --cream-dk:    #F2EDE6;   /* surface / alternado */
  --cream-border:#E8E0D6;   /* bordas */

  --gold:        #C9A84C;   /* dourado principal */
  --gold-hover:  #AA8A2E;   /* dourado hover */
  --gold-lt:     #F0E6CE;   /* fundo dourado claro */
  --gold-mid:    #D4B870;   /* dourado médio */

  --rose:        #C4907C;   /* rosé principal */
  --rose-hover:  #A87060;   /* rosé hover */
  --rose-lt:     #F5EAE6;   /* fundo rosé claro */

  --dark:        #2A1A14;   /* texto / seções escuras */
  --dark-mid:    #3D2820;   /* variação escura média */
  --text:        #3D2820;   /* texto principal */
  --text-muted:  #6A4A44;   /* texto secundário */
  --text-faint:  #9A7870;   /* texto terciário */

  --white:       #FFFFFF;
  --border:      rgba(61,40,32,0.10);
  --shadow-sm:   0 1px 4px rgba(42,26,20,0.06);
  --shadow-md:   0 4px 20px rgba(42,26,20,0.09);
  --shadow-lg:   0 8px 40px rgba(42,26,20,0.12);

  /* ── Typography ── */
  --font:        'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:  'Cormorant Garamond', Georgia, serif;

  /* ── Type scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  clamp(1.75rem, 2.5vw, 2.25rem);
  --text-4xl:  clamp(2rem, 3.5vw, 3rem);
  --text-hero: clamp(2.8rem, 6vw, 4.5rem);

  /* ── Spacing ── */
  --sp-1:0.25rem; --sp-2:0.5rem;  --sp-3:0.75rem;
  --sp-4:1rem;    --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem;    --sp-10:2.5rem; --sp-12:3rem;
  --sp-16:4rem;   --sp-20:5rem;   --sp-24:6rem;

  /* ── Radius ── */
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:24px; --r-full:9999px;

  /* ── Layout ── */
  --container:1200px;
  --narrow:760px;
  --header-h:72px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.16,1,0.3,1);
  --t: 200ms cubic-bezier(0.16,1,0.3,1);
}

body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width:100%; height:auto; display:block; }
a   { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:var(--font); }

/* ── Utilities ── */
.container { max-width:var(--container); margin:0 auto; padding:0 var(--sp-6); }
.narrow    { max-width:var(--narrow);    margin:0 auto; }
.section   { padding:var(--sp-24) var(--sp-6); }
.section-warm  { background: var(--cream-dk); }
.section-dark  { background: var(--dark); color:#fff; }

.label {
  display:inline-block;
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:var(--sp-4);
}

.label-gold { color: var(--gold); }

.title {
  font-family:var(--font-serif);
  font-size:var(--text-4xl);
  font-weight:500;
  line-height:1.15;
  color:var(--text);
}
.title em      { font-style:italic; color:var(--gold); }
.title-light   { color:#fff; }
.title-light em{ color:var(--gold); }

.lead {
  font-size:var(--text-lg);
  font-weight:300;
  color:var(--text-muted);
  line-height:1.8;
  max-width:620px;
}
.lead-light { color:rgba(255,255,255,0.65); }

.divider {
  width:40px; height:2px;
  background:var(--gold);
  margin:var(--sp-5) 0 var(--sp-8);
}
.divider-gold { background:var(--gold); }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font); font-weight:600; font-size:var(--text-sm);
  letter-spacing:0.03em;
  padding:var(--sp-3) var(--sp-6);
  border-radius:var(--r-full);
  transition:background var(--t),color var(--t),transform var(--t),box-shadow var(--t);
  white-space:nowrap;
}
.btn:active { transform:scale(0.97); }

.btn-rose {
  background:var(--gold); color:#fff;
}
.btn-rose:hover {
  background:var(--gold-hover);
  box-shadow:0 4px 20px rgba(201,168,76,0.4);
}

.btn-gold {
  background:var(--gold); color:#fff;
}
.btn-gold:hover {
  background:var(--gold-hover);
  box-shadow:0 4px 20px rgba(201,168,76,0.35);
}

.btn-dark {
  background:var(--dark); color:#fff;
}
.btn-dark:hover { background:var(--dark-mid); }

.btn-outline {
  background:transparent; color:var(--gold);
  border:1.5px solid var(--gold);
}
.btn-outline:hover { background:var(--gold); color:#fff; }

.btn-outline-gold {
  background:transparent; color:var(--gold);
  border:1.5px solid var(--gold);
}
.btn-outline-gold:hover { background:var(--gold); color:#fff; }

.btn-outline-light {
  background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,0.4);
}
.btn-outline-light:hover { border-color:#fff; background:rgba(255,255,255,0.1); }

.btn-whatsapp { background:#25D366; color:#fff; }
.btn-whatsapp:hover {
  background:#1ebe5a;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
}

/* ── Cards ── */
.card {
  background:var(--white); border-radius:var(--r-lg);
  border:1px solid var(--border); padding:var(--sp-8);
  transition:box-shadow var(--t),transform var(--t);
}
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }

/* ── Grids ── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-8); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }

@media (max-width:960px) { .grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) {
  .section { padding:var(--sp-16) var(--sp-6); }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .title { font-size:var(--text-3xl); }
}