/* ==========================================================
   MELHORIAS: Seção "Sobre" e "Nossos Trabalhos Espirituais"
   Carregar DEPOIS de assets/css/style.css
   ========================================================== */

:root {
	--lc-navy: #000080;
	--lc-navy-soft: rgba(0, 0, 128, 0.08);
	--lc-text: #4a4f5c;
	--lc-heart: #e11d48;
	--lc-wpp-1: #25d366;
	--lc-wpp-2: #128c7e;
	--lc-radius: 18px;
	--lc-shadow: 0 10px 30px rgba(10, 37, 64, 0.07);
	--lc-shadow-hover: 0 18px 40px rgba(10, 37, 64, 0.14);
}

/* ==========================================================
   1) SEÇÃO "NOSSOS TRABALHOS ESPIRITUAIS" (cards em grade)
   ========================================================== */

#features .row {
	counter-reset: servico;
	align-items: stretch;
}

/* Colunas com mesma altura */
#features .row > [class*="col-"] {
	display: flex;
	margin-bottom: 24px;
	margin-top: 0 !important;
}

#features .icon-box {
	counter-increment: servico;
	position: relative;
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	padding: 28px 24px 26px !important;
	background: #fff !important;
	border: 1px solid var(--lc-navy-soft);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow);
	overflow: hidden;
	text-align: left;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Faixa de destaque no topo */
#features .icon-box::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--lc-navy), var(--lc-heart));
	transform: scaleX(0.25);
	transform-origin: left;
	transition: transform 0.35s ease;
}

/* Número do serviço */
#features .icon-box::before {
	content: counter(servico, decimal-leading-zero);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--lc-navy-soft);
	color: var(--lc-navy);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	transition: background 0.3s ease, color 0.3s ease;
}

#features .icon-box:hover {
	transform: translateY(-6px);
	border-color: rgba(0, 0, 128, 0.18);
	box-shadow: var(--lc-shadow-hover);
}

#features .icon-box:hover::after {
	transform: scaleX(1);
}

#features .icon-box:hover::before {
	background: var(--lc-navy);
	color: #fff;
}

#features .icon-box h3 {
	margin: 0 0 12px;
	padding: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}

#features .icon-box h3 a {
	display: block;
	color: var(--lc-navy);
	text-decoration: none;
}

#features .icon-box p.description {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--lc-text);
	text-align: left;
}

/* ==========================================================
   2) SEÇÃO "SOBRE A LAURA SENSITIVA"
   ========================================================== */

#about .row {
	align-items: flex-start !important;
}

/* Foto acompanha a leitura em vez de ficar perdida lá embaixo */
#about .about-media {
	position: sticky;
	top: 110px;
	max-width: 420px;
	margin: 0 auto;
}

#about .about-photo {
	width: 100%;
	height: auto;
	border-radius: 22px;
	box-shadow: 0 25px 55px rgba(10, 37, 64, 0.22);
}

#about .about-badge {
	position: absolute;
	left: 50%;
	bottom: -16px;
	transform: translateX(-50%);
	padding: 10px 22px;
	border-radius: 50px;
	background: linear-gradient(135deg, var(--lc-navy), #1a1ab3);
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(0, 0, 128, 0.35);
}

#about .about-kicker {
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #8a8f9c;
}

#about .about-lead {
	margin-bottom: 28px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--lc-text);
}

/* Cartão de serviço: ícone à esquerda, conteúdo à direita */
#about .icon-box {
	display: grid !important;
	grid-template-columns: 64px 1fr;
	column-gap: 20px;
	align-items: start;
	margin: 0 0 22px !important;
	padding: 26px 26px 24px !important;
	background: #fff;
	border: 1px solid var(--lc-navy-soft);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#about .icon-box:hover {
	transform: translateY(-4px);
	box-shadow: var(--lc-shadow-hover);
}

#about .icon-box .icon {
	position: static !important;
	grid-column: 1;
	grid-row: 1 / span 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0;
	border-radius: 50%;
	background: rgba(225, 29, 72, 0.08);
	border: 2px solid rgba(225, 29, 72, 0.25);
}

#about .icon-box .icon i {
	font-size: 26px;
	color: var(--lc-heart);
	line-height: 1;
}

#about .icon-box h4.title {
	grid-column: 2;
	margin: 2px 0 8px;
	padding: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

#about .icon-box h4.title a {
	color: #1f2430;
	text-decoration: none;
}

#about .icon-box p.description {
	grid-column: 2;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--lc-text);
}

/* Botão de chatline dentro do cartão */
#about .icon-box > div.text-center {
	grid-column: 2;
	margin-top: 18px;
	text-align: left !important;
}

#about .icon-box .btn-get-started {
	display: inline-block;
	padding: 12px 28px;
	border: 0;
	border-radius: 50px;
	background: linear-gradient(135deg, var(--lc-wpp-1), var(--lc-wpp-2));
	color: #fff !important;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(18, 140, 126, 0.3);
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

#about .icon-box .btn-get-started:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 12px 26px rgba(18, 140, 126, 0.4);
}

/* ==========================================================
   SOBRE: cartões lado a lado (2 colunas) para a seção ficar compacta
   ========================================================== */

@media (min-width: 992px) {
	/* Foto um pouco mais estreita, dando mais espaço para os cartões */
	#about .row > .col-lg-5 {
		flex: 0 0 34%;
		max-width: 34%;
	}

	#about .row > .col-lg-7 {
		flex: 0 0 66%;
		max-width: 66%;
	}
}

#about .col-lg-7.icon-boxes {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

/* Textos de apresentação ocupam a linha toda */
#about .col-lg-7.icon-boxes > .about-kicker,
#about .col-lg-7.icon-boxes > h3,
#about .col-lg-7.icon-boxes > .about-lead {
	grid-column: 1 / -1;
}

#about .col-lg-7.icon-boxes > .about-lead {
	margin-bottom: 8px;
}

/* Cartões mais compactos */
#about .col-lg-7.icon-boxes > .icon-box {
	grid-template-columns: 52px 1fr;
	grid-template-rows: auto 1fr auto;
	column-gap: 16px;
	margin: 0 !important;
	padding: 20px 20px 18px !important;
	height: 100%;
}

#about .col-lg-7.icon-boxes > .icon-box .icon {
	width: 52px;
	height: 52px;
}

#about .col-lg-7.icon-boxes > .icon-box .icon i {
	font-size: 22px;
}

#about .col-lg-7.icon-boxes > .icon-box h4.title {
	font-size: 17px;
	margin-bottom: 6px;
}

#about .col-lg-7.icon-boxes > .icon-box p.description {
	font-size: 14px;
	line-height: 1.6;
}

#about .col-lg-7.icon-boxes > .icon-box > div.text-center {
	align-self: end;
	margin-top: 14px;
}

#about .col-lg-7.icon-boxes > .icon-box .btn-get-started {
	padding: 10px 20px;
	font-size: 14px;
}

/* Quinto cartão (ímpar) ocupa a linha inteira para fechar a grade */
#about .col-lg-7.icon-boxes > .icon-box:last-child {
	grid-column: 1 / -1;
}

@media (max-width: 575px) {
	#about .col-lg-7.icon-boxes {
		grid-template-columns: 1fr;
	}

	#about .col-lg-7.icon-boxes > .icon-box {
		grid-template-rows: none;
	}
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 991px) {
	#about .about-media {
		position: static;
		margin-bottom: 36px;
	}
}

@media (max-width: 575px) {
	#about .icon-box {
		grid-template-columns: 1fr;
		padding: 22px 20px !important;
	}

	#about .icon-box .icon {
		grid-row: auto;
		grid-column: 1;
		margin-bottom: 14px;
	}

	#about .icon-box h4.title,
	#about .icon-box p.description,
	#about .icon-box > div.text-center {
		grid-column: 1;
	}

	#about .icon-box .btn-get-started {
		display: block;
	}

	#features .icon-box {
		padding: 24px 20px !important;
	}
}

/* ==========================================================
   RESPONSIVIDADE COMPLETA (ajustes finos por faixa de tela)
   ========================================================== */

/* Evita qualquer rolagem horizontal causada pelas seções */
#about,
#features {
	overflow-x: hidden;
}

#about img,
#features img {
	max-width: 100%;
	height: auto;
}

/* Tipografia fluida: cresce e diminui suavemente conforme a tela */
#about .about-lead {
	font-size: clamp(15px, 1.4vw + 11px, 17px);
}

#features .icon-box h3 {
	font-size: clamp(16px, 0.8vw + 13px, 18px);
}

#features .icon-box p.description {
	font-size: clamp(14px, 0.5vw + 12px, 15px);
}

/* Notebooks pequenos (992px a 1199px): ícone em cima do texto para caber melhor */
@media (min-width: 992px) and (max-width: 1199px) {
	#about .col-lg-7.icon-boxes > .icon-box {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr auto;
		padding: 18px !important;
	}

	#about .col-lg-7.icon-boxes > .icon-box .icon {
		grid-column: 1;
		grid-row: auto;
		width: 46px;
		height: 46px;
		margin-bottom: 12px;
	}

	#about .col-lg-7.icon-boxes > .icon-box h4.title,
	#about .col-lg-7.icon-boxes > .icon-box p.description,
	#about .col-lg-7.icon-boxes > .icon-box > div.text-center {
		grid-column: 1;
	}

	#about .col-lg-7.icon-boxes > .icon-box .btn-get-started {
		display: block;
	}
}

/* Tablets (768px a 991px): foto centralizada em cima, cartões em 2 colunas */
@media (max-width: 991px) {
	#about .about-media {
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}

	#about .col-lg-7.icon-boxes {
		margin-top: 8px;
	}

	#about .about-kicker,
	#about .col-lg-7.icon-boxes > h3,
	#about .about-lead {
		text-align: center;
	}
}

/* Celulares grandes e tablets em pé (até 767px): cartões em 1 coluna, serviços em 2 */
@media (max-width: 767px) {
	#about .col-lg-7.icon-boxes {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	#about .col-lg-7.icon-boxes > .icon-box:last-child {
		grid-column: auto;
	}

	#features .row > [class*="col-"] {
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 16px;
	}

	#features .icon-box {
		padding: 22px 18px !important;
	}

	#features .icon-box::before {
		width: 38px;
		height: 38px;
		margin-bottom: 14px;
	}
}

/* Celulares (até 575px): tudo em 1 coluna, botões largos e fáceis de tocar */
@media (max-width: 575px) {
	#features .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	#about .about-media {
		max-width: 280px;
	}

	#about .about-badge {
		font-size: 13px;
		padding: 9px 18px;
	}

	#about .col-lg-7.icon-boxes > .icon-box {
		grid-template-columns: 1fr;
		padding: 20px 18px !important;
	}

	#about .col-lg-7.icon-boxes > .icon-box .icon {
		grid-column: 1;
		grid-row: auto;
		margin-bottom: 12px;
	}

	#about .col-lg-7.icon-boxes > .icon-box h4.title,
	#about .col-lg-7.icon-boxes > .icon-box p.description,
	#about .col-lg-7.icon-boxes > .icon-box > div.text-center {
		grid-column: 1;
	}

	#about .col-lg-7.icon-boxes > .icon-box .btn-get-started {
		display: block;
		width: 100%;
		min-height: 48px;
	}
}

/* Telas muito pequenas (até 360px) */
@media (max-width: 360px) {
	#about .col-lg-7.icon-boxes > .icon-box h4.title {
		font-size: 16px;
	}

	#about .icon-box .btn-get-started {
		font-size: 13px;
		padding: 10px 14px;
	}
}

/* Respeita quem reduz animações */
@media (prefers-reduced-motion: reduce) {
	#features .icon-box,
	#about .icon-box,
	#about .icon-box .btn-get-started {
		transition: none;
	}
}
/* 52f0d476d7fe6a2b */