/* ====================================================================
   GEFAÉN 2026 — Grande Encontro da Família Aéneas
   Luxury Royal & Liquid Gold Aesthetic Design System
   ==================================================================== */

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

/* ── Design Tokens ─────────────────────────────────────────────────── */
:root {
  --royal-950: #123066;
  --royal-900: #183d7f;
  --royal-850: #1c458e;
  --royal-800: #1e4d9b;
  --royal-700: #2257ae;
  --royal-600: #2563c9;
  --royal-500: #3b76de;
  --royal-400: #4b87e0;
  --royal-300: #76a5eb;
  --royal-200: #a7c6f3;
  --royal-100: #dce7f9;
  --royal-50:  #f2f7fc;

  --gold-900: #7a5200;
  --gold-700: #b8860b;
  --gold-600: #c9a227;
  --gold-500: #d4a82a;
  --gold-400: #e8c547;
  --gold-300: #f0d878;
  --gold-200: #f7e6a5;
  --gold-100: #fdf5d3;
  --gold-50:  #fffdf0;

  --silk-cream: #f6f8fc;
  --white:      #ffffff;
  
  --text-900: #123066;
  --text-700: #1e4d9b;
  --text-500: #2563c9;
  --text-300: #4b87e0;

  --shadow-gold-glow: 0 0 35px rgba(212, 168, 42, 0.3);
  --shadow-royal-glow: 0 20px 50px rgba(30, 77, 155, 0.25);
  --shadow-card: 0 10px 30px -5px rgba(30, 77, 155, 0.08);
  --shadow-card-hover: 0 20px 40px -10px rgba(37, 99, 201, 0.2);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--silk-cream);
  color: var(--text-900);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.012em;
}

.font-cinzel, .font-sora { font-family: 'Sora', sans-serif; }
.font-sans, .font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }

/* ── Custom Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--royal-900); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-600), var(--royal-600));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

/* ── Glassmorphism Panels ───────────────────────────────────────────── */
.glass-panel-dark {
  background: rgba(11, 19, 43, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-royal-glow);
}

.glass-panel-gold {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(255, 255, 255, 0.85) 100%);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15);
}

.glass-card-white {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 235, 253, 0.8);
  box-shadow: var(--shadow-card);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card-white:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: var(--shadow-card-hover), var(--shadow-gold-glow);
}

/* ── Shimmer & Gold Gradients ────────────────────────────────────────── */
.shimmer-gold {
  background: linear-gradient(
    90deg,
    #a3780d 0%,
    #d4af37 25%,
    #fff2b3 50%,
    #d4af37 75%,
    #a3780d 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 6s linear infinite;
}

@keyframes goldShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.gradient-hero-dark {
  background: linear-gradient(135deg, #1e4d9b 0%, #183d7f 50%, #123066 100%);
}

.gradient-gold-badge {
  background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 50%, var(--gold-700) 100%);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #e5ba73 0%, #d4af37 50%, #c99a18 100%);
  color: #0b132b;
  font-weight: 800;
  padding: 15px 34px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s ease;
}
.btn-gold:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 35px rgba(212, 175, 55, 0.5);
  color: #050914;
}
.btn-gold:hover::after { left: 100%; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--royal-700) 0%, var(--royal-600) 100%);
  color: #ffffff;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(11, 19, 43, 0.25);
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--royal-600) 0%, var(--royal-500) 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(11, 19, 43, 0.35);
}

.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: var(--gold-300);
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 16px;
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-outline-gold:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--gold-400);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ── Section Dividers & Ornaments ───────────────────────────────────── */
.ornament-gold {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.ornament-gold::before,
.ornament-gold::after {
  content: '';
  flex: 1;
  max-width: 100px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}
.ornament-gold::after {
  background: linear-gradient(90deg, var(--gold-500), transparent);
}

/* ── Ticket Badge Design ────────────────────────────────────────────── */
.ticket-badge-luxury {
  background: #ffffff;
  border: 1px solid var(--gold-200);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
}
.ticket-badge-luxury::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--royal-700), var(--gold-500), var(--royal-700));
}

.ticket-hole-left,
.ticket-hole-right {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--silk-cream);
  border: 2px dashed var(--royal-100);
  z-index: 10;
}
.ticket-hole-left  { left: -14px; }
.ticket-hole-right { right: -14px; }

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-10px) rotate(1deg); }
}
.anim-float { animation: floatSlow 6s ease-in-out infinite; }

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(1.05); }
}
.anim-pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }

/* ── Scroll Reveal ───────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

/* ── Number Stats ────────────────────────────────────────────────────── */
.stat-number-gold {
  font-family: 'Sora', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-700), var(--gold-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}