.elementor-747 .elementor-element.elementor-element-6603d63c{--display:flex;}.elementor-747 .elementor-element.elementor-element-1094010b{padding:10px 0px 0px 0px;}.elementor-747 .elementor-element.elementor-element-1094010b img{width:40%;}#elementor-popup-modal-747 .dialog-widget-content{animation-duration:0.3s;background-color:var( --e-global-color-887c8fc );box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-747{background-color:#54595FBD;justify-content:flex-start;align-items:center;pointer-events:all;}#elementor-popup-modal-747 .dialog-message{width:350px;height:100vh;align-items:flex-start;}#elementor-popup-modal-747 .dialog-close-button{display:flex;font-size:28px;}#elementor-popup-modal-747 .dialog-close-button i{color:var( --e-global-color-a61ed5a );}#elementor-popup-modal-747 .dialog-close-button svg{fill:var( --e-global-color-a61ed5a );}@media(max-width:767px){#elementor-popup-modal-747 .dialog-message{width:300px;}#elementor-popup-modal-747{align-items:flex-start;}}/* Start custom CSS for container, class: .elementor-element-6603d63c *//* ==========================================================================
   CSS CORREGIDO Y REFINADO - MENÚ MÓVIL POPUP "FLORERÍA AMALIA"
   ========================================================================== */

@media (max-width: 767px) {

    /* BLOQUE 1: Variables cromáticas corregidas
       - qué problema corrige ese bloque: El blanco puro se sentía estéril y frío. El rosado carecía de jerarquía y el verde no destacaba.
       - qué cambio cromático introduces: Fondo cálido perlado (FCF9FA), overlay más orgánico, acento rosado mejor graduado y gris de texto enriquecido con tonos cálidos.
       - por qué mejora el resultado visual: Crea la atmósfera "boutique floral". La base cálida abraza la marca, haciendo que el menú se sienta premium y romántico sin saturar.
    */
    #elementor-popup-modal-747 {
        --amalia-bg-panel: #FCF9FA; /* Blanco cálido/perlado, elimina la esterilidad clínica */
        --amalia-bg-overlay: rgba(46, 35, 40, 0.82); /* Overlay profundo con matiz cálido */
        --amalia-primary: #ED3989; /* Fucsia vivo de la marca */
        --amalia-primary-soft: rgba(237, 57, 137, 0.05); /* Baño rosado ultra sutil */
        --amalia-primary-medium: rgba(237, 57, 137, 0.12); /* Rosado para estados activos fuertes */
        --amalia-secondary: #24A455; /* Verde corporativo de conversión */
        --amalia-secondary-soft: rgba(36, 164, 85, 0.08); /* Fondo de CTA verde */
        --amalia-text-main: #362D31; /* Carbón cálido, más suave que el negro */
        --amalia-text-muted: #8C7D82; /* Gris topo cálido para submenús */
        --amalia-border: rgba(54, 45, 49, 0.05); /* Líneas sutiles derivadas del texto principal */
        --amalia-shadow: rgba(237, 57, 137, 0.06); /* Sombra etérea rosada */

        -webkit-tap-highlight-color: transparent !important;
        font-family: inherit;
    }

    /* BLOQUE 2: Overlay y panel (CORRECCIÓN BUG DE ANCHO)
   - qué corrige: Elimina la sensación de "caja angosta" y mal alineada.
   - qué cambio cromático introduces: Ninguno, solo ajustes estructurales.
   - por qué mejora el resultado visual: Resetea el padding base de los modales de Elementor, permitiendo que el menú ocupe el 100% del panel perlado.
*/
#elementor-popup-modal-747 .dialog-widget-content {
    background-color: var(--amalia-bg-panel) !important;
    width: 85vw !important;
    max-width: 360px !important;
    border-radius: 0 20px 20px 0 !important;
    padding: 0 !important; /* Reset crucial para el ancho */
}
#elementor-popup-modal-747 .dialog-message {
    padding: 0 !important; /* Elimina el espacio vacío oculto de Elementor */
    width: 100% !important;
}

    /* BLOQUE 3: Header y fondo del área del logo
       - qué problema corrige ese bloque: Falta de integración estructural en la cabecera.
       - qué cambio cromático introduces: Mantiene el fondo perlado pero usa la nueva variable de borde cálido.
       - por qué mejora el resultado visual: Enmarca el logo con suavidad, haciéndolo lucir como el sello de la boutique.
    */
    #elementor-popup-modal-747 .elementor-widget-image {
        padding: 28px 24px 24px !important;
        background-color: transparent !important;
        margin-bottom: 0 !important;
    }

    /* BLOQUE 4: Botón de cierre
       - qué problema corrige ese bloque: El botón se veía desconectado ("flotante sin intención").
       - qué cambio cromático introduces: Fondo del botón integrado con el panel (primario-soft) e icono en el color principal, sin sombras duras.
       - por qué mejora el resultado visual: Se ve intencional, delicado y parte del diseño, no como un elemento superpuesto del sistema.
    */
    #elementor-popup-modal-747 .dialog-close-button {
        top: 20px !important;
        right: 20px !important; /* Posicionado dentro del panel para mayor cohesión */
        width: 36px !important;
        height: 36px !important;
        background-color: var(--amalia-primary-soft) !important;
        border-radius: 50% !important;
        box-shadow: none !important; /* Eliminamos sombra flotante, ahora es flat premium */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
        transition: background-color 0.2s ease !important;
    }
    #elementor-popup-modal-747 .dialog-close-button svg {
        fill: var(--amalia-primary) !important;
        width: 12px !important;
        height: 12px !important;
    }
    #elementor-popup-modal-747 .dialog-close-button:active {
        background-color: var(--amalia-primary-medium) !important;
    }

    /* BLOQUE 5: Contenedor e Ítems principales (CORRECCIÓN BUG DE ANCHO)
   - qué corrige: Fuerza a los ítems a estirarse de borde a borde del panel.
   - qué cambio cromático introduces: Ninguno.
   - por qué mejora el resultado visual: Expande el área táctil y alinea perfectamente los textos y flechas con los bordes de la pantalla.
*/
#elementor-popup-modal-747 .elementor-nav-menu__container {
    padding: 8px 0 0 0 !important;
    width: 100% !important;
}
#elementor-popup-modal-747 .elementor-nav-menu,
#elementor-popup-modal-747 ul.sm-vertical > li {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
#elementor-popup-modal-747 .elementor-item::before,
#elementor-popup-modal-747 .elementor-item::after {
    display: none !important;
}
#elementor-popup-modal-747 ul.sm-vertical > li > a.elementor-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    color: var(--amalia-text-main) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    background-color: transparent !important;
    transition: all 0.2s ease !important;
}

    /* BLOQUE 6: Estado abierto / activo / current del primer nivel
       - qué problema corrige ese bloque: Estado activo débil; no se notaba qué sección principal estaba abierta.
       - qué cambio cromático introduces: Texto fucsia, fondo rosado ultra suave y un acento sutil con "box-shadow inset" izquierdo.
       - por qué mejora el resultado visual: Da presencia premium. El "inset shadow" actúa como un indicador de cinta muy elegante, sin llenar toda la caja de color.
    */
    #elementor-popup-modal-747 ul.sm-vertical > li > a.elementor-item.elementor-item-active,
    #elementor-popup-modal-747 ul.sm-vertical > li.current-menu-item > a.elementor-item,
    #elementor-popup-modal-747 ul.sm-vertical > li > a.elementor-item.highlighted,
    #elementor-popup-modal-747 ul.sm-vertical > li > a.elementor-item[aria-expanded="true"] {
        color: var(--amalia-primary) !important;
        background-color: var(--amalia-primary-soft) !important;
        box-shadow: inset 4px 0 0 var(--amalia-primary) !important; /* Acento premium lateral */
    }

    /* BLOQUE 7: Submenús
       - qué problema corrige ese bloque: Los submenús no se sentían parte de la familia cromática.
       - qué cambio cromático introduces: Aplicación del topo cálido (text-muted) para diferenciarlos del texto principal.
       - por qué mejora el resultado visual: Relaja la vista del usuario, indicando claramente la jerarquía secundaria con suavidad.
    */
    #elementor-popup-modal-747 .elementor-nav-menu--dropdown {
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 4px 0 12px 0 !important;
        margin: 0 !important;
    }
    #elementor-popup-modal-747 .elementor-nav-menu--dropdown a.elementor-sub-item {
        display: flex !important;
        align-items: center !important;
        padding: 12px 24px 12px 42px !important;
        color: var(--amalia-text-muted) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        text-transform: none !important;
        background-color: transparent !important; /* Asegura reset de fondos sucios */
        position: relative;
        transition: color 0.2s ease, background-color 0.2s ease !important;
    }

    /* BLOQUE 8: Estado seleccionado / highlighted / current del submenú
       - qué problema corrige ese bloque: ELIMINA el bloque oscuro sólido que rompía la estética al tocar o tener seleccionado un subitem.
       - qué cambio cromático introduces: Fuerza fondo transparente o rosado mínimo, tiñe texto de fucsia y aumenta levemente el peso de la fuente.
       - por qué mejora el resultado visual: Sobrescribe la clase nativa .highlighted de SmartMenus, devolviendo la elegancia y coherencia al submenú.
    */
    #elementor-popup-modal-747 .elementor-nav-menu--dropdown a.elementor-sub-item:active,
    #elementor-popup-modal-747 .elementor-nav-menu--dropdown a.elementor-sub-item:focus,
    #elementor-popup-modal-747 .elementor-nav-menu--dropdown a.elementor-sub-item.highlighted,
    #elementor-popup-modal-747 .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
    #elementor-popup-modal-747 .elementor-nav-menu--dropdown li.current-menu-item > a.elementor-sub-item {
        background-color: var(--amalia-primary-soft) !important; /* Adiós al bloque oscuro sólido */
        color: var(--amalia-primary) !important;
        font-weight: 500 !important; /* Leve resalte tipográfico */
        outline: none !important; /* Elimina recuadros de accesibilidad nativos toscos */
    }

  /* BLOQUE 9: Chevron e iconografía (CORRECCIÓN BUG DE INTERACCIÓN / REDIRECCIÓN)
   - qué corrige: Evita que el menú redirija al primer hijo (como "AMOR") al intentar colapsar la categoría.
   - qué cambio cromático introduces: Ninguno.
   - por qué mejora el resultado visual: Es un "Hitbox Hack" premium. Expande la capa de la flecha (.sub-arrow) de forma absoluta e invisible sobre todo el ítem. Al tocar la palabra "OCASIONES", físicamente estás tocando la flecha, forzando la apertura/cierre nativa sin JavaScript.
*/
#elementor-popup-modal-747 ul.sm-vertical > li > a.elementor-item.has-submenu {
    position: relative !important; /* Anclaje para la flecha flotante */
}
#elementor-popup-modal-747 .elementor-item.has-submenu .sub-arrow {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* Cubre el 100% del botón padre */
    height: 100% !important;
    margin: 0 !important;
    padding: 0 24px !important; /* Mantiene el SVG visualmente alineado a la derecha */
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    z-index: 10 !important; /* Superpone la flecha por encima del texto */
}
#elementor-popup-modal-747 .elementor-item.has-submenu .sub-arrow svg {
    width: 10px !important;
    height: 10px !important;
    fill: var(--amalia-text-muted) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), fill 0.2s ease !important;
}
#elementor-popup-modal-747 .elementor-item[aria-expanded="true"] .sub-arrow svg {
    transform: rotate(180deg) !important;
    fill: var(--amalia-primary) !important;
}

    /* BLOQUE 10: Bordes, sombras y separadores
       - qué problema corrige ese bloque: Separadores demasiado fuertes o grises sucios.
       - qué cambio cromático introduces: Líneas divisorias cálidas con 5% de opacidad y sombra exterior etérea.
       - por qué mejora el resultado visual: Aporta estructura sin añadir ruido visual. La guía vertical del submenú ahora es imperceptible pero efectiva.
    */
    #elementor-popup-modal-747 .dialog-widget-content {
        box-shadow: 10px 0 40px var(--amalia-shadow) !important;
    }
    #elementor-popup-modal-747 .elementor-widget-image {
        border-bottom: 1px solid var(--amalia-border) !important;
    }
    #elementor-popup-modal-747 ul.sm-vertical > li > a.elementor-item {
        border-bottom: 1px solid var(--amalia-border) !important;
    }
    #elementor-popup-modal-747 ul.sm-vertical > li:last-child > a.elementor-item {
        border-bottom: none !important;
    }
    #elementor-popup-modal-747 .elementor-nav-menu--dropdown a.elementor-sub-item::before {
        content: '' !important;
        position: absolute !important;
        left: 26px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 1px !important;
        background-color: var(--amalia-border) !important; /* Guía vertical unificada */
    }

   /* BLOQUE 11: Scroll interno (CORRECCIÓN BUG DE ANCHO)
   - qué corrige: Asegura que el contenedor de scroll no se contraiga.
   - qué cambio cromático introduces: Ninguno.
   - por qué mejora el resultado visual: Mantiene el comportamiento nativo tipo App, pero respetando el 100% del ancho disponible.
*/
#elementor-popup-modal-747 .dialog-message {
    max-height: calc(100vh - 95px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; /* Previene scroll horizontal accidental */
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}
#elementor-popup-modal-747 .dialog-message::-webkit-scrollbar {
    display: none !important;
}

    /* BLOQUE 12: Ajustes finales de armonización cromática
       - qué problema corrige ese bloque: Fondos que no cubren hasta el borde del dispositivo móvil y barras de scroll que dañan el color sólido.
       - qué cambio cromático introduces: Transparencia total en scrollbars y env() padding inferior que asume el color del panel perlado.
       - por qué mejora el resultado visual: Sella la experiencia premium asegurando que no haya "roturas" visuales al final de la pantalla en dispositivos nuevos.
    */
    #elementor-popup-modal-747 .dialog-message {
        max-height: calc(100vh - 95px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    #elementor-popup-modal-747 .dialog-message::-webkit-scrollbar {
        display: none !important;
    }
    #elementor-popup-modal-747 .elementor-nav-menu__container {
        padding-bottom: env(safe-area-inset-bottom, 40px) !important;
    }
}/* End custom CSS */
/* Start custom CSS */body .admin-bar .dialog-type-lightbox {
        position:fixed;
        height: 100vh
    }/* End custom CSS */