/* ============================================================================
   NAVEGA UBS — base
   Reset, tipografia, keyframes globais, primitivas (vidro, pílula, botão),
   navbar e utilitários de revelação. Compartilhado pelas três visões.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background: var(--ink-body);
}

body {
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--tinta);
  overflow-x: clip;
}

img { display: block; max-width: 100%; }

/* O atributo [hidden] vem da folha do navegador e perde para QUALQUER
   declaração de display do autor (.app-circ { display: grid }, por ex.).
   Esta regra devolve a ele a autoridade que o HTML promete. */
[hidden] { display: none !important; }

a {
  color: var(--ciano-700);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ciano-700) 40%, transparent);
}

a:hover {
  color: var(--ciano-600);
  border-bottom-color: var(--ciano-600);
}

::selection { background: color-mix(in srgb, var(--ciano) 28%, transparent); }

/* Foco visível — anel ciano de 2px em todo elemento interativo.
   Nunca removemos o outline sem repor este. */
:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Keyframes globais ------------------------------------------------ */

@keyframes bsFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

@keyframes bsDrift {
  0%   { transform: translate3d(-2%, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, -4%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 0, 0) scale(1); }
}

@keyframes bsCue {
  0%   { transform: translateY(0);   opacity: .2; }
  45%  { transform: translateY(9px); opacity: .85; }
  100% { transform: translateY(0);   opacity: .2; }
}

@keyframes appIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pushIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Primitivas ------------------------------------------------------- */

/* Vidro sobre fundo escuro. Sempre precisa de um blob radial atrás,
   senão não há nada para o backdrop-filter refratar. */
.vidro {
  background: var(--vidro-escuro-bg);
  backdrop-filter: var(--vidro-escuro-blur);
  -webkit-backdrop-filter: var(--vidro-escuro-blur);
  border: var(--vidro-escuro-borda);
  box-shadow: var(--s-vidro-escuro);
  border-radius: var(--r-vidro);
}

/* Vidro sobre papel. */
.vidro-claro {
  background: var(--vidro-claro-bg);
  backdrop-filter: var(--vidro-claro-blur);
  -webkit-backdrop-filter: var(--vidro-claro-blur);
  border: var(--vidro-claro-borda);
  box-shadow: var(--s-claro);
  border-radius: var(--r-vidro);
}

/* Filete de luz no topo do vidro — reflexo especular. */
.filete::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 22%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  pointer-events: none;
}

.pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border-radius: var(--r-pilula);
  font-family: inherit;
  line-height: 1;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 15px 28px;
  border: 0;
  border-radius: var(--r-pilula);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease, box-shadow .2s ease, color .2s ease;
  text-decoration: none;
}

.btn:active { transform: scale(.975); }

.btn-primario {
  background: var(--ciano);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 136, 176, .34);
  border-bottom: 0;
}

.btn-primario:hover {
  background: var(--ciano-600);
  color: #fff;
}

.btn-vidro {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  color: var(--sobre-ink);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-vidro:hover {
  background: rgba(255, 255, 255, .18);
  color: var(--sobre-ink);
}

/* Kicker — rótulo de seção */
.kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ciano-700);
  margin: 0 0 var(--e4);
}

.kicker-ink { color: var(--ciano-200); }

/* ---- Navbar ----------------------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 56px);
  background: rgba(6, 26, 34, .74);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  color: var(--sobre-ink);
}

.navbar-marca {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.navbar-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(3, 17, 23, .4);
  align-self: center;
}

.navbar-wordmark {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.navbar-wordmark span { color: var(--ciano-200); }

.navbar-mote {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sobre-ink-50);
}

.navbar-abas {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar-aba {
  position: relative;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-pilula);
  background: transparent;
  color: rgba(238, 246, 249, .9);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background .18s ease;
  text-decoration: none;
  display: inline-block;
}

.navbar-aba:hover {
  background: rgba(255, 255, 255, .09);
  color: rgba(238, 246, 249, .9);
}

/* Barra do estado ativo — 2px ciano claro com glow. */
.navbar-aba[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--ciano-200);
  box-shadow: 0 0 12px rgba(98, 197, 238, .9);
}

/* ---- Revelação por scroll --------------------------------------------- */

[data-rv] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-tela), transform .7s var(--ease-tela);
}

[data-rv].rv-on {
  opacity: 1;
  transform: none;
}

/* ---- Movimento reduzido ------------------------------------------------
   Desliga entradas e loops contínuos. O canvas do hero é desligado no JS
   (não basta zerar a animação: o rAF continuaria consumindo CPU).       */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-rv] {
    opacity: 1;
    transform: none;
  }
}

/* Atrasos escalonados de revelação — dão cascata dentro de uma seção. */
.rv-d1 { transition-delay: .1s; }
.rv-d2 { transition-delay: .2s; }
.rv-d3 { transition-delay: .3s; }