@media screen and (min-width: 1025px) {
    .ast-desktop-header-content,
    #ast-desktop-header {
        display: block !important;
    }
    .ast-mobile-header-wrap,
    .ast-mobile-header-content,
    #ast-mobile-header {
        display: none !important; /* Destruye el menú verde abajo */
    }
    .mi-caja-flotante-global{
        display: none !important;
    }
    .user-trigger-wrapper {
        position: absolute !important;
        /* En lugar de usar porcentajes que fallan, usamos píxeles fijos desde arriba */
        top: 18px !important; 
        right: 20px !important; 
        z-index: 999999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/**********general oculto ************/
  /****BODY HARMONY PARA TABLES O CEL***********/
   .mi-banner-flotante{
    position: absolute;
    top: 1%;
    left: 20%;
    z-index: 999999 !important; /* Valor altísimo para que no lo tape Astra */
    /*display: flex !important;*/
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centrado vertical interno absoluto */
    align-items: center !important;     /* Centrado horizontal interno */
}
.mi-banner-flotante p{
    color: #fcf5ce;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5em !important;
    font-style: italic;
    text-align: center;
}

.ast-builder-layout-element.site-header-focus-item.ast-header-account{
    display: none !important;
}

/* Para TABLETS (Incluye de 768px hasta 1024px) */
@media screen and (max-width: 1024px) and (min-width: 768px) {
      /* 1. Forzamos la desaparición absoluta de la barra blanca horizontal */
    .ast-desktop-header-content, 
    #ast-desktop-header,
    .main-navigation-layout-inline-flex {
        display: none !important;
    }

    /* 2. Si Astra despliega el menú móvil abajo, lo obligamos a ponerse en columna */
    .ast-mobile-header-content .main-header-menu,
    .ast-mobile-header-wrap .main-header-menu,
    .ast-mobile-header-wrap .menu-item {
        display: flex !important;
        flex-direction: column !important; /* Clave: cambia de fila a columna */
        align-items: flex-start !important;
        width: 100% !important;
        white-space: normal !important; /* Permite que el texto se acomode si es largo */
    }

    /* 3. Aseguramos que la barra verde ocupe el 100% del ancho del celular */
    .ast-mobile-header-wrap, #ast-mobile-header {
        display: block !important;
        width: 100% !important;
    }

    /* 4. Escondemos la caja flotante del usuario si tapa el texto "Body Harmony" */
    .user-header-box-floating {
        display: block !important; /* En celular es mejor que el login vaya adentro del menú desplegable */
    }

   .main-header-menu.ast-nav-menu.ast-flex .submenu-with-border.astra-menu-animation-fade.stack-on-mobile{
     background-color: transparent !important;
   } 
  .ast-builder-menu .main-navigation>ul{
     background-color: transparent !important;
     border-bottom: 0px;
    }

    .user-trigger-wrapper {
        position: absolute !important;
        /* En lugar de usar porcentajes que fallan, usamos píxeles fijos desde arriba */
        top: 18px !important; 
        right: 20px !important; 
        z-index: 999999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /*.mi-caja-flotante-global{
        display: none !important;
    }*/

    /******************envio de infomres **************/
     /* 1. Oculta la lista morada abierta que te rompe el diseño */
    .elementor-widget-ea-simple-menu ul.ea-simple-menu-responsive-menu:not(.open) {
        display: none !important;
    }
    
    /* 2. Fuerza a que aparezca el botón de WhatsApp para hacer clic */
    .elementor-widget-ea-simple-menu .ea-simple-menu-toggle {
        display: block !important;
        visibility: visible !important;
    }

    /* 3. Estilo para cuando tocan el ícono: que la tarjeta caiga perfecta */
    .elementor-widget-ea-simple-menu ul.ea-simple-menu-responsive-menu.open {
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        width: 260px !important;
        background-color: #f7f6f0 !important; /* El crema de tu app */
        z-index: 9999 !important;
    }


}