/*
Theme Name: Geoma
Theme URI: https://geomaconsultoria.com.br
Description: Tema institucional da Geoma Consultoria Ambiental, construído sobre o Hello Elementor para edição total via Elementor.
Author: Geoma Consultoria Ambiental
Template: hello-elementor
Version: 1.0.0
Text Domain: geoma
*/

/* ==================================================================
   GEOMA — DESIGN SYSTEM
   Tokens e componentes que reproduzem o design original.
   Aplicados via classes CSS nos widgets do Elementor, mantendo
   todo o conteúdo editável no editor visual.
   ================================================================== */

:root {
	--geoma-graphite: #3C3C3B;
	--geoma-graphite-soft: #59564F;
	--geoma-moss: #5C673B;
	--geoma-moss-dark: #454E2C;
	--geoma-sand-light: #EDE9DD;
	--geoma-sand-dark: #D1CCB6;
	--geoma-font-heading: "Montserrat", sans-serif;
	--geoma-font-body: "Inter", sans-serif;
	--geoma-ease: cubic-bezier(.4, 0, .2, 1);
	--geoma-shadow-card: 0 1px 2px rgba(60, 60, 59, .04), 0 4px 16px rgba(60, 60, 59, .05);
	--geoma-shadow-card-hover: 0 4px 8px rgba(60, 60, 59, .06), 0 12px 32px rgba(60, 60, 59, .1);
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

body {
	font-family: var(--geoma-font-body);
	color: var(--geoma-graphite);
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--geoma-font-heading);
	color: var(--geoma-graphite);
}

/* Compensa o cabeçalho fixo ao navegar por âncoras (#regularizacao-ambiental etc.) */
:target {
	scroll-margin-top: 130px;
}

/* ------------------------------------------------------------------
   Eyebrow — rótulo com traço à esquerda
   ------------------------------------------------------------------ */

.geoma-eyebrow .elementor-heading-title,
.geoma-eyebrow p {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-family: var(--geoma-font-heading);
	font-size: .75rem;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--geoma-moss);
	margin: 0;
}

.geoma-eyebrow .elementor-heading-title::before,
.geoma-eyebrow p::before {
	content: "";
	height: 1px;
	width: 2rem;
	background-color: rgba(92, 103, 59, .6);
	flex: none;
}

/* Variante centralizada (sem o traço), como no design */
.geoma-eyebrow--center .elementor-heading-title::before,
.geoma-eyebrow--center p::before {
	display: none;
}

/* ------------------------------------------------------------------
   Títulos de seção
   ------------------------------------------------------------------ */

.geoma-section-title .elementor-heading-title {
	font-family: var(--geoma-font-heading);
	font-size: 1.875rem;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--geoma-graphite);
}

@media (min-width: 640px) {
	.geoma-section-title .elementor-heading-title {
		font-size: 2.25rem;
	}
}

@media (min-width: 1024px) {
	.geoma-section-title .elementor-heading-title {
		font-size: 2.75rem;
	}
}

.geoma-section-title--light .elementor-heading-title {
	color: #fff;
}

/* Subtítulo de seção */
.geoma-section-subtitle p {
	color: var(--geoma-graphite-soft);
	font-size: 1rem;
	line-height: 1.625;
	margin: 0;
	max-width: 42rem;
}

/* Centralizado: a caixa de 42rem também fica centralizada */
.geoma-section-subtitle--center p {
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 640px) {
	.geoma-section-subtitle p {
		font-size: 1.125rem;
	}
}

/* Texto corrido (parágrafos de conteúdo) */
.geoma-body-text p {
	color: var(--geoma-graphite-soft);
	font-size: 1rem;
	line-height: 1.625;
	margin: 0;
}

/* Espaçamento entre parágrafos do mesmo bloco de texto */
.geoma-section-subtitle p + p,
.geoma-body-text p + p,
.geoma-card-text p + p,
.geoma-footer-text p + p {
	margin-top: 1rem;
}

.geoma-body-text a {
	color: var(--geoma-moss);
	text-decoration: none;
}

.geoma-body-text a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   Páginas legais (Termos de Uso / Política de Privacidade) — hero com
   título + conteúdo ocupando a largura total da página.
   ------------------------------------------------------------------ */

/* O espaçamento entre os blocos de subtítulo/texto é controlado só pela margem
   superior de cada elemento; zeramos a margem inferior automática que o
   Elementor injeta (--kit-widget-spacing) para não somar aos dois. */
.geoma-legal > .elementor-widget-wrap > .elementor-widget {
	margin-bottom: 0 !important;
}

.geoma-legal-subtitle .elementor-heading-title {
	font-family: var(--geoma-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--geoma-graphite);
}

.geoma-section-subtitle--light p {
	color: rgba(255, 255, 255, .9);
}

/* ------------------------------------------------------------------
   Botões
   ------------------------------------------------------------------ */

.geoma-btn .elementor-button,
a.geoma-btn-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border-radius: 9999px;
	/* !important: renderizar o template de artigo via get_builder_content_for_display()
	   no meio do the_content injeta de novo o CSS do kit mais abaixo no DOM,
	   fazendo o "--e-global-color-accent" (bege) vencer o empate de especificidade
	   com a cor de fundo do botão — em qualquer página que contenha o artigo. */
	background-color: var(--geoma-moss) !important;
	padding: .875rem 1.75rem;
	font-family: var(--geoma-font-heading);
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: #fff !important;
	border: 0;
	white-space: nowrap;
	transition: all .2s var(--geoma-ease);
}

.geoma-btn .elementor-button .elementor-button-text {
	flex-grow: 0;
}

.geoma-btn .elementor-button:hover,
.geoma-btn .elementor-button:focus,
a.geoma-btn-link:hover {
	background-color: var(--geoma-moss-dark);
	color: #fff;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

/* Botão secundário (fundo branco, texto grafite) */
.geoma-btn--ghost .elementor-button {
	/* !important: precisa vencer o !important da regra base (.geoma-btn),
	   que por sua vez existe para vencer a cor "accent" do kit do Elementor. */
	background-color: #fff !important;
	color: var(--geoma-graphite) !important;
}

.geoma-btn--ghost .elementor-button:hover,
.geoma-btn--ghost .elementor-button:focus {
	background-color: var(--geoma-sand-light);
	color: var(--geoma-graphite);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

/* Link com seta */
.geoma-link-arrow a,
a.geoma-link-arrow {
	font-family: var(--geoma-font-heading);
	font-weight: 600;
	font-size: .875rem;
	color: var(--geoma-moss);
	text-decoration: none;
	transition: color .2s var(--geoma-ease);
}

.geoma-link-arrow a:hover,
a.geoma-link-arrow:hover {
	color: var(--geoma-moss-dark);
}

/* ------------------------------------------------------------------
   Cartões
   ------------------------------------------------------------------ */

.geoma-card {
	border-radius: 1rem;
	border: 1px solid rgba(60, 60, 59, .08);
	background-color: #fff;
	overflow: hidden;
	transition: all .3s var(--geoma-ease);
	box-shadow: var(--geoma-shadow-card);
	height: 100%;
}

.geoma-card:hover {
	transform: translateY(-.25rem);
	box-shadow: var(--geoma-shadow-card-hover);
}

/* Faixa superior do cartão — foto real de cada área de atuação */
.geoma-card-head {
	height: 9rem;
	overflow: hidden;
}

/* Faixa mais alta nos cards de case do Portfólio */
.geoma-card-head--tall {
	height: 10rem;
}

.geoma-card-head .elementor-widget-image,
.geoma-card-head .elementor-widget-container {
	margin: 0;
	height: 100%;
}

.geoma-card-head img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Numeração dos cartões (01, 02, ...) */
.geoma-card-num .elementor-heading-title,
.geoma-card-num p {
	font-family: var(--geoma-font-heading);
	font-size: .875rem;
	font-weight: 600;
	color: var(--geoma-moss);
	margin: 0;
}

.geoma-card-title .elementor-heading-title {
	font-family: var(--geoma-font-heading);
	font-size: 1.125rem;
	line-height: 1.35;
	font-weight: 700;
	color: var(--geoma-graphite);
}

.geoma-card-text p {
	font-size: .875rem;
	line-height: 1.6;
	color: var(--geoma-graphite-soft);
	margin: 0;
}

/* ------------------------------------------------------------------
   Diferenciais — caixa com ícone em círculo
   ------------------------------------------------------------------ */

.geoma-diff {
	border-radius: 1rem;
	border: 1px solid rgba(60, 60, 59, .1);
	padding: 1.75rem;
	/* height:100% desativa o stretch automático do flexbox (mesmo problema já
	   corrigido nos cards de serviço) — os 3 cards ficavam com alturas
	   diferentes. align-self:stretch iguala todos ao mais alto. */
	height: auto;
	align-self: stretch !important;
}

/* O preset de gap do Elementor só dá padding DENTRO de cada coluna — como o
   fundo/borda do card estão na própria coluna, as 3 de 33% somam 100% e
   ficam coladas. Um column-gap de verdade força o flex-shrink a abrir vão. */
.elementor-container:has(> .geoma-diff) {
	column-gap: 2.5rem;
	row-gap: 2rem;
}

/* Ícone no topo dos cards de Diferenciais da página Sobre (no lugar do
   número 01/02/03), centralizado horizontalmente acima do título. */
.geoma-diff-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto;
	border-radius: 9999px;
	background-color: rgba(92, 103, 59, .1);
}

/* Ícone dentro de um círculo verde translúcido.
   !important necessário: o próprio Elementor gera uma regra por-widget
   (".elementor-31 .elementor-element.elementor-element-XXXX{width:auto}")
   com 3 classes de especificidade, que vence a nossa de 1 classe. */
.geoma-diff-icon,
.geoma-diff-icon .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem !important;
	height: 2.75rem !important;
	max-width: 2.75rem !important;
	border-radius: 9999px;
	background-color: rgba(92, 103, 59, .1);
}

.geoma-diff-icon .elementor-widget-container {
	width: 100%;
	height: 100%;
	background: transparent;
}

.geoma-diff-icon img {
	width: 1.25rem;
	height: 1.25rem;
}

.geoma-diff-title .elementor-heading-title {
	font-family: var(--geoma-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--geoma-graphite);
}

/* O Elementor soma 20px de espaçamento padrão entre widgets (--kit-widget-spacing)
   mesmo com a margem do widget zerada; forçamos a margem final para colar o texto no título. */
.geoma-diff-row .geoma-diff-title {
	margin: 0 0 4px 0 !important;
}

/* Diferenciais da home empilhados em coluna única, com fundo alternado */
.geoma-diff-row {
	border-radius: 1rem;
	transition: transform .3s var(--geoma-ease), box-shadow .3s var(--geoma-ease);
}

.geoma-diff-row--white {
	background-color: #fff;
	border: 1px solid rgba(60, 60, 59, .08);
}

/* Verde sólido da marca, com texto e ícone em branco para contraste */
.geoma-diff-row--green {
	background-color: var(--geoma-moss);
}

.geoma-diff-row--green .geoma-diff-title .elementor-heading-title {
	color: #fff;
}

.geoma-diff-row--green .geoma-card-text p {
	color: rgba(255, 255, 255, .85);
}

.geoma-diff-row--green .geoma-diff-icon {
	background-color: rgba(255, 255, 255, .18) !important;
}

.geoma-diff-row:hover {
	transform: translateY(-2px);
	box-shadow: var(--geoma-shadow-card);
}

.geoma-diff-icon-col .elementor-widget-wrap {
	justify-content: center;
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */

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

/* Hero da home ocupa a altura da janela menos o cabeçalho (7rem), como no design */
.geoma-hero:not(.geoma-hero-sub) {
	min-height: calc(100vh - 7rem);
	display: flex;
	align-items: center;
}

.geoma-hero-badge .elementor-heading-title,
.geoma-hero-badge p {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	background-color: var(--geoma-moss);
	padding: .5rem 1.25rem;
	font-family: var(--geoma-font-heading);
	font-size: .875rem;
	font-weight: 600;
	color: #fff;
	margin: 0;
}

.geoma-hero-title .elementor-heading-title {
	font-family: var(--geoma-font-heading);
	font-size: 2.25rem;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -.025em;
	color: #fff;
	max-width: 56rem;
}

@media (min-width: 640px) {
	.geoma-hero-title .elementor-heading-title {
		font-size: 3rem;
	}
}

@media (min-width: 1024px) {
	.geoma-hero-title .elementor-heading-title {
		font-size: 3.4rem;
	}
}

.geoma-hero-text p {
	color: var(--geoma-sand-light);
	font-size: 1.1875rem;
	line-height: 1.6;
	max-width: 40rem;
	margin: 0;
}

/* O Elementor injeta +20px de margem inferior automática em todo widget
   que não é o último do bloco — some com a nossa margem superior e deixa
   os textos da hero mais afastados do que o configurado. */
.geoma-hero-title,
.geoma-hero-text {
	margin-bottom: 0 !important;
}

/* Botões do hero lado a lado, alinhados à esquerda */
.geoma-hero-actions > .elementor-widget-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: 0;
}

.geoma-hero-actions > .elementor-widget-wrap > .elementor-widget {
	width: auto;
	flex: none;
	margin: 0;
}

/* Hero das páginas internas */
.geoma-hero-sub .geoma-hero-title .elementor-heading-title {
	font-size: 2.25rem;
}

@media (min-width: 640px) {
	.geoma-hero-sub .geoma-hero-title .elementor-heading-title {
		font-size: 3rem;
	}
}

.geoma-hero-sub .geoma-hero-text p {
	max-width: 44rem;
}

/* Variante centralizada (hero da Academia/Central de Conhecimento).
   O texto tem "align:center" via Elementor, mas o bloco (max-width) fica
   ancorado à esquerda sem margin:auto — centralizamos o bloco também. */
.geoma-hero-sub--center .geoma-hero-title .elementor-heading-title,
.geoma-hero-sub--center .geoma-hero-text p {
	margin-left: auto;
	margin-right: auto;
}

.geoma-hero-sub--center .geoma-search {
	/* !important necessário: o Elementor gera margin-left/right:0px explícitos
	   para este widget (regra .elementor-37 .elementor-element-XXXX com mais
	   especificidade), o que impede o auto-centering. */
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ------------------------------------------------------------------
   Marquee — carrossel infinito de logos de clientes
   ------------------------------------------------------------------ */

.geoma-marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* A coluna recebe a classe; o wrap interno do Elementor vira a esteira */
.geoma-marquee-track > .elementor-widget-wrap {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	align-items: center;
	gap: 4rem;
	animation: geoma-marquee 32s linear infinite;
	padding: 0;
}

.geoma-marquee-track > .elementor-widget-wrap > .elementor-widget {
	width: auto;
	flex: none;
	margin: 0;
}

.geoma-marquee-track img {
	height: 2.5rem;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

@media (min-width: 640px) {
	.geoma-marquee-track img {
		height: 3rem;
		max-width: 200px;
	}
}

@keyframes geoma-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.geoma-marquee-track {
		animation: none;
	}
}

/* ------------------------------------------------------------------
   Carrossel arrastável — Áreas de Atuação (home)
   Mostra 3 cards por vez; o 4º fica acessível arrastando para o lado.
   ------------------------------------------------------------------ */

/* O Elementor insere um .elementor-container entre a seção e as colunas —
   é ELE o flex container real (já é display:flex por padrão do Elementor). */
.geoma-areas-carousel {
	position: relative;
}

.geoma-areas-carousel > .elementor-container {
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	/* Barra de rolagem escondida: a navegação é pelas setas laterais. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.geoma-areas-carousel > .elementor-container::-webkit-scrollbar {
	display: none;
}

.geoma-areas-carousel.geoma-dragging > .elementor-container {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

/* ------------------------------------------------------------------
   Setas de navegação do carrossel
   ------------------------------------------------------------------ */

.geoma-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	border: 0;
	/* !important necessário: o Kit do Elementor tem uma regra global
	   ".elementor-kit-7 button{background-color:#5C673B}" que, por ter um
	   seletor de tag além da classe, empata em número de classes e vence
	   no desempate por especificidade. */
	background-color: #fff !important;
	color: var(--geoma-moss) !important;
	box-shadow: var(--geoma-shadow-card-hover);
	cursor: pointer;
	transition: background-color .2s var(--geoma-ease), transform .2s var(--geoma-ease), opacity .2s var(--geoma-ease);
}

.geoma-carousel-arrow:hover {
	background-color: var(--geoma-moss) !important;
	color: #fff !important;
}

.geoma-carousel-arrow svg {
	width: 1.25rem;
	height: 1.25rem;
}

.geoma-carousel-arrow--prev {
	left: -1.375rem;
}

.geoma-carousel-arrow--next {
	right: -1.375rem;
}

.geoma-carousel-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 767px) {
	.geoma-carousel-arrow {
		width: 2.25rem;
		height: 2.25rem;
	}
	.geoma-carousel-arrow--prev { left: .25rem; }
	.geoma-carousel-arrow--next { right: .25rem; }
}

.geoma-areas-carousel .geoma-areas-slide {
	flex: 0 0 calc((100% - 3rem) / 3) !important;
	max-width: calc((100% - 3rem) / 3) !important;
	width: auto !important;
	/* "height:100%" do .geoma-card impede o align-items:stretch do flex de
	   igualar os cards — sem uma altura definida no pai, "100%" não resolve
	   e cada card volta à altura natural do próprio conteúdo. Com "auto" o
	   stretch nativo do flexbox iguala todos ao card mais alto. */
	height: auto !important;
	scroll-snap-align: start;
}

/* Títulos de tamanhos diferentes empurram o "Ver serviços" para alturas
   diferentes em cada card. Forçando a coluna interna a virar flex-column,
   o link (último item) pode usar margin-top:auto para ficar sempre colado
   na base do card, na mesma posição em todos eles. */
.geoma-areas-carousel .geoma-areas-slide .elementor-widget-wrap {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}

/* Em flex-direction:row (padrão do Elementor) o item "width:100%" estourava
   a linha junto com as margens de 28px, e o próprio flex-shrink comprimia o
   texto de volta ao encaixe — por acidente, mas funcionava. Em column isso
   não acontece (shrink só atua no eixo principal, que virou vertical), então
   o texto passava a vazar para fora do card. Com width:auto o stretch do
   flexbox calcula certo: 100% do card menos as margens de cada lado. */
.geoma-areas-carousel .geoma-areas-slide .elementor-widget-wrap > .elementor-element {
	width: auto !important;
}

.geoma-areas-carousel .geoma-areas-slide .elementor-widget-wrap > .elementor-element:last-child {
	margin-top: auto !important;
	/* A regra ".geoma-card .elementor-widget:last-child{margin-bottom:0}" (mais
	   específica que a margem própria gerada pelo Elementor para este widget)
	   zerava esse espaço; forçamos aqui o respiro real entre o link e a base do card. */
	margin-bottom: 3rem !important;
}

.geoma-areas-carousel .geoma-areas-slide a,
.geoma-areas-carousel .geoma-areas-slide img {
	-webkit-user-drag: none;
	user-select: none;
}

@media (max-width: 1024px) {
	.geoma-areas-carousel .geoma-areas-slide {
		flex: 0 0 calc((100% - 1.5rem) / 2) !important;
		max-width: calc((100% - 1.5rem) / 2) !important;
	}
}

@media (max-width: 640px) {
	.geoma-areas-carousel .geoma-areas-slide {
		flex: 0 0 82% !important;
		max-width: 82% !important;
	}
}

/* ------------------------------------------------------------------
   Rotador de artigos (bloco Academia Geoma)
   ------------------------------------------------------------------ */

.geoma-article-rotator > .elementor-widget-wrap {
	position: relative;
	display: block;
}

/* Centraliza verticalmente a coluna de texto contra a do card, mais alta.
   O "Content Position: Middle" do próprio Elementor não tem efeito aqui
   (exige a classe .elementor-bc-flex-widget no body, que este site não usa). */
.geoma-academia-section > .elementor-container {
	align-items: center;
}

.geoma-article-rotator .geoma-article-slide {
	transition: opacity .7s ease-in-out;
	background: #fff;
	/* Altura fixa e igual nos 3 cards: sem ela, a troca de slide também mudava
	   a altura do card instantaneamente, e a transição de opacidade parecia um corte seco. */
	height: 27.5rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* O Elementor injeta +20px de margem inferior em todo widget que não é o
   último do bloco (--kit-widget-spacing), somando-se à nossa margem e
   deixando o card com vãos desproporcionais. Zeramos essa margem extra
   e controlamos o espaçamento só pela margem superior de cada elemento. */
.geoma-article-slide .geoma-article-image,
.geoma-article-slide .geoma-article-title,
.geoma-article-slide .geoma-article-desc,
.geoma-article-slide .geoma-article-byline,
.geoma-article-slide .geoma-badge,
.geoma-article-slide .geoma-card-text,
.geoma-article-card .geoma-article-image,
.geoma-article-card .geoma-article-title,
.geoma-article-card .geoma-article-desc,
.geoma-article-card .geoma-article-byline,
.geoma-article-card .geoma-badge,
.geoma-article-card .geoma-card-text {
	margin-bottom: 0 !important;
}

/* Cards de artigo em grade estática (Central de Conhecimento) — mesmo
   padrão visual dos cards da Home (imagem, badge, título, texto, link),
   só que sem o empilhamento absoluto do rotador. Altura fixa e igual
   para todos, já que a descrição de cada artigo tem tamanho diferente. */
.geoma-article-card {
	background: #fff;
	height: 30rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* O Elementor dá 15px de padding padrão ao conteúdo da coluna — isso
   empurrava a imagem para longe da borda. Zeramos aqui e mantemos o
   respiro do texto abaixo via margem própria de cada elemento. */
.geoma-article-card > .elementor-widget-wrap {
	padding: 0 !important;
}

/* Sem efeito de hover nestes cards, por pedido — sobrescreve o
   translateY/sombra que .geoma-card:hover aplica por padrão. */
.geoma-article-card:hover {
	transform: none;
	box-shadow: var(--geoma-shadow-card);
}

.geoma-article-byline {
	flex: none;
}

/* Grade única (não duas seções fixas) para o filtro poder esconder/mostrar
   cards sem deixar buracos — os que sobram se reorganizam sozinhos. */
.geoma-article-grid > .elementor-container {
	flex-wrap: wrap !important;
	row-gap: 3rem;
	/* O padding:0 que cola a imagem no topo do card (abaixo) também é o
	   mecanismo que o Elementor usa para o espaço horizontal "extended"
	   entre colunas — por isso precisamos recriar o gap explicitamente. */
	column-gap: 2.5rem;
}

/* O card usa o width:33.333% nativo do Elementor, que já soma ~100% do
   container — sem espaço sobrando para o column-gap de 2.5rem acima, o
   que empurrava o 3º card para a linha de baixo (só cabiam 2 por linha).
   Redefinimos a largura descontando o gap real (2 vãos de 2.5rem). */
.geoma-article-grid .geoma-article-card {
	flex: 0 0 calc((100% - 5rem) / 3) !important;
	max-width: calc((100% - 5rem) / 3) !important;
	width: auto !important;
}

.geoma-article-grid .geoma-article-card.geoma-filtro-oculto {
	display: none !important;
}

/* ------------------------------------------------------------------
   Filtro por categoria (Central de Conhecimento)
   ------------------------------------------------------------------ */

.geoma-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	justify-content: center;
}

.geoma-filtro-pill {
	display: inline-flex;
	border-radius: 9999px;
	padding: .5rem 1.125rem;
	font-family: var(--geoma-font-heading);
	font-size: .8125rem;
	font-weight: 600;
	background-color: var(--geoma-sand-light);
	color: var(--geoma-moss);
	cursor: pointer;
	user-select: none;
	transition: background-color .2s var(--geoma-ease), color .2s var(--geoma-ease);
}

.geoma-filtro-pill:hover {
	background-color: rgba(92, 103, 59, .25);
}

.geoma-filtro-pill.is-active {
	background-color: var(--geoma-moss);
	color: #fff;
}

.geoma-filtro-pill.is-active:hover {
	background-color: var(--geoma-moss-dark);
}

/* Só o slide ativo ocupa o fluxo; os demais ficam sobrepostos e invisíveis */
.geoma-article-rotator.geoma-rotator-ready .geoma-article-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.geoma-article-rotator.geoma-rotator-ready .geoma-article-slide.geoma-slide-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

.geoma-article-image {
	flex: none;
	margin: 0;
}

.geoma-article-image img {
	width: 100%;
	height: 11rem;
	object-fit: cover;
	display: block;
}

.geoma-article-title .elementor-heading-title {
	font-family: var(--geoma-font-heading);
	font-size: 1.375rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--geoma-graphite);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Descrição também limitada a 2 linhas, para manter a mesma altura nos 3 cards */
.geoma-article-desc p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.geoma-rotator-dots {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: 1rem;
}

.geoma-rotator-dots button {
	width: .5rem;
	height: .5rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, .4);
	cursor: pointer;
	transition: all .2s var(--geoma-ease);
}

.geoma-rotator-dots button.is-active {
	background: #fff;
	width: 1.5rem;
}

/* ------------------------------------------------------------------
   Grade de logos (página Portfólio)
   ------------------------------------------------------------------ */

.geoma-logo-grid .elementor-widget-image {
	border-radius: 1rem;
	border: 1px solid rgba(60, 60, 59, .08);
	background: #fff;
	box-shadow: var(--geoma-shadow-card);
	transition: all .3s var(--geoma-ease);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: .75rem;
}

.geoma-logo-grid .elementor-widget-image:hover {
	transform: translateY(-.25rem);
	box-shadow: var(--geoma-shadow-card-hover);
}

.geoma-logo-grid img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

/* ------------------------------------------------------------------
   Cartões de contato — mesmo padrão do círculo de ícone dos diferenciais
   ------------------------------------------------------------------ */

.geoma-contato-info {
	text-align: left;
}

/* O Elementor soma +20px de margem automática a widgets que não são o
   último do bloco (--kit-widget-spacing); zeramos e usamos só a margem
   superior de cada elemento, como já feito nos outros cartões do site. */
.geoma-contato-info .geoma-diff-icon,
.geoma-contato-info .geoma-card-title {
	margin-bottom: 0 !important;
}

.geoma-contato-link {
	display: block;
	color: var(--geoma-graphite-soft);
	text-decoration: none;
	transition: color .2s var(--geoma-ease);
}

.geoma-contato-link:hover {
	color: var(--geoma-moss);
}

/* ------------------------------------------------------------------
   Campo de busca (Central de Conhecimento)
   ------------------------------------------------------------------ */

.geoma-search {
	max-width: 35rem;
}

.geoma-search form {
	position: relative;
	border-radius: 9999px;
	overflow: hidden;
	background: #fff;
}

/* Botão de busca com a lupa visível — o ícone do Elementor usa fill (SVG),
   não color, e vinha branco (invisível) sobre o fundo branco do campo. */
.geoma-search button[type="submit"] {
	position: absolute;
	right: .5rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--geoma-moss);
	padding: .5rem .75rem;
	cursor: pointer;
	min-width: 0;
}

.geoma-search button[type="submit"] svg {
	fill: var(--geoma-moss) !important;
	width: 1.125rem;
	height: 1.125rem;
}

.geoma-search input[type="search"] {
	width: 100%;
	border: 0;
	border-radius: 9999px;
	background-color: #fff;
	padding: 1rem 1.5rem;
	font-family: var(--geoma-font-body);
	font-size: .875rem;
	color: var(--geoma-graphite);
	outline: none;
	transition: box-shadow .2s var(--geoma-ease);
}

.geoma-search input[type="search"]::placeholder {
	color: var(--geoma-graphite-soft);
}

.geoma-search input[type="search"]:focus {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .4);
}

/* ------------------------------------------------------------------
   Selos / badges de categoria
   ------------------------------------------------------------------ */

.geoma-badge .elementor-heading-title,
.geoma-badge p {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	background-color: var(--geoma-sand-light);
	padding: .25rem .75rem;
	font-family: var(--geoma-font-heading);
	font-size: .75rem;
	font-weight: 600;
	color: var(--geoma-moss);
	margin: 0;
}

/* ------------------------------------------------------------------
   Cabeçalho e menu
   ------------------------------------------------------------------ */

/* O wrapper do template de cabeçalho é o elemento que gruda no topo */
.elementor-location-header {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 999;
	width: 100%;
}

.geoma-header {
	width: 100%;
	background-color: rgba(255, 255, 255, .95);
	backdrop-filter: blur(8px);
	transition: box-shadow .3s var(--geoma-ease);
}

.elementor-location-header .geoma-header.geoma-header--scrolled,
.geoma-header.geoma-header--scrolled {
	box-shadow: 0 1px 3px rgba(60, 60, 59, .08), 0 8px 24px rgba(60, 60, 59, .06) !important;
}

.geoma-nav .elementor-nav-menu .elementor-item {
	position: relative;
	font-family: var(--geoma-font-heading);
	font-size: .875rem;
	font-weight: 500;
	color: rgba(60, 60, 59, .8);
	padding: 0 0 .25rem 0;
	transition: color .2s var(--geoma-ease);
	fill: currentColor;
}

.geoma-nav .elementor-nav-menu .elementor-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.5rem;
	height: .125rem;
	transform: scaleX(0);
	transform-origin: left;
	border-radius: 9999px;
	/* !important necessário: o Elementor gera sua própria regra nativa de
	   "pointer" (::after) com mais especificidade, pintando a linha com a
	   cor "accent" do kit (areia) em vez da nossa. */
	background-color: var(--geoma-moss) !important;
	transition: transform .2s var(--geoma-ease);
}

.geoma-nav .elementor-nav-menu .elementor-item:hover,
.geoma-nav .elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--geoma-moss);
	background: transparent;
}

/* O sublinhado aparece apenas no hover (o item ativo muda só de cor) */
.geoma-nav .elementor-nav-menu .elementor-item:hover::after {
	transform: scaleX(1);
}

/* Mantém o menu em uma única linha, centralizado */
.geoma-nav .elementor-nav-menu--main .elementor-nav-menu {
	flex-wrap: nowrap;
	justify-content: center;
}

.geoma-nav .elementor-nav-menu--main .elementor-item {
	white-space: nowrap;
}

/* Menu mobile */
.geoma-nav .elementor-nav-menu--dropdown .elementor-item {
	font-family: var(--geoma-font-heading);
	font-weight: 500;
	border-radius: .5rem;
}

/* Cabeçalho compacto no mobile: logo à esquerda, menu à direita, em uma linha */
@media (max-width: 1024px) {
	.geoma-header > .elementor-container {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	/* Coluna do logo */
	.geoma-header > .elementor-container > .elementor-column:first-child {
		width: 70%;
		flex: 1 1 auto;
	}

	/* Coluna do menu (botão hambúrguer) */
	.geoma-header > .elementor-container > .geoma-nav {
		width: 30%;
		flex: 0 0 auto;
	}

	/* O CTA fica no botão flutuante do WhatsApp e nos itens do menu */
	.geoma-header > .elementor-container > .elementor-column:last-child {
		display: none;
	}

	.geoma-header .elementor-menu-toggle {
		margin-left: auto;
	}
}

/* ------------------------------------------------------------------
   Rodapé
   ------------------------------------------------------------------ */

.geoma-footer-title .elementor-heading-title {
	font-family: var(--geoma-font-heading);
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	/* !important: mesmo motivo dos outros títulos/botões — a página do
	   artigo reimprime o CSS do kit mais abaixo no DOM, e isso afeta
	   QUALQUER título do site enquanto essa página está sendo vista. */
	color: #fff !important;
}

.geoma-footer-text p {
	color: rgba(237, 233, 221, .75);
	font-size: .875rem;
	line-height: 1.6;
	margin: 0;
}

.geoma-footer-text a {
	color: rgba(237, 233, 221, .9);
	text-decoration: none;
	transition: color .2s var(--geoma-ease);
}

.geoma-footer-text a:hover {
	color: #fff;
}

.geoma-footer-menu .elementor-nav-menu .elementor-item {
	font-family: var(--geoma-font-body);
	font-size: .875rem;
	font-weight: 400;
	color: rgba(237, 233, 221, .7);
	padding: .25rem 0;
	transition: color .2s var(--geoma-ease);
}

.geoma-footer-menu .elementor-nav-menu .elementor-item:hover {
	color: #fff;
	background: transparent;
}

/* No rodapé o item ativo não recebe destaque, como no design */
.geoma-footer-menu .elementor-nav-menu .elementor-item.elementor-item-active {
	color: rgba(237, 233, 221, .7);
	font-weight: 400;
	background: transparent;
}

.geoma-footer-menu .elementor-nav-menu .elementor-item.elementor-item-active:hover {
	color: #fff;
}

.geoma-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 2rem;
}

/* Logo e ícones sociais alinhados à esquerda, junto com os textos das colunas */
.geoma-footer-logo,
.geoma-footer-logo .elementor-widget-container,
.geoma-social,
.geoma-social .elementor-widget-container {
	text-align: left;
}

.geoma-footer-logo img {
	margin-left: 0;
	margin-right: auto;
	display: block;
}

.geoma-social .elementor-social-icons-wrapper {
	justify-content: flex-start;
	margin-left: 0;
	padding-left: 0;
}

/* O primeiro ícone encosta na margem esquerda da coluna */
.geoma-social .elementor-social-icons-wrapper .elementor-grid-item:first-child {
	margin-left: 0;
}

/* ------------------------------------------------------------------
   Formulário
   ------------------------------------------------------------------ */

.geoma-form .elementor-field-group > label {
	display: block;
	font-family: var(--geoma-font-heading);
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--geoma-moss);
	margin-bottom: .375rem;
}

.geoma-form .elementor-field-group .elementor-field {
	width: 100%;
	border-radius: .75rem;
	border: 0;
	background-color: #F3F4F6;
	padding: .875rem 1rem;
	font-family: var(--geoma-font-body);
	font-size: .9375rem;
	color: var(--geoma-graphite);
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: box-shadow .2s var(--geoma-ease);
}

.geoma-form .elementor-field-group .elementor-field:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(92, 103, 59, .3);
}

.geoma-form .elementor-field-group textarea.elementor-field {
	min-height: 8rem;
	resize: vertical;
}

.geoma-form .elementor-button[type="submit"] {
	border-radius: 9999px;
	background-color: var(--geoma-moss);
	padding: .875rem 2.5rem;
	font-family: var(--geoma-font-heading);
	font-size: .875rem;
	font-weight: 600;
	color: #fff;
	transition: all .2s var(--geoma-ease);
}

.geoma-form .elementor-button[type="submit"]:hover {
	background-color: var(--geoma-moss-dark);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

/* Selos de confiança acima do formulário */
.geoma-trust .elementor-icon-list-item {
	font-family: var(--geoma-font-body);
	font-size: .8125rem;
	color: var(--geoma-graphite-soft);
}

.geoma-trust .elementor-icon-list-icon svg,
.geoma-trust .elementor-icon-list-icon img {
	width: 1rem;
	height: 1rem;
}

/* ------------------------------------------------------------------
   Lista de serviços (página Serviços)
   ------------------------------------------------------------------ */

.geoma-service-item {
	border-radius: 1rem;
	border: 1px solid rgba(60, 60, 59, .08);
	background-color: #fff;
	padding: 2rem;
	/* height:100% não funciona aqui: um valor definido (não "auto") desativa o
	   stretch automático do flexbox, então os cards da mesma linha ficavam
	   com alturas diferentes conforme o texto. align-self:stretch resolve. */
	height: auto;
	align-self: stretch !important;
	transition: all .3s var(--geoma-ease);
	box-shadow: var(--geoma-shadow-card);
}

/* O preset "gap" do Elementor (elementor-column-gap-wider) só acrescenta
   padding DENTRO de cada coluna — mas o fundo/borda do card estão na própria
   coluna (.geoma-service-item), então as duas colunas de 50% somam 100% e as
   bordas brancas ficam coladas, sem espaço real entre elas. Um column-gap de
   verdade força o encolhimento (flex-shrink) de cada card, abrindo um vão. */
.elementor-container:has(> .geoma-service-item) {
	column-gap: 3rem;
}

.geoma-service-item:hover {
	transform: translateY(-.25rem);
	box-shadow: var(--geoma-shadow-card-hover);
}

.geoma-service-item-title .elementor-heading-title {
	font-family: var(--geoma-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--geoma-graphite);
}

/* Índice de âncoras no topo da página de serviços */
.geoma-anchor-nav .elementor-icon-list-item a,
.geoma-anchor-nav a {
	font-family: var(--geoma-font-heading);
	font-size: .875rem;
	font-weight: 500;
	color: var(--geoma-graphite-soft);
	transition: color .2s var(--geoma-ease);
}

.geoma-anchor-nav .elementor-icon-list-item a:hover,
.geoma-anchor-nav a:hover {
	color: var(--geoma-moss);
}

/* ------------------------------------------------------------------
   Bloco CTA final
   ------------------------------------------------------------------ */

.geoma-cta {
	border-radius: 1.5rem;
	background-color: var(--geoma-graphite);
}

/* Variante verde (páginas Sobre e Portfólio) */
.geoma-cta .geoma-section-title .elementor-heading-title,
.geoma-cta h2 {
	color: #fff;
	font-size: 1.5rem;
}

@media (min-width: 768px) {
	.geoma-cta .geoma-section-title .elementor-heading-title,
	.geoma-cta h2 {
		font-size: 1.75rem;
	}
}

.geoma-cta p {
	color: rgba(255, 255, 255, .75);
	margin: 0;
}

/* ------------------------------------------------------------------
   Imagem com legenda (Sobre a Geoma)
   ------------------------------------------------------------------ */

.geoma-figure figure,
.geoma-figure .elementor-image {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: var(--geoma-shadow-card-hover);
	margin: 0;
}

.geoma-figure img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

.elementor-widget-image.geoma-figure figcaption,
.geoma-figure figcaption.widget-image-caption,
.geoma-figure figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	background: linear-gradient(to top, rgba(60, 60, 59, .85), transparent);
	color: #fff;
	font-size: .8125rem;
	line-height: 1.5;
	padding: 2.5rem 1.25rem 1.25rem;
	text-align: left;
	font-style: normal;
}

/* ------------------------------------------------------------------
   Animação de entrada
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.geoma-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .6s var(--geoma-ease), transform .6s var(--geoma-ease);
	}

	.geoma-reveal.geoma-visible {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Ajustes gerais do Elementor
   ------------------------------------------------------------------ */

/* Colunas com altura total para os cartões esticarem */
.geoma-stretch .elementor-widget-wrap {
	height: 100%;
}

/* Remove margem inferior padrão do último widget dentro dos cartões */
.geoma-card .elementor-widget:last-child,
.geoma-diff .elementor-widget:last-child,
.geoma-service-item .elementor-widget:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Página individual do artigo (Central de Conhecimento)
   ------------------------------------------------------------------ */

.geoma-article-hero {
	/* Sem isso, herda o min-height:100vh do hero da home (.geoma-hero:not(.geoma-hero-sub))
	   e a imagem fica esticada/cortada de forma estranha numa faixa quase em tela cheia. */
	min-height: auto !important;
	display: block !important;
	padding-top: 5rem !important;
	padding-bottom: 5rem !important;
	/* Posts usam o template padrão do tema (main.site-main{max-width:1140px}), diferente
	   das páginas Elementor que já renderizam em tela cheia — por isso a seção precisa
	   "vazar" o container pai manualmente para a imagem ocupar toda a largura da janela. */
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.geoma-article-back {
	font-family: var(--geoma-font-heading);
	font-size: .875rem;
	font-weight: 600;
	color: rgba(237, 233, 221, .7);
	text-decoration: none;
	transition: color .2s var(--geoma-ease);
}

.geoma-article-back:hover {
	color: #fff;
}

/* Linha de categoria + data + autor */
.geoma-article-meta {
	margin-bottom: 1rem;
}

/* Case sem barra lateral: conteúdo ocupa a largura toda da coluna
   (100%), diferente do artigo, que mantém a coluna estreita de leitura
   (.geoma-article-body) por causa da sidebar de compartilhar ao lado. */
.geoma-case-content .geoma-article-body {
	max-width: none;
}

.geoma-article-meta .elementor-column {
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
}

.geoma-article-meta > .elementor-container {
	align-items: center;
	flex-wrap: wrap;
	row-gap: .5rem;
	column-gap: 1.25rem;
}

/* Selo escuro (diferente do bege usado no resto do site — como no zip) */
.geoma-article-category .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border-radius: 9999px;
	background-color: var(--geoma-moss);
	box-shadow: 0 2px 6px rgba(92, 103, 59, .35);
	padding: .375rem 1rem;
	font-family: var(--geoma-font-heading);
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff !important;
}


/* Título do artigo */
.geoma-article-h1 .elementor-heading-title {
	font-family: var(--geoma-font-heading);
	font-size: 1.875rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--geoma-graphite) !important;
}

@media (min-width: 640px) {
	.geoma-article-h1 .elementor-heading-title {
		font-size: 2.25rem;
	}
}

@media (min-width: 1024px) {
	.geoma-article-h1 .elementor-heading-title {
		font-size: 2.75rem;
	}
}

/* Corpo do artigo (theme-post-content dinâmico) */
.geoma-article-body {
	max-width: 42rem;
	margin-top: 1.75rem !important;
}

.geoma-article-body p {
	color: var(--geoma-graphite-soft);
	font-size: 1rem;
	line-height: 1.75;
	margin: 0 0 1.25rem;
}

.geoma-article-body p:last-child {
	margin-bottom: 0;
}

.geoma-article-body a {
	color: var(--geoma-moss);
	font-weight: 600;
}

.geoma-article-body h2,
.geoma-article-body h3 {
	font-family: var(--geoma-font-heading);
	color: var(--geoma-graphite);
	font-weight: 700;
	margin: 2rem 0 .75rem;
}

/* Sidebar — compartilhar */
.geoma-article-sidebar {
	background-color: var(--geoma-sand-light);
	border-radius: 1rem;
	padding: 1.75rem !important;
	height: fit-content;
}

.geoma-article-share-title .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--geoma-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--geoma-graphite) !important;
}

.geoma-article-share-title .elementor-heading-title::before {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C673B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

.geoma-article-share .elementor-share-buttons--view-icon .elementor-share-btn {
	border-radius: 50%;
}

/* Botão "Fale com um especialista" ao final do artigo — vem como bloco
   Gutenberg (wp:buttons) direto do conteúdo do post, sem estilo próprio. */
.geoma-article-body .wp-block-buttons {
	margin-top: 1.75rem;
}

.geoma-article-body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: var(--geoma-moss) !important;
	padding: .875rem 1.75rem;
	font-family: var(--geoma-font-heading);
	font-size: .875rem;
	font-weight: 600;
	color: #fff !important;
	text-decoration: none;
	transition: background-color .2s var(--geoma-ease), box-shadow .2s var(--geoma-ease);
}

.geoma-article-body .wp-block-button__link:hover {
	background-color: var(--geoma-moss-dark) !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

/* Imagem ao lado do texto de "Contexto" nos cases de portfólio
   (bloco Gutenberg wp:media-text, vindo direto do conteúdo do post). */
.geoma-article-body .wp-block-media-text {
	display: grid;
	grid-template-columns: 38% 1fr;
	gap: 1.75rem;
	align-items: center;
	margin: 1.25rem 0 1.75rem;
}

.geoma-article-body .wp-block-media-text__media {
	margin: 0;
}

.geoma-article-body .wp-block-media-text__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1rem;
	box-shadow: var(--geoma-shadow-card);
}

.geoma-article-body .wp-block-media-text__content {
	padding: 0;
}

.geoma-article-body .wp-block-media-text__content p {
	margin: 0;
}

@media (max-width: 700px) {
	.geoma-article-body .wp-block-media-text {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
   "Outros Artigos" / "Outros Cases" — gerado via PHP (geoma_related_html
   em functions.php) e injetado no fim do conteúdo do post/case. Markup
   próprio (não usa as classes internas do Elementor), mas com o mesmo
   visual dos cards de artigo já usados no site.
   ------------------------------------------------------------------ */

.geoma-related-section {
	padding: 4rem 0 0;
	border-top: 1px solid rgba(60, 60, 59, .08);
	margin-top: 3rem;
}

.geoma-related-section-title {
	font-family: var(--geoma-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--geoma-graphite);
	margin: 0 0 1.75rem;
}

.geoma-related-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.geoma-related-more {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

.geoma-related-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 calc((100% - 4rem) / 3);
	max-width: calc((100% - 4rem) / 3);
	background: #fff;
	border-radius: 1rem;
	border: 1px solid rgba(60, 60, 59, .08);
	box-shadow: var(--geoma-shadow-card);
	overflow: hidden;
}

.geoma-related-image {
	flex: none;
	width: 100%;
	height: 11rem;
	background-size: cover;
	background-position: center center;
}

.geoma-related-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.75rem 1.75rem;
}

.geoma-related-body .geoma-badge {
	align-self: flex-start;
	margin: 0 0 .875rem;
}

.geoma-related-title {
	font-family: var(--geoma-font-heading);
	font-size: 1.1875rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--geoma-graphite);
	margin: 0 0 .625rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.geoma-related-desc {
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--geoma-graphite-soft);
	margin: 0 0 1.125rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.geoma-related-body .geoma-link-arrow {
	margin-top: auto;
	align-self: flex-end;
}

@media (max-width: 900px) {
	.geoma-related-card {
		flex: 1 1 calc((100% - 2rem) / 2);
		max-width: calc((100% - 2rem) / 2);
	}
}

@media (max-width: 600px) {
	.geoma-related-card {
		flex: 1 1 100%;
		max-width: 100%;
	}
}