@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 ================================================================ */

/* A gramática visual segue a referência do AppFolio, com a identidade
   Harambee: tela creme em vez de branco, tinta de marca no lugar do navy,
   raio de 24px como padrão, botões em pílula, tipografia de display muito
   grande em peso leve, rodapé claro. A fonte continua sendo a Manrope, como
   manda a seção 13 do manual — o que se adota da referência é o
   comportamento tipográfico, não o tipo. */

:root {
  /* Cores de marca */
  --harambee-50: #f2fafd;
  --harambee-100: #e8f5fb;
  --harambee-200: #c7e6f4;
  --harambee-300: #95d1ea;
  --harambee-400: #4fb3d9;
  --harambee-600: #0e86b3;
  --harambee-700: #0a6f93;
  --harambee-800: #075a79;
  --harambee-900: #064a63;
  --harambee-950: #03303f;

  /* Cores tecnológicas — seção 10 do manual.
     Ciano: conectividade, dados, estados ativos.
     Verde: pontos de conexão, automação, inteligência. Cor de destaque,
     nunca predominante. */
  --harambee-cyan: #00c2e0;
  --harambee-lime: #8edb3a;

  /* Gradiente institucional — seção 12. Uso em interfaces, banners e fundos;
     o logotipo mantém cores sólidas. */
  --harambee-gradient: linear-gradient(135deg, #064a63 0%, #0a6f93 55%, #0e86b3 100%);

  /* --- Papéis de superfície -------------------------------------------- */

  /* A tela é creme, não branca. É o que mais muda a sensação do site: o
     branco passa a ser a cor dos cartões, então cada bloco de conteúdo se
     destaca por si, sem precisar de sombra ou borda. O tom é levemente
     quente para contrastar com o azul frio da marca. */
  --canvas: #f1f0eb;
  --canvas-deep: #e9e8e1;

  /* Tinta: o valor mais escuro da marca, usado como o AppFolio usa o navy —
     em praticamente todo texto, no botão primário e nos painéis escuros. */
  --ink: #052a38;
  --ink-soft: #3d5561;
  /* 4,96:1 sobre creme e 5,65:1 sobre branco. O tom anterior (#6b808a) dava
     3,62:1 e reprovava em AA — e era usado em rótulo, meta e legenda, ou
     seja, em quase todo texto secundário do site. */
  --ink-mute: #566a75;

  /* Faixas de cor cheia, para seções que precisam de ênfase. */
  --band-sky: #bfe6f5;
  --band-sky-strong: #8ed5ee;
  --band-mist: #e4eef2;

  /* Neutros */
  --white: #ffffff;
  --gray-50: #f8f8f5;
  --gray-100: #eeede8;
  --gray-200: #e0dfd8;
  --gray-300: #c9c8c0;
  /* Só para ícones decorativos e placeholders; texto usa --ink-mute. */
  --gray-400: #7a8a91;
  --gray-500: var(--ink-mute);
  --gray-700: var(--ink-soft);
  --gray-900: var(--ink);
  --harambee-text: var(--ink);

  /* Semânticos */
  --success-bg: #eef8f6;
  --success-border: #a8ded4;
  --success-text: #125f56;
  --warning-bg: #fdf6e7;
  --warning-border: #f0d9a0;
  --warning-text: #7d5410;
  --danger-bg: #fdf0ee;
  --danger-border: #f3c4bc;
  --danger-text: #a8342a;

  /* Tipografia */
  /* Seção 13 do manual: Manrope é a fonte principal, Inter a alternativa. */
  --font-sans: Manrope, Inter, "Segoe UI", Verdana, Tahoma, Arial, sans-serif;
  --font-display: Manrope, Inter, "Segoe UI", Verdana, Arial, sans-serif;

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

  /* Display grande e apertado. A referência usa 90px com entrelinha 90px e
     tracking negativo; a escala abaixo chega a 5rem no h1 da home e mantém
     a entrelinha entre 1.0 e 1.1, que é o que dá o peso visual. */
  --display-sm: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --display-md: clamp(2rem, 1.1rem + 4.2vw, 4.5rem);
  --display-lg: clamp(2.5rem, 1.3rem + 5.2vw, 5rem);
  --display-xl: clamp(2.75rem, 1.2rem + 6.4vw, 5.75rem);

  /* Peso do display: 500 em vez de 800. A referência compõe manchetes
     enormes em peso regular — o tamanho carrega a hierarquia, não a
     gordura da letra. */
  --display-weight: 500;
  --display-leading: 1.04;
  --display-tracking: -0.025em;

  /* Recuo lateral dos painéis. A referência não usa faixas de ponta a ponta:
     cada seção de superfície diferente é um bloco arredondado flutuando
     sobre o creme, com o creme aparecendo dos dois lados. */
  --panel-gutter: clamp(0.75rem, 1.6vw, 2.5rem);

  /* Espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-y: clamp(4rem, 2rem + 6vw, 8rem);
  --section-y-tight: clamp(2.75rem, 1.5rem + 3.5vw, 5rem);
  --container: 1320px;
  --container-pad: 1.25rem;
  /* Recuo dos blocos que "flutuam" sobre a tela creme. */
  --inset: clamp(0.75rem, 0.25rem + 1.2vw, 1.5rem);

  /* Raios — 24px é o padrão, como na referência. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-btn: 999px;
  --radius-card: 24px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  /* Raio dos painéis de seção. 24px é o valor que a referência usa em
     praticamente todo bloco grande. */
  --radius-panel: 24px;

  /* Sombras — usadas com parcimônia. Sobre creme, um cartão branco já se
     separa do fundo; a sombra fica para o que realmente flutua. */
  --shadow-card: none;
  --shadow-lift: 0 18px 40px -24px rgba(5, 42, 56, 0.28);
  --shadow-panel: 0 32px 80px -36px rgba(5, 42, 56, 0.4);

  /* Bordas */
  --border: 1px solid var(--gray-200);
  --border-strong: 1px solid var(--gray-300);
  --hairline: 1px solid rgba(5, 42, 56, 0.14);

  /* Camadas */
  --z-header: 50;
  --z-drawer: 60;
  --z-modal: 70;

  /* Movimento */
  --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(5, 42, 56, 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-10) var(--space-16);
  align-items: center;
}

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

/* 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;
}

/* Português tem palavras longas — "Funcionalidades", "Transparência",
   "Administradoras" — e manchetes de 72px não perdoam. A hifenização é a
   rede: o navegador só recorre a ela quando a palavra realmente não cabe. */
h1,
h2,
h3,
.display-xl,
.display-lg,
.display-md,
.display-sm {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 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 respira sozinha. */
.container > .section-head:not(:has(p)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 20ch;
}

.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);
  height: 2.875rem;
  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 {
  height: 2.5rem;
  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(5, 42, 56, 0.3);
}

.btn-app:hover {
  border-color: var(--ink);
  background: rgba(5, 42, 56, 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(5, 42, 56, 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. */
.utility {
  background: var(--canvas);
  border-bottom: var(--hairline);
}

.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(--ink-soft);
}

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

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

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--canvas);
  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(5, 42, 56, 0.12);
}

.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(--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(--ink);
  transition: color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] {
  color: var(--ink);
  background: rgba(5, 42, 56, 0.06);
}

.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 {
  flex: 0 0 15rem;
  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);
}

.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(5, 42, 56, 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(5, 42, 56, 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(5, 42, 56, 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. */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 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;
}

.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);
}

.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-10) clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
  /* Folga grande embaixo: é onde o painel do produto sobrepõe o cartão.
     Sem ela, o painel cobre a última linha da manchete. */
  padding-block: clamp(3rem, 1.5rem + 4vw, 5.5rem) clamp(6rem, 3rem + 7vw, 10rem);
}

.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(5, 42, 56, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 42, 56, 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. */
.page-hero .split-aside {
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

/* 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(5, 42, 56, 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(5, 42, 56, 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(5, 42, 56, 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(5, 42, 56, 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;
}

.check-list li::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--harambee-lime)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23064a63' 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;
}

.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(5, 42, 56, 0.82), rgba(5, 42, 56, 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(5, 42, 56, 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(5, 42, 56, 0.12);
}

.control[aria-invalid="true"] {
  border-color: #f87171;
}

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(5, 42, 56, 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(5, 42, 56, 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;
  }
}

@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;
  }
}