/* ======================================================
   GLOBAL CUSTOM STYLES
   BODY HARMONY
   ------------------------------------------------------
   Theme: Astra Child
   Scope: Estilos globales del sitio
   Author: Karina
   ====================================================== */
/* =====================================================
      IMPORTACION DE FUENTES PARA EL SITIO
====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');
/* ==================================================== */
/* 📱 RESPONSIVE CELULARES (Hasta 767px)                */
/* ==================================================== */

@media (max-width: 767px) {

    /* ===================
    BARRA FLOTANTE OCULTA CELULAR
    =============================*/
    .mi-banner-flotante,
    .frase-header {
        display: none !important;
    }

    /* =================
     BARRA FLOTANTE GLOBAL OCULTA CELULAR 
     =======================*/
    .mi-caja-flotante-global {
        display: none !important;
    }

    .user-header-box-floating-decorativa {
        display: none !important;
    }

    /* ===========================
 Estilo dorado y cursiva para el nombre de la estética CELULAR
 ===============================*/
    .cabeceraMovil {
        text-align: center !important;
        font-family: 'Playfair Display', serif !important;
        font-style: italic !important;
        font-size: 22px !important;
        /* Ajusta este valor si lo quieres más grande o chico */
        /* Color de respaldo para navegadores viejos */
        color: #d4a373 !important;
        /* Degradado metálico (bronce/dorado con reflejo) */
        background: linear-gradient(135deg, #b8860b 0%, #e7be03 25%, #fff3b0 50%, #e7be03 75%, #8b6508 100%) !important;
        /* Truco para que el degradado se aplique solo a las letras */
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        /* Sombra profunda para dar volumen 3D */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), 0px 0px 10px rgba(231, 190, 3, 0.3) !important;
        padding: 10px 0 !important;
        display: block;
        line-height: 1.1 !important;
    }

    /* LINEA DORADA CABECERA CELULAR */
    .ast-main-header-wrap.main-header-bar-wrap {
        position: relative;
    }

    .ast-main-header-wrap.main-header-bar-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;

        width: 100%;
        height: 2px;

        background: linear-gradient(to right,
                #8a6a2f,
                #d4b06a,
                #f3dfb0,
                #c89b3c,
                #8a6a2f);
    }

    /*========================================
    OCULTA IMAGEN DECORATIVA QUE SALIA ABAJO EN CELULAR
     ======================================*/
    .page-id-2885 .imagen-usuario-decorativa,
    .parent-pageid-2885 .imagen-usuario-decorativa {
        display: none !important;
    }

    /*==================================
MOSTRAMOS LA BARRA VERDE DEL HEADER 
=========================*/
    /*3. Aseguramos que la barra verde ocupe el 100% del ancho del celular */
    /* 1. Forzar el color en la barra interna real donde Astra aplica la transparencia */
    .ast-header-break-point .site-header,
    .ast-header-break-point .ast-main-header-bar,
    .ast-header-break-point .ast-mobile-header-content {
        background-color: rgba(33, 102, 86, 0.92) !important;
        backdrop-filter: blur(2px) !important;
    }

    /* 2. Anular cualquier fondo transparente heredado que use Astra por defecto */
    .ast-theme-transparent-header #ast-mobile-header {
        background-image: none !important;
        background-color: transparent !important;
        /* Mantiene el contenedor limpio */
    }

    /*ARREGLO DE LA BARRA DEL MENU CELULAR QUE QUEDABA ARRIBA DEL TEXTO
     /* Forzar que el borde/línea se posicione al final del contenedor del ítem */
    .ast-mobile-popup-inner .main-header-menu .menu-item,
    .ast-mobile-popup-inner .main-header-menu .menu-item a {
        border-bottom-color: #d4af37 !important;
        /* Asegura tu dorado */
        padding-bottom: 12px !important;
        /* Empuja la línea hacia abajo */
        line-height: 1.5 !important;
        /* Estabiliza la altura del texto */
    }

    /* Cambiar el color del texto a verde oscuro en Hover y Active  CELULAR*/
    .ast-mobile-popup-inner .main-header-menu .menu-item a:hover,
    .ast-mobile-popup-inner .main-header-menu .menu-item a:focus,
    .ast-mobile-popup-inner .main-header-menu .current-menu-item>a {
        color: #216656 !important;
        /* Reemplazá por tu verde exacto */
        background-color: transparent !important;
        /* Evita fondos raros */
    }

    .main-navigation .menu-item>.menu-link {
        color: rgba(0, 82, 21, 0.88) !important;
        /*font-weight: 600;*/
        letter-spacing: 0.5px;
    }


}

/* ================================================================================================================================================== */
/* 📋 RESPONSIVE TABLETS (Desde 768px hasta 1023px)    */
/* ==================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* BARRA FLOTANTE OCULTA TABLET*/
    .mi-banner-flotante,
    .frase-header {
        display: none !important;
    }

    /*BARRA FLOTANTE GLOBAL OCULTA TABLET */
    .mi-caja-flotante-global {
        display: none !important;
    }

    /*========================================
    OCULTACIONES GENERALES APP
     ======================================*/
    .page-id-2885 .imagen-usuario-decorativa,
    .parent-pageid-2885 .imagen-usuario-decorativa {
        display: none !important;
    }

    /*========================================
    IMAGEN DE CABECERA Y FONDO TABLETS DE COLOR DEL HADER GENERAL 
     ======================================*/
    .ast-main-header-wrap.main-header-bar-wrap {
        /*background-color: rgba(33, 102, 86, 0.92);*/
        background: rgba(33, 102, 86, 0.92);
        backdrop-filter: blur(2px);
    }

    .custom-logo-link img {
        filter:
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.25)) drop-shadow(0 0 10px rgba(212, 176, 106, 0.25));
    }

    .custom-logo-link img {
        transition: filter 0.4s ease;
    }

    .custom-logo-link:hover img {
        filter:
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 18px rgba(212, 176, 106, 0.35));
    }

    .ast-builder-social-element svg {
        fill: white !important;
    }

    .ast-builder-social-element svg path {
        fill: white !important;
    }

    .ast-builder-social-element {
        color: white !important;
    }

    .ast-builder-social-element {
        transition: all 0.3s ease;
    }

    .ast-builder-social-element:hover {
        transform: translateY(-2px);

        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));

        opacity: 0.9;
    }

    .ast-builder-menu-1 .menu-item>.menu-link {
        color: rgba(255, 255, 255, 0.88) !important;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .main-header-menu a::before {
        right: 0;
        top: 0;
    }

    .main-header-menu a::after {
        left: 0;
        bottom: 0;
    }

    .main-header-menu a:hover::before,
    .main-header-menu a:hover::after {
        width: 100%;
    }

    .custom-logo-link img {
        max-height: 68px !important;
    }

    /*=====================================
    ARREGLAMOS IMAGEN FONDO HOME TABLETS 
============================*/
    /* Si la imagen es un fondo, esto la desplaza a la izquierda */
    .elementor-element-b9b6c5a,
    .elementor-element-b9b6c5a * {
        background-position: left center !important;
        /* Alinea el fondo al borde izquierdo */
    }

    /* ===========================
 Estilo dorado y cursiva para el nombre de la estética TABLETS
 ===============================*/
    .cabeceraMovil {
        text-align: center !important;
        font-family: 'Playfair Display', serif !important;
        font-style: italic !important;
        font-size: 26px !important;
        font-weight: 500 !important;

        /* 🎨 NUEVO COLOR: Dorado champaña premium, plano y nítido */
        color: #e2c792 !important;

        /* 🛠️ LIMPIEZA: Removemos transparencias y degradados viejos */
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: initial !important;

        /* 👁️ LEGIBILIDAD: Sombra plana y ultra sutil para despegar del fondo */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important;

        padding: 10px 0 !important;
        display: block;
        line-height: 1.1 !important;
    }

    /*===============================
  MODIFICAMOS LA DISPOSICION DE LA CABECERA PARA TABLETS 
  ===================*/

    /* 1. Empujamos el nombre mucho más a la izquierda (pegado al logo) */
    .cabeceraMovil {
        transform: translateX(-130px) !important;
        /* Subimos de -60px a -110px */
        white-space: nowrap !important;
        text-align: center !important;
    }

    /*.mi-caja-flotante-global {
        display: block !important;
    }*/

    /* ======================================================
   FRASES ESPECIALES EN CABECERA de TABLET
====================================================== */

    .frase-header {
        /*color: rgba(255,255,255,0.78);*/
        color: #fff1c2;
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.25),
            0 0 8px rgba(212, 176, 106, 0.35);
        font-style: italic;
        letter-spacing: 0.5px;
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.35rem;
        font-style: italic;
        letter-spacing: 0.5px;
        white-space: nowrap;
        margin-left: auto;
        padding-right: 20px;
    }

    /* 2. Columna contenedora de la frase */
    .frases-flotantes-contenedor {
        width: 235px !important;
        /* Ancho exacto solicitado */
        max-width: 235px !important;

        /* ESTO ARREGLA EL PROBLEMA: Activamos flexbox en la columna */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* Centrado vertical interno absoluto */
        align-items: center !important;
        /* Centrado horizontal interno */

        height: 52px !important;
        max-height: 52px !important;
        z-index: 99999 !important;
    }

    /* 3. Estilo del texto de la frase */
    .texto-frase {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.30rem !important;
        font-style: italic;
        color: #fff1c2;
        /* Tu color crema/dorado */
        text-align: center !important;
        /* Justificado central solicitado */
        line-height: 1.2 !important;
        /* Espaciado cómodo para el salto de línea */
        letter-spacing: 0.5px;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        /* Permitimos que baje ordenadamente */
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.25),
            0 0 8px rgba(212, 176, 106, 0.35);
        align-items: center !important;

    }

}

/* ================================================================================================================================================== */
/* 💻 RESPONSIVE DESKTOP (Desde 1024px en adelante)    */
/* ==================================================== */

@media (min-width: 1025px) {

    /* ======================================================
   BANNER CON NOMBRE DE BODY OCULTO EN DESKTOP
   ====================================================== */

    .mi-banner-flotante {
        display: none !important;
    }

    /* ===================
    OCULTACIONES EN APP SOLAMENTE para PC
    =============================*/
    .page-id-2885 .mi-caja-flotante-global,
    .parent-pageid-2885 .mi-caja-flotante-global {
        display: none !important;
    }


    /* ======================================================
   LINEA DORADA DE CABECERA
   ====================================================== */
    .ast-main-header-wrap.main-header-bar-wrap {
        position: relative;
    }

    .ast-main-header-wrap.main-header-bar-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;

        width: 100%;
        height: 2px;

        background: linear-gradient(to right,
                #8a6a2f,
                #d4b06a,
                #f3dfb0,
                #c89b3c,
                #8a6a2f);
    }

    /*========================================
    IMAGEN DE CABECERA Y FONDO DE COLOR DEL HADER GENERAL 
     ======================================*/
    .ast-main-header-wrap.main-header-bar-wrap {
        /*background-color: rgba(33, 102, 86, 0.92);*/
        background: rgba(33, 102, 86, 0.92);
        backdrop-filter: blur(2px);
    }

    .custom-logo-link img {
        filter:
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.25)) drop-shadow(0 0 10px rgba(212, 176, 106, 0.25));
    }

    .custom-logo-link img {
        transition: filter 0.4s ease;
    }

    .custom-logo-link:hover img {
        filter:
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 18px rgba(212, 176, 106, 0.35));
    }

    .ast-builder-social-element svg {
        fill: white !important;
    }

    .ast-builder-social-element svg path {
        fill: white !important;
    }

    .ast-builder-social-element {
        color: white !important;
    }

    .ast-builder-social-element {
        transition: all 0.3s ease;
    }

    .ast-builder-social-element:hover {
        transform: translateY(-2px);

        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));

        opacity: 0.9;
    }

    .ast-builder-menu-1 .menu-item>.menu-link {
        color: rgba(255, 255, 255, 0.88) !important;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .main-header-menu a::before {
        right: 0;
        top: 0;
    }

    .main-header-menu a::after {
        left: 0;
        bottom: 0;
    }

    .main-header-menu a:hover::before,
    .main-header-menu a:hover::after {
        width: 100%;
    }

    .custom-logo-link img {
        max-height: 68px !important;
    }


    /* ======================================================
     FUENTES DEL MENU PRINCIPAL
    ====================================================== */

    .ast-builder-menu-1 .menu-item>.menu-link {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
    }


    /* ======================================================
   REACOMODAMIENTO DEL HEADER
  ====================================================== */

    .elementor-element-b9b6c5a>.e-con-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        height: auto !important;
        min-height: unset !important;
    }

    .elementor-element-b9b6c5a>.e-con-inner {
        justify-content: space-between !important;
    }

    .ast-builder-grid-row-container {
        max-width: 95% !important;
        /**agregado despues***/
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        /* Evita estrictamente que los botones salten abajo */
        align-items: center !important;
        width: 100% !important;
    }

    /*agregado despues**/
    .site-header-focus-item.ast-builder-menu-1 {
        flex-grow: 1 !important;
        display: flex !important;
        justify-content: flex-start !important;
        /* Alinea los botones al inicio */
        overflow: hidden !important;
    }

    .main-header-menu,
    .main-header-menu>.menu-item {
        white-space: nowrap !important;
        /* Impide que el texto se rompa en dos líneas */
        display: flex !important;
    }

    /* ======================================================
   FRASES ESPECIALES EN CABECERA
====================================================== */

    .frase-header {
        /*color: rgba(255,255,255,0.78);*/
        color: #fff1c2;
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.25),
            0 0 8px rgba(212, 176, 106, 0.35);
        font-style: italic;
        letter-spacing: 0.5px;
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.35rem;
        font-style: italic;
        letter-spacing: 0.5px;
        white-space: nowrap;
        margin-left: auto;
        padding-right: 20px;
    }

    /* 2. Columna contenedora de la frase */
    .frases-flotantes-contenedor {
        width: 235px !important;
        /* Ancho exacto solicitado */
        max-width: 235px !important;

        /* ESTO ARREGLA EL PROBLEMA: Activamos flexbox en la columna */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* Centrado vertical interno absoluto */
        align-items: center !important;
        /* Centrado horizontal interno */

        height: 52px !important;
        max-height: 52px !important;
        z-index: 99999 !important;
    }

    /* 3. Estilo del texto de la frase */
    .texto-frase {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.30rem !important;
        font-style: italic;
        color: #fff1c2;
        /* Tu color crema/dorado */
        text-align: center !important;
        /* Justificado central solicitado */
        line-height: 1.2 !important;
        /* Espaciado cómodo para el salto de línea */
        letter-spacing: 0.5px;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        /* Permitimos que baje ordenadamente */
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.25),
            0 0 8px rgba(212, 176, 106, 0.35);
        align-items: center !important;

    }

    /* =========================================
    EFECTO HOVER SOLO PARA BOTONES MENU PRINCIPAL
    ========================================= */

    .ast-button,
    .wp-block-button__link,
    button,
    input[type="submit"] {
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: all 0.5s;
    }

    /* capas animadas */
    .ast-button::before,
    .ast-button::after,
    .wp-block-button__link::before,
    .wp-block-button__link::after,
    button::before,
    button::after,
    input[type="submit"]::before,
    input[type="submit"]::after {
        content: "";
        position: absolute;
        height: 50%;
        width: 0;
        background: linear-gradient(90deg, #347300, #74B414, #347300);
        transition: all 0.5s;
        z-index: -1;
    }

    /* posición */
    .ast-button::before,
    .wp-block-button__link::before,
    button::before,
    input[type="submit"]::before {
        right: 0;
        top: 0;
    }

    .ast-button::after,
    .wp-block-button__link::after,
    button::after,
    input[type="submit"]::after {
        left: 0;
        bottom: 0;
    }

    /* animación */
    .ast-button:hover::before,
    .ast-button:hover::after,
    .wp-block-button__link:hover::before,
    .wp-block-button__link:hover::after,
    button:hover::before,
    button:hover::after,
    input[type="submit"]:hover::before,
    input[type="submit"]:hover::after {
        width: 100%;
    }

    /* texto hover */
    .ast-button:hover,
    .wp-block-button__link:hover,
    button:hover,
    input[type="submit"]:hover {
        color: #fff !important;
    }

    /* =========================================
   BOTONES ELEMENTOR SOLAMENTE
========================================= */

    .elementor-widget-button .elementor-button {
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: all 0.5s;
    }

    /* capas */
    .elementor-widget-button .elementor-button::before,
    .elementor-widget-button .elementor-button::after {
        content: "";
        position: absolute;
        height: 50%;
        width: 0;
        background: linear-gradient(90deg, #347300, #74B414, #347300);
        transition: all 0.5s;
        z-index: -1;
    }

    .elementor-widget-button .elementor-button::before {
        right: 0;
        top: 0;
    }

    .elementor-widget-button .elementor-button::after {
        left: 0;
        bottom: 0;
    }

    /* animación */
    .elementor-widget-button .elementor-button:hover::before,
    .elementor-widget-button .elementor-button:hover::after {
        width: 100%;
    }

    /* texto */
    .elementor-widget-button .elementor-button:hover {
        color: #fff !important;
    }



    /* ======================================================
     BOTONES POPUP MAKER
    ====================================================== */
    /* Selector para botones disparadores de Popup Maker */
    .pum-trigger:hover {

        background: #347300 !important;

        color: #ffffff !important;

        border: 1px solid #ffffff !important;
    }

    .pum-trigger:hover * {

        color: #ffffff !important;
    }


    /* ======================================================
  LA PUTISIMA CABECERA
====================================================== */
    /* Contenedor principal flotante */
    /* 1. Contenedor principal flotante */

    body.viewing-course-item .mi-caja-flotante-global {
        z-index: 99999 !important;
    }

    .mi-caja-flotante-global {
        position: absolute !important;
        top: 17px;
        /* Distancia desde el borde superior */
        right: 360px;
        /* Distancia fija desde la derecha */
        z-index: 99999;
        /* Superpuesto sobre la barra de Astra */
        background: transparent;
        /* Caja transparente */
        border: none;
        /* Sin bordes */
        box-shadow: none;
        /* Sin sombras */
        padding: 0;
        /* Sin espacios internos molestos */
        max-width: 300px;
        /* Límite de ancho para el texto */
        display: flex;
        flex-direction: row;
        /* Fuerza la fila horizontal */
        align-items: center;
        /* Centra verticalmente ambos elementos */
        gap: 15px;
    }



    /* 4. Contenedor de las redes sociales (Columna separadora) */
    .redes-flotantes-contenedor {
        display: flex !important;
        flex-direction: column !important;
        /* Mantiene el diseño de dos pisos */
        gap: 8px;
        /* Aumentamos la separación vertical entre Instagram y Facebook */
        align-items: center !important;
        padding-left: 25px;
        /* Crea una separación sutil con el final de la frase */
        width: 25px !important;
        height: auto !important;
    }

    /* 5. Estilo individual de los botones sociales */
    .icono-social-propero {
        color: #fff1c2 !important;
        /* Cambiado al color crema de tu frase para unificar la paleta */
        font-size: 16px !important;
        /* Un tamaño un poquito más fino y estilizado */
        text-decoration: none !important;
        line-height: 1 !important;
        width: 24px !important;
        height: 24px !important;
        /* Preparamos la animación: suave y fluida */
        transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease !important;
    }

    .icono-social-propero .dashicons {
        font-family: "dashicons" !important;
        display: inline-block !important;
        font-size: 18px !important;
        /* Tamaño del icono */
        width: 18px !important;
        height: 18px !important;
        color: #fff1c2 !important;
        /* Tu color crema/dorado elegido */
        line-height: 1 !important;
        speak: never;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
    }

    /* Efecto interactivo al pasar el mouse (Hover) */
    .icono-social-propero:hover .dashicons {
        color: #ffffff !important;
        /* Se ilumina a blanco puro */
        transform: scale(1.25) translateY(-1px);
        /* Se agranda con un leve salto hacia arriba */
    }

    /*LINEA VERTICAL DE SEPARACIONEN CABECERA */

    .main-navigation.ast-inline-flex {
        border-right: 1px solid transparent !important;
        border-image: linear-gradient(to bottom,
                #8a6a2f,
                #d4b06a,
                #f3dfb0,
                #c89b3c,
                #8a6a2f) 1 !important;
    }

    /* ======================================================
   IMAGEN DECORATIVA
====================================================== */


    .user-header-box-floating-decorativa {
        position: absolute !important;
        top: 0px !important;
        /* Pegado al borde superior de la pantalla */
        right: 10px !important;
        /* Distancia del borde derecho */
        width: 150px !important;
        /* Controla el tamaño de tu silueta minimalista */
        height: auto !important;
        z-index: 999999 !important;
        /* Pasa por encima de absolutamente todo */
        pointer-events: none !important;
        /* No interfiere con los clics de la web */
        display: block !important;
    }

    .user-header-box-floating-decorativa .imagen-usuario-decorativa {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        user-select: none !important;
    }

    .popup-media {
        background-color: lightyellow !important;
    }

}

/*DE ACA PARA ABAJO ESTA SUELTO /*



/* ======================================================
   BOTONES DEL HEADER
====================================================== */
.main-navigation ul li a:hover {
    color: #ffffff !important;
    /*text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;*/

    /* Creamos el degradado dorado como una imagen de fondo */
    background-image: linear-gradient(to right,
            #8a6a2f,
            #d4b06a,
            #f3dfb0,
            #c89b3c,
            #8a6a2f) !important;

    /* Forzamos a que el fondo mida 100% de ancho y solo 1px de alto */
    background-size: 100% 1px !important;
    background-repeat: no-repeat !important;

    /* IMPORTANTE: Ubica la línea abajo de todo (puedes usar porcentajes como 80% o 85% para subirla) */
    /*background-position: center bottom 4px !important; */
    background-position: center bottom calc(0px + 17px) !important;
}

/******forzado de menu para que se mante firme siempre ***/
/* Forzar al contenedor del menú a mantener los botones en una sola fila horizontal */
.site-header-focus-item.ast-builder-menu-1,
.ast-builder-menu-1 .main-navigation,
.ast-builder-menu-1 .main-navigation-layout-inline-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* Prohíbe terminantemente que los botones salten abajo */
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Evitar que el texto de los botones del menú se rompa o se achique de forma extraña */
.main-header-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.main-header-menu .menu-item {
    white-space: nowrap !important;
    /* Impide que las palabras largas se partan en dos renglones */
}

/* Ocultar el encabezado molesto de Calendly */
.calendly-inline-widget [data-testid="header"] {
    display: none !important;
}

#wpforms-3547-field_1 {
    padding: 4px !important;
    margin-top: 10px !important;
    background-color: lightyellow !important;
    border-radius: 5px;
    border: solid 1px green;
    max-width: 100%;
}

#wpforms-submit-3547 {
    display: block;
    margin: 0 auto;
    /* El 0 es arriba/abajo y 'auto' empuja los lados al centro */
}

#e-conversion-banner,
.e-conversion-banner--ready,
.e-conversion-banner__paper {
    display: none !important;
}

/* Ocultar la barra de administración negra únicamente en la página de la App */
.page-id-3241 #wpadminbar {
    display: none !important;
}

.page-id-3241 html {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/* Forzar a la pantalla a ocupar el 100% del borde superior */
body.page-id-2592 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#wpadminbar {
    display: none !important;
}

/* Forzar al navegador a eliminar el aire superior de la barra de administración */
.page-id-2592 #wpadminbar {
    display: none !important;
}

.page-id-2592 html,
.page-id-2592 body,
.page-id-2592 #page {
    margin-top: 0px !important;
    padding-top: 0px !important;
    top: 0px !important;
}

/* Eliminar el margen fantasma de 46px en la etiqueta html */
html.page-id-2592,
html {
    margin-top: 0px !important;
}

/* Forzar al cuerpo y contenedores a subir a cero */
body.page-id-2592,
.page-id-2592 #page {
    margin-top: 0px !important;
    padding-top: 0px !important;
}


/* Redefine las variables de SureForms para colapsar los espacios */
form#srfm-form-3847,
.srfm-form-container {
    --srfm-row-gap-between-blocks: 1px !important;
    --srfm-column-gap-between-blocks: 1px !important;
    row-gap: 1px !important;
}

/* Fuerza el margen de los bloques individuales por si queda residuo */
form#srfm-form-3847 .srfm-block {
    margin-bottom: 4px !important;
}

/****************************************************************************/
/* 1. Ocultar el contenedor raíz de Crisp por defecto 
#crisp-chatbox {
    display: none !important;
}*/

/* 2. Diseño corregido de nuestro botón personalizado */
#mi-chat-personalizado {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    background: #10b981 !important;
    color: #ffffff !important;
    padding: 10px 20px 10px 12px !important;
    border-radius: 50px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    width: auto !important;
}

/* Forzar que los textos se mantengan siempre horizontales */
#mi-chat-personalizado * {
    white-space: nowrap !important;
}

#mi-chat-personalizado:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Corregir tamaño y forma circular del avatar */
.contenedor-avatar {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
}

.avatar-chat {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    display: block !important;
}

.punto-en-linea {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 12px !important;
    height: 12px !important;
    background-color: #22c55e !important;
    border: 2px solid #10b981 !important;
    border-radius: 50% !important;
}

.texto-chat {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.subtitulo-chat {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    opacity: 0.9 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.titulo-chat {
    font-size: 14px !important;
    font-weight: bold !important;
    margin: 0 !important;
}

/* ======================================================
   LINEA DORADA DE CABECERA CON PUNTAS DESVANECIDAS
   ====================================================== */
/* Modifica todos los separadores de Elementor con tu diseño dorado */
.elementor .e-divider-base {
    border-top: none !important;
    /* Borra el borde negro por defecto */
    height: 2px !important;
    /* Define el grosor de la línea */
    background: linear-gradient(to right,
            transparent,
            #8a6a2f,
            #d4b06a,
            #f3dfb0,
            #c89b3c,
            #8a6a2f,
            transparent) !important;
}




/**********************************************************************/