/* ==========================================================================
   GAGUIM — LAYOUT
   Cola entre a estrutura do Elementor e o Design System.
   Tudo escopado em .gaguim para nunca vazar para o admin ou para plugins.
   ========================================================================== */

/* 1) CABEÇALHO DE SEÇÃO ==================================================== */
.gaguim .g-sec-head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
/* Sem limite de largura: o `max-width: 20ch` que havia aqui quebrava o título
   em duas linhas mesmo quando sobrava espaço na seção. Quando o texto não
   couber de fato, ele quebra sozinho — e `text-wrap: balance` distribui as
   linhas em vez de deixar uma palavra órfã. */
.gaguim .g-sec-head h2 {
	max-width: none;
	/* 40px, um degrau abaixo do H2 global (48px). Medido no navegador: o título
	   mais longo da Home ("Ideias e soluções para um Tocantins melhor.") pede
	   1008px a 44px, e sobram 951px ao lado do CTA. A 40px ele pede 848px e
	   cabe com 98px de folga. Todos os 7 cabeçalhos ficam em UMA linha. */
	font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem);
	/* Quando a quebra for inevitável (mobile), distribui as linhas em vez de
	   deixar uma palavra órfã. */
	text-wrap: balance;
}
.gaguim .g-sec-head--cta > .e-con-inner { gap: var(--g-gap); }
/* A coluna do título cresce e ocupa o espaço livre até o botão. Com
   `flex: 0 1 auto` ela parava no tamanho base e o título quebrava em duas
   linhas mesmo sobrando meia seção vazia à direita. */
.gaguim .g-sec-head--cta > .e-con-inner > .e-con { flex: 1 1 auto; min-width: 0; }
/* O CTA da direita é um widget de botão: acompanha a base do título e não
   pode encolher — sem isso o flex o espremia e o rótulo quebrava em duas
   linhas ("VER O MAPA / COMPLETO"). */
.gaguim .g-sec-head--cta > .e-con-inner > .elementor-widget-button.g-btn {
	align-self: flex-end;
	flex: 0 0 auto;
}
.gaguim .g-sec-head--cta a.elementor-button { white-space: nowrap; }

/* 2) HEADER =============================================================== */
.gaguim .g-header__inner > .e-con-inner { gap: clamp(1rem, .5rem + 1.6vw, 2.5rem); }

.gaguim .g-header__nav .elementor-nav-menu--main .elementor-item {
	padding: .5rem .1rem;
}
.gaguim .g-header__nav .elementor-nav-menu--main > ul { gap: clamp(.6rem, .2rem + 1vw, 1.6rem); }

/* Menu mobile do Elementor — garante contraste e área de toque */
.gaguim .g-header__nav .elementor-nav-menu--dropdown a {
	color: var(--g-navy);
	font-size: .95rem;
	padding: .85rem 1.2rem;
}
.gaguim .g-header .elementor-menu-toggle { color: var(--g-navy); }

/* 3) HERO ================================================================= */
.gaguim .g-hero__inner > .e-con-inner { gap: clamp(1.5rem, 1rem + 3vw, 4rem); position: relative; z-index: 2; }
.gaguim .g-hero__media { position: relative; align-self: flex-end; }
.gaguim .g-hero__photo img {
	display: block;
	width: 100%;
	max-width: 460px;
	margin-left: auto;
	/* Sem drop-shadow: numa foto recortada a sombra faz a figura parecer
	   colada por cima da seção. A foto agora se apoia na base (abaixo). */
}

/* A foto encosta na base da seção, em vez de flutuar no meio dela.
   Em vez de puxar a imagem com margem negativa (que exigiria repetir aqui o
   valor do padding definido no Elementor), zera-se o padding inferior da
   seção e devolve-se o respiro à COLUNA DE TEXTO. Assim a base da foto é a
   base da seção, sem número mágico duplicado.
   O !important existe porque o Elementor grava o padding por elemento, com
   especificidade (0,3,0). */
/* Aproxima o herói do cabeçalho: o padding de 110px gravado no Elementor
   abria um vão grande logo abaixo do menu. Fica responsivo — ~32px no celular,
   ~60px no desktop. !important porque o Elementor grava o padding por
   elemento, com especificidade (0,3,0). */
.gaguim .g-hero { padding-top: clamp(2rem, 1rem + 3vw, 3.75rem) !important; }

@media (min-width: 768px) {
	.gaguim .g-hero { padding-bottom: 0 !important; }
	.gaguim .g-hero__inner > .e-con-inner { align-items: flex-end; }
	.gaguim .g-hero__text { padding-bottom: clamp(3.5rem, 1.5rem + 6vw, 8rem); }
	.gaguim .g-hero__media { align-self: flex-end; }
	.gaguim .g-hero__media > .e-con-inner { padding-bottom: 0; }
}
.gaguim .g-hero__card {
	position: absolute;
	right: 0;
	/* Agora que a foto vai até a base da seção, a coluna ficou mais alta e um
	   offset pequeno jogava o card para baixo da faixa de indicadores, que
	   avança sobre o herói. O piso de 190px garante que ele fique acima dela. */
	bottom: clamp(190px, 24%, 320px);
	z-index: 3;
}
.gaguim .g-hero h1 { max-width: 16ch; }

/* 4) BIOGRAFIA / COLUNAS GERAIS =========================================== */
.gaguim .g-bio > .e-con-inner { gap: clamp(1.75rem, 1rem + 3vw, 4rem); }
.gaguim .g-contato > .e-con-inner { gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
/* Os gabinetes ficam numa coluna de ~42% da página: duas colunas ali dariam
   ~230px cada, estreito demais para endereço e e-mail. */
.gaguim .g-contato .g-cards--2 { grid-template-columns: minmax(0, 1fr); }

/* 5) TOPO DAS PÁGINAS INTERNAS ============================================ */
.gaguim .g-pagehead h1 { max-width: none; text-wrap: balance; }
.gaguim .g-pagehead .g-lead { max-width: 56ch; }

/* 6) ACORDEÃO (documentação da biografia) ================================= */
.gaguim .g-accs { display: grid; gap: .6rem; }
.gaguim .g-acc {
	border: 1px solid var(--g-line);
	border-radius: var(--g-radius);
	background: #fff;
	overflow: hidden;
}
.gaguim .g-acc > summary {
	cursor: pointer;
	padding: 1.05rem 3rem 1.05rem 1.25rem;
	font-weight: 600;
	color: var(--g-navy);
	list-style: none;
	position: relative;
	transition: background var(--g-transition);
}
.gaguim .g-acc > summary::-webkit-details-marker { display: none; }
.gaguim .g-acc > summary:hover { background: var(--g-bg); }
.gaguim .g-acc > summary::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--g-green);
	border-bottom: 2px solid var(--g-green);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--g-transition);
}
.gaguim .g-acc[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.gaguim .g-acc__body {
	padding: 0 1.25rem 1.35rem;
	font-size: .9375rem;
	line-height: 1.75;
	color: var(--g-body);
	overflow-wrap: anywhere;
}

/* 6b) ATUAÇÃO: MAPA + MUNICÍPIOS ========================================== */
.gaguim .g-municipios {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem;
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	align-items: start;
}

/* No desktop, mapa à esquerda e lista à direita. Empilhados, os 42 municípios
   somavam quase 900px de altura só de lista. A lista rola dentro da própria
   coluna, então a seção passa a ter a altura do mapa. */
@media (min-width: 1024px) {
	.gaguim .g-atuacao > .e-con-inner {
		display: grid;
		grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
		gap: clamp(1.25rem, .5rem + 2vw, 2.25rem);
		align-items: start;
	}

	/* O cabeçalho ocupa a linha inteira, acima das duas colunas. */
	.gaguim .g-atuacao > .e-con-inner > .g-sec-head { grid-column: 1 / -1; }

	.gaguim .g-atuacao .g-municipios {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 0;
		max-height: 620px;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: .4rem;
	}

	/* Barra de rolagem discreta, na cor da marca. */
	.gaguim .g-atuacao .g-municipios { scrollbar-width: thin; scrollbar-color: var(--g-line) transparent; }
	.gaguim .g-atuacao .g-municipios::-webkit-scrollbar { width: 8px; }
	.gaguim .g-atuacao .g-municipios::-webkit-scrollbar-track { background: transparent; }
	.gaguim .g-atuacao .g-municipios::-webkit-scrollbar-thumb {
		background: var(--g-line);
		border-radius: 999px;
	}
	.gaguim .g-atuacao .g-municipios:hover::-webkit-scrollbar-thumb { background: #c8d5e8; }

	/* A página dedicada usa o MESMO comportamento da Home: a lista rola dentro
	   da própria coluna. Chegou a ser testado aqui um mapa fixo com a lista
	   inteira aberta, mas a seção passava de 3.000px de altura. Com a rolagem
	   interna, mapa e lista terminam juntos — e o mapa fixo perde a função,
	   já que não há mais nada rolando ao lado dele. */
}
.gaguim .g-municipio > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .75rem;
	padding-right: 2.75rem;
}
.gaguim .g-municipio__nome { font-weight: 700; color: var(--g-navy); }
.gaguim .g-municipio__total {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--g-green);
}
.gaguim .g-municipio .g-acc__body p { margin-bottom: .6rem; }

@media (max-width: 1023px) {
	/* A Home também precisa conter a lista em telas compactas. Sem altura máxima, os
	   municípios transformam a seção num corredor de vários milhares de pixels. */
	.gaguim .g-atuacao .g-municipios {
		max-height: min(62vh, 480px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: .35rem;
		scrollbar-width: thin;
		scrollbar-color: #b9c9df transparent;
	}
	.gaguim .g-atuacao .g-municipios::-webkit-scrollbar { width: 7px; }
	.gaguim .g-atuacao .g-municipios::-webkit-scrollbar-track { background: transparent; }
	.gaguim .g-atuacao .g-municipios::-webkit-scrollbar-thumb {
		background: #b9c9df;
		border-radius: 999px;
	}
}

@media (max-width: 767px) {
	.gaguim .g-municipios { grid-template-columns: minmax(0, 1fr); }
}

/* 7) ARQUIVO DE NOTÍCIAS (widget archive-posts) =========================== */
.gaguim .g-archive .elementor-posts-container { gap: var(--g-gap); }
.gaguim .g-archive .elementor-post {
	background: #fff;
	border: 1px solid var(--g-line);
	border-radius: var(--g-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--g-transition), transform var(--g-transition), border-color var(--g-transition);
}
.gaguim .g-archive .elementor-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--g-shadow);
	border-color: transparent;
}
.gaguim .g-archive .elementor-post__thumbnail { aspect-ratio: 16/10; border-radius: 0; }
.gaguim .g-archive .elementor-post__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.gaguim .g-archive .elementor-post__text { padding: 1.35rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.gaguim .g-archive .elementor-post__title { font-size: var(--g-fs-h3); line-height: 1.3; margin: 0; }
.gaguim .g-archive .elementor-post__title a { color: var(--g-navy); font-weight: 700; }
.gaguim .g-archive .elementor-post__excerpt p { font-size: .9375rem; color: var(--g-body); margin: 0; }
.gaguim .g-archive .elementor-post__meta-data {
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--g-green);
	font-weight: 700;
	margin: 0;
	border: 0;
}
.gaguim .g-archive .elementor-post__read-more {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--g-navy);
	margin-top: auto;
}

/* Paginação */
.gaguim .elementor-pagination { margin-top: 2.5rem; display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.gaguim .elementor-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .75rem;
	border-radius: var(--g-pill);
	border: 1px solid var(--g-line);
	color: var(--g-navy);
	font-size: .875rem;
	font-weight: 600;
	transition: background var(--g-transition), color var(--g-transition), border-color var(--g-transition);
}
.gaguim .elementor-pagination .page-numbers:hover,
.gaguim .elementor-pagination .page-numbers.current {
	background: var(--g-navy);
	border-color: var(--g-navy);
	color: #fff;
}

/* 8) FORMULÁRIO =========================================================== */
.gaguim .g-form .elementor-field-group > label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--g-navy);
	margin-bottom: .45rem;
}
.gaguim .g-form .elementor-field-textual {
	border: 1px solid var(--g-line);
	border-radius: 10px;
	padding: .85rem 1rem;
	font-family: var(--g-font);
	font-size: .95rem;
	color: var(--g-ink);
	background: #fff;
	transition: border-color var(--g-transition), box-shadow var(--g-transition);
	width: 100%;
}
.gaguim .g-form .elementor-field-textual:focus {
	border-color: var(--g-sky);
	box-shadow: 0 0 0 4px rgba(101,198,235,.22);
	outline: none;
}
.gaguim .g-form .elementor-field-textual::placeholder { color: var(--g-muted); }
.gaguim .g-form .elementor-button[type="submit"] {
	background: var(--g-navy);
	color: #fff;
	border-radius: var(--g-pill);
	padding: .95rem 2rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	border: 0;
	transition: background var(--g-transition), transform var(--g-transition);
}
.gaguim .g-form .elementor-button[type="submit"]:hover { background: var(--g-navy-dark); transform: translateY(-2px); }
.gaguim .g-form .elementor-message { border-radius: 10px; padding: .85rem 1rem; font-size: .9rem; }

/* 9) FOOTER =============================================================== */
/* As colunas são resolvidas por grid no CSS, não pelo controle de largura do
   container do Elementor — que, aninhado, não estava sendo aplicado e deixava
   o rodapé inteiro numa coluna só. */
/* IMPORTANTE: um container "boxed" do Elementor não é o pai flex dos seus
   filhos — ele envolve tudo num <div class="e-con-inner">. Layout aplicado na
   classe externa não surte efeito algum (o container tem um filho só).
   Por isso todo override de layout mira `> .e-con-inner`.
   O `.e-con` extra vence a declaração `.e-con { display: flex }` do Elementor,
   que tem a mesma especificidade e é carregada depois. */
.gaguim .e-con.g-footer__grid > .e-con-inner {
	display: grid;
	/* A última coluna é mais larga porque carrega o e-mail do gabinete, que
	   não tem espaço para quebrar e partia no meio da palavra ("gmai/l.com"). */
	grid-template-columns: 1.3fr 1fr 1fr 1.8fr;
	gap: clamp(1.25rem, .75rem + 2vw, 2.25rem);
	align-items: start;
}
.gaguim .g-footer__grid > .e-con-inner > .e-con { width: auto !important; }
.gaguim .g-footer__brand .g-logo { margin-bottom: .75rem; }

/* Rodapé compacto. Em negrito e a 15px, as três colunas de links competiam
   com o conteúdo principal; o rodapé é navegação de apoio, não destaque. */
.gaguim .g-footer__menu .elementor-nav-menu .elementor-item {
	color: var(--g-on-dark-soft);
	font-size: .875rem;
	font-weight: 400;
	padding: .16rem 0;
	transition: color var(--g-transition), padding-left var(--g-transition);
}
.gaguim .g-footer__menu .elementor-nav-menu .elementor-item:hover { color: #fff; padding-left: 5px; }

/* Slogan e ícones sociais também um degrau menores. */
.gaguim .g-footer__brand p { font-size: .875rem; line-height: 1.55; }
.gaguim .g-footer .g-social { width: 38px; height: 38px; }
.gaguim .g-footer .g-socials { gap: .5rem; }

/* O "pointer" do menu do Elementor desenha um traço da largura do item.
   Numa coluna de rodapé isso vira uma régua verde atravessando o bloco. */
.gaguim .g-footer__menu .elementor-item::before,
.gaguim .g-footer__menu .elementor-item::after { content: none !important; }

.gaguim .g-footer a.g-btn { margin-top: .9rem; }

/* Menos respiro vertical no rodapé inteiro. O padding de 72px vem gravado no
   Elementor, por elemento — daí o !important. */
.gaguim .g-footer { padding-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem) !important; }
.gaguim .g-footer__bottom {
	margin-top: clamp(1.25rem, .75rem + 1.5vw, 2rem) !important;
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
	font-size: .8125rem;
}

/* 10) FAIXA CTA ========================================================== */
/* O botão não encolhe (rótulo com nowrap); então, quando não couber ao lado do
   texto, ele desce para a linha seguinte em vez de vazar da tela. Sem isto,
   entre ~950 e ~1050px o botão saía para fora — problema que ficou escondido
   enquanto o body tinha overflow-x: hidden. */
.gaguim .g-cta-band__inner > .e-con-inner {
	gap: var(--g-gap);
	flex-wrap: wrap;
}
/* A coluna de texto ocupa o espaço que sobra ao lado do botão.
   O `width: 66%` definido no Elementor não é aplicado em container aninhado
   (o mesmo que já havia acontecido no rodapé): medido, ela vinha com 1200px,
   a largura inteira da faixa — e era isso que empurrava o botão para baixo. */
.gaguim .g-cta-band__inner > .e-con-inner > .e-con { min-width: 0; }

/* Só a partir de 768px, onde a faixa é uma LINHA. No mobile ela vira coluna e
   `flex-basis: 0` passaria a valer para a altura, colapsando o texto. */
@media (min-width: 768px) {
	.gaguim .g-cta-band__inner > .e-con-inner > .e-con {
		width: auto;
		/* base 0, não auto: com `auto` a largura-base é a do conteúdo (na Home o
		   parágrafo pede ~800px), a soma com o botão estourava abaixo de 1440 e
		   o botão caía para a linha de baixo. Com base 0 a coluna ocupa apenas
		   o que sobra ao lado do botão. */
		flex: 1 1 0;
	}
}

/* O Elementor dá largura 100% aos widgets filhos diretos de um container.
   Com isso a largura-base do botão era a da faixa inteira, a soma estourava
   e o flex-wrap acima o mandava para a linha de baixo — mesmo sobrando espaço
   ao lado do texto. Medindo pelo conteúdo, ele volta para o lado do texto e
   só desce quando realmente não couber. */
.gaguim .g-cta-band__inner > .e-con-inner > .elementor-widget {
	width: auto;
	flex: 0 0 auto;
}
/* Mesma escala dos títulos de seção (40px, não os 48px globais). A 48px, um
   título mais longo como "Quer levar uma demanda para o seu município?" não
   cabia ao lado do botão e o empurrava para a linha de baixo. */
.gaguim .g-cta-band h2 {
	max-width: none;
	font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	text-wrap: balance;
}

/* 10b) PÁGINA DE UM ITEM (Proposta / Realização) ========================= */
/* Mesmo princípio do rodapé: um container "boxed" do Elementor não é o pai
   flex dos filhos — eles ficam dentro de um .e-con-inner. Por isso o grid é
   aplicado em `> .e-con-inner`, e não na classe externa. */
.gaguim .e-con.g-single > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}
/* O Elementor grava a largura dos containers filhos por elemento; sem isto a
   coluna do texto vem com 100% e estoura a célula do grid. */
.gaguim .g-single > .e-con-inner > .e-con { width: auto !important; }

@media (max-width: 1023px) {
	.gaguim .e-con.g-single > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
}

/* O topo do item usa a mesma faixa das listagens, com um respiro menor: aqui
   o título vem acompanhado de trilha, rótulo e resumo. */
.gaguim .g-single-head .g-single__head { max-width: 62rem; }

/* 11) MAPA (Mapplic) ===================================================== */
.gaguim .mapplic-container { border-radius: var(--g-radius-lg); overflow: hidden; }

/* 12) RESPONSIVO ========================================================= */

/* Tablet: footer em 2 colunas */
@media (max-width: 1023px) {
	.gaguim .e-con.g-footer__grid > .e-con-inner { grid-template-columns: 1fr 1fr; }
	.gaguim .g-hero__card { position: static; margin-top: 1.25rem; max-width: none; }
	.gaguim .g-hero__photo img { max-width: 340px; }
}

/* Mobile: recompor, não apenas encolher.
   Os containers em linha viram coluna e os filhos ocupam a largura inteira. */
@media (max-width: 767px) {
	/* Empilhamento no mobile: o alvo é o .e-con-inner (o pai flex de verdade)
	   e também a variável --flex-direction, que é o que o CSS do Elementor lê. */
	.gaguim :is(.g-hero__inner, .g-hero__actions, .g-bio, .g-contato, .g-cta-band__inner, .g-sec-head--cta) > .e-con-inner,
	.gaguim :is(.g-hero__inner, .g-hero__actions, .g-bio, .g-contato, .g-cta-band__inner, .g-sec-head--cta) {
		--flex-direction: column;
		--container-widget-width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	/* Rodapé em composição 2 + 1: os dois menus curtos ficam lado a lado;
	   marca e contato usam a largura inteira. */
	.gaguim .e-con.g-footer__grid > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 1rem;
	}
	.gaguim .g-footer__grid > .e-con-inner > .e-con:first-child,
	.gaguim .g-footer__grid > .e-con-inner > .e-con:last-child { grid-column: 1 / -1; }

	.gaguim :is(.g-hero__inner, .g-bio, .g-contato, .g-cta-band__inner, .g-sec-head--cta) > .e-con-inner > .e-con {
		width: 100% !important;
	}

	.gaguim .g-sec-head--cta { align-items: flex-start; }
	.gaguim .g-sec-head h2,
	.gaguim .g-hero h1,
	.gaguim .g-pagehead h1,
	.gaguim .g-cta-band h2 { max-width: none; }

	/* O wrapper real do herói não tem a classe g-hero__inner. Recompõe suas
	   colunas diretamente e remove o padding inferior gravado no Elementor,
	   fazendo o retrato se apoiar fisicamente na base azul. */
	.gaguim .g-hero { padding-bottom: 0 !important; }
	.gaguim .g-hero > .e-con > .e-con-inner {
		--flex-direction: column;
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
	}
	.gaguim .g-hero > .e-con > .e-con-inner > .e-con { width: 100% !important; }
	.gaguim .g-hero__media { align-self: stretch; margin-top: .5rem; }
	.gaguim .g-hero__media > .e-con-inner { padding-bottom: 0; }
	.gaguim .g-hero__photo { margin-bottom: 0; }
	.gaguim .g-hero__photo img {
		max-width: min(78vw, 330px);
		margin: 0 auto -1px;
	}
	.gaguim .g-hero__card {
		position: absolute;
		right: .75rem;
		bottom: 1rem;
		max-width: min(62vw, 230px);
		margin: 0;
		padding: .9rem 1rem;
	}

	/* Header compacto em uma única linha: marca, menu e WhatsApp. */
	.gaguim .g-header__inner > .e-con-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		gap: .55rem;
		padding-block: .55rem;
	}
	.gaguim .g-header__inner > .e-con-inner > .elementor-widget { width: auto !important; margin: 0; }
	.gaguim .g-header__logo img { max-width: 92px; max-height: 48px; }
	.gaguim .g-header__nav { position: relative; }
	.gaguim .g-header .elementor-menu-toggle {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--g-line);
		border-radius: 12px;
		background: #fff;
		color: var(--g-navy);
	}
	.gaguim .g-header .elementor-menu-toggle svg { width: 22px; height: 22px; }
	.gaguim .g-header__nav .elementor-nav-menu--dropdown {
		position: absolute;
		top: calc(100% + .65rem);
		right: 0;
		left: auto;
		width: min(88vw, 360px);
		padding: .45rem;
		border: 1px solid var(--g-line);
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 18px 45px rgba(8,31,77,.18);
		overflow: hidden;
	}
	.gaguim .g-header__nav .elementor-nav-menu--dropdown a {
		padding: .85rem 1rem;
		border-radius: 9px;
		font-size: .8125rem;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
	}
	.gaguim .g-header__nav .elementor-nav-menu--dropdown a:hover,
	.gaguim .g-header__nav .elementor-nav-menu--dropdown a.elementor-item-active {
		background: var(--g-bg);
		color: var(--g-navy-dark);
	}
	.gaguim .g-header a.g-btn,
	.gaguim .g-header .g-btn a.elementor-button {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
		font-size: 0;
		gap: 0;
	}
	.gaguim .g-header a.g-btn svg { width: 20px; height: 20px; }

	/* No rodapé, navegação deve estar visível — dois hambúrgueres ali criavam
	   interação desnecessária e alongavam o fechamento da página. */
	.gaguim .g-footer__menu .elementor-nav-menu--main { display: block !important; }
	.gaguim .g-footer__menu .elementor-menu-toggle,
	.gaguim .g-footer__menu .elementor-nav-menu--dropdown { display: none !important; }
	.gaguim .g-footer__brand { text-align: center; align-items: center; }
	.gaguim .g-footer__brand > .e-con-inner { align-items: center; }
	.gaguim .g-footer__brand p { margin-inline: auto; }
	.gaguim .g-footer .g-socials { justify-content: center; }
	.gaguim .g-footer__grid > .e-con-inner > .e-con:last-child {
		padding: 1.1rem;
		border: 1px solid var(--g-line-dark);
		border-radius: var(--g-radius);
		background: rgba(255,255,255,.035);
	}
	.gaguim .g-footer__grid > .e-con-inner > .e-con:last-child a.g-btn { width: 100%; justify-content: center; }

	.gaguim .g-archive .elementor-posts-container { grid-template-columns: 1fr !important; }
	.gaguim .g-footer__bottom > .e-con-inner { flex-direction: column; gap: .5rem; text-align: center; }
}

/* Telas estreitas: compactar os cabeçalhos internos. */
@media (max-width: 420px) {
	.gaguim .g-pagehead { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* Telas largas: limita o hero para o texto não ficar espichado */
@media (min-width: 1600px) {
	.gaguim .g-hero__photo img { max-width: 520px; }
}