/* ==========================================================================
   Hero de serviços — cena travada "a câmera achando o assunto"
   ========================================================================== */
.hero-srv {
	position: relative;
	/* altura de rolagem da cena; o JS ajusta conforme necessário */
	height: 300vh;
}
.hero-srv-pin {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 100dvh;
	overflow: clip;
	display: flex;
	align-items: center;
	isolation: isolate;
}

/* --- parede de imagens (3 colunas) --- */
.hero-srv-wall {
	position: absolute;
	inset: -8% -2%;
	z-index: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 1.4vw, 22px);
	will-change: transform;
}
.hero-srv-col { overflow: hidden; }
.hero-srv-track {
	display: grid;
	gap: clamp(12px, 1.4vw, 22px);
	will-change: transform;
}
.hero-srv-shot {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: #0a1024;
}
.hero-srv-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.82;
}

/* véu que escurece a parede conforme a cena fecha */
.hero-srv-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse at center, rgba(2,6,24,0.55) 0%, rgba(2,6,24,0.92) 68%),
		linear-gradient(180deg, rgba(2,6,24,0.6) 0%, rgba(2,6,24,0.25) 45%, var(--bg-navy) 100%);
	opacity: 0.35;
	will-change: opacity;
}

/* ==========================================================================
   Visor (HUD) — existe só nesta cena
   ========================================================================== */
.viewfinder {
	position: absolute;
	inset: clamp(18px, 2.4vw, 34px);
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	will-change: opacity;
}
.vf-corner {
	position: absolute;
	width: clamp(22px, 2.4vw, 34px);
	height: clamp(22px, 2.4vw, 34px);
	border: 2px solid rgba(241,243,249,0.85);
}
.vf-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.vf-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.vf-br { bottom: 0; right: 0; border-left: none; border-top: none; }
.vf-bl { bottom: 0; left: 0; border-right: none; border-top: none; }

.vf-hud {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: clamp(44px, 5vw, 68px);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: rgba(241,243,249,0.8);
}
.vf-hud--top { top: 2px; }
.vf-hud--bottom { bottom: 2px; }

.vf-rec { display: inline-flex; align-items: center; gap: 8px; color: #ff4033; }
.vf-rec i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff4033;
	animation: vf-blink 1.1s steps(1) infinite;
}
@keyframes vf-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } }
.vf-tc { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Conteúdo que resolve no fim da cena
   ========================================================================== */
.hero-srv-content {
	position: relative;
	z-index: 4;
	width: 100%;
	text-align: center;
}
.hero-srv-content .eyebrow { margin-bottom: 20px; }
.hero-srv-title {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(36px, 6vw, 92px);
	line-height: 0.98;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
.hero-srv-title .accent { color: var(--gold-1); }
.hero-srv-sub {
	margin: 22px auto 0;
	max-width: 54ch;
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 300;
	line-height: 1.6;
	color: var(--text-light-80);
}
.hero-srv-content .btn { margin-top: 32px; }

/* sem JS / reduced-motion: cena estática legível */
.hero-srv--static { height: auto; }
.hero-srv--static .hero-srv-pin { position: relative; height: auto; min-height: 88vh; padding-block: 120px 80px; }
.hero-srv--static .hero-srv-veil { opacity: 0.8; }
.hero-srv--static .viewfinder { display: none; }

@media (prefers-reduced-motion: reduce) {
	.hero-srv { height: auto; }
	.hero-srv-pin { position: relative; height: auto; min-height: 88vh; padding-block: 120px 80px; }
	.hero-srv-veil { opacity: 0.8; }
	.viewfinder { display: none; }
	.vf-rec i { animation: none; }
}

@media (max-width: 900px) {
	.hero-srv { height: 220vh; }
	.hero-srv-wall { grid-template-columns: repeat(2, 1fr); inset: -10% -6%; }
	.hero-srv-col:last-child { display: none; }
	.vf-hud { padding-inline: 38px; font-size: 10px; }
	.hero-srv-title { font-size: clamp(30px, 9vw, 46px); }
}