/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page{
    width:100%;

    height:100vh;
    height:100dvh;

    min-height:620px;

    background:#111111;
    color:#ffffff;

    overflow:hidden;
}


/* =========================================================
   SEÇÃO
========================================================= */

.contact-section{
    position:relative;

    width:100%;

    height:100%;
    min-height:620px;

    padding:
        clamp(18px,2.3vh,30px)
        clamp(28px,3.5vw,64px)
        clamp(18px,2.3vh,30px);

    box-sizing:border-box;

    overflow:hidden;
}

/* =========================================================
   IMAGEM DE FUNDO
========================================================= */

.contact-section::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        url("../assets/images/contact-hero.png");

    background-size:cover;

    /* desloca a imagem para a direita */
    background-position:82% center;

    background-repeat:no-repeat;

    z-index:0;
}


/* =========================================================
   ESCURECIMENTO
   ESCONDE A LOGO GIGANTE PRESENTE NA PRÓPRIA FOTO
========================================================= */

.contact-section::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            #111111 0%,
            rgba(17,17,17,.99) 33%,
            rgba(17,17,17,.96) 48%,
            rgba(17,17,17,.91) 61%,
            rgba(17,17,17,.76) 72%,
            rgba(17,17,17,.46) 84%,
            rgba(17,17,17,.22) 100%
        );

    z-index:1;

    pointer-events:none;
}


/* =========================================================
   LAYOUT
========================================================= */

.contact-layout{
    position:relative;

    width:100%;
    max-width:1500px;
    height:100%;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(390px,40%)
        minmax(0,60%);

    gap:clamp(34px,4vw,72px);

    align-items:stretch;

    min-height:0;

    z-index:2;
}


/* =========================================================
   FORMULÁRIO
========================================================= */

.contact-form-area{
    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    padding:0 8px 22px 0;

    box-sizing:border-box;

    /*
       A ROLAGEM FICA AQUI.
       O FORMULÁRIO PODE TER QUALQUER ALTURA.
    */

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior:contain;

    scrollbar-gutter:stable;
}


/* TEXTO */

.contact-intro{
    width:100%;

    margin:0 0 9px;

    font-size:clamp(.68rem,.72vw,.76rem);
    line-height:1.45;

    color:rgba(255,255,255,.74);
}


/* =========================================================
   SOCIALHUB

   NÃO LIMITAMOS MAIS A ALTURA DELE.
   ELE CRESCE NORMALMENTE E A COLUNA EXTERNA ROLA.
========================================================= */

.socialhub-form{
    position:relative;

    display:block;

    width:100%;
    height:auto;

    min-height:0;
    max-height:none;

    margin:0;

    padding:
        clamp(12px,1vw,16px)
        clamp(12px,1.1vw,18px)
        30px;

    box-sizing:border-box;

    background:rgba(17,17,17,.66);

    border:1px solid rgba(255,255,255,.10);
    border-radius:0;

    box-shadow:none;

    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);

    overflow:visible;
}


.socialhub-form > *{
    width:100%;
    max-width:100%;
}


.socialhub-form iframe{
    display:block;

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

    height:auto;

    border:0;
}


/* =========================================================
   SCROLL DO FORMULÁRIO
========================================================= */

.contact-form-area::-webkit-scrollbar{
    width:6px;
}


.contact-form-area::-webkit-scrollbar-track{
    background:rgba(255,255,255,.04);
}


.contact-form-area::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.28);
}


.contact-form-area{
    scrollbar-width:thin;
    scrollbar-color:
        rgba(255,255,255,.28)
        rgba(255,255,255,.04);
}


/* =========================================================
   INFORMAÇÕES
========================================================= */

.contact-info-area{
    width:100%;
    max-width:none;

    align-self:center;

    padding:
        clamp(22px,2.4vw,34px)
        clamp(24px,2.8vw,42px);

    box-sizing:border-box;

    background:rgba(17,17,17,.72);

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

    min-width:0;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.contact-heading{
    width:100%;

    margin:0 0 clamp(20px,2.5vh,30px);
}


.contact-heading .eyebrow{
    margin:0 0 7px;

    font-size:clamp(.52rem,.55vw,.59rem);

    line-height:1.2;

    letter-spacing:.18em;

    color:rgba(255,255,255,.48);
}


.contact-heading h1{
    width:100%;
    max-width:500px;

    margin:0;

    font-size:clamp(1.55rem,2vw,2.2rem);

    line-height:1.04;

    font-weight:600;

    letter-spacing:-.045em;

    color:#ffffff;
}


/* =========================================================
   WHATSAPP / INSTAGRAM / FACEBOOK
========================================================= */

.contact-channels{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    margin:0 0 clamp(22px,2.5vh,30px);

    border-top:1px solid rgba(255,255,255,.11);
    border-bottom:1px solid rgba(255,255,255,.11);
}


.contact-channel{
    display:block;

    min-width:0;

    padding:
        clamp(14px,1.3vw,19px)
        clamp(12px,1.4vw,20px);

    color:#ffffff;

    text-decoration:none;
}


.contact-channel:first-child{
    padding-left:0;
}


.contact-channel:not(:last-child){
    border-right:1px solid rgba(255,255,255,.10);
}


.contact-channel-name{
    display:block;

    margin:0 0 5px;

    font-size:clamp(.55rem,.58vw,.65rem);

    font-weight:500;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:rgba(255,255,255,.46);
}


.contact-channel-info{
    display:block;

    font-size:clamp(.67rem,.73vw,.81rem);

    font-weight:500;

    line-height:1.4;

    color:#ffffff;

    white-space:normal;

    overflow-wrap:anywhere;
}


/* =========================================================
   ENDEREÇO + MAPA
========================================================= */

.contact-location{
    width:100%;

    display:grid;

    grid-template-columns:
        minmax(160px,.60fr)
        minmax(290px,1.40fr);

    gap:clamp(20px,2.4vw,34px);

    align-items:center;
}


/* =========================================================
   ENDEREÇO
========================================================= */

.contact-address{
    width:100%;
}


.contact-address .eyebrow{
    margin:0 0 12px;

    font-size:clamp(.52rem,.55vw,.59rem);

    letter-spacing:.18em;

    color:rgba(255,255,255,.48);
}


.contact-address h2{
    margin:0 0 9px;

    font-size:clamp(1rem,1.1vw,1.2rem);

    font-weight:600;

    color:#ffffff;
}


.contact-address address{
    margin:0;

    font-style:normal;

    font-size:clamp(.66rem,.70vw,.76rem);

    line-height:1.65;

    color:rgba(255,255,255,.68);
}


/* =========================================================
   MAPA
========================================================= */

.contact-map{
    width:100%;

    height:clamp(175px,21vh,225px);

    background:#ffffff;

    overflow:hidden;

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


.contact-map iframe{
    display:block;

    width:100%;
    height:100%;

    border:0;

    filter:none;
}


/* =========================================================
   LOGO PEQUENA
   NÃO EXISTE BLOCO, CAIXA OU FUNDO
========================================================= */

.contact-page-logo{
    position:absolute;

    right:clamp(28px,3.5vw,64px);
    bottom:clamp(18px,2.5vh,30px);

    display:block;

    width:52px;
    max-width:52px;
    height:auto;

    margin:0;
    padding:0;

    background:none;
    background-color:transparent;

    border:none;
    border-radius:0;

    outline:none;

    box-shadow:none;

    filter:none;

    opacity:.82;

    z-index:4;
}


/* =========================================================
   AJUSTE FLUIDO PARA TELAS MAIS ESTREITAS DE COMPUTADOR
========================================================= */

@media(max-width:1150px) and (min-width:993px){

    .contact-section{
        padding-left:22px;
        padding-right:22px;
    }


    .contact-layout{
        grid-template-columns:
            minmax(360px,41%)
            minmax(0,59%);

        gap:28px;
    }


    .contact-info-area{
        padding:
            20px
            22px;
    }


    .contact-heading{
        margin-bottom:20px;
    }


    .contact-heading h1{
        font-size:1.55rem;
    }


    .contact-channels{
        margin-bottom:20px;
    }


    .contact-channel{
        padding:
            13px
            10px;
    }


    .contact-channel:first-child{
        padding-left:0;
    }


    .contact-location{
        grid-template-columns:
            minmax(145px,.58fr)
            minmax(250px,1.42fr);

        gap:18px;
    }


    .contact-map{
        height:175px;
    }


.contact-page-logo{
   width:72px;
max-width:72px;
}

}

/* =========================================================
   CONTACT PAGE - MOBILE
========================================================= */

@media (max-width:768px){

    /* =====================================================
       PÁGINA
    ===================================================== */

    .contact-page{
        width:100%;

        height:auto;
        min-height:100dvh;

        background:#111111;

        overflow:visible;
    }


    /* =====================================================
       SEÇÃO
    ===================================================== */

    .contact-section{
        position:relative;

        width:100%;

        height:auto;
        min-height:100dvh;

        padding:
            28px
            18px
            100px;

        box-sizing:border-box;

        overflow:hidden;
    }


    /* =====================================================
       FUNDO
    ===================================================== */

    .contact-section::before{
        background-position:72% center;
        background-size:cover;
    }


    .contact-section::after{
        background:
            linear-gradient(
                180deg,
                rgba(17,17,17,.98) 0%,
                rgba(17,17,17,.94) 28%,
                rgba(17,17,17,.91) 55%,
                rgba(17,17,17,.94) 78%,
                #111111 100%
            );
    }


    /* =====================================================
       LAYOUT PRINCIPAL
    ===================================================== */

    .contact-layout{
        width:100%;
        max-width:none;

        height:auto;

        margin:0;

        display:flex;
        flex-direction:column;

        gap:48px;

        align-items:stretch;
    }


    /* =====================================================
       FORMULÁRIO
    ===================================================== */

    .contact-form-area{
        width:100%;
        height:auto;

        min-width:0;
        min-height:0;

        padding:0;

        overflow:visible;

        scrollbar-gutter:auto;
    }


    .contact-intro{
        margin:0 0 12px;

        font-size:.78rem;
        line-height:1.55;

        color:rgba(255,255,255,.74);
    }


    /* =====================================================
       CAIXA DO FORMULÁRIO
    ===================================================== */

    .socialhub-form{
    width:100%;

    height:auto;
    max-height:none;

    padding:
        14px
        12px
        24px;

    background:rgba(17,17,17,.76);

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

    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);

    overflow:visible;
}


    .socialhub-form > *{
        width:100%;
        max-width:100%;
    }


    .socialhub-form iframe{
        display:block;

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

        border:0;
    }

    /* =====================================================
       ÁREA DE INFORMAÇÕES
    ===================================================== */

    .contact-info-area{
        width:100%;
        max-width:none;

        align-self:auto;

        padding:
            26px
            20px;

        background:rgba(17,17,17,.78);

        border-top:1px solid rgba(255,255,255,.09);
        border-bottom:1px solid rgba(255,255,255,.09);
    }


    /* =====================================================
       TÍTULO
    ===================================================== */

    .contact-heading{
        width:100%;

        margin:0 0 26px;
    }


    .contact-heading .eyebrow{
        margin:0 0 9px;

        font-size:.58rem;

        line-height:1.3;

        letter-spacing:.18em;
    }


    .contact-heading h1{
        width:100%;
        max-width:340px;

        font-size:1.75rem;

        line-height:1.06;

        letter-spacing:-.04em;
    }


    /* =====================================================
       REDES / CONTATOS
    ===================================================== */

    .contact-channels{
        width:100%;

        display:flex;
        flex-direction:column;

        margin:0 0 30px;

        border-top:1px solid rgba(255,255,255,.11);
        border-bottom:1px solid rgba(255,255,255,.11);
    }


    .contact-channel{
        width:100%;

        padding:
            17px
            0;

        box-sizing:border-box;
    }


    .contact-channel:first-child{
        padding-left:0;
    }


    .contact-channel:not(:last-child){
        border-right:0;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }


    .contact-channel-name{
        margin:0 0 6px;

        font-size:.60rem;

        letter-spacing:.09em;
    }


    .contact-channel-info{
        font-size:.82rem;

        line-height:1.45;
    }


    /* =====================================================
       LOCALIZAÇÃO
    ===================================================== */

    .contact-location{
        width:100%;

        display:flex;
        flex-direction:column;

        gap:24px;

        align-items:stretch;
    }


    /* ENDEREÇO */

    .contact-address{
        width:100%;
    }


    .contact-address .eyebrow{
        margin:0 0 10px;

        font-size:.58rem;
    }


    .contact-address h2{
        margin:0 0 9px;

        font-size:1.15rem;
    }


    .contact-address address{
        font-size:.78rem;

        line-height:1.65;
    }


    /* =====================================================
       MAPA
    ===================================================== */

    .contact-map{
        width:100%;

        height:240px;

        background:#ffffff;

        overflow:hidden;
    }


    .contact-map iframe{
        width:100%;
        height:100%;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .contact-page-logo{
        position:absolute;

        right:20px;
        bottom:28px;

        width:68px;
        max-width:68px;

        height:auto;

        opacity:.82;
    }

}