/* ========================================================
   DR. LUCA MOTTA — LUXURY EDITORIAL DESIGN SYSTEM
   Boutique Clinic · Vogue Square · Barra da Tijuca
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Cores Nobres Primárias */
  --navy-deep: #0B1B33;
  --navy-dark: #081426;
  --navy-muted: #1A2F4C;
  --gold-accent: #C5A880;
  --gold-soft: #D9C5A8;
  --gold-light: #F7F3EE;

  /* Superfícies & Fundos */
  --bg-main: #FBFBF9;
  --bg-card: #FFFFFF;
  --bg-contrast: #F5F5F0;
  --bg-dark: #081324;

  /* Tipografia */
  --text-primary: #121417;
  --text-secondary: #5C626C;
  --text-muted: #8A909A;
  --text-light: #F7F8FA;

  /* Bordas & Linhas Milimétricas */
  --border-hairline: rgba(11, 27, 51, 0.08);
  --border-subtle: #E8E8E2;
  --border-dark: rgba(255, 255, 255, 0.12);

  /* Sombras Elegantes & Precisas */
  --shadow-editorial: 0 10px 30px -10px rgba(11, 27, 51, 0.08);
  --shadow-card: 0 16px 40px -15px rgba(11, 27, 51, 0.09);
  --shadow-hover: 0 24px 50px -18px rgba(11, 27, 51, 0.16);

  /* Fontes */
  --font-serif: 'Cinzel', 'Playfair Display', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Base Geral */
body {
  background-color: var(--bg-main) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .font-serif {
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Tag Eyebrow Editorial (Substitui pílulas infantis de IA) */
.editorial-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-accent);
  margin-bottom: 14px;
}

.editorial-tag::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--gold-accent);
}

/* Header & Barra de Navegação */
.nav-luxury {
  background: rgba(251, 251, 249, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-hairline) !important;
  box-shadow: 0 4px 20px -8px rgba(11, 27, 51, 0.04) !important;
  padding: 14px 24px !important;
  border-radius: 0 !important;
}

.nav-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  transition: color 0.2s ease !important;
}

.nav-link:hover {
  color: var(--navy-deep) !important;
}

/* Botões Editoriais */
.btn-editorial-primary {
  background: var(--navy-deep) !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  border: 1px solid var(--navy-deep) !important;
  box-shadow: 0 10px 25px -8px rgba(11, 27, 51, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.btn-editorial-primary:hover {
  background: var(--navy-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(11, 27, 51, 0.5) !important;
}

.btn-editorial-secondary {
  background: transparent !important;
  color: var(--navy-deep) !important;
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 14px 26px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(11, 27, 51, 0.2) !important;
  transition: all 0.25s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.btn-editorial-secondary:hover {
  background: #FFFFFF !important;
  border-color: var(--navy-deep) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-editorial);
}

/* Molduras de Fotos Editoriais */
.editorial-photo-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-hairline);
  background: #ECECE6;
}

.editorial-photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

/* Cards de Tratamentos Editoriais */
.treatment-card-luxury {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: var(--shadow-editorial) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.treatment-card-luxury:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(197, 168, 128, 0.4) !important;
}

/* Cards de Vídeos de Casos & Depoimentos */
.video-case-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #111A24;
  aspect-ratio: 9/16;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-hairline);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-case-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.video-case-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.video-case-card:hover img {
  transform: scale(1.04);
}

.video-case-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.1) 0%, rgba(8, 20, 38, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  color: #FFFFFF;
}

.video-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 18px;
  margin-bottom: 14px;
  transition: transform 0.25s ease, background 0.25s ease;
}

.video-case-card:hover .video-play-btn {
  transform: scale(1.1);
  background: var(--gold-accent);
  border-color: var(--gold-accent);
}

/* Linha Divisória de Precisão */
.hairline-divider {
  width: 100%;
  height: 1px;
  background: var(--border-hairline);
  margin: 48px 0;
}