/* Hero da home: reconstrucao do slide unico do Slider Revolution (rev_slider_1_1)
 * em HTML/CSS puro. As posicoes sao as mesmas do slider original, em unidades de
 * grade (1200x580 no desktop, 778x500 no tablet, 480x600 no celular); a variavel
 * --u e o tamanho de 1 unidade da grade em px, assim tudo escala proporcionalmente,
 * exatamente como o slider fazia em JavaScript. */

.hero {
	--u: min(1px, 100vw / 1200);
	position: relative;
	overflow: hidden;
	background: #101010;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(580 * var(--u));
}
.hero-stage {
	position: relative;
	flex: none;
	width: calc(1200 * var(--u));
	height: calc(580 * var(--u));
}
/* (!important: o tema aplica max-width:100% / height:auto em toda <img>) */
.hero .hero-img {
	position: absolute;
	display: block;
	max-width: none !important;
	max-height: none !important;
	user-select: none;
	-webkit-user-drag: none;
}
.hero .hero-img-statue {
	z-index: 3;
	left: calc(-693 * var(--u));
	top: calc(-44 * var(--u));
	width: calc(1316 * var(--u)) !important;
	height: calc(632 * var(--u)) !important;
	animation: hero-statue .86s cubic-bezier(.65, .05, .36, 1) both;
}
.hero .hero-img-books {
	z-index: 1;
	left: calc(613 * var(--u));
	top: calc(-1 * var(--u));
	width: calc(1506 * var(--u)) !important;
	height: calc(731 * var(--u)) !important;
}
.hero-shade {
	display: none;
	position: absolute;
	z-index: 2;
	left: calc(-28 * var(--u));
	right: 0;
	top: calc(249 * var(--u));
	height: calc(86 * var(--u));
	background: linear-gradient(rgba(16, 16, 16, 0) 0%, rgba(16, 16, 16, 1) 85%, rgba(16, 16, 16, 1) 100%);
}
.hero-title,
.hero-brand,
.hero-cta {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 50%;
	text-align: left;
}
.hero-title {
	z-index: 5;
	width: calc(568 * var(--u));
	margin-left: calc(55 * var(--u)); /* xo 339 - metade da largura */
	top: calc(305 * var(--u));
	font: 700 calc(25 * var(--u)) / 1.08 "Libre Baskerville", Georgia, serif;
	color: #fff;
	animation: hero-up 1s ease-out 1.3s both;
}
.hero-brand {
	z-index: 6;
	transform: translateX(-50%);
	margin-left: calc(146 * var(--u));
	top: calc(268 * var(--u));
	font: 800 calc(19 * var(--u)) / 1.26 Montserrat, Arial, sans-serif;
	color: #e79527;
	white-space: nowrap;
	animation: hero-fade .9s ease-out .8s both;
}
.hero-cta {
	z-index: 7;
	transform: translateX(-50%);
	margin-left: calc(146 * var(--u));
	top: calc(362 * var(--u));
	font-size: calc(14 * var(--u));
	line-height: 1.15;
	white-space: nowrap;
	animation: hero-up-50 .9s ease-out 2s both;
}
.hero-cta a.vamtam-button {
	font-size: 1em !important;
	float: none;
	display: inline-block;
	margin: 0;
	border-width: calc(3 * var(--u));
}

@keyframes hero-statue {
	from { transform: translateX(calc(-50 * var(--u))); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
@keyframes hero-up {
	from { transform: translateY(calc(25 * var(--u))); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
@keyframes hero-up-50 {
	from { transform: translateX(-50%) translateY(calc(50 * var(--u))); opacity: 0; }
	to   { transform: translateX(-50%); opacity: 1; }
}
@keyframes hero-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Tablet: grade 778 x 500 (nivel 3 do slider) */
@media (max-width: 778px) {
	.hero { --u: calc(100vw / 778); min-height: calc(500 * var(--u)); }
	.hero-stage { width: calc(778 * var(--u)); height: calc(500 * var(--u)); }
	.hero .hero-img-statue { left: calc(-904 * var(--u)); top: calc(-84 * var(--u)); }
	.hero .hero-img-books { left: calc(397 * var(--u)); top: 0; width: calc(976 * var(--u)) !important; height: calc(473 * var(--u)) !important; }
	.hero-title { width: calc(478 * var(--u)); margin-left: calc(35 * var(--u)); top: calc(296 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.75; }
	.hero-brand { margin-left: calc(140 * var(--u)); top: calc(226 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.29; }
	.hero-cta { margin-left: calc(138 * var(--u)); top: calc(358 * var(--u)); }
}

/* Celular: grade 480 x 600 (nivel 4 do slider), com a estatua em cima e os livros embaixo */
@media (max-width: 480px) {
	.hero { --u: calc(100vw / 480); min-height: 580px; }
	.hero-stage { width: calc(480 * var(--u)); height: calc(600 * var(--u)); }
	.hero .hero-img-statue { left: calc(-208 * var(--u)); top: calc(-57 * var(--u)); width: calc(809 * var(--u)) !important; height: calc(389 * var(--u)) !important; }
	.hero .hero-img-books { left: calc(-169 * var(--u)); top: calc(328 * var(--u)); width: calc(811 * var(--u)) !important; height: calc(394 * var(--u)) !important; }
	.hero-shade { display: block; }
	.hero-title, .hero-brand, .hero-cta { left: 0; top: auto; margin-left: 0; transform: none; }
	.hero-title { left: calc(21 * var(--u)); bottom: calc(70 * var(--u)); width: calc(431 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.36; }
	.hero-brand { left: calc(26 * var(--u)); bottom: calc(108 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.29; }
	.hero-cta { left: calc(16 * var(--u)); bottom: calc(6 * var(--u)); font-size: calc(17 * var(--u)); }
	.hero-cta a.vamtam-button { padding: .75em 1.9em; }
	@keyframes hero-up-50 {
		from { transform: translateY(calc(50 * var(--u))); opacity: 0; }
		to   { transform: none; opacity: 1; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-img-statue, .hero-title, .hero-brand, .hero-cta { animation: none; }
}