/**
 * Brand story ([bcc_story]): the reference mockup's two-column
 * "Un barrio de Lima" section -- a dark Pacífico panel with an art
 * placeholder on one side, the story + three brand beats on the other.
 */
.bcc-story {
	background: var(--bcc-pacifico);
	color: var(--bcc-quinoa);
	padding-block: 100px;
}

@media (width < 860px) {
	.bcc-story {
		padding-block: 64px;
	}
}

.bcc-story__wrap {
	width: min(1280px, 100% - 40px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 56px;
	align-items: center;
}

@media (width < 900px) {
	.bcc-story__wrap {
		grid-template-columns: 1fr;
	}
}

.bcc-story__art {
	aspect-ratio: 4 / 5;
	position: relative;
	background: linear-gradient(180deg, #1C4444 0%, #143232 55%, #0E2626 100%);
	overflow: hidden;
}

.bcc-story__eyebrow {
	font-family: var(--bcc-font-mono);
	font-size: 14px;
	letter-spacing: .03em;
	color: var(--bcc-lucuma);
	margin: 0 0 16px;
}

/**
 * color: !important -- live-measured on staging showing this headline
 * in Elementor's global heading purple instead of the gold set below,
 * unreadable against the dark Pacífico panel behind it. Same collision
 * PR59/61 already fixed for font-family and other headings' color;
 * this file's own h2 was missed. Audited every other h1-6/button/select
 * color declaration in the plugin for the same gap in this same pass.
 */
.bcc-story h2 {
	font-family: var(--bcc-font-display) !important;
	font-weight: 900;
	text-transform: uppercase;
	line-height: .88;
	font-size: clamp(3.5rem, 7vw, 7rem);
	color: var(--bcc-gold-400) !important;
	margin: 0;
}

.bcc-story__lede {
	font-size: 20px;
	max-width: 620px;
	margin: 16px 0 0;
}

.bcc-story__beats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 30px;
}

@media (width < 620px) {
	.bcc-story__beats {
		grid-template-columns: 1fr;
	}
}

.bcc-story__beats div {
	border-top: var(--bcc-border-width) solid rgb(246 241 228 / .4);
	padding-top: 12px;
}

.bcc-story__beats b {
	display: block;
	font-family: var(--bcc-font-display);
	font-weight: 900;
	font-size: 26px;
	text-transform: uppercase;
	color: var(--bcc-gold-400);
	margin-bottom: 6px;
}

.bcc-story__beats span {
	font-size: 15px;
	line-height: 1.4;
}