.carousel img{
    height: 500px;
}

@media screen and (max-width: 700px){
    .carousel img{
        height: 300px;
    }
}

.row, .card{
    margin-top: 20px;
}

.nav{
    background-color: black!important;
}

/* Espaço superior para compensar navbar fixa */
.nav-offset {
	height: 70px; /* ajuste se necessário conforme a altura da navbar */
}

/* Estilo geral das seções */
section {
	padding: 40px 0;
}

/* Destaque visual para seções de placeholder */
.section-placeholder {
	background: var(--section-bg);
	border-top: 1px solid #e9ecef;
	border-bottom: 1px solid #e9ecef;
	margin-bottom: 30px;
}

/* Cartões de placeholder */
.placeholder-card {
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 1px dashed #ced4da;
}

/* Pequenas melhorias responsivas */
@media (max-width: 576px) {
	.nav-offset { height: 56px; }
	.section-placeholder { padding: 20px 10px; }
}

/* Padroniza imagens das cards */
.card-img-top {
	width: 100%;
	height: 200px;    /* altura padrão; ajuste conforme preferir */
	object-fit: cover;
}

/* Faz a card ocupar toda a altura disponível e o body expandir */
.card.h-100 {
	display: flex;
	flex-direction: column;
}
.card.h-100 .card-body {
	flex: 1 1 auto;
}

/* Garante que as colunas com d-flex mantenham a card esticada */
.row > .d-flex {
	display: flex;
}

/* Responsivo: reduzir altura das imagens em telas pequenas */
@media (max-width: 576px) {
	.card-img-top {
		height: 140px;
	}
}

/* Pequeno ajuste visual para títulos/textos se necessário */
.card-title {
	margin-top: 0.5rem;
	margin-bottom: 0.75rem;
}

/* Override específico: mostra a imagem inteira sem cortar (uso para imagens importantes) */
.card-img-top.contain-img {
	height: 200px;         /* mesma altura padrão das outras images */
	object-fit: contain;   /* mostra a imagem inteira sem cortar */
	object-position: center;
	background-color: #ffffff;
}

/* Responsivo: manter proporção em telas pequenas */
@media (max-width: 576px) {
	.card-img-top.contain-img {
		height: 140px;
	}
}

/* Seção 3: layout dividido (esquerda texto, direita com duas áreas empilhadas) */
.sec3-split {
	display: flex;
	width: 100%;
	min-height: 50vh;      /* ocupa metade da tela */
	box-sizing: border-box;
}

/* esquerda: ocupa metade da largura */
.sec3-left {
	flex: 1 1 50%;
	background: transparent;
}

/* direita: ocupa metade da largura e empilha duas metades internas */
.sec3-right {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
}

/* cada metade da direita ocupa metade da altura da área direita */
.sec3-right .half {
	flex: 1 1 50%;
	box-sizing: border-box;
}

/* imagem dentro da área: centralizada e sem cortar fora do seu recipiente */
.sec3-image-wrapper {
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

/* responsivo: empilha colunas em telas pequenas */
@media (max-width: 768px) {
	.sec3-split {
		flex-direction: column;
		min-height: auto;
	}
	.sec3-left,
	.sec3-right {
		flex: 1 1 100%;
	}
	.sec3-right .half {
		min-height: 120px;
	}
}

/* espaçamento interno consistente com restante do site */
.sec3-left, .sec3-right .half {
	padding-left: 1rem;
	padding-right: 1rem;
}

/* vídeo responsivo na seção 3 */
.sec3-video {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}

/* responsivo: limitar altura mínima em telas pequenas se necessário */
@media (max-width: 768px) {
	.sec3-video {
		max-height: 200px;
	}
}

/* Estilos para o formulário de link na seção 3 */
.sec3-link-form .form-control {
	height: calc(1.5em + .75rem + 2px);
}
.sec3-link-form #sec3-open-btn {
	min-width: 140px;
}
#sec3-error {
	text-align: center;
}

/* Mini-carousel na seção 3 */
.mini-carousel {
	max-width: 100%;
}
.mini-carousel .carousel-inner {
	height: 100%;
}
.mini-carousel .carousel-item img {
	width: 100%;
	height: 220px;        /* altura fixa para os slides do mini-carousel */
	object-fit: cover;    /* preenche sem distorcer */
}

/* imagens menores em telas pequenas */
@media (max-width: 576px) {
	.mini-carousel .carousel-item img {
		height: 140px;
	}
}

/* Evita que títulos sejam cortados quando navegados por âncoras (navbar fixa) */
:root {
	--navbar-height: 70px; /* ajuste conforme a altura real da sua navbar */
}
.nav-offset {
	height: var(--navbar-height);
}

/* Quando um elemento é alvo de uma âncora, deixa um espaço acima igual à navbar */
section {
	scroll-margin-top: calc(var(--navbar-height) + 8px);
}

/* rolagem suave opcional */
html {
	scroll-behavior: smooth;
}

/* Responsivo: navbar menor em telas pequenas */
@media (max-width: 576px) {
	:root { --navbar-height: 56px; }
	.nav-offset { height: var(--navbar-height); }
	section { scroll-margin-top: calc(var(--navbar-height) + 6px); }
}

/* Variáveis e tipografia */
:root{
	--primary: #2b7a78;
	--accent: #f2cc8f;
	--muted: #6c757d;
	--bg-gradient-start: #ffffff;
	--bg-gradient-end: #f1f7f6;
	--navbar-height: 70px;
	--section-bg: #f8f9fa; /* cor padronizada para seções 2,3 e agora 1 */
}

body {
	font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
	color: #222;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* Navbar */
.navbar {
	border-bottom: 1px solid rgba(0,0,0,0.05);
	background: rgba(255,255,255,0.98);
}
.navbar-brand {
	color: var(--primary);
	font-weight: 700;
	letter-spacing: .2px;
}
.navbar .nav-link { color: #333; }

/* Carrossel: legendas mais legíveis */
#carouselExampleIndicators .carousel-caption {
	background: rgba(0,0,0,0.45);
	padding: 1rem;
	border-radius: 8px;
	text-shadow: none;
}
#carouselExampleIndicators .carousel-caption h2 { font-weight:600; }

/* Cards: hover, borda e equalização */
.card.img-thumbnail {
	transition: transform .18s ease, box-shadow .18s ease;
	border-radius: 8px;
	overflow: hidden;
}
.card.img-thumbnail:hover {
	transform: translateY(-6px);
	box-shadow: 0 8px 24px rgba(40,40,40,0.12);
}
.card-img-top {
	border-bottom: 1px solid rgba(0,0,0,0.04);
	transition: transform .3s ease;
}
.card-img-top:hover { transform: scale(1.02); }

/* Botões primários com cor consistente */
.btn-primary {
	background: linear-gradient(180deg, var(--primary), #245e5d);
	border: none;
	box-shadow: 0 2px 6px rgba(43,122,120,0.18);
}

/* Seção placeholder mais suave */
.section-placeholder {
	background: var(--section-bg);
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 2px 12px rgba(20,20,20,0.03);
}

/* Mini-carousel */
.mini-carousel .carousel-item img {
	height: 220px;
	object-fit: cover;
	border-radius: 6px;
}

/* Rodapé */
.site-footer {
	background: #f8faf9;
	border-top: 1px solid rgba(0,0,0,0.04);
}

/* Back to top */
.back-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--primary);
	color: white;
	border: none;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(43,122,120,0.18);
	z-index: 9999;
}

/* Ajustes responsivos pequenos */
@media (max-width: 768px) {
	.mini-carousel .carousel-item img { height: 140px; }
	.sec3-left { padding: 12px; }
	.section-placeholder { padding: 16px; }
}

/* Deixa os cards da seção 1 com fundo branco e estilo igual às outras seções */
#sec1 .card.img-thumbnail {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(20,20,20,0.04);
	overflow: hidden;
}

/* Aplica ao #sec1 o mesmo visual das seções placeholder (seções 2 e 3) */
#sec1 {
	background: var(--section-bg);
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 2px 12px rgba(20,20,20,0.03);
	margin-bottom: 30px;
}

/* Garante espaçamento interno consistente em telas pequenas (mesma regra que .section-placeholder) */
@media (max-width: 768px) {
	#sec1 { padding: 16px; }
}
