/* ==========================================================================
   GTPLAN — Design System
   Evolução da marca: navy #001D3B + ciano #40AADB
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Marca */
  --navy-900: #000b18;
  --navy-800: #001326;
  --navy-700: #001d3b;
  --navy-600: #05294f;
  --navy-500: #0d3a68;
  --cyan-600: #1f6e93;
  --cyan-500: #40aadb;
  --cyan-400: #6ec1e4;
  --cyan-300: #a5dcf2;
  --cyan-100: #e6f5fc;
  --blue-700: #0c4da2;

  /* Neutros */
  --ink: #0b1a2b;
  --ink-soft: #33455c;
  --muted: #5f7288;
  --muted-light: #617385;
  --line: #e2e9f1;
  --line-soft: #eef3f8;
  --bg: #ffffff;
  --bg-soft: #f5f9fc;
  --bg-tint: #eff6fb;

  /* Semânticos */
  --ok: #12a37a;
  --warn: #e5a13a;

  /* Tipografia */
  /* Familia unica: Inter (Google Fonts, eixo variavel 400..700 + opsz).
     Os dois tokens continuam existindo porque marcam PAPEIS distintos no
     codigo (corpo x titulos/UI) e permitem voltar a duas familias mudando
     uma linha; hoje ambos apontam para a mesma familia.
     Medido antes da troca: a x-height da Inter e +2% sobre a DM Sans e
     identica a da IBM Plex Sans, entao a escala nao precisou compensar. Em
     largura a Inter e 6,4% mais estreita que a DM Sans — e essa folga que
     dispensa os truques de encolher titulo para caber em uma linha. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --------------------------------------------------------------------
     ESCALA TIPOGRÁFICA — mexa aqui para ajustar os tamanhos de TODO o site.
     • Para aumentar/diminuir TUDO de uma vez: mude só --type-scale
       (1 = padrão · 1.1 = 10% maior · 0.9 = 10% menor).
     • Para ajustar UM nível só (ex.: subtítulos): edite a linha --fs-* dele.
     Cada clamp() é: clamp(MÍNIMO no celular, fluido, MÁXIMO no desktop).
     -------------------------------------------------------------------- */
  --type-scale: 1;
  /* --fs-hero e --fs-h1 sao DELIBERADAMENTE iguais: um H1 tem um tamanho so no
     site inteiro. Os dois tokens continuam separados para que dar um pico ao
     hero da home volte a ser uma linha, nao uma cacada por overrides.
     O teto de 2,625rem (42px) e a media das quatro alturas que conviviam antes
     (48px padrao, 43px home, 36px /sobre, 41px /solucoes): unifica sem que
     nenhuma pagina de um salto. */
  --fs-hero: calc(var(--type-scale) * clamp(1.75rem, 0.9rem + 2vw, 2.625rem));  /* título do hero (home) */
  --fs-h1:   calc(var(--type-scale) * clamp(1.75rem, 0.9rem + 2vw, 2.625rem));  /* H1 das páginas internas */
  /* O teto era 2rem (32px) contra 48px do H1: um passo de 1,5 que o olho lia
     como "quase o mesmo tamanho". No celular o piso de 20px ficava a 4px do
     corpo do texto. Subindo os dois, o título de seção volta a abrir bloco. */
  --fs-h2:   calc(var(--type-scale) * clamp(1.4rem, 0.95rem + 1.6vw, 2.1rem)); /* títulos de seção */
  --fs-h3:   calc(var(--type-scale) * clamp(1.25rem, 1rem + 0.9vw, 1.6rem));    /* subtítulos / cards */
  --fs-h4:   calc(var(--type-scale) * clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem));/* títulos menores */
  --fs-lead: calc(var(--type-scale) * clamp(1rem, 0.95rem + 0.25vw, 1.1rem));  /* parágrafo de destaque */
  --fs-body: calc(var(--type-scale) * 1rem);                                    /* texto corrido */
  --fs-sm:   calc(var(--type-scale) * 0.9375rem);                               /* texto pequeno */
  --fs-xs:   calc(var(--type-scale) * 0.8125rem);                               /* rótulos / legendas */
  --fs-2xs:  calc(var(--type-scale) * 0.75rem);                                  /* PISO legível — nada abaixo disto */

  /* Numeros em destaque. Ficavam como clamp() solto espalhado pelo arquivo;
     nomeados aqui, entram na mesma escala que todo o resto e obedecem ao
     --type-scale. Sao dois degraus INTENCIONAIS: o grande para faixas de
     resultado com poucos itens, o menor para grades densas de 4 colunas. */
  --fs-display:    calc(var(--type-scale) * clamp(2.4rem, 1.5rem + 3vw, 3.75rem)); /* numero grande */
  --fs-display-sm: calc(var(--type-scale) * clamp(2rem, 1.3rem + 2.2vw, 2.85rem)); /* numero em grade densa */
  --fs-stat:       calc(var(--type-scale) * clamp(1.35rem, 1rem + 1.5vw, 2.2rem)); /* contador de faixa */

  /* Espaço / forma */
  --wrap: 1200px;
  --wrap-narrow: 860px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --section-y: clamp(4rem, 2rem + 7vw, 7.5rem);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(0, 29, 59, 0.06), 0 2px 8px rgba(0, 29, 59, 0.04);
  --sh: 0 2px 6px rgba(0, 29, 59, 0.06), 0 12px 30px -8px rgba(0, 29, 59, 0.12);
  --sh-lg: 0 4px 12px rgba(0, 29, 59, 0.07), 0 32px 64px -20px rgba(0, 29, 59, 0.24);
  --sh-glow: 0 18px 48px -14px rgba(64, 170, 219, 0.55);
  /* Elevacao de hover para card que JA tem borda de 1px. Borda + sombra de 30px
     de blur (o --sh) e o "ghost card": dois sinais de elevacao competindo.
     Aqui o blur e menor e o alpha mais baixo — o lift continua, o halo sai. */
  --sh-card: 0 1px 3px rgba(0, 29, 59, 0.05), 0 8px 18px -10px rgba(0, 29, 59, 0.10);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Fonte ---------- */
/* Inter hospedada no site (assets/fonts/, SIL OFL 1.1), mesmos arquivos
   variaveis (eixos opsz e wght) que o Google Fonts servia. Tirar o CSS externo
   do caminho critico valia ~0,9 s de bloqueio de renderizacao no Lighthouse
   mobile, e a home faz preload do subconjunto latino no <head>. O latin-ext so
   baixa se aparecer um caractere daquela faixa. URL relativa a esta folha para
   funcionar igual em https:// e em file://. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden removido: medido em 375px e 1280px, nada transbordava.
     No body ele recortava filho posicionado, quebrava scroll-anchoring e
     mascarava o corte real na barra de cookies, corrigido na origem acima. */
}

img, svg, video { max-width: 100%; display: block; height: auto; }

/* O [hidden] do user-agent tem a mesma especificidade de qualquer regra de
   classe, e folha de autor vence folha de UA. Sem isto, todo componente com
   `display` declarado (.post, .card, .module) ignorava o atributo: o filtro do
   blog marcava hidden e os artigos continuavam na tela. */
[hidden] { display: none !important; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 0.6em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.012em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--cyan-600); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--navy-700); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25rem; }
li { margin-bottom: 0.4em; }

strong, b { color: var(--ink); font-weight: 650; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* SC 1.4.11 pede 3:1 contra as cores adjacentes. O --cyan-500 dava 2,63:1 sobre
   branco (o proprio arquivo ja documentava esse numero no antigo .card__num), ou
   seja, o anel falhava justamente nas superficies claras, onde e mais necessario.
   Anel de duas faces, sem cor nova: navy sobre claro, branco sobre escuro. */
:focus-visible {
  outline: 3px solid var(--navy-700);
  outline-offset: 2px;
  border-radius: 4px;
}
:is(.page-hero, .hero, .section--dark, .figure-frame, .card--accent, .topbar, .cta-band) :focus-visible {
  outline-color: #fff;
}

/* ---------- Superfícies do navegador ----------
   As partes que não desenhamos também carregam a marca. Sem isto, seleção,
   cursor de texto, marcadores de formulário e barra de rolagem chegam com o
   padrão do sistema, que não pertence a design system nenhum. */
::selection { background: var(--cyan-300); color: var(--navy-700); }
.section--dark ::selection,
.page-hero ::selection,
#gt-rodape ::selection { background: var(--cyan-500); color: var(--navy-900); }

html { caret-color: var(--cyan-600); }
.section--dark, .page-hero, #gt-rodape { caret-color: var(--cyan-400); }

/* Marcadores nativos (checkbox, radio, progress) no ciano da marca. */
input, select, textarea, progress { accent-color: var(--cyan-600); }

/* Sublinhado que não corta a descendente das letras. */
a:not([class]), .prose a, .legal a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Barra de rolagem: navy sobre o neutro do site, nas duas engines. A borda de
   3px do polegar come um lado e outro da trilha, então o traço ciano visível é
   bem mais fino que a largura declarada: 14px de trilha deixam 8px de polegar. */
html { scrollbar-color: var(--cyan-600) var(--bg-soft); scrollbar-width: auto; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb {
  background: var(--cyan-600);
  border-radius: var(--r-pill);
  border: 3px solid var(--bg-soft);
}
::-webkit-scrollbar-thumb:hover { background: var(--navy-700); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: calc(var(--section-y) * var(--section-space-factor, 1)); position: relative; }
.section--tight { padding-block: calc(clamp(2.75rem, 1.5rem + 4vw, 4.5rem) * var(--section-space-factor, 1)); }
.marquee ~ .section,
.clients ~ .section { --section-space-factor: 0.75; }
.section--soft { background: var(--bg-soft); }
.section--tint { background: linear-gradient(180deg, var(--bg-tint), var(--bg)); }

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

.home-page .section--dark {
  background: var(--navy-800);
}

.section--dark {
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(64, 170, 219, 0.22), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(12, 77, 162, 0.28), transparent 62%),
    var(--navy-700);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
}
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark strong { color: #fff; }
.section--dark .lead { color: rgba(255, 255, 255, 0.78); }

.grid { display: grid; gap: clamp(1.15rem, 0.6rem + 1.4vw, 1.85rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
/* Com exatamente 3 filhos as unicas divisoes limpas sao 1 e 3. O auto-fit passava
   por 2 colunas entre ~667px e ~985px (todo tablet em retrato), deixando o terceiro
   card sozinho ao lado de meia fila vazia. Virar direto de 1 para 3, no mesmo 62rem
   em que o .split ja vira, da a pagina um unico ponto de virada estrutural. */
@media (max-width: 61.99rem) { .grid--3 { grid-template-columns: 1fr; } }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  /* start, nao center: os dois lados de um split quase nunca tem massa parecida.
     Centralizado, a coluna de copia curta descia ~111px e o titulo da secao deixava
     de ser a primeira coisa no canto superior. Quem precisa do contrario usa
     .split--middle. */
  align-items: start;
}
.split--middle { align-items: center; }
/* Empilhado (abaixo de 62rem) cada lado recebe a largura inteira do .wrap e os
   paragrafos longos chegavam a 105ch. Mesmo idioma ja usado em .section-head
   (46rem) e .page-hero .lead (42rem). Liberado quando abre em duas colunas. */
/* min-width: 0 porque, empilhado, o .split e uma grade de coluna unica e a
   coluna herda o min-content do filho mais largo. O mock do hero (3 KPIs lado
   a lado) pedia 375px: de 320 a 414px a coluna passava do .wrap e H1, lead e
   mock saiam pela direita, escondidos pelo overflow: hidden do .hero. */
.split > * { max-width: 39rem; min-width: 0; } /* medido: 42rem dava 80ch em 752px; 39rem segura em ~74ch */
@media (min-width: 62rem) {
  .split > * { max-width: none; }
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
  .split--reverse > :first-child { order: 2; }
}

/* ---------- Tipografia utilitária ---------- */

.home-page h2 {
  max-width: 19ch;
}

.home-page h2.home-title-break {
  max-width: none;
}

.home-page .section-head--center h2 {
  margin-inline: auto;
}

/* Os tres tracinhos ciano de 2,5rem x 1px que flutuavam acima destas grades
   eram ornamento puro: nao rotulavam nada, nao separavam nada, e acima da lista
   de pilares ainda colidiam com o trilho da linha-guia. */

.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.6; }
/* Texto de apoio abaixo do titulo de um formulario. Marcado como .lead nas duas
   paginas de cadastro, mas o papel e outro: instrucao curta, nao abertura de
   secao. Ficava com um `style="font-size:var(--fs-sm)"` inline em cada pagina —
   agora e uma regra so, no corpo padrao. */
.form-card .lead.form-card__ajuda { font-size: var(--fs-body); margin-bottom: 1.75rem; }

/* Numero em destaque dentro de card de grade (3 colunas). Levava
   `style="font-size:2.4rem"` repetido em cada card de /depoimentos. */
.card .result__big { font-size: var(--fs-display-sm); }
.balance { text-wrap: balance; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 1.2rem + 3vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* Degrade em texto trocado por cor solida: enfase vem de peso e tamanho, nao
   de gradiente. --cyan-400 sobre o navy do .page-hero da 8,4:1. */
.grad-text { color: var(--cyan-400); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: -0.005em;
  padding: 0.9rem 1.6rem;
  /* piso de alvo de toque: 44px cobre .btn--sm, que ficava em 39px */
  min-height: 2.75rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Botões sob controle do GSAP (efeito magnético do hero): a transição de
   transform sai da lista para não competir com o tween do JS — o resto
   (sombra, cor, borda) continua reagindo normalmente pelo CSS. */
.btn--magnetic { transition: box-shadow 0.22s var(--ease), background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn__ripple {
  position: absolute;
  left: var(--ripple-x);
  top: var(--ripple-y);
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.36);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: button-ripple 0.45s var(--ease) forwards;
}
@keyframes button-ripple { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }

.btn--primary {
  /* gradiente escurecido: texto branco passa em WCAG AA nas duas pontas
     (#1F6E93 = 5,66:1 · #16536F = 8,40:1) */
  background: linear-gradient(135deg, #1f6e93, #16536f);
  color: #fff;
  box-shadow: var(--sh-glow);
}
.btn--primary:hover { color: #fff; box-shadow: 0 22px 54px -12px rgba(64, 170, 219, 0.7); }

.btn--navy { background: var(--navy-700); color: #fff; box-shadow: var(--sh); }
.btn--navy:hover { background: var(--navy-600); color: #fff; }

.btn--ghost { border-color: var(--line); color: var(--navy-700); background: #fff; }
.btn--ghost:hover { border-color: var(--cyan-500); color: var(--cyan-600); box-shadow: var(--sh-sm); }

.btn--light { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.28); backdrop-filter: blur(8px); }
.btn--light:hover { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: rgba(255, 255, 255, 0.5); }

.btn--white { background: #fff; color: var(--navy-700); }
.btn--white:hover { color: var(--cyan-600); box-shadow: var(--sh-lg); }

.btn--sm { padding: 0.62rem 1.15rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1.05rem 2rem; font-size: var(--fs-body); }
/* O `white-space: nowrap` do .btn assume que todo rotulo cabe em uma linha. No
   celular ha rotulos de 40+ caracteres ("Consulte condicoes com nosso time
   comercial", em /fornecedores) que estouravam a caixa em 35px, saindo pela
   direita. Abaixo de 42rem o rotulo passa a quebrar: o botao e inline-flex com
   min-height, entao duas linhas so o deixam mais alto — nada desalinha. */
@media (max-width: 42rem) {
  .btn { white-space: normal; text-wrap: balance; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-sm);
}
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform 0.22s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
  background: var(--navy-700);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  min-height: 2.5rem;
  flex-wrap: wrap;
}
.topbar a {
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  /* SC 2.5.8: sao links autonomos, nao inline em frase, entao a excecao Inline
     nao vale. Tinham 21px de altura. */
  min-height: 24px;
  padding-block: 2px;
}
.topbar a:hover { color: #fff; }
.topbar svg { width: 0.95rem; height: 0.95rem; }
@media (max-width: 42rem) { .topbar { display: none; } }

/* Seletor de idioma no topbar (fundo escuro): cores proprias, nao as do
   .idiomas claro do header (var(--ink-soft), pensado para o header
   translucido). Segue o mesmo par cor-de-repouso/cor-de-hover de .topbar a;
   a marcacao do idioma atual usa --cyan-400, que mede 8,4:1 sobre --navy-700
   (--cyan-600, pensado para fundo claro, mede pouco menos de 2:1 aqui). */
.topbar .idiomas a { color: rgba(255, 255, 255, 0.72); }
.topbar .idiomas a:hover { color: #fff; background: transparent; }
.topbar .idiomas a[aria-current="true"] { color: var(--cyan-400); }

/* O <nav> do menu mobile é filho deste header e usa `position: fixed`. Filtro,
   transform, perspective ou contain aqui fariam o header virar o containing
   block dele, e o painel deixaria de ocupar a tela. O vidro mora no
   `.site-header.is-stuck::before`, mais abaixo. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 8px 28px -20px rgba(0, 29, 59, 0.5); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 6rem;
}

/* Brand */
/* flex: none — o .nav e o .header-actions so tem min-content (links de palavra
   unica e .btn com white-space: nowrap), entao o unico item que cedia era a marca.
   Com o reset global de max-width: 100% na <img> e a altura travada, ela perdia a
   proporcao em vez do tamanho: a 1040px o wordmark saia com 54% da largura certa. */
.brand { display: inline-flex; align-items: center; gap: 0.65rem; flex: none; }
.brand__mark { width: 2.35rem; height: 2.35rem; flex: none; border-radius: 10px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h4);
  letter-spacing: -0.02em;
  color: var(--navy-700);
}
.brand__tag {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-600);
  margin-top: 0.22rem;
}
.brand--light .brand__name { color: #fff; }
.brand--light .brand__tag { color: var(--cyan-400); }

/* Nav */
.nav { display: flex; align-items: center; gap: 0.15rem; }
/* `:not(.btn)` porque o CTA dentro do .nav (visível só no menu mobile) também é
   um <a>: sem o escopo, estas regras (0,2,0) venciam .btn--primary (0,1,0) e
   repintavam cor, raio, padding e fonte do botão. */
.nav a:not(.btn) {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-sm);
  position: relative;
  /* Sem isso "Blog (PT)" quebra em duas linhas no desktop e o header cresce
     verticalmente em vez de simplesmente nao caber (rule 6, auditoria responsiva). */
  white-space: nowrap;
}
.nav a:not(.btn):hover { color: var(--navy-700); background: var(--bg-tint); }
.nav a[aria-current="page"] { color: var(--cyan-600); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan-500);
}

/* O CTA dentro do .nav existe apenas para o menu mobile */
.nav > .btn { display: none; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

/* Seletor de idioma: PT | EN | ES. No topbar no desktop (estilizado a parte,
   acima); dentro do menu no mobile. Regras base aqui valem para o mobile. */
.idiomas { display: flex; align-items: center; gap: 0.1rem; }
.idiomas a {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding: 0.35rem 0.45rem;
  border-radius: var(--r-sm);
}
.idiomas a:hover { color: var(--navy-700); background: var(--bg-tint); }
.idiomas a[aria-current="true"] { color: var(--cyan-600); }
.nav > .idiomas { display: none; }

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  color: var(--navy-700);
}
.nav-toggle:hover { background: var(--bg-tint); }
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 71rem) {
  .nav-toggle { display: flex; }
  .header-actions .btn { display: none; }
  .nav {
    position: fixed;
    inset: auto 0 0 0;
    top: var(--header-h, 4.5rem);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2.5rem;
    border-top: 1px solid var(--line);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav a:not(.btn) { padding: 0.95rem 0.5rem; font-size: var(--fs-body); border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav > .btn { display: inline-flex; margin-top: 1.35rem; border-bottom: 0; }
  .nav > .idiomas { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
  .nav > .idiomas a { border-bottom: 0; padding: 0.5rem 0.75rem; font-size: var(--fs-sm); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-700);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(3.15rem, 1.35rem + 6.3vw, 6.3rem) clamp(2.7rem, 1.35rem + 4.5vw, 4.95rem);
  isolation: isolate;
}
/* Visto sempre: o canvas do globo é transparente e ocupa só um canto, então
   este degradê é o chão de todo o bloco. O foco ciano do canto superior direito
   recua (0.28 -> 0.18): o globo deve ser a luz mais forte do hero, e focos
   empilhados nesse canto lavam o navy em cinza leitoso. */
.hero__backdrop {
  position: absolute;
  z-index: -4;
  inset: -8% -3%;
  background:
    radial-gradient(65% 70% at 84% 4%, rgba(64, 170, 219, 0.18), transparent 60%),
    radial-gradient(55% 65% at 2% 96%, rgba(12, 77, 162, 0.32), transparent 62%),
    linear-gradient(155deg, var(--navy-900), var(--navy-700) 58%, var(--navy-800));
  transform: perspective(1200px) translate3d(0, var(--parallax-y, 0px), 0) scale(1.06) rotateX(var(--parallax-tilt, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
/* Globo de suprimento (assets/js/hero-scene.js + hero-globo.js): canvas
   TRANSPARENTE e reduzido ao canto inferior direito; o chão é sempre o
   .hero__backdrop; o overflow: hidden do .hero corta o globo.
   Empilhamento (isolation: isolate no .hero): .hero__backdrop (z -4, o chão)
   -> este canvas (z -3, só a janela do globo, ancorada em right/bottom)
   -> .hero::before (z -2, o véu de contraste da coluna de texto) -> conteúdo.
   A caixa abaixo é só o ponto de partida: o JS grava largura e altura em px a
   cada medição do hero, da coluna de texto e do card. */
.hero__scene {
  position: absolute;
  z-index: -3;
  right: 0;
  bottom: 0;
  width: 62%;
  height: 78%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s var(--ease);
}
.hero__scene.is-ready { opacity: 1; }
/* Classes que hero-scene.js liga e desliga no .hero. touch-action só existe
   com a cena montada (pan-y pinch-zoom: rolagem vertical e zoom por pinça
   continuam com o navegador; o arrasto horizontal sobre o disco gira o globo).
   .hero--arrastando entra antes do mousedown para a seleção de texto não
   nascer num arrasto que começa no globo e cruza a coluna de texto. */
.hero--com-globo { touch-action: pan-y pinch-zoom; }
.hero--sobre-globo { cursor: grab; }
.hero--arrastando { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.hero--arrastando * { user-select: none; -webkit-user-select: none; }
/* Variante "globo solo" (avaliação de 09/09, ligada só por injeção de classe
   no Playwright; index.astro não a usa): o card do cockpit sai e hero-scene.js
   centraliza o globo na coluna direita (MODO_SOLO). A coluna continua
   reservada pela grade do .split, então a coluna de texto não alarga. */
.hero--globo-solo .hero-visual { display: none; }

/* Sem WebGL o canvas é removido do DOM e o hero assume .hero--no-scene: o
   degradê tem que sustentar o bloco sozinho, então ganha mais um foco de luz
   e mais contraste em vez de parecer um fundo que faltou carregar. O terceiro
   foco ecoa a posição do globo (canto inferior direito). */
.hero--no-scene .hero__backdrop {
  background:
    radial-gradient(58% 62% at 82% 6%, rgba(64, 170, 219, 0.42), transparent 62%),
    radial-gradient(52% 60% at 4% 96%, rgba(12, 77, 162, 0.44), transparent 64%),
    radial-gradient(60% 55% at 88% 104%, rgba(110, 193, 228, 0.22), transparent 60%),
    linear-gradient(155deg, var(--navy-900), var(--navy-700) 52%, var(--navy-800));
}
/* Esta camada fica SOBRE o canvas (z -2 contra z -3). O degradê linear é o
   contrato de contraste da coluna de texto e não se toca. Os focos radiais,
   porém, agora competem com a luz do próprio shader: mantidos na força
   original, empilhavam no canto superior direito e lavavam o navy em cinza
   leitoso — o defeito clássico que faz shader parecer barato. Aqui eles
   recuam, e voltam à força cheia em .hero--no-scene, onde são a única luz. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 90% at 78% 8%, rgba(64, 170, 219, 0.14), transparent 58%),
    radial-gradient(60% 70% at 6% 92%, rgba(12, 77, 162, 0.22), transparent 60%),
    linear-gradient(90deg, rgba(0, 11, 24, 0.84) 0%, rgba(0, 19, 38, 0.66) 46%, rgba(0, 19, 38, 0.42) 100%);
}
.hero--no-scene::before {
  background:
    radial-gradient(70% 90% at 78% 8%, rgba(64, 170, 219, 0.42), transparent 58%),
    radial-gradient(60% 70% at 6% 92%, rgba(12, 77, 162, 0.45), transparent 60%),
    radial-gradient(120% 120% at 50% 120%, rgba(110, 193, 228, 0.16), transparent 55%),
    linear-gradient(90deg, rgba(0, 11, 24, 0.84) 0%, rgba(0, 19, 38, 0.66) 46%, rgba(0, 19, 38, 0.42) 100%);
}
.hero h1 { color: #fff; font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.03em; }
/* Palavras do h1 embrulhadas em runtime (GSAP) para a revelação em máscara;
   sem GSAP o JS não mexe no h1 e estas regras nunca entram em jogo. */
.hero h1 .word-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.hero h1 .word { display: inline-block; will-change: transform; }
.hero .lead { color: rgba(255, 255, 255, 0.76); max-width: 34rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.95rem 0.42rem 0.5rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  margin-bottom: 1.6rem;
}
.hero__badge span.pill {
  display: inline-block;
  padding: 0.16rem 0.55rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--cyan-600), #16536f);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.hero__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--cyan-400);
  margin-top: 1.75rem;
}

/* Stats */
.stats {
  display: grid;
  /* Com 3 contadores as unicas divisoes limpas sao 1 e 3; o auto-fit caia em
     2+1 abaixo de 500px, deixando o terceiro sozinho. Empilha e pronto. */
  grid-template-columns: 1fr;
  gap: 1.25rem 2rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
  padding-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* 3 x 8.5rem + 2 gaps de 2rem = 472px de conteudo; com os gutters isso exige
   ~515px de viewport. Abaixo disso o auto-fit so encaixava 2 e sobrava um. */
@media (min-width: 34rem) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
}
.stat__value {
  font-family: var(--font-display);
  /* Abaixo do --fs-h1 em toda a faixa: o numero e prova, nao o assunto da pagina.
     tabular-nums porque o contador reescreve o texto a cada frame por 1,5s — com
     algarismo proporcional a caixa mudava de largura quase todo frame e arrastava
     o "+" e o "R$ " junto. */
  font-size: var(--fs-stat);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: baseline;
  /* sem gap: os espaços vêm literalmente do markup ("R$ ", " mil", " bi") */
  gap: 0;
  /* em espanhol a unidade (" mil millones") e longa demais para a coluna, e sem
     quebra o valor invadia a estatistica vizinha; a quebra deixa o numero na
     primeira linha e a unidade na segunda */
  flex-wrap: wrap;
  white-space: pre;
}
.stat__value .unit { color: var(--cyan-400); }
/* Rótulo de métrica em caixa-alta é convenção de tabela de dados e separa o
   rótulo do número — fica. O que sai é a entreletra inflada: 0,11em em 13px
   descolava as letras de rótulos longos ("Fornecedores no marketplace") e
   empurrava a linha para duas. 0,05em mantém a distinção sem esticar. */
.stat__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 0.6rem;
  text-wrap: balance;
}
.hero .stats { justify-items: center; text-align: center; }
.hero .stat__value { justify-content: center; }
.stats--light .stat__value { color: var(--navy-700); }
.stats--light .stat__value .unit { color: var(--cyan-600); } /* 2,63:1 -> 5,08:1 (texto grande exige 3:1) */
.stats--light .stat__label { color: var(--muted); }
.stats--light { border-top-color: var(--line); }

/* Mockup do dashboard no hero */
.hero-visual { position: relative; perspective: 1100px; }
.hero-visual [data-parallax-layer] { will-change: transform; }
.hero-visual__signal {
  position: absolute;
  z-index: 2;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(165, 220, 242, 0.36);
  border-radius: var(--r-pill);
  background: rgba(0, 19, 38, 0.68);
  color: var(--cyan-300);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  pointer-events: none;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}
.hero-visual__signal--top { top: -1.1rem; left: 10%; }
.hero-visual__signal--side { right: -1.6rem; top: 38%; color: #fff; }
.mock {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-lg);
  padding: 1rem;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.54);
  transform: perspective(900px) translate3d(0, var(--parallax-y, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
}
.mock--liquid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, rgba(201, 231, 240, 0.2), rgba(7, 31, 51, 0.5) 55%, rgba(64, 170, 219, 0.12));
  border-color: rgba(210, 240, 247, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1rem 2.5rem rgba(0, 10, 24, 0.18), 0 18px 36px -22px rgba(0, 0, 0, 0.56);
}
.mock--liquid::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 24%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0.03) 49%, transparent 67%);
  transform: translateX(0) skewX(-16deg);
  opacity: 0.45;
}
.mock--liquid > * { position: relative; z-index: 1; }

/* Liquid glass para elementos que vivem sobre fundos escuros. */
.section--dark .path,
.card--dark,
.section--dark .btn--primary,
.section--dark .btn--light,
.section--dark .btn--white,
.hero .btn--primary,
.hero .btn--light {
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
  border-color: rgba(214, 241, 248, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 32px -22px rgba(0, 0, 0, 0.8);
}
.section--dark .path,
.card--dark {
  background: linear-gradient(145deg, rgba(210, 238, 245, 0.13), rgba(4, 24, 43, 0.34) 58%, rgba(64, 170, 219, 0.08));
}
.section--dark .path:hover,
.card--dark.card--hover:hover,
.section--dark .btn--primary:hover,
.section--dark .btn--light:hover,
.section--dark .btn--white:hover,
.hero .btn--primary:hover,
.hero .btn--light:hover {
  border-color: rgba(214, 241, 248, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(110, 193, 228, 0.12), 0 18px 38px -22px rgba(64, 170, 219, 0.7);
}
.section--dark .ico,
.section--dark .card__icon,
.card--dark .card__icon,
.path .ico,
.mock-kpi,
.mock-row {
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
  border: 1px solid rgba(214, 241, 248, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 18px -14px rgba(0, 0, 0, 0.8);
}
.section--dark .ico:hover,
.section--dark .card__icon:hover,
.card--dark .card__icon:hover,
/* o .ico herda a borda de vidro da regra acima, compartilhada com o mockup.
   No mockup a borda e correta (representa UI); no card .path ela criava
   card-dentro-de-card. Removida so aqui. */
.path .ico { border-color: transparent; }
.path .ico:hover,
.mock--liquid .mock-kpi:hover,
.mock--liquid .mock-row:hover {
  border-color: rgba(214, 241, 248, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 0 0 1px rgba(110, 193, 228, 0.14), 0 10px 24px -14px rgba(64, 170, 219, 0.75);
}
.mock--liquid .mock-kpi,
.mock--liquid .mock-row { border-color: rgba(214, 241, 248, 0.22); }
.mock__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.35rem 0.85rem; }
.mock__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.24); }
.mock__title {
  margin-left: 0.5rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.mock__body {
  background: rgba(0, 11, 24, 0.5);
  border-radius: var(--r);
  padding: 1.1rem;
  display: grid;
  gap: 0.85rem;
}
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.mock-kpi {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 0.7rem 0.75rem;
}
.mock-kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mock-kpi span { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }
.mock-kpi--up b { color: var(--cyan-400); }
/* A fileira de 3 KPIs precisa de ~300px (min-content dos rotulos em caixa-alta
   mais padding e gaps) e, com o .split ja impedido de alargar a coluna, o mock
   so chega a isso a partir de ~30rem de viewport. Abaixo, em vez de encolher
   cartao ou quebrar "Cobertura" no meio, os KPIs viram lista: numero e rotulo
   lado a lado, um por linha. */
@media (max-width: 30rem) {
  .mock-kpis { grid-template-columns: 1fr; }
  .mock-kpi { display: flex; align-items: baseline; gap: 0.6rem; padding-block: 0.55rem; }
  /* Em lista a largura natural do mock cai para ~347px e o margin-inline: auto
     do .hero-visual o centralizava, descolado da margem do texto entre 415 e
     480px. Ocupa a coluna inteira, como o H1 e o lead acima. */
  .hero-visual { width: 100%; }
}

.mock-chart { display: flex; align-items: flex-end; gap: 0.35rem; height: 6.5rem; padding-top: 0.4rem; }
.mock-chart i {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--cyan-400), rgba(64, 170, 219, 0.25));
  animation: bar-rise 1.1s var(--ease) backwards;
}
@keyframes bar-rise { from { height: 4%; opacity: 0; } }

.mock-rows { display: grid; gap: 0.45rem; }
.mock-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-2xs);
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.72);
}
.mock-row .tag {
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.tag--ai { background: rgba(64, 170, 219, 0.22); color: var(--cyan-300); }
.tag--ok { background: rgba(18, 163, 122, 0.18); color: #64d9b4; }
.tag--warn { background: rgba(229, 161, 58, 0.18); color: #f0c479; }

.hero-visual__float {
  position: absolute;
  right: -0.5rem;
  bottom: -1.5rem;
  background: #fff;
  color: var(--navy-700);
  border-radius: var(--r);
  padding: 0.85rem 1.1rem;
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 18.5rem;
  max-width: calc(100% - 0.5rem);
  transform-origin: right bottom;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
@media (hover: hover) {
  .hero-visual__float:hover { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.25); box-shadow: 0 24px 48px -18px rgba(0, 29, 59, 0.38); }
}
.hero-visual__float .ico {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 8px;
  background: var(--cyan-100);
  color: var(--cyan-600);
  display: grid;
  place-items: center;
}
.hero-visual__float .ico svg { width: 1.2rem; height: 1.2rem; }
.hero-visual__float b { display: block; font-family: var(--font-display); font-size: var(--fs-sm); line-height: 1.2; }
.hero-visual__float span { font-size: var(--fs-2xs); color: var(--muted); }
.hero-visual__float-caption { white-space: nowrap; }
@media (max-width: 62rem) {
  .hero-visual { margin-top: 1.5rem; max-width: 38rem; margin-inline: auto; }
  .hero-visual__signal--side { right: -0.5rem; }
  .hero-visual__float { right: 0; bottom: -1.35rem; }
}
@media (max-width: 30rem) {
  .hero-visual__signal--side { right: 0; top: 34%; }
  .hero-visual__float { position: relative; right: auto; bottom: auto; margin: -0.5rem 0 0.5rem auto; }
}

/* Coreografia do hero: uma entrada única orienta o olhar para a demonstração. */
.hero-is-ready .hero__copy > * {
  animation: hero-enter 0.75s var(--ease-out-expo, var(--ease)) both;
}
.hero-is-ready .hero__copy > *:nth-child(2) { animation-delay: 0.08s; }
.hero-is-ready .hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
.hero-is-ready .hero__copy > *:nth-child(4) { animation-delay: 0.24s; }
.hero-is-ready .hero__copy > *:nth-child(5) { animation-delay: 0.32s; }
.hero-is-ready .hero-visual > * { animation: hero-visual-enter 0.9s var(--ease-out-expo, var(--ease)) both; }
.hero-is-ready .hero-visual > *:nth-child(2) { animation-delay: 0.12s; }
.hero-is-ready .hero-visual > *:nth-child(3) { animation-delay: 0.2s; }
@keyframes hero-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-visual-enter { from { opacity: 0; } to { opacity: 1; } }

/* Hero interno (páginas) */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-700);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem) clamp(3rem, 1.5rem + 5vw, 5rem);
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 100% at 88% 0%, rgba(64, 170, 219, 0.35), transparent 60%),
    radial-gradient(55% 80% at 2% 100%, rgba(12, 77, 162, 0.4), transparent 62%);
}
.page-hero h1 { color: #fff; font-weight: 800; letter-spacing: -0.028em; }
.page-hero .lead { color: rgba(255, 255, 255, 0.75); max-width: 42rem; }

.crumbs { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.5); margin-bottom: 1.1rem; letter-spacing: 0.02em; }
.crumbs a { color: rgba(255, 255, 255, 0.7); }
.crumbs a:hover { color: #fff; }
.crumbs span { margin-inline: 0.45rem; opacity: 0.5; }

/* ==========================================================================
   Marquee de clientes
   ========================================================================== */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--bg);
  padding-block: 1.6rem;
  overflow: hidden;
}
/* Legenda da faixa, nao kicker. O caixa-alta com 0.14em de entreletra em 13px
   era o tique de rotulo generico: some a forma da palavra e nao acrescenta
   informacao nenhuma. Em caixa normal ela volta a ser lida como legenda. */
.marquee__label {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 1.35rem;
}
.marquee__track {
  display: flex;
  gap: 3.25rem;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--navy-700);
  opacity: 0.42;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: opacity 0.2s var(--ease);
}
.marquee__item:hover { opacity: 0.95; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 1.5rem 2.5rem; }
  .marquee__item[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
  position: relative;
  height: 100%;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-card); border-color: var(--cyan-300); }
.card h3, .card h4 { margin-bottom: 0.5rem; }
/* Numa grade de 4 o titulo do card e subordinado: o NIVEL vem da estrutura do
   documento (h3 depois do h2 da secao, sem pular), o TAMANHO vem da densidade
   da grade. Sem isto, corrigir o outline inflaria os titulos de 1,2 para 1,6rem. */
.grid--4 .card :is(h3, h4) { font-size: var(--fs-h4); }
.card p { font-size: var(--fs-sm); color: var(--muted); }

.card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  /* sem borda e sem gradiente: com raio proprio dentro de um card de 22px, o
     chip lia como card-dentro-de-card. O tint sozinho ja separa o icone. */
  background: var(--cyan-100);
  color: var(--cyan-600);
  margin-bottom: 1.15rem;
}
.card__icon svg { width: 1.45rem; height: 1.45rem; }

.card--dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
}
.card--dark p { color: rgba(255, 255, 255, 0.68); }
.card--dark .card__icon {
  background: rgba(64, 170, 219, 0.16);
  border-color: rgba(64, 170, 219, 0.28);
  color: var(--cyan-300);
}
.card--dark.card--hover:hover { border-color: rgba(64, 170, 219, 0.5); background: rgba(255, 255, 255, 0.08); }

.card--accent {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-600));
  border-color: transparent;
  color: rgba(255, 255, 255, 0.76);
  overflow: hidden;
}
.card--accent h3, .card--accent h4 { color: #fff; }
/* strong/b tem cor global (--ink) com especificidade 0,0,1, entao vence a heranca
   do <p> e saia em 1,04:1 sobre o navy do card. Mesmo raciocinio de .section--dark
   strong, que ja existia, estendido as superficies escuras que vivem dentro de
   secoes claras. */
.card--accent :is(strong, b),
.figure-frame :is(strong, b) { color: #fff; }
.card--accent p { color: rgba(255, 255, 255, 0.72); }
.card--accent::after {
  content: "";
  position: absolute;
  width: 14rem;
  height: 14rem;
  right: -6rem;
  top: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 170, 219, 0.45), transparent 70%);
}


/* Pilares
   A numeracao 01..04 saiu: eram quatro capacidades simultaneas, nao uma sequencia,
   e o digito so ocupava espaco afirmando uma ordem que nao existe. No lugar, um
   filete de 1px que corre a altura de cada item: agrupa os quatro como um conjunto
   sem alegar ordem, e da ao bloco um eixo vertical para a linha-guia se apoiar. */
.pillar { position: relative; }
.pillar :is(h3, h4) { font-size: var(--fs-h4); letter-spacing: -0.012em; margin-bottom: 0.3rem; }
.pillar p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* ==========================================================================
   Faixa de resultados
   ========================================================================== */
/* Livro-razão, não três caixas de vidro.
   Cada resultado carregava cinco camadas decorativas — borda de 1px, fundo
   translúcido, gradiente, brilho especular e backdrop-filter — sobre um navy
   chapado, onde não há nada atrás para borrar. Custo alto, informação zero, e
   o conjunto virava o "template de métrica": número grande dentro de card.
   O número é prova; prova se lê melhor sem moldura. Fica a regra no acento, o
   número na escala de display e a explicação embaixo. */
.results {
  display: grid;
  gap: clamp(1.75rem, 1rem + 2.4vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.result { padding-top: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem); }
/* Mesmo livro-razão sobre superfície clara (/fornecedores), no lugar de quatro
   cards com o tamanho do número escrito em style inline. */
.results--light .result__big { color: var(--navy-700); font-size: var(--fs-display-sm); }
.results--light .result__big em { color: var(--cyan-600); }
.results--light .result p { color: var(--muted); }
.result__big {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff;
  margin-bottom: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.result__big em { font-style: normal; font-size: 0.62em; font-weight: 600; color: var(--cyan-400); }
.result p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); margin: 0; max-width: 26rem; }

/* ==========================================================================
   Fluxo (Estoque → Compras → Recebimento → Distribuição)
   ========================================================================== */
.flow {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  counter-reset: flow;
}
.flow__step {
  position: relative;
  padding: 1.5rem 1.25rem;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.flow__step:hover { transform: translateY(-3px); border-color: var(--cyan-300); box-shadow: var(--sh-card); }
.flow__step .ico {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy-700);
  color: var(--cyan-400);
}
.flow__step .ico svg { width: 1.3rem; height: 1.3rem; }
.flow__step b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy-700);
  font-weight: 750;
}
.flow__step span { font-size: var(--fs-xs); color: var(--muted); display: block; margin-top: 0.35rem; }
.flow__step::after {
  content: "";
  position: absolute;
  right: -0.65rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 2px solid var(--cyan-500);
  border-right: 2px solid var(--cyan-500);
  transform: translateY(-50%) rotate(45deg);
}
.flow__step:last-child::after { display: none; }
@media (max-width: 48rem) { .flow__step::after { display: none; } }

/* ==========================================================================
   Filtros (compartilhado: /blog filtra posts por tema, /soluções não usa mais)
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filter {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 650;
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  background: #fff;
  transition: all 0.2s var(--ease);
}
.filter:hover { border-color: var(--cyan-400); color: var(--cyan-600); }
.filter[aria-pressed="true"] { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

/* ==========================================================================
   Módulos (conteúdo reaproveitado dentro do <dialog>, ver .module-modal)
   ========================================================================== */
.module {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.module__top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.module__code {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.6rem;
  border-radius: 6px;
  background: var(--navy-700);
  color: var(--cyan-300);
  flex: none;
}
.module__ico { margin-left: auto; color: var(--cyan-600); } /* icone: 3:1 minimo */
.module__ico svg { width: 1.35rem; height: 1.35rem; }
.module h3 { font-size: var(--fs-h4); margin-bottom: 0.55rem; letter-spacing: -0.015em; }
.module p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1rem; }
.module ul { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 0.4rem; }
.module li {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  padding-left: 1.35rem;
  position: relative;
  margin: 0;
}
.module li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.85rem;
  height: 0.5rem;
  border-left: 2px solid var(--cyan-500);
  border-bottom: 2px solid var(--cyan-500);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* Chips de módulos (lista compacta) */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.48rem 0.9rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
}
.chip b { color: var(--cyan-400); font-weight: 800; }
.chips--light .chip { background: #fff; border-color: var(--line); color: var(--ink-soft); }
.chips--light .chip b { color: var(--cyan-600); }

/* ==========================================================================
   Depoimentos
   ========================================================================== */
.quote-feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  /* borda de 1px + --sh (30px de blur) em repouso era o "ghost card": dois
     sinais de elevacao competindo num card branco e plano. --sh-card mantem a
     separacao do fundo sem o halo. */
  box-shadow: var(--sh-card);
  position: relative;
}
.quote-feature::before {
  content: "\201C";
  position: absolute;
  top: clamp(0.5rem, 0.2rem + 1vw, 1.25rem);
  left: clamp(1.25rem, 0.8rem + 1.5vw, 2.5rem);
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--cyan-100);
  z-index: 0;
}
.quote-feature > * { position: relative; z-index: 1; }
.quote-feature blockquote {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.42;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.person { display: flex; align-items: center; gap: 0.9rem; }
.person__avatar {
  width: 2.85rem;
  height: 2.85rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* ponta clara em --cyan-600: branco passa AA (5,66:1); --cyan-500 dava 2,63:1 */
  background: linear-gradient(135deg, var(--cyan-600), var(--navy-600));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
.person__name { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--fs-sm); line-height: 1.3; }
.person__org { font-size: var(--fs-xs); color: var(--muted); }
.section--dark .person__name { color: #fff; }
.section--dark .person__org { color: rgba(255, 255, 255, 0.6); }

/* Grid de depoimentos com expansão */
.quotes { columns: 1; column-gap: 1.35rem; }
@media (min-width: 48rem) { .quotes { columns: 2; } }
@media (min-width: 72rem) { .quotes { columns: 3; } }

.quote {
  break-inside: avoid;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.65rem;
  margin-bottom: 1.35rem;
  transition: box-shadow 0.26s var(--ease), border-color 0.26s var(--ease);
}
.quote:hover { box-shadow: var(--sh-card); border-color: var(--cyan-300); }
.quote__lead {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--ink);
  font-size: var(--fs-h4);
  line-height: 1.45;
  letter-spacing: -0.012em;
  margin-bottom: 0.9rem;
}
.quote__body { font-size: var(--fs-sm); color: var(--muted); }
.quote__body > div { display: none; }
.quote.is-open .quote__body > div { display: block; }
.quote__more {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--cyan-600);
  padding: 0.25rem 0;
  margin-bottom: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.quote__more:hover { color: var(--navy-700); }
.quote__more::after { content: "\25BE"; font-size: 0.7em; transition: transform 0.2s var(--ease); }
.quote.is-open .quote__more::after { transform: rotate(180deg); }
.quote .person { padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }

/* ==========================================================================
   Preços / planos
   ========================================================================== */
.plan {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  height: 100%;
  transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease), border-color 0.26s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-card); border-color: var(--cyan-300); }
.plan__badge {
  align-self: flex-start;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--cyan-100);
  color: var(--cyan-600);
  margin-bottom: 1rem;
}
.plan--free { border-color: var(--cyan-400); box-shadow: var(--sh-sm); }
.plan--free .plan__badge { background: linear-gradient(135deg, var(--ok), #0d8a67); color: #fff; }
.plan h3 { font-size: var(--fs-h4); margin-bottom: 0.5rem; }
.plan > p { font-size: var(--fs-sm); color: var(--muted); }
.plan__list { list-style: none; padding: 0; margin: 1.35rem 0; display: grid; gap: 0.6rem; }
.plan__list li { position: relative; padding-left: 1.65rem; font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--cyan-100);
}
.plan__list li::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.52em;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 1.8px solid var(--cyan-600);
  border-bottom: 1.8px solid var(--cyan-600);
  transform: rotate(-45deg);
}
.plan__foot { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--muted); }
.plan__foot a { font-weight: 650; }

/* ==========================================================================
   Passos numerados
   ========================================================================== */
.steps { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); counter-reset: s; }
.step {
  position: relative;
  padding: 1.6rem 1.35rem 1.35rem;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
  counter-increment: s;
}
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--cyan-300);
  display: block;
  margin-bottom: 0.7rem;
  line-height: 1;
}
.step :is(h3, h4) { font-size: var(--fs-h4); margin-bottom: 0.35rem; }
.step p { font-size: var(--fs-xs); color: var(--muted); margin: 0; }

/* ==========================================================================
   Acordeão (FAQ)
   ========================================================================== */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: left;
  padding: 1.35rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.012em;
  transition: color 0.2s var(--ease);
}
.acc-btn:hover { color: var(--cyan-600); }
.acc-btn .plus { position: relative; flex: none; width: 1.15rem; height: 1.15rem; }
.acc-btn .plus::before,
.acc-btn .plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan-600);
  transform: translateY(-50%);
  transition: transform 0.25s var(--ease);
}
.acc-btn .plus::after { transform: translateY(-50%) rotate(90deg); }
.acc-btn[aria-expanded="true"] .plus::after { transform: translateY(-50%) rotate(0); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { font-size: var(--fs-sm); color: var(--muted); padding-bottom: 1.4rem; margin: 0; }
.acc-panel p + p { padding-top: 0.8rem; }

/* ==========================================================================
   Segmentos / caminhos
   ========================================================================== */
.paths { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.path {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  transition: transform 0.26s var(--ease), background 0.26s var(--ease), border-color 0.26s var(--ease);
}
.path:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.09); border-color: rgba(64, 170, 219, 0.45); }
.path .ico {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(64, 170, 219, 0.18);
  color: var(--cyan-300);
  margin-bottom: 1.1rem;
}
.path .ico svg { width: 1.4rem; height: 1.4rem; }
.path h3 { font-size: var(--fs-h4); color: #fff; margin-bottom: 0.5rem; }
.path p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); margin-bottom: 1.35rem; }
.path .link-arrow { margin-top: auto; color: var(--cyan-400); }
.path .link-arrow:hover { color: #fff; }

/* ==========================================================================
   CTA final
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem);
  background: linear-gradient(140deg, var(--navy-700) 0%, var(--navy-600) 55%, var(--cyan-600) 140%);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 90% at 80% 10%, rgba(110, 193, 228, 0.35), transparent 60%);
}
.cta-band h2 { color: #fff; margin-bottom: 0.75rem; }
/* O `white-space: nowrap` obrigava o titulo a caber em uma linha, e no celular
   a saida tinha sido encolher a fonte para 0,875rem: um H2 de 14px, MENOR que
   o corpo do texto de 16px, invertendo a hierarquia justamente no CTA. Agora o
   nowrap so vale onde ha largura para ele; abaixo disso o titulo quebra em
   --fs-h2, como todo H2 do site. */
.cta-band .cta-title { width: 100%; max-width: none; margin-inline: auto; text-align: center; }
@media (min-width: 62rem) { .cta-band .cta-title { white-space: nowrap; } }
@media (max-width: 42rem) {
  .cta-band { padding-inline: 1rem; }
}
.cta-band p { color: rgba(255, 255, 255, 0.78); max-width: 38rem; margin-inline: auto; }
.cta-band .btn-row { margin-top: 2rem; }

/* ==========================================================================
   Formulário
   ========================================================================== */
/* Elevacao declarada uma vez. Com a borda de 1px, o --sh (30px de blur) fazia
   o halo do "ghost card": dois sinais de profundidade competindo. */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
  box-shadow: var(--sh-card);
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}
.field label .req { color: var(--cyan-600); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: max(1rem, var(--fs-sm)); /* >=16px: evita o zoom forcado do Safari iOS */
  color: var(--ink);
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7288' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 1.1rem; padding-right: 2.5rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  /* outline transparente mantem o anel visivel no alto contraste do Windows */
  outline: 2px solid transparent;
  outline-offset: 0;
  background: #fff;
  border-color: var(--cyan-600);
  box-shadow: 0 0 0 3px rgba(31, 110, 147, 0.32);
}
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: #d9534f; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.form-note { font-size: var(--fs-xs); color: var(--muted-light); margin-top: 1rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.form-note svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.15rem; color: var(--ok); }

.form-status {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: var(--fs-sm);
  display: none;
}
.form-status.is-ok { display: block; background: rgba(18, 163, 122, 0.1); border: 1px solid rgba(18, 163, 122, 0.3); color: #0a6c51; animation: status-in 0.35s var(--ease) both; }
@keyframes status-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Canais de contato */
.channel {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.channel:last-child { border-bottom: 0; }
.channel .ico {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--cyan-100);
  color: var(--cyan-600);
}
.channel .ico svg { width: 1.25rem; height: 1.25rem; }
.channel :is(h3, h4) { font-size: var(--fs-h4); margin-bottom: 0.2rem; }
.channel p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.channel a { font-weight: 600; }

/* ==========================================================================
   Timeline (Sobre)
   ========================================================================== */
.values { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.value-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
/* Duas colunas para listas longas de recurso. Em /fornecedores isto substituiu
   uma segunda grade de seis cards ícone+título+texto, colada logo abaixo de
   outra igual: doze caixas idênticas seguidas, e a página inteira virava a
   mesma forma repetida. O que a plataforma inclui é lista, não vitrine. */
.value-list--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  column-gap: clamp(1.75rem, 1rem + 2.4vw, 3.25rem);
  row-gap: 1.35rem;
}
.value-list li { margin: 0; padding-left: 3.25rem; position: relative; }
.value-list li b { display: block; font-family: var(--font-display); color: var(--ink); font-size: var(--fs-h4); margin-bottom: 0.15rem; }
.value-list li span { font-size: var(--fs-sm); color: var(--muted); }
.value-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan-100), #fff);
  border: 1px solid var(--cyan-100);
}
.value-list li::after {
  content: "";
  position: absolute;
  left: 0.72rem;
  top: 0.78rem;
  width: 0.9rem;
  height: 0.48rem;
  border-left: 2px solid var(--cyan-600);
  border-bottom: 2px solid var(--cyan-600);
  transform: rotate(-45deg);
}

.figure-frame {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: linear-gradient(150deg, var(--navy-700), var(--navy-600));
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}
.figure-frame::after {
  content: "";
  position: absolute;
  width: 20rem;
  height: 20rem;
  right: -8rem;
  bottom: -10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 170, 219, 0.4), transparent 68%);
}
.figure-frame > * { position: relative; z-index: 1; }
.figure-frame h3 { color: #fff; }

.metric-list { display: grid; gap: 1rem; }
.metric {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: center;
  padding: 0.95rem 1.1rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.metric b {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cyan-400);
  line-height: 1;
}
.metric span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.62);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0;
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
}
.footer-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 62rem) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
  .footer-grid > :first-child { grid-column: auto; }
}
.site-footer h5 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  margin-bottom: 1.1rem;
  font-weight: 700;
}
.site-footer p { color: rgba(255, 255, 255, 0.55); font-size: var(--fs-sm); }
.site-footer a { color: rgba(255, 255, 255, 0.65); }
.site-footer a:hover { color: var(--cyan-400); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.footer-links li { margin: 0; }
.footer-contact { display: grid; gap: 1rem; }
.footer-contact div span {
  display: block;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 0.25rem;
}

.socials { display: flex; gap: 0.55rem; margin-top: 1.5rem; }
.socials a {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.22s var(--ease);
}
.socials a:hover { background: var(--cyan-600); border-color: var(--cyan-600); color: #fff; transform: translateY(-2px); }
.socials svg { width: 1.05rem; height: 1.05rem; }

.store-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.85rem; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.22s var(--ease);
}
.store-badge:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.24); }
.store-badge svg { width: 1.15rem; height: 1.15rem; flex: none; }
.store-badge b { display: block; color: #fff; font-size: var(--fs-xs); line-height: 1.2; }
.store-badge span { font-size: var(--fs-2xs); opacity: 0.7; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.4);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ==========================================================================
   Cookies
   ========================================================================== */
/* Barra inferior de largura total: cobre apenas uma faixa fina, nunca os CTAs. */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px -16px rgba(0, 29, 59, 0.35);
  padding: 1rem var(--gutter);
  /* espaço à direita para não passar sob o botão do WhatsApp */
  padding-right: calc(var(--gutter) + 4.5rem);
  /* visibility, e nao so transform: transform desloca o pixel mas mantem os tres
     botoes no tab order e na arvore de acessibilidade — inclusive para quem ja
     decidiu e nunca mais vera a barra. visibility ja esta na lista branca de
     transition-property do bloco de reduced-motion, entao a saida continua suave. */
  visibility: hidden;
  transform: translateY(110%);
  transition: transform 0.4s var(--ease), visibility 0.4s var(--ease);
}
.cookie-bar.is-visible { visibility: visible; transform: none; }
.cookie-bar p { font-size: var(--fs-xs); color: var(--muted); margin: 0; max-width: 46rem; }
.cookie-bar :is(h4, h5) {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink);
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}
/* flex: none impedia a fileira de encolher: com justify-content: center no
   .cookie-bar, os 58px de excesso em 375px eram centralizados e cortavam 10px
   do botao "Aceitar" na borda esquerda. `0 1 auto` deixa encolher, e o
   .btn-row ja tem flex-wrap: wrap para quebrar em duas linhas. */
.cookie-bar .btn-row { flex: 0 1 auto; }

/* ==========================================================================
   Chat — barra de controles
   ========================================================================== */
/* O embed do Typebot não tem chrome de fechar nem de recomeçar: aberta, a bolha
   só vira um chevron discreto, e a conversa não tem como voltar ao início. A
   janela do embed vive num shadow root — dá para ler, não para vestir —, então
   a barra é HTML nosso (src/components/site/ChatTypebot.astro) empilhado logo
   acima dela.

   Empilhar exige saber onde a janela termina, e para isso nós ditamos o tamanho
   dela: as medidas abaixo vão ao `initBubble` em public/assets/js/chat.js como
   theme.chatWindow.maxWidth/maxHeight. Custom properties atravessam o shadow
   boundary, então a janela obedece a estes mesmos valores e a conta fecha dos
   dois lados. Trocar um nome aqui sem trocar lá descola a barra; a paridade
   está coberta em tests/dist/chat.test.ts.

   Preferimos isto a mirar as classes internas do bundle, que são minificadas e
   mudam a cada versão do @typebot.io/js. */
:root {
  --chat-largura: 400px;
  /* distância da janela até a borda inferior: 20px do container + 48px do botão
     médio + 12px de gap, os três defaults que o chat.js passa explícitos */
  --chat-recuo: 80px;
  --chat-barra-altura: 56px;
  /* O header encaixa SOBRE o topo da janela em vez de flutuar acima dela. Os 8px
     são o raio do `rounded-lg` do embed: cobri-los é o que faz as duas peças
     lerem como um painel só, sem duas frestas de página nos cantos de cima. */
  --chat-barra-encaixe: 8px;
  /* a janela cede a faixa do header (menos o encaixe) em vez de ficar sob ele:
     assim o header nunca cobre mensagem, e num viewport curto quem encolhe é a
     janela, não o header */
  --chat-altura: min(
    704px,
    calc(100dvh - var(--chat-recuo) - var(--chat-barra-altura) + var(--chat-barra-encaixe))
  );
}
.chat-barra {
  position: fixed;
  right: 20px;
  bottom: calc(var(--chat-recuo) + var(--chat-altura) - var(--chat-barra-encaixe));
  width: var(--chat-largura);
  max-width: 100vw;
  height: var(--chat-barra-altura);
  /* o container do embed é z-index 424242; o header tem de vir por cima */
  z-index: 424243;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* só o topo arredonda: a base é reta porque encaixa sobre a janela */
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--navy-700);
  padding: 0 0.5rem 0 0.75rem;
}
.chat-barra__identidade {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
/* a marca já desenha os próprios cantos arredondados; forçar um círculo cortaria o "gt" */
.chat-barra__avatar { width: 32px; height: 32px; flex: none; }
.chat-barra__textos { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.chat-barra__nome {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-barra__estado {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.2;
}
.chat-barra__estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.chat-barra__acoes { display: flex; align-items: center; gap: 0.15rem; flex: none; }
.chat-barra__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  /* sem texto: o rótulo acessível vem do aria-label, e o title dá a dica no hover */
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chat-barra__icone:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.chat-barra__confirmacao {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}
.chat-barra__pergunta {
  margin-right: auto;
  font-size: var(--fs-2xs);
  font-weight: 650;
  color: #fff;
}
.chat-barra__botao {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 650;
  line-height: 1;
  padding: 0.45rem 0.75rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chat-barra__botao:hover { background: rgba(255, 255, 255, 0.14); }
.chat-barra__botao--forte { background: #fff; border-color: #fff; color: var(--navy-700); }
.chat-barra__botao--forte:hover { background: var(--cyan-100); color: var(--navy-700); }
@media (max-width: 639.98px) {
  /* abaixo do breakpoint do Tailwind o embed troca sm:right-0 por -right-5 com
     w-screen, colando a janela na borda direita; a barra acompanha para as duas
     continuarem alinhadas */
  .chat-barra {
    right: 0;
    width: min(var(--chat-largura), 100vw);
  }
}

/* ==========================================================================
   Animações de entrada
   ========================================================================== */
/* Só escondemos o conteúdo quando há JS para revelá-lo de volta (a classe .js é
   adicionada por um script inline no <head>). Sem JS, tudo aparece normalmente. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.1s; }
.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.22s; }
.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.34s; }
.js .reveal-stagger.is-in > *:nth-child(n + 7) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Antes este bloco zerava transition-duration em `*` com !important, o que
     apagava tambem o feedback que CARREGA significado: mudanca de cor no hover,
     anel de foco, abertura do menu. Reduced motion pede menos movimento, nao
     ausencia de resposta.
     Agora: animacoes em loop param (os blocos especificos deste arquivo ja dao a
     alternativa de cada uma — o marquee, por exemplo, vira lista em wrap), o
     deslocamento espacial e anulado por nome, e transicoes de cor, opacidade,
     sombra e contorno continuam, porque sao elas que confirmam a acao. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color,
      box-shadow, outline-color, visibility !important;
    transition-duration: 0.16s !important;
  }

  .js .reveal, .js .reveal-stagger > * { opacity: 1; transform: none; }

  /* elevacao no hover: preserva a mudanca de sombra e cor, remove o movimento */
  .btn:hover,
  .card--hover:hover,
  .flow__step:hover,
  .module:hover,
  .plan:hover,
  .path:hover,
  .post:hover { transform: none; }
  /* mantem o deslocamento de parallax (0 quando o parallax esta desligado),
     descarta so o scale(1.25) do hover */
  .hero-visual__float:hover { transform: translate3d(0, var(--parallax-y, 0px), 0); }
  #gt-rodape .rp-social a:hover img { transform: none; }
}

/* ---------- Utilitários ---------- */
.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;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 999;
  background: #fff;
  color: var(--navy-700);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 650;
  box-shadow: var(--sh);
}
.skip-link:focus { top: 0; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 1.35rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.hr { height: 1px; background: var(--line); border: 0; margin-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* ==========================================================================
   ==========================================================================
   v2 — Design System evoluído
   Acento corrente · Liquid glass · Animações
   (camada aditiva: sobrepõe a base sem quebrar o que já existe)
   ========================================================================== */

/* ---------- Acento corrente ----------
   Havia aqui um espectro de seis rampas (violeta, esmeralda, âmbar, coral,
   magenta, índigo) distribuído por nth-child. Cor atribuída por posição no DOM
   não é sistema: nenhum leitor consegue dizer o que "o terceiro card é âmbar"
   significa, porque não significa nada — e num negócio de suprimento hospitalar
   verde/âmbar/vermelho ainda carregam semântica de status que a página não
   estava usando. O acento voltou a ser um só, o da marca, e a ênfase passa a vir
   de peso, tamanho e espaço. As custom properties continuam, para que qualquer
   bloco possa receber um acento próprio quando houver motivo. */
:root {
  --accent:     var(--cyan-500);
  --accent-600: var(--cyan-600);
  --accent-300: var(--cyan-300);
  --accent-100: var(--cyan-100);
}

/* Resultados: a hierarquia vem do número, não de três matizes sem legenda. */
.results > .result { border-top: 2px solid var(--accent); }
.results > .result .result__big em { color: var(--accent-300); }

/* ---------- Componentes claros passam a ler o acento corrente ---------- */
.card__icon {
  background: linear-gradient(135deg, var(--accent-100), #fff);
  border-color: var(--accent-100);
  color: var(--accent-600);
}
.plan__badge { background: var(--accent-100); color: var(--accent-600); }
.plan__list li::before { background: var(--accent-100); }
.plan__list li::after { border-color: var(--accent-600); }
.step::before { color: var(--accent-300); }
.channel .ico { background: var(--accent-100); color: var(--accent-600); }
.value-list li::before { background: linear-gradient(135deg, var(--accent-100), #fff); border-color: var(--accent-100); }
.value-list li::after { border-color: var(--accent-600); }
.card--hover:hover { border-color: var(--accent-300); }

/* Eyebrow ganha a cor do acento quando o bloco estiver "pintado" */

/* ---------- Módulos (solucoes): acento aplicado ao conteúdo do modal ---------- */
.module__code {
  background: linear-gradient(135deg, var(--accent-600), var(--accent));
  color: #fff;
}
.module__ico { color: var(--accent); }
.module li::before { border-left-color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Cards em fundo escuro assumem o acento (translúcido) ---------- */
.section--dark .card__icon,
.card--dark .card__icon {
  background: rgba(64, 170, 219, 0.16); /* fallback */
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--accent-300);
}
.card--dark.card--hover:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* ==========================================================================
   Liquid glass — painéis de vidro com profundidade e brilho especular
   ========================================================================== */
.glass {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 30px 60px -30px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  isolation: isolate;
}
/* brilho especular que percorre o topo */
.glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}
/* Vidro sobre superfícies claras */
.glass--light {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  border-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--sh), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: rgba(10, 30, 55, 0.72); }
  .glass--light { background: rgba(255, 255, 255, 0.94); }
}

/* Já-existentes ganham cara de vidro real (saturação + prefixo webkit) */
.mock,
.path,
.hero__badge,
.btn--light { -webkit-backdrop-filter: blur(14px) saturate(150%); }

/* ==========================================================================
   Aurora / malha tecnológica — sobreposições de luz coloridas
   ========================================================================== */

/* Malha de pontos tecnológica (usada em faixas claras) */

/* O globo de suprimento do hero é a cena em Three.js (.hero__scene, ver
   assets/js/hero-scene.js e hero-globo.js) — empilhamento documentado junto
   do backdrop, acima. */
.hero { position: relative; }

/* ==========================================================================
   Animações leves
   ========================================================================== */
.float-soft { animation: float-soft 6.5s ease-in-out infinite; }
@keyframes float-soft {
  0%, 100% { transform: translate3d(0, var(--parallax-y, 0px), 0); }
  50% { transform: translate3d(0, calc(var(--parallax-y, 0px) - 9px), 0); }
}

/* Brilho que varre os cards no hover (sheen) */

.card--hover, .flow__step, .plan, .module { position: relative; }
.card--hover { overflow: hidden; }

/* Spotlight que segue o cursor (liquid glass tech) — ativado via JS (--mx/--my) */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* Badge tecnológico com ponto pulsante (status) */

/* Chips: o código do módulo já é o destaque; a cor não precisa ciclar. */
.chips--tech .chip b { color: var(--cyan-400); }
.chips--light.chips--tech .chip b { color: var(--cyan-600); }

/* Filtros de módulo: cor de destaque no estado ativo por acento herdado */
.filter[aria-pressed="true"] { background: var(--navy-700); border-color: var(--navy-700); }

/* Passos do fluxo assumem o acento (ícone + seta + hover) */
.flow__step .ico { color: var(--accent-300); }
.flow__step::after { border-color: var(--accent); }
.flow__step:hover { border-color: var(--accent-300); }
.flow__step b { color: var(--navy-700); }

/* Cartão de destaque (navy) ganha halo colorido pelo acento herdado */
.card--accent::after {
  background: radial-gradient(circle, rgba(64, 170, 219, 0.45), transparent 70%); /* fallback */
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 48%, transparent), transparent 70%);
}

/* Caminhos (paths) em fundo escuro assumem o acento */
.path .ico {
  background: rgba(64, 170, 219, 0.18); /* fallback */
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-300);
}
.path .link-arrow { color: var(--accent-300); }
.path:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* ==========================================================================
   Blog
   ========================================================================== */
/* Indice editorial, nao grade de cards.
   A miniatura de cada artigo era um retangulo navy com um icone de traco no
   canto — dez identicos na pagina. Icone nao e capa: nao mostra o assunto, nao
   distingue um artigo do outro e ocupa 56% da altura de cada entrada. Sem
   fotografia real disponivel, a resposta honesta e nenhuma imagem: a entrada
   passa a ser tipografica, com regra fina no lugar da caixa, e o titulo — que
   e o unico conteudo que de fato diferencia os artigos — ganha o tamanho que
   tinha de dividir com a miniatura. */
.post-grid {
  display: grid;
  column-gap: clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
  row-gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.post {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  padding-block: clamp(1.35rem, 1rem + 1vw, 1.9rem) clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  transition: border-color 0.28s var(--ease);
}
.post:hover { border-top-color: var(--accent); }
.post__body { display: flex; flex-direction: column; flex: 1; }

/* Categoria e data numa linha so: metadado, nao etiqueta flutuante. */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  font-size: var(--fs-xs);
  margin-bottom: 0.7rem;
}
.post__cat { font-family: var(--font-display); font-weight: 650; color: var(--accent-600); }
/* O ponto separador fica preso ao FIM da categoria, não ao início da data: se a
   linha quebrar, ele acompanha "Categoria ·" em vez de abrir a linha de baixo
   pendurado sozinho. */
.post__meta .post__cat::after {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.25em;
  margin-left: 0.75rem;
  opacity: 0.55;
}
.post__date { color: var(--muted-light); font-weight: 500; margin: 0; }
.post h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin-bottom: 0.6rem;
  transition: color 0.2s var(--ease);
}
.post:hover h3 { color: var(--accent-600); }
.post p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.15rem; }
.post .link-arrow { margin-top: auto; align-self: flex-start; color: var(--accent-600); }

/* O artigo em destaque e o unico momento composto da pagina: superficie navy
   da marca, titulo na escala de H1 e a chamada como acao principal. Uma peca,
   nao dez retangulos decorativos. */
/* Duas colunas assimétricas: a manchete ocupa a largura que ganhou com a saída
   da miniatura, e o resumo mais a chamada fecham a direita alinhados pela base.
   Em uma coluna só sobrava 40% de navy vazio no lado direito. */
.post__feature {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 0.6rem + 2vw, 2.75rem);
  align-items: end;
  padding: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--navy-700), var(--navy-600) 62%, var(--navy-500));
  color: rgba(255, 255, 255, 0.76);
}
@media (min-width: 54rem) { .post__feature { grid-template-columns: 1.15fr 0.85fr; } }
.post__feature::after {
  content: "";
  position: absolute;
  inset: -30% -12% auto 52%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(64, 170, 219, 0.26), transparent 66%);
  pointer-events: none;
}
.post__lead, .post__aside { position: relative; z-index: 1; }
.post__feature .post__cat { color: var(--cyan-400); }
.post__feature .post__date { color: rgba(255, 255, 255, 0.62); }
.post__feature h2 {
  font-size: var(--fs-h1);
  color: #fff;
  margin: 0;
  text-wrap: pretty;
}
.post__feature p { font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.76); margin-bottom: 1.6rem; }
/* .post__meta também é um <p>: sem isto ele herdava o corpo do lead (20px),
   quebrava em duas linhas e afastava o metadado da manchete. */
.post__feature .post__meta { font-size: var(--fs-xs); margin-bottom: 0.9rem; }
.post__feature .btn { align-self: flex-start; }

/* ==========================================================================
   Respeito a prefers-reduced-motion (reforço para as novidades)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .float-soft,
  .mock--liquid,
  .mock--liquid::before { animation: none !important; }
}

/* ==========================================================================
   ==========================================================================
   v3 — Ajustes: logo em imagem, menu transparente sobre o hero,
   hero claro (soluções), selos das lojas e imagem de seção
   ========================================================================== */

:root { --nav-h: 6rem; }

/* ---------- Logo como imagem ---------- */
.brand__logo {
  height: 3.96rem;
  width: auto;
  max-width: none; /* neutraliza o max-width: 100% do reset, que deformava a marca */
  display: block;
  transform-origin: left center;
  transition: transform 0.22s var(--ease);
}
@media (max-width: 42rem) {
  :root { --nav-h: 5rem; }
  .site-header__inner { min-height: 5rem; }
  .brand__logo { height: 3.456rem; }
}
.site-footer .brand__logo { height: 3.6rem; }

/* ---------- Menu transparente sobre a imagem do hero ---------- */
/* O <main> é puxado para cima para que o hero fique atrás do menu, que passa a
   ser transparente. Ao rolar (.is-stuck) o menu ganha fundo navy sólido. */
main { margin-top: calc(-1 * var(--nav-h)); }

.hero,
.page-hero { padding-top: calc(var(--nav-h) + clamp(2rem, 1rem + 4vw, 3.75rem)); }

.site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}
.site-header.is-stuck {
  background: rgba(0, 19, 38, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
}
/* Camada do vidro. Fica no pseudo-elemento, e não no header, porque
   `backdrop-filter` torna o elemento containing block dos descendentes
   `position: fixed` — e o menu mobile é um deles. Com o filtro no header, rolar
   a página encolhia o painel do menu para a altura do próprio header.
   `z-index: -1` pinta acima do fundo do header e abaixo do conteúdo dele. */
.site-header.is-stuck::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
/* Ícone do menu mobile sempre claro (fica sobre o hero escuro / navy) */
.site-header .nav-toggle { color: #fff; }
.site-header .nav-toggle:hover { background: rgba(255, 255, 255, 0.12); }

/* Links e botões do menu claros — apenas no desktop (no mobile o painel é branco) */
@media (min-width: 71.0625rem) {
  .site-header .nav > a:not(.btn) { color: rgba(255, 255, 255, 0.82); }
  .site-header .nav > a:not(.btn):hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
  .site-header .nav > a[aria-current="page"]:not(.btn) { color: #fff; }
  .site-header .nav > a[aria-current="page"]::after { background: #fff; }
  .site-header .header-actions .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
  }
  .site-header .header-actions .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.14); }
}

/* ---------- Hero claro (página Soluções) ---------- */
/* Nessas páginas o menu não sobrepõe: barra navy sólida acima de um hero branco. */
body.hero-light main { margin-top: 0; }
body.hero-light .site-header {
  background: var(--navy-700);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.hero-light .page-hero { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.page-hero--light { background: var(--bg-soft); color: var(--ink-soft); }
.page-hero--light::before { display: none; }
.page-hero--light h1 { color: var(--ink); }
.page-hero--light .lead { color: var(--muted); }
.page-hero--light .crumbs { color: var(--muted); }
.page-hero--light .crumbs a { color: var(--ink-soft); }
.page-hero--light .crumbs a:hover { color: var(--navy-700); }
.page-hero--light .stat__value { color: var(--navy-700); }
.page-hero--light .stat__value .unit { color: var(--cyan-600); } /* idem: unidade sobre fundo claro */
.page-hero--light .stat__label { color: var(--muted); }
.page-hero--light .stats { border-top-color: var(--line); }
.page-hero--light .btn--light {
  background: var(--navy-700);
  color: #fff;
  border-color: var(--navy-700);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.page-hero--light .btn--light:hover { background: var(--navy-600); color: #fff; }

/* ---------- Bloco "Experiência aplicada": 4 cards lado a lado ---------- */
/* O `repeat(4, 1fr) !important` valia em TODA largura e transbordava: os rótulos
   dos passos são caixa-alta com tracking de 0.11em, então cada coluna tem ~134px
   de min-content e as quatro pediam ~536px — 20px a mais que a viewport em 500px,
   e pior abaixo disso. As quatro colunas só entram quando cabem; abaixo disso o
   `.flow` volta ao auto-fit que ele já tinha. */
@media (min-width: 48rem) {
  .flow--4 { grid-template-columns: repeat(4, 1fr) !important; }
}
.flow--4 .flow__step { padding-inline: 0.75rem; }

/* ---------- Imagem de seção (hospital) — largura total da seção ---------- */
.section-figure {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-block: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}

/* ---------- Capa (imagem) no topo dos cards de guia — full-bleed ---------- */
.card__media {
  margin: calc(-1 * clamp(1.4rem, 1rem + 1vw, 2rem));
  margin-bottom: 1.25rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--bg-tint);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Selos das lojas (Google Play / App Store) ---------- */
.store-badges { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.store-badge {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  width: 9rem;
  height: 2.7rem;
  box-shadow: var(--sh-sm);
  transition: transform 0.22s var(--ease);
}
.store-badge:hover { background: transparent; transform: translateY(-2px); }
.store-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   ==========================================================================
   v4 — Rodapé padrão GTPLAN (#gt-rodape) · escopado, não afeta o resto
   ========================================================================== */
#gt-rodape{
  --rp-fundo:#093142; --rp-texto:#B9D0DC; --rp-titulo:#FFFFFF; --rp-destaque:#40AADB;
  --rp-linha:rgba(255,255,255,.14); --rp-barra:#87A5B4;
  --rp-h4:var(--fs-2xs); --rp-logo:48px; --rp-icone:22px; --rp-icone-cor:none;
  --rp-largura:1160px; --rp-espaco:64px;
  --rp-fonte:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--rp-fundo); color:var(--rp-texto); font-family:var(--rp-fonte);
  font-size:var(--fs-xs); line-height:1.6; padding:var(--rp-espaco) 0 32px; display:block; -webkit-font-smoothing:antialiased;
}
#gt-rodape *,#gt-rodape *::before,#gt-rodape *::after{box-sizing:border-box}
#gt-rodape h3,#gt-rodape h4,#gt-rodape p,#gt-rodape ul,#gt-rodape li{margin:0;padding:0}
#gt-rodape ul,#gt-rodape li{list-style:none!important}
#gt-rodape ul::before,#gt-rodape li::before,#gt-rodape li::marker{content:none!important}
#gt-rodape img{max-width:100%;display:block;border:0}
#gt-rodape a{color:inherit!important;text-decoration:none!important;transition:color .2s;box-shadow:none}
#gt-rodape a:hover{color:var(--rp-destaque)!important}
#gt-rodape a:focus-visible{outline:2px solid var(--rp-destaque);outline-offset:3px;border-radius:3px}
#gt-rodape .rp-wrap{width:min(var(--rp-largura),92vw);margin-inline:auto}
#gt-rodape .rp-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
#gt-rodape .rp-marca a{display:inline-block}
#gt-rodape .rp-marca img{height:57.6px;width:auto;margin-bottom:16px;transform-origin:left center;transition:transform .22s var(--ease)}
#gt-rodape .rp-marca a:hover img{transform:scale(1.25)}
#gt-rodape .rp-grid :is(h3,h4){
  font-size:var(--rp-h4)!important;line-height:1.3!important;font-family:inherit!important;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--rp-titulo)!important;margin:0 0 14px!important;font-weight:700!important
}
#gt-rodape li,#gt-rodape p{margin-bottom:9px;font-size:inherit}
/* SC 2.5.8 (AA): alvo minimo 24x24. Os links de lista tinham 16px de altura por
   serem inline. inline-block + padding vertical leva cada um a >=24px sem mudar
   o tamanho da fonte nem o desenho da coluna. */
#gt-rodape li a,#gt-rodape .rp-barra a{display:inline-block;padding-block:5px;min-height:24px}
#gt-rodape .rp-social a{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
#gt-rodape .rp-social{display:flex;align-items:center;gap:12px;margin-top:12px}
#gt-rodape .rp-social img{height:var(--rp-icone);width:auto;opacity:.8;transition:.2s;filter:var(--rp-icone-cor)}
#gt-rodape .rp-social a:hover img{opacity:1;transform:translateY(-2px)}
#gt-rodape .rp-barra{
  margin-top:32px;padding-top:24px;border-top:1px solid var(--rp-linha);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:var(--fs-2xs);color:var(--rp-barra)
}
@media(max-width:900px){#gt-rodape .rp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){#gt-rodape .rp-grid{grid-template-columns:1fr}}
/* No celular a coluna e unica e sobra altura: os 32px do alvo (que passam no
   SC 2.5.8, mas ficam apertados para o polegar) sobem para 40px sem mexer no
   desenho do rodape no desktop. */
@media (max-width: 42rem) {
  #gt-rodape li a,#gt-rodape .rp-barra a{padding-block:9px;min-height:40px}
  #gt-rodape li{margin-bottom:2px}
}
/* mesmo raciocinio do bloco global: mantem a resposta de cor/opacidade, que e o
   unico feedback dos links do rodape, e descarta so o movimento */
@media (prefers-reduced-motion:reduce){
  #gt-rodape *{transition-property:opacity,color,background-color,border-color,box-shadow,outline-color!important;transition-duration:.16s!important}
  #gt-rodape .rp-social a:hover img{transform:none}
}

/* Depoimentos — destaque em ciano com contraste aprovado (4,67:1 no card branco) */
.quotes .quote__lead { color: #1b7ca8; }

/* Avatar do depoente com foto real (mantém o mesmo círculo das iniciais) */
.person__avatar { overflow: hidden; }
.person__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ==========================================================================
   v5 — Correções de acessibilidade e conversão
   ========================================================================== */

/* Título que fica em uma linha só no desktop e quebra normalmente no celular.
   Abaixo de 768px usa o --fs-h2 padrão, preservando a hierarquia. */
.h2-nowrap-desktop { white-space: normal; }
/* Antes o nowrap entrava em 48rem e, para caber, derrubava o H2 de 2,375rem
   para 2rem — um H2 menor que os das outras paginas. O nowrap agora so entra
   em 62rem, onde o titulo cabe no --fs-h2 padrao sem reducao nenhuma. */
@media (min-width: 62rem) {
  .h2-nowrap-desktop { white-space: nowrap; }
}

/* Barra de cookies: "Recusar" com o mesmo peso visual de "Aceitar" (ANPD) */
.cookie-bar .btn-row { gap: 0.6rem; }
.cookie-bar .btn--reject {
  background: #fff;
  color: var(--navy-700);
  border-color: var(--navy-700);
}
.cookie-bar .btn--reject:hover { background: var(--bg-tint); color: var(--navy-700); }

/* Estado de erro do formulário */
.form-status.is-error {
  display: block;
  background: rgba(190, 58, 42, 0.08);
  border: 1px solid rgba(190, 58, 42, 0.35);
  color: #8e1f16;
}

/* ==========================================================================
   v6 — Marquee de clientes com logos
   Nome em texto e logo convivem com o mesmo peso visual: mesma altura,
   mesmo cinza, mesma opacidade. Assim a faixa não fica desigual enquanto
   os logos que faltam não chegam.
   ========================================================================== */
.marquee__track { align-items: center; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;          /* altura comum a logo e texto */
}

.marquee__item img {
  height: 2.25rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  /* neutraliza cores conflitantes entre marcas diferentes */
  filter: grayscale(1) contrast(0.85);
  opacity: 0.55;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}
.marquee__item:hover img { filter: none; opacity: 1; }

/* o item de logo não usa a tipografia do item de texto */
.marquee__item--logo { opacity: 1; }
.marquee__item--logo:hover { opacity: 1; }

@media (max-width: 42rem) {
  .marquee__item, .marquee__item img { height: 1.85rem; }
  .marquee__item img { max-width: 9rem; }
}

/* Sem animação: a faixa vira uma grade centrada, e os logos acompanham */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { align-items: center; }
}

/* ==========================================================================
   ==========================================================================
   v7 — Header premium (estética "Awwwards"): micro-interações refinadas,
   barra de progresso de rolagem e menu mobile em tela cheia.
   Escopado a .site-header — não altera nenhum outro bloco do site.
   ========================================================================== */

/* ---------- Marca: entrada suave no load + hover mais expressivo ---------- */
.site-header .brand__logo { animation: brand-in 0.7s var(--ease) both; }
@keyframes brand-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) {
  .site-header .brand:hover .brand__logo {
    transform: scale(1.25);
    filter: drop-shadow(0 8px 20px rgba(64, 170, 219, 0.35));
  }
}

/* ---------- Nav desktop: sublinhado central animado no hover/foco ----------
   Escopado a filhos diretos (.nav > a): ".nav a" tambem casaria os <a> do
   seletor de idioma dentro de .nav > .idiomas (visivel so no menu mobile,
   mas o seletor descendente nao sabe disso). */
@media (min-width: 71.0625rem) {
  .nav > a:not(.btn) { transition: color 0.22s var(--ease), background-color 0.22s var(--ease); }
  .nav > a:not(.btn)::before {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0.28rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0;
    transition: left 0.3s var(--ease), right 0.3s var(--ease), opacity 0.2s var(--ease);
  }
  .nav > a:not(.btn):hover::before,
  .nav > a:not(.btn):focus-visible::before { left: 0.9rem; right: 0.9rem; opacity: 0.6; }
  .nav > a[aria-current="page"]::before { display: none; }
}

/* ---------- CTA do header: brilho que percorre no hover ---------- */
.site-header .btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-140%) skewX(-14deg);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.site-header .btn--primary:hover::before { transform: translateX(140%) skewX(-14deg); }

/* ---------- Botão hambúrguer: morph suave entre os dois ícones ---------- */
.nav-toggle { position: relative; }
.nav-toggle svg {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block !important;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav-toggle__open { opacity: 1; transform: rotate(0deg); }
.nav-toggle__close { opacity: 0; transform: rotate(-90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { opacity: 0; transform: rotate(90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { opacity: 1; transform: rotate(0deg); }

/* ---------- Barra de progresso de rolagem, colada à base do header ---------- */
.header-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  pointer-events: none;
}
.header-progress span {
  display: block;
  height: 100%;
  /* largura fixa + scaleX: o navegador composita a barra sem recalcular layout.
     Antes era width de 0 a 100% com transition: width, o que forcava reflow a
     cada frame de scroll. O gradiente comprime igual nos dois casos. */
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan-600), var(--cyan-400));
  transition: transform 0.12s linear;
}
body.hero-light .header-progress { background: rgba(0, 29, 59, 0.1); }

/* Fio de luz no rodapé do header quando ele já está colado no topo */
.site-header.is-stuck::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-400), transparent);
  opacity: 0.45;
}

/* ---------- Menu mobile em tela cheia: numeração e entrada escalonada ---------- */
@media (max-width: 71rem) {
  .nav {
    background: linear-gradient(180deg, rgba(0, 11, 24, 0.98), rgba(0, 19, 38, 0.98));
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-top-color: rgba(255, 255, 255, 0.08);
    counter-reset: nav-index;
  }
  /* Escopado a filhos diretos (.nav > a): ".nav a:not(.btn)" tambem casava os
     <a> do seletor de idioma em .nav > .idiomas, que ganhavam a numeracao
     07/08/09 do menu (counter-increment) e o recuo de 2.75rem do padding-left,
     por ".idiomas a" ter especificidade menor que ".nav a:not(.btn)". */
  .nav > a:not(.btn) {
    counter-increment: nav-index;
    position: relative;
    padding-left: 2.75rem;
    color: rgba(255, 255, 255, 0.86);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
      color 0.2s var(--ease), background-color 0.2s var(--ease);
  }
  .nav > a:not(.btn)::before {
    content: counter(nav-index, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.05rem;
    font-family: var(--font-sans);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--cyan-400);
    opacity: 0.75;
  }
  .nav > a[aria-current="page"] { color: #fff; }
  .nav > a:not(.btn):hover,
  .nav > a:not(.btn):focus-visible { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .nav.is-open > a { opacity: 1; transform: none; }
  .nav.is-open > a:nth-child(1) { transition-delay: 0.06s; }
  .nav.is-open > a:nth-child(2) { transition-delay: 0.11s; }
  .nav.is-open > a:nth-child(3) { transition-delay: 0.16s; }
  .nav.is-open > a:nth-child(4) { transition-delay: 0.21s; }
  .nav.is-open > a:nth-child(5) { transition-delay: 0.26s; }
  .nav.is-open > a:nth-child(6) { transition-delay: 0.31s; }
  .nav.is-open > a:nth-child(7) { transition-delay: 0.36s; }
  .nav > .btn {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s var(--ease) 0.4s, transform 0.45s var(--ease) 0.4s;
  }
  .nav.is-open > .btn { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand__logo { animation: none; }
  .nav a:not(.btn),
  .nav > .btn { transition: none !important; opacity: 1 !important; transform: none !important; }
  .site-header .btn--primary::before { display: none; }
}

/* Logos quase quadrados (proporção abaixo de 2:1) ganham um pouco mais de
   altura. Normalizar só pela altura faria a marca parecer menor que as
   horizontais, porque ela ocupa bem menos largura. */
.marquee__item--tall img { height: 2.9rem; }
@media (max-width: 42rem) { .marquee__item--tall img { height: 2.4rem; } }

/* ==========================================================================
   ==========================================================================
   v8 — Página /sobre
   A cena do hero (assets/js/sobre-scene.js) desenha as duas palavras do H1: uma
   malha exata de 16x16 nós (tecnologia) e uma rota que se resolve por dentro
   dela e se refaz a cada ciclo (inteligência).
   Aqui ficam só o palco dela e os três componentes que a página passou a usar.
   ========================================================================== */

/* ---------- Palco da cena ---------- */
/* O canvas é transparente e fica ENTRE o ::before (focos radiais) e o conteúdo:
   ambos em z-index -1, e a ordem de pintura resolve, porque o pseudo-elemento
   pinta antes do primeiro filho. O chão continua sendo o degradê de .page-hero,
   cujo contraste já foi medido — a cena não repinta o fundo, para não invalidar
   a medição. */
.page-hero__scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s var(--ease);
}
.page-hero__scene.is-ready { opacity: 1; }

/* Sem WebGL o canvas sai do DOM e a página assume esta classe: o degradê passa a
   sustentar o bloco sozinho, então ganha mais foco em vez de parecer um fundo
   que faltou carregar. Mesmo padrão de .hero--no-scene. */
.page-hero--no-scene::before {
  background:
    radial-gradient(60% 80% at 86% 4%, rgba(64, 170, 219, 0.46), transparent 62%),
    radial-gradient(52% 70% at 2% 100%, rgba(12, 77, 162, 0.48), transparent 64%),
    radial-gradient(70% 50% at 62% 108%, rgba(110, 193, 228, 0.16), transparent 60%);
}

/* Uma medida só para a coluna do hero: título, régua, lead e contadores passam a
   dividir a mesma borda direita. Antes eram três (768px, 672px e 1120px). */
.page-hero__copy { max-width: 46rem; }
.page-hero__copy .lead { max-width: none; }

/* ---------- Régua 2009 → 2026 ---------- */
/* Substitui o selo "Desde 2009". Um objeto com duas pontas e um percurso afirma
   dezessete anos; um rótulo caixa-alta apenas declara. O traço desenha uma vez
   (GSAP); com reduced-motion nasce desenhado. */
.timespan {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 24rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.74);
}
.timespan__track {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.timespan__track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-500), var(--cyan-300));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- Prova: quem já opera com a GTPLAN ---------- */
/* Grade estática, e não faixa rolante: numa página cujo trabalho é gerar
   confiança os nomes são a prova, e prova se lê — não se vê passar. */
.clients {
  border-block: 1px solid var(--line);
  background: var(--bg);
  padding-block: clamp(2rem, 1.2rem + 2vw, 3.25rem);
}
.clients__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
  text-align: center;
  margin: 0 0 clamp(1.35rem, 1rem + 1vw, 2rem);
}
.clients__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem);
  place-items: center;
}
/* São 16 marcas: 2, 4 e 8 por linha fecham exatamente, sem sobra na última. */
@media (min-width: 34rem) { .clients__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 62rem) { .clients__grid { grid-template-columns: repeat(8, 1fr); } }
.clients__grid li { margin: 0; display: flex; align-items: center; min-height: 2.9rem; }
.clients__grid img {
  height: 2.25rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* neutraliza cores conflitantes entre marcas diferentes */
  filter: grayscale(1) contrast(0.85);
  opacity: 0.62;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}
.clients__grid li:hover img { filter: none; opacity: 1; }
/* Logos quase quadrados ocupam bem menos largura: normalizar só pela altura
   faria a marca parecer menor que as horizontais. */
.clients__grid .is-tall img { height: 2.9rem; }
@media (max-width: 42rem) {
  .clients__grid img { height: 1.85rem; }
  .clients__grid .is-tall img { height: 2.4rem; }
}

/* ---------- Pilares com linha-guia ---------- */
/* A numeração 01–04 saiu. No lugar, um filete único que desenha para baixo
   conforme o scroll atravessa o bloco: mostra que os quatro pertencem ao mesmo
   método, sem alegar uma ordem que não existe. */
.pillars {
  position: relative;
  display: grid;
  gap: clamp(1.35rem, 1rem + 1vw, 1.9rem);
  padding-left: 1.5rem;
}
.section--dark .pillars__guide { background: rgba(255, 255, 255, 0.16); }
.pillars__guide {
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  /* --line sobre --bg-soft dava 1,1:1 — o trilho não aparecia. */
  background: rgba(11, 26, 43, 0.22);
}
.pillars__guide i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--cyan-500), var(--cyan-300));
  transform: scaleY(0);
  transform-origin: 50% 0;
}

/* ---------- Missão / Visão / Valores ---------- */
/* Era um grid de três cards numerados, com um título por card que só repetia as
   duas primeiras palavras do parágrafo. Vira lista de definição: o rótulo é o
   termo, o texto é a definição. Mesmo conteúdo, um terço da altura. */
.creed { margin: 0; display: grid; }
.creed__row {
  display: grid;
  gap: 0.55rem 2.5rem;
  /* O detector de design do projeto acusa "cramped-padding" aqui, e é falso: o
     recuo renderiza entre 24px e 36px acima e abaixo da régua. Ele não avalia
     clamp() nem propriedades lógicas, então lê os dois como zero — medido: com
     `padding: 2rem 0` o achado some, com `padding-block: 2rem` ou
     `padding-top: clamp(…)` ele permanece. Mantido o clamp, que é o desenho
     certo; o achado é ruído da ferramenta. */
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.creed__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
@media (min-width: 48rem) {
  .creed__row { grid-template-columns: 11rem 1fr; }
}
.creed dt {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #fff;
  line-height: 1.2;
}
/* .creed__ico e não .ico: a regra .section--dark .ico dá borda de vidro e
   sombra a qualquer .ico em fundo escuro — desenhada para o chip quadrado do
   .path. Herdada aqui viraria uma caixa em volta do ícone do <dt>. Mesmo
   motivo do .spec__ico. */
.creed dt { display: flex; align-items: center; gap: 0.6rem; }
.creed__ico { color: var(--cyan-400); flex: none; display: flex; }
.creed__ico svg { width: 1.35rem; height: 1.35rem; }
.creed dd { margin: 0; max-width: 46rem; color: rgba(255, 255, 255, 0.78); }
.creed dd p { margin: 0 0 0.7rem; }
.creed dd p:last-child { margin: 0; }

/* ---------- Sobre: -30% de espaço vertical ----------
   O sistema já tinha o multiplicador --section-space-factor; aqui ele vira 0.7
   para a página inteira, em vez de reescrever o padding seção por seção.
   Precisa vir depois de `.marquee ~ .section` (mesma especificidade, 0-2-0):
   aquela regra grava o fator no próprio elemento e venceria a herança do body.
   O mesmo 0.7 se aplica às réguas internas do creed e à respiro do
   .section-head, que são o resto do vazio percebido na página. */
.page-sobre .section,
.page-sobre .marquee ~ .section { --section-space-factor: 0.7; }
.page-sobre .section-head { margin-bottom: clamp(1.6rem, 0.85rem + 2.1vw, 2.6rem); }
.page-sobre .creed__row { padding-block: clamp(1.05rem, 0.7rem + 1.05vw, 1.6rem); }

/* ---------- Sobre: tipografia do bloco 01 (hero) ----------
   Pedido do cliente: H1 -25% e o lead -3pt. Os dois saem calculados a partir
   dos tokens (--fs-h1 / --fs-lead), e nao em px fixo, para continuarem
   acompanhando o --type-scale global se a escala do site mudar. Escopado ao
   body.page-sobre: o H1 das outras paginas internas nao muda.
   -3pt == 4px exatos (1pt = 1/72in = 4/3px), mesma conta ja usada em
   .culture .lead. */

/* ---------- Sobre: o hero em duas colunas de verdade ----------
   A malha (assets/js/sobre-scene.js) ocupa a sobra à direita da cópia, dentro
   da coluna de conteúdo. Com a cópia em 46rem sobravam 384px e a cena só cabia
   invadindo a margem da janela: ficava encostada na borda do navegador, longe
   do texto, lendo como papel de parede em vez da outra metade do bloco.
   36rem resolve os dois lados de uma vez. A malha ganha ~544px (células de
   ~33px, contáveis a olho) e a medida do lead cai de 89 para ~70 caracteres,
   que é a faixa em que uma linha ainda se lê sem perder o começo da seguinte.
   Só a partir de 62rem: abaixo disso o hero é uma coluna só, a cena não roda e
   estreitar a cópia seria perda pura. */
@media (min-width: 62rem) {
  .page-sobre .page-hero .page-hero__copy { max-width: 36rem; }
}

/* ---------- Nossa cultura ---------- */
/* Três colunas numeradas. O número é âncora de leitura, não ordem de execução:
   fica atrás do texto, em ciano rebaixado, e sai do fluxo do card para que os
   três títulos alinhem na mesma linha de base independente do tamanho dele.
   Vem depois de uma faixa escura e antes do rodapé (também escuro): a banda
   clara é o que impede os dois blocos escuros de virarem um só. */
.culture { background: var(--bg-soft); }
.culture__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.15rem, 0.6rem + 1.4vw, 1.85rem);
}
/* Mesmo ponto de virada único do .grid--3 e do .split: com três filhos, duas
   colunas deixariam o terceiro sozinho ao lado de meia fila vazia. */
@media (max-width: 61.99rem) { .culture__grid { grid-template-columns: 1fr; } }
/* Os tres valores nao formam sequencia: nao ha primeiro nem ultimo, e "02" nao
   depende de "01". O 01/02/03 era so contagem decorativa, e o chip de icone
   (lampada, pessoa, duas pessoas) era intercambiavel entre os tres — nenhum
   dos dois distinguia um valor do outro. Sem eles, o que separa as colunas e a
   regra no acento, o mesmo idioma do .results e do indice do blog. */
.culture__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem);
  border-top: 2px solid var(--cyan-500);
  transition: border-color 0.25s var(--ease);
}
.culture__card:hover { border-top-color: var(--navy-700); }
/* O número ocupa uma faixa fixa no alto e o texto começa logo abaixo dela: com
   isso os três títulos nascem na mesma linha, apesar de parágrafos de tamanhos
   diferentes. Ancorar pela base — como sugere a referência — desalinhava os
   títulos justamente porque os textos têm alturas distintas. */
/* O recuo aqui existia para dar passagem à linha do ícone + número, que saiu. */
.culture__body { padding-top: 0; }
/* -3pt (4px) sobre o --fs-lead padrão: pedido do cliente. Fica calculado a
   partir do token, e não em px fixo, para continuar acompanhando o
   --type-scale global se a escala do site mudar. */
.culture__card h3 { font-size: var(--fs-h3); margin: 0 0 0.5rem; }
.culture__card p { margin: 0; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .culture__card, .culture__card:hover { transition: none; transform: none; }
}

/* No celular a .cta-band tinha 24px de raio contra 16px de padding lateral, e a
   primeira letra de cada linha entrava na curva. */
@media (max-width: 42rem) {
  .cta-band { border-radius: var(--r); }
}

@media (prefers-reduced-motion: reduce) {
  .timespan__track i { transform: scaleX(1); }
  .pillars__guide i { transform: scaleY(1); }
}

/* ==========================================================================
   ==========================================================================
   v10 — Página /soluções
   Os 17 cards de módulo em grade + filtro por função viraram 3 trilhas por
   segmento de cliente (Hospitais, Indústrias, Fornecedores): quem entra na
   seção pergunta "o que existe pra mim", não "qual categoria funcional". Cada
   nome de módulo abre o mesmo conteúdo de sempre num <dialog> nativo — nada
   da profundidade dos 17 cards se perde, só o espaço que a grade ocupava.
   O diagrama do hospital continua crescendo até a largura da seção com o
   scroll, sem mudanças.
   ========================================================================== */

/* ---------- Fundo do hero: batimento que vira pulso digital ---------- */
/* Três camadas com profundidades diferentes no scroll (o mesmo sistema de
   parallax do hero da home, não um segundo). Todas vivem na METADE DIREITA,
   fora da coluna de texto: --muted sobre --bg-soft já está em 4,79:1, então
   qualquer véu atrás de corpo de texto derrubaria o contraste abaixo de AA.
   Fora do texto não há esse limite, e por isso o traço pode ter presença. */
.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-solucoes .page-hero > .wrap { position: relative; z-index: 1; }

.hero-field > * {
  position: absolute;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* Malha técnica: pontos, não grade fechada — grade cheia vira papel milimetrado
   e rouba a página. A máscara segue o traço: foco na direita, na altura do
   meio da cópia, e não mais no canto de cima. */
.hero-field__mesh {
  inset: -12% -4% -12% 40%;
  background-image: radial-gradient(circle, rgba(11, 26, 43, 0.09) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(78% 78% at 100% 42%, #000 16%, transparent 74%);
  mask-image: radial-gradient(78% 78% at 100% 42%, #000 16%, transparent 74%);
}

/* Luz: um único foco frio atrás do traço. Sem segundo brilho competindo. */
.hero-field__glow {
  inset: -10% -10% 12% 48%;
  background: radial-gradient(50% 64% at 76% 46%, rgba(64, 170, 219, 0.28), transparent 70%);
}

/* Sinal: a linha. Não é camada de fundo — é a segunda coluna do .split, então
   o alinhamento vertical com a cópia (topo do H1 até a base dos botões) é do
   próprio grid, e não de um `top: %` que envelhece na primeira requebra. */
.hero-signal {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
  /* fade curto na entrada: o traço aparece, não começa cortado */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%);
  mask-image: linear-gradient(90deg, transparent, #000 16%);
}
.hero-signal svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Mais presença que na versão anterior: ali o traço passava perto de texto e
   precisava sumir; aqui ele tem coluna própria, e um fio fantasma ao lado de
   um H1 desse peso só pareceria erro de renderização. */
.hero-signal__trace {
  stroke: var(--cyan-600);
  stroke-opacity: 0.42;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* O pulso que percorre a linha: um traço curto viajando de ponta a ponta.
   pathLength normaliza a geometria, então o dash não depende do comprimento
   real do path — mexer no desenho não quebra o ritmo. */
.hero-signal__pulse {
  stroke: var(--cyan-500);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 42 1000;
  animation: hero-signal 7.5s linear infinite;
}
@keyframes hero-signal {
  from { stroke-dashoffset: 1042; }
  to { stroke-dashoffset: 0; }
}

/* Empilhado, a cópia ocupa a largura inteira e o traço viraria mais uma faixa
   entre os botões e os números — rolagem paga por decoração. Fora da página. */
@media (max-width: 61.99rem) {
  .hero-field,
  .hero-signal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Sem a viagem, o traço parado a meio caminho seria só um pedaço mais claro
     da linha, sem significado nenhum. */
  .hero-signal__pulse { display: none; }
}

/* ---------- Trilhas por segmento ---------- */
.solution-tracks {
  display: grid;
  gap: clamp(2rem, 1.2rem + 2.8vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .solution-tracks { grid-template-columns: repeat(3, 1fr); }
}
/* Cada trilha abria com um desenho de traço do prédio do segmento (hospital,
   fábrica, galpão) sobre grade azul. Era ilustração imitando fotografia — a
   versão barata do efeito — e ocupava 40% da coluna sem dizer nada que o
   título já não dissesse. Sem foto real da operação, o topo é a regra de
   acento e o nome do segmento; a informação da coluna é a lista de módulos. */
.solution-track {
  padding-top: clamp(1.05rem, 0.85rem + 0.7vw, 1.45rem);
  border-top: 2px solid var(--cyan-500);
}
.solution-track h3 { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
.solution-track > p { font-size: var(--fs-sm); color: var(--muted); max-width: 30rem; margin-bottom: 0; }
.solution-track__list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}
.solution-track__list li { margin: 0; border-top: 1px solid var(--line); }
.solution-track__list li:first-child { border-top: 0; }
.solution-track__link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.7rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  color: var(--navy-700);
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.solution-track__link::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-left: auto;
  flex: none;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.4;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.solution-track__link:hover,
.solution-track__link:focus-visible {
  color: var(--accent-600);
  gap: 0.6rem;
}
.solution-track__link:hover::after,
.solution-track__link:focus-visible::after {
  opacity: 1;
  transform: rotate(45deg) translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .solution-track__link:hover { gap: 0; }
}

/* ---------- Modal de módulo: <dialog> nativo, sem framework ---------- */
/* Substitui o hover-panel: numa lista compacta por segmento não há onde um
   painel absoluto "crescer" sem sobrepor a coluna vizinha, e no toque hover
   nunca existiu mesmo. O <dialog> resolve foco, Escape e o ::backdrop de
   graça — menos JS do que o hover-panel que ele substitui. */
.module__detail > :last-child { margin-bottom: 0; }

.module-modal {
  position: fixed;
  margin: auto;
  width: min(30rem, calc(100vw - 2.5rem));
  max-height: min(85vh, 38rem);
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-card), 0 30px 60px -20px rgba(0, 20, 45, 0.35);
  opacity: 0;
  transform: translateY(0.75rem) scale(0.97);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
    overlay 0.24s var(--ease) allow-discrete, display 0.24s var(--ease) allow-discrete;
}
.module-modal[open] { opacity: 1; transform: none; }
@starting-style {
  .module-modal[open] { opacity: 0; transform: translateY(0.75rem) scale(0.97); }
}
.module-modal::backdrop {
  background: rgba(0, 15, 35, 0.55);
  opacity: 0;
  transition: opacity 0.24s var(--ease), overlay 0.24s var(--ease) allow-discrete, display 0.24s var(--ease) allow-discrete;
}
.module-modal[open]::backdrop { opacity: 1; }
@starting-style {
  .module-modal[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .module-modal, .module-modal::backdrop { transition: none; }
}
.module-modal .module { padding: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); position: relative; }
.module-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.module-modal__close svg { width: 1.05rem; height: 1.05rem; }
.module-modal__close:hover { background: var(--bg-soft); color: var(--ink); }

/* ---------- Diagrama do hospital: cresce com o scroll ---------- */
/* Não é ornamento: o diagrama lista cinco grupos de problemas com quatro itens
   cada, em tipo que, na largura da coluna, fica no limite do legível. Crescer
   até a largura da seção é o que torna o conteúdo lido. Por isso o repouso é
   0,68 e não 0,2 — mesmo pequeno ele precisa se anunciar como diagrama.
   A figura vive FORA do .wrap, então "largura total" é 100% da seção: nada de
   100vw, que somaria a barra de rolagem e criaria overflow horizontal. */
.figure-zoom {
  --fig-scale: 1; /* sem JS a imagem já nasce no tamanho cheio */
  position: relative;
  width: 100%;
  /* O teto de altura é de LARGURA, não de altura. A versão anterior usava
     `max-height: 74vh` junto de `aspect-ratio`: a caixa encolhia para 74vh mas
     a área de conteúdo continuava na altura cheia do 2036/993, então a imagem
     ficava mais alta que a caixa e o `overflow: hidden` decepava topo e base —
     em 1903x945 sumiam ~24% da altura, isto é, quatro sintomas da coluna
     esquerda, três da direita e toda a base do desenho. Limitando a LARGURA a
     partir do mesmo teto de 80vh, a caixa inteira encolhe em proporção e a
     altura nunca passa de 80vh sem que nada seja cortado. */
  max-width: calc(80vh * 2036 / 993);
  margin: clamp(1.75rem, 1rem + 2.5vw, 3rem) auto;
  display: grid;
  place-items: center;
}
.figure-zoom img {
  display: block;
  /* height auto, nunca 100%: a proporção vem dos atributos width/height do
     próprio <img>, que já reservam o espaço antes do download (sem CLS) e
     garantem que a caixa tenha exatamente a altura do desenho. */
  width: 100%;
  height: auto;
  transform: scale(var(--fig-scale));
  transform-origin: center;
  will-change: transform;
}
/* Instrução se lê como frase. Em caixa-alta com 0,1em de entreletra, 38
   caracteres viram um rótulo decorativo — exatamente o oposto de uma dica. */
.figure-zoom figcaption {
  position: absolute;
  inset: auto 0 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.62);
  opacity: var(--fig-hint, 0);
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* A legibilidade é o ponto da interação, então o caminho sem movimento
     entrega o estado ÚTIL — o diagrama grande — em vez do estado de repouso. */
  .figure-zoom { --fig-scale: 1; }
  .figure-zoom figcaption { display: none; }
}

/* ---------- Tipografia de pico ---------- */
/* Uma página carrega um momento autoral (a cena do /sobre) e o título precisa
   estar à altura. Teto em 3,9rem: o piso de qualidade limita display a 6rem, e
   acima disso a medida da coluna quebraria. /soluções usava esta mesma classe
   quando o hero tinha o índice de módulos como contraponto; removido o índice,
   a classe "peak" saiu do marcado — mas a fórmula sobrevive, -35%, logo
   abaixo em .page-solucoes .page-hero h1. */
.page-hero--peak h1 { letter-spacing: -0.03em; }

/* ---------- /soluções: hero e cabeçalho de seção reduzidos ---------- */
/* Pedido do cliente: H1 do hero -35%, lead -3pt; título "Mais de 20 módulos"
   -15%, lead -2pt. O H1 parte da MESMA fórmula que .page-hero--peak usava
   aqui (clamp 2,1rem–3,9rem: o tamanho que o cliente viu e pediu para
   reduzir), só que com a classe "peak" já removida do marcado — o índice de
   módulos que justificava o pico não existe mais. Mesmo idioma de
   .page-sobre logo acima: calc() sobre tokens, nunca px fixo, para
   acompanhar --type-scale se a escala global mudar. */
/* As reducoes por pagina que moravam aqui (H1 -35%, lead -3pt, H2 -15%,
   lead -2pt) sairam: os tokens --fs-h1/--fs-h2/--fs-lead ja foram recalibrados
   para a media dessas alturas, entao /solucoes chega no mesmo tamanho por onde
   todas as outras paginas chegam, em vez de por um desconto local. */

/* ---------- Faixa de especificações (fundo escuro) ---------- */
/* Quatro cards de mesmo tamanho com ícone + título + parágrafo eram a estrutura
   da seção — o container preguiçoso. Viram uma faixa de quatro colunas separadas
   por fio: mesmo conteúdo, sem quatro caixas competindo com o diagrama que
   acabou de ocupar a largura inteira. */
.specs {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
.spec {
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.spec:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
/* .spec__ico e nao .ico: existe uma regra .section--dark .ico que da borda de
   vidro e sombra a qualquer .ico em fundo escuro — desenhada para o chip
   quadrado do .path. Herdada aqui, com display:block, ela virava uma caixa
   larga atravessando a coluna inteira. Nome proprio resolve sem !important. */
.spec__ico { color: var(--cyan-300); display: block; margin-bottom: 0.85rem; }
.spec__ico svg { width: 1.5rem; height: 1.5rem; }
.spec h3 { font-size: var(--fs-h4); color: #fff; margin-bottom: 0.4rem; }
.spec p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); margin: 0; }
@media (min-width: 48rem) {
  .specs { grid-template-columns: repeat(4, 1fr); gap: 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
  .spec { border-top: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 0; }
  .spec:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Contato
   ========================================================================== */

/* ---------- -30% de espaço vertical ----------
   Mesmo mecanismo já usado no /sobre: o multiplicador --section-space-factor
   em vez de reescrever o padding seção por seção. Precisa vir depois de
   `.marquee ~ .section` (mesma especificidade, 0-2-0), que grava o fator no
   próprio elemento e venceria a herança do body. O hero interno e o respiro do
   .section-head não passam pelo multiplicador, então recebem o mesmo 0,7 na mão;
   o menu (--nav-h, que é folga do header fixo) e o rodapé ficam intactos. */
.page-contato .section,
.page-contato .marquee ~ .section { --section-space-factor: 0.7; }
.page-contato .page-hero {
  padding-top: calc(var(--nav-h) + clamp(1.4rem, 0.7rem + 2.8vw, 2.65rem));
  padding-bottom: clamp(2.1rem, 1.05rem + 3.5vw, 3.5rem);
}
.page-contato .section-head { margin-bottom: clamp(1.6rem, 0.85rem + 2.1vw, 2.6rem); }
/* Empilhado, o gap do .split é vazio vertical como qualquer outro. Em duas
   colunas ele é horizontal e fica como está. */
@media (max-width: 61.99rem) {
  .page-contato .split { gap: clamp(1.4rem, 0.7rem + 2.8vw, 3.15rem); }
}
/* Coluna "Prefere falar agora?": a lista de canais é o que mais respira aqui.
   1,25rem por linha → 0,8rem, e o rótulo cola no dado a que pertence. */
.page-contato .channel { padding-block: 0.8rem; }
.page-contato .channel :is(h3, h4) { margin-bottom: 0.1rem; }
.page-contato .channel p { line-height: 1.45; }
.page-contato .mt-2 { margin-top: 0.95rem; }

/* ---------- Trabalhe conosco ---------- */
/* Faixa clara entre o cartão branco do formulário e a seção escura de caminhos:
   sem ela os dois blocos escuros do fim da página viram um só. Copy e ação na
   mesma linha — é um destino único, não um cartão com título e parágrafo. */
.careers {
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  align-items: center;
}
.careers__copy { max-width: 46rem; }
.careers h2 { margin-bottom: 0.5rem; }
/* 2pt menos que o lead padrão. Em pt de propósito: o pedido é em pt e a
   unidade é exata (1pt = 4/3 px), então a redução acompanha o clamp em toda
   largura em vez de virar um segundo clamp para manter em sincronia. */
.careers .lead { margin: 0; }
.careers .lead strong { color: var(--ink); font-weight: 700; }
.careers__cta { justify-self: start; }
@media (min-width: 52rem) {
  .careers { grid-template-columns: minmax(0, 1fr) auto; }
  .careers__cta { justify-self: end; }
}

/* ---------- Formulário + canais: duas colunas do mesmo tamanho ----------
   Larguras iguais (o .split--wide-left dava 1,15 / 0,85) e a linha da grade
   esticada, para as duas colunas terminarem na mesma altura. A folga é
   absorvida pela moldura do mapa, que perde o 4/3 e passa a ocupar o que
   sobra da coluna — é o único elemento ali cuja altura é livre. Só em duas
   colunas: empilhado, cada bloco volta a ter a altura do próprio conteúdo. */
@media (min-width: 62rem) {
  .page-contato #formulario .split--wide-left {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .page-contato #formulario .split > * { display: flex; flex-direction: column; }
  /* A figura cresce para ocupar a folga e cola na base da coluna: é o que faz
     as duas bordas de baixo baterem. */
  .page-contato .office-map {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .page-contato .office-map__frame {
    /* Cresce até o teto; o que sobrar viraliza respiro ACIMA do mapa, via o
       justify-content da figura. Entre 62rem e ~69rem o .field-row do
       formulário empilha e a coluna da esquerda ganha ~220px de uma vez —
       sem teto, o mapa virava retrato. Piso e teto mantêm a moldura entre
       ~1,25:1 e ~1,75:1 em qualquer largura. */
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 15rem;
    max-height: 22rem;
  }
}

/* ---------- Mapa da sede: a aproximação ----------
   O momento autoral da página. O endereço deixa de ser uma linha de texto e
   vira um lugar: a moldura abre a ~10 km de altitude, em satélite, e desce até
   a rua. São duas camadas reais do Google Maps, não um globo desenhado — a de
   voo amplia e sai de foco enquanto a de rua chega e trava o foco.
   Curvas opostas de propósito: quem sai acelera, quem chega desacelera.
   Sem JS, sem reduced-motion ou se a camada de voo não carregar em tempo,
   nada disso existe e o mapa de rua já está no lugar (ver main.js). */
.office-map { margin: 1.4rem 0 0; }
.office-map__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  /* Elevação declarada uma vez, só sombra: o mapa traz a própria borda de cor. */
  box-shadow: var(--sh);
  /* Duas cores de espera, cada uma parecida com a camada que vai cobri-la: o
     tom claro é o do mapa de rua (estado normal) e o navy é o do satélite
     (enquanto o mergulho está armado). Assim a moldura nunca pisca em cinza
     de iframe nem inverte o brilho quando o tile chega. */
  background: var(--bg-tint);
  transition: background-color 400ms var(--ease);
  isolation: isolate;
}
.office-map__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.office-map__street { z-index: 1; }
.office-map__flight {
  z-index: 2;
  pointer-events: none;
  display: none;
}
.office-map__note {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.7rem;
}
.office-map__note .link-arrow { color: var(--cyan-600); }

/* Só o JS que vai conduzir o mergulho liga a camada de voo. */
.office-map--motion .office-map__flight { display: block; opacity: 0; }
.office-map--motion .office-map__flight,
.office-map--motion .office-map__street {
  transition:
    opacity 640ms cubic-bezier(0.55, 0, 0.85, 0.35),
    transform 640ms cubic-bezier(0.55, 0, 0.85, 0.35),
    filter 640ms cubic-bezier(0.55, 0, 0.85, 0.35);
}
/* Armado: a rua recua para a altitude inicial e o satélite assume. Roda ~600px
   antes de a moldura entrar na tela, escondido pelo opacity 0 do .reveal. */
.office-map.is-armed .office-map__frame { background: var(--navy-800); }
.office-map.is-armed .office-map__flight { opacity: 1; }
.office-map.is-armed .office-map__street {
  opacity: 0;
  transform: scale(0.78);
  filter: blur(6px);
}
.office-map.is-armed .office-map__flight,
.office-map.is-armed .office-map__street { will-change: transform, opacity, filter; }
/* Mergulho. */
.office-map.is-diving .office-map__flight {
  opacity: 0;
  transform: scale(2.75);
  filter: blur(12px);
}
.office-map.is-diving .office-map__street {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 780ms cubic-bezier(0.16, 1, 0.3, 1) 110ms,
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1) 110ms,
    filter 700ms cubic-bezier(0.16, 1, 0.3, 1) 110ms;
}

@media (prefers-reduced-motion: reduce) {
  /* Cinto e suspensório: o main.js já não arma o mergulho aqui. */
  .office-map__flight { display: none !important; }
  .office-map__street { opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* Empilhada, a coluna ocupa a largura inteira e o 4/3 virava meia tela de
   altura. Formato mais largo: mesma leitura do mapa, menos vazio vertical. */
@media (max-width: 61.99rem) {
  .office-map__frame { aspect-ratio: 16 / 10; }
}