/* ==========================================================================
   SOBRE NOSOTROS — Visión (template-parts/sobre-vision.php)
   Página Sobre Nosotros. Extraído de sobre-nosotros.html (#vision).
   Prefijo vision-* (clases únicas). La regla .exp-accent NO se redefine aquí:
   se reutiliza de sobre-experiencia.css (misma página).
   ========================================================================== */

#vision {
	position: relative;
	overflow: hidden;
	padding: clamp(4rem, 7vw, 7rem) 5%;
	background:
		linear-gradient(45deg, rgba(10, 21, 32, 0.55) 0%, rgba(10, 21, 32, 0.9) 45%, var(--navy2) 72%),
		url("../img/sobre-nosotros-s2.png") left bottom / cover no-repeat;
}

.vision-watermark {
	position: absolute;
	top: 50%;
	right: -4%;
	transform: translateY(-50%);
	width: clamp(280px, 34vw, 520px);
	height: auto;
	opacity: 0.05;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.vision-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.vision-left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.vision-title {
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--white);
	margin-bottom: 1.4rem;
	align-self: flex-start;
}

.vision-title em {
	font-style: italic;
	color: var(--gold);
}

.vision-mini-line {
	width: 90px;
	height: 1px;
	background: rgba(198, 170, 71, 0.6);
	margin-bottom: 2.4rem;
	align-self: start;
}

.vision-quote {
	position: relative;
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	font-size: clamp(1.2rem, 2.5vw, 1.8rem);
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
	max-width: 520px;
	margin: 0 0 2.8rem;
	padding: 0.5rem 2.6rem;
	align-self: flex-start;
}

.vision-quote::before {
	content: "\201C";
	position: absolute;
	left: -0.4rem;
	top: -1.6rem;
	font-family: Georgia, serif;
	font-size: 5rem;
	line-height: 1;
	color: rgba(198, 170, 71, 0.55);
}

.vision-quote::after {
	content: "\201D";
	position: absolute;
	right: 0;
	bottom: -2.6rem;
	font-family: Georgia, serif;
	font-size: 5rem;
	line-height: 1;
	color: rgba(198, 170, 71, 0.55);
}

.vision-logo {
	width: clamp(150px, 14vw, 210px);
	height: auto;
	margin-top: 1rem;
}

.vision-right {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 3.5vw, 3rem);
	padding-left: clamp(2rem, 4vw, 4rem);
	border-left: 1px solid rgba(198, 170, 71, 0.28);
}

.vision-item {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

.vision-item-icon {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid rgba(198, 170, 71, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gold);
}

.vision-item-icon svg {
	width: 30px;
	height: 30px;
}

.vision-item-text {
	font-size: 0.92rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.85;
}

.vision-item-text strong {
	color: var(--gold);
	font-weight: 600;
}

@media (max-width: 900px) {
	.vision-inner {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.vision-right {
		border-left: none;
		padding-left: 0;
	}

	.vision-watermark {
		display: none;
	}

	.vision-title {
		align-self: center;
	}

	.vision-quote {
		align-self: center;
		text-align: center;
	}

	.vision-logo {
		display: none;
	}
}