/* =========================================================
   MÚSICA É O FUTURO — SOBRE O PROJETO
   CSS isolado com o prefixo .mefsobre- para não conflitar com o plugin
   da Landing, FluentCommunity, FluentCart ou o tema ativo.

   LARGURA: esta página é renderizada DENTRO do container de conteúdo do
   FluentCommunity, não como página de largura total. Por isso o layout
   nunca IMPÕE uma largura fixa: as seções de duas colunas e as grades de
   cards usam `flex-wrap` (com uma largura máxima por card, para que uma
   fileira incompleta fique centralizada em vez de esticada) — reagem à
   largura real do elemento pai, não à viewport, então continuam
   corretas com a sidebar da comunidade aberta ou fechada, ou com a
   janela redimensionada. E o container GERAL (.mefsobre-container) tem
   um teto de largura (--mefsobre-max-width): em containers mais
   estreitos que o teto, ele continua ocupando 100% do espaço disponível
   normalmente; só para de crescer ao chegar nesse teto, para o texto e
   os cards não ficarem esticados demais em monitores grandes.

   TEMA CLARO/ESCURO: a página nunca pinta o próprio fundo — fica
   transparente e herda o fundo real da comunidade ao redor, em qualquer
   tema. Só as cores que a própria página controla (texto, cards, linhas,
   botões) precisam trocar entre claro/escuro, e o fazem através das
   variáveis abaixo. Quem decide qual conjunto usar é o atributo
   [data-mefsobre-theme], calculado em tempo real por assets/js/theme.js
   a partir da cor de fundo herdada de verdade (não uma classe interna
   do FluentCommunity, que poderia mudar sem aviso). Enquanto o
   JavaScript ainda não rodou, `prefers-color-scheme` cobre o instante
   inicial.
   ========================================================= */

.mefsobre-page {
	--mefsobre-soft: #f4f7fb;
	--mefsobre-surface: #ffffff;
	--mefsobre-text: #112033;
	--mefsobre-muted: #5b6b81;
	--mefsobre-line: #dde5ef;
	--mefsobre-primary: #1d6cff;
	--mefsobre-primary-hover: #0d4fd7;
	--mefsobre-shadow: 0 20px 60px rgba(13, 34, 66, 0.1);
	--mefsobre-radius: 18px;
	--mefsobre-space: clamp(40px, 6vw, 72px);
	--mefsobre-pad-x: clamp(16px, 3vw, 28px);
	--mefsobre-max-width: 960px;

	max-width: 100%;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--mefsobre-text);
	line-height: 1.6;
	overflow-wrap: break-word;
}

@media (prefers-color-scheme: dark) {
	.mefsobre-page:not([data-mefsobre-theme="light"]) {
		--mefsobre-soft: #141f33;
		--mefsobre-surface: #16223a;
		--mefsobre-text: #eef2f8;
		--mefsobre-muted: #a9b7cc;
		--mefsobre-line: rgba(255, 255, 255, 0.14);
		--mefsobre-primary: #5b93ff;
		--mefsobre-primary-hover: #83aeff;
		--mefsobre-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	}
}

.mefsobre-page[data-mefsobre-theme="dark"] {
	--mefsobre-soft: #141f33;
	--mefsobre-surface: #16223a;
	--mefsobre-text: #eef2f8;
	--mefsobre-muted: #a9b7cc;
	--mefsobre-line: rgba(255, 255, 255, 0.14);
	--mefsobre-primary: #5b93ff;
	--mefsobre-primary-hover: #83aeff;
	--mefsobre-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.mefsobre-page * {
	box-sizing: border-box;
}

.mefsobre-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

.mefsobre-page a {
	text-decoration: none;
	color: inherit;
}

.mefsobre-page a:focus-visible,
.mefsobre-page button:focus-visible {
	outline: 3px solid var(--mefsobre-primary);
	outline-offset: 2px;
}

/* Container: preenche 100% do espaço disponível no pai (o container do
   FluentCommunity) até um teto de largura ideal — nunca fica mais
   estreito do que o espaço real disponível, mas também nunca estica
   além do teto em monitores grandes. */
.mefsobre-container {
	width: 100%;
	max-width: var(--mefsobre-max-width);
	padding: 0 var(--mefsobre-pad-x);
	margin: 0 auto;
}

.mefsobre-narrow {
	max-width: 720px;
}

.mefsobre-section {
	padding: var(--mefsobre-space) 0;
}

.mefsobre-section-soft {
	background: var(--mefsobre-soft);
}

/* Duas colunas fluidas (imagem + texto): cada lado tem uma largura
   mínima confortável (flex-basis) e cresce para ocupar o espaço
   sobrando. Quando as duas colunas não cabem lado a lado na largura
   real do container, o flex-wrap empilha para 1 coluna. */
.mefsobre-flex-2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(28px, 5vw, 56px);
}

.mefsobre-flex-2 > * {
	flex: 1 1 280px;
	min-width: 0;
}

.mefsobre-kicker {
	display: inline-block;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	font-weight: 800;
	color: var(--mefsobre-primary);
	margin-bottom: 12px;
}

.mefsobre-page h1,
.mefsobre-page h2,
.mefsobre-page h3 {
	line-height: 1.12;
	margin: 0 0 16px;
}

.mefsobre-page h1 {
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	letter-spacing: -0.03em;
}

.mefsobre-page h2 {
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	letter-spacing: -0.02em;
}

.mefsobre-page h3 {
	font-size: 1.18rem;
}

.mefsobre-page p {
	margin: 0 0 18px;
}

.mefsobre-lead {
	font-size: 1.1rem;
	color: var(--mefsobre-muted);
}

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

.mefsobre-role {
	color: var(--mefsobre-muted);
	font-weight: 700;
	margin: -8px 0 16px;
}

/* Introdução: curta e simples, de propósito — sem imagem, sem CTA, sem
   painel de fundo próprio, para não repetir o Hero da Landing Page. */
.mefsobre-intro {
	padding: calc(var(--mefsobre-space) * 0.7) 0 var(--mefsobre-space);
	text-align: center;
}

.mefsobre-intro .mefsobre-rich {
	margin: 0 auto;
}

.mefsobre-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 8px;
}

.mefsobre-actions-center {
	justify-content: center;
}

.mefsobre-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 22px;
	border-radius: 14px;
	font-weight: 800;
	border: 1px solid transparent;
	transition: transform 0.2s ease, background 0.2s ease;
	cursor: pointer;
}

.mefsobre-btn:hover {
	transform: translateY(-2px);
}

.mefsobre-btn-primary {
	background: var(--mefsobre-primary);
	color: #fff;
}

.mefsobre-btn-primary:hover {
	background: var(--mefsobre-primary-hover);
	color: #fff;
}

.mefsobre-btn-ghost {
	color: var(--mefsobre-text);
	border-color: var(--mefsobre-line);
	background: var(--mefsobre-surface);
}

.mefsobre-btn-ghost:hover {
	border-color: var(--mefsobre-primary);
	color: var(--mefsobre-primary);
}

.mefsobre-portrait {
	max-width: 340px;
}

.mefsobre-portrait img {
	border-radius: var(--mefsobre-radius);
	box-shadow: var(--mefsobre-shadow);
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.mefsobre-quote {
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	font-weight: 800;
	line-height: 1.25;
	color: var(--mefsobre-primary);
	margin: 24px 0 0;
	border: 0;
	padding: 0;
}

.mefsobre-quote-left {
	font-size: 1.4rem;
	margin: 20px 0 0;
	text-align: left;
}

.mefsobre-section-head {
	max-width: 680px;
	margin: 0 auto 36px;
	text-align: center;
}

.mefsobre-section-head p {
	color: var(--mefsobre-muted);
	font-size: 1.05rem;
}

/* Instrumentos que Transformam o Futuro: imagem grande em largura total
   acima do texto, para dar o maior peso visual da página a esta seção. */
.mefsobre-instruments-media {
	margin-bottom: 40px;
}

.mefsobre-instruments-media img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--mefsobre-radius);
	box-shadow: var(--mefsobre-shadow);
}

/* Como funciona: 3 passos numerados, com visual de card (como os demais
   cards do site). Usa a mesma grade fluida em flexbox dos cards abaixo,
   para que uma fileira incompleta fique centralizada em vez de esticada. */
.mefsobre-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
}

.mefsobre-steps > * {
	flex: 1 1 240px;
	max-width: 320px;
}

.mefsobre-step {
	text-align: center;
	border: 1px solid var(--mefsobre-line);
	border-radius: var(--mefsobre-radius);
	background: var(--mefsobre-surface);
	box-shadow: var(--mefsobre-shadow);
	padding: 30px 24px;
}

.mefsobre-step-number {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--mefsobre-primary);
	margin-bottom: 10px;
}

.mefsobre-step p {
	color: var(--mefsobre-muted);
	margin-bottom: 0;
}

/* Grades de cards: flexbox com largura máxima por card (em vez de grid
   auto-fit) para que os cards nunca estiquem para preencher a linha —
   com isso, uma fileira incompleta (ex.: 3 cards em cima e 2 embaixo)
   fica centralizada e do mesmo tamanho da fileira cheia, em vez de
   esticada e desalinhada. Ainda reage à largura real do container
   herdado do FluentCommunity, não à viewport. */
.mefsobre-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
}

.mefsobre-cards > * {
	flex: 1 1 240px;
	max-width: 320px;
}

.mefsobre-cards-people > * {
	flex-basis: 200px;
	max-width: 280px;
}

.mefsobre-cards-gallery > * {
	flex-basis: 240px;
	max-width: 340px;
}

.mefsobre-card {
	border: 1px solid var(--mefsobre-line);
	border-radius: var(--mefsobre-radius);
	background: var(--mefsobre-surface);
	box-shadow: var(--mefsobre-shadow);
	padding: 24px;
	width: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mefsobre-card:hover {
	transform: translateY(-4px);
	border-color: rgba(29, 108, 255, 0.28);
}

.mefsobre-card p {
	color: var(--mefsobre-muted);
	margin-bottom: 0;
}

.mefsobre-gallery-item {
	overflow: hidden;
	border: 1px solid var(--mefsobre-line);
	border-radius: var(--mefsobre-radius);
	background: var(--mefsobre-surface);
	box-shadow: var(--mefsobre-shadow);
}

.mefsobre-gallery-item img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mefsobre-gallery-item h3,
.mefsobre-gallery-item p {
	padding: 0 20px;
}

.mefsobre-gallery-item h3 {
	margin-top: 18px;
}

.mefsobre-gallery-item p {
	color: var(--mefsobre-muted);
	margin-bottom: 20px;
}

.mefsobre-person-card {
	border: 1px solid var(--mefsobre-line);
	border-radius: var(--mefsobre-radius);
	background: var(--mefsobre-surface);
	box-shadow: var(--mefsobre-shadow);
	padding: 24px;
	width: 100%;
}

.mefsobre-person-card p {
	color: var(--mefsobre-muted);
	margin-bottom: 8px;
}

.mefsobre-person-card img {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 14px;
}

.mefsobre-person-bio {
	font-size: 0.92rem;
}

.mefsobre-text-link {
	color: var(--mefsobre-text);
	border-bottom: 2px solid var(--mefsobre-primary);
}

.mefsobre-text-link:hover {
	color: var(--mefsobre-primary);
}

.mefsobre-mission {
	text-align: center;
}

.mefsobre-mission-lines {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 28px 0;
}

.mefsobre-mission-lines strong {
	flex: 1 1 180px;
	max-width: 260px;
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--mefsobre-line);
	border-radius: 14px;
	font-size: 1.02rem;
}

.mefsobre-mission-end {
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	font-weight: 700;
	color: var(--mefsobre-text);
	margin-top: 12px;
}

.mefsobre-final-cta {
	background: var(--mefsobre-soft);
	border-radius: var(--mefsobre-radius);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.mefsobre-page * {
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 480px) {
	.mefsobre-btn {
		width: 100%;
	}
}