/**
 * Estilos exclusivos de la página «Sobre mi».
 *
 * Sólo se carga en esa plantilla (ver functions.php), para no añadir peso al
 * resto del sitio.
 */

/* Titular algo menor que el de la portada */
.mp-hero__title--sm {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.2;
}

.mp-hero__text--narrow {
	max-width: 440px;
}

/* Columna de foto + tarjeta promocional junto al currículum */
.mp-split--08-12 {
	grid-template-columns: 0.8fr 1.2fr;
	align-items: start;
}

.mp-aside-photo {
	margin-bottom: 16px;
}

/* Tarjeta rosa con llamada a la acción */
.mp-promo {
	background: var(--mp-blush);
	border-radius: var(--mp-r-lg);
	padding: 24px;
}

.mp-promo__badge {
	display: inline-block;
	background: var(--mp-white);
	color: var(--mp-ink);
	font-weight: 600;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: var(--mp-r-pill);
	margin-bottom: 14px;
	text-decoration: none;
}

.mp-promo__title {
	font-family: var(--mp-font-display);
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 14px;
	color: var(--mp-white);
}

.mp-promo__meta {
	font-size: 12.5px;
	color: #4a2f2a;
}

/* Educación y experiencia */
.mp-cv-group {
	margin-bottom: 44px;
}

.mp-cv-group:last-child {
	margin-bottom: 0;
}

.mp-cv-group__title {
	font-size: 26px;
	margin: 0 0 20px;
}

.mp-cv-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mp-cv-item__name {
	font-weight: 600;
	font-size: 15px;
}

.mp-cv-item__meta {
	font-size: 13.5px;
	color: var(--mp-muted);
}

/* Texto largo editable desde el Editor Clásico */
.mp-prose {
	max-width: 820px;
	margin: 80px auto;
	padding: 0 24px;
	color: var(--mp-ink);
}

.mp-prose__title {
	font-size: clamp(22px, 3.6vw, 30px);
	margin: 0 0 22px;
	line-height: 1.3;
}

.mp-prose__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 15px;
	color: var(--mp-muted-2);
	line-height: 1.7;
}

/* Certificados de excelencia */
.mp-cert {
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r-md);
	padding: 24px;
	position: relative;
	overflow: hidden;
}

/* Franja verde del borde derecho */
.mp-cert::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 14px;
	background: var(--mp-green-dark);
}

.mp-cert__label {
	font-size: 12px;
	color: var(--mp-green-dark);
	font-weight: 600;
	margin-bottom: 6px;
}

.mp-cert__year {
	font-family: var(--mp-font-display);
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 14px;
}

.mp-cert__name {
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 8px;
}

.mp-cert__note {
	font-size: 12.5px;
	color: var(--mp-muted);
	margin-bottom: 12px;
}

.mp-cert__stars {
	color: var(--mp-gold);
	font-size: 14px;
	letter-spacing: 2px;
}

/* Etiquetas estáticas de temas */
.mp-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.mp-tag {
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r-pill);
	padding: 8px 16px;
	font-size: 13.5px;
	color: var(--mp-muted-2);
	text-decoration: none;
	display: inline-block;
}

.mp-tag:hover {
	border-color: var(--mp-green);
	color: var(--mp-green-dark);
}

/* Las variantes .mp-post-card--sm y .mp-center-more viven en main.css:
   también las usa el listado del blog. */

@media (max-width: 879px) {
	.mp-split--08-12 {
		grid-template-columns: 1fr;
	}

	.mp-prose {
		margin: 56px auto;
	}
}