/* ==========================================================================
   MÁSVILLA — Servicios
   Figma: "MasVilla - Servicios_desktop 1512" (1:1689). Medidas de referencia a 1512px.
   ========================================================================== */

/* ---------- Cómo puedo acompañarte ---------- */
.sv-acompanar { padding-block: clamp(64px, 7vw, 106px) clamp(72px, 7vw, 104px); }

.sv-acompanar__inner { display: flex; flex-direction: column; align-items: center; }

.sv-acompanar__titulo { text-align: center; }

.sv-acompanar__intro {
	max-width: 1067px;
	margin: clamp(20px, 2.6vw, 40px) 0 clamp(36px, 4.4vw, 66px);
	text-align: center;
	text-wrap: balance;
}

.sv-espacios {
	display: grid;
	gap: clamp(20px, 2.2vw, 33px);
	width: 100%;
	max-width: 954px;
}

.sv-espacio {
	display: grid;
	grid-template-columns: minmax(0, 584fr) minmax(0, 370fr);
	min-height: clamp(260px, 20vw, 304px);
	scroll-margin-top: 160px;
}

.sv-espacio__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(32px, 3.4vw, 50px) clamp(24px, 2vw, 29px) clamp(28px, 2.1vw, 32px);
}
.sv-espacio__titulo { margin-bottom: 16px; color: var(--c-crema); }
.sv-espacio__texto p { margin-bottom: 24px; }
.sv-espacio__boton { margin-top: auto; }

.sv-espacio--verde .sv-espacio__texto { background: var(--c-verde); color: var(--c-crema); }
.sv-espacio--rosa .sv-espacio__texto  { background: var(--c-rosa); color: var(--c-crema); }

.sv-espacio .btn--crema:hover,
.sv-espacio .btn--crema:focus-visible { border-color: var(--c-crema); color: var(--c-crema); }

.sv-espacio__imagen { position: relative; min-height: 220px; }
.sv-espacio__imagen img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Cómo funcionan las sesiones ---------- */
.sv-sesiones {
	padding-block: clamp(64px, 5.2vw, 78px) clamp(64px, 5.6vw, 84px);
	background: var(--c-amarillo);
}

.sv-sesiones__titulo {
	margin-bottom: clamp(40px, 5.6vw, 84px);
	text-align: center;
	text-transform: uppercase;
}

.sv-sesiones__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px clamp(24px, 4vw, 64px);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.sv-sesion { text-align: center; }

.sv-sesion__foto {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(170px, 14.6vw, 220px);
	margin-bottom: clamp(24px, 3.2vw, 48px);
}
.sv-sesion__foto img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.sv-sesion p { max-width: 230px; margin-inline: auto; }

/* ---------- Antes de comenzar, ¿tienes dudas? ---------- */
.sv-dudas { padding-block: clamp(64px, 6vw, 90px) clamp(72px, 7vw, 104px); }

.sv-dudas__titulo { margin-bottom: clamp(32px, 4vw, 60px); }

.sv-dudas__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(36px, 3.4vw, 52px) clamp(32px, 3.6vw, 54px);
	margin: 0;
	padding-inline: clamp(0px, 1.8vw, 26px);
}

.sv-duda {
	display: grid;
	grid-template-columns: 32px 1fr;
	column-gap: clamp(16px, 1.8vw, 26px);
	align-items: start;
}

.sv-duda__icono {
	grid-row: 1 / span 2;
	width: 31px;
	height: auto;
	margin-top: 2px;
}

.sv-duda__pregunta {
	font-family: var(--f-raleway);
	font-weight: 700;
	font-size: clamp(15px, .85rem + .3vw, 18px);
	line-height: 1.65;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.sv-duda__respuesta {
	margin: 14px 0 0;
	font-family: var(--f-raleway);
	font-weight: 400;
	font-size: clamp(16px, .95rem + .2vw, 18px);
	line-height: 1.65;
	letter-spacing: .01em;
}

/* ---------- Da el primer paso ---------- */
.sv-primer-paso {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(320px, 27.8vw, 420px);
	padding-block: 64px;
	overflow: hidden;
	color: var(--c-crema);
	background: #8a6a3a;
}

.sv-primer-paso__media,
.sv-primer-paso__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.sv-primer-paso__media img { object-fit: cover; }
.sv-primer-paso__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(35, 35, 35, .18);
}

.sv-primer-paso__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 2vw, 28px);
	text-align: center;
}
.sv-primer-paso__titulo {
	color: var(--c-crema);
	text-transform: uppercase;
	text-wrap: balance;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}
.sv-primer-paso .btn--naranja:hover,
.sv-primer-paso .btn--naranja:focus-visible { border-color: var(--c-crema); color: var(--c-crema); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.sv-sesiones__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
	.sv-dudas__lista { grid-template-columns: 1fr; max-width: 680px; padding-inline: 0; }
}

@media (max-width: 767px) {
	.sv-espacio { grid-template-columns: 1fr; }
	.sv-espacio__imagen { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
	.sv-espacio__boton { margin-top: 4px; }

	.sv-sesiones__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
	.sv-sesion__foto { height: 140px; margin-bottom: 18px; }
	.sv-sesion p { font-size: 15px; line-height: 1.55; }
}