/**
 * SkySkin — Boxes de texto en tratamientos
 *
 * Alcance deliberadamente acotado a la plantilla nueva de tratamientos
 * (.ssk-st-page). Las fichas anteriores ya tienen sus propias tarjetas.
 */

body.single-skyskin_treatment .ssk-st-page {
	--ssk-box-bg: rgba(255, 250, 247, 0.96);
	--ssk-box-border: rgba(132, 52, 83, 0.14);
	--ssk-box-shadow: 0 16px 42px rgba(92, 43, 61, 0.10);
	--ssk-box-text: #30272a;
	--ssk-box-copy: #51454a;
	--ssk-box-accent: #873754;
}

/* Encabezados y párrafos introductorios de cada sección. */
body.single-skyskin_treatment .ssk-st-page .ssk-st-section__head {
	box-sizing: border-box;
	padding: clamp(24px, 3vw, 38px);
	background: var(--ssk-box-bg);
	border: 1px solid var(--ssk-box-border);
	border-radius: 24px;
	box-shadow: var(--ssk-box-shadow);
}

/* Cuidados: el texto principal pasa a ser una tarjeta, igual que la alerta. */
body.single-skyskin_treatment .ssk-st-page .ssk-st-care__main {
	box-sizing: border-box;
	padding: clamp(28px, 3vw, 42px);
	background: var(--ssk-box-bg);
	border: 1px solid var(--ssk-box-border);
	border-radius: 26px;
	box-shadow: var(--ssk-box-shadow);
}

/* Cada pregunta frecuente tiene su propia caja legible. */
body.single-skyskin_treatment .ssk-st-page .ssk-st-faq__list details {
	box-sizing: border-box;
	overflow: hidden;
	margin: 0 0 14px;
	padding: 0 clamp(18px, 2.5vw, 28px);
	background: var(--ssk-box-bg);
	border: 1px solid var(--ssk-box-border);
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(92, 43, 61, 0.08);
}

body.single-skyskin_treatment .ssk-st-page .ssk-st-faq__list details:last-child {
	margin-bottom: 0;
}

/* Cierre: el texto queda contenido y contrastado dentro del bloque bordó. */
body.single-skyskin_treatment .ssk-st-page .ssk-st-final > div:first-child {
	box-sizing: border-box;
	max-width: 760px;
	padding: clamp(26px, 3vw, 38px);
	color: var(--ssk-box-text);
	background: var(--ssk-box-bg);
	border: 1px solid rgba(255, 255, 255, 0.30);
	border-radius: 24px;
	box-shadow: 0 18px 46px rgba(61, 25, 39, 0.18);
}

body.single-skyskin_treatment .ssk-st-page .ssk-st-final > div:first-child h2 {
	color: var(--ssk-box-text);
}

body.single-skyskin_treatment .ssk-st-page .ssk-st-final > div:first-child > p:not(.ssk-st-kicker) {
	color: var(--ssk-box-copy);
}

body.single-skyskin_treatment .ssk-st-page .ssk-st-final > div:first-child .ssk-st-kicker {
	color: var(--ssk-box-accent);
}

/* Evita espacios sobrantes dentro de las nuevas cajas. */
body.single-skyskin_treatment .ssk-st-page .ssk-st-section__head > :first-child,
body.single-skyskin_treatment .ssk-st-page .ssk-st-care__main > :first-child,
body.single-skyskin_treatment .ssk-st-page .ssk-st-final > div:first-child > :first-child {
	margin-top: 0;
}

body.single-skyskin_treatment .ssk-st-page .ssk-st-section__head > :last-child,
body.single-skyskin_treatment .ssk-st-page .ssk-st-care__main > :last-child,
body.single-skyskin_treatment .ssk-st-page .ssk-st-final > div:first-child > :last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	body.single-skyskin_treatment .ssk-st-page .ssk-st-section__head,
	body.single-skyskin_treatment .ssk-st-page .ssk-st-care__main,
	body.single-skyskin_treatment .ssk-st-page .ssk-st-final > div:first-child {
		width: 100%;
		padding: 22px;
		border-radius: 18px;
	}

	body.single-skyskin_treatment .ssk-st-page .ssk-st-faq__list details {
		margin-bottom: 10px;
		padding-right: 18px;
		padding-left: 18px;
		border-radius: 14px;
	}
}