/* ============================================================
   GRUPO PREVER — styles.css (v3)
   Escuro, sério e tecnológico · grafite azulado + amarelo #F3C716
   Cor só em ação, destaque e dado positivo · Montserrat
   ------------------------------------------------------------
   1. Tokens            8. Seções da Home
   2. Base              9. Páginas internas (hero, prosa)
   3. Utilitários      10. Formulários
   4. Botões           11. Mapa de SP (Sobre nós)
   5. Header (pílula)  12. Totem 3D (Tecnologia)
   6. Footer           13. Tecnologia (passos, app, comparativo, FAQ)
   7. Componentes      14. Cookies + WhatsApp
                       15. Responsivo
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* superfícies escuras (grafite com fundo azul profundo) */
  --bg: #0a0e14;
  --bg-2: #0d121a;
  --surface: #121923;
  --surface-2: #19212d;
  --surface-3: #222c3a;
  --line: rgba(206, 220, 244, 0.085);
  --line-2: rgba(206, 220, 244, 0.15);

  /* texto */
  --fg: #f2f4f7;
  --fg-2: #aab4c2;
  --fg-3: #6b7789;           /* cinza de baixo contraste (só em display) */

  /* marca e estados */
  --yellow: #f3c716;
  --yellow-2: #ffd53d;
  --yellow-ink: #14120a;
  --live: #38c98a;
  --danger: #ff6b5e;

  /* bloco claro (inversão) */
  --paper: #eceef1;
  --paper-2: #dfe3e8;
  --ink: #0b0f15;
  --ink-2: #444f5e;
  --ink-3: #8a94a2;

  /* forma */
  --r: 24px;
  --r-sm: 16px;
  --r-xs: 12px;
  --pill: 999px;
  --shadow-ui: 0 26px 60px -22px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-paper: 0 28px 56px -24px rgba(11, 15, 21, 0.32), 0 2px 8px rgba(11, 15, 21, 0.06);

  /* layout */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec-y: clamp(88px, 10vw, 140px);
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
/* textos corridos justificados em todas as páginas, com hifenização em português (evita "rios" nas colunas estreitas) */
main p, .site-footer p {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}
/* em blocos centralizados, a última linha continua no centro */
.final-cta p, .bcard-text p, .form-done p, .hero-title ~ p { text-align-last: center; }
/* rótulo curto em coluna estreita (pergunta seguida de link): justificar abriria buracos entre poucas palavras */
.svc-switch { text-align: left; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; height: 1px; background: var(--line-2); margin: 0; }
::selection { background: var(--yellow); color: var(--yellow-ink); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: 24px; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #263040; border-radius: 8px; border: 3px solid var(--bg); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--pill);
  background: var(--yellow);
  color: var(--yellow-ink);
  font-weight: 700;
  font-size: 14px;
}
.skip-link:focus { top: 16px; }

/* ---------- 3. Utilitários ---------- */
.container {
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}
.section { position: relative; padding-block: var(--sec-y); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* tipografia display */
.display {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.d-xl { font-size: clamp(42px, 7.4vw, 112px); }
.d-lg { font-size: clamp(38px, 5.9vw, 86px); }
.d-md { font-size: clamp(32px, 4.5vw, 62px); }
.d-sm { font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.08; }
.display .ln { display: block; }

/* hierarquia dentro da frase */
.mute { color: var(--fg-3); }
.hl { color: var(--yellow); }
.hl-pill {
  background: var(--yellow);
  color: var(--yellow-ink);
  padding: 0 0.28em 0.04em;
  border-radius: var(--pill);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--fg-2); max-width: 560px; }
.small { font-size: 14px; color: var(--fg-2); }
.tnum { font-variant-numeric: tabular-nums; }
/* conteúdo complementar: some no celular e no tablet (lá fica só o essencial) */
@media (max-width: 1023px) { .desk-only { display: none !important; } }

/* objetos injetados no texto display (ocupam o espaço de um caractere) */
.inl {
  display: inline-flex;
  position: relative;
  top: -0.07em;
  vertical-align: middle;
  height: 0.82em;
  margin-inline: 0.04em;
  overflow: hidden;
  flex: none;
  isolation: isolate;
}
.inl img { width: 100%; height: 100%; object-fit: cover; }
.inl-circle { width: 0.82em; border-radius: 50%; }
.inl-media { width: 1.86em; border-radius: 0.2em; }
.inl-icon {
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--yellow);
}
.inl-icon svg { width: 44%; height: 44%; }
.inl-face img { transform: scale(2.2); transform-origin: 30% 30%; }
.inl-media img { animation: kenburns 14s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-3%, 1%); } }
.inl-media .tag {
  position: absolute;
  left: 0.09em;
  bottom: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 0.05em;
  padding: 0.035em 0.09em;
  border-radius: var(--pill);
  background: rgba(10, 14, 20, 0.78);
  color: var(--fg);
  font-size: 0.11em;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}
.inl-media .tag i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--live); margin-right: 0.3em; }

/* selo circular com texto girando */
.badge-spin {
  display: inline-grid;
  place-items: center;
  position: relative;
  vertical-align: middle;
  top: -0.06em;
  width: 1.12em;
  height: 1.12em;
  margin-inline: 0.06em;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
}
.badge-spin svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge-spin svg.ring text { font-size: 9.6px; font-weight: 800; fill: currentColor; }
.badge-spin .core {
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--yellow-ink);
}
.badge-spin .core svg { width: 52%; height: 52%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ponto "ao vivo" */
.live-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(56, 201, 138, 0.55);
  animation: live 2s ease-out infinite;
}
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(56, 201, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(56, 201, 138, 0); } }

/* reveal de bloco inteiro: entra desenhado, com opacidade baixa e leve deslocamento */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 46vh;
    }
  }
  @supports not (animation-timeline: view()) {
    .js .reveal {
      opacity: 0.16;
      transform: translateY(40px);
      transition: opacity 1s var(--ease), transform 1.1s var(--ease);
    }
    .js .reveal.is-in { opacity: 1; transform: none; }
  }
}
@keyframes reveal {
  from { opacity: 0.16; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 4. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--ease);
}
.btn svg { flex: none; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--yellow); color: var(--yellow-ink); }
.btn-primary:hover { background: var(--yellow-2); }
.btn-neutral { background: var(--surface-2); color: var(--fg); border-color: var(--line-2); }
.btn-neutral:hover { background: var(--surface-3); }
.btn-sm { height: 44px; padding: 0 20px; font-size: 14px; }
.btn[disabled], .btn.is-loading { opacity: 0.6; pointer-events: none; }
.btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }
.btn-pair { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  transition: border-color 0.25s ease, gap 0.3s var(--ease);
}
.link-arrow:hover { border-color: var(--yellow); gap: 12px; }

/* ---------- 5. Header (pílula destacada das bordas; some ao rolar para baixo e volta, preso ao topo, ao rolar para cima) ---------- */
/* a pílula leva .glass-noise no HTML (partials/header.html) */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: 16px;
}
/* ao rolar para cima (js/main.js, 1a): fica preso ao topo e desce; ao rolar para baixo, sobe e sai da tela */
.site-header.is-fixed { position: fixed; transform: translateY(calc(-100% - 12px)); transition: transform 0.4s var(--ease); }
.site-header.is-fixed.is-shown { transform: none; }
@media (prefers-reduced-motion: reduce) { .site-header.is-fixed { transition: none; } }
.nav-pill {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 66px;
  padding: 0 10px 0 22px;
  border-radius: var(--pill);
  /* vidro: transparente, com desfoque e brilho sutil na borda */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 40px -22px rgba(0, 0, 0, 0.7);
}
.brand { justify-self: start; display: inline-flex; align-items: center; }
.brand img { height: 40px; width: auto; }
.nav-menu {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* sem o ruído do vidro: o desfoque do próprio menu apaga a textura que fica por trás dele */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav-menu a {
  display: block;
  padding: 9px 17px;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-2);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-menu a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
.nav-menu a[aria-current='page'] { color: var(--fg); background: rgba(255, 255, 255, 0.12); }
.nav-menu a[aria-current='true'] { color: var(--fg); background: rgba(255, 255, 255, 0.07); }

/* submenu "Tecnologia" (Residências · Condomínios e empresas): abre no hover e no foco do teclado */
.nav-sub { position: relative; }
.nav-sub > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-chev { opacity: 0.7; transition: transform 0.25s var(--ease); }
.nav-sub:hover .nav-chev, .nav-sub:focus-within .nav-chev { transform: rotate(180deg); }
.nav-sub::after { content: ''; position: absolute; left: -12px; right: -12px; top: 100%; height: 18px; } /* ponte para o mouse */
/* .nav-sub na frente: vence o position: relative de .glass-noise (declarado mais abaixo) */
.nav-sub .nav-dropdown {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  min-width: 300px;
  padding: 8px;
  display: grid;
  gap: 2px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(34, 43, 56, 0.94), rgba(18, 25, 35, 0.93) 60%, rgba(26, 34, 46, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow-ui);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, transform 0.3s var(--ease), visibility 0s linear 0.2s;
}
.nav-sub:hover .nav-dropdown, .nav-sub:focus-within .nav-dropdown, .nav-sub .nav-dropdown:hover { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav-menu .nav-dropdown a { display: block; padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--fg); }
.nav-menu .nav-dropdown a small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--fg-2); }
.nav-menu .nav-dropdown a:hover { background: rgba(255, 255, 255, 0.07); }
.nav-menu .nav-dropdown a[aria-current='page'] { background: rgba(255, 255, 255, 0.12); }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 8px; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  place-items: center;
  align-content: center;
}
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--fg); transition: transform 0.35s var(--ease); }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded='true'] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.nav-mobile {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  padding: 10px;
  border-radius: var(--r);
  background: rgba(18, 25, 35, 0.97);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-ui);
}
.nav-mobile ul { display: grid; }
.nav-mobile a:not(.btn) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  border-radius: var(--r-xs);
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
}
.nav-mobile a:not(.btn)[aria-current='page'] { background: var(--surface-3); }
/* subpáginas de Tecnologia no menu do celular */
.nav-mobile-sub { display: grid; margin: -2px 0 6px 18px; padding-left: 10px; border-left: 1px solid var(--line-2); }
.nav-mobile .nav-mobile-sub a:not(.btn) { padding: 11px 14px; font-size: 15.5px; font-weight: 600; color: var(--fg-2); }
.nav-mobile .nav-mobile-sub a:not(.btn)[aria-current='page'] { color: var(--fg); }
.nav-mobile .btn { width: 100%; margin-top: 8px; }

/* ---------- 6. Footer (painel destacado das bordas) ---------- */
.site-footer { padding: 0 0 16px; }
.footer-panel {
  margin-inline: clamp(8px, 1.1vw, 16px);
  border-radius: clamp(24px, 3vw, 40px);
  background: #06090d;
  border: 1px solid var(--line);
  padding: clamp(36px, 5vw, 72px) 0 28px;
}
/* o conteúdo do rodapé ocupa a largura toda do painel, só com a margem lateral */
.footer-panel > .container { width: auto; margin-inline: clamp(24px, 4vw, 72px); }
.f-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}
.f-band--top { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: clamp(32px, 4vw, 52px); }
.f-band--bottom { padding-top: clamp(32px, 4vw, 52px); align-items: start; }
.f-menu { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.f-menu a { font-size: 15px; font-weight: 600; color: var(--fg-2); transition: color 0.2s ease; }
.f-menu a:hover { color: var(--fg); }
.f-contact { justify-self: end; text-align: right; }
.f-contact small { display: block; font-size: 13px; color: var(--fg-3); margin-bottom: 8px; }
.f-mail {
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--fg);
  background: linear-gradient(var(--yellow), var(--yellow)) 0 100% / 0 2px no-repeat;
  transition: background-size 0.5s var(--ease);
}
.f-mail:hover { background-size: 100% 2px; }
.f-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.f-block h4, .f-links h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 14px;
}
.f-block a small { display: block; font-size: 12.5px; color: var(--fg-3); }
.f-block p, .f-block a { display: block; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.f-block a:hover { color: var(--fg); }
.f-links { justify-self: end; min-width: min(100%, 300px); }
.f-links ul { display: grid; gap: 2px; }
.f-links a, .f-links button {
  display: inline-flex;
  padding: 4px 0;
  font-size: 14.5px;
  color: var(--fg-2);
  background: none;
  border: 0;
  text-align: left;
  transition: color 0.2s ease;
}
.f-links a:hover, .f-links button:hover { color: var(--fg); }
.f-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--fg-3);
}
.f-legal .f-id { display: flex; align-items: center; gap: 16px; }
.f-legal img { height: 30px; width: auto; opacity: 0.9; }
.social { display: flex; gap: 8px; }
.social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg-2);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.social a:hover { color: var(--yellow); border-color: var(--line-2); }

/* ---------- 7. Componentes ---------- */
/* cabeçalho de seção assimétrico: título à esquerda, texto pequeno à direita, alinhados ao topo */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 24px 64px;
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.sec-head > p { justify-self: end; max-width: 380px; font-size: 15px; color: var(--fg-2); padding-top: 0.6em; }
.sec-head--stack { grid-template-columns: 1fr; }
.sec-head--stack > p { justify-self: start; padding-top: 0; }

/* card de seção (grande) e sub-card de UI (menor, com sombra) */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 40px);
}
.ui {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-ui);
}
.ui-row { display: flex; align-items: center; gap: 12px; }
.ui-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--yellow);
}
.ui-ic svg { width: 16px; height: 16px; }
.ui-ic--ok { background: rgba(56, 201, 138, 0.14); color: var(--live); }
.ui-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--fg); }
.ui-sub { font-size: 12px; line-height: 1.35; color: var(--fg-3); }

/* bloco claro (inversão) — painel destacado das bordas */
.on-paper {
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: rgba(11, 15, 21, 0.08);
  --line-2: rgba(11, 15, 21, 0.14);
  color: var(--ink);
}
.panel-paper {
  margin-inline: clamp(8px, 1.1vw, 16px);
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--paper);
  overflow: hidden;
}
.on-paper .hl { color: var(--ink); background: var(--yellow); padding: 0 0.16em; border-radius: 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.on-paper .ui { background: #fff; border-color: rgba(11, 15, 21, 0.07); box-shadow: var(--shadow-paper); }
.on-paper .ui-ic { background: var(--paper); color: var(--ink); }
.on-paper .btn-neutral { background: #fff; color: var(--ink); border-color: rgba(11, 15, 21, 0.12); }
.on-paper .btn-neutral:hover { background: var(--paper-2); }
.on-paper .link-arrow { color: var(--ink); }
.on-paper .inl-icon { background: #fff; color: var(--ink); }

/* lista com check */
.checks { display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--fg-2); }
.checks li::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3c716' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.on-paper .checks li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0f15' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); }

/* faixa de logos em movimento */
.logos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.logos-label { font-size: 13px; line-height: 1.4; color: var(--fg-3); max-width: 170px; }
.marquee {
  --gap: clamp(44px, 6vw, 88px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track { display: flex; gap: var(--gap); width: max-content; animation: marquee 38s linear infinite; }
.marquee-group { display: flex; align-items: center; gap: var(--gap); flex-shrink: 0; }
.marquee-group img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: 0.55; transition: opacity 0.3s ease; }
.marquee-group img.lg { height: 40px; }
.marquee-group img:hover { opacity: 0.95; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

/* grade sutil de fundo */
.bg-grid { position: relative; isolation: isolate; }
.bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  pointer-events: none;
}

/* ---------- 8. Seções da Home ---------- */
/* 8.0 Banner da Home — largura total, base com cantos arredondados */
.hero-banner {
  position: relative;
  height: clamp(560px, 100svh, 1100px);
  overflow: hidden;
  border-radius: 0 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px);
  background: var(--surface);
  isolation: isolate;
}
.hero-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 14, 20, 0.45) 0%, rgba(10, 14, 20, 0) 22%),
    linear-gradient(90deg, rgba(6, 8, 12, 0.62) 0%, rgba(6, 8, 12, 0.22) 42%, rgba(6, 8, 12, 0) 62%),
    linear-gradient(0deg, rgba(6, 8, 12, 0.6) 0%, rgba(6, 8, 12, 0) 38%);
  pointer-events: none;
}
/* frase do banner: à esquerda, na mesma coluna das outras seções */
.hero-banner-copy { position: absolute; left: 0; right: 0; bottom: clamp(104px, 17vh, 180px); z-index: 1; }
.hero-banner-title { max-width: 12ch; color: #fff; font-weight: 800; font-size: clamp(38px, 5.8vw, 88px); text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35); }
/* indicador de rolagem */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3.6vh, 36px);
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.25s ease;
}
.scroll-cue:hover { color: #fff; }
.scroll-cue-arrow { opacity: 0.7; animation: scroll-cue 2.2s ease-in-out infinite; }
@keyframes scroll-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue-arrow { animation: none; } }
.metric-line.metric-line--solo { margin-top: 0; padding-top: 0; border-top: 0; }
.final-cta .cta-logo { width: auto; height: clamp(72px, 7vw, 104px); margin: 0 auto 32px; }

/* 8.1 Hero — tipografia como layout */
.hero {
  position: relative;
  padding: clamp(150px, 17vw, 210px) 0 clamp(56px, 7vw, 96px);
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 30% 0;
  z-index: -1;
  background: radial-gradient(ellipse 55% 60% at 50% 18%, rgba(84, 118, 170, 0.16), transparent 70%);
  pointer-events: none;
}
.hero-title { text-align: center; margin-inline: auto; }
.hero-title .ln { text-wrap: nowrap; }
.hero-media {
  position: relative;
  margin-top: clamp(48px, 6vw, 88px);
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 2.35 / 1;
  background: var(--surface);
  border: 1px solid var(--line);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0) 45%, rgba(10, 14, 20, 0.55) 100%);
  pointer-events: none;
}
.hero-media .ui { position: absolute; z-index: 1; padding: 12px 16px 12px 12px; }
.hero-media .ui--a { left: clamp(14px, 2.4vw, 32px); bottom: clamp(14px, 2.4vw, 32px); }
.hero-media .ui--b { right: clamp(14px, 2.4vw, 32px); top: clamp(14px, 2.4vw, 32px); }
.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px 64px;
  align-items: center;
  margin-top: clamp(28px, 3.4vw, 44px);
}
.hero-foot .lead { max-width: 500px; font-size: 16px; }

/* 8.2 Prova */
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
}
.proof-main { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 40px); align-items: center; }
.proof-main h3, .proof-side h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.proof-main .txt p { margin-top: 12px; font-size: 15px; color: var(--fg-2); }
.proof-main .checks { margin-top: 22px; }
.proof-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--paper);
  border-color: transparent;
}
.proof-side .big {
  font-size: clamp(64px, 7.2vw, 108px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.proof-side .big sup { font-size: 0.42em; vertical-align: top; position: relative; top: 0.14em; letter-spacing: -0.02em; }
.proof-side p { font-size: 15px; color: var(--ink-2); max-width: 320px; }
.proof-side .ui { padding: 18px; margin-top: auto; }
.bars { display: grid; gap: 14px; }
.bar-row { display: grid; gap: 7px; }
.bar-row header { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.bar-row header b { color: var(--ink); }
.bar { height: 10px; border-radius: var(--pill); background: var(--paper); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w, 100%); border-radius: inherit; background: #b9c0ca; transform-origin: left; }
.bar-row--hi .bar i { background: var(--ink); }
.bar-row--hi header b { background: var(--yellow); padding: 0 6px; border-radius: var(--pill); }

/* linha de métrica: numeral à esquerda, texto à direita, na mesma linha de base */
.metric-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: baseline;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.metric-line .num { font-size: clamp(72px, 11vw, 168px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.85; }
.metric-line p { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--fg-2); max-width: 620px; font-weight: 500; }
.metric-line p b { color: var(--fg); font-weight: 700; }

/* painel da central (UI embutida, números "ao vivo" ilustrativos) */
.dash { padding: 18px; display: grid; gap: 14px; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dash-head .who { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.dash-head .who img { width: 26px; height: auto; }
.dash-head .state { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--fg-2); white-space: nowrap; }
.dash-clock { font-size: 12px; color: var(--fg-3); font-weight: 600; }
.dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dash-stat { padding: 12px; border-radius: var(--r-xs); background: var(--surface-3); border: 1px solid var(--line); }
.dash-stat small { display: block; font-size: 10.5px; line-height: 1.3; color: var(--fg-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-stat b { display: block; margin-top: 4px; font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dash-stat em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--live); }
.dash-chart { position: relative; height: 92px; border-radius: var(--r-xs); background: var(--surface-3); border: 1px solid var(--line); overflow: hidden; }
.dash-chart svg { width: 100%; height: 100%; }
.dash-chart .grid line { stroke: rgba(255, 255, 255, 0.05); }
.dash-chart .area { fill: url(#dashFill); }
.dash-chart .line { fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dash-chart .head { fill: var(--yellow); }
.dash-chart .cap { position: absolute; left: 12px; top: 8px; font-size: 10.5px; font-weight: 700; color: var(--fg-3); }
.dash-feed { display: grid; gap: 6px; }
.dash-feed li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-3);
  font-size: 12px;
  animation: feed-in 0.6s var(--ease) both;
}
.dash-feed li i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.dash-feed li i.ok { background: var(--live); }
.dash-feed li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-2); }
.dash-feed li span b { color: var(--fg); font-weight: 700; }
.dash-feed li time { color: var(--fg-3); font-variant-numeric: tabular-nums; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-6px); } }
.dash-note { font-size: 10.5px; color: var(--fg-3); text-align: right; }

/* 8.3 Benefício / CTA tipográfico (alinhado à esquerda) */
.benefit .display { max-width: 16ch; }
.benefit-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line-2);
}
.benefit-foot p { max-width: 560px; color: var(--fg-2); font-size: 15.5px; }

/* 8.4 Frentes (bloco claro): acordeão + composição de mockups + marca d'água */
.fronts { position: relative; padding-block: var(--sec-y); }
.fronts-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.fronts .display { margin-bottom: clamp(28px, 3.5vw, 44px); }
.wordmark {
  position: absolute;
  z-index: 0;
  left: 38%;
  top: 50%;
  transform: translateY(-38%);
  font-size: clamp(160px, 30vw, 460px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(11, 15, 21, 0.045);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.acc { display: grid; gap: 10px; }
.acc-item {
  border-radius: 33px;
  background: #fff;
  border: 1px solid rgba(11, 15, 21, 0.07);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.acc-item.is-open { box-shadow: var(--shadow-paper); border-color: transparent; }
.acc-btn {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 9px 9px 26px;
  background: none;
  border: 0;
  border-radius: 33px;
  text-align: left;
  font-size: clamp(16px, 1.35vw, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.acc-plus {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  transition: transform 0.45s var(--ease), background-color 0.3s ease;
}
.acc-item.is-open .acc-plus { transform: rotate(45deg); background: var(--yellow); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-body { padding: 0 26px 24px; }
.acc-body p { font-size: 15px; color: var(--ink-2); max-width: 460px; }
.acc-body .link-arrow { margin-top: 14px; font-size: 14px; }
.link-pair { display: flex; flex-wrap: wrap; gap: 0 22px; }

.stack { position: relative; aspect-ratio: 1 / 1.02; }
.stack-set { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.stack-set.is-on { opacity: 1; visibility: visible; transition: opacity 0.6s ease; }
.stack-photo {
  position: absolute;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--shadow-paper);
  background: var(--paper-2);
}
.stack-photo img { width: 100%; height: 100%; object-fit: cover; }
.stack-photo--main { left: 0; top: 6%; width: 74%; height: 80%; }
.stack-photo--sub { right: 0; bottom: 0; width: 46%; height: 48%; border: 6px solid var(--paper); }
.stack .ui { position: absolute; padding: 12px 16px 12px 12px; transition: transform 0.8s var(--ease); }
.stack .ui--a { right: 4%; top: 0; }
.stack .ui--b { left: 6%; bottom: 6%; }
.stack-set:not(.is-on) .ui--a { transform: translateY(-12px); }
.stack-set:not(.is-on) .ui--b { transform: translateY(12px); }

/* 8.5 Grade de benefícios (2 colunas iguais) */
.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.bcard-visual {
  position: relative;
  aspect-ratio: 16 / 11;
  margin: 10px 10px 0;
  border-radius: calc(var(--r) - 8px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(243, 199, 22, 0.1), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--bg-2));
  border: 1px solid var(--line);
}
.bcard-text { flex: 1; padding: 28px clamp(20px, 3vw, 40px) 36px; text-align: center; }
.bcard-text h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }
.bcard-text p { margin: 10px auto 0; max-width: 430px; font-size: 15px; color: var(--fg-2); }
.bcard-text .link-arrow { margin-top: 18px; font-size: 14px; }
.bcard-visual .ui { position: absolute; padding: 11px 15px 11px 11px; }

/* totem */
.v-totem img.totem { position: absolute; left: 50%; bottom: -4%; height: 112%; width: auto; transform: translateX(-50%); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); }
.v-totem .ui--a { left: 7%; top: 14%; }
.v-totem .ui--b { right: 6%; top: 40%; }
.v-totem .ui--c { left: 9%; bottom: 10%; }
.plate {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  background: #fff;
  color: #111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  overflow: hidden;
  border: 1px solid #c9ced6;
}
.plate::before { content: 'BRASIL'; display: block; width: 100%; padding: 2px 6px; background: #1d4fbf; color: #fff; font-size: 6px; letter-spacing: 0.2em; text-align: center; }
.plate span { padding: 3px 7px 4px; }

/* celular com o app (Condomínios e empresas) */
.phone {
  position: relative;
  width: clamp(236px, 19vw, 266px);
  aspect-ratio: 9 / 18.5;
  border-radius: 38px;
  padding: 8px;
  background: #05070a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 70px -20px rgba(0, 0, 0, 0.8);
}
.phone-screen {
  height: 100%;
  border-radius: 27px;
  background: linear-gradient(180deg, #151c27, #0d131b);
  padding: 34px 12px 12px;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: hidden;
  position: relative;
}
.phone-screen::before { content: ''; position: absolute; top: 9px; left: 50%; width: 64px; height: 18px; border-radius: 12px; background: #05070a; transform: translateX(-50%); }
.app-top { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.app-top img { width: 22px; height: auto; }
.app-top small { display: block; font-size: 9.5px; font-weight: 600; color: var(--fg-3); }
.app-tile { padding: 9px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; line-height: 1.25; }
.app-tile small { display: block; font-weight: 600; font-size: 9px; color: var(--fg-3); }
.app-tile .ui-ic { width: 26px; height: 26px; }
.app-tile .ui-ic svg { width: 13px; height: 13px; }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-grid .app-tile { flex-direction: column; align-items: flex-start; gap: 6px; }
/* atividade do dia, no pé da tela */
.app-feed { display: grid; gap: 8px; margin-top: 4px; padding: 11px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); font-size: 10px; font-weight: 600; line-height: 1.3; color: var(--fg-2); }
.app-feed small { font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.app-feed div { display: flex; align-items: center; gap: 7px; }
.app-feed i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.app-feed span { margin-left: auto; color: var(--fg-3); font-variant-numeric: tabular-nums; }
/* barra de navegação do app, no pé da tela */
.app-tabs { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-around; padding: 9px 6px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--fg-3); }
.app-tabs span { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 9px; }
.app-tabs svg { width: 15px; height: 15px; }
.app-tabs .is-on { color: var(--yellow); background: rgba(243, 199, 22, 0.12); }
.app-tile .ui-ic--lg { width: 38px; height: 38px; }
.app-tile .ui-ic--lg svg { width: 18px; height: 18px; }

/* 8.6 CTA final — coluna única centralizada */
.final-cta { text-align: center; padding-block: clamp(120px, 14vw, 200px); }
.final-cta .icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
}
.final-cta .icon img { width: 40px; height: auto; }
.final-cta .display { max-width: 15ch; margin-inline: auto; }
.final-cta p { margin: 22px auto 0; max-width: 520px; color: var(--fg-2); }
.final-cta .btn-pair { justify-content: center; margin-top: 34px; }

/* ---------- 9. Páginas internas ---------- */
.page-hero { position: relative; padding: clamp(150px, 16vw, 200px) 0 clamp(48px, 6vw, 80px); isolation: isolate; }
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 50% 70% at 20% 10%, rgba(84, 118, 170, 0.14), transparent 70%);
  pointer-events: none;
}
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: 13px; font-weight: 600; color: var(--fg-3); }
.crumbs a { color: var(--fg-2); }
.crumbs a:hover { color: var(--fg); }
.crumbs span[aria-hidden] { opacity: 0.6; }
.page-hero .display { max-width: 17ch; }
.page-hero .lead { margin-top: 24px; }
.page-hero .btn-pair { margin-top: 32px; }
.page-hero-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 32px 64px; align-items: end; }
.page-hero-split .lead { margin-top: 0; justify-self: end; }

/* prosa (políticas e termos) */
.prose-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.toc { position: sticky; top: 24px; display: grid; gap: 2px; font-size: 13.5px; }
.toc strong { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.toc a { padding: 6px 0; color: var(--fg-2); border-left: 2px solid var(--line); padding-left: 14px; transition: color 0.2s ease, border-color 0.2s ease; }
.toc a:hover { color: var(--fg); border-color: var(--yellow); }
.prose { max-width: 760px; font-size: 16px; color: var(--fg-2); }
.prose h2 { margin: 52px 0 14px; font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; color: var(--fg); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 8px; font-size: 17px; font-weight: 700; color: var(--fg); }
.prose p { margin: 12px 0; }
.prose ul, .prose ol { margin: 12px 0; padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--yellow); }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.prose strong { color: var(--fg); }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.prose th { color: var(--fg); font-weight: 700; background: var(--surface); }
.prose .meta { font-size: 13.5px; color: var(--fg-3); }
.note {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 14.5px;
  color: var(--fg-2);
}
.note svg { flex: none; color: var(--yellow); margin-top: 2px; }
.note b { color: var(--fg); }

/* grade genérica de cards com ícone */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat { padding: 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.feat .ui-ic { width: 44px; height: 44px; margin-bottom: 18px; }
.feat .ui-ic svg { width: 20px; height: 20px; }
.feat h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.feat p { margin-top: 8px; font-size: 14.5px; color: var(--fg-2); }
.on-paper .feat { background: #fff; border-color: transparent; box-shadow: var(--shadow-paper); }

/* galeria de equipes */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 14vw, 190px); gap: 12px; }
.mosaic figure { position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mosaic figure:hover img { transform: scale(1.04); }
.mosaic figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 12px;
  border-radius: var(--pill);
  background: rgba(10, 14, 20, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 700;
}
.m-a { grid-column: span 7; grid-row: span 2; }
.m-b { grid-column: span 5; grid-row: span 2; }
.m-c { grid-column: span 4; grid-row: span 2; }
.m-d { grid-column: span 4; grid-row: span 2; }
.m-e { grid-column: span 4; grid-row: span 2; }

/* documentos (relatórios) */
.docs { display: grid; gap: 10px; }
.doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 16px 16px 18px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
a.doc:hover { border-color: var(--line-2); background: var(--surface-2); }
.doc .ui-ic { width: 44px; height: 44px; }
.doc b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.doc small { display: block; font-size: 13px; color: var(--fg-3); }
.doc .go { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
.doc--pending { opacity: 0.6; }
.doc--pending .go { color: var(--fg-3); }

/* passos numerados */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { position: relative; padding: 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 26px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--yellow);
}
.step h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.step p { margin-top: 8px; font-size: 14.5px; color: var(--fg-2); }
.on-paper .step { background: #fff; border-color: transparent; box-shadow: var(--shadow-paper); }
.on-paper .step::before { color: var(--ink); }

/* ---------- 10. Formulários ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr); gap: 20px; align-items: start; }
.form-card { padding: clamp(24px, 3.4vw, 44px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .field > .label, fieldset.field > legend { font-size: 13.5px; font-weight: 700; color: var(--fg); }
.field .opt { font-weight: 500; color: var(--fg-3); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4c2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
.field select option { background: var(--surface-2); color: var(--fg); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(206, 220, 244, 0.26); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(243, 199, 22, 0.16); }
.field.has-error input, .field.has-error select, .field.has-error textarea, .field.has-error .drop { border-color: var(--danger); }
.field .err { font-size: 12.5px; font-weight: 600; color: var(--danger); }
.field .hint { font-size: 12.5px; color: var(--fg-3); }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 10px; }

/* opções em pílula (checkbox/radio) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--pill);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.chip span::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--fg-3);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.chip input[type='checkbox'] + span::before { border-radius: 4px; }
.chip span:hover { color: var(--fg); }
.chip input:checked + span { background: var(--surface-3); color: var(--fg); border-color: var(--yellow); }
.chip input:checked + span::before { background: var(--yellow); border-color: var(--yellow); box-shadow: inset 0 0 0 2.5px var(--surface-3); }
.chip input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* anexo */
.drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: var(--r-sm);
  border: 1.5px dashed var(--line-2);
  background: var(--surface-2);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.drop.is-over { border-color: var(--yellow); background: var(--surface-3); }
.drop input[type='file'] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .ui-ic { width: 44px; height: 44px; }
.drop b { display: block; font-size: 14.5px; }
.drop small { display: block; font-size: 12.5px; color: var(--fg-3); }
.drop.has-file { border-style: solid; border-color: var(--line-2); }
.drop.has-file .ui-ic { background: rgba(56, 201, 138, 0.14); color: var(--live); }

/* consentimento */
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--fg-2); line-height: 1.5; cursor: pointer; }
.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  border-radius: 6px;
  border: 1.5px solid var(--fg-3);
  background: var(--surface-2);
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.consent input:checked { background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314120a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--yellow); }
.consent a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.field.has-error .consent input { border-color: var(--danger); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-actions .small { max-width: 340px; font-size: 12.5px; color: var(--fg-3); }
.form-status { display: none; margin-top: 18px; padding: 16px 18px; border-radius: var(--r-sm); font-size: 14.5px; line-height: 1.5; }
.form-status.is-ok { display: block; background: rgba(56, 201, 138, 0.1); border: 1px solid rgba(56, 201, 138, 0.35); color: var(--fg); }
.form-status.is-err { display: block; background: rgba(255, 107, 94, 0.08); border: 1px solid rgba(255, 107, 94, 0.35); color: var(--fg); }
.form-status a { text-decoration: underline; text-underline-offset: 3px; }
.form-done { text-align: center; padding: clamp(32px, 5vw, 64px) 12px; }
.form-done .ui-ic { width: 64px; height: 64px; margin: 0 auto 22px; }
.form-done .ui-ic svg { width: 28px; height: 28px; }
.form-done h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.form-done p { margin: 10px auto 0; max-width: 420px; color: var(--fg-2); font-size: 15px; }

.aside { display: grid; gap: 16px; }
.aside .card { padding: 26px; }
.aside h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.contact-list { display: grid; gap: 6px; }
.contact-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin-inline: -10px;
  border-radius: var(--r-xs);
  transition: background-color 0.2s ease;
}
.contact-list a:hover { background: var(--surface-2); }
.contact-list b { display: block; font-size: 14.5px; line-height: 1.3; }
.contact-list small { display: block; font-size: 12.5px; color: var(--fg-3); }
.mini-steps { display: grid; gap: 14px; counter-reset: ms; }
.mini-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: 14px; color: var(--fg-2); counter-increment: ms; }
.mini-steps li::before {
  content: counter(ms);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--yellow);
  font-size: 12.5px;
  font-weight: 800;
}
.mini-steps b { display: block; color: var(--fg); font-size: 14.5px; }

/* ---------- 12. Totem 3D imersivo (Tecnologia) ---------- */
.pole-immersive {
  --tx1: #f2f0ea;
  --tx2: #c4c2ba;
  --tx3: #8f8d86;
  --hair: rgba(255, 255, 255, 0.18);
  --pi-bg: #060607;
  position: relative;
  color: var(--tx1);
  background: var(--pi-bg);
}
.pole-immersive::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(120px, 18vh, 200px);
  background: linear-gradient(180deg, var(--bg) 0%, rgba(6, 6, 7, 0.6) 45%, rgba(6, 6, 7, 0) 100%);
  pointer-events: none;
}
.pole-immersive::after {
  content: '';
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(100px, 14vh, 160px);
  background: linear-gradient(0deg, var(--bg) 0%, rgba(6, 6, 7, 0) 100%);
  pointer-events: none;
}
.pi-track { position: relative; height: 300vh; }
.pi-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--pi-bg); }
.pi-canvas { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; }
.pi-canvas.is-dragging { cursor: grabbing; }
.pi-canvas canvas { display: block; width: 100%; height: 100%; }
.pi-canvas.is-fallback { cursor: default; background: url('../assets/img/totem-recorte.webp') no-repeat 68% 62% / auto 78%, radial-gradient(ellipse 62% 60% at 50% 40%, #3d3a36 0%, #26241f 28%, #121110 60%, #060607 100%); }
@media (max-width: 860px) { .pi-canvas.is-fallback { background-position: 50% 30%, center; background-size: auto 62%, cover; } }
.pi-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.pi-pin.is-on { opacity: 1; }
.pi-pin-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(22, 23, 27, 0.85), 0 4px 14px rgba(0, 0, 0, 0.35); }
.pi-pin-dot::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid var(--yellow); animation: pi-pulse 1.9s ease-out infinite; }
@keyframes pi-pulse { from { transform: scale(0.45); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.pi-copy { position: absolute; left: max(var(--gutter), calc((100% - var(--container)) / 2)); top: 50%; width: min(440px, 38vw); transform: translateY(-50%); pointer-events: none; }
.pi-step { position: absolute; left: 0; top: 50%; width: 100%; opacity: 0; transform: translateY(calc(-50% + 22px)); transition: opacity 0.5s ease, transform 0.6s var(--ease); }
.pi-step.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.pi-step.is-past { transform: translateY(calc(-50% - 22px)); }
.pi-step h2 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; color: var(--tx1); }
.pi-step h3 { font-size: clamp(26px, 3.1vw, 42px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; color: var(--tx1); }
.pi-step .hl { color: var(--yellow); }
.pi-step p { margin-top: 16px; font-size: 15.5px; color: var(--tx2); max-width: 400px; }
.pi-num { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; color: var(--yellow); }
.pi-progress { position: absolute; right: max(var(--gutter), calc((100% - var(--container)) / 2)); top: 50%; transform: translateY(-50%); display: grid; gap: 12px; }
.pi-progress li { width: 6px; height: 6px; border-radius: 50%; background: var(--hair); transition: background-color 0.4s ease, height 0.4s ease; }
.pi-progress li.is-active { height: 22px; border-radius: 4px; background: var(--yellow); }
.pi-hint { position: absolute; left: 50%; bottom: 28px; z-index: 4; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: var(--tx3); pointer-events: none; transition: opacity 0.4s ease; }
.pi-hint svg { animation: pi-bob 1.8s ease-in-out infinite; }
@keyframes pi-bob { 50% { transform: translateY(3px); } }
.pole-immersive.is-scrolled .pi-hint, .pi-canvas.is-fallback ~ .pi-hint { opacity: 0; }
.pole-immersive.is-static .pi-track { height: auto; }
.pole-immersive.is-static .pi-stage { position: relative; height: auto; overflow: visible; padding: 96px 0; }
.pole-immersive.is-static .pi-canvas { position: relative; inset: auto; height: 70vh; min-height: 420px; cursor: default; }
.pole-immersive.is-static .pi-copy { position: relative; left: auto; top: auto; transform: none; width: min(var(--container), calc(100% - 2 * var(--gutter))); margin: 40px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.pole-immersive.is-static .pi-step { position: relative; top: auto; opacity: 1; transform: none; }
.pole-immersive.is-static .pi-step--intro { grid-column: 1 / -1; order: -1; }
.pole-immersive.is-static .pi-step h3 { font-size: 19px; }
.pole-immersive.is-static .pi-progress, .pole-immersive.is-static .pi-pin, .pole-immersive.is-static .pi-hint { display: none; }
/* prédio 3D (Condomínios e empresas): 2 capítulos; parado, mostra o render com os pontos; em movimento, o 3D */
.pole-immersive--predio { --pi-bg: #06080c; }
.pole-immersive--predio .pi-track { height: 260vh; }
.pole-immersive--predio .pi-step .crumbs { margin-bottom: 18px; color: var(--tx3); }
.pole-immersive--predio .pi-step .crumbs a { color: var(--tx2); }
.pole-immersive--predio .pi-step h1 { font-size: clamp(32px, 4.2vw, 56px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; color: var(--tx1); }
/* título em duas linhas fixas ("Portaria Remota" / "com atendimento eficiente.") */
.pole-immersive--predio .pi-step--intro h1 { width: max-content; max-width: min(780px, 58vw); font-size: clamp(32px, 3.3vw, 50px); }
.pole-immersive--predio .pi-step--intro h1 .ln { display: block; white-space: nowrap; }
.pole-immersive--predio.is-simple .pi-step--intro h1 { width: auto; max-width: none; font-size: clamp(34px, 8.6vw, 54px); }
.pole-immersive--predio.is-simple .pi-step--intro h1 .ln { white-space: normal; }
.pole-immersive--predio .pi-step .btn-pair { margin-top: 24px; }
.pole-immersive--predio .pi-step .btn-neutral { background: rgba(255, 255, 255, 0.08); color: var(--tx1); border-color: rgba(255, 255, 255, 0.16); }
.pole-immersive--predio .pi-canvas { cursor: default; }
.pole-immersive--predio .pi-copy { z-index: 3; }
.pole-immersive--predio .pi-progress { z-index: 4; }
.pole-immersive--predio .casa-pop { z-index: 6; }
.pole-immersive--predio.is-loading .pi-canvas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(243, 199, 22, 0.25); border-top-color: var(--yellow); animation: spin 0.9s linear infinite; }
/* render de cada capítulo sobre o 3D; some durante a transição */
.pi-rest { position: absolute; inset: 0; z-index: 2; container-type: size; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.pole-immersive--predio[data-rest='0'] .pi-rest[data-rest='0'], .pole-immersive--predio[data-rest='1'] .pi-rest[data-rest='1'] { opacity: 1; visibility: visible; transition: opacity 0.35s ease 0.05s, visibility 0s linear 0s; }
.pi-rest-img { position: absolute; inset: 0; margin: 0; }
/* sombra no canto de baixo à esquerda (título e botões) e no topo (menu); o resto do render fica limpo */
.pole-immersive--predio .pi-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 74% 72% at 0% 100%, rgba(6, 8, 12, 0.9) 0%, rgba(6, 8, 12, 0.66) 44%, rgba(6, 8, 12, 0) 100%), linear-gradient(90deg, rgba(6, 8, 12, 0.5) 0%, rgba(6, 8, 12, 0.2) 36%, rgba(6, 8, 12, 0) 54%), linear-gradient(180deg, rgba(6, 8, 12, 0.45) 0%, rgba(6, 8, 12, 0) 18%); }
.pole-immersive--predio .pi-rest .casa-pins { z-index: 1; }
.pole-immersive--predio.is-simple .pi-shade { display: none; }
.pi-rest-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pole-immersive--predio .casa-pins { --ar: 1.7778; }
/* recorte do render dentro do pop-up, centrado no item */
.pop-crop { width: 100%; height: 100%; background-color: #0a0d13; background-repeat: no-repeat; background-size: 320% auto; background-position: var(--bx, 50%) var(--by, 50%); }
/* abertura no desktop: título grande embaixo à esquerda e os botões logo abaixo.
   O título deixa o mouse passar para os pontos da fachada; só a trilha e os botões recebem o clique. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .pole-immersive--predio:not(.is-simple) .pi-copy { top: 0; bottom: 0; right: max(var(--gutter), calc((100% - var(--container)) / 2)); width: auto; transform: none; }
  .pole-immersive--predio:not(.is-simple) .pi-step[data-step='1'] { width: min(440px, 38vw); }
  /* a altura do bloco segue o render: a 2ª linha do título passa logo abaixo do ponto do leitor facial (59% da altura do render) */
  .pole-immersive--predio:not(.is-simple) .pi-step--intro { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-bottom: clamp(100px, min(18.5vh, 50vh - 5.12vw - 168px), 210px); transform: translateY(22px); }
  .pole-immersive--predio:not(.is-simple) .pi-step--intro.is-active { transform: none; pointer-events: none; }
  .pole-immersive--predio:not(.is-simple) .pi-step--intro.is-past { transform: translateY(-22px); }
  .pole-immersive--predio:not(.is-simple) .pi-step--intro.is-active :is(.crumbs, .btn-pair) { pointer-events: auto; }
  .pole-immersive--predio:not(.is-simple) .pi-step--intro h1 { max-width: none; font-size: clamp(48px, min(4.4vw, 7.8vh), 61px); }
  .pole-immersive--predio:not(.is-simple) .pi-step--intro .btn-pair { margin-top: 28px; }
}
/* celular e tablet: renders e textos empilhados (fachada, texto 1, armário, texto 2); o topo é o mesmo da Residências, com a trilha de navegação livre do cabeçalho */
.pole-immersive.pole-immersive--predio.is-simple .pi-stage { display: flex; flex-direction: column; padding: clamp(130px, 16vw, 180px) 0 clamp(72px, 12vw, 104px); }
.pole-immersive--predio.is-simple .pi-canvas, .pole-immersive--predio.is-simple .casa-pins, .pole-immersive--predio.is-simple .casa-pop { display: none; }
.pole-immersive--predio.is-simple .pi-copy { display: contents; }
.pole-immersive--predio.is-simple .pi-rest { position: relative; inset: auto; opacity: 1; visibility: visible; container-type: normal; width: min(var(--container), calc(100% - 2 * var(--gutter))); margin: 20px auto 0; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; }
.pole-immersive--predio.is-simple .pi-rest[data-rest='0'] { order: 1; }
.pole-immersive--predio.is-simple .pi-step[data-step='0'] { order: 0; }
.pole-immersive--predio.is-simple .pi-step[data-step='1'] { order: 2; margin-top: 36px; border-top: 0; }
.pole-immersive--predio.is-simple .pi-rest[data-rest='1'] { order: 3; }
/* celular e tablet: título, imagem do totem e os 3 recursos em lista (sem 3D) */
.pole-immersive.is-simple::before, .pole-immersive.is-simple::after { height: 56px; }
.pole-immersive.is-simple .pi-stage { display: flex; flex-direction: column; padding: clamp(72px, 12vw, 104px) 0; }
.pole-immersive.is-simple .pi-copy { display: contents; }
.pole-immersive.is-simple .pi-step { width: min(var(--container), calc(100% - 2 * var(--gutter))); margin-inline: auto; padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pole-immersive.is-simple .pi-step--intro { order: -1; }
.pole-immersive.is-simple .pi-step--intro p { max-width: 520px; }
.pole-immersive.is-simple .pi-canvas { order: 0; height: clamp(380px, 96vw, 620px); min-height: 0; margin: 16px 0 8px; }
.pole-immersive.is-simple .pi-canvas.is-fallback { background: url('../assets/img/totem-recorte.webp') no-repeat 50% 50% / auto 92%, radial-gradient(ellipse 58% 46% at 50% 50%, #34312d 0%, #1c1a17 42%, #060607 80%); }
.pole-immersive.is-simple .pi-step:not(.pi-step--intro) { order: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 20px 0; border-top: 1px solid var(--hair); }
.pole-immersive.is-simple .pi-step:not(.pi-step--intro) .pi-num { grid-row: span 2; margin: 5px 0 0; }
.pole-immersive.is-simple .pi-step h3 { font-size: 19px; }
.pole-immersive.is-simple .pi-step:not(.pi-step--intro) p { margin-top: 6px; font-size: 14.5px; }
.pole-immersive.is-static .pi-pin, .pole-immersive.is-static .pi-progress, .pole-immersive.is-static .pi-hint { display: none; }

/* ---------- 13. Tecnologia: comparativo e FAQ ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.compare th, .compare td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.compare thead th { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-2); border-bottom: 0; }
.compare thead th.us { color: var(--ink); }
.compare tbody th { font-weight: 700; color: var(--ink); width: 26%; }
.compare td { color: var(--ink-2); }
.compare td.us { color: var(--ink); font-weight: 600; background: #fff; }
.compare thead th.us { background: #fff; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.compare tbody tr:last-child td.us { border-radius: 0 0 var(--r-sm) var(--r-sm); border-bottom: 0; }
.compare td.us::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314120a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.faq { display: grid; gap: 10px; max-width: 900px; }
.faq-item { border-radius: 33px; background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s ease; }
.faq-item.is-open { border-color: var(--line-2); }
.faq-q {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 9px 9px 26px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--fg);
}
.faq-q .acc-plus { background: var(--surface-3); color: var(--fg); }
.faq-item.is-open .acc-plus { transform: rotate(45deg); background: var(--yellow); color: var(--yellow-ink); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 26px 24px; font-size: 15px; color: var(--fg-2); max-width: 760px; }

/* números curtos no hero */
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.mini-stats dd { margin: 0; }
.mini-stats b { display: block; font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.mini-stats span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--fg-2); }

/* recursos do app: o celular no centro e seis caixas saindo dele, três para cada lado, ligadas por um fio */
.sec-head--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.app-orbit { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.app-device { position: relative; z-index: 2; }
.app-device::before { content: ''; position: absolute; inset: -14% -70%; z-index: -1; background: radial-gradient(closest-side, rgba(243, 199, 22, 0.13), rgba(84, 118, 170, 0.09) 55%, transparent); pointer-events: none; }
.app-calls { position: relative; z-index: 1; display: grid; gap: clamp(44px, 6vw, 92px); }
.app-calls--l { justify-items: end; }
.app-calls--r { justify-items: start; }
.app-call { --reach: clamp(30px, 3.6vw, 60px); position: relative; display: flex; align-items: center; gap: 12px; width: min(100%, 268px); padding: 13px 18px 13px 13px; }
.app-calls li:nth-child(2) { --reach: clamp(64px, 8.4vw, 136px); }
.app-calls--l .app-call { margin-right: var(--reach); }
.app-calls--r .app-call { margin-left: var(--reach); }
.app-call .ui-title { font-size: 15px; letter-spacing: -0.01em; }
.app-call .ui-sub { margin-top: 2px; font-size: 12.5px; text-align: left; }
.app-call::before { content: ''; position: absolute; top: 50%; width: var(--reach); height: 1px; }
.app-call::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(243, 199, 22, 0.14); }
.app-calls--l .app-call::before { left: 100%; background: linear-gradient(90deg, var(--line-2), rgba(243, 199, 22, 0.75)); }
.app-calls--r .app-call::before { right: 100%; background: linear-gradient(270deg, var(--line-2), rgba(243, 199, 22, 0.75)); }
.app-calls--l .app-call::after { left: calc(100% + var(--reach) - 14px); }
.app-calls--r .app-call::after { right: calc(100% + var(--reach) - 14px); }
.app-store { margin-top: clamp(28px, 3.4vw, 44px); text-align: center; font-size: 14px; color: var(--fg-2); }
.app-store b { color: var(--fg); }
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  @supports (animation-timeline: view()) {
    /* as caixas saem de trás do celular conforme a seção entra na tela */
    .app-call { animation: app-out linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    .app-calls--l .app-call { --dx: 56px; }
    .app-calls--r .app-call { --dx: -56px; }
  }
}
@keyframes app-out { from { opacity: 0.16; transform: translateX(var(--dx, 0px)); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  /* celular em cima e as seis caixas embaixo, sem os fios */
  .app-orbit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .app-device { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-bottom: 20px; }
  .app-calls { gap: 12px; justify-items: stretch; }
  .app-calls--l { grid-column: 1; grid-row: 2; }
  .app-calls--r { grid-column: 2; grid-row: 2; }
  .app-call, .app-calls li:nth-child(2) { width: auto; margin: 0 !important; }
  .app-call::before, .app-call::after { display: none; }
}
@media (max-width: 520px) {
  .app-orbit { grid-template-columns: minmax(0, 1fr); }
  .app-calls--r { grid-column: 1; grid-row: 3; }
  .phone { width: 230px; }
}

/* frase de destaque */
.statement { max-width: 22ch; font-size: clamp(30px, 4.2vw, 58px); }

/* split genérico (texto + mídia) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split-media { position: relative; }
.split-media .photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--surface); }
.split-media .photo img { width: 100%; height: 100%; object-fit: cover; }
.split-media > .ui { position: absolute; padding: 12px 16px 12px 12px; }
.split-media > .ui--a { right: -14px; top: 10%; }
.split-media > .ui--b { left: -14px; bottom: 9%; }
.split-copy .display { margin-bottom: 22px; }
.split-copy > p { color: var(--fg-2); max-width: 520px; }
.split-copy > p + p { margin-top: 12px; }
.split-copy .checks { margin-top: 24px; }
.split-copy .btn-pair { margin-top: 32px; }

/* ---------- 14. Cookies + WhatsApp ---------- */
.cookie-bar {
  position: fixed;
  z-index: 80;
  left: 16px;
  bottom: 16px;
  width: min(420px, calc(100% - 32px));
  padding: 22px;
  border-radius: var(--r);
  background: rgba(18, 25, 35, 0.97);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-ui);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: cookie-in 0.6s var(--ease) both;
}
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } }
.cookie-bar h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.cookie-bar p { font-size: 13.5px; line-height: 1.55; color: var(--fg-2); }
.cookie-bar p a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.cookie-bar .btn-pair { margin-top: 16px; }
.cookie-bar .btn { height: 42px; padding: 0 18px; font-size: 13.5px; flex: 1; }
.cookie-prefs { display: grid; gap: 8px; margin-top: 14px; }
.toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--line); }
.toggle-row b { display: block; font-size: 13.5px; }
.toggle-row small { display: block; font-size: 12px; line-height: 1.45; color: var(--fg-3); }
.switch { position: relative; flex: none; width: 42px; height: 24px; margin-top: 2px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: var(--pill); background: var(--surface-3); border: 1px solid var(--line-2); transition: background-color 0.25s ease; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg-2); transition: transform 0.3s var(--ease), background-color 0.25s ease; }
.switch input:checked + i { background: var(--yellow); border-color: var(--yellow); }
.switch input:checked + i::after { transform: translateX(18px); background: var(--yellow-ink); }
.switch input:disabled + i { opacity: 0.55; }
.switch input:focus-visible + i { outline: 2px solid var(--yellow); outline-offset: 2px; }

.whats-float {
  position: fixed;
  z-index: 60;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: #fff;
  box-shadow: var(--shadow-ui);
  transition: transform 0.3s var(--ease), background-color 0.25s ease;
}
.whats-float::after { content: ''; position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: #25d366; border: 2px solid var(--surface-2); }
.whats-float:hover { transform: translateY(-3px); background: var(--surface-3); }

/* ---------- 16. Casa monitorada (Residências): render + pontos com pop-up ---------- */
/* Celular e tablet: título, imagem da casa e cards com os renders (nessa ordem) */
.casa3d { position: relative; display: flex; flex-direction: column; padding: clamp(130px, 16vw, 180px) 0 clamp(40px, 5vw, 64px); }
.casa3d-ui { display: contents; }
.casa3d-intro, .casa-stage, .casa3d-cards { width: min(var(--container), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.casa3d-intro { order: 0; }
.casa-stage { order: 1; position: relative; margin-top: clamp(28px, 4vw, 44px); border-radius: var(--r); overflow: hidden; background: #0a0d13; aspect-ratio: 16 / 9; }
.casa3d-cards { order: 2; }
.casa-img { position: absolute; inset: 0; margin: 0; }
.casa-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.casa-shade, .casa-pins, .casa-pop { display: none; }
.casa3d-cards { display: grid; gap: 16px; margin-top: clamp(24px, 3vw, 36px); }
.casa3d-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; outline: none; }
.casa3d-card-media { margin: 0; aspect-ratio: 16 / 10; background: var(--surface-2); }
.casa3d-card-media picture { display: contents; }
.casa3d-card-media img { width: 100%; height: 100%; object-fit: cover; }
.casa3d-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.casa3d-kicker { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--fg-2); }
.casa3d-kicker span { color: var(--yellow); font-variant-numeric: tabular-nums; }
.casa3d-card h2 { margin-top: 10px; font-size: clamp(21px, 2vw, 26px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.casa3d-card-main .link-arrow { margin-top: 16px; font-size: 14px; }
.casa3d-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; }
.casa3d-card-foot:not(:has(.casa3d-logos)) { display: none; }
.casa3d-logos { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.casa3d-logos img { display: block; height: 24px; width: auto; filter: brightness(0) invert(1); opacity: 0.82; }
.casa3d-logos img.lg { height: 26px; }
/* o botão "Próximo" não aparece em nenhum tamanho: no pop-up, a troca de ponto é pelos pontos e pelas setas do teclado */
.casa3d-next { display: none; }
.casa3d-next-block { margin-top: clamp(16px, 2vw, 28px); }
@media (min-width: 900px) { .casa3d-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Ruído fino sobre superfícies de vidro (evita o degradê "liso" do desfoque) */
.glass-noise { position: relative; }
.glass-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.09;
  mix-blend-mode: soft-light;
}
.glass-noise > :not(.nav-mobile) { position: relative; z-index: 1; }
.glass-noise > .nav-mobile { z-index: 2; }

/* Desktop com mouse: a imagem preenche a abertura; os pontos abrem o pop-up ao lado do cursor */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .casa3d {
    height: clamp(660px, 100svh, 1080px);
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px);
    background: #06080c;
    isolation: isolate;
  }
  /* sem z-index próprio: o pop-up (z 2) fica acima do título (.casa3d-ui, z 1) */
  .casa-stage { position: absolute; inset: 0; margin: 0; border-radius: 0; aspect-ratio: auto; container-type: size; }
  .casa-img img { object-position: 50% 50%; }
  /* sombra à esquerda para o título ler bem */
  .casa-shade {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(6, 8, 12, 0.78) 0%, rgba(6, 8, 12, 0.42) 30%, rgba(6, 8, 12, 0) 54%),
      linear-gradient(180deg, rgba(6, 8, 12, 0.5) 0%, rgba(6, 8, 12, 0) 20%);
  }
  /* camada do tamanho da imagem (object-fit: cover) para os pontos ficarem no lugar certo em qualquer tela */
  .casa-pins {
    --ar: 2;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100cqw, calc(100cqh * var(--ar)));
    height: max(100cqh, calc(100cqw / var(--ar)));
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .casa3d-pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -16px 0 0 -16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg);
    pointer-events: auto;
    cursor: pointer;
  }
  /* ponto perto da borda direita: rótulo para a esquerda */
  .casa3d-pin.pin--left { flex-direction: row-reverse; margin-left: 16px; transform: translateX(-100%); }
  .casa3d-pin i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 199, 22, 0.2); }
  .casa3d-pin i::before { content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 16px rgba(243, 199, 22, 0.8); transition: transform 0.25s var(--ease); }
  .casa3d-pin i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--yellow); animation: casa3d-pulse 2s ease-out infinite; }
  .casa3d-pin span {
    padding: 8px 13px;
    border-radius: var(--pill);
    background: rgba(10, 14, 20, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }
  .casa3d-pin:hover i::before, .casa3d-pin:focus-visible i::before, .casa3d-pin[aria-expanded='true'] i::before { transform: scale(1.3); }
  .casa3d-pin:hover span, .casa3d-pin:focus-visible span, .casa3d-pin[aria-expanded='true'] span { background: rgba(10, 14, 20, 0.85); border-color: rgba(243, 199, 22, 0.6); }
  .casa3d-pin:focus-visible { outline: none; }
  .casa3d-pin:focus-visible span { outline: 2px solid var(--yellow); outline-offset: 2px; }

  /* Condomínios: só o círculo, com metade do raio (o nome segue para leitores de tela e aparece no pop-up) */
  .pins--dot .casa3d-pin { margin: -8px 0 0 -8px; gap: 0; }
  .pins--dot .casa3d-pin.pin--left { flex-direction: row; margin-left: -8px; transform: none; }
  .pins--dot .casa3d-pin::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; } /* área de clique confortável */
  .pins--dot .casa3d-pin i { width: 16px; height: 16px; }
  .pins--dot .casa3d-pin i::before { width: 6.5px; height: 6.5px; box-shadow: 0 0 8px rgba(243, 199, 22, 0.8); }
  .pins--dot .casa3d-pin span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .pins--dot .casa3d-pin:focus-visible i { outline: 2px solid var(--yellow); outline-offset: 3px; }

  /* título sobre a imagem; os cards só aparecem dentro do pop-up */
  .casa3d-ui { display: block; position: absolute; inset: 0; z-index: 1; margin-inline: auto; pointer-events: none; }
  .casa3d-intro, .casa-stage { width: auto; margin-inline: 0; }
  .casa3d-intro {
    position: absolute;
    left: 0;
    bottom: clamp(40px, 7vh, 80px);
    width: min(520px, 44%);
    margin: 0;
    /* o bloco fica por cima da imagem: deixa o mouse passar para os pontos (o do totem cai em cima da trilha); só os links recebem o clique */
    pointer-events: none;
  }
  .casa3d-intro a, .casa3d-intro button { pointer-events: auto; }
  .casa3d-cards { display: none; }

  /* pop-up de vidro ao lado do ponto: frase à esquerda, render à direita */
  .casa-pop {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: min(640px, 48cqw);
    padding: 10px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.09));
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 40px 80px -30px rgba(0, 0, 0, 0.85);
    color: var(--fg);
    opacity: 0;
    visibility: hidden;
    transform: translate(var(--px, 0px), var(--py, 0px)) scale(0.97);
    transform-origin: var(--ox, left) center;
    transition: opacity 0.22s ease, transform 0.35s var(--ease), visibility 0s linear 0.22s;
    pointer-events: auto;
  }
  .casa-pop.is-open { opacity: 1; visibility: visible; transform: translate(var(--px, 0px), var(--py, 0px)); transition: opacity 0.25s ease, transform 0.45s var(--ease), visibility 0s linear 0s; }
  /* troca de ponto com o pop-up aberto: muda de lugar sem deslizar */
  .casa-pop.is-jump { transition: none; }
  .casa-pop .casa3d-card { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); grid-template-areas: 'body media'; background: none; border: 0; border-radius: 0; overflow: visible; }
  .casa-pop .casa3d-card-media { grid-area: media; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, 0.35); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .casa-pop .casa3d-card-body { grid-area: body; padding: 14px 18px 12px 14px; }
  .casa-pop .casa3d-kicker { color: rgba(242, 244, 247, 0.72); font-size: 12px; }
  .casa-pop .casa3d-card-main { margin-block: auto; padding-block: 14px; }
  .casa-pop .casa3d-card h2 { margin-top: 0; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.15; }
  .casa-pop .casa3d-card-main .link-arrow { margin-top: 14px; font-size: 13.5px; }
  .casa-pop .casa3d-card-foot, .casa-pop .casa3d-card-foot:not(:has(.casa3d-logos)) { display: flex; margin-top: 0; padding-top: 0; min-height: 0; }
  .casa-pop .casa3d-logos { gap: 12px; }
  .casa-pop .casa3d-logos img { height: 20px; opacity: 0.9; }
  .casa-pop .casa3d-logos img.lg { height: 22px; }
  .casa-pop .casa3d-next { display: none; }
}
@keyframes casa3d-pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .casa3d-pin i::after { animation: none; }
  .casa-pop { transition: opacity 0.15s ease, visibility 0s linear 0.15s; }
  .casa-pop, .casa-pop.is-open { transform: translate(var(--px, 0px), var(--py, 0px)); }
}

/* ---------- 16b. Tecnologia: duas seções, uma por público (sistemas para residências · para condomínios e empresas) ---------- */
.hub-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(600px, 92svh, 940px);
  margin: clamp(16px, 2vw, 28px) clamp(8px, 1.1vw, 16px) 0;
  border-radius: clamp(24px, 3vw, 40px);
  overflow: hidden;
  isolation: isolate;
  background: #06080c;
}
/* a primeira seção abre a página como os banners: largura total, base arredondada */
.hub-panel--first { margin: 0; border-radius: 0 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px); }
/* a última fica separada do rodapé pelo mesmo respiro que separa as seções */
.hub-panel:last-child { margin-bottom: clamp(16px, 2vw, 28px); }
.hub-media { position: absolute; inset: 0; z-index: -2; }
.hub-media img { width: 100%; height: 100%; object-fit: cover; }
.hub-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 8, 12, 0.88) 0%, rgba(6, 8, 12, 0.6) 34%, rgba(6, 8, 12, 0) 64%),
    linear-gradient(0deg, rgba(6, 8, 12, 0.7) 0%, rgba(6, 8, 12, 0) 42%),
    linear-gradient(180deg, rgba(6, 8, 12, 0.5) 0%, rgba(6, 8, 12, 0) 22%);
  pointer-events: none;
}
.hub-copy { max-width: 600px; padding-block: clamp(128px, 14vw, 168px) clamp(48px, 6vw, 88px); }
.hub-label {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: var(--pill);
  background: rgba(243, 199, 22, 0.14);
  border: 1px solid rgba(243, 199, 22, 0.35);
  color: var(--yellow);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.hub-copy .display { margin-top: 18px; }
.hub-copy > p { margin-top: 18px; max-width: 520px; font-size: 16px; color: var(--fg-2); }
.hub-systems { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hub-systems li {
  padding: 7px 13px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}
.hub-copy .btn-pair { margin-top: 32px; }
.hub-copy .btn-neutral { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
@media (max-width: 760px) {
  /* celular: imagem em cima, texto embaixo */
  .hub-panel { display: block; min-height: 0; }
  .hub-panel::before { display: none; }
  .hub-media { position: relative; z-index: 0; display: block; aspect-ratio: 16 / 10; }
  .hub-panel--first .hub-media { aspect-ratio: 4 / 3.4; }
  .hub-copy { padding-block: 28px 40px; }
  .hub-panel--first .hub-copy { padding-top: 24px; }
}

/* ---------- 16c. Sobre nós: pouco texto e muita gente (fotos correndo, frase da equipe, mapa e missão) ---------- */
/* nas frases grandes desta página, o destaque é a palavra com menos opacidade (.mute), nunca preenchimento colorido */
.ab-hero { padding-bottom: clamp(36px, 4.4vw, 64px); }
.ab-hero .display { max-width: none; }
/* linha curta: quebra equilibrada e sem hífen */
.ab-hero .lead { hyphens: none; -webkit-hyphens: none; text-wrap: balance; }
/* fotos da equipe: uma fileira só, correndo devagar da direita para a esquerda (para quando o mouse passa) */
.ab-reel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ab-reel-track { display: flex; width: max-content; animation: ab-slide 90s linear infinite; }
.ab-reel:hover .ab-reel-track { animation-play-state: paused; }
.ab-reel-group { display: flex; flex-shrink: 0; }
.ab-reel figure {
  flex: none;
  height: clamp(260px, 30vw, 460px);
  aspect-ratio: 3 / 4;
  margin: 0 clamp(10px, 1.1vw, 16px) 0 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.ab-reel figure.is-wide { aspect-ratio: 4 / 3; }
.ab-reel img { width: 100%; height: 100%; object-fit: cover; }
/* quem somos: o texto institucional à direita, com um rótulo pequeno à esquerda */
.ab-about { padding-block: clamp(72px, 9vw, 128px); }
.ab-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px clamp(32px, 6vw, 96px); align-items: start; }
.ab-about-label { padding-top: 0.55em; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; color: var(--fg-3); }
.ab-about-text { display: grid; gap: 1.1em; max-width: 780px; }
.ab-about-text p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.75; color: var(--fg-2); }
@media (max-width: 760px) { .ab-about-grid { grid-template-columns: minmax(0, 1fr); } }
/* fechamento claro: missão, dois botões e o nome Grupo Prever correndo, escuro e quase transparente */
.ab-end { position: relative; margin-bottom: clamp(16px, 2vw, 28px); padding-top: clamp(80px, 9vw, 136px); }
.ab-say { max-width: 19ch; margin-inline: auto; text-align: center; font-size: clamp(34px, 5.2vw, 78px); }
.ab-end .btn-pair { justify-content: center; margin-top: clamp(28px, 3vw, 40px); }
.ab-mark { overflow: hidden; margin-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(10px, 1.2vw, 18px); user-select: none; }
.ab-mark-track { display: flex; width: max-content; animation: ab-slide 46s linear infinite; }
.ab-mark-track span {
  flex-shrink: 0;
  padding-right: 0.3em;
  font-size: clamp(96px, 19vw, 300px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.08;
}
@keyframes ab-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* sem movimento: a fileira de fotos rola com o dedo ou o mouse */
  .ab-reel { overflow-x: auto; padding-inline: var(--gutter); -webkit-mask-image: none; mask-image: none; }
  .ab-reel-track, .ab-mark-track { animation: none; }
  .ab-reel-group[aria-hidden='true'] { display: none; }
}

/* ---------- 17. Páginas por público (Residências · Condomínios e empresas) ---------- */
/* abertura de Condomínios e empresas (no desktop, o prédio 3D entra aqui) */
.lp-hero { padding-bottom: clamp(48px, 6vw, 88px); }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lp-hero .display { max-width: 15ch; font-size: clamp(36px, 4.6vw, 64px); }
.lp-hero .lead { margin-top: 24px; }
.lp-hero .btn-pair { margin-top: 32px; }
.lp-hero .mini-stats { max-width: 560px; }
.lp-hero .stack { width: 100%; max-width: 580px; justify-self: end; }
.lp-hero .stack-photo--sub { border-color: var(--bg); }

/* serviços do público, cada um com atalho para a proposta já com o serviço marcado */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.svc { display: flex; flex-direction: column; padding: 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.svc .ui-ic { width: 44px; height: 44px; margin-bottom: 18px; }
.svc .ui-ic svg { width: 20px; height: 20px; }
.svc h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.svc p { margin-top: 8px; font-size: 14.5px; color: var(--fg-2); }
.svc-go { margin-top: auto; padding-top: 20px; }
.svc-go .link-arrow { font-size: 14px; }
.on-paper .svc { background: #fff; border-color: transparent; box-shadow: var(--shadow-paper); }
.svc.svc--cta { background: linear-gradient(160deg, rgba(243, 199, 22, 0.12), rgba(243, 199, 22, 0.02) 62%), var(--surface); border-color: rgba(243, 199, 22, 0.3); }
.svc--cta .ui-ic { background: var(--yellow); color: var(--yellow-ink); }
/* botão do card de contato ocupa a largura útil do card (o rótulo longo não passa da margem) */
.svc--cta .svc-go .btn { width: 100%; justify-content: center; padding-inline: 14px; }
.on-paper .svc.svc--cta { background: var(--ink); border-color: transparent; color: #fff; }
.on-paper .svc--cta h3 { color: #fff; }
.on-paper .svc--cta p { color: rgba(242, 244, 247, 0.72); }
.svc-switch { margin-top: clamp(28px, 3vw, 40px); font-size: 15px; color: var(--fg-2); }
.svc-switch .link-arrow { margin-left: 6px; font-size: 15px; }
/* no celular o link desce de linha e alinha com a pergunta */
@media (max-width: 560px) { .svc-switch .link-arrow { margin-left: 0; } }

/* cards de serviço em vidro (mesmo tratamento da pílula do cabeçalho) */
.svc-grid--glass .svc {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 40px -22px rgba(0, 0, 0, 0.7);
}
.svc-grid--glass .svc.svc--cta {
  background: linear-gradient(135deg, rgba(243, 199, 22, 0.16), rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.06));
  border-color: rgba(243, 199, 22, 0.32);
}
/* luz suave atrás dos cards, para o vidro ter o que desfocar */
.section--glow { isolation: isolate; }
.section--glow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 42% 38% at 18% 62%, rgba(243, 199, 22, 0.07), transparent 70%),
    radial-gradient(ellipse 46% 42% at 82% 48%, rgba(84, 118, 170, 0.16), transparent 72%);
  pointer-events: none;
}

/* passos sem numeração (o título do card abre o card) */
.steps--plain .step::before { content: none; }
.steps--plain .step { padding: 28px 26px 30px; }

/* faixa de logos sem fundo nem rótulo */
.logos--bare { grid-template-columns: minmax(0, 1fr); }

/* frase que não pode quebrar no meio (em telas estreitas volta a quebrar) */
.nowrap-wide { white-space: nowrap; }
@media (max-width: 560px) { .nowrap-wide { white-space: normal; } }

/* Trabalhe conosco: formulário na largura toda (três colunas) e, embaixo, três quadros lado a lado */
.form-layout--stack { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.form-grid.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.form-layout--stack .form-actions .small { max-width: none; }
.form-grid--3 .field--wide { grid-column: span 2; }
.form-grid--3 .field--cv { grid-template-rows: auto 1fr; align-self: stretch; }
.form-grid--3 .field--cv .drop { height: 100%; }
.form-grid--3 .field--top { align-self: start; }
/* título e texto do topo alinhados pela linha de cima (Solicitar proposta) */
.page-hero-split--top { align-items: start; }
.page-hero-split--top .lead { padding-top: 0.5em; }
/* opções em lista compacta, num quadro só (áreas de interesse, curso de vigilante) */
.chips--list {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 0 24px;
  padding: 10px 18px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
}
.chips--list .chip span { padding: 8px 0; border: 0; border-radius: 0; background: none; font-weight: 500; line-height: 1.35; }
.chips--list .chip input:checked + span { background: none; }
.chips--inline { display: flex; flex-wrap: wrap; align-items: center; min-height: 52px; padding-block: 0; }
.field.has-error .chips--list { border-color: var(--danger); }
.aside.aside--row { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.aside--row > .card { padding: 26px; }
.aside--row .note-ic { display: block; margin-bottom: 14px; color: var(--yellow); }
.aside--row p { font-size: 14px; line-height: 1.6; color: var(--fg-2); }
@media (max-width: 1080px) {
  .form-grid.form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--3 .field--wide { grid-column: 1 / -1; }
  .chips--list { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .aside.aside--row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-grid.form-grid--3 { grid-template-columns: 1fr; }
  .chips--list { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .lp-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; gap: 10px; }
  .svc { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px; border-radius: var(--r-sm); }
  .svc > * { grid-column: 2; }
  .svc .ui-ic { grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; }
  .svc h3 { font-size: 16.5px; }
  .svc p { margin-top: 4px; font-size: 14px; }
  .svc-go { padding-top: 10px; }
}

/* ---------- 15. Responsivo ---------- */
@media (max-width: 1080px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 32px; }
  .proof-side .ui { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-layout { grid-template-columns: 1fr; }
  .aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* menu: 5 itens; em telas médias aperta o espaçamento e abaixo de 1100px vira o menu hambúrguer */
@media (max-width: 1280px) {
  .nav-pill { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav-menu { justify-self: center; }
  .nav-menu a { padding: 9px 13px; }
}
@media (max-width: 1100px) {
  .nav-pill { grid-template-columns: auto 1fr auto; padding-left: 18px; }
  .nav-menu { display: none; }
  .nav-toggle { display: grid; }
}

@media (max-width: 920px) {
  .sec-head { grid-template-columns: 1fr; }
  .sec-head > p { justify-self: start; padding-top: 0; }
  .hero-foot { grid-template-columns: 1fr; }
  .logos { grid-template-columns: 1fr; gap: 18px; }
  .logos-label { max-width: none; }
  .proof-main { grid-template-columns: 1fr; }
  .benefit-foot { grid-template-columns: 1fr; }
  .fronts-grid { grid-template-columns: 1fr; }
  .stack { max-width: 560px; width: 100%; margin-inline: auto; }
  .bgrid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split-media { max-width: 560px; }
  .page-hero-split { grid-template-columns: 1fr; }
  .page-hero-split .lead { justify-self: start; }
  .prose-wrap { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; display: none; }
  .f-band { grid-template-columns: 1fr; align-items: start; }
  .f-contact { justify-self: start; text-align: left; }
  .f-links { justify-self: start; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .m-a, .m-b, .m-c, .m-d, .m-e { grid-column: span 1; grid-row: span 1; }
  .m-a { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 860px) {
  .pi-track { height: 260vh; }
  .pi-copy { left: 16px; right: 16px; top: auto; bottom: 64px; width: auto; transform: none; }
  .pi-step { top: auto; bottom: 0; padding: 18px 20px 20px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--pi-bg) 84%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(16px); }
  .pi-step.is-active { transform: none; }
  .pi-step.is-past { transform: translateY(-16px); }
  .pi-step h2 { font-size: clamp(25px, 7vw, 32px); }
  .pi-step h3 { font-size: 23px; }
  .pi-step p { margin-top: 10px; font-size: 14px; }
  .pi-num { margin-bottom: 8px; }
  .pi-progress { right: 12px; top: 110px; transform: none; }
  .pi-hint { bottom: 22px; font-size: 10px; }
  .pole-immersive.is-static .pi-copy { grid-template-columns: 1fr; width: calc(100% - 32px); }
  .pole-immersive.is-static .pi-step { padding: 0; background: none; backdrop-filter: none; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .nav-pill { height: 60px; padding: 0 7px 0 16px; }
  .brand img { height: 34px; }
  .nav-end .btn { display: none; }
  .hero-banner { height: 78svh; min-height: 480px; }
  .hero-banner-copy { bottom: 108px; }
  .hero-banner-title { font-size: clamp(34px, 10vw, 44px); }
  .hero-banner img { object-position: 64% 60%; }
  .hero-title { font-size: clamp(36px, 10.6vw, 46px); text-wrap: balance; }
  .hero-title .ln { display: inline; text-wrap: wrap; }
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prose th, .prose td { min-width: 140px; }
  .hero-media { aspect-ratio: 4 / 3.4; }
  .hero-media .ui--b { display: none; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-stat:last-child { grid-column: span 2; }
  .proof-side { display: flex; }
  .metric-line { grid-template-columns: 1fr; }
  .stack { aspect-ratio: 1 / 1.15; }
  .stack .ui { transform: scale(0.9); }
  .bcard-visual { aspect-ratio: 1 / 1; }
  .v-totem .ui--b { right: 4%; }
  .feat-grid, .steps, .steps--3 { grid-template-columns: 1fr !important; }
  .mini-stats { gap: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .aside { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; }
  .f-blocks { grid-template-columns: 1fr; }
  .f-legal { flex-direction: column; align-items: flex-start; }
  .split-media > .ui--a { right: 8px; }
  .split-media > .ui--b { left: 8px; }
  .doc { grid-template-columns: auto minmax(0, 1fr); }
  .doc .go { grid-column: 2; }
  .mosaic { grid-auto-rows: 140px; }
  .cookie-bar { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 18px; }
  .whats-float { width: 52px; height: 52px; right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .inl-media img, .badge-spin svg.ring, .marquee-track, .live-dot, .dash-feed li { animation: none; }
  .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee-group[aria-hidden='true'] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-group { flex-wrap: wrap; justify-content: center; row-gap: 24px; }
}