@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 */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}

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

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

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

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

/* 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;
}