*{
	box-sizing:border-box;
}

.container_terco_mariano{
	width:100%;
	max-width:1040px;
	margin:0 auto;
	padding:22px 14px 30px 14px;
	font-family:Arial, Helvetica, sans-serif;
	color:#1e2b3a;
}

.hero_mariano{
	display:grid;
	grid-template-columns:240px 1fr;
	gap:22px;
	align-items:center;
	background:linear-gradient(135deg,#fffdf5 0%,#f7faff 100%);
	border:1px solid #dfe8f5;
	border-radius:22px;
	padding:22px;
	box-shadow:0 10px 24px rgba(26,62,110,.10);
	position:relative;
	overflow:hidden;
}

.hero_mariano:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:5px;
	background:linear-gradient(90deg,#1a3e6e 0%,#d9a62a 50%,#b30000 100%);
}

.hero_mariano_imagem{
	text-align:center;
}

.hero_mariano_imagem img{
	width:100%;
	max-width:230px;
	border-radius:18px;
	box-shadow:0 10px 22px rgba(0,0,0,.18);
	display:block;
	margin:auto;
}

.etiqueta_mariano{
	display:inline-block;
	background:#1a3e6e;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
	padding:6px 12px;
	border-radius:999px;
	margin-bottom:10px;
}

.hero_mariano_texto h1{
	margin:0 0 10px 0;
	font-family:Georgia, serif;
	font-size:38px;
	line-height:1.05;
	color:#123d70;
}

.hero_mariano_texto p{
	margin:0;
	font-size:16px;
	line-height:1.5;
	color:#36516f;
}

.card_mariano{
	background:#fff;
	border:1px solid #dbe6f4;
	border-top:5px solid #d8a327;
	border-radius:18px;
	padding:16px;
	margin-top:18px;
	box-shadow:0 8px 20px rgba(26,62,110,.08);
}

.card_mariano h2{
	margin:0 0 14px 0;
	text-align:center;
	font-family:Georgia, serif;
	font-size:25px;
	color:#123d70;
}

.roteiro_topo{
	display:grid;
	grid-template-columns:320px 1fr;
	gap:18px;
	align-items:start;
}

.roteiro_imagem{
	text-align:center;
}

.roteiro_imagem img{
	width:100%;
	max-width:310px;
	border-radius:10px;
	border:1px solid #cfd9ea;
	box-shadow:0 6px 16px rgba(26,62,110,.12);
}

.barra_titulo{
	background:linear-gradient(180deg,#2c3d54 0%,#182a40 100%);
	color:#fff;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	letter-spacing:.5px;
	padding:8px;
	border-radius:8px;
	margin-bottom:12px;
}

.passo_texto{
	margin-bottom:16px;
	font-size:14px;
	line-height:1.7;
	color:#0051b9;
}

.passo_texto h3{
	margin:0 0 6px 0;
	font-size:15px;
	line-height:1.35;
	color:#b30000;
	font-weight:bold;
	display:flex;
	align-items:center;
	gap:8px;
}

.num_passo{
	width:28px;
	height:28px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:15px;
	font-weight:800;
	box-shadow:0 4px 10px rgba(0,0,0,.16);
	flex:0 0 auto;
}

.n1{background:#b30000;}
.n2{background:#d8a327;}
.n3{background:#1a3e6e;}
.n4{background:#2a74b5;}
.n5{background:#c47024;}
.n6{background:#b30000;}
.n7{background:#d8a327;}
.n8{background:#1a3e6e;}

.passo_texto p{
	margin:0 0 6px 0;
}

.passo_texto strong{
	color:#b30000;
}

.destaque_dezena{
	background:#fff8e6;
	border:1px solid #f0dfad;
	border-radius:12px;
	padding:10px 12px;
	color:#1a3e6e;
}

.grid_misterios_resumo{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:12px;
}

.card_misterio_resumo{
	background:#f8fbff;
	border:1px solid #dbe6f4;
	border-radius:15px;
	padding:13px;
	box-shadow:0 5px 14px rgba(26,62,110,.07);
}

.card_misterio_resumo h3{
	margin:0 0 6px 0;
	text-align:center;
	font-family:Georgia,serif;
	color:#123d70;
	font-size:19px;
}

.dias_misterio{
	background:#fff8e6;
	color:#7a560b;
	border:1px solid #f0dfad;
	border-radius:999px;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	padding:6px 8px;
	margin-bottom:10px;
}

.card_misterio_resumo ol{
	margin:0;
	padding-left:18px;
	font-size:13.5px;
	line-height:1.35;
	color:#26384d;
}

.grupo_misterios{
	margin-top:18px;
}

.grupo_misterios:first-of-type{
	margin-top:0;
}

.grupo_misterios h3{
	margin:0 0 10px 0;
	text-align:center;
	font-family:Georgia,serif;
	color:#123d70;
	font-size:34px;
	line-height:1.1;
}

.grid_quadros{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:10px;
}

.quadro_misterio{
	background:#fff;
	border:1px solid #e5edf7;
	border-radius:15px;
	padding:9px;
	text-align:center;
	box-shadow:0 5px 13px rgba(26,62,110,.08);
	overflow:hidden;
}

.quadro_misterio img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	border-radius:12px;
	display:block;
	margin-bottom:8px;
	background:#eef4fb;
}

.quadro_misterio strong{
	display:block;
	color:#9b0000;
	font-size:13px;
	margin-bottom:4px;
}

.quadro_misterio p{
	margin:0;
	color:#26384d;
	font-size:12.5px;
	line-height:1.25;
}

.texto_ladainha{
	background:#f8fbff;
	border-radius:14px;
	padding:14px 16px;
	border-left:5px solid #1a3e6e;
}

.texto_ladainha p{
	margin:0 0 10px 0;
	font-size:15px;
	line-height:1.42;
	color:#222;
}

.texto_ladainha strong{
	color:#9b0000;
}

.acoes_mariano{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:12px;
	margin-top:22px;
	flex-wrap:wrap;
}

.botao_mariano{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:138px;
	padding:12px 20px;
	border-radius:10px;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	transition:all .2s ease;
}

.botao_mariano_principal{
	background:#1a3e6e;
	color:#ffffff;
	box-shadow:0 6px 14px rgba(26,62,110,.18);
}

.botao_mariano_principal:hover{
	background:#143153;
	transform:translateY(-1px);
}

.botao_mariano_secundario{
	background:#eef5ff;
	color:#123d70;
	border:1px solid #c8dbf4;
}

.botao_mariano_secundario:hover{
	background:#dfeeff;
	transform:translateY(-1px);
}

@media(max-width:980px){
	.grid_misterios_resumo{
		grid-template-columns:repeat(2,1fr);
	}

	.grid_quadros{
		grid-template-columns:repeat(3,1fr);
	}
}

@media(max-width:900px){
	.roteiro_topo{
		grid-template-columns:1fr;
	}

	.roteiro_imagem img{
		max-width:290px;
	}
}

@media(max-width:700px){

	.container_terco_mariano{
		padding:12px 8px 22px 8px;
	}

	.hero_mariano{
		grid-template-columns:1fr;
		text-align:center;
		padding:16px 12px;
		gap:12px;
	}

	.hero_mariano_imagem img{
		max-width:180px;
	}

	.hero_mariano_texto h1{
		font-size:28px;
	}

	.hero_mariano_texto p{
		font-size:14px;
		line-height:1.35;
	}

	.card_mariano{
		padding:12px 10px;
	}

	.card_mariano h2{
		font-size:21px;
	}

	.passo_texto{
		font-size:13px;
		line-height:1.55;
	}

	.passo_texto h3{
		font-size:14px;
		align-items:flex-start;
	}

	.num_passo{
		width:27px;
		height:27px;
		font-size:14px;
		margin-top:-3px;
	}

	.grid_misterios_resumo{
		grid-template-columns:1fr;
	}

	.grid_quadros{
		display:block;
	}

	.quadro_misterio{
		display:grid;
		grid-template-columns:112px 1fr;
		grid-template-rows:auto auto;
		gap:3px 10px;
		align-items:center;
		text-align:left;
		padding:9px;
		margin-bottom:10px;
		border-radius:14px;
		background:#ffffff;
		box-shadow:0 5px 13px rgba(26,62,110,.08);
	}

	.quadro_misterio img{
		grid-column:1;
		grid-row:1 / 3;
		width:112px;
		height:72px;
		aspect-ratio:auto;
		object-fit:cover;
		border-radius:10px;
		margin:0;
	}

	.quadro_misterio strong{
		grid-column:2;
		grid-row:1;
		margin:0;
		font-size:13px;
		line-height:1.15;
		color:#9b0000;
	}

	.quadro_misterio p{
		grid-column:2;
		grid-row:2;
		font-size:12.6px;
		line-height:1.22;
		color:#102d4e;
		margin:0;
	}

	.grupo_misterios{
		margin-top:22px;
	}

	.grupo_misterios h3{
		font-size:22px;
		margin-bottom:12px;
	}

	.texto_ladainha p{
		font-size:12.8px;
		line-height:1.3;
	}

	.acoes_mariano{
		gap:10px;
	}

	.botao_mariano{
		width:100%;
		min-width:0;
	}
}

@media(max-width:380px){

	.roteiro_imagem img{
		max-width:260px;
	}

	.quadro_misterio{
		grid-template-columns:100px 1fr;
	}

	.quadro_misterio img{
		width:100px;
		height:66px;
	}

	.grupo_misterios h3{
		font-size:20px;
	}
}