/*
Theme Name: Softfocus
Theme URI:	https://softfocus.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/*
Contato
--------------------------------------------
*/

mascara:before { background-color: var(--cor-fundo-claro); }

main { width: auto; }


/* 
Mapa
--------------------------------------------
*/

.mapa { top: calc(var(--altura-corte) * -1); margin-bottom: calc(var(--altura-corte) * -1 - 10vw - 100px); }
.mapa .google-maps { height: 1200px; background-color: var(--cor-primaria); clip-path: polygon(100% 0, 100% calc(100% - var(--altura-corte)), 0 100%, 0 var(--altura-corte)); }
.mapa .google-maps * { cursor: grab; }
.mapa .google-maps > div { z-index: 1; }
.mapa .google-maps:after { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../imagens/contato/mapa-filtro.png); background-position: center; background-size: cover; content: ""; mix-blend-mode: color-dodge; pointer-events: none; }

.mapa .google-maps .infoBox { pointer-events: none; }
.mapa .google-maps .infoBox:before { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px; border-radius: 100%; border: 1px solid var(--cor-000); content: ""; }
.mapa .google-maps .infoBox:after { position: absolute; top: 50%; left: 50%; width: 90px; height: 1px; margin: -32px 0 0 32px; transform: rotate(-45deg); transform-origin: 0; background-color: var(--cor-000); content: ""; }
.mapa .google-maps .infoBox .endereco { position: absolute; top: -155px; left: 168px; padding: 10px 0 10px 30px; border-left: 1px solid var(--cor-000); font-family: var(--ff); font-size: var(--fs-300); font-weight: var(--fw-light); line-height: 1.3333em; color: var(--cor-000); white-space: nowrap; }
.mapa .google-maps .infoBox .endereco:before { position: absolute; top: 50%; right: 100%; width: 65px; height: 1px; background-color: var(--cor-000); content: ""; }
.mapa .google-maps .infoBox .endereco a { pointer-events: all; }
.mapa .google-maps .infoBox .endereco a,
.mapa .google-maps .infoBox .endereco a:link,
.mapa .google-maps .infoBox .endereco a:visited,
.mapa .google-maps .infoBox .endereco a:hover,
.mapa .google-maps .infoBox .endereco a:active { color: var(--cor-000); cursor: pointer; }
.mapa .google-maps .infoBox .endereco a[itemprop="telephone"] {
    display: table;
    margin: 13px 0 8px;
    font-size: var(--fs-600);
    font-weight: var(--fw-semibold);
    line-height: 1.333em;
}
.mapa .google-maps .infoBox .endereco a[itemprop="email"] {
    font-size: var(--fs-300);
    font-weight: var(--fw-semibold);
    line-height: 1.333em;
}

.mapa .zoom { position: absolute; z-index: 2; top: calc(50% - (var(--altura-corte) * .5)); right: var(--espaco); width: var(--espaco); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mapa .zoom > div { position: absolute; left: 0; width: var(--espaco); height: var(--espaco); border-radius: 100%; border: 1px solid var(--cor-000); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: background 100ms ease-in-out; }
.mapa .zoom > div:not(.disabled):hover { background-color: var(--cor-100a); }

.mapa .zoom .in { top: 0; }
.mapa .zoom .in:before { position: absolute; top: 50%; left: 50%; width: 17px; height: 1px; margin: 0 0 0 -8px; background-color: var(--cor-000); content: ""; }
.mapa .zoom .in:after { position: absolute; top: 50%; left: 50%; width: 1px; height: 17px; margin: -8px 0 0 0; background-color: var(--cor-000); content: ""; }

.mapa .zoom .out { top: 65px; }
.mapa .zoom .out:before { position: absolute; top: 50%; left: 50%; width: 16px; height: 1px; margin: -1px 0 0 -8px; background-color: var(--cor-000); content: ""; }

.mapa .zoom .disabled { opacity: .3; cursor: default; }

.mapa a.ver-no-google-maps { position: absolute; bottom: calc(var(--altura-corte) - 75px); right: 30px; }
.mapa a.ver-no-google-maps:hover,
.mapa a.ver-no-google-maps:focus { background-size: 0; }


/*
Sobre a Softfocus
--------------------------------------------
*/

.softfocus { margin-bottom: calc(var(--espaco) * 2); }
.softfocus .video { width: 450px; height: 450px; border-radius: 100%; overflow: hidden; margin: calc(-10vw - 100px) auto 0; background-color: var(--cor-fundo); }
.softfocus .video div { height: 450px; }
.softfocus .video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.softfocus .imagem { width: 450px; height: 450px; border-radius: 100%; overflow: hidden; margin: calc(-10vw - 100px) auto 0; background-color: var(--cor-fundo); }
.softfocus .imagem div.lazy-carregando { height: 100%; background-color: transparent; }
.softfocus .anos { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 100%; margin: calc(var(--espaco) * -.9) auto calc(var(--espaco) * .8); background-color: var(--cor-primaria); font-size: 14px; line-height: 1em; font-weight: var(--fw-light); text-transform: uppercase; color: var(--cor-000); }
.softfocus .anos strong { width: 100%; font-size: 2.8em; line-height: 1em; text-align: center; }

.softfocus .somos-um-foguete * { margin-right: auto; margin-left: auto; text-align: center; }
.softfocus .somos-um-foguete h2 { font-size: var(--fs-800); font-weight: var(--fw-thin); line-height: 1em; }
.softfocus .somos-um-foguete h4 { font-size: var(--fs-750); margin: .7em auto; }
.softfocus .somos-um-foguete p { width: calc(var(--limite) * .37); font-size: var(--fs-300); }
.softfocus .somos-um-foguete a.botao { display: table; margin: var(--espaco) auto 0; }


/*
Histórico
--------------------------------------------
*/

.historico { padding-top: calc(var(--espaco) * 1.5); margin-bottom: var(--espaco); }
.historico:before { position: absolute; top: 0; left: 50%; width: var(--limite); height: 1px; margin-left: calc(var(--limite) * -.5); background-color: var(--cor-borda); content: ""; }
.historico h4 { font-size: var(--fs-750); text-align: center; }

/*.historico .swiper { overflow: visible; }*/
.historico .swiper-slide { width: 460px; text-align: center; }
.historico .swiper-slide,
.historico .swiper-slide * { cursor: pointer; }
.historico .swiper-slide .imagem { --diametro: 300px; height: var(--diametro); margin-bottom: calc(var(--espaco) * .6); }
.historico .swiper-slide .imagem:before { position: absolute; z-index: -1; bottom: 0; left: 50%; width: var(--diametro); height: var(--diametro); border-radius: 100%; margin-left: calc(var(--diametro) * -.5); background-color: var(--cor-fundo); content: ""; transition: transform 200ms ease-in-out; }
.historico .swiper-slide .imagem:after { position: absolute; z-index: -2; bottom: calc(var(--diametro) * .5); left: 0; width: 100%; height: 1px; background-color: var(--cor-borda); content: ""; }
.historico .swiper-slide:first-child .imagem:after { left: 50%; width: 50%; }
.historico .swiper-slide:last-child .imagem:after { left: auto; right: 50%; width: 50%; }
.historico .swiper-slide .imagem img { position: absolute; bottom: 0; left: 0; }
.historico .swiper-slide .periodo { font-size: var(--fs-100); font-weight: var(--fw-semibold); line-height: 1.3333em; text-transform: uppercase; color: var(--cor-400); margin-bottom: .3em; }
.historico .swiper-slide h5 { font-size: var(--fs-500); font-weight: var(--fw-semibold); line-height: 1.3333em; margin-bottom: .3em; }
.historico .swiper-slide p { width: 300px; margin: 0 auto; font-size: var(--fs-200); line-height: 1.3333em; }
.historico .resumo { display: flex; justify-content: center; font-size: var(--fs-100); font-weight: var(--fw-semibold); line-height: 30px; color: var(--cor-400); }
.historico .swiper-pagination { position: relative; margin-bottom: var(--espaco); } 
.historico .swiper-pagination-bullet { margin: 0 var(--espaco) ; }
.historico .swiper-pagination-bullet:first-child { margin-left: 10px; }
.historico .swiper-pagination-bullet:nth-last-child(2) { margin-right: 10px; }
.historico .swiper-pagination-bullet:before { background-color: var(--cor-100); opacity: 1; }
.historico .swiper-pagination-bullet:hover:before { background-color: var(--cor-secundaria); }
.historico .swiper-pagination-bullet-active:before { background-color: var(--cor-primaria) !important; }
.historico .swiper-pagination-bullet:after { position: absolute; z-index: -1; top: 50%; left: 50%; width: calc((var(--espaco) * 2) + 30px); height: 1px; transform: translateX(-50%); background-color: var(--cor-100); content: ""; }
.historico .swiper-pagination-bullet:first-child:after { transform: translateX(0); width: calc(var(--espaco) + 15px); }
.historico .swiper-pagination-bullet:nth-last-child(2):after { left: auto; right: 50%; transform: translateX(0); width: calc(var(--espaco) + 15px); }
.historico .swiper-pagination-bullet:last-child { display: none; }