/* ==========================================================
   BARBER AREIA
   DIVISAS ENTRE AS SEÇÕES

   A linha pertence ao TOPO da seção seguinte.
   Portanto fica exatamente na divisa.
========================================================== */


/*
   Remove bordas/divisores antigos do Hero.
*/

#inicio{
    border-bottom:0 !important;
}


/*
   Esconde elementos antigos que colocavam
   a linha DENTRO do Hero.
*/

.hero-divider,
.barber-section-divider{
    display:none !important;
}


/* ==========================================================
   DIVISA:
   HERO
   --------------------
   BARBER AREIA CLUB
========================================================== */

#assinatura{
    border-top:
        1px solid rgba(255,255,255,.82) !important;
}


/* ==========================================================
   DIVISA:
   CLUB
   --------------------
   SERVIÇOS
========================================================== */

#servicos{
    border-top:
        1px solid rgba(255,255,255,.68) !important;
}


/* ==========================================================
   DIVISA:
   SERVIÇOS
   --------------------
   NOSSO TRABALHO
========================================================== */

#trabalho,
#galeria{
    border-top:
        1px solid rgba(255,255,255,.68) !important;
}


/* evita linha duplicada caso trabalho e galeria coexistam */

#trabalho + #galeria,
#galeria + #trabalho{
    border-top:0 !important;
}


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

#instagram{
    border-top:
        1px solid rgba(255,255,255,.68) !important;
}


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

#contato{
    border-top:
        1px solid rgba(255,255,255,.68) !important;
}


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

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


/* ==========================================================
   LINHA DO HERO UM POUCO MAIS DEFINIDA

   Como está no TOP do #assinatura,
   ela fica exatamente onde termina o background do Hero.
========================================================== */

#inicio + #assinatura,
#assinatura{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 -1px 8px rgba(255,255,255,.08) !important;
}


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

   Não força 465x431.
   A nova imagem é 4:3 (1448x1086).

   Assim não fica alargada.
========================================================== */

#inicio .barber-hero-photo{
    width:100% !important;
    max-width:465px !important;

    height:auto !important;

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

    aspect-ratio:auto !important;

    overflow:visible !important;

    background:transparent !important;
}


#inicio .barber-hero-photo > img{
    display:block !important;

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

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

    /*
       1448 / 1086 = proporção 4:3
    */

    aspect-ratio:4 / 3 !important;

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

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

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

    border-radius:
        23px !important;

    background:transparent !important;

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

    opacity:1 !important;
    visibility:visible !important;

    transform:none !important;
}


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

@media(max-width:850px){

    #inicio .barber-hero-photo{
        width:min(100%,465px) !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    #inicio .barber-hero-photo > img{
        width:100% !important;
        height:auto !important;

        aspect-ratio:4 / 3 !important;

        object-fit:cover !important;
    }
}