.elementor-kit-9{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#FFFFFF;--e-global-color-accent:#61CE70;--e-global-color-627cd42:#68BF17;--e-global-color-3c2555e:#1D1D1D;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"montserrat";--e-global-typography-text-font-family:"montserrat";--e-global-typography-accent-font-family:"montserrat";font-family:"Montserrat", Sans-serif;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:1000px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* CSS para el ícono de '+' y el comportamiento del submenú en móvil */

/* Define el punto de interrupción para móvil. Asegúrate de que coincida con el JavaScript. */
@media (max-width: 767px) { /* Por ejemplo, 767px o 1024px, según tu configuración de Elementor */

    /* Estilo para los ítems del menú principal que tienen hijos (para Flexbox) */
    .elementor-nav-menu--main .menu-item-has-children {
        display: flex; /* Permite que el enlace y el '+' estén en la misma línea */
        align-items: center; /* Alinea verticalmente el enlace y el '+' */
        justify-content: space-between; /* Distribuye espacio entre el enlace y el '+' */
        padding-right: 20px; /* Espacio extra para el '+' si no lo controlamos con justify-content */
        position: relative; /* Necesario para posicionar el submenú si se usa absolute */
    }

    /* Oculta el submenú por defecto en móvil */
    .elementor-nav-menu--main .sub-menu {
        display: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        opacity: 0;
        width: 100%; /* El submenú ocupa todo el ancho disponible */
        position: static; /* Asegura que el submenú fluya normalmente bajo el ítem padre */
        padding-left: 20px; /* Indentación para los ítems del submenú */
    }

    /* Muestra el submenú cuando el JavaScript añade la clase 'is-open' */
    .elementor-nav-menu--main .sub-menu.is-open {
        display: block;
        max-height: 500px; /* Suficientemente grande para contener todos los ítems */
        opacity: 1;
        transition: max-height 0.3s ease-in, opacity 0.3s ease-in;
    }

    /* Estilo y posicionamiento para el botón de despliegue '+' */
    .custom-submenu-toggle {
        display: inline-flex; /* Usa flex para centrar el '+' dentro del botón */
        justify-content: center;
        align-items: center;
        margin-left: 10px; /* Espacio entre el texto del enlace y el '+' */
        width: 30px; /* Ancho del botón */
        height: 30px; /* Alto del botón */
        background-color: #4CAF50; /* Color de fondo del botón */
        color: white; /* Color del signo '+' */
        border-radius: 50%; /* Hace que el botón sea redondo */
        cursor: pointer;
        font-size: 1.2em; /* Tamaño del signo '+' */
        font-weight: bold;
        transition: transform 0.3s ease; /* Transición para la rotación */
        flex-shrink: 0; /* Evita que el botón se encoja */
    }

    /* Rotar el '+' a 'x' cuando el submenú está abierto */
    .custom-submenu-toggle.is-active {
        transform: rotate(45deg); /* Gira el '+' para que parezca una 'x' */
    }
}

/* Oculta el '+' en escritorio */
@media (min-width: 768px) { /* Asegúrate de que coincida con el JavaScript */
    .custom-submenu-toggle {
        display: none !important; /* Oculta el botón '+' en escritorio */
    }
}
<script>
    // JavaScript para añadir el botón de '+' y controlar el despliegue del submenú en móvil.
document.addEventListener('DOMContentLoaded', function() {
    // Define el punto de interrupción para detectar dispositivos móviles.
    // ***IMPORTANTE: Asegúrate de que este valor coincida con el breakpoint
    // que tienes configurado en el widget "Menú de Navegación" de Elementor
    // y con el CSS anterior. Valores comunes son 767 o 1024.***
    const MOBILE_BREAKPOINT = 767;

    // Selecciona todos los ítems del menú que tienen submenús.
    // Asegúrate de que '.elementor-nav-menu--main' sea la clase de tu menú principal.
    const parentMenuItems = document.querySelectorAll('.elementor-nav-menu--main .menu-item-has-children');

    if (parentMenuItems.length > 0) {
        parentMenuItems.forEach(function(parentLi) {
            // Solo añadir el toggle si estamos en móvil
            if (window.innerWidth <= MOBILE_BREAKPOINT) {
                // Previene añadir múltiples toggles si el script se ejecuta más de una vez
                if (parentLi.querySelector('.custom-submenu-toggle')) {
                    return; // Ya existe, no hacer nada
                }

                const anchorElement = parentLi.querySelector('a'); // El enlace (Reformas)
                const subMenu = parentLi.querySelector('.sub-menu'); // El submenú (UL)

                if (anchorElement && subMenu) {
                    // Crea el botón de despliegue '+'
                    const toggleButton = document.createElement('span');
                    toggleButton.classList.add('custom-submenu-toggle');
                    toggleButton.innerHTML = '&#x2b;'; // Carácter de cruz (más)

                    // Inserta el botón de despliegue después del enlace principal
                    anchorElement.parentNode.insertBefore(toggleButton, anchorElement.nextSibling);

                    // Añade un evento de clic al botón de despliegue
                    toggleButton.addEventListener('click', function(event) {
                        event.preventDefault(); // Evita cualquier comportamiento predeterminado del span
                        event.stopPropagation(); // Evita que el clic se propague al enlace padre

                        // Alterna la clase 'is-open' en el submenú para mostrarlo/ocultarlo
                        subMenu.classList.toggle('is-open');
                        // Alterna la clase 'is-active' en el botón para rotarlo
                        toggleButton.classList.toggle('is-active');

                        // Opcional: Cierra otros submenús abiertos al abrir uno nuevo
                        parentMenuItems.forEach(function(otherLi) {
                            if (otherLi !== parentLi) { // Si no es el menú actual
                                const otherSubMenu = otherLi.querySelector('.sub-menu');
                                const otherToggleButton = otherLi.querySelector('.custom-submenu-toggle');
                                if (otherSubMenu && otherSubMenu.classList.contains('is-open')) {
                                    otherSubMenu.classList.remove('is-open');
                                    if (otherToggleButton) {
                                        otherToggleButton.classList.remove('is-active');
                                    }
                                }
                            }
                        });
                    });
                }
            }
        });
    }

    // Opcional: Cierra submenús si la pantalla se redimensiona a escritorio
    let resizeTimeout;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function() {
            if (window.innerWidth > MOBILE_BREAKPOINT) {
                parentMenuItems.forEach(function(parentLi) {
                    const subMenu = parentLi.querySelector('.sub-menu');
                    const toggleButton = parentLi.querySelector('.custom-submenu-toggle');
                    if (subMenu && subMenu.classList.contains('is-open')) {
                        subMenu.classList.remove('is-open');
                    }
                    if (toggleButton && toggleButton.classList.contains('is-active')) {
                        toggleButton.classList.remove('is-active');
                    }
                });
            }
        }, 250); // Pequeño retraso para evitar ejecuciones excesivas
    });

    console.log('Script de menú móvil con botón "+" cargado.');
});

</script>/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'montserrat';
	font-display: auto;
	src: url('https://nuevawp.renovaforma.es/wp-content/uploads/2025/05/Montserrat-ThinItalic.ttf') format('truetype');
}
/* End Custom Fonts CSS */