/**
 * Universo — layout compartido por las páginas de línea de negocio
 * (Psicología, Deporte, Azul, Arte acuático).
 *
 * Portado del `UniversoLayout` de Lovable. Equivalencias Tailwind → px:
 * py-20=80 · pt-20=80 · text-4xl=36 · text-3xl=30 · text-sm=14 · text-xs=12
 * max-w-3xl=768 · max-w-6xl=1152 · mt-8=32 · mt-4=16
 *
 * ⚠ Todo en px, nunca rem: OceanWP declara `html { font-size: 62.5% }`.
 *
 * El contenedor, los botones base y la animación vienen de components.css.
 *
 * CÓMO AÑADIR OTRO UNIVERSO
 * Basta con poner la clase de línea en el envoltorio de la plantilla:
 *   <div class="ms-page ms-uni ms-uni--azul"> … </div>
 * Los cuatro colores de esa línea salen de las variables de abajo.
 *
 * `--ms-linea-num` es el color del número de cada servicio: el color de la
 * línea a plena opacidad. Comprobado muestreando los tres referentes
 * (verde #425f43, durazno #ddae95, dorado #ecce7d).
 *
 * `--ms-linea-fuerte` es el color con el que se pintan los botones sólidos.
 * No siempre coincide con el color de la línea: el verde de marca ya es
 * oscuro, pero el durazno, el azul y el dorado son claros, así que en esos
 * tres se usa su tinta para que el texto blanco tenga contraste.
 */

/* Verde · psicología (valores por defecto). */
.ms-uni,
.ms-uni--verde {
	--ms-linea: var(--ms-verde);
	--ms-linea-soft: var(--ms-verde-soft);
	--ms-linea-ink: var(--ms-verde-ink);
	--ms-linea-fuerte: var(--ms-verde);
	--ms-linea-num: var(--ms-linea);
}

/* Durazno · deporte. */
.ms-uni--durazno {
	--ms-linea: var(--ms-durazno);
	--ms-linea-soft: var(--ms-durazno-soft);
	--ms-linea-ink: var(--ms-durazno-ink);
	--ms-linea-fuerte: var(--ms-durazno-ink);
	--ms-linea-num: var(--ms-linea);
}

/* Azul · implementos. */
.ms-uni--azul {
	--ms-linea: var(--ms-azul);
	--ms-linea-soft: var(--ms-azul-soft);
	--ms-linea-ink: var(--ms-azul-ink);
	--ms-linea-fuerte: var(--ms-azul-ink);
	--ms-linea-num: var(--ms-linea);
}

/* Dorado · arte acuático. */
.ms-uni--arte {
	--ms-linea: var(--ms-arte);
	--ms-linea-soft: var(--ms-arte-soft);
	--ms-linea-ink: var(--ms-arte-ink);
	--ms-linea-fuerte: var(--ms-arte-ink);
	--ms-linea-num: var(--ms-linea);
}

/* -------------------------------------------------------------------------
 * 1. Portada
 * ---------------------------------------------------------------------- */

.ms-uni-portada {
	background-color: var(--ms-linea-soft);
	padding-block: clamp(56px, 7vw, 96px);
}

.ms-uni-portada__grid {
	display: grid;
	gap: 40px;
}

@media (min-width: 900px) {

	.ms-uni-portada__grid {
		grid-template-columns: 1fr 0.9fr;
		align-items: center;
		gap: 48px;
	}
}

.ms-uni-portada__eyebrow {
	color: var(--ms-linea-ink);
}

.ms-uni-portada__title {
	margin: 20px 0 0;
	font-family: var(--ms-font-display);
	font-size: clamp(34px, 4.6vw, 56px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.ms-uni-portada__claim {
	margin: 20px 0 0;
	font-size: clamp(15px, 1.4vw, 18px);
	font-style: italic;
	line-height: 1.5;
	color: var(--ms-linea-ink);
}

.ms-uni-portada__text {
	margin: 20px 0 0;
	max-width: 576px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--ms-muted-foreground);
}

.ms-uni-portada__media {
	min-width: 0;
}

/*
 * Proporción fija y object-fit: da igual el recorte que suba Moni, la portada
 * siempre se ve igual y el layout no salta al cargar (CLS).
 */
.ms-uni-portada__img,
.ms-uni-portada__media .ms-img-placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-start-start-radius: 48px;
	border-end-end-radius: 48px;
}

/* -------------------------------------------------------------------------
 * 2. Introducción
 * ---------------------------------------------------------------------- */

.ms-uni-intro {
	padding-top: clamp(48px, 6vw, 80px);
}

.ms-uni-intro__inner {
	width: 100%;
	max-width: 768px;
	margin-inline: auto;
	padding-inline: var(--ms-gutter, 24px);
}

.ms-uni-intro__inner > * {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--ms-muted-foreground);
}

.ms-uni-intro__inner > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 3. Servicios
 * ---------------------------------------------------------------------- */

.ms-uni-servicios {
	padding-block: clamp(48px, 6vw, 80px);
}

.ms-uni-servicios__eyebrow {
	color: var(--ms-linea-ink);
}

.ms-uni-servicios__title {
	margin: 16px 0 0;
	font-family: var(--ms-font-display);
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

/* La última fila cierra el listado con su propia línea. */
.ms-uni-servicios__list {
	margin-top: 40px;
	border-bottom: 1px solid var(--ms-border);
}

.ms-uni-servicio {
	display: grid;
	gap: 24px;
	padding-block: 40px;
	border-top: 1px solid var(--ms-border);
}

@media (min-width: 900px) {

	.ms-uni-servicio {
		grid-template-columns: 44px minmax(0, 1fr) 268px;
		column-gap: 24px;
		align-items: start;
		padding-block: 48px;
	}
}

.ms-uni-servicio__num {
	display: block;
	font-family: var(--ms-font-display);
	font-size: 26px;
	line-height: 1.2;
	color: var(--ms-linea-num);
}

.ms-uni-servicio__body {
	min-width: 0;
}

.ms-uni-servicio__title {
	margin: 0;
	font-family: var(--ms-font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

/*
 * La frase en cursiva va en la tinta de la línea. En verde eso es casi negro
 * (#224028) y en durazno un marrón claro: mismo patrón, distinto color.
 */
.ms-uni-servicio__claim {
	margin: 10px 0 0;
	font-size: 14px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ms-linea-ink);
}

.ms-uni-servicio__text > * {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--ms-muted-foreground);
}

.ms-uni-servicio__text a {
	color: var(--ms-linea);
	text-underline-offset: 3px;
}

/* Aviso destacado bajo la descripción. */
.ms-uni-servicio__nota {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 24px 0 0;
	padding: 10px 16px;
	background-color: var(--ms-linea-soft);
	color: var(--ms-linea-ink);
	font-size: 13px;
	line-height: 1.5;
}

.ms-uni-servicio__nota-icon {
	flex: 0 0 auto;
	opacity: 0.75;
}

/* Botón en bloque, alineado arriba a la derecha de la fila. */
.ms-uni-servicio__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	background-color: var(--ms-linea-fuerte);
	color: var(--ms-primary-foreground);
	font-family: var(--ms-font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.ms-uni-servicio__cta:hover {
	opacity: 0.9;
}

.ms-uni-servicio__cta:focus-visible {
	outline: 2px solid var(--ms-linea-ink);
	outline-offset: 3px;
}

/* La flecha diagonal del diseño = la flecha del tema girada 45°. */
.ms-uni-servicio__cta .ms-arrow {
	flex: 0 0 auto;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.ms-uni-servicio__cta:hover .ms-arrow {
	transform: rotate(-45deg) translateX(3px);
}

/* -------------------------------------------------------------------------
 * 4. Cierre
 * ---------------------------------------------------------------------- */

.ms-uni-cierre {
	background-color: var(--ms-linea-soft);
	padding-block: clamp(56px, 7vw, 80px);
}

.ms-uni-cierre__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 768px;
	margin-inline: auto;
	padding-inline: var(--ms-gutter, 24px);
	text-align: center;
}

.ms-uni-cierre__title {
	margin: 0;
	font-family: var(--ms-font-display);
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.ms-uni-cierre__text {
	margin: 16px 0 0;
	max-width: 576px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--ms-muted-foreground);
}

/*
 * Botón del cierre. Dos variantes porque el diseño alterna: Psicología lo usa
 * sólido y Deporte con contorno.
 */
.ms-uni-cierre__cta {
	margin-top: 32px;
}

.ms-btn--linea {
	background-color: var(--ms-linea-fuerte);
	color: var(--ms-primary-foreground);
	padding: 14px 32px;
}

.ms-btn--linea:hover {
	opacity: 0.9;
}

.ms-btn--linea-outline {
	border-color: var(--ms-linea-ink);
	color: var(--ms-linea-ink);
	padding: 14px 32px;
}

.ms-btn--linea-outline:hover {
	background-color: var(--ms-card);
}