/* =============================================================
   Hero da página inicial
   Banner que alterna imagens com o texto institucional fixo por
   cima. As imagens são decorativas: o conteúdo real é o texto,
   e ele nunca troca.
   ============================================================= */

.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: min(34rem, 86svh);
	padding-block: var(--e-9);
	color: var(--c-texto-inverso);
	background: var(--c-fundo-escuro);

	/* Opacidade do véu sobre as fotos, do lado do texto para o lado oposto.
	   Subir escurece o banner; descer deixa a imagem aparecer mais. */
	--veu-inicio: 92%;
	--veu-meio:   82%;
	--veu-fim:    66%;
}

.hero__fundo {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.hero__imagem {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1200ms ease;
}

.hero__imagem.is-ativa {
	opacity: 1;
}

/* Véu escuro: sem ele o texto branco não alcança contraste sobre
   as fotos noturnas, que têm áreas claras de luz urbana. A cor vem da
   paleta; só a opacidade é decidida aqui.

   Sem z-index de propósito. O .hero__fundo tem z-index negativo, o que
   abre um stacking context próprio; dentro dele, um filho com z-index
   negativo é pintado ANTES dos filhos com z-index auto — as fotos. Um
   z-index aqui jogaria o véu para trás das imagens. Sendo o último filho
   com z-index auto, ele é pintado por cima delas, que é o que se quer. */
.hero__fundo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgb(var(--c-fundo-escuro-rgb) / var(--veu-inicio)) 0%,
		rgb(var(--c-fundo-escuro-rgb) / var(--veu-meio)) 45%,
		rgb(var(--c-fundo-escuro-rgb) / var(--veu-fim)) 100%
	);
}

.hero__interno {
	max-width: 62rem;
}

.hero__titulo {
	color: var(--c-texto-inverso);
	text-wrap: balance;
}

.hero__titulo::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 4px;
	margin-block-start: var(--e-4);
	border-radius: var(--raio-sm);
	background: var(--c-acao);
}

.hero__texto {
	max-width: 58ch;
	margin-block-start: var(--e-5);
	font-size: var(--t-md);
	color: rgb(var(--c-texto-inverso-rgb) / 90%);
}

.hero__texto > p + p {
	margin-block-start: var(--e-4);
}

.hero__acao {
	margin-block-start: var(--e-6);
}

/* Controles ---------------------------------------------------- */
.hero__pontos {
	display: flex;
	gap: var(--e-2);
	margin-block-start: var(--e-7);
}

.hero__ponto {
	width: 2.5rem;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: var(--raio-sm);
	background: rgb(var(--c-texto-inverso-rgb) / 35%);
	transition: background-color var(--transicao);
}

.hero__ponto[aria-current="true"] {
	background: var(--c-acao);
}

.hero__ponto:hover {
	background: rgb(var(--c-texto-inverso-rgb) / 70%);
}