:root{
    --barber-bg:#011538;
    --barber-bg-soft:#071c3e;
    --barber-sand:#F3EFE6;
    --barber-white:#FFFFFF;
    --barber-muted:#A9B5C8;
    --barber-line:rgba(255,255,255,.09);
}

html{
    scroll-behavior:smooth;
    background:var(--barber-bg);
}

body{
    margin:0 !important;
    padding:0 !important;

    overflow-x:hidden !important;

    background:var(--barber-bg) !important;

    color:#fff;
}

main{
    width:100%;
    overflow:hidden;
    background:var(--barber-bg);
}


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

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

    width:100% !important;

    margin:0 !important;

    background:rgba(1,21,56,.96) !important;

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

    box-shadow:none !important;

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

.header .nav{
    width:min(1280px,calc(100% - 40px)) !important;

    min-height:76px !important;

    margin:auto !important;

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

    gap:28px !important;
}

.header .logo img{
    display:block !important;

    width:auto !important;
    height:50px !important;

    max-width:145px !important;

    object-fit:contain !important;
}

.header nav{
    display:block !important;
    flex:1 !important;
}

.header .menu{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:29px !important;

    margin:0 !important;
    padding:0 !important;

    list-style:none !important;
}

.header .menu a{
    color:rgba(255,255,255,.68) !important;

    font-size:10px !important;
    font-weight:800 !important;

    letter-spacing:1px !important;

    text-transform:uppercase !important;
    text-decoration:none !important;

    transition:.2s ease;
}

.header .menu a:hover{
    color:#fff !important;
}

.header .agendar{
    min-height:43px !important;

    padding:0 17px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

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

    background:var(--barber-sand) !important;
    color:var(--barber-bg) !important;

    font-size:9px !important;
    font-weight:900 !important;

    letter-spacing:.8px !important;

    text-decoration:none !important;
    text-transform:uppercase !important;
}


/* ============================================================
   HERO
============================================================ */

#inicio{
    box-sizing:border-box !important;

    width:min(1280px,calc(100% - 48px)) !important;

    min-height:610px !important;

    margin:0 auto !important;

    padding:
        clamp(75px,8vw,110px)
        0
        clamp(75px,8vw,105px) !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(330px,.95fr) !important;

    align-items:center !important;

    gap:
        clamp(55px,7vw,100px) !important;

    background:transparent !important;

    overflow:visible !important;
}

#inicio .hero-content{
    width:100% !important;

    max-width:660px !important;
}

#inicio .tag{
    display:flex !important;
    align-items:center !important;

    gap:11px !important;

    margin:0 0 22px !important;

    color:#adc1df !important;

    font-size:10px !important;
    font-weight:900 !important;

    letter-spacing:2.5px !important;

    text-transform:uppercase !important;
}

#inicio .tag::before{
    content:"";

    width:28px;
    height:1px;

    background:#adc1df;
}

#inicio h1{
    margin:0 !important;

    max-width:640px !important;

    color:#fff !important;

    font-size:
        clamp(48px,5.6vw,76px) !important;

    font-weight:800 !important;

    line-height:.96 !important;

    letter-spacing:-2.8px !important;
}

#inicio .hero-content > p{
    max-width:570px !important;

    margin:25px 0 0 !important;

    color:
        rgba(255,255,255,.64) !important;

    font-size:15px !important;

    line-height:1.75 !important;
}

#inicio .actions{
    margin-top:31px !important;

    display:flex !important;

    align-items:center !important;

    flex-wrap:wrap !important;

    gap:10px !important;
}

#inicio .actions a{
    min-height:50px !important;

    padding:0 21px !important;

    display:inline-flex !important;

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

    border-radius:8px !important;

    font-size:9px !important;
    font-weight:900 !important;

    letter-spacing:1px !important;

    text-transform:uppercase !important;
    text-decoration:none !important;
}

#inicio .actions a:first-child{
    background:var(--barber-sand) !important;
    color:var(--barber-bg) !important;

    border:
        1px solid var(--barber-sand) !important;
}

#inicio .actions a:nth-child(2){
    color:#fff !important;

    background:transparent !important;

    border:
        1px solid rgba(255,255,255,.18) !important;
}


/* ============================================================
   IMAGEM PRINCIPAL

   SEM:
   - borda azul
   - card
   - fundo
   - sombra azul
   - padding

   SOMENTE FOTO + CANTOS REDONDOS
============================================================ */

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

    box-sizing:border-box !important;

    width:100% !important;
    max-width:500px !important;

    height:auto !important;
    max-height:none !important;

    margin:0 0 0 auto !important;
    padding:0 !important;

    overflow:hidden !important;

    border:0 !important;
    outline:0 !important;

    border-radius:26px !important;

    background:transparent !important;

    box-shadow:none !important;

    filter:none !important;
}

#inicio .hero-logo::before,
#inicio .hero-logo::after,
#inicio .hero-image::before,
#inicio .hero-image::after,
#inicio .hero-visual::before,
#inicio .hero-visual::after,
#inicio .hero-media::before,
#inicio .hero-media::after,
#inicio .barber-hero-photo::before,
#inicio .barber-hero-photo::after{
    content:none !important;
    display:none !important;
}

#inicio .hero-logo img,
#inicio .hero-image img,
#inicio .hero-visual img,
#inicio .hero-media img,
#inicio .barber-hero-photo img{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;

    max-height:510px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center !important;

    border:0 !important;
    outline:0 !important;

    border-radius:26px !important;

    background:transparent !important;

    box-shadow:none !important;

    filter:none !important;

    opacity:1 !important;

    transform:none !important;
}


/* ============================================================
   BARBER AREIA CLUB
============================================================ */

#assinatura{
    box-sizing:border-box !important;

    width:100% !important;

    margin:0 !important;

    padding:
        88px 24px !important;

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

.barber-club-inner{
    width:min(1280px,100%) !important;

    margin:0 auto !important;

    gap:16px !important;
}

.barber-club-main,
.barber-club-side{
    border:
        1px solid rgba(255,255,255,.10) !important;

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

    box-shadow:none !important;
}


/* ============================================================
   SERVIÇOS
============================================================ */

#servicos{
    box-sizing:border-box !important;

    width:100% !important;

    margin:0 !important;

    padding:
        92px 24px 96px !important;

    background:
        #f3efe6 !important;

    color:var(--barber-bg) !important;
}

#servicos .barber-services-inner{
    width:min(1280px,100%);

    margin:0 auto;
}

#servicos .section-label{
    display:flex !important;
    align-items:center !important;

    gap:10px !important;

    margin:0 0 12px !important;

    color:#63728a !important;

    font-size:9px !important;
    font-weight:900 !important;

    letter-spacing:2.5px !important;

    text-transform:uppercase !important;
}

#servicos .section-label::before{
    content:"";

    width:27px;
    height:1px;

    background:var(--barber-bg);
}

#servicos h2{
    max-width:650px !important;

    margin:0 !important;

    color:var(--barber-bg) !important;

    font-size:
        clamp(38px,4.6vw,57px) !important;

    line-height:1 !important;

    letter-spacing:-2px !important;
}

#servicos .barber-services-intro{
    max-width:550px;

    margin:17px 0 0;

    color:#64748b;

    font-size:14px;

    line-height:1.7;
}

#servicos .service-grid{
    margin-top:40px !important;

    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:14px !important;
}

#servicos .service-card{
    position:relative;

    min-height:245px;

    padding:28px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    border:
        1px solid rgba(1,21,56,.09);

    border-radius:16px;

    background:#fff;

    box-shadow:
        0 12px 35px
        rgba(1,21,56,.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

#servicos .service-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 18px 42px
        rgba(1,21,56,.09);
}

#servicos .service-icon{
    width:45px;
    height:45px;

    margin-bottom:27px;

    display:flex;

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

    border-radius:12px;

    background:var(--barber-bg);

    color:#fff;
}

#servicos .service-icon svg{
    width:21px;
    height:21px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}

#servicos .service-card h3{
    margin:0 0 10px !important;

    color:var(--barber-bg) !important;

    font-size:19px !important;

    letter-spacing:-.4px !important;
}

#servicos .service-card p{
    margin:0 !important;

    color:#6c7788 !important;

    font-size:12px !important;

    line-height:1.65 !important;
}


/* ============================================================
   NOSSO TRABALHO
============================================================ */

#galeria.barber-work{
    box-sizing:border-box !important;

    width:100% !important;

    margin:0 !important;

    padding:
        92px 24px 92px !important;

    background:
        #f3efe6 !important;

    color:var(--barber-bg) !important;

    border-top:
        1px solid rgba(1,21,56,.07) !important;
}

.barber-work-inner{
    width:min(1280px,100%) !important;

    margin:0 auto !important;
}

.barber-work h2{
    color:var(--barber-bg) !important;
}

.barber-work-kicker{
    color:#66768c !important;
}

.barber-work-kicker::before{
    background:var(--barber-bg) !important;
}

.barber-work-description{
    color:#667085 !important;
}


/* ============================================================
   GALERIA — 5 POR VEZ
============================================================ */

.barber-work-viewport{
    width:100% !important;

    overflow:hidden !important;
}

.barber-work-track{
    display:flex !important;

    gap:14px !important;

    width:100% !important;

    align-items:stretch !important;
}

.barber-work-card{
    box-sizing:border-box !important;

    flex:
        0 0
        calc((100% - 56px) / 5) !important;

    min-width:
        calc((100% - 56px) / 5) !important;

    max-width:
        calc((100% - 56px) / 5) !important;

    height:265px !important;

    overflow:hidden !important;

    border-radius:15px !important;

    background:#d9dde3 !important;

    box-shadow:none !important;
}

.barber-work-card img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    border-radius:0 !important;
}


/* ============================================================
   INSTAGRAM
============================================================ */

.barber-work-social{
    margin-top:16px !important;

    border:
        1px solid rgba(1,21,56,.09) !important;

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

    box-shadow:none !important;
}

.barber-work-social strong{
    color:var(--barber-bg) !important;
}

.barber-work-social p{
    color:#64748b !important;
}

.barber-work-social a{
    background:var(--barber-bg) !important;
    color:#fff !important;
}


/* ============================================================
   FOOTER
============================================================ */

.footer{
    margin:0 !important;

    padding-top:75px !important;

    background:var(--barber-bg) !important;

    border-top:
        1px solid rgba(255,255,255,.07) !important;
}


/* ============================================================
   RESPONSIVO
============================================================ */

@media(max-width:1050px){

    #servicos .service-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .barber-work-card{
        flex:
            0 0
            calc((100% - 42px) / 4) !important;

        min-width:
            calc((100% - 42px) / 4) !important;

        max-width:
            calc((100% - 42px) / 4) !important;
    }
}


@media(max-width:850px){

    #inicio{
        width:min(720px,calc(100% - 40px)) !important;

        min-height:auto !important;

        grid-template-columns:1fr !important;

        padding:
            70px 0 80px !important;
    }

    #inicio .hero-logo,
    #inicio .hero-image,
    #inicio .hero-visual,
    #inicio .hero-media,
    #inicio .barber-hero-photo{
        width:100% !important;

        max-width:550px !important;

        margin:0 auto !important;
    }

    .barber-work-card{
        flex:
            0 0
            calc((100% - 28px) / 3) !important;

        min-width:
            calc((100% - 28px) / 3) !important;

        max-width:
            calc((100% - 28px) / 3) !important;
    }
}


@media(max-width:720px){

    .header .nav{
        width:calc(100% - 28px) !important;
    }

    .header nav{
        overflow-x:auto !important;

        scrollbar-width:none;
    }

    .header nav::-webkit-scrollbar{
        display:none;
    }

    .header .menu{
        width:max-content !important;

        justify-content:flex-start !important;

        gap:18px !important;
    }

    .header .agendar{
        display:none !important;
    }

    #servicos,
    #galeria.barber-work{
        padding:
            72px 19px !important;
    }

    .barber-work-card{
        flex:
            0 0
            calc((100% - 14px) / 2) !important;

        min-width:
            calc((100% - 14px) / 2) !important;

        max-width:
            calc((100% - 14px) / 2) !important;

        height:260px !important;
    }
}


@media(max-width:520px){

    #servicos .service-grid{
        grid-template-columns:1fr !important;
    }

    #servicos .service-card{
        min-height:210px;
    }

    #inicio .actions{
        display:grid !important;

        grid-template-columns:1fr !important;
    }

    #inicio .actions a{
        width:100% !important;
    }
}