/**
 * Home — modelo "Clássica" (clara).
 *
 * Fiel ao site anterior do cliente: corpo branco, cabeçalho e rodapé em
 * azul-marinho, bloco amarelo da história, serviços em foto redonda.
 *
 * A troca de mundo (escuro → claro) acontece redefinindo os TOKENS sob
 * `.gp-modelo-classica`. Como todo o tema lê os tokens em vez de escrever
 * cor crua, a maior parte do site vira sozinha — só o cabeçalho, o rodapé e
 * as seções próprias deste modelo precisam de ajuste explícito.
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Gustavo da Rocha — www.fcazdigitall.com.br
 * Copyright (c) 2026 FCAZ Digitall. Todos os direitos reservados. Ver LICENCA.txt.
 */

/* ==================================================================
   TOKENS DO MODELO CLARO
   ================================================================== */
body.gp-modelo-classica {
	/* Superfícies */
	--gp-obra: #ffffff;
	--gp-grafite: #f4f3ef;
	--gp-grafite-2: #e7e4dc;

	/* Texto — contraste conferido sobre branco */
	--gp-gesso: #1a1b22;    /* 16,4:1 · AAA */
	--gp-concreto: #55555f; /* 7,6:1 · AAA */

	/* O ouro do logo não passa como texto sobre branco (1,9:1).
	   Na versão clara ele fica escurecido para uso em texto e ícone. */
	--gp-ouro: #8a6d00;     /* 5,1:1 · AA */
	--gp-ouro-luz: #a88400;

	/* O amarelo cheio do site antigo, preservado para o bloco da história
	   e para o botão de envio — onde ele é FUNDO, não texto. */
	--gp-amarelo: #f5c400;

	/*
	 * Escada de azul-marinho, do topo ao pé da página. A barra de topo é a
	 * mais clara, o cabeçalho fica no meio e o rodapé é o degrau escuro —
	 * é a diferença de tom que faz o rodapé FECHAR a página em vez de
	 * parecer só mais uma seção. O último degrau chega perto do preto do
	 * logo, costurando a versão clara de volta na marca.
	 */
	--gp-marinho-2: #3c4460;  /* barra de topo */
	--gp-marinho: #252a41;    /* cabeçalho */
	--gp-marinho-3: #161a2b;  /* rodapé */
	--gp-marinho-4: #0f111c;  /* base do rodapé */

	--gp-linha: rgba(26, 27, 34, 0.12);
	--gp-linha-ouro: rgba(138, 109, 0, 0.35);

	--gp-scrim: linear-gradient(180deg, rgba(37, 42, 65, 0.25) 0%, rgba(37, 42, 65, 0.10) 60%, rgba(37, 42, 65, 0.30) 100%);
	--gp-scrim-estreito: var(--gp-scrim);

	color-scheme: light;
	background: var(--gp-obra);
	color: var(--gp-gesso);
}

/* ==================================================================
   CABEÇALHO E RODAPÉ EM AZUL-MARINHO
   ================================================================== */
body.gp-modelo-classica .gp-topbar {
	background: var(--gp-marinho-2);
	border-bottom: 0;
}

body.gp-modelo-classica .gp-topbar__inner {
	justify-content: flex-start;
	color: #d3d6e2;
}

body.gp-modelo-classica .gp-topbar a {
	color: #ffffff;
}

body.gp-modelo-classica .gp-topbar a:hover {
	color: var(--gp-amarelo);
}

body.gp-modelo-classica .gp-topbar__sep {
	background: rgba(255, 255, 255, 0.28);
}

body.gp-modelo-classica .gp-header {
	background: var(--gp-marinho);
	border-bottom: 0;
	backdrop-filter: none;
}

body.gp-modelo-classica .gp-marca__texto {
	color: #ffffff;
}

body.gp-modelo-classica .gp-marca__texto em {
	color: var(--gp-amarelo);
}

body.gp-modelo-classica .gp-nav a {
	color: #eef0f6;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

body.gp-modelo-classica .gp-nav a::after {
	background: var(--gp-amarelo);
}

body.gp-modelo-classica .gp-menu-btn {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 900px) {
	body.gp-modelo-classica .gp-nav {
		background: var(--gp-marinho);
		border-left-color: var(--gp-amarelo);
	}

	body.gp-modelo-classica .gp-nav li + li {
		border-top-color: rgba(255, 255, 255, 0.14);
	}
}

body.gp-modelo-classica .gp-footer {
	background: var(--gp-marinho-3);
	/* Filete de luz no topo: a assinatura do sistema separando o rodapé
	   da última seção sem precisar de uma linha cinza qualquer. */
	border-top: 2px solid var(--gp-amarelo);
}

/* A faixa final vai um degrau mais escuro ainda — o pé da página. */
body.gp-modelo-classica .gp-footer__base {
	background: var(--gp-marinho-4);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.gp-modelo-classica .gp-footer h3 {
	color: var(--gp-amarelo);
}

body.gp-modelo-classica .gp-footer p,
body.gp-modelo-classica .gp-footer li,
body.gp-modelo-classica .gp-footer a {
	color: #c8ccdb;
}

body.gp-modelo-classica .gp-footer a:hover {
	color: var(--gp-amarelo);
}

body.gp-modelo-classica .gp-footer__base,
body.gp-modelo-classica .gp-footer__base a {
	color: #9096ad; /* 4,8:1 sobre #0f111c — AA para texto pequeno */
}

/* ==================================================================
   HERÓI — no site antigo era só imagem, sem texto por cima
   ================================================================== */
body.gp-modelo-classica .gp-heroi--classico {
	min-height: clamp(300px, 42vw, 520px);
	align-items: stretch;
}

/*
 * Duas fotos lado a lado, como o carrossel do site antigo mostrava.
 * Em tela estreita vira uma só — duas fotos espremidas não mostram obra
 * nenhuma.
 */
body.gp-modelo-classica .gp-heroi__midia {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: var(--gp-grafite-2);
}

@media (max-width: 700px) {
	body.gp-modelo-classica .gp-heroi__midia {
		grid-template-columns: 1fr;
	}

	body.gp-modelo-classica .gp-heroi__midia img:last-child {
		display: none;
	}
}

body.gp-modelo-classica .gp-heroi__scrim {
	display: none;
}

body.gp-modelo-classica .gp-heroi__conteudo {
	display: none;
}

/* ==================================================================
   ETIQUETA COM TRAÇOS DOS DOIS LADOS
   ================================================================== */
.gp-rotulo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gp-e-2);
	margin-bottom: var(--gp-e-2);
	font-family: var(--gp-ff-display);
	font-size: var(--gp-t-etiqueta);
	font-weight: 600;
	letter-spacing: var(--gp-track-etiqueta);
	text-transform: uppercase;
	color: var(--gp-concreto);
}

.gp-rotulo::before,
.gp-rotulo::after {
	content: "";
	width: 52px;
	height: 1px;
	background: var(--gp-linha);
}

/* ==================================================================
   CABEÇA CENTRADA
   ================================================================== */
.gp-cabeca--centro {
	max-width: 64ch;
	margin-inline: auto;
	text-align: center;
}

.gp-cabeca--centro h2 {
	font-weight: 500;
	color: var(--gp-concreto);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* O trecho que interessa ao Google fica em peso cheio e cor de texto. */
.gp-cabeca--centro h2 strong {
	font-weight: 800;
	color: var(--gp-gesso);
}

.gp-cabeca--centro .gp-filete {
	margin-inline: auto;
	margin-top: var(--gp-e-2);
	transform-origin: center;
	background: linear-gradient(90deg, transparent, var(--gp-amarelo) 50%, transparent);
	box-shadow: none;
}

/* ==================================================================
   FAIXA COM FORMULÁRIO — azul-marinho, como no original
   ================================================================== */
body.gp-modelo-classica .gp-faixa {
	background: var(--gp-marinho);
	border-block: 0;
	padding-block: var(--gp-e-3);
}

body.gp-modelo-classica .gp-faixa__titulo {
	margin: 0 0 var(--gp-e-2);
	max-width: none;
	text-align: center;
	font-family: var(--gp-ff-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: #ffffff;
}

body.gp-modelo-classica .gp-faixa label {
	color: #aeb4c8;
}

body.gp-modelo-classica .gp-faixa input,
body.gp-modelo-classica .gp-faixa select {
	background: #ffffff;
	border-color: transparent;
	color: #1a1b22;
}

body.gp-modelo-classica .gp-faixa input::placeholder {
	color: #8b8b95;
}

body.gp-modelo-classica .gp-faixa .gp-form__nota {
	border-left-color: var(--gp-amarelo);
	background: rgba(255, 255, 255, 0.08);
	color: #c8ccdb;
}

/* ==================================================================
   FORMULÁRIO
   ================================================================== */
.gp-form {
	display: grid;
	gap: var(--gp-e-2);
}

.gp-form--faixa {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	align-items: end;
}

.gp-form__campo {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.gp-form__campo--largo {
	grid-column: 1 / -1;
}

.gp-form label {
	font-family: var(--gp-ff-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gp-concreto);
}

.gp-form input,
.gp-form select,
.gp-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	background: var(--gp-obra);
	border: 1px solid var(--gp-linha);
	border-radius: var(--gp-raio);
	color: var(--gp-gesso);
	font-family: var(--gp-ff-corpo);
	font-size: var(--gp-t-pequeno);
	line-height: 1.4;
}

.gp-form textarea {
	resize: vertical;
	min-height: 96px;
}

.gp-form input:focus-visible,
.gp-form select:focus-visible,
.gp-form textarea:focus-visible {
	outline: 2px solid var(--gp-amarelo);
	outline-offset: 1px;
}

.gp-form__envio {
	display: flex;
	align-items: flex-end;
}

.gp-form__envio .gp-btn {
	width: 100%;
	justify-content: center;
}

/* Botão de envio: amarelo cheio, como no site antigo. */
.gp-btn--ouro-cheio {
	background: var(--gp-amarelo, #e2b700);
	border-color: var(--gp-amarelo, #e2b700);
	color: #1a1b22;
	font-weight: 700;
}

.gp-btn--ouro-cheio:hover {
	filter: brightness(1.08);
	color: #1a1b22;
}

.gp-form .gp-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	filter: none;
}

.gp-form__nota {
	grid-column: 1 / -1;
	max-width: none;
	margin: 0;
	padding: 0.6rem 0.8rem;
	border-left: 2px solid var(--gp-concreto);
	background: rgba(26, 27, 34, 0.05);
	font-size: 0.8125rem;
	color: var(--gp-concreto);
}

/* Armadilha de robô: fora da tela, mas não display:none — alguns robôs
   ignoram campos escondidos por display. */
.gp-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gp-aviso {
	max-width: none;
	margin-bottom: var(--gp-e-3);
	padding: 0.85rem 1rem;
	border-left: 2px solid;
	font-size: var(--gp-t-pequeno);
}

.gp-aviso--ok {
	border-color: var(--gp-zap);
	background: rgba(13, 193, 82, 0.10);
}

.gp-aviso--erro {
	border-color: #c0392b;
	background: rgba(192, 57, 43, 0.08);
}

/* ==================================================================
   TRIO DE SERVIÇOS — cartões claros
   ================================================================== */
.gp-carrossel {
	position: relative;
}

/*
 * A pista é o próprio contêiner de rolagem do navegador, com `scroll-snap`
 * encaixando cada cartão no lugar. Nada de física de rolagem reimplementada
 * em JavaScript: as setas só empurram, e sem JavaScript continua arrastável
 * com o dedo e com a roda do mouse.
 */
.gp-trio {
	display: flex;
	gap: var(--gp-e-3);
	overflow-x: auto;
	/*
	 * `proximity` e não `mandatory`: o encaixe obrigatório briga com a
	 * rolagem por gesto quando o dedo para entre dois cartões — o conteúdo
	 * é puxado de volta e a sensação é de travar. Com `proximity` ele só
	 * encaixa quando a parada já está perto do ponto.
	 */
	scroll-snap-type: x proximity;
	/* Sem `scroll-behavior: smooth` de propósito: combinado com scroll-snap
	   ele anula a rolagem programática em alguns navegadores. A animação
	   das setas é feita no app.js. */
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* Edge antigo */
	padding-bottom: 4px;        /* respiro para o anel de foco não ser cortado */
}

.gp-trio::-webkit-scrollbar {
	display: none;
}

/* Três à vista no computador. */
.gp-trio > * {
	flex: 0 0 calc((100% - var(--gp-e-3) * 2) / 3);
	scroll-snap-align: start;
	min-width: 0;
}

@media (max-width: 900px) {
	.gp-trio > * {
		flex-basis: calc((100% - var(--gp-e-3)) / 2);
	}
}

@media (max-width: 600px) {
	/* Deixa espiar o próximo cartão: é o que avisa que há mais para o lado. */
	.gp-trio > * {
		flex-basis: 86%;
	}
}

/* Com três ou menos serviços não há o que rolar — volta a ser grade. */
.gp-carrossel--curto .gp-trio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	overflow: visible;
}

.gp-carrossel--curto .gp-trio > * {
	flex-basis: auto;
}

/* ------------------------------------------------------------------
   Setas
   ------------------------------------------------------------------ */
.gp-carrossel__seta {
	position: absolute;
	top: 38%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--gp-linha);
	border-radius: 50%;
	background: var(--gp-obra);
	color: var(--gp-gesso);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	transition: background-color var(--gp-dur-curta) ease, border-color var(--gp-dur-curta) ease;
}

.gp-carrossel__seta:hover {
	background: var(--gp-amarelo, #e2b700);
	border-color: var(--gp-amarelo, #e2b700);
	color: #1a1b22;
}

.gp-carrossel__seta:focus-visible {
	outline: 2px solid var(--gp-amarelo, #e2b700);
	outline-offset: 3px;
}

.gp-carrossel__seta[hidden] {
	display: none;
}

.gp-carrossel__seta--ant  { left: -22px; }
.gp-carrossel__seta--prox { right: -22px; }

/* Em tela estreita as setas iriam para fora da área visível. */
@media (max-width: 1260px) {
	.gp-carrossel__seta--ant  { left: 4px; }
	.gp-carrossel__seta--prox { right: 4px; }
}

@media (max-width: 600px) {
	/* No celular o gesto de arrastar já resolve; a seta só atrapalharia. */
	.gp-carrossel__seta {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Marcadores de posição
   ------------------------------------------------------------------ */
.gp-carrossel__pontos {
	display: flex;
	justify-content: center;
	gap: 7px;
	max-width: none;
	margin: var(--gp-e-3) 0 0;
}

.gp-carrossel__pontos span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gp-linha);
	transition: background-color var(--gp-dur-curta) ease, width var(--gp-dur-curta) ease;
}

.gp-carrossel__pontos span[data-atual] {
	width: 22px;
	border-radius: 999px;
	background: var(--gp-amarelo, #e2b700);
}

body.gp-modelo-classica .gp-trio .gp-card {
	background: var(--gp-grafite);
	border-color: var(--gp-linha);
	text-align: center;
	clip-path: none; /* o corte de sanca é assinatura do modelo escuro */
}

body.gp-modelo-classica .gp-trio .gp-card__corpo {
	align-items: center;
}

body.gp-modelo-classica .gp-trio .gp-card__corpo .gp-btn {
	align-self: center;
}

body.gp-modelo-classica .gp-trio .gp-etiqueta {
	margin-bottom: 0;
	color: var(--gp-concreto);
}

body.gp-modelo-classica .gp-trio h3 {
	color: var(--gp-marinho);
}

.gp-trio .gp-card__midia {
	aspect-ratio: 16 / 10;
}

/* ==================================================================
   BLOCO AMARELO DA HISTÓRIA
   ================================================================== */
/*
 * Réplica da seção do site anterior. Os valores abaixo foram MEDIDOS na
 * página original (cor, espaçamento, tamanho, alinhamento), não estimados:
 *
 *   fundo #F6C100 · padding 40px em cima e embaixo · container 1020px
 *   título  H2 · 28px · peso 600 · #151536 · centralizado
 *   parágrafo 18px/27px · #473911 · alinhado à ESQUERDA · margem 14,4px
 *
 * A única diferença proposital: a tipografia é a do projeto (Archivo e
 * Barlow) e não a do original (Roboto e Sora), que eram sobra do Elementor.
 */
.gp-historia {
	background: #f6c100;
	padding-block: 40px;
	text-align: center;
}

.gp-historia > .gp-wrap {
	max-width: 1020px;
}

.gp-historia h2 {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	color: #151536;
	margin-bottom: 0;
}

/* Divisor: ícone de marcador entre duas linhas, como no original. */
.gp-historia__divisor {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 10px 0 20px;
}

.gp-historia__divisor span {
	width: 60px;
	height: 1px;
	background: rgba(21, 21, 54, 0.35);
}

.gp-historia__divisor svg {
	width: 13px;
	height: 17px;
	fill: #151536;
}

.gp-historia p {
	max-width: none;
	margin: 0;
	text-align: left;
	font-size: 18px;
	line-height: 27px;
	color: #473911; /* 7,4:1 sobre o amarelo — o tom exato do original */
}

.gp-historia p + p {
	margin-top: 14.4px;
}

.gp-historia strong {
	color: #151536;
	font-weight: 700;
}

/* ==================================================================
   GALERIA
   ================================================================== */
/*
 * Três colunas fixas, como no site anterior — e não `auto-fit`, que abria
 * quatro em tela larga e deixava as fotos pequenas demais para mostrar
 * acabamento.
 */
.gp-galeria {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gp-e-2);
}

@media (max-width: 860px) {
	.gp-galeria {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.gp-galeria {
		grid-template-columns: 1fr;
	}
}

/*
 * TODAS as fotos no mesmo tamanho. O modelo Moderno usa um mosaico com o
 * primeiro item maior; aqui isso atrapalha — foto de obra em tamanhos
 * diferentes lê como bagunça, e quem está escolhendo gesseiro julga o
 * capricho do profissional pelo capricho do site.
 */
.gp-galeria .gp-obra,
.gp-galeria .gp-obra:first-child {
	grid-column: auto;
	/*
	 * 3:2, não 4:3. As fotos de obra são largas (perto de 16:9) e um quadro
	 * mais alto obriga a cortar as laterais — que é justamente onde está o
	 * assunto: a escada, a lateral da sanca, o pé da parede. Em 3:2 o corte
	 * é de poucos pixels e a foto continua contando o que foi feito.
	 */
	aspect-ratio: 3 / 2;
	background: var(--gp-grafite-2);
}

.gp-galeria .gp-obra img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.gp-modelo-classica .gp-obra__legenda {
	background: linear-gradient(180deg, transparent, rgba(37, 42, 65, 0.92));
	color: #ffffff;
}

body.gp-modelo-classica .gp-obra__legenda small {
	color: var(--gp-amarelo);
}

/* ==================================================================
   TODOS OS SERVIÇOS — faixa azul, fotos redondas
   ================================================================== */
.gp-oferece {
	background: var(--gp-marinho, #252a41);
	padding-block: var(--gp-secao);
}

.gp-oferece h2 {
	text-align: center;
	margin-bottom: var(--gp-e-5);
	color: #ffffff;
}

.gp-oferece__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--gp-e-3);
}

.gp-oficio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-align: center;
	padding: 0;
	background: transparent;
	border: 0;
}

.gp-oficio__disco {
	display: block;
	width: 116px;
	height: 116px;
	margin-bottom: var(--gp-e-1);
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid rgba(255, 255, 255, 0.18);
	background: var(--gp-marinho-2, #3c4460);
	transition: border-color var(--gp-dur-curta) ease;
}

.gp-oficio__disco img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.gp-oficio:hover .gp-oficio__disco {
	border-color: rgba(255, 255, 255, 0.4);
}

.gp-oficio--proprio:hover .gp-oficio__disco {
	border-color: var(--gp-amarelo, #e2b700);
}

.gp-oficio--proprio .gp-oficio__disco {
	border-color: var(--gp-amarelo, #e2b700);
	color: var(--gp-amarelo, #e2b700);
}

.gp-oficio__tipo {
	font-family: var(--gp-ff-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9096ad;
}

.gp-oficio--proprio .gp-oficio__tipo {
	color: var(--gp-amarelo, #e2b700);
}

.gp-oficio h3 {
	font-size: 1.15rem;
	color: #ffffff;
}

.gp-oficio p {
	font-size: 0.8125rem;
	color: #aeb4c8;
	margin-bottom: var(--gp-e-1);
}

/* ==================================================================
   MAPA
   ================================================================== */
.gp-mapa__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: var(--gp-e-5) var(--gp-e-2);
	background: var(--gp-grafite);
	text-decoration: none;
	text-align: center;
	border-bottom: 1px solid var(--gp-linha);
	transition: background-color var(--gp-dur-curta) ease;
}

.gp-mapa__link:hover {
	background: var(--gp-grafite-2);
}

.gp-mapa__link strong {
	font-family: var(--gp-ff-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--gp-gesso);
}

.gp-mapa__link > span:last-child {
	font-size: var(--gp-t-pequeno);
	color: var(--gp-ouro);
}

/* ==================================================================
   FECHAMENTO — diferenciais + formulário, sobre o azul do rodapé
   ================================================================== */
body.gp-modelo-classica #orcamento.gp-secao--grafite {
	background: var(--gp-marinho);
	color: #ffffff;
}

body.gp-modelo-classica #orcamento h2,
body.gp-modelo-classica #orcamento h3 {
	color: #ffffff;
}

body.gp-modelo-classica #orcamento .gp-etiqueta {
	color: var(--gp-amarelo);
}

body.gp-modelo-classica #orcamento .gp-filete {
	background: linear-gradient(90deg, var(--gp-amarelo), transparent);
	box-shadow: none;
}

.gp-fechamento {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--gp-e-5);
	align-items: start;
}

@media (max-width: 900px) {
	.gp-fechamento {
		grid-template-columns: 1fr;
		gap: var(--gp-e-4);
	}
}

.gp-diferenciais {
	list-style: none;
	display: grid;
	gap: var(--gp-e-2);
	margin-top: var(--gp-e-3);
}

.gp-diferenciais li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: var(--gp-e-2);
	border-left: 2px solid var(--gp-amarelo, #e2b700);
}

.gp-diferenciais strong {
	font-family: var(--gp-ff-display);
	font-size: 1rem;
	font-weight: 600;
	color: #ffffff;
}

.gp-diferenciais span {
	font-size: var(--gp-t-pequeno);
	color: #c8ccdb;
}

.gp-pagamento {
	margin-top: var(--gp-e-4);
	padding-top: var(--gp-e-3);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.gp-pagamento h3 {
	font-size: 1rem;
	margin-bottom: 0.3rem;
}

.gp-pagamento p {
	font-size: var(--gp-t-pequeno);
	color: #c8ccdb;
}

.gp-fechamento__form {
	padding: var(--gp-e-4) var(--gp-e-3);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.gp-fechamento__form .gp-form {
	margin-top: var(--gp-e-3);
	grid-template-columns: 1fr 1fr;
}

.gp-fechamento__form label {
	color: #aeb4c8;
}

.gp-fechamento__form input,
.gp-fechamento__form select,
.gp-fechamento__form textarea {
	background: #ffffff;
	border-color: transparent;
	color: #1a1b22;
}

.gp-fechamento__form .gp-form__nota {
	border-left-color: var(--gp-amarelo);
	background: rgba(255, 255, 255, 0.08);
	color: #c8ccdb;
}

@media (max-width: 560px) {
	.gp-fechamento__form .gp-form {
		grid-template-columns: 1fr;
	}
}

/* O H1 vive na seção de serviços porque o herói é só imagem. */
.gp-titulo-foco {
	font-size: var(--gp-t-h2);
	font-weight: 500;
	color: var(--gp-concreto);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.gp-titulo-foco strong {
	font-weight: 800;
	color: var(--gp-gesso);
}

.gp-galeria__mais {
	max-width: none;
	margin-top: var(--gp-e-3);
	text-align: center;
}

/* ==================================================================
   ONDE ATENDEMOS
   ================================================================== */
.gp-cidades {
	justify-content: center;
	gap: 10px;
}

body.gp-modelo-classica .gp-cidades a {
	padding: 0.7rem 1.3rem;
	border-color: var(--gp-linha);
	background: var(--gp-grafite);
	color: var(--gp-marinho);
	font-weight: 600;
}

body.gp-modelo-classica .gp-cidades a:hover {
	border-color: var(--gp-marinho);
	background: var(--gp-marinho);
	color: #fff;
}

.gp-cidades__nota {
	max-width: none;
	margin-top: var(--gp-e-3);
	text-align: center;
	font-size: var(--gp-t-pequeno);
	color: var(--gp-concreto);
}

/* ==================================================================
   PERGUNTAS FREQUENTES
   ==================================================================
   Sanfona em <details>/<summary>: sem JavaScript, acessível por padrão. */
.gp-faq {
	max-width: 860px;
	margin-inline: auto;
	border-top: 1px solid var(--gp-linha);
}

.gp-faq__item {
	border-bottom: 1px solid var(--gp-linha);
}

.gp-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gp-e-2);
	padding: 1.1rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--gp-ff-display);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--gp-gesso);
	transition: color var(--gp-dur-curta) ease;
}

/* Tira o triângulo padrão dos dois motores. */
.gp-faq__item summary::-webkit-details-marker { display: none; }
.gp-faq__item summary::marker { content: ""; }

.gp-faq__item summary:hover {
	color: var(--gp-ouro);
}

.gp-faq__item summary:focus-visible {
	outline: 2px solid var(--gp-ouro);
	outline-offset: 3px;
	border-radius: var(--gp-raio);
}

/* Sinal de mais que vira menos quando abre. */
.gp-faq__sinal {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.gp-faq__sinal::before,
.gp-faq__sinal::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--gp-ouro);
	transform: translate(-50%, -50%);
	transition: transform var(--gp-dur-curta) var(--gp-ease), opacity var(--gp-dur-curta) ease;
}

.gp-faq__sinal::before { width: 14px; height: 2px; }
.gp-faq__sinal::after  { width: 2px; height: 14px; }

.gp-faq__item[open] .gp-faq__sinal::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.gp-faq__resposta {
	padding: 0 0 1.3rem;
	max-width: 74ch;
}

.gp-faq__resposta p {
	font-size: var(--gp-t-pequeno);
	line-height: 1.65;
	color: var(--gp-concreto);
	max-width: none;
}

.gp-faq__resposta p + p {
	margin-top: 0.7rem;
}

.gp-faq__rodape {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gp-e-2);
	flex-wrap: wrap;
	margin-top: var(--gp-e-4);
}

.gp-faq__rodape p {
	margin: 0;
	max-width: none;
	color: var(--gp-concreto);
}

@media (prefers-reduced-motion: reduce) {
	.gp-faq__sinal::before,
	.gp-faq__sinal::after { transition: none; }
}

/* ==================================================================
   DEPOIMENTOS
   ================================================================== */
.gp-depoimentos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--gp-e-3);
}

body.gp-modelo-classica .gp-depoimento {
	position: relative;
	padding: var(--gp-e-3);
	background: var(--gp-grafite);
	border: 0;
	border-top: 3px solid var(--gp-amarelo);
}

body.gp-modelo-classica .gp-depoimento blockquote {
	margin: 0;
	color: var(--gp-gesso);
	font-size: var(--gp-t-pequeno);
	line-height: 1.65;
}

/* Aspas grandes atrás do texto: marca de citação sem virar enfeite. */
body.gp-modelo-classica .gp-depoimento blockquote::before {
	content: "\201C";
	display: block;
	font-family: var(--gp-ff-display);
	font-size: 3rem;
	font-weight: 800;
	line-height: 0.6;
	color: var(--gp-amarelo);
	margin-bottom: 0.4rem;
}

body.gp-modelo-classica .gp-depoimento cite {
	display: block;
	margin-top: var(--gp-e-2);
	font-style: normal;
	font-family: var(--gp-ff-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gp-marinho);
}

/* Selo de texto provisório — impossível publicar por engano sem ver. */
.gp-depoimento__selo {
	position: absolute;
	top: 0;
	right: 0;
	padding: 3px 8px;
	background: #c0392b;
	color: #fff;
	font-family: var(--gp-ff-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}