/* ---------------------------------------------------------------------------
| AREA DO CLIENTE
|
| O banner e o inicio do corpo reaproveitam diretamente as regras da pagina
| Trabalhe Conosco. Aqui ficam os ajustes do conteudo e a moldura do iframe.
|
| SOBRE ESTILIZAR O IFRAME: nao da. O conteudo vem de mobuss.com.br, e a
| politica de mesma origem impede injetar CSS ou tocar no DOM de la. Estas
| regras estilizam o ELEMENTO iframe e o que esta em volta dele, nunca o que
| esta dentro.
|
| Dois fatos medidos na propria pagina do Mobuss, que explicam os numeros:
|
|   - html e body deles sao transparentes ( rgba(0,0,0,0) ), entao o fundo do
|     painel aparece por baixo do formulario. E o que faz ele parecer parte da
|     pagina em vez de um retangulo branco colado.
|
|   - a altura do conteudo varia com a largura: ~1104px a 1280px de viewport e
|     ~1935px a 500px. Cross-origin nao permite ler essa altura, entao ela e
|     fixada por faixa aqui embaixo, sempre com folga. Folga custa pouco: por
|     causa da transparencia, sobra vira espaco bege e nao caixa branca vazia.
|
|   - o conteudo deles para de refluir em ~508px de largura. Abaixo disso o
|     iframe ganha rolagem horizontal PROPRIA ( fica contida nele, a pagina nao
|     rola de lado ). Preferi isso a reduzir por transform: a 63% que caberia
|     num celular de 375px o texto fica dificil de ler. Para quem estiver no
|     celular, o link "abrir em nova aba" logo abaixo e o melhor caminho.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
| HERDANDO O CONTEXTO DA PAGINA TRABALHE CONOSCO
|
| O bemavi-contato.css define --post-container e --contato-edge dentro de
| "body.page-contato.bemavi-emp-page", e esconde o logo do header no mesmo
| escopo. Como o body class vem do alias da rota, esta pagina nasce como
| "body.page-area-do-cliente" e NAO herdava nada disso — o resultado era o
| .post-container sem largura ( esticava ate a borda ) e o logo do header
| aparecendo duplicado por cima do banner, que ja tem o seu.
|
| Os quatro blocos abaixo repetem os mesmos valores de la, nas mesmas faixas.
| Se aqueles forem ajustados algum dia, estes precisam acompanhar.
--------------------------------------------------------------------------- */

body.page-area-do-cliente.bemavi-emp-page {
    --post-container: min(1280px, calc(100vw - 80px));
    --contato-edge: max(24px, calc((100vw - var(--post-container)) / 2));
}

/* O banner tem o proprio logo ( .contato-hero-logo ); o do header sobraria. */
body.page-area-do-cliente .bemavi-header-brand {
    display: none;
}

/* Mesmo comportamento do header usado em Trabalhe Conosco. */
body.page-area-do-cliente .smooth-scroll-content {
    padding-top: 0;
    padding-bottom: 0;
}

body.page-area-do-cliente .site-header.bemavi-site-header,
body.page-area-do-cliente .site-header.bemavi-site-header.is-compact {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 120px;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.page-area-do-cliente .site-header.bemavi-site-header.is-hide,
body.page-area-do-cliente.header-lock-visible .site-header.bemavi-site-header {
    transform: translateY(0) !important;
}

@media only screen and (min-width: 1025px) {
    html:has(body.page-area-do-cliente),
    body.page-area-do-cliente {
        margin-top: 0;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    body.page-area-do-cliente.bemavi-emp-page {
        --post-container: min(1120px, calc(100vw - 8vw));
    }
}

@media only screen and (max-width: 1024px) {
    body.page-area-do-cliente.bemavi-emp-page {
        --post-container: calc(100vw - 48px);
    }
}

@media only screen and (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    body.page-area-do-cliente.bemavi-emp-page {
        --post-container: calc(100vw - var(--bemavi-mobile-gutter, 6vw) * 2);
        --contato-mobile-edge: min(32px, 5.93vw);
        --contato-mobile-form-left: min(61px, 11.3vw);
        --contato-mobile-panel: calc(100vw - var(--contato-mobile-form-left));
        --contato-mobile-control: min(417px, 77.22vw);
        --contato-mobile-control-left: calc((100vw - var(--contato-mobile-control)) / 2);
        --contato-mobile-hero-shift: min(24px, 6vw);
        --contato-mobile-card: min(440px, 81.48vw);
        --contato-mobile-newsletter: min(476px, 88.15vw);
        --trabalhe-mobile-left: min(86px, 15.93vw);
        --trabalhe-mobile-width: calc(100vw - var(--trabalhe-mobile-left) - var(--contato-mobile-edge));
    }
}


.ac-main {
    background: var(--bemavi-bg);
}

/* Mantem todo o conteudo acima do degradê de .trabalhe-main::before. */
.ac-main > .post-container {
    position: relative;
    z-index: 1;
}

/*
| ALINHAMENTO COM O TEXTO DO BANNER
|
| Convencao do site, medida na pagina de contato a 1440px:
|
|   borda do .post-container ......... 160
|   titulo e sub do hero ............. 268   ( +108 )
|   .contato-intro-title do corpo .... 268   ( mesmo recuo )
|   .bemavi-newsletter ............... 160   ( bloco largo fica na borda )
|
| Ou seja: TEXTO recua 108px, BLOCO LARGO fica na borda do container. Os
| valores por faixa sao os mesmos do .contato-hero-inner ( 108px no desktop,
| 40px ate 1024px ), para o corpo acompanhar o banner quando ele se mexe.
|
| O painel do iframe fica de fora do recuo de proposito: alem de seguir a
| convencao dos blocos largos, largura extra no iframe significa conteudo mais
| baixo la dentro.
*/
.ac-intro {
    width: min(720px, 100%);
    margin: 0 0 46px;
    padding: 128px 0 0 108px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ac-intro-title {
    margin: 0 0 12px;
    color: var(--bemavi-dark);
    font-size: 28px;
    line-height: 38px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: normal;
}

.ac-intro-text {
    margin: 0;
    color: var(--bemavi-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* A moldura: e daqui que vem a identidade do projeto em volta do formulario. */
.ac-frame-panel {
    background: var(--bemavi-cream);
    border: 1px solid var(--bemavi-sand);
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 14px 34px rgba(65, 53, 50, .10);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ac-frame-wrap {
    position: relative;
    background: transparent;
    border-radius: 6px;
    overflow: hidden;
}

/*
| ALTURAS — medidas na propria pagina do Mobuss, largura por largura:
|
|   iframe 1280px -> conteudo 1104px de altura
|   iframe 1082px -> 1130px
|   iframe  700px -> 1338px
|   iframe  500px -> 1961px
|
| Quanto mais estreito, mais alto: o formulario reflui e empilha. Cross-origin
| impede ler essa altura em tempo real, entao ela e fixada por faixa, sempre com
| folga. Folga custa pouco porque o html/body deles e transparente: sobra vira
| espaco bege do painel, nao retangulo branco. Faltar, ao contrario, cria
| rolagem dentro do iframe.
*/
.ac-frame {
    display: block;
    width: 100%;
    border: 0;
    /*
    | No viewport de 430px o botao Enviar termina em ~1937px dentro do iframe.
    | Como o formulario deixa de refluir abaixo de ~508px e passa a rolar na
    | horizontal, 2000px cobre tambem as larguras menores com uma folga curta.
    */
    height: 2000px;
}

.ac-fallback {
    margin: 22px 0 0;
    color: var(--bemavi-muted);
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-area-cliente.is-hero-revealed .ac-intro,
.bemavi-area-cliente.is-hero-revealed .ac-frame-panel,
.bemavi-area-cliente.is-hero-revealed .ac-fallback {
    opacity: 1;
    transform: none;
    transition-delay: var(--main-delay, 3.5s);
}

.ac-fallback a {
    color: var(--bemavi-dark);
    text-decoration: underline;
}

.ac-fallback a:hover {
    opacity: .75;
}


/* Alturas por faixa — ver a tabela medida logo acima de .ac-frame. */
@media (min-width: 501px) {
    .ac-frame { height: 2050px; }
}

@media (min-width: 769px) {
    .ac-frame { height: 1450px; }
}

@media (min-width: 1025px) {
    .ac-frame { height: 1240px; }
}

@media (min-width: 1441px) {
    .ac-frame { height: 1200px; }
}


/* Mesmas distancias verticais e horizontais do shell de Trabalhe Conosco. */
@media (min-width: 1025px) and (max-width: 1440px) {
    .ac-intro {
        padding-top: 108px;
    }
}

@media only screen and (max-width: 1024px) {
    .ac-intro {
        padding: 104px 0 0 40px;
    }
}


@media only screen and (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    .bemavi-area-cliente .ac-main > .post-container {
        width: 100%;
        margin: 0;
    }

    .ac-intro {
        width: var(--trabalhe-mobile-width);
        max-width: var(--trabalhe-mobile-width);
        margin: 0 0 46px var(--trabalhe-mobile-left);
        padding: min(84px, 15.56vw) 0 0;
    }

    .ac-frame-panel,
    .ac-fallback {
        width: var(--post-container);
        margin-right: auto;
        margin-left: auto;
        box-sizing: border-box;
    }

    .ac-fallback {
        margin-top: 22px;
    }
}


@media (max-width: 767px) {
    .ac-intro-title {
        font-size: min(24px, 4.44vw);
        line-height: min(34px, 6.3vw);
    }

    .ac-frame-panel {
        padding: 10px;
        border-radius: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ac-intro,
    .ac-frame-panel,
    .ac-fallback {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}