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


/* 
Tipografia
--------------------------------------------
*/


:root {

	--ff: 'Barlow Semi Condensed', sans-serif;
	--fh: 'Playfair Display', serif;

	/*clamp(MIN, VAL, MAX)*/

	--fs-900: clamp(0px, 5vw, 96px);
	--fs-800: clamp(0px, 3.3333vw, 64px);
	--fs-600: clamp(0px, 1.875vw, 36px);
	--fs-500: clamp(20px, 1.25vw, 24px);
	--fs-300: clamp(16px, 0.9375vw, 18px);
	--fs-200: clamp(14px, 0.8333vw, 16px);
	--fs-100: 14px;
	
	--line-height: 1.333em;

	--fw-regular: 400;
	--fw-semibold: 600;

}

/*@media screen and (max-width: 767px) {

	:root {

		--fs-300: 14px;
		--fs-200: 14px;

	}

}*/



/* 
Cores
--------------------------------------------
*/


:root {

	--cor-primaria: #0095EE;
	--cor-secundaria: #EB4171;
	--cor-complementar: #42B2FC;
	--cor-softfocus-escuro: #434F5B; /*#434F5B;*/
	--cor-softfocus-clara: #788694;

	--cor-999: #000000;
	--cor-975: #272727;
	--cor-950: #444444;
	--cor-900: #505050;
	--cor-800: #707070;
	--cor-700a: rgba(0,0,0,.7);
	--cor-500: #8A8A8A;
	--cor-500a: rgba(0,0,0,.5);
	--cor-400: #9A9A9A;
	--cor-400a: rgba(0,0,0,.4);
	--cor-200: #D0D0D0;
	--cor-100: #E5E5E5;
	--cor-100a: rgba(0,0,0,.1);
	--cor-050a: rgba(0,0,0,.05);
	--cor-000a: rgba(255,255,255,.8);
	--cor-000: #FFFFFF;
	
	--cor-borda: #D5D5D5;
	--cor-borda-translucida: rgba(0,0,0,.15);
	
	--cor-fundo-claro: #FFFFFF;
	--cor-fundo-escuro: #2C2C2C;
	--cor-fundo-cinza: #F0F0F0;
	--cor-fundo-azul: #0079C1;
	
	--cor-transparente: rgba(0,0,0,0);

	--cor-link: #61C4F2; 
	--cor-visited: #9100FF; 
	--cor-hover: #0095EE; 
	--cor-active: #6197F2;

}



/* 
Configurações
--------------------------------------------
*/


* { position: relative; margin: 0; box-sizing: border-box; cursor: default; appearance: none; }
img { display: block; margin: 0; max-width: 100%; height: auto; }

body {
	/*display: flex;
	flex-direction: column;*/
	max-width: clamp(0px, 100vw, 1920px); 
	min-height: 100vh;
	margin: 0 auto; 
	font-family: var(--ff); 
	font-weight: var(--fw-light); 
	font-size: var(--fs-300); 
	line-height: var(--line-height);
	color: var(--cor-400); 
	background-color: var(--cor-fundo-cinza);
	-webkit-font-smoothing: antialiased; 
    overflow: hidden;
    overflow: overlay;
	overflow-x: hidden; 
	box-shadow: 0 0 50px rgba(0,0,0,.3);
}
body::-webkit-scrollbar { width: 15px; }
body::-webkit-scrollbar-track { background: var(--cor-transparente); }
body::-webkit-scrollbar-thumb { background-color: var(--cor-100a); }

body.grabbing,
body.grabbing * { cursor: grabbing !important; }


strong, b { font-weight: var(--fw-semibold); }
*:focus { outline: none; }
*::-ms-clear { display: none; }
*::-ms-reveal { display: none; }
*::selection { background-color: rgba(0,0,0,.25); opacity: 1; }


a[href], a[tabindex="0"] {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size 100ms ease-in-out;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
}
a[href] * { cursor: pointer; }
a:link { color: var(--cor-link); text-decoration: none; }
a:visited { color: var(--cor-visited); }
a.estatico:visited { color: var(--cor-link); }
a[href]:hover, a[href]:focus,
a[tabindex="0"]:hover, a[tabindex="0"]:focus { text-decoration: none; background-size: 100% 1px; background-position: 0 100%; }
a[href]:active, a[href].static:active { color: var(--cor-active); background-image: linear-gradient(var(--cor-active), var(--cor-active)); }

a[href^="tel"] {}

/*a[data-ancora] { position: absolute; top: 0; left: 0; }*/


h1, h2, h3, h4, h5, h6 { font-family: var(--fh); font-weight: var(--fw-regular); line-height: 1em; margin-bottom: 1.5rem; color: var(--cor-900); text-transform: lowercase; }

h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-900); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-600); }
h5 { font-size: var(--fs-600); }
h6 { font-size: var(--fs-600); }

h1 strong, h1 b,
h2 strong, h2 b,
h3 strong, h3 b,
h4 strong, h4 b,
h5 strong, h5 b,
h6 strong, h6 b { display: table; font-weight: var(--fw-regular); color: var(--cor-primaria); }

h1 small,
h2 small { display: table; font-size: var(--fs-600); line-height: 1em; color: var(--cor-400a); }


p { margin: 0; }
p strong { letter-spacing: -0.02em; }

ul { margin: 0 0 1em 0; padding:0 0 0 15px; }
ul li { }

ol { margin: 0 0 1em 0; padding: 0; list-style: none; counter-reset: contador; }
ol li { counter-increment: contador; }
ol li::before { content: counter(contador) ". ";  }

sub { top: -0.2em; font-size: 50%; line-height: 0; }


@media screen and (min-width: 1280px) {
	.mobile { display: none !important; }
}
@media screen and (max-width: 1279px) {
	.desktop { display: none !important; }
}



/*
Animações
--------------------------------------------
*/


@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: inherit; }
}

@keyframes piscar {
	0% { opacity: inherit; }
	50% { opacity: 0; }
	100% { opacity: inherit; }
}

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

@keyframes ripple {
	0% { transform: scale(0.0001); opacity: 1; }
	80% { opacity: 1; }
	100% { transform: scale(1); opacity: 0; }
}



/* 
Recorrentes
--------------------------------------------
*/


a.botao {
	display: table; 
	vertical-align: middle;
	top: 0;
	left: 0;
	font-size: var(--fs-500); 
	font-weight: var(--fw-semibold); 
	line-height: 1em; 
	color: var(--cor-000);
	border-radius: .3em;
	padding: 1em 1.25em;
	background-color: var(--cor-link);
	transition: all 100ms ease-in-out;
	transition-property: color, background-color;
	cursor: pointer; 
}
a.botao:hover,
a.botao:focus { background-color: var(--cor-hover); background-size: 0; }
a.botao:active { top: .3em; left: .4em; color: var(--cor-000); background-color: var(--cor-active); background-size: 0; }
a.botao:before { position: absolute; z-index: -1; top: .3em; left: .4em; width: 100%; height: 100%; border-radius: .3em; border: 2px solid var(--cor-500a); box-sizing: border-box; content: ""; transition: unset; }
a.botao:active:before { top: 0; left: 0; }

a.botao.img { padding: 0; width: 3.6666rem; height: 3.6666rem; border-radius: 100%; }
a.botao.img:before { border-radius: 100%; }

p + a.botao { margin-top: 2rem; }

img.role-a-pagina { position: absolute; z-index: 2; bottom: 3rem; left: 10%; cursor: pointer; mix-blend-mode: multiply; }


/*
Solicitar permissão para uso do microfone
--------------------------------------------
*/


.permissao-microfone { position: fixed; z-index: 98; top: 0; left: 0; display: none; width: 100vw; height: 100vh; backdrop-filter: blur(50px); }
.permissao-microfone.solicitar { display: block; animation: fade-in 200ms ease-in-out; }
.permissao-microfone.ocultar { opacity: 0; transition: opacity 200ms ease-in-out 400ms; }
.permissao-microfone > div { position: absolute; top: 150%; left: 50%; display: flex; flex-direction: column; align-items: center; padding: 3rem 4rem; background-color: var(--cor-fundo-claro); transform: translate(-50%, -50%); box-shadow: 0 0 50px rgba(0,0,0,.3); transition: top 500ms cubic-bezier(.5,0,.17,1.35); }
.permissao-microfone .exibir { top: 50%; transition-delay: 300ms; }
.permissao-microfone .ocultar { top: -150%; transition-timing-function: cubic-bezier(.72,-0.58,.39,1); transition-duration: 800ms; }
.permissao-microfone div div { font-family: var(--fh); font-size: var(--fs-600); line-height: 1em; color: var(--cor-900); text-align: center; margin-bottom: 2rem; }
.permissao-microfone .confirmacao div { max-width: 21ch; }
.permissao-microfone .instrucao div { max-width: 21ch; }
.permissao-microfone a.botao { margin-bottom: 2rem; }
.permissao-microfone a:not(.botao) { font-family: var(--fh); color: var(--cor-500); }


/*
Lazy
--------------------------------------------
*/


img.lazy,
img.lazy-processando{ position: absolute; width: 100%; visibility: hidden; }
img.lazy-carregado { max-width: 100%; }
.lazy-carregado { animation: fade-in 200ms ease-in-out; animation-fill-mode: backwards; }

div.lazy-carregando { background-color: rgba(0,0,0,.1); }
div.lazy-carregando.transparente { background-color: transparent; }
div.lazy-carregando:before { position: absolute; z-index: 1; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px; background-image: url(imagens/carregando.svg); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .2; animation: lazy-carregando 500ms linear infinite; content: ""; }

@keyframes lazy-carregando{
	100%{ transform:rotate(360deg); }
}



/*
Cronômetro
--------------------------------------------
*/


.cronometro { position: absolute; top: 5vw; top: calc(5 * var(--vw, 1vw)); left: 10vw; left: calc(10 * var(--vw, 1vw)); width: 2rem; transition: opacity 200ms ease-in-out; }
.cronometro.ocultar { opacity: 0; }
.cronometro svg { display: block; }
.cronometro path { position: absolute; top: 0; left: 0; stroke-width: 5; stroke: var(--cor-900); fill: none; stroke-linecap: butt; stroke-dasharray: 0, 100; transition: stroke-dasharray 1ms linear; }
.cronometro.iniciar path { stroke-dasharray: 100, 100; }
.cronometro circle { stroke-width: .3; stroke: var(--cor-400); fill: none; }



/*
Blocos
--------------------------------------------
*/


.capa { z-index: 1; width: 100%; height: 200vh; background-color: var(--cor-fundo-claro); }
.capa .background { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-position: top center;  background-size: contain; background-repeat: no-repeat; }
.capa .bloco { background-color: transparent; }

.estoria { /*overflow: hidden;*/ }

.bloco { z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 100vh; padding: 0 10%; background-color: var(--cor-fundo-claro); }
.bloco .background { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-position: top center;  background-size: cover; pointer-events: none; }

.bloco.ocultar { display: none; }

.bloco.o-astronauta-inconformado { }
.bloco.o-astronauta-inconformado h2 strong { color: var(--cor-secundaria); }
.bloco.o-astronauta-inconformado p { max-width: 63ch; }
.bloco.o-astronauta-inconformado .background { background-position: center; }

.bloco.atmosfera-pesada { background-color: var(--cor-fundo-cinza); }
.bloco.atmosfera-pesada .cronometro path { stroke: var(--cor-secundaria); }
.bloco.atmosfera-pesada h2 strong { color: var(--cor-secundaria); }
.bloco.atmosfera-pesada p { max-width: 53ch; }
.bloco.atmosfera-pesada p strong.piscar { animation: piscar 150ms linear; animation-iteration-count: 10; }
.bloco.atmosfera-pesada .interativo { position: absolute; top: 50%; left: 50%; width: 40%; height: 2.3vw; height: calc(2.3 * var(--vw, 1vw)); /*transform: translateY(-50%);*/ }
.bloco.atmosfera-pesada .interativo .xis { position: absolute; top: 0; left: 0; width: 2.3vw; width: calc(2.3 * var(--vw, 1vw)); height: 2.3vw; height: calc(2.3 * var(--vw, 1vw)); background-image: url(imagens/xis.svg); background-position: center; background-repeat: no-repeat; background-size: contain; }
.bloco.atmosfera-pesada .interativo .xis:nth-child(1) { left: 0; }
.bloco.atmosfera-pesada .interativo .xis:nth-child(2) { left: 4vw; left: calc(4 * var(--vw, 1vw)); }
.bloco.atmosfera-pesada .interativo .xis:nth-child(3) { left: 10vw; left: calc(10 * var(--vw, 1vw)); }
.bloco.atmosfera-pesada .interativo .xis:nth-child(4) { left: 20vw; left: calc(20 * var(--vw, 1vw)); }
.bloco.atmosfera-pesada .interativo .xis:nth-child(5) { left: 37.7vw; left: calc(37.7 * var(--vw, 1vw)); }
.bloco.atmosfera-pesada .interativo .xis.ativo { cursor: pointer; }
.bloco.atmosfera-pesada .interativo .xis.ativo:before { position: absolute; bottom: -3vw; bottom: calc(-3 * var(--vw, 1vw)); left: 1vw; left: calc(1 * var(--vw, 1vw)); width: 2vw; width: calc(2 * var(--vw, 1vw)); height: 2vw; height: calc(2 * var(--vw, 1vw)); background-image: url(imagens/seta-curvada.svg); background-position: center; background-repeat: no-repeat; background-size: contain; content: ""; pointer-events: none; }
.bloco.atmosfera-pesada .interativo .xis.ativo:after { position: absolute; bottom: -3.5vw; bottom: calc(-3.5 * var(--vw, 1vw)); left: 4vw; left: calc(4 * var(--vw, 1vw)); content: attr(data-legenda-longa); white-space: nowrap; pointer-events: none; animation: piscar 150ms linear; animation-iteration-count: 3; }
.bloco.atmosfera-pesada .interativo .xis span { position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; margin: -150%; border-radius: 100%; background-color: var(--cor-050a); content: ""; transform: scale(0.0001); transition: transform 100ms ease-in-out; pointer-events: none; }
.bloco.atmosfera-pesada .interativo .xis.ativo:hover span,
.bloco.atmosfera-pesada .interativo .xis.ativo:focus span { transform: scale(1); }

.bloco.motivado { background-color: var(--cor-fundo-escuro); }
.bloco.motivado h2 strong { display: inline; color: var(--cor-000); }
.bloco.motivado .cronometro path { stroke: var(--cor-000); }
.bloco.motivado .cronometro circle { stroke: var(--cor-000a); }

.bloco.grito { z-index: 2; background-color: #FFD940; }
.bloco.grito.overflow { overflow: hidden; }
.bloco.grito h2 strong { color: var(--cor-000); }
.bloco.grito p { max-width: 50ch; color: var(--cor-500a); }

.bloco.grito a[href*="grito"] { margin-top: 2rem; font-family: var(--fh); color: var(--cor-700a); }
.bloco.grito a[href*="grito"]:hover,
.bloco.grito a[href*="grito"]:focus { background-size: 0; }
.bloco.grito a[href*="grito"].ocultar { display: none; }
.bloco.grito a[href*="grito"] .toque { display: none; }
.bloco.grito a[href*="grito"] .microfone { display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin-right: 10px; background-image: url(imagens/microfone.svg); background-position: center; background-repeat: no-repeat; }
.bloco.grito a[href*="grito"] .microfone:before { position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; margin: -150%; border-radius: 100%; background-color: var(--cor-100a); content: ""; transform: scale(0.0001); transition: transform 100ms ease-in-out; pointer-events: none; }
.bloco.grito a[href*="grito"][grito="abrir"]:hover .microfone:before,
.bloco.grito a[href*="grito"][grito="abrir"]:focus .microfone:before { transform: scale(1); }
.bloco.grito a[href*="grito"]:not([grito="abrir"]) { pointer-events: none; }
.bloco.grito a[href*="grito"] > span { display: none; }
.bloco.grito a[href*="grito"][grito="abrir"] .abrir,
.bloco.grito a[href*="grito"][grito="escutando"] .escutando,
.bloco.grito a[href*="grito"][grito="quase"] .quase,
.bloco.grito a[href*="grito"][grito="uau"] .uau { display: inline; }
.bloco.grito img.gritando { position: absolute; z-index: -1; top: -2.5vw; left: 0; width: 100%; pointer-events: none; }

.bloco.decolar { padding-top: 5%; background-color: var(--cor-fundo-cinza); }
.bloco.decolar .cronometro path { stroke: var(--cor-primaria); }
.bloco.decolar p { max-width: 53ch; }
.bloco.decolar .interativo { position: absolute; top: 5%; left: 50%; display: flex; align-items: center; width: 35%; height: 95%; }
@media screen and (min-width: 1280px) and (max-width: 1439px) {
	.bloco.decolar .interativo { width: 40%; }
}
.bloco.decolar .interativo .senoide { flex: 1 1 auto; margin: 0 2rem; }
.bloco.decolar .interativo svg { display: block; overflow: visible; }
.bloco.decolar .interativo path { fill: none; stroke: var(--cor-975); stroke-width: 2px; }
.bloco.decolar .interativo .arraste,
.bloco.decolar .interativo .sombra,
.bloco.decolar .interativo .ate-aqui { position: absolute; z-index: 1; top: -.9375vw; top: calc(-.9375 * var(--vw, 1vw)); left: -.9375vw; left: calc(-.9375 * var(--vw, 1vw)); width: 1.875vw; width: calc(1.875 * var(--vw, 1vw)); height: 1.875vw; height: calc(1.875 * var(--vw, 1vw)); border-radius: 100%; background-color: var(--cor-primaria); transform-origin: center center; }
.bloco.decolar .interativo .arraste { z-index: 2; cursor: grab; }
.bloco.decolar .interativo .sombra { top: calc(50% - .85vw); top: calc(50% - (.85 * var(--vw, 1vw))); width: 1.7vw; width: calc(1.7 * var(--vw, 1vw)); height: 1.7vw; height: calc(1.7 * var(--vw, 1vw)); background-color: var(--cor-975); }
.bloco.decolar .interativo .ate-aqui { top: calc(50% - .85vw); top: calc(50% - (.85 * var(--vw, 1vw))); left: calc(100% - .85vw); left: calc(100% - (.85 * var(--vw, 1vw))); width: 1.7vw; width: calc(1.7 * var(--vw, 1vw)); height: 1.7vw; height: calc(1.7 * var(--vw, 1vw)); background-color: var(--cor-975); }
.bloco.decolar .interativo .ate-aqui:before { position: absolute; top: 50%; left: 50%; width: 20vw; width: calc(20 * var(--vw, 1vw)); height: 20vw; height: calc(20 * var(--vw, 1vw)); margin: -10vw; margin: calc(-10 * var(--vw, 1vw)); border-radius: 100%; background-color: var(--cor-050a); content: ""; transform: scale(0.0001); transition: transform 200ms ease-in-out; pointer-events: none; }
.bloco.decolar .interativo.fim .ate-aqui:before { animation: ripple 300ms ease-in-out; }

.bloco.galaxia { align-items: center; padding: 5% 0; }
.bloco.galaxia h2 { font-size: var(--fs-800); color: var(--cor-primaria); text-transform: none; }
.bloco.galaxia .swiper { width: 75vw; width: calc(75 * var(--vw, 1vw)); height: 22vw; height: calc(22 * var(--vw, 1vw)); margin-top: 3rem; overflow: visible; }
.bloco.galaxia .swiper-wrapper { margin: 0; padding: 0; list-style: none; }
.bloco.galaxia .swiper-slide a { display: flex; justify-content: center; align-items: flex-start; height: 15.625vw; height: calc(15.625 * var(--vw, 1vw)); color: var(--cor-400); }
.bloco.galaxia .swiper-slide a:hover,
.bloco.galaxia .swiper-slide a:focus { background-size: 0; }
.bloco.galaxia .swiper-slide a:before { position: absolute; top: 50%; left: 50%; width: 20vw; width: calc(20 * var(--vw, 1vw)); height: 20vw; height: calc(20 * var(--vw, 1vw)); margin: -10vw; margin: calc(-10 * var(--vw, 1vw)); border-radius: 100%; background-color: var(--cor-050a); content: ""; transform: scale(0.0001); transition: transform 200ms ease-in-out; pointer-events: none; }
.bloco.galaxia .swiper-slide a[href*="planeta-azul"]:before { width: 25vw; width: calc(25 * var(--vw, 1vw)); height: 25vw; height: calc(25 * var(--vw, 1vw)); margin: -12.5vw; margin: calc(-12.5 * var(--vw, 1vw)); }
.bloco.galaxia .swiper-slide a:hover:before,
.bloco.galaxia .swiper-slide a:focus:before { transform: scale(1); }
.bloco.galaxia .swiper-slide a ul.ficha-tecnica { position: absolute; top: 100%; left: calc(50% + 1.7em); margin: 0; padding: 0; list-style: none; font-size: var(--fs-200); line-height: 1.2em; pointer-events: none; }
.bloco.galaxia .swiper-slide a ul.ficha-tecnica strong { color: var(--cor-500); }
.bloco.galaxia .swiper-slide a ul.ficha-tecnica:before { position: absolute; top: -1.5em; left: -1.7em; width: 2px; height: calc(100% + 2em); background-color: var(--cor-900); content: ""; }
.bloco.galaxia .swiper-slide a[href*="planeta-amarelo"] ul.ficha-tecnica { left: 0; }
.bloco.galaxia .swiper-slide a[href*="planeta-amarelo"] ul.ficha-tecnica:before { top: -1.2em; left: -.5em; width: 8vw; width: calc(8 * var(--vw, 1vw)); height: 2px; }
.bloco.galaxia .swiper-slide a[href*="planeta-amarelo"] ul.ficha-tecnica:after { position: absolute; top: -1.2em; left: 7.5vw; left: calc(7.5 * var(--vw, 1vw)); width: 3vw; width: calc(3 * var(--vw, 1vw)); height: 2px; background-color: var(--cor-900); content: ""; transform-origin: 0 0; transform: rotate(-45deg); }
.bloco.galaxia .swiper-slide a[href*="planeta-vermelho"] ul.ficha-tecnica { left: auto; right: 0; text-align: right; }
.bloco.galaxia .swiper-slide a[href*="planeta-vermelho"] ul.ficha-tecnica:before { top: -1.2em; left: auto; right: -.5em; width: 8vw; width: calc(8 * var(--vw, 1vw)); height: 2px; }
.bloco.galaxia .swiper-slide a[href*="planeta-vermelho"] ul.ficha-tecnica:after { position: absolute; top: -1.2em; right: 7.5vw; right: calc(7.5 * var(--vw, 1vw)); width: 3vw; width: calc(3 * var(--vw, 1vw)); height: 2px; background-color: var(--cor-900); content: ""; transform-origin: 100% 0; transform: rotate(45deg); }

.bloco.planeta-azul { align-items: stretch; height: auto; padding: 0; color: var(--cor-000); pointer-events: none; /*background-color: var(--cor-fundo-azul); background-image: url(imagens/planeta-azul-pattern.png);*/ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='15' height='15' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(146)'%3E%3Crect width='100%25' height='100%25' fill='rgba(0, 121, 193,1)'/%3E%3Ccircle cx='40' cy='20' r='0.25' fill='rgba(82, 0, 0,1)'/%3E%3Ccircle cx='0' cy='20' r='1' fill='rgba(0, 17, 26,1)'/%3E%3Ccircle cx='40' cy='20' r='1' fill='rgba(0, 17, 26,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ") }
.bloco.planeta-azul a { pointer-events: all; }
.bloco.planeta-azul h2 { color: var(--cor-950); }
.bloco.planeta-azul h2 strong { color: var(--cor-000); }
.bloco.planeta-azul .otima-escolha { display: flex; align-items: center; justify-content: space-between; height: auto; min-height: 100vh; padding: 0 10%; }
.bloco.planeta-azul .otima-escolha header { width: 40ch; margin-bottom: clamp(3rem, 10vh, 4rem); }
.bloco.planeta-azul .otima-escolha header p { opacity: .8; }
@media screen and (min-width: 1280px) and (max-height: 650px) {
	.bloco.planeta-azul .otima-escolha header p { display: inline; }
}
.bloco.planeta-azul .diferenciais { width: calc(100% - 40ch - 6vw); width: calc(100% - 40ch - (6 * var(--vw, 1vw))); }
.bloco.planeta-azul .diferenciais > ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.bloco.planeta-azul .diferenciais > ul li { flex-basis: 33.3333%; display: flex; align-items: flex-start; justify-content: flex-end; margin: 1vw 0; margin: var(--vw, 1vw) 0; padding: 0 1vw; padding: 0 var(--vw, 1vw); }
/*.bloco.planeta-azul .diferenciais > ul li.divisao-de-lucros { order: 9; }*/
.bloco.planeta-azul .diferenciais > ul li span { width: 15ch; width: 7vw; width: calc(7 * var(--vw, 1vw)); margin-top: 5vw; margin-top: calc(5 * var(--vw, 1vw)); line-height: 1em; font-weight: var(--fw-semibold); text-align: right; }
.bloco.planeta-azul .diferenciais > ul li img { max-width: 130px; width: calc(100% - 15ch); width: calc(100% - 7vw); width: calc(100% - (7 * var(--vw, 1vw))); }
.bloco.planeta-azul .diferenciais .mais { display: table; width: 90%; margin: 3vw auto 0; margin: calc(3 * var(--vw, 1vw)) auto 0; font-size: var(--fs-200); font-weight: var(--fw-semibold); text-align: center; }
.bloco.planeta-azul .diferenciais .mais > ul { display: inline; margin: 0; padding: 0; list-style: none; }
.bloco.planeta-azul .diferenciais .mais > ul li { display: inline-block; vertical-align: top; margin-right: 5px; }
.bloco.planeta-azul .diferenciais .mais > ul li:last-child { margin-right: 0; }
.bloco.planeta-azul .diferenciais .mais > ul li:before { content: "\2022"; margin-right: 3px; }
.bloco.planeta-azul .diferenciais .mais > ul li:first-child:before { display: none; }
.bloco.planeta-azul img.role-a-pagina { opacity: .7; }
.bloco.planeta-azul .indique { z-index: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; height: 100vh; max-height: 40vw; max-height: calc(40 * var(--vw, 1vw)); padding: 0 10%; }
.bloco.planeta-azul .indique p { max-width: 49ch; opacity: .7; text-align: right; }
.bloco.planeta-azul .indique .background { top: auto; bottom: 0; height: 100vh; background-size: contain; background-position: center left; background-repeat: no-repeat; }
.bloco.planeta-azul .indique .compartilhar { display: flex; margin-top: 2rem; }
.bloco.planeta-azul .indique .compartilhar a.botao { margin: 0 .5rem; }

.bloco.planeta-errado { position: fixed; z-index: 9; top: 120vh; left: 50%; width: calc(100 * var(--vw, 1vw)); transform: translateX(-50%); color: var(--cor-999); transition: top 800ms cubic-bezier(.87,0,.13,1); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='15' height='15' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(146)'%3E%3Crect width='100%25' height='100%25' fill='rgba(255, 102, 102,1)'/%3E%3Ccircle cx='40' cy='20' r='0.25' fill='rgba(82, 0, 0,1)'/%3E%3Ccircle cx='0' cy='20' r='1' fill='rgba(82, 0, 0,1)'/%3E%3Ccircle cx='40' cy='20' r='1' fill='rgba(82, 0, 0,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ") }
.bloco.planeta-errado.exibir { top: 0; }
.bloco.planeta-errado h2 { color: var(--cor-950); }
.bloco.planeta-errado h2 strong { color: var(--cor-000); }
.bloco.planeta-errado p { max-width: 63ch; opacity: .8; }
.bloco.planeta-errado a.botao { color: var(--cor-900); 	background-color: var(--cor-fundo-claro); }
.bloco.planeta-errado a.botao:hover,
.bloco.planeta-errado a.botao:focus { color: var(--cor-000); background-color: var(--cor-950); }
.bloco.planeta-errado a.botao:active { color: var(--cor-000); background-color: var(--cor-active); }
.bloco.planeta-errado a.botao:before { border-color: var(--cor-500a); }
.bloco.planeta-errado .background { background-position: center; }



/*
Footer
--------------------------------------------
*/


footer.footer {	--limite: 1170px; --altura-corte: 20vw; --altura-corte: calc(20 * var(--vw, 1vw)); --espaco: 50px; }
@media screen and (min-width: 1280px) and (max-width: 1439px) {
	footer.footer { --limite: calc(100vw - (var(--espaco) * 5)); --limite: calc((100 * var(--vw, 1vw)) - (var(--espaco) * 5)); }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	footer.footer { --limite: calc(100vw - (var(--espaco) * 3)); --limite: calc((100 * var(--vw, 1vw)) - (var(--espaco) * 3)); --altura-corte: 25vw; --altura-corte: calc(25 * var(--vw, 1vw)); }
}
@media screen and (max-width: 767px) {
	footer.footer { --limite: calc(100vw - (var(--espaco) * 2)); --limite: calc((100 * var(--vw, 1vw)) - (var(--espaco) * 2)); --altura-corte: 50vw; --altura-corte: calc(50 * var(--vw, 1vw)); --espaco: 40px; }
}

footer.footer { display: flex; justify-content: flex-end; align-items: flex-end; height: 270px; padding: 0 var(--espaco) calc(var(--espaco) * .5); }
footer.footer:before { position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-color: var(--cor-softfocus-escuro); clip-path: polygon(100% 0, 0% var(--altura-corte), 100% var(--altura-corte)); content: ""; }

footer.footer a.logotipo { position: absolute; top: 50%; left: 50%; margin-left: calc(var(--limite) * -.5); transform: translateY(-50%); padding: 12px 0; background-size: 0% 1px; background-image: linear-gradient(var(--cor-primaria), var(--cor-primaria)); filter: brightness(0) invert(1); }
footer.footer a.logotipo:focus { background-size: 100% 1px; }
footer.footer a.logotipo img + .lazy-carregando { width: 130px; height: 80px; }

footer.footer address { display: flex; flex-direction: column; margin-right: calc(var(--espaco) * .5); font-size: var(--fs-100); font-style: normal; line-height: var(--line-height); color: var(--cor-000a); text-align: right; }
footer.footer address a { display: inline-block; align-self: flex-end; color: var(--cor-000a); }
footer.footer address a[itemprop="telephone"] { font-size: var(--fs-500); font-weight: var(--fw-semibold); line-height: 1.3333em; margin-bottom: 3px; }

footer.footer ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
footer.footer li { min-height: 30px; margin: 0 10px; opacity: .5; }
footer.footer li a { display: block; padding: 5px 0; background-image: linear-gradient(var(--cor-000), var(--cor-000)); }
footer.footer li img { filter: invert(1); }

footer.footer .direitos-reservados { position: absolute; bottom: calc(var(--espaco) * .5); left: calc(var(--espaco) * .5); font-size: var(--fs-100); font-style: normal; font-weight: var(--fw-semibold); line-height: var(--line-height); opacity: .7; pointer-events: all; }

footer.footer a.voltar-ao-topo { 
	position: absolute; 
	/*bottom: calc(100% - 110px); 
	right: 50%; 
	margin-right: calc(var(--limite) * -.5); */
	bottom: calc(100% - 50px);
	right: var(--espaco);
	width: 40px; 
	height: 80px; 
	background-image: url(imagens/voltar-ao-topo.svg); 
	background-position: center top; 
	background-size: auto; 
	transition: height 100ms ease-in-out; 
}
footer.footer a.voltar-ao-topo:hover,
footer.footer a.voltar-ao-topo:focus { height: 100px; }


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

	footer.footer { height: 240px; padding-right: calc(var(--espaco) * .6); }

}


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

	footer.footer ul { flex-direction: column; }
	footer.footer li a { padding: 7px 0 3px; }

}


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

	footer.footer { height: 230px; padding: 0 calc(var(--espaco) * .5) calc(var(--espaco) * .5); }

	footer.footer address strong { display: block; }

	footer.footer ul { flex-direction: column; }
	footer.footer li a { padding: 7px 0 3px; }

}


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

	footer.footer a.logotipo { width: 110px; }
	footer.footer a.logotipo img + .lazy-carregando { width: 110px; height: 68px; }

	footer.footer ul { flex-direction: column; }
	footer.footer li a { padding: 7px 0 3px; }

}


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

	footer.footer { flex-direction: column; height: 300px; padding: 0 calc(var(--espaco) * .75) calc(var(--espaco) * .75); }
	footer.footer:before { clip-path: polygon(100% 0, 0% var(--altura-corte), 0 100%, 100% 100%); }

	footer.footer a.logotipo { top: 20px; transform: translateY(0); width: 85px; }
	footer.footer a.logotipo img + .lazy-carregando { width: 85px; height: 52px; }

	footer.footer address { margin-right: 5px; margin-bottom: 10px; }
	footer.footer address strong { display: block; }

	footer.footer ul { flex-shrink: 0; }
	footer.footer li a { padding: 7px 0 3px; }

	footer.footer .direitos-reservados { display: none; }

	footer.footer a.voltar-ao-topo { 
		bottom: calc(100% - 50px);
		width: 30px; 
		height: 60px; 
		background-size: 100% auto; 
	}
	footer.footer a.voltar-ao-topo:hover,
	footer.footer a.voltar-ao-topo:focus { height: 75px; }

}