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


/* 
Solução
--------------------------------------------
*/

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

capa > div > img { position: absolute; top: calc(var(--espaco) * -.8); }


/* 
Main
--------------------------------------------
*/

main { width: auto; font-size: var(--fs-300); }

main header { z-index: 2; text-align: center; margin-bottom: var(--espaco); }
main header .logotipo-solucao { display: table; min-width: 100px; height: 68px; margin: 0 auto calc(var(--espaco) * .5); }
main header h1 { margin-bottom: var(--fs-300); }
main header h1 br.responsivo { display: none; }
main header p { max-width: 580px; margin: 0 auto .8em; }

main header a { display: block; pointer-events: all; }
main header ul { display: flex; justify-content: center; width: var(--limite); list-style: none; margin: calc(var(--espaco) * 1.5) auto calc(var(--espaco) * 2); padding: 0; }
main header li { flex-basis: 25%; }
main header a[href]:hover,
main header a[href]:focus { background-size: 0; }
main header li a > span { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 2em; text-align: center; color: var(--cor-900); line-height: 1.2em; font-weight: var(--fw-semibold); }
main header li a .imagem { height: calc(var(--limite) * .25); pointer-events: none; }
main header li a .imagem:before { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; border-radius: 100%; transform: translate(-50%, -50%); background-color: rgba(76,175,148,.25); content: ""; }
main header li a .imagem:after { position: absolute; z-index: -1; top: 50%; left: 50%; width: 180px; height: 180px; border-radius: 100%; transform: translate(-50%, -50%) scale(0.0001); background-color: rgba(216,216,216,.2); content: ""; transition: transform 200ms ease-in-out; pointer-events: none; }
main header li a:focus .imagem:after,
main header li a:hover .imagem:after { transform: translate(-50%, -50%) scale(3); }
main header li a .imagem div { position: absolute; top: 50%; left: 50%; width: 390px; height: 390px; transform: translate(-50%, -50%); background-position: center; background-repeat: no-repeat; background-size: contain; }
main header li a .imagem div.multiply { mix-blend-mode: multiply; }
main header li a .imagem div.sombra { filter: drop-shadow(0 0 30px rgba(0,0,0,.2)); }
main header li a .imagem div.background { z-index: -1; }

main section.funcionalidade { --limite: 1366px; z-index: 1; display: flex; align-items: center; justify-content: start; max-width: var(--limite); margin: 0 auto; margin-bottom: var(--espaco); }
main section.funcionalidade:last-child { margin-bottom: 0; }
main section.funcionalidade:nth-of-type(even) { justify-content: end; }
main section.funcionalidade div:first-child { position: absolute; top: 0; left: calc(50% + 150px); display: flex; flex-direction: column; justify-content: center; width: 340px; height: 100%; }
main section.funcionalidade:nth-of-type(odd) div:first-child { left: auto; right: calc(50% + 150px); align-items: flex-end; text-align: right; }
main section.funcionalidade h2 { font-size: var(--fs-750); margin-bottom: calc(var(--espaco) * .3); white-space: nowrap; }
main section.funcionalidade p:last-child { margin-bottom: 0; }
main section.funcionalidade small { font-size: var(--fs-100); color: var(--cor-400); }
main section.funcionalidade small br { display: none; }
main section.funcionalidade small img { display: inline-block; vertical-align: middle; }
main section.funcionalidade img.estatico { margin: 0 auto; }
main section.funcionalidade div.lazy-carregando { width: 100%; }
main section.funcionalidade div.lazy-carregando:before { left: 35%; }
main section.funcionalidade:nth-of-type(odd) div.lazy-carregando:before { left: 65%; }


@media screen and (min-width: 1440px) and (max-width: 1679px) {}


@media screen and (min-width: 1366px) and (max-width: 1439px) {

	main section.funcionalidade:nth-of-type(even) { left: 40px; }

}


@media screen and (min-width: 1280px) and (max-width: 1365px) {

	main { margin-top: 30px; }

	main header ul { --limite: 1150px; }

	main section.funcionalidade:nth-of-type(even) { left: 40px; }

}


@media screen and (min-width: 1024px) and (max-width: 1279px) {

	main { margin-top: 30px; }

	main header ul { --limite: 900px; }
	main header li a > span { top: -20px; }
	main header li a .imagem:before { width: 150px; height: 150px; }
	main header li a .imagem div { width: 320px; height: 320px; }

	main section.funcionalidade:nth-of-type(odd) { left: 40px; }
	main section.funcionalidade div { left: calc(50% + 120px); width: 300px; }
	main section.funcionalidade:nth-of-type(odd) div { right: calc(50% + 120px); }


}


@media screen and (max-width: 1023px) {

	main { margin-top: 30px; margin-bottom: calc(var(--espaco) * 2); }

	main header h1 br.responsivo { display: inherit; }
	main header p { max-width: var(--limite); }

	main header ul { display: none; }

	main section.funcionalidade div,
	main section.funcionalidade:nth-of-type(odd) div { position: relative; top: 0; left: 0; right: auto; align-items: center; width: var(--limite); margin: 0 auto; text-align: center; }
	main section.funcionalidade h2 br:not(.responsivo) { display: none; }
	main section.funcionalidade small br { display: inherit; } 
	main section.funcionalidade small img { margin-top: 5px; }
	main section.funcionalidade img.estatico { display: none; }

}


/*
Parceiros
--------------------------------------------
*/

section.parceiros { 
	 padding-bottom: 5vw; 
}
section.parceiros:before { 
	position: absolute; 
	z-index: -1; 
	top: 1px;
	width: 100%; 
	height: 100%; 
	background-color: var(--cor-fundo-claro); 
	content: "";  
	clip-path: polygon(0% 0%, 100% var(--altura-corte), 100% 100%, 0% 100%); 
}

section.parceiros header { 
	z-index: 2;
	display: grid; 
	place-content: center; 
	height: clamp(200px, 20vw, 340px); 
	height: 20vw;
	text-align: center; 
}
section.parceiros header h2 { max-width: 590px; font-size: var(--fs-800); margin-bottom: var(--fs-400); }
section.parceiros header h6 { font-size: var(--fs-400); line-height: var(--line-height); font-weight: var(--fw-light); margin-bottom: 0; }

section.parceiros .depoimento-cliente { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
section.parceiros .depoimento-cliente:nth-of-type(odd) { margin-top: -5vw; }
section.parceiros .depoimento-cliente:nth-of-type(even) { z-index: 2; }
section.parceiros .depoimento-cliente:nth-of-type(even):before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--cor-fundo); transform: skewY(11.31deg); content: ""; }
section.parceiros .depoimento-cliente .video { display: block; z-index: 1; width: 450px; height: 450px; }
section.parceiros .depoimento-cliente .video div { padding-bottom: 100%; }
section.parceiros .depoimento-cliente:nth-of-type(odd) .video { order: -1; }
section.parceiros .depoimento-cliente:nth-of-type(even) .video { top: -60px; width: 400px; height: 400px; margin-bottom: -30px; mix-blend-mode: darken; }
section.parceiros .depoimento-cliente:nth-of-type(odd) .video.lazy-carregando:before { margin-top: -30px; }
section.parceiros .depoimento-cliente:nth-of-type(even) .video.lazy-carregando:before { margin-top: 80px; }
section.parceiros .depoimento-cliente video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
section.parceiros .depoimento-cliente .depoimento { z-index: 2; display: flex; flex-direction: column; }
section.parceiros .depoimento-cliente:nth-of-type(even) .depoimento { top: -10px; align-items: flex-end; text-align: right; }
section.parceiros .depoimento-cliente h2 { font-size: var(--fs-200); font-weight: var(--fw-semibold); white-space: nowrap; }
section.parceiros .depoimento-cliente h3 { max-width: 450px; font-weight: var(--fw-light); line-height: 1.3em; margin-bottom: var(--fs-200); }
section.parceiros .depoimento-cliente p { font-size: var(--fs-500); font-weight: var(--fw-semibold); margin-bottom: 0; }
section.parceiros .depoimento-cliente small { font-weight: var(--fw-semibold); color: var(--cor-400); }

section.parceiros footer { text-align: center; margin: calc(var(--espaco) * 3) 0 var(--espaco); }
section.parceiros footer h6 { font-size: var(--fs-300); font-weight: var(--fw-light); margin-bottom: calc(var(--espaco) * .8); }
/*section.parceiros footer ul { display: flex; justify-content: center; align-items: center; list-style: none; margin: 0; padding: 0; }
section.parceiros footer li { margin: 0 calc(var(--espaco) * .65); }*/
section.parceiros footer .lista-de-logotipos li a { min-height: 100px; }

a[data-ancora="parceiros"] { top: calc(-300px - var(--fs-800));  }


@media screen and (min-width: 1366px) and (max-width: 1679px) {

	a[data-ancora="parceiros"] { top: calc(-250px - var(--fs-800));  }

}


@media screen and (max-width: 1023px) {

	section.parceiros { padding-bottom: 35vw; }

	section.parceiros:before { 
		clip-path: polygon(0% 0%, 100% 35vw, 100% 100%, 0% 100%); 
	}

	section.parceiros header { width: var(--limite); height: auto; margin: 0 auto; }

	section.parceiros depoimento-cliente { width: var(--limite); text-align: center; margin-bottom: var(--espaco); }
	section.parceiros depoimento-cliente:nth-of-type(odd) { margin-top: var(--espaco); }
	section.parceiros depoimento-cliente:nth-of-type(even) > div { top: 0; align-items: center; text-align: center; }
	section.parceiros depoimento-cliente h2 { white-space: normal; }
	section.parceiros depoimento-cliente h3 { font-size: var(--fs-500); }
	section.parceiros depoimento-cliente video { display: none; }

	section.parceiros depoimento-cliente:nth-of-type(even):before { display: none; }

	section.parceiros footer { margin: var(--espaco) 0; }
	section.parceiros footer h6 { width: var(--limite); margin: 0 auto calc(var(--espaco) * .8); line-height: 1.3em; }

	section.parceiros footer li { margin: 0 10px; }

}


/*
Planos
--------------------------------------------
*/

section.planos { 
	padding-bottom: var(--espaco); 
	background-color: var(--cor-fundo-claro);	
}

section.planos header { display: grid; place-content: center; text-align: center; }
section.planos header h2 { max-width: 560px; font-size: var(--fs-800); margin-bottom: var(--fs-300); }
section.planos header h6 { font-size: var(--fs-300); line-height: var(--line-height); font-weight: var(--fw-light); margin-bottom: 0; }

section.planos .tabela { 
	--plano: 340px;
	width: calc(var(--plano) * 3); 
	margin: calc(var(--espaco) * 2.5) auto var(--espaco); 
}

section.planos .plano {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 33.3333%;
	/*height: 100%;*/
	perspective: 1000px;
	transition-property: left opacity;
	transition-duration: 400ms;
	transition-timing-function: ease-in-out;
	transition-delay: 200ms;
}
section.planos .plano:nth-child(2) { z-index: 3; top: -30px; left: 33.3333%; }
section.planos .plano:nth-child(3) { left: 66.6666%; }

section.planos .plano h3 { top: -.5em; margin-bottom: -.25em; font-size: var(--fs-750); }
section.planos .plano small { display: block; margin-bottom: calc(var(--espaco) * .5); font-size: var(--fs-200); color: var(--cor-400); }
section.planos .plano .separador { width: 80%; height: 5px; margin: calc(var(--espaco) * .2) 10% calc(var(--espaco) * .3); background-color: var(--cor-secundaria); }
section.planos .plano .valor { display: flex; justify-content: center;  font-size: 42px; font-weight: var(--fw-semibold); }
section.planos .plano .valor .moeda { font-size: 40%; font-weight: var(--fw-light); margin-right: 6px; }
section.planos .plano .valor .centavos { top: -.2em; left: -.2em; font-size: 40%; line-height: 1em; align-self: flex-start; }
section.planos .plano .periodicidade,
section.planos .plano .instrucoes { font-size: var(--fs-200); font-weight: var(--fw-light); line-height: 3em; color: var(--cor-400); }
section.planos .plano .instrucoes { font-size: var(--fs-300); }
section.planos .plano .caracteristicas { width: 70%; margin: 0 15% calc(var(--espaco) * .8); font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--cor-400); }
section.planos .plano .caracteristicas > div { padding: 18px 0; border-bottom: 1px solid var(--cor-borda); }
section.planos .plano .cops-por-ano { font-size: var(--fs-500); } 
section.planos .plano .caracteristicas .valor { display: inline-block; font-size: var(--fs-300); font-weight: var(--fw-semibold); }
section.planos .plano .suporte small { font-size: var(--fs-100); font-weight: var(--fw-light); line-height: 1.3333em; margin-bottom: 0; }
section.planos .plano .suporte small .riscado { text-decoration: line-through; opacity: .5; }
section.planos .plano .suporte small strong { display: inline-block; margin-top: 5px; }
section.planos .plano a.solicite-uma-proposta { align-self: center; margin-top: auto; margin-bottom: -1.25em; }

section.planos .plano > div {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition-property: transform opacity;
	transition-duration: 400ms;
	transition-timing-function: ease-in-out;
	transition-delay: 200ms;
	transform-style: preserve-3d;
}

section.planos .plano.flip { z-index: 4; left: 0; transition-delay: 0ms; }

section.planos .plano.flip > div {
  	transition-delay: 0ms;
  	transform: rotateY(180deg);
}

section.planos .plano.ocultar { 
  	opacity: 0;
  	transition-duration: 150ms;
}

section.planos .plano.ocultar > div {
  	transform: rotateY(-90deg);  
}

section.planos .plano .frente, 
section.planos .plano .verso {
	z-index: 1;
	display: flex;
	flex-direction: column;
  	width: 100%;
  	backface-visibility: hidden;
}

section.planos .plano .frente {
	background-color: #f5f5f5;
	color: black;
}
section.planos .plano:nth-child(2) .frente { background-color: #ffffff; }

section.planos .plano.flip > div,
section.planos .plano:nth-child(2) > div { box-shadow: 0 0 60px rgba(0,0,0,.2); }

section.planos .plano .verso {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ffffff;
	transform: rotateY(180deg);
}

section.planos .formulario {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 33.3333%;
	display: flex;
	width: calc(66.6666% + 15px);
	height: auto;
	padding-bottom: 20px;
	box-sizing: border-box;
	transition: width 300ms ease-in-out;
	overflow: hidden;
}

section.planos .formulario.exibir {
	z-index: 3;
	transition-delay: 200ms;
}

section.planos .formulario form { 
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	width: calc(100% - 15px);
	padding: var(--espaco) calc(var(--espaco) * .8);
	color: var(--cor-400);
	background-color: var(--cor-fundo);
	transform: translateX(calc(-100% - 15px));
	transition: transform 300ms ease-in-out 200ms;
}

section.planos .formulario.exibir form { transform: translateX(0); }

section.planos form small.aviso { padding-left: 10px; margin-bottom: calc(var(--espaco) * .4); font-size: var(--fs-300); }

section.planos form [type=submit] { position: absolute; z-index: 3; bottom: -20px; right: 40px; white-space: nowrap; overflow: hidden; transition-property: width, color; transition-duration: 100ms; transition-timing-function: ease-in-out; }
section.planos form.enviando [type=submit] { color: var(--cor-secundaria); pointer-events: none; }
section.planos form.enviando [type=submit]:before { position: absolute; z-index: 1; top: 50%; right: 12px; width: 20px; height: 20px; margin-top: -10px; background-image: url(imagens/lazy/carregando.svg); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .2; animation: enviando 500ms linear infinite; content: ""; }

@keyframes enviando {
	100%{ transform:rotate(360deg); }
}

section.planos .formulario .fechar {
	position: absolute;
	top: 40px;
	right: -15px;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background-color: var(--cor-secundaria);
	background-image: url(../imagens/formularios/fechar.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}

section.planos .plano a.proposta-solicitada { color: var(--cor-100); border-color: var(--cor-borda); background-color: var(--cor-borda); cursor: default; }
section.planos .plano a.proposta-solicitada:after { 
	position: absolute; 
	bottom: -30px; 
	left: 50%; 
	width: var(--plano); 
	transform: translateX(-50%);
	content: "Aguarde o contato de um de nossos consultores"; 
	font-size: var(--fs-300);
	color: var(--cor-400);
	white-space: nowrap;
}

[data-ancora="planos"] {  }


@media screen and (min-width: 1280px) and (max-width: 1365px) {

	section.planos .tabela { --plano: 320px; }

}


@media screen and (min-width: 1024px) and (max-width: 1279px) {

	section.planos .tabela { --plano: 280px; margin-top: calc(var(--espaco) * 2); }
	
}


@media screen and (max-width: 1023px) {

	/*section.planos header { width: var(--limite); margin: 0 auto; }*/

	section.planos { display: none; }

}


/*
Apresentação
--------------------------------------------
*/


section.apresentacao {
	text-align: center; 
	padding-bottom: var(--espaco); 
	background-color: var(--cor-fundo-claro);	
}

section.apresentacao h3 { font-size: var(--fs-700); line-height: 1em; margin-bottom: var(--fs-300); }
section.apresentacao p { max-width: 580px; font-size: var(--fs-300); margin: 0 auto 2em; }