/**
 * Asta Mobili — Seção da Home "Soluções para diferentes realidades."
 * (texto à esquerda + imagem recortada dentro do símbolo Asta à direita).
 *
 * Reprodução visual fiel do mockup aprovado (backups/mockup/rv07/"Asta
 * Mobili.dc.html", bloco de fundo #F0EDE7 com bordas #E4E0D9 logo abaixo da
 * seção "Produtos"). Todos os valores (cores, tipografia, espaçamentos,
 * proporções) vêm do HTML do mockup:
 *
 *   wrapper  padding:clamp(34px,4.2cqw,80px) clamp(20px,4cqw,64px);
 *            background:#F0EDE7; border-top/bottom:1px solid #E4E0D9
 *   inner    max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap;
 *            gap:clamp(18px,2.6cqw,48px); align-items:center;
 *            justify-content:space-between
 *   texto    flex:1 1 320px; gap:14px
 *   título   Manrope 600; clamp(22px,3cqw,38px); line-height:1.1; ls:-0.03em
 *   parágrafo clamp(13.5px,1.3cqw,16px); line-height:1.6; color:#5E5A54;
 *            max-width:460px
 *   CTA      inline-flex; gap:9px; font-size:13px; color:#17161A;
 *            border-bottom:1px solid #A01C24; padding-bottom:4px; seta #A01C24
 *   figura   flex:0 1 380px; min-width:230px; aspect-ratio:3138/2108
 *   máscara  position:absolute; inset:0;
 *            mask:url(simbolo-asta-preenchido.png) center / contain no-repeat
 *   símbolo decorativo  simbolo-asta-branco.png; opacity:0.09; à direita
 *
 * As unidades `cqw` do mockup (relativas ao frame de apresentação) foram
 * convertidas para `vw` — a seção ocupa 100% da largura da viewport — seguindo
 * a mesma convenção do Hero (asta-hero.css) e das seções "Conheça a Asta"
 * (asta-home-about-intro.css), "Soluções" (asta-home-solutions.css) e "Design e
 * funcionalidade" (asta-home-feature-split.css).
 *
 * ETAPA ATUAL: conteúdo hardcoded, sem painel administrativo. O CSS abaixo é
 * fixo e não depende de configuração. Sem JS no frontend.
 *
 * Layout fluido (clamp + vw) como no mockup. As colunas usam `flex` +
 * `flex-wrap` exatamente como no mockup: lado a lado quando cabem, senão
 * empilham (texto em cima, figura embaixo). O único breakpoint discreto
 * (max-width:767px) apenas ajusta respiros e o símbolo decorativo para telas
 * estreitas.
 */

.asta-sectors-intro,
.asta-sectors-intro *,
.asta-sectors-intro *::before,
.asta-sectors-intro *::after { box-sizing:border-box; }

/* Seção full-bleed: quebra o container de conteúdo (Elementor/tema) para o
   fundo claro e as bordas ocuparem a largura total da viewport, como no mockup. */
.asta-sectors-intro {
	position:relative;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:clamp(34px, 4.2vw, 80px) clamp(20px, 4vw, 64px);
	background:#F0EDE7;
	border-top:1px solid #E4E0D9;
	border-bottom:1px solid #E4E0D9;
	overflow:hidden;
	font-family:Inter, Helvetica, Arial, sans-serif;
}

/* ---- Símbolo Asta branco decorativo ao fundo ----
   Mockup: <img simbolo-asta-branco.png> `width:509px; height:379px;
   opacity:0.09; left:719px; top:-51px` — canto superior direito da caixa.
   Preservamos a proporção natural do arquivo (largura fluida, altura
   automática) e a opacidade do mockup. */
.asta-sectors-intro__bg-symbol {
	position:absolute;
	top:clamp(-51px, -3vw, -20px);
	right:clamp(-40px, 2vw, 40px);
	left:auto;
	width:clamp(320px, 40vw, 509px) !important;
	height:auto !important;
	max-width:none !important;
	margin:0;
	opacity:.09;
	pointer-events:none;
	user-select:none;
}

/* ---- Inner ----
   Mockup: max-width:1180px; flex; flex-wrap:wrap; gap:clamp(18px,2.6cqw,48px);
   align-items:center; justify-content:space-between. */
.asta-sectors-intro__inner {
	position:relative;
	z-index:1;
	width:100%;
	max-width:1180px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	gap:clamp(18px, 2.6vw, 48px);
	align-items:center;
	justify-content:space-between;
}

/* ---- Coluna de conteúdo ----
   Mockup: flex:1 1 320px; display:flex; flex-direction:column; gap:14px. */
.asta-sectors-intro__content {
	flex:1 1 320px;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:14px;
}

/* Wrapper interno só para hospedar o hook de scroll motion
   (data-asta-scroll-motion — ver assets/asta-motion.css e
   docs/motion-system.md). `gap:inherit` reproduz o gap do pai (14px) sem
   duplicar o valor. */
.asta-sectors-intro__content-inner {
	display:flex;
	flex-direction:column;
	gap:inherit;
}

/* ---- Título ----
   Mockup: Manrope 600; clamp(22px,3cqw,38px); line-height:1.1; ls:-0.03em;
   margin:0. Cor herdada do corpo do mockup (#17161A). */
.asta-sectors-intro__title {
	margin:0 !important;
	padding:0;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:600 !important;
	font-size:clamp(22px, 3vw, 38px) !important;
	line-height:1.1 !important;
	letter-spacing:-.03em !important;
	color:#17161A !important;
	text-wrap:pretty;
}

/* ---- Parágrafo ----
   Mockup: clamp(13.5px,1.3cqw,16px); line-height:1.6; color:#5E5A54;
   margin:0; max-width:460px. */
.asta-sectors-intro__text {
	margin:0 !important;
	padding:0;
	max-width:460px;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-weight:400 !important;
	font-size:clamp(13.5px, 1.3vw, 16px) !important;
	line-height:1.6 !important;
	color:#5E5A54 !important;
}

/* ---- CTA textual "Explorar setores" ----
   Mockup: align-self:flex-start; inline-flex; align-items:center; gap:9px;
   font-size:13px; color:#17161A; border-bottom:1px solid #A01C24;
   padding-bottom:4px. Sem aparência de botão.
   As regras neutralizam o que o Hello Elementor / Elementor aplicam a links
   (magenta, sublinhado, box-shadow, tipografia externa, background). */
.asta-sectors-intro__cta {
	align-self:flex-start;
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin:0;
	padding:0 0 4px;
	border:0 !important;
	border-bottom:1px solid #A01C24 !important;
	border-radius:0 !important;
	background:transparent !important;
	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 !important;
	text-shadow:none !important;
	box-shadow:none !important;
	cursor:pointer;
	transition:border-color .18s ease, color .18s ease;
}
.asta-sectors-intro__cta:hover,
.asta-sectors-intro__cta:focus-visible {
	background:transparent !important;
	color:#A01C24 !important;
	border-bottom-color:#7E1319 !important;
}
.asta-sectors-intro__cta-arrow {
	color:#A01C24 !important;
	font-style:normal;
	line-height:1;
}

.asta-sectors-intro :focus-visible {
	outline:2px solid #A01C24;
	outline-offset:3px;
}

/* ---- Figura: imagem recortada dentro do símbolo Asta ----
   Mockup: coluna `flex:0 1 380px; min-width:230px; position:relative;
   aspect-ratio:3138 / 2108`, com um filho `position:absolute; inset:0` que
   aplica `mask:url(simbolo-asta-preenchido.png) center / contain no-repeat` e
   uma imagem em object-fit:cover dentro dele. Reproduzido 1:1. */
.asta-sectors-intro__figure {
	flex:0 1 380px;
	min-width:230px;
	position:relative;
	aspect-ratio:3138 / 2108;
}
.asta-sectors-intro__mask {
	position:absolute;
	inset:0;
	-webkit-mask:var(--asta-sectors-mask) center / contain no-repeat;
	        mask:var(--asta-sectors-mask) center / contain no-repeat;
}
.asta-sectors-intro__image {
	display:block;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	margin:0;
	border:0;
	object-fit:cover !important;
	object-position:center !important;
}

/* ---- Telas estreitas (tablet/mobile) ----
   As colunas já empilham sozinhas via flex-wrap (texto em cima, figura
   embaixo). Aqui só ajustamos respiros e o símbolo decorativo — mantendo a
   seção legível, equilibrada e sem overflow horizontal. */
@media (max-width:767px) {
	.asta-sectors-intro {
		padding:clamp(32px, 9vw, 56px) clamp(20px, 6vw, 32px);
	}
	.asta-sectors-intro__inner {
		gap:clamp(22px, 7vw, 36px);
	}
	.asta-sectors-intro__figure {
		flex:1 1 100%;
		width:100%;
		max-width:420px;
		margin-inline:auto;
	}
	.asta-sectors-intro__bg-symbol {
		width:clamp(240px, 70vw, 340px) !important;
		top:-24px;
		right:-30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asta-sectors-intro__cta { transition:none; }
}