/* =========================================================
   BARBER AREIA — DIVISORES ENTRE TODAS AS SEÇÕES
========================================================= */

/*
  Cada seção passa a controlar sua própria linha.
*/
body > section,
main > section,
#inicio,
#assinatura,
#servicos,
#trabalho,
#galeria,
#instagram,
#contato{
    position:relative !important;
}


/* =========================================================
   LINHA PADRÃO
========================================================= */

.barber-section-divider{
    position:absolute !important;

    display:block !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

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

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

    z-index:9999 !important;

    pointer-events:none !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 0%,
            rgba(255,255,255,.55) 12%,
            rgba(255,255,255,.88) 50%,
            rgba(255,255,255,.55) 88%,
            rgba(255,255,255,.12) 100%
        ) !important;

    box-shadow:
        0 0 7px rgba(255,255,255,.12) !important;
}


/* =========================================================
   HERO — LINHA MAIS VISÍVEL
   fica exatamente embaixo do background 1
========================================================= */

#inicio > .barber-section-divider{
    height:2px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.55) 5%,
            rgba(255,255,255,.96) 50%,
            rgba(255,255,255,.55) 95%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 8px rgba(255,255,255,.20),
        0 2px 12px rgba(60,110,180,.20) !important;
}


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

@media(max-width:600px){

    .barber-section-divider{
        height:1px !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.75) 10%,
                rgba(255,255,255,.75) 90%,
                transparent
            ) !important;
    }

    #inicio > .barber-section-divider{
        height:2px !important;
    }
}