/* ====================================
   CONFAÉN 2026 — Light Premium Theme
   Paleta: Azul Royal + Dourado
   ==================================== */

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

/* ── Design Tokens ─────────────────── */
:root {
  --blue-900: #0d2147;
  --blue-800: #162e5e;
  --blue-700: #1a3a6b;
  --blue-600: #1e4d9b;
  --blue-500: #2563c9;
  --blue-400: #4b87e0;
  --blue-300: #93b8f0;
  --blue-100: #ddeafc;
  --blue-50:  #eef4fd;

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

  --cream:    #f9f6ef;
  --white:    #ffffff;
  --text-900: #0d1f3c;
  --text-700: #2d3f5e;
  --text-400: #6b7a97;
  --text-200: #a8b4c8;

  --shadow-blue: 0 20px 60px rgba(30, 77, 155, 0.15);
  --shadow-gold: 0 20px 60px rgba(201, 162, 39, 0.20);
  --shadow-card: 0 4px 24px rgba(13, 33, 71, 0.08);
}

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

html { scroll-behavior: smooth; }

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

.font-cinzel, .font-playfair, .font-sora { font-family: 'Sora', sans-serif; }
.font-inter, .font-jakarta { font-family: 'Inter', sans-serif; }

/* ── Scrollbar ─────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--blue-50); }
::-webkit-scrollbar-thumb { background: var(--blue-400); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-600); }

/* ── Glass Panels ──────────────────── */
.glass-white {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.glass-blue {
  background: rgba(22, 46, 94, 0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(30, 77, 155, 0.12);
}

.glass-gold {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.08) 0%, rgba(255,255,255,0.9) 100%);
  border: 1px solid rgba(201, 162, 39, 0.30);
}

/* ── Gradients ─────────────────────── */
.gradient-blue-text {
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 60%, var(--blue-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.gradient-hero {
  background: linear-gradient(160deg,
    var(--blue-900) 0%,
    var(--blue-700) 35%,
    #2040a0 65%,
    #1a3580 100%
  );
}

/* ── Animations ────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-14px) rotate(1deg); }
}

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

@keyframes pulse-ring {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(201,162,39,0.5); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 18px rgba(201,162,39,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(201,162,39,0); }
}

@keyframes shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(201,162,39,0.3); box-shadow: 0 0 0 rgba(201,162,39,0); }
  50%       { border-color: rgba(201,162,39,0.7); box-shadow: 0 0 20px rgba(201,162,39,0.15); }
}

@keyframes rotateSlowly {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Animation Classes ─────────────── */
.anim-fade-up  { animation: fadeUp  0.7s ease both; }
.anim-fade-in  { animation: fadeIn  0.6s ease both; }
.anim-float    { animation: float   5s ease-in-out infinite; }
.anim-float-s  { animation: floatSlow 7s ease-in-out infinite; }
.anim-pulse-ring { animation: pulse-ring 2.5s ease-in-out infinite; }
.anim-border-glow { animation: borderGlow 3s ease-in-out infinite; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* ── Scroll Reveal ─────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Shimmer Text ──────────────────── */
.shimmer-gold {
  background: linear-gradient(90deg,
    var(--gold-900) 0%,
    var(--gold-600) 30%,
    var(--gold-300) 50%,
    var(--gold-600) 70%,
    var(--gold-900) 100%
  );
  background-size: 400% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}

/* ── Ticket Badge ──────────────────── */
.ticket-badge {
  background: linear-gradient(135deg, #fff 0%, var(--blue-50) 100%);
  border: 2px solid var(--blue-100);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(30,77,155,0.05);
}

.ticket-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue-600), var(--gold-600), var(--blue-600));
  background-size: 200%;
  animation: shimmer 4s linear infinite;
}

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

/* ── Cards ─────────────────────────── */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-blue);
}

/* ── Section Divider Ornament ──────── */
.ornament {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-600));
}
.ornament::after {
  background: linear-gradient(90deg, var(--gold-600), transparent);
}

/* ── Buttons ───────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
  color: #fff;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: 'Outfit', sans-serif;
  box-shadow: 0 8px 24px rgba(30,77,155,0.30);
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(30,77,155,0.40); }
.btn-primary:hover::after { left: 100%; }

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-500) 100%);
  color: #fff;
  font-weight: 800;
  padding: 16px 36px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Outfit', sans-serif;
  box-shadow: 0 8px 24px rgba(201,162,39,0.35);
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(201,162,39,0.45); }

.btn-outline-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: var(--blue-700);
  font-weight: 700;
  padding: 13px 30px;
  border-radius: 14px;
  border: 2px solid var(--blue-300);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: 'Outfit', sans-serif;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-outline-blue:hover {
  background: var(--blue-50);
  border-color: var(--blue-500);
  transform: translateY(-2px);
}

/* ── Floating Particles ────────────── */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.12;
}

/* ── Number Counter Style ──────────── */
.stat-number {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: countUp 0.5s ease both;
}

/* ── Wave Section Divider ──────────── */
.wave-top {
  position: relative;
  margin-top: -2px;
}

/* ── Utility Overrides ─────────────── */
.text-blue-900 { color: var(--blue-900); }
.text-blue-700 { color: var(--blue-700); }
.text-blue-500 { color: var(--blue-500); }
.text-gold-700 { color: var(--gold-700); }
.text-gold-600 { color: var(--gold-600); }
.bg-cream      { background-color: var(--cream); }

/* ── Timeline (Program) ────────────── */
.timeline-item {
  position: relative;
  padding-left: 32px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-400), transparent);
}
.timeline-dot {
  position: absolute;
  left: -5px; top: 24px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold-600);
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(201,162,39,0.2);
}