/* ==========================================
   HEADER Y NAVBAR MODERNO - TETRAKTYS
   Estilo Glassmorphism con Tailwind CSS
   Header Fixed Sticky desde el inicio
   ========================================== */

/* Header Glassmorphism - Base */
.header-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(27, 61, 47, 0.1);
  box-shadow: 0 4px 30px rgba(27, 61, 47, 0.1);
}

/* Header Fixed - Sticky desde el inicio */
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: all 0.3s ease-out;
}

/* Efecto cuando se hace scroll - shadow aumentada */
.header-scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  box-shadow: 0 8px 40px rgba(27, 61, 47, 0.2) !important;
  border-bottom: 1px solid rgba(27, 61, 47, 0.2) !important;
}

/* Animación suave al agregar clase scrolled */
.header-scrolled .logo-modern img {
  height: 2.5rem; /* h-10 */
  transition: all 0.3s ease;
}

.header-scrolled .nav-link-modern {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  transition: all 0.3s ease;
}

/* Navbar Container */
.navbar-modern {
  @apply relative flex items-center justify-between flex-wrap;
}

/* Logo Styles */
.logo-modern {
  @apply relative flex items-center gap-3;
  @apply transition-transform duration-300;
}

.logo-modern:hover {
  @apply scale-105;
}

.logo-modern img {
  @apply h-12 w-auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

.logo-modern:hover img {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.logo-text {
  @apply text-xl font-bold text-tetraktys-verdeoscuro;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0.5px;
}

/* Navigation Links - Moderno con indicador animado */
.nav-link-modern {
  @apply relative px-4 py-2 text-gray-600 font-medium;
  @apply transition-all duration-300 ease-out;
  @apply hover:text-tetraktys-verdeoscuro;
  @apply rounded-lg hover:bg-tetraktys-mentaclaro/30;
}

.nav-link-modern::after {
  content: '';
  @apply absolute bottom-0 left-1/2 w-0 h-0.5;
  @apply bg-tetraktys-verdeacent;
  @apply transition-all duration-300 ease-out;
  @apply transform -translate-x-1/2 rounded-full;
}

.nav-link-modern:hover::after,
.nav-link-modern.active::after {
  @apply w-full;
}

/* Active state */
.nav-link-modern.active {
  @apply text-tetraktys-verdeoscuro;
  @apply bg-tetraktys-mentaclaro/20;
}

/* Botones de Acción - Estilo Pill Moderno */
.btn-action {
  @apply inline-flex items-center gap-2 px-5 py-2;
  @apply text-sm font-semibold text-white;
  @apply rounded-full shadow-md;
  @apply transition-all duration-300 ease-out;
  @apply hover:shadow-lg hover:scale-105 hover:-translate-y-0.5;
  @apply active:scale-95 active:translate-y-0;
}

.btn-primary {
  @apply bg-gradient-to-r from-tetraktys-verdeacent to-tetraktys-verde;
  @apply hover:from-tetraktys-verde hover:to-tetraktys-verdeoscuro;
}

.btn-secondary {
  @apply bg-gradient-to-r from-tetraktys-verde to-tetraktys-verdeoscuro;
  @apply hover:from-tetraktys-verdeoscuro hover:to-tetraktys-verde;
}

.btn-icon {
  @apply inline-flex items-center justify-center;
  @apply w-8 h-8 rounded-full;
  @apply bg-white/20 backdrop-blur-sm;
  @apply transition-all duration-300;
}

.btn-icon:hover {
  @apply bg-white/40 scale-110;
}

/* Social Icons - Modernos con efectos */
.social-icon {
  @apply relative inline-flex items-center justify-center;
  @apply w-10 h-10 rounded-full;
  @apply text-white transition-all duration-300;
  @apply hover:shadow-lg hover:-translate-y-1;
}

.social-facebook {
  @apply bg-blue-600/90 hover:bg-blue-700;
}

.social-instagram {
  @apply bg-gradient-to-br from-purple-600 via-pink-500 to-orange-400;
  @apply hover:shadow-lg hover:shadow-purple-500/30;
}

/* Mobile Menu Toggle - Hamburger Animado */
.mobile-toggle {
  @apply relative w-10 h-10;
  @apply flex flex-col items-center justify-center;
  @apply rounded-xl bg-tetraktys-verde/10;
  @apply cursor-pointer;
  @apply transition-all duration-300;
  @apply hover:bg-tetraktys-verde/20;
}

.mobile-toggle span {
  @apply w-6 h-0.5 bg-tetraktys-verdeoscuro;
  @apply rounded-full transition-all duration-300;
  @apply my-0.5;
}

.mobile-toggle.active span:nth-child(1) {
  @apply rotate-45 translate-y-1.5;
}

.mobile-toggle.active span:nth-child(2) {
  @apply opacity-0;
}

.mobile-toggle.active span:nth-child(3) {
  @apply -rotate-45 -translate-y-1.5;
}

/* Mobile Menu Panel */
.mobile-menu-panel {
  @apply absolute top-full left-0 right-0;
  @apply bg-white/95 backdrop-blur-xl;
  @apply shadow-2xl rounded-b-2xl;
  @apply border-t border-gray-100;
  @apply overflow-hidden transition-all duration-300 ease-out;
  @apply max-h-0 opacity-0;
}

.mobile-menu-panel.active {
  @apply max-h-screen opacity-100;
}

.mobile-menu-items {
  @apply py-4 px-2;
}

.mobile-menu-item {
  @apply block w-full px-4 py-3;
  @apply text-gray-700 font-medium;
  @apply rounded-xl transition-all duration-200;
  @apply hover:bg-tetraktys-mentaclaro/30;
  @apply hover:text-tetraktys-verdeoscuro;
}

/* Scroll Effect - Header pegajoso con cambio de estilo */
/* Manejado por JavaScript con clase .header-scrolled */

/* Navbar Dropdown (si se necesita) */
.nav-dropdown {
  @apply absolute top-full left-0;
  @apply min-w-48 bg-white/95 backdrop-blur-xl;
  @apply rounded-xl shadow-xl border border-gray-100;
  @apply opacity-0 invisible;
  @apply transition-all duration-300;
  @apply transform translate-y-2;
}

.nav-dropdown.show {
  @apply opacity-100 visible;
  @apply translate-y-0;
}

.nav-dropdown-item {
  @apply block px-4 py-2;
  @apply text-gray-600 hover:text-tetraktys-verdeoscuro;
  @apply hover:bg-tetraktys-mentaclaro/20;
  @apply transition-colors duration-200;
}

/* Animaciones de entrada */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slideDown 0.3s ease-out forwards;
}

/* Efecto shimmer para botones (opcional) */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.btn-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Indicador de badge para notificaciones */
.nav-badge {
  @apply absolute -top-1 -right-1;
  @apply w-5 h-5 bg-red-500 text-white text-xs;
  @apply rounded-full flex items-center justify-center;
  @apply animate-pulse;
}

/* Separador visual entre elementos */
.nav-separator {
  @apply w-px h-6 bg-gray-300 mx-2;
  @apply hidden md:block;
}

/* Container responsive */
.header-container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Media queries personalizadas */
@media (max-width: 1024px) {
  .navbar-desktop {
    @apply hidden;
  }
  
  .navbar-mobile-trigger {
    @apply flex;
  }
}

@media (min-width: 1024px) {
  .navbar-desktop {
    @apply flex;
  }
  
  .navbar-mobile-trigger {
    @apply hidden;
  }
}

/* Utilities adicionales */
.text-gradient {
  @apply bg-clip-text text-transparent;
  background-image: linear-gradient(135deg, #1b3d2f 0%, #2e593f 50%, #4caf50 100%);
}

.shadow-soft {
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05),
              0 5px 35px rgba(27, 61, 47, 0.1);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ==========================================
   CLASES STICKY ANTIGUAS (ELIMINAR)
   Ya no se usan - el header es fixed desde el inicio
   ==========================================

   Eliminado:
   - .header-sticky-init { position: absolute; }
   - .header-sticky-visible { position: fixed; }
   - .header-glass-sticky

   Ahora usamos:
   - .header-fixed { position: fixed; } en el HTML
   - .header-scrolled { ... } agregado por JS al hacer scroll

   ========================================== */