/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

.menu-item object {
    width: 20px;  /* Ajusta el ancho del ícono */
    height: auto; /* Mantén la proporción */
    vertical-align: middle; /* Alinea verticalmente el ícono con el texto */
    margin-right: 8px; /* Añade un margen a la derecha para separar el ícono del texto */
  }







/* Estilo para la barra de navegación fija */
.main-header-bar {
    position: fixed !important; /* Fija la barra en la parte superior de la página */
    top: 0px !important; /* Coloca la barra en la parte superior (0px desde el top) */
    width: 100% !important; /* Hace que la barra ocupe todo el ancho de la pantalla */
    z-index: 999990 !important; /* Asegura que la barra esté por encima de otros elementos */
    opacity: 0.91 !important; /* Transparencia de la barra (70%) */
    border-bottom: 1px solid #ffae00 !important; /* Línea de borde inferior de color naranja */
}

/* Estilo para el contenido debajo de la barra fija */
.site-content {
    margin-top: 30px !important; /* Da espacio debajo de la barra fija para que no quede tapado */
    padding-top: 0px; /* Añade un poco de espacio adicional en la parte superior del contenido */
}

/* Estilo para el menú móvil (al abrirse el menú) */
.ast-mobile-header-content {
    position: fixed !important; /* Fija el menú móvil en la pantalla */
    top: 70px !important; /* Ajusta la posición del menú móvil para que esté debajo de la barra */
    left: 0 !important; /* Coloca el menú móvil alineado a la izquierda */
    width: 100% !important; /* Hace que el menú ocupe todo el ancho de la pantalla */
    max-height: calc(100vh - 70px) !important; /* Limita la altura del menú para no tapar toda la pantalla */
    z-index: 100000 !important; /* Asegura que el menú esté por encima de otros elementos */
    background-color: #ffffff !important; /* Fondo blanco del menú móvil */
    opacity: 0.95 !important; /* 95% de opacidad para el fondo del menú (ligeramente transparente) */
    overflow-y: auto !important; /* Permite el desplazamiento dentro del menú si hay muchas opciones */
}

/* Menú principal en ordenadores (letras blancas) */
@media (min-width: 921px) { /* Se aplica solo a pantallas grandes (ordenador) */
    .ast-desktop .main-header-menu > .menu-item > a {
       
    }

    .ast-desktop .main-header-menu > .menu-item > a:hover {
        color: #ffae00 !important; /* Cambia el color al pasar el cursor (naranja) */
    }
}

/* Menú en móviles (mantiene el color por defecto) */
@media (max-width: 920px) { 
    .ast-mobile-header-content .main-header-menu > .menu-item > a {
        color: #2C2C2C !important; /* Color oscuro (o el que prefieras) */
    }
}