/*==================================================
                HEADER V2.0
        Club Felinos - Mauricio Santiago
====================================================*/

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

.felinos-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    box-sizing:border-box;

    padding:0 20px;

    background:
    linear-gradient(
        135deg,
        rgba(0,21,46,.92),
        rgba(0,40,85,.88)
    );

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.18),
        inset 0 1px rgba(255,255,255,.05);

    transition:
        background .35s ease,
        padding .35s ease,
        box-shadow .35s ease,
        transform .35s ease;

}

.felinos-header::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    opacity:.75;

    background:
    linear-gradient(
        90deg,
        transparent,
        var(--primary),
        transparent
    );

}

.felinos-header .e-con-inner{

    align-items:center !important;

}

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

.felinos-header.scrolled{

    background:

    linear-gradient(

        135deg,

        rgba(0,16,36,.96),

        rgba(0,30,65,.96)

    );

    box-shadow:

        0 10px 35px rgba(0,0,0,.28);

}

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

.header-container{

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    width:100%;

    min-height:100px;

    gap:24px;

    padding:0 !important;

}

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

.header-logo{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:flex-start;

}

.header-logo .elementor-widget-container{

    margin:0 !important;

    padding:0 !important;

}

.header-logo img{

    display:block;

    width:78px !important;

    height:auto !important;

    transition:

        transform .35s ease,

        filter .35s ease;

}

.header-logo img:hover{

    transform:scale(1.08);

    filter:

        drop-shadow(0 0 20px rgba(245,184,0,.30))

        drop-shadow(0 0 35px rgba(245,184,0,.15));

}

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

.header-menu{

    flex:1 1 auto;

    min-width:0;

    display:flex !important;

    justify-content:center;

    align-items:center;

}

.header-menu .elementor-widget-container{

    display:flex;

    justify-content:center;

    width:100%;

}

/*=========================================
  SOCIAL
=========================================*/

.header-social{

    flex:0 0 auto;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.header-social .elementor-widget-container{

    margin:0 !important;

    padding:0 !important;

}

.header-social .elementor-social-icons{

    display:flex;

    gap:18px;

}

.header-social .elementor-social-icon{

    width:38px;

    height:38px;

    display:flex !important;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.06) !important;

    border:1px solid rgba(255,255,255,.08);

    transition:.30s;

}

.header-social .elementor-social-icon:hover{

    transform:translateY(-3px);

    background:var(--primary) !important;

}

.header-social .elementor-social-icon i{

    color:#FFF;

    font-size:14px;

    transition:.30s;

}

.header-social .elementor-social-icon:hover i{

    color:var(--secondary);

}

/*=========================================
  PAGE OFFSET
=========================================*/

body:not(.home) main{

    padding-top:30px;

}
/*==================================================
                NAVEGACIÓN
====================================================*/

/*=========================================
  NAV
=========================================*/

.custom-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    width:100%;

    white-space:nowrap;

}

.custom-nav>*{

    flex:0 0 auto;

}

/*=========================================
  LINKS
=========================================*/

.custom-nav a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:8px 0;

    overflow:hidden;

    text-decoration:none;

    text-transform:uppercase;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    color:#FFF !important;

    transition:

        color .30s ease,

        transform .30s ease;

}

/*=========================================
  BRILLO
=========================================*/

.custom-nav a::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    transform:skewX(-25deg);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    transition:left .60s ease;

}

.custom-nav a:hover::after{

    left:120%;

}

/*=========================================
  UNDERLINE
=========================================*/

.custom-nav a::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:-6px;

    width:0;

    height:3px;

    border-radius:30px;

    transform:translateX(-50%);

    background:var(--primary);

    transition:width .30s ease;

}

.custom-nav a:hover::before,
.custom-nav a.current::before{

    width:100%;

}

/*=========================================
  ESTADOS
=========================================*/

.custom-nav a:hover,
.custom-nav a.current,
.custom-nav a:focus{

    color:var(--primary) !important;

    outline:none;

}

.custom-nav a:visited{

    color:#FFF !important;

}

/*==================================================
                DROPDOWN
====================================================*/

.custom-nav__item{

    position:relative;

}

.custom-nav__item>a{

    cursor:pointer;

}

/*=========================================
  PANEL
=========================================*/

.custom-nav__dropdown{

    position:absolute;

    top:calc(100% + 12px);

    left:0;

    min-width:230px;

    display:flex;

    flex-direction:column;

    padding:10px 0;

    border-top:2px solid var(--secondary);

    border-radius:0 0 14px 14px;

    background:var(--primary);

    box-shadow:

        0 14px 34px rgba(0,0,0,.25);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:

        opacity .25s ease,

        transform .25s ease,

        visibility .25s ease;

    z-index:999;

}

/*=========================================
  ÁREA MUERTA
=========================================*/

.custom-nav__dropdown::before{

    content:"";

    position:absolute;

    left:0;

    top:-12px;

    width:100%;

    height:12px;

}

/*=========================================
  SHOW
=========================================*/

.custom-nav__item:hover>.custom-nav__dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/*=========================================
  LINKS DROPDOWN
=========================================*/

.custom-nav__dropdown a{

    justify-content:flex-start;

    padding:11px 18px;

    font-size:13px;

    text-transform:none;

    letter-spacing:.4px;

}

.custom-nav__dropdown a::before{

    display:none;

}

.custom-nav__dropdown a::after{

    display:none;

}

.custom-nav__dropdown a:hover{

    background:rgba(0,21,46,.08);

    color:var(--secondary) !important;

}

/*=========================================
  MICROANIMACIÓN
=========================================*/

.custom-nav__item>a{

    transition:

        color .30s,

        transform .30s;

}

.custom-nav__item:hover>a{

    transform:translateY(-1px);

}
/*==================================================
            MENÚ MÓVIL V2.0
====================================================*/

/*=========================================
  MOBILE TOGGLE
=========================================*/

.mobile-toggle{ display:none !important; width:48px; height:48px; border:none; background:transparent; cursor:pointer; position:relative; padding:0; z-index:10002; } 
@media (max-width:1024px){ .mobile-toggle{ display:flex !important; align-items:center; justify-content:center; } }

.mobile-toggle span{

    position:absolute;

    left:11px;

    width:26px;

    height:3px;

    border-radius:30px;

    background:#fff;

    transition:
        transform .35s ease,
        opacity .35s ease,
        top .35s ease;

}

.mobile-toggle span:nth-child(1){

    top:14px;

}

.mobile-toggle span:nth-child(2){

    top:22px;

}

.mobile-toggle span:nth-child(3){

    top:30px;

}

/*=========================================
  HAMBURGUESA → X
=========================================*/

.mobile-toggle.active span:nth-child(1){

    top:22px;

    transform:rotate(45deg);

}

.mobile-toggle.active span:nth-child(2){

    opacity:0;

}

.mobile-toggle.active span:nth-child(3){

    top:22px;

    transform:rotate(-45deg);

}


.header-navigation{

    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;

    position:relative;
}
/*==================================================
                TABLET + MOBILE
====================================================*/

@media (max-width:1024px){

    .felinos-header{

        padding:0 16px;

    }

    .header-container{

        min-height:82px;

    }

    .header-logo img{

        width:60px !important;

    }

    .header-social{

        display:none !important;

    }


    /*=========================
        PANEL
    =========================*/

    .nav-panel{

        position:fixed;

        top:82px;

        left:0;

        width:100%;

        height:calc(100vh - 82px);

        padding:30px;

        box-sizing:border-box;

        background:

            rgba(0,21,46,.97);

        backdrop-filter:blur(18px);

        -webkit-backdrop-filter:blur(18px);

        justify-content:flex-start !important;

        align-items:flex-start !important;

        overflow-y:auto;

        opacity:0;

        visibility:hidden;

        transform:translateY(-12px);

        transition:.35s ease;

        z-index:9998;

    }

    .nav-panel.open{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }

    /*=========================
          NAV
    =========================*/

    .custom-nav{

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

        width:100%;

        gap:0;

        white-space:normal;

    }

    .custom-nav>a,

    .custom-nav__item{

        width:100%;

    }

    .custom-nav>a,

    .custom-nav__item>a{

        width:100%;

        padding:18px 0;

        font-size:18px;

        border-bottom:

            1px solid rgba(255,255,255,.08);

    }

    /*=========================
       DROPDOWN MOBILE
    =========================*/

    .custom-nav__dropdown{

        position:static;

        display:none;

        opacity:1;

        visibility:visible;

        transform:none;

        margin:0;

        padding:

            8px 0 12px 18px;

        border:none;

        border-radius:0;

        background:transparent;

        box-shadow:none;

        min-width:100%;

    }

    .custom-nav__dropdown::before{

        display:none;

    }

    .custom-nav__dropdown a{

        padding:10px 0;

        font-size:15px;

        letter-spacing:.4px;

        text-transform:none;

    }

    .custom-nav__item.open

    .custom-nav__dropdown{

        display:flex;

        flex-direction:column;

    }

    /*=========================
       QUITAR EFECTOS DESKTOP
    =========================*/

    .custom-nav a::before,

    .custom-nav a::after{

        display:none;

    }

}

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

@media (max-width:768px){

    .felinos-header{

        padding:0 12px;

    }

    .header-container{

        min-height:76px;

    }

    .header-logo img{

        width:54px !important;

    }

    .nav-panel{

        top:76px;

        height:calc(100vh - 76px);

        padding:25px;

    }

}

/*==================================================
            MOBILE PEQUEÑO
====================================================*/

@media (max-width:480px){

    .header-logo img{

        width:48px !important;

    }

    .custom-nav>a,

    .custom-nav__item>a{

        font-size:16px;

    }

    .custom-nav__dropdown a{

        font-size:14px;

    }

}
/*=========================================
BODY LOCK
=========================================*/

body.menu-open{

    overflow:hidden;

}
/*=========================================
SCROLL DEL PANEL
=========================================*/

.header-menu{

    scrollbar-width:thin;

}

.nav-panel::-webkit-scrollbar{

    width:6px;

}

.header-menu::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.15);

    border-radius:30px;

}

/*=========================================
ANIMACIÓN LINKS
=========================================*/

.nav-panel.open .custom-nav>a,

.nav-panel.open .custom-nav__item{

    animation:menuFade .35s ease forwards;

}

.nav-panel.open .custom-nav>*:nth-child(1){

    animation-delay:.05s;

}

.nav-panel.open .custom-nav>*:nth-child(2){

    animation-delay:.10s;

}

.nav-panel.open .custom-nav>*:nth-child(3){

    animation-delay:.15s;

}

.nav-panel.open .custom-nav>*:nth-child(4){

    animation-delay:.20s;

}

.nav-panel.open .custom-nav>*:nth-child(5){

    animation-delay:.25s;

}

.nav-panel.open .custom-nav>*:nth-child(6){

    animation-delay:.30s;

}

.nav-panel.open .custom-nav>*:nth-child(7){

    animation-delay:.35s;

}

@keyframes menuFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



.elementor-element-72528a5 {
    width: auto !important;
    flex: 0 0 auto !important;
}

.elementor-element-72528a5 .header-navigation {
    width: auto;
    flex: 0 0 auto;
}

/* Widget HTML del menú */
.elementor-element-72528a5 {
    width:100% !important;
    flex:1 1 auto !important;
}

/* Contenedor interno */
.header-navigation {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* Botón hamburguesa */
.mobile-toggle {
    flex:0 0 auto;
    width:40px;
    height:40px;
}