/* ==========================================================================
   Flowbix Sentrya — site público (app.flowbix.com)
   Sistema: tipografia estilo SF Pro (Inter como substituta), 1 azul de ação,
   tiles full-bleed alternando claro/escuro. Sem gradientes, sem sombra em chrome.
   Convenção p/ port Go: todo texto de CONTEÚDO carrega data-content="chave".
   Tudo sem data-content é layout/chrome fixo.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Orbitron:wght@400..900&display=swap');

:root {
  --blue: #0066cc;            /* ação — única cor interativa */
  --blue-focus: #0071e3;
  --blue-on-dark: #2997ff;    /* links sobre tile escuro */
  --ink: #1d1d1f;
  --ink-80: #333333;
  --ink-48: #7a7a7a;
  --muted-on-dark: #cccccc;
  --canvas: #ffffff;
  --parchment: #f5f5f7;
  --tile-dark: #272729;
  --tile-dark-2: #2a2a2c;
  --hairline: #e0e0e0;
  --divider-soft: #f0f0f0;
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
/* O atributo [hidden] tem que vencer qualquer display de classe (ex.: .nav-auth
   é display:flex; sem isto, marcar hidden no JS não esconderia os botões). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-feature-settings: "ss03";
  font-size: 17px;
  line-height: 1.44; /* Inter: 1.47 - 0.03 */
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer: a coluna ocupa a viewport inteira e o <main> expande, então
     em páginas curtas (ex.: avisos vazio) o footer encosta no rodapé em vez de
     subir para o meio da tela. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
img { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Nav global — barra preta 44px
   -------------------------------------------------------------------------- */
.nav {
  background: #000000;
  height: 44px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  /* max-width: 980px; */
  margin: 0 auto;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand img { height: 12px; width: auto; }
.nav-brand span { color: rgba(255, 255, 255, 0.72); font-weight: 400; }

/* No desktop, o painel é transparente e apenas espaça links (à esquerda) e as
   ações (empurradas à direita pelo margin-left:auto do .nav-auth). */
.nav-panel {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 36px;
}
/* Hambúrguer: escondido no desktop, vira o gatilho do drawer no mobile. */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.28s var(--ease-out), opacity 0.2s ease;
}
.nav-scrim {
  display: none; /* só existe no mobile, e só visível com o drawer aberto */
  position: fixed;
  inset: 44px 0 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
  z-index: 90;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex: 1;
}
.nav-link {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.nav-link:hover { color: #ffffff; text-decoration: none; }
.nav-link[aria-current="page"] { color: #ffffff; }
.nav-auth {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-cta {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.nav-cta:hover { color: #ffffff; text-decoration: none; text-decoration: underline; }
.nav-signin {
  color: #ffffff;
  background: var(--blue);
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 9999px;
  transition: background 0.2s ease;
}
.nav-signin:hover { background: var(--blue-focus); text-decoration: none; }

/* --- Menu de perfil (sessão admin) — estilo Microsoft: avatar fixo no topo
   que abre um dropdown de configurações. Oculto até o site.js detectar sessão. */
.nav-profile {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.nav-avatar {
  appearance: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: var(--blue);
  color: #ffffff;
  display: grid; place-items: center;
  padding: 0;
  overflow: hidden; /* recorta a logo no círculo */
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.nav-avatar:hover { box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.35); }
.nav-avatar:active { transform: scale(0.94); }
/* Com logo: fundo branco (logos costumam ter transparência) em vez do azul. */
.nav-avatar.has-logo { background: #ffffff; }
.nav-avatar-initials {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  line-height: 1;
}
/* Logo preenche o círculo do avatar (tanto o botão quanto o do dropdown). */
.nav-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  grid-area: 1 / 1; /* ocupa a mesma célula do grid que as iniciais */
}
.nav-profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 8px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  z-index: 120;
}
.nav-profile.is-open .nav-profile-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nav-profile-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 12px;
}
.nav-profile-ava {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 9999px;
  background: var(--blue); color: #ffffff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600;
  overflow: hidden; /* recorta a logo no círculo */
}
.nav-profile-ava.has-logo { background: #ffffff; }
.nav-profile-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-profile-id strong {
  font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-profile-id em {
  font-style: normal; font-size: 12px; color: var(--ink-48);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-profile-sec {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-48);
  padding: 8px 10px 4px;
}
.nav-profile-menu a {
  display: block;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--ink-80);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-profile-menu a:hover {
  background: var(--parchment);
  color: var(--ink);
  text-decoration: none;
}
.nav-profile-div {
  height: 1px; background: var(--divider-soft);
  margin: 6px 4px;
}
.nav-profile-menu a.nav-profile-out { color: #d70015; }
.nav-profile-menu a.nav-profile-out:hover { background: rgba(215, 0, 21, 0.08); }

/* --------------------------------------------------------------------------
   Tiles full-bleed — a troca de cor É o divisor de seção
   -------------------------------------------------------------------------- */
.tile {
  padding: 56px 24px;
  text-align: center;
  overflow: clip; /* clip não cria scroll container — mantém o position: sticky vivo */
}
.tile--light { background: var(--canvas); color: var(--ink); }
.tile--parchment { background: var(--parchment); color: var(--ink); }
.tile--dark { background: var(--tile-dark); color: #ffffff; }
.tile--dark-2 { background: var(--tile-dark-2); color: #ffffff; }
.tile--dark .tile-copy, .tile--dark-2 .tile-copy { color: var(--muted-on-dark); }
.tile--dark a:not(.btn), .tile--dark-2 a:not(.btn) { color: var(--blue-on-dark); }

.tile-inner { max-width: 980px; margin: 0 auto; }
.tile-inner--wide { max-width: 1200px; margin: 0 auto; }

.tile-eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-48);
  margin: 0 0 14px;
}
.tile--dark .tile-eyebrow, .tile--dark-2 .tile-eyebrow { color: var(--muted-on-dark); }
.eyebrow-logo { height: 15px; width: auto; display: inline-block; vertical-align: middle; }

.tile-headline {
  font-size: clamp(34px, 5vw, 56px);
  font-family: "Orbitron", sans-serif;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.tile-headline--hero {
  font-size: clamp(48px, 9vw, 104px);
  letter-spacing: -0.035em;
  line-height: 1.0;
}
.tile-sub {
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.tile-copy {
  font-size: 17px;
  line-height: 1.44;
  color: var(--ink-80);
  max-width: 600px;
  margin: 0 auto 28px;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Botões — pill azul (primário) e ghost; press = scale(0.95)
   -------------------------------------------------------------------------- */
.cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

/* Badges das lojas (App Store / Google Play) — botões escuros com ícone + rótulo
   em duas linhas, no formato oficial. */
.store-badges {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 8px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: #ffffff;
  border-radius: 12px;
  padding: 10px 18px;
  min-width: 168px;
  transition: transform 0.2s var(--ease-out), background 0.2s ease;
}
.store-badge:hover { background: #000000; text-decoration: none; transform: translateY(-1px); }
.store-badge:active { transform: scale(0.97); }
.store-badge-icon { flex: none; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-badge-text small { font-size: 11px; font-weight: 400; letter-spacing: 0; opacity: 0.9; }
.store-badge-text strong { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.022em;
  border-radius: 9999px;
  padding: 11px 22px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }
.btn--primary { background: var(--blue); color: #ffffff; }
.btn--primary:hover { background: var(--blue-focus); }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.tile--dark .btn--ghost, .tile--dark-2 .btn--ghost { color: var(--blue-on-dark); border-color: var(--blue-on-dark); }
.link-arrow { font-size: 17px; }
.link-arrow::after { content: " ›"; }

/* --------------------------------------------------------------------------
   Device — print do app como protagonista (única sombra do sistema)
   -------------------------------------------------------------------------- */
.device {
  display: inline-block;
  border-radius: 44px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-product);
  line-height: 0;
  background: #f2f2f4;
}
.tile--dark .device, .tile--dark-2 .device { border-color: rgba(255, 255, 255, 0.14); }
.device img { width: 100%; height: auto; transition: transform 0.6s var(--ease-out); }
.device--zoom:hover img { transform: scale(1.02); }
.device--lg { width: min(360px, 78vw); }
.device--md { width: min(300px, 64vw); }
.device--sm { width: min(260px, 56vw); }
.device-stage { margin-top: 48px; }

/* Hero — split horizontal: texto à esquerda, palco de devices à direita */
.tile--hero { padding-top: 72px; padding-bottom: 110px; }
.hero-split {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  text-align: left;
}
.hero-text .tile-copy { margin-left: 0; max-width: 440px; }
.hero-text .cta-row { justify-content: flex-start; margin-bottom: 24px; }
.hero-text .store-badges { justify-content: flex-start; margin-top: 0; }
.hero-text .tile-headline--hero { font-size: clamp(48px, 7vw, 92px); }

.hero-visual {
  position: relative;
  min-height: 560px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.device--hero-front {
  width: min(330px, 30vw);
  position: relative;
  z-index: 1;
  transform: rotate(2.5deg);
  margin-left: clamp(40px, 8vw, 140px);
  margin-top: 32px;
}
.device--hero-back {
  width: min(270px, 24vw);
  position: absolute;
  left: clamp(0px, 3vw, 48px);
  top: 0;
  transform: rotate(-5deg);
  opacity: 0.96;
}
.float-card--push { top: 8%; right: clamp(-8px, 1vw, 24px); }
.float-card--ack { bottom: 6%; left: clamp(-8px, 1vw, 16px); z-index: 2; }
.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: var(--shadow-product);
  padding: 12px 16px;
  max-width: 260px;
  text-align: left;
}
.float-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--parchment); flex: none; display: flex; align-items: center; justify-content: center; }
.float-icon img { width: 18px; height: auto; }
.float-meta { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-48); margin: 0 0 3px; }
.float-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 2px; }
.float-copy { font-size: 12px; line-height: 1.4; color: var(--ink-80); margin: 0; }
.float-copy .severity-dot { display: inline-block; vertical-align: middle; margin: -2px 4px 0 0; }
.float-ok { width: 30px; height: 30px; border-radius: 9999px; background: rgba(52, 199, 89, 0.14); color: #248a3d; flex: none; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }

/* ==========================================================================
   Modo Ouvinte — palco full-bleed com auras (estilo Apple)
   ========================================================================== */
.aura-tile {
  position: relative;
  background: #000000;
  color: #fff;
  padding: clamp(80px, 12vh, 140px) 24px clamp(90px, 14vh, 160px);
  overflow: clip;
  isolation: isolate;
}
/* Camada de auras — grandes blobs desfocados que respiram e derivam */
.aura-bg { position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none; }
.aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.9;
  will-change: transform, opacity;
}
.aura--blue {
  width: 60vw; height: 60vw; max-width: 820px; max-height: 820px;
  left: 50%; top: 30%; margin-left: -30vw;
  background: radial-gradient(circle at 50% 50%, rgba(41, 151, 255, 0.85), rgba(41, 151, 255, 0) 68%);
  animation: auraDrift 16s ease-in-out infinite;
}
.aura--siren {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  left: 28%; top: 46%;
  background: radial-gradient(circle at 50% 50%, rgba(224, 36, 46, 0.7), rgba(224, 36, 46, 0) 66%);
  animation: auraPulse 7.5s ease-in-out infinite;
}
.aura--cool {
  width: 50vw; height: 50vw; max-width: 680px; max-height: 680px;
  right: 20%; top: 20%;
  background: radial-gradient(circle at 50% 50%, rgba(120, 90, 255, 0.6), rgba(120, 90, 255, 0) 68%);
  animation: auraDrift 20s ease-in-out infinite reverse;
}
@keyframes auraDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(6%, -5%) scale(1.12); }
  66%  { transform: translate(-5%, 4%) scale(0.94); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes auraPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.45; }
  50%      { transform: scale(1.18); opacity: 0.95; }
}

.aura-stage {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.aura-eyebrow {
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--blue-on-dark);
  margin: 0 0 18px;
}
.aura-headline {
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 auto 22px;
  /* max-width: 15ch; */
  text-wrap: balance;
}
.aura-copy {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: var(--muted-on-dark);
  margin: 0 auto;
  max-width: 44ch;
  text-wrap: pretty;
}

/* Dispositivo grande emergindo da aura */
.aura-device {
  position: relative;
  margin: clamp(40px, 6vh, 72px) auto 0;
  width: min(340px, 76vw);
  animation: auraFloat 6.5s ease-in-out infinite;
}
.aura-device .device {
  width: 100%;
  border: none;
  border-radius: 44px;
  box-shadow: 0 40px 120px -20px rgba(41, 151, 255, 0.55), 0 10px 40px rgba(0, 0, 0, 0.6);
}
@keyframes auraFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Tags de vidro ancoradas ao dispositivo */
.aura-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 9999px;
  background: rgba(28, 28, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.aura-tag-text { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.aura-tag--bypass { top: 20%; left: clamp(-120px, -14vw, -40px); }
.aura-tag--wave { bottom: 16%; right: clamp(-120px, -14vw, -40px); }

/* Toggle que liga ao entrar na tela */
.switch {
  position: relative; flex: none;
  width: 42px; height: 25px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.5s var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: #fff;
  transition: left 0.5s var(--ease-out);
}
.revealed .switch { background: #34c759; }
.revealed .switch::after { left: 20px; }

/* Ponto de sirene pulsante + equalizer ao vivo */
.wave-pulse {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff453a;
}
.revealed .wave-pulse { animation: wavePulse 1.6s ease-out infinite; }
@keyframes wavePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 69, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); }
}
.eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.eq span { width: 4px; border-radius: 2px; background: var(--blue-on-dark); height: 30%; }
.revealed .eq span { animation: eq 0.9s ease-in-out infinite alternate; }
.eq span:nth-child(1) { animation-duration: 0.72s; }
.eq span:nth-child(2) { animation-duration: 1.04s; animation-delay: 0.12s; }
.eq span:nth-child(3) { animation-duration: 0.86s; animation-delay: 0.05s; }
.eq span:nth-child(4) { animation-duration: 1.16s; animation-delay: 0.2s; }
.eq span:nth-child(5) { animation-duration: 0.78s; animation-delay: 0.08s; }
@keyframes eq { from { height: 18%; } to { height: 100%; } }

/* Duo de prints lado a lado */
.duo {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  margin-top: 48px;
}
.duo-item { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.duo-caption { font-size: 14px; letter-spacing: -0.01em; color: var(--muted-on-dark); }
.tile--light .duo-caption, .tile--parchment .duo-caption { color: var(--ink-48); }

/* --------------------------------------------------------------------------
   Split — device de um lado, lista de recursos do outro
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  max-width: 1000px;
  margin: 56px auto 0;
  text-align: left;
}
.split-features { display: flex; flex-direction: column; }
.split-feature { padding: 22px 0; border-top: 1px solid var(--divider-soft); }
.split-feature:first-child { border-top: 0; padding-top: 0; }
.split-feature h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; }
.split-feature p { font-size: 15px; line-height: 1.5; color: var(--ink-80); margin: 0; max-width: 440px; text-wrap: pretty; }
.split-media { display: flex; justify-content: center; }

/* Escala de severidades — mesmas cores do monitoramento */
.severity-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.severity-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-80);
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 5px 12px;
}
.severity-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* --------------------------------------------------------------------------
   Feature grid — recursos em colunas, divisor por hairline
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(28px, 4vw, 56px);
  max-width: 1000px;
  margin: 48px auto 0;
  text-align: left;
}
.feature { border-top: 1px solid var(--hairline); padding: 22px 0 30px; }
.feature h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; }
.feature p { font-size: 15px; line-height: 1.5; color: var(--ink-80); margin: 0; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Seção sticky — print fixo + passos que rolam ao lado
   -------------------------------------------------------------------------- */
.sticky-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  max-width: 1100px;
  margin: 64px auto 0;
  text-align: left;
}
.sticky-media {
  position: sticky;
  top: calc(50vh - min(390px, 39vw));
  align-self: start;
  height: min(780px, 78vw);
  display: flex;
  justify-content: center;
}
/* empilhadas no mesmo ponto: só uma visível por vez, o JS alterna a is-active.
   Sem JS (html:not(.js)) a primeira fica visível como fallback estático. */
.sticky-media .device { position: absolute; width: min(360px, 36vw); transition: opacity 0.6s var(--ease-out); opacity: 0; }
.sticky-media .device.is-active { opacity: 1; }
html:not(.js) .sticky-media .device:first-child { opacity: 1; }
.sticky-steps { display: flex; flex-direction: column; justify-content: center; }
.step {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.25;
  transition: opacity 0.5s var(--ease-out);
}
.step.is-active { opacity: 1; }
/* sem JS o scroll-spy não roda: todos os passos ficam legíveis. */
html:not(.js) .step { opacity: 1; }
.step-index {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-48);
  margin: 0 0 10px;
}
.step-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.step-copy { font-size: 17px; line-height: 1.44; color: var(--ink-80); max-width: 380px; margin: 0; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Página editorial (Sobre)
   -------------------------------------------------------------------------- */
/* Container alinhado ao header/footer (980px). A COLUNA DE TEXTO é limitada a
   720px, mas ancorada à ESQUERDA do container — então a borda esquerda do texto
   bate com a marca (topo) e os links (rodapé), em vez de flutuar centralizada. */
.article { max-width: 980px; margin: 0 auto; padding: 56px 24px; text-align: left; }
.article > * { max-width: 720px; }

/* Imagem de cabeçalho (avisos-artigo e documentação): FULL-BLEED — literalmente
   a largura inteira da tela, acima de tudo (nav já veio antes via site-head;
   isto é o primeiro elemento dentro de <main>, antes do container/breadcrumb). */
.article-header-image {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 40px;
  max-width: none;
  max-height: 420px;
  object-fit: cover;
}
.article-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-48); margin: 0 0 14px; }
.article h1 {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.032em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.article .lead {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 32px;
}
.article h2 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14;
  margin: 56px 0 16px;
}
.article p { margin: 0 0 20px; color: var(--ink-80); text-wrap: pretty; }
.article strong { font-weight: 600; color: var(--ink); }
.article-figure { margin: 48px 0; text-align: center; }
.article-figure figcaption { font-size: 14px; color: var(--ink-48); margin-top: 16px; }

/* --------------------------------------------------------------------------
   Documentação — sidebar + prosa
   -------------------------------------------------------------------------- */
.doc-layout {
  /* A doc tem 2 colunas (nav + conteúdo). Com o container em 980px a coluna de
     texto sobrava só ~690px empurrada para a direita de um bloco centrado — daí
     a sensação de "encolhido no meio". Alargamos o container para 1160px e
     reduzimos nav+gap, então a coluna de leitura fica ~800px e a borda esquerda
     da NAV continua no mesmo eixo do resto do site (o conteúdo total é levemente
     mais largo, o que é esperado para uma página de documentação). */
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 32px 96px;
  display: grid;
  grid-template-columns: 200px minmax(0, 800px);
  gap: 48px;
  justify-content: start;
  text-align: left;
}
.doc-side { position: sticky; top: 76px; align-self: start; }
/* No desktop o <details> é só um contêiner: o toggle some e o conteúdo é sempre
   visível (independe do atributo open). O comportamento colapsável só vale no
   mobile (ver media query). */
.doc-side-toggle { display: none; }
.doc-side-inner { display: block; }
.doc-side-group { margin: 0 0 28px; }
.doc-side-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-48);
  margin: 0 0 10px;
}
.doc-side-list { list-style: none; margin: 0; padding: 0; }
.doc-side-list li { margin: 0; }
.doc-side-link {
  display: block;
  padding: 6px 10px;
  margin-left: -10px;
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink-80);
}
.doc-side-link:hover { color: var(--ink); text-decoration: none; background: var(--parchment); }
.doc-side-link[aria-current="page"] { color: var(--blue); font-weight: 600; }

.doc-breadcrumb { font-size: 14px; color: var(--ink-48); margin: 0 0 18px; }
.doc-breadcrumb a { color: var(--ink-48); }
.doc-prose h1 {
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.doc-prose h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
}
.doc-prose p { color: var(--ink-80); margin: 0 0 18px; text-wrap: pretty; }
.doc-prose .doc-lead { font-size: 21px; font-weight: 300; line-height: 1.4; color: var(--ink); margin: 0 0 28px; }
/* Imagem de cabeçalho da doc: filha direta de .doc-layout (grid nav+prosa) —
   ocupa as DUAS colunas, na linha de cima, antes da nav e da prosa. O gap do
   grid (48px) já espaça verticalmente; zera a margin-bottom do padrão genérico. */
.doc-layout > .article-header-image { grid-column: 1 / -1; margin-bottom: 0; }

/* Passos numerados */
.doc-steps { list-style: none; counter-reset: step; margin: 24px 0 32px; padding: 0; }
.doc-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 28px 56px;
  color: var(--ink-80);
}
.doc-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--parchment);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 4px;
  width: 1px;
  background: var(--hairline);
}
.doc-step-title { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }

/* Bloco de código */
.doc-code {
  background: var(--tile-dark);
  color: #e8e8ea;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 28px;
  overflow-x: auto;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: left;
}
.doc-code .c { color: #8e8e93; }
.doc-code .k { color: var(--blue-on-dark); }

/* Callout */
.doc-note {
  background: var(--parchment);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-80);
}
.doc-note strong { color: var(--ink); }

/* Prev / next */
.doc-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--divider-soft);
  margin-top: 56px;
  padding-top: 24px;
  font-size: 14px;
}
.doc-pager .label { display: block; color: var(--ink-48); margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   Avisos — lista de comunicados (conteúdo dinâmico, formato uniforme)
   -------------------------------------------------------------------------- */
/* mesmo eixo do header/footer (980px); a coluna de leitura fica a 720px à esquerda. */
.notices { max-width: 980px; margin: 0 auto; padding: 56px 24px; text-align: left; }
.notices > * { max-width: 720px; }
.notices-header { margin-bottom: 48px; }
.notices-header h1 {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.05;
  margin: 0 0 12px;
}
.notices-header p { font-size: 21px; font-weight: 300; color: var(--ink-80); margin: 0; }

.notice {
  border-top: 1px solid var(--divider-soft);
  padding: 28px 0;
}
.notice:last-child { border-bottom: 1px solid var(--divider-soft); }
.notice-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.notice-date { font-size: 14px; color: var(--ink-48); }
.notice-title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.notice-body { font-size: 17px; color: var(--ink-80); margin: 0; text-wrap: pretty; }

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 9999px;
  padding: 3px 10px;
}
.badge--info { background: rgba(0, 102, 204, 0.1); color: var(--blue); }
.badge--maint { background: rgba(255, 149, 0, 0.14); color: #a05a00; }
.badge--urgent { background: rgba(227, 30, 36, 0.1); color: #c31a20; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--parchment);
  color: var(--ink-80);
  padding: 48px 24px 40px;
  font-size: 12px;
}
.footer-inner { max-width: 980px; margin: 0 auto; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.footer-brand img { height: 22px; width: auto; opacity: 0.85; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.footer-links a { color: var(--ink-80); font-size: 12px; }
/* Linha legal (privacidade/termos) — logo acima do copyright, tom mais discreto. */
.footer-legal-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-size: 12px; }
.footer-legal-links a { color: var(--ink-48); }
.footer-legal-links a:hover { color: var(--ink-80); }
.footer-dot { color: var(--ink-48); }
.footer-legal { color: var(--ink-48); border-top: 1px solid var(--hairline); padding-top: 16px; }

/* --------------------------------------------------------------------------
   Motion — scroll reveal (site.js adiciona .revealed)
   -------------------------------------------------------------------------- */
/* O hide-inicial só vale quando o JS de reveal está de fato ativo (html.js).
   Sem JS — script bloqueado, falha de rede, file:// — a classe .js nunca é
   adicionada e TODO o conteúdo fica visível (degrada com elegância, nunca
   página em branco). */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.js [data-reveal].revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .step { opacity: 1; transition: none; }
  .device img { transition: none; }
  .btn { transition: none; }
  .sticky-media .device { transition: none; }
  .sonar-ring, .eq span, .wave-pulse { animation: none; }
  .switch { background: #34c759; }
  .switch::after { left: 20px; }
  .aura, .aura-device { animation: none; }
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 833px) {
  /* Header mobile: logo em evidência à esquerda, hambúrguer à direita, e o
     painel de links + ações vira um drawer que desce sob a barra. */
  .nav-inner { gap: 16px; padding: 0 18px; }
  .nav-burger { display: flex; }
  .nav-brand { font-size: 15px; gap: 11px; }
  .nav-brand img { height: 16px; }          /* logo maior, evidente */
  .nav-brand span { display: inline; }

  .nav-panel {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #000000;
    padding: 8px 18px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    /* fechado: recolhido para cima e invisível, sem capturar toque. */
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s var(--ease-out), opacity 0.24s ease, visibility 0s linear 0.3s;
    z-index: 95;
  }
  #siteNav.nav-open .nav-panel {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s var(--ease-out), opacity 0.24s ease;
  }
  .nav-panel .nav-links {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    flex: none;
  }
  .nav-panel .nav-link {
    padding: 15px 4px;
    font-size: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-panel .nav-auth {
    margin: 18px 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .nav-panel .nav-signin {
    font-size: 16px;
    padding: 13px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
  }
  .nav-panel .nav-cta {
    font-size: 16px;
    padding: 13px;
    text-align: center;
  }
  /* Perfil no mobile: o avatar fica na barra do topo (está FORA do drawer no
     DOM), à esquerda do hambúrguer — estilo Microsoft, sempre visível. margin
     -left:auto empurra o par avatar+burger para a direita; o dropdown abre fixo.
     Quando logado, o avatar toma o margin-left e o burger só ganha um respiro. */
  .nav-profile {
    margin-left: auto;
  }
  .nav-profile:not([hidden]) ~ .nav-burger { margin-left: 12px; }
  .nav-profile-menu {
    position: fixed;
    top: 52px;
    right: 12px;
    left: auto;
    width: min(280px, calc(100vw - 24px));
  }
  /* hambúrguer -> X quando aberto */
  #siteNav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #siteNav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  #siteNav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-scrim { display: block; }
  #siteNav.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  .tile { padding: 64px 20px; }
  .doc-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  /* Navegação da doc vira menu colapsável (recolhido por padrão → o conteúdo
     aparece primeiro). O <summary> é um botão-pílula; a seta gira ao abrir. */
  .doc-side {
    position: static;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--canvas);
    overflow: hidden;
  }
  .doc-side-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none; /* remove o triângulo nativo */
  }
  .doc-side-toggle::-webkit-details-marker { display: none; }
  .doc-side-caret { color: var(--ink-48); transition: transform 0.25s var(--ease-out); flex: none; }
  .doc-side[open] .doc-side-caret { transform: rotate(180deg); }
  .doc-side-inner { padding: 4px 16px 16px; border-top: 1px solid var(--divider-soft); }
  .doc-side-group { margin: 16px 0 0; }
  .doc-side-group:first-child { margin-top: 8px; }
  .split { grid-template-columns: 1fr; justify-items: center; text-align: center; margin-top: 40px; }
  .hero-split { grid-template-columns: 1fr; text-align: center; }
  .hero-text .tile-copy { margin: 0 auto 28px; }
  .hero-text .cta-row, .hero-text .store-badges { justify-content: center; }
  .hero-visual { min-height: 0; margin-top: 16px; }
  .device--hero-front { transform: none; margin: 0; width: min(300px, 70vw); }
  .device--hero-back, .float-card { display: none; }
  .aura-tag--bypass { top: -18px; left: 50%; transform: translateX(-50%); }
  .aura-tag--wave { bottom: -18px; right: 50%; transform: translateX(50%); }
  .aura-device { margin-top: 56px; }
  .split-features { order: 2; width: 100%; max-width: 480px; text-align: left; }
  .split-feature p { max-width: 100%; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .sticky-section { grid-template-columns: 1fr; margin-top: 40px; }
  .sticky-media { position: relative; top: 0; height: auto; }
  .sticky-media .device { position: relative; opacity: 0; width: min(300px, 70vw); display: none; }
  .sticky-media .device.is-active { display: block; opacity: 1; }
  .step { min-height: 0; padding: 32px 0; text-align: center; align-items: center; }
  .step-copy { max-width: 100%; }
}
@media (max-width: 640px) {
  .tile { padding: 48px 16px; }
  .article, .notices { padding: 36px 20px; }
  .cta-row .btn { width: 100%; max-width: 320px; }
  .feature-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Botão flutuante de WhatsApp (fixo, canto inferior direito)
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  transition: transform 0.2s var(--ease-out);
}
.wa-float:hover { transform: scale(1.06); text-decoration: none; }
.wa-float:active { transform: scale(0.95); }
/* o SVG já traz o balão verde do WhatsApp — preenche o botão inteiro */
.wa-float img { width: 44px; height: 44px; display: block; }

@media (max-width: 640px) {
  .contact-inner { padding: 56px 20px; }
  .wa-float { right: 16px; bottom: 16px; }
}

/* --------------------------------------------------------------------------
   Listagem de avisos clicável + página de artigo
   -------------------------------------------------------------------------- */
.notice--link { display: block; cursor: pointer; transition: background 0.2s var(--ease-out); border-radius: 12px; padding: 24px 20px; margin: 0 -20px; }
.notice--link:hover { background: var(--parchment); text-decoration: none; }
.notice--link .notice-title { color: var(--ink); }
.notice-more { display: inline-block; margin-top: 12px; color: var(--blue); font-size: 15px; font-weight: 600; }
.notices-empty { color: var(--ink-48); font-size: 17px; }
.article-back { margin: 0 0 24px; }
.article-back a { color: var(--ink-48); font-size: 15px; }
.article--doc-body h1 { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Conteúdo rico (.rt-body) — saída do editor do painel.
   O ESTILO DO CONTEÚDO mora em richtext.css (COMPARTILHADO com o editor
   /flowbix, para render idêntico). Aqui ficam só ajustes específicos do site:
   a margem do 1º título e o clear do float. -------------------------------- */
.article--doc-body h1, .rt-body > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Busca da documentação — gatilho na lateral + palette ⌘K sobreposta
   -------------------------------------------------------------------------- */
.doc-side-col { align-self: start; position: sticky; top: 76px; }
.doc-search-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; margin: 0 0 20px;
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: 10px;
  color: var(--ink-48); font-family: var(--font); font-size: 14px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.doc-search-trigger:hover { border-color: var(--blue); color: var(--ink-80); }
.doc-search-trigger span { flex: 1; text-align: left; }
.doc-search-kbd, .docsearch-esc {
  font-family: var(--font); font-size: 11px; color: var(--ink-48);
  background: var(--parchment); border: 1px solid var(--hairline);
  border-radius: 5px; padding: 1px 6px;
}
/* a lateral (details) já não é mais sticky sozinha — o wrapper .doc-side-col é. */
.doc-side { position: static; top: auto; }

/* palette sobreposta */
.docsearch { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-start; justify-content: center; }
.docsearch[hidden] { display: none; }
.docsearch-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: saturate(120%) blur(3px); }
.docsearch-panel {
  position: relative; z-index: 1; width: 100%; max-width: 620px; margin-top: 12vh;
  background: var(--canvas); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  animation: dsIn 0.18s var(--ease-out) both;
}
@keyframes dsIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
.docsearch-inputwrap { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--divider-soft); color: var(--ink-48); }
.docsearch-input { flex: 1; border: none; outline: none; background: none; font-family: var(--font); font-size: 19px; color: var(--ink); letter-spacing: -0.01em; }
.docsearch-results { max-height: 52vh; overflow-y: auto; padding: 8px; }
.docsearch-hint { color: var(--ink-48); font-size: 15px; padding: 24px 12px; text-align: center; margin: 0; }
.docsearch-hit { display: block; padding: 12px 14px; border-radius: 10px; }
.docsearch-hit:hover, .docsearch-hit.is-active { background: var(--parchment); text-decoration: none; }
.docsearch-hit-title { display: block; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.docsearch-hit-snip { display: block; font-size: 14px; color: var(--ink-48); margin-top: 3px; line-height: 1.4; }
.docsearch mark, .doc-hl { background: rgba(0,102,204,0.18); color: inherit; border-radius: 3px; padding: 0 1px; }
.docsearch-hit.is-active mark { background: rgba(0,102,204,0.28); }
/* destaque no corpo da página (vindo de ?q=) — um pouco mais forte + alvo do scroll */
.doc-hl { background: rgba(255,214,0,0.45); }

@media (max-width: 833px) {
  .doc-side-col { position: static; top: auto; }
  .docsearch-panel { margin-top: 8vh; max-width: none; margin-left: 12px; margin-right: 12px; }
}

/* ==========================================================================
   Modal de QR das lojas — o badge "Baixar na App Store / Google Play" abre um
   overlay centralizado com o QR code e o link direto. Mesmo padrão do docsearch
   (fixed + scrim + painel), controlado por [hidden] no JS (open()/close()).
   ========================================================================== */
.store-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; }
.store-modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: saturate(120%) blur(3px); }
.store-modal-panel {
  position: relative; z-index: 1; width: 100%; max-width: 340px;
  background: var(--canvas); border-radius: 20px; padding: 32px 28px 28px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  animation: dsIn 0.18s var(--ease-out) both;
}
.store-modal-close {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px;
  border: none; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-48); border-radius: 8px;
}
.store-modal-close:hover { background: var(--parchment); color: var(--ink); }
.store-modal-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.store-modal-sub { font-size: 15px; line-height: 1.4; color: var(--ink-48); margin: 0 0 20px; }
.store-modal-qr {
  display: block; width: 240px; height: 240px; max-width: 100%; margin: 0 auto 20px;
  border-radius: 14px; background: #fff;
}
.store-modal-link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border-radius: 999px;
  background: var(--ink); color: var(--canvas); font-size: 15px; font-weight: 600;
}
.store-modal-link:hover { text-decoration: none; opacity: 0.88; }

@media (max-width: 833px) {
  .store-modal-panel { max-width: none; }
}

/* ==========================================================================
   Cronômetro de lançamento — tile escuro na home. Segue o sistema: display em
   Orbitron (mesma face dos títulos), único azul de ação nos separadores, sem
   sombra de chrome. Os dígitos usam tabular-nums para não "pular" a cada segundo.
   ========================================================================== */
.countdown-inner { text-align: center; }
.countdown-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 28px);
  margin-top: clamp(28px, 5vw, 48px);
}
.countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(64px, 12vw, 132px);
}
.countdown-num {
  font-family: "Orbitron", sans-serif;
  font-weight: 600;
  font-size: clamp(44px, 9vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #000;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.countdown-unit {
  margin-top: 10px;
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.countdown-sep {
  font-family: "Orbitron", sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1;
  color: var(--blue-on-dark);
  align-self: flex-start;
  margin-top: clamp(4px, 1vw, 10px);
}
.countdown-expired {
  margin: clamp(24px, 4vw, 40px) auto 0;
  font-family: "Orbitron", sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: balance;
  max-width: 640px;
}

@media (max-width: 520px) {
  /* Telas estreitas: esconde os dois-pontos e deixa os cartões respirarem numa
     grade 2×2 em vez de uma fileira que estoura a largura. */
  .countdown-grid { flex-wrap: wrap; gap: 18px 28px; }
  .countdown-sep { display: none; }
  .countdown-cell { min-width: 88px; flex: 0 0 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .countdown-num { transition: none; }
}