/* ============================================
   CLÍNICA DRA. BECH – Custom Styles
   ============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

/* --- CSS Variables --- */
:root {
  --gold:       #B8956A;
  --gold-light: #D4B896;
  --cream:      #F5EDE4;
  --dark:       #1A1512;
  --site-bg:    #FBF8F5;
  --subtle:     #E8DFD4;
  --muted:      #9A8B7E;
  --secondary:  #6B5D52;
  --on-dark:    #FAF6F1;
  --card-dark:  #221E1A;
  --card-border:#2E2924;
  --sep-dark:   #3D342C;
}

html { scroll-behavior: smooth; }

/* ========================
   Typography
   ======================== */
.font-cormorant { font-family: 'Cormorant Garamond', serif; }

/* Letter spacing */
.ls-3  { letter-spacing: 3px; }
.ls-2  { letter-spacing: 2px; }
.ls-1  { letter-spacing: 1px; }
.ls-05 { letter-spacing: 0.5px; }

/* Line height helpers */
.lh-11  { line-height: 1.1; }
.lh-115 { line-height: 1.15; }
.lh-16  { line-height: 1.6; }
.lh-17  { line-height: 1.7; }
.lh-18  { line-height: 1.8; }

/* ========================
   Navigation
   ======================== */
.nav-link { transition: color 0.2s ease; }
.nav-link:hover { color: var(--gold) !important; }
.nav-active { color: var(--dark) !important; font-weight: 600 !important; }

/* Mobile Menu */
#mobileMenu        { display: none; }
#mobileMenu.open   { display: flex; }

/* ========================
   Buttons
   ======================== */
.btn-gold {
  background-color: var(--gold);
  color: #fff;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-gold:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-outline {
  color: var(--gold);
  border: 1px solid var(--gold);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-outline:hover { background-color: var(--gold); color: #fff; }

/* ========================
   Cards
   ======================== */
.service-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(26, 21, 18, 0.12);
}

.treatment-card { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.treatment-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 24px rgba(184, 149, 106, 0.12);
}

/* ========================
   Gold accent line
   ======================== */
.gold-line {
  width: 60px;
  height: 2px;
  background-color: var(--gold);
  flex-shrink: 0;
}
.gold-line-40 {
  width: 40px;
  height: 1px;
  background-color: var(--gold);
  flex-shrink: 0;
}

/* ========================
   Forms
   ======================== */
input, select, textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(184, 149, 106, 0.12);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
select { appearance: none; }

/* ========================
   Hero Overlays
   ======================== */
.service-hero-overlay {
  background: linear-gradient(
    to top,
    rgba(26, 21, 18, 0.93) 0%,
    rgba(26, 21, 18, 0.80) 45%,
    rgba(26, 21, 18, 0.00) 100%
  );
}
.map-overlay { background: rgba(26, 21, 18, 0.20); }

/* ========================
   Stars (testimonials)
   ======================== */
.stars { color: var(--gold); letter-spacing: 1px; }

/* ========================
   CTA Info separator
   ======================== */
.info-sep {
  width: 1px;
  height: 40px;
  background-color: var(--sep-dark);
  flex-shrink: 0;
}

/* ========================
   Lucide icons
   ======================== */
[data-lucide] { display: inline-block; vertical-align: middle; }

/* ========================
   Footer links
   ======================== */
.footer-link { transition: color 0.2s ease; }
.footer-link:hover { color: var(--gold) !important; }

/* ========================
   Legal content
   ======================== */
.legal-content ul { margin-top: 0.25rem; }
.legal-content strong { color: var(--dark); }