/* V3.8 — proteção visual da abertura no celular.
 * A imagem aparece tanto como fundo quanto como imagem prioritária: se um navegador
 * adiar um dos modos de desenho, o outro mantém o painel e a turma visíveis.
 */
@media (max-width: 760px) {
	.hero {
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
		padding: 20px 23px 36px !important;
		overflow: visible !important;
	}

	.hero .hero-art-graduates {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative !important;
		order: -1 !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		height: clamp(330px, 96vw, 410px) !important;
		min-height: clamp(330px, 96vw, 410px) !important;
		margin: 0 0 28px !important;
		overflow: hidden !important;
		background-color: #061018 !important;
		background-image: url('../images/turma-certificados-painel-institucional-v3-5.png') !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
		background-size: contain !important;
		border: 1px solid rgba(59, 215, 238, .28) !important;
		border-radius: 2px !important;
	}

	.hero .hero-art-graduates .hero-photo-graduates {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		background: transparent !important;
	}

	.hero .hero-art-graduates .hero-photo-graduates img {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
		object-position: center center !important;
		transform: none !important;
	}

	.hero .hero-art-graduates .hero-orbits,
	.hero .hero-art-graduates .skill-card,
	.hero .hero-art-graduates .hero-stamp {
		display: none !important;
	}

	.hero .hero-copy {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative !important;
		order: 0 !important;
		max-width: none !important;
		transform: none !important;
	}
}

@media (max-width: 390px) {
	.hero .hero-art-graduates {
		height: 330px !important;
		min-height: 330px !important;
	}
}