/* ============================================================
   Tworks — home institucional (redesign clean/claro, 2026-08-18)
   Substitui o Tailwind-via-CDN + <style> inline gigante da versão
   anterior. Paleta ancorada nas cores reais do produto (dashboard
   BMS Advisor, dashboard/style.css:22-26) — não copiada do site de
   referência (Greenole), só a estrutura visual foi inspirada nele.
   ============================================================ */

:root {
  --bg: #f7f9fc;
  --bg-soft: #eef2f8;
  --panel: #ffffff;
  --line: #e2e8f2;

  --text: #1a2733;
  --text-strong: #0f1a24;
  --muted: #5b6b7c;
  --muted-soft: #8291a1;

  --primary: #248dd1;
  --primary-deep: #1b6fa8;
  --primary-tint: #eaf4fb;
  --success: #28b779;
  --success-deep: #1f9862;
  --success-tint: #eafbf3;

  --on-primary: #ffffff;
  --on-success: #ffffff;

  /* componentes RGB (sem "rgb(...)" em volta) da entidade de IA - permite montar
     rgba(var(--orb-x), alpha) com opacidades diferentes em cada camada do orbe. */
  --orb-deep: 27, 111, 168;
  --orb-core: 36, 141, 209;
  --orb-mid: 118, 184, 231;
  --orb-pale: 205, 229, 247;

  --shadow-color: rgba(16, 42, 67, 0.10);
  --shadow-color-soft: rgba(16, 42, 67, 0.06);
  --shadow: 0 24px 60px var(--shadow-color);
  --shadow-soft: 0 12px 32px var(--shadow-color-soft);

  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --font-heading: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container: 1180px;
  --section-pad: clamp(64px, 9vw, 120px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* usado só nas seções de showcase de dashboard (home e páginas de segmento) - os
   prints têm muito texto pequeno, precisam de bem mais espaço que o container
   padrão de 1180px pra ficarem legíveis. */
.container-wide {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--section-pad) 0;
}

.section-bg-soft {
  background: var(--bg-soft);
}

.section-panel {
  background: var(--bg-soft);
  border-radius: var(--radius-xl);
}

/* ---- Eyebrow / kicker (rótulo estrutural acima de cada título de seção) ----
   Redesenhado em 2026-08-20: a versão anterior (pílula com fundo azul-claro +
   bolinha + leve brilho no texto) se repetia idêntica em ~28 lugares do site
   inteiro - exatamente a cara de "chip de eyebrow" genérico que qualquer
   gerador de landing page produz por padrão, não uma escolha da marca.
   Duas famílias novas, nenhuma com pílula/fundo/bolinha/glow, as duas
   emprestando a linguagem visual do próprio produto (instrumento de
   monitoramento/precisão) em vez de decoração arbitrária:
   - .eyebrow (padrão): cantos de mira/viewfinder - o mesmo tipo de marca
     usada em telas de monitoramento de verdade pra indicar "isto está sendo
     observado/medido com precisão". Usada em seções que apresentam um
     recurso, prova ou resultado.
   - .eyebrow-path: rótulo tipo trilha/breadcrumb (uma barra "/" antes do
     texto). Usada em seções mais de apoio/navegação - desafios, FAQ,
     confiança, páginas legais, trajetória da empresa. */
.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary-deep);
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--primary);
}

.eyebrow::before {
  top: 0;
  left: 0;
  border-width: 1.5px 0 0 1.5px;
}

.eyebrow::after {
  bottom: 0;
  right: 0;
  border-width: 0 1.5px 1.5px 0;
}

.eyebrow-path {
  padding: 0;
  color: var(--muted-soft);
}

.eyebrow-path::before {
  content: "/";
  position: static;
  width: auto;
  height: auto;
  border: none;
  margin-right: 9px;
  color: var(--primary);
  font-weight: 800;
}

.eyebrow-path::after {
  content: none;
}

/* legado: nenhum HTML novo usa mais a bolinha, mas se alguma sobrar em algum
   canto esquecido do site ela só some, em vez de aparecer solta e quebrada. */
.eyebrow-dot {
  display: none;
}

.section-heading {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* .accent-primary/.accent-success valem em qualquer título, não só dentro de
   .section-heading (tinha caso destacado que ficava sem cor nenhuma por causa
   desse escopo restrito demais - ex.: "operação inteira" no título da seção de
   posicionamento). */
.accent-primary {
  color: var(--primary);
  /* mesmo brilho sutil do .eyebrow, pra família toda de "texto azul" do site
     ter o mesmo tratamento visual. */
  text-shadow: 0 0 16px rgba(36, 141, 209, 0.35);
}

.accent-success { color: var(--success-deep); }

.section-sub {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 640px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 14px 30px rgba(36, 141, 209, 0.28);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(36, 141, 209, 0.34);
}

.btn-ghost {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
}

.btn-on-dark {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}

.btn-on-dark:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------- header ---------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 0;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

.site-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  /* nunca deixa o flex encolher a logo pra "achar" espaço - com o texto em
     nowrap, encolher a caixa só faz o texto vazar por cima do item vizinho
     em vez de reservar espaço de verdade (bug visto com "BMS Advisor" +
     "Funcionalidades" colados em português). */
  flex-shrink: 0;
}

.site-logo img {
  height: 30px;
  width: auto;
}

.site-logo-word {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-strong);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color 140ms ease;
}

.site-nav a:hover {
  color: var(--primary-deep);
}

.nav-cta-mobile {
  display: none;
}

/* .site-nav a (0,1,1) tem mais especificidade que .btn-primary (0,1,0) sozinho e
   pintava o texto de cinza-mudo em vez de branco - força a cor certa do botão. */
.site-nav a.nav-cta-mobile {
  color: var(--on-primary);
}

.site-nav a.nav-cta-mobile:hover {
  color: var(--on-primary);
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.header-client-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 140ms ease;
  white-space: nowrap;
}

.header-client-link:hover {
  color: var(--primary-deep);
}

/* ---------------------------------- seletor de idioma (bandeiras) ---------------------------------- */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-switch button {
  display: flex;
  padding: 0;
  line-height: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1.5px solid transparent;
  /* BR vem selecionada por padrão (cheia), a outra fica meio apagada até o
     usuário clicar - só o JS decide qual fica ativa de verdade (is-active). */
  opacity: 0.38;
  filter: grayscale(0.4);
  transition: opacity 140ms ease, filter 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.lang-switch button:hover {
  opacity: 0.75;
  filter: none;
}

.lang-switch button.is-active {
  opacity: 1;
  filter: none;
  border-color: var(--primary);
  transform: scale(1.08);
}

.nav-lang-switch-mobile {
  display: none;
}

.nav-cta-mobile-secondary {
  display: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------- mega menu (segmentos) ---------------------------------- */

.nav-item-mega {
  position: relative;
}

.nav-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  transition: color 140ms ease;
}

.nav-mega-trigger svg {
  transition: transform 160ms ease;
}

.nav-item-mega:hover .nav-mega-trigger,
.nav-item-mega:focus-within .nav-mega-trigger,
.nav-item-mega.is-open .nav-mega-trigger {
  color: var(--primary-deep);
}

.nav-item-mega:hover .nav-mega-trigger svg,
.nav-item-mega:focus-within .nav-mega-trigger svg,
.nav-item-mega.is-open .nav-mega-trigger svg {
  transform: rotate(180deg);
}

.nav-mega-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 232px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 90;
}

.nav-item-mega:hover .nav-mega-panel,
.nav-item-mega:focus-within .nav-mega-panel,
.nav-item-mega.is-open .nav-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-mega-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  color: var(--text) !important;
  font-weight: 400 !important;
}

.nav-mega-item:hover {
  background: var(--bg-soft);
}

.nav-mega-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--primary-tint);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-mega-icon svg {
  width: 14px;
  height: 14px;
}

.nav-mega-item strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-strong);
  white-space: normal;
}

/* ---------------------------------- hero ---------------------------------- */

.hero-wrap {
  padding: 132px 0 40px;
}

.hero-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.hero-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* mesmo véu preto em gradiente das páginas de segmento: mais forte à
     esquerda (onde fica o texto), esvaindo pra transparente à direita - mais
     um leve reforço vertical embaixo, pra manter os botões legíveis mesmo se
     a foto for clara ali. */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.42) 32%, rgba(0, 0, 0, 0.16) 58%, rgba(0, 0, 0, 0) 78%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.4) 100%);
}

.hero-content {
  position: relative;
  padding: 56px clamp(28px, 5vw, 64px) 64px;
  max-width: 760px;
  color: #fff;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfeaff;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}

.hero-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #5ed1ff;
  animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero-content h1 {
  color: #fff;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}

.hero-content p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.12rem;
  max-width: 560px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------------------------------- brain / positioning ---------------------------------- */

.brain-panel {
  padding: clamp(32px, 4vw, 52px);
  display: grid;
  /* coluna da imagem bem maior que antes - o celular precisa de espaço de
     verdade pra crescer (ver .brain-phone-img). */
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.brain-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  margin-bottom: 20px;
}

.brain-copy p {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 14px;
  max-width: 560px;
}

.brain-lead {
  margin-bottom: 26px;
}

/* lista de destaques em vez de parágrafo corrido - mais fácil de escanear */
.brain-highlights {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brain-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.brain-highlight-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-tint);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.brain-highlight-item p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: none;
}

.brain-highlight-item strong {
  color: var(--text-strong);
}

.brain-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brain-phone-img {
  /* a imagem agora já vem recortada rente ao aparelho (era um quadrado com
     muito fundo sobrando nas laterais) - com menos "ar" ao redor, o celular
     lê bem maior mesmo com um max-width menor que antes. */
  width: 100%;
  max-width: 480px;
  height: auto;
  /* trava por ALTURA de viewport também (não só largura) - numa tela alta o
     max-width:480px sozinho já cabe tranquilo, mas num monitor comum com o
     navegador maximizado (altura útil ~950-1080px) essa imagem alta (proporção
     de foto de celular, 810x1220) sozinha passava de 720px e estourava a
     seção. object-fit:contain com max-height faz a imagem encolher preservando
     a proporção só quando a altura disponível for o fator mais apertado -
     telas realmente altas continuam com os 480px de largura de sempre. */
  max-height: 58vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.phone-mock {
  /* min() em vez de largura fixa: em telas muito estreitas (~320-344px) 280px
     fixo não cabia dentro do .brain-panel (padding + espaço do texto ao lado) e
     causava scroll horizontal na página inteira. */
  width: min(280px, 100%);
  background: #0f1a24;
  border-radius: 34px;
  padding: 12px;
  box-shadow: var(--shadow);
}

.phone-mock-screen {
  background: #eef4f9;
  border-radius: 24px;
  overflow: hidden;
  /* antes tinha um min-height fixo que forçava o "celular" a ficar bem mais
     alto que o conteúdo real precisava - a altura agora só segue o conteúdo
     (header + mensagens + rodapé), ficando com proporção de aparelho de
     verdade em vez de uma tela esticada. */
  display: flex;
  flex-direction: column;
}

.phone-mock-bar {
  background: #075e54;
  color: #fff;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
}

.phone-mock-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #128c7e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  overflow: hidden;
}

.phone-mock-avatar img {
  /* preenche quase todo o círculo, tipo foto de perfil de verdade - não um
     ícone pequeno flutuando no meio de um fundo verde. */
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.phone-mock-body {
  flex: 1;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background-color: #e5ded6;
  /* padrão do papel de parede do WhatsApp: pontinhos sutis repetidos, não só
     uma cor chapada. */
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
}

.phone-mock-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f0f0f0;
}

.phone-mock-input-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  color: #9aa3ab;
  font-size: 0.74rem;
}

.phone-mock-input-field svg {
  flex: 0 0 auto;
  color: #8a8f94;
}

.phone-mock-send {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #128c7e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.chat-bubble {
  max-width: 82%;
  padding: 7px 11px;
  border-radius: 12px;
  font-size: 0.76rem;
  line-height: 1.32;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.chat-bubble.in {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 3px;
  color: #24303a;
}

.chat-bubble.out {
  align-self: flex-end;
  background: #d9fdd3;
  border-top-right-radius: 3px;
  color: #1a2e1a;
}

.chat-bubble strong {
  display: block;
  font-size: 0.68rem;
  color: var(--success-deep);
  margin-bottom: 3px;
  font-weight: 800;
}

.chat-bubble-chart {
  max-width: 92%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-chart-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #495a68;
}

.chat-chart-legend {
  display: flex;
  gap: 10px;
  margin-top: 1px;
}

.chat-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #6b7c8a;
}

.chat-chart-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.chat-chart {
  width: 100%;
  height: 56px;
  display: block;
  margin: 1px 0;
}

.chat-chart-caption {
  display: block;
  font-size: 0.68rem;
  color: #6b7c8a;
}

/* ---------------------------------- segments ---------------------------------- */

.segments-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.segments-sub {
  color: var(--muted-soft);
  font-size: 1.05rem;
  max-width: 360px;
  font-style: italic;
}

.segments-track-wrap {
  position: relative;
}

.segments-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.segments-track::-webkit-scrollbar {
  display: none;
}

.segment-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.segment-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.segment-photo {
  position: relative;
  height: 180px;
}

.segment-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.segment-icon {
  position: absolute;
  left: 16px;
  bottom: -20px;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--primary-deep);
}

.segment-body {
  padding: 32px 18px 20px;
}

.segment-body h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.segment-body p {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 14px;
  min-height: 42px;
}

.segment-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.segments-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.segments-nav button {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: border-color 140ms ease, color 140ms ease;
}

.segments-nav button:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
}

/* ---------------------------------- bento features ---------------------------------- */

.bento-panel {
  padding: clamp(40px, 6vw, 72px);
}

.bento-panel .section-heading {
  margin-bottom: 36px;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* ---------------------------------- destaque de machine learning (home, dentro de Funcionalidades) ---------------------------------- */
/* reaproveita .segment-showcase-list (já definida mais abaixo, criada
   originalmente pras páginas de segmento) - mesma linguagem visual de
   checklist, evita duplicar CSS. */

.ml-panel {
  padding: clamp(40px, 6vw, 72px);
  margin-top: 22px;
}

.ml-panel-head .section-heading {
  margin-bottom: 0;
}

.ml-panel-head .section-lead {
  margin-top: 10px;
  max-width: 640px;
}

.ml-list {
  margin-top: 28px;
}

.bento-card {
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  min-height: 170px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bento-card.is-fill {
  background: var(--primary);
  color: #fff;
}

.bento-card.is-outline {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
}

.bento-card .bento-index {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.bento-card h4 {
  font-size: 1.05rem;
  color: inherit;
}

.bento-card.is-fill h4 { color: #fff; }

.bento-card p {
  font-size: 0.88rem;
  line-height: 1.5;
}

.bento-card.is-fill p { color: rgba(255, 255, 255, 0.86); }
.bento-card.is-outline p { color: var(--muted); }

/* ---------------------------------- dashboard showcase ---------------------------------- */

.showcase-grid {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.showcase-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  margin-bottom: 18px;
}

.showcase-copy > p {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 24px;
}

.showcase-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
  color: var(--text);
  font-size: 0.98rem;
}

.showcase-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--success-tint);
  color: var(--success-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-top: 1px;
}

.browser-mock {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* sombra mais forte e "solta" (offset maior, blur maior) que o --shadow
     padrão do resto do site - reforça o efeito 3D junto com a mancha
     desfocada de .showcase-media::after atrás dela. */
  box-shadow: 0 40px 70px -22px rgba(15, 26, 36, 0.45), 0 12px 28px -10px rgba(15, 26, 36, 0.22);
  border: 1px solid var(--line);
  background: var(--panel);
}

.browser-mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #eef2f8;
  border-bottom: 1px solid var(--line);
}

.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d7dee8;
}

.browser-mock-frame {
  position: relative;
  /* valor inicial só pra ter uma proporção sensata antes do JS carregar - o
     carrossel (home.js) troca isso pra bater exatamente com a proporção
     nativa de cada print ativo (elas variam um pouco entre si: o de data
     centers é bem mais "quadrado" que os outros dois), então nenhum print
     nunca sobra como friso/letterbox nas laterais, sempre preenche 100%. */
  aspect-ratio: 1746 / 903;
  transition: aspect-ratio 320ms ease;
  overflow: hidden;
  background: #f2f5f9;
}

.browser-mock-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain (não cover): mesmo durante os 320ms de transição de proporção do
     quadro (entre a proporção da imagem que está saindo e a que está
     entrando), garante que nunca corta nada do print, só a variação da
     imagem antiga/nova ficando levemente "sobrando" por uma fração de
     segundo - preferível a arriscar cortar conteúdo. */
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 260ms ease;
}

.browser-mock-frame img.is-active {
  opacity: 1;
}

.showcase-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.showcase-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: var(--line);
  padding: 0;
}

.showcase-dots button.is-active {
  background: var(--primary);
  width: 22px;
  border-radius: 999px;
}

/* ---------------------------------- cards flutuantes nos cantos (efeito 3D) ---------------------------------- */
/* pequenos cards "soltos" sobrepondo os cantos do print do dashboard, dando
   profundidade/camadas - mesmo recurso que o site de referência usa em cima dos
   mockups de produto. .showcase-media é o wrapper com position:relative que os
   posiciona por cima do .browser-mock. */

.showcase-media {
  position: relative;
}

/* sombra difusa "no fundo", atrás da tela do dashboard - não é o box-shadow
   colado na borda do card, é um brilho escuro e desfocado meio solto atrás
   dele, dando a impressão de que a tela está flutuando/em 3D sobre a página. */
.showcase-media::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -8%;
  height: 55%;
  background: radial-gradient(ellipse at center, rgba(15, 26, 36, 0.4), rgba(15, 26, 36, 0) 72%);
  filter: blur(30px);
  z-index: -1;
}

.showcase-corner-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 36px -12px rgba(15, 26, 36, 0.32), 0 4px 12px rgba(15, 26, 36, 0.1);
  padding: 14px 20px;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-strong);
  white-space: nowrap;
}

/* 4 posições possíveis (varia por seção, pra não ficar tudo igual) */
.showcase-corner-card.is-top-left { top: -16px; left: -20px; transform: rotate(-3deg); }
.showcase-corner-card.is-bottom-right { bottom: -16px; right: -20px; transform: rotate(2.5deg); }
.showcase-corner-card.is-top-right { top: -14px; right: -18px; transform: rotate(3deg); }
.showcase-corner-card.is-bottom-left { bottom: -14px; left: -18px; transform: rotate(-2.5deg); }

/* 2 tamanhos, pra não ficar tudo do mesmo peso visual */
.showcase-corner-card.is-sm {
  padding: 9px 14px;
  font-size: 0.78rem;
  gap: 8px;
}

.showcase-corner-card.is-lg {
  padding: 18px 24px;
  font-size: 1.05rem;
  gap: 12px;
}

.showcase-corner-card .corner-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--success);
  flex: 0 0 auto;
  animation: pulse-dot 1.8s ease-in-out infinite;
}

.showcase-corner-card.is-lg .corner-dot {
  width: 11px;
  height: 11px;
}

.showcase-corner-card svg {
  flex: 0 0 auto;
  color: var(--primary-deep);
}

/* ---------------------------------- trust / integrations ---------------------------------- */

.trust-strip {
  text-align: center;
}

.trust-strip .eyebrow {
  margin-bottom: 18px;
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 7vw, 76px);
  margin-top: 32px;
}

.trust-logos img {
  height: clamp(40px, 5vw, 56px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
  /* lógica invertida de propósito: coloridas por padrão (mais vivo, chama mais
     atenção), viram cinza só ao passar o mouse. */
  filter: none;
  opacity: 1;
  transition: opacity 180ms ease, filter 180ms ease;
}

.trust-logos img:hover {
  filter: grayscale(1);
  opacity: 0.6;
}

.trust-sub {
  color: var(--muted);
  font-size: 1rem;
  margin-top: 6px;
}

.trust-protocols-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-soft);
  margin-top: 44px;
}

.trust-logos-protocols {
  margin-top: 20px;
  gap: clamp(28px, 6vw, 56px);
}

.trust-logos-protocols img {
  height: clamp(36px, 4.6vw, 48px);
}

/* ---------------------------------- CTA ---------------------------------- */

.cta-panel {
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 56px);
  text-align: center;
}

.cta-panel h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  margin-bottom: 10px;
}

.cta-panel > p {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 36px;
}

.cta-form {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  text-align: left;
}

.cta-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cta-form-row > * {
  min-width: 0;
}

.cta-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

.cta-field input,
.cta-field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  font: inherit;
  color: var(--text);
}

.cta-field input:focus,
.cta-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

.cta-submit {
  width: 100%;
  margin-top: 4px;
}

.cta-disclaimer {
  font-size: 0.78rem;
  color: var(--muted-soft);
  text-align: center;
  margin-top: 14px;
}

.cta-status {
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  min-height: 20px;
}

.cta-status.is-success { color: var(--success-deep); }
.cta-status.is-error { color: #c0392b; }

/* ---------------------------------- FAQ ---------------------------------- */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* itens de grid têm min-width:auto implícito (= min-content do conteúdo, não 0) -
   sem isso, a coluna cresce além do container no mobile quando empilha em 1
   coluna só, e todo o card (com bordas de item de FAQ, formulário do chat etc.)
   fica maior que a tela, causando scroll horizontal na página inteira. */
.faq-grid > * {
  min-width: 0;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-strong);
}

.faq-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease, background-color 200ms ease;
  font-size: 0.9rem;
  color: var(--muted);
}

.faq-item.is-open .faq-icon {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease;
}

.faq-answer p {
  color: var(--muted);
  font-size: 0.94rem;
  padding-bottom: 18px;
  max-width: 90%;
}

.ai-chat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-soft);
  /* o card tem um teto de altura fixo - depois de algumas mensagens é o
     .ai-chat-log que rola por dentro (ver abaixo), o card em volta nunca
     cresce. Sem isso o card esticava sem limite conforme a conversa (o JS já
     fazia log.scrollTop = log.scrollHeight esperando um scroll interno, só
     faltava o CSS que torna esse scroll possível) - bug real reportado em
     produção (2026-08-20). */
  display: flex;
  flex-direction: column;
  max-height: 560px;
}

.ai-chat-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.ai-chat-card-head h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.ai-chat-card-head p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 0;
}

/* ---------------------------------- orbe de IA (identidade visual, CSS puro) ---------------------------------- */
/* Recolorido em 2026-08-20: a versão original (herdada do site institucional
   anterior) era um gradiente branco/ciano, pensado pra um fundo escuro atrás -
   sobre fundo claro isso ficava com um círculo preto atrás pra dar contraste,
   o que o usuário achou estranho. Removido o círculo escuro (.ai-orb-badge
   volta a ser só um wrapper transparente) e todos os tons da entidade
   passaram de branco/ciano pra azul claro (mesma família de --primary), pra
   funcionar sozinha em cima de fundo branco - forma orgânica e animações
   (pulso/rotação/respiração) inalteradas, só a paleta muda. */

.ai-orb-badge {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ai-orb-badge.is-sm {
  width: 40px;
  height: 40px;
}

.ai-energy-field {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  pointer-events: none;
  isolation: isolate;
  animation: ai-orb-drift 5.6s ease-in-out infinite;
}

.ai-energy-field::before {
  content: "";
  position: absolute;
  width: 48px;
  height: 42px;
  border-radius: 37% 63% 48% 52% / 54% 38% 62% 46%;
  background:
    radial-gradient(ellipse at 32% 46%, rgba(var(--orb-mid), 0.4), transparent 30%),
    radial-gradient(ellipse at 60% 38%, rgba(var(--orb-core), 0.32), transparent 38%),
    radial-gradient(ellipse at 62% 70%, rgba(var(--orb-deep), 0.22), transparent 42%),
    radial-gradient(ellipse at 28% 76%, rgba(var(--orb-mid), 0.22), transparent 44%);
  filter: blur(10px);
  opacity: 0.56;
  pointer-events: none;
  z-index: -1;
  animation: ai-orb-halo 7.2s ease-in-out infinite;
  will-change: transform, opacity, filter;
}

.ai-orb-icon {
  width: 28px;
  height: 28px;
  position: relative;
  display: block;
  border-radius: 40% 60% 45% 55% / 58% 42% 62% 38%;
  background:
    radial-gradient(circle at 51% 49%, rgba(var(--orb-deep), 0.5) 0 10%, rgba(var(--orb-core), 0.5) 20%, rgba(var(--orb-mid), 0.4) 34%, transparent 58%),
    radial-gradient(ellipse at 28% 28%, rgba(255, 255, 255, 0.45), transparent 34%),
    radial-gradient(ellipse at 72% 34%, rgba(var(--orb-pale), 0.42), transparent 38%),
    radial-gradient(ellipse at 72% 76%, rgba(var(--orb-core), 0.3), transparent 44%),
    radial-gradient(ellipse at 24% 74%, rgba(var(--orb-mid), 0.32), transparent 46%);
  filter:
    drop-shadow(0 0 6px rgba(var(--orb-pale), 0.7))
    drop-shadow(0 0 14px rgba(var(--orb-core), 0.4));
  transform-origin: center;
  animation: ai-orb-pulse 4.2s ease-in-out infinite, ai-organic-rotate 9.6s ease-in-out infinite;
  transition: filter 0.25s ease, scale 0.25s ease;
  will-change: transform, opacity, border-radius, filter;
}

.ai-orb-icon::before,
.ai-orb-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 33% 67% 41% 59% / 56% 34% 66% 44%;
  pointer-events: none;
}

.ai-orb-icon::before {
  background:
    radial-gradient(ellipse at 18% 36%, rgba(var(--orb-pale), 0.62), transparent 24%),
    radial-gradient(ellipse at 37% 12%, rgba(255, 255, 255, 0.46), transparent 24%),
    radial-gradient(ellipse at 68% 20%, rgba(var(--orb-mid), 0.44), transparent 28%),
    radial-gradient(ellipse at 88% 48%, rgba(var(--orb-pale), 0.5), transparent 25%),
    radial-gradient(ellipse at 70% 88%, rgba(var(--orb-core), 0.32), transparent 31%),
    radial-gradient(ellipse at 28% 84%, rgba(var(--orb-pale), 0.44), transparent 29%),
    radial-gradient(ellipse at 48% 52%, rgba(255, 255, 255, 0.32), transparent 42%);
  filter: blur(1.5px);
  opacity: 0.82;
  animation: smokeExpand 4.8s ease-in-out infinite;
  will-change: transform, opacity, filter;
}

.ai-orb-icon::after {
  inset: 7px;
  border-radius: 47% 53% 45% 55% / 52% 46% 54% 48%;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--orb-deep), 0.72) 0 20%, rgba(var(--orb-core), 0.72) 44%, rgba(var(--orb-mid), 0.5) 68%, transparent 100%);
  filter: blur(0.6px);
  opacity: 0.94;
  animation: ai-orb-breathe 3.7s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes ai-orb-pulse {
  0%, 100% { opacity: 0.9; border-radius: 42% 58% 47% 53% / 57% 39% 61% 43%; transform: scale(0.97); }
  36% { opacity: 1; border-radius: 31% 69% 55% 45% / 43% 62% 38% 57%; transform: scale(1.04); }
  62% { opacity: 0.96; border-radius: 61% 39% 42% 58% / 48% 37% 63% 52%; transform: scale(1); }
}

@keyframes smokeExpand {
  0%, 100% { opacity: 0.62; border-radius: 38% 62% 44% 56% / 58% 42% 61% 39%; transform: translate(-0.5px, 0.4px) scale(0.76, 0.82); filter: blur(1.7px); }
  44% { opacity: 0.9; border-radius: 68% 32% 56% 44% / 39% 65% 35% 61%; transform: translate(0.9px, -0.8px) scale(1.22, 1.08); filter: blur(2.4px); }
  73% { opacity: 0.76; border-radius: 45% 55% 35% 65% / 62% 36% 64% 38%; transform: translate(-0.8px, 0.7px) scale(1.04, 1.18); filter: blur(1.9px); }
}

@keyframes ai-organic-rotate {
  0%, 100% { rotate: -1.2deg; }
  32% { rotate: 3.4deg; }
  67% { rotate: -2.6deg; }
}

@keyframes ai-orb-breathe {
  0%, 100% { opacity: 0.86; transform: scale(0.97); }
  48% { opacity: 1; transform: scale(1.02); }
}

@keyframes ai-orb-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  24% { transform: translate(0.8px, -0.8px) rotate(1.8deg); }
  52% { transform: translate(-0.7px, 0.9px) rotate(-1.2deg); }
  78% { transform: translate(0.5px, 0.2px) rotate(0.8deg); }
}

@keyframes ai-orb-halo {
  0%, 100% { opacity: 0.42; transform: scale(0.82) rotate(-8deg); }
  44% { opacity: 0.74; transform: scale(1.14) rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-energy-field,
  .ai-energy-field::before,
  .ai-orb-icon,
  .ai-orb-icon::before,
  .ai-orb-icon::after {
    animation: none;
  }
}

.ai-chat-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  margin-bottom: 14px;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 6px;
}

.ai-chat-input-row {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.ai-chat-input-row input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font: inherit;
}

.ai-chat-input-row button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* ---------------------------------- footer ---------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 32px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-brand img {
  height: 30px;
  margin-bottom: 14px;
}

.footer-brand p {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 260px;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: border-color 140ms ease, color 140ms ease;
}

.footer-social a:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
}

.footer-col h5 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 16px;
}

.footer-col ul {
  display: grid;
  gap: 10px;
}

.footer-col a {
  color: var(--muted);
  font-size: 0.92rem;
  transition: color 140ms ease;
}

.footer-col a:hover {
  color: var(--primary-deep);
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted-soft);
  font-size: 0.82rem;
}

.footer-bottom a {
  color: var(--muted-soft);
}

.footer-bottom a:hover {
  color: var(--primary-deep);
}

/* ---------------------------------- páginas internas: hero simples ---------------------------------- */
/* usado em /estimativa.html (sem foto) e reaproveitável por outras páginas de ferramenta */

.tool-hero {
  padding: 148px 0 56px;
  background: linear-gradient(180deg, var(--primary-tint), var(--bg) 78%);
  text-align: center;
}

.tool-hero h1 {
  font-size: clamp(2rem, 4vw, 2.7rem);
  margin: 16px 0 14px;
}

.tool-hero p {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

.tool-steps {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.tool-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.tool-step-index {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* ---------------------------------- foto-hero de segmento (páginas internas) ---------------------------------- */

.segment-hero {
  padding: 108px 0 0;
}

.segment-hero-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
}

.segment-hero-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* sem isso, a imagem (elemento real, "depois" do ::before na ordem de
     geração/pintura) ficava desenhada por cima do gradiente - escondendo o
     véu cinza inteiro mesmo com a regra abaixo correta. */
  z-index: 0;
}

.segment-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* preto da esquerda pra direita - esquerda é onde o texto fica, esvaindo pra
     transparente do lado direito. */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.42) 32%, rgba(0, 0, 0, 0.16) 58%, rgba(0, 0, 0, 0) 78%);
}

/* data centers: foto com muitas luzes coloridas (cabos, LEDs) - precisa de um
   véu mais forte que as outras pra garantir contraste. */
.segment-hero-card.is-strong::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 38%, rgba(0, 0, 0, 0.28) 64%, rgba(0, 0, 0, 0) 84%);
}

.segment-hero-content {
  position: relative;
  z-index: 1;
  padding: 44px;
  max-width: 620px;
}

.segment-hero-content .eyebrow {
  color: #fff;
}

.segment-hero-content .eyebrow::before,
.segment-hero-content .eyebrow::after {
  border-color: #5ed1ff;
}

.segment-hero-content h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin: 14px 0 12px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.segment-hero-content p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.02rem;
  margin-bottom: 22px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------- cards de conteúdo (páginas de segmento) ---------------------------------- */

.info-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.info-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.info-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary-tint);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* variantes de cor pros ícones dos cards de desafio/zona - usa a mesma linguagem de
   cores do produto de verdade (vermelho/âmbar/verde de status nos dashboards reais),
   pra dar mais vida e distinguir visualmente cada página de segmento. */
.info-card-icon.is-red { background: #fdeaea; color: #c0392b; }
.info-card-icon.is-amber { background: #fdf1dc; color: #b26a00; }
.info-card-icon.is-green { background: var(--success-tint); color: var(--success-deep); }
.info-card-icon.is-blue { background: var(--primary-tint); color: var(--primary-deep); }

.info-card h4 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.info-card p {
  color: var(--muted);
  font-size: 0.92rem;
}

.section-lead {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 640px;
  margin-top: 14px;
}

/* ---- Cards de índice (ex.: ICO/IEC na página de hospitais) - mais elevação e cor
   que .info-card, porque representam um número calculado/avaliativo, não um item
   de lista. Wash de cor no topo do card via ::before (fica atrás do conteúdo, que
   é position:relative) + shadow real que aumenta no hover, dando a profundidade
   "bonita" pedida - .info-card de propósito não tem shadow nenhuma, é só borda. ---- */
/* recorte real da tabela de Salas Cirúrgicas do dashboard (mesmo print usado na
   seção "Na prática" logo acima, só que ampliado bem de perto nas colunas ICO/
   IEC) - prova visual concreta de que são colunas de verdade no produto, não
   só um conceito explicado em texto. */
/* cabeçalho da seção em 2 colunas (texto + recorte de tela ao lado) - mesmo
   padrão de .showcase-grid/.segment-showcase já usado no resto do site, só
   que pro bloco de eyebrow/título/lead em vez do dashboard inteiro. Colocar
   a imagem do lado, não embaixo do texto, deixa ela usar uma largura maior
   sem empurrar o resto da seção pra baixo (a altura da linha já é ditada
   pelo texto, que é mais alto que a imagem). */
.metric-head {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

.metric-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.metric-shot-frame {
  max-width: 440px;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 70px -22px rgba(15, 26, 36, 0.4), 0 12px 28px -10px rgba(15, 26, 36, 0.2);
}

.metric-shot-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.metric-shot-caption {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted-soft);
  text-align: center;
}

.metric-duo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 14px;
}

.metric-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  /* sombra "solta" mais forte que o --shadow padrão do site - mesma fórmula já
     usada no mockup de dashboard (.browser-mock) pra dar sensação de elevação/
     3D real, não só uma borda com sombrinha discreta. */
  box-shadow: 0 30px 54px -20px rgba(15, 26, 36, 0.28), 0 8px 20px -8px rgba(15, 26, 36, 0.14);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 130px;
  pointer-events: none;
}

.metric-card.is-primary::before { background: linear-gradient(180deg, var(--primary-tint), transparent); }
.metric-card.is-success::before { background: linear-gradient(180deg, var(--success-tint), transparent); }

.metric-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 70px -22px rgba(15, 26, 36, 0.38), 0 14px 28px -10px rgba(15, 26, 36, 0.2);
}

.metric-card-kicker,
.metric-card-icon,
.metric-card h3,
.metric-card p,
.metric-card-badge {
  position: relative;
}

/* selo com o valor de exemplo (mesmos números da captura de tela logo acima -
   continuidade visual entre "aqui está no produto de verdade" e o card que
   explica o número) - dentro dos limites do card, não pendurado pra fora como
   .showcase-corner-card, porque aqui o card já usa overflow:hidden pro wash
   de cor do topo. */
.metric-card-badge {
  position: absolute;
  top: 28px;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-strong);
  box-shadow: var(--shadow-soft);
}

.metric-card-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.metric-card.is-primary .metric-card-badge-dot { background: var(--success); }
.metric-card.is-success .metric-card-badge-dot { background: var(--success); }

.metric-card-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.metric-card.is-primary .metric-card-kicker { color: var(--primary-deep); }
.metric-card.is-success .metric-card-kicker { color: var(--success-deep); }

.metric-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.metric-card.is-primary .metric-card-icon { background: var(--primary-tint); color: var(--primary-deep); }
.metric-card.is-success .metric-card-icon { background: var(--success-tint); color: var(--success-deep); }

.metric-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.metric-card p {
  color: var(--muted);
  font-size: 0.89rem;
  line-height: 1.42;
}

.metric-insight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 34px 60px -20px rgba(27, 111, 168, 0.45), 0 10px 24px -8px rgba(15, 26, 36, 0.22);
}

.metric-insight-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-insight h4 {
  color: #fff;
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.metric-insight p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.89rem;
  line-height: 1.42;
  max-width: 680px;
}

@media (max-width: 640px) {
  .metric-insight { flex-direction: column; }
}

/* ---------------------------------- assinatura: modo normal x pico (aeroportos) ---------------------------------- */

.mode-compare {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}

.mode-compare-card {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-soft);
}

.mode-compare-card.is-peak {
  border-color: rgba(240, 180, 41, 0.5);
  background: linear-gradient(180deg, rgba(253, 241, 220, 0.55), var(--panel) 40%);
}

.mode-compare-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 16px;
}

.mode-compare-card.is-peak .mode-compare-tag {
  color: #b26a00;
}

.mode-compare-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
}

.mode-compare-card.is-peak .mode-compare-tag::before {
  background: #f0b429;
}

.mode-compare-stats li {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.mode-compare-stats li:first-child { border-top: none; padding-top: 0; }

.mode-compare-stats li span:first-child {
  font-size: 0.88rem;
  color: var(--text);
}

.mode-compare-stats li strong {
  font-family: var(--font-heading);
  font-size: 0.98rem;
}

.mode-bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
}

.mode-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}

.mode-compare-card.is-peak .mode-bar span { background: #f0b429; }

.mode-compare-vs {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--text-strong);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ---------------------------------- assinatura: curva do dia (shoppings) ---------------------------------- */

.day-curve {
  margin-top: 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 28px 20px;
  box-shadow: var(--shadow-soft);
}

.day-curve svg { display: block; width: 100%; height: auto; }

.day-curve-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 6px;
}

.day-curve-labels li {
  list-style: none;
  text-align: center;
}

.day-curve-labels li:first-child { text-align: left; }
.day-curve-labels li:last-child { text-align: right; }

.day-curve-labels strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-strong);
}

.day-curve-labels span {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------------------------------- assinatura: dia comum x dia de evento (arenas) ---------------------------------- */

.event-compare {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.event-compare-legend {
  display: flex;
  gap: 22px;
  font-size: 0.84rem;
  color: var(--muted);
}

.event-compare-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.event-compare-legend span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.event-compare-legend .is-normal::before { background: var(--muted-soft); }
.event-compare-legend .is-event::before { background: #a855f7; }

.event-compare-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 18px;
}

.event-compare-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-strong);
}

.event-compare-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-compare-bar {
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-strong);
  background: var(--bg-soft);
  min-width: 108px;
}

.event-compare-bar.is-event {
  background: linear-gradient(90deg, #a855f7, #ec4899);
  color: #fff;
}

/* ---------------------------------- assinatura: ranking de portfólio (cidades) ---------------------------------- */

.portfolio-ranking {
  margin-top: 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.portfolio-ranking-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 15px 22px;
  border-top: 1px solid var(--line);
}

.portfolio-ranking-row:first-child { border-top: none; }

.portfolio-rank {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: var(--muted-soft);
}

.portfolio-name {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-strong);
}

.portfolio-meta {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 1px;
}

.portfolio-score {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.portfolio-score.is-ok { background: var(--success-tint); color: var(--success-deep); }
.portfolio-score.is-warn { background: #fdf1dc; color: #b26a00; }
.portfolio-score.is-critical { background: #fdeaea; color: #c0392b; }

@media (max-width: 640px) {
  .mode-compare { flex-direction: column; }
  .mode-compare-vs { transform: rotate(90deg); }
  .event-compare-row { grid-template-columns: 1fr; gap: 8px; }
  .portfolio-ranking-row { grid-template-columns: 24px 1fr; row-gap: 4px; }
  .portfolio-score { grid-column: 2; }
}

/* ---------------------------------- carrossel de estimativa (/estimativa.html) ---------------------------------- */

.estimate-section {
  padding-top: 8px;
}

/* Padding lateral reservado pras setas de navegação (.estimate-nav, mais
   abaixo) - elas são position:absolute ancoradas em left:0/right:0 desta
   caixa, ficando dentro dessa sobra em vez de flutuar por cima do conteúdo
   do primeiro/último card visível em .estimate-track. */
.estimate-track-wrap {
  position: relative;
  padding: 0 58px;
}

.estimate-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.estimate-track::-webkit-scrollbar {
  display: none;
}

.estimate-card {
  flex: 0 0 auto;
  width: 320px;
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.estimate-card.has-selected-items {
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.estimate-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary-tint);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.estimate-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.estimate-card > p.estimate-card-desc {
  color: var(--muted);
  font-size: 0.86rem;
  margin-bottom: 18px;
}

.estimate-item-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.estimate-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.estimate-item:first-child {
  border-top: none;
}

.estimate-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.estimate-item-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.estimate-item-price {
  font-size: 0.76rem;
  color: var(--success-deep);
  font-weight: 700;
}

.estimate-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.estimate-qty button {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.estimate-qty button:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
}

.estimate-qty span {
  min-width: 16px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
}

.estimate-field-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Setas ao lado da faixa de cards (não abaixo dela): a barra fixa do total total
   (.estimate-summary-bar) fica sempre centralizada no rodapé da tela, então
   qualquer navegação centralizada ABAIXO do carrossel acaba ficando embaixo dela
   visualmente. Flutuando nas bordas esquerda/direita, na mesma altura dos cards,
   isso nunca acontece.
   Como .estimate-nav é position:absolute (não ocupa espaço no fluxo), o
   .estimate-track-wrap reserva a "sobra" nas laterais via padding (ver regra
   dele mais acima) - as setas ficam ancoradas exatamente nessa sobra
   (left:0/right:0), fora da área onde os cards de fato passam, em vez de
   flutuar por cima do conteúdo do primeiro/último card visível. */
.estimate-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}

.estimate-nav button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  /* invertido de propósito (fundo cheio, não só contorno): no meio de tantos cards
     claros essas setas passavam despercebidas / confundiam - agora saltam aos olhos. */
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(36, 141, 209, 0.38);
  pointer-events: auto;
  transition: background-color 140ms ease, transform 140ms ease;
}

.estimate-nav button:hover {
  background: var(--primary-deep);
  transform: scale(1.06);
}

/* card "sobre o sistema" */

.estimate-about-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.estimate-about-fields label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

.estimate-supervisor-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.estimate-supervisor-option {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.estimate-supervisor-option.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* card do chat de qualificação */

.estimate-chat-card {
  min-height: 420px;
}

.estimate-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.estimate-chat-head strong {
  display: block;
  font-size: 0.95rem;
}

.estimate-chat-head span {
  font-size: 0.78rem;
  color: var(--muted-soft);
}

.qchat-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  margin-bottom: 14px;
}

.qchat-message {
  max-width: 92%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.qchat-message.is-bot {
  align-self: flex-start;
  background: var(--bg-soft);
  color: var(--text);
  border-top-left-radius: 3px;
}

.qchat-message.is-user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-top-right-radius: 3px;
}

.qchat-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qchat-option {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}

.qchat-option:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
}

.qchat-input-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.qchat-input-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.85rem;
}

.qchat-input-row button {
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.84rem;
}

/* barra fixa de total estimado - flutua sobre a viewport inteira (tipo resumo de
   carrinho), não presa dentro da section, pra não sobrepor os últimos cards quando
   o container é mais curto que a área de "grude" do sticky. */

.estimate-section {
  padding-bottom: 110px;
}

.estimate-summary-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  z-index: 80;
  background: var(--text-strong);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
  /* a barra não tem nenhum elemento clicável (só texto) - sem isso, ela intercepta
     cliques de qualquer coisa embaixo dela quando os dois ficam centralizados na
     mesma faixa horizontal (ex.: setas do carrossel de sistemas). */
  pointer-events: none;
}

.estimate-summary-bar strong {
  font-size: 0.98rem;
  font-family: var(--font-heading);
}

.estimate-summary-bar > div span {
  font-size: 0.68rem;
  opacity: 0.72;
}

.estimate-summary-bar > span {
  font-size: 0.68rem;
  opacity: 0.6;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 12px;
  display: block;
}

/* ---------------------------------- dashboard estático (páginas de segmento) ---------------------------------- */
/* variante do .browser-mock que mostra 1 print fixo (sem carrossel/dots), usado nos
   exemplos reais de dashboard configurado por segmento (hospital/data center/prédio) */

.browser-mock-frame.is-static {
  position: static;
  aspect-ratio: auto;
  line-height: 0;
}

.browser-mock-frame.is-static img {
  position: static;
  opacity: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.segment-showcase {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 48px;
  align-items: center;
}

.segment-showcase-copy h2 {
  margin: 16px 0 14px;
}

.segment-showcase-copy p {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 20px;
}

.segment-showcase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.segment-showcase-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text);
}

.segment-showcase-list svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--success-deep);
}

/* ---------------------------------- faixa de compliance (hospitais) ---------------------------------- */

.compliance-strip {
  background: var(--text-strong);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 48px);
  color: #fff;
}

.compliance-strip .eyebrow {
  color: #eaf6ff;
}

.compliance-strip .eyebrow::before,
.compliance-strip .eyebrow::after {
  border-color: #5ed1ff;
}

.compliance-strip h2 {
  color: #fff;
  margin-top: 16px;
  max-width: 560px;
}

.compliance-strip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.compliance-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 0.88rem;
  font-weight: 600;
}

.compliance-strip-item svg {
  color: #5ed1ff;
  flex: 0 0 auto;
}

/* ---------------------------------- faixa de tecnologia (páginas de segmento) ---------------------------------- */
/* Mesma família visual/sombra de .metric-insight (hospitais.html) - gradiente
   azul + sombra "solta" bem forte, dando destaque de "declaração" à frase, não
   só mais um parágrafo. Selos com ícone reforçam de forma visual (não só em
   texto) as 3 tecnologias citadas. */

.tech-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 34px 40px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 34px 60px -20px rgba(27, 111, 168, 0.45), 0 10px 24px -8px rgba(15, 26, 36, 0.22);
}

.tech-strip-copy {
  flex: 1 1 380px;
  max-width: 560px;
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.42;
  color: #fff;
}

.tech-strip-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 0 1 auto;
  max-width: 100%;
}

.tech-strip-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.tech-strip-badge svg {
  flex: 0 0 auto;
  color: #cfeaff;
}

/* ---------------------------------- fluxo em 3 passos (data centers) ---------------------------------- */

.flow-diagram {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 220px;
  padding: 0 12px;
}

.flow-step-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--primary-tint);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.flow-step .ai-orb-badge {
  margin-bottom: 16px;
}

.flow-step h4 {
  font-size: 0.98rem;
  margin-bottom: 6px;
}

.flow-step p {
  color: var(--muted);
  font-size: 0.86rem;
}

.flow-arrow {
  flex: 0 0 auto;
  color: var(--muted-soft);
  margin-top: 24px;
}

/* ---------------------------------- foto do prédio + lista de zonas (prédios comerciais) ---------------------------------- */
/* Trocado por pedido do usuário: nada de elemento 3D construído em CSS (os ícones
   do prédio isométrico não ficavam centralizados do jeito certo) - uma foto real
   de fachada de prédio comercial, recortada em card arredondado, com selos
   flutuantes nos cantos (mesmo recurso dos showcases de dashboard) e a mesma
   lista enxuta de zonas ao lado. */

.building-showcase {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
  margin-top: 44px;
  text-align: left;
}

/* .building-photo-card é só o wrapper posicionador (sem overflow) pros selos
   flutuantes dos cantos não ficarem cortados - quem recorta os cantos
   arredondados é o .building-photo-frame interno, só em volta da imagem. */
.building-photo-card {
  position: relative;
}

.building-photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.building-photo-card img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
}

.zone-list {
  display: flex;
  flex-direction: column;
}

.zone-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}

.zone-list li:last-child {
  border-bottom: none;
}

.zone-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.zone-list li span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* ---------------------------------- equipe (/desenvolvedores.html) ---------------------------------- */

.info-card-icon.is-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.team-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.team-photo {
  width: 116px;
  height: 116px;
  border-radius: 999px;
  object-fit: cover;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-soft);
}

.team-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.team-role {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-deep);
  background: var(--primary-tint);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.team-card p.team-bio {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ---------------------------------- páginas legais (/politica, /termos) ---------------------------------- */

.legal-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(32px, 5vw, 56px);
  max-width: 820px;
  margin: 0 auto;
}

.legal-content h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 32px 0 12px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 14px;
}

.legal-content ul {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--muted);
}

.legal-content li {
  margin-bottom: 7px;
  line-height: 1.6;
  font-size: 0.98rem;
}

.legal-content strong {
  color: var(--text-strong);
}

.legal-content a {
  color: var(--primary-deep);
  font-weight: 600;
}

.legal-updated {
  color: var(--muted-soft);
  font-size: 0.88rem;
  margin-bottom: 24px;
}

/* ---------------------------------- responsive ---------------------------------- */

/* breakpoint próprio do header/nav, mais largo que o resto do conteúdo (960px):
   com os textos em português (mais longos que em inglês - "Fazer minha
   estimativa", "Perguntas frequentes", "BMS Advisor") o menu desktop começa a
   espremer e quebrar em duas linhas ainda acima de 960px. Medido: o header
   precisa de ~1150px livres pra caber tudo em uma linha só, então o menu
   mobile (hambúrguer) entra em cena um pouco antes, em 1180px, pra nunca
   deixar o texto quebrar ou vazar pra fora do header fixo. */
@media (max-width: 1180px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    margin-top: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 10px;
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
  }

  .site-nav a:hover {
    background: var(--bg-soft);
  }

  .nav-cta-mobile {
    display: flex;
    width: 100%;
    margin-top: 6px;
  }

  .nav-cta-mobile-secondary {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--muted);
  }

  .nav-cta-mobile-secondary:hover {
    background: var(--bg-soft);
  }

  .header-client-link { display: none; }

  .lang-switch { display: none; }

  .nav-lang-switch-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }

  .nav-item-mega { width: 100%; }

  .nav-mega-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
  }

  .nav-mega-trigger:hover { background: var(--bg-soft); }

  .nav-mega-panel {
    position: static;
    transform: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 1;
    visibility: visible;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
    transition: max-height 220ms ease;
  }

  .nav-item-mega:hover .nav-mega-panel,
  .nav-item-mega:focus-within .nav-mega-panel {
    transform: none;
  }

  .nav-item-mega.is-open .nav-mega-panel {
    max-height: 280px;
    padding: 6px 0 6px 12px;
  }

  .nav-toggle { display: flex; }
}

@media (max-width: 960px) {
  .brain-panel,
  .showcase-grid,
  .segment-showcase,
  .building-showcase,
  .metric-head {
    grid-template-columns: 1fr;
  }

  .metric-shot { margin-top: 24px; }

  .brain-visual { order: -1; }

  .flow-diagram {
    flex-direction: column;
  }

  .flow-arrow {
    transform: rotate(90deg);
    margin: 0;
  }

  .bento-grid {
    grid-template-columns: 1fr 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Notebooks (largura normal, mas tela BAIXA - 1366x768/1280x800/1440x900
   são os mais comuns) - min-width:641px pra nunca se sobrepor às regras de
   celular acima, que já resolvem largura estreita à parte. Sem isso, todo
   padding/altura deste arquivo foi pensado pra monitor grande (>900px de
   altura útil) e cada seção passa um pouco do rodapé da tela num notebook
   real, pedindo rolagem só pra ver o final de UMA seção - bug real reportado
   em produção (2026-08-20). Aperta padding/fonte/alturas fixas em cascata;
   conteúdo genuíno (FAQ, grades de card) ainda pode ultrapassar um pouco em
   telas bem curtas, mas fica bem mais próximo de caber numa tela só. ---- */
@media (max-height: 940px) and (min-width: 641px) {
  :root {
    --section-pad: clamp(28px, 4vh, 48px);
  }

  .section-heading { font-size: clamp(1.5rem, 2.6vw, 2rem); }
  .section-sub, .section-lead { font-size: 0.95rem; margin-top: 8px; }

  /* hero (home) */
  .hero-wrap { padding: 92px 0 20px; }
  .hero-card { min-height: 380px; }
  .hero-content { padding: 28px clamp(24px, 4vw, 40px) 28px; }
  .hero-kicker { margin-bottom: 12px; }
  .hero-content h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 10px; }
  .hero-content p { font-size: 1rem; margin-bottom: 18px; }

  /* hero simples de página interna (/estimativa.html) */
  .tool-hero { padding: 104px 0 28px; }
  .tool-steps { margin-top: 20px; }

  /* foto-hero de segmento (hospitais/data-centers/prédios) */
  .segment-hero { padding-top: 84px; }
  .segment-hero-card { min-height: 240px; }
  .segment-hero-content { padding: 26px; }
  .segment-hero-content h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 8px 0 6px; }
  .segment-hero-content p { font-size: 0.95rem; margin-bottom: 14px; }

  /* cérebro/posicionamento (home) */
  .brain-panel { padding: clamp(24px, 3vw, 36px); gap: clamp(24px, 3vw, 40px); }
  .brain-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
  .brain-lead { margin-bottom: 16px; }
  .brain-highlights { gap: 10px; }
  .brain-highlight-icon { width: 30px; height: 30px; }
  .brain-phone-img { max-width: 380px; }
  .phone-mock-bar { padding: 8px 12px; }
  .phone-mock-avatar { width: 30px; height: 30px; }
  .phone-mock-body { padding: 9px 10px; gap: 5px; }
  .chat-bubble { padding: 5px 9px; font-size: 0.72rem; }
  .chat-chart { height: 40px; }

  /* carrossel de segmentos (home) */
  .segments-head { margin-bottom: 20px; }
  .segment-photo { height: 130px; }
  .segment-body { padding: 24px 16px 16px; }

  /* bento features */
  .bento-panel { padding: clamp(24px, 3vw, 36px); }
  .bento-panel .section-heading { margin-bottom: 20px; }
  .bento-grid { gap: 14px; }
  .bento-card { padding: 18px 16px; min-height: 128px; gap: 6px; }

  /* destaque de machine learning (home) */
  .ml-panel { padding: clamp(24px, 3vw, 36px); }
  .ml-list { margin-top: 18px; }

  /* dashboard showcase (home + páginas de segmento) */
  .container-wide { max-width: 1040px; }
  .showcase-grid, .segment-showcase { gap: 28px; }
  .showcase-copy h2, .segment-showcase-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 10px; }
  .showcase-copy > p, .segment-showcase-copy p { margin-bottom: 14px; }
  .showcase-list li, .segment-showcase-list li { padding: 4px 0; }

  /* CTA */
  .cta-panel { padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 36px); }
  .cta-panel > p { margin-bottom: 20px; }
  .cta-form { gap: 10px; }

  /* FAQ */
  .faq-question { padding: 12px 0; }
  .faq-answer p { padding-bottom: 12px; }
  .ai-chat-card { padding: 18px; }
  .ai-chat-card-head { margin-bottom: 12px; }

  /* faixa de compliance (hospitais) */
  .compliance-strip-list { margin-top: 18px; }

  /* faixa de tecnologia (páginas de segmento) */
  .tech-strip { padding: 24px 28px; gap: 18px; }
  .tech-strip-copy { font-size: 1.04rem; }

  /* fluxo em 3 passos (data centers) */
  .flow-diagram { margin-top: 24px; }
  .flow-step-icon { width: 46px; height: 46px; margin-bottom: 10px; }

  /* foto do prédio + zonas (prédios comerciais) */
  .building-showcase { gap: 32px; margin-top: 24px; }
  .building-photo-card img { height: 240px; }
  .zone-list li { padding: 9px 4px; }

  /* equipe (/desenvolvedores.html) */
  .team-grid { margin-top: 24px; gap: 16px; }
  .team-card { padding: 22px 18px; }
  .team-photo { width: 84px; height: 84px; margin-bottom: 12px; }

  /* cards de índice ICO/IEC (hospitais) */
  .metric-head { gap: 24px; }
  .metric-shot { gap: 5px; }
  .metric-shot-frame { max-width: 320px; }
  .metric-shot-caption { font-size: 0.74rem; }
  .metric-duo-grid { gap: 14px; margin-top: 10px; }
  .metric-card { padding: 14px 16px; }
  .metric-card-badge { top: 14px; right: 14px; padding: 4px 10px; font-size: 0.72rem; }
  .metric-card-icon { width: 36px; height: 36px; margin-bottom: 8px; }
  .metric-card-kicker { margin-bottom: 8px; }
  .metric-card h3 { font-size: 0.98rem; margin-bottom: 5px; }
  .metric-card p { font-size: 0.84rem; line-height: 1.4; }

  /* assinaturas dos 4 segmentos novos (aeroportos/shoppings/arenas/cidades) */
  .mode-compare, .day-curve, .event-compare, .portfolio-ranking { margin-top: 22px; }
  .mode-compare-card { padding: 18px 20px; }
  .day-curve { padding: 20px 20px 14px; }
  .portfolio-ranking-row { padding: 11px 18px; }
  .metric-insight { padding: 14px 18px; margin-top: 10px; gap: 12px; }
  .metric-insight h4 { font-size: 0.94rem; margin-bottom: 3px; }
  .metric-insight p { font-size: 0.84rem; line-height: 1.4; }
}

@media (max-width: 640px) {
  .hero-wrap { padding-top: 108px; }
  .hero-card { min-height: 520px; }
  .cta-form-row { grid-template-columns: 1fr; }
  .bento-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .segment-card { width: 240px; }
  .estimate-card { width: 270px; }
  .tool-hero { padding-top: 128px; }
  .tool-steps { flex-direction: column; align-items: flex-start; gap: 14px; }
  .segment-hero { padding-top: 96px; }
  .segment-hero-content { padding: 24px; }
  .estimate-summary-bar { flex-direction: column; align-items: flex-start; bottom: 12px; }
  .estimate-summary-bar > span { border-left: none; padding-left: 0; }
  .estimate-track-wrap { padding: 0 46px; }
  .estimate-nav button { width: 36px; height: 36px; }
  /* cards flutuantes nos cantos do dashboard: bonitos com espaço sobrando, mas sem
     espaço lateral no mobile eles saem da tela - somem abaixo de 640px. */
  .showcase-corner-card { display: none; }
}

@media (max-width: 480px) {
  /* header-cta some da barra fixa pra não espremer logo + hamburguer em duas
     linhas; o mesmo CTA já reaparece dentro do menu mobile (.nav-cta-mobile). */
  .header-cta { display: none; }
}