/* Adaptação responsiva da estrutura existente.
   Todas as regras ficam restritas a telas estreitas para preservar o desktop. */
@media screen and (max-width: 767px) {
	html, body {
		max-width: 100%;
		overflow-x: hidden;
	}

	body {
		font-size: 12px;
		-webkit-text-size-adjust: 100%;
	}

	*, *:before, *:after {
		box-sizing: border-box;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	#conteudo {
		width: calc(100% - 16px);
		max-width: 760px;
		margin: 8px auto;
	}

	/* Cabeçalhos e logomarca */
	#topo_index,
	#topo_artistas,
	#topo_eventos,
	#topo_feiras,
	#topo_espacos {
		width: 100%;
	}

	#topo_index,
	#topo_index h1 {
		height: auto;
		min-height: 48px;
		aspect-ratio: 760 / 107;
	}

	#topo_index h1 {
		width: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	#topo_artistas #artistas_titulo h2 {
		width: 100%;
		height: auto;
		min-height: 42px;
		aspect-ratio: 760 / 75;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	#topo_eventos,
	#topo_feiras,
	#topo_espacos {
		height: auto;
		min-height: 60px;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 7px 12px;
	}

	#topo_eventos > img,
	#topo_feiras > img,
	#topo_espacos > img {
		max-width: min(58%, 270px);
	}

	#topo_eventos h2,
	#topo_feiras h2,
	#topo_espacos h2 {
		position: static;
		font-size: 16px;
		line-height: 1.25;
		margin-left: auto;
		text-align: right;
	}

	/* O mesmo menu passa a quebrar em linhas no celular. */
	#conteudo #menu {
		width: 100%;
		height: auto;
		min-height: 0;
		background-repeat: repeat;
	}

	#conteudo #menu ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		height: auto;
		list-style: none;
	}

	#conteudo #menu ul li {
		display: block;
		float: none;
		height: auto;
	}

	#conteudo #menu ul li a {
		display: block;
		float: none;
		height: auto;
		min-height: 38px;
		padding: 11px 8px 8px;
		white-space: nowrap;
	}

	/* Página Início */
	#meio {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		height: auto;
		margin: 12px auto;
	}

	#meio .thumbs_meio,
	#meio .thumbs_ponta {
		flex: 0 1 auto;
		max-width: calc(25% - 8px);
		margin: 0;
		object-fit: contain;
	}

	#texto h2,
	#texto p {
		padding-left: 12px;
		padding-right: 12px;
	}

	#texto p[style*="float"] {
		float: none !important;
		text-align: right;
	}

	/* Listagem de artistas */
	#meio_artistas {
		width: 100%;
		display: flow-root;
	}

	#esq_artistas {
		display: none;
	}

	#listagem_artistas,
	#listagem_artistas #titulo,
	#listagem_artistas #categorias,
	#categorias,
	#categorias_menu,
	#espacos_menu {
		width: 100%;
		height: auto;
		margin-left: 0;
	}

	#listagem_artistas {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 8px 4px;
	}

	#listagem_artistas #thumbs_artistas {
		float: none;
		width: 50%;
		height: auto;
		min-height: 145px;
		margin: 8px 0;
		padding: 0 6px;
	}

	#thumbs_artistas a {
		width: 100%;
	}

	#listagem_artistas #thumbs_artistas img {
		max-height: 105px;
		object-fit: contain;
	}

	/* Currículos e obras dos artistas */
	#curri_dentro,
	#curri_dentro table,
	#curri_dentro tbody,
	#curri_dentro tr,
	#curri_dentro td {
		display: block;
		width: 100%;
		height: auto;
	}

	#curri_dentro {
		border-width: 2px;
	}

	#curri_dentro table {
		margin-top: 0;
		border-width: 3px;
	}

	#curri_dentro .info_artista,
	#curri_dentro .fotos_artista {
		width: 100%;
		padding: 12px;
		border-right: 0;
	}

	#curri_dentro h3 {
		font-size: 20px;
	}

	#curri_dentro p {
		font-size: 12px;
		line-height: 1.5;
	}

	#curri_dentro .fotos_artista {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}

	#curri_dentro .fotos_artista > p,
	#curri_dentro .fotos_artista > #fase {
		flex-basis: 100%;
	}

	.fotos_artista a,
	.thumb_quadro,
	#galeria_euclides .thumb_quadro {
		float: none;
		width: min(132px, calc(50% - 8px));
		height: 130px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fotos_artista a {
		width: auto;
		max-width: 100%;
		height: auto;
	}

	.thumb_quadro img,
	.fotos_artista img {
		max-width: 100%;
		max-height: 120px;
		object-fit: contain;
	}

	#fase span {
		width: 100%;
		height: auto;
		min-height: 24px;
	}

	/* Lightbox antigo: limita somente o tamanho exibido, sem filtros ou cortes. */
	#lightbox {
		position: fixed;
		top: 0 !important;
		max-width: 100vw;
		overflow: auto;
	}

	#outerImageContainer,
	#imageDataContainer {
		max-width: calc(100vw - 16px) !important;
	}

	#imageContainer {
		padding: 8px;
	}

	#lightboxImage {
		max-width: calc(100vw - 32px) !important;
		max-height: calc(100vh - 110px) !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain;
	}

	#overlay {
		position: fixed;
		height: 100vh !important;
	}

	/* Museus, espaços, eventos e feiras */
	#meio_eventos,
	#meio_espacos,
	#conteudo_eventos,
	#conteudo_espacos {
		width: 100%;
		height: auto;
		margin-left: 0;
		background-image: none;
	}

	#esq_eventos,
	#esq_espacos {
		float: none;
		width: 100%;
		height: auto;
		padding: 10px;
	}

	#esq_espacos ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 12px;
	}

	#esq_espacos li {
		margin: 4px 0;
	}

	#conteudo_eventos .ano,
	#conteudo_eventos .meses,
	#conteudo_eventos .descricao,
	#conteudo_eventos .nome_evento,
	#conteudo_espacos .continentes,
	#conteudo_espacos .pais {
		width: 100%;
		height: auto;
		min-height: 24px;
		padding: 5px;
	}

	.bloco_museu {
		width: 50%;
		height: auto;
		min-height: 175px;
		padding: 14px 8px;
	}

	.bloco_museu img {
		max-height: 95px;
		object-fit: contain;
	}

	#pag_bienais {
		width: 100%;
	}

	/* Formulários */
	#cadastro {
		width: 100%;
		height: auto;
		min-height: 375px;
		padding: 24px 14px;
	}

	#cadastro fieldset,
	#cadastro label,
	#cadastro input,
	#cadastro textarea {
		float: none;
		width: 100%;
	}

	#cadastro label {
		display: block;
		margin-top: 8px;
	}

	#cadastro input {
		min-height: 36px;
	}

	#cadastro #saveForm {
		width: 110px;
		margin: 12px 0 0;
	}

	/* Nova Galeria de Arte */
	#galeria_venda {
		width: 100%;
		padding: 22px 12px 28px;
	}

	.grade_obras {
		justify-content: center;
	}

	.cartao_obra {
		width: min(100%, 300px) !important;
	}

	.ampliacao_obra {
		width: 100vw;
		height: 100vh;
		padding: 48px 12px 16px !important;
		overflow: auto;
	}

	.ampliacao_obra img {
		max-width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 105px) !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain;
	}

	.fechar_obra {
		right: 10px !important;
		top: 5px !important;
	}

	/* Segurança para conteúdo legado com larguras inline. */
	table, iframe, object, embed, pre {
		max-width: 100%;
	}

	pre {
		overflow-x: auto;
	}

	#rodape,
	#rodape p {
		float: none;
		width: 100%;
	}
}

@media screen and (max-width: 380px) {
	#conteudo #menu ul li a {
		padding-left: 6px;
		padding-right: 6px;
		font-size: 10px;
	}

	.bloco_museu {
		width: 100%;
	}
}