/**
 * GuiaWP - Estilos front-end auxiliares
 *
 * @package GuiaWP
 * @author Dante Testa <https://dantetesta.com.br>
 * @since 1.0.0 - 2026-03-11
 * @modified 1.9.9 - 2026-03-22 - Adicionado bg-[#0f5132]/8, group-hover:* classes para single anúncio
 * @modified 2.5.58 - 2026-05-07 - Componente .gcep-color-row reutilizável (swatch + hex editável)
 * @modified 2.5.269 - Dante Testa <https://dantetesta.com.br> - 2026-08-17 11:35 -03 - Capa do single com proporção fluida 7:2 no desktop e foto do card 3:2 no mobile.
 */

/* Utilitários responsivos Tailwind ausentes no build compilado */
@media (min-width: 768px) {
	.md\:block { display: block !important; }
	.md\:contents { display: contents !important; }
}
@media (min-width: 1024px) {
	.lg\:sticky { position: sticky !important; }
}

/* ==========================================================================
   Mapeamento de cores dinâmicas do tema
   Classes Tailwind com valores arbitrários (#0f5132) ausentes no build compilado.
   Todas mapeadas para CSS variables do tema para personalização dinâmica.
   @author Dante Testa <https://dantetesta.com.br>
   @modified 1.9.8 - 2026-03-22
   ========================================================================== */

/* Cor primária — background */
.bg-\[\#0f5132\] { background-color: var(--gcep-color-primary, #0f5132); }
.bg-\[\#0f5132\]\/5 { background-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 5%, transparent); }
.bg-\[\#0f5132\]\/10 { background-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 10%, transparent); }
.bg-\[\#0f5132\]\/20 { background-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 20%, transparent); }
.bg-\[\#0f5132\]\/8 { background-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 8%, transparent); }
.from-\[\#0f5132\] { --tw-gradient-from: var(--gcep-color-primary, #0f5132); }
.to-\[\#0b3f27\] { --tw-gradient-to: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 100%, #000 20%); }

/* Cor primária — hover background */
.hover\:bg-\[\#0b3f27\]:hover { background-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 100%, #000 20%); }
.hover\:bg-\[\#0f5132\]\/5:hover { background-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 5%, transparent); }

/* Cor primária — texto */
.text-\[\#0f5132\] { color: var(--gcep-color-primary, #0f5132); }
.hover\:text-\[\#0f5132\]:hover { color: var(--gcep-color-primary, #0f5132); }

/* Cor primária — borda */
.border-\[\#0f5132\] { border-color: var(--gcep-color-primary, #0f5132); }
.border-\[\#0f5132\]\/30 { border-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 30%, transparent); }
.hover\:border-\[\#0f5132\]:hover { border-color: var(--gcep-color-primary, #0f5132); }
.focus\:border-\[\#0f5132\]:focus { border-color: var(--gcep-color-primary, #0f5132); }

/* Cor primária — group-hover */
.group:hover .group-hover\:bg-\[\#0f5132\] { background-color: var(--gcep-color-primary, #0f5132); }
.group:hover .group-hover\:border-\[\#0f5132\]\/20 { border-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 20%, transparent); }
.group:hover .group-hover\:text-\[\#0f5132\] { color: var(--gcep-color-primary, #0f5132); }

/* Cor primária — ring / shadow */
.ring-\[\#0f5132\] { --tw-ring-color: var(--gcep-color-primary, #0f5132); }
.focus\:ring-\[\#0f5132\]\/20:focus { --tw-ring-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 20%, transparent); }
.focus\:ring-\[\#0f5132\]\/30:focus { --tw-ring-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 30%, transparent); }
.shadow-\[\#0f5132\]\/20 { --tw-shadow-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 20%, transparent); }

/* Cor primária — background escuro (#0b3f27 → primary darkened) */
.bg-\[\#0b3f27\] { background-color: color-mix(in srgb, var(--gcep-color-primary, #0f5132) 100%, #000 20%); }

/* Cor de destaque */
.bg-\[\#22c55e\] { background-color: var(--gcep-color-destaque, #22c55e); }
.text-\[\#22c55e\] { color: var(--gcep-color-destaque, #22c55e); }

/* 2.2.6 - Dante Testa - 2026-04-29: cor_fundo NÃO aplicada mais no body do tema público.
 * Ela criava efeito ruim em sections sem bg explícita (Destaques, Blog) com cores fortes.
 * Agora cor_fundo é aplicada exclusivamente via classe .gcep-bg-fundo nos elementos que
 * a desejarem (ex: section de destaques). cor_texto continua via inline style no body
 * do header.php, então o frontend.css não precisa mais desse selector global. */
body.gcep-public-frontend .gcep-bg-fundo { background-color: var(--gcep-color-fundo, #f9f6f1) !important; }
body.gcep-public-frontend .gcep-text-fundo { color: var(--gcep-color-fundo, #f9f6f1) !important; }

body.gcep-public-frontend .gcep-bg-secundaria { background-color: var(--gcep-color-secundaria, #f9f6f1) !important; }
body.gcep-public-frontend .gcep-text-secundaria { color: var(--gcep-color-secundaria, #f9f6f1) !important; }
body.gcep-public-frontend .gcep-border-secundaria { border-color: var(--gcep-color-secundaria, #f9f6f1) !important; }


/* Paginação WordPress */
.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.page-numbers li {
	display: inline-flex;
}

.page-numbers a,
.page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	transition: all 0.2s;
}

.page-numbers a {
	border: 1px solid #e2e8f0;
	color: #475569;
}

.page-numbers a:hover {
	background-color: #f8fafc;
}

.page-numbers .current {
	background-color: #0f5132;
	color: #fff;
	border: none;
}

/* Line clamp */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* intl-tel-input — ajustes de estilo para integração com Tailwind */
.iti {
	display: block;
	width: 100%;
}

.iti input.iti__tel-input {
	width: 100%;
	padding-left: 90px !important;
}

.iti__country-container {
	z-index: 50;
}

.iti__dropdown {
	z-index: 60;
	border-radius: 0.5rem;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	border: 1px solid #e2e8f0;
}

.iti__search-input {
	border-radius: 0.375rem;
	border: 1px solid #e2e8f0;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	outline: none;
}

.iti__search-input:focus {
	border-color: #0f5132;
	box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

.iti__country-list {
	max-height: 220px;
	border-radius: 0 0 0.5rem 0.5rem;
}

.iti__country {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}

.iti__country:hover,
.iti__country--highlight {
	background-color: #f1f5f9;
}

.iti__selected-dial-code {
	font-size: 0.875rem;
	color: #475569;
	font-weight: 500;
}

/* Cadastro — input com ícone esquerdo precisa de padding extra */
.gcep-cadastro-tel .iti input.iti__tel-input {
	padding-left: 90px !important;
}

/* 2.5.6 - 2026-05-01 - Fix DDI v18: forcar sprite png/2x (Tailwind preflight zerava o background-image em alguns contextos). Mantem dimensoes nativas da CSS oficial. */
/* 2.5.30 - 2026-05-05 - Sprites hospedados localmente em assets/img/intl-tel/ pra evitar dependencia de CDN externo (CSS oficial do CDN tem regras mais especificas que sobrescrevem o url() do CDN sem !important suficiente, alem do risco de bloqueio de rede). Caminho relativo a este arquivo CSS. */
.iti__flag {
	background-image: url('../img/intl-tel/flags.png') !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.iti__flag {
		background-image: url('../img/intl-tel/flags@2x.png') !important;
	}
}

/* 2.5.269 - Dante Testa <https://dantetesta.com.br> - 2026-08-17 11:35 -03:
   mantém a proporção do arquivo mostrado no single enquanto a largura da viewport muda.
   Desktop usa a capa panorâmica 7:2; mobile usa 3:2 quando existe Foto do Card. */
.gcep-single-cover {
	aspect-ratio: 7 / 2;
}

.gcep-single-cover__picture,
.gcep-single-cover__image {
	display: block;
	width: 100%;
	height: 100%;
}

.gcep-single-cover__image {
	object-fit: cover;
}

@media (max-width: 767.98px) {
	.gcep-single-cover--mobile-card {
		aspect-ratio: 3 / 2;
	}
}

/* 2.5.39 - 2026-05-06 - Sobreposição do avatar do single-anuncio na capa, somente mobile.
   Usa classe própria pra evitar dependência de valor arbitrário Tailwind (-mt-[59px])
   que só compila se o build for refeito. Determinístico em qualquer ambiente. */
@media (max-width: 767.98px) {
	.gcep-avatar-overlap-mobile {
		margin-top: -59px;
	}
}

/* 2.5.41 - 2026-05-06 - Hero da home com min-height + padding top/bottom em vez de altura
   fixa. Antes era h-[420px] md:h-[600px] e o conteúdo (com filtros de estado/cidade/bairro)
   estourava sem respiro. Agora cresce naturalmente com 50px de padding top/base mantendo
   o tamanho mínimo padrão do hero. Classe própria pra escapar do bundle Tailwind compilado. */
/*
 * 2.5.401 - Valoar - 2026-09-10: o "Pular para o conteúdo" sai do fluxo.
 *
 * O link nasceu na 2.5.389 com o comentário dizendo que só aparece ao receber foco — e o CSS que
 * faria isso nunca foi escrito. Resultado: um link de 19px de altura no topo de TODA página,
 * escondido atrás do header fixo, empurrando o corpo para baixo. Era a faixa branca entre o
 * header e a foto do topo que o dono apontou na produção.
 *
 * `position:absolute` é o que resolve — tirar do fluxo, não só esconder. `display:none` ou
 * `visibility:hidden` fariam o link sumir da navegação por teclado, que é a única razão de ele
 * existir. Fora da tela por coordenada, ele continua na ordem de tabulação e volta no foco.
 */
.gcep-skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 100000;
	padding: .65rem 1.1rem;
	background: #fff;
	color: var(--gcep-color-primary, #0f5132);
	font-weight: 700;
	font-size: .9rem;
	text-decoration: none;
	border-radius: 0 0 .5rem 0;
	box-shadow: 0 2px 10px rgb(11 58 37 / .18);
}
.gcep-skip-link:focus,
.gcep-skip-link:focus-visible {
	left: 0;
	outline: 2px solid var(--gcep-color-primary, #0f5132);
	outline-offset: 2px;
}

.gcep-hero-section {
	min-height: 420px;
	/* 2.5.98 - Dante Testa - 2026-05-14: mobile +20px no padding top/base
	   (50 -> 70) por pedido do cliente — mais respiro entre header fixo e
	   conteudo do hero / entre conteudo e proxima secao.
	   2.5.307 - Dante Testa - 2026-08-30: topo de 70px para 44px. Com o título maior no
	   celular, os 70px empurravam a busca para fora da primeira tela — quem abre o site
	   via o título e precisava rolar para achar o campo de busca, que é a razão de o hero
	   existir. 44px ainda separa do header fixo, sem colar. A base fica em 56px: o hero
	   não deve terminar rente à seção seguinte. */
	padding-top: 44px;
	padding-bottom: 56px;
}
@media (min-width: 768px) {
	.gcep-hero-section {
		/* 2.5.397 - Valoar - 2026-09-10: a altura volta a ser do CONTEÚDO.
		   Os 600px fixos datam de quando o hero tinha título, subtítulo, o seletor de tipo e as
		   fileiras de filtro. Com a busca única sobrou um campo e a linha do clima: medido no
		   desktop, o conteúdo ocupa 427px e a seção continuava com 600, deixando ~90px de foto
		   morta embaixo da linha do clima — a faixa que o dono apontou. O mínimo de 420px da
		   regra base continua valendo como piso, então o hero nunca fica raso demais, e os 50px
		   de respiro em cima e embaixo seguem intactos. */
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

/* 2.5.42 - 2026-05-06 - Multistep do anúncio: scroll-margin-top em cada step para que o
   scrollIntoView ao trocar de step não esconda o título atrás do dashboard-header (h-14)
   + form-header (h-14 + barra). Mobile precisa mais offset; desktop o form-header é
   sticky top-0 mas a altura ainda exige compensação. */
#gcep-multistep-form [data-step] {
	scroll-margin-top: 140px;
}
@media (min-width: 1024px) {
	#gcep-multistep-form [data-step] {
		scroll-margin-top: 100px;
	}
}

/* 2.5.43 - 2026-05-06 - Header interno do dashboard (anunciante) BUGADO no mobile.
   Pattern <main class="flex-1 lg:ml-64 ... min-h-screen"> + <header class="... sticky top-14 ...">
   tinha gap inexplicável entre o gcep-mobile-header (fixed top-0 h-14) e o header interno
   sticky em iOS Safari — possivelmente por interação flex-col + min-h-screen + sticky.
   Solução pragmática: no mobile o header interno vira FIXED top:56px e o <main> ganha
   padding-top:56px pra compensar. Desktop sticky permanece intocado. Exclui o form de
   criar/editar anúncio (já tem .gcep-form-fixed-layout próprio). */
@media (max-width: 1023.98px) {
	main.flex-1[class~="min-h-screen"]:not(.gcep-form-fixed-layout) > header.sticky {
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		z-index: 25;
	}
	main.flex-1[class~="min-h-screen"]:not(.gcep-form-fixed-layout) {
		padding-top: 56px;
	}
}

/* 2.5.42 - 2026-05-06 - Form de anúncio mobile com header de steps + nav rodapé FIXOS
   (não mais sticky), e o form-step scrollable no meio. Antes o sticky bottom + sticky top
   conflitavam com o scroll do body e ficavam imprevisíveis. Agora: form-header fixed em
   top:56px (logo abaixo do gcep-mobile-header), nav-bottom fixed em bottom:0, e o
   container do form ganha padding-top + padding-bottom pra compensar a altura dos 2.
   Aplica só em mobile/tablet (<lg). Desktop mantém comportamento sticky original. */
@media (max-width: 1023.98px) {
	.gcep-form-fixed-layout #gcep-form-header {
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		z-index: 25;
	}
	.gcep-form-fixed-layout #gcep-nav-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 25;
	}
	.gcep-form-fixed-layout > .gcep-form-fixed-body {
		padding-top: 92px;
		padding-bottom: 88px;
	}
	#gcep-multistep-form [data-step] {
		scroll-margin-top: 160px;
	}
}

/* 2.5.42 - 2026-05-06 - Drawer mobile do dashboard. Os estilos da .gcep-sidebar/.gcep-sidebar-open
   nunca foram definidos — JS adicionava classes que não faziam nada. No mobile a sidebar
   ficava fixa em left:0 com bg-white por trás do header (z-20 vs header z-30), confundindo
   o usuário. Agora: drawer com translateX(-100%) por default no mobile, abre via classe
   .gcep-sidebar-open. Overlay escuro fecha ao tocar. Z-index acima do header quando aberto. */
.gcep-sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 39;
	-webkit-tap-highlight-color: transparent;
}
.gcep-sidebar-overlay.active {
	display: block;
}
@media (max-width: 1023.98px) {
	.gcep-sidebar {
		transform: translateX(-100%);
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
		z-index: 40 !important;
		top: 0 !important;
	}
	.gcep-sidebar.gcep-sidebar-open {
		transform: translateX(0);
		box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
	}
}
@media (min-width: 1024px) {
	.gcep-sidebar-overlay {
		display: none !important;
	}
}

/* ==========================================================================
   Color picker reutilizável (Aparência, Rodapé, Hero, CTA, Cards)
   2.5.58 - Dante Testa - 2026-05-07
   - Substitui valores arbitrários Tailwind (md:basis-[42%], text-[22px]) que
     não existem no build pré-compilado e quebravam o layout do bloco
     "Textos do Hero".
   - Padroniza swatch (input type=color) + input hex editável.
   ========================================================================== */
.gcep-color-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.gcep-color-row__swatch {
	width: 48px;
	height: 40px;
	padding: 2px;
	border-radius: 0.5rem;
	border: 1px solid #e2e8f0;
	background: #fff;
	cursor: pointer;
	flex-shrink: 0;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.gcep-color-row__swatch:hover,
.gcep-color-row__swatch:focus {
	border-color: var(--gcep-color-primary, #0f5132);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gcep-color-primary, #0f5132) 15%, transparent);
	outline: none;
}
.gcep-color-row__hex {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 0.5rem;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	letter-spacing: 0.01em;
	color: #0f172a;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.gcep-color-row__hex:focus {
	border-color: var(--gcep-color-primary, #0f5132);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gcep-color-primary, #0f5132) 15%, transparent);
	background: #fff;
}
.gcep-color-row__hex.is-invalid {
	border-color: #f43f5e;
	box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.18);
	background: #fff1f2;
}

/* Linha de campo dos cards de anúncio (zap/tel/como chegar) */
.gcep-card-color-row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.gcep-card-color-row__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	color: #475569;
	letter-spacing: 0.02em;
}

/* Layout responsivo: input texto + picker de cor lado a lado em md+ */
.gcep-color-pair {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.gcep-color-pair > .gcep-color-pair__text {
	flex: 1 1 auto;
	min-width: 0;
}
.gcep-color-pair > .gcep-color-pair__picker {
	flex: 0 0 auto;
}
@media (min-width: 768px) {
	.gcep-color-pair {
		flex-direction: row;
		align-items: stretch;
	}
	.gcep-color-pair > .gcep-color-pair__text {
		flex: 1 1 60%;
	}
	.gcep-color-pair > .gcep-color-pair__picker {
		flex: 0 0 auto;
		min-width: 220px;
	}
}

/* 2.5.79 - Dante Testa - 2026-05-11 - FIX (Leaflet sobrepondo header fixo no scroll mobile do single):
   o header do tema usa z-50 (Tailwind), mas os panes do Leaflet sobem ate z-index 800 (controls/popup),
   o que fazia o mapa cobrir o header GuiaWP ao scrollar. Isolando o stacking context no container do
   mapa, os z-indexes internos do Leaflet ficam confinados e nao escapam acima do header.
   Aplica em qualquer #gcep-map-* (single anuncio, modal, mapa global) e tambem na pagina /mapa. */
[id^="gcep-map-"],
#gcep-mapa,
.gcep-map-container {
	isolation: isolate;
	position: relative;
	z-index: 0;
}

/* 2.5.85 - Dante Testa - 2026-05-14: paginas Gutenberg (page.php) sao renderizadas fullwidth
   sem container limitador, sem titulo e sem padding/margin de wrapper. O conteudo dos blocos
   fica responsavel pelo proprio layout — landing pages, blocos de capa, embeds, colunas
   podem ocupar 100% da largura. */
.gcep-page-fullwidth {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.gcep-page-content {
	margin: 0;
	padding: 0;
}

/* 2.5.89 - Dante Testa - 2026-05-14: container legivel APENAS para tags de texto puro
   (p, h1-h6, ul, ol, dl, blockquote). Antes a regra usava * + :not(.alignfull):not(.alignwide):not(.wp-block-*),
   o que pegava <section>, <main>, <div> manuais coladas via Code do editor e forcava boxed,
   contradizendo o pedido de layout fullwidth para qualquer HTML estrutural manual. */
.gcep-page-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre):not(.alignfull):not(.alignwide) {
	max-width: 80ch;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

.gcep-page-content .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.gcep-page-content .alignwide {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Imagens responsivas em blocos Gutenberg full-bleed: nao deixar passar do viewport. */
.gcep-page-content img,
.gcep-page-content video,
.gcep-page-content iframe {
	max-width: 100%;
	height: auto;
}

/*
 * 2.5.112 - Dante Testa - 2026-06-04 - https://dantetesta.com.br
 * Listagens de anuncios com 2 cards por linha no mobile (opcao em Configuracoes >
 * Plataforma > "Layout das Listagens (Mobile)"). Ativado pela classe
 * .gcep-cards-grid--2up no container do grid (helper guiawp_reset_cards_grid_class).
 * Escopo restrito a <640px: tablet/desktop seguem com as colunas Tailwind originais.
 * Override sem !important: o seletor de 2 classes (.gcep-cards-grid.gcep-cards-grid--2up)
 * tem especificidade maior que o .grid-cols-1 pre-compilado do Tailwind.
 */
@media (max-width: 639.98px) {
	.gcep-cards-grid.gcep-cards-grid--2up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.625rem;
	}
	/* Card compacto: reduz raios, paddings e tipografia para caber 2 por linha. */
	.gcep-cards-grid--2up .gcep-card-anuncio {
		border-radius: 0.875rem;
	}
	.gcep-cards-grid--2up .gcep-card-body {
		padding: 0.625rem;
	}
	.gcep-cards-grid--2up .gcep-card-cat {
		font-size: 8px;
		padding: 0.05rem 0.4rem;
		margin-bottom: 0.375rem;
		letter-spacing: 0.06em;
	}
	.gcep-cards-grid--2up .gcep-card-title {
		font-size: 0.8125rem;
		line-height: 1.2;
	}
	.gcep-cards-grid--2up .gcep-card-footer {
		padding-left: 0.625rem;
		padding-right: 0.625rem;
		padding-bottom: 0.625rem;
	}
	.gcep-cards-grid--2up .gcep-card-footer > div {
		gap: 0.375rem;
		padding-top: 0.625rem;
	}
	/* Acoes (WhatsApp/telefone/mapa) menores; mantem so os icones sociais. */
	.gcep-cards-grid--2up .gcep-card-action {
		height: 2rem;
		width: 2rem;
		border-radius: 0.625rem;
	}
	.gcep-cards-grid--2up .gcep-card-action .material-symbols-outlined {
		font-size: 17px;
	}
	.gcep-cards-grid--2up .gcep-card-action svg {
		height: 15px;
		width: 15px;
	}
	/* A setinha "ver detalhes" some no modo compacto (o card todo ja e clicavel). */
	.gcep-cards-grid--2up .gcep-arrow-btn {
		display: none;
	}
}

/*
 * 2.5.113 - Dante Testa - 2026-06-04 - https://dantetesta.com.br
 * Listagem do blog com 2 posts por linha no mobile (opcao em Configuracoes >
 * Plataforma > "Layout das Listagens (Mobile)" > Blog). Ativado pela classe
 * .gcep-blog-grid--2up no container (helper guiawp_reset_blog_grid_class). O card de
 * blog tem markup proprio; os elementos sao alcancados por seletores estruturais sob a
 * ancora .gcep-blog-card (no <article>), evitando inflar o HTML com classes extras.
 */
@media (max-width: 639.98px) {
	.gcep-blog-grid.gcep-blog-grid--2up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
	.gcep-blog-grid--2up .gcep-blog-card {
		border-radius: 1.1rem;
	}
	/* corpo do card (unico <div> filho do <article>; o outro filho e o <a> da imagem) */
	.gcep-blog-grid--2up .gcep-blog-card > div {
		padding: 0.75rem;
	}
	/* meta (data + categoria) — primeiro filho do corpo */
	.gcep-blog-grid--2up .gcep-blog-card > div > div:first-child {
		font-size: 9px;
		letter-spacing: 0.08em;
		gap: 0.4rem;
		margin-bottom: 0.4rem;
	}
	.gcep-blog-grid--2up .gcep-blog-card h2 {
		font-size: 0.9rem;
		line-height: 1.2;
	}
	/* excerpt — unico <p> direto do corpo, limitado a 3 linhas */
	.gcep-blog-grid--2up .gcep-blog-card > div > p {
		font-size: 0.75rem;
		margin-top: 0.4rem;
		line-height: 1.35;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	/* "Ler postagem" — ultimo filho do corpo */
	.gcep-blog-grid--2up .gcep-blog-card > div > div:last-child {
		margin-top: 0.6rem;
	}
	.gcep-blog-grid--2up .gcep-blog-card > div > div:last-child a {
		font-size: 0.75rem;
	}
}

/*
 * 2.5.116 - Dante Testa - 2026-06-04 - https://dantetesta.com.br
 * Carrossel "Postagens Recentes" da home (#gcep-blog-carousel / .gcep-blog-track).
 * MOVIDO do <style> inline do front-page.php (que ficava DEPOIS do <script>, fazendo o
 * refresh() inicial medir scrollWidth antes do flex/larguras serem aplicados -> a seta
 * "Proximo" nascia desativada). Aqui no frontend.css ele carrega no <head>, antes do
 * <script> do body, entao o layout ja esta pronto quando o JS mede o scrollWidth.
 */
.gcep-blog-track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 0.75rem;
	margin-block: -0.75rem;
}
.gcep-blog-track::-webkit-scrollbar { display: none; }
.gcep-blog-track > [data-blog-card] { flex: 0 0 auto; scroll-snap-align: start; width: 86%; }
.gcep-blog-track--2up > [data-blog-card] { width: calc((100% - 1rem) / 2); }
@media (min-width: 640px) {
	.gcep-blog-track > [data-blog-card] { width: calc((100% - 1rem) / 2); }
}
/*
 * 2.5.351 - 2026-08-31 - eram 3 cards por linha no desktop; o dono pediu 4. A conta acompanha:
 * com N cards visiveis sobram N-1 vaos de 1rem, entao o desconto vai de 2rem para 3rem.
 */
@media (min-width: 1024px) {
	.gcep-blog-track > [data-blog-card] { width: calc((100% - 3rem) / 4); }
}
/* Card compacto quando 2 colunas no mobile (imagem mais baixa, fontes/paddings menores). */
@media (max-width: 639.98px) {
	.gcep-blog-track--2up > [data-blog-card] > a { height: 7rem; }
	.gcep-blog-track--2up [data-blog-card] > div { padding: 0.75rem; }
	.gcep-blog-track--2up [data-blog-card] > div > div:first-child { font-size: 9px; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
	.gcep-blog-track--2up [data-blog-card] h4 { font-size: 0.9rem; line-height: 1.2; }
	.gcep-blog-track--2up [data-blog-card] > div > p { font-size: 0.75rem; margin-top: 0.4rem; }
}

/*
 * 2.5.125 - Dante Testa <https://dantetesta.com.br> - 2026-06-10
 * Single do anúncio (mobile): exibir o card "Informações de Contato" ANTES do bloco "Sobre".
 * Abaixo de lg (1024px) o grid principal (lg:grid-cols-12 -> grid-cols-1) empilha as colunas
 * na ordem do DOM; um order negativo na sidebar a sobe para o topo. No desktop (>=1024px) a
 * regra não se aplica e a sidebar volta a 2a coluna (layout lateral sticky preservado).
 */
@media (max-width: 1023.98px) {
	.gcep-single-aside {
		order: -1;
	}
}

/*
 * 2.5.147 - Dante Testa - 2026-06-18: tag Aberto/Fechado do horário de funcionamento (card + single).
 * Preenchida ao vivo pelo gcep-hours.js. No card 2-colunas (mobile) some o "· fecha 18:00" (só a tag).
 */
.gcep-hours-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.2rem 0.6rem;
	border-radius: 9999px;
}
.gcep-hours-chip.is-open {
	background: #dcfce7;
	color: #166534;
}
.gcep-hours-chip.is-closed {
	background: #fee2e2;
	color: #991b1b;
}
.gcep-hours-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: currentColor;
	flex: 0 0 auto;
}
.gcep-cards-grid--2up .gcep-hours-extra {
	display: none;
}
/* Aviso "hoje é feriado" (single) — slot preenchido pelo gcep-hours.js. */
.gcep-hours-holiday-note,
.gcep-hours-holiday-slot {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	color: #92400e;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 0.6rem;
	padding: 0.45rem 0.7rem;
}

/*
 * Agenda compacta (card da sidebar e mobile): dia abreviado + horários em pills.
 * Linha de "hoje" recebe .gcep-hours-today via gcep-hours.js (cache-safe).
 */
.gcep-hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.gcep-hours-row {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.5rem 0.6rem;
	border-radius: 0.7rem;
}
/* Colapsado: só ontem · hoje · amanhã (gcep-hours.js esconde o resto). */
.gcep-hours-row.gcep-hours-collapsed {
	display: none;
}
.gcep-hours-day {
	flex: 0 0 2.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: #64748b;
	padding-top: 0.2rem;
	letter-spacing: 0.01em;
}
.gcep-hours-times {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	flex: 1 1 auto;
	min-width: 0;
}
.gcep-hours-pill {
	font-size: 0.72rem;
	font-weight: 600;
	color: #334155;
	background: #f1f5f9;
	border-radius: 9999px;
	padding: 0.18rem 0.55rem;
	white-space: nowrap;
}
.gcep-hours-pill.is-24h {
	background: #dcfce7;
	color: #166534;
}
.gcep-hours-closed {
	font-size: 0.78rem;
	font-style: italic;
	color: #94a3b8;
	padding-top: 0.2rem;
}
.gcep-hours-row.gcep-hours-today {
	background: rgb(var(--gcep-color-primary-rgb, 37 99 235) / 0.07);
}
.gcep-hours-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin-top: 0.65rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--gcep-color-primary, #0f5132);
	background: none;
	border: 0;
	padding: 0.2rem 0;
	cursor: pointer;
}
.gcep-hours-toggle:hover {
	text-decoration: underline;
}
.gcep-hours-row.gcep-hours-today .gcep-hours-day {
	color: var(--gcep-color-primary, #0f5132);
}
.gcep-hours-row.gcep-hours-today .gcep-hours-pill {
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.gcep-hours-feriado-rule {
	margin-top: 0.85rem;
	padding-top: 0.75rem;
	border-top: 1px solid #f1f5f9;
	font-size: 0.78rem;
	color: #94a3b8;
}

/* Selo Aberto/Fechado sobreposto à capa do single (desktop). Pílula branca destacada. */
.gcep-hours-cover-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 10;
}
.gcep-hours-cover-badge .gcep-hours-chip {
	font-size: 0.85rem;
	font-weight: 800;
	padding: 0.5rem 0.95rem;
	background: rgba(255, 255, 255, 0.95);
	color: #0f172a;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.gcep-hours-cover-badge .gcep-hours-chip.is-open {
	color: #15803d;
}
.gcep-hours-cover-badge .gcep-hours-chip.is-closed {
	color: #b91c1c;
}
.gcep-hours-cover-badge .gcep-hours-dot {
	width: 0.6rem;
	height: 0.6rem;
}

/*
 * 2.5.162 - Dante Testa <https://dantetesta.com.br> - 2026-07-12
 * Tipografia da descrição "Sobre" do single do anúncio (.prose / .prose-lg).
 * O tema é um reset: o Preflight do Tailwind zera margin de p/h2..h4 e remove
 * marcador/recuo de ul/ol, e o plugin @tailwindcss/typography NÃO está no build
 * pré-compilado — então as classes .prose usadas no template não existiam no CSS.
 * Resultado: os parágrafos, títulos e listas que o anunciante cria no editor
 * colavam sem espaçamento e as quebras de linha "sumiam". Aqui restauramos o
 * espaçamento tipográfico mínimo (parágrafos, títulos, listas, links, citação e
 * tabela). Escopado a .prose, que só aparece no bloco "Sobre" do single.
 */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.25em; }
.prose h2, .prose h3, .prose h4 {
	margin: 1.6em 0 0.6em;
	font-weight: 700;
	line-height: 1.3;
	color: #0f172a;
}
.prose h2 { font-size: 1.5em; }
.prose h3 { font-size: 1.25em; }
.prose h4 { font-size: 1.1em; }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.6em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 0.4em 0; }
.prose li > ul, .prose li > ol { margin: 0.4em 0; }
.prose a {
	color: var(--gcep-color-primary, #0f5132);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.prose blockquote {
	margin: 0 0 1.25em;
	padding-left: 1em;
	border-left: 4px solid var(--gcep-color-primary, #0f5132);
	color: #475569;
	font-style: italic;
}
.prose table {
	width: 100%;
	margin: 0 0 1.25em;
	border-collapse: collapse;
	font-size: 0.95em;
}
.prose th, .prose td {
	padding: 0.5em 0.75em;
	border: 1px solid #e2e8f0;
	text-align: left;
	vertical-align: top;
}
.prose th { background: #f8fafc; font-weight: 700; color: #0f172a; }
/* Tamanho maior do texto (equivalente a prose-lg). */
.prose-lg { font-size: 1.125rem; line-height: 1.75; }

/*
 * 2.5.163 - Dante Testa <https://dantetesta.com.br> - 2026-07-15
 * Impersonação: tarja fixa no topo enquanto o admin navega como um usuário.
 * Renderizada no wp_footer (GCEP_Impersonation::render_banner); o body ganha
 * padding-top via a classe .gcep-impersonating (filtro body_class) para reservar
 * o espaço no fluxo normal.
 */
body.gcep-impersonating { padding-top: 3rem; }
/*
 * Desloca as barras fixas/sticky CONHECIDAS 3rem para baixo da tarja — mesmo
 * princípio da admin bar do WP (elementos position:fixed ignoram o padding do body).
 * ponytail: lista fechada dos headers fixos atuais; se um novo header fixo top-0
 * for criado, some com a tarja e precisa entrar aqui.
 */
body.gcep-impersonating .gcep-mobile-header,        /* header mobile do painel */
body.gcep-impersonating header.glass-effect,        /* header público fixo */
body.gcep-impersonating #gcep-theme-mobile-menu {   /* drawer mobile do tema */
	top: 3rem;
}
body.gcep-impersonating .gcep-sidebar {             /* sidebar fixa do painel */
	top: 3rem;
	height: calc(100% - 3rem);
}
.gcep-impersonate-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	background: #1e293b;
	color: #fff;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.25);
}
.gcep-impersonate-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	min-height: 3rem;
	padding: 0.4rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.gcep-impersonate-bar__text {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
}
.gcep-impersonate-bar__text .material-symbols-outlined { font-size: 20px; }
.gcep-impersonate-bar__form { margin: 0; }
.gcep-impersonate-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: #f59e0b;
	color: #1e293b;
	font-weight: 800;
	font-size: 0.85rem;
	padding: 0.45rem 0.9rem;
	border: 0;
	border-radius: 0.6rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.gcep-impersonate-bar__btn:hover { background: #fbbf24; }
.gcep-impersonate-bar__btn .material-symbols-outlined { font-size: 18px; }

/* 2.5.174 - Dante Testa - 2026-07-18: carrossel homogêneo de vídeos do single (player 16:9 + thumbs). */
.gcep-video-thumbs { scrollbar-width: none; -ms-overflow-style: none; }
.gcep-video-thumbs::-webkit-scrollbar { display: none; }
.gcep-video-thumb { opacity: .6; transition: opacity .2s, box-shadow .2s; border-radius: .5rem; }
.gcep-video-thumb:hover { opacity: 1; }
.gcep-video-thumb.is-active { opacity: 1; box-shadow: 0 0 0 3px var(--gcep-color-primary, #4f46e5); }

/* 2026-09-09 - Valoar: a grade das fichas longas (evento, imóvel, veículo).
   No celular o grid vira uma coluna e a barra lateral, que traz preço, contato e mapa, caía
   depois de TUDO. A pessoa lia a descrição inteira e chegava nos comentários sem nunca ver
   quanto custava. Aqui a coluna de conteúdo é partida em duas e a lateral entra no meio.
   Em CSS próprio de propósito: `order-*` e `row-span-2` NÃO existem no Tailwind pré-compilado
   deste site, e classe que não existe não estiliza nada nem avisa. */
.gcep-grade{display:flex;flex-direction:column;gap:2rem}
.gcep-grade__topo{order:1;min-width:0}
.gcep-grade__lado{order:2;min-width:0}
.gcep-grade__base{order:3;min-width:0}
@media (min-width:1024px){
	.gcep-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
	/* Posição explícita, não automática: no HTML a lateral vem DEPOIS do bloco de baixo, que é
	   o que a põe antes dos comentários no celular. O encaixe automático a jogaria para a
	   segunda linha. */
	.gcep-grade__topo{order:0;grid-column:1/3;grid-row:1}
	.gcep-grade__base{order:0;grid-column:1/3;grid-row:2}
	.gcep-grade__lado{order:0;grid-column:3/4;grid-row:1/3}
}

/* ============================================================================
   2.5.386 - Valoar - 2026-09-10 — O CARD DE ANÚNCIO NO CELULAR VIRA LINHA.

   Pedido do dono, apontando para o app que já está em teste: "a visão de hoje é
   muito ruim, muito complexa... quero a listazinha organizadinha".

   No celular o card era uma foto 3:2 de ~250px de altura: UM anúncio por tela,
   e a pessoa rolava muito para ver pouco. Na linha compacta cabem 4 ou 5, que é
   o que o app faz.

   MESMO MARKUP, layout trocado por CSS. Não é duplicação de DOM de propósito:
   markup dobrado significa texto dobrado na página, e isso desfaria o trabalho
   de 2.5.385, que acabou de tirar o lixo do texto que o Google lê.

   Tudo em CSS próprio porque o Tailwind deste site é PRÉ-COMPILADO: classe que
   não existe não estiliza e não avisa.
   ========================================================================= */
@media (max-width:767.98px){

	/* A moldura perde o ar de cartão de vitrine e vira item de lista. */
	.gcep-card-anuncio{
		border-radius:14px;
		box-shadow:none;
		border-color:#e7e2d8;
	}
	/* Sem levantar no toque: em lista, item que sobe ao encostar parece falha. */
	.gcep-card-anuncio:hover{transform:none;box-shadow:none}

	/* O <a> agrupa miniatura + texto em duas colunas. */
	.gcep-card-anuncio > a{
		display:grid;
		grid-template-columns:64px minmax(0,1fr);
		gap:12px;
		align-items:center;
		padding:12px;
	}

	/* A foto 3:2 vira miniatura quadrada. */
	.gcep-card-anuncio > a > div:first-child{
		aspect-ratio:1/1;
		width:64px;
		height:64px;
		border-radius:10px;
		flex:none;
	}
	/* O véu escuro do rodapé da foto e a coroa não cabem em 64px — a coroa é
	   substituída pela pílula "Destaque", ao lado da categoria, como no app. */
	.gcep-card-anuncio > a > div:first-child > .pointer-events-none,
	.gcep-card-anuncio .gcep-card-crown{display:none}

	.gcep-card-body{padding:0!important;gap:4px;justify-content:center}

	/* Categoria e Destaque na mesma linha, como no app. */
	.gcep-card-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:0}
	.gcep-card-cat{margin-bottom:0!important;font-size:9px}
	.gcep-card-destaque{
		display:inline-flex;align-items:center;border-radius:999px;
		padding:2px 8px;font-size:9px;font-weight:700;letter-spacing:.1em;
		text-transform:uppercase;
		color:#12805a;background:rgb(34 181 115 / .14);
	}

	.gcep-card-title{font-size:15px!important;line-height:1.3!important}
	.gcep-card-hours{margin-top:2px!important}

	/* Bairro na mesma linha do status, separado por ponto — como no app. */
	.gcep-card-local{color:#5e6a64;font-size:12px}
	.gcep-card-local::before{content:"·";margin:0 6px;color:#a9b7cd}

	/* Ações alinhadas com o texto, não com a miniatura. */
	.gcep-card-footer{padding:0 12px 12px 88px!important}
	.gcep-card-footer > div{border-top:0!important;padding-top:0!important;gap:8px}
	.gcep-card-footer .gcep-card-action{height:34px;width:34px;border-radius:10px}
	.gcep-card-footer .gcep-card-action .material-symbols-outlined{font-size:18px}
	.gcep-card-footer .gcep-arrow-btn{height:32px;width:32px}
	.gcep-card-footer .gcep-arrow-btn .material-symbols-outlined{font-size:18px}

	/* Respiro entre linhas, no lugar do vão de grade. */
	.gcep-cards-grid{gap:10px!important}
}

/* Desktop: a pílula de destaque não aparece (lá quem marca é a coroa na foto). */
@media (min-width:768px){
	.gcep-card-destaque{display:none}
	.gcep-card-local{display:none}
}

/* ============================================================================
   2.5.386 - Valoar - 2026-09-10 — A HOME NO CELULAR, NA VISÃO DO APP.

   Antes: hero de 420px com título de três linhas, subtítulo, seis pílulas de
   tipo em duas fileiras, campo de busca, categoria, cidade e botão. O topo
   comia a tela inteira antes de qualquer anúncio aparecer.

   Agora: título curto, uma fileira de tipos que corre de lado, a busca, e os
   filtros a um toque. Igual ao app, sem perder nada de função.
   ========================================================================= */
@media (max-width:767.98px){

	/* O hero encolhe: ele existe para levar à busca, não para ser um pôster. */
	.gcep-hero-section{
		min-height:0;
		padding-top:24px;
		padding-bottom:24px;
	}
	/* O título encolhe pelo clamp que está no próprio h1 (estilo inline com !important
	   vence folha de estilo, então brigar daqui não funcionaria). Aqui só o respiro. */
	.gcep-hero-section h1{margin-bottom:.5rem!important}
	/* O subtítulo repete o que o título já diz; no app não existe.
	   Classe própria: seletor por posição escondia a DATA junto, que mora numa
	   estrutura parecida logo abaixo. */
	.gcep-hero-sub{display:none}

	/* Os tipos correm de lado em UMA fileira, em vez de quebrar em duas. */
	[data-gcep-search-types]{
		flex-wrap:nowrap!important;
		overflow-x:auto;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
		margin-bottom:8px!important;
		padding-bottom:2px;
	}
	[data-gcep-search-types]::-webkit-scrollbar{display:none}
	[data-gcep-search-types] .gcep-type-chip{flex:none}

	/* Categoria e local entram por botão. Sem JS, o botão some e a linha 2 fica
	   aberta — nada fica inalcançável se o script não rodar. */
	.gcep-hero-maisfiltros{
		display:none;
		width:100%;align-items:center;gap:6px;
		margin-top:8px;padding:10px 12px;
		border:1px solid #e7e2d8;border-radius:12px;background:#f7f9fc;
		color:#5e6a64;font-size:13px;font-weight:600;
	}
	.gcep-hero-maisfiltros .material-symbols-outlined{font-size:18px}
	.gcep-hero-maisfiltros__chev{margin-left:auto;transition:transform .18s ease}
	.gcep-hero-maisfiltros[aria-expanded="true"] .gcep-hero-maisfiltros__chev{transform:rotate(180deg)}
	.gcep-hero-toggle-on .gcep-hero-maisfiltros{display:flex}
	/* 2.5.391: quem abre e fecha e o PAINEL, nao a linha 2. A linha 2 e so um dos blocos
	   la dentro — o JS do site a esconde sozinho quando o tipo escolhido nao e Anuncios, e
	   quando o alvo do toggle era ela as pilulas de tipo sumiam junto, sem caminho de volta. */
	.gcep-hero-toggle-on [data-gcep-painel]{display:none}
	.gcep-hero-toggle-on [data-gcep-painel].is-open{display:block}

	/* A faixa de contexto vira o cartão HOJE do app. */
	.gcep-hero-contexto{
		background:#fff;border:1px solid #e7e2d8;border-radius:14px;
		padding:12px 14px;margin-top:10px!important;
		justify-content:space-between;
		gap:8px 12px!important;
	}
	.gcep-hero-contexto p,
	.gcep-hero-contexto time{color:#0b3a25!important;text-shadow:none!important}
	.gcep-hero-contexto p{font-size:14px!important}

	/* Títulos de seção mais contidos: a home tem muitos, e no celular eles
	   estavam com porte de manchete. */
	.gcep-bg-fundo h2,
	.gcep-home-secao h2{font-size:1.35rem!important;line-height:1.2!important}
}

@media (min-width:768px){
	.gcep-hero-maisfiltros{display:none!important}
}

/* 2.5.386 - Valoar - 2026-09-10 — O ZOOM DA FOTO AO ABRIR OS FILTROS.
   Achado do dono: "quando clico em categoria, a imagem do fundo dá um zoom".
   Era isso mesmo: a foto é `object-cover` numa caixa `inset-0`, então quando a
   seção cresce para caber a linha 2, a caixa cresce junto e o recorte muda —
   parece zoom. A foto passa a ocupar uma FAIXA de altura fixa no celular; o que
   cresce cresce por baixo, sobre a cor da marca. A foto fica parada. */
@media (max-width:767.98px){
	.gcep-hero-section{background:#0b3a25}
	.gcep-hero-section > .absolute.inset-0.z-0{height:300px;bottom:auto}
	.gcep-hero-section > .absolute.inset-0.z-0 img{object-position:center 40%}
}

/* ============================================================================
   2.5.386 - Valoar - 2026-09-10 — NO CELULAR, CARROSSEL VIRA LISTA.

   Pedido do dono, na sequência do card de anúncio: "imóveis você não colocou em
   lista, tá card, tem que colocar em lista; vaga de emprego a mesma coisa;
   veículo também; blog também".

   Ele tem razão e o motivo é o mesmo do card: carrossel no celular esconde o
   acervo atrás de um gesto que ninguém adivinha, e cada cartão come a tela.
   Em lista, a pessoa rola e vê tudo — que é como ela já lê o resto do site.

   Os quatro blocos são de plugins diferentes e nunca compartilharam CSS, mas a
   estrutura é a mesma (uma trilha com cards dentro), então uma regra governa os
   quatro. Bloco novo entra dando à trilha a classe .gcep-lista-mobile.
   ========================================================================= */
@media (max-width:767.98px){

	.igw-home__track,
	.vgw-home__track,
	.gvag-carrossel__track,
	.gcep-blog-track,
	.gcep-lista-mobile{
		display:flex!important;
		flex-direction:column!important;
		gap:10px!important;
		overflow:visible!important;
		scroll-snap-type:none!important;
		grid-template-columns:none!important;
	}

	/* O card para de ter largura de carrossel. */
	.igw-home__track > *,
	.vgw-home__track > *,
	.gvag-carrossel__track > *,
	.gcep-blog-track > *,
	.gcep-lista-mobile > *{
		width:auto!important;
		min-width:0!important;
		max-width:none!important;
		flex:none!important;
		scroll-snap-align:none!important;
	}

	/* As setas do carrossel não têm o que fazer numa lista. */
	.igw-home__btn,
	.vgw-home__btn,
	.gvag-home__nav .gvag-home__btn,
	#gcep-blog-carousel-prev,
	#gcep-blog-carousel-next{display:none!important}

	/* Cada card vira linha: miniatura de 64px à esquerda, texto à direita.
	   Vale para imóvel, veículo e vaga, que têm a mesma casca (um <a> em coluna
	   com a foto 3:2 em cima). */
	.igw-home__track > a,
	.vgw-home__track > a,
	.gcep-lista-mobile > a{
		display:grid!important;
		grid-template-columns:64px minmax(0,1fr);
		gap:12px;
		align-items:center;
		padding:12px;
		border-radius:14px;
		box-shadow:none!important;
	}
	.igw-home__track > a > div:first-child,
	.vgw-home__track > a > div:first-child,
	.gcep-lista-mobile > a > div:first-child{
		aspect-ratio:1/1!important;
		width:64px;height:64px;
		border-radius:10px;
		overflow:hidden;
	}
	/* O corpo perde o padding de cartão — quem espaça agora é a grade. */
	.igw-home__track > a > div:not(:first-child),
	.vgw-home__track > a > div:not(:first-child),
	.gcep-lista-mobile > a > div:not(:first-child){padding:0!important}

	/* Título do card na medida da linha. */
	.igw-home__track h3,
	.vgw-home__track h3,
	.gvag-carrossel__track h3,
	.gcep-blog-track h3,
	.gcep-lista-mobile h3{font-size:15px!important;line-height:1.3!important}
}

/* 2.5.386 — A lista mostra uma PRÉVIA, não o acervo.
   Trocar carrossel por lista tornou visível o que antes estava escondido de
   lado: a home passou de ~9 mil para 17 mil pixels de altura. Cada seção agora
   mostra as primeiras e entrega o resto ao "Ver todos" que já existe no
   cabeçalho dela — que é o que o app faz ("Em destaque ... Ver todos (9)").
   Só esconde o que passa da conta; o HTML continua igual, então nenhum link
   deixa de existir para quem rastreia a página. */
@media (max-width:767.98px){
	.gcep-cards-grid > *:nth-child(n+7){display:none}
	/* !important porque a regra da linha compacta acima usa display:grid!important —
	   sem isto o corte perde a briga e a lista mostra o acervo inteiro. */
	.igw-home__track > *:nth-child(n+5),
	.vgw-home__track > *:nth-child(n+5),
	.gvag-carrossel__track > *:nth-child(n+5),
	.gcep-blog-track > *:nth-child(n+5),
	.gcep-lista-mobile > *:nth-child(n+5){display:none!important}
}

/* 2.5.386 — Acertos da lista no celular, vistos na tela.
   O selo Venda/Locação do imóvel é maior que a miniatura de 64px e saía cortado
   ("Locaçã…"). E com card de várias linhas o alinhamento ao centro empurrava o
   título para cima da foto. */
@media (max-width:767.98px){
	.igw-home__track > a,
	.vgw-home__track > a,
	.gcep-lista-mobile > a{align-items:start}

	/* Miniatura acompanha o topo do texto, não o meio do bloco. */
	.igw-home__track > a > div:first-child,
	.vgw-home__track > a > div:first-child,
	.gcep-lista-mobile > a > div:first-child{margin-top:2px}

	/* O selo encolhe para caber, e desce para o pé da miniatura. */
	.igw-home__track > a > div:first-child .absolute,
	.vgw-home__track > a > div:first-child .absolute{
		font-size:8px!important;
		padding:1px 5px!important;
		line-height:1.5;
		top:auto!important;right:auto!important;
		bottom:3px;left:3px;
		max-width:calc(100% - 6px);
		overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
	}

	/* A ficha técnica (quartos, banheiros, m²) fecha a linha sem virar bloco. */
	.igw-home__track > a > div:not(:first-child) > div:last-child,
	.vgw-home__track > a > div:not(:first-child) > div:last-child{
		border-top:0!important;padding-top:4px!important;margin-top:2px!important;
	}
}

/* 2.5.386 — Vagas e blog também viram linha.
   Eles empilharam com a regra acima, mas continuaram com cara de cartão: a raiz
   do card deles não é <a> (vaga é <div class="gvag-card">, post é <article>),
   então a regra da linha compacta não os alcançava. */
@media (max-width:767.98px){
	.gvag-carrossel__track > .gvag-card,
	.gcep-blog-track > article{
		display:grid!important;
		grid-template-columns:64px minmax(0,1fr);
		gap:12px;
		align-items:start;
		padding:12px!important;
		border-radius:14px;
		box-shadow:none!important;
	}
	/* A foto do post vira miniatura. A vaga não tem foto: o bloco do topo dela é
	   texto, então só o post recebe o recorte quadrado. */
	.gcep-blog-track > article > a:first-child,
	.gcep-blog-track > article > div:first-child{
		width:64px;height:64px;
		aspect-ratio:1/1!important;
		border-radius:10px;overflow:hidden;margin-top:2px;
	}
	.gcep-blog-track > article img{width:100%;height:100%;object-fit:cover}
	.gcep-blog-track > article > *:not(:first-child){padding:0!important}

	/* A vaga TEM foto (imagem genérica do anúncio) — conferido na tela depois de
	   eu ter suposto o contrário e a linha ter ido a 536px de altura. Mesma
	   miniatura de 64px das outras. */
	.gvag-carrossel__track > .gvag-card > *:first-child{
		width:64px;height:64px;
		aspect-ratio:1/1!important;
		border-radius:10px;overflow:hidden;margin-top:2px;
		position:relative;
	}
	.gvag-carrossel__track > .gvag-card > *:first-child img{width:100%;height:100%;object-fit:cover}
	.gvag-carrossel__track > .gvag-card > *:not(:first-child){padding:0!important}
	/* O selo Presencial/Remoto não cabe em 64px. Ele é filho de .gvag-card__image,
	   e o nome da classe é o alvo certo — seletor por posição não o alcançava. */
	.gvag-carrossel__track > .gvag-card .gvag-card__image > *:not(img){
		font-size:8px!important;padding:1px 5px!important;
		top:auto!important;left:3px!important;right:auto!important;bottom:3px!important;
		max-width:calc(100% - 6px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
	}
}

/* 2.5.386 — O CORTE DAS LISTAS FICA POR ÚLTIMO, DE PROPÓSITO.
   Entre duas regras com !important vence a que vem depois no arquivo. As regras
   que transformam card em linha usam display:grid!important, então o corte
   precisa estar DEPOIS delas — quando estava antes, a lista voltava a mostrar o
   acervo inteiro e a home ia a 17 mil pixels. Regra nova de card entra ACIMA
   deste bloco. */
@media (max-width:767.98px){
	.gcep-cards-grid > *:nth-child(n+7),
	.igw-home__track > *:nth-child(n+5),
	.vgw-home__track > *:nth-child(n+5),
	.gvag-carrossel__track > *:nth-child(n+5),
	.gcep-blog-track > *:nth-child(n+5),
	.gcep-lista-mobile > *:nth-child(n+5){display:none!important}
}

/* ============================================================================
   2.5.387 - Valoar - 2026-09-10 — ACERTOS PEDIDOS PELO DONO, OLHANDO A TELA.
   ========================================================================= */
@media (max-width:767.98px){

	/* --- 1. Os tipos de busca deixam de correr de lado ---------------------
	   "tá vendo que arrasta? ninguém vai arrastar isso aí não." Certo: rolagem
	   horizontal sem affordance é conteúdo escondido, e a última pílula cortada
	   no meio parecia defeito. O JS move a lista para dentro do painel; aqui ela
	   volta a quebrar em linhas e aparece inteira. */
	[data-gcep-search-types]{
		flex-wrap:wrap!important;
		overflow-x:visible;
		margin-bottom:0!important;
		padding-bottom:0;
	}
	[data-gcep-line2] [data-gcep-search-types]{
		width:100%;
		margin-bottom:8px!important;
		padding-bottom:8px;
		border-bottom:1px solid #f1ede6;
	}

	/* --- 2. As ações saem da linha solta e vão para a direita --------------
	   "ficou estranho." Estava: um segundo andar pendurado embaixo do texto,
	   alinhado com nada. Agora a linha tem três partes, como no app —
	   foto | texto | ação — e as duas ações ficam centradas na altura da foto.
	   O mapa sai do celular: a linha inteira já abre a ficha, e lá o botão de
	   rota está no lugar de sempre. */
	.gcep-card-anuncio{
		display:grid!important;
		grid-template-columns:minmax(0,1fr) auto;
		align-items:center;
	}
	.gcep-card-anuncio > a{grid-column:1;padding-right:0}
	.gcep-card-footer{
		grid-column:2;grid-row:1;
		padding:0 12px 0 8px!important;
		align-self:center;
	}
	.gcep-card-footer > div{gap:6px!important}
	.gcep-card-footer .gcep-card-action{height:38px;width:38px;border-radius:11px}
	.gcep-card-footer .gcep-card-action .material-symbols-outlined{font-size:19px}
	/* Some da linha: a seta (a linha toda já é o link) e a rota. */
	.gcep-card-footer .gcep-arrow-btn,
	.gcep-card-footer .gcep-card-action-chegar,
	.gcep-card-footer .flex-1{display:none!important}
}

/* ============================================================================
   2.5.389 - Valoar - 2026-09-10 — OS ACERTOS DA AUDITORIA DE UI/UX NO CELULAR.

   Medidos no navegador a 402px, não estimados. Cada um cita a regra que o
   reprovou (skill ui-ux-pro-max, 119 diretrizes).
   ========================================================================= */
@media (max-width:767.98px){

	/* "Touch Spacing — minimum 8px gap between touch targets".
	   Estava em 6px, e são as duas ações que não podem ser trocadas por engano:
	   ligar no lugar de mandar zap. */
	.gcep-card-footer > div{gap:8px!important}

	/* "Text < 12px body" é anti-padrão. As pílulas saíam em 9px, e é justamente
	   a informação que diz de que ramo é o anúncio. Sobram 216px de largura na
	   linha (medido), então cabe. O peso NÃO sobe junto: em 11px com peso alto a
	   pílula competiria com o nome do negócio. */
	.gcep-card-cat{font-size:11px!important;letter-spacing:.06em!important}
	.gcep-card-destaque{font-size:11px;letter-spacing:.06em}
	.gcep-card-local{font-size:12.5px}
}

/* "Color Contrast — minimum 4.5:1". A pílula Destaque media 4,32:1 com o verde
   translúcido composto sobre o branco. O verde da MARCA não muda — muda o tom
   do texto dentro da pílula, que passa a 5,9:1. Vale nos dois tamanhos de tela. */
.gcep-card-destaque{color:#0E6B4B}

/* ============================================================================
   2.5.390 - Valoar - 2026-09-10 — O TOPO DO CELULAR SEM A FOTO, E OS BOTÕES DE PÉ.

   Decisões do dono vendo o mockup: tirar a foto de trás do topo, o título numa
   cor só (sem o verde na cidade), e os botões de contato empilhados em vez de
   lado a lado. Escolheu DOIS botões — zap e telefone.

   Por que a foto sai: ela obriga o título a ser branco com sombra, e a sombra
   puxa a leitura para baixo. Sem ela a busca sobe ~60px e o primeiro anúncio
   passa a caber na primeira tela. De quebra sai uma imagem grande do
   carregamento, o que conta em internet ruim.

   Só no celular. No desktop a foto continua, e é ela que dá o clima da cidade
   numa tela onde sobra espaço.
   ========================================================================= */
@media (max-width:767.98px){

	/* Fora a foto e o véu de gradiente que existia por causa dela. */
	.gcep-hero-section > .absolute.inset-0{display:none!important}
	.gcep-hero-section{
		background:var(--gcep-color-fundo-categorias,#f8f4ee)!important;
		padding-top:18px;
		padding-bottom:18px;
	}

	/* O título troca de branco-com-sombra para azul-escuro sobre claro.
	   O `color` inline do tema não tem !important, então esta regra vence. */
	/* O !important saiu do estilo inline do h1 (front-page.php) justamente para esta regra
	   poder mandar no celular: estilo inline com !important vence folha de estilo, e nao
	   havia como encolher o titulo daqui enquanto ele estivesse la. */
	.gcep-hero-section h1{
		color:#0b3a25!important;
		text-shadow:none!important;
		font-size:clamp(1.15rem,4.9vw,1.6rem)!important;
		line-height:1.22!important;
		margin-bottom:.75rem!important;
	}
	/* "deixa tudo na mesma cor": o destaque da cidade perde o verde e acompanha
	   o título. O nowrap continua — nome de cidade partido ao meio lê como erro. */
	.gcep-hero-section h1 span{color:inherit!important}

	/* A faixa de contexto vira o cartão HOJE, agora sobre fundo claro. */
	.gcep-hero-contexto{margin-top:12px!important}

	/* --- Os botões de contato, de pé -------------------------------------
	   Empilhados, eles passam a ocupar a altura que a miniatura já ocupa, em vez
	   de disputar largura com o nome do negócio. Dois: são as duas ações que a
	   pessoa faz SEM abrir a ficha. Rota e redes ficam na ficha, onde há espaço. */
	.gcep-card-footer > div{flex-direction:column!important; gap:8px!important}
	.gcep-card-footer .gcep-card-action{height:36px;width:36px}
	.gcep-card-footer .gcep-card-action .material-symbols-outlined{font-size:18px}
}

/* 2.5.391 - Valoar - 2026-09-10 — A ponte da busca vazia.
   Quem digita "vaga de emprego" na busca de anúncios caía num beco. Agora a
   tela oferece os outros tipos, com o mesmo termo já preenchido. */
.gcep-busca-ponte{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #e7e2d8}
.gcep-busca-ponte__titulo{margin:0 0 .75rem;font-size:.9rem;font-weight:600;color:#5e6a64}
.gcep-busca-ponte__links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.gcep-busca-ponte__link{
	display:inline-flex;align-items:center;gap:.35rem;
	padding:.55rem .9rem;border-radius:.7rem;
	border:1px solid #ded8cc;background:#fff;
	font-size:.85rem;font-weight:700;color:var(--gcep-color-primary,#0f5132);
	text-decoration:none;
}
.gcep-busca-ponte__link:hover{border-color:var(--gcep-color-primary,#0f5132);background:#f7f9fc}
.gcep-busca-ponte__link .material-symbols-outlined{font-size:18px}