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

:root {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  
  --card: 0 0% 6%;
  --card-foreground: 0 0% 100%;
  
  --popover: 0 0% 6%;
  --popover-foreground: 0 0% 100%;
  
  --primary: 120 100% 50%;
  --primary-foreground: 0 0% 0%;
  
  --secondary: 0 0% 20%;
  --secondary-foreground: 0 0% 100%;
  
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 60%;
  
  --accent: 120 100% 50%;
  --accent-foreground: 0 0% 0%;
  
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  
  --border: 0 0% 20%;
  --input: 0 0% 10%;
  --ring: 120 100% 50%;
  
  --radius: 0.5rem;
}

* {
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Outfit', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  letter-spacing: -0.02em;
}

/* Animations that were handled by Framer Motion (Upgraded for high-end cinematic feel) */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.delay-100 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.3s; }
.delay-300 { animation-delay: 0.45s; }

.bounce-y {
  animation: bounceY 2s infinite ease-in-out;
}

@keyframes bounceY {
  0%, 100% { transform: translateY(0) translateX(-50%); }
  50% { transform: translateY(10px) translateX(-50%); }
}

/* Premium Parallax Effect with iOS responsive fallback */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (hover: none) {
  /* Disable on mobile devices that lag or scale poorly with fixed backgrounds */
  .parallax-bg {
    background-attachment: scroll;
  }
}

/* Big parallax text scaling dynamically to prevent any overflow on mobile & desktop */
.big-parallax-text {
  font-size: clamp(2rem, 7.8vw, 9.5rem) !important;
  letter-spacing: 0.2em !important;
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

/* Premium Dynamic Grays & Glassmorphic Glows */
.bg-premium-gray-gradient {
  background: radial-gradient(circle at center, #1b1b1e 0%, #030303 100%) !important;
}

/* Premium transition and hover behavior for cards */
.bg-card, .bg-card\/40, .bg-card\/50 {
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.bg-card:hover, .bg-card\/40:hover, .bg-card\/50:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(51, 255, 0, 0.35) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 35px -10px rgba(51, 255, 0, 0.15) !important;
  background-color: rgba(22, 22, 28, 0.8) !important;
}

/* Mobile menu toggle */
#mobile-menu {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#mobile-menu.hidden-menu {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

#mobile-menu.visible-menu {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Corrección del tamaño del logo en el header */
header#main-header .flex-shrink-0 img,
header#main-header img {
  max-height: 48px !important;
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  mix-blend-mode: screen; /* Elimina el fondo negro del logo */
}

/* Correcciones para Elementor (Forzar estilos) */
#main-header a {
  text-decoration: none !important;
}

/* =============================================
   PREMIUM FINISHING TOUCHES
   ============================================= */

/* Subtle ambient green glow on the page */
body::before {
  content: '';
  position: fixed;
  top: -20vh;
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  height: 40vh;
  background: radial-gradient(ellipse at center, rgba(51, 255, 0, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: ambientPulse 8s ease-in-out infinite;
}

@keyframes ambientPulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* Custom scrollbar — thin, brand-colored */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: #080808;
}
::-webkit-scrollbar-thumb {
  background: rgba(51, 255, 0, 0.3);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 255, 0, 0.6);
}

/* Premium focus ring matching brand color */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
  border-radius: 4px;
}

/* Smooth image loading transition */
img {
  transition: opacity 0.5s ease;
}

/* Remove tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Premium text gradient utility */
.text-gradient-primary {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(120, 100%, 70%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}