@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --color-header: #2F0F4E;
    --color-marketing-fundo: #2C0F39;
    --color-marketing-fonte: #E48E16;
    --color-marketing-fundoBotao: #340C43;
    --color-sobre-fundo: #F6F9F5;
    --color-ceo-fonte: #E48E16;
}

/* CABEÇA COM A LOGO, HAMBURGUER E MENU */
header{
    width: 100%;
    padding: 0px 5vw 0 10vw; /* Alterando para ficar mais agradável em mobile */

    flex-direction: column; /* Criando alterações para celular/tablet */

    position: absolute;
}
header > div.menu-mobile {
    width: 100%;
    display: flex;
    justify-content: space-between; /* Deixando a primeira caixa em row */
    align-items: center; 
}
header > div.menu-mobile > svg.botao-menu{
    display: inline;
    cursor: pointer;
}
header > div.menu-mobile > img.logo{
    width: 130px;
}
header > div.menu-mobile > i{
    display: block;
    cursor: pointer;
    color: white;

    transition: all 1s ease;
}
header > div.menu-mobile > i.menu-ativo{
    color: var(--color-ceo-fonte);
}
header > nav{
    max-height: 0;          /* começa fechado */
    overflow: hidden;       /* esconde conteúdo extra */
    opacity: 0;             /* invisível */
    transition: max-height 1s ease, opacity 0.8s ease;
    display: block;
}
header > nav > a{
    font-size: 1.1em;
    margin: 15px 0px;
    display: block;
    text-align: center;
}
nav.ativo{
    display: block;
    max-height: 160px;  /* valor suficiente para caber todos os links */
    opacity: 1;         /* visível */
}
/* ==================================================================== */


/* Alterações para otimizar em celular em main */
main > section.marketing{
    background: url(../assets/images/marketing/background-marketing-mobile.png) right top;

    justify-content: center;
}
main > section.marketing > article.marketing{
    min-height: 160px;
    min-width: 370px;
    margin-left: 0;

    opacity: 95%; /* Criando design único pra dispositivos mobile */
}
/* ==================================================================== */


/* Alterações no sobre p/ celular e tablet */
main > section.sobre{
    max-height: 738px;
}
main > section.sobre > article.sobre{
    margin: 40px 0px 15px 0px;
    padding: 0px 5px;
}
main > section.sobre > article.sobre > h2{
    margin-bottom: 22.5px;
}
main > section.sobre > article.sobre > p{
    margin-bottom: 15px;
}
/* ==================================================================== */


/* Criando alterações personalizadas em ceo e valores p/ diferentes tamanhos de tela do tablet e mobile */
@media only screen and (min-width: 773px) { /* TABLET */
    main > section.valores{
        background: gray url(../assets/images/valores/banner-mobile.png) center top scroll;
        background-size: cover;
        height:550px;

        flex-direction: row;
    }
    main > section.valores > article.ceo > img.ceos{
        width: 280px;
    }
}
@media only screen and (max-width: 772px){ /* MOBILE */
    main > section.valores{
        background: gray url(../assets/images/valores/banner-mobile.png) center bottom scroll;
        height:900px;

        flex-direction: column;
        justify-content: space-evenly;
    }
    main > section.valores > article.ceo > img.ceos{
        margin-top: 1px;
        width: 250px;
    }

}
/* ==================================================================== */


/* Otimizando o serviço para mobile/tablet */
main > section.servicos > h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 2.1em;
}
main > section.servicos > article.tipos > h2{
    margin-bottom: 10px;
}
main > section.servicos > article.tipos > div.background > div.group-pictures{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; /* suavidade no iOS */
}
main > section.servicos > article.tipos > div.background  > div.group-pictures > div.picture{
    padding: 5px 5px 0px 5px;
}
main > section.servicos > article.tipos > div.background > div.group-pictures > div.picture > img.imagem{
    width: 240px;
    height: 240px;
}
main > section.servicos > article.tipos > div.background > div.group-pictures > div.picture > p{
    height: 40px;
    padding: 6px 0px;
}
/* ==================================================================== */


/* Otimizando o cliente para mobile/tablet */
main > section.cliente{
    padding: 1px 0px 0px 0px;
    overflow: hidden; /* importante */
}
main > section.cliente > h2{
    font-size: 2em;
    margin-bottom: -20px;
}
main > section.cliente > article.clientes{
    width: 100%; /* largura ajusta ao conteúdo total */

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;

    overflow-x: scroll;

    will-change: transform;
    scrollbar-width: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    transition: all 1s ease;

    pointer-events: none;
}
main > section.cliente > article.clientes::-webkit-scrollbar {
    display: none;
}
main > section.cliente > article.clientes > img{
    width: 190px;
    margin: 0 40px;

    display: block;

    scroll-snap-align: center;
    scroll-snap-stop: normal;
}
main > section.cliente > article.clientes > img.clone1, img.clone2{
    display: block;
}
/* ==================================================================== */


/* Responsividade em depoimentos */
main > section.depoimento > h2{
    font-size: 2em;
}
main > section.depoimento > article.depoimentos > div.box-depoimentos{
    margin: 0 10px;

    justify-content: flex-start;
    
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
}
main > section.depoimento > article.depoimentos > div.box-depoimentos > div.box-depoimento{
    flex: none;
}
/* ==================================================================== */


/* Add responsividade no footer */
footer > div.bloco1{
    flex-direction: column;
}
footer > div.bloco1 > div.logo-redes{
    height: 300px;

    row-gap: 40px;
    padding-left: 0px;

    width: 100%;
    max-width: 554.13px;
}
footer > div.bloco1 > div.logo-redes > div.logo > p{
    width: auto;
}
footer > div.bloco1 > div.contato{
    margin-bottom: 45px;
}
footer > div.bloco1 > div.contato > ul{
    row-gap: 10px;
}
footer > div.bloco2 > p{
    font-size: 0.9em;
}
/* ==================================================================== */

div.bolha{
    left: calc(90vw - 20px);
}
div.bolha:hover > p{
    opacity: 0;
    visibility: collapse;
}