/* ==========================================================================
   ALAVANCA — componentes.
   Camada 5. Cada componente traz TODOS os estados: default, hover,
   focus-visible, active, loading, vazio, erro, sucesso, desabilitado,
   conteúdo longo e imagem ausente. Estado não é enfeite, é requisito.

   Regra de cor: nenhuma cor literal. Tudo sai de tokens.css. Quando é preciso
   translucidez usa-se `color-mix` sobre um token — nunca um rgba solto.
   ========================================================================== */

/* ==========================================================================
   1. BOTÃO
   ========================================================================== */

.al-btn,
.al-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--al-space-2);
  min-height: var(--al-control-h);
  padding: var(--al-space-3) var(--al-space-6);
  border: 1px solid transparent;
  border-radius: var(--al-radius);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-sm);
  font-weight: var(--al-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--al-dur-1) var(--al-ease),
              border-color var(--al-dur-1) var(--al-ease),
              color var(--al-dur-1) var(--al-ease),
              transform var(--al-dur-1) var(--al-ease);
}
.al-btn:active,
.al-botao:active { transform: translateY(1px); }

.al-btn--primario,
.al-botao--primario {
  background: var(--al-brand);
  border-color: var(--al-brand);
  color: var(--al-text-invert);
}
.al-btn--primario:hover,
.al-botao--primario:hover {
  background: var(--al-btn-bg-hover);
  border-color: var(--al-btn-bg-hover);
  color: var(--al-text-invert);
}

.al-btn--secundario,
.al-botao--secundario {
  background: var(--al-bg-elev);
  border-color: var(--al-border-strong);
  color: var(--al-text);
}
.al-btn--secundario:hover,
.al-botao--secundario:hover { border-color: var(--al-text); color: var(--al-text); }

.al-btn--fantasma,
.al-botao--discreto { background: none; border-color: transparent; color: var(--al-text-soft); }
.al-btn--fantasma:hover,
.al-botao--discreto:hover { background: var(--al-bg-sunken); color: var(--al-text); }

.al-btn--inverso,
.al-botao--inverso {
  background: var(--al-on-band);
  border-color: var(--al-on-band);
  color: var(--al-ink-900);
}
.al-btn--inverso:hover,
.al-botao--inverso:hover { background: var(--al-brand-200); border-color: var(--al-brand-200); }

.al-btn--largo,
.al-botao--largo { width: 100%; }

/* Em tela estreita um rótulo longo ("Ver todas as métricas com benchmark") não
   cabe numa linha. Deixar o texto embrulhar é melhor do que arrastar a página
   para fora da tela — o `nowrap` só faz sentido enquanto há largura. */
@media (max-width: 400px) {
  .al-btn,
  .al-botao {
    white-space: normal;
    text-wrap: balance;
    padding-inline: var(--al-space-4);
  }
}
.al-btn--pequeno,
.al-botao--pequeno { min-height: var(--al-control-h-sm); padding-inline: var(--al-space-4); font-size: var(--al-text-xs); }

.al-btn[disabled],
.al-btn[aria-disabled="true"],
.al-botao[disabled],
.al-botao[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}
.al-btn[aria-busy="true"],
.al-botao[aria-busy="true"] { position: relative; color: transparent; }
.al-btn[aria-busy="true"]::after,
.al-botao[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1rem; height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--al-text-invert);
  animation: al-girar 700ms linear infinite;
}
@keyframes al-girar { to { transform: rotate(360deg); } }

/* ==========================================================================
   2. ETIQUETA — o rótulo de tipo, presente em cartão, busca e recomendação
   ========================================================================== */

.al-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-1);
  padding: 0.15em 0.5em;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-sm);
  background: var(--al-bg-elev);
  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);
  white-space: nowrap;
}
.al-etiqueta--problema  { background: var(--al-stop-wash); border-color: var(--al-stop-wash); color: var(--al-on-stop-wash); }
.al-etiqueta--metrica   { background: var(--al-data-wash); border-color: var(--al-data-wash); color: var(--al-on-data-wash); }
.al-etiqueta--ferramenta,
.al-etiqueta--playbook  { background: var(--al-brand-wash); border-color: var(--al-brand-wash); color: var(--al-on-brand-wash); }

.al-etiqueta--gravidade-critica,
.al-etiqueta--gravidade-alta { background: var(--al-stop-wash); border-color: var(--al-stop-wash); color: var(--al-on-stop-wash); }
.al-etiqueta--gravidade-media { background: var(--al-warn-wash); border-color: var(--al-warn-wash); color: var(--al-on-warn-wash); }
.al-etiqueta--gravidade-baixa { background: var(--al-bg-sunken); }

/* ==========================================================================
   3. CAMPO DE FORMULÁRIO
   ========================================================================== */

.al-campo { display: block; margin-bottom: var(--al-space-5); }

.al-campo__rotulo {
  display: block;
  margin-bottom: var(--al-space-2);
  font-size: var(--al-text-sm);
  font-weight: var(--al-weight-semibold);
  color: var(--al-text);
}
.al-campo__obrigatorio { color: var(--al-on-stop-wash); }

.al-campo__caixa { position: relative; display: flex; align-items: stretch; }
/* V3 (§62): a unidade visível no campo — «R$» à esquerda da moeda, «%» à
   direita da percentagem — dentro da mesma caixa, com a mesma borda. */
.al-campo__caixa--afixo { border: 1px solid var(--al-border-input); border-radius: var(--al-radius); background: var(--al-bg-elev); }
.al-campo__caixa--afixo .al-campo__controlo { border: 0; border-radius: 0; background: transparent; }
.al-campo__caixa--afixo:focus-within { box-shadow: var(--al-shadow-focus); border-color: var(--al-brand); }
.al-campo__caixa--afixo .al-campo__controlo:focus-visible { box-shadow: none; }
.al-campo__afixo { display: flex; align-items: center; padding: 0 var(--al-space-3); font-size: var(--al-text-sm); color: var(--al-text-soft); user-select: none; }
.al-campo__afixo--prefixo { border-right: 1px solid var(--al-border); }
.al-campo__afixo--sufixo { border-left: 1px solid var(--al-border); }
.al-calculadora__formulas { margin-top: var(--al-space-6); font-size: var(--al-text-sm); color: var(--al-text-soft); }
.al-calculadora__formulas summary { cursor: pointer; font-weight: 600; color: var(--al-text); }
.al-calculadora__formulas ul { margin: var(--al-space-3) 0 0; padding-left: var(--al-space-5); display: grid; gap: var(--al-space-2); }
.al-calculadora__formulas code { font-size: var(--al-text-xs); white-space: normal; }

.al-campo__controlo {
  width: 100%;
  min-height: var(--al-control-h);
  padding: var(--al-space-3) var(--al-space-4);
  background: var(--al-bg-elev);
  border: 1px solid var(--al-border-input);
  border-radius: var(--al-radius);
  font-size: var(--al-text-base);
  font-variant-numeric: tabular-nums;
  color: var(--al-text);
  transition: border-color var(--al-dur-1) var(--al-ease), box-shadow var(--al-dur-1) var(--al-ease);
}
.al-campo__controlo:hover { border-color: var(--al-text-soft); }
.al-campo__controlo:focus-visible {
  outline: none;
  border-color: var(--al-brand);
  box-shadow: var(--al-shadow-focus);
}
.al-campo__controlo:disabled {
  background: var(--al-bg-sunken);
  color: var(--al-text-faint);
  cursor: not-allowed;
}

.al-campo--unidade .al-campo__prefixo,
.al-campo--unidade .al-campo__sufixo {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--al-space-3);
  background: var(--al-bg-sunken);
  border: 1px solid var(--al-border-input);
  font-size: var(--al-text-sm);
  font-weight: var(--al-weight-medium);
  color: var(--al-text-soft);
}
.al-campo--unidade .al-campo__prefixo {
  border-right: 0;
  border-radius: var(--al-radius) 0 0 var(--al-radius);
}
.al-campo--unidade .al-campo__sufixo {
  border-left: 0;
  border-radius: 0 var(--al-radius) var(--al-radius) 0;
}
.al-campo--unidade .al-campo__prefixo + .al-campo__controlo { border-radius: 0 var(--al-radius) var(--al-radius) 0; }
.al-campo--unidade .al-campo__controlo:has(+ .al-campo__sufixo) { border-radius: var(--al-radius) 0 0 var(--al-radius); }

.al-campo__ajuda {
  margin-top: var(--al-space-2);
  font-size: var(--al-text-xs);
  color: var(--al-text-faint);
}

/* Campo que a escolha actual descarta.
   Não se esconde — sem JavaScript o formulário volta inteiro, e um campo que
   aparece e desaparece consoante o <select> é pior do que um campo com uma nota.
   Fica visível, esbatido, e diz porquê. */
.al-campo--nao-usado .al-campo__rotulo,
.al-campo--nao-usado .al-campo__ajuda { opacity: 0.62; }
.al-campo--nao-usado .al-campo__controlo { opacity: 0.62; }

.al-campo__nao-usado {
  margin-top: var(--al-space-1);
  font-size: var(--al-text-xs);
  font-weight: var(--al-weight-medium);
  color: var(--al-text-soft);
}

.al-campo__erro {
  display: flex;
  gap: var(--al-space-2);
  margin-top: var(--al-space-2);
  font-size: var(--al-text-xs);
  font-weight: var(--al-weight-medium);
  color: var(--al-on-danger-wash);
}
.al-campo__erro::before { content: "!"; font-weight: var(--al-weight-bold); }

.al-campo--erro .al-campo__controlo { border-color: var(--al-on-danger-wash); }
.al-campo--erro .al-campo__controlo:focus-visible {
  box-shadow: 0 0 0 3px var(--al-danger-wash);
}
.al-campo--sucesso .al-campo__controlo { border-color: var(--al-on-success-wash); }

/* ==========================================================================
   4. ESTADOS GENÉRICOS: loading, vazio, erro, sucesso
   ========================================================================== */

.al-estado {
  padding: var(--al-space-6);
  border: 1px dashed var(--al-border-strong);
  border-radius: var(--al-radius);
  text-align: left;
}
.al-estado__texto { color: var(--al-text-soft); font-size: var(--al-text-sm); }
.al-estado__acao { margin-top: var(--al-space-4); }

.al-estado--vazio { background: var(--al-bg-sunken); }
.al-estado--erro {
  border-style: solid;
  border-color: var(--al-on-danger-wash);
  background: var(--al-danger-wash);
}
.al-estado--erro .al-estado__texto { color: var(--al-on-danger-wash); }
.al-estado--sucesso {
  border-style: solid;
  border-color: var(--al-on-success-wash);
  background: var(--al-success-wash);
}
.al-estado--sucesso .al-estado__texto { color: var(--al-on-success-wash); }

.al-estado--loading {
  display: flex;
  align-items: center;
  gap: var(--al-space-3);
  padding: var(--al-space-4) 0;
  border: 0;
  color: var(--al-text-faint);
  font-size: var(--al-text-sm);
}
.al-estado__pulso {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--al-brand);
  animation: al-pulsar 1.1s var(--al-ease) infinite;
}
@keyframes al-pulsar {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* Esqueleto de carregamento: forma do conteúdo, nunca um spinner sozinho. */
.al-esqueleto {
  display: block;
  background: linear-gradient(90deg, var(--al-bg-sunken), var(--al-surface-3), var(--al-bg-sunken));
  background-size: 200% 100%;
  border-radius: var(--al-radius-sm);
  animation: al-brilho 1.4s linear infinite;
}
.al-esqueleto--linha { height: 0.75rem; width: 60%; margin-bottom: var(--al-space-3); }
.al-esqueleto--titulo { height: 1.5rem; width: 90%; margin-bottom: var(--al-space-3); }
.al-esqueleto--numero { height: 2.5rem; width: 40%; margin-bottom: var(--al-space-3); }
.al-esqueleto--imagem { height: 0; padding-bottom: 62%; }
.al-esqueleto--cartao { height: 5.5rem; margin-bottom: var(--al-space-3); }
@keyframes al-brilho { to { background-position: -200% 0; } }

/* ==========================================================================
   5. CARD — uma anatomia, oito variantes
   ========================================================================== */

.al-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--al-bg-elev);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  overflow: hidden;
  transition: border-color var(--al-dur-2) var(--al-ease),
              box-shadow var(--al-dur-2) var(--al-ease),
              transform var(--al-dur-2) var(--al-ease);
}

/* O fio de acento à esquerda é o que distingue as variantes. É 3px de borda,
   não um ícone e não uma cor de fundo. */
.al-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--al-acento, transparent);
}

.al-card:hover {
  border-color: var(--al-border-strong);
  box-shadow: var(--al-shadow-2);
  transform: translateY(-2px);
}
.al-card:has(.al-card__link:focus-visible) {
  border-color: var(--al-brand);
  box-shadow: var(--al-shadow-2);
}
.al-card:has(.al-card__link:active) { transform: translateY(0); }

.al-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--al-bg-sunken); }
.al-card__img { width: 100%; height: 100%; object-fit: cover; }

.al-card__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
  flex: 1 1 auto;
  padding: var(--al-space-5) var(--al-space-5) var(--al-space-5) var(--al-space-6);
}

.al-card__sobrelinha { display: flex; flex-wrap: wrap; gap: var(--al-space-2); align-items: baseline; }
.al-card__area { color: var(--al-text-faint); }
.al-card__area::before { content: "·"; margin-right: var(--al-space-2); }

.al-card__titulo {
  font-size: var(--al-text-xl);
  line-height: var(--al-leading-snug);
  /* Conteúdo longo: três linhas e corta. Nunca empurra o cartão vizinho. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* O link cobre o cartão inteiro, mas continua sendo um link com texto. */
.al-card__link { color: inherit; text-decoration: none; }
.al-card__link::after { content: ""; position: absolute; inset: 0; }
.al-card__link:hover { color: var(--al-link-hover); }

.al-card__resumo {
  font-size: var(--al-text-sm);
  line-height: var(--al-leading-normal);
  color: var(--al-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.al-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-1) var(--al-space-4);
  margin-top: auto;
  padding-top: var(--al-space-3);
  border-top: 1px solid var(--al-border);
  font-size: var(--al-text-xs);
  color: var(--al-text-faint);
}

/* --- As oito variantes ---------------------------------------------------
   Cada uma muda: o acento, o tratamento do título e o que domina o cartão. */

.al-card--problema {
  --al-acento: var(--al-stop);
  background: var(--al-bg-elev);
}
.al-card--problema .al-card__titulo {
  font-family: var(--al-font-serif);
  font-style: italic;   /* é a frase do empresário, dita por ele */
  font-weight: var(--al-weight-regular);
}
.al-card--problema .al-card__sobrelinha { color: var(--al-on-stop-wash); }

.al-card--pergunta { --al-acento: var(--al-info); }
.al-card--pergunta .al-card__titulo { font-size: var(--al-text-lg); }

.al-card--playbook { --al-acento: var(--al-brand); }
.al-card--playbook .al-card__meta { font-variant-numeric: tabular-nums; }

.al-card--ferramenta {
  --al-acento: var(--al-brand-600);
  background: var(--al-bg-elev);
}
.al-card--ferramenta .al-card__titulo { font-family: var(--al-font-sans); font-size: var(--al-text-lg); letter-spacing: var(--al-tracking-normal); }

.al-card--prompt { --al-acento: var(--al-ink-600); }
.al-card--prompt .al-card__titulo { font-family: var(--al-font-mono); font-size: var(--al-text-base); letter-spacing: var(--al-tracking-normal); }

.al-card--metrica { --al-acento: var(--al-data); }
.al-card--metrica .al-card__titulo { font-family: var(--al-font-sans); font-variant-numeric: tabular-nums; }

.al-card--conceito { --al-acento: var(--al-ink-300); }
.al-card--conceito .al-card__corpo { background: var(--al-bg-sunken); }

.al-card--artigo { --al-acento: var(--al-ink-200); }

/* Destaque: o cartão que lidera a secção. Ocupa duas colunas e muda de escala,
   em vez de repetir o mesmo cartão dezoito vezes. */
.al-card--destaque { grid-column: span 2; }
.al-card--destaque .al-card__titulo { font-size: var(--al-text-3xl); -webkit-line-clamp: 4; line-clamp: 4; }
.al-card--destaque .al-card__corpo { padding: var(--al-space-8); gap: var(--al-space-4); }
.al-card--destaque .al-card__resumo { font-size: var(--al-text-base); -webkit-line-clamp: 4; line-clamp: 4; }
@media (max-width: 899px) { .al-card--destaque { grid-column: 1 / -1; } }

.al-card--compacto .al-card__corpo { padding: var(--al-space-4) var(--al-space-4) var(--al-space-4) var(--al-space-5); gap: var(--al-space-2); }
.al-card--compacto .al-card__titulo { font-size: var(--al-text-base); }
.al-card--compacto .al-card__resumo { display: none; }

/* Imagem ausente: o cartão assume composição tipográfica, com a sobrelinha
   maior e um fio superior. Não há placeholder cinzento. */
.al-card--sem-imagem .al-card__corpo { padding-top: var(--al-space-6); }
.al-card--sem-imagem .al-card__sobrelinha {
  padding-bottom: var(--al-space-3);
  border-bottom: 1px solid var(--al-border);
}

.al-card--loading { pointer-events: none; }
.al-card--loading .al-card__corpo { padding: var(--al-space-5); }

/* ==========================================================================
   6. RESPOSTA CURTA
   ========================================================================== */

.al-resposta-curta {
  padding: var(--al-space-6) var(--al-space-6) var(--al-space-6) var(--al-space-8);
  background: var(--al-brand-wash);
  border-left: 3px solid var(--al-brand);
  border-radius: 0 var(--al-radius) var(--al-radius) 0;
}
.al-resposta-curta__rotulo { color: var(--al-on-brand-wash); margin-bottom: var(--al-space-3); }
.al-resposta-curta__texto {
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  line-height: var(--al-leading-relaxed);
  color: var(--al-text);
}
.al-resposta-curta__fonte {
  margin-top: var(--al-space-4);
  font-size: var(--al-text-xs);
  color: var(--al-text-soft);
}

/* ==========================================================================
   7. SUMÁRIO (TOC)
   ========================================================================== */

.al-sumario { font-family: var(--al-font-sans); }

/* O título do sumário. Quando o JS o transforma em botão, o <h2> deixa de ter
   estilo próprio e passa tudo ao <button> que ficou dentro dele. */
.al-sumario__titulo {
  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;
  color: var(--al-text-faint);
  padding-block: var(--al-space-3);
  border-bottom: 1px solid var(--al-border);
}
.al-sumario__titulo--interativo {
  padding: 0;
  border-bottom: 0;
}

.al-sumario__alternar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-3);
  width: 100%;
  min-height: var(--al-touch);
  padding: var(--al-space-3) 0;
  border-bottom: 1px solid var(--al-border);
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
}
/* Inerte no desktop (o JS desabilita), mas nunca com cara de desabilitado:
   ali ele é só o rótulo da coluna. */
.al-sumario__alternar:disabled { opacity: 1; cursor: default; }
.al-sumario__alternar:disabled::after { display: none; }
.al-sumario__conta {
  font-size: var(--al-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--al-text-faint);
}
.al-sumario__alternar::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  color: var(--al-text-faint);
  transition: transform var(--al-dur-2) var(--al-ease);
}
.al-sumario__alternar[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }

.al-sumario__lista { margin-top: var(--al-space-4); }
.al-sumario__item { margin-bottom: var(--al-space-1); }
.al-sumario__item--n3 { padding-left: var(--al-space-4); }

.al-sumario__link {
  display: block;
  padding: var(--al-space-2) var(--al-space-3);
  border-left: 2px solid var(--al-border);
  font-size: var(--al-text-sm);
  line-height: var(--al-leading-snug);
  color: var(--al-text-soft);
  text-decoration: none;
  transition: border-color var(--al-dur-1) var(--al-ease), color var(--al-dur-1) var(--al-ease);
}
.al-sumario__link:hover { color: var(--al-text); border-color: var(--al-text-faint); }
.al-sumario__link[aria-current="true"] {
  color: var(--al-text);
  font-weight: var(--al-weight-semibold);
  border-color: var(--al-brand);
}

/* No telemóvel e no tablet o sumário recolhe. No desktop está sempre aberto e
   o botão vira apenas rótulo. */
@media (max-width: 999px) {
  /* O recolher é feito com o atributo `hidden` pelo sumario.js — some do
     layout e da árvore de acessibilidade ao mesmo tempo. Aqui só o sticky. */
  .al-sumario {
    position: sticky;
    top: 60px;
    z-index: var(--al-z-sticky);
    background: var(--al-bg);
    padding-block: var(--al-space-2);
  }
}
@media (min-width: 1000px) {
  .al-sumario__alternar { pointer-events: none; border-bottom: 2px solid var(--al-text); }
  .al-sumario__alternar::after { display: none; }
  .al-sumario__titulo { border-bottom: 2px solid var(--al-text); }
  .al-sumario__titulo--interativo { border-bottom: 0; }
}

/* ==========================================================================
   8. CALCULADORA
   ========================================================================== */

.al-calculadora {
  display: grid;
  gap: 0;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-elev);
  overflow: hidden;
}
@media (min-width: 800px) {
  .al-calculadora { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
}

.al-calculadora__entradas { padding: var(--al-space-8); }
.al-calculadora__entradas > .al-sobrelinha { margin-bottom: var(--al-space-6); }

.al-calculadora__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-3) var(--al-space-5);
  margin-top: var(--al-space-6);
}

/* --- A fita do número ---------------------------------------------------
   No desktop o painel de resultado está ao lado das entradas e a fita seria
   redundante: fica escondida. No telemóvel é ela que resolve o problema —
   medido, o botão caía a 1.301 px e o número a 1.469 px numa janela de 813,
   duas telas abaixo de quem estava a digitar. */
.al-calculadora__fita { display: none; }
.al-calculadora__fita-rotulo {
  display: block;
  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);
}
.al-calculadora__fita-valor {
  display: block;
  /* A fita repete o resultado enquanto se rola: mesma família, mesma razão. */
  font-family: var(--al-font-serif);
  font-size: var(--al-text-2xl);
  font-weight: var(--al-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--al-tracking-tight);
  line-height: 1.1;
  color: var(--al-on-data-wash);
}

@media (max-width: 799px) {
  /* A barra segue o polegar. Fundo próprio e sombra por cima, senão o texto
     dos campos passa por baixo dela ao rolar. */
  .al-calculadora__acoes {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-inline: calc(var(--al-space-8) * -1);
    padding: var(--al-space-4) var(--al-space-8);
    background: var(--al-bg-elev);
    /* A sombra vem do contrato, não escrita à mão: `--al-shadow-2` é a mesma
       elevação do resto do produto, e o portão de cor literal — com razão —
       não deixa passar um rgb() solto aqui. */
    box-shadow: 0 -1px 0 var(--al-border), var(--al-shadow-2);
  }
  .al-calculadora__fita { display: block; margin: 0; }
  .al-calculadora__acoes .al-botao { flex: 0 0 auto; }
}

.al-calculadora__resultado {
  padding: var(--al-space-8);
  background: var(--al-bg-sunken);
  border-top: 1px solid var(--al-border);
}
@media (min-width: 800px) {
  .al-calculadora__resultado { border-top: 0; border-left: 1px solid var(--al-border); }
}

.al-calculadora__saida + .al-calculadora__saida {
  margin-top: var(--al-space-5);
  padding-top: var(--al-space-5);
  border-top: 1px solid var(--al-border);
}
.al-calculadora__saida-rotulo {
  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);
}
/* O RESULTADO É A MANCHETE DA PÁGINA, e passa a ser composto como tal.
 *
 * Estava em Inter 52 px, dourado sobre painel cinzento escuro, com o rótulo em
 * maiúsculas de 11 px. É a assinatura de um dashboard — e a auditoria visual
 * apontou exactamente isto como o sítio onde o produto se contradiz: o momento
 * de FERRAMENTA é onde ele devia provar que não é um blog, e é onde mais se
 * parece com software genérico.
 *
 * A identidade declarada é editorial premium mais ferramenta de negócio. Numa
 * peça editorial, o número que responde à pergunta do título é uma manchete —
 * e as manchetes deste tema são serifa. Muda a família, mantém-se tudo o resto:
 * os algarismos continuam tabulares (`base.css`), a cor continua a do token, o
 * tamanho continua o da escala.
 *
 * É uma linha, e é reversível: trocar `--al-font-serif` por `--al-font-sans`
 * devolve o estado anterior. */
.al-calculadora__saida-valor {
  margin-top: var(--al-space-1);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-2xl);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-tight);
  color: var(--al-text);
}
.al-calculadora__saida--destaque .al-calculadora__saida-valor {
  font-size: var(--al-text-4xl);
  color: var(--al-on-data-wash);
}
.al-calculadora__saida-nota { margin-top: var(--al-space-2); font-size: var(--al-text-xs); color: var(--al-text-soft); }

/* Antes de haver conta, o painel mostra os rótulos e um traço. O traço não
   pode ter o corpo do número: em 4xl ele lê-se como barra de censura. */
.al-calculadora__resultado[data-al-estado="vazio"] .al-calculadora__saida-valor,
.al-calculadora__resultado[data-al-estado="vazio"] .al-calculadora__saida--destaque .al-calculadora__saida-valor {
  font-size: var(--al-text-xl);
  color: var(--al-text-faint);
}
.al-calculadora__espera {
  margin: 0 0 var(--al-space-6);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}

.al-calculadora__leitura {
  margin-top: var(--al-space-6);
  padding: var(--al-space-4) var(--al-space-5);
  border-left: 3px solid var(--al-text-faint);
  background: var(--al-bg-elev);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}
.al-calculadora__leitura--bom { border-left-color: var(--al-on-success-wash); background: var(--al-success-wash); color: var(--al-text); }
.al-calculadora__leitura--atencao { border-left-color: var(--al-on-warn-wash); background: var(--al-warn-wash); color: var(--al-text); }
.al-calculadora__leitura--ruim { border-left-color: var(--al-on-stop-wash); background: var(--al-stop-wash); color: var(--al-text); }
.al-calculadora__leitura-acao { margin-top: var(--al-space-3); }

/* --- Escala de leitura (V3, dataviz) ------------------------------------
   As faixas bom/atenção/ruim como segmentos de um trilho, e um marcador onde
   o número caiu. O servidor desenha; o JS move `--al-pos`. Cor + rótulo em
   cada segmento (nunca só cor); o `aria-label` da figura diz tudo por extenso. */
.al-escala { margin: var(--al-space-6) 0 0; position: relative; padding-top: var(--al-space-4); }
.al-calculadora__resultado .al-escala { padding-inline: 0; }
.al-escala__trilho { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--al-bg-sunken); }
/* Os rótulos vivem numa linha própria, fora das faixas coloridas: o contraste
   mede-se contra o fundo da página, não contra a lavagem do segmento. */
.al-escala__rotulos { display: flex; margin-top: var(--al-space-1); }
.al-escala__faixa { position: relative; display: block; height: 100%; }
.al-escala__faixa--bom { background: var(--al-success); opacity: .55; }
.al-escala__faixa--atencao { background: var(--al-warn); opacity: .55; }
.al-escala__faixa--ruim { background: var(--al-stop); opacity: .55; }
.al-escala__rotulo { display: block; font-size: var(--al-text-xs); color: var(--al-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-escala__marcador { position: absolute; top: calc(var(--al-space-4) - 5px); left: var(--al-pos, 0%); width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; background: var(--al-text); box-shadow: 0 0 0 2px var(--al-bg); transition: left 160ms ease-out; }
.al-escala[data-nivel=""] .al-escala__marcador { display: none; }
.al-escala__legenda { margin: var(--al-space-2) 0 0; font-size: var(--al-text-xs); color: var(--al-text-faint); }
@media (prefers-reduced-motion: reduce) { .al-escala__marcador { transition: none; } }

/* --- Medidor de confiança (V3, dataviz) ---------------------------------
   Um trilho em três bandas (baixa < 40, média < 70, alta) e o marcador no
   valor. É a mesma gramática da escala de leitura, para o leitor aprender uma
   forma só. Vive na faixa escura do resultado e na retomada do cockpit. */
.al-medidor--confianca { color: inherit; }
.al-medidor { position: relative; margin: var(--al-space-3) 0 var(--al-space-3); padding-top: var(--al-space-3); max-width: 28rem; }
.al-medidor__trilho { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.al-medidor__banda { display: block; height: 100%; opacity: .85; }
.al-medidor__banda--baixa { width: 40%; background: var(--al-stop-400); }
.al-medidor__banda--media { width: 30%; background: var(--al-warn); }
.al-medidor__banda--alta { width: 30%; background: var(--al-success); }
.al-medidor__marcador { position: absolute; top: calc(var(--al-space-3) - 4px); left: var(--al-pos, 0%); width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: currentColor; }
.al-medidor__escala { display: flex; justify-content: space-between; margin: var(--al-space-1) 0 0; font-size: var(--al-text-xs); opacity: .8; }

/* --- Linha de evolução (V3, dataviz) --------------------------------------
   SVG embutido, sem biblioteca: as medições do mesmo diagnóstico, por data. */
.al-evolucao { margin: var(--al-space-4) 0 0; max-width: 32rem; }
.al-evolucao svg { width: 100%; height: auto; display: block; overflow: visible; }
.al-evolucao__linha { fill: none; stroke: var(--al-brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.al-evolucao__ponto { fill: var(--al-bg); stroke: var(--al-brand); stroke-width: 2; }
.al-evolucao__valor { font: 600 11px var(--al-font-sans); fill: var(--al-text); }
.al-evolucao__data { font: 10px var(--al-font-sans); fill: var(--al-text-faint); }
.al-evolucao__eixo { stroke: var(--al-border); stroke-width: 1; }

.al-calculadora__avisos {
  margin-top: var(--al-space-6);
  font-size: var(--al-text-xs);
  color: var(--al-text-soft);
}
.al-calculadora__avisos summary { min-height: var(--al-touch); display: flex; align-items: center; font-weight: var(--al-weight-semibold); }
.al-calculadora__avisos li { margin-top: var(--al-space-2); padding-left: var(--al-space-4); position: relative; }
.al-calculadora__avisos li::before { content: "—"; position: absolute; left: 0; color: var(--al-text-faint); }

.al-calculadora--loading, .al-calculadora--erro, .al-calculadora--vazio { display: block; padding: var(--al-space-8); }

/* ==========================================================================
   9. MINI-QUIZ
   ========================================================================== */

.al-quiz {
  padding: var(--al-space-8);
  background: var(--al-bg-elev);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-lg);
}
/* --- Abertura: só existe na primeira pergunta. Depois dela o visitante já
   sabe onde está e o espaço passa a ser da pergunta. --------------------- */
.al-quiz__abertura {
  margin-bottom: var(--al-space-6);
  padding-bottom: var(--al-space-6);
  border-bottom: 1px solid var(--al-border);
}
.al-quiz__titulo {
  margin: 0 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-tight);
  letter-spacing: var(--al-tracking-tight);
}
.al-quiz__subtitulo {
  margin: 0 0 var(--al-space-3);
  color: var(--al-text-soft);
}
.al-quiz__intro {
  max-width: var(--al-measure);
  margin: 0;
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}

/* --- Progresso: contador antes da barra. O número é a informação; a barra
   é o reforço. Ao contrário, quem usa leitor de tela ouve um ruído antes
   de saber onde está. ---------------------------------------------------- */
.al-quiz__progresso {
  display: flex;
  align-items: center;
  gap: var(--al-space-4);
}
.al-quiz__contador {
  flex: 0 0 auto;
  margin: 0;
  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-quiz__barra {
  flex: 1 1 auto;
  width: 100%;
  height: 2px;
  border: 0;
  border-radius: var(--al-radius-pill);
  background: var(--al-border);
  color: var(--al-brand);
  appearance: none;
  overflow: hidden;
}
.al-quiz__barra::-webkit-progress-bar { background: var(--al-border); }
.al-quiz__barra::-webkit-progress-value {
  background: var(--al-brand);
  transition: inline-size var(--al-dur-3) var(--al-ease-out);
}
.al-quiz__barra::-moz-progress-bar { background: var(--al-brand); }

.al-quiz__form { margin: 0; }

.al-quiz__pergunta {
  display: block;
  margin-block: var(--al-space-6) 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);
  letter-spacing: var(--al-tracking-tight);
  text-wrap: balance;
}
.al-quiz__ajuda { margin-bottom: var(--al-space-5); font-size: var(--al-text-sm); color: var(--al-text-soft); }

.al-quiz__opcoes { display: grid; gap: var(--al-space-2); }

.al-quiz__opcao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--al-space-3);
  align-items: start;
  min-height: var(--al-touch);
  padding: var(--al-space-4) var(--al-space-5);
  border: 1px solid var(--al-border-input);
  border-radius: var(--al-radius);
  cursor: pointer;
  transition: border-color var(--al-dur-1) var(--al-ease), background-color var(--al-dur-1) var(--al-ease);
}
.al-quiz__opcao:hover { border-color: var(--al-text-soft); background: var(--al-bg-sunken); }
.al-quiz__opcao:has(:focus-visible) { outline: 2px solid var(--al-brand); outline-offset: 2px; }
.al-quiz__opcao:has(:checked) { border-color: var(--al-brand); background: var(--al-brand-wash); }
.al-quiz__opcao:active { transform: translateY(1px); }

.al-quiz__radio { margin-top: 0.15rem; }
.al-quiz__opcao-texto { font-size: var(--al-text-base); line-height: var(--al-leading-snug); }
.al-quiz__opcao-evidencia {
  grid-column: 2;
  font-size: var(--al-text-xs);
  color: var(--al-text-faint);
}

.al-quiz__acoes {
  display: flex;
  gap: var(--al-space-3);
  justify-content: space-between;
  margin-top: var(--al-space-8);
}
.al-quiz__promessa { margin-top: var(--al-space-4); font-size: var(--al-text-xs); color: var(--al-text-faint); text-align: center; }

/* Uma pergunta por tela no telemóvel: o quiz ocupa a altura da janela e as
   ações ficam ao alcance do polegar. */
@media (max-width: 699px) {
  .al-quiz {
    display: flex;
    flex-direction: column;
    min-height: 78svh;
    padding: var(--al-space-5);
    border-radius: var(--al-radius);
  }
  .al-quiz__form { display: flex; flex-direction: column; flex: 1 1 auto; }
  .al-quiz__campo { flex: 1 1 auto; }
  .al-quiz__pergunta { font-size: var(--al-text-xl); }
  /* Fundo próprio: uma barra pegajosa transparente deixa o texto da pergunta
     passar por baixo dos botões e o ecrã fica ilegível ao rolar. */
  .al-quiz__acoes {
    position: sticky;
    bottom: 0;
    margin-inline: calc(var(--al-space-5) * -1);
    padding: var(--al-space-4) var(--al-space-5) var(--al-space-2);
    background: var(--al-bg-elev);
    box-shadow: 0 -1px 0 var(--al-border);
  }
  .al-quiz__acoes .al-botao { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   10. CHECKLIST
   ========================================================================== */

.al-checklist {
  padding: var(--al-space-6);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  background: var(--al-bg-elev);
}
.al-checklist__titulo { font-size: var(--al-text-lg); margin-bottom: var(--al-space-4); }

.al-checklist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--al-space-3);
  align-items: start;
  padding-block: var(--al-space-3);
  border-bottom: 1px solid var(--al-border);
}
.al-checklist__item:last-child { border-bottom: 0; }
.al-checklist__caixa { margin-top: 0.2rem; }
.al-checklist__rotulo { cursor: pointer; }
.al-checklist__texto { display: block; line-height: var(--al-leading-snug); }
.al-checklist__nota { display: block; margin-top: var(--al-space-1); font-size: var(--al-text-xs); color: var(--al-text-faint); }

.al-checklist__caixa:checked + .al-checklist__rotulo .al-checklist__texto {
  color: var(--al-text-faint);
  text-decoration: line-through;
  text-decoration-color: var(--al-text-faint);
}
.al-checklist__item:has(:focus-visible) { outline: 2px solid var(--al-brand); outline-offset: 2px; }

.al-checklist__rodape {
  margin-top: var(--al-space-4);
  padding-top: var(--al-space-3);
  border-top: 2px solid var(--al-text);
  font-size: var(--al-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--al-text-soft);
}

/* ==========================================================================
   11. PROMPT CARD
   ========================================================================== */

/* O cartão é o herói da página de prompt: o prompt é o produto e o cartão é a
   embalagem dele. Por isso tem cabeçalho com peso, ficha em duas colunas, o
   bloco de código em superfície recuada e as variáveis como lista de chips —
   e não uma pilha de rótulo e parágrafo.

   As classes abaixo são as que o CORE emite (`__cabecalho`, `__bloco`,
   `.al-rotulo`, `.al-texto`, `__variavel`). Estilizar as do recurso do tema e
   não estas era o motivo de o cartão não parecer um cartão. */

.al-prompt-card {
  border: 1px solid var(--al-border-strong);
  border-radius: var(--al-radius-lg);
  background: var(--al-bg-elev);
  box-shadow: var(--al-shadow-1);
  overflow: hidden;
}

/* --- Cabeçalho: título + copiar ---------------------------------------- */
.al-prompt-card__cabecalho,
.al-prompt-card__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-4);
  padding: var(--al-space-5) var(--al-space-6);
  background: var(--al-bg-elev);
  border-bottom: 2px solid var(--al-text);
}
.al-prompt-card__titulo {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-base);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-normal);
  line-height: var(--al-leading-snug);
  margin: 0;
  flex: 1 1 16rem;
  min-width: 0;
}

/* --- Ficha: rótulo à esquerda, texto à direita ------------------------- */
.al-prompt-card__bloco {
  display: grid;
  gap: var(--al-space-2) var(--al-space-6);
  padding: var(--al-space-5) var(--al-space-6);
  border-bottom: 1px solid var(--al-border);
}
@media (min-width: 700px) {
  .al-prompt-card__bloco {
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: baseline;
  }
}
.al-prompt-card__bloco .al-rotulo {
  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;
  color: var(--al-text-faint);
}
.al-prompt-card__bloco .al-texto {
  margin: 0;
  font-size: var(--al-text-sm);
  line-height: var(--al-leading-normal);
  color: var(--al-text-soft);
  max-width: 62ch;
}

/* O bloco de limites é o único com cor: é a ressalva honesta, e ela tem de
   ser vista antes de a pessoa copiar. */
.al-prompt-card__bloco:last-of-type .al-rotulo { color: var(--al-on-warn-wash); }
.al-prompt-card__bloco:last-of-type { background: var(--al-warn-wash); }
.al-prompt-card__bloco:last-of-type .al-texto { color: var(--al-text); }

/* --- O prompt: superfície recuada, é onde o olho tem de cair ----------- */
/*
   `__corpo` é o invólucro do `<pre>` na versão do tema do cartão — a que o
   guia de estilo exercita, com dados de exemplo e sem publicação por trás.
   Ficou sem regra nenhuma desde sempre e só apareceu quando o portão de classes
   órfãs passou a ver esta página: o `<pre>` traz o seu próprio recuo, então o
   invólucro só precisa de não introduzir espaço nem quebrar o arredondamento.
*/
.al-prompt-card__corpo {
  display: block;
  min-width: 0;
}
.al-prompt-card__texto {
  margin: 0;
  padding: var(--al-space-6);
  background: var(--al-bg-sunken);
  border-bottom: 1px solid var(--al-border);
  font-family: var(--al-font-mono);
  font-size: var(--al-text-sm);
  line-height: var(--al-leading-relaxed);
  white-space: pre-wrap;
  word-break: break-word;
  /* Conteúdo longo: cresce até 32rem e depois rola sozinho. */
  max-height: 32rem;
  overflow: auto;
  overscroll-behavior: contain;
}
.al-prompt-card__texto:focus-visible { outline-offset: -2px; }

/* As variáveis realçadas dentro do prompt. */
.al-prompt-card__var,
.al-prompt-card__texto mark {
  background: var(--al-data-wash);
  color: var(--al-on-data-wash);
  font-weight: var(--al-weight-semibold);
  border-radius: var(--al-radius-sm);
  padding: 0.05em 0.2em;
}

/* --- Variáveis: lista de chips, não tabela ------------------------------ */
.al-prompt-card__variaveis {
  padding: var(--al-space-5) var(--al-space-6);
  font-size: var(--al-text-sm);
}
.al-prompt-card__variaveis > .al-rotulo {
  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);
}
.al-prompt-card__variaveis ul { display: grid; gap: var(--al-space-3); }
.al-prompt-card__variavel {
  display: grid;
  gap: var(--al-space-1) var(--al-space-4);
  padding-bottom: var(--al-space-3);
  border-bottom: 1px solid var(--al-border);
}
.al-prompt-card__variavel:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 700px) {
  .al-prompt-card__variavel { grid-template-columns: 14rem minmax(0, 1fr); align-items: baseline; }
  .al-prompt-card__variavel .al-prompt-card__exemplo { grid-column: 2; }
}
.al-prompt-card__nome {
  justify-self: start;
  padding: 0.15em 0.45em;
  background: var(--al-data-wash);
  border: 1px solid var(--al-data-wash);
  border-radius: var(--al-radius-sm);
  font-family: var(--al-font-mono);
  font-size: var(--al-text-xs);
  color: var(--al-on-data-wash);
  word-break: break-word;
}
.al-prompt-card__descricao { color: var(--al-text); }
.al-prompt-card__exemplo { color: var(--al-text-soft); font-style: italic; font-size: var(--al-text-xs); }

@media (max-width: 599px) {
  .al-prompt-card__cabecalho,
  .al-prompt-card__bloco,
  .al-prompt-card__texto,
  .al-prompt-card__variaveis { padding-inline: var(--al-space-5); }
}

/* ==========================================================================
   12. MÉTRICA CARD
   ========================================================================== */

.al-metrica-card {
  padding: var(--al-space-6);
  border: 1px solid var(--al-border);
  border-top: 3px solid var(--al-data);
  border-radius: var(--al-radius);
  background: var(--al-bg-elev);
}
.al-metrica-card__rotulo { margin-bottom: var(--al-space-2); }
.al-metrica-card__valor {
  display: flex;
  align-items: baseline;
  gap: var(--al-space-2);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-3xl);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-tight);
  line-height: 1;
}
.al-metrica-card__unidade { font-size: var(--al-text-base); font-weight: var(--al-weight-medium); color: var(--al-text-soft); }
.al-metrica-card__variacao {
  margin-top: var(--al-space-3);
  font-size: var(--al-text-sm);
  font-weight: var(--al-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.al-metrica-card__variacao--bom { color: var(--al-on-success-wash); }
.al-metrica-card__variacao--ruim { color: var(--al-on-danger-wash); }
.al-metrica-card__variacao--neutro { color: var(--al-text-soft); }
.al-metrica-card__variacao-periodo { font-weight: var(--al-weight-regular); color: var(--al-text-faint); }
.al-metrica-card__formula {
  margin-top: var(--al-space-4);
  padding-top: var(--al-space-3);
  border-top: 1px solid var(--al-border);
  font-size: var(--al-text-xs);
  color: var(--al-text-soft);
}
.al-metrica-card__formula code { background: none; border: 0; padding: 0; }

.al-metrica-card--vazio { border-top-color: var(--al-border-strong); }

/* ==========================================================================
   13. TABELA E BENCHMARK
   ========================================================================== */

.al-tabela { width: 100%; font-size: var(--al-text-sm); }
.al-tabela caption { padding-bottom: var(--al-space-3); color: var(--al-text-faint); }
.al-tabela th, .al-tabela td {
  padding: var(--al-space-3) var(--al-space-4);
  border-bottom: 1px solid var(--al-border);
  vertical-align: top;
}
.al-tabela thead th {
  position: sticky;
  top: 0;
  background: var(--al-bg-elev);
  border-bottom: 2px solid var(--al-text);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-2xs);
  letter-spacing: var(--al-tracking-caps);
  text-transform: uppercase;
  color: var(--al-text-faint);
  white-space: nowrap;
}
.al-tabela tbody tr:hover { background: var(--al-bg-sunken); }
.al-tabela tbody th { font-weight: var(--al-weight-semibold); white-space: nowrap; }
.al-tabela--dados td { text-align: right; }
.al-tabela--dados tbody th { text-align: left; }

.al-benchmark { margin: 0; }
.al-benchmark__titulo { font-family: var(--al-font-serif); font-size: var(--al-text-lg); margin-bottom: var(--al-space-4); }
.al-benchmark__bom { color: var(--al-on-success-wash); font-weight: var(--al-weight-semibold); }
.al-benchmark__ruim { color: var(--al-on-danger-wash); }
.al-benchmark__fonte { text-align: left !important; font-size: var(--al-text-xs); color: var(--al-text-faint); }
.al-benchmark__linha--destaque { background: var(--al-data-wash); }
.al-benchmark__linha--destaque th { color: var(--al-on-data-wash); }
.al-benchmark__nota { margin-top: var(--al-space-3); font-size: var(--al-text-xs); color: var(--al-text-faint); }

/* ==========================================================================
   14. DEFINIÇÃO · CONCEITO · EXEMPLO
   ========================================================================== */

.al-definicao {
  padding: var(--al-space-4) 0;
  border-block: 1px solid var(--al-border);
}
.al-definicao__termo { font-family: var(--al-font-sans); font-size: var(--al-text-sm); font-weight: var(--al-weight-semibold); }
.al-definicao__ingles { font-weight: var(--al-weight-regular); color: var(--al-text-faint); }
.al-definicao__texto { margin-top: var(--al-space-1); color: var(--al-text-soft); }

.al-conceito {
  padding: var(--al-space-5) var(--al-space-6);
  background: var(--al-bg-sunken);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
}
.al-conceito__termo {
  margin-top: var(--al-space-2);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  font-weight: var(--al-weight-semibold);
}
.al-conceito__texto { margin-top: var(--al-space-2); color: var(--al-text-soft); }
.al-conceito__confusao { margin-top: var(--al-space-3); font-size: var(--al-text-sm); color: var(--al-on-stop-wash); }
.al-conceito__link { margin-top: var(--al-space-3); font-size: var(--al-text-sm); }

.al-exemplo {
  padding-left: var(--al-space-6);
  border-left: 1px solid var(--al-text);
}
.al-exemplo__titulo { margin-top: var(--al-space-2); font-family: var(--al-font-serif); font-size: var(--al-text-lg); font-weight: var(--al-weight-semibold); }
.al-exemplo__corpo { margin-top: var(--al-space-3); color: var(--al-text-soft); }
.al-exemplo__corpo p + p { margin-top: var(--al-space-4); }
.al-exemplo__nota { margin-top: var(--al-space-3); font-size: var(--al-text-xs); color: var(--al-text-faint); }

/* ==========================================================================
   15. ALERTA
   ========================================================================== */

/* A marca é uma BORDA, não uma coluna da grelha.
 *
 * Isto era `grid-template-columns: 3px minmax(0, 1fr)`, à espera de um primeiro
 * filho `.al-alerta__marca` que o Core nunca emite — ele emite `__titulo` e
 * `__corpo`. Resultado medido no WordPress real, em `/perguntas/*` e
 * `/mapa-de-problemas/`: a caixa inteira com **42 px de largura**, o título com
 * **3 px de largura por 1067 de altura** (uma letra por linha) e o corpo com
 * **0 px** — invisível. Um bloco de conteúdo inteiro destruído, em produção.
 *
 * A direcção da correcção é a que a secção 30 deste ficheiro declara: o CSS
 * segue o markup, porque quem nomeia a classe é o componente e ele tem de
 * funcionar em qualquer tema. A faixa colorida passa a ser `border-left`, que
 * não depende de filho nenhum — e `.al-alerta__marca` continua estilada para o
 * markup que a emita.
 */
.al-alerta {
  padding: var(--al-space-5);
  border: 1px solid var(--al-border);
  border-left: 3px solid var(--al-text-faint);
  border-radius: var(--al-radius);
  background: var(--al-bg-elev);
}
.al-alerta__marca {
  display: block;
  width: 3px;
  min-height: 100%;
  background: var(--al-text-faint);
  border-radius: var(--al-radius-pill);
}
.al-alerta__corpo > :first-child { margin-top: 0; }
.al-alerta__corpo > :last-child { margin-bottom: 0; }
.al-alerta__titulo { font-weight: var(--al-weight-semibold); margin-bottom: var(--al-space-1); }
.al-alerta__texto { font-size: var(--al-text-sm); line-height: var(--al-leading-normal); color: var(--al-text-soft); }

.al-alerta--info {
  background: var(--al-info-wash);
  border-color: var(--al-info-wash);
  /* A faixa da esquerda é o único sinal cromático que sobra depois de
     a variante repintar a borda: mantém-se explícita. */
  border-left-color: var(--al-on-info-wash);
}
.al-alerta--info .al-alerta__marca { background: var(--al-on-info-wash); }
.al-alerta--info .al-alerta__texto,
.al-alerta--info .al-alerta__titulo { color: var(--al-text); }

.al-alerta--atencao {
  background: var(--al-warn-wash);
  border-color: var(--al-warn-wash);
  /* A faixa da esquerda é o único sinal cromático que sobra depois de
     a variante repintar a borda: mantém-se explícita. */
  border-left-color: var(--al-on-warn-wash);
}
.al-alerta--atencao .al-alerta__marca { background: var(--al-on-warn-wash); }
.al-alerta--atencao .al-alerta__texto,
.al-alerta--atencao .al-alerta__titulo { color: var(--al-text); }

.al-alerta--erro {
  background: var(--al-danger-wash);
  border-color: var(--al-danger-wash);
  /* A faixa da esquerda é o único sinal cromático que sobra depois de
     a variante repintar a borda: mantém-se explícita. */
  border-left-color: var(--al-on-danger-wash);
}
.al-alerta--erro .al-alerta__marca { background: var(--al-on-danger-wash); }
.al-alerta--erro .al-alerta__texto,
.al-alerta--erro .al-alerta__titulo { color: var(--al-text); }

.al-alerta--sucesso {
  background: var(--al-success-wash);
  border-color: var(--al-success-wash);
  /* A faixa da esquerda é o único sinal cromático que sobra depois de
     a variante repintar a borda: mantém-se explícita. */
  border-left-color: var(--al-on-success-wash);
}
.al-alerta--sucesso .al-alerta__marca { background: var(--al-on-success-wash); }
.al-alerta--sucesso .al-alerta__texto,
.al-alerta--sucesso .al-alerta__titulo { color: var(--al-text); }

/* ==========================================================================
   16. ACORDEÃO
   ========================================================================== */

.al-acordeao__cabecalho { font-size: var(--al-text-2xl); margin-bottom: var(--al-space-5); }

.al-acordeao__item { border-bottom: 1px solid var(--al-border); }
.al-acordeao__item:first-of-type { border-top: 1px solid var(--al-border); }

.al-acordeao__rotulo {
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  margin-bottom: var(--al-space-4);
}
.al-acordeao__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-4);
  min-height: var(--al-touch);
  padding-block: var(--al-space-4);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-snug);
  list-style: none;
}
.al-acordeao__titulo::-webkit-details-marker { display: none; }
.al-acordeao__titulo::after {
  content: "";
  flex: 0 0 auto;
  width: 12px; height: 2px;
  background: currentColor;
  box-shadow: 0 0 0 0 transparent;
  position: relative;
}
.al-acordeao__titulo::before {
  content: "";
  order: 2;
  position: absolute;
  right: 5px;
  width: 2px; height: 12px;
  background: currentColor;
  transition: opacity var(--al-dur-2) var(--al-ease), transform var(--al-dur-2) var(--al-ease);
}
.al-acordeao__item { position: relative; }
.al-acordeao__item[open] > .al-acordeao__titulo::before { opacity: 0; transform: rotate(90deg); }
.al-acordeao__titulo:hover { color: var(--al-link); }

.al-acordeao__conteudo {
  padding-bottom: var(--al-space-5);
  max-width: var(--al-measure);
  color: var(--al-text-soft);
}
.al-acordeao__conteudo p + p { margin-top: var(--al-space-4); }

.al-acordeao--vazio { border: 0; }

/* ==========================================================================
   17. PASSO A PASSO
   ========================================================================== */

.al-passos { counter-reset: al-passo; }
.al-passos__passo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--al-space-5);
  padding-block: var(--al-space-8);
  border-top: 1px solid var(--al-border);
}
.al-passos__passo:first-child { border-top: 2px solid var(--al-text); }

.al-passos__marcador {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 3rem;
}
.al-passos__marcador .al-num {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-2xl);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-tight);
  color: var(--al-border-strong);
  line-height: 1;
}
.al-passos__passo:has(.js-al-passo-feito:checked) .al-passos__marcador .al-num { color: var(--al-brand); }
.al-passos__passo:has(.js-al-passo-feito:checked) .al-passos__titulo { color: var(--al-text-faint); }

.al-passos__titulo { font-size: var(--al-text-xl); }
.al-passos__tempo {
  margin-top: var(--al-space-1);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--al-text-faint);
}
.al-passos__texto { margin-top: var(--al-space-4); max-width: var(--al-measure); color: var(--al-text-soft); }
.al-passos__texto p + p { margin-top: var(--al-space-4); }

.al-passos__saida,
.al-passos__erro {
  margin-top: var(--al-space-4);
  padding: var(--al-space-3) var(--al-space-4);
  border-radius: var(--al-radius-sm);
  font-size: var(--al-text-sm);
}
.al-passos__saida { background: var(--al-success-wash); }
.al-passos__saida .al-sobrelinha { display: block; color: var(--al-on-success-wash); margin-bottom: var(--al-space-1); }
.al-passos__erro { background: var(--al-warn-wash); }
.al-passos__erro .al-sobrelinha { display: block; color: var(--al-on-warn-wash); margin-bottom: var(--al-space-1); }

/* O motor emite `al-passo__feito` (singular) e o tema tinha só o plural, do
   componente que o motor substitui. Mesma anatomia, mesmo estilo: um rótulo
   sem estilo é uma caixa de seleção nua no meio de um documento desenhado. */
.al-passo__feito,
.al-passos__feito {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  min-height: var(--al-touch);
  margin-top: var(--al-space-4);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
  cursor: pointer;
}

@media (max-width: 599px) {
  .al-passos__passo { grid-template-columns: minmax(0, 1fr); gap: var(--al-space-3); padding-block: var(--al-space-6); }
  .al-passos__marcador { justify-content: flex-start; }
  .al-passos__marcador .al-num { font-size: var(--al-text-lg); }
}

/* ==========================================================================
   18. PRÓXIMA AÇÃO
   ========================================================================== */

.al-proxima-acao {
  padding: var(--al-space-8);
  background: var(--al-band-bg);
  color: var(--al-on-band);
  border-radius: var(--al-radius-lg);
}
.al-proxima-acao .al-sobrelinha { color: var(--al-on-band-accent); }
.al-proxima-acao__texto {
  margin-top: var(--al-space-3);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-2xl);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-snug);
  letter-spacing: var(--al-tracking-tight);
  text-wrap: balance;
  color: var(--al-on-band);
}
.al-proxima-acao__tempo { margin-top: var(--al-space-3); font-size: var(--al-text-sm); color: var(--al-on-band-soft); }
.al-proxima-acao .al-btn { margin-top: var(--al-space-6); }

/* ==========================================================================
   19. CTA CONTEXTUAL
   ========================================================================== */

.al-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-6);
  padding: var(--al-space-6) var(--al-space-8);
  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-cta__texto { flex: 1 1 22rem; }
.al-cta__titulo {
  margin-top: var(--al-space-2);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-xl);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-snug);
}
.al-cta__descricao { margin-top: var(--al-space-2); font-size: var(--al-text-sm); color: var(--al-text-soft); max-width: 54ch; }
.al-cta__acao { flex: 0 0 auto; }
.al-cta__nota { margin-top: var(--al-space-2); font-size: var(--al-text-xs); color: var(--al-text-faint); }

.al-cta--diagnostico { border-left-color: var(--al-brand); }
.al-cta--ferramenta { border-left-color: var(--al-brand-600); }
.al-cta--prompt { border-left-color: var(--al-ink-600); }
.al-cta--newsletter { border-left-color: var(--al-data); }
.al-cta--playbook { border-left-color: var(--al-info); }

@media (max-width: 699px) {
  .al-cta { padding: var(--al-space-5); }
  .al-cta__acao { width: 100%; }
  .al-cta__acao .al-btn { width: 100%; }
}

/* Sticky no telemóvel: fica no rodapé, mas o body ganha o espaço dele — nunca
   cobre a última linha do artigo. */
.al-cta--sticky { display: none; }
@media (max-width: 899px) {
  .al-com-js .al-cta--sticky {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--al-z-sticky);
    display: flex;
    gap: var(--al-space-3);
    padding: var(--al-space-3) var(--al-gutter);
    padding-bottom: calc(var(--al-space-3) + env(safe-area-inset-bottom));
    background: var(--al-bg-elev);
    border: 0;
    border-top: 1px solid var(--al-border);
    border-radius: 0;
    box-shadow: var(--al-shadow-2);
    transform: translateY(110%);
    transition: transform var(--al-dur-3) var(--al-ease-out);
  }
  .al-com-js .al-cta--sticky.is-visivel { transform: translateY(0); }
  .al-com-js .al-cta--sticky .al-cta__titulo { font-size: var(--al-text-sm); font-family: var(--al-font-sans); margin: 0; }
  .al-com-js .al-cta--sticky .al-cta__descricao,
  .al-com-js .al-cta--sticky .al-cta__nota,
  .al-com-js .al-cta--sticky .al-sobrelinha { display: none; }
  .al-com-js .al-cta--sticky .al-cta__acao { width: auto; }
  .al-com-js body { padding-bottom: 0; }
}

/* ==========================================================================
   20. RECOMENDAÇÃO
   ========================================================================== */

.al-recomendacao__lista { margin-top: var(--al-space-4); border-top: 2px solid var(--al-text); }
.al-recomendacao__item { border-bottom: 1px solid var(--al-border); }
.al-recomendacao__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--al-space-2) var(--al-space-4);
  align-items: baseline;
  padding-block: var(--al-space-4);
  color: inherit;
  text-decoration: none;
}
.al-recomendacao__link:hover .al-recomendacao__titulo { color: var(--al-link-hover); text-decoration: underline; }
.al-recomendacao__titulo { font-family: var(--al-font-serif); font-size: var(--al-text-lg); font-weight: var(--al-weight-semibold); line-height: var(--al-leading-snug); }
.al-recomendacao__motivo { grid-column: 2; font-size: var(--al-text-xs); color: var(--al-text-faint); }

/* ==========================================================================
   21. RELACIONADOS
   ========================================================================== */

.al-relacionados__titulo {
  font-size: var(--al-text-2xl);
  margin-bottom: var(--al-space-6);
  padding-bottom: var(--al-space-3);
  border-bottom: 2px solid var(--al-text);
}

/* ==========================================================================
   22. SALVAR · COPIAR
   ========================================================================== */

.al-salvar, .al-copiar {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  min-height: var(--al-control-h-sm);
  padding: var(--al-space-2) var(--al-space-4);
  border: 1px solid var(--al-border-strong);
  border-radius: var(--al-radius);
  background: var(--al-bg-elev);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-xs);
  font-weight: var(--al-weight-semibold);
  color: var(--al-text-soft);
  cursor: pointer;
  transition: border-color var(--al-dur-1) var(--al-ease), color var(--al-dur-1) var(--al-ease);
}
.al-salvar:hover, .al-copiar:hover { border-color: var(--al-text); color: var(--al-text); }
.al-salvar:active, .al-copiar:active { transform: translateY(1px); }

.al-salvar__icone {
  width: 12px; height: 14px;
  border: 1.5px solid currentColor;
  border-bottom-color: transparent;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.al-salvar[aria-pressed="true"] { border-color: var(--al-brand); color: var(--al-on-brand-wash); background: var(--al-brand-wash); }
.al-salvar[aria-pressed="true"] .al-salvar__icone { background: currentColor; }
.al-salvar[aria-disabled="true"], .al-copiar[disabled] { opacity: 0.5; pointer-events: none; }

.al-copiar.is-sucesso { border-color: var(--al-on-success-wash); color: var(--al-on-success-wash); background: var(--al-success-wash); }
.al-copiar.is-erro { border-color: var(--al-on-danger-wash); color: var(--al-on-danger-wash); background: var(--al-danger-wash); }

/* Sem JS o botão copiar não aparece — não se oferece um botão morto. */
.al-sem-js .al-copiar, .al-sem-js .al-salvar { display: none; }

/* ==========================================================================
   23. PROGRESSO
   ========================================================================== */

.al-progresso { display: block; }
.al-progresso__trilha {
  height: 4px;
  background: var(--al-bg-sunken);
  border-radius: var(--al-radius-pill);
  overflow: hidden;
}
.al-progresso__barra {
  height: 100%;
  width: var(--al-progresso, 0%);
  background: var(--al-brand);
  border-radius: inherit;
  transition: width var(--al-dur-3) var(--al-ease-out);
}
.al-progresso__rotulo {
  margin-top: var(--al-space-2);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--al-text-faint);
}

/* Barra de leitura do artigo: no topo, 2px, sem rótulo. */
.al-progresso--leitura {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--al-z-header);
}
.al-progresso--leitura .al-progresso__trilha { height: 2px; background: transparent; border-radius: 0; }
.al-progresso--leitura .al-progresso__rotulo { display: none; }

/* ==========================================================================
   24. BANNER MODULAR
   Arte é composição, não imagem importada: fio + grafismo de régua + tipo.
   ========================================================================== */

.al-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 200px;
  padding: var(--al-space-8);
  border-radius: var(--al-radius-lg);
  overflow: hidden;
  background: var(--al-band-bg);
  color: var(--al-on-band);
  isolation: isolate;
}
.al-banner__grafismo {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
}
.al-banner__conteudo { max-width: 40ch; }
.al-banner .al-sobrelinha { color: var(--al-on-band-accent); }
.al-banner__titulo {
  margin-top: var(--al-space-3);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-2xl);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-snug);
  letter-spacing: var(--al-tracking-tight);
  color: var(--al-on-band);
  text-wrap: balance;
}
.al-banner__texto { margin-top: var(--al-space-3); font-size: var(--al-text-sm); color: var(--al-on-band-soft); }
.al-banner .al-btn { margin-top: var(--al-space-5); }

/* Problema: réguas verticais irregulares — a leitura de "algo travado". */
.al-banner--problema .al-banner__grafismo {
  background-image: repeating-linear-gradient(90deg,
    var(--al-stop) 0 1px, transparent 1px 14px);
  mask-image: linear-gradient(105deg, transparent 35%, var(--al-on-band) 100%);
}
/* Métrica: grade de dado. */
.al-banner--metrica .al-banner__grafismo {
  background-image:
    repeating-linear-gradient(0deg, var(--al-data) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--al-data) 0 1px, transparent 1px 24px);
  mask-image: radial-gradient(120% 100% at 100% 0, var(--al-on-band), transparent 70%);
}
/* Ferramenta: fios horizontais crescentes, como um controlo deslizante. */
.al-banner--ferramenta .al-banner__grafismo {
  background-image: repeating-linear-gradient(0deg, var(--al-brand-400) 0 1px, transparent 1px 18px);
  mask-image: linear-gradient(75deg, var(--al-on-band), transparent 60%);
}
/* IA: pontilhado denso, sem circuito e sem cérebro. */
.al-banner--ia .al-banner__grafismo {
  background-image: radial-gradient(var(--al-brand-200) 1px, transparent 1px);
  background-size: 12px 12px;
  mask-image: linear-gradient(135deg, var(--al-on-band) 10%, transparent 65%);
}
/* Editorial: uma única régua grossa. */
.al-banner--editorial .al-banner__grafismo {
  background-image: linear-gradient(var(--al-on-band-soft) 0 100%);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 var(--al-space-6);
}

.al-banner--alto { min-height: 320px; }
.al-banner--baixo { min-height: 140px; }
.al-banner--baixo .al-banner__titulo { font-size: var(--al-text-xl); }

@media (max-width: 599px) {
  .al-banner { min-height: 160px; padding: var(--al-space-5); border-radius: var(--al-radius); }
  .al-banner__titulo { font-size: var(--al-text-xl); }
}

/* ==========================================================================
   25. NEWSLETTER
   ========================================================================== */

.al-newsletter {
  display: grid;
  gap: var(--al-space-8);
  padding: var(--al-space-8);
  background: var(--al-bg-sunken);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-lg);
}
@media (min-width: 800px) {
  .al-newsletter { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--al-space-12); }
}
.al-newsletter__titulo {
  margin-top: 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);
  letter-spacing: var(--al-tracking-tight);
}
.al-newsletter__descricao { margin-top: var(--al-space-3); color: var(--al-text-soft); max-width: 46ch; }
.al-newsletter__form .al-campo { margin-bottom: var(--al-space-4); }
.al-newsletter__form .al-btn { width: 100%; }
.al-newsletter__promessa { margin-top: var(--al-space-3); font-size: var(--al-text-xs); color: var(--al-text-faint); }
.al-newsletter--sucesso { display: block; }

/* ==========================================================================
   26. MIGALHAS · META · PAGINAÇÃO · AÇÕES
   ========================================================================== */

.al-migalhas { padding-block: var(--al-space-5); font-size: var(--al-text-xs); }
.al-migalhas__lista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-space-2); color: var(--al-text-faint); }
.al-migalhas__item + .al-migalhas__item::before { content: "/"; margin-right: var(--al-space-2); color: var(--al-border-strong); }
.al-migalhas a { color: var(--al-text-soft); text-decoration: none; }
.al-migalhas a:hover { color: var(--al-text); text-decoration: underline; }

.al-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2) var(--al-space-5);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-xs);
  color: var(--al-text-faint);
}
.al-meta__item { display: inline-flex; align-items: center; gap: var(--al-space-1); }
.al-meta__confianca { font-weight: var(--al-weight-semibold); }
.al-meta__confianca--verificado { color: var(--al-on-success-wash); }
.al-meta__confianca--estimado { color: var(--al-on-warn-wash); }
.al-meta__confianca--opiniao { color: var(--al-text-soft); }

.al-paginacao { margin-top: var(--al-space-12); }
.al-paginacao__lista { display: flex; flex-wrap: wrap; gap: var(--al-space-2); justify-content: center; }
.al-paginacao a, .al-paginacao span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--al-touch);
  min-height: var(--al-touch);
  padding-inline: var(--al-space-3);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  font-size: var(--al-text-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--al-text-soft);
}
.al-paginacao a:hover { border-color: var(--al-text); color: var(--al-text); }
.al-paginacao .current { background: var(--al-text); border-color: var(--al-text); color: var(--al-bg); font-weight: var(--al-weight-semibold); }

.al-acoes-conteudo { display: flex; flex-wrap: wrap; gap: var(--al-space-2); }

/* ==========================================================================
   27. BUSCA
   ========================================================================== */

.al-busca { position: relative; }

.al-busca__form { display: flex; flex-wrap: wrap; gap: var(--al-space-2); }
/* O campo nunca fica menor do que consegue mostrar um termo, e o botão desce
   para a linha de baixo em vez de empurrar a página para fora da tela. */
.al-busca__form > .al-busca__campo { flex: 1 1 12rem; min-width: 0; }
.al-busca__form > .al-busca__botao { flex: 0 0 auto; }
@media (max-width: 479px) {
  .al-busca__form > .al-busca__botao { flex: 1 0 100%; }
}

.al-busca__campo {
  flex: 1 1 auto;
  min-height: var(--al-control-h);
  padding: var(--al-space-3) var(--al-space-5);
  background: var(--al-bg-elev);
  border: 1px solid var(--al-border-input);
  border-radius: var(--al-radius);
  font-size: var(--al-text-base);
  color: var(--al-text);
}
.al-busca__campo:focus-visible { outline: none; border-color: var(--al-brand); box-shadow: var(--al-shadow-focus); }

.al-busca--grande .al-busca__campo {
  min-height: 60px;
  padding: var(--al-space-4) var(--al-space-6);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-xl);
  border-width: 2px;
  border-color: var(--al-text);
  border-radius: var(--al-radius);
}
.al-busca--grande .al-busca__botao { min-height: 60px; padding-inline: var(--al-space-8); }
@media (max-width: 599px) {
  /* A 390 px o campo grande mais o botão não cabem lado a lado: o botão passa
     a ocupar a linha inteira, que também é o alvo de toque mais confortável. */
  .al-busca--grande .al-busca__campo { flex: 1 0 100%; }
  .al-busca--grande .al-busca__botao { flex: 1 0 100%; padding-inline: var(--al-space-5); }
}

.al-busca__exemplos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2);
  margin-top: var(--al-space-4);
}
.al-busca__exemplo {
  display: inline-flex;
  align-items: center;
  min-height: var(--al-control-h-sm);
  padding: var(--al-space-2) var(--al-space-4);
  border: 1px solid var(--al-border-strong);
  border-radius: var(--al-radius-pill);
  background: var(--al-bg-elev);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-sm);
  font-style: italic;
  color: var(--al-text-soft);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--al-dur-1) var(--al-ease), color var(--al-dur-1) var(--al-ease);
}
.al-busca__exemplo:hover { border-color: var(--al-text); color: var(--al-text); }

.al-busca__resultados {
  position: absolute;
  inset: calc(100% + var(--al-space-2)) 0 auto 0;
  z-index: var(--al-z-overlay);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--al-bg-elev);
  border: 1px solid var(--al-border-strong);
  border-radius: var(--al-radius);
  box-shadow: var(--al-shadow-2);
}
.al-busca__resultados:empty { display: none; }

.al-busca__resultado {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--al-space-2) var(--al-space-3);
  align-items: baseline;
  padding: var(--al-space-3) var(--al-space-5);
  border-bottom: 1px solid var(--al-border);
  color: inherit;
  text-decoration: none;
}
.al-busca__resultado:last-child { border-bottom: 0; }
.al-busca__resultado:hover,
.al-busca__resultado[aria-selected="true"] { background: var(--al-brand-wash); }
.al-busca__resultado-titulo { font-size: var(--al-text-sm); font-weight: var(--al-weight-medium); }
.al-busca__resultado-contexto { grid-column: 2; font-size: var(--al-text-xs); color: var(--al-text-faint); }

.al-busca__rodape {
  padding: var(--al-space-3) var(--al-space-5);
  border-top: 1px solid var(--al-border);
  background: var(--al-bg-sunken);
  font-size: var(--al-text-xs);
}

/* ==========================================================================
   28. CABEÇALHO E RODAPÉ
   ========================================================================== */

.al-cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--al-z-header);
  background: var(--al-bg);
  border-bottom: 1px solid var(--al-border);
}
.al-cabecalho__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-space-4); min-height: 60px; }
.al-cabecalho__linha > .al-marca { margin-right: auto; }

.al-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-base);
  font-weight: var(--al-weight-bold);
  letter-spacing: var(--al-tracking-caps);
  text-transform: uppercase;
  color: var(--al-text);
  text-decoration: none;
  flex: 0 0 auto;
}
.al-marca__simbolo { width: 22px; height: 22px; color: var(--al-brand); flex: 0 0 auto; }

.al-cabecalho__nav { display: none; }
.al-cabecalho__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--al-space-1); }

.al-icone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--al-touch);
  min-height: var(--al-touch);
  padding: 0 var(--al-space-2);
  border-radius: var(--al-radius);
  color: var(--al-text-soft);
  cursor: pointer;
}
.al-icone-btn:hover { color: var(--al-text); background: var(--al-bg-sunken); }
.al-icone-btn svg { width: 20px; height: 20px; }

/* A busca do cabeçalho no telemóvel: um toque abre a gaveta, o foco vai
   direto para o campo. */
.al-cabecalho__busca {
  display: block;
  padding-bottom: var(--al-space-4);
}
/* Esconde-se SÓ quando a gaveta está ligada (`al-js-busca`, posta pelo app.js
   depois de ligar o toque). Antes era ao contrário — escondida por omissão e
   mostrada com `.al-sem-js` — e bastava o app.js não chegar para a busca
   desaparecer do telemóvel, com a marca de "com JS" já posta pelo <head>. */
.al-js-busca .al-cabecalho__busca { display: none; }
/* Sem a gaveta ligada a caixa já está aberta: a lupa seria um botão inerte a
   apontar para ela (Red Team 11). Só aparece quando há gaveta para abrir. */
html:not(.al-js-busca) .js-al-busca-abrir { display: none; }
.al-cabecalho__busca.is-aberta,
.al-js-busca .al-cabecalho__busca.is-aberta,
.al-sem-js .al-cabecalho__busca { display: block; }
/* Aberta (ou sem JS), a busca desce para uma linha só dela. Como filha de um
   flex, sem isto ela era espremida ao lado da marca e do menu, e empurrava o
   botão do menu para fora da tela a 390 px. */
.al-cabecalho__busca.is-aberta,
.al-sem-js .al-cabecalho__busca,
.al-cabecalho__busca:not(.is-aberta) { flex: 1 0 100%; order: 3; min-width: 0; }

@media (min-width: 900px) {
  .al-cabecalho__linha { min-height: 68px; gap: var(--al-space-6); }
  .al-cabecalho__nav { display: flex; align-items: center; gap: var(--al-space-5); }
  .al-cabecalho__nav a {
    font-size: var(--al-text-sm);
    font-weight: var(--al-weight-medium);
    color: var(--al-text-soft);
    text-decoration: none;
  }
  .al-cabecalho__nav a:hover { color: var(--al-text); }
  .al-cabecalho__nav .current-menu-item > a { color: var(--al-text); font-weight: var(--al-weight-semibold); }
  .al-cabecalho__busca { display: block; flex: 0 1 320px; padding: 0; margin-left: auto; }
  .al-cabecalho__acoes { margin-left: 0; }
  .al-menu-alternar { display: none; }
  /* No desktop o campo está aberto: a lupa que o abriria seria a segunda
     afordância para a mesma ação. Some. */
  .al-busca-alternar { display: none; }
}

/* Menu do telemóvel: painel de página inteira, não gaveta de 60%. */
.al-menu-movel {
  position: fixed;
  inset: 60px 0 0 0;
  z-index: var(--al-z-overlay);
  display: none;
  padding: var(--al-space-6) var(--al-gutter) var(--al-space-16);
  overflow-y: auto;
  background: var(--al-bg);
}
.al-menu-movel.is-aberto { display: block; }
.al-menu-movel a {
  display: flex;
  align-items: center;
  min-height: var(--al-touch);
  padding-block: var(--al-space-3);
  border-bottom: 1px solid var(--al-border);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-xl);
  color: var(--al-text);
  text-decoration: none;
}
@media (min-width: 900px) { .al-menu-movel { display: none !important; } }

.al-rodape {
  margin-top: var(--al-section);
  padding-block: var(--al-section) var(--al-space-8);
  background: var(--al-band-bg);
  color: var(--al-on-band-soft);
}
.al-rodape a { color: var(--al-on-band-soft); text-decoration: none; }
.al-rodape a:hover { color: var(--al-on-band); text-decoration: underline; }
.al-rodape__grade {
  display: grid;
  gap: var(--al-space-8);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.al-rodape__titulo {
  margin-bottom: 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-on-band-accent);
}
.al-rodape__lista li { margin-bottom: var(--al-space-2); font-size: var(--al-text-sm); }
.al-rodape__marca { color: var(--al-on-band); font-size: var(--al-text-lg); font-family: var(--al-font-serif); max-width: 32ch; }
.al-rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--al-space-4);
  margin-top: var(--al-space-12);
  padding-top: var(--al-space-6);
  border-top: 1px solid var(--al-ink-700);
  font-size: var(--al-text-xs);
}

/* ==========================================================================
   29. WIDGET (a área única do rodapé)
   ========================================================================== */

.al-widget__titulo {
  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-on-band-accent);
  margin-bottom: var(--al-space-3);
}

/* ==========================================================================
   30. MARKUP DOS MOTORES
   ==========================================================================
   Estas regras existem porque o CSS deste tema foi escrito contra os
   renderizadores de recurso do próprio tema, e em produção quem renderiza é o
   Core (e o Business). Os dois usam nomes diferentes para a mesma coisa —
   `.al-botao` e não `.al-btn`, `.al-opcao` e não `.al-quiz__opcao`,
   `.al-passo` e não `.al-passos__passo`.

   A direção da correção é o CSS seguir o markup: quem nomeia a classe é o
   componente, porque é ele que precisa funcionar em qualquer tema. Trocar o
   nome no Core quebraria temas de terceiros.

   `bin/verificar-classes.php` confronta toda classe `.al-*` emitida no HTML
   contra toda classe definida aqui, e falha quando alguma fica sem estilo.
   ========================================================================== */

/* --- Estado vazio partilhado ------------------------------------------- */
/* O Core marca todo estado vazio com `.al-vazio` mais o modificador do
   componente. Uma regra serve os dois: o modificador fica como gancho de
   ajuste fino, e a aparência vem daqui. */
.al-vazio {
  padding: var(--al-space-6);
  border: 1px dashed var(--al-border-strong);
  border-radius: var(--al-radius);
  background: var(--al-bg-sunken);
}
.al-vazio__texto {
  margin: 0;
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}
.al-card--vazio,
.al-sumario--vazio,
.al-mini-quiz--vazio,
.al-checklist--vazio,
.al-prompt-card--vazio,
.al-resposta-curta--vazio,
.al-conceito--vazio,
.al-definicao--vazio,
.al-exemplo--vazio,
.al-benchmark--vazio,
.al-recomendacao--vazio,
.al-cta-contextual--vazio,
.al-salvar--vazio { box-shadow: none; }

/* --- Imagem e o seu estado ausente ------------------------------------- */
.al-imagem {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--al-bg-sunken);
}
.al-imagem img { width: 100%; height: 100%; object-fit: cover; }
/* Sem imagem, a inicial do título ocupa o lugar: composição tipográfica em vez
   de um retângulo cinzento com ícone de montanha. */
.al-imagem--ausente {
  display: grid;
  place-items: center;
  background: var(--al-bg-sunken);
  border-bottom: 1px solid var(--al-border);
}
.al-imagem__inicial {
  font-family: var(--al-font-serif);
  font-size: var(--al-text-4xl);
  font-weight: var(--al-weight-semibold);
  line-height: 1;
  color: var(--al-border-strong);
}

/* --- Cartão: os nomes que o Core usa ------------------------------------ */
.al-card__tipo {
  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;
  color: var(--al-text-faint);
}
.al-card__tempo { font-variant-numeric: tabular-nums; }
.al-card--resumido .al-card__resumo::after { content: "…"; }
.al-card--diagnostico { --al-acento: var(--al-brand-600); }

/* --- Enunciado do quiz redesenhado no navegador ------------------------- */
/* O servidor emite `.al-quiz__pergunta`; o `quiz.js` reescreve o campo a cada
   passo e emite `.al-quiz__enunciado`. A partir do passo 2 a pergunta ficava
   sem uma única regra: fonte de sistema, tamanho de corpo, sem respiro. O
   `verificar-classes.php` não apanha porque só lê o HTML do servidor — a
   classe só existe depois de o script correr. */
.al-quiz__enunciado {
  display: block;
  margin-block: var(--al-space-6) 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);
  letter-spacing: var(--al-tracking-tight);
  text-wrap: balance;
}
.al-quiz__enunciado:focus-visible { outline: 2px solid var(--al-brand); outline-offset: 4px; }

@media (max-width: 40rem) {
  .al-quiz__enunciado { font-size: var(--al-text-xl); }
}

/* --- Opção de escolha (quiz e formulário do Core) ----------------------- */
.al-opcao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--al-space-3);
  align-items: start;
  min-height: var(--al-touch);
  padding: var(--al-space-4) var(--al-space-5);
  border: 1px solid var(--al-border-input);
  border-radius: var(--al-radius);
  cursor: pointer;
  transition: border-color var(--al-dur-1) var(--al-ease),
              background-color var(--al-dur-1) var(--al-ease);
}
.al-opcao:hover { border-color: var(--al-text-soft); background: var(--al-bg-sunken); }
.al-opcao:has(:checked) { border-color: var(--al-brand); background: var(--al-brand-wash); }
.al-opcao:has(:focus-visible) { outline: 2px solid var(--al-brand); outline-offset: 2px; }
.al-opcao__controlo { margin-top: 0.15rem; accent-color: var(--al-brand); }
.al-opcao__rotulo {
  display: grid;
  gap: var(--al-space-1);
  font-size: var(--al-text-base);
  line-height: var(--al-leading-snug);
  cursor: pointer;
}
.al-opcao__evidencia { font-size: var(--al-text-xs); color: var(--al-text-faint); }

/* --- Mini-quiz ---------------------------------------------------------- */
.al-mini-quiz {
  display: block;
  padding: var(--al-space-8);
  background: var(--al-bg-elev);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-lg);
}
.al-mini-quiz__forma { display: block; }
.al-mini-quiz__passo {
  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);
}
.al-mini-quiz__pergunta {
  margin-block: var(--al-space-4) 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);
  letter-spacing: var(--al-tracking-tight);
  text-wrap: balance;
}
.al-mini-quiz__ajuda { margin-bottom: var(--al-space-5); font-size: var(--al-text-sm); color: var(--al-text-soft); }
.al-mini-quiz__opcoes { display: grid; gap: var(--al-space-2); }
.al-mini-quiz__acoes { display: flex; gap: var(--al-space-3); justify-content: space-between; margin-top: var(--al-space-8); }
.al-mini-quiz__promessa { margin-top: var(--al-space-4); font-size: var(--al-text-xs); color: var(--al-text-faint); text-align: center; }
.al-mini-quiz__erro { margin-top: var(--al-space-4); font-size: var(--al-text-sm); color: var(--al-on-danger-wash); }
.al-mini-quiz__resultado { margin-top: var(--al-space-6); }

/* Uma pergunta por tela no telemóvel, ações ao alcance do polegar. */
@media (max-width: 699px) {
  .al-mini-quiz { display: flex; flex-direction: column; min-height: 78svh; padding: var(--al-space-5); border-radius: var(--al-radius); }
  .al-mini-quiz__forma { display: flex; flex-direction: column; flex: 1 1 auto; }
  .al-mini-quiz__opcoes { flex: 1 1 auto; align-content: start; }
  .al-mini-quiz__pergunta { font-size: var(--al-text-xl); }
  .al-mini-quiz__acoes { position: sticky; bottom: var(--al-space-4); }
  .al-mini-quiz__acoes .al-botao { flex: 1 1 auto; }
}

/* --- Passo a passo ------------------------------------------------------ */
.al-passo-a-passo { display: grid; }
.al-passo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--al-space-2) var(--al-space-5);
  padding-block: var(--al-space-8);
  border-top: 1px solid var(--al-border);
}
.al-passo:first-child { border-top: 2px solid var(--al-text); }
.al-passo__titulo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--al-space-5);
  align-items: baseline;
  font-size: var(--al-text-xl);
}
.al-passo__numero {
  font-family: var(--al-font-sans);
  font-size: var(--al-text-2xl);
  font-weight: var(--al-weight-semibold);
  letter-spacing: var(--al-tracking-tight);
  color: var(--al-border-strong);
  line-height: 1;
}
.al-passo:has(:checked) .al-passo__numero { color: var(--al-brand); }
.al-passo__corpo { grid-column: 1 / -1; max-width: var(--al-measure); color: var(--al-text-soft); }
.al-passo__corpo p + p { margin-top: var(--al-space-4); }
.al-passo__meta {
  grid-column: 1 / -1;
  margin-top: var(--al-space-3);
  padding: var(--al-space-3) var(--al-space-4);
  border-radius: var(--al-radius-sm);
  font-size: var(--al-text-sm);
  background: var(--al-bg-sunken);
}
.al-passo__meta .al-rotulo {
  display: block;
  margin-bottom: var(--al-space-1);
  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);
}
.al-passo__meta--tempo { background: none; padding: 0; font-variant-numeric: tabular-nums; color: var(--al-text-faint); }
.al-passo__meta--saida { background: var(--al-success-wash); }
.al-passo__meta--saida .al-rotulo { color: var(--al-on-success-wash); }
.al-passo__meta--erro_comum { background: var(--al-warn-wash); }
.al-passo__meta--erro_comum .al-rotulo { color: var(--al-on-warn-wash); }

@media (max-width: 599px) {
  .al-passo { grid-template-columns: minmax(0, 1fr); padding-block: var(--al-space-6); }
  .al-passo__titulo { grid-template-columns: minmax(0, 1fr); gap: var(--al-space-2); font-size: var(--al-text-lg); }
  .al-passo__numero { font-size: var(--al-text-lg); }
}

/* --- Benchmark: tabela do Core ----------------------------------------- */
.al-benchmark__tabela { width: 100%; font-size: var(--al-text-sm); border-collapse: collapse; }
.al-benchmark__cabecalho {
  position: sticky;
  top: 0;
  padding: var(--al-space-3) var(--al-space-4);
  background: var(--al-bg-elev);
  border-bottom: 2px solid var(--al-text);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-2xs);
  letter-spacing: var(--al-tracking-caps);
  text-transform: uppercase;
  color: var(--al-text-faint);
  text-align: left;
  white-space: nowrap;
}
.al-benchmark__linha:hover { background: var(--al-bg-sunken); }
.al-benchmark__celula {
  padding: var(--al-space-3) var(--al-space-4);
  border-bottom: 1px solid var(--al-border);
  vertical-align: top;
}
.al-benchmark__celula--segmento { font-weight: var(--al-weight-semibold); }
.al-benchmark__celula--bom { color: var(--al-on-success-wash); font-weight: var(--al-weight-semibold); }
.al-benchmark__celula--aceitavel { color: var(--al-text-soft); }
.al-benchmark__celula--ruim { color: var(--al-on-danger-wash); }
.al-benchmark__celula--fonte { font-size: var(--al-text-xs); color: var(--al-text-faint); }
.al-benchmark__cabecalho--segmento,
.al-benchmark__cabecalho--bom,
.al-benchmark__cabecalho--aceitavel,
.al-benchmark__cabecalho--ruim,
.al-benchmark__cabecalho--fonte { text-align: left; }
/* V3: a quinta coluna passou a ser o contexto da linha («Serviço B2B com
   ciclo de 30 a 90 dias»); a origem vai para o bloco de rodapé. */
.al-benchmark__celula--contexto { font-size: var(--al-text-xs); color: var(--al-text-soft); min-width: 16rem; }
.al-benchmark__cabecalho--contexto { text-align: left; }
.al-benchmark__contexto { font-size: var(--al-text-xs); color: var(--al-text-soft); }
.al-calculadora__referencia { font-size: var(--al-text-xs); }
.al-benchmark__aviso { margin-top: var(--al-space-3); font-size: var(--al-text-xs); color: var(--al-text-faint); }
/* V3: a origem da faixa — rótulo por tipo e link «Como verificamos». Mais
   visível do que a nota: é o que diz ao leitor o que a tabela É. */
.al-benchmark__origem { margin-top: var(--al-space-3); font-size: var(--al-text-sm); color: var(--al-text-soft); line-height: 1.5; }
.al-benchmark__origem strong { color: var(--al-text); font-weight: 600; }
.al-benchmark__origem-link { margin-left: var(--al-space-1); white-space: nowrap; }
.al-calculadora__origem { margin-top: var(--al-space-2); }

/* No telemóvel a tabela vira ficha: cada célula ganha o seu rótulo. */
@media (max-width: 599px) {
  .al-benchmark__tabela thead { display: none; }
  .al-benchmark__linha { display: block; padding-block: var(--al-space-4); border-bottom: 1px solid var(--al-border); }
  .al-benchmark__celula { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--al-space-3); padding: var(--al-space-1) 0; border: 0; }
  .al-benchmark__celula::before {
    content: attr(data-rotulo);
    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);
  }
}

/* --- Calculadora e resultado ------------------------------------------- */
.al-calculadora__forma { display: grid; gap: var(--al-space-6); }
.al-calculadora__pergunta { font-family: var(--al-font-serif); font-size: var(--al-text-lg); color: var(--al-text-soft); }
.al-calculadora__campos { display: grid; gap: var(--al-space-5); }
@media (min-width: 700px) { .al-calculadora__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.al-calculadora__resultados { display: grid; gap: var(--al-space-5); }
.al-calculadora__erro { margin: 0; font-size: var(--al-text-sm); color: var(--al-on-danger-wash); }
.al-calculadora__aviso { font-size: var(--al-text-xs); color: var(--al-text-faint); }

.al-resultado {
  padding: var(--al-space-5) var(--al-space-6);
  background: var(--al-bg-sunken);
  border-left: 3px solid var(--al-border-strong);
  border-radius: 0 var(--al-radius) var(--al-radius) 0;
}
.al-resultado__rotulo {
  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;
  color: var(--al-text-faint);
}
.al-resultado__valor {
  margin-top: var(--al-space-1);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-2xl);
  font-weight: var(--al-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--al-tracking-tight);
  line-height: 1.1;
}
.al-resultado--destaque { border-left-color: var(--al-data); background: var(--al-data-wash); }
.al-resultado--destaque .al-resultado__valor { font-size: var(--al-text-4xl); color: var(--al-on-data-wash); }
.al-resultado--destaque .al-resultado__rotulo { color: var(--al-on-data-wash); }
.al-resultado__explicacao { margin-top: var(--al-space-2); font-size: var(--al-text-xs); color: var(--al-text-soft); }
.al-resultado__leitura { margin-top: var(--al-space-3); font-size: var(--al-text-sm); color: var(--al-text); }
.al-resultado__leitura:empty { display: none; }

.al-campo--moeda .al-campo__controlo,
.al-campo--inteiro .al-campo__controlo { font-variant-numeric: tabular-nums; }

/* --- Progresso: no Core, `__barra` é a pista e `__preenchido` é o preenchimento.
   É o inverso do recurso do tema — e por isso a barra não enchia. --------- */
.al-progresso__barra {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--al-bg-sunken);
  border-radius: var(--al-radius-pill);
  overflow: hidden;
}
.al-progresso__preenchido {
  display: block;
  height: 100%;
  width: var(--al-progresso, 0%);
  background: var(--al-brand);
  border-radius: inherit;
  transition: width var(--al-dur-3) var(--al-ease-out);
}
.al-progresso__contagem {
  margin-top: var(--al-space-2);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--al-text-faint);
}

/* --- Copiar e salvar: o Core traz dois rótulos e alterna com `hidden` --- */
.al-copiar__rotulo,
.al-copiar__feito,
.al-salvar__rotulo,
.al-salvar__salvo { display: inline; }
.al-copiar.is-sucesso .al-copiar__rotulo { display: none; }
.al-salvar[aria-pressed="true"] .al-salvar__rotulo { display: none; }

/* --- CTA contextual ----------------------------------------------------- */
.al-cta-contextual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-5);
  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-cta-contextual__texto {
  flex: 1 1 22rem;
  margin: 0;
  font-family: var(--al-font-serif);
  font-size: var(--al-text-lg);
  line-height: var(--al-leading-snug);
}
@media (max-width: 699px) {
  .al-cta-contextual { padding: var(--al-space-5); }
  .al-cta-contextual .al-botao { width: 100%; }
}

/* --- Próxima ação ------------------------------------------------------- */
.al-proxima-acao__titulo {
  margin-top: var(--al-space-3);
  font-family: var(--al-font-serif);
  font-size: var(--al-text-2xl);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-snug);
  letter-spacing: var(--al-tracking-tight);
  text-wrap: balance;
  color: var(--al-on-band);
}
.al-proxima-acao__botao { margin-top: var(--al-space-6); }

/* --- Alerta, acordeão, checklist, banner, sumário ----------------------- */
.al-alerta__corpo { font-size: var(--al-text-sm); line-height: var(--al-leading-normal); color: var(--al-text-soft); }
.al-alerta__corpo p + p { margin-top: var(--al-space-3); }

.al-acordeao { display: block; }
.al-acordeao__corpo {
  padding-bottom: var(--al-space-5);
  max-width: var(--al-measure);
  color: var(--al-text-soft);
}
.al-acordeao__corpo p + p { margin-top: var(--al-space-4); }

.al-checklist__cabecalho { font-size: var(--al-text-lg); margin-bottom: var(--al-space-4); }
.al-checklist__lista { display: grid; }

.al-banner--padrao { min-height: 200px; }
.al-banner__corpo { max-width: 40ch; }

.al-sumario__item--n2 { padding-left: 0; }

.al-resposta-curta__para-quem {
  margin-top: var(--al-space-3);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}
.al-resposta-curta__para-quem .al-rotulo {
  font-weight: var(--al-weight-semibold);
  color: var(--al-on-brand-wash);
}

/* --- Autolink: ligação de entidade dentro do texto ----------------------
   Discreta de propósito. O autolink é denso; sublinhado cheio em cada termo
   transformaria o parágrafo numa teia. */
.al-autolink {
  text-decoration-color: var(--al-brand-200);
  text-underline-offset: 0.18em;
}
.al-autolink:hover { text-decoration-color: currentColor; }

/* --- Markdown do Core: listas e blocos de código ------------------------ */
.al-lista { padding-left: var(--al-space-6); }
.al-lista > li { list-style: disc; margin-bottom: var(--al-space-3); }
.al-lista > li::marker { color: var(--al-text-faint); }
ol.al-lista > li { list-style: decimal; }

.al-codigo {
  padding: var(--al-space-5);
  background: var(--al-bg-sunken);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  font-size: var(--al-text-sm);
  line-height: var(--al-leading-relaxed);
  overflow-x: auto;
}

/* --- Estrutura de página emitida pelo tema ------------------------------ */
.al-body { min-height: 100svh; }
.al-principal { display: block; }
.al-titulo { color: var(--al-text); }

/* --- Newsletter do Core -------------------------------------------------
   O Core emite `__texto`, `__forma`, `__estado`, `__rodape` e um campo de
   consentimento próprio. A anatomia é a mesma do recurso do tema: texto à
   esquerda, formulário à direita, promessa por baixo. */
.al-newsletter__texto {
  margin-top: var(--al-space-3);
  color: var(--al-text-soft);
  max-width: 46ch;
}
/* O atalho para a coisa grátis que o bloco nomeia.
   Fica ACIMA do formulário e com peso: o bloco abre a falar de uma calculadora
   que é gratuita e sem cadastro, e quem chegou por ela tem de a poder abrir
   sem deixar e-mail. O botão do formulário faz outra coisa e diz outra coisa. */
.al-newsletter__atalho {
  margin-top: var(--al-space-3);
  color: var(--al-text-soft);
  max-width: 46ch;
  font-size: var(--al-text-sm);
}
.al-newsletter__atalho a { font-weight: 600; color: var(--al-brand); }

.al-newsletter__forma { display: grid; gap: var(--al-space-4); align-content: start; }
.al-newsletter__forma .al-campo { margin-bottom: 0; }
.al-newsletter__forma .al-botao { width: 100%; }

/* Consentimento: caixa e rótulo lado a lado, alvo de toque cheio, e o rótulo
   em corpo pequeno — é texto legal, não instrução de formulário. */
.al-campo--consentimento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--al-space-3);
  align-items: start;
}
.al-campo--consentimento .al-campo__caixa { margin-top: 0.15rem; accent-color: var(--al-brand); }
.al-campo--consentimento .al-campo__rotulo {
  margin: 0;
  font-size: var(--al-text-xs);
  font-weight: var(--al-weight-regular);
  line-height: var(--al-leading-normal);
  color: var(--al-text-soft);
  cursor: pointer;
}

/* O estado só ocupa espaço quando tem o que dizer. */
.al-newsletter__estado { margin: 0; font-size: var(--al-text-sm); }
.al-newsletter__estado:empty { display: none; }
.al-newsletter__estado[data-al-estado="erro"] { color: var(--al-on-danger-wash); }
.al-newsletter__estado[data-al-estado="sucesso"] { color: var(--al-on-success-wash); }

.al-newsletter__rodape {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--al-text-xs);
  color: var(--al-text-faint);
}


/* --------------------------------------------------------------------------
   Duas classes que o markup emitia e o CSS não conhecia.
   -------------------------------------------------------------------------- */

/* Cada pedaço de meta dentro do rodapé do cartão (tipo, tempo de leitura,
   área). Vive dentro de `.al-card__meta`, que já resolve o arranjo; aqui só a
   voz do texto. */
.al-card__info {
  font-size: var(--al-text-xs);
  color: var(--al-text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.al-card__info + .al-card__info::before {
  content: "·";
  margin-right: var(--al-space-2);
  color: var(--al-border-strong);
}

/* Marca de página sem imagem de destaque, posta no <body>. Não é decoração:
   é o gancho que permite ao cabeçalho editorial ocupar o espaço que a imagem
   ocuparia, em vez de deixar um vazio com cara de erro de carregamento. */
.al-sem-imagem .al-artigo-cabecalho { padding-top: var(--al-space-8); }
.al-sem-imagem .al-artigo-cabecalho__midia { display: none; }

/* ==========================================================================
   Elementos que o Core emite e o tema ainda não conhecia.

   Apareceram quando os componentes deixaram de cair em estado vazio: enquanto
   `metrica-card` devolvia "Métrica não encontrada", a ficha de definição nunca
   chegava ao HTML, e o CSS só cobria a variante de NÚMERO (`__valor`,
   `__variacao`) que o guia de estilo mostrava. Duas leituras do mesmo
   componente, e a que aparece no produto era a que não tinha estilo.
   ========================================================================== */

/* --- Ficha de definição da métrica ------------------------------------- */

.al-metrica-card__titulo {
  margin: 0 0 var(--al-space-2);
  font-family: var(--al-font-sans);
  font-size: var(--al-text-base);
  font-weight: var(--al-weight-semibold);
  line-height: var(--al-leading-snug);
}
.al-metrica-card__sigla {
  margin-left: var(--al-space-2);
  font-size: var(--al-text-xs);
  font-weight: var(--al-weight-medium);
  letter-spacing: var(--al-tracking-caps);
  text-transform: uppercase;
  color: var(--al-on-data-wash);
  background: var(--al-data-wash);
  padding: 0.1em 0.45em;
  border-radius: var(--al-radius-sm);
  white-space: nowrap;
}
.al-metrica-card__definicao {
  margin: 0 0 var(--al-space-3);
  font-size: var(--al-text-sm);
  color: var(--al-text-soft);
}
.al-metrica-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-1) var(--al-space-4);
  margin: var(--al-space-3) 0 0;
  padding-top: var(--al-space-3);
  border-top: 1px solid var(--al-border);
  font-size: var(--al-text-xs);
  color: var(--al-text-faint);
}
.al-metrica-card__frequencia { font-variant-numeric: tabular-nums; }

/* O que a métrica NÃO diz é a parte que impede o número de virar decisão
   errada. Fica em destaque de atenção, não escondida no rodapé. */
.al-metrica-card__nao-diz {
  margin: var(--al-space-3) 0 0;
  padding: var(--al-space-3) var(--al-space-4);
  border-left: 3px solid var(--al-warn);
  background: var(--al-warn-wash);
  color: var(--al-on-warn-wash);
  font-size: var(--al-text-sm);
}

/* O motivo que liga a recomendação à medição — "porque o seu score de Vendas
   foi 0". É a frase que separa recomendar de empurrar conteúdo. */
.al-recomendacao__motivo {
  margin: var(--al-space-2) 0 0;
  padding-left: var(--al-space-4);
  border-left: 2px solid var(--al-brand-200, var(--al-border-strong));
  font-size: var(--al-text-xs);
  color: var(--al-text-soft);
}

/* --- CTA por tipo de destino --------------------------------------------
   Cada variante herda a cor do que ela oferece: diagnóstico é a marca,
   ferramenta é dado, playbook é execução, prompt é o tom de produtividade. */

.al-cta-contextual--diagnostico { border-left-color: var(--al-brand); }
.al-cta-contextual--ferramenta  { border-left-color: var(--al-data); }
.al-cta-contextual--playbook    { border-left-color: var(--al-success); }
.al-cta-contextual--prompt      { border-left-color: var(--al-ink-500); }

/* --- Rótulo do exemplo --------------------------------------------------- */

.al-exemplo__rotulo {
  display: block;
  margin-bottom: var(--al-space-1);
  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);
}

/* --- Texto longo com continuação ----------------------------------------
   O componente corta o texto e oferece o resto atrás de um <details>. Sem
   estilo, o resto aparecia solto e o gatilho parecia um parágrafo qualquer. */

.al-texto--longo > summary { list-style: none; cursor: pointer; }
.al-texto--longo > summary::-webkit-details-marker { display: none; }
.al-texto__resto { margin-top: var(--al-space-3); color: var(--al-text-soft); }
.al-texto__mais {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-1);
  font-size: var(--al-text-sm);
  font-weight: var(--al-weight-medium);
  color: var(--al-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.al-texto__mais::after { content: "↓"; font-size: 0.9em; }
.al-texto--longo[open] .al-texto__mais::after { content: "↑"; }

/* --- Armadilha de robô ---------------------------------------------------
   Campo que só um robô preenche. Fica fora do ecrã por posicionamento (o
   motor já o faz inline) e some da tabulação e dos leitores de tela — mas
   NUNCA com `display:none`, que alguns robôs também detectam. */
.al-honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Botão de ação irreversível -----------------------------------------
   Só existe um no site: apagar os dados a pedido da pessoa. Não é vermelho
   para assustar — é vermelho porque a cor é o último aviso antes de algo que
   não tem volta, e porque ele aparece ao lado de um texto que explica o que
   se perde. */
.al-botao--perigo,
.al-btn--perigo {
  background: var(--al-stop);
  border-color: var(--al-stop);
  color: var(--al-text-invert);
}
.al-botao--perigo:hover,
.al-btn--perigo:hover { background: var(--al-on-stop-wash); border-color: var(--al-on-stop-wash); }

.al-alerta__nota {
  margin-top: var(--al-space-3);
  font-size: var(--al-text-xs);
  color: var(--al-text-soft);
}

/* ==========================================================================
   ALVO DE TOQUE — 44 px, medido no navegador

   `ARCHITECTURE.md §8.5` pede 44 px e a maior parte do produto já cumpre. O
   que faltava, medido a 390 px com o rótulo e o cartão associados incluídos:
   o logótipo do cabeçalho (24 px, em todas as páginas), o botão de copiar
   (36), o botão primário (40) e os links de secção e de ficha de métrica
   (18–21), que não são texto corrido — são navegação isolada.

   Link DENTRO de prosa fica de fora de propósito: a própria WCAG 2.5.8 o
   isenta, e esticar autolink transformaria o parágrafo numa escada.
   ========================================================================== */

.al-marca,
.al-secao__link,
.al-filtro,
.al-metrica-card__titulo > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--al-touch);
}

/* O botão já tinha `min-height`, mas por uma variável de controlo (40 px) e
   não pela de toque. Quem toca com o dedo não sabe a diferença entre um
   controlo e um botão. */
.al-btn,
.al-botao,
.al-copiar,
.al-salvar {
  min-height: var(--al-touch);
}

/* O progresso do playbook aparece quando o script que o faz funcionar já
   ligou — e não quando o <head> disse que há JavaScript. Um widget interativo
   revelado antes do seu script é um widget morto à espera de um clique. */
.al-playbook-progresso { display: none; }
.al-js-passos .al-playbook-progresso { display: block; }