;

<!-- Hero Slider para Eventos -->
<div class="hero-slider relative" style="margin-top: 65px; height: 500px;">
  <div class="slider-container relative w-full h-full overflow-hidden">
    <!-- Slide 1 -->
    <div class="slide absolute inset-0 flex items-center justify-center bg-cover bg-center transition-opacity duration-1000 ease-in-out opacity-100" style="background-image: url('/assets/img/marzo/eventos2.jpg');">
      <div class="hero-overlay absolute inset-0 bg-black bg-opacity-50"></div>
      <div class="hero-content container mx-auto px-6 text-center relative z-10 text-white">
        <h1 class="hero-title text-5xl md:text-6xl font-bold mb-6 text-white hover:text-yellow-400 transition-colors duration-300">Eventos Destacados</h1>
        <p class="hero-subtitle text-xl md:text-2xl max-w-3xl mx-auto mb-8">Descubre nuestras experiencias únicas</p>
      </div>
    </div>
    
    <!-- Slide 2 -->
    <div class="slide absolute inset-0 flex items-center justify-center bg-cover bg-center transition-opacity duration-1000 ease-in-out opacity-0" style="background-image: url('/assets/img/febrero/eventos2.jpeg');">
      <div class="hero-overlay absolute inset-0 bg-black bg-opacity-50"></div>
      <div class="hero-content container mx-auto px-6 text-center relative z-10 text-white">
        <h1 class="hero-title text-5xl md:text-6xl font-bold mb-6 text-white hover:text-yellow-400 transition-colors duration-300">Próximos Eventos</h1>
        <p class="hero-subtitle text-xl md:text-2xl max-w-3xl mx-auto mb-8">No te pierdas nuestras próximas actividades</p>
      </div>
    </div>
    
    <!-- Slide 3 -->
    <div class="slide absolute inset-0 flex items-center justify-center bg-cover bg-center transition-opacity duration-1000 ease-in-out opacity-0" style="background-image: url('/assets/img/marzo/eventos3.jpg');">
      <div class="hero-overlay absolute inset-0 bg-black bg-opacity-50"></div>
      <div class="hero-content container mx-auto px-6 text-center relative z-10 text-white">
        <h1 class="hero-title text-5xl md:text-6xl font-bold mb-6 text-white hover:text-yellow-400 transition-colors duration-300">Experiencias Inolvidables</h1>
        <p class="hero-subtitle text-xl md:text-2xl max-w-3xl mx-auto mb-8">Crea memorias que durarán para siempre</p>
      </div>
    </div>
  </div>
  
  <!-- Slider Navigation -->
  <div class="slider-nav absolute bottom-4 left-0 right-0 flex justify-center gap-2 z-10">
    <button class="slider-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none transition-all duration-300" data-slide="0"></button>
    <button class="slider-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none transition-all duration-300" data-slide="1"></button>
    <button class="slider-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none transition-all duration-300" data-slide="2"></button>
  </div>
</div>



<!-- ./ Inicia el llamado de productos a la vista -->
<div class="bg-gray-200">
  <div class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
  <center>
    <h1 class="text-5xl md:text-4xl font-bold mb-6 text-ger hover:text-yellow-400"> Eventos</h1>
  </center>
     <!-- Filtros agregados -->
     <div class="flex space-x-2 mb-8 justify-center">
      <a href="https://novaclouds.space/visita/eventos" 
         class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">
         Todos      </a>
      <a href="https://novaclouds.space/visita/eventos?filtro=proximo" 
         class="px-4 py-2 rounded bg-blue-500 text-white">
         Próximos      </a>
      <a href="https://novaclouds.space/visita/eventos?filtro=futuro" 
         class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">
          Futuros      </a>
      <a href="https://novaclouds.space/visita/eventos?filtro=finalizado" 
         class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">
         Finalizados  
      </a>
  </div>

<br>
<br>
    
    <!-- Contenedor principal -->
    <div class="flex flex-wrap -m-4 bg-gray-200">
          </div>
    </div>


<!-- Script para el slider -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Slider de eventos
    const slides = document.querySelectorAll('.hero-slider .slide');
    const dots = document.querySelectorAll('.hero-slider .slider-dot');
    let currentSlide = 0;
    let slideInterval;
    
    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.style.opacity = i === index ? '1' : '0';
        slide.style.zIndex = i === index ? '1' : '0';
      });
      
      dots.forEach((dot, i) => {
        dot.classList.toggle('bg-opacity-100', i === index);
        dot.classList.toggle('bg-opacity-50', i !== index);
      });
    }
    
    function nextSlide() {
      currentSlide = (currentSlide + 1) % slides.length;
      showSlide(currentSlide);
    }
    
    // Auto-rotate slides every 5 seconds
    function startSlider() {
      slideInterval = setInterval(nextSlide, 5000);
    }
    
    // Initialize slider
    showSlide(0);
    startSlider();
    
    // Pause on hover
    const slider = document.querySelector('.hero-slider');
    slider.addEventListener('mouseenter', () => clearInterval(slideInterval));
    slider.addEventListener('mouseleave', startSlider);
    
    // Dot navigation
    dots.forEach(dot => {
      dot.addEventListener('click', function() {
        currentSlide = parseInt(this.getAttribute('data-slide'));
        showSlide(currentSlide);
        clearInterval(slideInterval);
        slideInterval = setInterval(nextSlide, 5000);
      });
    });
    
    // Animación de carga para las tarjetas
    const eventCards = document.querySelectorAll('.grid > div');
    eventCards.forEach((card, index) => {
      card.style.opacity = '0';
      card.style.transform = 'translateY(20px)';
      card.style.animation = `fadeInUp 0.5s ease-out forwards ${index * 0.1}s`;
    });
  });
</script>

<style>
  .hero-slider {
    position: relative;
    height: 500px;
  }
  
  .hero-slider .slide {
    transition: opacity 1s ease-in-out;
  }
  
  .hero-slider .hero-overlay {
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  .hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
</style>
    

<!-- Preloader optimizado con GIF -->
<div id="flamingo-loader" class="fixed inset-0 z-50 flex items-center justify-center bg-white opacity-0 transition-opacity duration-300 pointer-events-none">
  <div class="text-center">
    <!-- Imagen precargada -->
    <img src="https://novaclouds.space/assets/img/flamingo-loader.gif" 
         alt="Flamingo loading" 
         class="mx-auto h-48"
         loading="eager"
         decoding="async"
         width="192"
         height="192">
    <p class="mt-4 text-xl font-semibold text-green-800">Cargando...</p>
  </div>
</div>

<script>
  // Precargar el GIF antes de que se necesite
  const preloadImage = new Image();
  preloadImage.src = "https://novaclouds.space/assets/img/flamingo-loader.gif";

  // Mostrar loader inmediatamente
  document.addEventListener('DOMContentLoaded', function() {
    const loader = document.getElementById('flamingo-loader');
    loader.style.opacity = '1';
    
    // Ocultar cuando todo esté listo
    function hideLoader() {
      loader.style.opacity = '0';
      setTimeout(() => {
        loader.remove();
      }, 300);
    }

    // Ocultar al terminar la carga
    if (document.readyState === 'complete') {
      hideLoader();
    } else {
      window.addEventListener('load', hideLoader);
      
      // Fallback por si acaso
      setTimeout(hideLoader, 3000);
    }
  });
</script>

<!-- Estilo para prevenir FOUC -->
<style>
  html {
    visibility: hidden;
    opacity: 0;
  }
  html.loaded {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
</style>

<script>
  // Mostrar contenido cuando esté listo
  document.addEventListener('DOMContentLoaded', function() {
    document.documentElement.classList.add('loaded');
  });
</script>

<div>
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Guardianes de Los Manglares Dzinintún</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/tailwindcss@2.0.1/dist/tailwind.min.css'>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,600;0,700;1,400&amp;display=swap'><link rel="stylesheet" href="./style.css">
  <link href="https://novaclouds.space/css/app.css" rel="stylesheet">
  <link rel="icon" href="https://novaclouds.space/assets/img/Guardianess.png" type="image/x-icon" />
  <script src="https://use.fontawesome.com/b658ad5274.js"></script>
  <link rel="stylesheet" href="css/output.css">
</head>
<!-- Alpine.js para interactividad -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- Font Awesome para íconos -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
  /* Animaciones personalizadas */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
  }
  
  .animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
  }
  
  .animate-pulse {
    animation: pulse 2s infinite;
  }
  
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  /* Estilos para la barra de navegación */
  .nav-container {
    background: linear-gradient(135deg, rgba(50, 71, 35, 0.988) 0%, rgb(1, 222, 251) 100%);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
  }
  
  .nav-scrolled {
    background-color: rgba(21, 83, 41, 0.95) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .menu-link {
    position: relative;
    color: white;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
  }
  
  .menu-link:hover {
    color: #e5e7eb;
  }
  
  .menu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: white;
    transition: all 0.3s ease;
  }
  
  .menu-link:hover::after {
    left: 0;
    width: 100%;
  }
  
  /* Estilos para el botón de login */
  .login-btn-container {
    position: relative;
    margin-left: 1rem;
  }
  
  .login-btn-glow {
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg, #84cc16, #22c55e, #16a34a);
    border-radius: 12px;
    filter: blur(5px);
    opacity: 0.7;
    z-index: -1;
    animation: pulse 2s infinite;
  }
  
  .login-btn {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: white;
    color: #166534;
    font-weight: bold;
    border-radius: 10px;
    transition: all 0.3s ease;
    z-index: 1;
  }
  
  .login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(22, 101, 52, 0.4);
  }
  
  /* Estilos para el hero banner */
  .hero-banner {
    height: 80vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  
  .hero-overlay {
    background: rgba(0, 0, 0, 0.4);
  }
  
  .hero-content {
    transform: translateY(20px);
    opacity: 0;
    animation: fadeIn 1s ease-out 0.5s forwards;
  }
  
  /* Estilos para las tarjetas de servicios */
  .service-card {
    transition: all 0.3s ease;
    transform: perspective(1000px) rotateY(0deg);
  }
  
  .service-card:hover {
    transform: perspective(1000px) rotateY(5deg) translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  /* Estilos para el mapa */
  .map-container {
    transition: all 0.3s ease;
  }
  
  .map-container:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
  
  /* Estilos para el footer */
  .footer-wave {
    height: 150px;
    overflow: hidden;
  }
  
  .footer-wave svg {
    height: 100%;
    width: 100%;
  }
  
  .footer-wave .shape-fill {
    fill: #3E655B;
  }
  
  /* Estilos para dispositivos móviles */
  @media (max-width: 768px) {
    .hero-banner {
      height: 60vh;
    }
    
    .hero-title {
      font-size: 2.5rem !important;
    }
    
    .hero-subtitle {
      font-size: 1.2rem !important;
    }

    .language-selector {
        position: relative;
        display: inline-block;
        font-family: Arial, sans-serif;
    }
    
    .language-selector__toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .language-selector__toggle:hover {
        border-color: #999;
    }
    
    .language-selector__chevron {
        margin-left: 4px;
        transition: transform 0.2s;
    }
    
    .language-selector__dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        margin-top: 4px;
        padding: 0;
        list-style: none;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s;
        z-index: 100;
    }
    
    .language-selector:hover .language-selector__dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .language-selector:hover .language-selector__chevron {
        transform: rotate(180deg);
    }
    
    .language-selector__option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: #333;
        text-decoration: none;
        transition: background 0.2s;
    }
    
    .language-selector__option:hover {
        background: #f5f5f5;
    }
    
    .language-selector__item.active .language-selector__option {
        background: #f0f0f0;
        font-weight: bold;
    }
  }
</style>
</head>
<body class="antialiased">
  <!-- Alpine.js para interactividad -->
  <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

  <!-- Barra de navegación -->
  <nav x-data="{ mobileOpen: false, scrolled: false }" 
       @scroll.window="scrolled = window.scrollY > 50"
       :class="{ 'nav-scrolled': scrolled }"
       class="nav-container flex justify-between items-center w-screen px-8 xl:px-12 py-1 fixed top-0 z-50">
       
    <!-- Logo -->
    <a class="text-3xl font-bold font-heading" href="https://novaclouds.space">
      <img src="https://novaclouds.space/assets/img/Guardianess.png" alt="logo" style="width: 87px; height: auto;" class="hover:scale-105 transition-transform duration-300">
    </a>
   

    <div class="language-selector relative" x-data="{ open: false }">
      <!-- Botón del selector -->
      <button @click="open = !open" 
              @click.outside="open = false"
              class="language-selector__toggle flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg hover:border-gray-300 transition-all">
          <img src="https://flagcdn.com/w20/mx.png" 
               alt="Español"
               width="20"
               height="15"
               class="flex-shrink-0">
          <span class="text-sm font-medium">ES</span>
          <svg class="w-4 h-4 transition-transform duration-200" 
               :class="{ 'rotate-180': open }"
               fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
          </svg>
      </button>
      
      <!-- Menú desplegable -->
      <div x-show="open" 
           x-transition:enter="transition ease-out duration-100"
           x-transition:enter-start="opacity-0 scale-95"
           x-transition:enter-end="opacity-100 scale-100"
           x-transition:leave="transition ease-in duration-75"
           x-transition:leave-start="opacity-100 scale-100"
           x-transition:leave-end="opacity-0 scale-95"
           class="absolute right-0 mt-2 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 z-50">
          <ul class="py-1">
                                <li class="bg-gray-100">
                      <a href="https://novaclouds.space/language/es" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/mx.png" 
                               alt="Español"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>Español</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/en" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/us.png" 
                               alt="English"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>English</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/it" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/it.png" 
                               alt="Italiano"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>Italiano</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/ja" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/jp.png" 
                               alt="日本語"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>日本語</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/ko" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/kr.png" 
                               alt="한국어"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>한국어</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/zh" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/cn.png" 
                               alt="中文"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>中文</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/fr" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/fr.png" 
                               alt="Français"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>Français</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/pt" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/pt.png" 
                               alt="Português"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>Português</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/de" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/de.png" 
                               alt="Deutsch"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>Deutsch</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/ru" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/ru.png" 
                               alt="Русский"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>Русский</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/ar" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/sa.png" 
                               alt="العربية"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>العربية</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/hi" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/in.png" 
                               alt="हिन्दी"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>हिन्दी</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/bn" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/bd.png" 
                               alt="বাংলা"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>বাংলা</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/tr" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/tr.png" 
                               alt="Türkçe"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>Türkçe</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/nl" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/nl.png" 
                               alt="Nederlands"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>Nederlands</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/pl" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/pl.png" 
                               alt="Polski"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>Polski</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/vi" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/vn.png" 
                               alt="Tiếng Việt"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>Tiếng Việt</span>
                      </a>
                  </li>
                                <li class="hover:bg-gray-50">
                      <a href="https://novaclouds.space/language/th" 
                         class="flex items-center px-4 py-2 text-sm text-gray-700">
                          <img src="https://flagcdn.com/w20/th.png" 
                               alt="ไทย"
                               width="20"
                               height="15"
                               class="mr-2">
                          <span>ไทย</span>
                      </a>
                  </li>
                        </ul>
      </div>
  </div>
    
    <!-- Menú desktop -->
    <div class="hidden lg:flex items-center">
      <ul class="flex space-x-2">
        <li>
          <a class="menu-link text-lg font-semibold" href="https://novaclouds.space">
            <i class="fas fa-home menu-icon"></i>Inicio
          </a>
        </li>
        <li>
          <a class="menu-link text-lg font-semibold" href="https://novaclouds.space/visita/nosotros">
            <i class="fas fa-users menu-icon"></i>Nosotros
          </a>
        </li>
        <li>
          <a class="menu-link text-lg font-semibold" href="https://novaclouds.space/visita/recorridos">
            <i class="fas fa-route menu-icon"></i>Recorridos
          </a>
        </li>
        <li>
          <a class="menu-link text-lg font-semibold" href="https://novaclouds.space/visita/conciencia">
            <i class="fas fa-people-arrows menu-icon"></i>Conecta
          </a>
        </li>
        <li>
          <a class="menu-link text-lg font-semibold" href="https://novaclouds.space/visita/contacto">
            <i class="fas fa-envelope menu-icon"></i>Contacto
          </a>
        </li>
      </ul>
      
      <!-- Botón "Más" -->
      <div class="relative ml-4" x-data="{ open: false }">
        <button @click="open = !open" class="menu-link text-lg font-semibold">
          <i class="fas fa-ellipsis-h menu-icon"></i>Más opciones <i class="fas fa-chevron-down ml-1 text-xs" :class="{ 'rotate-180': open }"></i>
        </button>
        
        <div x-show="open" @click.away="open = false" 
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-95"
             class="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-xl overflow-hidden z-50">
          <a href="https://novaclouds.space/visita/noticias" class="block px-4 py-3 text-gray-800 hover:bg-green-100 transition-colors duration-200">
            <i class="fas fa-newspaper menu-icon"></i>Noticias
          </a>
          <a href="https://novaclouds.space/educacion-ambiental" class="block px-4 py-3 text-gray-800 hover:bg-green-100 transition-colors duration-200">
            <i class="fas fa-leaf menu-icon"></i>Educación Ambiental
          </a>
          <a href="https://novaclouds.space/visita/galeria" class="block px-4 py-3 text-gray-800 hover:bg-green-100 transition-colors duration-200">
            <i class="fas fa-images menu-icon"></i>Galería
          </a>
          <a href="https://novaclouds.space/visita/eventos" class="block px-4 py-3 text-gray-800 hover:bg-green-100 transition-colors duration-200">
            <i class="fas fa-calendar-alt menu-icon"></i>Eventos
          </a>
          <a href="https://novaclouds.space/visita/condiciones" class="block px-4 py-3 text-gray-800 hover:bg-green-100 transition-colors duration-200">
            <i class="fas fa-file-contract menu-icon"></i>Terminos y Condiciones
          </a>
        </div>
      </div>
      
      <!-- Autenticación -->
            <div class="login-btn-container">
        <div class="login-btn-glow"></div>
        <a href="https://novaclouds.space/login" class="login-btn">
          <i class="fas fa-sign-in-alt menu-icon"></i>Iniciar Sesión
        </a>
      </div>
          </div>
    
    <!-- Botón menú móvil -->
    <button @click="mobileOpen = !mobileOpen" class="lg:hidden flex flex-col space-y-1.5 p-2 focus:outline-none">
      <div class="h-6 w-6 flex flex-col justify-between">
        <span class="h-1 w-full bg-white rounded-full transition-all duration-300" :class="{ 'rotate-45 translate-y-2.5': mobileOpen }"></span>
        <span class="h-1 w-full bg-white rounded-full transition-all duration-300" :class="{ 'opacity-0': mobileOpen }"></span>
        <span class="h-1 w-full bg-white rounded-full transition-all duration-300" :class="{ '-rotate-45 -translate-y-2.5': mobileOpen }"></span>
      </div>
    </button>
    
    <!-- Menú móvil -->
    <div x-cloak x-show="mobileOpen" x-collapse class="lg:hidden absolute top-full left-0 right-0 bg-green-800 shadow-lg">
      <div class="container mx-auto px-6 py-4 space-y-2">
        <a href="https://novaclouds.space" @click="mobileOpen = false" class="block text-white py-2 px-4 rounded hover:bg-green-700 transition-colors duration-200">
          <i class="fas fa-home menu-icon"></i>Inicio
        </a>
        <a href="https://novaclouds.space/visita/nosotros" @click="mobileOpen = false" class="block text-white py-2 px-4 rounded hover:bg-green-700 transition-colors duration-200">
          <i class="fas fa-users menu-icon"></i> Nosotros
        </a>
        <a href="https://novaclouds.space/visita/recorridos" @click="mobileOpen = false" class="block text-white py-2 px-4 rounded hover:bg-green-700 transition-colors duration-200">
          <i class="fas fa-route menu-icon"></i> Recorridos
        </a>
        <a href="https://novaclouds.space/visita/conciencia" @click="mobileOpen = false" class="block text-white py-2 px-4 rounded hover:bg-green-700 transition-colors duration-200">
          <i class="fas fa-people-arrows menu-icon"></i> Conecta
        </a>
        <a href="https://novaclouds.space/visita/contacto" @click="mobileOpen = false" class="block text-white py-2 px-4 rounded hover:bg-green-700 transition-colors duration-200">
          <i class="fas fa-envelope menu-icon"></i>Contacto
        </a>
        
        <!-- Sección "Más opciones" en móvil -->
        <div class="pt-4">
          <div class="text-white font-semibold py-2 px-4">
            <i class="fas fa-ellipsis-h menu-icon"></i> Más opciones
          </div>
          <div class="pl-6 space-y-2 mt-2">
            <a href="https://novaclouds.space/visita/noticias" @click="mobileOpen = false" class="block text-white py-2 px-4 rounded hover:bg-green-700 transition-colors duration-200">
              <i class="fas fa-newspaper menu-icon"></i> Noticias
            </a>
            <a href="https://novaclouds.space/educacion-ambiental" @click="mobileOpen = false" class="block text-white py-2 px-4 rounded hover:bg-green-700 transition-colors duration-200">
              <i class="fas fa-leaf menu-icon"></i>Educación Ambiental
            </a>
            <a href="https://novaclouds.space/visita/galeria" @click="mobileOpen = false" class="block text-white py-2 px-4 rounded hover:bg-green-700 transition-colors duration-200">
              <i class="fas fa-images menu-icon"></i> Galería
            </a>
            <a href="https://novaclouds.space/visita/eventos" @click="mobileOpen = false" class="block text-white py-2 px-4 rounded hover:bg-green-700 transition-colors duration-200">
              <i class="fas fa-calendar-alt menu-icon"></i> Eventos
            </a>
            <a href="https://novaclouds.space/visita/condiciones" @click="mobileOpen = false" class="block text-white py-2 px-4 rounded hover:bg-green-700 transition-colors duration-200">
              <i class="fas fa-file-contract menu-icon"></i>Terminos y Condiciones
            </a>
          </div>
        </div>
        
                <div class="pt-4">
          <a href="https://novaclouds.space/login" class="block text-center text-green-800 py-2 px-4 bg-white rounded font-bold hover:bg-gray-100 transition-colors duration-200">
            <i class="fas fa-sign-in-alt menu-icon"></i>Iniciar Sesión
          </a>
        </div>
              </div>
    </div>
  </nav>
<!-- component -->
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/styles/tailwind.css">
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">

  <!-- Footer -->
  <footer class="relative pt-16 pb-6 bg-green-800 text-white">
    <div class="footer-wave absolute top-0 left-0 w-full overflow-hidden">
      <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
      </svg>
    </div>
    
    <div class="container mx-auto px-4 relative z-10">
      <div class="flex flex-wrap text-left lg:text-left">
        <div class="w-full lg:w-6/12 px-4">
          <h4 class="text-3xl font-semibold">¡Sigamos en contacto!</h4>
          <h5 class="text-lg mt-0 mb-2">
            Encuéntranos en cualquiera de estas plataformas, respuesta de manera inmediata.
          </h5>
          <div class="mt-6 lg:mb-0 mb-6">
            <a href="https://www.facebook.com/Guardianesdemanglaresdzinintun/" target="_blank" class="bg-white text-blue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-flex" type="button">
              <i class="fab fa-facebook-f"></i>
            </a>
            <a href="https://www.instagram.com/guardianesdzinintun/" target="_blank" class="bg-white text-pink-500 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-flex" type="button">
              <i class="fab fa-instagram"></i>
            </a>
            <a href="https://www.twitter.com/Guardianesdemanglaresdzinintun/" target="_blank" class="bg-white text-blue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-flex" type="button">
              <i class="fab fa-twitter"></i>
            </a>
            <a href="https://api.whatsapp.com/send?phone=9996454310" target="_blank" class="bg-white text-green-500 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-flex" type="button">
              <i class="fab fa-whatsapp"></i>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-6/12 px-4">
          <div class="flex flex-wrap items-top mb-6">
            <div class="w-full lg:w-4/12 px-4 ml-auto">
              <span class="block uppercase text-white text-sm font-semibold mb-2">Enlaces útiles</span>
              <ul class="list-unstyled">
                <li>
                  <a class="text-white hover:text-gray-300 font-semibold block pb-2 text-sm" href="https://novaclouds.space">Inicio</a>
                </li>
                <li>
                  <a class="text-white hover:text-gray-300 font-semibold block pb-2 text-sm" href="https://novaclouds.space/visita/nosotros">Nosotros</a>
                </li>
                <li>
                  <a class="text-white hover:text-gray-300 font-semibold block pb-2 text-sm" href="https://novaclouds.space/visita/recorridos">Recorridos</a>
                </li>
                <li>
                  <a class="text-white hover:text-gray-300 font-semibold block pb-2 text-sm" href="https://novaclouds.space/visita/contacto">Contacto</a>
                </li>
              </ul>
            </div>
            <div class="w-full lg:w-4/12 px-4">
              <span class="block uppercase text-white text-sm font-semibold mb-2">Recursos</span>
              <ul class="list-unstyled">
                <li>
                  <a class="text-white hover:text-gray-300 font-semibold block pb-2 text-sm" href="https://novaclouds.space/educacion-ambiental">Educación Ambiental</a>
                </li>
                <li>
                  <a class="text-white hover:text-gray-300 font-semibold block pb-2 text-sm" href="https://novaclouds.space/visita/galeria">Galería</a>
                </li>
                <li>
                  <a class="text-white hover:text-gray-300 font-semibold block pb-2 text-sm" href="https://novaclouds.space/visita/eventos">Eventos</a>
                </li>
                <li>
                  <a class="text-white hover:text-gray-300 font-semibold block pb-2 text-sm" href="https://novaclouds.space/visita/condiciones">Terminos y condiciones</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <hr class="my-6 border-gray-300">
      <div class="flex flex-wrap items-center md:justify-between justify-center">
        <div class="w-full md:w-4/12 px-4 mx-auto text-center">
          <div class="text-sm text-white">
            Copyright © <span id="get-current-year">2025 <br></span>Creado por
            <a href="https://www.facebook.com/profile.php?id=61558388608909" class="text-white hover:text-gray-300">NOVA CLOUDS</a>.
          </div>
        </div>
      </div>
    </div>
  </footer>



<style>
  /* Estilos para el footer */
  .footer-wave {
    height: 150px;
    overflow: hidden;
    transform: rotate(180deg);
  }
  
  .footer-wave svg {
    height: 100%;
    width: 100%;
  }
  
  .footer-wave .shape-fill {
    fill: #3E655B;
  }
  
  /* Animación para los íconos de redes sociales */
  .social-icon {
    transition: all 0.3s ease;
  }
  
  .social-icon:hover {
    transform: translateY(-3px) scale(1.1);
  }
  
  /* Efecto hover para los enlaces */
  .footer-link {
    position: relative;
  }
  
  .footer-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease;
  }
  
  .footer-link:hover::after {
    width: 100%;
  }
</style>

<script>
  // Actualizar el año del copyright automáticamente
  document.getElementById('get-current-year').textContent = new Date().getFullYear();
</script>