.elementor-207 .elementor-element.elementor-element-59010ff3{--display:flex;--min-height:80px;--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;--gap:5% 5%;--row-gap:5%;--column-gap:5%;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#00000094;--border-color:#00000094;--padding-top:0%;--padding-bottom:0%;--padding-left:4%;--padding-right:04%;--z-index:99;}.elementor-207 .elementor-element.elementor-element-59010ff3:not(.elementor-motion-effects-element-type-background), .elementor-207 .elementor-element.elementor-element-59010ff3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B0B0B;}.elementor-207 .elementor-element.elementor-element-04e613e{--display:flex;}.elementor-207 .elementor-element.elementor-element-1487496{--display:flex;}.elementor-207 .elementor-element.elementor-element-85e793d{--display:flex;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-207 .elementor-element.elementor-element-4268315 .elementor-menu-toggle{margin-right:auto;}.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--main .elementor-item:focus{color:#58A6FF;fill:#58A6FF;}.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#58A6FF;}.elementor-207 .elementor-element.elementor-element-4268315 .e--pointer-framed .elementor-item:before,
					.elementor-207 .elementor-element.elementor-element-4268315 .e--pointer-framed .elementor-item:after{border-color:#58A6FF;}.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#58A6FF;}.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--dropdown a:hover,
					.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--dropdown a:focus,
					.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--dropdown a.highlighted,
					.elementor-207 .elementor-element.elementor-element-4268315 .elementor-menu-toggle:hover,
					.elementor-207 .elementor-element.elementor-element-4268315 .elementor-menu-toggle:focus{color:#58A6FF;}.elementor-207 .elementor-element.elementor-element-4268315 .elementor-nav-menu--dropdown a.elementor-item-active{color:#58A6FF;}.elementor-207 .elementor-element.elementor-element-4268315 div.elementor-menu-toggle{color:#FFFFFF;}.elementor-207 .elementor-element.elementor-element-4268315 div.elementor-menu-toggle svg{fill:#FFFFFF;}.elementor-207 .elementor-element.elementor-element-26c322dc{--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;--justify-content:flex-end;--gap:25px 25px;--row-gap:25px;--column-gap:25px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:10px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.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-207 .elementor-element.elementor-element-59010ff3{--gap:2% 2%;--row-gap:2%;--column-gap:2%;--padding-top:0%;--padding-bottom:0%;--padding-left:3%;--padding-right:3%;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}}@media(max-width:767px){.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-207 .elementor-element.elementor-element-26c322dc{--width:50%;}}@media(min-width:768px){.elementor-207 .elementor-element.elementor-element-26c322dc{--width:270px;}}@media(max-width:1024px) and (min-width:768px){.elementor-207 .elementor-element.elementor-element-26c322dc{--width:35%;}}/* Start custom CSS for container, class: .elementor-element-59010ff3 *//* =============================================
   1. EL PADRE (smart-header) - ESTABLE
   ============================================= */

.elementor-207 .elementor-element.elementor-element-59010ff3.smart-header {
    background-color:  rgba(0, 0, 0, 0.98) !important;
    width: 100% !important;
    max-width: 100% !important;
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 9999;
    min-height: 85px !important;
    transition: transform 0.4s cubic-bezier(0.3, 0, 0.2, 1) !important;
}

/* Animación estable */
.elementor-207 .elementor-element.elementor-element-59010ff3.smart-header.hide-header {
    transform: translateY(-100%) !important;
}

/* =============================================
   2. EL MOTOR DE COORDENADAS X (header-main-grid)
   ============================================= */

.header-main-grid {
    position: relative !important; /* Necesario para que los hijos usen coordenadas */
    width: 100% !important;
    max-width: 100% !important;
    min-height: 105px !important;
    display: block !important; /* Anulamos flex para usar coordenadas X */
}

/* --- COORDENADA X: IZQUIERDA (Logo) --- */
.col-logo { 
    position: absolute !important;
    left: 0.1% !important; /* Coordenada X fija desde la izquierda */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Centrado vertical */
    width: auto !important;
}

/* --- COORDENADA X: CENTRO (Menú) --- */
.col-icono { 
    position: absolute !important;
    left: 50% !important; /* Coordenada X al centro matemático del monitor */
    top: 50% !important;
    /* TranslateX(-50%) compensa el ancho del propio menú para centrarlo */
    transform: translate(-50%, -50%) !important; 
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
}

/* --- COORDENADA X: DERECHA (Botón) --- */
.col-boton { 
    position: absolute !important;
    right: .01% !important; /* Coordenada X fija desde la derecha */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Centrado vertical */
    width: auto !important;
}

/* =============================================
   3. ESTILOS DE ELEMENTOS - ESTABLE
   ============================================= */

.header-logo-svg {
    height: 85px !important;
    width: 200px !important;
}

.icono-centro .elementor-icon-list-items {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
}

.btn .elementor-button {
    border-radius: 100px !important;
    padding: 10px 24px !important;
    font-family: "Satoshi", sans-serif !important;
    font-weight: 700 !important;
    background: #4A8DFE !important;
    color: #FFFFFF !important;
}

/* =============================================
   4. RESPONSIVE - MÓVIL
   ============================================= */

@media (max-width: 1024px) {

    /* 1. LIMPIEZA: Ocultar botón azul y el menú de escritorio */
    .col-boton,
    .nav-sarh-studio .elementor-nav-menu--main {
        display: none !important;
    }

    /* 2. HEADER: Logo centrado, hamburguesa derecha */
    .header-main-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 20px !important;
        
    }

    .header-main-grid.e-con > .col-logo,
    .col-logo {
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        margin-right: auto !important;
        scale: .5;
    }

    .col-icono {
        position: static !important;
        transform: none !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .col-logo { order: 1 !important; }
    .col-icono { order: 2 !important; }

    /* 3. PANEL LATERAL (EL CAJÓN) */
    .nav-sarh-studio .elementor-nav-menu--dropdown {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 70% !important;
        height: 100vh !important;
        background-color:  rgba(0, 0, 0, 0.98) !important;
        z-index: 9998 !important; /* Un nivel abajo del botón */
        padding: 100px 20px 20px 20px !important;
        border-right: 1px solid rgba(255,255,255,0.1);
    }

    /* 4. EL BOTÓN (HAMBURGUESA Y X) */
    .nav-sarh-studio .elementor-menu-toggle {
        display: flex !important;
        z-index: 9999 !important;
        position: relative !important;
    }

    /* Cuando el menú se abre, la "X" se queda en su sitio o se ajusta sutilmente */
    .nav-sarh-studio .elementor-menu-toggle.elementor-active {
        position: fixed !important;
        right: 32% !important; /* Se pega al borde del panel de 70% */
        top: 25px !important;
    }

    /* 5. SUBMENÚ SOLUCIONES (Vertical e indentado) */
    .nav-sarh-studio .elementor-nav-menu--dropdown .sub-menu {
        position: relative !important;
        top: 0 !important;
        background: transparent !important;
        display: none; /* Elementor lo maneja con clic */
        padding-left: 20px !important;
    }

    .nav-sarh-studio .elementor-nav-menu--dropdown .elementor-has-submenu.elementor-active > .sub-menu {
        display: block !important;
    }

    /* Estilos de los links dentro del panel */
    /* OCULTAR menú desktop — específico al --main solamente */
    .nav-sarh-studio .elementor-nav-menu--main,
    .nav-sarh-studio .elementor-nav-menu--main * {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .nav-sarh-studio .elementor-nav-menu--dropdown .elementor-item {
        color: #FFFFFF !important;
        font-size: 18px !important;
        padding: 15px 0 !important;
        display: block !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        opacity: 1 !important;
    }

    .nav-sarh-studio .elementor-nav-menu--dropdown,
    .nav-sarh-studio .elementor-nav-menu--dropdown *,
    .nav-sarh-studio .elementor-menu-toggle,
    .nav-sarh-studio .elementor-menu-toggle * {
        opacity: 1 !important;
    }

    /* PROBLEMA 3: ángulo ▼ a la derecha de Soluciones */
    .nav-sarh-studio .elementor-nav-menu--dropdown a.elementor-item.has-submenu {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .nav-sarh-studio .elementor-nav-menu--dropdown .sub-arrow {
        position: static !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .nav-sarh-studio .elementor-nav-menu--dropdown .sub-arrow svg {
        fill: #FFFFFF !important;
        color: #FFFFFF !important;
    }

    /* PROBLEMA 4: subitems en blanco, sin preselección */
    .nav-sarh-studio .elementor-nav-menu--dropdown .elementor-sub-item,
    .nav-sarh-studio .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active,
    .nav-sarh-studio .elementor-nav-menu--dropdown li.current-menu-item > .elementor-sub-item,
    .nav-sarh-studio .elementor-nav-menu--dropdown li.current_page_item > .elementor-sub-item {
        color: #FFFFFF !important;
        background-color: transparent !important;
        opacity: 1 !important;
    }

    .nav-sarh-studio .elementor-nav-menu--dropdown .elementor-sub-item:active {
        color: #58A6FF !important;
    }

    /* Compensar el header fijo para que no tape el hero */
    .elementor-location-header + * {
        margin-top: 80px !important;
    }
}

/* =============================================
   5. MENU WP - AJUSTES FINOS (COLOR #58A6FF)
   ============================================= */

/* 1. VISIBILIDAD Y ESTRUCTURA BASE */
.nav-sarh-studio {
    width: auto !important;
    display: block !important;
}

.nav-sarh-studio .elementor-nav-menu--main {
    display: flex !important;
    gap: 15px !important;
}

/* 2. OPCIONES PRINCIPALES (Inicio / Soluciones) */
.nav-sarh-studio .elementor-nav-menu--main .elementor-item {
    font-family: "Satoshi", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #FFFFFF !important;
    padding: 10px 15px !important;
    transition: all 0.3s ease-in-out !important;
}

/* Hover en texto principal y color del UNDERLINE nativo */
.nav-sarh-studio .elementor-nav-menu--main .elementor-item:hover,
.nav-sarh-studio .elementor-nav-menu--main .elementor-item.elementor-item-active {
    color: #58A6FF !important;
}

/* Cambiar el color de la línea (pointer) nativa de Elementor */
.nav-sarh-studio .elementor-nav-menu--main .elementor-item:before,
.nav-sarh-studio .elementor-nav-menu--main .elementor-item:after {
    background-color: #58A6FF !important;
}

/* 3. CUADRO DESPLEGABLE (SUB-MENU) */
.nav-sarh-studio .sub-menu {
    background-color:  rgba(0, 0, 0, 0.98) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    padding: 10px 0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    margin-top: 10px !important;
}

/* Texto de subelementos (Space / Agency) */
.nav-sarh-studio .sub-menu .elementor-item {
    font-size: 11px !important;
    padding: 12px 25px !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

/* Hover específico en subelementos: Cambio de color de texto */
.nav-sarh-studio .sub-menu .elementor-item:hover {
    color: #58A6FF !important;
    background-color: rgba(88, 166, 255, 0.05) !important; 
    padding-left: 30px !important; 
}

/* 4. OCULTAR CONTACTO EN DESKTOP */
@media (min-width: 1025px) {
    .nav-sarh-studio .elementor-nav-menu--main > li:last-child {
        display: none !important;
    }
}




/* =============================================
   6. COMPENSACIÓN DEL HEADER FIJO (DESKTOP)
   ============================================= */
@media (min-width: 1025px) {
    /* Empujar el Hero hacia abajo para que el header flotante no lo tape */
    .elementor-location-header + * {
        margin-top: 105px !important; /* Equivalente al min-height de tu header-main-grid */
    }
}/* End custom CSS */