.elementor-15 .elementor-element.elementor-element-1677471{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-a949654{margin:35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-15 .elementor-element.elementor-element-a949654{margin:3px 3px calc(var(--kit-widget-spacing, 0px) + 3px) 3px;}}/* Start custom CSS for html, class: .elementor-element-a949654 *//* --- CONFIGURACIÓN BASE --- */
.main-header {
    position: fixed;
    top: 0; width: 100%; z-index: 1000;
    padding: 20px 0; transition: 0.4s ease;
}

.header-container {
    max-width: 1200px; margin: 0 auto; padding: 0 25px;
    display: flex; justify-content: space-between; align-items: center;
}

.logo-img {
    height: 45px !important; /* Ajusta este número a tu gusto */
    width: auto !important;
    max-width: none !important; /* Evita que el contenedor lo limite */
    object-fit: contain;
}
.nav-links { display: flex; list-style: none; gap: 30px; align-items: center; }
.nav-links a { text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 13px; transition: 0.3s; }

/* --- PC: INICIO OSCURO (Sobre fondo blanco del Split Hero) --- */
.main-header .logo-color { display: block; }
.main-header .logo-white { display: none; }
.main-header .nav-links a { color: var(--bt-navy); }

.main-header.scrolled {
    background: #ffffff;
    padding: 12px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* --- MÓVIL: INICIO BLANCO (Sobre la imagen de fondo) --- */
@media (max-width: 768px) {
    .menu-toggle { display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
    .menu-toggle .bar { width: 25px; height: 3px; border-radius: 2px; transition: 0.4s; }
    .logo-img {
        height: 35px !important; /* Tamaño para móvil */
    }
    /* Estado inicial en móvil: Logo Blanco y Hamburguesa Blanca */
    .main-header:not(.scrolled) .logo-color { display: none; }
    .main-header:not(.scrolled) .logo-white { display: block; }
    .main-header:not(.scrolled) .menu-toggle .bar { background-color: #ffffff; }

    /* El panel del menú (siempre oscuro) */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: var(--bt-navy);
        display: flex;
        flex-direction: column;
        /* Centrado vertical y horizontal */
        justify-content: center; 
        align-items: center;
        transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        z-index: 1050; /* Por debajo del botón */}
    .nav-menu.active { right: 0; }
    .nav-links {
        flex-direction: column;
        align-items: center; /* Centra los items horizontalmente */
        justify-content: center;
        width: 100%;
        padding: 0;
        gap: 30px; /* Espacio entre cada link */
    }
    .menu-toggle {
    z-index: 2000; /* Un número muy alto para que siempre esté por encima del menú azul */
    position: relative;
}

.nav-menu {
    z-index: 1500; /* Menor que el del botón toggle */
}
    .menu-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background-color: #ffffff !important; /* Forzamos blanco para que se vea sobre el fondo azul */
}

.menu-toggle.active .bar:nth-child(2) {
    opacity: 0; /* Desaparece la línea del centro */
}

.menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    background-color: #ffffff !important;
}
/* --- ESTADO ACTIVO: LA "X" SIEMPRE BLANCA --- */

/* Forzamos el color blanco en las 3 barras cuando el botón tiene la clase .active */
.menu-toggle.active .bar {
    background-color: #ffffff !important; /* El !important asegura que gane al color del scroll */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2); /* Un toque de brillo sutil */
}

/* Transformación de la barra superior */
.menu-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

/* Desaparece la barra del medio */
.menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

/* Transformación de la barra inferior */
.menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
    .nav-links a { color: #ffffff !important; font-size: 1.5rem; }

    /* Estado SCROLLED en móvil: Logo Color y Hamburguesa Oscura */
    .main-header.scrolled .logo-color { display: block; }
    .main-header.scrolled .logo-white { display: none; }
    .main-header.scrolled .menu-toggle .bar { background-color: var(--bt-navy); }
}/* End custom CSS */