@charset "UTF-8";
/* ==========================================================================
   Hipérion Engenharia de Gestão
   Sistema visual: "A Sala de Controle"
   Camada de marca sobre Bootstrap 5. Ver DESIGN.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes auto-hospedadas (variáveis)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Azeret Mono';
  src: url('../fonts/azeret-latin-ext.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Azeret Mono';
  src: url('../fonts/azeret-latin.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cor */
  --navy-abyss: #0D1729;
  --navy-base: #11192E;
  --navy-surface: #15253F;
  --navy-hairline: #243352;
  --gold-signal: #CDAB6A;
  --gold-bright: #E0C288;
  --gold-deep: #6C5011;
  --bone: #F2F2F0;
  --bone-surface: #FBFBFA;
  --bone-hairline: #DEDEDA;
  --ink: #11192E;
  --ink-muted: #555554;
  --ink-placeholder: #6E6E6C;  /* 4.56:1 sobre osso, mínimo para placeholder */
  --sky-muted: #8D98B3;
  --alert: #D97A6C;
  --alert-deep: #9B3423;

  /* Fios e marcadores neutros */
  --bone-rule: #C9C9C4;        /* fio mais firme que --bone-hairline, para campos e passos */
  --bone-mark: #868680;        /* marcador de lista sobre fundo claro, 3.27:1 */

  /* Véus derivados do navy, para sobrepor mídia */
  --veil-strong: rgba(13, 23, 41, 0.86);
  --veil-panel: rgba(13, 23, 41, 0.82);
  --veil-soft: rgba(13, 23, 41, 0.42);
  --veil-none: rgba(13, 23, 41, 0);
  --shadow-tint: rgba(13, 23, 41, 0.16);
  --gold-ring: rgba(205, 171, 106, 0.45);

  /* Tipografia */
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, monospace;

  --text-display: clamp(3rem, 7.6vw, 5rem);
  --text-headline-xl: clamp(2.25rem, 5.2vw, 4.25rem);
  --text-headline: clamp(1.875rem, 3.5vw, 2.75rem);
  --text-title: 1.375rem;
  --text-lead: clamp(1.125rem, 1.6vw, 1.3125rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-label: 0.75rem;
  --text-readout: clamp(2.75rem, 5.4vw, 4.5rem);
  /* Número-herói: uma vez por página, no case de maior peso */
  --text-figure: clamp(3.5rem, 10.5vw, 8.5rem);

  /* Espaço, base 4pt */
  --sp-3xs: 4px;
  --sp-2xs: 8px;
  --sp-xs: 12px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 48px;
  --sp-2xl: 64px;
  --sp-3xl: 96px;
  --sp-4xl: 128px;

  /* Ritmo vertical das seções */
  --band-tight: clamp(3.5rem, 7vw, 6rem);
  --band-normal: clamp(4.5rem, 9vw, 7.5rem);
  --band-tall: clamp(5.5rem, 11vw, 9.5rem);

  /* Forma */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* Movimento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-state: 180ms;
  --t-enter: 520ms;
  /* Preenchimento das barras comparativas: mais lento que a entrada do
     painel de propósito, para dar tempo de acompanhar o número subindo. */
  --t-bar-fill: 1400ms;

  /* Elevação */
  --hover-lift: 0 8px 24px var(--shadow-tint);
  --focus-ring: 0 0 0 3px var(--gold-ring);

  --measure: 68ch;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

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

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

::selection { background: var(--gold-signal); color: var(--navy-base); }

.h-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--gold-signal);
  color: var(--navy-base);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.h-skip:focus { left: var(--sp-sm); top: var(--sp-sm); }

/* --------------------------------------------------------------------------
   4. Tipografia utilitária
   -------------------------------------------------------------------------- */
.h-display {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.h-headline {
  font-size: var(--text-headline);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Escala de tese: reservada aos dois momentos de maior peso argumentativo
   da home. Se aparecer em toda seção, deixa de ser ênfase. */
.h-headline--xl {
  font-size: var(--text-headline-xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.h-title {
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.h-lead {
  font-size: var(--text-lead);
  line-height: 1.55;
  max-width: 56ch;
}

.h-body { max-width: var(--measure); }

.h-small { font-size: var(--text-small); line-height: 1.6; }

.h-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.h-label__mark { width: 13px; height: 13px; flex: none; }

/* A cor do rótulo deriva da faixa, nunca é declarada por instância.
   O painel de leitura é sempre navy, mesmo dentro de faixa clara, por isso
   reafirma o dourado de sinal. */
.h-band--dark .h-label,
.h-band--abyss .h-label,
.h-pagehead .h-label,
.h-readout .h-label { color: var(--gold-signal); }
.h-band--light .h-label,
.h-band--inset .h-label { color: var(--gold-deep); }

.h-label--muted,
.h-band--dark .h-label--muted,
.h-band--abyss .h-label--muted { color: var(--sky-muted); }

.h-label--tight { margin-bottom: var(--sp-sm); }
.h-label--loose { margin-bottom: var(--sp-md); }

.h-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
}

/* Compensação para texto claro sobre fundo escuro: tipo claro lê como mais
   leve, então ganha entrelinha e um toque de tracking. Vale em toda
   superfície escura, inclusive painéis dentro de faixas claras. */
.h-band--dark,
.h-band--abyss,
.h-hero,
.h-pagehead,
.h-readout,
.h-foot { line-height: 1.72; letter-spacing: 0.006em; }

/* --------------------------------------------------------------------------
   5. Faixas de seção
   -------------------------------------------------------------------------- */
.h-band { position: relative; }

.h-band--dark {
  background: var(--navy-base);
  color: var(--bone);
}

.h-band--abyss {
  background: var(--navy-abyss);
  color: var(--bone);
}

.h-band--light {
  background: var(--bone);
  color: var(--ink);
}

.h-band--inset {
  background: var(--bone-surface);
  border-block: 1px solid var(--bone-hairline);
}

.h-band__inner {
  padding-block: var(--band-normal);
}
.h-band__inner--tight { padding-block: var(--band-tight); }
.h-band__inner--tall { padding-block: var(--band-tall); }

/* Cabeçalho de seção */
.h-sechead { margin-bottom: var(--sp-xl); }
.h-sechead .h-label { margin-bottom: var(--sp-sm); }
.h-sechead__sub {
  margin-top: var(--sp-md);
  max-width: var(--measure);
  color: var(--ink-muted);
}
.h-band--dark .h-sechead__sub,
.h-band--abyss .h-sechead__sub { color: var(--sky-muted); }

/* Fio divisor */
.h-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--bone-hairline);
}
.h-band--dark .h-rule,
.h-band--abyss .h-rule { background: var(--navy-hairline); }

/* --------------------------------------------------------------------------
   6. Navegação
   -------------------------------------------------------------------------- */
.h-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-state) var(--ease),
              border-color var(--t-state) var(--ease);
}
.h-nav.is-stuck {
  background: var(--navy-abyss);
  border-bottom-color: var(--navy-hairline);
}

.h-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: 72px;
  padding-block: var(--sp-xs);
}

.h-nav__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: var(--sp-2xs) 0;
  text-decoration: none;
}
.h-nav__brand img { display: block; height: 42px; width: auto; }

.h-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.h-nav__link {
  display: inline-block;
  padding: 12px 0; /* leva o alvo a 44px+ sem alterar a altura da barra */
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t-state) var(--ease),
              border-color var(--t-state) var(--ease);
}
.h-nav__link:hover,
.h-nav__link.is-active {
  color: var(--gold-signal);
  border-bottom-color: var(--gold-signal);
}

.h-nav__cta { flex: none; }

.h-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--navy-hairline);
  border-radius: var(--r-sm);
  color: var(--bone);
  cursor: pointer;
  transition: border-color var(--t-state) var(--ease),
              color var(--t-state) var(--ease);
}
.h-nav__toggle:hover { color: var(--gold-signal); border-color: var(--gold-signal); }
.h-nav__toggle svg { width: 18px; height: 18px; }
.h-nav__toggle .h-icon-close { display: none; }
.h-nav__toggle[aria-expanded='true'] .h-icon-close { display: block; }
.h-nav__toggle[aria-expanded='true'] .h-icon-open { display: none; }

@media (max-width: 991.98px) {
  .h-nav__toggle { display: inline-flex; }
  .h-nav__panel {
    position: fixed;
    inset: 72px 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: var(--sp-lg) var(--sp-md) var(--sp-2xl);
    background: var(--navy-abyss);
    border-top: 1px solid var(--navy-hairline);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-state) var(--ease),
                transform var(--t-state) var(--ease),
                visibility var(--t-state);
  }
  .h-nav__panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .h-nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .h-nav__menu li { border-bottom: 1px solid var(--navy-hairline); }
  .h-nav__link {
    display: block;
    padding: var(--sp-sm) 0;
    font-family: var(--font-sans);
    font-size: var(--text-title);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    border-bottom: 0;
  }
  .h-nav__panel .h-nav__cta { margin-top: var(--sp-lg); }
  .h-nav__panel .h-btn { width: 100%; justify-content: center; }
}

@media (min-width: 992px) {
  .h-nav__panel {
    display: flex !important;
    align-items: center;
    gap: var(--sp-xl);
  }
}

/* --------------------------------------------------------------------------
   7. Botões
   -------------------------------------------------------------------------- */
.h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 17px 34px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-state) var(--ease),
              color var(--t-state) var(--ease),
              border-color var(--t-state) var(--ease);
}

.h-btn--primary {
  background: var(--gold-signal);
  border-color: var(--gold-signal);
  color: var(--navy-base);
}
.h-btn--primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--navy-abyss);
}

.h-btn--ghost {
  background: transparent;
  border-color: var(--navy-hairline);
  color: var(--bone);
}
.h-btn--ghost:hover {
  background: var(--navy-surface);
  border-color: var(--gold-signal);
  color: var(--gold-signal);
}

.h-btn--ghost-dark {
  background: transparent;
  border-color: var(--bone-rule);
  color: var(--ink);
}
.h-btn--ghost-dark:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

.h-btn--sm { min-height: 40px; padding: 12px 22px; }

/* Retorno de pressão. Só transform, nunca propriedade de layout. */
.h-btn:active { transform: translateY(1px); }
.h-btn--primary:active { background: var(--gold-signal); }

/* Link com marcador, alternativa ao botão */
.h-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-deep);
  transition: gap var(--t-state) var(--ease);
}
.h-band--dark .h-arrow,
.h-band--abyss .h-arrow { color: var(--gold-signal); }
.h-arrow:hover { gap: 16px; }
.h-arrow:active { transform: translateY(1px); }
.h-nav__link:active,
.h-foot__nav a:active,
.h-crumb a:active { opacity: 0.75; }
.h-arrow svg { width: 14px; height: 14px; flex: none; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.h-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(660px, 100svh);
  padding-top: 128px;
  background: var(--navy-abyss);
  color: var(--bone);
  overflow: hidden;
}

.h-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.h-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 60%;
}
.h-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--navy-abyss) 0%, var(--veil-strong) 42%, var(--veil-soft) 100%),
    linear-gradient(to top, var(--navy-abyss) 2%, var(--veil-none) 55%);
}

.h-hero__mesh {
  position: absolute;
  right: -6%;
  bottom: -8%;
  z-index: 1;
  width: min(760px, 78vw);
  color: var(--gold-signal);
  opacity: 0.06;
  pointer-events: none;
}

.h-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: var(--band-normal);
}

.h-hero__eyebrow { color: var(--gold-signal); margin-bottom: var(--sp-md); }

/* A frase-tese do site inteiro: escala além do teto padrão de --text-display,
   reservada a este único H1. Nenhuma outra página usa esta escala. */
.h-hero__title {
  max-width: 16ch;
  margin-bottom: var(--sp-md);
  font-size: clamp(3.25rem, 8.6vw, 5rem);
}

.h-hero__lead { color: var(--sky-muted); margin-bottom: var(--sp-xl); }

.h-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-bottom: var(--band-tight);
}
@media (max-width: 575.98px) {
  /* empilhados, larguras iguais; evita a escada irregular no celular */
  .h-hero__actions .h-btn { flex: 1 1 100%; }
}

/* Faixa de leituras do hero */
.h-hero__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--navy-hairline);
  border: 1px solid var(--navy-hairline);
  /* mesma assinatura de painel-com-medida usada em .h-facts: uma única
     barra dourada encabeça a faixa inteira, nunca cada célula */
  border-top: 3px solid var(--gold-signal);
  border-radius: var(--r-md);
  overflow: hidden;
}

.h-stat {
  padding: var(--sp-lg) var(--sp-md) var(--sp-md);
  background: var(--veil-panel);
}
.h-stat__label {
  display: block;
  color: var(--sky-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2xs);
}
.h-stat__value {
  display: block;
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 2.4vw, 2.125rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.h-stat__note {
  display: block;
  margin-top: 2px;
  color: var(--sky-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   9. Credenciais
   -------------------------------------------------------------------------- */
.h-cred {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .h-cred {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--sp-3xl);
    align-items: start; /* o painel de fatos assume altura natural, sem esticar */
  }
}

.h-cred__prose p + p { margin-top: var(--sp-md); }
.h-cred__prose strong { font-weight: 700; }

.h-facts {
  display: grid;
  /* são exatamente 4 fatos: 2x2 fixo. auto-fit criava uma 3ª coluna
     em tablet e deixava célula órfã vazia. */
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--bone-hairline);
  border: 1px solid var(--gold-signal);
  /* uma única barra dourada encabeça o painel inteiro, nunca cada célula */
  
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 992px) {
  .h-facts {
    width:80%;
    margin-left:20%;
  }
}

.h-fact {
  padding: var(--sp-md);
  background: var(--bone-surface);
}
.h-fact__label {
  display: block;
  margin-bottom: var(--sp-2xs);
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.h-fact__value { font-size: var(--text-small); line-height: 1.55; color: var(--ink-muted); }
.h-fact__value b { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   10. Problema
   -------------------------------------------------------------------------- */
.h-gaps {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .h-gaps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 128px; }
}

.h-gap__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding-bottom: var(--sp-md);
  margin-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--navy-hairline);
}
/* Marcador de passo, não decoração: mesma licença de --gold-signal dada aos
   índices de .h-step e .h-pillar, só que levada ao extremo de escala para
   fazer o "01/02" funcionar como âncora gráfica da seção. */
.h-gap__num {
  flex: none;
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.h-gap__title { padding-top: 0.4em; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }

.h-symptoms { margin: 0; padding: 0; list-style: none; }
.h-symptoms li + li { margin-top: var(--sp-md); }
.h-symptom__name {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--bone);
}
.h-symptom__desc { color: var(--sky-muted); font-size: var(--text-small); }

.h-verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--navy-hairline);
  color: var(--gold-signal);
  
}
.h-verdict svg { flex: none; width: 16px; height: 16px; margin-top: 5px; }

/* --------------------------------------------------------------------------
   11. Produtos
   -------------------------------------------------------------------------- */
.h-prod + .h-prod { margin-top: var(--sp-2xl); padding-top: var(--sp-2xl); border-top: 1px solid var(--bone-hairline); }

.h-prod__head { margin-bottom: var(--sp-xl); }
.h-prod__kicker {
  display: block;
  margin-bottom: var(--sp-2xs);
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.h-prod__title { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; line-height: 1.15; }
.h-prod__sub { margin-top: var(--sp-sm); max-width: var(--measure); color: var(--ink-muted); }

.h-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.h-step { counter-increment: step; padding-top: var(--sp-sm); border-top: 1px solid var(--bone-rule); }
.h-step__idx {
  display: block;
  margin-bottom: var(--sp-2xs);
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
.h-step__title { margin-bottom: var(--sp-2xs); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.h-step__desc { color: var(--ink-muted); font-size: var(--text-small); margin-bottom: var(--sp-sm); }

.h-ticks { margin: 0; padding: 0; list-style: none; }
.h-ticks li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-small);
  line-height: 1.5;
}
.h-ticks li + li { margin-top: var(--sp-2xs); }
/* marcador neutro: estes itens não são medidas, então não levam dourado
   (A Regra da Leitura). Traço de cota em vez de bolinha de lista. */
.h-ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 1px;
  background: var(--bone-mark);
}

/* --------------------------------------------------------------------------
   12. Case em destaque
   -------------------------------------------------------------------------- */
.h-case {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 992px) {
  .h-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-3xl); }
}

/* --------------------------------------------------------------------------
   Número-herói: o ativo mais persuasivo do site deixa de ser subordinado
   à prosa. Ocupa a largura inteira, acima das duas colunas.
   -------------------------------------------------------------------------- */
.h-figure { margin-bottom: var(--band-tight); }

.h-figure__value {
  display: block;
  margin: var(--sp-md) 0 var(--sp-sm);
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
  font-size: var(--text-figure);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
  /* alinhamento óptico: o "R" encosta na coluna, sem parecer recuado */
  margin-left: -0.04em;
}
/* Unidade como anotação de instrumento: assentada na linha de base do
   numeral, com folga suficiente para não encostar no último dígito. */
.h-figure__unit {
  font-size: 0.2em;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--sky-muted);
  padding-left: 0.85em;
  vertical-align: 0.12em;
  white-space: nowrap;
}
.h-figure__caption {
  margin-top: var(--sp-md);
  /*max-width: 54ch;*/
  color: var(--sky-muted);
  font-size: var(--text-lead);
  line-height: 1.5;
}

/* Linha de base do instrumento: sangra até as bordas da viewport e é o
   apoio visual sobre o qual o número se assenta. */
.h-bleed-rule {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 1px;
  border: 0;
  background: var(--navy-hairline);
}

.h-case--after-figure { margin-top: var(--band-tight); }
.h-case__title { margin-bottom: var(--sp-md); max-width: 18ch; }
.h-case__body { color: var(--sky-muted); }
.h-case__body p + p { margin-top: var(--sp-md); }

.h-readout {
  position: relative;
  padding: var(--sp-lg);
  background: var(--navy-surface);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--r-md);
  /* o painel é sempre navy, inclusive dentro de faixas claras: fixa a cor
     de texto para que nada herde tinta escura sobre fundo escuro */
  color: var(--bone);
}
.h-readout::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gold-signal);
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.h-readout__label {
  display: block;
  margin: var(--sp-2xs) 0 var(--sp-xs);
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.h-readout__value {
  display: block;
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-readout);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
.h-readout__unit { font-size: 0.42em; letter-spacing: 0.02em; }

.h-readout__mech {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--navy-hairline);
  color: var(--bone);
  font-size: var(--text-small);
}

/* Sub-rótulo dentro do painel, para agrupar uma lista de resultados */
.h-readout__sublabel {
  display: block;
  margin: var(--sp-lg) 0 var(--sp-xs);
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* O painel é escuro mesmo em faixa clara: o marcador acompanha */
.h-readout .h-ticks li::before { background: var(--sky-muted); }

.h-readout__ref {
  display: block;
  margin-top: var(--sp-md);
  color: var(--sky-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Barra comparativa previsto x realizado */
.h-bars { margin-top: var(--sp-lg); }
.h-bar + .h-bar { margin-top: var(--sp-md); }
.h-bar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-2xs);
}
.h-bar__name { color: var(--bone); font-size: var(--text-small); }
.h-bar__val {
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  font-weight: 600;
}
.h-bar__track {
  position: relative;
  height: 10px;
  background: var(--navy-base);
  border: 1px solid var(--navy-hairline);
  border-radius: 1px;
  overflow: hidden;
}
.h-bar__fill {
  height: 100%;
  width: var(--w, 0%);
  background: var(--gold-signal);
  transform-origin: left center;
  transition: transform var(--t-bar-fill) var(--ease);
}
.h-bar__fill--muted { background: var(--sky-muted); }
.h-anim .h-bar__fill { transform: scaleX(0); }
.h-anim .h-bar.is-in .h-bar__fill { transform: scaleX(1); }
.h-bar__note { margin-top: 6px; color: var(--sky-muted); font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   12b. Tese do diferencial (Success Fee): segundo momento de peso máximo
   da home, tratado com a mesma licença do hero. A malha hexagonal, reservada
   pelo DESIGN.md a hero/pagehead/rodapé, entra aqui porque esta é a única
   outra afirmação da página que funciona como tese, não como leitura.
   -------------------------------------------------------------------------- */
.h-thesis { overflow: hidden; }
.h-thesis__mesh {
  position: absolute;
  right: -10%;
  top: -20%;
  z-index: 0;
  width: min(620px, 64vw);
  color: var(--gold-signal);
  opacity: 0.06;
  pointer-events: none;
}
.h-thesis__inner { position: relative; z-index: 1; padding-block: var(--band-tall); padding-top:0}
.h-thesis__title {
  max-width: 17ch;
  font-size: clamp(2.5rem, 6.4vw, 5.25rem);
}
.h-thesis__sub { margin-top: var(--sp-lg); color: var(--sky-muted); }

/* --------------------------------------------------------------------------
   13. Metodologias
   -------------------------------------------------------------------------- */
.h-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-xl) var(--sp-2xl);
  margin: 0;
  padding: 0;
}

.h-method { padding-top: var(--sp-md); border-top: 1px solid var(--bone-hairline); }
.h-method__name {
  margin-bottom: var(--sp-2xs);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.h-method__tag {
  display: block;
  margin-bottom: var(--sp-2xs);
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.h-method__desc { color: var(--ink-muted); font-size: var(--text-small); }

/* --------------------------------------------------------------------------
   14. Setores
   -------------------------------------------------------------------------- */
.h-sectors { margin: 0; padding: 0; list-style: none; }

.h-sector {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2xs) var(--sp-lg);
  padding-block: var(--sp-md);
  border-top: 1px solid var(--bone-hairline);
}
.h-sector:last-child { border-bottom: 1px solid var(--bone-hairline); }

@media (min-width: 768px) {
  .h-sector {
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(180px, 260px);
    align-items: baseline;
  }
}

.h-sector__name {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.h-sector__desc { color: var(--ink-muted); font-size: var(--text-small); }
.h-sector__ref { font-size: 0.8125rem; color: var(--ink-muted); }
.h-sector__ref b { display: block; color: var(--gold-deep); font-weight: 700; }

/* --------------------------------------------------------------------------
   15. Modelos de contratação
   -------------------------------------------------------------------------- */
.h-models {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
}
@media (min-width: 768px) {
  .h-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.h-model {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-lg);
  background: var(--navy-surface);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--r-md);
}
.h-model--lead::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gold-signal);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.h-model__tag {
  display: block;
  margin: var(--sp-2xs) 0 var(--sp-xs);
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.h-model--flat .h-model__tag { color: var(--sky-muted); }
.h-model__title { margin-bottom: var(--sp-2xs); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.h-model__claim { margin-bottom: var(--sp-md); color: var(--bone); font-weight: 600; }
.h-model__desc { color: var(--sky-muted); font-size: var(--text-small); }

.h-decision {
  margin-top: var(--sp-xl);
  padding: var(--sp-lg);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--r-md);
}
.h-decision__q { margin: 0 0 var(--sp-md); padding: 0; list-style: none; }
.h-decision__q li {
  position: relative;
  padding-left: 24px;
  color: var(--bone);
  font-size: var(--text-small);
}
.h-decision__q li + li { margin-top: var(--sp-2xs); }
.h-decision__q li::before {
  content: counter(q);
  counter-increment: q;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
}
.h-decision__q { counter-reset: q; }
.h-decision__out { display: grid; gap: var(--sp-2xs); }
.h-decision__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2xs) var(--sp-xs);
  padding-top: var(--sp-xs);
  border-top: 1px solid var(--navy-hairline);
  font-size: var(--text-small);
  color: var(--sky-muted);
}
.h-decision__row b {
  color: var(--gold-signal);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Faixa B2C */
.h-mentoria {
  display: grid;
  gap: var(--sp-md) var(--sp-xl);
  align-items: center;
  margin-top: var(--sp-xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--navy-hairline);
}
@media (min-width: 768px) {
  .h-mentoria { grid-template-columns: minmax(0, 1fr) auto; }
}
.h-mentoria .h-label { margin-bottom: var(--sp-2xs); }
.h-mentoria__title { font-size: 1.125rem; font-weight: 700; margin-bottom: var(--sp-2xs); }
.h-mentoria__desc { color: var(--sky-muted); font-size: var(--text-small); max-width: 62ch; }

/* --------------------------------------------------------------------------
   16. Contato e formulário
   -------------------------------------------------------------------------- */
.h-contact {
  display: grid;
  gap: var(--sp-2xl);
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .h-contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-3xl); }
}

.h-quote {
  margin: 0 0 var(--sp-xl);
  padding: 0;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink);
}
.h-quote p + p { margin-top: var(--sp-sm); }

.h-person { display: flex; align-items: center; gap: var(--sp-sm); }
.h-person__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid var(--bone-hairline);
  border-radius: var(--r-md);
  background: var(--bone-surface);
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.h-person__name { display: block; font-weight: 700; line-height: 1.3; }
.h-person__role { display: block; color: var(--ink-muted); font-size: var(--text-small); }

.h-directs { margin-top: var(--sp-lg); padding-top: var(--sp-lg); border-top: 1px solid var(--bone-hairline); }
.h-direct { display: flex; align-items: center; gap: var(--sp-xs); min-height: 44px; }
.h-direct svg { flex: none; width: 15px; height: 15px; color: var(--gold-deep); }
.h-direct a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--bone-hairline);
}
/* expande o alvo de toque a 44px sem deslocar o sublinhado */
.h-direct a::after {
  content: '';
  position: absolute;
  inset: -9px -6px;
}
.h-direct a:hover { border-bottom-color: var(--gold-deep); color: var(--gold-deep); }

/* Formulário */
.h-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-md) var(--sp-lg);
}
.h-form__full { grid-column: 1 / -1; }
@media (max-width: 575.98px) {
  .h-form { grid-template-columns: 1fr; }
  .h-field--half { grid-column: 1 / -1; }
}

.h-field { display: flex; flex-direction: column; gap: 6px; }
.h-field label {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.h-field__opt { text-transform: none; letter-spacing: 0.02em; font-family: var(--font-sans); }

.h-field input,
.h-field select,
.h-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bone-rule);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  transition: border-color var(--t-state) var(--ease);
  appearance: none;
}
.h-field textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.h-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555554' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px;
  padding-right: 24px;
  cursor: pointer;
}
.h-field input::placeholder,
.h-field textarea::placeholder { color: var(--ink-placeholder); }

.h-field input:focus,
.h-field select:focus,
.h-field textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--gold-deep);
  box-shadow: none;
  padding-bottom: 11px;
}
.h-field :is(input, select, textarea):focus-visible { box-shadow: var(--focus-ring); }

.h-field__err {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--alert-deep);
  font-size: 0.8125rem;
  font-weight: 600;
}
.h-field__err svg { flex: none; width: 13px; height: 13px; }
.h-field.is-invalid .h-field__err { display: flex; }
.h-field.is-invalid :is(input, select, textarea) { border-bottom-color: var(--alert-deep); border-bottom-width: 2px; padding-bottom: 11px; }

.h-form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-2xs);
}
.h-form__note { color: var(--ink-muted); font-size: 0.8125rem; max-width: 40ch; }

.h-form__status {
  grid-column: 1 / -1;
  display: none;
  gap: var(--sp-xs);
  align-items: flex-start;
  padding: var(--sp-md);
  border: 1px solid var(--bone-hairline);
  border-radius: var(--r-md);
  background: var(--bone-surface);
  font-size: var(--text-small);
}
.h-form__status.is-shown { display: flex; }
.h-form__status svg { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.h-form__status--ok { border-color: var(--gold-signal); }
.h-form__status--ok svg { color: var(--gold-deep); }
.h-form__status--err { border-color: var(--alert-deep); }
.h-form__status--err svg { color: var(--alert-deep); }


/* --------------------------------------------------------------------------
   16b. Páginas internas
   -------------------------------------------------------------------------- */
.h-pagehead {
  position: relative;
  padding-top: 112px;
  background: var(--navy-abyss);
  color: var(--bone);
  overflow: hidden;
}
.h-pagehead__mesh {
  position: absolute;
  right: -8%;
  top: -18%;
  width: min(560px, 62vw);
  color: var(--gold-signal);
  opacity: 0.05;
  pointer-events: none;
}
.h-pagehead__inner {
  position: relative;
  z-index: 2;
  padding-block: var(--band-tight) var(--band-normal);
}
.h-pagehead__title { max-width: 20ch; margin-bottom: var(--sp-md); }
.h-pagehead__lead { color: var(--sky-muted); max-width: 64ch; }

/* Trilha de navegação */
.h-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--sp-lg);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-muted);
}
.h-crumb a { color: var(--sky-muted); text-decoration: none; transition: color var(--t-state) var(--ease); }
.h-crumb a:hover { color: var(--gold-signal); }
.h-crumb li[aria-current] { color: var(--bone); }
.h-crumb__sep { opacity: 0.5; }

/* Bloco de case */
.h-caseblock__grid { display: grid; gap: var(--sp-xl); }
@media (min-width: 992px) {
  .h-caseblock__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--sp-3xl);
    align-items: start;
  }
}
.h-caseblock__title { margin-bottom: var(--sp-md); max-width: 20ch; }
.h-caseblock__prose p + p { margin-top: var(--sp-md); }
.h-caseblock__prose .h-body { max-width: var(--measure); }

.h-defterm {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--bone-hairline);
}
.h-band--dark .h-defterm { border-top-color: var(--navy-hairline); }
.h-defterm__label {
  display: block;
  margin-bottom: var(--sp-2xs);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.h-band--dark .h-defterm__label { color: var(--gold-signal); }

/* Antes e depois */
.h-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}
.h-vs__cell { min-width: 0; }
.h-vs__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky-muted);
}
.h-vs__value {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sky-muted);
}
.h-vs__cell--after .h-vs__value { color: var(--gold-signal); }
.h-vs__cell--after .h-vs__label { color: var(--gold-signal); }
.h-vs__arrow { color: var(--sky-muted); width: 22px; height: 22px; flex: none; }
.h-vs__note { margin-top: var(--sp-xs); color: var(--sky-muted); font-size: 0.8125rem; }

/* Pilares */
.h-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pil;
}
.h-pillar {
  counter-increment: pil;
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--navy-hairline);
}
.h-band--light .h-pillar, .h-band--inset .h-pillar { border-top-color: var(--bone-rule); }
.h-pillar__idx {
  display: block;
  margin-bottom: var(--sp-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-signal);
}
.h-band--light .h-pillar__idx, .h-band--inset .h-pillar__idx { color: var(--gold-deep); }
.h-pillar__title { margin-bottom: var(--sp-2xs); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.h-pillar__desc { font-size: var(--text-small); color: var(--sky-muted); }
.h-band--light .h-pillar__desc, .h-band--inset .h-pillar__desc { color: var(--ink-muted); }

/* Diagnóstico numérico (carteira do PMO) */
.h-diag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--navy-hairline);
  border: 1px solid var(--navy-hairline);
  border-top: 3px solid var(--gold-signal);
  border-radius: var(--r-md);
  overflow: hidden;
}
.h-diag__cell { padding: var(--sp-md); background: var(--navy-surface); }
.h-diag__value {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-signal);
}
.h-diag__label { display: block; font-size: 0.8125rem; line-height: 1.45; color: var(--sky-muted); }

/* Chamada final */
.h-endcta {
  display: grid;
  gap: var(--sp-md) var(--sp-xl);
  align-items: center;
}
@media (min-width: 768px) {
  .h-endcta { grid-template-columns: minmax(0, 1fr) auto; }
}
.h-endcta__title { margin-bottom: var(--sp-2xs); }
.h-endcta__sub { color: var(--ink-muted); max-width: 58ch; }
.h-band--dark .h-endcta__sub,
.h-band--abyss .h-endcta__sub { color: var(--sky-muted); }

/* Bloco de pilares abaixo do grid do case */
.h-caseblock__pillars { margin-top: var(--sp-2xl); }

/* --------------------------------------------------------------------------
   17. Rodapé
   -------------------------------------------------------------------------- */
.h-foot { background: var(--navy-abyss); color: var(--bone); }
.h-foot__inner { padding-block: var(--sp-2xl) var(--sp-xl); }
.h-foot__top {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-xl);
  border-bottom: 1px solid var(--navy-hairline);
}
@media (min-width: 768px) {
  .h-foot__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.h-foot__brand img { height: 32px; width: auto; margin-bottom: var(--sp-md); }
.h-foot__tagline { color: var(--sky-muted); font-size: var(--text-small); max-width: 46ch; }

.h-foot__nav { display: flex; flex-wrap: wrap; gap: var(--sp-md) var(--sp-lg); margin: 0; padding: 0; list-style: none; }
.h-foot__nav a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t-state) var(--ease);
}
.h-foot__nav a:hover { color: var(--gold-signal); }

.h-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding-top: var(--sp-md);
  color: var(--sky-muted);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   18. Entrada ao entrar na viewport
   -------------------------------------------------------------------------- */
/* À prova de falha: o conteúdo é visível por padrão. O estado oculto só é
   aplicado depois que o JS confirma que pode revelá-lo (.h-anim no <html>),
   e um temporizador de segurança revela tudo se algo falhar. */
.h-anim .h-rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease);
  transition-delay: var(--d, 0ms);
}
.h-anim .h-rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .h-rise, .h-anim .h-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .h-bar__fill, .h-anim .h-bar__fill { transition: none !important; transform: scaleX(1) !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   19. Impressão
   -------------------------------------------------------------------------- */
@media print {
  .h-nav, .h-hero__media, .h-hero__mesh, .h-form__foot { display: none; }
  body { background: #fff; color: #000; }
  .h-band--dark, .h-band--abyss, .h-hero { background: #fff !important; color: #000 !important; }
}