/* ESB Loja: banner abaixo do menu e páginas de formulário. Mobile-first. */

/* ---------- Hero do topo ---------- */
.esb-banner {
	--esb-banner-altura: 520px;
	--esb-banner-overlay: .45;
	--esb-banner-ciclo: 18s;
	--esb-banner-slides: 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: clamp(2rem, 1.5rem + 4vw, 4rem) 1.15rem;
	background-color: var(--esb-dark);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	box-sizing: border-box;
	overflow: hidden;
	isolation: isolate;
}
.esb-banner * { box-sizing: border-box; }

/* Mobile-first: o hero ocupa boa parte da tela, sem passar dela. */
.esb-banner--hero {
	min-height: max(380px, 64vh);
	max-height: 86vh;
}
.esb-banner--faixa {
	min-height: 180px;
	padding-block: clamp(1.25rem, 1rem + 2vw, 2rem);
}

/* Véu escuro: gradiente por cima da foto para o texto ficar legível. */
.esb-banner--com-imagem::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 65%, rgba(0, 0, 0, .75) 100%),
		rgba(0, 0, 0, var(--esb-banner-overlay));
}

/* Slides alternando sozinhos. */
.esb-banner__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.esb-banner__slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	animation: esb-hero-3 var(--esb-banner-ciclo) linear infinite;
	animation-delay: calc(var(--esb-i) * (var(--esb-banner-ciclo) / var(--esb-banner-slides)));
	will-change: opacity;
}
.esb-banner--n2 .esb-banner__slide { animation-name: esb-hero-2; }
.esb-banner--n3 .esb-banner__slide { animation-name: esb-hero-3; }
.esb-banner--n4 .esb-banner__slide { animation-name: esb-hero-4; }
.esb-banner--n5 .esb-banner__slide { animation-name: esb-hero-5; }

@keyframes esb-hero-2 {
	0%, 45% { opacity: 1; }
	55%, 95% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes esb-hero-3 {
	0%, 28% { opacity: 1; }
	38%, 95% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes esb-hero-4 {
	0%, 20% { opacity: 1; }
	28%, 96% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes esb-hero-5 {
	0%, 15% { opacity: 1; }
	22%, 96% { opacity: 0; }
	100% { opacity: 1; }
}

.esb-banner__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 56rem;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
}
.esb-banner__titulo {
	margin: 0;
	color: #fff;
	font-family: var(--esb-font-title);
	font-weight: 700;
	font-size: clamp(1.7rem, 1.25rem + 3.2vw, 3.1rem);
	line-height: 1.12;
	letter-spacing: -.01em;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.esb-banner--faixa .esb-banner__titulo {
	font-size: clamp(1.15rem, .95rem + 1.4vw, 2rem);
}
.esb-banner__texto {
	margin: 0;
	max-width: 44rem;
	color: #fff;
	font-family: var(--esb-font);
	font-size: clamp(.95rem, .9rem + .45vw, 1.15rem);
	line-height: 1.55;
	opacity: .95;
	text-wrap: pretty;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.esb-banner__cta {
	margin-top: .5rem;
	background: #fff;
	border-color: #fff;
	color: var(--esb-dark);
	padding-inline: 1.6rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.esb-banner__cta:hover,
.esb-banner__cta:focus-visible {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

@media (min-width: 992px) {
	.esb-banner--hero {
		min-height: var(--esb-banner-altura);
		max-height: none;
	}
	.esb-banner__inner { gap: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
	.esb-banner__slide { animation: none; opacity: 0; }
	.esb-banner__slide:first-child { opacity: 1; }
}

/* ---------- Páginas de formulário ---------- */
.esb-landing {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(1.25rem, 1rem + 2vw, 2.5rem) 1rem;
	color: var(--esb-text);
	font-family: var(--esb-font);
}
.esb-landing * { box-sizing: border-box; }
.esb-landing__pitch {
	margin: 0 0 clamp(1.25rem, 1rem + 1vw, 2rem);
	max-width: 46rem;
	font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
	line-height: 1.6;
	color: var(--esb-muted);
}
.esb-landing__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
	align-items: start;
}
.esb-landing__lado {
	background: var(--esb-bg-soft);
	border-radius: var(--esb-radius);
	padding: 1.25rem 1.4rem;
}
.esb-landing__lado-titulo {
	margin: 0 0 .75rem;
	font-family: var(--esb-font-title);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--esb-dark);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.esb-landing__lista {
	margin: 0;
	padding-left: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.esb-landing__lista li {
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
}

@media (min-width: 900px) {
	.esb-landing__grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
	}
}

/* ---------- Faixa de marcas ---------- */
.esb-marcas {
	--esb-marcas-itens: 5;
	--esb-marcas-copias: 4;
	--esb-marcas-tempo: 32s;
	width: 100%;
	padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) 0;
	background: var(--esb-bg-soft);
	overflow: hidden;
	box-sizing: border-box;
}
.esb-marcas * { box-sizing: border-box; }
.esb-marcas__titulo {
	margin: 0 0 1rem;
	text-align: center;
	color: var(--esb-muted);
	font-family: var(--esb-font);
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.esb-marcas__faixa {
	position: relative;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.esb-marcas__trilho {
	display: flex;
	gap: 0;
	width: max-content;
	animation: esb-marcas-desliza var(--esb-marcas-tempo) linear infinite;
}
.esb-marcas__faixa:hover .esb-marcas__trilho { animation-play-state: paused; }
.esb-marcas__lista {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 1.5rem + 3vw, 4rem);
	margin: 0;
	padding: 0 clamp(1rem, .75rem + 1.5vw, 2rem) 0 0;
	list-style: none;
}
.esb-marcas__item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}
.esb-marcas__item img {
	display: block;
	height: clamp(28px, 22px + 2vw, 44px);
	width: auto;
	max-width: none;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .2s ease, opacity .2s ease;
}
.esb-marcas__item img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Desliza uma lista inteira (1/N do trilho) por volta: o fim de uma cópia emenda no início da seguinte. */
@keyframes esb-marcas-desliza {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-100% / var(--esb-marcas-copias)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.esb-marcas__trilho { animation: none; }
	.esb-marcas__faixa { overflow-x: auto; }
}

/* A faixa de título do tema repete o que o hero já diz e empurra o conteúdo para baixo. */
body.esb-sem-titulo-tema .wpo-page-title,
body.esb-sem-titulo-tema .wpo-breadcrumb-area {
	display: none !important;
}


/* ---------------------------------------------------------------------------
 * Hero com o slider do tema (marcação do Bliize).
 *
 * Altura: o tema usa 100vh e empurra o texto com padding-top de 300px, o que joga o botão
 * para fora da primeira dobra no celular. Aqui a hero mede 100vh menos o que está acima dela
 * (variável --esb-hero-h, calculada no JS) e o texto ancora embaixo com flex.
 * ------------------------------------------------------------------------- */
.esb-banner--tema { margin: 0; padding: 0; }
.esb-hero-tema {
	--esb-hero-h: 100vh;
	height: var(--esb-hero-h) !important;
	max-height: 100vh;
	min-height: 420px;
	overflow: hidden;
}
@supports (height: 100dvh) {
	.esb-hero-tema { max-height: 100dvh; }
}
.esb-hero-tema .swiper-slide .slide-inner {
	display: flex;
	align-items: flex-end;
}
.esb-hero-tema .slide-content {
	padding-top: 0 !important;
	padding-bottom: clamp(24px, 4vh, 70px) !important;
}
@media (min-width: 992px) {
	.esb-hero-tema .slide-content {
		padding-left: clamp(16px, 3vw, 48px) !important;
		padding-right: clamp(16px, 3vw, 48px) !important;
	}
	.esb-hero-tema .slide-content h2 { font-size: clamp(56px, 6.6vw, 100px) !important; line-height: 1.12 !important; }
}
@media (max-width: 991px) {
	.esb-hero-tema .slide-content {
		display: flex !important;
		flex-direction: column;
		justify-content: flex-end;
		gap: 8px;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.esb-hero-tema .slide-content h2 { font-size: clamp(30px, 8.5vw, 44px) !important; line-height: 1.15 !important; margin: 0 !important; }
	.esb-hero-tema .slide-content p { font-size: 16px !important; line-height: 1.45 !important; margin: 0 0 4px !important; }
	.esb-hero-tema .slide-content .sub-title { top: 0 !important; margin: 0 !important; }
	.esb-hero-tema .slide-content .theme-btn { margin-top: 8px !important; padding: 12px 28px !important; }
}
@media (max-width: 991px) and (max-height: 700px) {
	/* Telas baixas: menos respiro, texto um pouco menor. */
	.esb-hero-tema .slide-content h2 { font-size: clamp(26px, 7.5vw, 36px) !important; }
	.esb-hero-tema .slide-content p { font-size: 15px !important; }
	.esb-hero-tema .slide-content { padding-bottom: 18px !important; }
}

/* Sem Swiper (tema sem Elementor): os slides ficam empilhados e alternam por crossfade. */
.esb-hero-tema--crossfade .swiper-container { position: absolute; inset: 0; }
.esb-hero-tema--crossfade .swiper-wrapper { display: block; height: 100%; }
.esb-hero-tema--crossfade .swiper-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.esb-hero-tema--crossfade .swiper-slide.is-atual { opacity: 1; z-index: 1; }
.esb-hero-tema--crossfade .swiper-pagination { display: none; }
@media (prefers-reduced-motion: reduce) {
	.esb-hero-tema--crossfade .swiper-slide { transition: none; }
}