/*==================================================
                HEADER
==================================================*/

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    transition:.4s ease;
    background:transparent;
}

.header.scrolled{
    background:#FFFFFF;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

/*==================================================
                NAVBAR
==================================================*/

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

/*==================================================
                LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:65px;

    transition:.3s;

}

.header.scrolled .logo img{

    height:58px;

}

/*==================================================
                MENU
==================================================*/

.nav-menu{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-menu>li{

    position:relative;

}

.nav-menu>li>a{

    color:#fff;

    font-size:15px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.3s;

}

.header.scrolled .nav-menu>li>a{

    color:#1f2937;

}

.nav-menu>li>a:hover{

    color:var(--secondary);

}

/*==================================================
            ICONO FLECHA
==================================================*/

.nav-menu li i{

    font-size:11px;

    transition:.3s;

}

.dropdown:hover i{

    transform:rotate(180deg);

}

/*==================================================
            BOTONES
==================================================*/

.nav-buttons{

    display:flex;

    align-items:center;

    gap:15px;

}

.nav-buttons a{

    padding:12px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    transition:.35s;

}

.btn-outline{

    border:2px solid #fff;

    color:#fff;

}

.header.scrolled .btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

.btn-primary{

    background:var(--gradient-primary);

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary{

    background:var(--gradient-secondary);

    color:#fff;

}

.btn-secondary:hover{

    transform:translateY(-3px);

}

/*==================================================
            MENU MOVIL
==================================================*/

.menu-toggle{

    display:none;

    width:35px;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    height:3px;

    background:#fff;

    margin:7px 0;

    border-radius:20px;

    transition:.3s;

}

.header.scrolled .menu-toggle span{

    background:#1f2937;

}
/*=========================================
            MEGA MENU
=========================================*/

.mega-menu{

    position:absolute;

    top:100%;

    left:50%;

    transform:translateX(-50%);

    width:1100px;

    background:#fff;

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    padding:35px;

}

.dropdown:hover .mega-menu{

    opacity:1;

    visibility:visible;

    margin-top:15px;

}

.mega-content{

    display:grid;

    grid-template-columns:1fr 1fr 1fr 1.2fr;

    gap:35px;

}

.mega-column h3{

    color:var(--primary);

    margin-bottom:18px;

    font-size:18px;

}

.mega-column a{

    display:block;

    padding:8px 0;

    color:#555;

    transition:.3s;

}

.mega-column a:hover{

    color:var(--secondary);

    padding-left:10px;

}

.mega-info img{

    width:100%;

    height:170px;

    object-fit:cover;

    border-radius:12px;

    margin-bottom:15px;

}

.mega-info h3{

    color:var(--primary);

    margin-bottom:12px;

}

.mega-info p{

    color:#666;

    margin-bottom:20px;

}

.mega-btn{

    display:inline-block;

    background:var(--gradient-primary);

    color:#fff;

    padding:12px 25px;

    border-radius:50px;

}