/* ═══════════════════════════════════════════════════
   VI NATURAL — MAPA
   vinatural.org · 2026
   ═══════════════════════════════════════════════════ */

.mapa-hero {
	background: var(--blanc);
	padding: calc(var(--sp-xl) + 4rem) var(--gutter) var(--sp-md);
}

.mapa-hero-inner {
	max-width: var(--max-w);
	margin: 0 auto;
}

.mapa-hero-label {
	font-family: var(--font-body);
	font-size: clamp(0.62rem, 0.75vw, 0.72rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--terra);
	margin-bottom: var(--sp-2xs);
}

.mapa-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.5vw, 3.6rem);
	font-weight: 300;
	line-height: 1.1;
	color: var(--vi-profund);
	margin-bottom: var(--sp-sm);
}

.mapa-hero h1 em { font-weight: 600; font-style: italic; }

.mapa-hero-desc {
	font-family: var(--font-display);
	font-size: clamp(0.95rem, 1.2vw, 1.05rem);
	font-weight: 300;
	font-style: italic;
	color: var(--carbó);
	opacity: 0.65;
	max-width: 60ch;
	line-height: 1.7;
}

.mapa-wrap {
	background: var(--vi-profund);
	line-height: 0;
}

.mapa-wrap iframe {
	width: 100%;
	height: clamp(420px, 68vh, 720px);
	border: none;
	display: block;
}

.mapa-note {
	background: var(--vi-profund);
	padding: var(--sp-md) var(--gutter) var(--sp-lg);
	text-align: center;
}

.mapa-note p {
	font-family: var(--font-display);
	font-size: 0.88rem;
	font-style: italic;
	color: var(--blanc);
	opacity: 0.4;
	margin: 0;
}

.mapa-note a { color: inherit; opacity: 0.8; }