/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero {
  position:relative; padding: calc(76px + clamp(3rem,7vw,6rem)) 0 clamp(3rem,6vw,5rem);
  background: linear-gradient(160deg,#081540, #0a1f5c 60%, #0e297f); color:#fff;
  overflow:hidden; isolation:isolate;
}
.page-hero .blueprint--dark { position:absolute; inset:0; z-index:-1; }
.page-hero__cog { position:absolute; right:-40px; top:-40px; width:280px; opacity:.12; filter: brightness(0) invert(1); animation: spin 60s linear infinite; z-index:-1; }
.page-hero h1 { color:#fff; font-size: var(--step-4); font-weight: 900; letter-spacing: -0.03em; }
.page-hero p { margin-top:1rem; color: rgba(220,232,252,.85); font-size: var(--step-1); max-width: 56ch; }
.breadcrumb { display:flex; gap:.5rem; align-items:center; font-family:var(--font-mono); font-size:.75rem; color: rgba(188,214,255,.7); margin-bottom:1.2rem; letter-spacing:.05em; }
.breadcrumb a:hover { color:#fff; }


/* Vídeo de fundo — mesmo vídeo do hero da home, aplicado às páginas internas
   (pedido da cliente: manter a mesma abertura em todas as páginas).
   O .page-hero tem gradiente opaco próprio, então o vídeo NÃO pode ficar em
   z-index negativo (ficaria atrás desse fundo). Aqui ele sobe para o fluxo
   positivo e o conteúdo vai para z-index 2.
   Ordem: fundo do bloco → vídeo (0) → véu (1) → blueprint/engrenagem (1, depois
   no DOM) → conteúdo (2). */
.page-hero--video .page-hero__media { position:absolute; inset:0; z-index:0; }
.page-hero--video .page-hero__media video { width:100%; height:100%; object-fit:cover; }
.page-hero--video .page-hero__veil {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(160deg, rgba(8,21,64,.82), rgba(10,31,92,.72) 60%, rgba(14,41,127,.82));
}
.page-hero--video .blueprint--dark,
.page-hero--video .page-hero__cog { z-index:1; }
.page-hero--video > .wrap { position:relative; z-index:2; }

/* Sem vídeo em movimento para quem pediu menos animação no sistema. */
@media (prefers-reduced-motion: reduce) {
  .page-hero--video .page-hero__media { display:none; }
}