/* ==========================================================================
   Guia Guiaponto: estilos do front.
   Tokens do site principal (07/10/2026) + padrões da pesquisa de referências
   (design/pesquisa-referencias-2026-10-08.md): foto como protagonista, display
   condensada nos títulos, selo de assunto na imagem, seção com acento de cor.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

:root {
	/* Marca d'água (símbolo vazado da lp): 360 px no celular, onde fica na primeira tela e disputava banda
	   com a capa (Lighthouse do staging 09/10: LCP 3,1 s na cidade). */
	--gpg-vazado: url("../img/simbolo-vazado-720.webp");
	--gpg-marca: #fe2601; /* cor da marca: acentos, bordas, contornos (3,8:1 com branco: não leva texto) */
	--gpg-primaria: #e02000; /* fundo de botão com texto branco: 4,8:1 (AA) */
	--gpg-primaria-escura: #c91e00;
	--gpg-primaria-clara: #ff8e6f;
	--gpg-fundo-suave: #ffede8;
	--gpg-texto: #18181b;
	--gpg-texto-suave: #575e6b; /* 4,5:1 também sobre o fundo suave */
	--gpg-borda: #e7e5e4;
	--gpg-fundo: #ffffff;
	--gpg-fundo-alt: #f7f6f5;
	--gpg-escuro: #18181b;
	/* Cinza 70% no selo GUIA e no rodapé (rodada 2 do Alexandre, 09/10: "o black arde a vista"). Branco sobre ele 8,4:1. */
	--gpg-cinza-70: #4d4d4d;
	--gpg-gradiente: linear-gradient(135deg, #e02000, #a81800); /* texto branco em toda a faixa (4,8:1 a 7,5:1) */
	--gpg-escurecer: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.78) 100%);

	--gpg-fonte: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gpg-fonte-display: "Outfit", "Inter", sans-serif;
	--gpg-raio: 14px;
	--gpg-raio-pequeno: 8px;
	--gpg-raio-pilula: 999px;
	--gpg-largura: 1240px;
	--gpg-largura-texto: 720px;
	--gpg-respiro: clamp(1rem, 4vw, 2rem);
	--gpg-secao: clamp(2.5rem, 6vw, 4.5rem);
	--gpg-sombra: 0 1px 2px rgba(24, 24, 27, 0.06), 0 8px 24px rgba(24, 24, 27, 0.06);
}

@media (max-width: 720px) {
	:root {
		--gpg-vazado: url("../img/simbolo-vazado-360.webp");
	}
}

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

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
	}
}

body {
	margin: 0;
	font-family: var(--gpg-fonte);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--gpg-texto);
	background: var(--gpg-fundo);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--gpg-primaria-escura);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--gpg-primaria);
}

:focus-visible {
	outline: 3px solid var(--gpg-marca);
	outline-offset: 2px;
}

h1,
h2,
h3 {
	margin: 0 0 0.5em;
	font-family: var(--gpg-fonte-display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.005em;
}

.gpg-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.gpg-pular {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--gpg-texto);
	color: #fff;
}

.gpg-pular:focus {
	left: 1rem;
}

.gpg-largura {
	width: 100%;
	max-width: var(--gpg-largura);
	margin-inline: auto;
	padding-inline: var(--gpg-respiro);
}

.gpg-largura--texto {
	max-width: calc(var(--gpg-largura-texto) + 2 * var(--gpg-respiro));
}

.gpg-sobretitulo {
	margin: 0 0 0.5rem;
	font-family: var(--gpg-fonte-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gpg-primaria-escura);
}

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

.gpg-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--gpg-raio-pilula);
	background: var(--gpg-primaria);
	color: #fff;
	font: 600 1rem/1.2 var(--gpg-fonte);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.gpg-botao:hover,
.gpg-botao:focus-visible {
	background: var(--gpg-primaria-escura);
	color: #fff;
}

.gpg-botao:active {
	transform: translateY(1px);
}

.gpg-botao--pequeno {
	min-height: 40px;
	padding: 0.5rem 1.1rem;
	font-size: 0.9375rem;
}

.gpg-botao--grande {
	min-height: 56px;
	padding: 1rem 1.75rem;
	font-size: 1.0625rem;
}

.gpg-botao--claro {
	background: #fff;
	color: var(--gpg-primaria-escura);
	box-shadow: inset 0 0 0 2px var(--gpg-primaria);
}

.gpg-botao--claro:hover,
.gpg-botao--claro:focus-visible {
	background: var(--gpg-fundo-suave);
	color: var(--gpg-primaria-escura);
}

.gpg-botao--branco {
	background: #fff;
	color: var(--gpg-texto);
}

.gpg-botao--branco:hover,
.gpg-botao--branco:focus-visible {
	background: var(--gpg-fundo-suave);
	color: var(--gpg-texto);
}

/* ---------- Topo ---------- */

.gpg-topo {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--gpg-borda);
	backdrop-filter: saturate(1.2) blur(6px);
}

.gpg-topo__dentro {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 68px;
}

.gpg-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	flex-shrink: 0;
}

.gpg-marca__logo {
	width: auto;
	height: 34px;
}

.gpg-marca__guia {
	padding: 0.1rem 0.55rem;
	border-radius: var(--gpg-raio-pequeno);
	background: var(--gpg-cinza-70);
	color: #fff;
	font-family: var(--gpg-fonte-display);
	font-weight: 800;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gpg-menu {
	margin-left: auto;
	overflow-x: auto;
	scrollbar-width: none;
}

.gpg-menu::-webkit-scrollbar {
	display: none;
}

.gpg-menu__lista {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.gpg-menu__lista a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--gpg-raio-pequeno);
	color: var(--gpg-texto);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}

.gpg-menu__lista a:hover,
.gpg-menu__lista .current-menu-item > a {
	background: var(--gpg-fundo-alt);
	color: var(--gpg-primaria-escura);
}

@media (max-width: 720px) {
	.gpg-topo__dentro {
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
		padding-block: 0.6rem;
	}

	.gpg-menu {
		order: 3;
		width: 100%;
		margin-left: 0;
	}

	.gpg-topo .gpg-botao--pequeno {
		margin-left: auto;
	}

	.gpg-marca__logo {
		height: 28px;
	}
}

/* ---------- Faixa de busca do início ---------- */

.gpg-busca-faixa {
	position: relative;
	overflow: hidden;
	padding-block: clamp(1.75rem, 4vw, 2.75rem) 1.25rem;
	background: var(--gpg-gradiente);
	color: #fff;
}

.gpg-busca-faixa::before {
	content: "";
	position: absolute;
	right: -60px;
	top: -140px;
	width: 520px;
	aspect-ratio: 1;
	background: var(--gpg-vazado) center / contain no-repeat;
	opacity: 0.13;
	pointer-events: none;
}

.gpg-busca-faixa .gpg-largura {
	position: relative;
}

.gpg-busca-faixa__dentro {
	display: grid;
	gap: 1.25rem 2.5rem;
	align-items: end;
}

@media (min-width: 960px) {
	.gpg-busca-faixa__dentro {
		grid-template-columns: 1fr minmax(380px, 520px);
	}
}

.gpg-busca-faixa__titulo {
	margin: 0;
	font-size: clamp(2.25rem, 5.5vw, 3.75rem);
	text-transform: uppercase;
}

.gpg-busca-faixa__linha {
	margin: 0.4rem 0 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.0625rem;
}

.gpg-busca-faixa .gpg-busca__campo {
	border-color: transparent;
}

.gpg-busca-faixa .gpg-busca .gpg-botao {
	background: var(--gpg-escuro);
}

.gpg-busca-faixa .gpg-busca .gpg-botao:hover,
.gpg-busca-faixa .gpg-busca .gpg-botao:focus-visible {
	background: #000;
}

.gpg-busca-faixa :focus-visible {
	outline-color: #fff;
}

.gpg-busca-faixa__assuntos {
	margin-top: 1.25rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.gpg-busca-faixa__assuntos::-webkit-scrollbar {
	display: none;
}

/* ---------- Busca ---------- */

.gpg-busca {
	display: flex;
	gap: 0.5rem;
	width: 100%;
	max-width: 640px;
}

.gpg-busca__campo {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding: 0.75rem 1.1rem;
	border: 2px solid var(--gpg-borda);
	border-radius: var(--gpg-raio-pilula);
	background: #fff;
	color: var(--gpg-texto);
	font: 400 1rem var(--gpg-fonte);
}

.gpg-busca__campo:focus {
	border-color: var(--gpg-marca);
	outline: none;
}

.gpg-busca .gpg-botao {
	min-height: 52px;
}

@media (max-width: 480px) {
	.gpg-busca {
		flex-direction: column;
	}
}

/* ---------- Pílulas (assuntos) e selos ---------- */

.gpg-pilulas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gpg-busca-faixa .gpg-pilulas {
	flex-wrap: nowrap;
}

.gpg-pilula {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--gpg-borda);
	border-radius: var(--gpg-raio-pilula);
	background: #fff;
	color: var(--gpg-texto);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.gpg-pilula:hover {
	border-color: var(--gpg-marca);
	color: var(--gpg-primaria-escura);
}

.gpg-pilulas--claras .gpg-pilula {
	border-color: transparent;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.gpg-icone {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.gpg-selo {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	border-radius: var(--gpg-raio-pequeno);
	background: #fff;
	color: var(--gpg-texto);
	font-family: var(--gpg-fonte-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.gpg-selo--estatico {
	position: static;
	margin-bottom: 0.9rem;
	background: var(--gpg-fundo-suave);
	color: var(--gpg-primaria-escura);
	box-shadow: none;
}

.gpg-selo--estatico:hover {
	background: var(--gpg-primaria);
	color: #fff;
}

.gpg-selo .gpg-icone {
	width: 16px;
	height: 16px;
}

.gpg-atalhos {
	padding-top: 1.5rem;
}

/* ---------- Trilha ---------- */

.gpg-trilha {
	margin-bottom: 1rem;
	font-size: 0.875rem;
	color: var(--gpg-texto-suave);
}

.gpg-trilha ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gpg-trilha li + li::before {
	content: "/";
	margin-right: 0.5rem;
	opacity: 0.5;
}

.gpg-trilha a {
	color: inherit;
}

/* ---------- Seções ---------- */

.gpg-secao {
	padding-block: var(--gpg-secao) 0;
}

.gpg-secao__cabeca {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--gpg-borda);
}

.gpg-secao__titulo {
	position: relative;
	margin: 0;
	font-size: clamp(1.75rem, 3.5vw, 2.375rem);
	text-transform: uppercase;
}

.gpg-secao__titulo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(-0.75rem - 1px);
	width: 56px;
	height: 4px;
	background: var(--gpg-marca);
}

.gpg-secao__ver {
	flex-shrink: 0;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
}

.gpg-secao__ver:hover {
	text-decoration: underline;
}

/* ---------- Grades ---------- */

.gpg-grade {
	display: grid;
	gap: 1.75rem 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

@media (min-width: 1100px) {
	.gpg-grade--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.gpg-grade--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Card ---------- */

.gpg-card {
	position: relative;
}

.gpg-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.gpg-card__midia {
	position: relative;
	overflow: hidden;
	border-radius: var(--gpg-raio);
	background: var(--gpg-fundo-alt);
}

.gpg-card__imagem {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.gpg-card__link:hover .gpg-card__imagem {
	transform: scale(1.04);
}

.gpg-card__imagem--vazia {
	background:
		var(--gpg-vazado) right -14% center / 62% no-repeat,
		var(--gpg-gradiente);
}

.gpg-card__texto {
	padding-top: 0.85rem;
}

.gpg-card__rotulo {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--gpg-primaria-escura);
	font-family: var(--gpg-fonte-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gpg-card__titulo {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
	line-height: 1.08;
	transition: color 0.15s ease;
}

.gpg-card__link:hover .gpg-card__titulo {
	color: var(--gpg-primaria-escura);
}

.gpg-card__resumo {
	margin: 0 0 0.4rem;
	color: var(--gpg-texto-suave);
	font-size: 0.9375rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gpg-card__meta {
	margin: 0;
	color: var(--gpg-texto-suave);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Variante manchete: miniatura ao lado (coluna do mosaico). */
.gpg-card--manchete .gpg-card__link {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

.gpg-card--manchete .gpg-card__midia {
	flex: 0 0 132px;
	border-radius: var(--gpg-raio-pequeno);
}

.gpg-card--manchete .gpg-card__imagem {
	aspect-ratio: 1;
}

.gpg-card--manchete .gpg-card__texto {
	padding-top: 0;
}

.gpg-card--manchete .gpg-card__titulo {
	font-size: 1.375rem;
}

/* Variante capa: título sobre a foto. */
.gpg-card--capa .gpg-card__link {
	position: relative;
	justify-content: flex-end;
	min-height: clamp(360px, 52vw, 520px);
	overflow: hidden;
	border-radius: var(--gpg-raio);
	color: #fff;
}

.gpg-card--capa .gpg-card__midia {
	position: absolute;
	inset: 0;
	border-radius: 0;
}

.gpg-card--capa .gpg-card__imagem {
	height: 100%;
	aspect-ratio: auto;
}

.gpg-card--capa .gpg-card__midia::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gpg-escurecer);
}

.gpg-card--capa .gpg-card__texto {
	position: relative;
	z-index: 1;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.gpg-card--capa .gpg-card__titulo {
	max-width: 22ch;
	font-size: clamp(1.875rem, 4vw, 3rem);
	line-height: 1;
	text-transform: uppercase;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.gpg-card--capa .gpg-card__link:hover .gpg-card__titulo {
	color: #fff;
}

.gpg-card--capa .gpg-card__resumo,
.gpg-card--capa .gpg-card__meta {
	color: rgba(255, 255, 255, 0.92);
}

/* ---------- Mosaico do início ---------- */

.gpg-mosaico {
	display: grid;
	gap: 1.5rem 2rem;
	padding-top: clamp(1.75rem, 4vw, 2.75rem);
}

@media (min-width: 960px) {
	.gpg-mosaico {
		grid-template-columns: 1.6fr 1fr;
		align-items: stretch;
	}
}

.gpg-mosaico__lista {
	display: grid;
	gap: 1.25rem;
	align-content: center;
}

.gpg-mosaico__lista > .gpg-card + .gpg-card {
	padding-top: 1.25rem;
	border-top: 1px solid var(--gpg-borda);
}

/* ---------- Cidades com foto ---------- */

.gpg-cidades {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.gpg-cidade {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 200px;
	padding: 1.25rem;
	overflow: hidden;
	border-radius: var(--gpg-raio);
	background: var(--gpg-escuro);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.gpg-cidade--sem-foto {
	background:
		var(--gpg-vazado) right -30% top -20% / 70% no-repeat,
		var(--gpg-gradiente);
}

.gpg-cidade__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.gpg-cidade:not(.gpg-cidade--sem-foto)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gpg-escurecer);
}

.gpg-cidade:hover {
	color: #fff;
}

.gpg-cidade:hover .gpg-cidade__foto {
	transform: scale(1.05);
}

.gpg-cidade__nome {
	font-family: var(--gpg-fonte-display);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.gpg-cidade__total {
	font-size: 0.875rem;
	font-weight: 600;
	opacity: 0.92;
}

/* ---------- Faixa "para quem tem negócio" ---------- */

.gpg-negocios {
	margin-top: var(--gpg-secao);
	padding-block: var(--gpg-secao);
	background: var(--gpg-fundo-alt);
}

.gpg-negocios__dentro {
	display: grid;
	gap: 2rem 3rem;
	align-items: center;
}

@media (min-width: 1000px) {
	.gpg-negocios__dentro {
		grid-template-columns: 1fr 1fr;
	}
}

.gpg-negocios__titulo {
	max-width: 16ch;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	text-transform: uppercase;
}

.gpg-vantagens {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0 2rem;
	padding: 0;
	list-style: none;
}

.gpg-vantagem {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.gpg-icone-3d {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}

.gpg-vantagem__titulo {
	margin: 0 0 0.2rem;
	font-family: var(--gpg-fonte);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.3;
}

.gpg-vantagem p {
	margin: 0;
	color: var(--gpg-texto-suave);
	font-size: 0.9375rem;
}

.gpg-prova {
	position: relative;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--gpg-raio);
	background: #fff;
	box-shadow: var(--gpg-sombra);
}

.gpg-prova__imagem {
	width: 100%;
	border: 1px solid var(--gpg-borda);
	border-radius: var(--gpg-raio-pequeno);
}

.gpg-prova__robo {
	position: absolute;
	right: -12px;
	top: -96px;
	width: 150px;
	filter: drop-shadow(0 14px 22px rgba(24, 24, 27, 0.18));
	pointer-events: none;
}

.gpg-prova figcaption {
	margin-top: 0.85rem;
	color: var(--gpg-texto-suave);
	font-size: 0.875rem;
}

@media (max-width: 999px) {
	.gpg-prova {
		margin-top: 4rem;
	}
}

/* ---------- Chamada de cadastro ---------- */

.gpg-chamada {
	position: relative;
	overflow: hidden;
	margin-block: var(--gpg-secao);
	border-radius: var(--gpg-raio);
	background: var(--gpg-gradiente);
	color: #fff;
}

.gpg-chamada::before {
	content: "";
	position: absolute;
	right: -80px;
	top: -120px;
	width: 380px;
	aspect-ratio: 1;
	background: var(--gpg-vazado) center / contain no-repeat;
	opacity: 0.12;
	pointer-events: none;
}

.gpg-chamada__dentro {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 1.5rem;
	align-items: center;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.gpg-chamada__ilustracao {
	grid-row: 1 / span 3;
	width: clamp(64px, 12vw, 104px);
	height: auto;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25));
}

.gpg-chamada__titulo,
.gpg-chamada__texto,
.gpg-chamada .gpg-botao {
	grid-column: 2;
}

.gpg-chamada__titulo {
	margin: 0;
	font-family: var(--gpg-fonte-display);
	font-size: clamp(1.625rem, 3.5vw, 2.25rem);
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
}

.gpg-chamada__texto {
	margin: 0.25rem 0 0;
	opacity: 0.95;
}

.gpg-chamada .gpg-botao {
	justify-self: start;
	margin-top: 0.9rem;
	background: #fff;
	color: var(--gpg-primaria-escura);
}

.gpg-chamada .gpg-botao:hover,
.gpg-chamada .gpg-botao:focus-visible {
	background: var(--gpg-fundo-suave);
	color: var(--gpg-primaria-escura);
}

@media (min-width: 800px) {
	.gpg-chamada--faixa .gpg-chamada__dentro {
		grid-template-columns: auto 1fr auto;
	}

	.gpg-chamada--faixa .gpg-chamada__ilustracao {
		grid-row: 1 / span 2;
	}

	.gpg-chamada--faixa .gpg-botao {
		grid-column: 3;
		grid-row: 1 / span 2;
		margin-top: 0;
	}
}

.gpg-chamada__ilustracao--heroi {
	filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.3));
}

.gpg-chamada--caixa {
	margin-block: 2.5rem;
}

.gpg-chamada--caixa .gpg-chamada__ilustracao--heroi {
	width: clamp(84px, 18vw, 140px);
	align-self: end;
	margin-bottom: calc(-1 * clamp(1.5rem, 4vw, 2.5rem));
}

.gpg-chamada--caixa .gpg-chamada__titulo {
	font-size: clamp(1.5rem, 3vw, 1.875rem);
}

.gpg-chamada--destaque .gpg-chamada__dentro {
	grid-template-columns: 1fr;
	padding-bottom: 0;
}

.gpg-chamada--destaque .gpg-chamada__titulo,
.gpg-chamada--destaque .gpg-chamada__texto,
.gpg-chamada--destaque .gpg-botao {
	grid-column: 1;
}

.gpg-chamada--destaque .gpg-chamada__ilustracao--heroi {
	grid-row: auto;
	order: 5;
	justify-self: center;
	width: min(80vw, 320px);
	margin-top: 1rem;
}

@media (min-width: 800px) {
	.gpg-chamada--destaque .gpg-chamada__dentro {
		grid-template-columns: 1fr 340px;
		padding-top: 2.5rem;
	}

	.gpg-chamada--destaque .gpg-chamada__ilustracao--heroi {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: end;
		width: 340px;
	}

	.gpg-chamada--destaque .gpg-botao {
		margin-bottom: 2.5rem;
	}
}

/* Versão em bloco (padrão "chamada" dentro do texto do artigo). */
.gpg-chamada--texto {
	padding: 1.5rem 1.75rem;
}

.gpg-chamada--texto p {
	margin: 0 0 0.5rem;
}

.gpg-chamada--texto .gpg-chamada__titulo {
	font-size: 1.75rem;
}

.gpg-chamada--texto .gpg-chamada__botao a {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--gpg-raio-pilula);
	background: #fff;
	color: var(--gpg-primaria-escura);
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Abertura da cidade (nome em display + foto) ---------- */

.gpg-cidade-abertura {
	display: grid;
	background: var(--gpg-escuro);
	color: #fff;
}

@media (min-width: 900px) {
	.gpg-cidade-abertura {
		grid-template-columns: 1fr 1fr;
		min-height: 520px;
	}
}

.gpg-cidade-abertura__painel {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--gpg-gradiente);
}

.gpg-cidade-abertura__painel::before {
	content: "";
	position: absolute;
	left: -120px;
	bottom: -160px;
	width: 520px;
	aspect-ratio: 1;
	background: var(--gpg-vazado) center / contain no-repeat;
	opacity: 0.12;
	pointer-events: none;
}

.gpg-cidade-abertura__dentro {
	position: relative;
	width: 100%;
	max-width: calc(var(--gpg-largura) / 2);
	margin-left: auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--gpg-respiro);
}

.gpg-cidade-abertura .gpg-trilha,
.gpg-cidade-abertura .gpg-sobretitulo {
	color: rgba(255, 255, 255, 0.9);
}

.gpg-cidade-abertura__nome {
	margin: 0 0 1rem;
	font-size: clamp(3.25rem, 9vw, 6.5rem);
	line-height: 0.9;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.gpg-cidade-abertura__texto {
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.0625rem;
}

.gpg-cidade-abertura__texto p {
	margin: 0 0 0.75rem;
}

.gpg-cidade-abertura__numeros {
	margin: 0 0 1.5rem;
	font-family: var(--gpg-fonte-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gpg-cidade-abertura__foto {
	position: relative;
	min-height: 280px;
	overflow: hidden;
}

.gpg-cidade-abertura__imagem {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gpg-cidade-abertura__credito {
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 100%;
	margin: 0;
	padding: 0.25rem 0.6rem;
	background: rgba(24, 24, 27, 0.72);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.4;
}

.gpg-cidade-abertura--sem-foto .gpg-cidade-abertura__foto {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: var(--gpg-fundo-suave);
}

.gpg-cidade-abertura__robo {
	width: min(60vw, 340px);
	margin-top: 2rem;
	filter: drop-shadow(0 18px 30px rgba(168, 24, 0, 0.2));
}

/* ---------- Aberturas de lista, busca e 404 ---------- */

.gpg-abertura {
	padding-block: var(--gpg-secao) clamp(1.5rem, 4vw, 2.5rem);
	background: var(--gpg-fundo-alt);
}

.gpg-abertura__titulo {
	font-size: clamp(2.5rem, 6vw, 4rem);
	text-transform: uppercase;
}

.gpg-abertura__texto {
	max-width: 60ch;
	color: var(--gpg-texto-suave);
	font-size: 1.125rem;
	margin: 0 0 1.5rem;
}

.gpg-abertura__texto p {
	margin: 0 0 0.75rem;
}

.gpg-abertura__grade {
	display: grid;
	gap: 1rem 2rem;
	align-items: center;
}

.gpg-abertura__robo {
	width: min(60vw, 280px);
	justify-self: center;
	filter: drop-shadow(0 18px 30px rgba(168, 24, 0, 0.18));
}

@media (min-width: 900px) {
	.gpg-abertura__grade {
		grid-template-columns: 1fr 340px;
	}

	.gpg-abertura__robo {
		width: 340px;
	}
}

/* ---------- Artigo ---------- */

.gpg-artigo__cabeca {
	padding-top: clamp(1.5rem, 5vw, 3rem);
}

.gpg-artigo__titulo {
	font-size: clamp(2.375rem, 6vw, 3.75rem);
	line-height: 1;
}

.gpg-artigo__linha-fina {
	margin: 0 0 1.25rem;
	color: var(--gpg-texto-suave);
	font-size: 1.25rem;
	line-height: 1.5;
}

.gpg-artigo__linha-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1.75rem;
	padding-block: 0.9rem;
	border-block: 1px solid var(--gpg-borda);
}

.gpg-meta {
	margin: 0;
	color: var(--gpg-texto-suave);
	font-size: 0.9375rem;
}

.gpg-meta__autor {
	color: var(--gpg-texto);
	font-weight: 600;
}

.gpg-compartilhar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.gpg-compartilhar__rotulo {
	margin-right: 0.25rem;
	color: var(--gpg-texto-suave);
	font-size: 0.875rem;
	font-weight: 600;
}

.gpg-compartilhar__botao {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--gpg-borda);
	border-radius: var(--gpg-raio-pilula);
	background: #fff;
	color: var(--gpg-texto);
	font: 600 0.875rem var(--gpg-fonte);
	text-decoration: none;
	cursor: pointer;
}

.gpg-compartilhar__botao:hover {
	border-color: var(--gpg-marca);
	color: var(--gpg-primaria-escura);
}

.gpg-artigo__corpo > .gpg-compartilhar {
	margin-top: 2.5rem;
}

.gpg-artigo__imagem {
	margin: 0 auto 2.25rem;
}

.gpg-artigo__imagem img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--gpg-raio);
}

.gpg-artigo__imagem figcaption {
	margin-top: 0.5rem;
	color: var(--gpg-texto-suave);
	font-size: 0.875rem;
}

.gpg-sumario {
	margin: 0 0 2.25rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--gpg-raio);
	background: var(--gpg-fundo-alt);
}

.gpg-sumario__titulo {
	margin: 0 0 0.6rem;
	font-family: var(--gpg-fonte-display);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gpg-sumario ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: secao;
}

.gpg-sumario li {
	counter-increment: secao;
	display: flex;
	gap: 0.75rem;
	padding-block: 0.35rem;
}

.gpg-sumario li + li {
	border-top: 1px solid var(--gpg-borda);
}

.gpg-sumario li::before {
	content: counter(secao, decimal-leading-zero);
	min-width: 1.75rem;
	color: var(--gpg-primaria-escura);
	font-family: var(--gpg-fonte-display);
	font-weight: 800;
}

.gpg-sumario a {
	color: var(--gpg-texto);
	text-decoration: none;
}

.gpg-sumario a:hover {
	color: var(--gpg-primaria-escura);
	text-decoration: underline;
}

.gpg-texto > * + * {
	margin-top: 1.25em;
}

.gpg-texto > * {
	margin-bottom: 0;
}

.gpg-texto > p:first-child::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	color: var(--gpg-primaria-escura);
	font-family: var(--gpg-fonte-display);
	font-size: 3.6em;
	font-weight: 800;
	line-height: 0.8;
}

.gpg-texto h2 {
	margin-top: 2.25em;
	font-size: clamp(1.875rem, 4vw, 2.375rem);
	scroll-margin-top: 90px;
}

.gpg-texto h3 {
	margin-top: 1.75em;
	font-size: 1.625rem;
}

.gpg-texto ul,
.gpg-texto ol {
	padding-left: 1.5rem;
}

.gpg-texto li + li {
	margin-top: 0.4em;
}

.gpg-texto blockquote {
	margin-inline: 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 4px solid var(--gpg-marca);
	color: var(--gpg-texto-suave);
	font-size: 1.125rem;
}

.gpg-texto img {
	border-radius: var(--gpg-raio);
}

.gpg-texto figcaption {
	margin-top: 0.5rem;
	color: var(--gpg-texto-suave);
	font-size: 0.875rem;
}

.gpg-texto table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.gpg-texto th,
.gpg-texto td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--gpg-borda);
	text-align: left;
}

.gpg-artigo__negocios {
	margin-top: 2.5rem;
}

/* Padrão "Lugar": ficha de lugar no estilo das listas de "melhores". */
.gpg-lugar {
	position: relative;
	padding: 1.5rem 1.5rem 1.25rem;
	border: 1px solid var(--gpg-borda);
	border-top: 4px solid var(--gpg-marca);
	border-radius: var(--gpg-raio);
	background: #fff;
	box-shadow: var(--gpg-sombra);
}

.gpg-texto .gpg-lugar > * + * {
	margin-top: 0.75rem;
}

.gpg-lugar .gpg-lugar__nome {
	margin: 0;
	font-size: 2rem;
	text-transform: uppercase;
}

.gpg-lugar__etiquetas {
	color: var(--gpg-texto-suave);
	font-family: var(--gpg-fonte-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gpg-lugar__dica {
	padding: 0.65rem 0.9rem;
	border-radius: var(--gpg-raio-pequeno);
	background: var(--gpg-fundo-suave);
	font-size: 0.9375rem;
}

.gpg-texto .gpg-lugar__contato {
	padding: 0;
	list-style: none;
	color: var(--gpg-texto-suave);
	font-size: 0.9375rem;
}

.gpg-lugar__contato li {
	position: relative;
	padding-left: 1.6rem;
}

.gpg-lugar__contato li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1.05em;
	height: 1.05em;
	background: var(--gpg-primaria-escura);
	-webkit-mask: var(--gpg-icone-lugar) center / contain no-repeat;
	mask: var(--gpg-icone-lugar) center / contain no-repeat;
}

.gpg-lugar__endereco {
	--gpg-icone-lugar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.gpg-lugar__telefone {
	--gpg-icone-lugar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

.gpg-lugar__link a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
}

.gpg-lugar__link a::after {
	content: "→";
}

/* ---------- Paginação ---------- */

.pagination {
	margin-top: 2.25rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0 0.85rem;
	border: 1px solid var(--gpg-borda);
	border-radius: var(--gpg-raio-pilula);
	color: var(--gpg-texto);
	font-weight: 600;
	text-decoration: none;
}

.pagination .page-numbers.current {
	border-color: var(--gpg-primaria);
	background: var(--gpg-primaria);
	color: #fff;
}

/* ---------- Rodapé (escuro, como nas LPs do Guiaponto) ---------- */

.gpg-rodape {
	position: relative;
	overflow: hidden;
	margin-top: var(--gpg-secao);
	padding-block: 3rem;
	background: var(--gpg-cinza-70);
	color: #e4e4e7; /* 6,7:1 sobre o cinza 70% */
	font-size: 0.9375rem;
}

.gpg-negocios + .gpg-rodape {
	margin-top: 0;
}

.gpg-rodape::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -120px;
	width: 420px;
	aspect-ratio: 1;
	background: var(--gpg-vazado) center / contain no-repeat;
	opacity: 0.06;
	pointer-events: none;
}

.gpg-rodape__dentro {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 800px) {
	.gpg-rodape__dentro {
		grid-template-columns: 2fr 1fr;
	}
}

.gpg-rodape__marca img {
	width: 160px;
	height: auto;
	margin-bottom: 0.75rem;
}

.gpg-rodape__marca p {
	max-width: 48ch;
	margin: 0;
}

.gpg-rodape__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gpg-rodape__lista li + li {
	margin-top: 0.5rem;
}

.gpg-rodape__lista a {
	color: #fff;
}

.gpg-rodape__lista a:hover {
	color: var(--gpg-primaria-clara);
}

.gpg-rodape__copia {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	color: #d4d4d8; /* 5,7:1 sobre o cinza 70% */
	font-size: 0.875rem;
}

/* ---------- Alinhamentos do editor ---------- */

.alignwide {
	width: min(100vw - 2 * var(--gpg-respiro), 1040px);
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--gpg-respiro), 520px));
}

.alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.aligncenter {
	margin-inline: auto;
}

/* ==========================================================================
   IDENTIDADE DA LP (lp.guiaponto.com.br, lida em 08/10/2026)
   Fonte Outfit 700 nos títulos, Inter no texto, fundo #ECECEC, degradê 200°
   #FE5401 → #FE2601, botão pílula com brilho laranja e "pop", símbolos do
   Guiaponto girando (movimento8 / movi1), "G" pulsando (zoomInOut), linhas
   pontilhadas no topo e entrada dos blocos ao rolar. Esta camada vem por último
   e manda sobre o que está acima.
   ========================================================================== */

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2");
}

:root {
	--gpg-fonte-display: "Outfit", var(--gpg-fonte);
	--gpg-lp-laranja: #fe5401;
	--gpg-lp-vermelho: #fe2601;
	--gpg-lp-ambar: #ff7f00;
	--gpg-lp-cinza: #ececec;
	--gpg-lp-degrade: linear-gradient(200deg, #fe5401 0%, #fe2601 60%);
	--gpg-lp-brilho: 0 30px 40px -5px rgba(255, 143, 39, 0.75);
	--gpg-fundo: var(--gpg-lp-cinza);
	--gpg-fundo-alt: #f5f5f5;
	--gpg-borda: #dcdcdc;
	--gpg-gradiente: var(--gpg-lp-degrade);
}

body {
	background: var(--gpg-lp-cinza);
}

/* Títulos: Outfit 700, caixa normal, como na lp. */
h1,
h2,
h3,
.gpg-secao__titulo,
.gpg-card__titulo,
.gpg-card--capa .gpg-card__titulo,
.gpg-busca-faixa__titulo,
.gpg-negocios__titulo,
.gpg-chamada__titulo,
.gpg-cidade-abertura__nome,
.gpg-cidade__nome,
.gpg-abertura__titulo,
.gpg-lugar .gpg-lugar__nome {
	font-family: var(--gpg-fonte-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	text-transform: none;
}

.gpg-secao__titulo,
.gpg-negocios__titulo,
.gpg-busca-faixa__titulo,
.gpg-abertura__titulo {
	color: var(--gpg-lp-vermelho);
}

.gpg-card__titulo {
	font-size: 1.25rem;
	line-height: 1.2;
}

.gpg-card--manchete .gpg-card__titulo {
	font-size: 1.125rem;
}

.gpg-card--capa .gpg-card__titulo {
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	line-height: 1.08;
}

.gpg-texto h2 {
	color: var(--gpg-lp-vermelho);
}

/* Rótulos pequenos: Inter, caixa alta, como "COMO ANUNCIAR NO GOOGLE" da lp. */
.gpg-sobretitulo,
.gpg-card__rotulo,
.gpg-selo,
.gpg-sumario__titulo,
.gpg-lugar__etiquetas,
.gpg-cidade-abertura__numeros {
	font-family: var(--gpg-fonte);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.gpg-sobretitulo {
	color: #6d6d6d;
	font-size: 0.8125rem;
}

.gpg-etiqueta {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.15rem 0.7rem;
	border-radius: var(--gpg-raio-pilula);
	background: rgba(254, 38, 1, 0.08);
	color: var(--gpg-primaria-escura);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Cards brancos sobre o cinza da lp. */
.gpg-card--padrao,
.gpg-card--manchete {
	border-radius: var(--gpg-raio);
}

.gpg-card--padrao .gpg-card__link {
	overflow: hidden;
	border-radius: var(--gpg-raio);
	background: #fff;
	box-shadow: var(--gpg-sombra);
}

.gpg-card--padrao .gpg-card__midia {
	border-radius: 0;
}

.gpg-card--padrao .gpg-card__texto {
	padding: 0.9rem 1.1rem 1.1rem;
}

.gpg-mosaico__lista {
	padding: 1.25rem;
	border-radius: var(--gpg-raio);
	background: #fff;
	box-shadow: var(--gpg-sombra);
}

.gpg-secao__cabeca {
	border-bottom-color: var(--gpg-borda);
}

/* ---------- Botões da lp: pílula, brilho laranja, "pop" ---------- */

.gpg-botao {
	background: var(--gpg-lp-degrade);
	box-shadow: var(--gpg-lp-brilho);
	font-family: var(--gpg-fonte-display);
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.gpg-botao:hover,
.gpg-botao:focus-visible {
	background: var(--gpg-lp-degrade);
	color: #fff;
	transform: scale(1.06);
	box-shadow: 0 34px 46px -6px rgba(255, 143, 39, 0.85);
}

.gpg-botao:active {
	transform: scale(0.98);
}

.gpg-botao--pequeno {
	box-shadow: 0 12px 20px -8px rgba(255, 143, 39, 0.8);
}

.gpg-botao--claro,
.gpg-botao--branco,
.gpg-chamada .gpg-botao {
	background: #fff;
	color: var(--gpg-primaria-escura);
	box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.35);
}

.gpg-botao--claro:hover,
.gpg-botao--branco:hover,
.gpg-chamada .gpg-botao:hover,
.gpg-botao--claro:focus-visible,
.gpg-botao--branco:focus-visible,
.gpg-chamada .gpg-botao:focus-visible {
	background: #fff;
	color: var(--gpg-primaria-escura);
}

.gpg-busca .gpg-botao {
	box-shadow: 0 16px 24px -10px rgba(255, 143, 39, 0.9);
}

/* ---------- Topo do início: igual ao topo da lp ---------- */

.gpg-busca-faixa {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
	background:
		radial-gradient(at top left, #fff 45%, rgba(255, 255, 255, 0.6) 85%),
		linear-gradient(110deg, #ececec 40%, #a9a9a9 100%);
	color: var(--gpg-texto);
}

.gpg-busca-faixa::before {
	content: none;
}

.gpg-busca-faixa__dentro {
	position: relative;
	z-index: 1;
	grid-template-columns: 1fr;
	align-items: end;
}

@media (min-width: 960px) {
	.gpg-busca-faixa__dentro {
		grid-template-columns: 1fr 420px;
	}
}

.gpg-busca-faixa__texto {
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.gpg-busca-faixa__titulo {
	font-size: clamp(2.5rem, 6vw, 3.5rem);
	line-height: 1.05;
}

.gpg-busca-faixa__linha {
	max-width: 52ch;
	margin: 0.75rem 0 1.5rem;
	color: #3f3f46;
	font-size: 1.125rem;
}

.gpg-busca-faixa .gpg-busca__campo {
	border-color: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.gpg-busca-faixa .gpg-busca .gpg-botao {
	background: var(--gpg-lp-degrade);
}

.gpg-busca-faixa :focus-visible {
	outline-color: var(--gpg-marca);
}

.gpg-busca-faixa__assuntos {
	margin-top: 1.25rem;
}

.gpg-busca-faixa .gpg-pilulas {
	flex-wrap: wrap;
}

.gpg-busca-faixa__robo {
	display: none;
	align-self: end;
	width: 420px;
	filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.18));
}

@media (min-width: 960px) {
	.gpg-busca-faixa__robo {
		display: block;
	}
}

/* ---------- Camada decorativa (ondas, símbolos, G) ---------- */

.gpg-busca-faixa,
.gpg-cidade-abertura__painel,
.gpg-chamada,
.gpg-negocios {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.gpg-deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Linhas pontilhadas onduladas (no lugar do vídeo de fundo da lp: mesmo efeito, sem pesar). */
.gpg-deco__ondas {
	position: absolute;
	inset: 0;
	opacity: 0.55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-dasharray='0.1 9'%3E%3Cpath d='M0 330 C 200 250 400 410 600 330 S 1000 250 1200 330'/%3E%3Cpath d='M0 360 C 200 280 400 440 600 360 S 1000 280 1200 360'/%3E%3Cpath d='M0 390 C 200 310 400 470 600 390 S 1000 310 1200 390'/%3E%3Cpath d='M0 420 C 200 340 400 500 600 420 S 1000 340 1200 420'/%3E%3Cpath d='M0 450 C 200 370 400 530 600 450 S 1000 370 1200 450'/%3E%3Cpath d='M0 480 C 200 400 400 560 600 480 S 1000 400 1200 480'/%3E%3Cpath d='M0 510 C 200 430 400 590 600 510 S 1000 430 1200 510'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 1200px 600px;
	background-position: 0 100%;
	animation: gpg-ondas 40s linear infinite;
}

/* Símbolo vazado branco grande (o mesmo fundo da lp). */
.gpg-deco__vazado {
	position: absolute;
	right: -6%;
	top: 8%;
	width: min(62vw, 720px);
	aspect-ratio: 1;
	background: var(--gpg-vazado) center / contain no-repeat;
	opacity: 0.9;
}

/* Símbolos vermelhos girando (keyframes da lp: movimento8 e movi1 + opacidade). */
.gpg-deco__simbolo {
	position: absolute;
	aspect-ratio: 1;
	background: url("../img/simbolo-160.webp") center / contain no-repeat;
	transform-origin: center;
}

.gpg-deco__simbolo--1 {
	left: 4%;
	top: 10%;
	width: 34px;
	animation: gpg-movi1 30s linear infinite, gpg-opacidade-b 10s linear infinite;
}

.gpg-deco__simbolo--2 {
	left: 46%;
	top: 6%;
	width: 72px;
	animation: gpg-movimento8 45s linear infinite, gpg-opacidade 5s linear infinite;
}

.gpg-deco__simbolo--3 {
	right: 30%;
	bottom: 14%;
	width: 48px;
	animation: gpg-movimento8 70s linear infinite, gpg-opacidade 10s linear infinite;
}

/* "G" do Google pulsando (zoomInOut da lp). */
.gpg-deco__g {
	position: absolute;
	aspect-ratio: 1;
	background: url("../img/google-g-480.webp") center / contain no-repeat;
	transform-origin: center;
}

.gpg-deco__g--1 {
	left: 38%;
	top: 46%;
	width: 54px;
	animation: gpg-zoom-in-out 6s ease-in-out infinite;
}

.gpg-deco__g--2 {
	right: 18%;
	top: 12%;
	width: 84px;
	animation: gpg-zoom-in-out 16s ease-in-out infinite;
}

/* Sobre o degradê laranja: símbolos em branco translúcido. */
.gpg-deco--laranja .gpg-deco__simbolo {
	filter: brightness(0) invert(1);
	opacity: 0.35;
}

.gpg-deco--laranja .gpg-deco__vazado {
	right: auto;
	left: -18%;
	top: auto;
	bottom: -30%;
	opacity: 0.18;
}

.gpg-deco--laranja .gpg-deco__g {
	opacity: 0.5;
}

/* Conteúdo sempre acima da camada decorativa. */
.gpg-busca-faixa > .gpg-largura,
.gpg-cidade-abertura__dentro,
.gpg-chamada__dentro,
.gpg-negocios > .gpg-largura {
	position: relative;
	z-index: 1;
}

/* ---------- Faixa de cadastro: banner laranja da lp ---------- */

.gpg-chamada {
	background: var(--gpg-lp-degrade);
	box-shadow: 0 34px 50px -18px rgba(255, 127, 0, 0.75);
}

.gpg-chamada::before {
	content: none;
}

/* "G" gigante translúcido à esquerda, como em "Veja a importância da Primeira Página do Google". */
.gpg-chamada::after {
	content: "";
	position: absolute;
	left: -40px;
	bottom: -70px;
	z-index: 0;
	width: 280px;
	aspect-ratio: 1;
	background: url("../img/google-g-480.webp") center / contain no-repeat;
	opacity: 0.18;
	pointer-events: none;
}

.gpg-chamada__g {
	display: none;
}

.gpg-chamada__titulo {
	font-size: clamp(1.625rem, 3.4vw, 2.25rem);
	line-height: 1.12;
}

.gpg-chamada__texto {
	font-size: 1.0625rem;
	font-weight: 600;
}

/* ---------- Faixa "para quem tem negócio": seção do gráfico da lp ---------- */

.gpg-negocios {
	background: var(--gpg-lp-cinza);
}

/* Linha de gráfico com as etiquetas de valor, apagada, atrás da coluna da prova (como na lp). */
.gpg-negocios::before {
	content: "";
	position: absolute;
	left: -4%;
	top: 6%;
	z-index: 0;
	width: min(820px, 70%);
	aspect-ratio: 1280 / 737;
	background: url("../img/bg-grafico.webp") center / contain no-repeat;
	filter: grayscale(1);
	opacity: 0.22;
	pointer-events: none;
}

.gpg-negocios__titulo {
	max-width: 15ch;
	font-size: clamp(2.125rem, 4.6vw, 3.125rem);
	line-height: 1.08;
}

.gpg-negocios__intro {
	max-width: 46ch;
	margin: 0 0 1.75rem;
	color: #3f3f46;
	font-size: 1.125rem;
}

/* Vantagens: cards laranja com o ícone redondo saindo do canto (como "Controle total do investimento"). */
.gpg-vantagens {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 1.5rem 1rem;
	margin: 0 0 2.25rem;
}

.gpg-vantagem {
	position: relative;
	display: block;
	padding: 1.75rem 1.25rem 1.25rem;
	border-radius: var(--gpg-raio);
	background: var(--gpg-lp-degrade);
	color: #fff;
	box-shadow: 0 20px 30px -16px rgba(254, 84, 1, 0.8);
}

.gpg-vantagem:nth-child(2) {
	background: linear-gradient(200deg, #ff7f00 0%, #fe5401 70%);
}

.gpg-vantagem__icone {
	position: absolute;
	right: -10px;
	top: -18px;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.gpg-vantagem__icone .gpg-icone-3d {
	width: 40px;
	height: 40px;
	margin: 0;
}

.gpg-vantagem__titulo {
	margin: 0 0 0.4rem;
	padding-right: 2.25rem;
	color: #fff;
	font-family: var(--gpg-fonte-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.15;
}

.gpg-vantagem p {
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Prova do Google com o selo girando. */
.gpg-prova {
	overflow: visible;
}

.gpg-selo-giro {
	position: absolute;
	left: -28px;
	top: -44px;
	z-index: 2;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--gpg-lp-vermelho);
	box-shadow: 0 12px 24px -8px rgba(254, 38, 1, 0.6);
	animation: gpg-gira 18s linear infinite;
}

.gpg-selo-giro svg {
	width: 100%;
	height: 100%;
}

.gpg-selo-giro text {
	fill: #fff;
	font-family: var(--gpg-fonte-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* ---------- Abertura da cidade: degradê da lp ---------- */

.gpg-cidade-abertura__painel {
	background: var(--gpg-lp-degrade);
}

.gpg-cidade-abertura__painel::before {
	content: none;
}

.gpg-cidade-abertura__nome {
	font-size: clamp(3rem, 8vw, 5.5rem);
	line-height: 0.95;
}

.gpg-cidade-abertura .gpg-botao--branco {
	color: var(--gpg-texto);
}

/* ---------- Artigo sobre o cinza: corpo em folha branca ---------- */

.gpg-artigo__corpo {
	padding-block: 0.5rem;
}

.gpg-sumario {
	background: #fff;
	box-shadow: var(--gpg-sombra);
}

.gpg-texto > p:first-child::first-letter {
	color: var(--gpg-lp-vermelho);
	font-family: var(--gpg-fonte-display);
	font-weight: 700;
}

/* ---------- Entrada ao rolar (fadeInUp, fadeInLeft... da lp) ----------
   Animação ligada à rolagem pelo próprio navegador (scroll-driven, animation-timeline: view()).
   Nada fica escondido esperando JS: onde o navegador não suporta, o bloco só aparece, sem animar.
   (Troca de 08/10: o IntersectionObserver deixava blocos em opacidade 0 quando não disparava.) */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		[data-gpg-anim] {
			animation-duration: 1ms; /* exigido por alguns navegadores; a duração real é a faixa de rolagem */
			animation-fill-mode: both;
			animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
			animation-timeline: view();
			animation-range: entry 0% entry 85%;
		}

		[data-gpg-anim="sobe"] { animation-name: gpg-sobe; }
		[data-gpg-anim="desce"] { animation-name: gpg-desce; }
		[data-gpg-anim="esquerda"] { animation-name: gpg-da-esquerda; }
		[data-gpg-anim="direita"] { animation-name: gpg-da-direita; }
		[data-gpg-anim="zoom"] { animation-name: gpg-zoom-entra; }
		[data-gpg-anim="aparece"] { animation-name: gpg-aparece; }
	}
}

@keyframes gpg-sobe {
	from { opacity: 0; transform: translate3d(0, 48px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes gpg-desce {
	from { opacity: 0; transform: translate3d(0, -48px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes gpg-da-esquerda {
	from { opacity: 0; transform: translate3d(-60px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes gpg-da-direita {
	from { opacity: 0; transform: translate3d(60px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes gpg-zoom-entra {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: none; }
}

@keyframes gpg-aparece {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Keyframes da lp (mesmos valores). */
@keyframes gpg-movimento8 {
	0% { transform: rotate(0deg) translateY(0); }
	50% { transform: rotate(180deg) translateY(40px); }
	100% { transform: rotate(360deg) translateY(0); }
}

@keyframes gpg-movi1 {
	0% { transform: rotate(0deg) translateY(0); }
	50% { transform: rotate(180deg) translateY(100px); }
	100% { transform: rotate(360deg) translateY(0); }
}

@keyframes gpg-opacidade {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}

@keyframes gpg-opacidade-b {
	0%, 100% { opacity: 0.1; }
	50% { opacity: 0.8; }
}

@keyframes gpg-zoom-in-out {
	0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.6; }
	25% { transform: scale(1.1) rotate(2deg); opacity: 0.1; }
	50% { transform: scale(1) rotate(-2deg); opacity: 0.5; }
	75% { transform: scale(1.1) rotate(-1deg); opacity: 0.1; }
}

@keyframes gpg-ondas {
	from { background-position: 0 100%; }
	to { background-position: -1200px 100%; }
}

@keyframes gpg-gira {
	to { transform: rotate(360deg); }
}

/* Quem pede menos movimento não recebe nenhuma animação contínua. */
@media (prefers-reduced-motion: reduce) {
	.gpg-deco__ondas,
	.gpg-deco__simbolo,
	.gpg-deco__g,
	.gpg-selo-giro {
		animation: none;
	}
}

/* Separador das manchetes do mosaico: reto (o card arredondado curvava a borda). */
.gpg-mosaico__lista > .gpg-card--manchete {
	border-radius: 0;
}

/* No painel laranja (texto à esquerda), os elementos que se mexem ficam na borda direita, longe do texto. */
.gpg-deco--laranja .gpg-deco__simbolo--1 { left: auto; right: 6%; top: 8%; }
.gpg-deco--laranja .gpg-deco__simbolo--2 { left: auto; right: 22%; top: auto; bottom: 10%; width: 56px; }
.gpg-deco--laranja .gpg-deco__simbolo--3 { right: 4%; bottom: 40%; }
.gpg-deco--laranja .gpg-deco__g--1 { left: auto; right: 10%; top: auto; bottom: 22%; width: 46px; }
.gpg-deco--laranja .gpg-deco__g--2 { right: 4%; top: 30%; width: 70px; }

/* ---------- "Para quem tem negócio": limpeza (08/10, retorno do Lucas: texto na cor do fundo e informação embolada) ----------
   Sem a linha de gráfico com etiquetas de valor ao fundo (cinza sobre cinza parecia texto solto);
   o selo e o robô saem de cima do print do Google: ficam fora do card, nos cantos. */
.gpg-negocios::before {
	content: none;
}

.gpg-negocios {
	background: linear-gradient(180deg, var(--gpg-lp-cinza) 0%, #e2e2e2 100%);
}

.gpg-prova {
	margin-top: 3.5rem;
	padding: 2.5rem clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
}

.gpg-selo-giro {
	left: -22px;
	top: -58px;
	width: 104px;
	height: 104px;
}

.gpg-prova__robo {
	right: -18px;
	top: -128px;
	width: 132px;
}

.gpg-prova figcaption {
	color: #3f3f46;
	font-size: 0.9375rem;
}

.gpg-negocios__texto {
	padding-top: 1rem;
}

@media (max-width: 999px) {
	.gpg-prova {
		margin-top: 5rem;
	}
}

/* Vantagens empilhadas (3 cards na mesma coluna, sem o terceiro sobrando sozinho). */
.gpg-vantagens {
	grid-template-columns: 1fr;
	gap: 1.1rem;
	max-width: 520px;
}

.gpg-vantagem {
	padding: 1.15rem 4.5rem 1.15rem 1.25rem;
}

.gpg-vantagem__icone {
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
}

.gpg-vantagem__titulo {
	padding-right: 0;
}

/* Sem faixa cinza entre a última seção e o rodapé. */
.gpg-conteudo:has(> .gpg-negocios:last-child) + .gpg-rodape {
	margin-top: 0;
}