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

.main-header{
    background:#ffffff;
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:0 2px 20px rgba(0,0,0,.06);
}

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

.main-header .navbar{
    padding:6px 0;
}

.main-header .navbar-brand{
    margin-right:0;
    display:flex;
    align-items:center;
    min-width:0;
}

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

.main-header .navbar-brand .main-logo{
    height:68px;
    max-width:100%;
    width:auto;
    display:block;
    transition:.3s;
}

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

.navbar-nav{
    gap:8px;
}

.nav-link{
    color:#0f172a !important;
    font-weight:700;
    font-size:16px;
    padding:10px 14px !important;
    border-radius:12px;
    transition:.3s;
}

.nav-link:hover{
    color:#00bcd4 !important;
}

.nav-link.active{
    color:#00bcd4 !important;
    background:rgba(0,188,212,.12);
}

/* =========================================
SUBMENUS
========================================= */

.dropdown-menu{
    background:#00bcd4;
    border:none;
    border-radius:22px;
    padding:14px;
    min-width:260px;
    box-shadow:0 20px 45px rgba(0,188,212,.35);
    margin-top:14px;
}

.dropdown-item{
    color:#ffffff;
    font-weight:600;
    font-size:15px;
    padding:12px 16px;
    border-radius:14px;
    transition:.3s;
}

.dropdown-item:hover{
    background:rgba(255,255,255,.18);
    color:#ffffff;
}

.dropdown-item.active,
.dropdown-item:active{
    background:rgba(15,23,42,.18);
    color:#ffffff;
}

.dropdown-divider{
    border-color:rgba(255,255,255,.2);
}

/* =========================================
BOTON MOVIL
========================================= */

.navbar-toggler{
    border:none;
    box-shadow:none !important;
    margin-left:12px;
    flex:0 0 auto;
}

.navbar-toggler:focus{
    box-shadow:none;
}

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

@media(max-width:991px){

    .main-header .navbar{
        padding:10px 0;
        align-items:center;
    }

    .main-header .navbar-brand .main-logo{
        height:70px;
    }

    .main-header .navbar-brand{
        flex:1 1 auto;
        max-width:calc(100% - 52px);
    }

    .offcanvas-lg{
        background:#0f172a;
        width:min(320px,86vw) !important;
        border-right:none;
        box-shadow:0 18px 42px rgba(2,6,23,.42);
        color:#cbd5e1;
    }

    .offcanvas-lg .offcanvas-header{
        padding:20px 20px 10px;
        border-bottom:1px solid rgba(148,163,184,.18);
        position:relative;
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .offcanvas-lg .offcanvas-brand-wrap{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:10px;
        padding-right:40px;
        width:100%;
    }

    .offcanvas-lg .offcanvas-brand-logo{
        height:64px;
        width:auto;
        display:block;
        margin:0 auto;
    }

    .offcanvas-lg .offcanvas-title{
        color:#ffffff;
        font-size:18px;
        font-weight:800;
        margin:0;
        text-align:left;
        width:100%;
    }

    .offcanvas-lg .btn-close{
        position:absolute;
        top:24px;
        right:20px;
        filter:invert(1) grayscale(1) brightness(200%);
        opacity:.85;
    }

    .offcanvas-lg .offcanvas-body{
        padding:10px 18px 18px;
        display:flex;
        flex-direction:column;
        align-items:stretch;
    }

    .offcanvas-lg .navbar-nav{
        gap:0;
        align-items:stretch !important;
        width:100%;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .offcanvas-lg .nav-item,
    .offcanvas-lg .navbar-nav,
    .offcanvas-lg .navbar-nav .dropdown,
    .offcanvas-lg .navbar-nav .dropdown-menu,
    .offcanvas-lg .header-social{
        text-align:left;
    }

    .offcanvas-lg .nav-link{
        padding:8px 16px !important;
        display:flex;
        align-items:center;
        justify-content:space-between;
        text-align:left;
        width:100%;
        color:#e2e8f0 !important;
        border-radius:12px;
        min-height:40px;
        line-height:1.15;
    }

    .offcanvas-lg .nav-link:hover,
    .offcanvas-lg .nav-link:focus{
        color:#67e8f9 !important;
        background:rgba(0,188,212,.12);
    }

    .offcanvas-lg .nav-link.active{
        color:#67e8f9 !important;
        background:rgba(0,188,212,.16);
    }

    .offcanvas-lg .dropdown-menu{
        position:static !important;
        inset:auto !important;
        transform:none !important;
        float:none;
        min-width:100%;
        background:linear-gradient(180deg,#1e293b 0%,#172033 100%);
        box-shadow:none;
        margin-top:2px;
        border:1px solid rgba(148,163,184,.12);
        border-radius:16px;
        padding:8px;
    }

    .offcanvas-lg .dropdown-item{
        color:#e2e8f0;
        text-align:left;
        padding:9px 12px;
        border-radius:12px;
        line-height:1.2;
    }

    .offcanvas-lg .dropdown-item:hover{
        background:rgba(255,255,255,.08);
        color:#67e8f9;
    }

    .offcanvas-lg .dropdown-item.active,
    .offcanvas-lg .dropdown-item:active{
        background:rgba(0,188,212,.16);
        color:#67e8f9;
    }

    .offcanvas-lg .contact-nav-menu{
        display:block;
        margin-top:0;
    }

    .offcanvas-lg .contact-nav-dropdown .nav-link{
        margin-bottom:0;
    }

    .offcanvas-lg .header-social{
        margin:12px 0 0;
        justify-content:flex-start;
    }

    .offcanvas-lg .header-social a{
        color:#ffffff;
        border:1px solid rgba(255,255,255,.24);
        box-shadow:0 12px 24px rgba(2,6,23,.34);
    }

    .offcanvas-lg .header-social a:nth-child(1){
        background:#1877f2;
        color:#ffffff;
    }

    .offcanvas-lg .header-social a:nth-child(2){
        background:linear-gradient(135deg,#f58529 0%,#dd2a7b 52%,#8134af 100%);
        color:#ffffff;
    }

    .offcanvas-lg .header-social a:hover,
    .offcanvas-lg .header-social a:focus{
        border-color:rgba(255,255,255,.5);
        box-shadow:0 14px 28px rgba(2,6,23,.42);
        transform:translateY(-2px);
    }

}

/* =========================================
REDES SOCIALES HEADER
========================================= */

.header-social{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:16px;
}

.header-social a{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ffffff;
    border:1px solid #dbe5f2;
    box-shadow:0 8px 16px rgba(15,23,42,.08);
    text-decoration:none;
    transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
    font-size:18px;
}

.header-social a:hover{
    background:#f8fbff;
    border-color:#bfdbfe;
    box-shadow:0 12px 24px rgba(15,23,42,.14);
    transform:translateY(-3px);
}

.header-social a:focus-visible{
    outline:2px solid #38bdf8;
    outline-offset:2px;
}

/* FACEBOOK */
.header-social a:nth-child(1){
    color:#1877f2;
}

/* INSTAGRAM */
.header-social a:nth-child(2){
    color:#e1306c;
}

@media(max-width:480px){
    .main-header .navbar-brand .main-logo{
        height:60px;
    }
}