/* Botón Hamburguesa */
.suih-menu-trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 30px;
    position: relative;
    z-index: 9999; /* Por encima del overlay */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px; /* Distancia entre las líneas */
}

/* Estado normal de las líneas */
.suih-menu-trigger .line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000; /* Color inicial (ej. negro) */
    border-radius: 2px; /* Un toque redondeado para mayor elegancia */
    
    /* Agregamos transform a la transición para que se anime suavemente */
    transition: background-color 0.3s ease, transform 0.3s ease; 
}

/* =========================================
   ANIMACIÓN DEL BOTÓN ABIERTO (X)
========================================= */

/* Cambiamos a color blanco cuando se abre el fondo oscuro */
.suih-menu-trigger.is-active .line {
    background-color: #fff; 
}

/* La línea superior baja y gira 45 grados */
.suih-menu-trigger.is-active .line-1 {
    transform: translateY(5.5px) rotate(45deg);
}

/* La línea inferior sube y gira -45 grados */
.suih-menu-trigger.is-active .line-2 {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* Estado abierto: las líneas se vuelven blancas */
.suih-menu-trigger.is-active .line {
    background-color: #fff; 
}

/* Contenedor del Overlay */
.suih-overlay-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    pointer-events: none; /* Evita clics cuando está cerrado */
    visibility: hidden;
}

.suih-overlay-wrap.is-open {
    pointer-events: auto;
    visibility: visible;
}

/* Fondo animado */
.suih-overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a; /* Color de fondo del menú */
}

/* Contenido del menú */
.suih-overlay-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilos de los enlaces de WordPress */
.suih-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.suih-menu-list li {
    overflow: hidden; /* Importante para el efecto de revelación de GSAP */
    margin: 15px 0;
}

.suih-menu-list a {
    display: block;
    color: #fff;
    font-size: clamp(3rem, 6vw, 6rem); /* Tipografía gigante adaptativa */
    font-weight: 800;
    text-decoration: none;
    line-height: 1.1;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.suih-menu-list a:hover {
    color: #ff4500; /* Color de acento al pasar el mouse */
}