/* ==========================================================================
   HEALTH8 — o site da plataforma
   ==========================================================================
   Linguagem visual do octa8.app, adaptada ao segmento de saúde: sans semibold,
   tracking apertado, gradiente de marca no título, chips de ícone, superfícies
   suaves e revelação ao rolar.

   O que MUDA em relação ao site de uma clínica (`app.css`): lá a identidade é
   serifada e calorosa, porque quem lê é a paciente. Aqui quem lê é quem compra
   software — e a referência é o produto da casa.

   Geometria é DETALHE: filete, canto, grade de fundo em opacidade baixa. Nunca
   ilustração grande — foi o excesso que o cliente recusou em 22/07.
   ========================================================================== */

:root {
  --h8-bg:        #FFFFFF;
  --h8-soft:      #F7F8F9;
  --h8-surface:   #FFFFFF;
  --h8-ink:       #0C1116;
  --h8-body:      #414B57;
  /* #6B7684 passava sobre o branco (4.62) e REPROVAVA sobre `--h8-soft`
     (4.34) — foi calibrado contra UM fundo, e a página tem dois. Medido com
     `tools/contraste.js`. #626C79 dá 5.33 e 5.01: AA nos dois, com margem, e é
     a menor mudança visual que resolve. */
  --h8-muted:     #626C79;
  --h8-line:      rgba(12,17,22,.09);
  --h8-line-soft: rgba(12,17,22,.05);
  --h8-accent:    #1F6F63;
  --h8-accent-2:  #2E9C86;
  --h8-accent-bg: rgba(31,111,99,.08);
  --h8-on-accent: #FFFFFF;
  --h8-horizonte: #1F6F63;
}

@media (prefers-color-scheme: dark) {
  :root {
    --h8-bg:        #0B0F13;
    --h8-soft:      #10161C;
    --h8-surface:   #121920;
    --h8-ink:       #F3F6F8;
    --h8-body:      #B7C1CC;
    --h8-muted:     #8792A0;
    --h8-line:      rgba(243,246,248,.11);
    --h8-line-soft: rgba(243,246,248,.06);
    --h8-accent:    #5FCDB9;
    --h8-accent-2:  #8FE0CF;
    --h8-accent-bg: rgba(95,205,185,.10);
    --h8-on-accent: #08110F;
    --h8-horizonte: #5FCDB9;
  }
}

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

body {
  background: var(--h8-bg);
  color: var(--h8-body);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

/* ── Tipografia ────────────────────────────────────────────────────────── */

h1, h2, h3 { color: var(--h8-ink); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.06rem; letter-spacing: -.015em; }

/* Gradiente de marca no título — o `nova-accent-flow` do octa8.
   `background-clip:text` com fallback: sem suporte, herda a tinta e continua
   legível. Um título que some porque o gradiente falhou é pior que um sem
   gradiente. */
.h8-flow {
  background: linear-gradient(96deg, var(--h8-ink) 12%, var(--h8-accent) 58%, var(--h8-ink) 96%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: h8-flow 14s ease-in-out infinite;
}
@keyframes h8-flow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .h8-flow { animation: none; } }
@supports not (background-clip: text) { .h8-flow { color: var(--h8-ink); -webkit-text-fill-color: currentColor; } }

.h8-lead  { font-size: 1.09rem; color: var(--h8-muted); max-width: 42rem; }
.h8-muted { color: var(--h8-muted); }
.h8-small { font-size: .87rem; }

/* ── Selo, botões, chips ───────────────────────────────────────────────── */

.h8-selo {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .76rem; font-weight: 500; letter-spacing: .04em;
  color: var(--h8-accent); background: var(--h8-accent-bg);
  border: 1px solid var(--h8-line); border-radius: 999px;
  padding: .3rem .8rem;
}
.h8-selo::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.h8-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .72rem 1.35rem; border-radius: .6rem;
  font-size: .93rem; font-weight: 500; letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.h8-btn--p { background: var(--h8-accent); color: var(--h8-on-accent); }
.h8-btn--g { border-color: var(--h8-line); color: var(--h8-ink); }
.h8-btn:hover { transform: translateY(-1px); }
.h8-btn--p:hover { box-shadow: 0 8px 22px -10px var(--h8-accent); }
.h8-btn--g:hover { border-color: var(--h8-accent); }
@media (prefers-reduced-motion: reduce) { .h8-btn:hover { transform: none; } }

.h8-chip {
  width: 2.3rem; height: 2.3rem; border-radius: .65rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--h8-accent-bg); color: var(--h8-accent);
  border: 1px solid var(--h8-line-soft);
  font-size: .95rem; margin-bottom: .85rem;
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */

.h8-top {
  position: sticky; top: 0; z-index: 40;
  /* OPACO — o conteúdo não pode aparecer através da barra (§12). */
  background: var(--h8-bg);
  border-bottom: 1px solid var(--h8-line-soft);
}
.h8-top__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; }
.h8-logo { color: var(--h8-ink); }
.h8-logo svg { height: 30px; width: auto; color: var(--h8-accent); }
.h8-top__nav { display: flex; align-items: center; gap: .4rem; }
.h8-top__nav a.txt { font-size: .9rem; color: var(--h8-muted); padding: .5rem .75rem; }
.h8-top__nav a.txt:hover { color: var(--h8-ink); }
@media (max-width: 640px) { .h8-top__nav a.txt { display: none; } }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.h8-hero { position: relative; padding: 6rem 0 5rem; overflow: hidden; }

/* Grade de fundo — a geometria como DETALHE: linhas de 1px em 4% de opacidade,
   com máscara radial para não encostar nas bordas. */
.h8-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--h8-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--h8-line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 78%);
}
#h8Horizonte { position: absolute; inset: auto 0 0 0; height: 46%; z-index: 0; pointer-events: none; }
.h8-hero__in { position: relative; z-index: 1; text-align: center; }
.h8-hero h1 { margin: 1.25rem auto .9rem; max-width: 20ch; }
.h8-hero .h8-lead { margin: 0 auto 2rem; }
.h8-hero__acts { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ── Seções ────────────────────────────────────────────────────────────── */

.h8-sec { padding: 4.5rem 0; }
.h8-sec--soft { background: var(--h8-soft); border-block: 1px solid var(--h8-line-soft); }
.h8-sec__head { max-width: 40rem; margin-bottom: 2.5rem; }
.h8-sec__head h2 { margin-bottom: .6rem; }
.h8-sec__head.centro { margin-inline: auto; text-align: center; }

.h8-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1px; background: var(--h8-line-soft); border: 1px solid var(--h8-line-soft); border-radius: .9rem; overflow: hidden; }
/* Grade de 1px: as divisórias são o próprio fundo aparecendo entre as células.
   Uma borda por célula dobraria a linha nos encontros. */
.h8-cel { background: var(--h8-bg); padding: 1.6rem 1.5rem; }
.h8-cel h3 { margin-bottom: .3rem; }
.h8-cel p { font-size: .91rem; color: var(--h8-muted); }

.h8-tags { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.h8-tag { font-size: .84rem; color: var(--h8-muted); border: 1px solid var(--h8-line); border-radius: 999px; padding: .32rem .85rem; }

/* ── Planos ────────────────────────────────────────────────────────────── */

.h8-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.h8-plano {
  background: var(--h8-surface); border: 1px solid var(--h8-line);
  border-radius: .9rem; padding: 1.75rem 1.6rem; display: flex; flex-direction: column;
}
.h8-plano--foco { border-color: var(--h8-accent); position: relative; }
.h8-plano--foco::after {
  content: 'mais escolhido'; position: absolute; top: -.65rem; left: 1.6rem;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--h8-accent); color: var(--h8-on-accent);
  padding: .16rem .55rem; border-radius: 999px;
}
.h8-plano h3 { font-size: 1.15rem; margin-bottom: .1rem; }
.h8-preco { font-size: 2.15rem; font-weight: 650; color: var(--h8-ink); letter-spacing: -.035em; margin: .5rem 0 .1rem; }
.h8-preco small { font-size: .82rem; font-weight: 400; color: var(--h8-muted); letter-spacing: 0; }
.h8-plano ul { list-style: none; display: grid; gap: .4rem; margin: 1.2rem 0 1.6rem; font-size: .9rem; }
.h8-plano li { display: flex; gap: .5rem; align-items: flex-start; }
.h8-plano li i { color: var(--h8-accent); font-size: .72rem; margin-top: .42rem; }
.h8-plano .h8-btn { margin-top: auto; justify-content: center; }

/* ── Rodapé ────────────────────────────────────────────────────────────── */

.h8-pe { border-top: 1px solid var(--h8-line-soft); padding: 2.25rem 0; }
.h8-pe__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .86rem; color: var(--h8-muted); }
.h8-pe svg { height: 22px; width: auto; color: var(--h8-muted); }
.h8-pe__octa a { color: var(--h8-ink); font-weight: 500; border-bottom: 1px solid var(--h8-line); }
.h8-pe__octa a:hover { border-color: var(--h8-accent); }

/* Enquanto o JS não revela, o texto fica visível: `data-reveal` só ganha
   opacidade 0 quando o script assume (ver h8-motion.js). Sem isso, JS
   bloqueado deixaria a página em branco. */
[data-reveal] { opacity: 1; }

/* ── "Powered by" em logo (28/07/2026) ──────────────────────────────────────
   Estas classes vivem AQUI porque `platform-site.css` NÃO carrega o
   `app.css` — é a "lição recorrente" que o §8.25 registra pela 6ª vez: uma
   classe que só existe na outra folha renderiza sem estilo nenhum, calada,
   porque classe inexistente não estoura.
   ─────────────────────────────────────────────────────────────────────── */
.footer-powered { display: inline-flex; align-items: center; gap: .4rem; }
.footer-powered__label { font-size: .75rem; letter-spacing: .02em; }
.footer-powered__link {
  display: inline-flex; align-items: center; line-height: 0;
  opacity: .55; transition: opacity .2s ease;
  border-bottom: 0;          /* o `.h8-pe__octa a` desta folha põe uma borda
                                sob o link — sob um logo ela vira um risco */
}
.footer-powered__link:hover,
.footer-powered__link:focus-visible { opacity: 1; border-bottom: 0; }
.footer-powered__logo { width: 56px; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) { .footer-powered__link { transition: none; } }

/* ── Recursos entregues ─────────────────────────────────────────────────────
   A lista completa do que existe, derivada do catálogo (`ModuleCatalog`). Só
   tokens `--h8-*`: esta folha serve o site de VENDA e não carrega o `app.css`,
   então um `var(--surface-1)` aqui seria declaração inválida — descartada em
   silêncio, que é o defeito recorrente do §12. */
.h8-recgrupo { border-top: 1px solid var(--h8-line); padding-top: 1.4rem; margin-top: 1.4rem; }
.h8-recgrupo:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.h8-recgrupo__t {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: 1.05rem;
    margin-bottom: .15rem;
}
/* A contagem é informação, não enfeite: "Núcleo comum 21" responde antes de
   ler a lista. Por isso ela é discreta e não some no mobile. */
.h8-recgrupo__t span {
    font-size: .8rem;
    font-weight: 400;
    color: var(--h8-accent);
    border: 1px solid var(--h8-line);
    border-radius: 999px;
    padding: .1rem .5rem;
}
.h8-recgrupo__d { font-size: .88rem; color: var(--h8-muted); margin-bottom: .8rem; }
.h8-reclista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: .35rem .9rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.h8-reclista li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .9rem;
    color: var(--h8-ink);
    line-height: 1.45;
}
.h8-reclista i {
    color: var(--h8-accent);
    font-size: .72rem;
    /* alinha o ✓ com a PRIMEIRA linha do texto quando o rótulo quebra em duas
       — sem isto ele centraliza no bloco e fica flutuando no meio */
    margin-top: .38rem;
    flex-shrink: 0;
}

/* A descrição de cada recurso, sob o título. Uma coluna a mais na lista faria
   os 41 itens virarem parede de texto — em duas linhas, o título é escaneável
   e a descrição só é lida por quem se interessou. */
.h8-reclista li > span { display: block; }
.h8-recdesc {
    display: block;
    font-size: .84rem;
    color: var(--h8-muted);
    line-height: 1.5;
    margin-top: .1rem;
}

/* ── Entrar ─────────────────────────────────────────────────────────────────
   A tela de login usa esta folha, e não a do painel: ela é a primeira coisa
   depois da home no domínio da plataforma, e duas linguagens visuais em dois
   cliques fazem parecer dois produtos. */
.h8-entrar {
    max-width: 26rem;
    margin-inline: auto;
    text-align: center;
}
.h8-entrar h1 { margin-bottom: .3rem; }
.h8-entrar .h8-lead { margin-inline: auto; margin-bottom: 1.6rem; }
.h8-form {
    display: grid;
    gap: .35rem;
    text-align: left;
    background: var(--h8-soft);
    border: 1px solid var(--h8-line);
    border-radius: 14px;
    padding: 1.5rem;
}
.h8-form label { font-size: .82rem; color: var(--h8-muted); }
.h8-form label + input { margin-bottom: .7rem; }
.h8-form input {
    width: 100%;
    /* 16px no mobile, senão o iOS dá zoom no foco e a tela salta */
    font-size: 1rem;
    padding: .7rem .85rem;
    border: 1px solid var(--h8-line);
    border-radius: 10px;
    background: var(--h8-bg);
    color: var(--h8-ink);
}
.h8-form input:focus-visible { outline: 2px solid var(--h8-accent); outline-offset: 1px; }
.h8-form .h8-btn { margin-top: .5rem; width: 100%; justify-content: center; }
.h8-entrar .h8-small { margin-top: 1rem; }
.h8-aviso {
    text-align: left;
    font-size: .88rem;
    border: 1px solid var(--h8-line);
    border-left: 3px solid var(--h8-accent);
    border-radius: 10px;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    color: var(--h8-ink);
    background: var(--h8-soft);
}

/* ⚠️ `--h8-soft` é SUPERFÍCIE (#F7F8F9 no claro), não texto. Usá-la como cor
   dá 1.06:1 — texto branco sobre branco, invisível. Foram 6 reprovações AA
   pegas pelo `tools/contraste.js` antes de publicar: `.h8-links li`,
   `.h8-prova` e os links do rodapé. É a mesma família do §12: token nomeado
   pelo PAPEL evita isto; nomeado pela cor, convida ao erro. Texto usa
   `--h8-ink` (principal) ou `--h8-muted` (secundário). */

/* ══ PORTAL — as páginas além da home ═══════════════════════════════════════
   Blog, guias, notícias, o catálogo e uma página por recurso. Só tokens
   `--h8-*`: esta folha não carrega o `app.css`, e um `var()` de lá seria
   declaração inválida — descartada em silêncio (§12). */

/* ── Cartão: o elemento que substituiu a parede de texto ────────────────────
   A lista corrida de 41 recursos era honesta e ilegível. O cartão dá ao olho
   um ponto de parada por item, e o link torna cada um endereçável. */
.h8-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
}
.h8-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.4rem 1.35rem;
    background: var(--h8-bg);
    border: 1px solid var(--h8-line);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}
.h8-card:hover,
.h8-card:focus-visible { border-color: var(--h8-accent); transform: translateY(-2px); }
.h8-card h3 { font-size: 1.02rem; line-height: 1.35; }
.h8-card p { font-size: .89rem; color: var(--h8-muted); line-height: 1.55; }
.h8-card__mais {
    margin-top: auto;
    padding-top: .6rem;
    font-size: .82rem;
    color: var(--h8-accent);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.h8-card__mais i { font-size: .7rem; transition: transform .2s ease; }
.h8-card:hover .h8-card__mais i { transform: translateX(3px); }
.h8-card__tag {
    align-self: flex-start;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--h8-muted);
    border: 1px solid var(--h8-line);
    border-radius: 999px;
    padding: .12rem .55rem;
}

/* ── Os números da capa ─────────────────────────────────────────────────── */
.h8-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    text-align: center;
}
.h8-num {
    display: block;
    padding: 1.4rem 1rem;
    background: var(--h8-bg);
    border: 1px solid var(--h8-line);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease;
}
.h8-num:hover, .h8-num:focus-visible { border-color: var(--h8-accent); }
.h8-num strong {
    display: block;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    color: var(--h8-accent);
}
.h8-num span { display: block; margin-top: .3rem; font-size: .86rem; color: var(--h8-muted); }

/* ── Artigo: recurso, post, contato ─────────────────────────────────────── */
.h8-artigo { max-width: 46rem; }
.h8-artigo h1 { margin-bottom: .5rem; }
.h8-artigo h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.h8-artigo .h8-lead { margin-bottom: 1.2rem; }
.h8-migalha { font-size: .84rem; color: var(--h8-muted); margin-bottom: .8rem; }
.h8-migalha a { color: var(--h8-muted); }
.h8-migalha span { margin: 0 .35rem; opacity: .5; }
.h8-corpo { font-size: 1rem; line-height: 1.75; color: var(--h8-soft-ink, var(--h8-ink)); }
.h8-capa { width: 100%; height: auto; border-radius: 14px; margin: 1.2rem 0; }
.h8-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.h8-links li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .94rem;
    color: var(--h8-ink);
}
.h8-links i { color: var(--h8-accent); font-size: .82rem; }

/* O selo de "entregue": a evidência é o que separa esta página de um folheto. */
.h8-prova {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
    border: 1px solid var(--h8-line);
    border-radius: 999px;
    padding: .35rem .85rem;
    margin-bottom: 1.4rem;
    color: var(--h8-ink);
}
.h8-prova i { color: var(--h8-accent); }

/* ── Filtro e avisos ────────────────────────────────────────────────────── */
.h8-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.4rem;
}
.h8-filtro label { font-size: .86rem; color: var(--h8-muted); }
.h8-filtro select {
    /* 16px no mobile, senão o iOS dá zoom no foco e a página salta */
    font-size: 1rem;
    padding: .5rem .7rem;
    border: 1px solid var(--h8-line);
    border-radius: 10px;
    background: var(--h8-bg);
    color: var(--h8-ink);
}
.h8-conta {
    font-size: .78rem;
    font-weight: 400;
    vertical-align: middle;
    color: var(--h8-accent);
    border: 1px solid var(--h8-line);
    border-radius: 999px;
    padding: .1rem .5rem;
    margin-left: .35rem;
}

/* ── Rodapé em colunas ──────────────────────────────────────────────────── */
.h8-pe__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.6rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--h8-line);
    margin-bottom: 1.2rem;
}
.h8-pe__cols h3 {
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--h8-muted);
    margin-bottom: .6rem;
}
.h8-pe__cols a {
    display: block;
    font-size: .9rem;
    color: var(--h8-ink);
    padding: .2rem 0;
}
.h8-pe__cols a:hover { color: var(--h8-accent); }
.h8-pe__marca { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.h8-pe__marca svg { width: 22px; height: 22px; }

/* Item do menu na página atual — sem isto o cabeçalho não diz onde você está. */
.h8-top__nav a.txt.is-on { color: var(--h8-ink); }

/* ── Destaques: os cards que abrem a home ───────────────────────────────────
   Maiores que o `.h8-card` de propósito. São seis, e cada um carrega a lista
   de consequências — o que exige espaço para respirar. Três colunas viram uma
   no celular sem esmagar a lista. */
.h8-dest {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 1.1rem;
}
.h8-dest__card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.8rem 1.6rem;
    background: var(--h8-bg);
    border: 1px solid var(--h8-line);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}
.h8-dest__card:hover,
.h8-dest__card:focus-visible { border-color: var(--h8-accent); transform: translateY(-2px); }
.h8-dest__card h3 { font-size: 1.14rem; line-height: 1.3; }
.h8-dest__card > p { font-size: .92rem; color: var(--h8-muted); line-height: 1.55; }
.h8-dest__card ul { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .42rem; }
.h8-dest__card li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .89rem;
    line-height: 1.5;
    color: var(--h8-ink);
}
.h8-dest__card li i {
    color: var(--h8-accent);
    font-size: .68rem;
    /* alinha o ✓ com a PRIMEIRA linha quando o texto quebra em duas — sem isto
       ele centraliza no bloco e fica flutuando no meio */
    margin-top: .35rem;
    flex-shrink: 0;
}
.h8-dest__card .h8-card__mais { margin-top: auto; padding-top: .9rem; }