.elementor-253 .elementor-element.elementor-element-6db767c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0em;--margin-bottom:-9em;--margin-left:0em;--margin-right:0em;--padding-top:1em;--padding-bottom:1em;--padding-left:0em;--padding-right:0em;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-253 .elementor-element.elementor-element-b3f862b{width:var( --container-widget-width, 35% );max-width:35%;--container-widget-width:35%;--container-widget-flex-grow:0;text-align:center;}.elementor-253 .elementor-element.elementor-element-b3f862b img{width:42%;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-hamburger:hover{background-color:#FFFFFF;}.elementor-253 .elementor-element.elementor-element-127231f{width:var( --container-widget-width, 65% );max-width:65%;--container-widget-width:65%;--container-widget-flex-grow:0;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-container{height:80px;border-radius:0px 0px 0px 0px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a{font-family:"Montserrat", Sans-serif;font-weight:600;color:#FFFFFF;padding:0px 15px 0px 15px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a:hover{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a:focus{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a:active{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li:hover > a{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a:hover .elementskit-submenu-indicator{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a:focus .elementskit-submenu-indicator{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a:active .elementskit-submenu-indicator{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li.current-menu-item > a{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li.current-menu-ancestor > a{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li.current-menu-ancestor > a .elementskit-submenu-indicator{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a .elementskit-submenu-indicator{color:#101010;fill:#101010;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon{color:#101010;fill:#101010;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;color:#000000;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav .elementskit-submenu-panel > li > a:active{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a{color:#707070;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav .elementskit-submenu-panel > li.current-menu-item > a{color:#707070 !important;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-submenu-panel{padding:15px 0px 15px 0px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;min-width:220px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-hamburger{float:right;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{background-color:#FFFFFF;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-hamburger > .ekit-menu-icon{color:#FFFFFF;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon{background-color:rgba(0, 0, 0, 0.5);}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-hamburger:hover > .ekit-menu-icon{color:rgba(0, 0, 0, 0.5);}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-close{color:rgba(51, 51, 51, 1);}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-close:hover{color:rgba(0, 0, 0, 0.5);}.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-253 .elementor-element.elementor-element-127231f .elementskit-nav-identity-panel{padding:10px 0px 10px 0px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-container{max-width:350px;border-radius:0px 0px 0px 0px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a{color:#000000;padding:10px 15px 10px 15px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-hamburger{padding:8px 8px 8px 8px;width:45px;border-radius:3px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-close{padding:8px 8px 8px 8px;margin:12px 12px 12px 12px;width:45px;border-radius:3px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-nav-logo > img{max-width:160px;max-height:60px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-nav-logo{margin:5px 0px 5px 0px;padding:5px 5px 5px 5px;}}@media(min-width:768px){.elementor-253 .elementor-element.elementor-element-6db767c{--content-width:100%;}}@media(max-width:767px){.elementor-253 .elementor-element.elementor-element-6db767c{--padding-top:1em;--padding-bottom:2em;--padding-left:0em;--padding-right:0em;--z-index:99999;}.elementor-253 .elementor-element.elementor-element-b3f862b > .elementor-widget-container{padding:0em 0em 0em 2em;}.elementor-253 .elementor-element.elementor-element-b3f862b{--container-widget-width:75%;--container-widget-flex-grow:0;width:var( --container-widget-width, 75% );max-width:75%;text-align:start;}.elementor-253 .elementor-element.elementor-element-127231f{--container-widget-width:17%;--container-widget-flex-grow:0;width:var( --container-widget-width, 17% );max-width:17%;}.elementor-253 .elementor-element.elementor-element-127231f.elementor-element{--align-self:center;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-container{max-width:85%;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-navbar-nav > li > a{font-size:1em;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-menu-hamburger > .ekit-menu-icon{font-size:22px;}.elementor-253 .elementor-element.elementor-element-127231f .elementskit-nav-logo > img{max-width:165px;max-height:73px;}}/* Start custom CSS for ekit-nav-menu, class: .elementor-element-127231f */<div id="custom-header">
    <div class="header-content">
        <a href="/" class="logo-link">
            <img src="TU_URL_DE_LOGO_NEGRO" class="logo-img" alt="Logo">
        </a>

        <nav class="custom-nav">
            <ul>
                <li><a href="#inicio">INICIO</a></li>
                <li><a href="#experiencias">EXPERIENCIAS</a></li>
                <li><a href="#servicios">SERVICIOS</a></li>
                <li><a href="#contacto">CONTACTO</a></li>
            </ul>
        </nav>
    </div>
</div>

<style>
/* 1. CONFIGURACIÓN INICIAL (Transparente) */
#custom-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 20px 50px;
    transition: all 0.4s ease-in-out;
    background-color: transparent;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo-img {
    height: 45px;
    filter: brightness(0) invert(1); /* Logo blanco al inicio */
    transition: all 0.4s ease-in-out;
}

.custom-nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
}

.custom-nav a {
    text-decoration: none;
    color: #ffffff; /* Letras blancas al inicio */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.4s ease-in-out;
}

/* 2. ESTADO AL HACER SCROLL (Traslúcido Oscuro) */
#custom-header.scrolled {
    /* Color negro con 70% de opacidad */
    background-color: rgba(0, 0, 0, 0.7) !important; 
    
    /* EFECTO DE CRISTAL (Blur de fondo) */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); /* Para Safari */
    
    padding: 12px 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#custom-header.scrolled .logo-img {
    /* Si el fondo es oscuro, el logo debe seguir siendo blanco */
    filter: brightness(0) invert(1); 
}

#custom-header.scrolled .custom-nav a {
    color: #ffffff; /* Las letras se quedan blancas para que se lean sobre el negro */
}

#custom-header.scrolled .custom-nav a:hover {
    color: #ff3377; /* Color fucsia al pasar el ratón */
}
</style>

<script>
window.addEventListener('scroll', function() {
    var header = document.getElementById('custom-header');
    if (window.scrollY > 80) { 
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});
</script>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db767c *//* 1. ESTADO INICIAL: 100% Transparente */
#header-oscuro {
    background-color: transparent !important;
    transition: all 0.5s ease-in-out !important;
    border: none !important;
}

/* 2. ESTADO AL HACER SCROLL: Oscuro Traslúcido */
#header-oscuro.elementor-sticky--effects {
    /* Color negro con 70% de opacidad */
    background-color: rgba(0, 0, 0, 0.7) !important; 
    
    /* Efecto de desenfoque de fondo (Cristal) */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    /* Sombra opcional para dar profundidad */
    box-shadow: 0px 4px 20px rgba(0,0,0,0.3);
}

/* 3. AJUSTE DE TEXTOS Y LOGO (Opcional) */
/* Si tus letras son negras, al ponerse oscuro el fondo no se verán. 
   Este código las mantendrá blancas para que resalten: */

#header-oscuro .elementor-item, 
#header-oscuro .logo-cambiante img {
    color: #ffffff !important;
    filter: brightness(0) invert(1) !important;
}/* End custom CSS */