/**
 * Asta Mobili — Página institucional "A Asta".
 *
 * Reprodução visual fiel do mockup aprovado (backups/mockup/rv07/"Asta
 * Mobili.dc.html", bloco `<sc-if value="{{ isAbout }}">`). Página renderizada
 * de uma vez só pelo shortcode [asta_about_page] (ver
 * includes/class-asta-about-page.php) — ETAPA 1: conteúdo fixo no código,
 * sem admin/option/meta. Todos os valores (cores, tipografia, espaçamentos,
 * proporções) vêm do HTML do mockup; as unidades `cqw` foram convertidas para
 * `vw` seguindo a mesma convenção já usada no Hero e nas seções da Home
 * (asta-hero.css, asta-home-about-intro.css, asta-home-bids.css,
 * asta-home-why-asta.css, asta-home-cta-final.css).
 *
 * Seções (nesta ordem):
 *   1. Hero        — imagem full-bleed + gradiente + eyebrow/título
 *   2. Intro        — símbolo+título à esquerda, 2 parágrafos à direita
 *   3. Duo          — duas imagens lado a lado, sem gap, edge-to-edge
 *   4. Diferenciais — painel escuro + grade de 3 itens (ícone/título/texto)
 *   5. Setor        — painel bege (texto+link) + imagem
 *   6. CTA final    — painel vermelho full-bleed + botão + símbolo decorativo
 *
 * Cada seção é full-bleed (100vw) e realinha o conteúdo ao container global
 * de 1180px internamente — mesmo princípio das demais seções do plugin.
 */

.asta-about-page,
.asta-about-page *,
.asta-about-page *::before,
.asta-about-page *::after { box-sizing:border-box; }

.asta-about-page {
	font-family:Inter, Helvetica, Arial, sans-serif;
	color:#17161A;
	overflow-x:hidden;
}

.asta-about-page a { text-decoration:none; }

.asta-about-page :focus-visible {
	outline:2px solid #17161A;
	outline-offset:3px;
}

/* ======================================================================
 * 1. HERO
 * ====================================================================== */

.asta-about-page__hero {
	position:relative;
	display:flex;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	min-height:clamp(340px, 32vw, 470px);
	overflow:hidden;
	background:#0e0d0c;
}

.asta-about-page__hero-media { position:absolute; inset:0; z-index:0; overflow:hidden; }
.asta-about-page__hero-image {
	position:absolute;
	inset:0;
	display:block;
	width:100% !important;
	height:100% !important;
	min-height:100%;
	margin:0;
	max-width:none !important;
	object-fit:cover !important;
	object-position:center 60% !important;
}

.asta-about-page__hero-overlay {
	position:absolute;
	inset:0;
	z-index:1;
	background:linear-gradient(90deg, rgba(14, 13, 12, .88), rgba(14, 13, 12, .3));
	pointer-events:none;
}

.asta-about-page__hero-content {
	position:relative;
	z-index:2;
	flex:1 1 auto;
	display:flex;
	align-items:flex-end;
	padding:clamp(24px, 3.4vw, 64px) clamp(20px, 4vw, 64px);
}
.asta-about-page__hero-inner {
	width:100%;
	max-width:1180px;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	gap:14px;
}
.asta-about-page__hero-eyebrow {
	margin:0 !important;
	padding:0;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:10px !important;
	font-weight:400 !important;
	letter-spacing:.18em !important;
	line-height:1.2 !important;
	text-transform:uppercase;
	color:#D9A9AC !important;
}
.asta-about-page__hero-title {
	margin:0 !important;
	padding:0;
	max-width:720px;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:600 !important;
	font-size:clamp(32px, 4.8vw, 62px) !important;
	line-height:1.0 !important;
	letter-spacing:-.035em !important;
	color:#fff !important;
	text-wrap:pretty;
}

/* ======================================================================
 * 2. INTRO INSTITUCIONAL
 * ====================================================================== */

.asta-about-page__intro {
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:clamp(36px, 4.4vw, 88px) clamp(20px, 4vw, 64px);
	background:#FFFFFF;
}
.asta-about-page__intro-inner {
	max-width:1180px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	gap:clamp(20px, 3vw, 60px);
}
.asta-about-page__intro-col { flex:1 1 280px; min-width:0; display:flex; flex-direction:column; }
.asta-about-page__intro-col--title { gap:14px; }
.asta-about-page__intro-col--body { flex:1 1 340px; gap:16px; }

.asta-about-page__intro-symbol {
	display:block !important;
	width:38px !important;
	height:auto !important;
	max-width:38px !important;
	margin:0;
}
.asta-about-page__intro-title {
	margin:0 !important;
	padding:0;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:600 !important;
	font-size:clamp(24px, 3.3vw, 42px) !important;
	line-height:1.06 !important;
	letter-spacing:-.03em !important;
	color:#17161A !important;
	text-wrap:pretty;
}
.asta-about-page__intro-text {
	margin:0 !important;
	padding:0;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-weight:400 !important;
	font-size:clamp(13.5px, 1.35vw, 17px) !important;
	line-height:1.7 !important;
	color:#5E5A54 !important;
}

/* ======================================================================
 * 3. DUO DE IMAGENS (edge-to-edge, sem container)
 * ====================================================================== */

.asta-about-page__duo {
	display:flex;
	flex-wrap:wrap;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	background:#EAE6DF;
	overflow:hidden;
}
.asta-about-page__duo-item {
	position:relative;
	flex:1 1 46%;
	min-width:0;
	min-height:clamp(230px, 25vw, 440px);
}
.asta-about-page__duo-image {
	position:absolute;
	inset:0;
	display:block;
	width:100% !important;
	height:100% !important;
	min-height:100%;
	margin:0;
	max-width:none !important;
	object-fit:cover !important;
	object-position:center !important;
}

/* ======================================================================
 * 4. DIFERENCIAIS (painel escuro)
 * ====================================================================== */

.asta-about-page__diff {
	position:relative;
	overflow:hidden;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:clamp(36px, 4.4vw, 88px) clamp(20px, 4vw, 64px);
	background:#141311;
}
.asta-about-page__diff-inner {
	max-width:1180px;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	gap:clamp(22px, 2.6vw, 40px);
}
.asta-about-page__diff-eyebrow {
	margin:0 !important;
	padding:0;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:10px !important;
	font-weight:400 !important;
	letter-spacing:.18em !important;
	line-height:1.2 !important;
	text-transform:uppercase;
	color:#C98A8E !important;
}
.asta-about-page__diff-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap:clamp(16px, 2vw, 32px);
}
.asta-about-page__diff-item {
	display:flex;
	flex-direction:column;
	gap:12px;
	min-width:0;
	padding-top:20px;
	border-top:1px solid #33302B;
}
.asta-about-page__diff-icon {
	display:flex;
	color:#E4949A;
}
.asta-about-page__diff-icon svg,
.asta-about-page__diff-icon img {
	display:block;
	width:30px !important;
	height:30px !important;
	max-width:none !important;
	object-fit:contain;
}
.asta-about-page__diff-title {
	margin:0 !important;
	padding:0;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:500 !important;
	font-size:clamp(16px, 1.7vw, 21px) !important;
	line-height:1.15 !important;
	color:#fff !important;
}
.asta-about-page__diff-text {
	margin:0 !important;
	padding:0;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-weight:400 !important;
	font-size:clamp(12.5px, 1.25vw, 15px) !important;
	line-height:1.6 !important;
	color:rgba(255, 255, 255, .66) !important;
}

/* ======================================================================
 * 5. SETOR PÚBLICO (painel bege + imagem)
 * ====================================================================== */

.asta-about-page__sector {
	display:flex;
	flex-wrap:wrap;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	overflow:hidden;
	background:#F0EDE7;
}
.asta-about-page__sector-panel {
	flex:1 1 48%;
	min-width:0;
	display:flex;
	align-items:center;
	padding:clamp(30px, 4vw, 76px) clamp(22px, 4vw, 64px);
	background:#F0EDE7;
}
.asta-about-page__sector-content {
	display:flex;
	flex-direction:column;
	gap:16px;
	max-width:480px;
}
.asta-about-page__sector-title {
	margin:0 !important;
	padding:0;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:600 !important;
	font-size:clamp(23px, 3.1vw, 40px) !important;
	line-height:1.06 !important;
	letter-spacing:-.03em !important;
	color:#17161A !important;
	text-wrap:pretty;
}
.asta-about-page__sector-text {
	margin:0 !important;
	padding:0;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-weight:400 !important;
	font-size:clamp(13.5px, 1.3vw, 16px) !important;
	line-height:1.65 !important;
	color:#5E5A54 !important;
}
.asta-about-page__sector-link {
	align-self:flex-start;
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin:0;
	padding:0 0 4px;
	border-bottom:1px solid #A01C24;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:13px !important;
	font-weight:400 !important;
	line-height:1.2 !important;
	color:#17161A !important;
	text-decoration:none;
	cursor:pointer;
	transition:color .18s ease, border-color .18s ease;
}
.asta-about-page__sector-link:hover,
.asta-about-page__sector-link:focus-visible {
	color:#A01C24 !important;
	border-color:#7E1319;
}
.asta-about-page__sector-link-arrow { color:#A01C24; }

.asta-about-page__sector-media {
	position:relative;
	flex:1 1 40%;
	min-width:0;
	min-height:clamp(220px, 24vw, 420px);
}
.asta-about-page__sector-image {
	position:absolute;
	inset:0;
	display:block;
	width:100% !important;
	height:100% !important;
	min-height:100%;
	margin:0;
	max-width:none !important;
	object-fit:cover !important;
	object-position:center !important;
}

@media (max-width:767px) {
	.asta-about-page__sector-panel { flex:1 1 100%; width:100%; }
	.asta-about-page__sector-media { flex:1 1 100%; width:100%; min-height:clamp(220px, 60vw, 340px); }
}

/* ======================================================================
 * 6. CTA FINAL (painel vermelho)
 * ====================================================================== */

.asta-about-page__cta {
	position:relative;
	overflow:hidden;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:clamp(40px, 5vw, 100px) clamp(20px, 4vw, 64px);
	background:#A01C24;
	color:#FFFFFF;
}
.asta-about-page__cta-symbol {
	position:absolute;
	right:-3%;
	bottom:-20%;
	width:min(40%, 440px);
	height:auto !important;
	max-width:none !important;
	margin:0;
	border:0;
	opacity:.09;
	pointer-events:none;
	user-select:none;
}
.asta-about-page__cta-inner {
	position:relative;
	z-index:1;
	max-width:1180px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	gap:24px;
	align-items:flex-end;
	justify-content:space-between;
}
.asta-about-page__cta-title {
	flex:1 1 320px;
	min-width:0;
	margin:0 !important;
	padding:0;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:600 !important;
	font-size:clamp(26px, 3.8vw, 50px) !important;
	line-height:1.03 !important;
	letter-spacing:-.035em !important;
	color:#fff !important;
	text-wrap:pretty;
}
.asta-about-page__cta-button {
	flex:0 0 auto;
	display:inline-flex !important;
	align-items:center;
	gap:10px;
	background:#FFFFFF !important;
	color:#A01C24 !important;
	border:0 !important;
	border-radius:8px !important;
	box-shadow:none !important;
	padding:16px 28px !important;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:14px !important;
	font-weight:500 !important;
	line-height:1 !important;
	white-space:nowrap;
	text-decoration:none !important;
	cursor:pointer;
	transition:background .18s ease, color .18s ease;
}
.asta-about-page__cta-button:hover,
.asta-about-page__cta-button:focus-visible {
	background:#F2E9E9 !important;
	color:#A01C24 !important;
}
.asta-about-page__cta-arrow { display:inline-block; line-height:1; color:currentColor; }

@media (max-width:640px) {
	.asta-about-page__cta-inner { align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.asta-about-page__sector-link,
	.asta-about-page__cta-button { transition:none; }
}