/* ============================================================
   cedares — Home · Sobre la exposición
   Figma: 7:1505 (desktop) · 324:4217 (móvil).
   Móvil: apilado (medidas escaladas del frame de 576px). Desktop (>=1024px):
   aside sticky + cuerpo.
   ============================================================ */

.sobre {
	position: relative;
	/* Sin overflow:hidden: el glow magenta debe desbordar hacia «Las 6 salas».
	   El recorte horizontal lo asume .home-page (overflow-x: clip). */
}

/* Círculo magenta difuso (Figma Ellipse 3, blur 325 → /2 = 162.5px): detrás del
   texto, a la derecha; opacidad 0.24. */
.sobre__glow {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.sobre__glow--magenta {
	right: -400px;
	top: 38%;
	width: 920px;
	height: 920px;
	background-image: url('../img/sobre/glow-magenta.png');
}

/* Glow izquierdo (Figma Ellipse 4), detrás del avatar / primer párrafo.
   PNG con dithering (azul que sobre el fondo da ~#1d3565). */
.sobre__glow--morado {
	display: block;
	left: -440px;
	top: -140px;
	width: 1060px;
	height: 1060px;
	background-image: url('../img/sobre/glow-morado-mobile.png');
}

.sobre__inner {
	position: relative;
	z-index: 1;
	max-width: 1664px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 64px 24px; /* móvil */
}

/* --- Aside (título + autor) --- */
.sobre__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sobre__eyebrow {
	margin: 0;
	font-family: var(--ced-font-mono);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	font-variant: all-small-caps;
	color: var(--ced-label);
}

.sobre__title {
	margin: 0;
	font-weight: var(--ced-fw-bold);
	font-size: 28px; /* móvil */
	line-height: 1.24;
	color: #fff;
}

.sobre__sep {
	width: 100%;
	margin: 24px 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.sobre__author {
	display: flex;
	align-items: center;
	gap: 18px;
}

.sobre__avatar {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
}

.sobre__author-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sobre__author-label {
	margin: 0;
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.85);
}

.sobre__author-name {
	margin: 0;
	font-weight: var(--ced-fw-semibold);
	font-size: 18px; /* móvil */
	color: #fff;
}

.sobre__author-role {
	margin: 0;
	font-weight: 300;
	font-size: 13px; /* móvil */
	line-height: 1.34;
	color: rgba(255, 255, 255, 0.85);
}

/* --- Cuerpo (texto + tarjeta) --- */
.sobre__body {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sobre__text p {
	margin: 0 0 24px;
	font-size: 15px; /* móvil */
	line-height: 1.7;
	text-align: justify;
	color: rgba(255, 255, 255, 0.85);
}

.sobre__text p:last-child {
	margin-bottom: 0;
}

.sobre__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 18px;
	background:
		linear-gradient(rgba(17, 17, 50, 0.42), rgba(17, 17, 50, 0.42)),
		linear-gradient(rgba(115, 61, 137, 0.26), rgba(115, 61, 137, 0.26));
}

.sobre__card-title {
	margin: 0;
	font-family: var(--ced-font-mono);
	font-weight: 500;
	font-size: 24px; /* móvil */
	line-height: 1.3;
	letter-spacing: 0.08em;
	font-variant: all-small-caps;
	color: var(--ced-label);
}

.sobre__card-text {
	margin: 0;
	font-size: 15px; /* móvil */
	line-height: 1.7;
	text-align: justify;
	color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   Desktop (>=1024px) — Figma 7:1505
   ============================================================ */
@media (min-width: 1024px) {
	.sobre__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 56px;
		padding: 130px 112px;
	}

	.sobre__aside {
		flex: 0 0 439px;
		position: sticky;
		top: 110px;
	}

	.sobre__head {
		gap: 20px;
	}

	.sobre__title {
		font-size: 44px;
	}

	.sobre__author {
		gap: 25px;
	}

	.sobre__avatar {
		flex-basis: 85px;
		width: 85px;
		height: 85px;
	}

	.sobre__author-label {
		font-size: 13px;
	}

	.sobre__author-name {
		font-size: 22px;
	}

	.sobre__author-role {
		font-size: 15px;
	}

	.sobre__body {
		flex: 1 1 0;
		min-width: 0;
		gap: 40px;
	}

	.sobre__text p {
		margin-bottom: 28px;
		font-size: 18px;
	}

	.sobre__card {
		gap: 14px;
		padding: 24px;
	}

	.sobre__card-title {
		font-size: 20px;
	}

	.sobre__card-text {
		font-size: 16px;
		line-height: 1.74;
	}

	/* Círculo magenta — desktop: detrás de la esquina inferior derecha de la
	   columna 2 / tarjeta (Figma Ellipse 3, right -170 bottom -161). */
	.sobre__glow--magenta {
		right: -420px;
		top: auto;
		bottom: -360px;
		width: 1040px;
		height: 1040px;
	}

	/* Círculo morado — desktop: detrás del avatar (Figma Ellipse 4).
	   Imagen WebP con dithering (sin banding ni anillos). */
	.sobre__glow--morado {
		display: block;
		left: -300px;
		top: 70px;
		width: 760px;
		height: 760px;
		background-image: url('../img/sobre/glow-morado.png');
	}
}