:root {
  --color-pacific-blue: #0B2A72;
  --color-pacific-blue-dark: #071C4D;
  --color-pacific-blue-light: #163E9B;
  --color-tumi-gold: #D4AF37;
  --color-tumi-gold-light: #F3E5AB;
  --color-tumi-gold-dark: #A6841B;
  --color-graphite: #374151;
  --color-graphite-dark: #111827;
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #128C7E;
}

/* Tipografía y suavizado global */
html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #FAFAFC;
}

/* Gradiente hero corporativo con luz ambiental */
.bg-hero-pattern {
  background-color: #071C4D;
  background-image: 
    radial-gradient(circle at 50% -20%, rgba(22, 62, 155, 0.7) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(212, 175, 55, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 40%, rgba(11, 42, 114, 0.9) 0%, transparent 50%);
}

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
  }
  50% {
    box-shadow: 0 0 28px rgba(212, 175, 55, 0.5);
  }
}

@keyframes shimmer {
  0% { transform: translateX(-150%); }
  50%, 100% { transform: translateX(150%); }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.animate-float {
  animation: floatSlow 4.5s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Botón con destello brillante */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shimmer 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tarjetas ejecutivas con acabado Glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(11, 42, 114, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.4);
  border-color: rgba(212, 175, 55, 0.5);
}

/* Tarjetas de Capacitación */
.course-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(11, 42, 114, 0.15), 0 0 0 1px rgba(212, 175, 55, 0.5);
  border-color: rgba(212, 175, 55, 0.6);
}

/* Botones Flotantes de Redes Sociales y WhatsApp */
.floating-social-container {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.floating-social-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
  text-decoration: none !important;
}

.floating-social-btn:hover {
  transform: scale(1.12) !important;
}

.floating-social-btn:active {
  transform: scale(0.92) !important;
}

.floating-facebook-btn {
  background-color: #1877F2 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.floating-facebook-btn:hover {
  box-shadow: 0 12px 25px rgba(24, 119, 242, 0.65) !important;
}

.floating-tiktok-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.floating-tiktok-btn:hover {
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7) !important;
}

.floating-instagram-btn {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(220, 39, 67, 0.4) !important;
}

.floating-instagram-btn:hover {
  box-shadow: 0 12px 25px rgba(220, 39, 67, 0.6) !important;
}

.floating-whatsapp-btn {
  width: 58px !important;
  height: 58px !important;
  border-radius: 9999px !important;
  background-color: #25D366 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45) !important;
  animation: pulseRing 3s infinite;
  transition: transform 0.2s ease !important;
  text-decoration: none !important;
}

.floating-whatsapp-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.6) !important;
}

.floating-whatsapp-btn:active {
  transform: scale(0.92) !important;
}

/* Scroll Reveal (Animación suave de entrada al desplazarse) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Stagger delay helpers */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Utilidades WhatsApp y Botones de Conversión */
.bg-wa {
  background-color: #25D366 !important;
}
.bg-wa:hover,
.hover\:bg-wa-hover:hover {
  background-color: #20BA5A !important;
}
.text-wa {
  color: #25D366 !important;
}
.border-wa {
  border-color: #25D366 !important;
}
.bg-wa\/10,
.bg-wa-10 {
  background-color: rgba(37, 211, 102, 0.1) !important;
}