/* =========================================================
   km_servicios_terapias — cabecera + pestañas.

   El color lo elige el editor en el builder (coral / turquesa) y
   viaja por --km-terapias-color, así que el resto de reglas no
   sabe de qué color va la sección.

   Sin JS: la barra de pestañas no se pinta y los paneles quedan
   apilados. El JS añade .is-ready al bloque y ahí aparecen.
   ========================================================= */

.km-servicios-terapias {
	/* Fondo de color con texto blanco encima → variantes -dark
	   (ver CLAUDE.md → identidad visual). */
	--km-terapias-color: var(--km-highlight-dark);

	padding: 70px 0;
	background: var(--km-white);
}

.km-servicios-terapias[data-scheme="turquesa"] {
	--km-terapias-color: var(--km-accent-dark);
}

/* ---------- Cabecera ---------- */
.km-servicios-terapias__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 32px;
}

.km-servicios-terapias__eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--km-text-muted);
	margin: 0 0 8px;
}

.km-servicios-terapias__title {
	font-size: clamp(28px, 3.23vw, 39px);
	line-height: 1.2;
	color: var(--km-primary);
	margin: 0 0 14px;
}

.km-servicios-terapias__intro {
	font-size: 17px;
	line-height: 1.7;
	color: var(--km-text-soft);
}

.km-servicios-terapias__intro p:last-child {
	margin-bottom: 0;
}

/* ---------- Barra de pestañas ---------- */
/* Oculta de partida: sin JS no haría nada. La muestra .is-ready. */
.km-servicios-terapias__tablist {
	display: none;
}

.km-servicios-terapias__tabs.is-ready .km-servicios-terapias__tablist {
	display: flex;
	overflow-x: auto;
	background: var(--km-bg);
	border-radius: var(--km-radius);
	margin-bottom: 36px;
	scrollbar-width: thin;
}

.km-servicios-terapias__tab {
	flex: 1 0 auto;
	min-width: 130px;
	padding: 11px 18px;
	font-family: var(--km-font);
	font-size: 16px;
	line-height: 1.3;
	color: var(--km-text-soft);
	background: transparent;
	border: 0;
	/* Separador fino entre pestañas, del color del fondo de sección. */
	border-right: 1px solid var(--km-white);
	cursor: pointer;
	transition: background var(--km-trans), color var(--km-trans);
}

.km-servicios-terapias__tab:last-child {
	border-right: 0;
}

.km-servicios-terapias__tab:hover {
	color: var(--km-terapias-color);
}

.km-servicios-terapias__tab[aria-selected="true"] {
	color: var(--km-white);
	background: var(--km-terapias-color);
}

/* ---------- Paneles ---------- */
.km-servicios-terapias__panels {
	display: grid;
	/* Separación entre paneles mientras están todos apilados (sin JS). */
	gap: 48px;
}

.km-servicios-terapias__panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 48px;
}

.km-servicios-terapias__panel[hidden] {
	display: none;
}

/* El panel recibe foco al llegar desde las pestañas: sin outline
   propio quedaría sin señal visible. */
.km-servicios-terapias__panel:focus-visible {
	outline: 2px solid var(--km-terapias-color);
	outline-offset: 6px;
}

.km-servicios-terapias--media-right .km-servicios-terapias__media {
	order: 2;
}

.km-servicios-terapias__img {
	width: 100%;
	border-radius: var(--km-radius);
}

.km-servicios-terapias__panel-title {
	font-size: clamp(24px, 2.66vw, 31px);
	line-height: 1.25;
	color: var(--km-terapias-color);
	margin: 0 0 18px;
}

.km-servicios-terapias__panel-subtitle {
	display: block;
}

.km-servicios-terapias__text {
	font-size: 17px;
	line-height: 1.8;
	color: var(--km-text-soft);
}

@media (max-width: 900px) {
	.km-servicios-terapias {
		padding: 52px 0;
	}

	.km-servicios-terapias__panel {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.km-servicios-terapias--media-right .km-servicios-terapias__media {
		order: 0;
	}

	.km-servicios-terapias__tab {
		/* En pantallas estrechas dejan de repartirse el ancho y la
		   barra pasa a desplazarse en horizontal. */
		flex: 0 0 auto;
		min-width: 118px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.km-servicios-terapias__tab {
		transition: none;
	}
}