/* ============================================================
   SERVIÇOS — "Horizon" / Obsidian Elite
   Cena 3D fixa + jornada de rolagem em 5 blocos.
   Escopo: SOMENTE servicos.html. Nenhum token global é alterado.
   ============================================================ */

.srv {
  --obsidian: #000000;
  --neon:     #39FF14;
  --zinc-400: #A1A1AA;
  --zinc-600: #52525B;
  background: var(--obsidian);
  position: relative;
}

/* ═══════════════════════════════════════════════
   CONTAINER + PALCO 3D
   ═══════════════════════════════════════════════ */
.hero-container {
  position: relative;
  background: var(--obsidian);
}

/* O palco fica sticky e não fixed: assim a cena 3D vive dentro do
   container e libera o footer naturalmente ao fim da jornada. */
.hero-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
}

.hero-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Vinheta que amarra a cena ao preto da página */
.hero-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(75% 60% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 72%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 76%, rgba(0,0,0,0.8) 100%);
}

/* Os blocos de texto sobem por cima do palco */
.hero-sections {
  position: relative;
  z-index: 2;
  margin-top: -100svh;
}

/* ═══════════════════════════════════════════════
   BLOCOS DE CONTEÚDO
   ═══════════════════════════════════════════════ */
.content-section {
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  pointer-events: none;   /* o texto não bloqueia a cena, só o botão clica */
}
.content-section > * { pointer-events: auto; }

.hero-title {
  font-family: var(--font, 'Inter', sans-serif);
  font-size: clamp(2.6rem, 11vw, 9.5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 0 80px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.8);
}
.title-word { display: inline-block; white-space: nowrap; }
.title-char {
  display: inline-block;
  will-change: transform, opacity;
}

.hero-subtitle {
  margin-top: 1.75rem;
  max-width: 46rem;
}
.subtitle-line {
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--zinc-400);
  text-shadow: 0 0 30px rgba(0,0,0,0.9);
}
.subtitle-line + .subtitle-line { margin-top: 0.35rem; }

/* ── CTA pill com borda verde neon ── */
.horizon-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
  padding: 1rem 2.1rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(57,255,20,0.55);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 0 26px rgba(57,255,20,0.10), inset 0 0 20px rgba(57,255,20,0.04);
  transition: border-color 300ms ease, box-shadow 300ms ease,
              background 300ms ease, transform 300ms ease;
}
.horizon-cta svg { width: 17px; height: 17px; transition: transform 300ms ease; }
.horizon-cta:hover {
  border-color: var(--neon);
  background: rgba(57,255,20,0.10);
  box-shadow: 0 0 44px rgba(57,255,20,0.28), inset 0 0 24px rgba(57,255,20,0.08);
  transform: translateY(-2px);
}
.horizon-cta:hover svg { transform: translateX(4px); }
.horizon-cta:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

/* ═══════════════════════════════════════════════
   INDICADOR DE PROGRESSO
   ═══════════════════════════════════════════════ */
.scroll-progress {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(520px, calc(100% - 3rem));
}
.scroll-text,
.section-counter {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--zinc-600);
  white-space: nowrap;
}
.progress-track {
  display: block;
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
.progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--neon);
  box-shadow: 0 0 12px rgba(57,255,20,0.6);
}

/* ═══════════════════════════════════════════════
   FALLBACK SEM WEBGL
   ═══════════════════════════════════════════════ */
.hero-container.no-webgl .hero-stage {
  background:
    radial-gradient(70% 55% at 50% 45%, rgba(20,50,22,0.35) 0%, rgba(0,0,0,0) 70%),
    var(--obsidian);
}

/* ═══════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .content-section { padding: 0 1.25rem; }
  .hero-title { letter-spacing: -0.035em; }
  .hero-subtitle { margin-top: 1.25rem; }
  .horizon-cta { margin-top: 2rem; width: 100%; justify-content: center; }
  .scroll-progress { bottom: 1.25rem; gap: 0.7rem; }
  .scroll-text { display: none; }
}

/* Alturas curtas: o bloco não pode empurrar o CTA para fora da tela */
@media (max-height: 640px) {
  .hero-title { font-size: clamp(2.2rem, 8vw, 4rem); }
  .hero-subtitle { margin-top: 1rem; }
  .horizon-cta { margin-top: 1.5rem; padding: 0.8rem 1.6rem; }
}