/* ═══════════════════════════════════════════════════════════
   DRA. NALÍGIA CAVALCANTE — Design System
   Biomedicina Estética de Alto Padrão
   Palette: Dark Green + Light Green + Gold
   ═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Manrope:wght@200;300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ── CSS Custom Properties ── */
:root {
  /* Primary Greens — Deep Forest / Earthy Dark */
  --green-950: #030E07;
  --green-900: #071811;
  --green-800: #0A2018;
  --green-750: #0D2B1E;  /* pardo-escuro novo */
  --green-700: #122A1C;
  --green-600: #1A3A26;
  --green-500: #234D34;
  --green-400: #2E6342;
  --green-300: #3D7A52;
  --green-200: #5A9E72;
  --green-100: #8DC4A5;
  --green-50:  #B8D9C8;

  /* Gold Accents — warm, not bright */
  --gold-900: #3D2C00;
  --gold-800: #5C4200;
  --gold-700: #7A5800;
  --gold-600: #9E7610;
  --gold-500: #C4A02A;
  --gold-400: #D9B840;
  --gold-300: #E8CC60;
  --gold-200: #F0DC88;
  --gold-100: #F8EDB8;
  --gold-50:  #FDF7E4;

  /* Neutrals — warm dark */
  --neutral-950: #080808;
  --neutral-900: #141210;
  --neutral-800: #1E1C18;
  --neutral-700: #2E2C28;
  --neutral-600: #3E3C38;
  --neutral-500: #5A5855;
  --neutral-400: #8A8885;
  --neutral-300: #B0AEAD;
  --neutral-200: #D0CECA;
  --neutral-100: #EAE8E5;

  /* Semantic — richer, pardo, muted */
  --bg-primary: #091510;
  --bg-secondary: #050D08;
  --bg-surface: #0C1E15;
  --bg-surface-2: #0F2618;
  --bg-card: rgba(10, 32, 24, 0.5);
  --text-primary: #C8DDD2;
  --text-secondary: rgba(180, 210, 195, 0.65);
  --text-gold: var(--gold-400);
  --accent: var(--gold-500);
  --accent-light: var(--gold-300);
  --border-subtle: rgba(180, 210, 195, 0.07);
  --border-gold: rgba(217, 184, 64, 0.18);

  /* Typography Scale */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-headline: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Manrope', 'Helvetica Neue', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Transitions */
  --ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 800ms;

  /* Shadows */
  --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 4px 40px rgba(196, 160, 42, 0.18);
  --shadow-elevated: 0 24px 70px rgba(0, 0, 0, 0.55);

  /* Border Radius — tudo arredondado */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-full: 9999px;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--duration-fast) var(--ease-luxury);
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* ── Animated Gold Gradient Text ── */
.gold-text-animated {
  background: linear-gradient(
    90deg,
    var(--gold-600) 0%,
    var(--gold-300) 15%,
    var(--gold-500) 30%,
    var(--gold-200) 50%,
    var(--gold-500) 70%,
    var(--gold-300) 85%,
    var(--gold-600) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 4s ease-in-out infinite;
}

.gold-text-static {
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-300) 50%, var(--gold-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Glassmorphism ── */
.glass {
  background: rgba(9, 21, 16, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.glass-gold {
  background: rgba(196, 160, 42, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
}

/* ── Gold Gradient Button ── */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-400) 50%, var(--gold-700) 100%);
  background-size: 200% auto;
  color: #030E07;
  padding: 14px 40px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-luxury);
}

.btn-gold:hover {
  background-position: right center;
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.btn-gold:active {
  transform: translateY(0) scale(0.98);
}

/* ── Outline Button ── */
.btn-outline {
  background: transparent;
  color: var(--gold-400);
  padding: 14px 40px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-luxury);
}

.btn-outline:hover {
  background: rgba(217, 184, 64, 0.08);
  border-color: var(--gold-400);
  box-shadow: var(--shadow-gold);
}

/* ── Container ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container-narrow {
  max-width: 900px;
}

.container-wide {
  max-width: 1440px;
}

/* ── Section Spacing ── */
.section {
  padding: var(--space-5xl) 0;
  position: relative;
}

/* ── Typography Classes ── */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 8rem);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.05;
  font-weight: 400;
}

.headline-lg {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.15;
  font-weight: 400;
}

.headline-md {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.2;
}

.label-uppercase {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.body-lg {
  font-size: 1.2rem;
  line-height: 1.85;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.body-md {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ── Decorative Line ── */
.divider-gold {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  border: none;
}

.divider-gold-center {
  margin: var(--space-lg) auto;
}

/* ── Keyframes ── */
@keyframes goldShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.3); }
  50% { box-shadow: 0 0 0 20px rgba(212, 175, 55, 0); }
}

@keyframes lineExpand {
  from { width: 0; }
  to { width: 100%; }
}

/* ── Scroll-Triggered Animations ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-luxury), transform 0.8s var(--ease-luxury);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s var(--ease-luxury), transform 0.8s var(--ease-luxury);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s var(--ease-luxury), transform 0.8s var(--ease-luxury);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-luxury), transform 0.6s var(--ease-luxury);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 768px) {
  :root {
    --space-5xl: 5rem;
    --space-4xl: 3.5rem;
  }

  .container {
    padding: 0 1.25rem;
  }

  .section {
    padding: var(--space-4xl) 0;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
}

/* ═══ ASYMMETRIC CURVES (Ponta Alta) ═══ */
.curve-asymmetric-top {
  clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -8vw;
  padding-top: calc(8vw + var(--spacing-xl));
  position: relative;
  z-index: 1;
}

.curve-asymmetric-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), 0 100%);
  padding-bottom: calc(8vw + var(--spacing-xl));
}