/**
 * Hero home — KV "Mais Tap, Mais Chances" (ref: assets/sumup/kvPreview.webp)
 * Esquerda: selo (selo_900) + box da mecânica (mecanica_650) + pack de prêmios (packPremio_460).
 * Direita: círculo Tap to Pay (tapKV_1350) recortado pela borda, com o box de acesso por cima.
 * Desktop: altura máxima 850px. Mobile: tudo empilhado, sem a cena.
 * Seletores com #hero para vencer o CSS legado (home / home-hub-mobile / mobile-assets).
 */

#hero.hero--kv:not(.hero--flow) {
	--hh: clamp(72rem, 100dvh, 85rem);
	position: relative;
	background: var(--sumup-kv-bg);
	min-height: 0;
	height: auto;
	max-height: none;
	padding-top: var(--hero-stack-h);
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	overflow-y: visible;
}

#hero.hero--kv:not(.hero--flow) .hero__media,
#hero.hero--kv:not(.hero--flow) .hero__overlay {
	display: none;
}

/* ---------- Cena Tap to Pay (direita) ---------- */
#hero.hero--kv .hero__cena {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50vw;
	/* overflow: hidden; */
	line-height: 0;
	pointer-events: none;
	z-index: 0;
}

#hero.hero--kv .hero__cena img {
	position: absolute;
	top: -0.84%;
	left: 0;
	display: block;
	width: auto;
	height: 124%;
	max-width: none;
	aspect-ratio: 1;
	transform-origin: 50% 50%;
}

/* Entrada (fade + deslocamento), inclinação única (sobe e desce) e zoom no scroll.
 * Usa translate/rotate/scale individuais para não brigar com o transform do parallax;
 * --sumup-parallax-scale vem de home-scroll-animations.js (modo page-top). */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	#hero.hero--kv .hero__cena img {
		animation:
			sumup-tap-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) both,
			sumup-tap-tilt 1.8s ease-in-out 1s 1;
	}

	.sumup-scroll-ready #hero.hero--kv .hero__cena img[data-sumup-parallax] {
		transform: none;
		scale: var(--sumup-parallax-scale, 1);
		will-change: scale, rotate, translate, opacity;
	}
}

/* Sem opacity: elemento LCP precisa ser pintado visível desde o primeiro frame. */
@keyframes sumup-tap-in {
	from {
		translate: 3% 5%;
	}

	to {
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	#hero.hero--kv .hero__headline,
	#hero.hero--kv .hero__mecanica-card,
	#hero.hero--kv .hero__premios,
	#hero.hero--kv .hero__hub .page-card {
		animation: sumup-hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	}

	#hero.hero--kv .hero__headline { animation-delay: 0.08s; }
	#hero.hero--kv .hero__mecanica-card { animation-delay: 0.2s; }
	#hero.hero--kv .hero__premios { animation-delay: 0.3s; }
	#hero.hero--kv .hero__hub .page-card { animation-delay: 0.4s; }
}

@keyframes sumup-hero-rise {
	from {
		translate: 0 2.4rem;
	}
}

@keyframes sumup-tap-tilt {
	0%,
	100% {
		rotate: 0deg;
		translate: 0 0;
	}

	35% {
		rotate: -3deg;
		translate: 0 -2%;
	}

	70% {
		rotate: 1.5deg;
		translate: 0 1%;
	}
}

#hero.hero--kv:not(.hero--flow) .hero__content {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(30rem, 38rem);
	align-items: center;
	column-gap: clamp(2rem, 4vw, 6rem);
	width: min(100% - 4rem, 140rem);
	min-height: 0;
	height: auto;
	max-height: none;
	margin: 0 auto;
	padding: calc(var(--countdown-h, 0px) + 2.4rem) 0 11.5rem;
	box-sizing: border-box;
	pointer-events: none;
}

/* ---------- Coluna KV ---------- */
#hero.hero--kv .hero__kv {
	width: 100%;
	max-width: 76rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	pointer-events: none;
}

.hero__headline {
	position: relative;
	z-index: 1;
	width: min(100%, 66rem);
	margin: 0 0 2.4rem;
	line-height: 0;
}

.hero__headline img,
.hero__mecanica-img {
	display: block;
	width: 100%;
	height: auto;
}

.hero__kv-body {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: center;
	column-gap: 4%;
	width: 100%;
}

/* Box da mecânica (imagem 650x413): a pílula "Cadastre-se e participe." vira link sobreposto */
.hero__mecanica-card {
	position: relative;
	z-index: 1;
	container-type: inline-size;
}

.hero__cta-tag {
	position: absolute;
	top: calc(100cqw * 305 / 650);
	left: 15%;
	width: 71%;
	height: calc(100cqw * 108 / 650);
	border-radius: 999px;
	transform: rotate(-3deg);
	pointer-events: auto;
}

.hero__cta-tag:focus-visible {
	outline: 3px solid var(--sumup-ink);
	outline-offset: 2px;
}

.hero__regra-nota {
	margin: 0.8rem 0 0;
	font-family: var(--font-body);
	font-size: 1.3rem;
	line-height: 1.3;
	color: var(--sumup-ink-subtle);
}

.hero__premios {
	position: relative;
	z-index: 2;
	line-height: 0;
}

.hero__premios img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 1.6rem 2.4rem rgba(30, 28, 28, 0.18));
}

/* ---------- Hub (formulário) à direita ---------- */
#hero.hero--kv:not(.hero--flow) .hero__hub {
	position: static;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
}

#hero.hero--kv:not(.hero--flow) .hero__hub .page-card {
	width: 100%;
	max-width: 38rem;
	pointer-events: auto;
	box-shadow: 0 2.4rem 4.8rem rgba(30, 28, 28, 0.22);
}

/* Linha + "Ainda não tem cadastro?" + [Quero participar] ocultos no box de acesso */
#hero.hero--kv .hero__hub .sumup-login-cta {
	display: none;
}

#hero.hero--kv.hero--logged {
	height: auto;
}

/* ---------- Desktop: altura máxima 850px ---------- */
@media (min-width: 992px) {
	#hero.hero--kv:not(.hero--flow):not(.hero--logged) {
		height: var(--hh);
		min-height: 0;
		max-height: 85rem;
	}

	#hero.hero--kv.hero--logged:not(.hero--flow) {
		min-height: var(--hh);
		max-height: 85rem;
	}
}

/* ---------- Desktop: box de acesso horizontal, alinhado ao menu (3rem abaixo) ----------
 * O box é sticky dentro do .hero__hub, que vai do topo da hero até o centro dela + metade do box:
 * acompanha o menu no scroll e para quando o centro do box atinge o centro da hero.
 * Medidas do menu: site-nav-dropdown.css (>= 1200px) e site-nav-mobile.css (< 1200px). */
@media (min-width: 992px) {
	/* base.css usa overflow-x: hidden no body, o que o torna contêiner de rolagem e anula o sticky */
	body:has(#hero.hero--kv) {
		overflow-x: clip;
	}

	#hero.hero--kv:not(.hero--flow):not(.hero--logged) {
		--sumup-hub-w: 54rem;
		--sumup-hub-h: 18.6rem;
		--sumup-menu-bottom: 72px;
		--sumup-menu-bottom-stuck: 64px;
		--sumup-menu-right: 8px;
	}

	#hero.hero--kv:not(.hero--flow):not(.hero--logged) .hero__content {
		position: static;
		grid-template-columns: minmax(0, 1fr) var(--sumup-hub-w);
	}

	#hero.hero--kv:not(.hero--flow):not(.hero--logged) .hero__kv {
		position: relative;
		z-index: 1;
	}

	#hero.hero--kv:not(.hero--flow):not(.hero--logged) .hero__hub {
		position: absolute;
		top: 0;
		right: var(--sumup-menu-right);
		bottom: auto;
		left: auto;
		z-index: 3;
		display: block;
		width: auto;
		/* --sumup-hub-h é atualizada pelo home-hub.js com a altura do painel visível;
		   o max() garante o respiro de 3rem abaixo do menu mesmo com painéis altos */
		height: max(
			calc(50% + var(--sumup-hub-h) / 2),
			calc(var(--sumup-menu-bottom) + 3rem + var(--sumup-hub-h))
		);
	}

	#hero.hero--kv:not(.hero--flow):not(.hero--logged) .hero__hub .page-card {
		position: sticky;
		top: calc(var(--sumup-menu-bottom) + 3rem);
		margin-left: auto;
		transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body:has(.site-header.is-stuck) #hero.hero--kv:not(.hero--flow):not(.hero--logged) .hero__hub .page-card {
		top: calc(var(--sumup-menu-bottom-stuck) + 3rem);
	}

	#hero.hero--kv:not(.hero--flow):not(.hero--logged) .hero__hub [data-vitrine-panel="login"] {
		width: var(--sumup-hub-w);
		max-width: none;
		padding: 2rem 2.4rem 1.6rem;
	}

	#hero.hero--kv:not(.hero--flow):not(.hero--logged) [data-vitrine-panel="login"] .vitrine-lead {
		display: none;
	}

	#hero.hero--kv:not(.hero--flow):not(.hero--logged) [data-vitrine-panel="login"] .login-step[data-login-panel] {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 9.6rem;
		align-items: start;
		gap: 0.8rem 1rem;
	}

	#hero.hero--kv:not(.hero--flow):not(.hero--logged) [data-vitrine-panel="login"] .sumup-login-forgot {
		grid-column: 1 / -1;
		margin: 0;
		text-align: left;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	#hero.hero--kv:not(.hero--flow):not(.hero--logged) [data-vitrine-panel="login"] .form-control {
		padding-inline: 1.2rem;
		font-size: 1.4rem !important;
	}
}

@media (min-width: 1200px) {
	#hero.hero--kv:not(.hero--flow):not(.hero--logged) {
		--sumup-hub-w: 58rem;
		--sumup-menu-bottom: 88px;
		--sumup-menu-bottom-stuck: 72px;
		--sumup-menu-right: calc(16px + max(0px, (100% - 32px - 1442px) / 2));
	}
}

/* ---------- Tablet / mobile: empilhado ---------- */
@media (max-width: 991px) {
	#hero.hero--kv:not(.hero--flow),
	#hero.hero--kv:not(.hero--flow):not(.hero--hub-collapsed) {
		min-height: 0;
		max-height: none;
		height: auto;
		overflow: visible;
	}

	#hero.hero--kv .hero__cena {
		display: none;
	}

	#hero.hero--kv:not(.hero--flow) .hero__content,
	#hero.hero--kv:not(.hero--flow):not(.hero--hub-collapsed) .hero__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4rem;
		width: 100%;
		min-height: 0;
		padding: calc(max(var(--countdown-h, 0px), 5.2rem) + 2rem) 1.6rem 12rem;
	}

	#hero.hero--kv .hero__kv {
		max-width: 64rem;
		align-items: center;
	}

	.hero__headline {
		width: min(100%, 56rem);
		margin-inline: auto;
	}

	#hero.hero--kv:not(.hero--flow) .hero__hub,
	#hero.hero--kv:not(.hero--flow) .hero__hub.hero__hub {
		top: auto !important;
		justify-content: center;
		width: 100%;
	}

	#hero.hero--kv:not(.hero--flow) .hero__hub .page-card {
		max-width: 46rem;
	}
}

@media (max-width: 575px) {
	.hero__kv-body {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.4rem;
	}

	.hero__regra-nota {
		text-align: center;
	}

	.hero__premios {
		width: min(72%, 32rem);
		margin: 0 auto;
	}
}

/* ---------- Faixa "Periodo da promocao em breve" ativa: sem box de acesso, KV centralizado ---------- */
html.promo-em-breve #hero.hero--kv .hero__hub,
html.promo-em-breve #hero.hero--kv .hero__hub-fab {
	display: none !important;
}

html.promo-em-breve #hero.hero--kv:not(.hero--flow) .hero__content {
	grid-template-columns: minmax(0, 1fr);
}