/*
Theme Name: Demoto
Theme URI: http://www.elegantthemes.com/gallery/divi/
Text Domain: demoto
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.27.1.1724838944
Updated: 2024-08-28 09:55:44

*/

/* Ocultar submenús por defecto */
ul.et_mobile_menu .menu-item-has-children .sub-menu {
    display: none !important; /* Asegurar que los submenús están ocultos inicialmente */
    visibility: hidden !important;
    transition: all 0.3s ease-in-out; /* Transición suave */
}

/* Mostrar submenús cuando tienen la clase 'visible' */
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
    display: block !important;
    visibility: visible !important;
}

/* Estilo del botón toggle */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
    width: 44px; /* Ancho del botón toggle */
    height: 44px; /* Altura del botón toggle */
    position: absolute; /* Posicionado absoluto a la derecha */
    right: 0px;
    top: 0px;
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin bordes */
    z-index: 999; /* Asegurarse de que esté por encima */
    cursor: pointer; /* Mostrar cursor de mano */
}

/* Icono del toggle cuando está cerrado */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
    content: '\33'; /* Flecha hacia abajo */
    font-family: "ETModules"; /* Icono Divi */
    color: #fff; /* Color del icono */
	background: #E02B20; /* Fondo del icono */
    border-radius: 50%; /* Icono redondeado */
    padding: 5px; /* Espaciado interno del icono */
    position: relative;
    top: 0; /* Ajustar posición vertical */
}

/* Icono del toggle cuando el submenú está abierto */
ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after {
    content: '\32'; /* Flecha hacia arriba */
	color: #E02B20; /* Color del icono */
	background: #fff; /* Fondo del icono */
}

/* Alinear correctamente los elementos del menú */
ul.et_mobile_menu li.menu-item-has-children {
    position: relative; /* Necesario para posicionar el toggle correctamente */
}

/* Estilo visual cuando el submenú está abierto */
ul.et_mobile_menu li.menu-item-has-children.dt-open > a {
    font-weight: bold; /* Destacar el enlace activo */
    color: #E02B20; /* Color del enlace activo */
}

/* Estilo en hover del botón toggle */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle:hover {
    opacity: 0.8; /* Reducir la opacidad al pasar el ratón */
}

/* Ajustes generales del menú móvil */
ul.et_mobile_menu {
	 background-color: #E02B20 !important; /* Fondo blanco del menú */
    border-radius: 10px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
}

/* Submenús anidados (opcional) */
ul.et_mobile_menu .sub-menu li.menu-item-has-children .mobile-toggle {
    right: 10px; /* Ajustar el botón toggle para submenús */
    top: 5px;
    font-size: 0.8em; /* Tamaño más pequeño */
}