/**
 * Componentes do GessoPro.
 *
 * Os três componentes-assinatura do Sistema Visual vivem aqui:
 *   1. Filete de luz  — a fita de LED da sanca virada elemento gráfico
 *   2. Corte de sanca — o chanfro que substitui o canto arredondado genérico
 *   3. Antes / Depois — a prova de trabalho do ramo
 *
 * 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.
 */

/* ==================================================================
   1. FILETE DE LUZ
   ================================================================== */
.gp-filete {
	display: block;
	width: 84px;
	height: 2px;
	border: 0;
	margin: var(--gp-e-2) 0 0;
	background: linear-gradient(90deg, var(--gp-ouro-luz), var(--gp-ouro) 45%, transparent);
	box-shadow: 0 0 14px rgba(226, 183, 0, 0.35);
	transform-origin: left center;
}

/* A luz "acende" quando o bloco entra na tela. */
.gp-anima .gp-revelar .gp-filete {
	transform: scaleX(0);
	transition: transform 400ms var(--gp-ease) 120ms;
}

.gp-anima .gp-revelar.gp-visivel .gp-filete {
	transform: scaleX(1);
}

/* ==================================================================
   2. CORTE DE SANCA
   ================================================================== */
.gp-sanca {
	position: relative;
	overflow: hidden;
	background: var(--gp-grafite-2);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gp-chanfro)), calc(100% - var(--gp-chanfro)) 100%, 0 100%);
}

/* O filete corre na base do corte. */
.gp-sanca::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gp-ouro) 68%, var(--gp-ouro-luz));
	opacity: 0;
	transition: opacity var(--gp-dur-curta) ease;
}

.gp-sanca:hover::after,
.gp-sanca:focus-within::after {
	opacity: 1;
}

/* ==================================================================
   3. ANTES / DEPOIS
   ================================================================== */
.gp-ad {
	position: relative;
	overflow: hidden;
	background: var(--gp-grafite-2);
	touch-action: pan-y;
	user-select: none;
}

.gp-ad img {
	width: 100%;
	display: block;
}

.gp-ad__depois {
	position: absolute;
	inset: 0;
	/* A largura visível é controlada pelo JS via --gp-ad-pos. */
	clip-path: inset(0 calc(100% - var(--gp-ad-pos, 50%)) 0 0);
}

.gp-ad__linha {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--gp-ad-pos, 50%);
	width: 2px;
	background: var(--gp-ouro);
	box-shadow: 0 0 12px rgba(226, 183, 0, 0.6);
	pointer-events: none;
}

.gp-ad__alca {
	position: absolute;
	top: 50%;
	left: var(--gp-ad-pos, 50%);
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border: 2px solid var(--gp-ouro);
	border-radius: 50%;
	background: rgba(11, 11, 12, 0.72);
	cursor: ew-resize;
	display: grid;
	place-items: center;
	color: var(--gp-ouro);
	font-size: 14px;
}

.gp-ad__rotulo {
	position: absolute;
	bottom: var(--gp-e-2);
	padding: 4px 10px;
	background: rgba(11, 11, 12, 0.78);
	color: var(--gp-gesso);
	font-family: var(--gp-ff-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	pointer-events: none;
}

.gp-ad__rotulo--a { left: var(--gp-e-2); }
.gp-ad__rotulo--b { right: var(--gp-e-2); }

/* ==================================================================
   BOTÕES
   ================================================================== */
.gp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.9em 1.6em;
	border: 1px solid transparent;
	border-radius: var(--gp-raio);
	font-family: var(--gp-ff-display);
	font-size: var(--gp-t-pequeno);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--gp-dur-curta) ease,
		color var(--gp-dur-curta) ease,
		border-color var(--gp-dur-curta) ease,
		transform var(--gp-dur-curta) ease;
}

.gp-btn:hover {
	transform: translateY(-2px);
}

/* Ação principal: WhatsApp. Texto branco puro sobre o verde (4,6:1). */
.gp-btn--zap {
	background: var(--gp-zap);
	color: #fff;
}

.gp-btn--zap:hover {
	background: var(--gp-zap-hover);
	color: #fff;
}

/* Ação secundária: contorno de ouro sobre o escuro. */
.gp-btn--ouro {
	border-color: var(--gp-ouro);
	color: var(--gp-ouro);
	background: transparent;
}

.gp-btn--ouro:hover {
	background: var(--gp-ouro);
	color: var(--gp-obra);
}

.gp-secao--claro .gp-btn--ouro {
	border-color: var(--gp-ouro-escuro);
	color: var(--gp-ouro-escuro);
}

.gp-secao--claro .gp-btn--ouro:hover {
	background: var(--gp-ouro-escuro);
	color: var(--gp-gesso);
}

.gp-btn--grande {
	padding: 1.05em 2em;
	font-size: 1rem;
}

.gp-btn svg {
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	fill: currentColor;
}

/* ==================================================================
   CARTÃO DE SERVIÇO
   ================================================================== */
.gp-card {
	display: flex;
	flex-direction: column;
	background: var(--gp-grafite);
	border: 1px solid var(--gp-linha);
	transition: border-color var(--gp-dur-curta) ease, transform var(--gp-dur-curta) ease;
}

.gp-card:hover {
	border-color: var(--gp-linha-ouro);
	transform: translateY(-2px);
}

.gp-card__midia {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--gp-grafite-2);
}

.gp-card__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--gp-dur) var(--gp-ease);
}

.gp-card:hover .gp-card__midia img {
	transform: scale(1.03);
}

.gp-card__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--gp-e-2);
	padding: var(--gp-e-3) var(--gp-e-3) var(--gp-e-4);
	flex: 1;
}

.gp-card__corpo p {
	color: var(--gp-concreto);
	font-size: var(--gp-t-pequeno);
	flex: 1;
}

.gp-card__corpo .gp-btn {
	align-self: flex-start;
	margin-top: var(--gp-e-1);
}

/* Cartão em destaque — os carros-chefe (sanca e drywall). */
.gp-card--destaque {
	border-color: var(--gp-linha-ouro);
}

.gp-card--destaque .gp-card__midia {
	aspect-ratio: 4 / 3;
}

/* ==================================================================
   SELO PROVISÓRIO — some quando a foto real entrar
   ================================================================== */
.gp-provisorio {
	position: absolute;
	top: var(--gp-e-1);
	left: var(--gp-e-1);
	z-index: 2;
	padding: 3px 8px;
	background: rgba(11, 11, 12, 0.82);
	border: 1px solid var(--gp-linha-ouro);
	color: var(--gp-ouro);
	font-family: var(--gp-ff-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ==================================================================
   REVELAÇÃO NA ENTRADA
   ================================================================== */
.gp-anima .gp-revelar {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--gp-dur) var(--gp-ease), transform var(--gp-dur) var(--gp-ease);
}

.gp-anima .gp-revelar.gp-visivel {
	opacity: 1;
	transform: none;
}

/*
 * A regra acima só vale sob `.gp-anima`, classe que o próprio app.js coloca
 * no <html> quando começa a rodar. Se o JavaScript falhar em carregar, a
 * classe nunca aparece e o conteúdo fica visível — em vez de o site inteiro
 * sumir por causa de um arquivo que não baixou.
 */

@media (prefers-reduced-motion: reduce) {
	.gp-anima .gp-revelar {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.gp-btn:hover,
	.gp-card:hover {
		transform: none;
	}

	.gp-card:hover .gp-card__midia img {
		transform: none;
	}
}

/* ==================================================================
   LIGHTBOX DA GALERIA
   ================================================================== */

/* Lupa que aparece ao passar o mouse: avisa que a foto abre. */
.gp-obra__lupa {
	position: absolute;
	top: var(--gp-e-2);
	right: var(--gp-e-2);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(11, 11, 12, 0.72);
	color: #fff;
	opacity: 0;
	transform: scale(0.85);
	transition: opacity var(--gp-dur-curta) ease, transform var(--gp-dur-curta) var(--gp-ease);
	pointer-events: none;
}

.gp-obra__lupa svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.gp-obra:hover .gp-obra__lupa,
.gp-obra:focus-visible .gp-obra__lupa {
	opacity: 1;
	transform: scale(1);
}

/* A janela em si. */
.gp-lb {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(6, 6, 8, 0.94);
	cursor: zoom-out;
}

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

/* Trava a rolagem do fundo enquanto a foto está aberta. */
body.gp-lb-aberta {
	overflow: hidden;
}

.gp-lb__figura {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gp-e-2);
	max-width: 100%;
	max-height: 100%;
}

.gp-lb__img {
	max-width: min(1200px, 92vw);
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: default;
	background: #111;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.gp-lb__legenda {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-align: center;
	cursor: default;
}

.gp-lb__tipo {
	font-family: var(--gp-ff-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e2b700;
}

.gp-lb__titulo {
	font-family: var(--gp-ff-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: #f4f2ed;
}

.gp-lb__contador {
	font-size: 0.8125rem;
	color: #9a9aa4;
	font-variant-numeric: tabular-nums;
}

/* Botões — alvos de 48px, confortáveis no dedo. */
.gp-lb__fechar,
.gp-lb__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(244, 242, 237, 0.22);
	border-radius: 50%;
	background: rgba(11, 11, 12, 0.6);
	color: #f4f2ed;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--gp-dur-curta) ease, border-color var(--gp-dur-curta) ease;
}

.gp-lb__fechar:hover,
.gp-lb__nav:hover {
	background: rgba(226, 183, 0, 0.9);
	border-color: #e2b700;
	color: #0b0b0c;
}

.gp-lb__fechar:focus-visible,
.gp-lb__nav:focus-visible {
	outline: 2px solid #e2b700;
	outline-offset: 3px;
}

.gp-lb__fechar {
	top: clamp(0.75rem, 3vw, 1.5rem);
	right: clamp(0.75rem, 3vw, 1.5rem);
	font-size: 2rem;
}

.gp-lb__nav {
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.2rem;
}

.gp-lb__nav--ant { left: clamp(0.5rem, 2vw, 1.5rem); }
.gp-lb__nav--prox { right: clamp(0.5rem, 2vw, 1.5rem); }

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

/* No celular as setas descem para o rodapé: no meio da tela elas cobrem
   a foto e brigam com o gesto de arrastar. */
@media (max-width: 640px) {
	.gp-lb__nav {
		top: auto;
		bottom: clamp(0.75rem, 3vw, 1.5rem);
		transform: none;
	}

	.gp-lb__img {
		max-height: 62vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gp-obra__lupa {
		transition: none;
	}
}