/* ==========================================================================
   SpanishAura — Sobre mí
   Página editorial: prosa larga, citas intercaladas y dos bloques con foto.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.sa-about-hero {
	padding-block-start: 2rem;
}

.sa-about-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

/* La foto va primero, a la izquierda: es el orden del diseño en esta página. */
.sa-about-hero__media {
	flex: 1;
	width: 100%;
	max-width: 20rem;
	margin-inline: auto;
}

.sa-about-hero__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	flex: 1;
	text-align: center;
}

.sa-about-hero__content h1 {
	margin: 0;
}

.sa-about-hero__content h1 em {
	color: var(--sa-primary);
	font-style: italic;
}

.sa-about-hero__content .sa-lead {
	margin-inline: auto;
}

@media (min-width: 768px) {
	.sa-about-hero {
		padding-block-start: 3.5rem;
	}

	.sa-about-hero__inner {
		flex-direction: row;
		gap: 4rem;
	}

	.sa-about-hero__media {
		max-width: 24rem;
		margin-inline: 0;
	}

	.sa-about-hero__content {
		text-align: start;
	}

	.sa-about-hero__content .sa-lead {
		margin-inline: 0;
	}
}

/* --- Bloques de prosa ------------------------------------------------------ */

/*
 * Prosa justificada: solo los párrafos de cuerpo (leads del hero y párrafos
 * sueltos de las historias). Con «> p» se excluyen los pull-quotes, que van
 * anidados en <blockquote>; los títulos, tarjetas de datos y las cajas
 * (belief, CTA) quedan fuera a propósito.
 */
.sa-page--sobre-mi .sa-about-hero__content .sa-lead,
.sa-page--sobre-mi .sa-story > p {
	text-align: justify;
}

.sa-story {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sa-story h2 {
	margin: 0;
}

.sa-story p {
	margin: 0;
	color: var(--sa-on-surface-variant);
	line-height: var(--sa-lh-relaxed);
}

.sa-story strong {
	color: var(--sa-on-surface);
}

/* Cita intercalada en la prosa: borde grueso, sin fondo. */
.sa-quote--pull {
	margin-block: 0.5rem;
	padding-inline-start: 1.25rem;
	border-inline-start: 4px solid var(--sa-primary-container);
}

.sa-quote--pull p {
	color: var(--sa-on-surface);
	font-family: var(--sa-font-serif);
	font-size: var(--sa-fs-lead);
	font-style: italic;
	line-height: var(--sa-lh-relaxed);
}

/* --- Bloque con foto circular ---------------------------------------------- */

.sa-about-split {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 2.5rem;
}

.sa-about-split__media {
	max-width: 20rem;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.sa-about-split {
		grid-template-columns: repeat(2, 1fr);
		gap: 4rem;
	}

	.sa-about-split__media {
		max-width: 24rem;
	}
}

/* --- Datos sueltos ---------------------------------------------------------- */

.sa-fact {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.25rem;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius-card);
	box-shadow: var(--sa-shadow-sm);
}

.sa-fact__emoji {
	flex-shrink: 0;
	font-size: 1.5rem;
	line-height: 1.3;
}

.sa-fact p {
	margin: 0;
	line-height: var(--sa-lh-relaxed);
}

/* --- Algo en lo que creo ------------------------------------------------------ */

.sa-belief {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem 1.5rem;
	background-color: var(--sa-surface-container-highest);
	border-radius: var(--sa-radius-card);
	text-align: center;
}

.sa-belief p {
	margin: 0;
	color: var(--sa-on-surface-variant);
	line-height: var(--sa-lh-relaxed);
}

.sa-belief__close {
	color: var(--sa-on-surface) !important;
	font-size: var(--sa-fs-lead);
	font-weight: 700;
}

.sa-belief__close em {
	color: var(--sa-primary);
	font-style: italic;
}