:root{
    --navy:#011538;
    --navy-deep:#000C24;
    --navy-menu:#000A20;
    --navy-soft:#061D40;
    --navy-light:#0B2852;

    /* areia menos amarelo e menos branco */
    --sand:#D9D5CC;
    --sand-soft:#E3DFD6;
    --sand-card:#EBE8E1;

    --white:#FFFFFF;
    --dark:#071A35;
    --muted:#687386;
}


/* =========================================================
   BASE
========================================================= */

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

body{
    margin:0 !important;
    background:var(--navy) !important;
    overflow-x:hidden !important;
}


/* =========================================================
   MENU — MAIS FORTE
========================================================= */

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

    width:100% !important;

    background:
        linear-gradient(
            180deg,
            #000A20 0%,
            #00102C 100%
        ) !important;

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

    box-shadow:
        0 8px 35px rgba(0,0,0,.18) !important;

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

.header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent 5%,
            rgba(255,255,255,.18) 50%,
            transparent 95%
        );
}

.header .nav{
    width:min(1180px,calc(100% - 42px)) !important;
    min-height:74px !important;

    margin:0 auto !important;

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

    gap:28px !important;
}

.header .logo img{
    height:48px !important;
    width:auto !important;
    object-fit:contain !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{
    position:relative;

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

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

    letter-spacing:1px !important;

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

    transition:.2s ease;
}

.header .menu a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-9px;

    width:0;
    height:1px;

    transform:translateX(-50%);

    background:#fff;

    transition:width .2s ease;
}

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

.header .menu a:hover::after{
    width:100%;
}

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

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

    border:1px solid rgba(255,255,255,.75) !important;
    border-radius:8px !important;

    background:#fff !important;
    color:var(--navy-deep) !important;

    text-decoration:none !important;

    font-size:9px !important;
    font-weight:900 !important;
    letter-spacing:.9px !important;
}


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

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

    box-sizing:border-box !important;

    width:100% !important;
    min-height:535px !important;

    margin:0 !important;

    padding:
        52px
        max(24px,calc((100% - 1120px)/2))
        68px !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,545px)
        minmax(300px,420px) !important;

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

    gap:50px !important;

    overflow:hidden !important;

    /*
       Fundo com referência sutil às listras
       clássicas de barber pole.
       Quase monocromático.
    */

    background:
        radial-gradient(
            circle at 77% 45%,
            rgba(44,95,164,.25) 0%,
            rgba(15,54,105,.12) 24%,
            transparent 48%
        ),

        radial-gradient(
            circle at 15% 90%,
            rgba(255,255,255,.035),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            rgba(255,255,255,.016) 0 7%,
            transparent 7% 16%,
            rgba(255,255,255,.012) 16% 23%,
            transparent 23% 100%
        ),

        linear-gradient(
            135deg,
            #011538 0%,
            #031A3A 55%,
            #08244C 100%
        ) !important;
}


/* textura diagonal bem sutil */

#inicio::before{
    content:"";

    position:absolute;
    z-index:-1;

    inset:-100px;

    opacity:.14;

    background:
        repeating-linear-gradient(
            125deg,
            transparent 0px,
            transparent 90px,
            rgba(255,255,255,.035) 91px,
            rgba(255,255,255,.035) 92px,
            transparent 93px,
            transparent 180px
        );

    pointer-events:none;
}


/* linha inferior elegante */

#inicio::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:min(1120px,calc(100% - 48px));
    height:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );
}


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

#inicio .hero-content{
    position:relative;
    z-index:2;

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

    padding:0 !important;
}

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

    gap:10px !important;

    margin:0 0 17px !important;

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

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

    letter-spacing:2.5px !important;

    text-transform:uppercase !important;
}

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

    width:26px;
    height:1px;

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

#inicio h1{
    max-width:540px !important;

    margin:0 !important;

    color:#fff !important;

    font-size:
        clamp(47px,5vw,69px) !important;

    line-height:.95 !important;

    letter-spacing:-2.6px !important;
}

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

    margin:21px 0 0 !important;

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

    font-size:14px !important;

    line-height:1.72 !important;
}

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

    display:flex !important;
    flex-wrap:wrap !important;

    gap:9px !important;
}


/* =========================================================
   FOTO — BORDA COLADA NA IMAGEM
========================================================= */

/*
   O elemento externo não tem:
   padding
   background
   borda
   card
   moldura

   A borda é aplicada DIRETAMENTE no <img>.
*/

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

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

    height:auto !important;

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

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

    border-radius:0 !important;

    background:none !important;

    box-shadow:none !important;

    overflow:visible !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{
    box-sizing:border-box !important;

    display:block !important;

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

    height:auto !important;
    max-height:410px !important;

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

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

    /*
       BORDA DIRETAMENTE NA FOTO
    */

    border:
        2px solid rgba(255,255,255,.80) !important;

    border-radius:23px !important;

    outline:0 !important;

    background:transparent !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,.19) !important;

    filter:none !important;
    transform:none !important;
    opacity:1 !important;
}


/* =========================================================
   CLUB
========================================================= */

#assinatura{
    position:relative !important;

    margin:0 !important;

    padding:
        66px 24px 78px !important;

    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(40,83,143,.12),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #031A3A 0%,
            #011538 100%
        ) !important;
}

.barber-club-inner{
    width:min(1120px,100%) !important;
    margin:0 auto !important;
}

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.047),
            rgba(255,255,255,.021)
        ) !important;

    box-shadow:none !important;
}


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

#servicos{
    position:relative !important;

    margin:0 !important;

    background:
        linear-gradient(
            180deg,
            #D7D4CC 0%,
            #DEDBD3 100%
        ) !important;

    color:var(--dark) !important;

    border:0 !important;
}


/* suaviza encontro azul -> areia */

#servicos::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:1px;

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

#servicos .service-card{
    border:
        1px solid rgba(1,21,56,.085) !important;

    background:
        rgba(241,239,233,.72) !important;

    box-shadow:
        0 9px 28px
        rgba(1,21,56,.045) !important;
}

#servicos .service-card:hover{
    box-shadow:
        0 15px 34px
        rgba(1,21,56,.075) !important;
}

#servicos .service-icon{
    background:
        linear-gradient(
            145deg,
            #011538,
            #09264F
        ) !important;
}


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

#galeria.barber-work{
    margin:0 !important;

    background:
        linear-gradient(
            180deg,
            #DEDBD3 0%,
            #E5E2DA 100%
        ) !important;

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

.barber-work-card{
    border:
        1px solid rgba(1,21,56,.08) !important;

    background:#D1CEC6 !important;

    box-shadow:
        0 8px 24px
        rgba(1,21,56,.045) !important;
}

.barber-work-social{
    background:
        rgba(238,236,230,.72) !important;

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

    box-shadow:none !important;
}


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

.barber-contact-strip,
.footer{
    background:
        linear-gradient(
            180deg,
            #011538,
            #000D27
        ) !important;
}


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

@media(max-width:850px){

    #inicio{
        grid-template-columns:1fr !important;

        padding:
            45px 22px
            60px !important;

        gap:36px !important;
    }

    #inicio .hero-content{
        max-width:650px !important;
    }

    #inicio .hero-logo,
    #inicio .hero-image,
    #inicio .hero-visual,
    #inicio .hero-media,
    #inicio .barber-hero-photo{
        width:min(100%,500px) !important;
        max-width:500px !important;

        margin:0 auto !important;
    }

    #inicio .hero-logo img,
    #inicio .hero-image img,
    #inicio .hero-visual img,
    #inicio .hero-media img,
    #inicio .barber-hero-photo img{
        max-width:500px !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;
    }
}