/*
==============================================================
 BARBER AREIA — FOTO PRINCIPAL NATURAL

 Não força:
 - altura
 - aspect-ratio
 - cover
 - contain

 O navegador usa a proporção REAL do JPEG.
==============================================================
*/


/* CONTÊINER */

#inicio .hero-logo,
#inicio .hero-image,
#inicio .hero-visual,
#inicio .hero-media,
#inicio .barber-hero-photo{

    box-sizing:border-box !important;

    width:auto !important;
    max-width:465px !important;

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

    aspect-ratio: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;

    justify-self:center !important;
}


/* REMOVE QUALQUER MOLDURA ANTIGA */

#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;
}


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

 width:auto + height:auto =
 proporção original preservada.
==============================================================
*/

#inicio .hero-logo > img:not(.barber-hero-brand 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:auto !important;
    max-width:465px !important;

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

    min-width:0 !important;
    min-height:0 !important;

    aspect-ratio:auto !important;

    object-fit:initial !important;
    object-position:initial !important;

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

    /*
       BORDA DIRETAMENTE NA FOTO
    */

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

    border-radius:23px !important;

    outline:none !important;

    background:transparent !important;

    box-shadow:
        0 18px 44px rgba(0,0,0,.20) !important;

    transform:none !important;
    scale:none !important;

    filter:none !important;

    opacity:1 !important;
}


/*
==============================================================
 IMPORTANTE:
 A LOGO DO CLUB NÃO HERDA NADA DA FOTO
==============================================================
*/

.barber-club-side-logo img{

    width:auto !important;

    max-width:210px !important;

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

    aspect-ratio:auto !important;

    object-fit:contain !important;

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

    box-shadow:none !important;

    margin:0 auto !important;
}


/*
==============================================================
 CELULAR
==============================================================
*/

@media(max-width:850px){

    #inicio .hero-logo,
    #inicio .hero-image,
    #inicio .hero-visual,
    #inicio .hero-media,
    #inicio .barber-hero-photo{

        width:100% !important;
        max-width:465px !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{

        /*
           No celular a largura pode diminuir,
           mas a altura SEMPRE acompanha.
        */

        width:auto !important;

        max-width:100% !important;

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

        aspect-ratio:auto !important;

        margin:0 auto !important;
    }
}


@media(max-width:520px){

    #inicio .hero-logo,
    #inicio .hero-image,
    #inicio .hero-visual,
    #inicio .hero-media,
    #inicio .barber-hero-photo{

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


    #inicio .hero-logo > img,
    #inicio .hero-image > img,
    #inicio .hero-visual > img,
    #inicio .hero-media > img,
    #inicio .barber-hero-photo > img{

        width:auto !important;

        max-width:100% !important;

        height:auto !important;

        border-radius:19px !important;
    }
}