/**
 * Asta Mobili — Seção da Home "POR QUE A ASTA" —
 * eyebrow no topo + grade horizontal de 4 benefícios, cada um com linha
 * superior fina, pequeno símbolo Asta vermelho, título e descrição.
 *
 * Reprodução visual fiel do mockup aprovado (backups/mockup/rv07/"Asta
 * Mobili.dc.html"): o bloco `background:#FFFFFF` logo abaixo da seção
 * "Licitações". Todos os valores (cores, tipografia, espaçamentos, grade)
 * vêm do HTML do mockup:
 *
 *   wrapper      padding: clamp(36px,4.6cqw,88px) clamp(20px,4cqw,64px);
 *                background:#FFFFFF
 *   inner        max-width:1180px; margin:0 auto; display:flex;
 *                flex-direction:column; gap:clamp(20px,2.4cqw,36px)
 *   eyebrow      Inter 10px; letter-spacing:0.16em; text-transform:uppercase;
 *                color:#A01C24
 *   grade        display:grid;
 *                grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
 *                gap:clamp(14px,2cqw,30px)
 *   item         display:flex; flex-direction:column; gap:10px;
 *                padding-top:16px; border-top:1px solid #E4E0D9
 *   símbolo      <img simbolo-asta-preenchido.png> 22x15px; display:block
 *                (asset aprovado do RV07 — o próprio PNG já é vermelho Asta)
 *   título       Manrope 500; clamp(14px,1.4cqw,18px); line-height:1.22;
 *                letter-spacing:-0.01em; color:#17161A (herdado do mockup)
 *   descrição    Inter; clamp(12px,1.2cqw,14px); line-height:1.55;
 *                color:#6E6A63
 *
 * 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" e "Licitações".
 *
 * RESPONSIVIDADE: a grade usa exatamente a regra do RV07
 * (`repeat(auto-fit, minmax(min(100%,190px), 1fr))`), que já entrega o
 * comportamento pedido sem breakpoints extras — 4 itens lado a lado no
 * desktop, quebra para 2 quando o espaço aperta (tablet) e 1 coluna
 * empilhada no mobile, sempre com a linha superior preservada em cada item
 * e sem overflow horizontal.
 *
 * CONTEÚDO editável em Asta → Home (card "Por que a Asta", ÚLTIMO da lista —
 * abaixo de "Licitações"): eyebrow (texto + ativo) e os 4 itens (ativo, título,
 * descrição, ícone predefinido, ícone SVG personalizado). O CSS abaixo é FIXO e
 * não depende de configuração — só a estrutura visual. Sem JS no frontend.
 */

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

/* Seção full-bleed: quebra o container de conteúdo (Elementor/tema) para o
   fundo branco 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-why-asta {
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:clamp(36px, 4.6vw, 88px) clamp(20px, 4vw, 64px);
	background:#FFFFFF;
	font-family:Inter, Helvetica, Arial, sans-serif;
	color:#17161A;
}

/* Inner — Mockup: max-width:1180px; margin:0 auto; display:flex;
   flex-direction:column; gap:clamp(20px,2.4cqw,36px). */
.asta-home-why-asta__inner {
	max-width:1180px;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	gap:clamp(20px, 2.4vw, 36px);
}

/* Eyebrow "POR QUE A ASTA" — Mockup: Inter 10px; letter-spacing:0.16em;
   text-transform:uppercase; color:#A01C24. */
.asta-home-why-asta__eyebrow {
	margin:0 !important;
	padding:0;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:10px !important;
	font-weight:400 !important;
	letter-spacing:.16em !important;
	line-height:1.2 !important;
	text-transform:uppercase;
	color:#A01C24 !important;
}

/* Grade — Mockup: display:grid;
   grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
   gap:clamp(14px,2cqw,30px). */
.asta-home-why-asta__grid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap:clamp(14px, 2vw, 30px);
}

/* Item — Mockup: display:flex; flex-direction:column; gap:10px;
   padding-top:16px; border-top:1px solid #E4E0D9. Sem fundo, sem sombra. */
.asta-home-why-asta__item {
	display:flex;
	flex-direction:column;
	gap:10px;
	min-width:0;
	padding-top:16px;
	border-top:1px solid #E4E0D9;
}

/* Símbolo Asta vermelho — Mockup: <img simbolo-asta-preenchido.png>
   width:22px; height:15px; display:block. Decorativo (aria-hidden no HTML).
   O !important neutraliza `.elementor img{height:auto}` / resets do tema. */
.asta-home-why-asta__symbol {
	display:block !important;
	width:22px !important;
	height:15px !important;
	max-width:none !important;
	margin:0;
	border:0;
	object-fit:contain;
}

/* Ícone personalizado (SVG/imagem da Media Library) — mantém o "tamanho
   pequeno / alinhamento superior esquerdo" do mockup sem forçar a proporção
   22x15 do símbolo Asta (evita distorção de ícones quadrados/altos). */
.asta-home-why-asta__symbol--custom {
	width:auto !important;
	height:20px !important;
	max-width:40px !important;
	object-position:left center;
}

/* Título — Mockup: Manrope; font-size:clamp(14px,1.4cqw,18px);
   font-weight:500; line-height:1.22; letter-spacing:-0.01em. Cor herdada
   (#17161A). É um <span> no mockup (não um heading). */
.asta-home-why-asta__item-title {
	margin:0 !important;
	padding:0;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-size:clamp(14px, 1.4vw, 18px) !important;
	font-weight:500 !important;
	line-height:1.22 !important;
	letter-spacing:-.01em !important;
	color:#17161A !important;
}

/* Descrição — Mockup: font-size:clamp(12px,1.2cqw,14px); line-height:1.55;
   color:#6E6A63. Inter (fonte-base da seção). */
.asta-home-why-asta__item-text {
	margin:0 !important;
	padding:0;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:clamp(12px, 1.2vw, 14px) !important;
	font-weight:400 !important;
	line-height:1.55 !important;
	color:#6E6A63 !important;
}