:root{
    --navy-950:#00091c;
    --navy-900:#00112f;
    --navy-850:#011538;
    --navy-800:#031b3e;
    --navy-700:#08264f;

    /*
      Areia dessaturado.
      Mais elegante e menos "branco/amarelo".
    */
    --sand-500:#cbc8c0;
    --sand-400:#d5d2ca;
    --sand-300:#dedbd4;
    --sand-card:#e7e4dd;

    --ink:#071a35;
    --muted:#626c7b;
    --white:#fff;
}


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

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

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


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

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

    width:100% !important;

    background:
        linear-gradient(
            180deg,
            #00091c 0%,
            #00102c 100%
        ) !important;

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

    box-shadow:
        0 10px 35px rgba(0,0,0,.16) !important;

    backdrop-filter:blur(18px);
}

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

    margin:auto !important;

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

    gap:26px !important;
}


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

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

    box-sizing:border-box !important;

    width:100% !important;
    min-height:auto !important;

    margin:0 !important;

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

    display:grid !important;

    grid-template-columns:
        minmax(0,520px)
        minmax(320px,460px) !important;

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

    gap:42px !important;

    background:
        radial-gradient(
            ellipse at 78% 48%,
            rgba(55,104,170,.18),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 15% 80%,
            rgba(255,255,255,.035),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #011538 0%,
            #031b3e 58%,
            #07254d 100%
        ) !important;

    overflow:hidden !important;
}


/* textura muito leve */

#inicio::before{
    content:"";

    position:absolute;
    z-index:-1;

    inset:0;

    opacity:.16;

    background:
        repeating-linear-gradient(
            125deg,
            transparent 0,
            transparent 120px,
            rgba(255,255,255,.035) 121px,
            transparent 122px,
            transparent 240px
        );

    pointer-events:none;
}


#inicio::after{
    content:"";

    position:absolute;

    bottom:0;
    left:50%;

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

    transform:translateX(-50%);

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


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

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

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

    padding:0 !important;
}

#inicio .tag{
    margin:0 0 8px !important;

    display:flex !important;
    align-items:center !important;

    gap:9px !important;

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

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

    letter-spacing:2.2px !important;
    text-transform:uppercase !important;
}

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

    width:23px;
    height:1px;

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


/* ============================================================
   LOGO ABAIXO DO "SINCE 2019"
============================================================ */

.barber-hero-brand{
    display:flex;

    align-items:center;

    width:max-content;

    margin:
        0 0 18px 0;

    padding:
        4px 0 0;

    opacity:.96;
}

.barber-hero-brand img{
    display:block !important;

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

    max-width:125px !important;

    object-fit:contain !important;

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

    background:transparent !important;

    box-shadow:none !important;

    filter:none !important;
}


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

    margin:0 !important;

    color:#fff !important;

    font-size:
        clamp(45px,4.8vw,66px) !important;

    font-weight:800 !important;

    line-height:.95 !important;

    letter-spacing:-2.5px !important;
}


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

    margin:20px 0 0 !important;

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

    font-size:14px !important;

    line-height:1.72 !important;
}


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

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

    gap:9px !important;
}


/* ============================================================
   FOTO PRINCIPAL
============================================================ */

/*
   IMPORTANTE:

   O container não cria moldura.
   A borda está DIRETAMENTE no IMG.

   Também forçamos formato horizontal:
   460 x aproximadamente 290.

   Assim ela não fica enorme na vertical.
*/

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

    box-sizing:border-box !important;

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

    height:auto !important;

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

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

    border-radius:0 !important;

    background:transparent !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{
    display:none !important;
    content:none !important;
}


/*
   BORDA COLADA NA IMAGEM.
*/

#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:460px !important;

    /*
       horizontal de verdade
    */

    aspect-ratio:16 / 10 !important;

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

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

    object-fit:cover !important;
    object-position:center 42% !important;

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

    border-radius:24px !important;

    outline:0 !important;

    background:transparent !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.22) !important;

    opacity:1 !important;

    transform:none !important;
}


/*
   A logo inserida no lado esquerdo não deve herdar
   nenhuma regra da fotografia.
*/

#inicio .barber-hero-brand img{
    width:auto !important;
    max-width:125px !important;
    height:46px !important;

    aspect-ratio:auto !important;

    object-fit:contain !important;

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

    box-shadow:none !important;
}


/* ============================================================
   ASSINATURA
============================================================ */

#assinatura{
    position:relative !important;

    margin:0 !important;

    padding:
        62px 24px 72px !important;

    background:
        radial-gradient(
            ellipse at 22% 30%,
            rgba(55,105,175,.10),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #031b3e,
            #011538
        ) !important;
}


/* ============================================================
   ÁREA CLARA UNIFORME
============================================================ */

#servicos{
    position:relative !important;

    margin:0 !important;

    padding-top:82px !important;
    padding-bottom:84px !important;

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

    color:var(--ink) !important;
}


#galeria.barber-work{
    position:relative !important;

    margin:0 !important;

    padding-top:78px !important;
    padding-bottom:82px !important;

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

    color:var(--ink) !important;

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


/* títulos mais legíveis */

#servicos h2,
#galeria h2{
    color:#061a36 !important;
}

#servicos p,
#galeria .barber-work-description{
    color:#5e6877 !important;
}


/* cards */

#servicos .service-card{
    background:
        rgba(235,232,225,.78) !important;

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

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


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

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

.barber-work-track{
    gap:12px !important;
}

.barber-work-card{
    position:relative;

    overflow:hidden !important;

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

    border-radius:14px !important;

    background:#c5c3bc !important;

    cursor:zoom-in !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease !important;
}

.barber-work-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 15px 32px rgba(1,21,56,.10) !important;
}

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

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

    object-fit:cover !important;

    cursor:zoom-in !important;
}


/* ============================================================
   LIGHTBOX
============================================================ */

.barber-lightbox-v3{
    position:fixed;

    z-index:99999;

    inset:0;

    display:flex;

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

    padding:30px;

    background:
        rgba(0,7,20,.92);

    backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}

.barber-lightbox-v3.is-open{
    opacity:1;
    visibility:visible;
}

.barber-lightbox-v3 img{
    display:block;

    max-width:min(1100px,92vw);
    max-height:88vh;

    width:auto;
    height:auto;

    object-fit:contain;

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

    border-radius:18px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);
}

.barber-lightbox-close{
    position:absolute;

    top:22px;
    right:25px;

    width:44px;
    height:44px;

    display:flex;

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

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

    border-radius:50%;

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

    color:#fff;

    font-size:24px;

    cursor:pointer;
}


/* ============================================================
   ELIMINA QUALQUER "X" SOLTO ENTRE SEÇÕES
============================================================ */

.barber-section-x,
.barber-orphan-x{
    display:none !important;
}


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

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


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

@media(max-width:850px){

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

        gap:32px !important;

        padding:
            42px 22px
            55px !important;
    }

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

    #inicio .hero-logo,
    #inicio .hero-image,
    #inicio .hero-visual,
    #inicio .hero-media,
    #inicio .barber-hero-photo{
        width:min(100%,520px) !important;
        max-width:520px !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:520px !important;
    }
}


@media(max-width:550px){

    #inicio h1{
        font-size:
            clamp(42px,12vw,57px) !important;
    }

    #inicio .actions{
        display:grid !important;
        grid-template-columns:1fr !important;
    }

    #inicio .actions a{
        width:100% !important;
        box-sizing:border-box;
    }

    .barber-hero-brand img{
        height:40px !important;
    }

    .barber-lightbox-v3{
        padding:15px;
    }
}