/* ==========================================================================
   SOBRE NOSOTROS — La unión de ambas experiencias
   (template-parts/sobre-union.php) — Extraído de sobre-nosotros.html
   (#union-experiencia). Prefijo union-* (clases únicas).

   Reutiliza .exp-accent (sobre-experiencia.css) y .titulos (sobre-distincion.css).

   Utilidades compartidas definidas AQUÍ (primera sección que las usa) y
   reutilizadas por #compromiso (Fase 6): .comp-accent y .subtitulos-white.
   Utilidades solo de esta sección: .block y .block-inline.
   ========================================================================== */

/* ── Utilidades compartidas ── */
.subtitulos-white {
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--white);
}

.comp-accent {
	width: 56px;
	height: 2px;
	background: var(--gold);
	margin-bottom: 1.8rem;
}

.block {
	display: block;
}

.block-inline {
	display: block;
}

/* ── Sección Unión ── */
#union-experiencia {
	position: relative;
	overflow: hidden;
	background: var(--navy);
	padding: 0 5%;
}

.union-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
	align-items: center;
	min-height: clamp(560px, 72vh, 780px);
}

.union-content {
	position: relative;
	z-index: 1;
	padding: clamp(3rem, 6vw, 5rem) 0;
}

.union-subtitle {
	margin-bottom: 1.9rem;
}

.union-parrafo {
	font-size: 0.92rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.9;
	margin-bottom: 1.4rem;
	max-width: 560px;
}

.union-parrafo strong {
	color: var(--gold);
	font-weight: 600;
}

.union-media {
	position: absolute;
	top: 0;
	right: 0;
	width: 58%;
	height: 100%;
	clip-path: polygon(0 0, 78% 0, 100% 100%, 22% 100%);
}

.union-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.block-inline {
		display: inline;
	}

	#union-experiencia {
		padding: clamp(3rem, 8vw, 4rem) 5%;
	}

	.union-inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.union-content {
		padding: 0;
	}

	.union-content br {
		display: none;
	}

	.union-media {
		position: relative;
		width: 100%;
		max-width: 450px;
		height: auto;
		aspect-ratio: 16 / 9;
		clip-path: none;
		border-radius: 14px;
		overflow: hidden;
		margin: 2.5rem auto 0;
	}

	.union-media img {
		position: absolute;
		inset: 0;
	}
}