/* =========================================
   1. WHATSAPP FLOTANTE (Móvil)
   ========================================= */
@media (max-width: 768px) {
/* WhatsApp Flotante - Ajuste Definitivo */
#WSPbtt {
    position: fixed !important;
    right: 20px !important; /* Separado del borde derecho */
    bottom: 20px !important; /* Separado del fondo */
    width: 60px !important;
    height: 60px !important;
    z-index: 999999 !important; /* Por encima de TODO, incluso del menú */
    display: block !important; /* Forzamos que aparezca */
    visibility: visible !important;
}

#WSPbtt img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Si quieres que en PC se oculte, dejamos esto. 
   Si quieres que se vea EN TODOS LADOS, borra estas 3 líneas de abajo */
@media (min-width: 1024px) {
    #WSPbtt { display: none !important; } 
}

/* ELIMINAR LOS 2 LOADERS Y CUALQUIER RASTRO DE CARGA */
#de-loader, 
#loader-area, 
.de-loader, 
.loader-wrapper, 
#preloader,
#preloader-wrapper,
#de-preloader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    z-index: -1 !important; /* Lo mandamos al fondo del todo */
    pointer-events: none !important;
}

/* Forzar que el cuerpo de la página sea visible de inmediato */
body {
    opacity: 1 !important;
    display: block !important;
}
/* =========================================
   3. MENÚ MÓVIL (CORREGIDO Y SIN "HOME")
   ========================================= */
@media (max-width: 991px) {

  /* A) ELIMINAR EL TEXTO "HOME" O CUALQUIER TÍTULO AUTOMÁTICO */
  .menu-responsive-title, 
  #menu-btn-text,
  .header-mobile h3,
  header h3 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* B) ESTILO DEL BOTÓN HAMBURGUESA (Solo Icono) */
  #menu-btn {
    display: block !important;
    width: 35px !important; 
    height: 35px !important;
    background: none !important;
    text-indent: -9999px !important; /* Esconde texto dentro del botón */
    position: relative;
    z-index: 10005 !important;
    margin-top: 5px;
  }

  /* Dibujamos las 3 rayas blancas limpias */
  #menu-btn:before {
    content: "\61" !important; /* Icono ElegantIcons */
    font-family: "ElegantIcons" !important;
    font-size: 28px !important;
    color: #fff !important;
    text-indent: 0 !important;
    display: block !important;
    line-height: 35px;
  }

  /* C) EL MENÚ DESPLEGABLE */
  #mainmenu {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95); /* Fondo oscuro elegante */
    padding-top: 90px;
    z-index: 9999;
    overflow-y: auto;
  }

  /* D) LÓGICA DE APERTURA (Compatible con Designesia JS) */
  /* Si el header tiene la clase 'menu-open', mostramos el menú */
  header.menu-open #mainmenu,
  #mainmenu.open {
    display: block !important;
  }

  /* E) ESTILO DE LOS ENLACES */
  #mainmenu li {
    display: block;
    text-align: center;
    margin: 15px 0;
    border: none !important;
  }

  #mainmenu a {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
}
/* Forzar que los selectores creados manualmente se vean */
.select-room {
    display: block !important;
    visibility: visible !important;
}
.select-room select {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* FLECHITA SOLO PARA MÓVIL */
@media (max-width: 991px) {
    /* Pone una flecha (▼) al lado de "Eventos" */
    #mainmenu li:has(ul) > a::after {
        content: "▼";
        float: right;
        margin-right: 10px;
        font-size: 12px;
        color: rgba(255,255,255,0.7);
    }
    
    /* Separa un poco los items para que sea fácil tocar */
    #mainmenu li a {
        padding: 15px 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
}
/* =========================================
   REPARACIÓN UNIVERSAL DE MENÚ (Home e Internas)
   ========================================= */

/* 1. Eliminar la letra "a" intrusa de CUALQUIER botón de menú */
#menu-btn, 
.menu-btn, 
#menu-btn-open {
    font-size: 0 !important;      /* Hace invisible la letra "a" */
    text-indent: -9999px !important; /* Mueve cualquier texto fuera de la pantalla */
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 2. Dibujar las 3 rayas (Hamburguesa) con una fuente segura */
#menu-btn::before, 
.menu-btn::before {
    content: "\f0c9" !important; /* Icono de barras de FontAwesome */
    font-family: "FontAwesome" !important;
    font-size: 26px !important;
    color: #ffffff !important;   /* Asegúrate que sea blanco para que resalte en el Hero */
    text-indent: 0 !important;   /* Devuelve el icono a su lugar */
    display: block !important;
}

/* 3. Arreglo para "Eventos" en Móvil (Para que sepa que es desplegable) */
@media (max-width: 991px) {
    /* Buscamos el enlace que contiene submenús */
    #mainmenu li:has(ul) > a {
        position: relative !important;
        display: block !important;
        padding-right: 40px !important; /* Espacio para la flecha */
    }

    /* Ponemos una flechita indicadora */
    #mainmenu li:has(ul) > a::after {
        content: "\f107" !important; /* Flecha hacia abajo de FontAwesome */
        font-family: "FontAwesome" !important;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: rgba(255,255,255,0.7);
    }
}