/* ============================================================
   LUMINA CLINIC · components.css
   Elementos reutilizáveis: nav, botões, ícones, FAB
   ============================================================ */

/* ---------- NAV ---------- */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 24px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .4s, padding .4s, box-shadow .4s;
}

nav.scrolled {
  background: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(12px);
  padding: 15px var(--pad-x);
  border-bottom: 1px solid var(--sand);
}

.nav-logo {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .14em;
  text-decoration: none;
  color: var(--dark);
}
.nav-logo span { color: var(--gold); }

.nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
  transition: color .25s;
}

.nav-links a:hover { color: var(--gold); }

.nav-cta {
  background: var(--gold);
  color: var(--white) !important;
  padding: 11px 24px !important;
  letter-spacing: .14em !important;
  transition: background .25s !important;
}

.nav-cta:hover { background: var(--dark) !important; }

/* Hamburger (mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 110;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--dark);
  transition: transform .3s, opacity .3s;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- BOTÕES ---------- */
.btn-primary {
  background: var(--dark);
  color: var(--white);
  padding: 16px 34px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .3s, transform .2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-primary:hover { background: var(--gold); transform: translateY(-2px); }

.btn-ghost {
  color: var(--mid);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--sand);
  padding-bottom: 3px;
  transition: color .25s, border-color .25s;
}

.btn-ghost:hover { color: var(--gold); border-color: var(--gold); }

.btn-white {
  background: var(--white);
  color: var(--dark);
  padding: 16px 34px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: var(--sans);
  transition: background .25s, transform .2s;
  display: inline-block;
}

.btn-white:hover { background: var(--cream); transform: translateY(-2px); }

.btn-outline-white {
  border: 1px solid rgba(255,255,255,.5);
  color: var(--white);
  padding: 15px 28px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: var(--sans);
  transition: border-color .25s, background .25s;
}

.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,.12); }

/* ---------- ÍCONE WHATSAPP (CSS mask, sem dependência) ---------- */
.wa-ico, .wa-ico-fab {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--wa-mask) center / contain no-repeat;
  mask: var(--wa-mask) center / contain no-repeat;
}
:root {
  --wa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
}
.wa-ico { width: 16px; height: 16px; }
.wa-ico-fab { width: 28px; height: 28px; color: var(--white); }

/* ---------- WHATSAPP FAB ---------- */
.whatsapp-fab {
  position: fixed;
  bottom: 32px; right: 32px;
  z-index: 200;
  background: #25D366;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(37,211,102,.35);
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  animation: pulse 2.6s 2s infinite;
}

.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 40px rgba(37,211,102,.5);
  animation: none;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(37,211,102,.35); }
  50%      { box-shadow: 0 8px 48px rgba(37,211,102,.6); }
}

/* ---------- CRO BADGE ---------- */
.cro-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--sand);
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--mid);
  margin-bottom: 36px;
}

.cro-badge::before {
  content: '✓';
  color: var(--gold);
  font-weight: 600;
}