.wp-site-blocks > header{
    position: fixed;
    top: 20px;
    right: 0;
    left: 0;
    z-index: 1000;
    max-width: 1000px;
    margin: 0 auto;
}

.header-enfaf{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "company nav";
    align-items: center;
    gap: 5px;
    margin: 0 auto;
    padding: 8px 24px;
    max-width: 1000px;
    border: 1px solid var(--wp--preset--color--secondary);
    background: #030914e0;
    border-radius: 50px;

    & .company{
        display: flex;
        grid-area: company;
        align-items: center;
        gap: 5px;

        & a{
            color: var(--wp--preset--color--text-primary);
            text-decoration: none;
            font-size: 1.5rem;
            line-height: 1.2rem;
        }

        & img{
            width: 30px;
            height: auto;
        }
    }

    & nav{
        display: grid;
        grid-area: nav;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 20px;
        transition: opacity 0.3s ease, transform 0.3s ease;

        &[style*="none"] {
            opacity: 0;
            transform: translateY(-20px); /* Movimiento hacia arriba al cerrar */
        }

        & > ul{
            display: flex;
            align-items: center;
            justify-self: center;
            gap: 20px;
            list-style: none;
            padding-left: 0;

            & li {
                position: relative;

                & a{
                    display: flex;
                    align-items: center;
                    color: var(--wp--preset--color--text-primary);
                    text-decoration: none;

                    &:hover{
                        color: var(--wp--preset--color--secondary);
                    }
                }

                & .submenu {
                    min-width: 300px;
                    list-style: none;
                    padding: 16px;
                    margin: 0;
                    position: absolute;
                    top: 80px;
                    left: 0;
                    display: none; /* Oculta los submenús por defecto */
                    background: var(--wp--preset--gradient--double-corner);
                    border: 1px solid var(--wp--preset--color--quinary);
                    border-radius: 15px;
                    z-index: 1000;
                    animation: slideDown 0.3s ease forwards;

                    &.submenu-columns{
                        max-width: 1200px;
                        width: 100%;
                        position: fixed;
                        top: 130px;
                        right: 0;
                        margin: 0 auto;

                        & .submenu-columns-content{
                            display: grid;
                            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                            gap: 25px;

                            & ul{
                                list-style: none;
                                margin: 0;
                                padding: 0;

                                & .column-title{
                                    padding-left: 10px;
                                }
                            }
                        }
                    }

                    & li{
                        padding: 10px;

                        & a {
                            display: flex;
                            gap: 10px;
                            align-items: center;
                            text-decoration: none;

                            & span{
                                padding: 5px;
                                border-radius: 50%;
                                border: 1px solid var(--wp--preset--color--secondary);

                                & svg {
                                    border-radius: 50%;
                                    width: 45px;
                                    height: 45px;
                                    display: grid;
                                    transition: all 0.6s ease;
                                    justify-content: center;
                                    align-content: center;
                                    background: rgb(193 210 248);
                                    padding: 7px;
                                    color: var(--wp--preset--color--tertiary);
                                    border: 2px solid var(--wp--preset--color--text-primary);
                                    stroke: var(--wp--preset--color--tertiary);

                                    & path{
                                        stroke: var(--wp--preset--color--secondary);
                                        fill: var(--wp--preset--color--secondary);
                                    }
                                }

                                & .fill-none{
                                    fill: none;
                                    
                                    & path{
                                        fill: none;
                                    }
                                }
                            }
                        }
                    }

                    &.open {
                        display: block; /* Muestra el submenú */
                        animation: slideDown 0.3s ease forwards;
                    }

                    &.closing {
                        animation: slideUp 0.3s ease forwards;
                    }
                }
            }
        }

        & .btn-promo{
            justify-self: end;
            display: grid;
            grid-auto-flow: column;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            overflow: hidden;
            position: relative;
            text-decoration: none !important;
            transition: all 0.6s ease;
            font-weight: 500;
            outline: 0;
            padding: 10px;
            padding-right: 25px;
            border-radius: 50px;
            color: var(--wp--preset--color--text-primary) !important;
            border: 1px solid var(--wp--preset--color--tertiary);
            background: var(--wp--preset--color--primary);
            box-shadow: 0 0 15px 0 var(--wp--preset--color--tertiary);
            max-width: 250px;
            
            & svg {
                border-radius: 50%;
                width: 45px;
                height: 45px;
                display: grid;
                transition: all 0.6s ease;
                justify-content: center;
                align-content: center;
                background: var(--wp--preset--color--primary);
                padding: 10px;
                color: var(--wp--preset--color--tertiary);
                border: 1px solid var(--wp--preset--color--tertiary);
                stroke: var(--wp--preset--color--tertiary);
            }

            &:hover {
                background: var(--wp--preset--color--tertiary);
            }

        }
    }

    & .mobile-menu-btn{
        display: none;
        grid-area: mobile-menu-btn;

        & span {
            display: flex;
            align-items: center;
            cursor: pointer;
            overflow: hidden;
            position: relative;
            text-decoration: none !important;
            transition: all 0.6s ease;
            font-weight: 500;
            outline: 0;
            padding: 10px;
            border-radius: 50%;
            border: 1px solid var(--wp--preset--color--secondary);
            background: var(--wp--preset--color--primary);
        
            & svg {
                border-radius: 50%;
                width: 30px;
                height: 30px;
                display: grid;
                transition: all 0.6s ease;
                justify-content: center;
                align-content: center;
                background: var(--wp--preset--color--primary);
                stroke: var(--wp--preset--color--secondary);
    
                & path {
                    stroke: var(--wp--preset--color--secondary);
                }
            }
        }

        .mobile-menu-icon + .mobile-menu-icon {
            display: none; /* Solo muestra el segundo icono si el menú está abierto */
        }
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media screen and (max-width: 700px){

    .wp-site-blocks > header{
        top: 0px;
    }

    .header-enfaf{
        grid-template-columns: 1fr auto;
        grid-template-areas: 
            "company mobile-menu-btn"
            "nav nav"
        ;
        border: none;
        border-radius: 0;

        & nav{
            grid-template-columns: 1fr;
            justify-content: center;
            max-height: 100vh;
            overflow-y: auto;

            & ul{
                display: grid;
                grid-template-columns: 1fr;
                justify-self: auto;

                & li {
                    position: relative;
    
                    & a{
                        display: grid;
                        grid-template-columns: 1fr auto;
                    }
    
                    & .submenu {
                        min-width: 100%;
                        position: relative;
                        top: 10px;

                        & li {
                            justify-self: start;
                        }
                    }

                    & .submenu-columns{
                        position: relative !important;
                        top: 0 !important;
                        
                        & .submenu-columns-content{
                            grid-template-columns: 1fr !important;
                            
                            & ul{
                                list-style: none;
                                margin: 0;
                                padding: 0;

                                & .column-title{
                                    padding-left: 10px;
                                }
                            }
                        }
                    }
                }
            }

            & .btn-promo{
                justify-self: center;
                max-width: 100%;
            }
        }

        & .mobile-menu-btn{
            display: block;
        }
    }
}