:root{
    --navy:#011538;
    --navy-deep:#000b22;
    --navy-soft:#051c3e;
    --navy-card:#082247;

    --sand:#d3d0c8;
    --sand-soft:#ddd9d1;
    --sand-card:#e7e4dd;

    --ink:#071a35;
    --muted:#667080;
}


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

.header{
    background:
        linear-gradient(
            180deg,
            #00091d 0%,
            #00102d 100%
        ) !important;

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


/* ============================================================
   HERO — MAIS COMPACTO
============================================================ */

#inicio{
    min-height:0 !important;

    padding-top:44px !important;
    padding-bottom:52px !important;

    gap:38px !important;
}


/*
   A logo NÃO deve mais aparecer
   abaixo da tag do hero principal.
*/

#inicio .barber-hero-brand{
    display:none !important;
}


/* foto horizontal */

#inicio .hero-logo,
#inicio .hero-image,
#inicio .hero-visual,
#inicio .hero-media,
#inicio .barber-hero-photo{
    max-width:450px !important;
}

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

    aspect-ratio:16/9 !important;

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

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

    border-radius:22px !important;
}


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

#assinatura{
    padding:
        48px 22px 55px !important;

    background:
        radial-gradient(
            ellipse at 72% 25%,
            rgba(54,101,164,.12),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #031a3b,
            #011538
        ) !important;
}

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

    margin:0 auto !important;

    gap:12px !important;
}

.barber-club-main,
.barber-club-side{
    box-sizing:border-box !important;

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

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

    border-radius:16px !important;

    box-shadow:none !important;
}


/* ============================================================
   LOGO NO CARD "SEU CORTE..."
============================================================ */

.barber-club-side{
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;

    justify-content:center !important;

    padding:
        28px 27px !important;
}

.barber-club-side-logo{
    width:auto;

    margin:0 0 15px;

    display:block;
}

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

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

    max-width:125px !important;

    object-fit:contain !important;

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

    background:transparent !important;

    box-shadow:none !important;
}


/* ============================================================
   SERVIÇOS — MENOR E PROPORCIONAL
============================================================ */

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

    padding:
        58px 22px 61px !important;

    background:
        linear-gradient(
            180deg,
            #d0cdc5 0%,
            #d6d3cb 100%
        ) !important;
}

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

    margin:0 auto !important;
}

#servicos h2{
    margin-bottom:0 !important;

    font-size:
        clamp(32px,3.5vw,46px) !important;
}

#servicos .barber-services-intro{
    max-width:510px !important;

    margin-top:12px !important;
}

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

    gap:11px !important;
}

#servicos .service-card{
    box-sizing:border-box !important;

    min-height:190px !important;

    padding:21px !important;

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

    border-radius:14px !important;

    background:
        rgba(234,231,224,.72) !important;

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

#servicos .service-icon{
    width:39px !important;
    height:39px !important;

    margin-bottom:18px !important;

    border-radius:10px !important;
}

#servicos .service-icon svg{
    width:19px !important;
    height:19px !important;
}

#servicos .service-card h3{
    margin-bottom:7px !important;

    font-size:17px !important;
}

#servicos .service-card p{
    font-size:11px !important;
    line-height:1.55 !important;
}


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

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

    padding:
        58px 22px 62px !important;

    background:
        linear-gradient(
            180deg,
            #d6d3cb 0%,
            #dddad3 100%
        ) !important;
}

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

    margin:auto !important;
}

.barber-work h2{
    font-size:
        clamp(32px,3.5vw,46px) !important;
}

.barber-work-card{
    height:225px !important;
}


/* ============================================================
   CONTATO + MAPA
============================================================ */

.barber-contact-strip{
    box-sizing:border-box !important;

    padding:
        54px 22px !important;

    background:
        radial-gradient(
            ellipse at 82% 50%,
            rgba(53,99,162,.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #011538,
            #00102d
        ) !important;

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

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

    margin:auto !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,.85fr)
        minmax(380px,1.15fr) !important;

    gap:32px !important;

    align-items:center !important;
}

.barber-contact-copy{
    min-width:0;
}

.barber-contact-label{
    margin-bottom:10px !important;
}

.barber-contact-inner h2{
    margin:
        0 0 13px !important;

    font-size:
        clamp(31px,3.5vw,45px) !important;
}

.barber-contact-inner p{
    margin:0 !important;

    max-width:490px !important;

    line-height:1.65 !important;
}

.barber-contact-actions{
    margin-top:21px !important;

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

    gap:8px !important;
}


/* mapa */

.barber-map{
    box-sizing:border-box;

    width:100%;
    height:300px;

    overflow:hidden;

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

    border-radius:18px;

    background:#061a37;

    box-shadow:
        0 18px 45px rgba(0,0,0,.15);
}

.barber-map iframe{
    display:block;

    width:100%;
    height:100%;

    border:0;

    filter:
        saturate(.82)
        contrast(.95);
}


/* ============================================================
   FOOTER — SEM VAZIOS
============================================================ */

.footer{
    margin:0 !important;

    padding:
        34px 22px 25px !important;

    background:
        linear-gradient(
            180deg,
            #000e29,
            #00091c
        ) !important;

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

.footer > *:first-child{
    margin-top:0 !important;
}

.footer > *:last-child{
    margin-bottom:0 !important;
}


/*
   reduz blocos internos que patches anteriores
   possam ter deixado exagerados
*/

.footer section,
.footer .footer-inner,
.footer .footer-content{
    min-height:0 !important;

    padding-top:0 !important;
    padding-bottom:0 !important;
}


/* ============================================================
   REMOVER SOBRAS VISUAIS
============================================================ */

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


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

@media(max-width:850px){

    #inicio{
        padding:
            38px 20px 48px !important;

        gap:28px !important;
    }

    #assinatura{
        padding:
            43px 20px 48px !important;
    }

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

    .barber-contact-inner{
        grid-template-columns:1fr !important;

        gap:26px !important;
    }

    .barber-map{
        height:320px;
    }
}


@media(max-width:650px){

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

    #servicos .service-card{
        min-height:180px !important;
    }

    .barber-club-side{
        padding:23px !important;
    }
}


@media(max-width:480px){

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

    .barber-map{
        height:270px;
    }

    .footer{
        padding:
            28px 18px 22px !important;
    }
}