/**
 * Ajustes de layout da home em torno do carrossel.
 * Não altera o visual dos cards (.modelo05) — isso fica no main.css.
 */

/*
 * O tema sobe o bloco com margin-top: -100px
 * (body.institucional.signed-out .portal-unimed-template).
 * Os cards precisam ficar na frente do banner.
 */
.chamadas-tema,
.unimed-slider-wrap,
.unimed-slider {
	z-index: 0;
}

body.institucional .portal-unimed-template .modelo05 {
	position: relative;
	z-index: 5;
}

body.institucional .portal-unimed-template .modelo05 .card {
	position: relative;
	z-index: 5;
}

/* Três banners inferiores: o flex do header-home.php não quebra linha. */
.portlet-layout {
	flex-wrap: wrap;
}

.portlet-layout .portlet-column {
	box-sizing: border-box;
	max-width: 100%;
}

/* Separador do menu no header-home.php usa margin: 0 100px e estoura a tela. */
.menu-principal li:after {
	margin: 0 12px;
}

@media only screen and (max-width: 1024px) {
	.chamadas-tema {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	body.institucional .container-vw,
	.modelo03 .container-vw,
	.guia-medico-portlet.container-vw {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		transform: none !important;
	}

	.portlet-layout {
		display: block;
	}

	.portlet-layout .portlet-column.span4,
	.portlet-layout .portlet-column.span12 {
		float: none;
		display: block;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.menu-principal li:after {
		content: none;
		margin: 0;
	}

	/*
	 * Canais de Atendimento (modelo03): o tema só empilha em 414px.
	 * iPhone 16 / telas 415–800px continuavam com 4 colunas espremidas.
	 */
	.modelo03 .container,
	.modelo03 .scroll-area,
	.modelo03 .text-center {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.modelo03 .itens {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start !important;
		width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.modelo03 .itens .item,
	.modelo03 .itens .item-5,
	.modelo03 .itens .item-4,
	.modelo03 .itens .item-3,
	.modelo03 .itens .item-2,
	.modelo03 .itens .item-1 {
		flex: 0 0 50%;
		max-width: 50%;
		width: 50%;
		box-sizing: border-box;
		min-width: 0;
	}

	.modelo03 .itens .item .icone img {
		max-width: 96px;
		height: auto;
	}

	.modelo03 .navegacao-responsiva {
		display: flex !important;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin: 12px 0;
	}
}

@media only screen and (max-width: 767px) {
	.modelo03 .itens .item,
	.modelo03 .itens .item-5,
	.modelo03 .itens .item-4,
	.modelo03 .itens .item-3,
	.modelo03 .itens .item-2,
	.modelo03 .itens .item-1 {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}

	.modelo03 .titulo-topo {
		padding: 0 16px;
	}

	.chamada-pequena-viverbem section,
	.chamada-pequena-site-padrao section,
	.chamada-materia .lista-chmd-materia {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.chamada-pequena-viverbem article,
	.chamada-pequena-site-padrao article,
	.chamada-materia .chmd-materia {
		width: 100%;
		max-width: 100%;
		display: block;
		box-sizing: border-box;
	}
}