/*
 * Seções em tela cheia na página inicial (intro + cada bloco de conteúdo).
 * Carregado só em index.html (body.index).
 */

/* Intro / hero */
body.index #banner {
	min-height: 100vh;
	min-height: 100dvh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 5em 1.5em 3em;
}

body.index #banner .inner {
	max-width: 100%;
}

/* Área principal: remove padding vertical global para cada filho controlar altura */
body.index #main {
	padding-top: 0;
	padding-bottom: 0;
}

/* “Quem nós somos” */
body.index #main > header.special.container {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 4em 1.5em;
	margin-left: auto;
	margin-right: auto;
	overflow: visible;
}

/*
 * Folha no fluxo normal (evita recorte em mobile com overflow/transform).
 */
body.index #main > header.special.container .folha-acima {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

body.index #main > header.special.container .folha-acima img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

/* Espaço mínimo entre folha e título (antes 2.85rem deixava o par muito “solto”) */
body.index #main > header.special.container > h2 {
	margin-top: clamp(0.35rem, 1.5vw, 0.95rem);
}

/*
 * Com align-items: center, parágrafos curtos encolhem à largura do texto e
 * ficam centralizados (desalinhados dos demais). Força largura total.
 * Também equaliza o espaçamento (o template zera margin-bottom do h2 + p).
 */
body.index #main > header.special.container > p {
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 1.25em 0;
	padding-top: 0;
}

body.index #main > header.special.container > h2 + p {
	margin-bottom: 1.25em;
	padding-top: 1.5em;
}

body.index #main > header.special.container > p:last-of-type {
	margin-bottom: 0;
}

/* Cada seção dentro do main (objetivo + carrossel, mapa, etc.) */
body.index #main > section.wrapper {
	min-height: 100vh;
	min-height: 100dvh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding-top: 4em;
	padding-bottom: 4em;
}

body.index #main > section.wrapper > .container {
	width: 100%;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.index #main > section.wrapper .row {
	width: 100%;
	align-items: center;
}

/* Mapa: ocupa bem o espaço dentro da seção em tela cheia */
body.index #main > section.wrapper #mapa {
	flex: 1 1 auto;
	min-height: 50vh;
	width: 100%;
}

body.index #main > section.wrapper #map {
	width: min(900px, 100%);
	height: min(500px, 55vh);
	max-width: 100%;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.18),
		0 16px 40px rgba(0, 0, 0, 0.22),
		0 32px 72px rgba(0, 0, 0, 0.2);
}

/* Desktop: mapa maior; cantos um pouco mais suaves */
@media screen and (min-width: 841px) {
	body.index #main > section.wrapper #map {
		width: min(1180px, 94vw);
		height: min(640px, 66vh);
		min-height: 480px;
		border-radius: 1.25rem;
		box-shadow:
			0 6px 16px rgba(0, 0, 0, 0.2),
			0 22px 52px rgba(0, 0, 0, 0.28),
			0 44px 88px rgba(0, 0, 0, 0.24);
	}
}

/* Contato */
body.index #contact {
	min-height: 100vh;
	min-height: 100dvh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 4em 1.5em;
}

/* CTA: mantém altura compacta do main.css (padding ~5em), sem tela cheia */

/* Âncoras com header fixo em outras rolagens */
body.index #main,
body.index #contact {
	scroll-margin-top: 1.25em;
}

@media (prefers-reduced-motion: reduce) {
	body.index #banner {
		animation: none;
	}
}