/*****  SERVICIOS  *****/
#services { background-color: var(--white); padding: 92px 0 100px; }

.title-section {
	text-align: center;
	width: auto;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 4%;
}

.title-section .title { width: initial; }

.title-section .subtitle { font-size: 18px; max-width: 52ch; margin: 16px auto 0; }

.description-section { text-align: center; width: 70%; margin: 15px auto 0; font-size: 18px; line-height: 1.6; color: var(--text); }

#list-services, #list-services-procedures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 22px;
	width: 92%;
	max-width: 1200px;
	margin: 52px auto 0;
	text-align: left;
}

.service {
	display: flex;
	flex-direction: column;
	background-color: var(--white);
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 14px 14px 26px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service:hover { transform: translateY(-4px); border-color: var(--pink); box-shadow: var(--shadow-soft); }

/* Panel en arco con ícono; sustituible por fotografía si se cuenta con ella */
.image-service {
	aspect-ratio: 17 / 20;
	overflow: hidden;
	border-radius: 120px 120px 14px 14px;
	background-color: var(--blush);
}

.image-service > div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.service-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.service:hover .service-art img { transform: scale(1.05); }

.text-service { padding: 24px 10px 0; text-align: left; }

.text-service > h3 {
	margin: 0 0 10px;
	font-size: 23px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.text-service > p, .text-service > ul { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.65; }
.text-service > ul { padding-left: 18px; }

.service-image-placeholder, .service-icon-placeholder { display: none; }
/***** FIN SERVICIOS  *****/

@media only screen and (max-width: 599px) {
	#services { padding: 64px 0 72px; }
	#list-services { grid-template-columns: 1fr; margin-top: 36px; }
	.image-service { aspect-ratio: 1 / 1; }
	.service-art img { object-position: 50% 30%; }
}