/* ==========================================================================
   ALAVANCA — páginas.
   Camada 6. Só o que é específico de um template. Se uma regra aqui serviria a
   duas páginas diferentes, ela pertence a componentes.css.
   ========================================================================== */

/* ==========================================================================
   1. HOME
   Hierarquia: uma promessa, uma caixa de busca, e problemas. Não é portal de
   notícias — não há "últimas", não há grelha de artigos igual em toda página.
   ========================================================================== */

.al-home-hero {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--al-section-tight);
  border-bottom: 1px solid var(--al-border);
}
.al-home-hero__titulo {
  font-size: var(--al-text-5xl);
  max-width: 16ch;
  margin-block: var(--al-space-4) var(--al-space-6);
}
.al-home-hero__resumo {
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  line-height: var(--al-leading-relaxed);
  color: var(--al-text-soft);
  max-width: 56ch;
}

/* A busca por problema é o elemento central da home, não um campo no canto. */
.al-home-busca { margin-top: var(--al-space-10); max-width: 46rem; }
.al-home-busca__pergunta {
  margin-bottom: var(--al-space-4);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-sm);
  font-weight: var(--al-weight-semibold);
  color: var(--al-text);
}
/* Respiro entre o campo e as sugestões: sem ele o rótulo encosta na borda do
   input e lê como parte do campo, não como uma lista de atalhos. */
.al-home-busca__exemplos-rotulo {
  margin-top: var(--al-space-8);
  margin-bottom: var(--al-space-3);
}
.al-home-busca .al-busca__exemplos { margin-top: 0; }

.al-home-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-6) var(--al-space-10);
  margin-top: var(--al-space-10);
  padding-top: var(--al-space-6);
  border-top: 1px solid var(--al-border);
}
.al-home-numeros__item { display: flex; flex-direction: column; gap: var(--al-space-1); }
.al-home-numeros__valor {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-2xl);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-tight);
  font-variant-numeric: tabular-nums;
}

/* Problemas populares: a grade tem um cartão-líder que ocupa duas colunas. Um
   cartão idêntico repetido doze vezes é a assinatura de template comprado. */
.al-home-problemas .al-grade { --al-min: 300px; }

.al-home-areas__lista {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--al-text);
}
.al-home-areas__item { border-bottom: 1px solid var(--al-border); }
.al-home-areas__link {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: var(--al-space-5);
  align-items: baseline;
  padding-block: var(--al-space-5);
  color: inherit;
  text-decoration: none;
}
.al-home-areas__link:hover { background: var(--al-bg-sunken); }
.al-home-areas__numero {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--al-text-faint);
}
.al-home-areas__nome { font-family: var(--al-font-serif); font-size: var(--al-text-xl); font-weight: var(--al-weight-semibold); }
.al-home-areas__desc { grid-column: 2; font-size: var(--al-text-sm); color: var(--al-text-soft); max-width: 62ch; }
.al-home-areas__conta { font-size: var(--al-text-xs); font-variant-numeric: tabular-nums; color: var(--al-text-faint); white-space: nowrap; }

@media (max-width: 599px) {
  .al-home-areas__link { grid-template-columns: minmax(0, 1fr) auto; gap: var(--al-space-2) var(--al-space-4); }
  .al-home-areas__numero { display: none; }
  .al-home-areas__desc { grid-column: 1 / -1; }
}

/* Business Score na home: faixa escura, número grande, promessa curta. */
.al-home-score { display: grid; gap: var(--al-space-8); align-items: center; }
@media (min-width: 900px) { .al-home-score { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--al-space-16); } }
.al-home-score__titulo { font-size: var(--al-text-3xl); color: var(--al-on-band); }
.al-home-score__texto { margin-top: var(--al-space-4); max-width: 52ch; }
.al-home-score__dial {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 240px;
  margin-inline: auto;
  border: 1px solid var(--al-ink-700);
  border-radius: 50%;
}
.al-home-score__numero {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-5xl);
  font-weight: var(--al-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--al-tracking-tight);
  color: var(--al-on-band);
  line-height: 1;
}
.al-home-score__escala { margin-top: var(--al-space-2); font-size: var(--al-text-xs); color: var(--al-on-band-soft); }

/* ==========================================================================
   2. ARTIGO — a experiência editorial
   ========================================================================== */

.al-artigo-cabecalho { padding-block: var(--al-space-8) var(--al-space-10); }
.al-artigo-cabecalho__titulo {
  font-size: var(--al-text-4xl);
  max-width: 22ch;
  margin-block: var(--al-space-4);
}
.al-artigo-cabecalho__resumo {
  max-width: var(--al-measure);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  line-height: var(--al-leading-relaxed);
  color: var(--al-text-soft);
}
.al-artigo-cabecalho .al-meta { margin-top: var(--al-space-6); padding-top: var(--al-space-4); border-top: 1px solid var(--al-border); }
.al-artigo-cabecalho__autor { display: flex; align-items: center; gap: var(--al-space-3); margin-top: var(--al-space-5); }
.al-artigo-cabecalho__avatar { width: 36px; height: 36px; border-radius: 50%; }
.al-artigo-cabecalho__autor-nome { font-size: var(--al-text-sm); font-weight: var(--al-weight-semibold); }
.al-artigo-cabecalho__autor-papel { font-size: var(--al-text-xs); color: var(--al-text-faint); }

.al-artigo-destaque { margin-block: var(--al-space-8); }
.al-artigo-destaque img { width: 100%; border-radius: var(--al-radius); }
.al-artigo-destaque figcaption { margin-top: var(--al-space-3); font-size: var(--al-text-xs); color: var(--al-text-faint); }

/* --- O corpo. Serifa, medida de 68ch, ritmo generoso. ------------------- */

.al-prosa {
  max-width: var(--al-measure);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  line-height: var(--al-leading-relaxed);
  color: var(--al-text);
}
.al-prosa > * + * { margin-top: var(--al-space-6); }
.al-prosa h2 {
  margin-top: var(--al-space-12);
  padding-top: var(--al-space-5);
  border-top: 1px solid var(--al-border);
  font-size: var(--al-text-2xl);
}
.al-prosa h3 { margin-top: var(--al-space-10); font-size: var(--al-text-xl); }
.al-prosa h2 + *, .al-prosa h3 + * { margin-top: var(--al-space-4); }

.al-prosa ul, .al-prosa ol { padding-left: var(--al-space-6); }
.al-prosa li { list-style: disc; margin-bottom: var(--al-space-3); }
.al-prosa ol li { list-style: decimal; }
.al-prosa li::marker { color: var(--al-text-faint); }

.al-prosa blockquote { margin-block: var(--al-space-8); }
.al-prosa figure { margin-block: var(--al-space-8); }
.al-prosa figcaption { margin-top: var(--al-space-3); font-family: var(--al-font-sans); font-size: var(--al-text-xs); color: var(--al-text-faint); }

.al-prosa a { text-decoration-color: var(--al-brand-200); }

/* Componentes intercalados quebram a medida de propósito: eles são o respiro
   do artigo e assinalam mudança de registo. */
.al-prosa > .al-alerta,
.al-prosa > .al-conceito,
.al-prosa > .al-exemplo,
.al-prosa > .al-metrica-card,
.al-prosa > .al-checklist,
.al-prosa > .al-prompt-card,
.al-prosa > .al-cta,
.al-prosa > .al-benchmark {
  margin-block: var(--al-space-10);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-base);
  line-height: var(--al-leading-normal);
}
@media (min-width: 1200px) {
  .al-prosa > .al-benchmark,
  .al-prosa > .al-prompt-card { width: calc(100% + 8rem); }
}

/* Capitular só na primeira letra do primeiro parágrafo do artigo editorial. */
.al-tipo-post .al-prosa > p:first-of-type::first-letter {
  float: left;
  margin: 0.06em 0.08em 0 0;
  font-size: 3.4em;
  line-height: 0.82;
  font-weight: var(--al-weight-semibold);
  color: var(--al-brand);
}

.al-artigo-rodape {
  max-width: var(--al-measure);
  margin-top: var(--al-space-12);
  padding-top: var(--al-space-6);
  border-top: 2px solid var(--al-text);
}
.al-artigo-fonte { font-size: var(--al-text-xs); color: var(--al-text-faint); }

/* ==========================================================================
   3. PROBLEMA — o template mais importante
   Direcção: urgência contida. O terracota aparece em fio e etiqueta, nunca
   como fundo de página. Quem chega aqui já está aflito.
   ========================================================================== */

.al-problema-cabecalho {
  padding-block: var(--al-space-8) var(--al-space-10);
  border-bottom: 1px solid var(--al-border);
}
/* A frase do empresário é a manchete, em itálico e entre aspas — é fala. */
.al-problema-frase {
  max-width: 20ch;
  margin-block: var(--al-space-4) var(--al-space-6);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-4xl);
  font-style: italic;
  font-weight: var(--al-weight-regular);
  line-height: var(--al-leading-tight);
  letter-spacing: var(--al-tracking-tight);
}
.al-problema-frase::before { content: "“"; margin-left: -0.4em; color: var(--al-stop); }
.al-problema-frase::after { content: "”"; color: var(--al-stop); }

/* Identidade por tipo (V3 §8). A cor é acento, nunca fundo: o que muda de um
   tipo para outro na manchete é a sobrelinha e o fio que a antecede — a mesma
   cor que o cartão do tipo já usa (`--al-acento`, componentes.css), em
   variante segura para texto (os `on-*-wash` são AA nos dois temas). Os tipos
   de leitura (conceito, artigo) ficam neutros de propósito: a ausência de cor
   também é identidade, e o roxo/azul "por tipo" é o carimbo de template. */
.al-tipo-pme_problema    { --al-acento-tipo: var(--al-on-stop-wash); }
.al-tipo-pme_metrica     { --al-acento-tipo: var(--al-on-data-wash); }
.al-tipo-pme_ferramenta,
.al-tipo-pme_playbook,
.al-tipo-pme_diagnostico { --al-acento-tipo: var(--al-on-brand-wash); }
.al-tipo-pme_pergunta    { --al-acento-tipo: var(--al-info); }
.al-tipo-pme_prompt,
.al-tipo-pme_conceito,
.al-tipo-post            { --al-acento-tipo: var(--al-text-soft); }

article > header[class$="-cabecalho"] > .al-container > .al-sobrelinha:first-child,
article > header[class*="-cabecalho "] > .al-container > .al-sobrelinha:first-child,
article > header[class$="-cabecalho"] > .al-container > .al-medida > .al-sobrelinha:first-child,
article > header[class*="-cabecalho "] > .al-container > .al-medida > .al-sobrelinha:first-child {
  color: var(--al-acento-tipo, var(--al-text-faint));
}
article > header[class$="-cabecalho"] > .al-container > .al-sobrelinha:first-child::before,
article > header[class*="-cabecalho "] > .al-container > .al-sobrelinha:first-child::before,
article > header[class$="-cabecalho"] > .al-container > .al-medida > .al-sobrelinha:first-child::before,
article > header[class*="-cabecalho "] > .al-container > .al-medida > .al-sobrelinha:first-child::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 2px;
  margin-right: var(--al-space-2);
  vertical-align: middle;
  background: currentColor;
}

.al-problema-cabecalho .al-sobrelinha { color: var(--al-on-stop-wash); }
.al-problema-etiquetas { display: flex; flex-wrap: wrap; gap: var(--al-space-2); margin-top: var(--al-space-5); }

.al-problema-secao { padding-block: var(--al-space-12); border-bottom: 1px solid var(--al-border); }
.al-problema-secao__titulo {
  font-size: var(--al-text-2xl);
  margin-bottom: var(--al-space-2);
}
.al-problema-secao__intro { max-width: var(--al-measure); margin-bottom: var(--al-space-8); color: var(--al-text-soft); }

/* Sintomas: lista de reconhecimento. O leitor tem de conseguir dizer "é isso". */
.al-sintomas { display: grid; gap: 0; border-top: 2px solid var(--al-text); }
.al-sintomas__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--al-space-4);
  padding-block: var(--al-space-5);
  border-bottom: 1px solid var(--al-border);
}
.al-sintomas__marca {
  width: 8px; height: 8px;
  margin-top: 0.55em;
  background: var(--al-stop);
  border-radius: 50%;
}
.al-sintomas__texto { font-family: var(--al-font-serif); font-size: var(--al-text-lg); line-height: var(--al-leading-snug); }
.al-sintomas__como { margin-top: var(--al-space-2); font-family: var(--al-font-sans); font-size: var(--al-text-sm); color: var(--al-text-soft); }
/* O limiar que confirma o sintoma. Mesmo peso visual do "como conferir": são
   os dois lados da mesma verificação — onde olhar, e a partir de quando conta. */
.al-sintomas__confirma {
  margin-top: var(--al-space-2);
  color: var(--al-text-soft);
  font-size: var(--al-text-sm);
}

/* Causas prováveis: cada uma com barra de probabilidade e como verificar. */
.al-causas { display: grid; gap: var(--al-space-4); }
.al-causa {
  padding: var(--al-space-6);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  background: var(--al-bg-elev);
}
.al-causa__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--al-space-3);
}
.al-causa__titulo { font-size: var(--al-text-lg); }
/* O mecanismo da causa: por que ela produz o sintoma. Vem antes de "como
   verificar" porque é o que faz a verificação fazer sentido. */
.al-causa__porque {
  margin-top: var(--al-space-3);
  color: var(--al-text-soft);
  max-width: 62ch;
}
.al-causa__prob {
  display: flex;
  align-items: center;
  gap: var(--al-space-3);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-2xs);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.al-causa__barra {
  width: 56px; height: 4px;
  background: var(--al-bg-sunken);
  border-radius: var(--al-radius-pill);
  overflow: hidden;
}
.al-causa__barra span { display: block; height: 100%; width: var(--al-prob, 50%); background: var(--al-stop); }
.al-causa--alta .al-causa__prob { color: var(--al-on-stop-wash); }
.al-causa--media .al-causa__prob { color: var(--al-on-warn-wash); }
.al-causa--media .al-causa__barra span { background: var(--al-warn); }
.al-causa--baixa .al-causa__prob { color: var(--al-text-faint); }
.al-causa--baixa .al-causa__barra span { background: var(--al-text-faint); }

.al-causa__grade { display: grid; gap: var(--al-space-4); margin-top: var(--al-space-5); }
@media (min-width: 700px) { .al-causa__grade { grid-template-columns: 1fr 1fr; gap: var(--al-space-8); } }
.al-causa__bloco .al-sobrelinha { margin-bottom: var(--al-space-2); }
.al-causa__bloco p { font-size: var(--al-text-sm); color: var(--al-text-soft); }

/* "Costuma ser confundido com" — o campo que justifica a plataforma. */
.al-confusao {
  padding: var(--al-space-6) var(--al-space-8);
  background: var(--al-warn-wash);
  border-left: 3px solid var(--al-on-warn-wash);
  border-radius: 0 var(--al-radius) var(--al-radius) 0;
}
.al-confusao .al-sobrelinha { color: var(--al-on-warn-wash); }
.al-confusao__lista { margin-top: var(--al-space-4); display: grid; gap: var(--al-space-3); }
.al-confusao__item {
  display: grid;
  gap: var(--al-space-1);
  padding-bottom: var(--al-space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--al-on-warn-wash) 25%, transparent);
}
.al-confusao__item:last-child { border-bottom: 0; padding-bottom: 0; }
.al-confusao__titulo { font-family: var(--al-font-serif); font-size: var(--al-text-lg); font-weight: var(--al-weight-semibold); }
.al-confusao__nota { font-size: var(--al-text-sm); color: var(--al-text); }

.al-custo-ignorar {
  padding: var(--al-space-6);
  border: 1px solid var(--al-border);
  border-top: 3px solid var(--al-stop);
  border-radius: var(--al-radius);
}
.al-custo-ignorar__texto { margin-top: var(--al-space-3); font-family: var(--al-font-serif); font-size: var(--al-text-lg); }

/* ==========================================================================
   4. PERGUNTA
   ========================================================================== */

.al-pergunta-cabecalho { padding-block: var(--al-space-8) var(--al-space-6); }
.al-pergunta-titulo { font-size: var(--al-text-3xl); max-width: 24ch; margin-block: var(--al-space-4); }
.al-pergunta-resposta { margin-top: var(--al-space-6); }
.al-pergunta-depende {
  margin-top: var(--al-space-8);
  padding: var(--al-space-6);
  background: var(--al-bg-sunken);
  border-radius: var(--al-radius);
}
.al-pergunta-depende__texto { margin-top: var(--al-space-3); font-family: var(--al-font-serif); font-size: var(--al-text-lg); }
.al-pergunta-variantes { margin-top: var(--al-space-6); font-size: var(--al-text-xs); color: var(--al-text-faint); }

/* ==========================================================================
   5. FERRAMENTA — direcção: software. Sans, densidade, controlo.
   ========================================================================== */

.al-ferramenta-cabecalho {
  padding-block: var(--al-space-8);
  border-bottom: 1px solid var(--al-border);
}
.al-ferramenta-titulo {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-3xl);
  letter-spacing: var(--al-tracking-tight);
  margin-block: var(--al-space-3);
}
.al-ferramenta-pergunta {
  max-width: 56ch;
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  color: var(--al-text-soft);
}
.al-ferramenta-corpo { padding-block: var(--al-space-10); }
.al-ferramenta-explicacao { margin-top: var(--al-space-12); }

/* ==========================================================================
   6. PROMPT — direcção: produtividade/developer. Mono no lugar certo.
   ========================================================================== */

.al-prompt-cabecalho { padding-block: var(--al-space-8); border-bottom: 1px solid var(--al-border); }
.al-prompt-titulo {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-3xl);
  letter-spacing: var(--al-tracking-tight);
  margin-block: var(--al-space-3);
  max-width: 26ch;
}
.al-prompt-quando {
  display: grid;
  gap: var(--al-space-6);
  margin-top: var(--al-space-8);
}
@media (min-width: 800px) { .al-prompt-quando { grid-template-columns: repeat(3, 1fr); } }
.al-prompt-quando__bloco { padding-top: var(--al-space-3); border-top: 1px solid var(--al-border); }
.al-prompt-quando__texto { margin-top: var(--al-space-2); font-size: var(--al-text-sm); color: var(--al-text-soft); }

.al-prompt-resultado {
  margin-top: var(--al-space-10);
  padding: var(--al-space-6);
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-brand);
  border-radius: 0 var(--al-radius) var(--al-radius) 0;
  background: var(--al-bg-elev);
}
.al-prompt-nao-faz { margin-top: var(--al-space-6); }

/* ==========================================================================
   7. MÉTRICA — direcção: data-driven. Fórmula em destaque, tabela e ressalva.
   ========================================================================== */

.al-metrica-cabecalho { padding-block: var(--al-space-8); }
.al-metrica-titulo { font-size: var(--al-text-3xl); margin-block: var(--al-space-3); }
.al-metrica-sigla {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-base);
  font-weight: var(--al-weight-medium);
  color: var(--al-text-faint);
}
.al-metrica-formula {
  margin-top: var(--al-space-8);
  padding: var(--al-space-8);
  background: var(--al-data-wash);
  border-radius: var(--al-radius-lg);
  text-align: center;
}
.al-metrica-formula .al-sobrelinha { color: var(--al-on-data-wash); }
.al-metrica-formula__expressao {
  margin-top: var(--al-space-4);
  font-family: var(--al-font-mono);
  font-size: var(--al-text-xl);
  color: var(--al-text);
  word-break: break-word;
}
.al-metrica-nao-diz {
  margin-top: var(--al-space-10);
  padding: var(--al-space-6) var(--al-space-8);
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-stop);
  border-radius: 0 var(--al-radius) var(--al-radius) 0;
}
.al-metrica-nao-diz__texto { margin-top: var(--al-space-3); font-family: var(--al-font-serif); font-size: var(--al-text-lg); }
.al-metrica-erros { margin-top: var(--al-space-10); }
.al-metrica-erros__lista { margin-top: var(--al-space-4); border-top: 2px solid var(--al-text); }
.al-metrica-erros__item { padding-block: var(--al-space-4); border-bottom: 1px solid var(--al-border); }

/* ==========================================================================
   8. PLAYBOOK
   ========================================================================== */

.al-playbook-cabecalho { padding-block: var(--al-space-8); }
.al-playbook-titulo { font-size: var(--al-text-4xl); max-width: 20ch; margin-block: var(--al-space-4); }
.al-playbook-objetivo {
  max-width: var(--al-measure);
  padding: var(--al-space-5) var(--al-space-6);
  background: var(--al-brand-wash);
  border-radius: var(--al-radius);
}
.al-playbook-objetivo .al-sobrelinha { color: var(--al-on-brand-wash); }
.al-playbook-objetivo__texto { margin-top: var(--al-space-2); font-family: var(--al-font-serif); font-size: var(--al-text-lg); }

.al-playbook-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-6) var(--al-space-10);
  margin-top: var(--al-space-6);
  padding-block: var(--al-space-5);
  border-block: 1px solid var(--al-border);
}
.al-playbook-ficha__item { display: grid; gap: var(--al-space-1); }
.al-playbook-ficha__valor { font-family: var(--al-font-sans); font-size: var(--al-text-base); font-weight: var(--al-weight-semibold); }

.al-playbook-progresso {
  position: sticky;
  top: 60px;
  z-index: var(--al-z-sticky);
  padding-block: var(--al-space-3);
  background: var(--al-bg);
  border-bottom: 1px solid var(--al-border);
}
@media (min-width: 900px) { .al-playbook-progresso { top: 68px; } }

/* ==========================================================================
   9. CONCEITO
   ========================================================================== */

.al-conceito-cabecalho { padding-block: var(--al-space-8); }
.al-conceito-titulo { font-size: var(--al-text-3xl); margin-block: var(--al-space-3); }
.al-conceito-definicao {
  max-width: var(--al-measure);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-xl);
  line-height: var(--al-leading-relaxed);
}
.al-conceito-sinonimos { margin-top: var(--al-space-5); display: flex; flex-wrap: wrap; gap: var(--al-space-2); }

/* ==========================================================================
   10. DIAGNÓSTICO E RESULTADO
   ========================================================================== */

.al-diag-cabecalho { padding-block: var(--al-space-10); text-align: center; }
.al-diag-titulo { font-size: var(--al-text-4xl); max-width: 18ch; margin-inline: auto; margin-block: var(--al-space-4); }
.al-diag-promessa { max-width: 52ch; margin-inline: auto; color: var(--al-text-soft); }
.al-diag-corpo { max-width: 44rem; margin-inline: auto; padding-bottom: var(--al-section); }

.al-resultado-score {
  display: grid;
  gap: var(--al-space-8);
  padding: var(--al-space-10);
  background: var(--al-band-bg);
  color: var(--al-on-band);
  border-radius: var(--al-radius-lg);
}
@media (min-width: 800px) { .al-resultado-score { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--al-space-12); } }
.al-resultado-score__numero {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-5xl);
  font-weight: var(--al-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--al-tracking-tight);
  line-height: 1;
  color: var(--al-on-band);
}
.al-resultado-score__de { font-size: var(--al-text-xl); color: var(--al-on-band-soft); }
.al-resultado-score__faixa { margin-top: var(--al-space-3); color: var(--al-on-band-accent); }
.al-resultado-score__leitura { font-family: var(--al-font-serif); font-size: var(--al-text-xl); line-height: var(--al-leading-snug); color: var(--al-on-band); }

.al-resultado-gargalo {
  margin-top: var(--al-space-8);
  padding: var(--al-space-8);
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-stop);
  border-radius: 0 var(--al-radius-lg) var(--al-radius-lg) 0;
}
.al-resultado-gargalo__nome { margin-top: var(--al-space-2); font-size: var(--al-text-2xl); }

.al-dimensoes { margin-top: var(--al-space-10); display: grid; gap: var(--al-space-5); }
/* As barras por dimensão eram desenhadas por um segundo modelo de resultado,
   que passou a delegar no motor (que usa `.al-barra*`). O bloco `.al-dimensao*`
   ficou sem markup nenhum e saiu: CSS morto não aparece no portão de classe
   órfã, que só olha do markup para o CSS. Quem apanhou foi o portão de
   variáveis, ao ver `--al-valor` sem ninguém a defini-la. */

/* --- As três prioridades ------------------------------------------------
   Não são cartões de conteúdo: são dimensões da nota, com o motivo por
   extenso. O número fica ao lado do nome porque é ele que ordena a lista. */
.al-prioridades {
  display: grid;
  gap: var(--al-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: al-prio;
}
.al-prioridades__item {
  counter-increment: al-prio;
  padding-left: var(--al-space-8);
  position: relative;
}
.al-prioridades__item::before {
  content: counter(al-prio);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--al-font-sans);
  font-size: var(--al-text-sm);
  font-weight: var(--al-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--al-text-faint);
}
.al-prioridades__nome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--al-space-3);
  margin: 0 0 var(--al-space-1);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-base);
  font-weight: var(--al-weight-semibold);
}
.al-prioridades__nota {
  font-size: var(--al-text-sm);
  font-weight: var(--al-weight-regular);
  font-variant-numeric: tabular-nums;
  color: var(--al-text-faint);
}
.al-prioridades__motivo {
  max-width: var(--al-measure);
  margin: 0;
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}

/* ==========================================================================
   11. ARQUIVOS, HUB DE ÁREA, BUSCA
   ========================================================================== */

.al-arquivo-cabecalho { padding-block: var(--al-space-10); border-bottom: 1px solid var(--al-border); }
.al-arquivo-titulo { font-size: var(--al-text-4xl); max-width: 20ch; margin-block: var(--al-space-4); }
.al-arquivo-descricao { max-width: var(--al-measure); font-family: var(--al-font-serif); font-size: var(--al-text-lg); color: var(--al-text-soft); }
/* O texto próprio do hub (V3 §16–19): a resposta directa em destaque, o texto
   em prosa. É o que faz o arquivo deixar de ser uma lista de links. */
.al-hub-proprio { max-width: var(--al-measure); margin-top: var(--al-space-6); }
/* Na área com subáreas o bloco sai em dois: a resposta antes das subáreas, o
   texto depois — a navegação não fica enterrada sob 270 palavras. */
.al-hub-proprio--resposta { margin-bottom: var(--al-space-2); }
.al-hub-proprio--texto { margin-top: var(--al-space-6); }
.al-hub-proprio--tudo { margin-top: var(--al-space-6); }
.al-hub-resposta {
  margin: 0;
  padding-left: var(--al-space-4);
  border-left: 2px solid var(--al-acento-tipo, var(--al-brand));
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  line-height: var(--al-leading-relaxed);
}
.al-hub-texto { margin-top: var(--al-space-6); font-size: var(--al-text-base); color: var(--al-text-soft); }
.al-hub-texto > * + * { margin-top: var(--al-space-4); }
.al-arquivo-corpo { padding-block: var(--al-space-10); }

.al-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2);
  padding-block: var(--al-space-5);
  border-bottom: 1px solid var(--al-border);
}
.al-filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  /* `--al-control-h-sm` dá 36 px, que serve a um controlo de formulário no
     desktop mas não a um chip que se toca com o dedo — e estes chips são a
     navegação principal do catálogo no telemóvel. */
  min-height: var(--al-touch);
  padding: var(--al-space-2) var(--al-space-4);
  border: 1px solid var(--al-border-strong);
  border-radius: var(--al-radius-pill);
  font-size: var(--al-text-xs);
  font-weight: var(--al-weight-medium);
  color: var(--al-text-soft);
  text-decoration: none;
  white-space: nowrap;
}
.al-filtro:hover { border-color: var(--al-text); color: var(--al-text); }
.al-filtro[aria-current="true"] { background: var(--al-text); border-color: var(--al-text); color: var(--al-bg); }
.al-filtro__conta { font-variant-numeric: tabular-nums; opacity: 0.7; }

.al-hub-secao { padding-block: var(--al-space-12); border-bottom: 1px solid var(--al-border); }
.al-hub-subareas { display: flex; flex-wrap: wrap; gap: var(--al-space-2); margin-top: var(--al-space-6); }

.al-busca-cabecalho { padding-block: var(--al-space-10); }
.al-busca-cabecalho__caixa { max-width: 46rem; margin-top: var(--al-space-6); }
.al-busca-resumo { margin-top: var(--al-space-4); color: var(--al-text-soft); }
.al-busca-resumo strong { color: var(--al-text); }

/* ==========================================================================
   12. 404 — útil, não decorativa
   ========================================================================== */

.al-404 { padding-block: var(--al-space-16) var(--al-section); }
.al-404__codigo {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--al-tracking-caps);
  color: var(--al-text-faint);
}
.al-404__titulo { font-size: var(--al-text-3xl); max-width: 22ch; margin-block: var(--al-space-4) var(--al-space-6); }
.al-404__texto { max-width: 54ch; color: var(--al-text-soft); }
.al-404__busca { margin-top: var(--al-space-8); max-width: 40rem; }

/* ==========================================================================
   13. PÁGINAS DE TEMPLATE (minha empresa, catálogos, mapa de problemas)
   ========================================================================== */

.al-empresa-ficha {
  display: grid;
  gap: var(--al-space-6);
  padding: var(--al-space-8);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-elev);
}
@media (min-width: 800px) { .al-empresa-ficha { grid-template-columns: 1fr 1fr; gap: var(--al-space-8); } }
.al-empresa-ficha .al-campo { margin-bottom: 0; }

.al-empresa-historico { margin-top: var(--al-space-12); }
.al-empresa-historico__linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--al-space-4);
  align-items: baseline;
  padding-block: var(--al-space-4);
  border-bottom: 1px solid var(--al-border);
}
.al-empresa-historico__data { font-size: var(--al-text-xs); font-variant-numeric: tabular-nums; color: var(--al-text-faint); white-space: nowrap; }
.al-empresa-historico__score { font-family: var(--al-font-sans); font-size: var(--al-text-lg); font-weight: var(--al-weight-semibold); font-variant-numeric: tabular-nums; }
/* A linha virou link — cada medição abre o seu resultado. */
a.al-empresa-historico__linha { color: inherit; text-decoration: none; }
a.al-empresa-historico__linha:hover { background: var(--al-brand-wash); }
a.al-empresa-historico__linha:focus-visible { outline: none; box-shadow: var(--al-shadow-focus); }
.al-empresa-historico__leitura { font-size: var(--al-text-sm); color: var(--al-text-soft); }

/* --- Retomada: o que a plataforma lembra de quem chegou -----------------
   É o laço de retenção inteiro. Sem este bloco a página abria com um
   formulário em branco para alguém que acabou de responder 32 perguntas. */
.al-empresa-retomada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-6);
  margin-bottom: var(--al-space-10);
  padding: var(--al-space-6) var(--al-space-8);
  background: var(--al-bg-elev);
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-brand);
  border-radius: 0 var(--al-radius) var(--al-radius) 0;
}
.al-empresa-retomada__score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--al-space-3);
  margin: var(--al-space-2) 0 0;
  font-family: var(--al-font-sans);
  font-size: var(--al-text-3xl);
  font-weight: var(--al-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.al-empresa-retomada__de { font-size: var(--al-text-lg); color: var(--al-text-faint); }
.al-empresa-retomada__delta {
  font-size: var(--al-text-xs);
  font-weight: var(--al-weight-medium);
  letter-spacing: 0;
}
/* A direção da mudança é a informação; a cor só reforça. */
.al-empresa-retomada__delta--sobe  { color: var(--al-on-success-wash); }
.al-empresa-retomada__delta--desce { color: var(--al-on-stop-wash); }
.al-empresa-retomada__gargalo { margin: var(--al-space-3) 0 0; color: var(--al-text-soft); }
.al-empresa-retomada__acoes { display: flex; flex-wrap: wrap; gap: var(--al-space-3); }
@media (max-width: 699px) {
  .al-empresa-retomada { padding: var(--al-space-5); }
  .al-empresa-retomada__acoes { width: 100%; }
  .al-empresa-retomada__acoes .al-btn { flex: 1 1 auto; }
}

/* Mapa de problemas: colunas por estágio de funil. Rola no telemóvel. */
.al-mapa {
  display: grid;
  gap: var(--al-col-gap);
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  padding-bottom: var(--al-space-4);
}
.al-mapa__coluna { display: grid; gap: var(--al-space-3); align-content: start; }
.al-mapa__lista { display: grid; gap: var(--al-space-3); margin: 0; padding: 0; list-style: none; }
.al-mapa__titulo { margin: 0; font-size: inherit; }
.al-mapa__cabecalho {
  padding-bottom: var(--al-space-3);
  border-bottom: 2px solid var(--al-text);
}
.al-mapa__conta { font-size: var(--al-text-xs); font-variant-numeric: tabular-nums; color: var(--al-text-faint); }
.al-mapa__item {
  display: block;
  padding: var(--al-space-4);
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-stop);
  border-radius: 0 var(--al-radius-sm) var(--al-radius-sm) 0;
  background: var(--al-bg-elev);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-sm);
  font-style: italic;
  color: inherit;
  text-decoration: none;
}
.al-mapa__item:hover { border-color: var(--al-text); border-left-color: var(--al-stop); }
/* A escala de gravidade do contrato tem quatro degraus — baixa, media, alta,
   critica — e só dois estavam pintados. Os dois mais urgentes caíam no padrão,
   ou seja, um problema crítico aparecia igual a um leve no mapa. A cor sobe com
   a gravidade; a crítica ganha fio mais grosso, porque cor sozinha não basta
   para quem não a distingue. */
.al-mapa__item--baixa   { border-left-color: var(--al-text-faint); }
.al-mapa__item--media   { border-left-color: var(--al-warn); }
.al-mapa__item--alta    { border-left-color: var(--al-stop); }
.al-mapa__item--critica {
  border-left-color: var(--al-stop);
  border-left-width: 4px;
  font-weight: var(--al-weight-medium);
}

.al-catalogo-grupo { padding-block: var(--al-space-10); border-bottom: 1px solid var(--al-border); }

/* ==========================================================================
   14. PÁGINA DE ESTILO
   ========================================================================== */

.al-sg { padding-block: var(--al-space-10) var(--al-section); }
.al-sg__nav {
  position: sticky;
  top: 60px;
  z-index: var(--al-z-sticky);
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2);
  padding-block: var(--al-space-3);
  margin-bottom: var(--al-space-10);
  background: var(--al-bg);
  border-bottom: 1px solid var(--al-border);
}
.al-sg__secao { padding-block: var(--al-space-12); border-top: 2px solid var(--al-text); }
.al-sg__titulo { font-size: var(--al-text-2xl); }
.al-sg__nota { max-width: var(--al-measure); margin-top: var(--al-space-3); color: var(--al-text-soft); font-size: var(--al-text-sm); }
.al-sg__amostras { display: grid; gap: var(--al-space-8); margin-top: var(--al-space-8); min-width: 0; }
.al-sg__amostra { display: grid; gap: var(--al-space-3); min-width: 0; }
.al-sg__rotulo {
  font-family: var(--al-font-mono);
  font-size: var(--al-text-xs);
  color: var(--al-text-faint);
  padding-bottom: var(--al-space-2);
  border-bottom: 1px dashed var(--al-border-strong);
}
/* O palco é uma vitrine de QA: mostra componentes em estados e larguras que
   nem sempre cabem no telemóvel. Ele rola dentro de si mesmo — a página de
   estilo não pode ser a única do site que arrasta a tela para o lado. */
.al-sg__palco {
  padding: var(--al-space-6);
  background: var(--al-bg-sunken);
  border-radius: var(--al-radius);
  min-width: 0;
  overflow-x: auto;
}
.al-sg__palco--claro { background: var(--al-bg-elev); border: 1px solid var(--al-border); }
.al-sg__linha { display: flex; flex-wrap: wrap; gap: var(--al-space-3); align-items: center; min-width: 0; }

.al-sg__cores { display: grid; gap: var(--al-space-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.al-sg__cor { display: grid; gap: var(--al-space-2); }
.al-sg__chip { height: 56px; border: 1px solid var(--al-border); border-radius: var(--al-radius-sm); }
.al-sg__cor-nome { font-family: var(--al-font-mono); font-size: var(--al-text-2xs); color: var(--al-text-soft); }

.al-sg__escala { display: grid; gap: var(--al-space-4); }
.al-sg__escala-item { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--al-space-4); align-items: baseline; min-width: 0; }
.al-sg__escala-item > span:last-child { overflow-wrap: anywhere; }

/* ==========================================================================
   TRIAGEM — o caminho guiado que substituiu a caixa de texto livre.

   Cada escolha é um alvo grande: o público lê no telemóvel, muitas vezes em
   pé, e a decisão é "qual destes se parece com a minha empresa?". Por isso
   rótulo em corpo de leitura, detalhe logo abaixo em voz mais baixa, e a
   escolha inteira clicável — nunca só o texto.
   ========================================================================== */

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

/* O topo agrupa progresso e trilha: são a mesma informação — onde estou e por
   onde vim — e precisam andar juntos quando a página respira. */
.al-triagem__topo { margin-bottom: var(--al-space-6); }

/* --- Progresso: um fio, não uma barra de download ----------------------- */

.al-triagem__progresso {
  display: flex;
  align-items: center;
  gap: var(--al-space-4);
  margin: 0 0 var(--al-space-6);
}
.al-triagem__contador {
  flex: 0 0 auto;
  font-size: var(--al-text-2xs);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-caps);
  text-transform: uppercase;
  color: var(--al-text-faint);
  font-variant-numeric: tabular-nums;
}
.al-triagem__barra {
  flex: 1 1 auto;
  height: 2px;
  background: var(--al-border);
  border-radius: var(--al-radius-pill);
  overflow: hidden;
}
.al-triagem__barra-cheia {
  display: block;
  height: 100%;
  width: var(--al-progresso, 0%);
  background: var(--al-brand);
  transition: width var(--al-dur-3) var(--al-ease-out);
}

/* --- Trilha: o que já foi escolhido, e o caminho de volta --------------- */

.al-triagem__trilha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2);
  margin: 0 0 var(--al-space-5);
  padding: 0;
  list-style: none;
  font-size: var(--al-text-sm);
}
.al-triagem__trilha-item + .al-triagem__trilha-item::before {
  content: "›";
  margin-right: var(--al-space-2);
  color: var(--al-text-faint);
}
.al-triagem__trilha-item a {
  color: var(--al-text-soft);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--al-border-strong);
}
.al-triagem__trilha-item a:hover { color: var(--al-link-hover); text-decoration-color: currentColor; }

/* --- A pergunta --------------------------------------------------------- */

.al-triagem__pergunta {
  margin: 0 0 var(--al-space-3);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-3xl);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-tight);
  letter-spacing: var(--al-tracking-tight);
}
.al-triagem__ajuda {
  max-width: var(--al-measure);
  margin: 0 0 var(--al-space-8);
  color: var(--al-text-soft);
}

/* --- As escolhas -------------------------------------------------------- */

.al-triagem__opcoes {
  display: grid;
  max-width: 62rem;
  grid-template-columns: 1fr;
  gap: var(--al-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .al-triagem__opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* O <li> é só a célula da grade; quem tem a aparência é o link dentro dele.
   Precisa de altura cheia para que dois cartões lado a lado terminem juntos
   mesmo com textos de tamanhos diferentes. */
.al-triagem__opcao { display: flex; }

.al-triagem__escolha {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--al-space-1);
  min-height: var(--al-touch);
  height: 100%;
  padding: var(--al-space-5) var(--al-space-6);
  border: 1px solid var(--al-border-strong);
  border-left: 3px solid var(--al-border-strong);
  border-radius: var(--al-radius);
  background: var(--al-bg-elev);
  color: var(--al-text);
  text-decoration: none;
  transition:
    border-color var(--al-dur-2) var(--al-ease),
    background var(--al-dur-2) var(--al-ease),
    transform var(--al-dur-1) var(--al-ease);
}
.al-triagem__escolha:hover {
  border-color: var(--al-brand);
  border-left-color: var(--al-brand);
  background: var(--al-brand-wash);
}
.al-triagem__escolha:active { transform: translateY(1px); }
.al-triagem__escolha:focus-visible {
  outline: none;
  box-shadow: var(--al-shadow-focus);
  border-color: var(--al-brand);
}
.al-triagem__rotulo {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-lg);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-snug);
}
.al-triagem__detalhe {
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
  line-height: var(--al-leading-normal);
}
.al-triagem__escolha:hover .al-triagem__detalhe { color: var(--al-on-brand-wash); }

/* --- Rodapé de saída ---------------------------------------------------- */

/* O botão discreto ao lado de dois sólidos lia-se como texto morto — ninguém
   percebia que era clicável. Sublinhado devolve a afordância sem competir. */
.al-triagem__acoes .al-botao--discreto {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--al-border-strong);
}
.al-triagem__acoes .al-botao--discreto:hover { text-decoration-color: currentColor; }

.al-triagem__rodape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-4) var(--al-space-8);
  margin-top: var(--al-space-8);
  padding-top: var(--al-space-5);
  border-top: 1px solid var(--al-border);
  font-size: var(--al-text-sm);
}
.al-triagem__voltar,
.al-triagem__pular { color: var(--al-text-soft); text-decoration: underline; text-underline-offset: 0.2em;
  /* Rodapé da triagem: "voltar" e "pular" são navegação isolada, não texto
     corrido — e no telemóvel são o que se toca para sair de um passo. */
  display: inline-flex;
  align-items: center;
  min-height: var(--al-touch);
}
.al-triagem__voltar:hover,
.al-triagem__pular:hover { color: var(--al-link-hover); }
.al-triagem__voltar::before { content: "← "; }

/* --- O resultado -------------------------------------------------------- */

.al-triagem__resultado-titulo {
  margin: var(--al-space-2) 0 var(--al-space-6);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-4xl);
  font-style: italic;
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-tight);
  letter-spacing: var(--al-tracking-tight);
  max-width: 22ch;
}
.al-triagem__confirmacao {
  margin: var(--al-space-8) 0;
  padding: var(--al-space-6);
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-stop);
  border-radius: var(--al-radius);
  background: var(--al-bg-sunken);
}
.al-triagem__confirmacao-titulo {
  margin: 0 0 var(--al-space-2);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-xl);
  font-weight: var(--al-weight-semibold);
}
.al-triagem__confirmacao-ajuda {
  margin: 0 0 var(--al-space-4);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
  max-width: var(--al-measure);
}
.al-triagem__sintomas { margin: 0; padding-left: var(--al-space-5); display: grid; gap: var(--al-space-2); }
.al-triagem__sintomas li { line-height: var(--al-leading-normal); }
.al-triagem__sintomas li::marker { color: var(--al-stop); }

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

/* --- A variante da home: o primeiro passo acima da dobra ---------------- */

.al-home-triagem { margin-top: var(--al-space-10); }
.al-home-triagem__cabecalho { margin-bottom: var(--al-space-6); }
.al-home-triagem__titulo {
  margin: var(--al-space-2) 0 var(--al-space-2);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-2xl);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-snug);
}
.al-home-triagem__ajuda {
  margin: 0;
  max-width: var(--al-measure);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}
@media (min-width: 1024px) {
  .al-triagem__opcoes--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.al-home-triagem__saida {
  margin-top: var(--al-space-5);
  font-size: var(--al-text-sm);
  color: var(--al-text-faint);
}

/* ==========================================================================
   RESULTADO DO DIAGNÓSTICO — o que o motor entrega em /meu-diagnostico/.

   Estas 39 classes existiam no markup desde o início e não tinham UMA regra
   de CSS. Escaparam a todos os portões porque a página só se desenha com uma
   sessão pontuada, e o render estático nunca criava uma: o portão de classe
   órfã via a página no estado vazio e dava verde. É a página que a pessoa
   recebe no fim do diagnóstico — a que o produto vende — e chegava sem estilo.

   O vocabulário aqui é o do motor. Ele não foi reescrito para o do tema
   porque, ao contrário do quiz e da calculadora, aqui o motor é quem tem a
   página completa (evidências, portão de e-mail, quick wins, plano); o modelo
   do tema é que era a versão pobre, e passou a delegar.
   ========================================================================== */

.al-resultado-diagnostico {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--al-space-10);
}
.al-resultado-diagnostico > * { min-width: 0; }
.al-resultado-diagnostico h2 {
  margin: 0 0 var(--al-space-4);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-2xs);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-caps);
  text-transform: uppercase;
  color: var(--al-text-faint);
}

/* --- Topo: a nota é o herói da página ----------------------------------- */

.al-resultado__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--al-space-2);
  padding: var(--al-space-8);
  background: var(--al-band-bg);
  color: var(--al-on-band);
  border-radius: var(--al-radius-lg);
}
.al-resultado-diagnostico .al-resultado__rotulo {
  /* Mesma armadilha da leitura: `componentes.css` declara uma cor para esta
     classe e regra explícita vence herança. E a discrição vem de um token
     próprio para fundo escuro, não de `opacity` — opacidade sobre fundo
     preto derruba o contraste sem aviso. */
  color: var(--al-on-band-soft);
  margin: 0;
  font-family: var(--al-font-sans);
  font-size: var(--al-text-2xs);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-caps);
  text-transform: uppercase;
}
/* A nota do diagnóstico, pela mesma razão da calculadora: é a resposta, e a
   resposta compõe-se como manchete. O `/100` fica em sans, discreto — quem é
   manchete é o número, não a escala. */
.al-resultado__score {
  margin: 0;
  font-family: var(--al-font-serif);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.al-resultado__score span { font-family: var(--al-font-sans); }
.al-resultado__score strong { font-size: var(--al-text-5xl); font-weight: var(--al-weight-semibold); letter-spacing: var(--al-tracking-tight); }
.al-resultado__score span { font-size: var(--al-text-xl); opacity: 0.6; }
.al-resultado__faixa {
  margin: 0;
  font-family: var(--al-font-sans);
  font-size: var(--al-text-2xs);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-caps);
  text-transform: uppercase;
}

/* --- A porta de saída do resultado --------------------------------------
   O resultado tinha zero ligações no corpo: 32 perguntas respondidas e nenhum
   sítio para clicar. Este bloco é a única saída que existe antes do e-mail. */
.al-resultado__proxima {
  margin-top: var(--al-space-8);
  padding: var(--al-space-5);
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-brand);
  border-radius: var(--al-radius);
  background: var(--al-bg-elev);
}
.al-resultado__proxima h2 {
  margin: 0 0 var(--al-space-1);
  font-size: var(--al-text-lg);
}
.al-resultado__proxima-porque {
  margin: 0 0 var(--al-space-4);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}

/* --- Confiança do diagnóstico ------------------------------------------
   Fica ao lado da nota, não em nota de rodapé: uma nota de 68 apoiada em
   percepção e uma nota de 68 apoiada em números são coisas diferentes, e
   quem lê tem direito a saber isso antes de agir. A barra à esquerda muda
   de cor com o nível — é o único sinal cromático, e é semântico. */
.al-resultado__confianca {
  margin-top: var(--al-space-4);
  padding-left: var(--al-space-4);
  border-left: 3px solid var(--al-border);
}
.al-resultado__confianca--alta  { border-left-color: var(--al-success); }
.al-resultado__confianca--media { border-left-color: var(--al-text-soft); }
.al-resultado__confianca--baixa { border-left-color: var(--al-warn); }
.al-resultado__confianca-numero {
  margin: 0;
  font-family: var(--al-font-sans);
  font-size: var(--al-text-sm);
  font-variant-numeric: tabular-nums;
}
.al-resultado__confianca-porque {
  margin: var(--al-space-1) 0 0;
  font-size: var(--al-text-xs);
  /* `--al-on-band-soft` e não `--al-text-soft`: este bloco vive dentro da
     faixa escura do topo, e o token claro dava 2,40:1 — abaixo do mínimo AA.
     É a mesma armadilha que a nota logo acima deste ficheiro descreve. */
  color: var(--al-on-band-soft);
  max-width: 58ch;
}

/* A ressalva de quando o produto não tem prova para afirmar um gargalo. */
.al-resultado__ressalva {
  margin-top: var(--al-space-3);
  padding: var(--al-space-3) var(--al-space-4);
  background: var(--al-bg-sunken);
  border-radius: var(--al-radius);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
  max-width: 68ch;
}
.al-resultado-diagnostico .al-resultado__leitura {
  /* `componentes.css` já declara `color: var(--al-text)` para esta classe, e
     regra explícita vence herança: dentro da faixa escura o texto saía tinta
     sobre tinta. Herdar aqui é a correção, não repetir a cor. */
  color: inherit;
  max-width: var(--al-measure);
  margin: var(--al-space-3) 0 0;
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  line-height: var(--al-leading-normal);
  opacity: 0.9;
}

/* --- A frase do gargalo: é o texto mais importante da página ------------ */

.al-resultado__diagnostico { display: block; }
.al-resultado__frase {
  max-width: var(--al-measure);
  margin: 0;
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  line-height: var(--al-leading-normal);
}

/* --- Barras por área. A do gargalo destaca-se: é onde o olho tem de cair. */

.al-resultado__dimensoes { display: block; }
.al-barras { display: grid; gap: var(--al-space-4); margin: 0; padding: 0; list-style: none; }
.al-barra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--al-space-1) var(--al-space-4);
  align-items: baseline;
}
.al-barra__nome { font-size: var(--al-text-sm); font-weight: var(--al-weight-semibold); }
.al-barra__valor {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--al-text-soft);
}
.al-barra__trilho {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  background: var(--al-bg-sunken);
  border-radius: var(--al-radius-pill);
  overflow: hidden;
}
.al-barra__preenchida { display: block; height: 100%; border-radius: inherit; background: var(--al-success); }
.al-barra__peso {
  grid-column: 1 / -1;
  font-size: var(--al-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--al-text-faint);
}
.al-barra--gargalo .al-barra__nome { color: var(--al-on-stop-wash); }
.al-barra--gargalo .al-barra__preenchida { background: var(--al-stop); }

/* --- Evidências: a resposta que a pessoa deu, com o que ela significa ---- */

.al-resultado__evidencias ul,
.al-resultado__todas-evidencias ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--al-space-4); }
.al-resultado__evidencias li,
.al-resultado__todas-evidencias li {
  max-width: var(--al-measure);
  padding-left: var(--al-space-4);
  border-left: 2px solid var(--al-border-strong);
  font-size: var(--al-text-sm);
}
.al-evidencia__resposta { display: block; margin-top: var(--al-space-1); color: var(--al-text-soft); }
.al-evidencia__texto { display: block; margin-top: var(--al-space-1); color: var(--al-text-faint); }
/* «o que isso mede»: o link do número do diagnóstico para a métrica do acervo. */
.al-evidencia__metrica { margin-left: var(--al-space-2); font-size: var(--al-text-sm); white-space: nowrap; }

/* --- Prioridades e quick wins ------------------------------------------- */

.al-resultado__prioridades ol,
.al-resultado__quickwins ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--al-space-5); }
.al-prioridade,
.al-quickwin { max-width: var(--al-measure); }
.al-prioridade__titulo,
.al-quickwin__acao {
  margin: 0 0 var(--al-space-1);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-base);
  font-weight: var(--al-weight-semibold);
}
.al-prioridade__motivo,
.al-quickwin__porque { margin: 0; font-size: var(--al-text-sm); color: var(--al-text-soft); }
.al-prioridade__acoes { display: flex; flex-wrap: wrap; gap: var(--al-space-3); margin-top: var(--al-space-4); }

/* --- Plano recomendado -------------------------------------------------- */

.al-resultado__plano {
  padding: var(--al-space-8);
  background: var(--al-bg-elev);
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-brand);
  border-radius: 0 var(--al-radius) var(--al-radius) 0;
}
.al-plano__resumo { max-width: var(--al-measure); margin: 0 0 var(--al-space-5); color: var(--al-text-soft); }
.al-plano__passos { margin: 0; padding-left: var(--al-space-6); display: grid; gap: var(--al-space-3); }
.al-plano__passos > li { list-style: decimal; max-width: var(--al-measure); }
.al-plano__passos > li::marker { color: var(--al-text-faint); font-variant-numeric: tabular-nums; }

/* --- Confiança V3: base de evidência, nitidez, segundo gargalo, plano 7 ---
   O resultado passou a dizer de que é feita a confiança (categorias), se o
   gargalo é nítido ou se as áreas estão parecidas, e o que falta para subir.
   Tudo em texto corrido, com a mesma hierarquia tipográfica das evidências:
   o número é o que se lê primeiro; a explicação vem em `--al-text-soft`. */
.al-resultado__confianca-dica { cursor: help; text-decoration: underline dotted; text-underline-offset: 0.15em; color: var(--al-on-band-soft); font-size: var(--al-text-xs); }
.al-resultado__confianca-base { margin: var(--al-space-1) 0 0; font-size: var(--al-text-xs); color: var(--al-on-band-soft); max-width: 58ch; }
/* Vive na faixa escura do topo, ao lado da confiança: os tokens são os da
   faixa (`--al-on-band*`), não os do corpo — `--al-text-soft` dava 2,40:1. */
.al-resultado__nitidez { margin: var(--al-space-4) 0 0; max-width: var(--al-measure); color: var(--al-on-band-soft); }
.al-resultado__nitidez strong { color: var(--al-on-band); }
.al-resultado__nitidez--parecidas,
.al-resultado__nitidez--pouco_nitido { padding-left: var(--al-space-4); border-left: 3px solid var(--al-warn); }
.al-resultado__nitidez--nitido { padding-left: var(--al-space-4); border-left: 3px solid var(--al-success); }
.al-resultado__segundo { margin: var(--al-space-2) 0 0; font-size: var(--al-text-sm); color: var(--al-text-soft); }
.al-resultado__confirma,
.al-resultado__nao-bate,
.al-resultado__percepcao,
.al-resultado__falta { margin-top: var(--al-space-8); max-width: var(--al-measure); }
.al-resultado__confirma h2,
.al-resultado__nao-bate h2,
.al-resultado__percepcao h2,
.al-resultado__falta h2 { font-size: var(--al-text-md); margin: 0 0 var(--al-space-3); }
.al-resultado__confirma ul,
.al-resultado__nao-bate ul,
.al-resultado__percepcao ul,
.al-resultado__falta ul { margin: 0; padding-left: var(--al-space-5); display: grid; gap: var(--al-space-2); }
.al-resultado__confirma li { border-left: 3px solid var(--al-success); padding-left: var(--al-space-3); list-style: none; }
.al-resultado__nao-bate li { border-left: 3px solid var(--al-warn); padding-left: var(--al-space-3); list-style: none; }
.al-resultado__falta-nota { margin: var(--al-space-3) 0 0; font-size: var(--al-text-sm); color: var(--al-text-faint); }
.al-plano__passo--semana { font-weight: 500; }
.al-etiqueta--semana { margin-left: var(--al-space-2); background: var(--al-success-wash); color: var(--al-on-success-wash); }

/* --- Minha empresa V2: os blocos do cockpit ------------------------------
   Reaproveita `al-empresa-retomada` e `al-empresa-historico` (as linhas com
   data · nome · número); o que é novo é a próxima ação em destaque, o
   anterior com seta nos números, e as listas curtas (em andamento, salvos,
   vistos) com a data à direita. */
.al-perfil > section + section { margin-top: var(--al-space-10); }
.al-perfil__retomada { margin-top: var(--al-space-8); }
.al-empresa-retomada__confianca { margin: var(--al-space-2) 0 0; font-size: var(--al-text-sm); color: var(--al-text-soft); }
.al-perfil__proxima { padding: var(--al-space-6); border: 1px solid var(--al-border); border-left: 3px solid var(--al-brand); border-radius: 0 var(--al-radius) var(--al-radius) 0; background: var(--al-bg-elev); }
.al-perfil__proxima-titulo { margin: var(--al-space-2) 0 0; }
.al-perfil__proxima-motivo { margin: var(--al-space-3) 0 0; color: var(--al-text-soft); max-width: var(--al-measure); }
.al-perfil__proxima .al-recomendacao { margin-top: var(--al-space-5); }
.al-perfil__numero-rotulo { display: block; font-size: var(--al-text-xs); color: var(--al-text-faint); }
.al-perfil__numero-anterior { display: block; font-family: var(--al-font-sans); font-size: var(--al-text-xs); font-weight: 400; color: var(--al-text-faint); font-variant-numeric: tabular-nums; }
.al-perfil__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--al-space-2); max-width: var(--al-measure); }
.al-perfil__lista li { display: flex; flex-wrap: wrap; gap: var(--al-space-2) var(--al-space-3); align-items: baseline; padding: var(--al-space-2) 0; border-bottom: 1px solid var(--al-border); }
.al-perfil__data { margin-left: auto; font-size: var(--al-text-xs); color: var(--al-text-faint); font-variant-numeric: tabular-nums; }
.al-perfil__ficha-lista { margin: 0 0 var(--al-space-4); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--al-space-2) var(--al-space-6); max-width: var(--al-measure); }
.al-perfil__ficha-rotulo { display: block; font-size: var(--al-text-xs); color: var(--al-text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.al-perfil__ficha-nota { margin: 0 0 var(--al-space-4); font-size: var(--al-text-sm); color: var(--al-text-soft); }
.al-ficha__convite { margin: 0; }
.al-perfil__vazio { margin-top: var(--al-space-8); }
/* A ficha em passos dentro do cockpit é um bloco entre blocos, não a página:
   a pergunta desce um degrau na hierarquia tipográfica. */
.al-perfil__ficha .al-ficha__pergunta { font-size: var(--al-text-xl); }
.al-perfil .al-empresa-historico__leitura { margin-left: var(--al-space-2); vertical-align: middle; }
/* Os pontos só de percepção: pergunta + resposta, uma por linha, com ar. */
.al-resultado__percepcao li { list-style: none; padding: var(--al-space-2) 0; border-bottom: 1px solid var(--al-border); }
.al-resultado__percepcao li:last-child { border-bottom: 0; }

/* --- Newsletter V3: estados e interesses -------------------------------- */
.al-newsletter__depois { margin: var(--al-space-3) 0 0; color: var(--al-text-soft); max-width: var(--al-measure); }
.al-newsletter__interesses { margin-top: var(--al-space-5); }
.al-newsletter__interesses fieldset { border: 0; padding: 0; margin: 0 0 var(--al-space-4); display: grid; gap: var(--al-space-2); }
.al-newsletter__interesses-titulo { font-weight: 600; margin-bottom: var(--al-space-2); }
.al-newsletter__interesse { display: flex; gap: var(--al-space-2); align-items: flex-start; font-size: var(--al-text-sm); }

/* --- Recomendações: cada uma com o motivo que a liga à medição ---------- */

.al-recomendacao__resumo { margin: var(--al-space-1) 0 0; font-size: var(--al-text-sm); color: var(--al-text-soft); }
.al-recomendacao__motivo-item { margin: var(--al-space-1) 0 0; font-size: var(--al-text-xs); color: var(--al-text-faint); }
/* A cor da borda diz de que tipo é a sugestão, como no CTA contextual. */
.al-recomendacao__item--pme_problema { border-left: 3px solid var(--al-brand); padding-left: var(--al-space-4); }
.al-recomendacao__item--ferramenta   { border-left: 3px solid var(--al-data); padding-left: var(--al-space-4); }
.al-recomendacao__item--diagnostico  { border-left: 3px solid var(--al-brand); padding-left: var(--al-space-4); }
.al-recomendacao__item--pme_playbook { border-left: 3px solid var(--al-success); padding-left: var(--al-space-4); }

/* --- Nota de método e rodapé -------------------------------------------- */

.al-nota-metodo {
  max-width: var(--al-measure);
  margin: 0;
  font-size: var(--al-text-xs);
  color: var(--al-text-faint);
}
.al-resultado__rodape {
  padding-top: var(--al-space-6);
  border-top: 1px solid var(--al-border);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}
.al-resultado__rodape p { max-width: var(--al-measure); margin: 0; }
.al-resultado__url { margin-top: var(--al-space-3) !important; }
.al-resultado__url code {
  display: inline-block;
  padding: var(--al-space-2) var(--al-space-3);
  background: var(--al-bg-sunken);
  border-radius: var(--al-radius-sm);
  font-size: var(--al-text-xs);
  word-break: break-all;
}

/* ==========================================================================
   FICHA DA EMPRESA EM PASSOS

   Herda a anatomia da triagem de propósito — a pessoa já aprendeu aquele
   gesto na porta de entrada, e mudar de linguagem no meio do produto obriga a
   aprender duas vezes. O que a ficha acrescenta é a TROCA: cada passo diz o
   que a resposta compra (`__paga`) e o topo mostra o que já foi comprado
   (`__ganhos`). Sem isso, pedir cinco dados seguidos é interrogatório.
   ========================================================================== */

/* O cabeçalho da página já dá o respiro de cima; repetir a secção inteira
   empurrava a primeira pergunta para 200 px abaixo da dobra. */
.al-ficha { padding-block: var(--al-space-8) var(--al-section); }
.al-ficha__topo { margin-bottom: var(--al-space-6); }

.al-ficha__progresso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--al-space-3) var(--al-space-4);
  /* Sem limite, "nenhuma é obrigatória" ia parar ao outro extremo de uma tela
     de 1440 e deixava de se ler junto com o contador. */
  max-width: 62rem;
  margin: 0 0 var(--al-space-5);
}
.al-ficha__contador,
.al-ficha__opcional {
  flex: 0 0 auto;
  font-size: var(--al-text-2xs);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-caps);
  text-transform: uppercase;
  color: var(--al-text-faint);
  font-variant-numeric: tabular-nums;
}
/* "nenhuma é obrigatória" não é rodapé: é a razão de a pessoa começar. */
.al-ficha__opcional { color: var(--al-on-success-wash); }
.al-ficha__barra {
  flex: 1 1 6rem;
  height: 2px;
  background: var(--al-border);
  border-radius: var(--al-radius-pill);
  overflow: hidden;
}
.al-ficha__barra-cheia {
  display: block;
  height: 100%;
  width: var(--al-progresso, 0%);
  background: var(--al-brand);
  transition: width var(--al-dur-3) var(--al-ease-out);
}

/* --- O que já ficou mais específico ------------------------------------- */

.al-ficha__ganhos {
  display: grid;
  gap: var(--al-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.al-ficha__ganho {
  position: relative;
  padding-left: var(--al-space-6);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}
.al-ficha__ganho::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--al-on-success-wash);
  font-weight: var(--al-weight-semibold);
}
.al-ficha__ganhos--fim {
  margin-block: var(--al-space-6);
  font-size: var(--al-text-base);
}
.al-ficha__ganhos--fim .al-ficha__ganho { color: var(--al-text); }

/* --- A pergunta e o que ela compra -------------------------------------- */

.al-ficha__pergunta {
  margin: 0 0 var(--al-space-3);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-3xl);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-tight);
  letter-spacing: var(--al-tracking-tight);
}
.al-ficha__ajuda {
  max-width: var(--al-measure);
  margin: 0 0 var(--al-space-4);
  color: var(--al-text-soft);
}
/* A troca, dita antes de a pessoa escolher. */
.al-ficha__paga {
  max-width: var(--al-measure);
  margin: 0 0 var(--al-space-8);
  padding: var(--al-space-4) var(--al-space-5);
  border-left: 3px solid var(--al-brand);
  background: var(--al-brand-wash);
  font-size: var(--al-text-sm);
  color: var(--al-on-brand-wash);
}

/* --- As escolhas --------------------------------------------------------- */

.al-ficha__opcoes {
  display: grid;
  max-width: 62rem;
  grid-template-columns: 1fr;
  gap: var(--al-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .al-ficha__opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.al-ficha__opcao { display: flex; }
.al-ficha__escolha {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--al-space-1);
  min-height: var(--al-touch);
  height: 100%;
  padding: var(--al-space-5) var(--al-space-6);
  border: 1px solid var(--al-border-strong);
  border-left: 3px solid var(--al-border-strong);
  border-radius: var(--al-radius);
  background: var(--al-bg-elev);
  color: var(--al-text);
  text-decoration: none;
  transition:
    border-color var(--al-dur-2) var(--al-ease),
    background var(--al-dur-2) var(--al-ease),
    transform var(--al-dur-1) var(--al-ease);
}
.al-ficha__escolha:hover {
  border-color: var(--al-brand);
  border-left-color: var(--al-brand);
  background: var(--al-brand-wash);
}
.al-ficha__escolha:active { transform: translateY(1px); }
.al-ficha__escolha:focus-visible {
  outline: none;
  box-shadow: var(--al-shadow-focus);
  border-color: var(--al-brand);
}
/* Recusar responder é uma opção de primeira classe, não um campo em branco —
   mas não se disfarça de escolha que compra alguma coisa. */
.al-ficha__escolha--recusa {
  border-style: dashed;
  border-left-color: var(--al-border);
  background: none;
}
.al-ficha__rotulo {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-lg);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-snug);
}
.al-ficha__detalhe { font-size: var(--al-text-sm); color: var(--al-text-soft); }

/* --- Último passo: campos ------------------------------------------------ */

.al-ficha__forma {
  display: grid;
  max-width: 34rem;
  gap: var(--al-space-5);
}
.al-ficha__erro {
  margin: 0;
  font-size: var(--al-text-sm);
  color: var(--al-on-danger-wash);
}
.al-ficha__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-3);
  margin-top: var(--al-space-2);
}

/* --- Rodapé e promessa --------------------------------------------------- */

.al-ficha__rodape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-6);
  margin-top: var(--al-space-8);
  padding-top: var(--al-space-5);
  border-top: 1px solid var(--al-border);
  font-size: var(--al-text-sm);
}
.al-ficha__voltar,
.al-ficha__pular { color: var(--al-text-soft); text-decoration: underline; text-underline-offset: 0.2em;
  display: inline-flex;
  align-items: center;
  min-height: var(--al-touch);
}
.al-ficha__voltar:hover,
.al-ficha__pular:hover { color: var(--al-link-hover); }
.al-ficha__voltar::before { content: "← "; }
.al-ficha__promessa {
  max-width: var(--al-measure);
  margin: var(--al-space-5) 0 0;
  font-size: var(--al-text-xs);
  color: var(--al-text-faint);
}

@media (max-width: 699px) {
  .al-ficha__acoes .al-btn { width: 100%; justify-content: center; }
}