/**
 * LeaderEduca Tools — slider/banner
 *
 * A "tela" de cada slide tem o tamanho da grade original (ex.: 1920x850) e
 * todo o conteúdo é medido em cqw, ou seja, em porcentagem da largura do
 * slider. Com isso o conjunto escala junto, como fazia o Slider Revolution,
 * mas sem uma linha de JavaScript de layout.
 */

.le-slider {
	container-type: inline-size;
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Sliders "fullwidth" do RevSlider rompem o container e ocupam a largura toda
 * da página (sem a barra de rolagem). --le-vw é escrito pelo slider.js. */
.le-slider--fullwidth {
	width: var( --le-vw, 100vw );
	max-width: none;
	margin-left: calc( 50% - var( --le-vw, 100vw ) / 2 );
	margin-right: calc( 50% - var( --le-vw, 100vw ) / 2 );
}

.le-slider__viewport {
	position: relative;
	width: 100%;
	/* aspect-ratio vem do CSS gerado por slider/breakpoint */
}

.le-slide {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--le-duration, 300ms) ease;
	will-change: opacity;
}

.le-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* Slider de um slide só: ele continua absoluto e preenchendo o palco (que já
 * tem altura pelo aspect-ratio da grade). Com `position: relative` a caixa
 * nascia com altura zero — o conteúdo é todo posicionado dentro do canvas —,
 * e aí a foto de fundo do slide não aparecia e os layers subiam para o topo. */
.le-slider--static .le-slide {
	opacity: 1;
	visibility: visible;
}

.le-slide__canvas {
	position: absolute;
	inset: 0;
}

/* ---------------------------------------------------------------- layers */

.le-layer {
	position: absolute;
	margin: 0;
	box-sizing: border-box;
	color: #fff;
	/* O Slider Revolution aplicava Roboto nos layers por CSS próprio; o site já
	 * serve a fonte localmente (uploads/elementor/google-fonts). */
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	white-space: normal;
}

.le-layer > * {
	margin: 0;
}

.le-layer--image {
	line-height: 0;
}

.le-layer--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.le-layer--button,
.le-layer--link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, filter 200ms ease;
}

.le-layer--button:hover,
.le-layer--link:hover {
	filter: brightness(120%);
}

.le-layer__btn {
	display: block;
	white-space: nowrap;
}

/* --------------------------------------------------------------- navegação
 * Medidas conferidas contra o Slider Revolution em produção:
 * setas 50x35 coladas nas bordas e centradas na vertical; bullets de 20px com
 * anel branco de 2px, ponto interno que cresce no slide ativo, 5px de
 * espaçamento e 20px do rodapé.
 */

.le-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 35px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: opacity 200ms ease;
}

.le-slider__arrow:hover {
	opacity: 0.7;
}

.le-slider__arrow svg {
	width: 26px;
	height: 26px;
}

.le-slider__arrow--prev {
	left: 0;
}

.le-slider__arrow--next {
	right: 0;
}

.le-slider__bullets {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 5;
	display: flex;
	gap: 5px;
	transform: translateX(-50%);
}

.le-slider__bullet {
	position: relative;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	box-sizing: content-box;
	cursor: pointer;
}

.le-slider__bullet::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #fff;
	transform: scale(0);
	transition: transform 200ms ease;
}

.le-slider__bullet.is-active::after,
.le-slider__bullet:hover::after {
	transform: scale(1.2);
}

.le-slider__arrow:focus-visible,
.le-slider__bullet:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.le-slide,
	.le-slider__bullet::after {
		transition: none;
	}
}

/* ------------------------------------------------ ajuste: On demand (hero)
 * A imagem de fundo (2024/02/Grupo-129.png, 1921x1212) tem uma faixa azul
 * que começa na linha 818 (67,49% da altura). Com `cover` + "center 22%" a
 * faixa descia conforme a largura da tela e o texto branco ficava sobre o
 * verde. Aqui o fundo é posicionado para que a faixa azul comece sempre na
 * altura da última linha rosa ("a realidade do seu negócio", y 502–570 da
 * grade 1240x800), como em produção — o texto branco (y 614) fica no azul.
 *   escala do palco  s    = min(100cqw, 1240px) / 1240
 *   altura da imagem imgH = max(800 * s, 63.092cqw)   (efeito do cover)
 *   deslocamento     y    = 536 * s - 0.67492 * imgH
 * Só a partir de 779px: no mobile a grade é outra e o texto já cai no azul.
 * Fica aqui (e não em data/sliders/lideranca-11.php) porque aquele arquivo é
 * regerado por tools/gerar-sliders.py. */
@media (min-width: 779px) {
	.le-slider--lideranca-11 .le-slide {
		background-color: #0f4b5a;
		background-position:
			center
			calc( 536 * min( 100cqw, 1240px ) / 1240 - 0.67492 * max( 800 * min( 100cqw, 1240px ) / 1240, 63.092cqw ) ) !important;
	}
}