:root{
    --barber-navy:#011538;
    --barber-deep:#00091d;
    --barber-blue:#082750;
    --barber-white:#fff;
}


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

.header{
    position:sticky !important;
    top:0 !important;
    z-index:5000 !important;

    background:
        linear-gradient(
            180deg,
            #000817 0%,
            #000d27 100%
        ) !important;

    border-bottom:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 8px 28px rgba(0,0,0,.16) !important;
}

.header .nav{
    min-height:68px !important;
}


/* ============================================================
   HERO MAIS PRÓXIMO DO MENU
============================================================ */

#inicio{
    position:relative !important;
    isolation:isolate;

    min-height:0 !important;

    margin:0 !important;

    /*
       menos espaço entre menu e conteúdo
    */

    padding-top:26px !important;
    padding-bottom:43px !important;

    gap:36px !important;

    overflow:hidden !important;

    background:
        radial-gradient(
            circle at 77% 42%,
            rgba(73,125,197,.22) 0%,
            rgba(25,69,127,.09) 26%,
            transparent 48%
        ),

        radial-gradient(
            circle at 17% 18%,
            rgba(255,255,255,.045),
            transparent 25%
        ),

        linear-gradient(
            125deg,
            rgba(255,255,255,.018) 0 15%,
            transparent 15% 43%,
            rgba(255,255,255,.012) 43% 60%,
            transparent 60%
        ),

        linear-gradient(
            135deg,
            #011538 0%,
            #031b3e 58%,
            #082650 100%
        ) !important;
}


/* ============================================================
   EFEITO 1 — LINHAS DIAGONAIS SUTIS
============================================================ */

#inicio::before{
    content:"" !important;

    display:block !important;

    position:absolute !important;
    z-index:-2 !important;

    inset:-150px !important;

    opacity:.22 !important;

    background:
        repeating-linear-gradient(
            125deg,
            transparent 0,
            transparent 118px,
            rgba(255,255,255,.025) 119px,
            rgba(255,255,255,.025) 120px,
            transparent 121px,
            transparent 235px
        ) !important;

    pointer-events:none !important;
}


/* ============================================================
   EFEITO 2 — LUZ INFERIOR
============================================================ */

#inicio::after{
    content:"" !important;

    display:block !important;

    position:absolute !important;
    z-index:-1 !important;

    left:50% !important;
    bottom:-170px !important;

    width:780px !important;
    height:300px !important;

    transform:translateX(-50%) !important;

    border:0 !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(46,94,158,.17),
            rgba(18,56,108,.07) 42%,
            transparent 72%
        ) !important;

    filter:blur(15px);

    pointer-events:none !important;
}


/* ============================================================
   CONTEÚDO HERO
============================================================ */

#inicio .hero-content{
    position:relative !important;
    z-index:3 !important;
}


/* detalhe pequeno antes do Since */

#inicio .tag{
    margin-top:0 !important;
    margin-bottom:10px !important;
}


/* título mais unido */

#inicio h1{
    margin-top:0 !important;

    text-shadow:
        0 10px 32px rgba(0,0,0,.14) !important;
}


/* ============================================================
   FOTO
   NÃO ALTERAMOS PROPORÇÃO
============================================================ */

#inicio .hero-logo,
#inicio .hero-image,
#inicio .hero-visual,
#inicio .hero-media,
#inicio .barber-hero-photo{
    position:relative !important;
    z-index:3 !important;
}


/*
   brilho atrás da foto sem mexer
   na borda da própria fotografia
*/

#inicio .hero-logo::after,
#inicio .hero-image::after,
#inicio .hero-visual::after,
#inicio .hero-media::after,
#inicio .barber-hero-photo::after{
    content:"" !important;

    display:block !important;

    position:absolute !important;
    z-index:-1 !important;

    inset:10% -7% !important;

    border-radius:40px !important;

    background:
        radial-gradient(
            ellipse,
            rgba(73,125,197,.20),
            transparent 68%
        ) !important;

    filter:blur(25px) !important;

    pointer-events:none !important;
}


/* ============================================================
   CLUB — MAIS PRÓXIMO DO HERO
============================================================ */

#assinatura{
    position:relative !important;

    margin:0 !important;

    padding-top:38px !important;
    padding-bottom:48px !important;

    background:
        linear-gradient(
            180deg,
            #031a3b 0%,
            #011538 100%
        ) !important;
}


/* ============================================================
   CARD "BARBER AREIA SINCE 2019 / SEU CORTE"
============================================================ */

.barber-club-side{
    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;

    padding:
        25px 26px 27px !important;
}


/* logo */

.barber-club-side-logo{
    width:100% !important;

    display:flex !important;
    justify-content:center !important;

    margin:
        0 auto 10px !important;
}

.barber-club-side-logo img{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:210px !important;

    margin:auto !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    object-fit:contain !important;
}


/* ============================================================
   SINCE 2019 MAIS PRÓXIMO DE SEU CORTE
============================================================ */

.barber-club-side .tag,
.barber-club-side .eyebrow,
.barber-club-side .club-label,
.barber-club-side small{
    margin-top:0 !important;
    margin-bottom:5px !important;

    padding-bottom:0 !important;
}


/*
   Título SEU CORTE.
   SUA ROTINA.
   SEU PLANO.
*/

.barber-club-side h1,
.barber-club-side h2,
.barber-club-side h3{
    width:100% !important;

    margin:
        3px auto 10px !important;

    padding:0 !important;

    text-align:center !important;

    line-height:1.02 !important;
}


/* texto abaixo */

.barber-club-side p{
    margin-top:7px !important;
    margin-bottom:14px !important;
}


/* ============================================================
   NOVA IDENTIDADE INSERIDA PELO HTML
============================================================ */

.barber-club-identity{
    width:100%;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    margin:
        0 auto 6px;

    text-align:center;
}

.barber-club-identity .barber-since{
    margin:0 0 5px;

    color:rgba(255,255,255,.54);

    font-size:9px;
    font-weight:800;

    letter-spacing:2.1px;

    text-transform:uppercase;
}


/* linha pequena */

.barber-club-identity .barber-since::after{
    content:"";

    display:block;

    width:28px;
    height:1px;

    margin:7px auto 0;

    background:
        rgba(255,255,255,.42);
}


/* ============================================================
   TRANSIÇÃO PARA SERVIÇOS
============================================================ */

#servicos{
    margin-top:0 !important;

    padding-top:52px !important;
}


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

@media(max-width:850px){

    .header .nav{
        min-height:64px !important;
    }

    #inicio{
        padding-top:22px !important;
        padding-bottom:38px !important;

        gap:27px !important;
    }

    #assinatura{
        padding-top:32px !important;
        padding-bottom:42px !important;
    }

    .barber-club-side-logo img{
        max-width:185px !important;
    }
}


@media(max-width:520px){

    #inicio{
        padding-top:18px !important;
        padding-bottom:34px !important;
    }

    #inicio::after{
        width:480px !important;
    }

    .barber-club-side{
        padding:
            22px 18px 24px !important;
    }

    .barber-club-side-logo img{
        max-width:165px !important;
    }

    #servicos{
        padding-top:45px !important;
    }
}