/**
 * Mi historia — Moni Sarai
 *
 * Portado del mi-historia.tsx de Lovable. Equivalencias de Tailwind → px:
 * py-20=80 · md:py-24=96 · py-12=48 · gap-12=48 · p-10=40 · mt-8=32 · mt-6=24
 * mt-5=20 · mt-3=12 · text-6xl=60 · text-5xl=48 · text-3xl=30 · text-sm=14
 * max-w-3xl=768 · max-w-xl=576 · rounded 3rem=48
 *
 * ⚠ Todo en px, nunca rem: OceanWP declara `html { font-size: 62.5% }`.
 *
 * El contenedor, los botones y la animación vienen de components.css.
 */

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

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

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

@media (min-width: 768px) {

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

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

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

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

.ms-hist-portada__img,
.ms-hist-portada__media .ms-img-placeholder {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-start-start-radius: 48px;
	border-end-end-radius: 48px;
}

/* -------------------------------------------------------------------------
 * 2. Relato
 * ---------------------------------------------------------------------- */

.ms-hist-relato {
	padding-block: clamp(56px, 7vw, 80px);
}

.ms-hist-relato__inner {
	width: 100%;
	max-width: 768px;           /* max-w-3xl */
	margin-inline: auto;
	padding-inline: var(--ms-gutter, 24px);
}

.ms-cap {
	padding-block: 48px;
	border-top: 1px solid var(--ms-border);
}

/* El primer capítulo no lleva línea ni relleno arriba. */
.ms-cap:first-child {
	padding-top: 0;
	border-top: 0;
}

.ms-cap__num {
	display: block;
	font-family: var(--ms-font-display);
	font-size: 30px;
	line-height: 1;
	/* var(--ms-primary) al 40 %, como el `text-primary/40` del diseño. */
	color: rgba(57, 96, 64, 0.4);
}

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

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

.ms-cap__body a {
	color: var(--ms-primary);
	text-underline-offset: 3px;
}

.ms-cap__body strong {
	color: var(--ms-foreground);
}

/* -------------------------------------------------------------------------
 * 3. Cierre
 * ---------------------------------------------------------------------- */

.ms-hist-cierre {
	margin-top: 24px;
	padding: 40px 24px;
	background-color: var(--ms-arena);
	text-align: center;
}

@media (min-width: 768px) {

	.ms-hist-cierre {
		padding: 40px;
	}
}

.ms-hist-cierre__text {
	margin: 0;
	font-family: var(--ms-font-display);
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--ms-foreground);
	text-wrap: balance;
}

.ms-hist-cierre__cta {
	margin-top: 32px;
}