header {
    background-color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    position: relative; /* Asegura que el z-index funcione correctamente si hay otros elementos */
    z-index: 999; /* Un z-index alto para que el header esté por encima del contenido normal */
}

.header__container {
    display: flex;
    width: var(--container-mobile); /* Esto es un ancho fijo, considera usar porcentajes o max-width para responsividad */
    height: auto;
    justify-content: space-between;
    align-items: center;
}

.header__logo {
    width: 140px;
    height: auto; /* Asegura que la altura se ajuste automáticamente */
    display: block; /* Elimina espacio extra debajo de la imagen si el logo es un img */
}

.header__logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Estilos del Menú Móvil (header__menu) --- */
.header__menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* height: 100vh; */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo semi-transparente oscuro */
    z-index: 1000; /* Debe estar debajo del botón pero encima del resto del contenido */
    display: flex; /* Para organizar menu__left y menu__right */
    visibility: hidden; /* Oculto por defecto */
    opacity: 0; /* Opacidad para la animación */
    transform: translateX(100%); /* Sale de la derecha */
    transition: visibility 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
    /* overflow: hidden;  Para permitir scroll si el contenido es muy largo */
}

/* Estado "abierto" del menú */
.header__menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0); /* Se desliza a la vista */
}

.menu__left {
    flex: 0 0 12%; /* Ocupa el 30% del ancho, ajusta según necesites */
    background-color: var(--primary); /* Ejemplo de color, ajusta a tus variables */
    /* Otros estilos para la sección izquierda, si quieres un logo o algo aquí */
    display: block;
    height: 100%;
}

.menu__right {
    flex: 1; /* Ocupa el espacio restante */
    background-color: var(--fifth); /* Ejemplo de color, ajusta a tus variables */
    padding: 40px 20px; /* Padding interno */
    /* overflow-y: auto;  ¡Solo esta sección tendrá scroll en móvil! */
    height: 100%; /* Ocupa todo el alto disponible */
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    justify-content: space-between;
}

.right--transparence {
    height: auto;
    /* background-color: purple; */
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;
    align-items: center;
}

.desktop--trans {
    display: none;
}

.right--transparence a {
    width: 7rem;
}

.right--transparence a  img {
    width: 100%;
    height: auto;
}

.menuRight__container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre los ítems principales del menú */
    overflow-y: visible;
    height: auto;
}

.menuRight__item {
    /* Estilos para los ítems principales si los necesitas */
}

.menuRight__item a {
    text-decoration: none;
    color: var(--text-color-dark); /* Color de texto oscuro */
    font-size: 1.2em;
    font-weight: bold;
    display: block; /* Asegura que el link ocupe todo el ancho */
    padding: 10px 0;
}

.menuRight__item h3 {
    color: var(--text-color-medium); /* Color de texto para títulos de submenú */
    font-size: 1.1em;
    margin-bottom: 5px;
    cursor: pointer; /* Indica que es clicable */
    position: relative; /* Para el posible indicador de submenú */
    padding: 5px 0;
    width: auto;
}

/* Opcional: Indicador de submenú (flecha) */
.menuRight__item h3::after {
    content: '▼'; /* Flecha hacia abajo */
    font-size: 0.7em;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}

.menuRight__item .subitem h3::after {
    right: 0px !important;
}

.menuRight__item.is-open h3::after,
.subitem__wrapper.is-open h3::after {
      transform: translateY(-50%) rotate(180deg);
}

/* Rotar flecha cuando el submenú está abierto */
.menuRight__item.is-open h3::after {
    transform: translateY(-50%) rotate(180deg); /* Flecha hacia arriba */
}

.menuRight__item:not(:has(.subitem)) > h3::after,
.subitem__wrapper:not(:has(.subitem2)) > h3::after {
    content: none;
}

/* Estilos de los submenús */
.subitem, .subitem2 {
    display: flex; /* Oculto por defecto */
    flex-direction: column; /* Organiza los links en columna */
    padding-left: 20px; /* Indentación para submenús */
    border-left: 2px solid var(--border-color); /* Línea visual para submenú, ajusta la variable */
    max-height: 0; /* Para animación de deslizamiento */
    overflow: hidden; /* Oculta contenido desbordante */
    transition: max-height 0.3s ease-out, opacity 0.3s ease;
    opacity: 0;
}

.subitem.is-open, .subitem2.is-open {
    display: flex; /* Mostrar cuando está abierto */
    max-height: 550px; /* Suficientemente grande para contener todos los ítems */
    opacity: 1;
    visibility: visible;
}

.subitem a, .subitem2 a {
    font-size: 1em;
    padding: 8px 0;
    color: var(--text-color-light); /* Color de texto más claro para subítems */
    font-weight: normal;
}

.subitem h3, .subitem2 h3 {
    font-size: 1em;
    color: var(--text-color-medium);
    margin-top: 10px;
    margin-bottom: 5px;
}

/* --- Estilos base del botón de hamburguesa (de tu código) --- */
.header__buttonMobile {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* ¡CLAVE PARA FIJAR EL BOTÓN AL VIEWPORT EN MÓVIL! */
    /* Por defecto, está en su posición normal dentro del flujo del header */
    position: relative; /* O 'static', dependiendo de su contenedor principal en el header */
    z-index: auto; /* O un z-index bajo si hay otros elementos en el header */
}

/* Contenedor de las líneas de la hamburguesa */
.hamburger {
    width: 40px;
    height: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
}

/* Estilos de las líneas individuales (span) */
.hamburger span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--fifth); /* Color de las líneas */
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
    position: absolute;
    left: 0;
}

/* Posicionamiento de cada línea */
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

/* --- Estilos del Botón cuando el Menú está ABIERTO ('.is-active') --- */
.header__buttonMobile.is-active {
    position: fixed; /* Ahora se fija al viewport */
    top: 20px; /* Distancia desde arriba del viewport. ¡AJUSTA ESTE VALOR! */
    right: 20px; /* Distancia desde la derecha del viewport. ¡AJUSTA ESTE VALOR! */
    z-index: 1002; /* Asegura que esté por encima del menú (z-index: 1000) */
    /* Añade una transición para que el cambio de posición sea suave */
    transition: top 0.4s ease, right 0.4s ease, transform 0.4s ease;
}

/* Estado "abierto" del menú (cuando la clase 'is-active' se añade al botón) */
.header__buttonMobile.is-active .hamburger span:nth-child(1) {
    transform: translateY(13.5px) rotate(50deg);
    background-color: var(--primary); /* Color de la X cuando el menú está abierto, ajusta según tu background-color del menú */
    /* position: fixed; */
}

.header__buttonMobile.is-active .hamburger span:nth-child(2) {
    opacity: 0;
}

.header__buttonMobile.is-active .hamburger span:nth-child(3) {
    transform: translateY(-13.5px) rotate(-50deg);
    background-color: var(--primary); /* Color de la X cuando el menú está abierto */
    /* position: fixed; */
    /* top: 5px;  */
}

/* Opcional: Rotar todo el contenedor de la hamburguesa para una X más centrada */
.header__buttonMobile.is-active .hamburger {
    transform: rotate(180deg);
}

.menuRight__item--enabled {
    display: none;
}

/* --- Media Query: Ocultar menú móvil en pantallas grandes --- */
@media (min-width: 1020px) { /* Ajusta este breakpoint según tu diseño de escritorio */
    
    header {
        padding: 15px 0;
        background-color: var(--fifth);
    }

    .header__logo {
        filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7475%) hue-rotate(125deg) brightness(101%) contrast(106%);
        width: 140px;
    }

    .header__container {
        /* overflow: hidden; */
        width: auto;
        /* border: 2px solid green; */
        flex-direction: row;
        column-gap: 1.5rem;
    }


    .header__buttonMobile {
        display: none; /* Ocultar el botón de hamburguesa en desktop */
    }

    .header__menu {
        position: static; /* Quitar fixed en desktop */
        visibility: visible; /* Siempre visible en desktop */
        opacity: 1;
        transform: translateX(0);
        background-color: var(--secondary); /* Fondo transparente */
        z-index: auto;
        /* overflow-y: visible; */
        height: auto; /* Altura automática en desktop */
        width: auto; /* Ancho automático en desktop */
        display: flex; /* O flex si lo prefieres para tu diseño de desktop */
        /* overflow: hidden; */
        /* border: 1px solid red; */
        padding: .8rem;
        border-radius: 18px;

        flex-direction: row;
        column-gap: 1rem;
        background-color: var(--fifth);
    }

    .right--transparence {
        display: none;
    } 

    .menu__left {
        display: none; /* Ocultar la parte izquierda si solo es para móvil */
    }

    .desktop--trans {
        display: flex;
        width: auto;
        height: 2rem;
        /* background-color: red; */
        column-gap: .5rem;
        justify-content: center;
        margin-top: .2rem;
    }

    .desktop--trans a {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        
    }

    .desktop--trans a img {
        height: 100%;
        width: auto;
        border: 2px solid var(--primary);
        border-radius: .5rem;
    }

    .menu__right {
        background-color: transparent;
        padding: 0;
        flex: none; /* Desactivar flex para que no ocupe todo el espacio */
        overflow: visible;
        /* border: 2px solid purple; */
        /* transform: none; */
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
   
    .menuRight__container {
        flex-direction: row; /* Ítems principales en fila */
        justify-content: flex-end; /* O alinear como prefieras en desktop */
        gap: 0; /* Eliminar el gap si los márgenes se controlan con margen-right */
        height: auto; /* Asegúrate de que el contenedor no tenga una altura fija si los ítems van en línea */
        /* border: 1px solid blue; */
        column-gap: .3rem;
        display: flex;
        align-items: center;
        background-color: var(--primary);
        padding: .6rem;
        border-radius: 1rem;
    }

    .menuRight__item {
        /* margin-left: 20px;  Espacio entre ítems principales en desktop */
        position: relative; /* Necesario para submenús desplegables */
        /* border: 2px solid brown; */
        padding: 0 5px; /* Ajusta el padding para los ítems principales */
        transition: background-color 0.3s ease; /* Transición para el hover */
        border-radius: 5px; /* Añade un poco de borde para el hover */
    }

    /* ESTILO HOVER PARA ÍTEMS PRINCIPALES */
    .menuRight__item:hover {
        background-color: var(--fifth); /* Color de fondo al hacer hover */
    }

    /* CAMBIO DE COLOR DEL TEXTO AL HOVER */
    .menuRight__item:hover > a,
    .menuRight__item:hover > h3 {
        color: var(--primary); /* Color del texto al hacer hover */
    }

    .menuRight__item--disabled {
        display: none;
    }

    .menuRight__item a, .menuRight__item h3 {
        padding: 3px 2px;
        /*padding: 8px 10px;  Ajusta el padding para desktop */
        color: var(--fifth); /* Color específico para menú de escritorio */
        font-size: 10px;
        margin: 0;
        font-weight: 500;
        /* padding: 0 5px; */
        text-align: center;
        /* margin-right: 5px; */
        /* display: block; */
    }
/*
    .menuRight__item h3::after {
        display: none; /* Ocultar la flecha en desktop si usas hover para submenús 
    }*/

    .menuRight__item h3::after {
          content: '▼';
        font-size: 0.7em;
        display: inline-block;
        margin-left: 8px;
        vertical-align: middle;
        color: var(--fifth);
        top: 35%;
        right: -5px;
        /* CLAVE: Asegúrate de que el punto de rotación sea el centro del elemento.
           Por defecto, es "center center", pero es bueno ser explícito.
           También, aplicamos la rotación inicial aquí.
        */
        transform: rotate(0deg); /* Asegura que empieza sin rotación */
        transform-origin: center center; /* Rota desde su propio centro */
        transition: transform 0.3s ease; /* Para una rotación suave */
    }

     .menuRight__item:hover > h3::after {
        transform: rotate(180deg); /* Triángulo hacia arriba al desplegarse */
        color: var(--fifth); /* Mantener el color o cambiarlo al del hover */
    }

    /* Ocultar el ícono si el ítem principal no tiene un submenú (opcional, pero buena práctica) */
    .menuRight__item:not(:has(.subitem)) > h3::after {
        content: none; /* Oculta el triángulo si no hay un subitem */
        margin-left: 0;
    }

    .subitem {
        width: 100%;
        display: none; /* Por defecto oculto */
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none; /* Inactivo para el ratón cuando está oculto */
        transition: opacity 0.3s ease, transform 0.3s ease; /* Para una animación suave */
        /* Asegura que no haya un max-height que lo limite si el contenido es largo */
        max-height: none; 
    }

    /* Mostrar el primer nivel de submenú al hacer HOVER sobre el ítem principal */
    .menuRight__item:hover > .subitem {
        display: flex; /* O 'block' si no necesitas flexbox dentro */
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto; /* Activo para el ratón cuando está visible */
        visibility: visible;
    }



    /* Estilos de los submenús en desktop (desplegables al pasar el ratón) */
    .subitem, .subitem2 {
        /*border: 2px solid red !important;  Temporalmente para ver si aparecen */
        /* background-color: yellow !important; */
        display: none; /* Ocultar submenús por defecto en desktop */
        position: absolute;
        top: 100%; /* Posicionamiento debajo del ítem padre */
        left: 0;
        background-color: var(--primary); /* Fondo del submenú */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        min-width: max-content; /* Ancho mínimo para submenú */
        padding: 10px 0;
        border-left: none; /* Eliminar borde izquierdo */
        opacity: 0; /* Siempre visible al activar hover/focus */
        z-index: 999; /* Asegúrate de que esté por encima de otros elementos */
        flex-direction: column; /* Volver a columna para submenús */
        /* Transición para la aparición */
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: translateY(10px); /* Ligeramente desplazado hacia abajo al aparecer */
        pointer-events: none; /* Desactiva eventos de ratón cuando no está visible */
        max-height: none; /* Sin animación de max-height en desktop */
        /* height: 30rem; */
        border-radius: 10px;
        /* border: 2px solid blue !important; Para ver los límites */
        overflow: visible;
    }

    /* Mostrar submenús al hacer hover sobre el ítem principal */
    .menuRight__item:hover > .subitem,
    .subitem h3:hover + .subitem2 {
        display: flex; /* Mostrar el primer nivel de submenú */
        transform: translateY(0); /* Se desliza a su posición final */
        pointer-events: auto; /* Habilita eventos de ratón */
    }

    /* Para el segundo nivel de submenú (subitem2) que aparece al hacer hover sobre el h3 del subitem */
    /*.subitem > .menuRight__item:hover > .subitem2,  Si tu HTML permite anidar items */
    /*.subitem h3:hover + .subitem2 {  Si el h3 es hermano del subitem2 */
       /* display: flex;
    }*/

    .subitem2 {
        left: 100%; /* Aparece a la derecha del subitem padre */
        top: 0; /* Alineado con el top del subitem padre */
        /* margin-left: 0; */

        display: none; /* Por defecto oculto */
        opacity: 0;
        transform: translateY(10px); /* Opcional, si quieres una animación similar */
        pointer-events: none; /* Inactivo para el ratón cuando está oculto */
        transition: opacity 0.3s ease, transform 0.3s ease;
        /* Asegúrate de su posicionamiento */
        position: absolute;
    }

    .subitem__wrapper:hover > .subitem2 {
        display: flex; /* O 'block' */
        opacity: 1;
        transform: translateY(0); /* Si usas transform */
        pointer-events: auto; /* Activo para el ratón cuando está visible */
    }


    .subitem a, .subitem2 a {
        padding: 8px 15px; /* Padding dentro de los ítems del submenú */
        white-space: nowrap; /* Evita que los ítems de submenú se rompan */
       /* color: var(--text-color-desktop-submenu);  Color de texto para submenús de escritorio */
        transition: background-color 0.2s ease, color 0.2s ease;
        color: var(--fifth);
    }

     /* HOVER EN ÍTEMS DE SUBMENÚ */
    .subitem a:hover,
    .subitem2 a:hover {
        background-color: var(--fifth); /* Fondo al hacer hover en subítems */
        color: var(--primary); /* Color del texto al hacer hover en subítems */
    }

    .subitem h3 {
        padding: 8px 15px; /* Padding para los títulos de submenú */
        color: var(--fifth);
        position: relative;
        z-index: 1;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .subitem h3:hover {
        background-color: var(--primary);
        color: var(--fifth);
    }

    .subitem h3::after {
        content: '►'; /* Cambiar a una flecha que apunte a la derecha para sub-submenús */
        font-size: 0.7em;
        display: inline-block; /* CLAVE: Para que el margin-left funcione */
        margin-left: 2px !important; /* Espacio fijo entre el texto del subitem y su flecha */
        vertical-align: middle;
        color: var(--fifth); /* O el color que desees para estas flechas */
        transform: rotate(0deg); /* Flecha apuntando a la derecha por defecto */
        transform-origin: center center;
        transition: transform 0.3s ease;
        margin-right: 5px;
        /* ELIMINAR CUALQUIER POSICIONAMIENTO ABSOLUTO QUE TENGAS AQUÍ */
        /* right: 0px !important;  <-- ELIMINA ESTO */
        /* top: 35%; <-- ELIMINA ESTO */
    }

     /* Rotar la flecha de .subitem h3 al hacer hover para mostrar .subitem2 */
    .subitem h3:hover::after {
        transform: rotate(90deg); /* Gira 90 grados para apuntar hacia abajo/arriba */
        color: var(--fifth); /* Cambia el color al hacer hover */
    }

    /* Ocultar la flecha si el subitem h3 no tiene un .subitem2 */
    /* Necesitas tener una estructura que lo permita o una clase extra */
    .subitem h3:not(:has(+ .subitem2))::after {
        content: none;
        margin-left: 0;
    }

     /* OCULTA el subitem2 por defecto */
    .subitem2 {
        display: none;
        position: absolute;
        left: 100%; /* A la derecha del wrapper */
        top: 0;
        /* ... (resto de tus reglas para .subitem2) ... */
        pointer-events: none; /* Oculto por defecto */
    }

    /* ESTO ES LO CLAVE: Hacer hover sobre el WRAPPER completo */
    .subitem__wrapper:hover > .subitem2 {
        display: flex; /* Mostrar el subitem2 */
        pointer-events: auto; /* Habilitar interacción */
        transform: translateY(0); /* Si tienes transform para la animación */
    }

    /* Asegúrate de que el wrapper sea posicionado para que subitem2 se posicione correctamente */
    .subitem__wrapper {
        position: relative; /* Importante para el posicionamiento absoluto del subitem2 */
    }

    /* Ajusta el padding para los h3 y a dentro del wrapper */
    .subitem__wrapper h3,
    .subitem__wrapper a {
        padding: 8px 15px; /* Asegura un área de click generosa */
    }

    .menuRight__item--enabled {
        display: block;
    }

}