/*
 * Astra Child CCL - Custom Header Styles
 * Collaborators: Angie Palacios & Gemini CLI
 */

/* TOTAL RESET FOR ASTRA WRAPPERS ON ALL SCREENS */
body .site-header,
body .main-header-bar-wrap,
body .main-header-bar,
body .ast-main-header-wrap,
body #masthead {
    display: none !important;
}

/* CUSTOM HEADER BASE */
body #pxl-header-ccl {
    width: 100%;
    background-color: var(--color-primary) !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Compensar el contenido para que no quede debajo del header fijo */
body #page {
    padding-top: 110px !important;
    /* Altura del header desktop */
}

@media screen and (max-width: 1200px) {
    body #page {
        padding-top: 70px !important;
        /* Altura del header mobile */
    }
}

/* Offset global para la barra de admin de WordPress */
body.admin-bar #pxl-header-ccl {
    top: 32px !important;
}

/* OJO: 782px aca es el breakpoint NATIVO de WordPress donde la barra de
   admin pasa de 32px a 46px de alto (#wpadminbar del core) - no cambiar
   este valor junto con el resto del sitio, es fijo por WP mismo. */
@media screen and (max-width: 782px) {
    body.admin-bar #pxl-header-ccl {
        top: 46px !important;
    }

    body.admin-bar.pxl-header-scrolled #pxl-header-ccl {
        top: 0 !important;
    }
}



/* DESKTOP LAYOUT */
@media screen and (min-width: 1201px) {
    body #pxl-header-ccl {
        min-height: 110px;
    }

    body .pxl-header-logo-section {
        background-color: var(--color-primary-dark) !important;
        padding: 10px 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 250px;
    }

    body .pxl-header-logo-section img {
        max-height: 40px;
    }

    body .pxl-header-content-section {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    body .pxl-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Por defecto para la fila inferior */
        padding: 0 40px;
        height: 55px;
        width: 100%;
    }

    body .pxl-header-row-1 {
        border-bottom: 1px solid #11447D;
        justify-content: flex-end !important;
        /* Solo la fila superior a la derecha */
    }

    /* Nav & Links Reset */
    body #pxl-header-ccl ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
    }

    /* Dropdown Multi-level Logic */
    body #pxl-header-ccl li {
        position: relative !important;
        margin: 0 14.5px !important;
        list-style: none !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Sub-menu: hidden by default on all desktop sizes */
    body #pxl-header-ccl .sub-menu {
        position: absolute;
        top: calc(100% + 30px);
        left: 0;
        background-color: var(--color-secondary) !important;
        min-width: 305px;
        flex-direction: column !important;
        padding: 10px 0 !important;
        box-shadow: none !important;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        transform: translateY(10px);
        z-index: 999;
        max-width:450px;
    }
}

/* ALL DESKTOP: interactive menu behaviour (dropdowns, hovers, buttons) */
@media screen and (min-width: 1201px) {

    /* Puente invisible para hover - Ajustado para el nuevo gap */
    body #pxl-header-ccl .sub-menu::before {
        content: '';
        position: absolute;
        top: -35px;
        left: 0;
        width: 100%;
        height: 40px;
        background: transparent;
    }

    /* Second level (to the side) */
    body #pxl-header-ccl .sub-menu .sub-menu {
        top: -10px !important;
        left: 100% !important;
        /* Pegado al padre */
        transform: translateX(0) translateY(0) !important;
    }

    /* Dentro de "Transparencia" (menu "Nosotros"), el nieto "Repositorio de
       Integridad" (hijo de "Comision de Integridad") se corta contra el
       borde de la ventana si abre hacia la derecha. Solo ese nivel (el
       nieto) se abre hacia la izquierda; el hijo directo de Transparencia
       sigue abriendo normal hacia la derecha. */
    body #pxl-header-ccl .menu-item-297900 > .sub-menu .sub-menu {
        left: auto !important;
        right: 100% !important;
    }

    body #pxl-header-ccl li:hover>.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    body #pxl-header-ccl .sub-menu li:hover>.sub-menu {
        transform: translateX(0) !important;
    }

    body #pxl-header-ccl .sub-menu li {
        margin: 0 !important;
        width: 100%;
    }

    body #pxl-header-ccl .sub-menu a {
        padding: 9px 25px !important;
        /* 15% más denso (de 12px a 9px) */
        width: 100%;
        font-size: 13px !important;
        border-bottom: none !important;
        display: block !important;
        transition: all 0.3s ease !important;
        position: relative;
        text-decoration: none !important;
        white-space: break-spaces;
    }

    /* Decorative dash on hover - Enlarged to ~20px */
    body #pxl-header-ccl .sub-menu a::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 50%;
        width: 20px;
        height: 1px;
        background-color: var(--color-white);
        opacity: 0;
        transition: all 0.3s ease;
        transform: translateY(-50%);
        z-index: 1;
    }

    body #pxl-header-ccl .sub-menu a:hover::before {
        opacity: 1;
        left: 12px;
    }

    /* Sub-menu text shift on hover */
    body #pxl-header-ccl .sub-menu a:hover {
        padding-left: 45px !important;
        background-color: transparent !important;
        text-decoration: none !important;
    }

    body #pxl-header-ccl .sub-menu li:last-child a {
        border-bottom: none !important;
    }

    /* Indicators for children - STABILIZED */
    body #pxl-header-ccl li.menu-item-has-children>a::after {
        content: '\f107';
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        margin-left: 8px;
        font-size: 10px;
        display: inline-block;
        transition: transform 0.3s ease;
    }

    body #pxl-header-ccl .sub-menu li.menu-item-has-children>a::after {
        content: '\f105';
        position: absolute;
        /* Posición absoluta para que no se mueva */
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
        float: none;
    }

    body #pxl-header-ccl li:hover>a::after {
        transform: rotate(180deg);
    }

    body #pxl-header-ccl .sub-menu li:hover>a::after {
        transform: translateY(-50%) translateX(3px) !important;
        /* Mantiene el centrado vertical */
    }

    body #pxl-header-ccl a {
        color: #ffffff;
        text-decoration: none !important;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        position: relative;
        transition: var(--ccl-transition);
        display: inline-block;
    }

    /* Hover Effect: ONLY FOR TOP-LEVEL NAV LINKS */
    body .pxl-header-nav>ul>li>a::before {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--color-white);
        transition: width 0.3s ease;
    }

    body .pxl-header-nav>ul>li>a:hover::before {
        width: 100% !important;
    }

    /* Kill underline for Logo and Buttons */
    body .pxl-header-logo-section a::before,
    body .pxl-btn::before {
        display: none !important;
    }

    body .pxl-header-buttons {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    body .pxl-btn {
        padding: 0 25px !important;
        height: 32px !important;
        background: transparent;
        color: var(--color-white) !important;
        border: 1px solid var(--color-secondary) !important;
        border-radius: 50px !important;
        font-size: 10px !important;
        line-height: 31px !important;
        letter-spacing: 1.5px !important;
        font-weight: 500 !important;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        text-decoration: none !important;
        transition: var(--ccl-transition) !important;
        position: relative;
        overflow: hidden;
    }

    body .pxl-btn:hover {
        filter: brightness(1.2);
    }

    body .pxl-hide-xl {
        display: none !important;
    }

    .pxl-search-icon-wrapper {

        margin-right: 10px;
    }

    .pxl-header-row-landing .pxl-search-icon-wrapper {
        margin-right: 5px;

    }

}

/* WIDE DESKTOP: mas espacio y texto mas grande desde 1501px */
@media screen and (min-width: 1501px) {
    body #pxl-header-ccl li {
        margin: 0 20px !important;
    }

    /* Especificidad reforzada (.pxl-menu-primary) para que gane sin depender
       del orden frente a "body #pxl-header-ccl a" */
    body #pxl-header-ccl .pxl-menu-primary > li > a {
        font-size: 15px;
    }
    
    body #pxl-header-ccl a span{
        font-size:12px;
    }
}

/* SEARCH ICON STYLES */
.pxl-search-icon-wrapper {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    /* Asegurado círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 1200px) {
    .pxl-search-icon-wrapper {
        margin-right: 0 !important;
    }
}

.pxl-search-icon-wrapper:hover {
    background: var(--color-white) !important;
    /* Fondo blanco en hover */
}

.pxl-search-icon-wrapper:hover i {
    color: var(--color-primary-dark) !important;
    /* Icono oscuro en hover */
}

.pxl-search-icon-wrapper i {
    color: var(--color-white);
    font-size: 14px;
    transition: all 0.3s ease;
}

/* SEARCH OVERLAY STYLES */
.pxl-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 28, 44, 0.85);
    /* Bajado a 0.85 para efecto de opacidad */
    z-index: 10002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform: translateY(-100%);
    backdrop-filter: blur(15px);
    /* Desenfoque más intenso */
}

.pxl-search-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pxl-search-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 30px;
    /* Reducido para mejor control */
    display: flex;
    align-items: center;
    /* Alineación vertical perfecta */
    justify-content: space-between;
    box-sizing: border-box;
}

.pxl-search-logo img {
    max-height: 40px;
    width: auto;
    display: block;
    /* Evita espacios extra */
}

/* Close Icon Animation: X to - */
.pxl-search-close {
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pxl-search-close span {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    border-radius: 10px;
}

/* DEFAULT STATE: Minus (horizontal line) */
.pxl-search-close span:nth-child(1) {
    transform: rotate(0deg);
}

.pxl-search-close span:nth-child(2) {
    transform: rotate(0deg);
    opacity: 0;
}

/* ACTIVE STATE (Overlay open): X */
.pxl-search-overlay.active .pxl-search-close span:nth-child(1) {
    transform: rotate(45deg);
}

.pxl-search-overlay.active .pxl-search-close span:nth-child(2) {
    transform: rotate(-45deg);
    opacity: 1;
}

/* Offset for overlays when Admin Bar is visible */
body.admin-bar .pxl-header-menu-mobile,
body.admin-bar .pxl-search-overlay {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
}

/* 782px = breakpoint nativo de WP donde cambia el alto de la admin bar */
@media screen and (max-width: 782px) {

    body.admin-bar .pxl-header-menu-mobile,
    body.admin-bar .pxl-search-overlay {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
    }
}

.pxl-search-form-container {
    width: 100%;
    max-width: 800px;
    padding: 0 30px;
}

.pxl-search-form {
    position: relative;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    /* Borde claro */
    display: flex;
    align-items: center;
}

.pxl-search-field {
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: var(--color-white) !important;
    /* Texto blanco */
    font-size: 36px !important;
    /* Reducido un 20% de 45px */
    font-weight: 500 !important;
    padding: 25px 0 !important;
    outline: none !important;
    line-height: 1.2 !important;
}

.pxl-search-field::placeholder {
    color: var(--color-white) !important;
    /* Placeholder blanco */
    opacity: 0.5;
    font-size: 36px !important;
    /* Reducido un 20% de 45px */
    font-weight: 500 !important;
}

.pxl-search-submit {
    background: transparent;
    border: none;
    color: var(--color-white) !important;
    /* Icono blanco */
    font-size: 36px !important;
    /* Reducido un 20% de 45px */
    cursor: pointer;
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.pxl-search-submit:hover,
.pxl-search-submit:focus {
    background: transparent !important;
    outline: none;
}

/* MOBILE SEARCH ADJUSTMENTS */
@media screen and (max-width: 1200px) {
    .pxl-search-mobile {
        margin-right: 20px;
    }

    .pxl-search-field {
        font-size: 28px;
    }
}

/* MOBILE LAYOUT */
@media screen and (max-width: 1200px) {
    body .pxl-hide-lg {
        display: none !important;
    }

    body .pxl-hide-xl {
        display: block !important;
    }

    body #pxl-header-ccl {
        height: 70px !important;
        background-color: var(--color-primary-dark) !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    /* Landing/Transparent Support for Mobile Header Bar */
    body.pxl-header-landing #pxl-header-ccl,
    body.ast-theme-transparent-header #pxl-header-ccl {
        background-color: transparent !important;
        background: transparent !important;
    }

    /* UNIFIED MOBILE NAVIGATION CONTAINER (Normal & Landing) */
    body #pxl-nav-mobile,
    body .pxl-header-buttons,
    body.pxl-header-landing .pxl-header-row-landing {
        display: flex !important;
        width: auto !important;
        height: 40px !important;
        justify-content: flex-end !important;
        align-items: center !important;
        background: transparent !important;
        gap: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-wrap: nowrap !important;
    }

    /* Ajuste especial para la fila landing en mobile */
    body.pxl-header-landing .pxl-header-row-landing {
        height: 70px !important;
        /* Altura del header mobile */
    }

    /* UNIFIED ICONS (Search, Lang, Hamburger) */
    body .pxl-search-mobile,
    body.pxl-header-landing .pxl-search-toggle {
        width: 35px !important;
        height: 35px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .pxl-nav-mobile-button {
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        cursor: pointer !important;
        position: relative !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .pxl-nav-mobile-button span {
        display: block !important;
        height: 2px !important;
        width: 100% !important;
        background-color: var(--color-white) !important;
        border-radius: 2px !important;
        position: absolute;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        right: 0 !important;
        left: auto !important;
    }

    body .pxl-nav-mobile-button span:nth-child(1) {
        top: 8px;
        width: 30px !important;
    }

    body .pxl-nav-mobile-button span:nth-child(2) {
        top: 15px;
        width: 18px !important;
    }

    body .pxl-nav-mobile-button span:nth-child(3) {
        top: 22px;
        width: 24px !important;
    }

    /* UNIFIED LANGUAGE SWITCHER (Circle Style) */
    body .pxl-lang-mobile,
    body.pxl-header-landing .ccl-lang-switcher {
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    body .pxl-lang-mobile a,
    body .pxl-header-landing .ccl-lang-switcher a {
        width: 35px !important;
        height: 35px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: none !important;
        margin-left: 0 !important;
    }

    body .pxl-lang-mobile span,
    body .pxl-header-landing .ccl-lang-switcher span {
        display: none !important;
    }

    body .ccl-flag-icon {
        width: 18px !important;
        height: 12px !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* ONLY apply background color if NOT in landing/transparent mode */
    body.pxl-header-scrolled:not(.pxl-header-landing):not(.ast-theme-transparent-header) #pxl-header-ccl {
        background-color: var(--color-primary-dark) !important;
    }

    body .pxl-header-logo-section {
        display: flex !important;
        background: transparent !important;
        padding: 0 !important;
        width: auto !important;
    }

    body .pxl-header-logo-section img {
        max-height: 40px !important;
        width: auto !important;
    }
}

/* MOBILE MENU OVERLAY */
body .pxl-header-menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    background: var(--color-primary-dark);
    z-index: 10000;
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
        visibility 0s linear 0.4s;
    padding: 20px 40px 40px;
    visibility: hidden;
    overflow-y: auto;
}

body .pxl-header-menu-mobile.active {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
}

/* Header in Mobile Menu (Logo left, X right) */
body .pxl-header-menu-mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    width: 100%;
}

body .pxl-logo-mobile {
    margin: 0;
    text-align: left;
}

body .pxl-logo-mobile img {
    max-height: 40px;
    width: auto;
}

body .pxl-menu-close {
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body .pxl-menu-close span {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

body .pxl-menu-close span:nth-child(1) {
    transform: rotate(45deg);
}

body .pxl-menu-close span:nth-child(2) {
    transform: rotate(-45deg);
}

body .pxl-header-menu-mobile ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body .pxl-header-menu-mobile li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .pxl-header-menu-mobile .sub-menu {
    display: none;
    padding-left: 15px !important;
    background: transparent !important;
    /* Mismo que el padre */
    margin-bottom: 0 !important;
}

body .pxl-header-menu-mobile a {
    color: var(--color-white) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 !important;
    font-size: 13px !important;
    /* Similar a desktop */
    font-weight: 400 !important;
    text-transform: none;
    /* Mantener natural */
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* Borde ligero global */
    transition: all 0.3s ease;
}

/* Ocultar Spanish/English si aparecen */
body .pxl-header-menu-mobile li[class*="spanish"],
body .pxl-header-menu-mobile li[class*="english"],
body .pxl-header-menu-mobile .ccl-lang-switcher,
body .pxl-header-menu-mobile .pxl-lang-mobile,
body .pxl-header-ccl li[class*="spanish"],
body .pxl-header-ccl li[class*="english"] {
    display: none !important;
}

/* Sub-menu items specific style */
body .pxl-header-menu-mobile .sub-menu a {
    font-size: 12px !important;
    color: var(--color-white) !important;
    opacity: 1 !important;
    /* Blanco total según solicitud */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* Borde más ligero */
}

/* Mobile Buttons Section - Harmonized with Desktop */
body .pxl-mobile-buttons {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
}

body .pxl-header-menu-mobile .pxl-btn {
    padding: 0 25px !important;
    height: 40px !important;
    /* Un poco más alto para toque móvil */
    border-radius: 50px !important;
    font-size: 11px !important;
    line-height: 38px !important;
    letter-spacing: 1.5px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    width: 100%;
    /* Botones de ancho completo en móvil */
}

body .pxl-header-menu-mobile .pxl-btn i {
    margin-right: 10px;
    font-size: 14px;
}

/* Arrow for sub-menus */
.pxl-menu-toggle-arrow {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    /* Sin fondo según solicitud */
    border-radius: 0;
    transition: all 0.3s ease;
}


/* Scroll Lock when menu/search is active */
html.pxl-menu-active,
body.pxl-menu-active,
html.pxl-search-active,
body.pxl-search-active {
    overflow: hidden !important;
    height: 100% !important;
}

/* --- CUSTOM LANGUAGE SWITCHER --- */
/* Ocultar selectores por defecto de TranslatePress */
.trp-language-switcher-container,
.trp-language-switcher,
#trp-floater-ls {
    display: none !important;
}

body .ccl-lang-switcher a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.1) !important;
    padding: 6px 15px !important;
    border-radius: 30px !important;
    transition: var(--ccl-transition);
    border: none !important;
    height: 32px !important;
    align-self: center;
}

body .ccl-lang-switcher a:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--color-white) !important;
}

body .ccl-lang-switcher i {
    font-size: 14px;
    color: var(--color-warning);
}

body .ccl-flag-icon {
    width: 20px !important;
    height: 15px !important;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body .ccl-lang-switcher span {
    font-weight: 700;
    font-size: 11px;
    color: var(--color-white);
    letter-spacing: 0.5px;
}

/* Mobile Adjustments */
@media (max-width: 1200px) {
    /* El selector se mantiene visible para modo landing */



    body .pxl-lang-mobile {
        display: flex !important;
        margin-right: 0;
    }

    body .pxl-lang-mobile a {
        width: 35px;
        height: 35px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        border: none !important;
        margin: 0 !important;
    }

    body .pxl-lang-mobile .ccl-flag-icon {
        width: 18px !important;
        height: 12px !important;
        box-shadow: none;
    }

    body .pxl-lang-mobile span {
        display: none !important;
        /* Ocultar texto ES/EN en circulo mobile */
    }
}

@media (min-width: 1201px) {
    body .pxl-lang-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   TRANSPARENT HEADER & LANDING MENU (ISO)
   ========================================================================== */

/* 1. Reset Global para Landing Page (Superposición total) */
body.pxl-header-landing #page,
body.ast-theme-transparent-header #page {
    padding-top: 0 !important;
}

/* Evitar que Astra inyecte márgenes superiores por JavaScript */
body.pxl-header-landing,
body.ast-theme-transparent-header {
    margin-top: 0 !important;
}

/* Asegurar que el header no reserve espacio y sea estático (no baje) */
body.pxl-header-landing #pxl-header-ccl,
body.ast-theme-transparent-header #pxl-header-ccl {
    position: absolute !important;
    /* Estático en la cima, no baja */
    top: 0 !important;
    left: 0 !important;
}

/* 2. Base del Header en modo Landing (Desktop) */
@media screen and (min-width: 1201px) {

    /* Fondo transparente inicial TOTAL (Logo y Header) */
    body.pxl-header-landing:not(.pxl-header-scrolled) #pxl-header-ccl,
    body.pxl-header-landing:not(.pxl-header-scrolled) .pxl-header-logo-section,
    body.pxl-header-landing:not(.pxl-header-scrolled) .pxl-header-content-section,
    body.ast-theme-transparent-header:not(.pxl-header-scrolled) #pxl-header-ccl,
    body.ast-theme-transparent-header:not(.pxl-header-scrolled) .pxl-header-logo-section,
    body.ast-theme-transparent-header:not(.pxl-header-scrolled) .pxl-header-content-section {
        background-color: transparent !important;
        background: transparent !important;
        border: none !important;
    }

    /* Quitar bordes y sombras en landing inicial */
    .pxl-header-landing:not(.pxl-header-scrolled) {
        box-shadow: none !important;
    }

    .pxl-header-landing .pxl-header-row-1,
    .pxl-header-landing .pxl-header-row-2 {
        border-bottom: none !important;
        background: transparent !important;
    }

    /* Estructura de fila única para landing */
    .pxl-header-landing .pxl-header-row-landing {
        height: 110px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0 40px !important;
    }

    .pxl-header-landing .pxl-header-row-landing .pxl-header-buttons {
        gap: 15px !important;
        align-items: center !important;
        display: flex !important;
    }

    .pxl-header-landing .pxl-header-row-landing .pxl-hide-lg {
        display: flex !important;
        gap: 15px !important;
        /* Sincronizado con mobile gap */
        align-items: center;
    }

    .pxl-header-landing .pxl-header-row-landing .pxl-btn {
        height: 40px !important;
        line-height: 38px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
    }

    /* Mostrar Toggle (Hamburger) SOLO en landing */
    .pxl-header-landing .pxl-nav-mobile-button {
        display: flex !important;
        margin-left: 0;
        position: relative;
        width: 30px;
        height: 30px;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
    }

    .pxl-header-landing .pxl-nav-mobile-button span {
        display: block;
        height: 2px;
        background-color: var(--color-white);
        border-radius: 2px;
        position: absolute;
        right: 0;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .pxl-header-landing .pxl-nav-mobile-button span:nth-child(1) {
        top: 8px;
        width: 30px !important;
    }

    .pxl-header-landing .pxl-nav-mobile-button span:nth-child(2) {
        top: 15px;
        width: 18px !important;
    }

    .pxl-header-landing .pxl-nav-mobile-button span:nth-child(3) {
        top: 22px;
        width: 24px !important;
    }
}

/* 3. Sticky Header (Solo para Landing Desktop) */
@media screen and (min-width: 1201px) {
    body.pxl-header-scrolled .pxl-header-landing {
        background-color: var(--color-primary-dark) !important;
        height: 80px !important;
    }

    body.pxl-header-scrolled .pxl-header-landing .pxl-header-logo-section {
        min-height: 80px !important;
        background-color: var(--color-primary-dark) !important;
    }

    body.pxl-header-scrolled .pxl-header-landing .pxl-header-row-landing {
        height: 80px !important;
    }
}

/* 4. Idioma (Landing Desktop) */
@media screen and (min-width: 1201px) {
    .pxl-header-row-landing .ccl-lang-switcher {
        display: flex !important;
    }

    .pxl-header-row-landing .ccl-lang-switcher a {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: var(--color-white) !important;
        border: none !important;
        padding: 6px 15px !important;
        border-radius: 30px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center;
        gap: 8px;
        text-decoration: none !important;
    }

    .pxl-header-row-landing .ccl-lang-switcher a:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

    .pxl-header-row-landing .ccl-lang-switcher span {
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.5px;
    }
}

/* Mobile Menu Backdrop */
.pxl-header-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25) !important; /* Lighter overlay */
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* More blur for a "frosted" glass effect */
}

.pxl-header-menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* --- TRANSPARENT HEADER MENU SPECIFIC OVERRIDES --- */
body.ast-theme-transparent-header .pxl-header-menu-mobile,
body.pxl-header-landing .pxl-header-menu-mobile {
    background: #ffffff !important;
    max-width: 300px !important;
    box-shadow: 10px 0 50px rgba(0,0,0,0.1);
}

body.ast-theme-transparent-header .pxl-header-menu-mobile a,
body.pxl-header-landing .pxl-header-menu-mobile a {
    color: var(--color-primary) !important;
    border-bottom: 1px solid rgba(9, 36, 66, 0.08) !important;
}

body.ast-theme-transparent-header .pxl-header-menu-mobile .sub-menu a,
body.pxl-header-landing .pxl-header-menu-mobile .sub-menu a {
    color: var(--color-primary) !important;
    opacity: 0.8 !important;
}

body.ast-theme-transparent-header .pxl-header-menu-mobile .pxl-menu-close span,
body.pxl-header-landing .pxl-header-menu-mobile .pxl-menu-close span {
    background-color: var(--color-primary) !important;
}

body.ast-theme-transparent-header .pxl-header-menu-mobile .pxl-menu-toggle-arrow i,
body.pxl-header-landing .pxl-header-menu-mobile .pxl-menu-toggle-arrow i {
    color: var(--color-primary) !important;
}

body.ast-theme-transparent-header .pxl-header-menu-mobile .pxl-logo-mobile,
body.pxl-header-landing .pxl-header-menu-mobile .pxl-logo-mobile {
    display: none !important; /* Hide logo as requested */
}

body.ast-theme-transparent-header .pxl-header-menu-mobile .pxl-header-menu-mobile-top,
body.pxl-header-landing .pxl-header-menu-mobile .pxl-header-menu-mobile-top {
    justify-content: flex-end !important; /* Align close button to the right */
}

body.ast-theme-transparent-header .pxl-header-menu-mobile .pxl-btn,
body.pxl-header-landing .pxl-header-menu-mobile .pxl-btn {
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: transparent !important;
}

body.ast-theme-transparent-header .pxl-header-menu-mobile .pxl-btn *,
body.pxl-header-landing .pxl-header-menu-mobile .pxl-btn * {
    color: inherit !important;
    fill: currentColor !important;
}

body.ast-theme-transparent-header .pxl-header-menu-mobile .pxl-mobile-buttons,
body.pxl-header-landing .pxl-header-menu-mobile .pxl-mobile-buttons {
    border-top: 1px solid rgba(9, 36, 66, 0.1);
}

/* Page content effect when menu is open */
body.pxl-menu-active #content,
body.pxl-menu-active #pxl-footer-ccl {
    filter: none !important; /* Remove blur/darken effects */
    transition: none !important;
}

body:not(.pxl-menu-active) #content,
body:not(.pxl-menu-active) #pxl-footer-ccl {
    filter: none !important;
    transition: none !important;
}