/* =============================================================================
   animacoes-capas.css  ·  ARQUIVO ISOLADO (não toca a lógica do app)
   Animações e ajustes de layout das CAPAS (ecossistema/planetas + hero).
   Carregado por 1 <link> no index.html (e no preview-ecossistema.html).
   Regras: só CSS, só tokens do projeto, aditivo (vence por cascade), e
   tudo desligado em prefers-reduced-motion. Testar tema claro e escuro.
   ============================================================================= */

/* ───────────────────────────────────────────────────────────────────────────
   1) PLANETAS FLUTUANDO (desktop radial ≥1240px)
   Cada planeta "respira"/flutua suavemente, como corpos no espaço.
   Usa margin-top (não mexe no transform/translateZ/hover existentes).
   Durações variadas por posição → movimento orgânico (planetas dessincronizam).
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1240px) {
  .eco-node {
    /* mantém a entrada original + adiciona a flutuação contínua */
    animation: ecoNodeIn .5s var(--ease, ease) forwards,
               ecoPlanetFloat 6.5s ease-in-out infinite;
  }
  /* variação de ritmo por planeta (desincroniza o "voo") */
  .eco-node:nth-of-type(2n)   { animation-duration: .5s, 7.4s; }
  .eco-node:nth-of-type(3n)   { animation-duration: .5s, 8.2s; }
  .eco-node:nth-of-type(4n)   { animation-duration: .5s, 6.0s; }
  .eco-node:nth-of-type(5n)   { animation-duration: .5s, 7.9s; }

  /* o orbe (círculo do ícone) ganha um leve brilho pulsante de "energia" */
  .eco-orb { animation: ecoPlanetGlow 5.5s ease-in-out infinite; }
  .eco-node:nth-of-type(odd) .eco-orb { animation-duration: 6.6s; }
}

@keyframes ecoPlanetFloat {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -9px; }
}

@keyframes ecoPlanetGlow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--accent) 38%, transparent)); }
}

/* ───────────────────────────────────────────────────────────────────────────
   Acessibilidade: respeita "movimento reduzido" — planetas ficam parados.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eco-node { animation: ecoNodeIn .5s var(--ease, ease) forwards !important; margin-top: 0 !important; }
  .eco-orb  { animation: none !important; filter: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   2) STARFIELD refatorado (.bg-star + CSS variables)
   Substitui ~500 linhas de .bg-star-N por 1 classe + variáveis por estrela.
   As estrelas são geradas por JS (data-driven), posição em % (responsivo),
   escopadas em .eco-starfield (não vaza pro resto do app). Twinkle via
   opacity/transform (barato). Inclui estrelas cadentes. Reduced-motion-safe.
   ─────────────────────────────────────────────────────────────────────────── */
.eco-starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.eco-starfield .bg-star {
  position: absolute;
  top: var(--t); left: var(--l);
  width: var(--s, 2px); height: var(--s, 2px);
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 0 var(--blur, 6px) var(--spread, 1px) var(--c, #fff);
  opacity: var(--o, .9);
  animation: bgStarTwinkle var(--tw, 4s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes bgStarTwinkle {
  0%, 100% { opacity: var(--o, .9); transform: scale(1); }
  50%      { opacity: .22; transform: scale(.65); }
}

.eco-starfield .shooting {
  position: absolute;
  top: var(--t); left: var(--l);
  width: var(--len, 180px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  filter: drop-shadow(0 0 6px #fff);
  transform: rotate(var(--ang, 18deg)) translateX(0);
  opacity: 0;
  animation: bgStarShoot var(--sp, 7s) linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes bgStarShoot {
  0%   { opacity: 0; transform: rotate(var(--ang,18deg)) translateX(0); }
  4%   { opacity: 1; }
  16%  { opacity: 0; transform: rotate(var(--ang,18deg)) translateX(520px); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .eco-starfield .bg-star { animation: none !important; }
  .eco-starfield .shooting { display: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   3) CAPA HUB — F1: fundo vivo + reveal da copy + CTA glow + foco visível
   Escopo: só a landing (#landing-gate / .landing-hero-pro). Aditivo.
   O erro de auth (#lg-auth-error) fica FORA da cascata — aparece imediato.
   ─────────────────────────────────────────────────────────────────────────── */

/* Starfield do hero: um tique mais discreto que o do ecossistema pós-login */
.capa-hero-stars .bg-star { opacity: calc(var(--o, .8) * .85); }

/* Reveal em cascata (stagger 90ms), só transform/opacity, fill-mode both */
@keyframes capaStaggerIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-hero-pro .hero-topbar             { animation: capaStaggerIn .55s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)) 0s    both; }
.landing-hero-pro .hero-copy > .hero-title   { animation: capaStaggerIn .55s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)) .09s both; }
.landing-hero-pro .hero-copy > .hero-sub-pro { animation: capaStaggerIn .55s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)) .18s both; }
.landing-hero-pro .hero-copy > .hero-reforco { animation: capaStaggerIn .55s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)) .27s both; }
.landing-hero-pro .hero-copy > .hero-ia-note { animation: capaStaggerIn .55s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)) .36s both; }
.landing-hero-pro .hero-copy > .hero-cta-row { animation: capaStaggerIn .55s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)) .45s both; }

/* Glow dourado pulsante atrás do CTA principal (pseudo-elemento, só opacity) */
.landing-hero-pro .hero-btn-primary { position: relative; }
.landing-hero-pro .hero-btn-primary::before {
  content: ""; position: absolute; inset: -8px; z-index: -1; border-radius: 20px;
  background: radial-gradient(60% 85% at 50% 60%, rgba(245, 197, 24, .55), transparent 72%);
  filter: blur(12px); opacity: .3; pointer-events: none;
  animation: capaCtaGlow 3s ease-in-out infinite;
}
@keyframes capaCtaGlow {
  0%, 100% { opacity: .26; }
  50%      { opacity: .58; }
}

/* Foco visível nos CTAs (teclado) — a seção hero não tinha :focus-visible */
.landing-hero-pro .hero-btn-primary:focus-visible,
.landing-hero-pro .hero-btn-secondary:focus-visible,
.landing-hero-pro .hero-btn-ghost:focus-visible,
.landing-hero-pro .lg-auth-retry:focus-visible {
  outline: 2px solid var(--hero-yellow, #f5c518);
  outline-offset: 3px;
}

/* CTA terciário (ghost): "Conhecer o ecossistema" — leve, não compete com o primário */
.hero-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 8px;
  border: none; background: transparent; cursor: pointer;
  color: rgba(255, 255, 255, .55);
  font: 600 13px/1 inherit; font-family: inherit;
  letter-spacing: .01em;
  transition: color .18s ease;
}
.hero-btn-ghost:hover { color: var(--hero-yellow, #f5c518); }
.hero-btn-ghost span { transition: transform .18s ease; }
.hero-btn-ghost:hover span { transform: translateY(2px); }

/* Mobile compacto: metade das estrelas, sem estrela cadente */
@media (max-width: 560px) {
  .capa-hero-stars .bg-star:nth-child(2n) { display: none; }
  .capa-hero-stars .shooting { display: none; }
}

/* Movimento reduzido: composição estática completa (conteúdo aparece imediato) */
@media (prefers-reduced-motion: reduce) {
  .landing-hero-pro .hero-topbar,
  .landing-hero-pro .hero-copy > * {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .landing-hero-pro .hero-btn-primary::before { animation: none !important; opacity: .28; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4) CAPA HUB — F2 + HERO ECOSYSTEM v2: operação comercial animada
   Núcleo (logo) + 9 nodos em 3 órbitas (interna 100px/80s: Leads·IA·Funil;
   média 146px/120s: WhatsApp·Follow-up·Imóveis; externa 190px/160s:
   Agenda·Propostas·Venda), cada um com card-label módulo + micro-ação de
   valor (.hub-sat-mod/.hub-sat-act). Órbita 100% CSS: o braço gira, o
   satélite contra-rotaciona na MESMA duração (fica sempre "em pé"). Nodos
   na mesma órbita = mesma velocidade → colisão impossível por construção.
   Só transform/opacity; packets apenas nos braços de fluxo de negócio.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-hub-scene {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  --r: clamp(118px, 20vw, 176px);   /* raio legado (fallback) */
  --rs: 1;                          /* escala global dos raios (responsivo) */
  contain: layout paint;
  isolation: isolate;
}

/* ── Núcleo (sol realista: esfera incandescente + labareda girando) ── */
.hub-core {
  position: absolute; top: 50%; left: 50%;
  width: clamp(88px, 14vw, 118px); height: clamp(88px, 14vw, 118px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #fff8d6 0%, #ffe27a 24%, #f5b818 55%, #e08a0c 82%, #b96a06 100%);
  box-shadow:
    0 0 0 1px rgba(255, 224, 138, .28),
    0 0 16px 1px rgba(255, 222, 120, .45),
    0 0 48px 6px rgba(245, 170, 30, .25),
    0 0 110px 30px rgba(230, 135, 15, .12),
    inset -8px -12px 24px rgba(140, 65, 0, .40),
    inset 4px 6px 14px rgba(255, 255, 255, .45);
  display: flex; align-items: center; justify-content: center;
  z-index: 4; will-change: transform;
  animation: capaCoreIn .6s cubic-bezier(.22, 1, .36, 1) .15s both;
}
.hub-core svg { width: 40%; height: 40%; opacity: .85; position: relative; z-index: 2; }
/* corona pulsante (pseudo, só opacity) */
.hub-core::before {
  content: ""; position: absolute; inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 80, .5) 0%, rgba(245, 160, 20, .22) 45%, transparent 70%);
  z-index: -1; opacity: .45; filter: blur(10px);
  animation: capaCorona 4.2s ease-in-out infinite;
}
/* labareda solar: pétalas cônicas suaves girando lentamente */
.hub-core::after {
  content: ""; position: absolute; inset: -16%;
  border-radius: 50%; z-index: -1;
  background: conic-gradient(
    rgba(255, 200, 60, .18) 0deg, transparent 28deg,
    rgba(255, 170, 40, .14) 72deg, transparent 105deg,
    rgba(255, 200, 60, .17) 150deg, transparent 185deg,
    rgba(255, 170, 40, .13) 236deg, transparent 268deg,
    rgba(255, 200, 60, .18) 320deg, transparent 352deg);
  filter: blur(7px);
  animation: capaRingSpin 42s linear infinite;
}
/* anel de energia expandindo */
.hub-core-pulse {
  position: absolute; top: 50%; left: 50%;
  width: clamp(88px, 14vw, 118px); height: clamp(88px, 14vw, 118px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(245, 197, 24, .35);
  border-radius: 50%; z-index: 3; pointer-events: none;
  animation: capaCorePulse 4s ease-out infinite;
}
.hub-core-pulse.p2 { animation-delay: 2s; }

/* ── Anel decorativo legado: escondido (cada órbita agora desenha a sua) ── */
.hub-rings { display: none; }

/* ── Braço orbital (gira) + satélite (contra-rotaciona) ──
   DUAS ÓRBITAS concêntricas (sistema solar real, colisão impossível):
   interna RÁPIDA = CRM + Agentes IA em oposição (180°);
   externa LENTA  = WhatsApp + Meta Ads em oposição.
   Raio por braço via --rr (inline no HTML) × escala responsiva --rs. */
.hub-arm {
  position: absolute; top: 50%; left: 50%;
  width: calc(var(--rr, var(--r)) * var(--rs, 1) * 2);
  height: calc(var(--rr, var(--r)) * var(--rs, 1) * 2);
  margin: calc(var(--rr, var(--r)) * var(--rs, 1) * -1) 0 0 calc(var(--rr, var(--r)) * var(--rs, 1) * -1);
  z-index: 2; pointer-events: none;
  will-change: transform;
  animation: capaHubSpin var(--dur, 90s) linear infinite;
  animation-delay: calc(var(--dur, 90s) * var(--phase, 0) * -1);
}
/* trilha da órbita: hairline neutro com tinta sutil do satélite */
.hub-arm::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sat, #60A5FA) 12%, rgba(255, 255, 255, .04));
  box-shadow: inset 0 0 24px -16px color-mix(in srgb, var(--sat, #60A5FA) 30%, transparent);
}
/* linha de conexão hub→satélite: hairline com ponta acesa perto do nodo */
.hub-link {
  position: absolute; top: 0; left: 50%;
  width: 1px; height: calc(var(--rr, var(--r)) * var(--rs, 1));
  transform: translateX(-50%);
  background: linear-gradient(to top, transparent 10%,
    color-mix(in srgb, var(--sat, #60A5FA) 28%, transparent) 55%,
    color-mix(in srgb, var(--sat, #60A5FA) 85%, #fff) 97%);
  opacity: .28;
}
/* pacote de dados: cápsula-streak viajando pela linha (centro → satélite) */
.hub-packet {
  position: absolute; top: 50%; left: 50%;
  width: 3px; height: 12px; border-radius: 99px;
  background: linear-gradient(to top, transparent,
    var(--sat, #60A5FA) 70%, color-mix(in srgb, var(--sat, #60A5FA) 60%, #fff));
  box-shadow: 0 0 8px 0 color-mix(in srgb, var(--sat, #60A5FA) 55%, transparent);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: capaPacketFlow var(--pkdur, 2.8s) ease-in-out infinite;
  animation-delay: var(--pkdelay, 0s);
}
/* satélite: contra-rotação idêntica ao braço → sempre "em pé" */
.hub-sat {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  animation: capaHubSpinRev var(--dur, 90s) linear infinite;
  animation-delay: calc(var(--dur, 90s) * var(--phase, 0) * -1);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.hub-sat-orb {
  position: relative;
  width: clamp(34px, 4.5vw, 44px); height: clamp(34px, 4.5vw, 44px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* nodo de vidro: luz superior + base translúcida escura (glassmorphism) */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 38%, rgba(7, 10, 18, .35) 100%),
    rgba(11, 15, 26, .52);
  -webkit-backdrop-filter: blur(8px) saturate(1.25);
  backdrop-filter: blur(8px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -10px 16px -12px color-mix(in srgb, var(--sat) 45%, transparent),
    0 10px 26px -10px rgba(0, 0, 0, .65),
    0 0 22px -8px color-mix(in srgb, var(--sat) 45%, transparent);
  transition: scale .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
  animation: capaSatFloat var(--fldur, 7s) ease-in-out infinite;
}
/* anel fino na cor do módulo */
.hub-sat-orb::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sat) 40%, transparent);
  opacity: .8; transition: opacity .3s ease, box-shadow .3s ease;
}
/* glow discreto atrás do nodo */
.hub-sat-orb::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--sat) 40%, transparent), transparent 65%);
  opacity: .22; animation: capaSatGlow var(--gldur, 6s) ease-in-out infinite;
}
.hub-sat-orb svg {
  width: 44%; height: 44%;
  color: color-mix(in srgb, var(--sat) 88%, #fff);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sat) 50%, transparent));
}
/* Label = pill do módulo (sempre visível) + "evento vivo" (.hub-sat-act):
   toast absoluto com a micro-ação de valor que acende em UM nodo por vez,
   ciclando pela ordem da jornada de venda (--act-delay por braço, ciclo 36s).
   Comunica a operação acontecendo sem poluir a cena com 9 cards fixos. */
.hub-sat-label {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
  background: rgba(8, 11, 19, .78);
  border: 1px solid rgba(255, 255, 255, .07);
  padding: 3px 10px 3px 8px; border-radius: 99px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.hub-sat-mod {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: #b6bfd4;
}
.hub-sat-mod::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; flex: none;
  background: var(--sat); box-shadow: 0 0 6px var(--sat);
}
.hub-sat-act {
  position: absolute; top: calc(100% + 5px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font-size: 9.5px; font-weight: 650; letter-spacing: .01em;
  color: color-mix(in srgb, var(--sat) 72%, #fff);
  background: rgba(8, 11, 19, .88);
  border: 1px solid color-mix(in srgb, var(--sat) 35%, transparent);
  padding: 3px 9px; border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .4), 0 0 12px -6px var(--sat);
  opacity: 0;
  animation: hubActShow 36s linear infinite;
  animation-delay: var(--act-delay, 0s);
}
/* janela de ~3.2s acesa dentro do ciclo de 36s (4s por nodo, 9 nodos) */
@keyframes hubActShow {
  0%    { opacity: 0; transform: translateX(-50%) translateY(-3px); }
  1.6%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  8.6%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  10.5% { opacity: 0; transform: translateX(-50%) translateY(2px); }
  100%  { opacity: 0; }
}
/* hover: mostra o evento do nodo apontado na hora */
.hub-sat:hover .hub-sat-act { animation: none; opacity: 1; transform: translateX(-50%); }
/* hover: destaca e pausa a órbita daquele satélite.
   Usa a propriedade `scale` (não transform): capaSatFloat anima transform e venceria. */
.hub-sat:hover .hub-sat-orb {
  scale: 1.07;
  border-color: rgba(255, 255, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 -10px 16px -12px color-mix(in srgb, var(--sat) 60%, transparent),
    0 12px 30px -10px rgba(0, 0, 0, .7),
    0 0 30px -6px color-mix(in srgb, var(--sat) 60%, transparent);
}
.hub-sat:hover .hub-sat-orb::before { opacity: 1; box-shadow: 0 0 14px -4px var(--sat); }
.hero-hub-scene:hover .hub-arm:has(.hub-sat:hover),
.hero-hub-scene:hover .hub-arm:has(.hub-sat:hover) .hub-sat { animation-play-state: paused; }

/* ── Resumo por clique (popover) ──
   Clicar/Enter num nodo pausa a constelação e abre um card curto com o
   resumo comercial do módulo (conteúdo em app.js: _HUB_INFO/_capaHubInfoInit). */
.hub-sat { cursor: pointer; }
.hero-hub-scene.hub-paused .hub-arm,
.hero-hub-scene.hub-paused .hub-sat,
.hero-hub-scene.hub-paused .hub-sat-orb,
.hero-hub-scene.hub-paused .hub-packet,
.hero-hub-scene.hub-paused .hub-sat-act { animation-play-state: paused; }

.hub-info-pop {
  position: absolute; z-index: 30;
  width: min(240px, 78%);
  padding: 12px 14px 13px;
  border-radius: 13px;
  background: rgba(9, 12, 20, .93);
  border: 1px solid color-mix(in srgb, var(--sat, #f5c518) 40%, transparent);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 24px -10px var(--sat, #f5c518);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: hubPopIn .22s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)) both;
}
@keyframes hubPopIn {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hub-info-title {
  display: flex; align-items: center; gap: 7px;
  margin: 0 22px 6px 0;
  font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sat, #f5c518) 80%, #fff);
}
.hub-info-title::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--sat, #f5c518); box-shadow: 0 0 8px var(--sat, #f5c518);
}
.hub-info-desc {
  margin: 0;
  font-size: 11.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}
.hub-info-close {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px;
  background: transparent; color: rgba(255, 255, 255, .45);
  font-size: 14px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
.hub-info-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
@media (prefers-reduced-motion: reduce) { .hub-info-pop { animation: none; } }

/* ── Keyframes ── */
@keyframes capaHubSpin    { from { transform: rotate(0);      } to { transform: rotate(360deg);  } }
@keyframes capaHubSpinRev { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes capaRingSpin   { from { transform: rotate(0);      } to { transform: rotate(-360deg); } }
@keyframes capaCoreIn     { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes capaCorona     { 0%, 100% { opacity: .34; } 50% { opacity: .58; } }
@keyframes capaCorePulse  { 0% { opacity: .5; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes capaSatFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes capaSatGlow    { 0%, 100% { opacity: .16; } 50% { opacity: .38; } }
@keyframes capaPacketFlow {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateY(0); }
  12%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(calc(var(--rr, var(--r)) * var(--rs, 1) * -1)); }
}

/* entrada dos satélites em cascata (pousam um a um) */
.hub-arm { --pop-delay: .38s; }
.hub-arm .hub-sat-orb { animation: capaSatFloat var(--fldur, 7s) ease-in-out infinite, capaSatIn .5s cubic-bezier(.22, 1, .36, 1) var(--pop-delay, .4s) both; }
@keyframes capaSatIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* ── Faixa do produto (mockup migrado do hero) ── */
.hero-product-strip { max-width: 1080px; margin: 8px auto 0; }
.hero-product-strip .hero-dashboard-preview { margin: 0 auto; }

/* ── Responsivo (escala única --rs encolhe todas as órbitas juntas) ── */
/* Desktop largo: constelação maior — órbitas com mais respiro entre os nodos */
@media (min-width: 1241px) {
  .hero-hub-scene { max-width: 600px; --rs: 1.22; }
  .hub-core, .hub-core-pulse { width: 132px; height: 132px; }
  .hub-sat-orb { width: 48px; height: 48px; }
}

@media (max-width: 980px) {
  .hero-hub-scene { max-width: 400px; margin-top: 10px; --rs: .82; }
}
@media (max-width: 560px) {
  .hero-hub-scene { --rs: .6; max-width: 320px; }
  .hub-core, .hub-core-pulse { width: 76px; height: 76px; }
  .hero-hub-scene .hub-packet { display: none; }   /* modo compacto: sem packets */
  /* animação simplificada: só o nome do módulo (a linha de ação sai p/ não poluir 9 nodos) */
  .hub-sat-act { display: none; }
  .hub-sat-label { padding: 3px 8px; border-radius: 99px; }
  .hub-sat-mod { font-size: 8.5px; letter-spacing: .1em; }
  .hub-sat-orb { width: 34px; height: 34px; }
  /* mobile: sem backdrop-filter (custo GPU) — vidro denso equivalente */
  .hub-sat-orb {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .02) 38%, transparent 100%),
      rgba(11, 15, 26, .85);
  }
}

/* navegadores sem backdrop-filter: densifica o vidro p/ manter contraste */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hub-sat-orb {
    background:
      linear-gradient(160deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .02) 38%, transparent 100%),
      rgba(11, 15, 26, .88);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   5) CAPA HUB — F3: profundidade (parallax)
   Parallax: app.js escreve --pmx/--pmy (±1) no .landing-hero-pro; cena e
   starfield movem em profundidades opostas (só transform, rAF-throttled).
   Nota F3.5: as texturas procedurais dos orbes do hub saíram no refine
   visual (nodos de vidro); window._ecoGenTexture segue vivo — o Seletor
   de Planetas pós-login continua usando o mesmo motor/cache.
   ─────────────────────────────────────────────────────────────────────────── */
.landing-hero-pro { --pmx: 0; --pmy: 0; }
.hero-hub-scene {
  transform: translate3d(calc(var(--pmx, 0) * 8px), calc(var(--pmy, 0) * 6px), 0);
  transition: transform .25s ease-out;
}
.capa-hero-stars {
  transform: translate3d(calc(var(--pmx, 0) * -14px), calc(var(--pmy, 0) * -10px), 0);
  transition: transform .4s ease-out;
}

/* ── Movimento reduzido: cena estática, satélites em repouso ── */
@media (prefers-reduced-motion: reduce) {
  .hub-arm, .hub-sat, .hub-rings::after,
  .hub-core, .hub-core::before, .hub-core-pulse,
  .hub-sat-orb, .hub-sat-orb::after { animation: none !important; }
  .hub-core-pulse { display: none !important; }
  .hub-packet { display: none !important; }
  /* eventos ciclados desligados; hover ainda revela a ação do nodo */
  .hub-sat-act { animation: none !important; }
  .hub-core { opacity: 1; transform: translate(-50%, -50%); }
  /* F3: sem parallax (o JS também não registra o listener) */
  .hero-hub-scene, .capa-hero-stars { transform: none !important; transition: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   6) LANDING-HIGHLIGHTS — vitrine do ecossistema (2 fileiras) + features premium
   Vitrine: 2 .hs-rail (marquee 100% CSS, track com 2 grupos → translateX(-50%)
   = loop sem emenda); a 2ª fileira roda em sentido oposto (hsMarqueeRev). Selo
   .hs-eyebrow emoldura; fade nas bordas via mask; pausa no hover.
   Features: reveal em cascata armado pelo JS (.lg-reveal-armed; sem JS tudo
   fica visível), hover premium dourado e destaque ambiente em loop (opacity
   de pseudo-elemento — 1 card por vez, ciclo de 30s via --fi).
   ─────────────────────────────────────────────────────────────────────────── */
.hero-showcase { max-width: 1240px; margin: 44px auto 0; }
/* selo que emoldura a seção (dá intenção editorial, não "tira solta") */
.hs-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0 auto 24px;
  font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: #f5c518;
}
.hs-eyebrow-line { width: 46px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .55)); }
.hs-eyebrow-line:last-child { background: linear-gradient(90deg, rgba(245, 197, 24, .55), transparent); }

/* fileira: marquee com fade nas bordas; a 2ª roda em sentido oposto */
.hs-rail {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hs-rail + .hs-rail { margin-top: 16px; }
.hs-track { display: flex; width: max-content; will-change: transform; animation: hsMarquee 52s linear infinite; }
.hs-rail-rev .hs-track { animation-name: hsMarqueeRev; animation-duration: 58s; }
.hs-rail:hover .hs-track { animation-play-state: paused; }
.hs-group { display: flex; gap: 16px; padding-right: 16px; }
/* chip generoso e neutro (glass escuro) — a identidade do módulo vem do glyph
   colorido com halo próprio, não de caixas berrantes; ouro é o fio no hover */
.hs-item {
  display: flex; align-items: center; gap: 17px;
  padding: 18px 32px 18px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014));
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 32px -18px rgba(0, 0, 0, .85);
  white-space: nowrap;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.hs-item:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 197, 24, .4);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -20px rgba(245, 197, 24, .38);
}
.hs-ico {
  position: relative;
  width: 54px; height: 54px; border-radius: 16px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--hs, #f5c518);
  background: color-mix(in srgb, var(--hs, #f5c518) 11%, rgba(255, 255, 255, .02));
  border: 1px solid color-mix(in srgb, var(--hs, #f5c518) 24%, transparent);
  transition: background .3s ease, border-color .3s ease;
}
/* halo de profundidade atrás do glyph (só opacity, barato) */
.hs-ico::before {
  content: ""; position: absolute; inset: -26%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--hs, #f5c518) 42%, transparent), transparent 66%);
  opacity: .45; filter: blur(9px);
}
.hs-item:hover .hs-ico {
  background: color-mix(in srgb, var(--hs, #f5c518) 18%, transparent);
  border-color: color-mix(in srgb, var(--hs, #f5c518) 42%, transparent);
}
.hs-ico svg { width: 27px; height: 27px; }
.hs-txt { display: flex; flex-direction: column; gap: 4px; }
.hs-txt b { font-size: 15px; font-weight: 650; color: #f4f7ff; letter-spacing: .004em; line-height: 1.2; }
.hs-txt i { font-style: normal; font-size: 12.5px; font-weight: 450; color: #8b95af; line-height: 1.25; }
@keyframes hsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hsMarqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ── Features: reveal em cascata (só quando o JS arma a grade) ── */
.lg-reveal-armed .lg-feat:not(.lg-reveal-in) { opacity: 0; transform: translateY(20px); transition: none; }
.lg-feat.lg-reveal-in {
  animation: lgFeatIn .6s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(var(--fi, 0) * 60ms);
}
@keyframes lgFeatIn { from { opacity: 0; transform: translateY(20px); } }

/* hover premium: elevação + acento dourado + ícone com micro movimento
   (#landing-gate vence a regra base .lg-feat:hover do styles.css) */
#landing-gate .lg-feat:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 197, 24, .42);
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 14px 36px -14px rgba(245, 197, 24, .28);
}
/* ícones dos cards: line-icon em tile sutil, platina → ouro no hover
   (substitui os emojis; #landing-gate vence o .lg-feat-icon base do styles.css) */
#landing-gate .lg-feat-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #c4cbdd;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .3s var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1)), color .28s ease, background .28s ease, border-color .28s ease;
}
#landing-gate .lg-feat-icon svg { width: 23px; height: 23px; }
#landing-gate .lg-feat:hover .lg-feat-icon {
  transform: translateY(-2px) scale(1.08) rotate(-3deg);
  color: #f5c518;
  background: rgba(245, 197, 24, .1);
  border-color: rgba(245, 197, 24, .32);
}

/* destaque ambiente: 1 card aceso por vez (10 cards × 3s = ciclo 30s) */
.lg-feat::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  pointer-events: none; opacity: 0;
  background: linear-gradient(165deg, rgba(245, 197, 24, .08), transparent 55%);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, .3);
}
.lg-reveal-armed .lg-feat::after {
  animation: lgFeatAmbient 30s ease-in-out infinite;
  animation-delay: calc(var(--fi, 0) * 3s);
}
@keyframes lgFeatAmbient { 0%, 8%, 100% { opacity: 0; } 4% { opacity: 1; } }

/* ── Responsivo ── */
@media (max-width: 980px) {
  .hero-showcase { margin-top: 34px; }
  .hs-item { padding: 15px 24px 15px 15px; gap: 14px; border-radius: 16px; }
  .hs-ico { width: 46px; height: 46px; border-radius: 13px; }
  .hs-ico svg { width: 23px; height: 23px; }
  .hs-txt b { font-size: 13.5px; }
  .hs-txt i { font-size: 11.5px; }
}
@media (max-width: 560px) {
  .hero-showcase { margin-top: 28px; }
  .hs-eyebrow { gap: 12px; letter-spacing: .2em; font-size: 10px; }
  .hs-eyebrow-line { width: 28px; }
  .hs-rail + .hs-rail { margin-top: 12px; }
  .hs-item { padding: 12px 18px 12px 12px; gap: 12px; border-radius: 14px; }
  .hs-ico { width: 40px; height: 40px; border-radius: 11px; }
  .hs-ico svg { width: 20px; height: 20px; }
  .hs-txt b { font-size: 12.5px; }
  .hs-txt i { font-size: 11px; }
}

/* ── Movimento reduzido: fileiras viram grade estática; features sem reveal/loop ── */
@media (prefers-reduced-motion: reduce) {
  .hs-rail { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .hs-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .hs-group { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .hs-group[aria-hidden="true"] { display: none; }
  .lg-reveal-armed .lg-feat:not(.lg-reveal-in) { opacity: 1; transform: none; }
  .lg-feat.lg-reveal-in { animation: none; }
  .lg-feat::after { animation: none !important; }
}