.custom-mw-1 {
		max-width: 110px !important;
}

.custom-fs-1 {
		font-size: 19.2px !important;
		font-size: 1.2rem !important;
}

.custom-bg-color-1 {
		background-color: #2c3b43 !important;
}

.custom-image-position-1 {
		position: absolute;
		top: 0;
		right: 100%;
		min-width: 250px;
		height: 100%;
}

.custom-image-position-1 .featured-box {
		height: 100% !important;
}

/* SVG Style */
.custom-svg-style-1 {
		background-image: url("../../img/usm/bg_home.jpg");
		position: absolute;
		top: 0;
		bottom: 0; /* em vez de height:100% — estica com o container mesmo
		              quando a altura dele vem só do conteúdo (min-height),
		              o que passou a acontecer com o feed de fotos dentro
		              da mesma section. */
		width: 100vw;
		left: 50%;
		transform: translate3d(-50%, 0, 0);
}

/* Form Styles */
.custom-form-style-1 .form-control {
		border-radius: 0;
		padding: 14.4px 24px;
		padding: 0.9rem 1.5rem;
		height: 47.2px;
		height: 2.95rem;
}

.custom-form-style-1 .form-control::-moz-placeholder {
		color: #536f78;
		font-weight: 600;
}

.custom-form-style-1 .form-control::placeholder {
		color: #536f78;
		font-weight: 600;
}

.custom-form-style-1 .form-control:-ms-input-placeholder {
		color: #536f78;
		font-weight: 600;
}

.custom-form-style-1 .form-control::-ms-input-placeholder {
		color: #536f78;
		font-weight: 600;
}

.custom-form-style-1.custom-form-style-1-rounded .form-control {
		border-radius: 35px;
		height: 52px;
		height: 3.25rem;
}

/* Pricing */
.custom-plan-featured-style-1 .plan-header {
		position: relative;
		top: 1px;
}

/* Thumb Info */
.custom-thumb-info-style-1 .thumb-info-wrapper .custom-thumb-info-date {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 27.2px;
		font-size: 1.7rem;
		line-height: 1;
		text-align: center;
		padding: 11.2px 19.2px;
		padding: 0.7rem 1.2rem;
		z-index: 2;
}

.custom-thumb-info-style-1 .thumb-info-wrapper .custom-thumb-info-date > span {
		display: block;
		font-size: 0.4em;
		line-height: 1.5;
}

/* Carousel */
.custom-carousel-nav-style-1 .owl-nav button[class*="owl-"] {
		background: transparent !important;
		border: 1px solid #CCC;
		border-radius: 0;
		color: #CCC;
}

/* Paleta da página (galeria) — trocada da paleta verde inventada
   (#8dbf22 e derivadas) pelas cores reais já usadas no index.html da
   raiz: verde rgba(137,196,0,255) (nav/footer) e marrom
   rgba(122,53,55,255) (texto/links/copyright). */

/* Footer */
#footer {
		background-color: rgba(137, 196, 0, 255);
}

#footer li, #footer a:not(.btn), #footer p {
		color: #96a1b1;
}

#footer .footer-copyright {
		background-color: rgba(161,222,14,255) !important;
}

/* Logos de apoio — portado de css/theme-elements.css (raiz), que a
   galeria não tem: sem isso a imagem ficava sem escala/posição definidas. */
.footer-apoio {
	display: flex;
	gap: 1vw;
	width: 80vw;
}

.scale-apoio {
	scale: 90%;
}

@media (max-width: 768px) {
	.footer-apoio {
		flex-direction: column;
		gap: 10vw;
	}

	.scale-apoio {
		scale: 115%;
	}
}

/* Grid da galeria de fotos — 4 colunas fixas, linhas automáticas.
   Adicionar/remover fotos no HTML nunca exige mexer aqui: o grid
   simplesmente ganha ou perde linhas sozinho. */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
}

.gallery-grid-item {
	display: block;
	box-sizing: border-box;
	/* Mesma proporção do arquivo de origem (1600x1066) — o object-fit
	   abaixo não corta nada, só preenche a célula sem sobrar borda. */
	aspect-ratio: 1600 / 1066;
	overflow: hidden;
	border-radius: 12px;
	/* Borda via CSS, não desenhada na imagem: assim ela acompanha o
	   border-radius certinho nos 4 cantos, sem afinar/cortar torto. */
	border: 4px solid rgba(137, 196, 0, 255);
}

.gallery-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.gallery-grid-item:hover img {
	transform: scale(1.06);
}

@media (max-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

/* Setas do lightbox: css/theme-elements.css (button.mfp-arrow:after)
   espera Font Awesome carregado pra desenhar o ícone via content:"\f053"/
   "\f054" — é por isso que a seta aparecia como uma caixa vazia (nenhuma
   página deste site nunca carregou Font Awesome). Em vez de adicionar
   essa dependência externa (que pode falhar por bloqueador de anúncios,
   CDN fora do ar etc.), sobrescrevemos com um caractere seta comum
   (U+2190/U+2192), que qualquer fonte do sistema já tem — garante que a
   seta sempre apareça, sem depender de nada de fora. !important pra
   vencer o content:"\f0xx" do tema com certeza, sem depender de ordem
   de carregamento dos CSS. */
button.mfp-arrow:before {
	content: none !important;
}

button.mfp-arrow.mfp-arrow-left:after {
	content: "\2190" !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-weight: 700 !important;
	font-size: 28px !important;
	line-height: 1 !important;
}

button.mfp-arrow.mfp-arrow-right:after {
	content: "\2192" !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-weight: 700 !important;
	font-size: 28px !important;
	line-height: 1 !important;
}

/* VLibras: por padrão fica fixo à direita, no meio vertical da tela —
   exatamente onde a seta "próxima" do lightbox (.mfp-arrow-right) também
   fica. Sobe o widget pra logo abaixo do header, fora dessa faixa.
   !important necessário: o CSS do VLibras vem de um serviço externo
   (vlibras.gov.br) que foge do nosso controle — forçamos position+top
   pra garantir o resultado mesmo que a forma deles de posicionar mude. */
div[vw-access-button],
.vw-access-button,
div[vw] div[vw-access-button] {
	position: fixed !important;
	top: 100px !important;
	bottom: auto !important;
	right: 20px !important;
}

.btm-edital-index{
	width: 50%;
}

/* ==========================================================================
   Section inicial (#home) — espaçamento responsivo em relação ao header.
   O #header usa .header-transparent (position: absolute) e fica sobreposto
   ao conteúdo; sem isto a primeira section encosta no header. O col já traz
   mt-5/pt-4 no mobile, por isso o respiro extra cresce com a largura.
   ========================================================================== */
#home {
	padding-top: 2rem !important;
}

@media (min-width: 769px) {
	#home {
		padding-top: 7rem !important;
	}
}

@media (min-width: 992px) {
	#home {
		padding-top: 8rem !important;
	}
}

@media (max-width: 768px){
	.em-breve-mobile{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.btm-list{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logo-header-mobile{
		scale: 100% !important;
	}

	.btm-edital-mobile{
		margin: 0 !important;
		margin-bottom: 1em !important;
		margin-top: 1em !important;
	}

	.btm-mobile{
		width: 80vw;
		z-index: 1;
	}

	.btm-edital-index{
		width: 80vw;
		z-index: 1;
	}

	.span-mobile{
		margin-top: 0.5em;
	}

	.menu-mobile{
		display: none;
	}

	.logo-mobile{
		display: none !important;
	}

	.flex-end-mobile{
		justify-content: center !important;
	}

	.logo-principal-mobile{
		margin-top: 0 !important;
		width: 50%;
	}

	.text-mobile{
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.img-mobile{
		display: none;
	}

	.container-mobile{
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.ul-faq-mobile{
		flex-direction: column !important;
		width: 100% !important;
	}

	.ul-faq li{
		margin: 0.5em;
	}

	.appear-animation{
		animation: none;
	}

	.img-fluid{
		animation: none;
	}

}