/* ===========================================================================
   ALSBOM — Design System · classes de componente
   Aplicadas via "CSS Classes" dos widgets/containers do Elementor.

   REGRA (fonte unica): COR de marca NUNCA aqui — vem dos Globals do Elementor
   (o cliente troca na UI e muda o site inteiro). Aqui: tipografia fina,
   espacamento, efeito e o que o Elementor nao expoe (ex.: filter: invert).
   Unidades relativas por padrao; px so em detalhe fino (borda, filete).
   =========================================================================== */

/* Auto-suficiencia: os blocos ALSBOM carregam a fonte da charte mesmo quando o
   kit do site aponta para outra familia (staging compartilhado com outro projeto).
   Precisa alcancar os elementos de texto um a um: o CSS do kit estiliza h1..h6 e
   links DIRETAMENTE, entao heranca do container nao basta.

   Classes EXPLICITAS de proposito. Nada de [class*="als-"]: esse seletor casa com
   qualquer classe que CONTENHA "als-" (globals-, modals-, portals-) e vaza para a UI
   do Elementor e de outros plugins. */
.elementor .als-footer-top,
.elementor .als-footer-bottom,
.elementor .als-footer-title .elementor-heading-title,
.elementor .als-footer-links .elementor-icon-list-text,
.elementor .als-footer-social .elementor-icon-list-text,
.elementor .als-footer-tagline p,
.elementor .als-footer-address p,
.elementor .als-footer-address a,
.elementor .als-footer-bottom-text p,
.elementor .als-footer-bottom-text a {
	font-family: var(--als-font-sans);
}

/* ── Rodape ───────────────────────────────────────────────────────────────── */

/* O logo da maquete e escuro sobre fundo claro; no rodape preto ele e invertido.
   O Elementor nao tem controle de "invert" (o grupo css_filters nao inclui). */
.als-footer-logo img {
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.als-footer-tagline {
	font-size: 0.8125rem;   /* 13px */
	line-height: 1.65;
}

.als-footer-address {
	font-size: 0.8125rem;   /* 13px */
	line-height: 1.75;
}

.als-footer-address a {
	font-weight: 600;
	text-decoration: none;
}

/* Especificidade com `.elementor` de proposito: o CSS do kit estiliza h1..h6 e é
   impresso DEPOIS deste arquivo — sem isso o peso do titulo vem do Global (800). */
.elementor .als-footer-title .elementor-heading-title {
	font-size: 0.6875rem;   /* 11px */
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: normal;
}

.als-footer-links .elementor-icon-list-text {
	font-size: 0.875rem;    /* 14px */
	line-height: normal;
	transition: color 0.12s ease;
}

.als-footer-social .elementor-icon-list-text {
	font-size: 0.8125rem;   /* 13px */
	font-weight: 600;
	transition: color 0.12s ease;
}

.als-footer-bottom-text {
	font-size: 0.75rem;     /* 12px */
	line-height: normal;
}

.als-footer-bottom-text a {
	text-decoration: none;
	transition: color 0.12s ease;
}

/* A maquete alinha a coluna da marca ao topo junto das demais. */
.als-footer-top > .e-con-inner > .e-con,
.als-footer-top > .e-con {
	align-content: start;
}

/* O <p> do text-editor herda margem do tema; na maquete os blocos do rodape
   nao tem margem propria (o espacamento vem do gap do container). */
.elementor .als-footer-tagline p,
.elementor .als-footer-address p,
.elementor .als-footer-bottom-text p {
	margin: 0;
}

/* ── Correcao de editor: divs internos do Elementor viram itens do grid ────────
   Dentro do editor o Elementor injeta filhos proprios em TODO container
   (.elementor-shape-top/bottom dos shape dividers, .elementor-empty-view e
   .e-grid-outline). O CSS do Elementor os deixa fora do fluxo, mas quando outro
   tema/kit sobrescreve `position` eles voltam a ser ITENS do grid e empurram o
   conteudo — no conectar.walisondev.com os dois shapes ocupavam as 2 primeiras
   celulas e jogavam metade das colunas para a linha de baixo.
   So afeta o editor (no front esses divs nao existem) e so nos blocos ALSBOM.

   Seletor por CLASSE EXATA de proposito: [class*="als-"] casaria com qualquer
   classe que contenha "als-" (globals-, modals-, portals-) e vazaria para a UI
   do Elementor e de outros plugins. */
.als-footer-top > .e-con-inner > .elementor-shape,
.als-footer-top > .elementor-shape,
.als-footer-top > .e-con-inner > .elementor-empty-view,
.als-footer-top > .e-con-inner > .e-grid-outline,
.als-footer-bottom > .e-con-inner > .elementor-shape,
.als-footer-bottom > .elementor-shape,
.als-footer-bottom > .e-con-inner > .elementor-empty-view,
.als-footer-bottom > .e-con-inner > .e-grid-outline {
	position: absolute;
}

/* ── Cabecalho ────────────────────────────────────────────────────────────── */

.als-header-logo img {
	object-fit: contain;
}

/* .nav-menu > li > a { font-size: 13px; font-weight: 500 } */
.elementor .als-header-menu .elementor-item {
	font-family: var(--als-font-sans);
	font-size: 0.8125rem;   /* 13px */
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.12s ease;
}

/* .nav-drop a { 11px/700 uppercase, letter-spacing .05em } */
.elementor .als-header-menu .sub-arrow + ul .elementor-sub-item,
.elementor .als-header-menu .elementor-nav-menu--dropdown .elementor-item,
.elementor .als-header-menu .elementor-sub-item {
	font-family: var(--als-font-sans);
	font-size: 0.6875rem;   /* 11px */
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* .nav-drop { padding 6px 0 } — borda, raio e sombra sao controles nativos do widget
   (editaveis na UI e amarrados aos Globals), nao CSS. */
.elementor .als-header-menu .elementor-nav-menu--dropdown {
	padding: 0.375rem 0;    /* 6px */
}

/* .nav-cta { pilula, 13px/700 } */
.elementor .als-header-cta .elementor-button {
	font-family: var(--als-font-sans);
	font-size: 0.8125rem;   /* 13px */
	font-weight: 700;
	border-radius: var(--als-radius-pill);
	padding: 0.625rem 1.375rem;  /* 10px 22px */
	white-space: nowrap;
}

/* Mesma correcao do rodape: no editor o Elementor injeta filhos proprios no container. */
.als-header > .e-con-inner > .elementor-shape,
.als-header > .elementor-shape,
.als-header > .e-con-inner > .elementor-empty-view,
.als-header > .e-con-inner > .e-grid-outline {
	position: absolute;
}

/* No mobile sobram ~346px: logo (127) + hamburguer + CTA nao cabem com o mesmo
   padding do desktop. Encolhe o CTA, nunca o logo. */
@media (max-width: 767px) {
	.elementor .als-header-cta .elementor-button {
		font-size: 0.75rem;          /* 12px */
		padding: 0.5rem 0.875rem;    /* 8px 14px */
	}
}

/* Mobile: o <nav class="elementor-nav-menu--dropdown"> do widget fica no FLUXO mesmo
   fechado (position:static, max-height:0) e com a largura do item mais longo — 174px
   no ALSBOM. Isso inflava o widget do menu e empurrava o CTA para fora da tela.
   Tirando ele do fluxo, o widget passa a valer so o hamburguer e o dropdown abre na
   largura TOTAL da barra (comportamento esperado de menu mobile). */
.als-header {
	position: relative;   /* ancora do dropdown em largura cheia; o sticky do Pro
	                         troca para fixed e continua servindo de ancora */
}

/* Barra com hamburguer: CTA a esquerda · LOGO AO CENTRO · hamburguer a direita
   (pedido do Theo, 14/ago — a maquete nao tem cabecalho mobile, ela esconde o menu).

   O logo so fica REALMENTE no centro da barra se as duas pontas ocuparem a mesma
   largura. Como o CTA e bem mais largo que o hamburguer, deixar o logo "centralizado
   no espaco que sobra" o joga ~46px para a direita. Por isso as pontas crescem em
   partes iguais (`flex: 1 1 0`) e o logo fica com a largura natural: o meio da barra
   passa a ser o meio do logo, em qualquer largura de tela.

   Nao ha controle nativo para isto: o Elementor so expoe `_flex_size` como controle
   de filho (conferido na fonte do plugin) — nao existe `_flex_grow`.

   POR QUE PARA EM 768px: centralizar de verdade exige que as DUAS pontas tenham a
   largura da maior delas — o CTA, 137px. A conta no celular e
   2x137 + 149 (logo) + 16 (gaps) = 439px num espaco util de 346px a 390. Nao cabe, e
   forcar so faz o botao subir POR CIMA do logo (medido). Abaixo de 768px os tres itens
   ficam com a largura natural e o `space-between` os distribui: nada se sobrepoe, e o
   logo fica ~46px a direita do centro. Encaixar o logo no centro do celular depende de
   encurtar o rotulo do botao — decisao de copy, nao de layout. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor .als-header > .e-con-inner > .als-header-cta,
	.elementor .als-header > .e-con-inner > .als-header-menu {
		flex: 1 1 0;
		min-width: 0;       /* sem isto o conteudo impede o item de encolher e o centro desloca */
	}

	.elementor .als-header > .e-con-inner > .als-header-logo {
		flex: 0 0 auto;
	}

	/* Cada ponta empurra o seu conteudo para a borda da barra. */
	.elementor .als-header-cta .elementor-widget-container { text-align: left; }
}

@media (max-width: 1024px) {
	.elementor .als-header-menu nav.elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 300;               /* maquete: .nav-drop { z-index: 300 } */
		box-shadow: var(--als-shadow-lg);
		border: 0;
		border-top: 1px solid var(--als-gray-400);
		border-radius: 0;           /* em largura cheia o canto arredondado vira "card solto" */
	}

	/* O logo ocupa o espaco entre hamburguer e CTA e se centraliza nele. */
	.elementor .als-header-logo {
		flex: 1 1 auto;
	}
	.elementor .als-header-logo .elementor-widget-container,
	.elementor .als-header-logo figure,
	.elementor .als-header-logo .elementor-image {
		display: flex;
		justify-content: center;
	}

	/* Hamburguer com cara de botao: area de toque de 44px (a11y), sem borda dura. */
	.elementor .als-header-menu .elementor-menu-toggle {
		width: 2.75rem;
		height: 2.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--als-radius-md);
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.elementor .als-header-menu > .elementor-widget-container {
		justify-content: flex-end;
	}

	/* O widget e position:relative por padrao e viraria a ancora do dropdown (33px,
	   a largura do hamburguer). Static aqui faz o dropdown ancorar no .e-con-inner
	   e abrir na largura da barra. */
	.elementor .als-header-menu {
		position: static;
	}
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.als-hero {
	position: relative;
	overflow: hidden;
}

/* .hero-photo: metade direita, corte diagonal e degrade por cima — so CSS faz. */
.als-hero .als-hero-photo {
	position: absolute;
	inset: 0 0 0 auto;
	width: 50%;
	z-index: 1;
	pointer-events: none;
	-webkit-clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

.als-hero .als-hero-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	/* O tom intermediario sai do proprio Global (color-mix), para nao repetir o azul
	   da marca em lugar nenhum: trocar a cor no kit muda o degrade junto. */
	background: linear-gradient(90deg,
		var(--e-global-color-als_blue, #008FA1) 0%,
		color-mix(in srgb, var(--e-global-color-als_blue, #008FA1) 25%, transparent) 45%,
		transparent 100%);
}

.als-hero .als-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 41.25rem;   /* 660px: a maquete limita o h1 */
}

.elementor .als-hero-title .elementor-heading-title {
	font-size: 3.125rem;   /* 50px */
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.elementor .als-hero-script .elementor-heading-title {
	font-family: var(--als-font-accent);
	font-size: 2.375rem;   /* 38px */
	font-weight: 400;
	line-height: 1.1;
}

.elementor .als-hero-sub {
	font-size: 1.125rem;   /* 18px */
	line-height: 1.6;
	opacity: 0.9;
	max-width: 36.25rem;
}

@media (max-width: 1024px) {
	.als-hero .als-hero-photo { display: none; }
	.elementor .als-hero-title .elementor-heading-title { font-size: 2.375rem; }
	.elementor .als-hero-script .elementor-heading-title { font-size: 1.875rem; }
}

/* ── Secao / titulos ──────────────────────────────────────────────────────── */

.elementor .als-eyebrow .elementor-heading-title {
	font-size: 0.6875rem;   /* 11px */
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.elementor .als-section-title .elementor-heading-title {
	font-size: 2.25rem;     /* 36px */
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.04em;
}

/* .section-title .script — a palavra em destaque, na fonte de acento */
.elementor .als-script {
	font-family: var(--als-font-accent);
	font-weight: 400;
	font-size: 1.15em;
	letter-spacing: 0;
	color: var(--e-global-color-als_orange, #FFAA06);
}

.elementor .als-prose p {
	font-size: 1rem;
	line-height: 1.85;
	margin-bottom: 1.125rem;
}

.elementor .als-prose p:last-child { margin-bottom: 0; }

/* ── Fil d'ariane ─────────────────────────────────────────────────────────── */

.elementor .als-breadcrumb-text {
	font-size: 0.6875rem;   /* 11px */
	line-height: 1.4;
}

.elementor .als-breadcrumb-text p { margin: 0; }

/* Link do caminho: cinza claro e semibold; o item ATUAL e mais escuro e mais
   pesado (e o que diz onde voce esta). Sem isso o fil d'ariane vira uma linha
   cinza chapada — foi o que o Theo apontou. */
.elementor .als-breadcrumb-text a { text-decoration: none; font-weight: 500; }

.elementor .als-bc-cur {
	color: var(--e-global-color-als_fg2, #4a4a4f);
	font-weight: 600;
}

.elementor .als-bc-sep {
	margin: 0 0.1875rem;
	font-size: 0.625rem;    /* 10px */
	color: var(--als-bc-sep);
}

/* ── Devis ────────────────────────────────────────────────────────────────── */

/* Coluna lateral acompanha a rolagem (a maquete usa sticky, top 94px = altura do
   cabecalho + folga). `align-self: start` e obrigatorio: item de grid estica por
   padrao, e um item da altura da linha inteira NUNCA gruda. */
.elementor .als-devis-grid { --align-items: start; }

@media (min-width: 1025px) {
	.elementor .als-devis-aside {
		position: sticky;
		top: 5.875rem;      /* 94px */
		align-self: start;
	}
}

.elementor .als-devis-offer { position: relative; }

/* Filigrana: enfeite, nao clicavel, e nunca rouba largura do card. */
.elementor .als-devis-offer-mark {
	pointer-events: none;
	line-height: 0;
	z-index: 0;
}

.elementor .als-devis-offer > :not(.als-devis-offer-mark) { position: relative; z-index: 1; }

.elementor .als-devis-offer-title .elementor-heading-title {
	font-size: 1.4375rem;   /* 23px */
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: var(--als-tracking-tight);
}

.elementor .als-devis-offer-text {
	font-size: 0.875rem;    /* 14px */
	line-height: 1.6;
	opacity: 0.9;
}

.elementor .als-devis-offer-text p { margin: 0; }

.elementor .als-tag .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	width: fit-content;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--e-global-color-als_orange, #FFAA06);
	border-radius: var(--als-radius-pill);
	padding: 0.3125rem 0.6875rem;
}

/* Lista de pontos: 11px acima/abaixo em cada item deixa o filete nativo do
   Elementor (`:after` no fim do item) exatamente onde a maquete poe o border. */
.elementor .als-devis-points .elementor-icon-list-item {
	align-items: flex-start;
	padding-block: 0.6875rem;
}

.elementor .als-devis-points .elementor-icon-list-item:first-child { padding-top: 0; }
.elementor .als-devis-points .elementor-icon-list-item:last-child { padding-bottom: 0; }

.elementor .als-devis-points .elementor-icon-list-text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	line-height: 1.45;
}

.elementor .als-devis-points .elementor-icon-list-text strong {
	font-size: 0.875rem;    /* 14px */
	font-weight: 700;
}

.elementor .als-devis-points .elementor-icon-list-text span {
	font-size: 0.8125rem;   /* 13px */
	color: var(--e-global-color-als_fg3, #8a8a90);
}

.elementor .als-devis-contact-title .elementor-heading-title {
	font-size: 0.6875rem;   /* 11px */
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.elementor .als-devis-contact-text {
	font-size: 0.875rem;    /* 14px */
	line-height: 1.7;
}

.elementor .als-devis-contact-text p { margin: 0; }

.elementor .als-devis-tel .elementor-heading-title,
.elementor .als-devis-tel a {
	font-size: 1.125rem;    /* 18px */
	font-weight: 800;
	text-decoration: none;
}

.elementor .als-devis-tel { margin-top: 0.375rem; }
.elementor .als-devis-social { margin-top: 1rem; }

/* ── Formulario ───────────────────────────────────────────────────────────── */

.elementor .als-form-note { margin-bottom: 1.75rem; }

/* Peso/tamanho ficam no proprio texto: o `p` do editor nao herda o do container. */
.elementor .als-form-note-text,
.elementor .als-form-note-text p {
	font-size: 0.8125rem;   /* 13px */
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}
.elementor .als-form-note-icon { line-height: 0; }

/* Titulo de grupo do formulario: rotulo + filete ocupando o resto da linha. */
.elementor .als-fieldset-title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.75rem;     /* 12px */
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--e-global-color-als_blue, #008FA1);
	margin: 0 0 0.25rem;
}

.elementor .als-fieldset-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--als-gray-400);
}

.elementor .als-form .elementor-field-group:has(.als-fieldset-title) { margin-top: 1.125rem; }
.elementor .als-form .elementor-field-group:first-child:has(.als-fieldset-title) { margin-top: 0; }

/* Padding do campo: o widget de formulario NAO tem controle proprio pra isso (so o
   Theme Style do kit tem, e o kit aqui e do site host). Fica no DS pra bater com a
   maquete; no WordPress da ALSBOM o kit assume e esta regra vira redundante. */
.elementor .als-form .elementor-field-textual { padding: 0.75rem 0.875rem; }

.elementor .als-form textarea.elementor-field-textual { min-height: 6.875rem; }  /* 110px */

/* Consentimento: caixa alinhada ao topo da primeira linha do texto. */
.elementor .als-form .elementor-field-type-acceptance .elementor-field-subgroup { align-items: flex-start; }

.elementor .als-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 0.6875rem;
}

.elementor .als-form .elementor-field-type-acceptance input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	flex: none;
	accent-color: var(--e-global-color-als_blue, #008FA1);
	cursor: pointer;
}

/* O Elementor estiliza `.elementor-field-subgroup label` com 4 classes (o seletor da
   pagina + o do widget). Pra vencer sem !important, entramos com 5: `.als-form` (widget)
   + `.elementor-form` (o <form>) + o grupo + a opcao. */
.elementor .als-form .elementor-form .elementor-field-type-acceptance .elementor-field-option label {
	font-size: 0.78125rem;  /* 12.5px */
	line-height: 1.5;
	color: var(--e-global-color-als_fg3, #8a8a90);
}

.elementor .als-form-required {
	font-size: 0.75rem;     /* 12px */
	margin-top: 1rem;
}

.elementor .als-form-required p { margin: 0; }

/* ══ Pecas de conteudo ══════════════════════════════════════════════════════
   Valores conferidos em mockups/quins.css e verificados por
   `node tools/qa/compare.mjs <pagina>`. Cor SEMPRE por Global; aqui so
   tipografia fina, espacamento e efeito.                                      */

.elementor .als-lead {
	font-size: 1.0625rem;   /* 17px */
	line-height: 1.75;
}

.elementor .als-lead p { margin: 0; }
.elementor .als-head-centro { text-align: center; }

/* ── Timeline da metodologia ─────────────────────────────────────────────── */

/* O trilho e a linha vertical entre um numero e o proximo. Fica no CSS porque e
   pura decoracao — e some sozinho no ultimo passo. */
.elementor .als-step-rail { position: relative; }

.elementor .als-step:not(.als-step-fim) .als-step-rail::after {
	content: '';
	position: absolute;
	top: 4.5rem;            /* logo abaixo do circulo de 64px */
	bottom: -3.5rem;
	width: 2px;
	background: linear-gradient(var(--als-blue-300), var(--als-gray-400));
}

.elementor .als-step-num .elementor-heading-title {
	width: 4rem;            /* 64px */
	height: 4rem;
	border-radius: 50%;
	background: var(--e-global-color-als_blue, #008FA1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.625rem;    /* 26px */
	font-weight: 800;
	letter-spacing: -0.04em;
	position: relative;
	z-index: 2;
}

.elementor .als-step-body { padding-top: 0.5rem; }

.elementor .als-step-kicker .elementor-heading-title {
	font-size: 0.75rem;     /* 12px */
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.elementor .als-step-title .elementor-heading-title {
	font-size: 1.5rem;      /* 24px */
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.2;
}

.elementor .als-step-text p {
	font-size: 0.96875rem;  /* 15.5px */
	line-height: 1.8;
	margin: 0 0 0.875rem;
}

.elementor .als-step-text p:last-child { margin-bottom: 0; }

.elementor .als-step-list .elementor-icon-list-item { align-items: flex-start; }
.elementor .als-step-list .elementor-icon-list-text { font-size: 0.9375rem; line-height: 1.5; }

/* "Exclusivité Alsbom" — pilula laranja no meio da linha da lista. */
.elementor .als-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	background: var(--e-global-color-als_orange, #FFAA06);
	color: var(--e-global-color-als_black, #1E1E1E);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	padding: 0.3125rem 0.75rem;
	border-radius: var(--als-radius-pill);
	margin-left: 0.375rem;
}

/* ── Feature (imagem + texto) ────────────────────────────────────────────── */

.elementor .als-feature { align-items: center; }
.elementor .als-feature-media:not(:has(img)) { aspect-ratio: 4 / 3; }

.elementor .als-feature-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* ── Cards de servico ────────────────────────────────────────────────────── */

.elementor .als-svc-card { transition: box-shadow .15s, border-color .15s, transform .15s; }

.elementor .als-svc-card:hover {
	box-shadow: var(--als-shadow-md);
	border-color: var(--e-global-color-als_blue_300, #5cbcc8);
	transform: translateY(-2px);
}

/* O icone "framed" do Elementor vira o quadrado arredondado da maquete. */
.elementor .als-svc-icon .elementor-icon {
	width: 3.125rem;        /* 50px */
	height: 3.125rem;
	border-radius: 0.6875rem;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.375rem;
}

.elementor .als-svc-title .elementor-heading-title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.elementor .als-svc-text p { font-size: 0.84375rem; line-height: 1.6; margin: 0; }   /* 13.5px */

/* ── Equipe ──────────────────────────────────────────────────────────────── */

.elementor .als-team-photo { margin-bottom: 0.5rem; }
.elementor .als-team-photo:not(:has(img)) { aspect-ratio: 1 / 1; }

.elementor .als-team-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.elementor .als-team-name .elementor-heading-title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.elementor .als-team-role .elementor-heading-title {
	font-size: 0.8125rem;   /* 13px */
	font-weight: 600;
	line-height: 1.35;
}

.elementor .als-team-social { margin-top: 0.5rem; }

/* ── Faixa de numeros ────────────────────────────────────────────────────── */

.elementor .als-stat { padding: 0 0.75rem; }

/* O filete separa uma coluna da outra — e some no comeco de cada linha do grid. */
.elementor .als-stats-grid > .als-stat + .als-stat {
	border-left: 1px solid var(--als-white-12);
}

/* A faixa de numeros e uma grade de 4 colunas na maquete (quins.css:93). Quando o
   projeto tem menos de 4 numeros — o comum na migracao: 1 a 3 — as celulas vazias
   sobram a direita e o conjunto fica encostado na esquerda. Aqui as colunas passam a
   ser do tamanho do conteudo e a grade se centraliza; com 4 numeros nada muda. */
/* So de TABLET para cima. No celular o gerador pede 2 colunas (`grid_columns_grid_mobile`)
   e a maquete tambem (`.stats-grid { 1fr 1fr }` <=960); a 1a versao desta regra valia em
   toda largura e forcava 4 colunas de 68px a 390 — "120.000 m²" nao cabe e a home
   estourava 11px na horizontal (pego pela varredura de estouro, nao pelo comparador,
   que so mede a 1440). */
@media (min-width: 768px) {
	.elementor .als-stats-grid {
		/* `auto-fit` + teto de 1/4 da grade (com os 3 gaps de 24px descontados): 4 numeros
		   preenchem a largura toda como antes (282px cada, igual a maquete), 1 a 3 ficam do
		   mesmo tamanho e centrados. `minmax(0, 17.5rem)` dava 280 — 2px a menos por coluna,
		   pego pelo comparador em Qui sommes-nous. */
		grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 3 * 1.5rem) / 4)));
		justify-content: center;
	}
}

/* O Elementor grava `--e-con-grid-template-columns: repeat(4, 1fr)` numa regra POR ID
   de elemento (`.elementor-N .elementor-element.elementor-element-X`), que ganha da
   classe. Sem vencer essa regra sobram trilhas fantasmas de 0px (medido). O seletor
   abaixo empata a especificidade por classe e ainda ganha pela ordem de origem. */
@media (min-width: 768px) {
	.elementor .elementor-element.e-con.e-grid.als-stats-grid {
		--e-con-grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 3 * 1.5rem) / 4)));
	}
}

.elementor .als-stat-num .elementor-heading-title {
	font-size: 2rem;        /* 32px */
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.elementor .als-stat-num-menor .elementor-heading-title { font-size: 1.375rem; }   /* 22px */
.elementor .als-stat-u { color: var(--e-global-color-als_white, #fff); }

.elementor .als-stat-label .elementor-heading-title {
	font-size: 0.8125rem;   /* 13px */
	font-weight: 400;
	line-height: 1.4;
}

/* ── Faixa de chamada final ──────────────────────────────────────────────── */

/* A dobra e preta: o texto herdado tem de ser BRANCO. Cada filho define a sua cor hoje,
   entao a tela parece certa — mas qualquer texto novo ali nasceria preto sobre preto.
   Medido contra a maquete: `.cta` herda #fff, a faixa herdava rgb(30,30,30). */
.elementor .als-cta { text-align: center; color: #fff; }

.elementor .als-cta-title .elementor-heading-title {
	font-size: 2.375rem;    /* 38px */
	line-height: 1.12;
}

.elementor .als-cta-title .als-script { font-size: 1.2em; }

.elementor .als-cta-text {
	max-width: 33.75rem;    /* 540px */
	margin: 0 auto 1.375rem;
}

/* O limite de leitura da maquete esta no PROPRIO paragrafo (`.cta p { max-width: 540px }`,
   quins.css:411). Deixa-lo so no widget nao segurava nada: o <p> media 927px e a frase saia
   numa linha unica, encurtando a dobra. Espelhar a maquete no mesmo no resolve na fonte. */
.elementor .als-cta-text p {
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 auto;
	max-width: 33.75rem;    /* 540px */
}

@media (max-width: 767px) {
	.elementor .als-cta-title .elementor-heading-title { font-size: 1.75rem; }
	.elementor .als-step-num .elementor-heading-title { width: 3rem; height: 3rem; font-size: 1.25rem; }
	.elementor .als-step:not(.als-step-fim) .als-step-rail::after { top: 3.5rem; }
}

/* Split e devis: item de grid estica por padrao; `start` mantem as colunas no topo.
   Vai na VARIAVEL, nao na propriedade: o container do Elementor declara
   `align-items: var(--align-items)` com a sua propria especificidade, entao um
   `align-items: start` nosso perdia e a grade computava `normal`. Alimentar a variavel
   funciona junto com o mecanismo dele — e o controle da UI continua podendo sobrescrever. */
.elementor .als-split { --align-items: start; }

/* Na faixa preta a maquete deixa o kicker em 16px (a regra `.cta p` vence `.eyebrow`)
   — replicado aqui de proposito, e o que o cliente aprovou na maquete.
   O `line-height` vem da MESMA regra e faltava: sem ele o kicker media 16px de altura
   contra 26px da maquete. Metade da regra copiada e uma divergencia que nenhum par de
   comparacao pegava, porque o par so olhava tamanho, peso e caixa. */
.elementor .als-cta .als-eyebrow .elementor-heading-title {
	font-size: 1rem;
	line-height: 1.65;
}

/* Ritmo vertical da dobra preta. Na maquete o eyebrow e o texto sao <p> e herdam
   `.cta p { margin: 0 auto 32px }` (quins.css:411) — o titulo fica com 10px (linha 409).
   Aqui o container ja da 10px de gap, entao a margem completa a conta ate 32px.
   Medido antes: a dobra fechava em 322px contra 407px da maquete. */
.elementor .als-cta > .e-con-inner > .als-eyebrow,
.elementor .als-cta > .e-con-inner > .als-cta-text { margin-bottom: 1.375rem; }   /* 22 + 10 de gap = 32 */

/* Botao fantasma sobre fundo escuro: contorno claro, fundo transparente. */
.elementor .als-btn-ghost .elementor-button {
	background: transparent;
	border: 2px solid var(--als-white-28);
}

.elementor .als-btn-ghost .elementor-button:hover { border-color: var(--als-white-60); }

/* Botao fantasma sobre fundo claro. */
.elementor .als-btn-ghostDark .elementor-button {
	background: transparent;
	border: 2px solid var(--als-gray-400);
}

/* A maquete estreita a timeline (980px) dentro de uma secao mais larga. */
.elementor .als-stepper { max-width: 61.25rem; margin: 0 auto; width: 100%; }

/* ── Depoimentos ─────────────────────────────────────────────────────────── */

.elementor .als-quote-featured { position: relative; margin-bottom: 2rem; }

/* Aspas em filigrana: fonte de acento, gigante, sem interferir no clique. */
.elementor .als-quote-mark .elementor-heading-title {
	font-family: var(--als-font-accent);
	font-size: 10rem;       /* 160px */
	line-height: 1;
}

.elementor .als-quote-mark { pointer-events: none; }
.elementor .als-quote-featured > :not(.als-quote-mark) { position: relative; z-index: 1; }

.elementor .als-quote-tag { width: fit-content; margin-bottom: 1.25rem; }
.elementor .als-quote-tag-icon { line-height: 0; }

.elementor .als-quote-tag-text .elementor-heading-title {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.elementor .als-quote-text .elementor-heading-title {
	font-size: 1.375rem;    /* 22px */
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.01em;
	max-width: 47.5rem;
	margin-bottom: 1.75rem;
}

.elementor .als-quote-logo { height: 3.5rem; min-width: 6rem; }
/* O quadro tem altura fixa; sem passar a altura ao widget a imagem nao encolhe e
   o quadro fica largo demais (a maquete limita pela altura). */
.elementor .als-quote-logo .elementor-widget-image,
.elementor .als-quote-logo .elementor-widget-container { height: 100%; display: flex; align-items: center; }
.elementor .als-quote-logo img { max-height: 100%; max-width: 8.125rem; object-fit: contain; }

.elementor .als-quote-name .elementor-heading-title { font-size: 1.0625rem; font-weight: 800; }

.elementor .als-quote-role .elementor-heading-title {
	font-size: 0.84375rem;  /* 13.5px */
	line-height: 1.4;
	opacity: 0.85;
	max-width: 26.25rem;
}

/* Mural: colunas de verdade (as alturas dos cards sao diferentes). O container do
   Elementor e flex — a especificidade extra troca por multi-coluna sem !important. */
.elementor .als-quote-masonry.e-con {
	display: block;
	columns: 2;
	column-gap: 1.625rem;
}

.elementor .als-quote-card {
	break-inside: avoid;
	margin-bottom: 1.625rem;
	transition: box-shadow .15s, transform .15s, border-color .15s;
}

.elementor .als-quote-card:hover {
	box-shadow: var(--als-shadow-md);
	transform: translateY(-2px);
	border-color: var(--e-global-color-als_blue_300, #5cbcc8);
}

.elementor .als-quote-card-mark .elementor-heading-title {
	font-family: var(--als-font-accent);
	font-size: 3.5rem;
	line-height: 0.6;
	height: 1.875rem;
}

.elementor .als-quote-card-text .elementor-heading-title {
	font-size: 0.96875rem;  /* 15.5px */
	font-weight: 400;
	line-height: 1.7;
	margin-bottom: 1.375rem;
}

.elementor .als-quote-card-logo { height: 2.625rem; min-width: 4.75rem; }
.elementor .als-quote-card-logo .elementor-widget-image,
.elementor .als-quote-card-logo .elementor-widget-container { height: 100%; display: flex; align-items: center; }
.elementor .als-quote-card-logo img { max-height: 100%; max-width: 6.875rem; object-fit: contain; }
.elementor .als-quote-card-name .elementor-heading-title { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.elementor .als-quote-card-role .elementor-heading-title { font-size: 0.78125rem; line-height: 1.4; font-weight: 400; }

/* Link de texto com seta (sem fundo de botao). */
.elementor .als-btn-link .elementor-button,
.elementor .als-btn-suite .elementor-button {
	background: transparent;
}

.elementor .als-btn-link { margin-top: 1.125rem; }
.elementor .als-btn-suite { margin-top: 0.875rem; }

@media (max-width: 767px) {
	.elementor .als-quote-masonry.e-con { columns: 1; }
	.elementor .als-quote-mark .elementor-heading-title { font-size: 6rem; }
}

/* ── Cartao de realizacao (grade e Loop Grid) ────────────────────────────── */

/* A PROPORCAO FICA NA IMAGEM, NAO NO CARTAO.
   Com `aspect-ratio` no cartao e a imagem fora de fluxo (absoluta), a grade calcula
   as linhas certas mas a CAIXA DO WIDGET fica menor que o conteudo — no mobile os
   cartoes transbordavam por cima do CTA e do rodape (medido: widget 1745px para uma
   grade de 2811px). Com a imagem EM FLUXO carregando a proporcao, a altura fecha. */
.elementor .als-proj-card {
	position: relative;
	transition: box-shadow .18s, transform .18s;
}

/* Projeto sem imagem destacada: o cartao ainda precisa de altura. */
.elementor .als-proj-card:not(:has(img)) { aspect-ratio: 4 / 3; }

.elementor .als-proj-card:hover { box-shadow: var(--als-shadow-lg); transform: translateY(-3px); }

.elementor .als-proj-scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.elementor .als-proj-img { margin: 0; }

.elementor .als-proj-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.elementor .als-proj-card:hover .als-proj-img img { transform: scale(1.06); }

/* Vela: escurece a base da foto para o texto branco ter contraste garantido. */
.elementor .als-proj-scrim {
	background: linear-gradient(to top, var(--als-scrim-forte) 0%, var(--als-scrim-meio) 38%, var(--als-scrim-zero) 68%);
	pointer-events: none;
}

.elementor .als-proj-meta {
	position: absolute;
	left: 1.375rem;
	right: 1.375rem;
	bottom: 1.25rem;
	width: auto;
}

.elementor .als-proj-tag .elementor-heading-title {
	display: inline-block;
	background: var(--als-orange-95);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0.5625rem;
	border-radius: var(--als-radius-sm);
	margin-bottom: 0.625rem;
}

.elementor .als-proj-name .elementor-heading-title {
	font-size: 1.375rem;    /* 22px */
	font-weight: 800;
	letter-spacing: var(--als-tracking-tight);
	line-height: 1.1;
	margin-bottom: 0.375rem;
}

/* O "Voir l'étude de cas" so aparece no hover, como na maquete. */
.elementor .als-proj-link {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s, transform .2s;
}

.elementor .als-proj-card:hover .als-proj-link { opacity: 1; transform: translateY(0); }
.elementor .als-proj-link-text .elementor-heading-title { font-size: 0.8125rem; font-weight: 600; }
.elementor .als-proj-link-icon { line-height: 0; }

/* ── Logos de referencia ─────────────────────────────────────────────────── */

.elementor .als-ref-logo { height: 6.875rem; transition: border-color .15s, box-shadow .15s; }
.elementor .als-ref-logo:hover { border-color: var(--e-global-color-als_blue_300, #5cbcc8); box-shadow: var(--als-shadow-sm); }

.elementor .als-ref-logo img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter .2s, opacity .2s;
}

.elementor .als-ref-logo:hover img { filter: grayscale(0); opacity: 1; }

/* Paginacao do Loop Grid no padrao do .pager da maquete. */
.elementor .elementor-pagination .page-numbers {
	min-width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--als-radius-md);
	border: 1px solid var(--als-gray-400);
	color: var(--e-global-color-als_fg2, #4A4A4F);   /* `.pager .pg-num { color: var(--fg2) }` — o link herdava o azul */
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	padding: 0 0.75rem;
	transition: background .12s, color .12s, border-color .12s;
}

.elementor .elementor-pagination a.page-numbers:not(.next):not(.prev):hover {
	border-color: var(--e-global-color-als_blue, #008FA1);
	color: var(--e-global-color-als_blue, #008FA1);
}

.elementor .elementor-pagination .page-numbers.current {
	background: var(--e-global-color-als_blue, #008FA1);
	border-color: var(--e-global-color-als_blue, #008FA1);
	color: var(--e-global-color-als_white, #fff);
}

/* `.pager { display:flex; gap:8px; justify-content:center; margin-top:44px }` — o Loop
   Grid imprime a paginacao alinhada a esquerda e sem respiro; a maquete a centraliza. */
.elementor .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	align-items: center;
	margin-top: 2.75rem;    /* 44px */
}

/* Na primeira pagina o Elementor imprime "Précédent" como <span> SEM link (placeholder);
   na ultima, o "Suivant". A maquete so mostra o que e clicavel — some o que nao leva a
   lugar nenhum. */
.elementor .elementor-pagination span.page-numbers.prev,
.elementor .elementor-pagination span.page-numbers.next { display: none; }

/* "Suivant →" e um botao LARANJA na maquete (`.pg-next`), nao um numero a mais.
   O "Précédent" segue o mesmo desenho por simetria (a maquete so mostra a pagina 1). */
.elementor .elementor-pagination .page-numbers.next,
.elementor .elementor-pagination .page-numbers.prev {
	background: var(--e-global-color-als_orange, #FFAA06);
	border-color: var(--e-global-color-als_orange, #FFAA06);
	color: var(--e-global-color-als_black, #1E1E1E);
}

.elementor .elementor-pagination .page-numbers.next:hover,
.elementor .elementor-pagination .page-numbers.prev:hover {
	background: var(--e-global-color-als_orange_700, #E69500);
	border-color: var(--e-global-color-als_orange_700, #E69500);
}

/* ── Página de realização (template do CPT) ─────────────────────────────── */

.elementor .als-hero-full { position: relative; min-height: 30rem; }   /* 480px */

.elementor .als-hf-img,
.elementor .als-hf-scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.elementor .als-hf-img .elementor-widget-container { width: 100%; height: 100%; }

/* A imagem preenche a caixa por posicao absoluta: depender de `height: 100%` exige
   que TODA a cadeia de pais tenha altura, e bastava um elo sem altura para a foto
   sair no tamanho natural (1497px de altura dentro de um heroi de 480). */
.elementor .als-hf-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.elementor .als-hf-scrim {
	background: linear-gradient(to top, var(--als-scrim-hero-bas) 0%, var(--als-scrim-hero-mid) 45%, var(--als-scrim-hero-haut) 100%);
	pointer-events: none;
}

.elementor .als-hf-accent {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	width: 100%;
	min-height: 4px;
	padding: 0;
}

.elementor .als-hero-full .als-hero-inner { position: relative; z-index: 2; }
.elementor .als-hero-full .als-hero-title .elementor-heading-title { font-size: 2.875rem; max-width: 47.5rem; }  /* 46px */
.elementor .als-hero-full .als-eyebrow .elementor-heading-title { opacity: 0.85; }

/* Fiche do projeto */
.elementor .als-fiche-title .elementor-heading-title {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}

.elementor .als-fiche-icon { line-height: 0; margin-top: 0.125rem; }

.elementor .als-fiche-label .elementor-heading-title {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.elementor .als-fiche-value .elementor-heading-title {
	font-size: 0.90625rem;   /* 14.5px */
	font-weight: 600;
	line-height: 1.4;
}

/* Campo vazio no projeto = linha inteira some (em vez de rótulo órfão). O mesmo
   vale para um "fait" sem valor na faixa preta. */
.elementor .als-fiche-row:has(.als-fiche-value .elementor-heading-title:empty) { display: none; }
.elementor .als-stat:has(.als-stat-num .elementor-heading-title:empty) { display: none; }
.elementor .als-head:has(> .als-section-title .elementor-heading-title:empty) .als-section-title { display: none; }

.elementor .als-fiche .als-btn-ficheCta { margin-top: 0.5rem; }
.elementor .als-fiche .als-btn-ficheCta .elementor-button { display: block; text-align: center; width: 100%; }

/* Figura com legenda */
.elementor .als-proj-figure { border-radius: var(--als-radius-lg); overflow: hidden; box-shadow: var(--als-shadow-md); }
.elementor .als-proj-figure img { width: 100%; display: block; }

.elementor .als-proj-figcaption .elementor-heading-title {
	font-size: 0.8125rem;
	font-weight: 400;
	font-style: italic;
	text-align: center;
	margin-top: 0.75rem;
}

/* Cabeçalho com ação à direita */
.elementor .als-head-acao { margin-bottom: 2.25rem; }

@media (max-width: 767px) {
	.elementor .als-hero-full .als-hero-title .elementor-heading-title { font-size: 1.875rem; }
	.elementor .als-hero-full { min-height: 22rem; }
}

/* ── Blog: destaque e cartões ────────────────────────────────────────────── */

.elementor .als-blog-featured { transition: box-shadow .18s; margin-bottom: 2.5rem; }
.elementor .als-blog-featured:hover { box-shadow: var(--als-shadow-lg); }

.elementor .als-bf-media { position: relative; min-height: 20rem; overflow: hidden; }

.elementor .als-bf-media .elementor-widget-image,
.elementor .als-bf-media .elementor-widget-container,
.elementor .als-bf-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.elementor .als-bf-tag { width: fit-content; margin-bottom: 1.125rem; }
.elementor .als-bf-tag-icon { line-height: 0; }

.elementor .als-bf-tag-text .elementor-heading-title {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.elementor .als-bf-title .elementor-heading-title {
	font-size: 1.75rem;     /* 28px */
	font-weight: 800;
	letter-spacing: var(--als-tracking-tight);
	line-height: 1.18;
	margin-bottom: 0.875rem;
}

.elementor .als-bf-excerpt { font-size: 0.9375rem; line-height: 1.7; margin-bottom: 1.375rem; }
.elementor .als-bf-excerpt p { margin: 0; }

/* Linha "data · autor" */
.elementor .als-blog-meta { margin-bottom: 0.875rem; }
.elementor .als-blog-date .elementor-heading-title,
.elementor .als-blog-author .elementor-heading-title { font-size: 0.78125rem; font-weight: 400; }
.elementor .als-blog-author .elementor-heading-title { font-weight: 600; }

.elementor .als-blog-dot .elementor-heading-title {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--als-gray-400);
	display: block;
}

/* "Lire l'article" */
.elementor .als-blog-readmore .elementor-heading-title,
.elementor .als-bc-foot .elementor-heading-title { font-size: 0.875rem; font-weight: 700; }
.elementor .als-bc-foot .elementor-heading-title { font-size: 0.8125rem; font-weight: 600; }
.elementor .als-blog-readmore-icon { line-height: 0; }

/* A grade do blog tem 6 células: 5 artigos (Loop Grid) e o cartão azul de chamada, que é
   layout e não post. Para os dois ficarem na MESMA grade, os wrappers do widget de loop
   somem com `display: contents` — sem isso o loop inteiro ocuparia uma célula só e o
   cartão cairia na segunda. São três níveis porque o Elementor empilha três divs entre o
   container e os itens. */
.elementor .als-blog-grade-env > .elementor-widget-loop-grid,
.elementor .als-blog-grade-env > .elementor-widget-loop-grid > .elementor-widget-container,
.elementor .als-blog-grade-env .elementor-loop-container {
	display: contents;
}

/* Achatar os wrappers expõe dois elementos que o Loop Grid carrega junto e que passariam
   a ocupar CÉLULA: a âncora de "carregar mais" (vazia — some com `contents`) e a
   paginação (tem de atravessar a largura toda e ficar por último, senão empurra o cartão
   de chamada para uma terceira linha, que foi exatamente o que aconteceu). */
.elementor .als-blog-grade-env .e-load-more-anchor { display: contents; }

.elementor .als-blog-grade-env .elementor-pagination {
	grid-column: 1 / -1;
	order: 1;           /* os cartões ficam em 0: a paginação sempre fecha a grade */
}

/* Cartão da grade */
.elementor .als-blog-card { transition: box-shadow .16s, transform .16s, border-color .16s; height: 100%; }

/* Cartão de chamada: mesma silhueta, azul, conteúdo centrado na vertical. */
.elementor .als-blog-card-chamada:hover { border-color: var(--e-global-color-als_orange, #FFAA06); }
.elementor .als-blog-chamada-icone { line-height: 0; margin-bottom: 0.875rem; }
/* `.elementor` na frente: a regra do titulo de cartao (`.als-bc-title`, 17px) e mais
   especifica e vencia — o titulo da chamada saia a 17px em vez dos 20px da maquete. */
.elementor .als-blog-card-chamada .als-bc-title.als-blog-chamada-titulo .elementor-heading-title { font-size: 1.25rem; }
.elementor .als-blog-chamada-texto { margin-bottom: 0.875rem; }

.elementor .als-blog-card:hover {
	box-shadow: var(--als-shadow-md);
	transform: translateY(-3px);
	border-color: var(--e-global-color-als_blue_300, #5cbcc8);
}

.elementor .als-bc-media { position: relative; overflow: hidden; }
.elementor .als-bc-media:not(:has(img)) { aspect-ratio: 16 / 10; }

.elementor .als-bc-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.elementor .als-blog-card:hover .als-bc-media img { transform: scale(1.05); }

.elementor .als-bc-tag {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 2;
}

.elementor .als-bc-tag .elementor-heading-title {
	background: var(--als-blanc-94);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.25rem 0.625rem;
	border-radius: var(--als-radius-sm);
	display: inline-block;
}

.elementor .als-bc-body { flex: 1; }

.elementor .als-bc-title .elementor-heading-title {
	font-size: 1.0625rem;   /* 17px */
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.32;
	margin-bottom: 0.75rem;
}

.elementor .als-bc-excerpt { font-size: 0.84375rem; line-height: 1.6; margin-bottom: 1.125rem; flex: 1; }
.elementor .als-bc-excerpt p { margin: 0; }

/* A grade do Loop Grid segue o mesmo respiro da maquete. */
.elementor .als-blog-featured-grid .elementor-grid { grid-template-columns: 1fr; }

/* ── Página de artigo ────────────────────────────────────────────────────── */

/* Barra de leitura fixa no topo (o widget nativo cuida do cálculo). */
.elementor .als-read-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1200;
	padding: 0;
}

.elementor .als-read-progress .elementor-widget-container { padding: 0; }

/* A maquete tem uma FITA de 3px na laranja da marca (`.read-progress`, quins.css:186).
   O widget nativo entregava uma faixa de 20px com o preenchimento em 0 de altura e no
   verde padrão do Elementor — ou seja, invisível. Aqui a altura é imposta na trilha E no
   preenchimento: sem a segunda, o `.current-progress` continua com 0px e a barra some. */
.elementor .als-read-progress,
.elementor .als-read-progress-bar,
.elementor .als-read-progress-bar .elementor-widget-container,
.elementor .als-read-progress-bar .elementor-scrolling-tracker {
	height: 0.1875rem;      /* 3px */
	min-height: 0;
	line-height: 0;
}

/* O widget nativo é o "Scrolling Progress" (`.elementor-scrolling-tracker`), não o
   `progress-tracker` das barras de porcentagem — errar a classe deixa a trilha em 20px
   por dentro de um wrapper de 3px, que foi como ela chegou aqui. */
.elementor .als-read-progress-bar .current-progress {
	height: 100%;
	background-color: var(--e-global-color-als_orange, #FFAA06);
	transition: width 0.1s linear;
}

/* O rótulo de porcentagem não existe na maquete. */
.elementor .als-read-progress-bar .current-progress-percentage { display: none; }

.elementor .als-article-cat { width: fit-content; margin-bottom: 1.25rem; }
.elementor .als-article-cat-icon { line-height: 0; }

.elementor .als-article-cat-text .elementor-heading-title {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.elementor .als-article-title .elementor-heading-title {
	font-size: 2.625rem;    /* 42px */
	font-weight: 800;
	letter-spacing: var(--als-tracking-tight);
	line-height: 1.1;
	margin-bottom: 1.375rem;
}

/* Foto do autor: 44px redondos, como a maquete. */
.elementor .als-article-avatar,
.elementor .als-article-avatar img {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.elementor .als-article-author .elementor-heading-title { font-size: 0.875rem; font-weight: 700; }
.elementor .als-article-meta .elementor-heading-title { font-size: 0.8125rem; font-weight: 400; }
.elementor .als-article-share { margin-left: auto; }

.elementor .als-article-cover img {
	width: 100%;
	display: block;
	border-radius: var(--als-radius-lg);
	box-shadow: var(--als-shadow-md);
}

/* Sumário: acompanha a rolagem, como na maquete. */
@media (min-width: 1025px) {
	.elementor .als-toc-col { position: sticky; top: 5.625rem; align-self: start; }
}

.elementor .als-toc-title .elementor-heading-title {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.elementor .als-toc .elementor-toc__header { display: none; }
.elementor .als-toc .elementor-toc__body { padding: 0; }
.elementor .als-toc .elementor-toc__list-item { padding: 0; }

/* Numeração 01, 02, 03… como na maquete (`.toc ol li a::before`, quins.css:210).
   O widget nativo do Elementor não numera — a lista sai sem marcador nenhum (medido:
   `content: none`). O contador é do CSS, então continua certo se o cliente inserir ou
   remover um H2: nada aqui é escrito à mão. */
.elementor .als-toc .elementor-toc__list-wrapper { counter-reset: als-toc; }
.elementor .als-toc .elementor-toc__list-item { counter-increment: als-toc; }

.elementor .als-toc .elementor-toc__list-item-text-wrapper {
	display: flex;
	align-items: flex-start;   /* o número acompanha a PRIMEIRA linha quando o título quebra */
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: var(--als-radius-sm);
	font-size: 0.8125rem;
	line-height: 1.4;
	border-left: 2px solid transparent;
}

.elementor .als-toc .elementor-toc__list-item-text-wrapper::before {
	content: counter(als-toc, decimal-leading-zero);
	flex: none;
	font-weight: 700;
	color: var(--e-global-color-als_blue_300, #7FC7D0);
}

.elementor .als-toc .elementor-toc__list-item-text-wrapper:hover::before { color: inherit; }

.elementor .als-toc .elementor-toc__list-item-text-wrapper:hover { background: var(--e-global-color-als_blue_wash, #F2F9FA); }

/* Texto do artigo: a tipografia longa da maquete. */
/* A coluna de texto tem largura de leitura fixa (45rem = 720px, como a maquete).
   Fica no wrapper interno: o widget em si e o item do grid e precisa esticar. */
.elementor .als-article-prose .elementor-widget-container { max-width: 45rem; }

/* Primeiro paragrafo = chapô: maior e mais escuro, como na maquete. */
.elementor .als-article-prose .elementor-widget-container > p:first-of-type {
	font-size: 1.1875rem;   /* 19px */
	font-weight: 500;
	line-height: 1.7;
	color: var(--e-global-color-als_black, #1E1E1E);
	margin-bottom: 2rem;
}

.elementor .als-article-prose p {
	font-size: 1.03125rem;  /* 16.5px */
	line-height: 1.85;
	color: var(--als-article-ink);
	margin-bottom: 1.375rem;
}

.elementor .als-article-prose h2 {
	font-weight: 800;
	font-size: 1.625rem;
	letter-spacing: var(--als-tracking-tight);
	line-height: 1.2;
	color: var(--e-global-color-als_black, #1E1E1E);
	margin: 2.75rem 0 1.125rem;
	scroll-margin-top: 5.625rem;
}

.elementor .als-article-prose h3 {
	font-weight: 700;
	font-size: 1.1875rem;
	letter-spacing: -0.02em;
	color: var(--e-global-color-als_blue, #008FA1);
	margin: 1.75rem 0 0.75rem;
}

.elementor .als-article-prose a {
	color: var(--e-global-color-als_blue, #008FA1);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--als-blue-300);
}

.elementor .als-article-prose ul { list-style: none; display: flex; flex-direction: column; gap: 0.6875rem; margin: 0 0 1.5rem; padding: 0; }

.elementor .als-article-prose ul li {
	position: relative;
	padding-left: 1.875rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--e-global-color-als_fg2, #4a4a4f);
}

/* O marcador da lista é o mesmo "check" da maquete.
   NÃO usa Font Awesome: a página do artigo não carrega nenhum icon set (o Elementor só
   enfileira Font Awesome quando algum widget de ícone o pede, e aqui não há nenhum), então
   `content:'\f00c'` saía em branco — o marcador simplesmente não aparecia. Medido no ar:
   `::before` presente, cor certa, glifo vazio. O desenho agora é um SVG embutido aplicado
   como máscara, então a cor continua vindo do token da marca e não há fonte a carregar. */
.elementor .als-article-prose ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.3125rem;
	width: 1.1875rem;
	height: 1.1875rem;
	background-color: var(--e-global-color-als_blue, #008FA1);
	-webkit-mask: var(--als-icone-check) center / contain no-repeat;
	mask: var(--als-icone-check) center / contain no-repeat;
}

/* O desenho do check vive aqui (e não em tokens.css, que é GERADO por tokens.mjs a partir
   do colors_and_type.css — o que for escrito lá some no próximo build). */
.elementor .als-article-prose ul li::before {
	--als-icone-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.65 4.3 12.4l1.4-1.4 3.85 3.85 8.75-8.75 1.4 1.4z'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	.elementor .als-article-title .elementor-heading-title { font-size: 1.75rem; }
	.elementor .als-toc-col { display: none; }
}

/* Item de flex nao encolhe abaixo do conteudo (min-width: auto) — dentro das
   colunas do mural isso empurra o card para fora e a pagina ganha rolagem
   horizontal no tablet. `min-width: 0` devolve o encolhimento. */
.elementor .als-quote-card-foot > *,
.elementor .als-quote-author > * { min-width: 0; }

.elementor .als-quote-card-name .elementor-heading-title,
.elementor .als-quote-card-role .elementor-heading-title,
.elementor .als-quote-name .elementor-heading-title,
.elementor .als-quote-role .elementor-heading-title { overflow-wrap: anywhere; }

/* Container filho nasce com `--width: 100%`: numa linha flex ele toma a linha
   inteira e o vizinho fica com 0 (foi o que deixou o nome do depoimento em
   destaque saindo letra a letra na vertical). Estes encolhem no conteudo. */
.elementor .als-quote-logo,
.elementor .als-quote-card-logo { --width: fit-content; }

/* Container filho nasce com `--width: 100%`. Dentro de uma LINHA isso empurra os
   vizinhos para baixo (a assinatura do artigo quebrava em tres linhas). Nas linhas
   abaixo o filho volta a ocupar so o que precisa. */
.elementor .als-article-byline > .e-con,
.elementor .als-quote-author > .e-con,
.elementor .als-quote-card-foot > .e-con,
.elementor .als-fiche-row > .e-con,
.elementor .als-head-acao > .e-con { --width: auto; }

.elementor .als-article-byline { flex-wrap: nowrap; }
.elementor .als-article-byline > .e-con { flex: 1 1 auto; min-width: 0; }

/* O sumario do Pro vem numa caixa com borda; a maquete mostra so a lista. */
.elementor .als-toc .elementor-widget-container {
	border: none;
	background: transparent;
	padding: 0;
}

/* ── Estados vazios (projeto sem ficha, sem números, sem figura) ──────────── */

/* Quando a dynamic tag não tem valor, o Elementor NÃO imprime o widget. Isso é o
   que o `:has()` usa: se a linha não tem um `.als-fiche-value` dentro, é porque o
   campo está vazio — some a linha inteira em vez de mostrar rótulo órfão. */
.elementor .als-fiche-row:not(:has(.als-fiche-value)) { display: none; }
.elementor .als-fiche:not(:has(.als-fiche-value)) { display: none; }
.elementor .als-stat:not(:has(.als-stat-num)) { display: none; }
.elementor .als-stats-band:not(:has(.als-stat-num)) { display: none; }
.elementor .als-toc-col:not(:has(.elementor-toc__list-item)) { visibility: hidden; }

/* Seção que ficou sem nenhum widget (ex.: a da figura num projeto sem imagem)
   não deve ocupar altura. */
.elementor .als-section:not(:has(.elementor-widget)) { display: none; }

/* A foto do héro precisa preencher a caixa: o widget do Elementor é
   `position: relative` com altura automática, então a imagem absoluta dentro dele
   media 0 — é o widget que tem de esticar. */
.elementor .als-hf-img .elementor-widget-image { position: absolute; inset: 0; }

/* Fil d'ariane do template de post: trilha + item atual (dinâmico) na mesma linha. */
.elementor .als-breadcrumb-linha .als-bc-cur .elementor-heading-title {
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Projeto sem ficha: o texto ocupa a largura toda em vez de deixar metade vazia.
   Dois casos, porque a ficha some de duas formas: (a) o plugin NAO IMPRIME o container
   quando todos os campos estao vazios (should_render) — o split fica com UM filho so;
   (b) a ficha e impressa mas nenhuma linha tem valor. A regra antiga so cobria (b), e o
   caso real da migracao (31 projetos sem localizacao/cliente) e (a): a coluna direita
   ficava em branco — medido no Saran depois da migracao. */
/* So na PAGINA DE PROJETO (`.single-realisation` no body): Notre concept e Qui sommes-nous
   tambem usam `.als-split` — texto + texto, sem ficha por desenho — e a primeira versao
   desta regra colapsou os dois para uma coluna (pego pelo comparador: 1120px contra
   607/448 da maquete). */
body.single-realisation .elementor .als-split:not(:has(.als-fiche)),
.elementor .als-split:has(.als-fiche):not(:has(.als-fiche-value)) { grid-template-columns: 1fr; }

/* Uma coluna so: o texto volta a ter largura de leitura, nao a da pagina inteira. */
body.single-realisation .elementor .als-split:not(:has(.als-fiche)) > .als-head { max-width: 46rem; }