.elementor-30 .elementor-element.elementor-element-f8742ee{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;border-style:none;--border-style:none;--border-radius:0px 0px 0px 0px;--padding-top:15px;--padding-bottom:15px;--padding-left:125px;--padding-right:125px;--z-index:100;}.elementor-30 .elementor-element.elementor-element-f8742ee:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-f8742ee > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-30 .elementor-element.elementor-element-e19f1bb img{width:100%;max-width:100%;height:7vh;transition-duration:0.3s;}.elementor-30 .elementor-element.elementor-element-b42508f > .elementor-widget-container{padding:15px 0px 0px 0px;}.elementor-30 .elementor-element.elementor-element-b42508f .elementor-menu-toggle{margin:0 auto;}.elementor-30 .elementor-element.elementor-element-b42508f .elementor-nav-menu .elementor-item{font-family:"Nunito", Sans-serif;font-size:16px;font-weight:900;letter-spacing:0.5px;}.elementor-30 .elementor-element.elementor-element-b42508f .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-30 .elementor-element.elementor-element-b42508f .elementor-nav-menu--main .elementor-item:hover, .elementor-30 .elementor-element.elementor-element-b42508f .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-30 .elementor-element.elementor-element-b42508f .elementor-nav-menu--main .elementor-item.highlighted, .elementor-30 .elementor-element.elementor-element-b42508f .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-30 .elementor-element.elementor-element-b42508f .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#F5536B;}.elementor-30 .elementor-element.elementor-element-b42508f{--e-nav-menu-horizontal-menu-item-margin:calc( 10px / 2 );}.elementor-30 .elementor-element.elementor-element-b42508f .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:10px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-30 .elementor-element.elementor-element-f8742ee{--padding-top:20px;--padding-bottom:20px;--padding-left:40px;--padding-right:40px;}}/* Start custom CSS for nav-menu, class: .elementor-element-b42508f *//* Espacio inferior para ubicar la onda */ .menu-ondulado .elementor-item, .menu-ondulado a { position: relative !important; text-decoration: none !important; padding-bottom: 15px !important; } /* Pseudo-elemento con la onda SVG */ .menu-ondulado .elementor-item::after, .menu-ondulado a::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 100% !important; height: 10px !important; /* Redondea los extremos izquierdo y derecho donde se corta la onda */ border-radius: 100px !important; -webkit-mask-image: radial-gradient(white, black); /* Soporte de recorte suave en WebKit */ mask-image: radial-gradient(white, black); overflow: hidden !important; /* SVG de la onda */ background-image: url('data:image/svg+xml;utf8,') !important; background-size: 25px 9px !important; background-repeat: repeat-x !important; /* Oculto por defecto */ opacity: 0 !important; transform: translateY(2px); transition: opacity 0.25s ease, transform 0.25s ease !important; } /* Estado Hover */ .menu-ondulado .elementor-item:hover::after, .menu-ondulado a:hover::after { opacity: 1 !important; transform: translateY(0); animation: ondear .9s linear infinite !important; } /* Estado Activo permanente (cubre todas las clases que genera WordPress/Elementor) */ .menu-ondulado .elementor-item.elementor-item-active::after, .menu-ondulado .current-menu-item > a::after, .menu-ondulado .current_page_item > a::after, .menu-ondulado [aria-current="page"]::after { opacity: 1 !important; transform: translateY(0) !important; animation: ondear .9s linear infinite !important; } /* Animación de desplazamiento horizontal continuo en bucle */ @keyframes ondear { from { background-position-x: 0; } to { background-position-x: 25px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f8742ee *//* ============================================================ HEADER: CONTENEDOR PRINCIPAL Y ESTADO STICKY ============================================================ */ /* Transición suave para el fondo del header */ .header-festival { position: relative; /* Necesario para contener el pseudo-elemento ::before */ transition: background-color 0.3s ease, box-shadow 0.3s ease !important; } /* Color cuando el usuario baja la página */ .header-festival.elementor-sticky--effects { background-color: #f2994a !important; /* Color naranja */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra sutil */ } /* Capa de motas y granos de arena (oculta por defecto) */ .header-festival::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; /* Granos oscuros y claros */ background-image: radial-gradient(#dca462 1px, transparent 1px), radial-gradient(#fff5da 1.5px, transparent 1px), radial-gradient(#c88b48 1px, transparent 1px), radial-gradient(#ffffff 1.5px, transparent 1px); background-size: 24px 24px, 28px 28px, 48px 48px, 56px 56px; background-position: 0 0, 12px 14px, 8px 20px, 30px 10px; opacity: 0; /* Invisible mientras el header sea transparente */ transition: opacity 0.3s ease !important; /* Entrada y salida suave */ } /* Activa la arena solo cuando el header pasa al estado sticky */ .header-festival.elementor-sticky--effects::before { opacity: 0.1; /* Textura visible */ } /* ============================================================ 1. TRANSICIONES SUAVES BASE (IDA Y VUELTA) ============================================================ */ /* Enlaces del menú */ .menu-ondulado .elementor-item, .menu-ondulado a { transition: color 0.3s ease !important; } /* Logo: preserva el shrink simultáneo con el filtro de color */ .header-logo img, .header-logo svg, .elementor-widget-theme-site-logo img, .elementor-widget-image img, .site-logo img { transition: width 0.35s ease, max-width 0.35s ease, transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease !important; will-change: transform, filter; backface-visibility: hidden; } /* ============================================================ 2. CAMBIO DE COLOR DE LAS LETRAS AL HACER SCROLL ============================================================ */ /* Solo cambia el color normal cuando el header es sticky, respetando hover y activo */ .header-festival.elementor-sticky--effects .menu-ondulado .elementor-item:not(:hover):not(.elementor-item-active), .header-festival.elementor-sticky--effects .menu-ondulado a:not(:hover):not(.elementor-item-active) { color: #FFFFFF !important; } /* ============================================================ 3. CAMBIO DE COLOR DEL LOGO AL HACER SCROLL ============================================================ */ /* SVG directo */ .header-festival.elementor-sticky--effects .site-logo svg, .header-festival.elementor-sticky--effects .custom-logo-link svg, .header-festival.elementor-sticky--effects .header-logo svg { fill: #FFFFFF !important; } /* Imagen PNG / SVG cargado como imagen (vuelve a blanco) */ .header-festival.elementor-sticky--effects .elementor-widget-theme-site-logo img, .header-festival.elementor-sticky--effects .elementor-widget-image img, .header-festival.elementor-sticky--effects .header-logo img { filter: brightness(0) invert(1) !important; }/* End custom CSS */