/* ==========================================================================
   home.css — Início (role-aware) · "Rota Noturna"
   Depends on albergue-tokens.css.
   ========================================================================== */

.home-saudacao { margin: var(--space-2) 0 var(--space-5); }
.home-saudacao__nome {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.6rem;
  margin: 0;
  color: var(--color-text);
}
.home-saudacao__papel {
  margin: var(--space-1) 0 0;
  color: var(--color-text-soft);
  font-size: .95rem;
}

/* --------------------------------------------------------------------------
   Progress card (Caminheiro)
   -------------------------------------------------------------------------- */
.progresso-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--space-5);
}
/* O cartão inteiro navega para "O meu progresso". O indicador "Validar" fica
   fora deste link (é um link próprio) — âncoras aninhadas são HTML inválido. */
.progresso-card { transition: transform .15s ease, box-shadow .15s ease; }
.progresso-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px -14px rgba(30, 20, 60, .45);
}
.progresso-card__link { display: block; color: #fff; }
.progresso-card__link:hover { color: #fff; }
.progresso-card__link:focus-visible {
  outline: 2px solid var(--color-accent-lime);
  outline-offset: 4px;
  border-radius: var(--radius);
}
.progresso-card__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.progresso-card__seta {
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, .55);
  transition: transform .15s ease, color .15s ease;
}
.progresso-card:hover .progresso-card__seta {
  color: #fff;
  transform: translateX(3px);
}

.progresso-card__label {
  margin: 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-accent-lime);
  font-weight: 700;
}
.progresso-card__label--barra {
  color: rgba(255, 255, 255, .7);
  font-weight: 400;
  margin-bottom: var(--space-2);
}
.progresso-card__data {
  margin: var(--space-1) 0 0;
  font-size: .85rem;
  color: rgba(255, 255, 255, .72);
}
.progresso-card__etapa {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.4rem;
  margin: var(--space-2) 0 var(--space-4);
}
.progresso-card__pct {
  margin: var(--space-3) 0 0;
  font-weight: 600;
  font-size: .9rem;
  color: rgba(255, 255, 255, .85);
}

/* Anel de percentagem + linha de resumo */
.progresso-anel-linha {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-5);
}
.progresso-anel { width: 108px; height: 108px; flex-shrink: 0; }
.progresso-anel__fundo {
  fill: none;
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 14;
}
.progresso-anel__arco {
  fill: none;
  stroke: var(--color-accent-lime);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dasharray .4s ease;
}
.progresso-anel__pct {
  fill: #fff;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.75rem;
}
.progresso-resumo__label {
  margin: 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .72);
}
.progresso-resumo__contagens {
  margin: var(--space-1) 0 0;
  font-size: .95rem;
  font-weight: 600;
}

/* Barra "Objetivos" segmentada — 6 áreas FACEIS */
.objetivos-barra {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(255, 255, 255, .18);
}
/* flex-grow proporcional à contagem — as 3 secções preenchem sempre a barra */
.objetivos-barra__seg { display: block; height: 100%; flex-basis: 0; min-width: 0; }
.objetivos-barra__seg--concluido { background: var(--color-accent-lime); }
/* RN07/QA13 — "em curso" é âmbar. Lime e âmbar ficam adjacentes e o contraste
   entre os dois é 1,24:1: a falha de 2px acima (gap) deixa ver a calha e é ela
   que marca a fronteira. Não remover o gap. */
.objetivos-barra__seg--curso { background: var(--color-accent-amber); }
.objetivos-barra__seg--iniciar { background: rgba(255, 255, 255, .18); }

/* Especialidades do Caminheiro (R4.1–R4.6 de
   correcoes-especialidades-e-paginas-iniciais.md) — anel pequeno, ao lado das
   áreas cobertas; o mesmo espírito do indicador "Validar" logo a seguir. */
.progresso-especialidades {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: inherit;
  text-decoration: none;
}
.progresso-especialidades:hover,
.progresso-especialidades:focus-visible { color: var(--color-accent-lime); }
.progresso-especialidades:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .75);
  outline-offset: 2px;
}
.progresso-especialidades__anel { width: 56px; height: 56px; flex-shrink: 0; }
.progresso-especialidades__anel .progresso-anel__pct { font-size: 1.1rem; }
.anel-seccao--esp-aprovada { stroke: var(--color-accent-lime); }
.anel-seccao--esp-em_curso { stroke: var(--color-accent-amber); }
.anel-seccao--esp-nao_iniciada { stroke: rgba(255, 255, 255, .18); }
.progresso-especialidades__info { min-width: 0; }
.progresso-especialidades__label {
  margin: 0 0 var(--space-1);
  font-size: .95rem;
  font-weight: 600;
}
.progresso-especialidades__areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.progresso-especialidades-areas__simbolo {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.progresso-especialidades-areas__simbolo--letra {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}

/* Indicador "Validar" (Guia / Sub-guia) */
.progresso-validar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
}
.progresso-validar:hover { color: var(--color-accent-lime); }
.progresso-validar__label { font-size: .95rem; font-weight: 600; }
/* QA14 — âmbar ("a aguardar ação"); o rosa deixou de ser usado no cartão do Caminheiro. */
.progresso-validar__num {
  min-width: 26px;
  padding: 2px 9px;
  text-align: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent-amber);
  color: var(--color-accent-amber-ink);
  font-weight: 700;
  font-size: .9rem;
}

/* --------------------------------------------------------------------------
   Cartão do Clã (Animador) — pagina-inicial-animador

   Chamou-se `.comunidade-card` até a renomeação «Comunidade → Cla» passar o
   template a `.cla-card` (docs/specs/core/correcoes-modal-atividade-e-painel-do-cla.md
   §1.2). A folha só acompanhou agora — até aqui o «hero» do Animador ficou sem
   estilo. Ver docs/specs/core/acerto-verde-residual-e-correcoes-visuais.md, ponto 11.

   Mesma estrutura do cartão do Caminheiro; só muda a matiz do fundo (FR02).
   -------------------------------------------------------------------------- */
.cla-card {
  background: linear-gradient(135deg,
              var(--color-categoria-animador) 0%,
              var(--color-categoria-animador-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--space-5);
}
.cla-card__label {
  margin: 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-accent-lime);
  font-weight: 700;
}
.cla-card__label--barra {
  color: rgba(255, 255, 255, .7);
  font-weight: 400;
  margin: var(--space-5) 0 var(--space-2);
}
/* R3 de ordem-do-cartao-do-animador.md — o traço que separa o grupo do
   progresso do grupo das especialidades. Vive no rótulo, e não numa <hr>
   própria, para desaparecer com o bloco todo quando a comunidade não tem
   especialidades: solto, ficava a sublinhar a última linha do cartão (Q1/R8).

   É mais marcado do que o traço da .acoes-lista, que separa um indicador das
   suas próprias ações — aqui muda-se de assunto (Q2). A diferença está na cor,
   com o dobro da opacidade, e no ar por cima; não na espessura: a 2px, sobre o
   verde do cartão, deixaria de se ler como separador e passaria a ler-se como
   barra, que é a forma que ali ao lado significa dados. */
.cla-card__label--grupo {
  border-top: 1px solid rgba(255, 255, 255, .32);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
}
/* RN12 — o qualificador do título evita que os dois indicadores (que medem
   populações diferentes) se leiam como partes do mesmo todo. */
.cla-card__qualificador {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(255, 255, 255, .72);
}
.cla-card__vazio {
  margin: var(--space-3) 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
}

/* Anel de 4 secções (FR04) */
.anel-seccao {
  fill: none;
  stroke-width: 14;
  transition: stroke-dasharray .4s ease;
}
.anel-seccao--concluidos { stroke: var(--color-accent-lime); }
.anel-seccao--caminho { stroke: var(--color-accent-amber); }
.anel-seccao--iniciar { stroke: var(--color-accent-pink); }
.anel-seccao--definir { stroke: rgba(255, 255, 255, .18); }
.progresso-anel__rotulo {
  fill: rgba(255, 255, 255, .72);
  font-size: .8rem;
}

.anel-legenda { list-style: none; margin: 0; padding: 0; min-width: 0; }
.anel-legenda__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 0;
  font-size: .9rem;
}
.anel-legenda__marca {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.anel-legenda__marca--concluidos { background: var(--color-accent-lime); }
.anel-legenda__marca--caminho { background: var(--color-accent-amber); }
.anel-legenda__marca--iniciar { background: var(--color-accent-pink); }
.anel-legenda__marca--definir { background: rgba(255, 255, 255, .28); }
.anel-legenda__rotulo { color: rgba(255, 255, 255, .82); }
.anel-legenda__valor { margin-left: auto; font-weight: 700; }

/* Barra "Elementos por etapa" (FR06) — escala ordinal, do Desprendimento
   (mais escuro) à Construção (mais claro), RN13. */
.etapas-barra__seg { display: block; height: 100%; flex-basis: 0; min-width: 0; }
.etapas-barra__seg--0 { background: rgba(255, 255, 255, .20); }
.etapas-barra__seg--1 { background: rgba(255, 255, 255, .38); }
.etapas-barra__seg--2 { background: rgba(255, 255, 255, .58); }
.etapas-barra__seg--3 { background: rgba(255, 255, 255, .82); }

.etapas-legenda {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  /* Uma coluna em ecrã estreito — "Desprendimento (Adesão)" não cabe a dois. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px var(--space-3);
}
.etapas-legenda__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .82rem;
  min-width: 0;
}
.etapas-legenda__marca {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.etapas-legenda__marca--0 { background: rgba(255, 255, 255, .20); }
.etapas-legenda__marca--1 { background: rgba(255, 255, 255, .38); }
.etapas-legenda__marca--2 { background: rgba(255, 255, 255, .58); }
.etapas-legenda__marca--3 { background: rgba(255, 255, 255, .82); }
.etapas-legenda__nome {
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* BUG2 — sem `margin-left: auto`: o número fica junto ao nome (o `gap` do item
   separa-os); `flex-shrink: 0` faz o nome encurtar antes de o número ser cortado. */
.etapas-legenda__valor { flex-shrink: 0; font-weight: 700; }

/* Barra "Especialidades" (R3.1 de correcoes-especialidades-e-paginas-iniciais.md)
   — só os três estados em curso; "A aprovar" em âmbar, para se ler como a
   mesma urgência do *callout* logo abaixo (`.acoes-item__num`). */
.especialidades-barra__seg { display: block; height: 100%; flex-basis: 0; min-width: 0; }
.especialidades-barra__seg--nao_iniciada { background: rgba(255, 255, 255, .20); }
.especialidades-barra__seg--caminho { background: rgba(255, 255, 255, .50); }
.especialidades-barra__seg--aprovar { background: var(--color-accent-amber); }

.especialidades-legenda {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2px var(--space-3);
}
.especialidades-legenda__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .82rem;
  min-width: 0;
}
.especialidades-legenda__marca {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.especialidades-legenda__marca--nao_iniciada { background: rgba(255, 255, 255, .20); }
.especialidades-legenda__marca--caminho { background: rgba(255, 255, 255, .50); }
.especialidades-legenda__marca--aprovar { background: var(--color-accent-amber); }
.especialidades-legenda__nome {
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.especialidades-legenda__valor { flex-shrink: 0; font-weight: 700; }

/* Lista de ações (FR07) — apresentada sempre, mesmo a zero */
.acoes-lista {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
/* R4 de ordem-do-cartao-do-animador.md — o callout das especialidades é a
   continuação da barra que tem por cima, não um grupo novo: o traço já foi
   dado pelo rótulo do grupo. Sem traço, também não faz sentido manter o espaço
   que só existe para o afastar dele. */
.acoes-lista--continua {
  margin-top: var(--space-3);
  padding-top: 0;
  border-top: none;
}
/* Cada linha é uma ligação para "Ações pendentes" (FR09.2 de
   pagina-inicial-animador): herda a cor do cartão e ganha um alvo de toque
   confortável, sem parecer um botão. */
.acoes-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: var(--transicao);
}
.acoes-item:hover,
.acoes-item:focus-visible {
  background: rgba(255, 255, 255, .10);
  color: inherit;
}
.acoes-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .75);
  outline-offset: 1px;
}
.acoes-item__label { font-size: .95rem; font-weight: 600; }
/* A seta indica que a linha navega, sem depender do hover. */
.acoes-item__label::after {
  content: " ›";
  color: rgba(255, 255, 255, .6);
  font-weight: 400;
}
.acoes-item__num {
  min-width: 26px;
  padding: 2px 9px;
  text-align: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent-amber);
  color: var(--color-accent-amber-ink);
  font-weight: 700;
  font-size: .9rem;
}

/* --------------------------------------------------------------------------
   Quick-action cards
   -------------------------------------------------------------------------- */
.home-acoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.acao-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, border-color .15s ease;
}
.acao-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.acao-card__titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
}
.acao-card__meta { font-size: .85rem; color: var(--color-text-soft); }

/* docs/specs/Licenciamento/botao-na-pagina-inicial.md, R2 — fora do grid
   .home-acoes de propósito (Q1): não é um quarto cartão de navegação.

   correcoes-apresentacao.md, C1 — o botão passa a ter a altura dos .acao-card
   acima e um roxo mais claro, para se ler como a chamada à ação que é e não
   como um rodapé fino. Regra própria: não se toca no .btn--primario partilhado
   nem no .acao-card. */
.home-licenciamento {
  margin-top: var(--space-3);
}
.home-licenciamento .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 76px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-family: var(--font-title);
  font-size: 1.05rem;
  text-align: center;
  /* O texto é longo: sem isto o `white-space: nowrap` do .btn base transborda
     num telemóvel estreito. */
  white-space: normal;
  text-wrap: pretty;
  /* Encarnado de ação (--color-acao), como qualquer .btn--primario — só a
     forma (altura, alinhamento, quebra de linha) é própria deste botão. Já foi
     um roxo próprio no Abrigo e o verde de marca no Albergue; segue agora o
     token de ação. Ver docs/specs/core/ajustes-de-cor-topo-acoes-visitante.md. */
  background: var(--color-acao);
  border-color: var(--color-acao);
}
.home-licenciamento .btn:hover {
  background: var(--color-acao-dark);
  border-color: var(--color-acao-dark);
}

/* --------------------------------------------------------------------------
   Hero animado (logged-out) — Caminho de Emaús

   design_handoff_painel_entrada/README.md. Encena Lc 24,13-16 em SVG+CSS
   puro (sem bibliotecas de animação): a estrada desenha-se, dois caminhantes
   sobem-na a conversar, um terceiro junta-se-lhes a meio, e os seis sinais da
   IV Secção acendem à passagem — Tenda, Vara Bifurcada, Bíblia, Fogueira,
   Mochila, Pão. Ao fim de ~7s a sequência está completa e, depois de um
   compasso de repouso (chama a tremeluzir, estrada a respirar), reinicia do
   princípio — corre em contínuo enquanto a página estiver aberta. O reinício
   vem do <script> no topo do parcial: de `CICLO` em `CICLO` ms põe e tira a
   classe `.hero-caminho--reiniciar` (regra mais abaixo), que zera `animation`
   em bloco; com um reflow pelo meio, cada elemento volta ao fotograma zero e
   as animações rearrancam dos seus `animation-delay`.
   `prefers-reduced-motion: reduce` fica fora disto: entrega o fotograma final
   imóvel e o script nem cria o temporizador.

   A ilustração (SVG + caminhantes + símbolos) é inteiramente decorativa
   (aria-hidden) e vive numa "stage" de tamanho fixo (1280×720 desktop,
   390×760 telemóvel) escalada com `transform: scale()` a partir da largura
   do contentor (`container-type: inline-size`) — o mesmo truque de divisão
   de comprimentos em `calc()` já usado acima em `.home-hero__simbolos` com
   `cqw`. Isto preserva a geometria pixel-a-pixel do desenho em qualquer
   largura de ecrã, incluindo o `offset-path` dos caminhantes (que não
   escalaria sozinho). O título, subtítulo e CTA ficam FORA dessa stage, em
   HTML de fluxo normal com tipografia responsiva — para SEO, zoom de texto e
   leitores de ecrã, a landing continua com um único <h1> real.
   -------------------------------------------------------------------------- */
.hero-caminho {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* A secção herda a proporção exata da stage (390×760) — é o que garante
     que a ilustração escalada preenche a secção sem sobra nem corte,
     independentemente da largura do ecrã. Muda para 1280×720 a partir do
     breakpoint de desktop, abaixo. */
  aspect-ratio: 390 / 760;
  max-width: 480px;
  margin: 0 auto var(--space-5);
  /* Fundo encarnado profundo em gradiente — o hero lê-se como um cartão sobre
     a página clara (--color-bg é oklch 96%), à maneira do hero do Abrigo, que
     usa o indigo de marca. Fica na cor de identidade da secção (H 24), não no
     verde do primary. Contraste página/hero 8.7–14.3:1; análise completa em
     docs/specs/core/hero-caminho-fundo-escuro.md §5.3. */
  background: linear-gradient(150deg, oklch(40% 0.132 24) 0%, oklch(26% 0.10 24) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.hero-caminho__ilustracao {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-caminho__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
}
.hero-caminho__viewport--desktop { display: none; }
.hero-caminho__viewport--mobile { display: block; }

.hero-caminho__stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
}
.hero-caminho__stage--desktop {
  width: 1280px;
  height: 720px;
  /* Divisão de dois comprimentos (cqw ÷ px) dá um número puro — é o que
     `scale()` exige. É a mesma família de truque de `--hero-deriva` acima,
     só que aqui a divisão faz-se dentro do próprio `calc()` do `scale()`.
     `translateX` à direita de `scale` aplica-se primeiro, em coordenadas
     nativas de 1280px — desloca a composição para a direita antes de o
     conjunto ser escalado, afastando-a da coluna de texto à esquerda
     (docs/specs/core/ajustes-hero-caminho-emaus.md, R3). */
  transform: scale(calc(100cqw / 1280px)) translateX(140px);
}
.hero-caminho__stage--mobile {
  width: 390px;
  height: 760px;
  transform: scale(calc(100cqw / 390px));
}

.hero-caminho__svg { position: absolute; inset: 0; display: block; }

.hce-caminhante { position: absolute; left: 0; top: 0; width: 26px; height: 34px; offset-rotate: 0deg; }
.hce-caminhante--m { width: 20px; height: 26px; }

.hce-simbolo { position: absolute; }
.hce-simbolo > div { position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   Conteúdo real (título, subtítulo, CTA) — HTML normal, fora da stage
   -------------------------------------------------------------------------- */
.hero-caminho__conteudo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 7% 7% 22%;
  /* Scrim escuro só no telemóvel: o texto assenta por cima da ilustração e
     precisa de fundo para se ler. No desktop (≥768px) isto passa a `none` — o
     texto fica na coluna à esquerda, sobre o gradiente do hero. */
  background: linear-gradient(oklch(24% 0.09 24) 0%, oklch(24% 0.09 24) 58%, transparent 100%);
}
.hero-caminho__titulo {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1.05;
  margin: 0;
  color: #FFFFFF;
}
.hero-caminho__sub {
  margin: 0;
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #EAC7C4;
}
.hero-caminho__acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.hero-caminho__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 34px;
  /* Encarnado de ação (--color-acao): este botão foi a origem do tom (#CE3B31,
     #E0494A aprofundado o mínimo para o branco passar AA — 4.9:1), que passou a
     token partilhado. Sobre um fundo também encarnado o contraste de luminância
     é fraco (~2:1), por isso o destaque vem do texto branco e do brilho
     exterior. Ver docs/specs/core/hero-caminho-fundo-escuro.md §5.4 e
     docs/specs/core/ajustes-de-cor-topo-acoes-visitante.md R5. */
  background: var(--color-acao);
  color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 6px 22px -6px rgba(224, 73, 74, .55), 0 0 0 1px rgba(255, 255, 255, .12);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
}
.hero-caminho__btn:hover { background: var(--color-acao-dark); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Versículo de Emaús (Lc 24,32) — sobe do fundo quando os caminhantes chegam
   ao Pão, fica durante o repouso, sai antes do reinício. É conteúdo, não
   decoração: `<blockquote>` fora do aria-hidden da ilustração (ver o template
   e docs/specs/core/hero-versiculo-emaus.md). O véu próprio garante a leitura
   independentemente do que a ilustração tenha por trás. `data-anim-once` no
   elemento leva o @media de motion reduzido a mostrá-lo fixo, e o reinício em
   bloco (.hero-caminho--reiniciar) a rearrancá-lo a cada volta.
   -------------------------------------------------------------------------- */
.hero-caminho__versiculo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 44px 22px 20px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: .9rem;
  line-height: 1.5;
  color: #EAC7C4;
  text-align: center;
  text-wrap: balance;
  background: linear-gradient(to top, rgba(40, 3, 9, .94) 0%, rgba(40, 3, 9, .82) 55%, transparent 100%);
  pointer-events: none;
  animation: hce-versiculo 6.3s ease 6.9s both;
}
.hero-caminho__versiculo p { margin: 0; }
.hero-caminho__versiculo cite {
  display: block;
  margin-top: .5em;
  font-style: normal;
  font-size: .78em;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #D8A9A4;
}

/* --------------------------------------------------------------------------
   Tablet / desktop — troca de stage e layout do texto em coluna à esquerda
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero-caminho { aspect-ratio: 1280 / 720; max-width: 1280px; }
  .hero-caminho__viewport--desktop { display: block; }
  .hero-caminho__viewport--mobile { display: none; }
  .hero-caminho__conteudo {
    inset: 0;
    justify-content: center;
    max-width: 460px;
    padding: 0 0 0 7.5%;
    background: none;
  }
  .hero-caminho__titulo { font-size: 3.2rem; }
  .hero-caminho__sub { font-size: 1.2rem; }
  .hero-caminho__acoes { flex-direction: row; align-items: center; gap: 24px; }
  .hero-caminho__versiculo {
    padding: 56px 7% 26px;
    font-size: 1rem;
  }
  /* O véu vai de bordo a bordo do hero (herda left:0; right:0 da regra base);
     a medida curta da linha de texto, que o max-width do véu garantia antes,
     passa para o próprio parágrafo — 774px, a mesma medida efetiva de então
     (900px menos o padding lateral de 7%, box-sizing: border-box). Ver
     docs/specs/core/hero-versiculo-mascara-largura-total.md. */
  .hero-caminho__versiculo p { max-width: 774px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   Animação — keyframes (Caminho de Emaús)
   -------------------------------------------------------------------------- */
@keyframes hce-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes hce-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hce-step { from { opacity: 0; } to { opacity: .5; } }
@keyframes hce-glow { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.12); } }
@keyframes hce-dot { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes hce-walk {
  0% { offset-distance: 9.8%; opacity: 0; }
  7% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}
@keyframes hce-walk2 {
  0% { offset-distance: 0%; opacity: 0; }
  7% { opacity: 1; }
  100% { offset-distance: 90.2%; opacity: 1; }
}
@keyframes hce-walk3 {
  0% { offset-distance: 2%; }
  37.8% { offset-distance: 58.4%; }
  100% { offset-distance: 96.2%; }
}
/* Variantes do telemóvel — a curva vertical tem outra geometria, os valores
   finais de offset-distance são os do PainelFrameMobile.dc.html. */
@keyframes hce-walk-m1 {
  0% { offset-distance: 10.4%; opacity: 0; }
  7% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}
@keyframes hce-walk-m2 {
  0% { offset-distance: 0%; opacity: 0; }
  7% { opacity: 1; }
  100% { offset-distance: 89.6%; opacity: 1; }
}
@keyframes hce-walk-m3 {
  0% { offset-distance: 2%; }
  37.8% { offset-distance: 58%; }
  100% { offset-distance: 100%; }
}
@keyframes hce-ring {
  0% { transform: scale(.45); opacity: .75; }
  70% { opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}
@keyframes hce-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hce-settle { from { transform: scale(.985); } to { transform: scale(1); } }
@keyframes hce-flicker { 0%, 100% { opacity: 1; transform: scaleY(1); } 50% { opacity: .86; transform: scaleY(1.045); } }
@keyframes hce-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .93; } }
@keyframes hce-versiculo {
  0%   { opacity: 0; transform: translateY(14px); }
  13%  { opacity: 1; transform: translateY(0); }
  86%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* --------------------------------------------------------------------------
   Congelar a sequência de entrada — só com motion reduzido.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-caminho [data-anim-once],
  .hero-caminho [data-anim-loop] {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  .hero-caminho [data-step] { opacity: .5 !important; }
  .hero-caminho [data-ring] { opacity: 0 !important; }
  .hero-caminho [data-w1] { offset-distance: 100% !important; }
  .hero-caminho .hero-caminho__stage--desktop [data-w2] { offset-distance: 90.2% !important; }
  .hero-caminho .hero-caminho__stage--desktop [data-w3] { offset-distance: 96.2% !important; }
  .hero-caminho .hero-caminho__stage--mobile [data-w2] { offset-distance: 89.6% !important; }
  .hero-caminho .hero-caminho__stage--mobile [data-w3] { offset-distance: 100% !important; }
}
/* --------------------------------------------------------------------------
   Reinício em contínuo — o <script> no topo do parcial põe esta classe, força
   um reflow e tira-a. Zerar `animation` faz cada elemento largar o
   preenchimento `both` e voltar ao seu style inline (fotograma zero); ao tirar
   a classe, tudo rearranca dos `animation-delay`. Um só fotograma, imperceptível.
   -------------------------------------------------------------------------- */
.hero-caminho.hero-caminho--reiniciar [data-anim-once],
.hero-caminho.hero-caminho--reiniciar [data-anim-loop] {
  animation: none !important;
}

/* R1.1 de docs/specs/core/correcoes-apresentacao-e-acesso.md — as regras do
   cartão "Por validar" (.validar-card e companhia) saíram com a secção que
   as usava. A .badge-estado que lá aparecia não vive aqui: é partilhada. */

/* A faixa de estatísticas do Animador ("Caminheiros ativos" / "A meio de uma
   etapa") foi substituída pelo .cla-card — FR10.1. */

/* --------------------------------------------------------------------------
   Tablet / desktop
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  /* R14 — tantas colunas quantos os cartões que a página tem: hoje três na
     página pública e três na do Caminheiro, e o número pode voltar a divergir.
     Com o `repeat(3, 1fr)` que aqui estava, os dois cartões que a página
     pública tinha então ocupavam duas de três colunas e a fila acabava a
     dois terços da largura do hero, com a terceira coluna vazia.
     O `none` é preciso: sem ele, o `1fr` da regra base continuaria a definir
     uma coluna explícita e os cartões seguintes iriam para colunas implícitas
     de tamanho diferente. */
  .home-acoes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .home-saudacao__nome { font-size: 1.9rem; }
}