/* =========================================================
   HOME SLIDER - CSS separado do centro.asp
========================================================= */

/* Slider */

.slider{
	position:relative;
	width:100%;
	max-width:980px;
	aspect-ratio:2.55 / 1;
	min-height:300px;
	margin:0 auto 38px;
	overflow:hidden;
	border:1px solid #d8e1ec;
	border-radius:14px;
	background:#fff;
	box-shadow:0 14px 34px rgba(23,59,103,.16);
}

.slide{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	transition:opacity .35s ease;
}

.slide.ativo{
	opacity:1;
	z-index:2;
}

.slide img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.banner_texto{
	position:absolute;
	inset:0;
	z-index:3;
	display:block;
	padding:0;
	pointer-events:none;
}

.titulo_banner{
	position:absolute;
	top:14px;
	left:50%;
	right:auto;
	transform:translateX(-50%);
	width:calc(100% - 90px);
	max-width:760px;
	padding:0;
	background:transparent;
	color:#fff;
	font-family:Georgia, "Times New Roman", serif;
	font-size:36px;
	font-weight:900;
	line-height:1.08;
	text-align:center;
	text-transform:uppercase;
	text-shadow:
		0 2px 0 rgba(40,30,18,.88),
		0 5px 14px rgba(0,0,0,.62),
		0 0 3px rgba(0,0,0,.85);
}

.frase_banner{
	position:absolute;
	left:30px;
	bottom:72px;
	transform:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	max-width:520px;
	padding:8px 14px;
	border:1px solid rgba(255,255,255,.72);
	border-radius:10px;
	background:rgba(255,255,255,.92);
	color:#173b67;
	font-size:13.5px;
	font-weight:700;
	line-height:1.2;
	text-align:center;
	text-shadow:none;
	box-shadow:0 8px 18px rgba(23,59,103,.14);
}

.botao_banner{
	position:absolute;
	left:auto;
	right:30px;
	bottom:26px;
	transform:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:34px;
	padding:0 15px;
	border-radius:999px;
	background:#173b67;
	color:var(--azul);
	font-size:12px;
	font-weight:800;
	text-decoration:none;
	box-shadow:0 8px 18px rgba(0,0,0,.24);
	pointer-events:auto;
	transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
	z-index:4;
}

.botao_banner:hover{
	transform:translateY(-1px);
	box-shadow:0 10px 22px rgba(0,0,0,.24);
	filter:brightness(1.02);
}

.botao_oferecimento{ background:#b82f2f; color:#fff; }
.botao_liturgia{ background:#c98310; color:#fff; }
.botao_caminho{ background:#ca6b12; color:#fff; }
.botao_oracoes{ background:#4d842d; color:#fff; }
.botao_novenas{ background:#81369d; color:#fff; }

.botao_slider{
	position:absolute;
	top:50%;
	z-index:10;
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:46px;
	padding:0;
	border:0;
	border-radius:10px;
	background:rgba(9,23,43,.46);
	color:#fff;
	font-size:26px;
	cursor:pointer;
	transition:background .18s ease;
}

.botao_slider:hover{
	background:rgba(9,23,43,.72);
}

.botao_esq{ left:16px; transform:translateY(-50%); }
.botao_dir{ right:16px; transform:translateY(-50%); }

.indicadores{
	position:absolute;
	left:50%;
	bottom:16px;
	z-index:10;
	display:flex;
	gap:8px;
	transform:translateX(-50%);
}

.indicador{
	width:9px;
	height:9px;
	padding:0;
	border:0;
	border-radius:999px;
	background:#fff;
	opacity:.48;
	cursor:pointer;
	transition:width .18s ease, opacity .18s ease;
}

.indicador.ativo{
	width:24px;
	opacity:1;
}

/* =========================================================
   AJUSTES v59 - SLIDER RESTAURADO + TÍTULOS PORTAL
========================================================= */

/* Slider: volta para composição mais equilibrada */

.slider{
	width:100% !important;
	max-width:980px !important;
	aspect-ratio:2.55 / 1 !important;
	min-height:300px !important;
	margin:0 auto 38px !important;
}

.titulo_banner{
	top:14px !important;
	left:50% !important;
	right:auto !important;
	transform:translateX(-50%) !important;
	width:calc(100% - 90px) !important;
	max-width:760px !important;
	padding:0 !important;
	background:transparent !important;
	color:#ffffff !important;
	font-family:Georgia, "Times New Roman", serif !important;
	font-size:36px !important;
	font-weight:900 !important;
	line-height:1.08 !important;
	text-align:center !important;
	text-transform:uppercase !important;
	text-shadow:
		0 2px 0 rgba(40,30,18,.88),
		0 5px 14px rgba(0,0,0,.62),
		0 0 3px rgba(0,0,0,.85) !important;
}

.frase_banner{
	position:absolute !important;
	left:30px !important;
	bottom:72px !important;
	transform:none !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	max-width:520px !important;
	padding:8px 14px !important;
	border:1px solid rgba(255,255,255,.72) !important;
	border-radius:10px !important;
	background:rgba(255,255,255,.92) !important;
	color:#173b67 !important;
	font-size:13.5px !important;
	font-weight:700 !important;
	line-height:1.2 !important;
	text-align:center !important;
	text-shadow:none !important;
	box-shadow:0 8px 18px rgba(23,59,103,.14) !important;
}

.botao_banner{
	position:absolute !important;
	left:auto !important;
	right:30px !important;
	bottom:26px !important;
	transform:none !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	min-height:34px !important;
	padding:0 15px !important;
	border-radius:999px !important;
	color:#ffffff !important;
	font-size:12px !important;
	font-weight:800 !important;
	text-decoration:none !important;
	box-shadow:0 8px 18px rgba(0,0,0,.24) !important;
	pointer-events:auto !important;
	z-index:4 !important;
}

.botao_oferecimento{ background:#b82f2f !important; color:#fff !important; }
.botao_liturgia{ background:#c98310 !important; color:#fff !important; }
.botao_caminho{ background:#ca6b12 !important; color:#fff !important; }
.botao_oracoes{ background:#4d842d !important; color:#fff !important; }
.botao_novenas{ background:#81369d !important; color:#fff !important; }

/* Conteúdos do Portal: títulos menos exagerados e mais equilibrados */

.conteudo_portal h2,
.conteudo_portal h3{
	font-size:19px !important;
	font-weight:800 !important;
	line-height:1.1 !important;
	letter-spacing:-.15px !important;
	color:#102f5c !important;
}

.card_portal:nth-child(-n+2) h2{
	font-size:21px !important;
	line-height:1.12 !important;
	font-weight:800 !important;
	max-width:260px !important;
}

.card_portal:nth-child(n+3) h2{
	font-size:17px !important;
	line-height:1.1 !important;
	font-weight:800 !important;
}

.categoria_portal{
	font-size:9px !important;
	font-weight:700 !important;
	color:#27364a !important;
}

/* Tablet */

@media(max-width:1000px){

	.titulo_banner{
		top:12px !important;
		max-width:560px !important;
		width:calc(100% - 70px) !important;
		font-size:29px !important;
		line-height:1.08 !important;
	}

	.card_portal:nth-child(-n+2) h2{
		font-size:19px !important;
	}

	.card_portal:nth-child(n+3) h2,
	.conteudo_portal h2,
	.conteudo_portal h3{
		font-size:16px !important;
	}
}

/* Smartphone */

@media(max-width:700px){

	.slider{
		width:100% !important;
		max-width:980px !important;
		aspect-ratio:1.72 / 1 !important;
		min-height:0 !important;
		margin-bottom:28px !important;
		border-radius:12px !important;
	}

	.titulo_banner{
		top:10px !important;
		left:50% !important;
		max-width:78% !important;
		width:calc(100% - 38px) !important;
		font-size:18px !important;
		line-height:1.08 !important;
	}

	.frase_banner{
		left:16px !important;
		bottom:48px !important;
		transform:none !important;
		padding:5px 9px !important;
		font-size:9.5px !important;
		border-radius:10px !important;
		background:rgba(255,255,255,.92) !important;
		color:#173b67 !important;
	}

	.botao_banner{
		left:auto !important;
		right:16px !important;
		bottom:14px !important;
		transform:none !important;
		min-height:30px !important;
		padding:0 11px !important;
		font-size:10px !important;
		border-radius:999px !important;
	}

	.card_portal:nth-child(-n+2) h2{
		font-size:18px !important;
		line-height:1.08 !important;
	}

	.card_portal:nth-child(n+3) h2,
	.conteudo_portal h2,
	.conteudo_portal h3{
		font-size:13px !important;
		line-height:1.08 !important;
	}

	.categoria_portal{
		font-size:7px !important;
		font-weight:700 !important;
	}
}

/* iPhone pequeno */

@media(max-width:430px){

	.slider{
		aspect-ratio:1.55 / 1 !important;
	}

	.titulo_banner{
		top:9px !important;
		left:50% !important;
		max-width:82% !important;
		font-size:16px !important;
		line-height:1.08 !important;
	}

	.frase_banner{
		left:12px !important;
		bottom:44px !important;
		transform:none !important;
		font-size:9px !important;
		padding:5px 8px !important;
	}

	.botao_banner{
		left:auto !important;
		right:12px !important;
		bottom:12px !important;
		transform:none !important;
		min-height:28px !important;
		font-size:9px !important;
		padding:0 10px !important;
	}

	.card_portal:nth-child(-n+2) h2{
		font-size:17px !important;
	}

	.card_portal:nth-child(n+3) h2,
	.conteudo_portal h2,
	.conteudo_portal h3{
		font-size:12px !important;
	}
}

/* =========================================================
   AJUSTES v61 - SLIDER MENOR E MAIS EQUILIBRADO
   Desktop / Tablet / Smartphone / iPhone
========================================================= */

/* Desktop */
.slider{
	width:76% !important;
	max-width:760px !important;
	aspect-ratio:2.65 / 1 !important;
	min-height:0 !important;
	height:auto !important;
	margin:0 auto 30px auto !important;
	border-radius:13px !important;
}

.titulo_banner{
	top:12px !important;
	width:calc(100% - 80px) !important;
	max-width:620px !important;
	font-size:34px !important;
	line-height:1.05 !important;
}

.frase_banner{
	left:24px !important;
	bottom:58px !important;
	padding:7px 12px !important;
	font-size:12.5px !important;
	border-radius:10px !important;
}

.botao_banner{
	right:24px !important;
	bottom:22px !important;
	min-height:32px !important;
	padding:0 14px !important;
	font-size:11.5px !important;
}

.botao_slider{
	width:34px !important;
	height:42px !important;
	font-size:23px !important;
	border-radius:9px !important;
}

.botao_esq{ left:12px !important; }
.botao_dir{ right:12px !important; }

.indicadores{
	bottom:12px !important;
}

/* Tablet */
@media(max-width:1000px){

	.slider{
		width:78% !important;
		max-width:720px !important;
		aspect-ratio:2.45 / 1 !important;
		margin-bottom:28px !important;
	}

	.titulo_banner{
		top:11px !important;
		width:calc(100% - 70px) !important;
		max-width:560px !important;
		font-size:28px !important;
		line-height:1.05 !important;
	}

	.frase_banner{
		left:20px !important;
		bottom:52px !important;
		padding:6px 11px !important;
		font-size:11.5px !important;
	}

	.botao_banner{
		right:20px !important;
		bottom:19px !important;
		min-height:31px !important;
		font-size:11px !important;
		padding:0 13px !important;
	}

	.botao_slider{
		width:32px !important;
		height:40px !important;
		font-size:21px !important;
	}
}

/* Smartphone */
@media(max-width:700px){

	.slider{
		width:92% !important;
		max-width:420px !important;
		aspect-ratio:1.82 / 1 !important;
		min-height:0 !important;
		height:auto !important;
		margin:0 auto 24px auto !important;
		border-radius:12px !important;
	}

	.titulo_banner{
		top:9px !important;
		width:calc(100% - 44px) !important;
		max-width:88% !important;
		font-size:18px !important;
		line-height:1.05 !important;
	}

	.frase_banner{
		left:14px !important;
		bottom:44px !important;
		padding:5px 8px !important;
		font-size:9px !important;
		border-radius:9px !important;
	}

	.botao_banner{
		right:14px !important;
		bottom:12px !important;
		min-height:28px !important;
		padding:0 10px !important;
		font-size:9.5px !important;
		border-radius:999px !important;
	}

	.botao_slider{
		width:28px !important;
		height:36px !important;
		font-size:19px !important;
		border-radius:8px !important;
	}

	.botao_esq{ left:8px !important; }
	.botao_dir{ right:8px !important; }

	.indicadores{
		bottom:9px !important;
		gap:7px !important;
	}

	.indicador{
		width:7px !important;
		height:7px !important;
	}

	.indicador.ativo{
		width:20px !important;
	}
}

/* iPhone pequeno */
@media(max-width:430px){

	.slider{
		width:92% !important;
		max-width:380px !important;
		aspect-ratio:1.72 / 1 !important;
		margin-bottom:22px !important;
	}

	.titulo_banner{
		top:8px !important;
		width:calc(100% - 40px) !important;
		max-width:88% !important;
		font-size:16px !important;
		line-height:1.05 !important;
	}

	.frase_banner{
		left:12px !important;
		bottom:40px !important;
		padding:4px 8px !important;
		font-size:8.5px !important;
	}

	.botao_banner{
		right:12px !important;
		bottom:11px !important;
		min-height:26px !important;
		padding:0 9px !important;
		font-size:8.5px !important;
	}

	.botao_slider{
		width:26px !important;
		height:34px !important;
		font-size:18px !important;
	}

	.indicadores{
		bottom:8px !important;
	}
}

/* Celulares muito estreitos */
@media(max-width:360px){

	.slider{
		width:94% !important;
		max-width:340px !important;
		aspect-ratio:1.65 / 1 !important;
	}

	.titulo_banner{
		font-size:14px !important;
	}

	.frase_banner{
		display:none !important;
	}

	.botao_banner{
		right:10px !important;
		bottom:10px !important;
		font-size:8px !important;
		min-height:25px !important;
		padding:0 8px !important;
	}
}

/* =========================================================
   AJUSTES v62 - SLIDER NA PROPORÇÃO DO MODELO + TEXTOS
========================================================= */

/* Desktop: proporção semelhante ao modelo enviado */
.slider{
	width:74% !important;
	max-width:860px !important;
	aspect-ratio:2.28 / 1 !important;
	min-height:0 !important;
	height:auto !important;
	margin:20px auto 30px auto !important;
	border-radius:13px !important;
	box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

.titulo_banner{
	top:18px !important;
	left:50% !important;
	right:auto !important;
	transform:translateX(-50%) !important;
	width:calc(100% - 100px) !important;
	max-width:760px !important;
	color:#ffffff !important;
	font-size:34px !important;
	font-weight:900 !important;
	line-height:1.06 !important;
	text-align:center !important;
	text-transform:uppercase !important;
	text-shadow:
		0 2px 0 rgba(40,30,18,.88),
		0 5px 14px rgba(0,0,0,.62),
		0 0 3px rgba(0,0,0,.85) !important;
}

.frase_banner{
	left:18px !important;
	bottom:16px !important;
	max-width:430px !important;
	padding:6px 11px !important;
	border:1px solid rgba(255,255,255,.45) !important;
	border-radius:999px !important;
	background:rgba(8,22,40,.84) !important;
	color:#ffffff !important;
	font-size:11px !important;
	font-weight:700 !important;
	line-height:1.18 !important;
	text-align:left !important;
	box-shadow:0 5px 14px rgba(0,0,0,.24) !important;
}

.botao_banner{
	right:34px !important;
	bottom:22px !important;
	min-height:34px !important;
	padding:0 17px !important;
	border-radius:999px !important;
	color:#ffffff !important;
	font-size:12px !important;
	font-weight:800 !important;
	box-shadow:0 8px 18px rgba(0,0,0,.25) !important;
}

.botao_slider{
	width:42px !important;
	height:58px !important;
	font-size:32px !important;
	border-radius:10px !important;
	background:rgba(9,23,43,.46) !important;
}

.botao_esq{ left:16px !important; }
.botao_dir{ right:16px !important; }

.indicadores{
	bottom:14px !important;
}

/* Tablet */
@media(max-width:1000px){

	.slider{
		width:82% !important;
		max-width:780px !important;
		aspect-ratio:2.22 / 1 !important;
		margin:18px auto 28px auto !important;
	}

	.titulo_banner{
		top:15px !important;
		width:calc(100% - 80px) !important;
		font-size:29px !important;
	}

	.frase_banner{
		left:16px !important;
		bottom:15px !important;
		max-width:360px !important;
		font-size:10px !important;
		padding:5px 10px !important;
	}

	.botao_banner{
		right:26px !important;
		bottom:20px !important;
		min-height:31px !important;
		font-size:11px !important;
		padding:0 14px !important;
	}

	.botao_slider{
		width:36px !important;
		height:50px !important;
		font-size:27px !important;
	}
}

/* Smartphone */
@media(max-width:700px){

	.slider{
		width:96% !important;
		max-width:520px !important;
		aspect-ratio:1.72 / 1 !important;
		margin:14px auto 24px auto !important;
		border-radius:12px !important;
	}

	.titulo_banner{
		top:10px !important;
		width:calc(100% - 52px) !important;
		max-width:88% !important;
		font-size:21px !important;
		line-height:1.06 !important;
	}

	.frase_banner{
		left:14px !important;
		bottom:42px !important;
		max-width:calc(100% - 125px) !important;
		padding:5px 8px !important;
		font-size:8.8px !important;
		line-height:1.15 !important;
		border-radius:8px !important;
		background:rgba(8,22,40,.82) !important;
		color:#ffffff !important;
	}

	.botao_banner{
		right:14px !important;
		bottom:13px !important;
		min-height:28px !important;
		padding:0 10px !important;
		font-size:9.2px !important;
		border-radius:999px !important;
	}

	.botao_slider{
		width:30px !important;
		height:40px !important;
		font-size:23px !important;
		border-radius:8px !important;
	}

	.botao_esq{ left:9px !important; }
	.botao_dir{ right:9px !important; }

	.indicadores{
		bottom:9px !important;
		gap:7px !important;
	}

	.indicador{
		width:7px !important;
		height:7px !important;
	}

	.indicador.ativo{
		width:20px !important;
	}
}

/* iPhone pequeno */
@media(max-width:430px){

	.slider{
		width:96% !important;
		max-width:430px !important;
		aspect-ratio:1.62 / 1 !important;
		margin:12px auto 22px auto !important;
	}

	.titulo_banner{
		top:9px !important;
		font-size:18px !important;
		line-height:1.05 !important;
		width:calc(100% - 48px) !important;
	}

	.frase_banner{
		left:12px !important;
		bottom:38px !important;
		max-width:calc(100% - 112px) !important;
		font-size:8px !important;
		padding:4px 7px !important;
	}

	.botao_banner{
		right:12px !important;
		bottom:11px !important;
		min-height:26px !important;
		font-size:8.4px !important;
		padding:0 9px !important;
	}

	.botao_slider{
		width:28px !important;
		height:38px !important;
		font-size:21px !important;
	}
}

/* Celulares muito estreitos */
@media(max-width:360px){

	.slider{
		width:97% !important;
		aspect-ratio:1.55 / 1 !important;
	}

	.titulo_banner{
		font-size:16px !important;
	}

	.frase_banner{
		display:none !important;
	}

	.botao_banner{
		right:10px !important;
		bottom:10px !important;
		font-size:8px !important;
		min-height:25px !important;
		padding:0 8px !important;
	}
}

/* =========================================================
   REFINAMENTO FINAL - SLIDER PREMIUM
========================================================= */

.slider{
	position:relative;
	overflow:hidden;
	background:#0b1728 !important;
	border:1px solid rgba(255,255,255,.22) !important;
	box-shadow:
		0 16px 34px rgba(23,59,103,.18),
		0 4px 10px rgba(0,0,0,.10) !important;
}

.slide::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:2;
	background:
		linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.05) 42%, rgba(0,0,0,.34) 100%),
		linear-gradient(90deg, rgba(0,0,0,.30) 0%, transparent 36%, rgba(0,0,0,.18) 100%);
	pointer-events:none;
}

.banner_texto{
	z-index:4 !important;
}

.titulo_banner{
	text-shadow:
		0 2px 0 rgba(45,28,12,.92),
		0 6px 14px rgba(0,0,0,.70),
		0 0 4px rgba(0,0,0,.90) !important;
	letter-spacing:.35px !important;
}

.frase_banner{
	background:rgba(9,23,43,.76) !important;
	color:#fff !important;
	border:1px solid rgba(255,255,255,.22) !important;
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
}

.botao_banner{
	box-shadow:
		0 8px 18px rgba(0,0,0,.28),
		inset 0 1px 0 rgba(255,255,255,.18) !important;
}

@media(max-width:700px){
	.slider{
		width:90% !important;
		max-width:430px !important;
		aspect-ratio:2.02 / 1 !important;
		margin:14px auto 24px auto !important;
		border-radius:14px !important;
	}

	.titulo_banner{
		top:8px !important;
		font-size:17px !important;
		line-height:1.04 !important;
		width:calc(100% - 42px) !important;
		max-width:88% !important;
	}

	.frase_banner{
		left:13px !important;
		bottom:38px !important;
		max-width:calc(100% - 112px) !important;
		padding:5px 8px !important;
		font-size:8.8px !important;
		line-height:1.15 !important;
		border-radius:9px !important;
	}

	.botao_banner{
		right:13px !important;
		bottom:11px !important;
		min-height:27px !important;
		padding:0 10px !important;
		font-size:8.8px !important;
	}

	.botao_slider{
		width:28px !important;
		height:38px !important;
		font-size:20px !important;
		border-radius:8px !important;
	}

	.indicadores{
		bottom:8px !important;
	}
}

@media(max-width:430px){
	.slider{
		width:92% !important;
		max-width:390px !important;
		aspect-ratio:1.96 / 1 !important;
		margin:12px auto 22px auto !important;
	}

	.titulo_banner{
		top:7px !important;
		font-size:15.5px !important;
	}

	.frase_banner{
		bottom:35px !important;
		font-size:8px !important;
		padding:4px 7px !important;
		max-width:calc(100% - 104px) !important;
	}

	.botao_banner{
		bottom:10px !important;
		font-size:8px !important;
		min-height:25px !important;
		padding:0 8px !important;
	}
}
