@charset "UTF-8";

/* ==========================================================================
   Harambee — Autogestão de Condomínios
   Design system em CSS puro. Nenhuma dependência de framework.
   Ordem: 1 tokens · 2 reset · 3 tipografia · 4 layout · 5 componentes
          6 seções · 7 mockups · 8 formulários · 9 responsivo · 10 utilidades
   ========================================================================== */

/* 1. TOKENS ================================================================ */

/* Identidade: VERDE E BRANCO.
   O branco é a cor dos cartões; a tela é um verde tão claro que se lê como
   branco e existe para o cartão ter de onde se destacar. Raio de 14 a 18px,
   botão em pílula, display moderado, rodapé claro.

   A fonte pedida é a GOTHAM. Ela é licenciada e não pode ser empacotada,
   então vem primeiro na pilha e entra em uso assim que a licença existir;
   a reserva auto-hospedada é a Montserrat. Ver assets/css/fonts.css.

   Todo par de cor com texto é conferido por `node build/check-contrast.js`;
   o espaço vazio, por `node build/check-vazios.mjs`. */

:root {
  /* --- Marca: verde e branco -------------------------------------------
     Cada valor abaixo foi ESCOLHIDO POR CÁLCULO de contraste, não a olho, e
     é conferido a cada build por `node build/check-contrast.js`. A razão
     aparece ao lado. Um verde que "parece escuro" pode reprovar em AA com
     texto branco por uma margem invisível a olho nu — e aí o botão
     principal do site fica difícil de ler para parte dos visitantes. */

  --green-50:  #f4f9f6;
  --green-100: #e9f4ee;
  --green-200: #d3e5db;
  --green-300: #a9c9ba;
  --green-400: #6e8a7d;
  --green-500: #15805a;
  --green-600: #0f7a52;
  --green-700: #0c5e40;
  --green-800: #0a4a33;
  --green-900: #0a2e21;

  /* Papéis de marca */
  --brand:        #0f7a52;  /* 5,35:1 com branco — botão primário e link   */
  --brand-strong: #0c5e40;  /* 7,80:1 — foco, hover, estado pressionado    */
  --brand-deep:   #0a4a33;  /* 9,14:1 sobre a faixa clara — texto de ênfase*/
  --brand-tint:   #e9f4ee;  /* faixa e fundo de selo                       */

  /* Gradiente institucional, só em superfície decorativa. O logotipo
     mantém as cores originais e nunca recebe gradiente por cima. */
  --harambee-gradient: linear-gradient(135deg, #0a4a33 0%, #0f7a52 55%, #15805a 100%);

  /* --- Papéis de superfície --------------------------------------------
     Branco é a cor dos cartões; a tela é um verde tão claro que se lê como
     branco, e existe só para o cartão branco ter de onde se destacar sem
     precisar de sombra ou borda pesada. */
  --canvas: #f4f9f6;
  --canvas-deep: #e9f4ee;

  /* Tinta: verde quase preto. 14,73:1 sobre branco. */
  --ink: #0a2e21;
  --ink-soft: #355547;   /* 8,26:1 sobre branco · 7,33:1 sobre a faixa     */
  --ink-mute: #47695a;   /* 6,11:1 sobre branco · 5,42:1 sobre a faixa     */

  /* Texto sobre painel escuro */
  --on-dark: #ffffff;       /* 14,73:1 sobre a tinta */
  --on-dark-mute: #a9c9ba;  /*  8,24:1 sobre a tinta */

  /* Faixas de cor cheia */
  --band-soft: #e9f4ee;
  --band-mid: #d3e5db;
  --band-strong: #a9c9ba;
  /* Apelidos herdados, para não quebrar regras antigas que ainda os citam */
  --band-sky: var(--band-soft);
  --band-sky-strong: var(--band-mid);
  --band-mist: var(--band-soft);

  /* Neutros, todos com um toque de verde para o cinza não puxar para o azul */
  --white: #ffffff;
  --gray-50: #f7faf8;
  --gray-100: #eef4f1;
  --gray-200: #dcebe3;
  --gray-300: #c3d9cd;
  --gray-400: #6e8a7d;
  --gray-500: var(--ink-mute);
  --gray-700: var(--ink-soft);
  --gray-900: var(--ink);
  --harambee-text: var(--ink);

  /* Apelidos da paleta antiga, mapeados para o verde. Existem para que
     nenhuma regra remanescente caia em cor indefinida durante a transição. */
  --harambee-50: var(--green-50);
  --harambee-100: var(--green-100);
  --harambee-200: var(--green-200);
  --harambee-300: var(--green-300);
  --harambee-400: var(--green-400);
  --harambee-600: var(--green-600);
  --harambee-700: var(--green-700);
  --harambee-800: var(--green-800);
  --harambee-900: var(--green-900);
  --harambee-950: #061c14;
  --harambee-cyan: var(--brand);
  --harambee-lime: var(--green-500);

  /* Semânticos, em famílias distintas do verde de marca para que "sucesso"
     não se confunda com "cor do site". */
  --success-bg: #e8f5ec;
  --success-border: #9ed3b0;
  --success-text: #10633a;
  --warning-bg: #fdf6e7;
  --warning-border: #f0d9a0;
  --warning-text: #7d5410;
  --danger-bg: #fdf0ee;
  --danger-border: #f3c4bc;
  --danger-text: #a8342a;

  /* --- Tipografia -------------------------------------------------------
     Gotham é a fonte pedida, e é LICENCIADA (Hoefler&Co): não pode ser
     empacotada com o site. Ela vem primeiro na pilha, então é usada assim
     que a licença estiver instalada no servidor ou na máquina do visitante.
     A reserva auto-hospedada é a Montserrat — geométrica, de proporções
     próximas às da Gotham, e livre. Ver docs/07-design-system.md. */
  --font-sans: Gotham, "Gotham SSm", Montserrat, "Segoe UI", Arial, sans-serif;
  --font-display: Gotham, "Gotham SSm", Montserrat, "Segoe UI", Arial, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.125rem;

  /* Display. A escala baixou em relação à anterior: manchete gigante
     empurra o conteúdo para baixo e cria o vazio que o site tinha. */
  --display-sm: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --display-md: clamp(1.75rem, 1.15rem + 2.8vw, 3.25rem);
  --display-lg: clamp(2rem, 1.25rem + 3.4vw, 3.75rem);
  --display-xl: clamp(2.25rem, 1.3rem + 4vw, 4.25rem);

  /* A Montserrat é mais larga que a Manrope: o peso 600 sustenta a manchete
     sem precisar do 700, e a entrelinha sobe um pouco para a geométrica
     respirar. */
  --display-weight: 600;
  --display-leading: 1.1;
  --display-tracking: -0.018em;

  --panel-gutter: clamp(0.75rem, 1.4vw, 2rem);

  /* --- Espaçamento ------------------------------------------------------
     Escala apertada em relação à anterior. O site tinha vão grande demais
     entre título, desenho e texto, e a página parecia esparsa. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.125rem;
  --space-6: 1.375rem;
  --space-8: 1.75rem;
  --space-10: 2.25rem;
  --space-12: 2.75rem;
  --space-16: 3.5rem;
  --section-y: clamp(2rem, 1.4rem + 1.9vw, 3.25rem);
  --section-y-tight: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem);
  --container: 1240px;
  --container-pad: 1.25rem;
  --inset: clamp(0.625rem, 0.25rem + 0.9vw, 1.125rem);

  /* --- Raios ------------------------------------------------------------
     Menores e mais uniformes. Raio grande em cartão pequeno deixa a borda
     "mole"; a escala abaixo mantém a curva proporcional ao tamanho do
     objeto, que é o que dá acabamento. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-btn: 999px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-panel: 18px;

  /* Sombras discretas: a separação vem da borda e do fundo, não do borrão. */
  --shadow-card: none;
  --shadow-lift: 0 10px 24px -16px rgba(10, 46, 33, 0.3);
  --shadow-panel: 0 22px 56px -32px rgba(10, 46, 33, 0.35);

  /* --- Bordas -----------------------------------------------------------
     Duas famílias com papéis diferentes:
       decorativa — separa cartão do fundo; sutil de propósito
       de campo    — contorna entrada de formulário e precisa de 3:1 (WCAG
                     1.4.11, contraste de elemento não textual) */
  --border-color: #dcebe3;
  --border-strong-color: #748f82;   /* 3,50:1 sobre branco */
  --border: 1px solid var(--border-color);
  --border-strong: 1px solid var(--border-strong-color);
  --hairline: 1px solid rgba(10, 46, 33, 0.1);

  --z-header: 50;
  --z-drawer: 60;
  --z-modal: 70;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}

/* 2. RESET ================================================================= */

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

* {
  margin: 0;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Na referência, links de texto vêm sublinhados; só os que são
   componentes (botões, cartões, itens de menu) não são. */
a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(10, 46, 33, 0.35);
}

a:hover {
  text-decoration-color: currentColor;
}

.btn,
.nav-trigger,
.nav-card,
.brand,
.search-hit,
.search-page-hit,
.shortcuts a,
.roles-list a,
.filter,
.drawer-links a,
.drawer-search,
.menu-toggle,
.footer-cols a,
.header-login,
.utility a,
.breadcrumb a,
.card-title a,
.tab,
.whatsapp,
.skip-link {
  text-decoration: none;
}

.footer-cols a:hover,
.breadcrumb a:hover,
.card-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--harambee-600);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--band-sky);
  color: var(--ink);
}

.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;
  left: -9999px;
}

.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  width: auto;
  height: auto;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* 3. TIPOGRAFIA ============================================================ */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Peso 500, não 700. Em tamanhos grandes o corpo da letra já carrega a
   hierarquia; o negrito só deixa a mancha pesada. */
.display-xl {
  font-size: var(--display-xl);
  line-height: var(--display-leading);
  letter-spacing: -0.03em;
  font-weight: var(--display-weight);
}

.display-lg {
  font-size: var(--display-lg);
  line-height: 1.06;
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
}

.display-md {
  font-size: var(--display-md);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: var(--display-weight);
}

.display-sm {
  font-size: var(--display-sm);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* Sobrelinha curta e forte, acima da manchete. */
.eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.muted {
  color: var(--gray-500);
}

.small {
  font-size: var(--text-sm);
}

/* Corpo de artigo */

.prose {
  max-width: 68ch;
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--gray-700);
}

.prose h2 {
  font-size: var(--display-sm);
  color: var(--harambee-text);
  margin: 2.5rem 0 0.75rem;
  scroll-margin-top: 6rem;
}

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

.prose h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--harambee-text);
  margin: 2rem 0 0.5rem;
}

.prose p {
  margin-bottom: 1rem;
}

.prose ul,
.prose ol {
  margin-bottom: 1.25rem;
}

.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--harambee-600);
}

.prose ol {
  list-style: decimal;
  padding-left: 1.35rem;
}

.prose ol li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--harambee-600);
  color: var(--harambee-text);
}

/* 4. LAYOUT ================================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-y);
}

.section-tight {
  padding-block: var(--section-y-tight);
}

/* A tela é creme; uma seção "muted" é a que fica branca. É a inversão do
   que era antes, e é o que dá o ritmo da referência: blocos de superfície
   diferente em vez de tons de cinza.

   E toda seção com superfície própria é um PAINEL, não uma faixa: recuada
   dos dois lados, com canto arredondado, flutuando sobre o creme. Faixas de
   ponta a ponta é o que o site fazia antes; é a diferença de sensação mais
   visível em relação à referência. */
.section-muted,
.section-sky,
.section-dark {
  margin-inline: var(--panel-gutter);
  border-radius: var(--radius-panel);
}

/* Painéis encostados um no outro se tocam; o creme precisa aparecer. */
.section-muted + .section-muted,
.section-muted + .section-sky,
.section-sky + .section-muted,
.section-dark + .section-muted,
.section-muted + .section-dark {
  margin-top: var(--panel-gutter);
}

.section-muted {
  background: var(--white);
}

.section-sky {
  background: var(--band-sky);
}

.section-dark {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}

/* Dentro de um painel o container já tem o recuo do painel, então o padding
   interno pode ser menor sem que o texto encoste na borda. */
.section-muted > .container,
.section-sky > .container,
.section-dark > .container {
  max-width: calc(var(--container) - 2 * var(--panel-gutter));
}


.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-12);
  /* Topo, não centro. Com centralização vertical, título e texto vizinho
     começavam em alturas diferentes sempre que as colunas tinham alturas
     diferentes — medido entre 11px e 37px de defasagem. O olho lê isso como
     desalinho, não como equilíbrio. */
  align-items: start;
}

.split-aside {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-8) var(--space-12);
  align-items: start;
}

/* Cabeçalho de seção em duas colunas — o gesto característico da
   referência: a manchete ocupa a coluna esquerda em corpo enorme, e o texto
   de apoio fica à direita, em corpo normal. A manchete deixa de ser um
   rótulo em cima do conteúdo e passa a ser o próprio conteúdo. */
.section-head {
  margin-bottom: var(--space-10);
  max-width: 46rem;
}

/* SEM HIFENIZAÇÃO.
   ------------------------------------------------------------------------
   A versão anterior usava `hyphens: auto` como rede para palavras longas do
   português — "Funcionalidades", "Administradoras" — em manchetes de 72px.
   O remédio saiu pior que a doença: o navegador hifenizava também onde havia
   espaço de sobra, e o site ficou salpicado de hífens em título, link e
   texto corrido, com quebras em lugares que atrapalham a leitura.

   A solução de verdade foi tratar a causa em vez do sintoma, em três
   frentes:

     1. `hyphens: manual` — só hifeniza se o autor escrever um ­, o que
        não acontece em lugar nenhum do conteúdo.
     2. A escala de display baixou (ver os tokens): manchete menor cabe, e
        palavra que cabe não precisa de hífen.
     3. `text-wrap: balance` distribui as palavras entre as linhas em vez de
        encher a primeira e deixar a última com uma palavra órfã. É o que
        resolve o "espaço em branco" que aparecia ao lado de manchete curta.

   `overflow-wrap: break-word` fica como última barreira: se um nome
   realmente não couber — uma URL colada, por exemplo — ele quebra sem
   hífen, em vez de transbordar por cima do bloco vizinho. */
h1,
h2,
h3,
h4,
.display-xl,
.display-lg,
.display-md,
.display-sm {
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
}

/* Parágrafo usa `pretty` e não `balance`: balance é para textos de poucas
   linhas, e em bloco corrido o navegador ignora acima de um limite. `pretty`
   evita apenas a viúva na última linha, que é o defeito visível em parágrafo. */
p,
li,
dd,
figcaption,
blockquote {
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: pretty;
}

/* Duas colunas só quando o cabeçalho tem a largura inteira do container.
   Dentro de um .split ele já está em meia coluna, e dividir de novo faz a
   manchete de 72px transbordar por cima do texto vizinho. */
.container > .section-head,
.container > * > .section-head:only-child {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-6) clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-width: none;
  margin-bottom: var(--space-12);
}

/* Coluna 1: rótulo e manchete. Coluna 2: texto de apoio, alinhado ao topo. */
.container > .section-head > .eyebrow {
  grid-column: 1;
  grid-row: 1;
}

.container > .section-head > h2 {
  grid-column: 1;
  grid-row: 2;
}

/* Sem rótulo, a manchete sobe para a primeira linha. */
.container > .section-head:not(:has(.eyebrow)) > h2 {
  grid-row: 1;
}

/* Sem texto de apoio não há segunda coluna. A manchete então se CENTRALIZA,
   em vez de ficar encostada à esquerda com dois terços da linha vazios ao
   lado — era o que acontecia, e em 37 das 62 páginas.

   O `max-width` aqui era `20ch`. A armadilha: `ch` é a largura do "0" da
   fonte HERDADA, não a da manchete. Como o `.section-head` herda o corpo de
   17px, 20ch davam 225px — e a manchete de 52px era espremida numa coluna
   de 225px dentro de um container de 1240px. A medida agora é em `rem`, que
   não depende da fonte do elemento, e é larga o bastante para a manchete
   cair em duas linhas equilibradas em vez de sete. */
.container > .section-head:not(:has(p)) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.container > .section-head > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  max-width: 46ch;
}

.container > .section-head:not(:has(.eyebrow)) > p {
  grid-row: 1;
}

.section-head p {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Cabeçalho em meia coluna: o .split já é a estrutura de duas colunas da
   referência — manchete à esquerda, conteúdo à direita. Então a manchete
   continua grande; só perde o topo da escala, que não caberia em metade da
   largura. */
.split .section-head h2,
.split-top .section-head h2,
.split-sticky .section-head h2 {
  font-size: clamp(1.75rem, 0.9rem + 3vw, 3.25rem);
}

/* Centralizado continua sendo uma coluna só. */
.section-head-center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}

.section-head-center > h2,
.section-head-center .eyebrow,
.section-head-center p {
  grid-column: 1;
  grid-row: auto;
}

.stack > * + * {
  margin-top: var(--space-4);
}

/* 5. COMPONENTES =========================================================== */

/* 5.1 Botões */

/* Pílula em todos os tamanhos e variantes — é a forma mais reconhecível da
   referência. O primário é tinta sólida; o secundário, o mesmo contorno em
   1px sobre fundo transparente. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* ALTURA MÍNIMA, não fixa. Com `height`, um rótulo que quebra em duas
     linhas fica espremido contra as bordas do botão — foi o que aconteceu
     com "Solicitar demonstração" dentro do cartão estreito do menu. Com
     `min-height` o botão cresce e o texto continua respirando. */
  min-height: 2.875rem;
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 700;
  text-align: center;
  transition: background-color var(--duration-base) var(--ease),
    border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-lg {
  height: 3.375rem;
  padding-inline: 2rem;
  font-size: var(--text-md);
}

.btn-sm {
  min-height: 2.5rem;
  padding-block: 0.4375rem;
  padding-inline: 1.125rem;
  font-size: var(--text-sm);
}

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--harambee-800);
  border-color: var(--harambee-800);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--white);
}

.btn-app {
  background: transparent;
  color: var(--ink);
  border-color: rgba(10, 46, 33, 0.3);
}

.btn-app:hover {
  border-color: var(--ink);
  background: rgba(10, 46, 33, 0.05);
}

/* Sobre fundo escuro */

.btn-inverse {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn-inverse:hover {
  background: var(--band-sky);
  border-color: var(--band-sky);
  color: var(--ink);
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-light:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* 5.2 Selos */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.35;
}

.badge-brand {
  background: var(--harambee-100);
  color: var(--harambee-900);
}

.badge-progress {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.badge-planned {
  background: var(--gray-50);
  color: var(--gray-500);
  border: var(--border);
}

.badge-neutral {
  background: var(--gray-100);
  color: var(--gray-700);
}

/* 5.3 Cartões */

/* Sobre a tela creme, um cartão branco já se separa do fundo. Sem borda,
   sem sombra: a diferença de superfície basta, e a página fica mais calma. */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ink);
  padding: var(--space-8);
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  transition: border-color var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease);
}

.card:hover {
  border-color: rgba(10, 46, 33, 0.16);
}

.card-flat {
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--canvas);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.card p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--gray-700);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--band-sky);
  color: var(--ink);
}

.card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card-foot {
  margin-top: auto;
  padding-top: var(--space-5);
}

.pillar {
  border-top: 2px solid var(--harambee-700);
  padding-top: var(--space-5);
}

.pillar h3,
.pillar dt {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.pillar p,
.pillar dd {
  margin: var(--space-2) 0 0;
  margin-inline-start: 0;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--gray-700);
}

/* 5.4 Listas com marcador de marca */

.bullets li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--gray-700);
}

.bullets li + li {
  margin-top: 0.625rem;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--harambee-600);
}

.bullets-muted li::before {
  background: var(--gray-300);
}


.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.chip {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-xs);
  background: var(--gray-50);
  font-size: var(--text-xs);
  color: var(--gray-500);
}


/* 5.5 Tabela */

.table-wrap {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--white);
}

.table {
  font-size: var(--text-sm);
  text-align: left;
}

.table th,
.table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
}

.table thead th {
  background: var(--canvas);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.table thead th:last-child {
  color: var(--ink);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table td:first-child {
  color: var(--gray-500);
}

.section-dark .table-wrap {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
}

.section-dark .table th,
.section-dark .table td {
  border-color: rgba(255, 255, 255, 0.1);
}

.section-dark .table thead th {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 245, 251, 0.7);
}

.section-dark .table thead th:last-child {
  color: var(--white);
}

.section-dark .table td:first-child {
  color: rgba(232, 245, 251, 0.75);
}

.section-dark .table td:last-child {
  color: var(--white);
}

/* 5.6 Cabeçalho */

/* Barra de utilidades, acima do cabeçalho. Não é fixa: rola com a página,
   como na referência. */
/* --- Topo escuro ------------------------------------------------------
   A faixa utilitária e o cabeçalho formam UMA estrutura no verde escuro do
   botão "Falar com o time" (--ink, #0a2e21). Todo texto ali vira branco ou
   um verde muito claro, ambos conferidos contra esse fundo:
     branco       sobre #0a2e21 = 14,73:1
     --green-300  sobre #0a2e21 =  8,24:1   (texto de apoio da utilitária)
   Nenhum tom escuro sobrevive aqui, então cada componente que entra no topo
   precisa da sua variante clara — é o que as regras abaixo fazem. */
.utility {
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 2.5rem;
  font-size: var(--text-xs);
  color: var(--on-dark-mute);
}

.utility-note,
.utility-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
}

.utility a {
  color: var(--white);
  font-weight: 600;
}

.utility a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--duration-base) var(--ease),
    border-color var(--duration-base) var(--ease);
}

.header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 82px;
}

/* A navegação fica centrada, e as ações empurradas para a direita. */
.header .nav {
  margin-inline: auto;
}

.header-login {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
}

.header-login:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Acesso do cliente enquanto a plataforma não tem destino público.
   O elemento é um <span>, não um <a>: não navega, não recarrega, não entra
   na ordem de tabulação e o leitor de tela não o anuncia como link. Fica
   com o mesmo peso visual dos vizinhos, e o cursor é o padrão — prometer
   clique com a mãozinha e não navegar é pior do que não prometer. */
/* O item precisa PARECER indisponível, e não apenas deixar de navegar.
   Com o mesmo peso visual dos vizinhos, ele continua prometendo um clique
   que não acontece — o visitante tenta, nada ocorre, e a conclusão é que o
   site está quebrado. Tinta mais fraca e `cursor: not-allowed` dizem, antes
   do clique, que aquilo está fora do ar por enquanto.

   A tinta não é o único sinal: o `title` e o `aria-disabled` comunicam o
   mesmo estado a quem não distingue a diferença de cor. */
.link-inativo {
  cursor: not-allowed;
  opacity: 0.55;
}

.utility .link-inativo,
.header-login.link-inativo {
  color: var(--on-dark-mute);
  font-weight: 600;
}

.header-login.link-inativo:hover {
  text-decoration: none;
}

/* No menu lateral o item é um botão de largura cheia: ali a opacidade
   sozinha ficaria ambígua, então ele também perde o preenchimento. */
.btn-app.link-inativo {
  pointer-events: none;
  background: transparent;
  border: 1px dashed var(--border-strong-color);
  color: var(--ink-mute);
  opacity: 1;
}

/* O botão do cabeçalho INVERTE sobre a barra escura.
   `.btn-primary` pinta o fundo com `--ink`, que é exatamente a cor da barra:
   fundo do botão contra fundo do cabeçalho dava 1,00:1 e o botão sumia — o
   visitante via um texto branco solto, não um botão. Aqui ele vira branco
   com texto verde escuro: 14,02:1 de superfície contra a barra (a WCAG
   1.4.11 pede 3,0:1 para elemento não textual) e 14,73:1 de texto.

   `white-space: nowrap` porque o rótulo é longo e a barra é apertada: sem
   ele o botão quebra em duas linhas e cresce em altura no meio do
   cabeçalho. Aqui é seguro — a barra tem largura de sobra e o cabeçalho
   some abaixo de 1180px. */
.header-cta.btn-primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
  white-space: nowrap;
}

.header-cta.btn-primary:hover,
.header-cta.btn-primary:focus-visible {
  background: var(--green-100);
  border-color: var(--green-100);
  color: var(--ink);
}

/* Logotipo — seções 21, 28 e 32 do manual.
   Desktop 210 px · tablet 180 px · celular 150 px. */

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand:hover {
  text-decoration: none;
}

.brand-logo {
  width: 210px;
  height: auto;
  display: block;
}

.brand-sm .brand-logo {
  width: 168px;
}

/* Assinatura institucional e corporativa: sempre fora do logotipo,
   conforme as seções 41 e 43. */
.brand-signature {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.brand-corporate {
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  color: var(--ink-mute);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-group {
  position: relative;
}

.nav-trigger {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--white);
  transition: color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] {
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
}

.nav-trigger svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-base) var(--ease);
}

.nav-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* O painel abre alinhado à borda esquerda do seu gatilho. Antes ele era
   centralizado no gatilho e transbordava a janela nos menus da direita, o que
   fazia o conteúdo ser cortado. A largura também passa a ser limitada. */
.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: min(62rem, calc(100vw - 3rem));
  padding-top: var(--space-3);
  z-index: var(--z-header);
}

/* Os dois últimos grupos abrem para a esquerda, encostando a borda direita do
   painel no gatilho, para não estourar a janela. */
.nav-group:nth-last-child(-n + 2) .megamenu {
  left: auto;
  right: 0;
}

.megamenu[hidden] {
  display: none;
}

.megamenu-inner {
  display: flex;
  width: 100%;
  max-height: calc(100vh - 6rem);
  overflow: hidden auto;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
}

.megamenu-cols {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.25rem var(--space-6);
  padding: var(--space-6);
  align-content: start;
}

.megamenu-cols.cols-1 {
  grid-template-columns: minmax(0, 19rem);
}

.megamenu-cols.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 17rem));
}

.megamenu-col-title {
  margin-bottom: var(--space-2);
  padding-inline: 0.625rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.megamenu-cols a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease);
}

.megamenu-cols a:hover {
  background: var(--canvas);
  text-decoration: none;
}

.megamenu-cols a strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
}

.megamenu-cols a span {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--gray-500);
  text-wrap: pretty;
}

.megamenu-highlight {
  /* 15rem não davam largura para "Solicitar demonstração" numa linha só.
     16,75rem dão, e o botão ocupa a largura do cartão em vez de flutuar
     torto no meio dele. */
  flex: 0 0 16.75rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6);
  margin: var(--space-3) var(--space-3) var(--space-3) 0;
  background: var(--band-sky);
  color: var(--ink);
  border-radius: var(--radius-md);
}

.megamenu-highlight strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.megamenu-highlight p {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* O botão do cartão ocupa a largura do cartão e NUNCA a ultrapassa.
   Aqui havia `white-space: nowrap`. Com ele, o rótulo "Solicitar
   demonstração" impõe uma largura mínima maior que o espaço interno do
   cartão, e como largura mínima vence `width: 100%`, o botão transbordava
   para fora das duas bordas. É o defeito da captura enviada.

   Sem `nowrap` o pior caso vira uma quebra em duas linhas DENTRO do cartão,
   que o `min-height` de `.btn` acomoda crescendo em altura. A folga lateral
   menor devolve espaço ao texto, e `balance` divide as duas linhas em
   partes parecidas em vez de deixar uma palavra órfã. */
.megamenu-highlight .btn {
  width: 100%;
  min-width: 0;
  padding-inline: var(--space-4);
  text-wrap: balance;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--border);
  border-radius: var(--radius-sm);
}

.menu-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Drawer mobile */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}

.drawer[hidden] {
  display: none;
}

.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 23, 32, 0.4);
}

.drawer-panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(22rem, 90vw);
  background: var(--white);
  box-shadow: var(--shadow-panel);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border);
}

.drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

.drawer-section + .drawer-section {
  border-top: 1px solid var(--gray-100);
}

.drawer-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 0.5rem;
  font-size: var(--text-base);
  font-weight: 500;
  text-align: left;
}

.drawer-trigger svg {
  width: 1rem;
  height: 1rem;
  color: var(--gray-500);
  transition: transform var(--duration-base) var(--ease);
}

.drawer-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.drawer-links {
  padding-bottom: var(--space-3);
}

.drawer-links a {
  display: block;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.drawer-links a:hover {
  background: var(--harambee-50);
  text-decoration: none;
}

.drawer-foot {
  display: grid;
  gap: 0.625rem;
  padding: var(--space-5);
  border-top: var(--border);
}

/* 5.7 Trilha de navegação */

.breadcrumb {
  margin-bottom: var(--space-6);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  color: var(--gray-500);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.breadcrumb svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--gray-300);
}

.breadcrumb [aria-current="page"] {
  color: var(--gray-700);
}

/* 5.8 Acordeão */

/* Na referência a pergunta é grande e o separador é um fio: a lista lê como
   um índice, não como uma caixa. O sinal de "+" vem dentro de um círculo
   contornado, que gira ao abrir. */

.accordion {
  border-top: var(--hairline);
}

.accordion-item {
  border-bottom: var(--hairline);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  padding-block: var(--space-6);
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  transition: color var(--duration-fast) var(--ease);
}

.accordion-trigger:hover {
  color: var(--harambee-700);
}

.accordion-trigger svg {
  flex-shrink: 0;
  box-sizing: content-box;
  width: 1rem;
  height: 1rem;
  padding: 0.5rem;
  border: 1px solid rgba(10, 46, 33, 0.35);
  border-radius: var(--radius-pill);
  color: var(--ink);
  transition: transform var(--duration-base) var(--ease),
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.accordion-trigger:hover svg {
  border-color: var(--ink);
  background: rgba(10, 46, 33, 0.06);
}

.accordion-trigger[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.accordion-panel {
  padding: 0 4rem var(--space-8) 0;
}

.accordion-panel p {
  max-width: 68ch;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* 5.9 Abas */


.tab {
  white-space: nowrap;
  padding: 0.625rem 1.125rem;
  border: 1px solid rgba(10, 46, 33, 0.2);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  transition: color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

.tab:hover {
  color: var(--gray-700);
  border-bottom-color: var(--gray-300);
}

.tab:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}


/* 5.10 Rodapé */

/* Rodapé claro, como na referência: mesma tela creme da página, tinta de
   marca, links sublinhados. O rodapé escuro fechava a página com um bloco
   pesado; claro, ele continua o documento. */

.footer {
  background: var(--canvas);
  color: var(--ink-soft);
  border-top: var(--hairline);
}

.footer a {
  color: var(--ink);
  font-size: var(--text-sm);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: var(--space-12) var(--space-10);
  padding-block: var(--space-16) var(--space-12);
}

.footer-brand {
  min-width: 0;
}

/* Cinco colunas: Plataforma, Soluções, Funcionalidades, Quem usa, Empresa. */
/* `minmax(0, 1fr)` deixava a trilha encolher abaixo do conteúdo, e a coluna
   de "FUNCIONALIDADES" ficava com 139px para uma palavra de 15 letras em
   caixa alta com espaçamento entre letras. A regra global de manchete
   (`overflow-wrap: break-word`) então partia a palavra ao meio — o visitante
   lia "FUNCIONALIDAD / ES" no rodapé de todas as páginas.

   `min-content` como piso faz a trilha caber a maior palavra indivisível.
   As cinco colunas continuam dividindo a sobra igualmente. */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(min-content, 1fr));
  gap: var(--space-8) var(--space-6);
}

.footer-form {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: var(--hairline);
}

.footer-form-label {
  margin-bottom: var(--space-3);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 600;
}

/* Segunda trava do mesmo defeito: mesmo com a trilha certa, a regra global
   de manchete permitiria partir a palavra se o espaço apertasse. Um rótulo
   de rodapé nunca deve quebrar no meio — prefere-se que ele alargue a
   coluna, que é o que o `min-content` acima garante. */
.footer-cols h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.footer-cols li + li {
  margin-top: var(--space-3);
}

.footer-about {
  max-width: 26rem;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-soft);
}

.footer-bottom {
  padding-block: var(--space-6) var(--space-10);
  border-top: var(--hairline);
}

.footer-bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer-legal a,
.footer-bottom p {
  font-size: var(--text-xs);
}

.footer-disclaimer {
  max-width: 62rem;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--ink-mute);
}

/* 5.11 WhatsApp flutuante */

.whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--z-modal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 3rem;
  padding-inline: 1rem;
  border-radius: var(--radius-pill);
  background: var(--harambee-900);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), var(--shadow-lift);
}

.search-is-open .whatsapp {
  display: none;
}

.drawer-open .whatsapp {
  display: none;
}

.whatsapp:hover {
  background: var(--harambee-800);
  text-decoration: none;
}

.whatsapp svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* 6. SEÇÕES ================================================================ */

/* 6.1 Hero */

/* O herói é um cartão recuado sobre a tela creme, com cantos de 24px — não
   uma faixa de borda a borda. O texto é tinta sobre azul claro, e não branco
   sobre gradiente: é o que dá a leveza da referência. */

.hero {
  padding: var(--inset) var(--inset) 0;
}

.hero-card {
  position: relative;
  overflow: hidden;
  padding-inline: clamp(1.5rem, 0.5rem + 4vw, 4.5rem);
  border-radius: var(--radius-xl);
  background: var(--band-sky);
  color: var(--ink);
}

.hero-card::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -12rem;
  width: 34rem;
  height: 34rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  filter: blur(90px);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-8) clamp(1.75rem, 1rem + 2.8vw, 3.5rem);
  align-items: start;
  /* A folga de baixo é onde o painel do produto sobrepõe o cartão: sem ela o
     painel cobriria a última linha da manchete. Ela foi de 10rem para 6rem —
     o painel sobe 80px por margem negativa, então o que sobra de vão é a
     diferença, e 10rem deixava um vazio visível entre manchete e painel. */
  padding-block: clamp(2.25rem, 1.25rem + 2.6vw, 3.5rem) clamp(4rem, 2.5rem + 4vw, 6rem);
}

.hero h1 {
  font-size: var(--display-xl);
  line-height: var(--display-leading);
  letter-spacing: -0.03em;
  font-weight: var(--display-weight);
  color: var(--ink);
}

.hero-aside {
  padding-top: 0.5rem;
}

.hero-sub {
  max-width: 34rem;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Sobrelinha do herói: texto simples e forte, sem cápsula. */
.hero-tag {
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}

.grid-veil {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(10, 46, 33, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 46, 33, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 30% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}

/* O painel do produto, logo abaixo do herói e alinhado a ele: mesmo recuo
   interno, sobrepondo a borda inferior do cartão. */
.hero-showcase {
  position: relative;
  z-index: 2;
  margin-top: clamp(-5rem, -3rem - 2.5vw, -2.5rem);
  padding-inline: clamp(1.5rem, 0.5rem + 4vw, 4.5rem);
}

/* Faixa de números, entre o painel e o resto da página. */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: var(--container);
  margin: clamp(3rem, 2rem + 2vw, 4.5rem) auto 0;
  padding: 0 clamp(1.5rem, 0.5rem + 4vw, 4.5rem) 0;
}

.hero-facts div {
  padding-top: var(--space-5);
  border-top: 2px solid var(--ink);
}

.hero-facts dt {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
  font-weight: var(--display-weight);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.hero-facts dd {
  max-width: 16rem;
  margin: var(--space-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-base);
  line-height: 1.45;
}

/* 6.2 Hero de página interna */

/* As páginas internas repetem a gramática do herói da home: um cartão
   recuado sobre a tela creme. Branco em vez de azul, para que a home
   continue sendo a única página com a faixa de cor. */
.page-hero {
  margin: var(--inset) var(--inset) 0;
  padding-block: var(--space-8) clamp(3rem, 2rem + 3vw, 5rem);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.page-hero .breadcrumb {
  margin-bottom: var(--space-8);
}

/* Herói interno com painel ao lado. Topo, pela mesma razão do .split:
   centralizar deixava o título do herói e o painel vizinho começando em
   alturas diferentes. */
.page-hero .split-aside {
  gap: clamp(1.5rem, 0.9rem + 2.6vw, 3.25rem);
  align-items: start;
}

/* 6.3 Convergência do problema */


.converge-result {
  padding: var(--space-6);
  border: 1px solid var(--harambee-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.converge-result strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--harambee-900);
}

/* 6.4 Visão 360 */


/* 6.5 Fluxo numerado */

.flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.flow li {
  display: flex;
  color: var(--harambee-text);
  flex: 1 1 10rem;
  align-items: center;
  gap: var(--space-3);
  padding: 0.875rem 1rem;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.flow-num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--harambee-100);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--harambee-900);
}


/* 6.6 Planos */


/* 6.7 CTA */

/* O fechamento da referência não é um painel escuro: é a própria tela creme,
   com a marca centrada, uma manchete enorme em peso leve e um botão. */
.cta-panel {
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--space-6);
  text-align: center;
}

.cta-panel::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-8);
  border: 2px solid var(--harambee-600);
  border-radius: var(--radius-pill);
  background: url("../brand/symbol/harambee-symbol.svg") center / 1.75rem no-repeat;
}

.cta-panel h2 {
  max-width: 22ch;
  margin-inline: auto;
  font-size: var(--display-lg);
  line-height: 1.06;
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
  color: var(--ink);
}

.cta-panel p {
  max-width: 44rem;
  margin: var(--space-6) auto 0;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-soft);
}

.cta-panel .btn-row {
  justify-content: center;
}

/* 6.8 Blog */

.post-head {
  margin: var(--inset) var(--inset) 0;
  padding-block: var(--space-8) clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.post-meta {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--gray-500);
}

.post-body {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-12) var(--space-16);
  padding-block: var(--space-12);
}

.toc {
  position: sticky;
  top: 6rem;
  align-self: start;
}

.toc h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
}

.toc ul {
  padding-left: var(--space-4);
  border-left: var(--border);
}

.toc li + li {
  margin-top: var(--space-2);
}

.toc a {
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.filter:hover {
  border-color: var(--harambee-300);
  text-decoration: none;
}

.filter.is-active {
  border-color: var(--harambee-700);
  background: var(--harambee-100);
  color: var(--harambee-900);
}


/* 6.9 Diagrama do hub ------------------------------------------------------ */

.hub-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-10);
}

.hub-col {
  display: grid;
  gap: var(--space-3);
}

.hub-node {
  position: relative;
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

/* Traço que liga cada grupo ao núcleo */
.hub-node::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--space-5);
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--harambee-cyan), transparent);
}

.hub-col-left .hub-node::after {
  left: 100%;
}

.hub-col-right .hub-node::after {
  right: 100%;
  background: linear-gradient(270deg, var(--harambee-cyan), transparent);
}

/* Nó de conectividade no título de cada grupo — nível 3 da marca. */
.hub-node-title::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--harambee-lime);
}

.hub-node-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--harambee-900);
}

.hub-node-title svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--harambee-700);
}

.hub-node-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.hub-node-list li {
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-xs);
  background: var(--gray-50);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--gray-700);
}

.hub-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: var(--space-8) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--harambee-gradient);
  color: var(--white);
  text-align: center;
  box-shadow: var(--shadow-panel);
}

.hub-core-mark svg {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
}

.hub-core strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.hub-core-sub {
  font-size: var(--text-sm);
  color: rgba(232, 245, 251, 0.8);
}

.hub-core-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  margin-top: var(--space-4);
}

.hub-core-list li {
  padding: 0.25rem 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: rgba(232, 245, 251, 0.92);
}

/* 6.11 Cartão da palavra --------------------------------------------------- */

.word-card {
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--harambee-200);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--harambee-50), var(--white) 65%);
  text-align: center;
}

.word-card-word {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--harambee-900);
}

.word-card-meta {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--harambee-200);
  text-align: left;
}

.word-card-meta dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--harambee-700);
}

.word-card-meta dd {
  margin: 0.2rem 0 0;
  font-size: var(--text-base);
  color: var(--gray-700);
}

/* 6.14 Faixa de destaque numerada ------------------------------------------ */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.stat-strip > div {
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
}

.stat-strip dt {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: var(--display-weight);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.stat-strip dd {
  margin: 0.25rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gray-700);
}

/* 6.15 Busca ---------------------------------------------------------------- */

/* O botão fica no cabeçalho; o painel, fora dele. Ver searchPanelHtml. */

/* O contêiner do painel não participa do fluxo: ele só existe para agrupar o
   overlay e a caixa, ambos posicionados. */
.search {
  display: contents;
}

.search-open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.375rem;
  padding: 0 0.625rem 0 0.75rem;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--gray-50);
  color: var(--gray-500);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

.search-open:hover {
  border-color: var(--harambee-300);
  background: var(--white);
  color: var(--harambee-700);
}

.search-open svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.search-open-label {
  max-width: 7rem;
  overflow: hidden;
  white-space: nowrap;
}

.search-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-xs);
  background: var(--white);
  color: var(--gray-500);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
}

.search-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.75rem, 5vh, 5rem) var(--container-pad) var(--space-6);
}

.search-panel[hidden] {
  display: none;
}

.search-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 48, 63, 0.45);
  backdrop-filter: blur(2px);
}

.search-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(42rem, 100%);
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-panel);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  border-bottom: var(--border);
  color: var(--gray-400);
}

.search-field > svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.search-field input {
  flex: 1;
  min-width: 0;
  height: 3.5rem;
  border: 0;
  background: transparent;
  color: var(--harambee-text);
  font: inherit;
  font-size: var(--text-lg);
}

.search-field input::placeholder {
  color: var(--gray-400);
}

.search-field input:focus {
  outline: none;
}

/* O anel de foco vai para a caixa inteira: o campo ocupa toda a largura. */
.search-field:focus-within {
  border-bottom-color: var(--harambee-400);
  box-shadow: inset 0 -2px 0 var(--harambee-400);
}

.search-field input::-webkit-search-cancel-button {
  appearance: none;
}

.search-field-lg input {
  height: 3.75rem;
}

.search-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: pointer;
}

.search-dismiss:hover {
  background: var(--gray-200);
  color: var(--harambee-text);
}

.search-dismiss svg {
  width: 1rem;
  height: 1rem;
}

.search-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  border-bottom: var(--border);
  color: var(--gray-500);
  font-size: var(--text-sm);
}

.search-chip {
  padding: 0.1875rem 0.5rem;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--gray-50);
  color: var(--harambee-700);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.search-chip:hover {
  border-color: var(--harambee-300);
  background: var(--harambee-50);
}

.search-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-results:empty {
  display: none;
}

.search-list {
  list-style: none;
  margin: 0;
  padding: 0.375rem;
}

.search-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--harambee-text);
  text-decoration: none;
}

.search-hit:hover,
.search-hit.is-active {
  background: var(--harambee-50);
}

.search-hit.is-active {
  outline: 2px solid var(--harambee-300);
  outline-offset: -2px;
}

.search-hit-group {
  color: var(--harambee-800);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.search-hit-title {
  font-weight: 600;
  line-height: 1.35;
}

.search-hit-text {
  color: var(--gray-500);
  font-size: var(--text-sm);
  line-height: 1.5;
  /* Duas linhas no máximo: o painel precisa mostrar oito resultados. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-hit mark,
.search-page-hit mark {
  padding: 0 0.0625em;
  border-radius: 2px;
  background: rgba(142, 219, 58, 0.32);
  color: inherit;
  font-weight: inherit;
}

.search-empty {
  padding: 1.25rem 1rem;
  color: var(--gray-500);
  font-size: var(--text-base);
}

.search-more {
  padding: 0.75rem 1rem;
  border-top: var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
}

.search-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  padding: 0.5rem 1rem;
  border-top: var(--border);
  background: var(--gray-50);
  color: var(--ink-mute);
  font-size: var(--text-xs);
}

.search-foot kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border: 1px solid var(--gray-300);
  border-radius: 3px;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Trava a rolagem do documento enquanto o painel está aberto. */
.search-is-open,
.search-is-open body {
  overflow: hidden;
}

.drawer-search {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 var(--space-5) var(--space-4);
  padding: 0.75rem 0.875rem;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: var(--text-base);
  text-decoration: none;
}

.drawer-search svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* Página /busca */

.search-page-form {
  max-width: 40rem;
  margin-top: var(--space-8);
}

.search-page-form .search-field {
  border: 1px solid rgba(10, 46, 33, 0.25);
  border-radius: var(--radius-pill);
  padding-inline: 1.5rem;
  background: var(--white);
}

.search-page-form .search-field:focus-within {
  border-color: var(--harambee-400);
  box-shadow: 0 0 0 3px rgba(79, 179, 217, 0.25);
}

/* A seção de resultados não precisa do respiro completo de uma seção: o
   campo de busca fica logo acima e o olho vai direto para a lista. */
.search-page-results,
.search-page-status {
  scroll-margin-top: 6rem;
}

.section:has(> .container > .search-page-status) {
  padding-block: var(--space-8) var(--section-y);
}

.search-page-status {
  min-height: 1.5rem;
  color: var(--gray-500);
  font-size: var(--text-sm);
}

.search-page-results:not(:empty) {
  margin-top: var(--space-6);
}

.search-group + .search-group {
  margin-top: var(--space-10);
}

.search-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--border);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--harambee-700);
}

.search-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-pill);
  background: var(--harambee-50);
  color: var(--harambee-700);
  font-size: var(--text-xs);
  letter-spacing: 0;
}

.search-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-page-hit {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-4) 0;
  border-bottom: var(--border);
  color: var(--harambee-text);
  text-decoration: none;
}

.search-page-hit:hover {
  background: var(--gray-50);
  box-shadow: -0.75rem 0 0 var(--gray-50), 0.75rem 0 0 var(--gray-50);
}

.search-page-hit-title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.search-page-hit-text {
  color: var(--gray-700);
  line-height: 1.6;
}

.search-page-hit-url {
  color: var(--ink-mute);
  font-size: var(--text-xs);
}

/* 6.16 Cartão de navegação -------------------------------------------------- */

.nav-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease);
}

.nav-card:hover {
  border-color: rgba(10, 46, 33, 0.2);
}

.nav-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--band-sky);
  color: var(--ink);
}

.nav-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-card-body {
  display: grid;
  gap: 0.25rem;
}

.nav-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.nav-card-text {
  color: var(--gray-500);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.nav-card-meta {
  margin-top: 0.25rem;
  color: var(--harambee-800);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-card-arrow {
  display: inline-flex;
  color: var(--gray-300);
  transition: color var(--duration-fast) var(--ease), transform var(--duration-base) var(--ease);
}

.nav-card-arrow svg {
  width: 1.125rem;
  height: 1.125rem;
}

.nav-card:hover .nav-card-arrow {
  color: var(--harambee-600);
  transform: translateX(3px);
}

/* 6.17 Atalhos por tarefa --------------------------------------------------- */

.shortcuts-band {
  border-bottom: var(--hairline);
  background: var(--canvas);
}

.shortcuts-label {
  color: var(--gray-500);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.shortcuts a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--harambee-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.shortcuts a:hover {
  border-color: var(--harambee-400);
  color: var(--harambee-700);
}

.shortcuts svg {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--gray-400);
}

.shortcuts a:hover svg {
  color: var(--harambee-600);
}

/* 6.18 Papéis na home ------------------------------------------------------- */

.roles-band {
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--white);
}

.roles-label {
  color: var(--gray-500);
  font-size: var(--text-sm);
}

.roles-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.roles-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: var(--border);
  border-radius: var(--radius-sm);
  color: var(--harambee-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.roles-list a:hover {
  border-color: var(--harambee-300);
  background: var(--harambee-50);
  color: var(--harambee-700);
}

.roles-list svg {
  width: 1rem;
  height: 1rem;
  color: var(--harambee-600);
}

/* 6.19 Hero: coluna de texto ---------------------------------------------- */

.hero-text {
  min-width: 0;
}

/* 6.20 Lista dispersa (o problema) ----------------------------------------- */

.scatter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.scatter li {
  padding: 0.5rem 0.9375rem;
  border: 1px dashed rgba(10, 46, 33, 0.28);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* 6.21 Cartão de domínio --------------------------------------------------- */

.domain-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--white);
  transition: border-color var(--duration-fast) var(--ease);
}

.domain-card:hover {
  border-color: rgba(10, 46, 33, 0.2);
}

.domain-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.domain-card-head .card-title a {
  color: inherit;
  text-decoration: none;
}

.domain-card-head .card-title a:hover {
  color: var(--harambee-700);
}

.domain-promise {
  margin-top: 0.25rem;
  color: var(--gray-500);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.domain-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.domain-caps li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--canvas);
  color: var(--ink-soft);
  font-size: var(--text-xs);
}

/* 6.22 Tabela de funcionalidades do domínio -------------------------------- */

.cap-table {
  display: grid;
  gap: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--white);
}

.cap-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) minmax(9rem, 0.9fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
}

.cap-row + .cap-row {
  border-top: var(--border);
}

.cap-row:nth-child(even) {
  background: var(--canvas);
}

.cap-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  line-height: 1.4;
}

.cap-desc {
  color: var(--gray-700);
  font-size: var(--text-base);
  line-height: 1.6;
}

.cap-users {
  color: var(--gray-500);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.cap-users strong {
  display: block;
  color: var(--ink-mute);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Destaques do domínio, no herói da página: fio no topo e valor grande,
   como as outras faixas de número do site. */
.highlights {
  display: grid;
  gap: var(--space-6);
  margin: 0;
}

.highlights > div {
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
}

.highlights dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.highlight-value {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--display-sm);
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: break-word;
}

.highlight-note {
  margin: 0.375rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* 6.23 Faixa do problema -------------------------------------------------- */

.problem-band {
  background: var(--band-sky);
}

.problem-label {
  color: var(--harambee-800);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.problem-text {
  max-width: 34ch;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--display-md);
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

/* 6.24 Etapas numeradas --------------------------------------------------- */

.stage-list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.stage-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.stage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--harambee-50);
  color: var(--harambee-700);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
}

.stage-body {
  display: grid;
  gap: 0.5rem;
  padding-bottom: var(--space-6);
  border-bottom: var(--border);
}

.stage-list > li:last-child .stage-body {
  padding-bottom: 0;
  border-bottom: 0;
}

.stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.stage-head h3 {
  font-size: var(--text-md);
}

.stage-body p {
  color: var(--gray-700);
  line-height: 1.7;
}

.stage-list-compact {
  gap: var(--space-4);
}

.stage-list-compact .stage-num {
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--text-sm);
}

.stage-list-compact .stage-body {
  padding-bottom: var(--space-4);
  gap: 0.25rem;
}

.stage-list-compact .stage-body p {
  font-size: var(--text-base);
}

/* 6.25 Lista de passos numerada (inline) ----------------------------------- */

.step-list {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step-list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  color: var(--gray-700);
  line-height: 1.6;
  counter-increment: step;
}

.step-list li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--harambee-50);
  color: var(--harambee-700);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* 6.26 Listas de definição, verificação e contato -------------------------- */

.def-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.def-list div {
  padding-left: var(--space-5);
  border-left: 2px solid var(--band-sky-strong);
}

.def-list dt {
  font-weight: 700;
  line-height: 1.4;
}

.def-list dd {
  margin: 0.25rem 0 0;
  color: var(--gray-700);
  line-height: 1.65;
}

.check-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  color: var(--gray-700);
  line-height: 1.6;
}

/* O marcador é o pseudo-elemento, NÃO um <svg> na marcação. A regra acima
   reserva exatamente duas colunas; um terceiro filho (um ícone escrito no
   HTML) empurra o texto para a coluna de 1,25rem e ele quebra palavra a
   palavra, enquanto o ícone estica para preencher a coluna do texto. Foi
   isso que desfigurou a página de demonstração. Se algum dia esta lista
   precisar de ícone próprio, a regra tem de mudar junto. */
.check-list li::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 0.75rem no-repeat;
}

/* Rede de segurança: se um <svg> aparecer na marcação apesar do aviso, ele
   não desfigura mais a lista — fica do tamanho do marcador e a página
   continua legível enquanto o defeito é corrigido na origem. */
.check-list li > svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  align-self: start;
  margin-top: 0.1875rem;
}

.contact-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--white);
}

.contact-list svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--harambee-600);
}

.contact-list strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--gray-500);
  font-weight: 600;
}

.contact-list a {
  font-weight: 700;
}

/* 6.27 Cartão de solução -------------------------------------------------- */

.solution-card {
  display: flex;
  flex-direction: column;
}

.solution-card-featured {
  border-color: var(--ink);
}

.solution-tagline {
  margin-top: 0.375rem;
  color: var(--harambee-800);
  font-size: var(--text-sm);
  font-weight: 700;
}

.solution-card p + .solution-fit {
  margin-top: auto;
}

.solution-fit {
  display: grid;
  gap: 0.625rem;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border);
}

/* minmax(0, 6.5rem) e não minmax(6.5rem, auto): com o máximo em auto, o
   rótulo crescia até o próprio conteúdo e sobrava 42px para o valor, que
   então transbordava e empurrava a página inteira na horizontal. */
.solution-fit div {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
}

.solution-fit dt {
  color: var(--ink-mute);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.solution-fit dd {
  margin: 0;
  color: var(--gray-700);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* 6.28 Variações de layout ------------------------------------------------ */

/* Colunas alinhadas pelo topo, sem o grude central do .split padrão. */
.split-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

/* Cabeçalho da seção acompanha a rolagem enquanto a coluna longa passa. */
.split-sticky > :first-child {
  position: sticky;
  top: 6.5rem;
}

.pillar-grid {
  align-items: start;
}

/* No aside do herói a faixa tem ~340px: quatro colunas dariam 80px, e
   "em desenvolvimento" precisa de 119px. Duas colunas resolvem em toda
   largura em que essa faixa aparece. */
.stat-strip-plain {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-strip-plain {
  background: transparent;
}

/* Tabelas largas: rolagem horizontal com dica visual na borda. */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 44rem;
}

/* 6.29 Documentos e páginas de estado ------------------------------------- */

.page-doc {
  max-width: 76ch;
  padding-block: var(--section-y-tight);
}

.page-doc h2 {
  margin-top: var(--space-10);
  font-size: var(--display-sm);
}

.page-doc h3 {
  margin-top: var(--space-6);
  font-size: var(--text-md);
}

.page-doc p,
.page-doc li {
  margin-top: var(--space-4);
  color: var(--gray-700);
  line-height: 1.8;
}

.page-doc ul,
.page-doc ol {
  padding-left: 1.25rem;
}

.page-state {
  max-width: 58ch;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
}

.page-state .btn-row {
  margin-top: var(--space-8);
}

/* 7. MOCKUPS =============================================================== */

/* O mockup aparece em larguras muito diferentes — 704px no herói em tablet,
   403px na coluna lateral de uma página interna a 1024px. As media queries da
   página não descrevem isso: a mesma largura de janela dá mockups de tamanhos
   distintos. Então ele responde à própria largura, não à da janela. As media
   queries mais abaixo permanecem como piso para navegadores sem suporte. */
.mock {
  container-type: inline-size;
  color: var(--harambee-text);
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-panel);
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem 1rem;
  border-bottom: var(--border);
  background: var(--gray-50);
}

.mock-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--gray-300);
}

.mock-url {
  flex: 1;
  margin-left: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-xs);
  background: var(--white);
  font-size: 10px;
  color: var(--ink-mute);
}

.mock-body {
  display: flex;
}

.mock-side {
  flex: 0 0 11rem;
  padding: var(--space-4) var(--space-3);
  background: var(--harambee-900);
  color: rgba(232, 245, 251, 0.7);
}

.mock-side-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 1.25rem;
  padding-inline: 0.375rem;
}

.mock-side-brand span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.15);
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
}

.mock-side-brand strong {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--white);
}

.mock-side li {
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-xs);
  font-size: 11px;
}

.mock-side li.is-active {
  background: rgba(255, 255, 255, 0.15);
  font-weight: 500;
  color: var(--white);
}

.mock-side-foot {
  margin-top: 1.5rem;
  padding: 0.625rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  font-size: 10px;
}

.mock-side-foot strong {
  display: block;
  font-weight: 500;
  color: var(--white);
}

.mock-main {
  flex: 1;
  min-width: 0;
  padding: 1.25rem;
  background: rgba(248, 250, 252, 0.6);
}

.mock-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.mock-head p {
  font-size: 11px;
  color: var(--gray-500);
}

.mock-head strong {
  font-family: var(--font-display);
  font-size: 1rem;
}

.mock-pill {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--harambee-100);
  font-size: 10px;
  font-weight: 500;
  color: var(--harambee-900);
}

.mock-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.mock-kpi {
  padding: 0.75rem;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.mock-kpi dt {
  font-size: 10px;
  line-height: 1.35;
  color: var(--gray-500);
}

.mock-kpi dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.mock-kpi .trend {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  white-space: normal;
}

.trend-up { color: var(--success-text); }
.trend-warn { color: var(--warning-text); }
.trend-flat { color: var(--gray-500); }

/* minmax(0, …) e não 3fr 2fr: uma trilha fr tem mínimo automático, então um
   título com white-space:nowrap empurrava a primeira coluna além da sua
   fração e o segundo painel saía pela borda da moldura. */
.mock-charts {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0.625rem;
}

.mock-panel {
  padding: 0.875rem;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}

/* Título e legenda lado a lado quando cabem; a legenda desce quando não. */
.mock-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.75rem;
}

/* Sem nowrap: em mockups estreitos (coluna lateral a 1024px) o título
   ultrapassava a moldura em vez de quebrar. */
.mock-panel-head strong,
.mock-panel > strong {
  min-width: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

.mock-legend {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--gray-500);
}

.mock-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.swatch-strong { background: var(--harambee-700); }
.swatch-soft { background: var(--harambee-300); }

.mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  height: 7rem;
}

/* flex: 1 1 0 com min-width: 0 — com o mínimo automático, seis grupos de
   barras de largura fixa não cabiam no painel estreito da coluna lateral e
   vazavam pela moldura. Aqui as barras encolhem em vez de vazar. */
.mock-bar-group {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
}

.mock-bar-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.125rem;
  width: 100%;
  min-width: 0;
  height: 6rem;
}

.mock-bar-pair i {
  display: block;
  flex: 0 1 10px;
  min-width: 3px;
  border-radius: 2px 2px 0 0;
}

.mock-bar-pair .income { background: var(--harambee-700); }
.mock-bar-pair .expense { background: var(--harambee-300); }

.mock-bar-group span {
  font-size: 9px;
  color: var(--ink-mute);
}

.mock-cats li + li {
  margin-top: 0.5rem;
}

.mock-cat-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  font-size: 10px;
}

.mock-cat-head b {
  font-weight: 400;
  color: var(--gray-700);
}

.mock-cat-head span {
  color: var(--ink-mute);
}

.mock-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
}

.mock-track i {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--harambee-600);
}

.mock-activity {
  margin-top: 0.625rem;
}

.mock-activity li {
  display: flex;
  gap: 0.625rem;
  font-size: 10px;
  color: var(--gray-700);
}

.mock-activity li + li {
  margin-top: 0.5rem;
}

.mock-activity time {
  flex: 0 0 2.75rem;
  color: var(--ink-mute);
}

/* Mockup de celular */

.phone {
  width: 248px;
  flex-shrink: 0;
  border: 6px solid var(--gray-900);
  border-radius: 2rem;
  background: var(--gray-900);
  box-shadow: var(--shadow-panel);
}

.phone-screen {
  color: var(--harambee-text);
  overflow: hidden;
  border-radius: 1.6rem;
  background: var(--white);
}

.phone-top {
  padding: 0.75rem 1rem 1.25rem;
  background: var(--harambee-900);
  color: var(--white);
}

.phone-notch {
  width: 4rem;
  height: 4px;
  margin: 0 auto 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.3);
}

.phone-top p {
  font-size: 10px;
  color: rgba(232, 245, 251, 0.8);
}

.phone-top strong {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

.phone-body {
  margin-top: -0.75rem;
  padding: 1rem 0.875rem 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--white);
}

.phone-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.phone-shortcuts li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.25rem;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  background: rgba(248, 250, 252, 0.7);
}

.phone-shortcuts svg {
  width: 1rem;
  height: 1rem;
  color: var(--harambee-700);
}

.phone-shortcuts span {
  font-size: 9px;
  line-height: 1;
  color: var(--gray-700);
}

.phone-label {
  margin: 1rem 0 0.5rem;
  font-size: 10px;
  font-weight: 500;
  color: var(--gray-500);
}

.phone-feed {
  padding-bottom: 1rem;
}

.phone-feed li {
  padding: 0.625rem;
  border: var(--border);
  border-radius: var(--radius-sm);
}

.phone-feed li + li {
  margin-top: 0.5rem;
}

.phone-feed em {
  font-style: normal;
  font-size: 9px;
  font-weight: 500;
  color: var(--harambee-700);
}

.phone-feed strong {
  display: block;
  margin-top: 0.125rem;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.phone-feed span {
  display: block;
  margin-top: 0.125rem;
  font-size: 9px;
  color: var(--gray-500);
}

/* Calendário de reservas */

.calendar {
  color: var(--harambee-text);
  padding: 1.25rem;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.calendar-head strong {
  font-family: var(--font-display);
  font-weight: 600;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
  text-align: center;
}

.calendar-grid .dow {
  padding-bottom: 0.25rem;
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.calendar-grid .day {
  padding: 0.5rem 0;
  border-radius: var(--radius-xs);
  background: var(--gray-50);
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.calendar-grid .day.is-booked {
  background: var(--harambee-700);
  color: var(--white);
  font-weight: 500;
}

.calendar-grid .day.is-blocked {
  background: var(--gray-200);
  color: var(--ink-mute);
  text-decoration: line-through;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.calendar-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.legend-booked { background: var(--harambee-700); }
.legend-blocked { background: var(--gray-200); }
.legend-free { background: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-200); }

/* 7.1 Mockup: adaptação à própria largura --------------------------------- */

/* Os limiares saem da conta do que cabe, não de um número redondo.
   A barra lateral consome 175px; quatro indicadores precisam de ~120px cada
   para "R$ 128.400" caber. Logo: abaixo de 720px o mockup não comporta as
   duas coisas, e a barra é a que informa menos. */
@container (max-width: 720px) {
  .mock-side {
    display: none;
  }
}

@container (max-width: 560px) {
  .mock-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 520px) {
  .mock-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 340px) {
  .mock-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 7.2 Visuais por domínio -------------------------------------------------- */

/* Telas de produto, uma por domínio funcional. Herdam a moldura de .mock
   (incluindo container-type: inline-size), então respondem à própria largura.
   Só desenham o que domains.ts marca como disponível. */

.mock-flat {
  box-shadow: var(--shadow-card);
}

.mock-main-solo {
  display: grid;
  /* minmax(0, 1fr), não 1fr: a faixa de grade assume mínimo de conteúdo por
     padrão, então uma tabela larga EMPURRA a faixa além do container em vez de
     encolher. Como o .mock tem overflow:hidden, o excesso não gerava barra de
     rolagem — era cortado em silêncio. Verificado em 360px. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--white);
}

/* Tabela dentro do quadro de mockup: rola na horizontal quando não couber, em
   vez de ser clipada pelo overflow:hidden do .mock. */
.mock-table-scroll {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

@container (max-width: 420px) {
  .mock-table-scroll .mock-table {
    min-width: 24rem;
  }
}

.mock-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: var(--hairline);
}

.mock-eyebrow {
  color: var(--ink-mute);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mock-title {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}

.mock-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 600;
}

.mock-state svg {
  width: 11px;
  height: 11px;
}

.mock-state-ok {
  background: var(--success-bg);
  color: var(--success-text);
}

.mock-state-work {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.mock-sub {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-mute);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mock-sub svg {
  width: 11px;
  height: 11px;
}

.mock-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-mute);
  font-size: 10px;
  line-height: 1.4;
}

.mock-mini svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.mock-note-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--hairline);
}

.mock-inner-card {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 0.75rem;
  border: var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}

.mock-split-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Tabela do balancete: o comprovante ao lado do número é o argumento. */

.mock-table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
}

.mock-table th[scope="col"] {
  padding: 0 0.5rem 0.4rem;
  color: var(--ink-mute);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.mock-table th[scope="row"] {
  font-weight: 600;
  text-align: left;
  color: var(--ink);
}

.mock-table td,
.mock-table th[scope="row"] {
  padding: 0.5rem;
  border-top: var(--hairline);
  vertical-align: middle;
}

.mock-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--ink-soft);
}

.mock-table .num strong {
  color: var(--ink);
}

.doc-chip,
.var-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-xs);
  background: var(--harambee-50);
  color: var(--harambee-700);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.doc-chip svg {
  width: 10px;
  height: 10px;
}

.var-chip {
  background: var(--success-bg);
  color: var(--success-text);
}

.var-over {
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* Busca e documentos */

.mock-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border: var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  font-size: 11px;
  color: var(--ink);
}

.mock-search svg {
  width: 12px;
  height: 12px;
  color: var(--ink-mute);
}

.mock-search em {
  margin-left: auto;
  color: var(--ink-mute);
  font-size: 10px;
  font-style: normal;
}

.doc-list {
  display: grid;
  gap: 0.3rem;
  margin: 0;
}

.doc-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}

.doc-ico {
  display: inline-flex;
  color: var(--harambee-600);
}

.doc-ico svg {
  width: 13px;
  height: 13px;
}

.doc-body {
  display: grid;
  min-width: 0;
}

.doc-body strong {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.doc-body span {
  color: var(--ink-mute);
  font-size: 9.5px;
}

.doc-tag {
  flex-shrink: 0;
  padding: 0.1rem 0.35rem;
  border: var(--hairline);
  border-radius: var(--radius-xs);
  color: var(--ink-mute);
  font-size: 9px;
  font-weight: 600;
}

/* Trilha de atividade: autor, ação e data */

.trail-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.trail-list li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 10px;
}

.trail-who {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.trail-who em {
  display: block;
  color: var(--ink-mute);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
}

.trail-act {
  color: var(--ink-soft);
}

.trail-when {
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Comunicado e confirmação de leitura */

.notice-body {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border-left: 3px solid var(--harambee-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--gray-50);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.notice-sign {
  color: var(--ink-mute);
  font-size: 9.5px;
  font-weight: 600;
}

.read-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-4);
  align-items: center;
}

.read-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.read-stat strong span {
  font-size: 15px;
  color: var(--ink-mute);
}

.read-stat > span {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-mute);
  font-size: 10px;
}

.read-bar {
  height: 5px;
  margin-top: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--gray-200);
  overflow: hidden;
}

.read-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--harambee-600);
}

.read-meta {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.read-meta li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  font-size: 10px;
  color: var(--ink-soft);
}

.read-meta svg {
  width: 12px;
  height: 12px;
  color: var(--harambee-600);
}

/* Fluxo do chamado */

.ticket-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.ticket-flow li {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding-top: 1rem;
  font-size: 9.5px;
  color: var(--ink-mute);
}

/* A régua de progresso é segmentada: cada estágio desenha o seu próprio
   trecho, dentro da própria caixa. Antes ela avançava 0,5rem além do item
   para parecer contínua, e esses 8px estouravam a caixa a 375px. */
.ticket-flow li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--gray-200);
}

.ticket-flow li.is-done::before {
  background: var(--harambee-400);
}

.tf-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.ticket-flow li.is-done .tf-dot {
  border-color: var(--harambee-600);
  background: var(--harambee-600);
}

.ticket-flow strong {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
}

.ticket-flow em {
  font-style: normal;
  color: var(--ink-mute);
}

.thumb-row {
  display: flex;
  gap: 0.3rem;
}

/* Miniaturas de anexo. Sem o glifo elas leem como imagem quebrada em vez de
   "foto anexada", que é o oposto do que o mockup quer dizer. */
.thumb-row i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 26px;
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, var(--harambee-200), var(--band-mist));
  color: var(--harambee-700);
}

.thumb-row svg {
  width: 12px;
  height: 12px;
  opacity: 0.75;
}

.prev-list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
}

.prev-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 10px;
  color: var(--ink-soft);
}

.prev-list em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Autorização de acesso e livro de ocorrências */

.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
}

.auth-grid dt {
  color: var(--ink-mute);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.auth-grid dd {
  margin: 0.1rem 0 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.occur-list {
  display: grid;
  gap: 0.3rem;
  margin: 0;
}

.occur-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-xs);
  background: var(--gray-50);
  font-size: 10px;
}

.oc-time {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.oc-text {
  color: var(--ink-soft);
}

.oc-who {
  color: var(--ink-mute);
  font-size: 9px;
  white-space: nowrap;
}

/* Abaixo de 480px o mockup empilha o que estava lado a lado. */
@container (max-width: 480px) {
  .mock-split-2,
  .read-grid,
  .auth-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ticket-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 0.5rem;
  }

  .trail-list li,
  .occur-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }
}

/* 7.3 Fotografia ----------------------------------------------------------- */

/* A figura reserva o espaço pelo crop declarado, não pelo arquivo: o layout
   não salta quando a imagem chega, e continua correto se a foto for trocada
   por outra de proporção diferente. */

.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--canvas-deep);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--photo-ratio, 16 / 9);
  object-fit: cover;
}

/* Legenda sobre a imagem, na base, com véu para garantir contraste
   independentemente da foto que entrar. */
/* Legenda e crédito empilhados à esquerda, não distribuídos nas duas pontas:
   o canto inferior direito é do botão flutuante do WhatsApp, e o crédito
   ficava atrás dele. */
.photo figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.2rem;
  justify-items: start;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 2.5vw, 2rem) clamp(0.875rem, 2vw, 1.25rem);
  padding-right: clamp(1rem, 14vw, 13rem);
  background: linear-gradient(to top, rgba(10, 46, 33, 0.82), rgba(10, 46, 33, 0));
  color: var(--white);
}

.photo figcaption span {
  max-width: 52ch;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.45;
}

.photo figcaption small {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-xs);
}

/* A faixa segue o recuo dos painéis de seção, para que a foto pertença ao
   mesmo ritmo do resto da página. */
.photo-band {
  margin-inline: var(--panel-gutter);
  margin-block: var(--panel-gutter);
}

/* A altura da faixa é controlada pela LARGURA, não por max-height.
   Com max-height na imagem, a proporção declarada não cabia e o object-fit
   recortava de novo por cima do recorte do arquivo — foi o que decapitou as
   fachadas e cortou o guindaste da obra. Limitar a largura mantém a
   composição do arquivo intacta e ainda dá uma altura civilizada:
   1040px em 16:9 são 585px. */
.photo-band .photo {
  max-width: 65rem;
  margin-inline: auto;
}

@media (max-width: 767px) {
  /* Em tela estreita, uma banner 21:9 vira uma tira ilegível. */
  .photo-banner img {
    aspect-ratio: 4 / 3;
  }

  .photo-wide img {
    aspect-ratio: 3 / 2;
  }

  .photo figcaption {
    position: static;
    padding: 0.75rem 0;
    background: none;
    color: var(--ink-soft);
  }

  .photo figcaption small {
    color: var(--ink-mute);
  }

  .photo {
    background: none;
  }
}

/* 8. FORMULÁRIOS =========================================================== */

.form-panel {
  padding: var(--space-8);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.form {
  position: relative;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.field {
  display: block;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-700);
}

.field .req {
  color: var(--harambee-700);
}

.field .opt {
  margin-left: 0.25rem;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--ink-mute);
}

.control {
  width: 100%;
  padding: 0.75rem 1.125rem;
  border: 1px solid rgba(10, 46, 33, 0.25);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.control::placeholder {
  color: var(--ink-mute);
}

.control:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 46, 33, 0.12);
}

.control[aria-invalid="true"] {
  border-color: var(--danger-text);
}

select.control {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

textarea.control {
  resize: vertical;
  min-height: 7rem;
}

.field-error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  font-size: var(--text-xs);
  color: var(--danger-text);
}

.field-error svg {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
}

.field-error[hidden] {
  display: none;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.consent input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  accent-color: var(--harambee-700);
}

.consent label {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gray-700);
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-message {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
}

.form-message[hidden] {
  display: none;
}

.form-message svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
}

.form-message strong {
  display: block;
  font-weight: 500;
}

.form-message p {
  margin-top: 0.25rem;
  font-size: var(--text-sm);
}

.form-message.is-success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.form-message.is-error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.form-message.is-info {
  background: var(--harambee-50);
  border-color: var(--harambee-200);
  color: var(--harambee-900);
}

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: spin 700ms linear infinite;
}

.spinner[hidden] {
  display: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Newsletter no rodapé */

.newsletter-row {
  display: flex;
  gap: var(--space-2);
}

.newsletter-row input {
  flex: 1;
  min-width: 0;
  height: 2.875rem;
  padding-inline: 1.125rem;
  border: 1px solid rgba(10, 46, 33, 0.25);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-sm);
}

.newsletter-row input::placeholder {
  color: var(--ink-mute);
}

.newsletter-row input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 46, 33, 0.12);
}

.newsletter-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-mute);
}

.newsletter-note a {
  text-decoration: underline;
}

/* 8.1 SUPERFÍCIE ESCURA ==================================================== */

/* Um bloco só, e no fim do arquivo, de propósito.
 *
 * Antes estas regras ficavam espalhadas junto de cada componente, e uma
 * delas perdia para `.section-head p` — mesma especificidade (0,1,1), regra
 * mais abaixo vence — pintando texto tinta sobre fundo tinta. O texto
 * existia e era invisível.
 *
 * Reunidas aqui, com `:is()` para dar especificidade suficiente, elas
 * vencem qualquer componente e não dependem mais da ordem do arquivo.
 */

.section-dark :is(h1, h2, h3, h4, strong, dt) {
  color: var(--white);
}

.section-dark :is(p, li, dd, .lead, .small, .muted) {
  color: rgba(232, 245, 251, 0.88);
}

.section-dark .eyebrow {
  color: var(--band-sky);
}

.section-dark .bullets li::before {
  background: var(--harambee-300);
}

.section-dark a:not(.btn) {
  color: var(--white);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.section-dark .card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

/* 9. RESPONSIVO ============================================================ */

/* O cabeçalho troca para o menu lateral antes do resto do layout: cinco
   grupos de navegação mais busca e CTA não cabem com folga abaixo de 1180px.
   A busca é o único controle que permanece: ela substitui a navegação. */
@media (max-width: 1179px) {
  .nav,
  .header-cta {
    display: none;
  }

  /* Cinco colunas de rodapé a 1024px dão 107px cada — estreito demais para
     "Administradoras". Mesmo ponto de quebra do menu. */
  .footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
  }

  .menu-toggle {
    display: inline-flex;
  }
}

/* O cabeçalho em tamanho cheio mede 1275px de conteúdo — mais largo que os
   1240px do container. A 1440px isso não aparece porque sobra viewport fora
   do container; a 1280px vira barra de rolagem horizontal na página inteira.
   A correção não é esconder a sobra: é fazer o conteúdo caber. Abaixo de
   1440px o cabeçalho usa a escala compacta (logo menor, respiros menores,
   itens de menu com menos folga lateral), o que devolve ~98px. */
@media (min-width: 1024px) {
  .header-inner {
    gap: 0.875rem;
  }

  .nav {
    gap: 0.125rem;
  }

  .nav-trigger {
    padding-inline: 0.5rem;
  }

  .header-actions {
    gap: 0.5rem;
  }
}

/* O logotipo fica nos 210px do manual (seções 21 e 28) sempre que couber.
   Entre 1024 e 1439px os respiros acima já não bastam, e aí — e só aí — ele
   cede para a medida de tablet. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .brand-logo {
    width: 176px;
  }
}

@media (max-width: 1023px) {
  /* Tablet: marca completa reduzida — seções 21 e 28. */
  .brand-logo {
    width: 180px;
  }

  .header-inner {
    height: 68px;
  }

  .cap-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
  }

  .cap-users strong {
    display: inline;
    margin-right: 0.375rem;
  }

  /* O cabeçalho de seção volta a ser uma coluna: em meia largura, uma
     manchete deste corpo não cabe ao lado de nada. */
  .container > .section-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .container > .section-head > .eyebrow,
  .container > .section-head > h2,
  .container > .section-head > p {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .hero-inner,
  .split,
  .split-top,
  .split-aside,
  .post-body,
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-inner {
    padding-block: 2.5rem 3.5rem;
  }

  .toc {
    position: static;
  }

  .grid-3,
  .grid-4,
  .grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Em duas colunas o par rótulo/valor não cabe lado a lado. */
  .solution-fit div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }


  .mock-side {
    display: none;
  }

  .mock-charts {
    grid-template-columns: minmax(0, 1fr);
  }

  .hub-diagram { grid-template-columns: minmax(0, 1fr); }
  .hub-node::after { display: none; }
  .hub-core { order: -1; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root {
    --container-pad: 1rem;
  }

  /* A barra utilitária quebrava em três linhas no celular e consumia 90px
     de tela antes do conteúdo começar. Tudo que ela oferece está no menu
     lateral, então ela simplesmente sai. */
  .utility {
    display: none;
  }

  /* Celular: marca completa reduzida — seção 21. */
  .brand-logo {
    width: 150px;
  }

  .brand-sm .brand-logo {
    width: 150px;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .form-grid,
  .footer-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Três números lado a lado dentro do cartão do herói dão 85px de coluna,
     e "funcionalidades disponíveis hoje" não cabe em 85px. */
  .hero-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }

  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mock-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-toc,
  .stat-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .word-card {
    padding: var(--space-6) var(--space-5);
  }

  .cta-panel {
    padding: var(--space-10) var(--space-5);
  }

  .form-panel {
    padding: var(--space-5);
  }

  .btn-row .btn {
    width: 100%;
  }

  .accordion-panel {
    padding-right: 0;
  }

  .whatsapp span {
    display: none;
  }

  .whatsapp {
    padding-inline: 0.875rem;
  }

  /* Só o ícone da busca: o rótulo e o atalho "/" não fazem sentido no toque. */
  .search-open-label,
  .search-key {
    display: none;
  }

  .search-open {
    width: 2.375rem;
    justify-content: center;
    padding: 0;
  }

  .search-panel {
    padding: 0;
  }

  .search-box {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .search-foot {
    display: none;
  }

  .nav-card {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .solution-fit div,
  .contact-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .stage-list > li {
    gap: var(--space-4);
  }

  .search-page-hit:hover {
    box-shadow: none;
  }
}

/* O painel de busca em tela cheia dispensa a ordem de empilhamento acima. */
@media (max-width: 767px) and (min-height: 34rem) {
  .search-results {
    flex: 1;
  }
}

@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
  }

  .hero-sub {
    font-size: 1.25rem;
  }

  .cta-panel {
    padding: var(--space-16) var(--space-12);
  }
}

/* O painel é o elemento principal do herói e não deve ser encoberto.

@media (max-width: 767px) {
}

/* 10. UTILIDADES E PREFERÊNCIAS ============================================ */

.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.center { text-align: center; }
.order-first { order: -1; }
.no-wrap { white-space: nowrap; }

/* No celular, o visual vai para depois do texto que o explica. */
@media (max-width: 1023px) {
  .order-last-mobile {
    order: 9;
  }
}

.notice {
  color: var(--harambee-text);
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--gray-50);
}

.notice-warning {
  border-color: var(--warning-border);
  background: rgba(255, 251, 235, 0.7);
  color: var(--warning-text);
}

.notice-warning h2,
.notice-warning strong {
  color: var(--warning-text);
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .header,
  .footer,
  .whatsapp,
  .drawer {
    display: none !important;
  }

  body {
    color: #000;
  }
}

/* ---------------------------------------------------------------------------
   Telas de demonstração

   As telas do produto mostram um condomínio fictício. A legenda identifica
   isso junto da imagem, e não num aviso distante — quem olha o número tem
   de ver, no mesmo lugar, que ele é ilustrativo. `<figcaption>` também
   associa o aviso à imagem para quem usa leitor de tela.
--------------------------------------------------------------------------- */
.tela-demo {
  margin: 0;
  min-width: 0;
}

.tela-demo-legenda {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-mute);
  text-wrap: pretty;
}

/* Sobre painel escuro a tinta fraca some — mas SÓ sobre painel escuro.
   A primeira versão desta regra incluía `.hero`, presumindo que o hero
   fosse escuro. Ele é claro (`--canvas`), e a legenda ficou com 1,67:1
   contra o fundo: ilegível. Quem pegou foi o axe, rodando sobre a página
   renderizada — o verificador de tokens não podia pegar, porque confere
   pares declarados, e esta combinação só existe depois do CSS resolvido. */
.section-dark .tela-demo-legenda {
  color: var(--on-dark-mute);
}

/* ---------------------------------------------------------------------------
   Índice "Nesta página"

   Documento jurídico com 28 ou 42 seções não se lê de cabo a rabo: se
   consulta. O índice é o que transforma rolagem em navegação.

   Em várias colunas, porque uma lista vertical de 42 itens empurraria o
   texto para muito abaixo da dobra — o índice ficaria maior que o começo do
   documento que ele serve.
--------------------------------------------------------------------------- */
.indice-pagina {
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-panel);
  background: var(--band-soft);
}

.indice-titulo {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}

.indice-lista {
  columns: 2;
  column-gap: var(--space-8);
  margin: 0;
  padding: 0;
  counter-reset: indice;
  list-style: none;
}

.indice-lista li {
  break-inside: avoid;
  margin-bottom: 0.4rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.indice-lista a {
  color: var(--ink-soft);
  text-decoration: none;
}

.indice-lista a:hover,
.indice-lista a:focus-visible {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Numa coluna abaixo de 720px: duas colunas num celular deixam cada item
   com meia dúzia de caracteres por linha. */
@media (max-width: 719px) {
  .indice-lista {
    columns: 1;
  }
}