/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 19 2025 | 15:47:45 */
/* CSS para hacer que el header sea sticky y cambie de color al hacer scroll */

/* Estilo para el header principal */
#main-header {
	width: 100% !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Valor alto para asegurar que esté por encima de otros elementos */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
}

/* Contenedor principal del header para desktop */
#main-header .elementor-element-22391dd {
    transition: background-color 0.3s ease;
}

/* Clase que se añadirá con JavaScript cuando se haga scroll */
.header-scrolled .elementor-element-22391dd {
    background-color: #B0CC3C !important; /* Color de fondo verde al hacer scroll */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Cambiar el color del logo al hacer scroll */
.header-scrolled .elementor-element-f4ce3e7 img {
    filter: brightness(0) saturate(100%) invert(8%) sepia(24%) saturate(3492%) hue-rotate(149deg) brightness(93%) contrast(98%); /* Cambia el logo blanco a #012426 */
    transition: filter 0.3s ease;
}

/* Cambiar el color de los enlaces del menú al hacer scroll */
.header-scrolled .elementor-nav-menu--main .elementor-nav-menu a {
    color: #495057 !important; /* Color oscuro específico para el texto del menú */
    transition: color 0.3s ease;
}

/* Para dispositivos móviles */
.elementor-18 .elementor-element-327b4a2 {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

/* Añadir espacio al body para compensar el header fijo */


/*Animación al pasar el cursor sobre los elementos del menu*/
.elementor-nav-menu a.elementor-item {
  position: relative;
  overflow: hidden;
}

/* Línea por defecto (invisible) */
.elementor-nav-menu a.elementor-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

/* Línea animada al hacer hover */
.elementor-nav-menu a.elementor-item:hover::after {
  transform: scaleX(1);
}

/* Línea visible permanentemente en el ítem activo */
.elementor-nav-menu a.elementor-item.elementor-item-active::after,
.elementor-nav-menu a.elementor-item[aria-current="page"]::after {
  transform: scaleX(1);
}