/**
 * Asta Mobili — Seção institucional "Conheça a Asta" da Home
 * "Projetos pensados para cada espaço."
 *
 * Reprodução visual fiel do mockup aprovado (backups/mockup/rv07). Todos os
 * valores (cores, tipografia, espaçamentos, proporções) vêm do HTML do mockup
 * (bloco de fundo #FFFFFF logo abaixo do Hero). As unidades `cqw` do mockup
 * foram convertidas para `vw` — a seção ocupa 100% da largura da viewport —
 * seguindo a mesma convenção do Hero (asta-hero.css) e da seção Soluções
 * (asta-home-solutions.css).
 *
 * Conteúdo editável em Asta → Home (card "Conheça a Asta"); o CSS abaixo é
 * fixo e não depende de configuração.
 *
 * Layout 100% fluido (clamp + vw), como no mockup: sem breakpoints discretos
 * próprios. As duas colunas usam `flex:1 1 300px` + `flex-wrap` — exatamente
 * como no mockup — então em telas estreitas (tablet/mobile) elas empilham
 * naturalmente: símbolo + título em cima, parágrafo + CTA embaixo.
 */

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

/* Seção full-bleed: quebra o container de conteúdo (Elementor/tema) para o
   fundo claro ocupar a largura total da viewport, como no mockup. */
.asta-about-intro {
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:clamp(40px, 5.2vw, 96px) clamp(20px, 4vw, 64px);
	background:#FFFFFF;
	font-family:Inter, Helvetica, Arial, sans-serif;
}

.asta-about-intro__inner {
	width:100%;
	max-width:1180px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	gap:clamp(20px, 3vw, 60px);
	align-items:flex-start;
}

/* ---- Colunas ----
   Mesma regra do mockup: `flex:1 1 300px` — lado a lado quando cabem, senão
   empilham (tablet/mobile). */
.asta-about-intro__col {
	flex:1 1 300px;
	display:flex;
	flex-direction:column;
}
.asta-about-intro__col--title { gap:18px; }
.asta-about-intro__col--body {
	gap:20px;
	padding-top:clamp(0px, 1.5vw, 22px);
}

/* 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 da coluna (18px/20px)
   sem duplicar o valor, então o espaçamento interno não muda. */
.asta-about-intro__col-inner {
	display:flex;
	flex-direction:column;
	gap:inherit;
}

/* ---- Símbolo Asta (vermelho, pequeno, topo esquerdo) ---- */
.asta-about-intro__symbol {
	display:block;
	width:38px !important;
	height:auto !important;
	max-width:38px !important;
	margin:0;
}

/* ---- Título grande ---- */
.asta-about-intro__title {
	margin:0 !important;
	padding:0;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:600 !important;
	font-size:clamp(25px, 3.6vw, 46px) !important;
	line-height:1.06 !important;
	letter-spacing:-.03em !important;
	color:#17161A !important;
	text-wrap:pretty;
}

/* ---- Parágrafo institucional ---- */
.asta-about-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.65 !important;
	color:#5E5A54 !important;
}

/* ---- CTA textual com detalhe vermelho ---- */
.asta-about-intro__cta {
	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;
	letter-spacing:.02em;
	line-height:1.2 !important;
	color:#17161A !important;
	text-decoration:none;
	text-shadow:none;
	cursor:pointer;
	transition:color .18s ease, border-color .18s ease;
}
.asta-about-intro__cta:hover,
.asta-about-intro__cta:focus-visible {
	color:#A01C24 !important;
	border-color:#7E1319;
}
.asta-about-intro__cta-arrow { color:#A01C24; }

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

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