/**
 * Asta Mobili — Seção final de CTA da Home —
 * "Vamos transformar seu ambiente?"
 *
 * Reprodução visual fiel do mockup aprovado (backups/mockup/rv07/"Asta
 * Mobili.dc.html"): o último bloco da Home, fundo vermelho Asta full-bleed,
 * título grande branco + descrição branca à esquerda, botão branco com texto
 * vermelho e seta à direita, e o símbolo Asta branco de baixo contraste como
 * elemento decorativo no lado direito. Todos os valores vêm do HTML do mockup:
 *
 *   wrapper    padding:clamp(44px,5.4cqw,110px) clamp(20px,4cqw,64px);
 *              background:#A01C24; position:relative; overflow:hidden
 *   decorativo <img simbolo-asta-branco.png> width:min(42%,460px);
 *              opacity:0.09; pointer-events:none  (lado direito, ao fundo)
 *   inner      max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap;
 *              gap:24px; align-items:flex-end; justify-content:space-between
 *   texto      flex:1 1 340px; display:flex; flex-direction:column; gap:16px
 *   título     Manrope 600; clamp(28px,4.1cqw,54px); line-height:1.02;
 *              letter-spacing:-0.035em; color:#fff
 *   descrição  Inter; clamp(13.5px,1.35cqw,17px); line-height:1.6;
 *              color:rgba(255,255,255,0.85); max-width:420px
 *   botão      inline-flex; gap:10px; background:#fff; color:#A01C24; border:0;
 *              border-radius:8px; padding:16px 28px; Inter 14px;
 *              letter-spacing:0.03em; hover → background:#F2E9E9
 *
 * 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", "Soluções", "Design e funcionalidade", "Soluções para diferentes
 * realidades", "Licitações" e "Por que a Asta".
 *
 * RESPONSIVIDADE (comportamento do RV07): o inner é `display:flex;
 * flex-wrap:wrap` com o bloco de texto em `flex:1 1 340px`. No desktop o
 * texto fica à esquerda e o botão à direita, alinhados pela base
 * (`align-items:flex-end`). Quando o espaço aperta (tablet/mobile) o botão
 * quebra para a linha de baixo e a seção empilha naturalmente, mantendo o
 * respiro (padding fluido) e sem overflow horizontal. O símbolo decorativo é
 * recortado por `overflow:hidden` e nunca gera scroll lateral.
 *
 * CONTEÚDO editável em Asta → Home (card "CTA final", ÚLTIMO da lista — abaixo
 * de "Por que a Asta"): título (texto + ativo), descrição (texto + ativo) e
 * botão (texto, URL, ativo, nova aba), na chave `cta_final` de
 * asta_home_settings. O CSS abaixo é FIXO e não depende de configuração — só a
 * estrutura visual. O símbolo decorativo também é fixo. Sem JS no frontend.
 */

.asta-home-cta-final,
.asta-home-cta-final *,
.asta-home-cta-final *::before,
.asta-home-cta-final *::after { box-sizing:border-box; }

/* Seção full-bleed: quebra o container de conteúdo (Elementor/tema) para o
   fundo vermelho ocupar a largura total da viewport, como no mockup. O
   conteúdo volta a se alinhar ao container global de 1180px pelo inner. */
.asta-home-cta-final {
	position:relative;
	overflow:hidden;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:clamp(44px, 5.4vw, 110px) clamp(20px, 4vw, 64px);
	background:#A01C24;
	font-family:Inter, Helvetica, Arial, sans-serif;
	color:#FFFFFF;
}

/* Elemento decorativo — símbolo Asta branco de baixo contraste no lado
   direito, ao fundo. Mockup: width:min(42%,460px); opacity:0.09;
   pointer-events:none. Recortado pelo `overflow:hidden` da seção. */
.asta-home-cta-final__symbol {
	position:absolute;
	top:50%;
	right:clamp(-56px, -2vw, 0px);
	transform:translateY(-50%);
	width:min(42%, 460px);
	height:auto !important;
	max-width:none !important;
	margin:0;
	border:0;
	opacity:.09;
	pointer-events:none;
	user-select:none;
}

/* Inner — Mockup: max-width:1180px; margin:0 auto; display:flex;
   flex-wrap:wrap; gap:24px; align-items:flex-end;
   justify-content:space-between. `position:relative` mantém o conteúdo acima
   do símbolo decorativo. */
.asta-home-cta-final__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;
}

/* Bloco de texto — Mockup: flex:1 1 340px; display:flex;
   flex-direction:column; gap:16px. */
.asta-home-cta-final__text {
	flex:1 1 340px;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:16px;
}

/* Título — Mockup: Manrope 600; font-size:clamp(28px,4.1cqw,54px);
   line-height:1.02; letter-spacing:-0.035em; color:#fff. */
.asta-home-cta-final__title {
	margin:0 !important;
	padding:0;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-size:clamp(28px, 4.1vw, 54px) !important;
	font-weight:600 !important;
	line-height:1.02 !important;
	letter-spacing:-.035em !important;
	color:#FFFFFF !important;
	text-wrap:pretty;
}

/* Descrição — Mockup: font-size:clamp(13.5px,1.35cqw,17px); line-height:1.6;
   color:rgba(255,255,255,0.85); max-width:420px. Inter (fonte-base). */
.asta-home-cta-final__desc {
	margin:0 !important;
	padding:0;
	max-width:420px;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:clamp(13.5px, 1.35vw, 17px) !important;
	font-weight:400 !important;
	line-height:1.6 !important;
	color:rgba(255, 255, 255, .85) !important;
}

/* Botão — Mockup: display:inline-flex; align-items:center; gap:10px;
   background:#fff; color:#A01C24; border:0; border-radius:8px;
   padding:16px 28px; Inter 14px; letter-spacing:0.03em; white-space:nowrap;
   transition:background .18s ease. Os !important neutralizam heranças do
   Hello Elementor (magenta, sublinhado, sombras/bordas, tipografia). */
.asta-home-cta-final__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;
	letter-spacing:.03em !important;
	text-align:center;
	text-decoration:none !important;
	white-space:nowrap;
	cursor:pointer;
	transition:background .18s ease, color .18s ease;
}

.asta-home-cta-final__button:hover,
.asta-home-cta-final__button:focus,
.asta-home-cta-final__button:focus-visible,
.asta-home-cta-final__button:active {
	background:#F2E9E9 !important;
	color:#A01C24 !important;
	text-decoration:none !important;
}

.asta-home-cta-final__button:focus-visible {
	outline:2px solid #FFFFFF;
	outline-offset:3px;
}

/* Seta — Mockup: <span>→</span> à direita do rótulo, dentro do botão
   (herda a cor vermelha Asta do botão). */
.asta-home-cta-final__arrow {
	display:inline-block;
	font-size:1em;
	line-height:1;
	color:currentColor;
}

/* Mobile: o botão já quebra sozinho pelo flex-wrap. Aqui só garantimos que
   ele fique alinhado à esquerda (junto ao texto) quando empilhado. */
@media (max-width:640px) {
	.asta-home-cta-final__inner {
		align-items:flex-start;
	}
}