/* =============================================================
   AEPRAX — site institucional · nível editorial
   Tema: dark + azul · tipografia massiva · cinema
   ============================================================= */

:root {
  --bg:    #0B0B0E;
  --bg-1:  #121217;
  --bg-2:  #1A1A20;
  --bg-3:  #24242C;

  --blue:        #5B9BFF;
  --blue-bright: #97C0FF;
  --blue-deep:   #2E62D9;
  --blue-soft:   rgba(91, 155, 255, 0.12);

  --white:  #F3F4F6;
  --gray:   #9A9CA6;
  --gray-2: #56585F;
  --line:   rgba(255, 255, 255, 0.07);
  --line-2: rgba(91, 155, 255, 0.24);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --px: clamp(1.15rem, 5vw, 6rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll suave fica por conta do JS (o nativo é desligado pelo reduced-motion do SO) */

/* scrollbar personalizada — Chromium/Safari/Edge */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--blue-deep), var(--blue));
  border-radius: 8px;
  border: 3px solid var(--bg); /* respiro que afina o thumb */
}
::-webkit-scrollbar-thumb:hover { background: var(--blue-bright); }
::-webkit-scrollbar-corner { background: var(--bg); }
/* Firefox */
@supports (-moz-appearance: none) {
  html { scrollbar-width: thin; scrollbar-color: var(--blue-deep) var(--bg); }
}
/* corta qualquer transbordo horizontal na raiz sem virar container de scroll:
   clip não força o overflow-y, então o scroll vertical e o glow que sobe pra
   seção de cima continuam funcionando */
html { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked, body.jx-on, body.menu-open { overflow: hidden; }
/* O container de scroll é a raiz: como html tem overflow-x: clip, o body NÃO
   propaga seu overflow pra viewport, então travar só o body não segura a página.
   Travamos a própria raiz quando há um overlay aberto (tour, lightbox do
   portfólio, menu mobile) pra não rolar o site por trás. */
html:has(> body.is-locked),
html:has(> body.jx-on),
html:has(> body.menu-open) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--blue); color: #06122e; }
.accent { color: var(--blue); }

/* grão */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9000; pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================
   BOOT
   ============================================================= */
.boot {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.4rem;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.boot.is-done { opacity: 0; visibility: hidden; }
.boot__core { position: relative; width: 80px; height: 80px; }
.boot__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; }
.boot__ring--1 { border-top-color: var(--blue); animation: spin 1.1s linear infinite; }
.boot__ring--2 { inset: 16px; border-bottom-color: var(--blue-bright); animation: spin 1.5s linear infinite reverse; }
.boot__dot { position: absolute; inset: 33px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 22px var(--blue); animation: pulse 1.4s ease infinite; }
.boot__logo { position: relative; width: min(360px, 70vw); }
.boot__logo-base { width: 100%; opacity: 0.09; filter: grayscale(1) brightness(2.4); }
.boot__logo-fill {
  position: absolute; inset: 0; width: 100%;
  clip-path: inset(0 100% 0 0); /* o JS revela da esquerda pra direita conforme a % */
}
.boot__pct {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--gray);
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.4; transform: scale(0.84); } }

/* barra de progresso de scroll */
.scrollbar {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright));
  z-index: 720;
  box-shadow: 0 0 10px var(--blue);
}

/* =============================================================
   BOTÕES
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.95rem;
  padding: 0.9rem 1.6rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  white-space: nowrap;
}
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.86rem; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn--solid {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(46, 98, 217, 0.75);
}
.btn--solid:hover {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -12px rgba(91, 155, 255, 0.9);
}
.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--blue-bright);
}
.btn:active { transform: scale(0.97); }
.btn__reactor { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; position: relative; flex-shrink: 0; }
.btn__reactor::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; animation: pulse 1.5s ease infinite; }

/* =============================================================
   NAV
   ============================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1rem var(--px);
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(11,11,14,0.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
  padding-top: 0.7rem; padding-bottom: 0.7rem;
  box-shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.8);
}
.nav__logo { height: 24px; width: auto; }
.nav__links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1.9rem;
}
.nav__links a {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  font-size: 0.9rem; font-weight: 500;
  color: var(--gray);
  position: relative;
  transition: color 0.15s ease;
}
.nav__i { font-family: var(--font-mono); font-size: 0.6rem; color: var(--blue); opacity: 0.55; transition: opacity 0.15s ease; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1.5px; background: var(--blue); transition: right 0.2s ease; }
.nav__links a:hover { color: var(--white); }
.nav__links a:hover .nav__i { opacity: 1; }
.nav__links a:hover::after { right: 0; }
.nav__links a[aria-current="page"] { color: var(--white); }
.nav__links a[aria-current="page"] .nav__i { opacity: 1; }
.nav__links a[aria-current="page"]::after { right: 0; background: var(--blue-deep); }
.nav__right { display: flex; align-items: center; gap: 0.75rem; }
.nav__tour {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--blue-soft);
  border: 1px solid var(--line-2);
  color: var(--blue-bright);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  padding: 0.6rem 1.1rem; border-radius: 10px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.nav__tour:hover {
  background: rgba(91, 155, 255, 0.18);
  border-color: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
}
.nav__tour-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: pulse 1.5s ease infinite; }
.nav__cta {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 8px 22px -12px rgba(46, 98, 217, 0.8);
  font-weight: 600;
}
.nav__cta:hover {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -12px rgba(91, 155, 255, 0.9);
}
.nav__burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-2); border-radius: 8px; }
.nav__burger span { width: 18px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================
   MENU MOBILE (overlay)
   ============================================================= */
.mnav { position: fixed; inset: 0; z-index: 760; pointer-events: none; }
.mnav__veil {
  position: absolute; inset: 0;
  background: rgba(5, 6, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.mnav__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(86vw, 380px);
  display: flex; flex-direction: column;
  padding: 1.1rem 1.6rem max(2rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(46, 98, 217, 0.12), transparent 60%),
    var(--bg-1);
  border-left: 1px solid var(--line);
  transform: translateX(103%);
  transition: transform 0.45s var(--ease);
}
.mnav.is-open { pointer-events: auto; }
.mnav.is-open .mnav__veil { opacity: 1; }
.mnav.is-open .mnav__panel { transform: translateX(0); }
.mnav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.mnav__logo { height: 20px; width: auto; }
.mnav__close {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--white); font-size: 0.95rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mnav__close:hover { background: var(--blue-soft); border-color: var(--blue); }
.mnav__links { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 0; overflow-y: auto; }
.mnav__links a {
  display: flex; align-items: baseline; gap: 0.85rem;
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(1.55rem, 6.4vw, 1.95rem);
  letter-spacing: -0.01em;
  color: var(--white);
  padding: 0.55rem 0;
  opacity: 0; transform: translateX(22px);
  transition: opacity 0.35s ease, transform 0.45s var(--ease), color 0.15s ease;
}
.mnav__links a span { font-family: var(--font-mono); font-weight: 400; font-size: 0.66rem; color: var(--blue); }
.mnav__links a:hover, .mnav__links a:active { color: var(--blue-bright); }
.mnav.is-open .mnav__links a { opacity: 1; transform: none; }
.mnav.is-open .mnav__links a:nth-child(1) { transition-delay: 0.1s; }
.mnav.is-open .mnav__links a:nth-child(2) { transition-delay: 0.16s; }
.mnav.is-open .mnav__links a:nth-child(3) { transition-delay: 0.22s; }
.mnav.is-open .mnav__links a:nth-child(4) { transition-delay: 0.28s; }
.mnav.is-open .mnav__links a:nth-child(5) { transition-delay: 0.34s; }
.mnav.is-open .mnav__links a:nth-child(6) { transition-delay: 0.4s; }
.mnav__foot {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.mnav__tour {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%;
  padding: 0.85rem;
  background: transparent;
  border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--blue);
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em;
  transition: background 0.15s ease;
}
.mnav__tour:hover { background: var(--blue-soft); }
.mnav__cta { justify-content: center; }
.mnav__meta { font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.8; color: var(--gray-2); }
@media (min-width: 1061px) { .mnav { display: none; } }

/* =============================================================
   KICKER  +  DISPLAY (padrão editorial)
   ============================================================= */
.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
}
.kicker--center { justify-content: center; }
.kicker__sq { width: 9px; height: 9px; background: var(--blue); box-shadow: 0 0 12px var(--blue); flex-shrink: 0; }
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 6.2vw, 5.2rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 7.5rem var(--px) 2.5rem;
  overflow: hidden;
}
.hero__lens {
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 70% at 50% -10%, rgba(91,155,255,0.16), transparent 60%),
    radial-gradient(100% 60% at 50% 120%, rgba(46,98,217,0.18), transparent 60%);
}
.hero__lens::before, .hero__lens::after {
  content: ""; position: absolute; left: -10%; right: -10%;
  height: 60%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.04);
}
.hero__lens::before { top: -32%; }
.hero__lens::after { bottom: -32%; }
.hero__glow {
  position: absolute;
  top: 12%; left: 50%;
  width: 620px; height: 620px;
  max-width: 90vw; max-height: 90vw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(91,155,255,0.32), transparent 62%);
  filter: blur(34px);
  pointer-events: none;
}
.hero__logo3d {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hero__logo3d > * { grid-area: 1 / 1; }
.hero__logo3d-img {
  width: clamp(280px, 40vw, 600px);
  height: auto;
  margin-top: -2vh;
  filter: drop-shadow(0 36px 60px rgba(0,0,0,0.65)) drop-shadow(0 0 70px rgba(91,155,255,0.34));
  will-change: transform, opacity;
  transform-origin: center 55%;
}
.hero__logo3d-ring {
  border-radius: 50%;
  align-self: center; justify-self: center;
}
.hero__logo3d-ring--1 {
  width: clamp(420px, 58vw, 880px);
  height: clamp(420px, 58vw, 880px);
  border: 1px solid rgba(91,155,255,0.13);
  box-shadow: inset 0 0 120px rgba(91,155,255,0.08);
}
.hero__logo3d-ring--2 {
  width: clamp(330px, 46vw, 700px);
  height: clamp(330px, 46vw, 700px);
  border: 1.5px solid transparent;
  border-top-color: rgba(91,155,255,0.7);
  border-right-color: rgba(91,155,255,0.25);
  animation: spin 11s linear infinite;
}

.hero__top {
  position: relative; z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero__meta {
  font-size: 0.8rem;
  color: var(--gray);
  text-align: right;
  line-height: 1.5;
}
.hero__meta-c { display: block; color: var(--blue); font-family: var(--font-mono); margin-bottom: 0.3rem; }
.hero__title {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 13vw, 12rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  margin: auto 0;
}
.hero__title-l1 { display: block; }
.hero__title-l2 { display: block; text-align: right; }
.hero__title .accent {
  background: linear-gradient(120deg, var(--blue-bright), var(--blue-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__bottom {
  position: relative; z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero__ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero__scroll {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-2);
}
.hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(var(--blue), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; background: var(--blue); animation: scroll-dot 1.8s ease-in-out infinite; }
@keyframes scroll-dot { 0% { transform: translateY(-14px); } 100% { transform: translateY(46px); } }

/* =============================================================
   SEÇÃO — base
   ============================================================= */
.sec { position: relative; padding: clamp(5rem, 11vw, 10rem) var(--px); }
.sec-head { max-width: 1280px; margin: 0 auto clamp(2.8rem, 6vw, 5rem); }
.sec-head .kicker { margin-bottom: 1.3rem; }
.sec-lead {
  margin-top: 1.5rem;
  max-width: 46ch;
  color: var(--gray);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.6;
}

/* =============================================================
   O QUE FAZEMOS
   ============================================================= */
.fazemos { border-top: 1px solid var(--line); }
.work {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (min-width: 860px) { .work { grid-template-columns: repeat(2, 1fr); } }
.work__card {
  padding: clamp(1.9rem, 3vw, 2.9rem);
  background: var(--bg);
  transition: background 0.25s ease;
  display: flex; flex-direction: column;
}
.work__card:hover { background: var(--bg-1); }
.work__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; }
.work__num { font-family: var(--font-mono); font-size: 0.82rem; color: var(--blue); }
.work__ic {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--blue);
  font-size: 0.95rem;
}
.work__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
}
.work__desc { color: var(--gray); font-size: 0.95rem; line-height: 1.6; }
.work__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: auto; padding-top: 1.4rem; }
.work__tags li { font-size: 0.72rem; color: var(--gray); border: 1px solid var(--line); border-radius: 5px; padding: 0.2rem 0.55rem; }

/* =============================================================
   SUÍTE
   ============================================================= */
.suite { border-top: 1px solid var(--line); background: var(--bg-1); }
.prods {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 1.4rem;
}
@media (min-width: 820px) { .prods { grid-template-columns: repeat(3, 1fr); } }
.prod {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.22s var(--ease), border-color 0.22s ease, box-shadow 0.22s ease;
}
.prod:hover { transform: translateY(-7px); }
.prod--runner:hover  { border-color: rgba(206,220,0,0.5);  box-shadow: 0 26px 54px -26px rgba(206,220,0,0.4); }
.prod--imobi:hover   { border-color: rgba(91,155,255,0.6); box-shadow: 0 26px 54px -26px rgba(91,155,255,0.6); }
.prod--academy:hover { border-color: rgba(255,46,67,0.5);  box-shadow: 0 26px 54px -26px rgba(255,46,67,0.5); }
.prod__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.prod--runner .prod__screen  { background: radial-gradient(circle at 50% 36%, #1d1f08, #0A0A06 72%); }
.prod--imobi .prod__screen   { background: radial-gradient(circle at 50% 36%, #0d1733, #07080d 72%); }
.prod--academy .prod__screen { background: radial-gradient(circle at 50% 36%, #2a0810, #0A0608 72%); }
.prod__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  border-bottom: 1px solid var(--line);
}
.prod__body { padding: 1.5rem 1.5rem 1.7rem; }
.prod__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.prod__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.prod__live { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: #46D369; }
.prod__live span { width: 7px; height: 7px; border-radius: 50%; background: #46D369; box-shadow: 0 0 8px #46D369; }
.prod__live--new { color: var(--gray); }
.prod__live--new span { background: var(--gray); box-shadow: none; }
.prod__desc { color: var(--gray); font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.1rem; }
/* botão de produto — segue o design system (.btn ghost→solid), tematizado por produto */
.prod--runner  { --prod-c: #CEDC00; --prod-soft: rgba(206,220,0,0.10);  --prod-line: rgba(206,220,0,0.42);  --prod-ink: #14150A; --prod-glow: rgba(206,220,0,0.45); }
.prod--imobi   { --prod-c: #5B9BFF; --prod-soft: rgba(91,155,255,0.10); --prod-line: rgba(91,155,255,0.42); --prod-ink: #06122E; --prod-glow: rgba(91,155,255,0.55); }
.prod--academy { --prod-c: #FF2E43; --prod-soft: rgba(255,46,67,0.10);  --prod-line: rgba(255,46,67,0.42);  --prod-ink: #FFFFFF; --prod-glow: rgba(255,46,67,0.5); }
.prod__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.2rem;
  border-radius: 10px;
  border: 1px solid var(--prod-line);
  background: var(--prod-soft);
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.9rem;
  color: var(--prod-c);
  transition: transform 0.16s var(--ease), background 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.prod__link span { transition: transform 0.18s var(--ease); }
.prod__link:hover {
  background: var(--prod-c);
  border-color: var(--prod-c);
  color: var(--prod-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px var(--prod-glow);
}
.prod__link:hover span { transform: translateX(4px); }
.prod__link:active { transform: scale(0.97); }

/* =============================================================
   PROJETOS
   ============================================================= */
.projetos { border-top: 1px solid var(--line); }
.cases { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 6rem); }
.case {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  align-items: center;
}
@media (min-width: 880px) {
  .case { grid-template-columns: 1.25fr 0.75fr; }
  .case--rev .case__shot { order: 2; }
}
.browser {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9), 0 0 60px -40px rgba(91,155,255,0.5);
}
.browser__bar { display: flex; gap: 0.4rem; padding: 0.7rem 0.9rem; background: var(--bg-3); border-bottom: 1px solid var(--line); }
.browser__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.case__cat { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.case__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  letter-spacing: -0.03em;
  margin: 0.5rem 0 0.7rem;
}
.case__desc { color: var(--gray); font-size: 1rem; line-height: 1.6; }

.cases-grid {
  max-width: 1280px; margin: clamp(3rem, 6vw, 5rem) auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 880px) { .cases-grid { grid-template-columns: repeat(4, 1fr); } }
.mini {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-1);
  transition: transform 0.2s var(--ease), border-color 0.2s ease;
}
.mini:hover { transform: translateY(-5px); border-color: var(--line-2); }
.mini img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.mini__t { display: block; padding: 0.8rem 0.9rem 0.1rem; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.mini__c { display: block; padding: 0 0.9rem 0.85rem; font-size: 0.74rem; color: var(--blue); font-family: var(--font-mono); }

/* =============================================================
   NÚMEROS
   ============================================================= */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--bg); padding: clamp(2.4rem, 5vw, 4rem) 1.5rem; text-align: center; }
.stat__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1;
  background: linear-gradient(180deg, #fff, var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 0.5rem;
}
.stat__l { font-size: 0.88rem; color: var(--gray); }

/* =============================================================
   MARQUEE
   ============================================================= */
.marquee {
  overflow: hidden;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gray-2);
}
/* margem por item (em vez de gap) pra a junção do loop não dar pulo */
.marquee__track span { display: inline-flex; align-items: center; gap: 2.5rem; margin-right: 2.5rem; }
.marquee__track span::after { content: "◆"; color: var(--blue); font-size: 0.5em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =============================================================
   DEPOIMENTOS
   ============================================================= */
.depo { border-top: 1px solid var(--line); overflow: hidden; }
.depo__map {
  position: absolute; z-index: 0; inset: 0;
  background-image: radial-gradient(rgba(91,155,255,0.16) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 48%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 48%, #000 10%, transparent 72%);
  opacity: 0.5;
}
.depo > *:not(.depo__map) { position: relative; z-index: 1; }
.depo__rows {
  display: flex; flex-direction: column; gap: 1rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.depo__row {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
/* espaçamento por card (em vez de gap) pra a junção do loop não dar pulo */
.depo__row > * { margin-right: 1rem; }
.depo__row--rev { animation-direction: reverse; }
.quote {
  flex: 0 0 clamp(300px, 38vw, 440px);
  min-height: 200px;
  display: flex; flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.6rem 1.6rem 1.3rem;
}
.quote blockquote {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--white);
  margin-bottom: 1.2rem;
}
.quote figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.quote__av {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-soft);
  border: 1px solid var(--line-2);
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.quote__av img { width: 100%; height: 100%; object-fit: cover; }
.quote figcaption span { display: flex; flex-direction: column; font-size: 0.82rem; color: var(--gray); }
.quote figcaption strong { color: var(--white); font-size: 0.9rem; }
/* mobile: cards menores pra caber bem na tela */
@media (max-width: 560px) {
  .quote {
    flex-basis: clamp(228px, 74vw, 282px);
    min-height: 172px;
    padding: 1.35rem 1.35rem 1.15rem;
  }
  .quote blockquote { font-size: 0.94rem; margin-bottom: 1rem; }
}

/* =============================================================
   FAQ
   ============================================================= */
.faq { border-top: 1px solid var(--line); }
.faq__list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.7rem; }
.faq__item {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq__item[open] { border-color: var(--line-2); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.6rem; font-weight: 300; color: var(--blue); transition: transform 0.2s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 1.5rem 1.4rem; color: var(--gray); line-height: 1.65; }

/* =============================================================
   CONTATO
   ============================================================= */
.contato { border-top: 1px solid var(--line); text-align: center; overflow-x: clip; }
/* glow centrado na emenda depoimentos↔contato: metade sobe pra seção de cima */
.contato__glow {
  position: absolute; z-index: 0; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 660px; max-width: 130vw;
  background: radial-gradient(ellipse, rgba(91,155,255,0.22), transparent 66%);
  pointer-events: none;
}
.contato > *:not(.contato__glow) { position: relative; z-index: 1; }
.contato .kicker { margin-bottom: 1.5rem; }
.contato__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 1.3rem;
}
.contato__sub { max-width: 52ch; margin: 0 auto 2.6rem; color: var(--gray); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.6; }
.contato__channels { display: grid; grid-template-columns: 1fr; gap: 0.9rem; max-width: 720px; margin: 0 auto; }
@media (min-width: 560px) { .contato__channels { grid-template-columns: 1fr 1fr; } }
/* canais de contato — mesmo formato do contato do tour (.jx-contact) */
.chan {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem;
  padding: 1.5rem 1.3rem;
  border: 1px solid var(--blue); background: var(--blue-soft);
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.chan:hover { transform: translateY(-3px); }
.chan svg { width: 32px; height: 32px; margin-bottom: 0.45rem; }
.chan__t { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.chan__v { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.chan--wa { border-color: rgba(37, 211, 102, 0.6); background: rgba(37, 211, 102, 0.08); }
.chan--wa svg { color: #25D366; }
.chan--wa:hover { box-shadow: 0 10px 34px rgba(37, 211, 102, 0.22); }
.chan--ig { border-color: rgba(228, 64, 95, 0.6); background: rgba(228, 64, 95, 0.08); }
.chan--ig svg { color: #E4405F; }
.chan--ig:hover { box-shadow: 0 10px 34px rgba(228, 64, 95, 0.22); }

/* =============================================================
   FOOTER
   ============================================================= */
.ft { border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 5rem) var(--px) 2.2rem; overflow: hidden; }
.ft__mega {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 21vw, 19rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), transparent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: -0.1em;
  user-select: none;
}
.ft__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .ft__inner { grid-template-columns: 2fr 1fr 1fr; } }
.ft__logo { height: 26px; width: auto; margin-bottom: 0.9rem; }
.ft__tag { font-size: 0.88rem; color: var(--gray-2); max-width: 38ch; line-height: 1.55; }
.ft__col-t { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-2); margin-bottom: 0.9rem; }
.ft__nav { display: flex; flex-direction: column; gap: 0.55rem; }
.ft__nav a { font-size: 0.9rem; color: var(--gray); transition: color 0.15s ease; }
.ft__nav a:hover { color: var(--blue); }
.ft__addr { font-size: 0.9rem; color: var(--gray-2); }
.ft__legal { max-width: 1280px; margin: 2.4rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--gray-2); }

/* =============================================================
   REVEAL  +  MOTION
   ============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(64px) scale(0.955);
  filter: blur(9px);
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease), filter 0.85s ease;
  will-change: opacity, transform, filter;
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.sec-head {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(7px);
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease), filter 0.85s ease;
}
.sec-head.is-in { opacity: 1; transform: none; filter: none; }

/* mockup de browser entra inclinado e endireita */
.case .browser {
  transition: transform 1.2s var(--ease) 0.08s, box-shadow 1.2s var(--ease);
  transform: perspective(1300px) rotateX(15deg) scale(0.93);
}
.case.is-in .browser { transform: perspective(1300px) rotateX(0deg) scale(1); }

/* =============================================================
   PÁGINAS INTERNAS — cabeçalho
   ============================================================= */
.phero {
  position: relative;
  padding: 11rem var(--px) clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.phero__glow {
  position: absolute; top: -25%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 600px; max-width: 130vw;
  background: radial-gradient(ellipse, rgba(91,155,255,0.2), transparent 66%);
  pointer-events: none;
}
.phero__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
.phero .kicker { margin-bottom: 1.4rem; }
.phero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.phero__title .accent {
  background: linear-gradient(120deg, var(--blue-bright), var(--blue-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.phero__lead {
  margin-top: 1.6rem;
  max-width: 54ch;
  color: var(--gray);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.62;
}

/* prosa */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { color: var(--gray); font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.7; margin-bottom: 1.3rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--white); }

/* serviços — detalhe */
.svc { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; }
.svc__row {
  display: grid; grid-template-columns: 1fr; gap: 1.6rem;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.svc__row:first-child { padding-top: 0; }
.svc__row:last-child { border-bottom: 0; }
@media (min-width: 860px) { .svc__row { grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; } }
.svc__num { font-family: var(--font-mono); color: var(--blue); font-size: 0.85rem; }
.svc__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  letter-spacing: -0.03em;
  margin: 0.5rem 0 0;
}
.svc__desc { color: var(--gray); font-size: 1.04rem; line-height: 1.65; margin-bottom: 1.4rem; }
.svc__list { display: grid; grid-template-columns: 1fr; gap: 0.65rem; }
@media (min-width: 560px) { .svc__list { grid-template-columns: 1fr 1fr; } }
.svc__list li { position: relative; padding-left: 1.5rem; font-size: 0.94rem; color: #D7D9DF; line-height: 1.45; }
.svc__list li::before { content: "▹"; position: absolute; left: 0; color: var(--blue); }

/* preços — planos */
.plans { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 880px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2.1rem 1.9rem;
  display: flex; flex-direction: column;
  transition: transform 0.2s var(--ease), border-color 0.2s ease;
}
.plan:hover { transform: translateY(-5px); border-color: var(--line-2); }
.plan--feature { border-color: var(--blue); background: linear-gradient(180deg, var(--blue-soft), var(--bg-1)); }
.plan__tag { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.plan__name { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; margin: 0.55rem 0 0.35rem; }
.plan__price { font-size: 0.92rem; color: var(--gray); margin-bottom: 1.4rem; }
.plan__price b { display: block; color: var(--white); font-family: var(--font-display); font-size: 1.7rem; margin-bottom: 0.1rem; }
.plan__list { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.7rem; }
.plan__list li { position: relative; padding-left: 1.6rem; font-size: 0.92rem; color: var(--gray); line-height: 1.45; }
.plan__list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.plan .btn { margin-top: auto; }

/* processo */
.proc { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .proc { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .proc { grid-template-columns: repeat(4, 1fr); } }
.proc__step { background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 1.9rem 1.6rem; }
.proc__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.7rem; line-height: 1;
  background: linear-gradient(180deg, #fff, var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proc__t { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin: 0.9rem 0 0.45rem; }
.proc__d { font-size: 0.9rem; color: var(--gray); line-height: 1.55; }

/* mvv */
.mvv { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 820px) { .mvv { grid-template-columns: repeat(3, 1fr); } }
.mvv__card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--blue);
  border-radius: 0 14px 14px 0;
  padding: 1.8rem 1.7rem;
}
.mvv__t { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.6rem; }
.mvv__d { color: var(--gray); font-size: 0.96rem; line-height: 1.6; }

.sec-foot { max-width: 1280px; margin: 0 auto; text-align: center; }
.sec-foot .btn { margin-top: clamp(2rem, 4vw, 3rem); }

/* "+ e muito mais" — fecho da lista de serviços */
.work__more {
  margin-top: clamp(1.6rem, 3.5vw, 2.6rem);
  color: var(--gray);
  font-size: clamp(0.92rem, 1.4vw, 1rem);
}
.work__more span { color: var(--blue); font-weight: 700; margin-right: 0.3rem; }

/* CTA destacado da seção de serviços */
.cta-line {
  display: inline-flex; align-items: center; gap: 0.85rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding: 0.95rem 1.5rem 0.95rem 1.25rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--white);
  background: linear-gradient(135deg, rgba(46, 98, 217, 0.20), rgba(91, 155, 255, 0.10));
  border: 1px solid var(--line-2);
  box-shadow: 0 16px 42px -18px rgba(46, 98, 217, 0.7);
  transition: transform 0.18s var(--ease), box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.cta-line strong { color: var(--blue-bright); font-weight: 700; }
.cta-line__dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue); box-shadow: 0 0 10px var(--blue);
  animation: pulse 1.5s ease infinite;
}
.cta-line__arrow { color: var(--blue-bright); font-size: 1.15em; transition: transform 0.2s var(--ease); }
.cta-line:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  background: linear-gradient(135deg, rgba(46, 98, 217, 0.30), rgba(91, 155, 255, 0.16));
  box-shadow: 0 24px 54px -18px rgba(91, 155, 255, 0.85);
}
.cta-line:hover .cta-line__arrow { transform: translateX(5px); }

/* =============================================================
   WHATSAPP — caixa de contato flutuante
   ============================================================= */
.wa-box {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 690;
}
/* esconde durante o tour JARVIS */
body.jx-on .wa-box { opacity: 0; visibility: hidden; pointer-events: none; }

/* --- FAB (estado fechado) --- */
.wa-box__fab {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.2rem 0.7rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 0 12px 32px -12px rgba(46, 98, 217, 0.8);
  transition: transform 0.2s var(--ease), box-shadow 0.28s ease, background 0.2s ease, opacity 0.2s ease;
}
.wa-box__fab:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  box-shadow: 0 18px 44px -12px rgba(91, 155, 255, 0.9);
}
.wa-box__fab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
}
.wa-box__fab-icon svg { width: 21px; height: 21px; display: block; }
.wa-box.is-open .wa-box__fab { opacity: 0; pointer-events: none; transform: scale(0.85); }

/* --- PAINEL (estado aberto) --- */
.wa-box__panel {
  position: absolute; bottom: 0; right: 0;
  width: min(372px, calc(100vw - 3rem));
  display: flex; flex-direction: column;
  padding: 1.4rem;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(46, 98, 217, 0.14), transparent 60%),
    var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: 0 24px 64px -20px rgba(0,0,0,0.85), 0 0 40px -14px rgba(91,155,255,0.3);
  transform-origin: bottom right;
  opacity: 0; transform: scale(0.92) translateY(10px);
  transition: opacity 0.28s var(--ease), transform 0.32s var(--ease);
}
.wa-box__panel[hidden] { display: none; }
.wa-box.is-open .wa-box__panel { opacity: 1; transform: scale(1) translateY(0); }

.wa-box__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
.wa-box__head .kicker { margin: 0; }
.wa-box__close {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--gray); cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.wa-box__close svg { width: 15px; height: 15px; }
.wa-box__close:hover { color: var(--white); border-color: var(--blue); background: var(--blue-soft); }

.wa-box__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--white); margin-bottom: 0.45rem;
}
.wa-box__sub { color: var(--gray); font-size: 0.9rem; line-height: 1.55; margin-bottom: 1.1rem; }

.wa-box__field { display: block; margin-bottom: 0.9rem; }
.wa-box__field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.8rem 0.9rem;
  color: var(--white);
  font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5;
  resize: vertical; min-height: 92px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.wa-box__field textarea::placeholder { color: var(--gray-2); }
.wa-box__field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

.wa-box__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.wa-box__counter { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--gray-2); font-variant-numeric: tabular-nums; }
.wa-box__counter.is-near { color: #f5b14c; }
.wa-box__counter.is-full { color: #ff6b6b; }
.wa-box__submit { flex-shrink: 0; }

/* =============================================================
   JARVIS — interface takeover
   ============================================================= */
body.jx-on main, body.jx-on .nav, body.jx-on .ft {
  transition: transform 0.7s var(--ease), filter 0.7s ease;
  transform: scale(0.94);
  filter: blur(6px) brightness(0.4);
}
.jx {
  position: fixed; inset: 0;
  z-index: 800;
  user-select: none; -webkit-user-select: none; /* HUD não é texto selecionável */
  background:
    radial-gradient(ellipse 70% 60% at 50% 24%, rgba(91, 155, 255, 0.045), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #070a10, #020308 80%);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(1rem, 3vw, 2.2rem);
  opacity: 0; visibility: hidden;
  transform: scale(1.25); filter: blur(20px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease), filter 0.5s ease, visibility 0.5s;
}
.jx.is-on { opacity: 1; visibility: visible; transform: scale(1); filter: blur(0); }
.jx__ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.jx__space { position: absolute; inset: 0; width: 100%; height: 100%; }
.jx__hud {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em;
  color: rgba(91, 155, 255, 0.55);
}
.jx__hud-col { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.55rem; }
.jx__hud-col--l { left: 1.4rem; }
.jx__hud-col--r { right: 1.4rem; text-align: right; }
.jx__hud-col span { white-space: nowrap; }
.jx__hud-col span:first-child { color: var(--blue); }
@media (max-width: 900px) { .jx__hud { display: none; } }
.jx__vignette { position: absolute; inset: 0; box-shadow: inset 0 0 220px rgba(0,0,0,0.9); }
.jx__brk { position: absolute; width: 38px; height: 38px; border: 1.5px solid var(--blue); opacity: 0.5; }
.jx__brk--tl { top: 1rem; left: 1rem; border-right: 0; border-bottom: 0; }
.jx__brk--tr { top: 1rem; right: 1rem; border-left: 0; border-bottom: 0; }
.jx__brk--bl { bottom: 1rem; left: 1rem; border-right: 0; border-top: 0; }
.jx__brk--br { bottom: 1rem; right: 1rem; border-left: 0; border-top: 0; }

/* ===== Alerta "fora da zona de navegação" =====
   Em vez de travar o pan, a cabine pisca em vermelho e uma seta aponta o
   caminho de volta aos planetas. Abaixo dos botões (z6) e sem bloquear cliques. */
.jx__warn {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.jx.is-warn .jx__warn { opacity: 1; visibility: visible; }
/* brilho vermelho pulsante nas bordas (luz de alerta da cabine) */
.jx__warn-glow {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 100px 6px rgba(255, 56, 56, 0.5);
  animation: jxWarnPulse 0.85s ease-in-out infinite;
}
@keyframes jxWarnPulse { 0%, 100% { opacity: 0.32; } 50% { opacity: 1; } }
/* cartão central (full-width pra centralizar sem transform e deixar o bounce livre) */
.jx__warn-card {
  position: absolute; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  text-align: center; font-family: var(--font-body); color: #fff;
}
/* posicionados na faixa central livre (entre a fala e a navpad): "up" um pouco
   acima, "down" um pouco abaixo — direcional, sem cobrir o assistente nem os botões */
.jx.is-warn--up .jx__warn-card { top: 36%; animation: jxWarnBobUp 0.7s ease-in-out infinite; }
.jx.is-warn--down .jx__warn-card { bottom: 30%; animation: jxWarnBobDown 0.7s ease-in-out infinite; }
@keyframes jxWarnBobUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes jxWarnBobDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.jx__warn-arrow {
  width: 46px; height: 46px; color: #ff5b5b;
  filter: drop-shadow(0 0 10px rgba(255, 70, 70, 0.85));
}
.jx.is-warn--down .jx__warn-arrow { transform: rotate(180deg); }
.jx__warn-text b { display: block; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; color: #fff; text-shadow: 0 0 14px rgba(255, 60, 60, 0.8); }
.jx__warn-text small { display: block; margin-top: 2px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 560px) {
  .jx__warn-arrow { width: 40px; height: 40px; }
  .jx__warn-text b { font-size: 0.9rem; }
  .jx__warn-text small { font-size: 0.72rem; }
}

/* Piloto automático: ancorado no canto inferior-esquerdo (o botão de destaque). */
.jx__dock {
  position: absolute; z-index: 5;
  bottom: clamp(1.1rem, 3vw, 2rem);
  left: clamp(1.1rem, 3vw, 2rem);
  display: flex; flex-direction: column; align-items: stretch;
  width: min(324px, 82vw);
}

/* Barra superior: Guia numa ponta, Encerrar na outra — mesma linha.
   pointer-events só nos botões pra não bloquear os planetas atrás. */
.jx__topbar {
  position: absolute; z-index: 6;
  top: clamp(1.1rem, 3vw, 2rem);
  left: clamp(1.1rem, 3vw, 2rem);
  right: clamp(1.1rem, 3vw, 2rem);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.jx__topbar > * { pointer-events: auto; }

/* Guia e Encerrar: mesmo padrão ghost dos botões do site (.btn--ghost) */
.jx__tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.86rem;
  color: var(--white);
  border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.jx__tool-btn svg { width: 15px; height: 15px; }
.jx__tool-btn:hover { color: var(--blue-bright); border-color: var(--blue); background: var(--blue-soft); transform: translateY(-2px); }
.jx__tool-btn:active { transform: scale(0.97); }

/* Piloto automático — cartão claro: ícone, título, o que faz, e LED de estado */
.jx__auto {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem;
  text-align: left;
  font-family: var(--font-body);
  color: var(--white);
  border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 0.68rem 0.8rem;
  cursor: pointer;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  animation: jxAutoHint 3.6s ease-in-out infinite;
  transition: border-color 0.16s ease, box-shadow 0.18s ease, background 0.16s ease, transform 0.16s ease;
}
.jx__auto:hover { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-2px); }
.jx__auto:active { transform: scale(0.98); }
.jx__auto-icon {
  display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0;
  border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--blue); background: rgba(91, 155, 255, 0.08);
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.jx__auto-icon svg { width: 21px; height: 21px; }
.jx__auto-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jx__auto-title { font-size: 0.9rem; font-weight: 600; color: #fff; }
.jx__auto-state { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; line-height: 1.35; color: var(--gray-2); }
.jx__auto-led {
  width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%;
  background: var(--line-2);
  transition: background 0.18s, box-shadow 0.18s;
}

/* LIGADO — botão sólido (mesma linguagem do .btn--solid do site) + LED verde */
.jx__auto[aria-pressed="true"] {
  animation: none;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  box-shadow: 0 14px 34px -12px rgba(46, 98, 217, 0.9), 0 0 22px rgba(91, 155, 255, 0.28);
}
.jx__auto[aria-pressed="true"]:hover { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%); border-color: transparent; }
.jx__auto[aria-pressed="true"] .jx__auto-state { color: rgba(255, 255, 255, 0.85); }
.jx__auto[aria-pressed="true"] .jx__auto-icon { color: #061226; background: #fff; border-color: transparent; box-shadow: 0 0 16px rgba(255, 255, 255, 0.4); }
.jx__auto[aria-pressed="true"] .jx__auto-led { background: #46D369; box-shadow: 0 0 10px #46D369; animation: pulse 1.6s ease infinite; }

/* respiro sutil pra atrair o olhar enquanto o piloto está desligado */
@keyframes jxAutoHint {
  0%, 100% { box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(91, 155, 255, 0); }
  50% { box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(91, 155, 255, 0.2), 0 0 0 1px rgba(91, 155, 255, 0.24); }
}
/* botão de esconder/mostrar o piloto — só aparece no mobile (ver media query) */
.jx__dock-toggle { display: none; }
.jx__dock-ic--show { display: none; }
/* MOBILE: Guia numa ponta e Encerrar na outra, na mesma linha (topo), o
   visual do assistente desce um pouco pra liberar o topo, e o Piloto vira
   um card centralizado embaixo com um botão de olho ao lado pra esconder/mostrar. */
@media (max-width: 700px) {
  .jx__brk { width: 18px; height: 18px; }

  /* barra superior recolhida pra dentro da moldura (abaixo dos colchetes) */
  .jx__topbar {
    top: calc(2.5rem + env(safe-area-inset-top, 0px));
    left: max(0.85rem, env(safe-area-inset-left, 0px));
    right: max(0.85rem, env(safe-area-inset-right, 0px));
  }
  .jx__tool-btn { gap: 0.4rem; padding: 0.46rem 0.82rem; font-size: 0.7rem; }
  .jx__tool-btn svg { width: 13px; height: 13px; }

  /* assistente levemente mais pra baixo (vence a regra-base por especificidade) */
  .jx .jx__head { margin-top: calc(3.6rem + env(safe-area-inset-top, 0px)); }

  /* Piloto: card centralizado embaixo + botão de olho ao lado */
  .jx__dock {
    left: 50%; right: auto; transform: translateX(-50%);
    flex-direction: row; align-items: center; gap: 0.5rem;
    width: auto; max-width: 94vw;
    bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px));
  }
  .jx__auto { width: min(74vw, 300px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }

  .jx__dock-toggle {
    display: grid; place-items: center;
    width: 46px; height: 46px; flex-shrink: 0;
    border: 1px solid var(--line-2); border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--gray); cursor: pointer;
    transition: transform 0.16s ease, color 0.16s, border-color 0.16s, background 0.16s;
  }
  .jx__dock-toggle:hover { color: var(--blue-bright); border-color: var(--blue); background: var(--blue-soft); transform: translateY(-2px); }
  .jx__dock-toggle:active { transform: scale(0.95); }
  .jx__dock-toggle svg { width: 20px; height: 20px; }

  /* colapsado: some o card, sobra só o olho centralizado (troca o ícone) */
  .jx__dock.is-collapsed .jx__auto { display: none; }
  .jx__dock.is-collapsed .jx__dock-ic--hide { display: none; }
  .jx__dock.is-collapsed .jx__dock-ic--show { display: block; }

  /* setas de "olhar ao redor" sobem acima do card */
  .jx.is-pan .jx__navpad { bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); }

  /* o conteúdo do planeta rola só até acima do card do piloto (não passa por baixo) */
  .jx__stage.is-scroll { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .jx__auto { padding: 0.58rem 0.7rem; gap: 0.58rem; }
  .jx__auto-icon { width: 33px; height: 33px; }
  .jx__auto-icon svg { width: 20px; height: 20px; }
  .jx__auto-title { font-size: 0.84rem; }
  .jx__auto-state { font-size: 0.62rem; }

  /* conteúdo de cada planeta (dossiê) menor no mobile */
  .jx__speech { font-size: 0.98rem; min-height: 3.4em; margin: 0.7rem auto 0.6rem; }
  .jx-prompt { font-size: 0.7rem; margin-bottom: 0.8rem; }
  .jx-doss__head { margin-bottom: 0.8rem; gap: 0.55rem; }
  .jx-doss__tag, .jx-doss__step { font-size: 0.66rem; }
  .jx-cards { gap: 0.55rem; }
  .jx-card { padding: 0.85rem 0.9rem; border-radius: 10px; }
  .jx-card__k { font-size: 0.64rem; }
  .jx-card__t { font-size: 0.98rem; margin: 0.25rem 0 0.3rem; }
  .jx-card__d { font-size: 0.8rem; line-height: 1.45; }
  .jx-card__link { font-size: 0.78rem; margin-top: 0.55rem; }
  .jx-stat { padding: 0.8rem 0.95rem; gap: 0.8rem; margin-bottom: 0.65rem; }
  .jx-stat b { font-size: 1.7rem; }
  .jx-stat strong { font-size: 0.86rem; }
  .jx-stat span { font-size: 0.74rem; }
  .jx-logos span { height: 58px; padding: 0.6rem; }
  .jx-logos img { max-height: 34px; }
  .jx-shots { gap: 0.55rem; }
  .jx-shot span { font-size: 0.78rem; }
  .jx-shot small { font-size: 0.68rem; }
  .jx-contact a { padding: 1.05rem 1rem; }
  .jx-contact a svg { width: 26px; height: 26px; margin-bottom: 0.35rem; }
  .jx-contact a span:first-of-type { font-size: 0.68rem; }
  .jx-contact a span:last-of-type { font-size: 1rem; }
  .jx-more { font-size: 0.72rem; margin-top: 0.8rem; padding-top: 0.7rem; }
  .jx-doss__nav { margin-top: 1rem; gap: 0.5rem; }
}
.jx__head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-top: clamp(0.5rem, 2vw, 1.4rem); flex-shrink: 0; }
.jx__core { position: relative; width: clamp(96px, 12vw, 128px); aspect-ratio: 1; }
.jx__core-ring, .jx__core-seg, .jx__core-sweep, .jx__core-orb { position: absolute; border-radius: 50%; }
.jx__core-ring { inset: 0; border: 1px solid rgba(91,155,255,0.22); }
.jx__core-ring--1 { box-shadow: 0 0 50px rgba(91,155,255,0.25), inset 0 0 40px rgba(91,155,255,0.14); }
/* anel tracejado via conic-gradient mascarado num aro fino — os traços ficam
   distribuídos por igual (o border:dashed do CSS rendia traços tortos, pior no
   celular). 30 traços de 6° espaçados, recortados nos 2px externos. */
.jx__core-ring--2 {
  inset: 16%; border: 0;
  background: repeating-conic-gradient(rgba(91,155,255,0.55) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: spin 26s linear infinite;
}
.jx__core-ring--3 { inset: 33%; border-color: rgba(91,155,255,0.5); }
.jx__core-seg { inset: 5%; border: 1.5px solid transparent; border-top-color: var(--blue); border-right-color: var(--blue); animation: spin 6s linear infinite; }
.jx__core-seg--b { inset: 22%; border: 1.5px solid transparent; border-bottom-color: var(--blue-bright); border-left-color: var(--blue-bright); animation: spin 4s linear infinite reverse; }
.jx__core-sweep { inset: 0; background: conic-gradient(from 0deg, transparent 0deg, rgba(91,155,255,0.26) 46deg, transparent 90deg); animation: spin 3.4s linear infinite; }
.jx__core-orb { inset: 41%; background: radial-gradient(circle, #fff, var(--blue) 48%, var(--blue-deep)); box-shadow: 0 0 30px var(--blue), 0 0 70px rgba(91,155,255,0.6); animation: pulse 2.6s ease infinite; }
.jx.is-speaking .jx__core-orb { animation: pulse 0.5s ease infinite; }
/* equalizer: asas simétricas ladeando o núcleo (alturas via JS, scaleY) */
.jx__head-row { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 32px); }
.jx__wave { display: flex; align-items: center; gap: 4px; height: 34px; opacity: 0.45; transition: opacity 0.35s ease; }
.jx.is-speaking .jx__wave { opacity: 1; }
.jx__wave i {
  width: 3px; height: 30px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(165, 208, 255, 0.95), var(--blue) 55%, rgba(44, 85, 192, 0.85));
  box-shadow: 0 0 10px rgba(91, 155, 255, 0.3);
  transform: scaleY(0.1);
  will-change: transform;
}
.jx.is-speaking .jx__wave i { box-shadow: 0 0 14px rgba(91, 155, 255, 0.55); }
@media (max-width: 700px) {
  .jx__wave { gap: 3px; height: 26px; }
  .jx__wave i { width: 2.5px; height: 24px; }
}
.jx__id { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--gray); display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.45rem; }
.jx__id-dot { width: 7px; height: 7px; border-radius: 50%; background: #46D369; box-shadow: 0 0 8px #46D369; animation: pulse 1.6s ease infinite; }
.jx__id-state { color: #46D369; }
.jx__speech {
  position: relative; z-index: 2;
  flex-shrink: 0;
  max-width: 680px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  line-height: 1.42;
  color: var(--white);
  margin: clamp(1rem, 2.6vw, 1.7rem) auto clamp(0.9rem, 2.2vw, 1.5rem);
  min-height: 4.3em;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 2px 20px rgba(0,0,0,0.7);
}
/* bloco único do texto digitado: o flex centraliza ele, e o cursor flui
   inline logo após a última letra (em vez de virar outro item do flex) */
.jx__speech-line { display: block; width: 100%; }
.jx-cursor { display: inline-block; width: 9px; height: 1.05em; background: var(--blue); margin-left: 2px; vertical-align: -2px; animation: pulse 1s steps(2) infinite; }
.jx__stage {
  position: relative; z-index: 2;
  width: 100%; max-width: 940px; flex: 1;
  min-height: 0;
  overflow: visible; /* o mapa estelar respira além da moldura (sem cortes) */
  display: flex; flex-direction: column;
}
.jx__stage.is-scroll { overflow-y: auto; scrollbar-width: none; } /* só o dossiê rola */
.jx__stage::-webkit-scrollbar { display: none; }
/* o mapa ocupa exatamente o espaço que sobra — nada de scroll */
.jx-view--map { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jx-view--map .jx-doss { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0.4rem; }
.jx-prompt { text-align: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.1rem; }

/* --- Mapa de destinos: sistema estelar com profundidade real --- */
.jx__nebula {
  position: absolute; inset: -12%;
  background:
    radial-gradient(36% 30% at 22% 26%, rgba(46, 98, 217, 0.08), transparent 70%),
    radial-gradient(28% 24% at 80% 66%, rgba(122, 80, 255, 0.05), transparent 70%),
    radial-gradient(50% 42% at 58% 14%, rgba(80, 210, 235, 0.028), transparent 70%);
  filter: blur(34px);
}
.jx__flash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(170, 205, 255, 0.5), rgba(91, 155, 255, 0.16) 36%, transparent 70%);
  opacity: 0;
}
.jx.is-flash .jx__flash { animation: jx-flash 0.55s ease; }
@keyframes jx-flash { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }
/* horizonte do planeta orbitado — a curva aparece por baixo do conteúdo */
.jx__limb {
  position: absolute;
  left: 50%; top: 100%;
  width: 220vmax; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 12%, var(--l1, #a8c8ff) 0%, var(--l2, #2c55c0) 18%, #05070d 48%);
  box-shadow: 0 -30px 160px var(--lg, rgba(91, 155, 255, 0.5));
  transform: translate(-50%, 0);
  opacity: 0;
  transition: transform 1.2s var(--ease), opacity 0.9s ease;
  pointer-events: none;
}
.jx__limb::before {
  /* linha de atmosfera acompanhando a curva */
  content: ""; position: absolute; inset: -0.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 11%, var(--lg, rgba(91, 155, 255, 0.5)) 0%, transparent 16%);
  filter: blur(16px);
}
.jx.is-orbit .jx__limb { opacity: 1; transform: translate(-50%, -10vh); }
/* o mapa é o espaço inteiro: planetas espalhados pelo viewport,
   só eles recebem clique (o resto da UI continua acessível) */
.jx-map { position: fixed; inset: 0; pointer-events: none; }
/* o corpo celeste é desenhado no canvas — o botão é só a área de clique */
.jx-planet {
  position: absolute; left: 0; top: 0;
  width: 64px; height: 64px;
  pointer-events: auto;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}
.jx.is-flying .jx-planet { pointer-events: none; }
/* tutorial: planetas visíveis mas sem clique até o fim da explicação */
.jx.is-tutorial .jx-planet { pointer-events: none; cursor: default; }
.jx-planet.is-in { opacity: 1; }
/* navpad: cruz direcional no centro inferior — segura pra girar a vista */
.jx__navpad {
  position: absolute; bottom: 1.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(2, 44px);
  gap: 6px;
  grid-template-areas:
    ". u ."
    "l d r";
}
.jx.is-pan .jx__navpad { display: grid; }
.jx.is-flying .jx__navpad { opacity: 0.3; pointer-events: none; }
.jx__navpad button {
  display: grid; place-items: center;
  background: rgba(10, 14, 24, 0.72);
  border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--blue);
  cursor: pointer;
  touch-action: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.jx__navpad button svg { width: 20px; height: 20px; pointer-events: none; }
.jx__navpad button:hover { background: var(--blue-soft); border-color: var(--blue); }
.jx__navpad button.is-hold { background: var(--blue); border-color: var(--blue); color: #061226; }
.jx__navpad [data-pan="u"] { grid-area: u; }
.jx__navpad [data-pan="l"] { grid-area: l; }
.jx__navpad [data-pan="d"] { grid-area: d; }
.jx__navpad [data-pan="r"] { grid-area: r; }
.jx.is-dragging .jx-planet { pointer-events: none; }
/* marcador de borda: destino fora da vista — vire a câmera até ele */
.jx-planet__edge {
  display: none;
  align-items: center; gap: 0.45rem;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  white-space: nowrap; text-transform: uppercase;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--pg); border-radius: 8px;
  background: rgba(5, 6, 10, 0.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: jx-edge-pulse 2.2s ease-in-out infinite;
}
.jx-planet__edge i { font-style: normal; color: var(--blue); }
.jx-planet__edge em { font-style: normal; color: var(--white); }
.jx-planet__edge::after { content: "▸"; color: var(--blue); }
.jx-planet.is-edge-l .jx-planet__edge { flex-direction: row-reverse; }
.jx-planet.is-edge-l .jx-planet__edge::after { content: "◂"; }
.jx-planet.is-edge .jx-planet__edge { display: inline-flex; }
.jx-planet.is-edge .jx-planet__callout { display: none; }
@keyframes jx-edge-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
/* linha-guia + etiqueta, estilo waypoint de jogo
   (ancorada pela borda projetada do planeta via --r; o texto NÃO escala
   com a distância — fica legível como um HUD de verdade) */
.jx-planet__callout {
  position: absolute;
  left: calc(50% + var(--r, 40px) * 0.74);
  bottom: calc(50% + var(--r, 40px) * 0.58);
  display: flex; align-items: flex-end;
  pointer-events: none;
  text-align: left;
  transition: opacity 0.25s ease;
}
.jx.is-flying .jx-planet__callout { opacity: 0; }
.jx-planet__lead { width: 52px; height: 30px; flex-shrink: 0; }
.jx-planet__lead path {
  fill: none; stroke: var(--pg); stroke-width: 1.2;
  stroke-dasharray: 96; stroke-dashoffset: 96;
  animation: jx-lead 0.55s ease forwards;
  animation-delay: calc(var(--d, 0s) + 0.5s);
}
@keyframes jx-lead { to { stroke-dashoffset: 0; } }
.jx-planet__label {
  display: block;
  margin: 0 0 24px 6px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  color: var(--white); white-space: nowrap; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  opacity: 0;
  animation: jx-label 0.4s ease forwards;
  animation-delay: calc(var(--d, 0s) + 0.85s);
}
@keyframes jx-label { to { opacity: 1; } }
.jx-planet__label i { font-style: normal; color: var(--blue); }
.jx-planet:hover .jx-planet__label { color: var(--blue-bright); }
.jx-planet.is-visited .jx-planet__label::after { content: " ✓"; color: #46D369; }
/* callout espelhado pros mundos da borda direita */
.jx-planet--flip .jx-planet__callout { left: auto; right: calc(50% + var(--r, 40px) * 0.74); flex-direction: row-reverse; }
.jx-planet--flip .jx-planet__lead { transform: scaleX(-1); }
.jx-planet--flip .jx-planet__label { margin: 0 6px 24px 0; text-align: right; }

/* identidade de cada mundo — posição/escala vêm da projeção em JS;
   --ps é o tamanho-base no mundo (o JS multiplica pela distância) */
/* cor da linha-guia e atraso de entrada de cada destino
   (a luz em si é desenhada no canvas, com as mesmas cores) */
.jx-planet--1 { --pg: rgba(134, 178, 255, 0.6); --d: 0.1s; }
.jx-planet--2 { --pg: rgba(120, 226, 242, 0.55); --d: 0.3s; }
.jx-planet--3 { --pg: rgba(188, 156, 255, 0.55); --d: 0.5s; }
.jx-planet--4 { --pg: rgba(255, 198, 124, 0.55); --d: 0.7s; }
.jx-planet--5 { --pg: rgba(118, 238, 170, 0.6); --d: 0.9s; }
/* rótulo curto x completo (o JS gera os dois; aqui escolhemos por tela) */
.jx-pl-short { display: none; }
@media (max-width: 700px) {
  .jx-planet__lead { width: 30px; height: 22px; }
  /* no mobile o título completo ocupava muito — mostra só a categoria (tag) */
  .jx-pl-full { display: none; }
  .jx-pl-short { display: inline; }
  .jx-planet__label { font-size: 0.64rem; letter-spacing: 0.08em; margin-bottom: 18px; }
  .jx-planet__edge { font-size: 0.58rem; padding: 0.34rem 0.5rem; gap: 0.32rem; }
}
/* nave de outro usuário cruzando o setor — flyby ocasional do modo navegação.
   Corpo desenhado no canvas; aqui é só o callout, no mesmo estilo dos planetas */
.jx-ship { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.jx-ship__callout {
  position: absolute;
  left: calc(var(--r, 14px) * 0.9);
  bottom: calc(var(--r, 14px) * 0.7);
  display: flex; align-items: flex-end;
  pointer-events: none;
  text-align: left;
  transition: opacity 0.25s ease;
}
.jx-ship.is-dying .jx-ship__callout { opacity: 0; }
.jx-ship__lead { width: 44px; height: 26px; flex-shrink: 0; }
.jx-ship__lead path {
  fill: none; stroke: rgba(135, 205, 255, 0.65); stroke-width: 1.2;
  stroke-dasharray: 96; stroke-dashoffset: 96;
  animation: jx-lead 0.55s ease forwards 0.4s;
}
.jx-ship__label {
  display: block;
  margin: 0 0 20px 6px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  color: var(--white); white-space: nowrap; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  opacity: 0;
  animation: jx-label 0.4s ease forwards 0.75s;
}
.jx-ship__label i { font-style: normal; color: var(--blue); }
.jx-ship__label small { display: block; margin-top: 0.3rem; font-size: 0.6rem; letter-spacing: 0.08em; color: var(--gray); text-transform: none; }
.jx-ship--flip .jx-ship__callout { left: auto; right: calc(var(--r, 14px) * 0.9); flex-direction: row-reverse; }
.jx-ship--flip .jx-ship__lead { transform: scaleX(-1); }
.jx-ship--flip .jx-ship__label { margin: 0 6px 20px 0; text-align: right; }
@media (max-width: 700px) {
  .jx-ship__lead { width: 28px; height: 20px; }
  .jx-ship__label { font-size: 0.6rem; }
}
.jx-doss { padding-bottom: 1.5rem; animation: jx-fly 0.65s var(--ease); }
@keyframes jx-fly {
  from { opacity: 0; transform: scale(0.93) translateY(14px); filter: blur(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.jx-doss__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; }
.jx-doss__tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--blue); border: 1px solid var(--line-2); border-radius: 6px; padding: 0.25rem 0.6rem; }
.jx-doss__sep { flex: 1; height: 1px; background: linear-gradient(90deg, var(--blue-deep), transparent); }
.jx-doss__step { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gray-2); }
.jx-cards { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
@media (min-width: 620px) { .jx-cards--3 { grid-template-columns: repeat(3, 1fr); } .jx-cards--2 { grid-template-columns: 1fr 1fr; } }
.jx-card { background: rgba(255,255,255,0.025); border: 1px solid var(--line-2); border-radius: 12px; padding: 1.1rem 1.15rem; }
.jx-card--wide { grid-column: 1 / -1; } /* card-manifesto: ocupa a linha inteira do grid */
.jx-card__k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--blue); text-transform: uppercase; }
.jx-card__t { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0.3rem 0 0.35rem; }
.jx-card__d { font-size: 0.86rem; color: var(--gray); line-height: 1.5; }
.jx-card__link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.7rem; font-size: 0.82rem; font-weight: 600; color: var(--blue); }
/* fecho do dossiê: a linha do "e muito mais" */
.jx-more {
  margin-top: 0.95rem; padding-top: 0.85rem;
  border-top: 1px dashed var(--line-2);
  display: flex; align-items: baseline; justify-content: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--gray); text-align: center;
}
.jx-more i { font-style: normal; color: var(--blue); font-weight: 700; }
/* placar do dossiê de clientes */
.jx-stat {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 0.8rem; padding: 1rem 1.15rem;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(255,255,255,0.025);
}
.jx-stat b { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--blue); line-height: 1; }
.jx-stat strong { display: block; font-size: 0.95rem; }
.jx-stat span { display: block; font-size: 0.8rem; color: var(--gray); margin-top: 0.15rem; }
/* logos em flex centrado com célula fixa: fica equilibrado com QUALQUER
   quantidade de marcas (última fileira incompleta centraliza sozinha) */
.jx-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.jx-logos span { display: grid; place-items: center; width: calc((100% - 1.2rem) / 3); height: 72px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem; }
@media (min-width: 620px) { .jx-logos span { width: calc((100% - 1.8rem) / 4); height: 78px; } } /* 4 por linha */
.jx-logos img { max-height: 42px; width: auto; object-fit: contain; }
.jx-shots { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
@media (min-width: 620px) { .jx-shots { grid-template-columns: repeat(3, 1fr); } }
.jx-shot { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.jx-shot img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.jx-shot span { display: block; padding: 0.6rem 0.8rem 0.15rem; font-size: 0.82rem; font-weight: 600; }
.jx-shot small { display: block; padding: 0 0.8rem 0.7rem; font-size: 0.72rem; color: var(--blue); font-family: var(--font-mono); }
.jx-contact { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
@media (min-width: 560px) { .jx-contact { grid-template-columns: 1fr 1fr; } }
.jx-contact a {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem;
  padding: 1.5rem 1.3rem;
  border: 1px solid var(--blue); background: var(--blue-soft); border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.jx-contact a:hover { transform: translateY(-3px); }
.jx-contact a svg { width: 32px; height: 32px; margin-bottom: 0.45rem; }
.jx-contact a span:first-of-type { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--gray); text-transform: uppercase; }
.jx-contact a span:last-of-type { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
/* cores das marcas */
.jx-contact a.is-wa { border-color: rgba(37, 211, 102, 0.6); background: rgba(37, 211, 102, 0.08); }
.jx-contact a.is-wa svg { color: #25D366; }
.jx-contact a.is-wa:hover { box-shadow: 0 10px 34px rgba(37, 211, 102, 0.22); }
.jx-contact a.is-ig { border-color: rgba(228, 64, 95, 0.6); background: rgba(228, 64, 95, 0.08); }
.jx-contact a.is-ig svg { color: #E4405F; }
.jx-contact a.is-ig:hover { box-shadow: 0 10px 34px rgba(228, 64, 95, 0.22); }
.jx-doss__nav { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.3rem; flex-wrap: wrap; }
.jx-doss__auto {
  flex-basis: 100%; height: 2px; margin-top: 0.5rem;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue));
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  animation-name: jx-auto; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes jx-auto { to { transform: scaleX(1); } }
.jx-nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; padding: 0.72rem 1.3rem; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.04); color: var(--white); transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease; }
.jx-nav-btn:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-bright); transform: translateY(-2px); }
.jx-nav-btn:active { transform: scale(0.97); }
/* primário = botão sólido do site (gradiente azul, texto branco) */
.jx-nav-btn--primary { background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%); color: #fff; border-color: transparent; box-shadow: 0 12px 30px -12px rgba(46, 98, 217, 0.75); }
.jx-nav-btn--primary:hover { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 18px 42px -12px rgba(91, 155, 255, 0.9); }
.jx-nav-btn--ghost { margin-left: auto; color: var(--gray); }
/* escolha do onboarding ("você já conhece o Tour?") */
.jx-choice { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
/* destaque pulsante de um controle durante o tutorial */
.jx-hl { border-radius: 12px; animation: jx-hl 1.15s ease-in-out infinite; }
@keyframes jx-hl {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 155, 255, 0); }
  50% { box-shadow: 0 0 0 5px rgba(91, 155, 255, 0.18), 0 0 26px rgba(91, 155, 255, 0.4); }
}

/* ===== Guia da galáxia: telinha de ajuda com o progresso do tour ===== */
/* overlay + véu */
.jx__guide {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s;
}
.jx__guide.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.jx__guide-veil { position: absolute; inset: 0; background: rgba(4, 7, 13, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* painel */
.jx__guide-panel {
  position: relative; z-index: 1;
  width: min(440px, 92vw); max-height: min(80vh, 620px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(16, 22, 36, 0.96), rgba(9, 12, 20, 0.96));
  border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(91, 155, 255, 0.08);
  padding: 1.3rem 1.3rem 1.4rem;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.32s var(--ease);
}
.jx__guide.is-open .jx__guide-panel { transform: translateY(0) scale(1); }
.jx__guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.jx__guide-kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.jx__guide-count { margin-top: 0.3rem; font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--white); }
.jx__guide-close {
  flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: rgba(255, 255, 255, 0.04); color: var(--gray); cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.jx__guide-close svg { width: 15px; height: 15px; }
.jx__guide-close:hover { color: #fff; border-color: var(--blue); background: var(--blue-soft); }

/* barra de progresso */
.jx__guide-progress { display: flex; align-items: center; gap: 0.7rem; margin: 1rem 0 1.1rem; }
.jx__guide-bar { flex: 1; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.jx__guide-bar-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--blue-deep), var(--blue)); box-shadow: 0 0 12px rgba(91, 155, 255, 0.5); transition: width 0.45s var(--ease); }
.jx__guide-pct { font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem; color: var(--blue-bright); min-width: 3ch; text-align: right; }

/* lista de destinos */
.jx__guide-list { list-style: none; margin: 0; padding: 0.1rem; display: flex; flex-direction: column; gap: 0.55rem; overflow-y: auto; scrollbar-width: thin; }
.jx__guide-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line-2); border-radius: 11px; background: rgba(255, 255, 255, 0.025); }
.jx__guide-planet {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--p1, #a8c8ff), var(--p2, #2c55c0) 72%);
  box-shadow: 0 0 16px var(--pg, rgba(91, 155, 255, 0.5)), inset 0 0 8px rgba(255, 255, 255, 0.25);
}
.jx__guide-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jx__guide-name { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jx__guide-tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--gray-2); text-transform: uppercase; }
.jx__guide-badge { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; padding: 0.32rem 0.62rem; border-radius: 99px; border: 1px solid; }
.jx__guide-item.is-explored .jx__guide-badge { color: #46D369; border-color: rgba(70, 211, 105, 0.45); background: rgba(70, 211, 105, 0.12); }
.jx__guide-item.is-locked .jx__guide-badge { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.42); background: rgba(255, 107, 107, 0.1); }
.jx__guide-item.is-locked .jx__guide-planet { filter: grayscale(0.75) brightness(0.62); box-shadow: none; opacity: 0.65; }
.jx__guide-item.is-locked .jx__guide-name { color: var(--gray); }

/* mensagem de galáxia completa */
.jx__guide-done { display: none; margin-top: 1rem; text-align: center; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: #46D369; }
.jx__guide-done span { color: var(--blue-bright); }
.jx__guide.is-complete .jx__guide-done { display: block; }

@media (max-width: 560px) {
  .jx__guide-panel { padding: 1.1rem 1.05rem 1.2rem; border-radius: 14px; }
  .jx__guide-planet { width: 34px; height: 34px; }
  .jx__guide-name { font-size: 0.88rem; }
}

/* =============================================================
   RESPONSIVO
   ============================================================= */
@media (max-width: 1280px) {
  .nav__links { gap: 1.3rem; }
  .nav__i { display: none; }
}
@media (max-width: 1060px) {
  .nav { gap: 1rem; }
  .nav__links { display: none; } /* abaixo daqui a navegação vive no overlay #mnav */
  .nav__burger { display: flex; }
  .nav__tour { display: none; }
}
@media (max-width: 900px) {
  .hero__title-l2 { text-align: left; }
  .hero__meta { text-align: left; }
}
@media (max-width: 560px) {
  .nav__right .btn--sm { display: none; }
  .nav__right .nav__cta { display: none; }
  .jx__brk { width: 16px; height: 16px; }
  .wa-box { bottom: 1rem; right: 1rem; left: 1rem; display: flex; justify-content: flex-end; }
  .wa-box__panel { width: 100%; }
}