/* ==========================================================================
   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;
}

/* --------------------------------------------------------------------------
   Comunidade card (Animador) — pagina-inicial-animador
   Mesma estrutura do cartão do Caminheiro; só muda a matiz do fundo (FR02).
   -------------------------------------------------------------------------- */
.comunidade-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);
}
.comunidade-card__label {
  margin: 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-accent-lime);
  font-weight: 700;
}
.comunidade-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. */
.comunidade-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. */
.comunidade-card__qualificador {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(255, 255, 255, .72);
}
.comunidade-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;
}
.etapas-legenda__valor { margin-left: auto; 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 { margin-left: auto; 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;
  /* Tom próprio (Roxo, mais claro do que --color-primary) simplificado: no
     Albergue usa-se diretamente a marca, já com contraste de sobra (7.4:1,
     branco por cima). */
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.home-licenciamento .btn:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   Hero animado (logged-out)

   docs/specs/core/hero-animado-na-pagina-inicial-implementacao.md, Passo 4.
   Paisagem em paralaxe: três camadas a três velocidades, cinco caminheiros a
   balançar e quatro símbolos a atravessar o céu. Tudo para com
   `prefers-reduced-motion: reduce` (R4).
   -------------------------------------------------------------------------- */
.home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 270px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--space-5);
}

/* Halo lima no canto superior direito. */
.home-hero__ceu {
  position: absolute;
  inset: 0;
  opacity: .55;
  background: radial-gradient(circle at 78% 22%, rgba(201, 242, 74, .35), transparent 42%);
}

/* As três faixas de paisagem. São tiles que repetem na horizontal: a
   velocidade muda só no `animation-duration` de cada uma. */
.home-hero__camada {
  position: absolute;
  left: 0;
  right: 0;
  background-repeat: repeat-x;
  background-position: 0 bottom;
}
.home-hero__montanhas {
  bottom: 74px;
  height: 200px;
  opacity: .9;
  background-image: url('../img/hero/hero-mountains.svg');
  background-size: 1200px 200px;
  animation: hero-desloca-fundo 90s linear infinite;
}
.home-hero__colinas {
  bottom: 40px;
  height: 160px;
  background-image: url('../img/hero/hero-hills.svg');
  background-size: 1000px 160px;
  animation: hero-desloca-meio 52s linear infinite;
}
.home-hero__acampamento {
  bottom: 0;
  height: 150px;
  background-image: url('../img/hero/hero-camp.svg');
  background-size: 1400px 150px;
  animation: hero-desloca-frente 34s linear infinite;
}

/* O brilho sob a tribo. */
.home-hero__fogueira {
  position: absolute;
  left: 4%;
  bottom: 36px;
  width: 280px;
  height: 120px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(201, 242, 74, .22), transparent 68%);
}

.home-hero__tribo {
  position: absolute;
  left: 6%;
  bottom: 30px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.home-hero__tribo img { animation: hero-balanco 1.1s ease-in-out infinite; }

/* Q5 — alturas e atrasos vinham em `style="..."` no pacote de design. Os
   atrasos diferentes são o que dá a cadência de marcha. */
.home-hero__tribo img:nth-child(1) { height: 65px; animation-delay: .88s; }
.home-hero__tribo img:nth-child(2) { height: 70px; animation-delay: .66s; }
.home-hero__tribo img:nth-child(3) { height: 63px; animation-delay: .44s; }
.home-hero__tribo img:nth-child(4) { height: 68px; animation-delay: .22s; }
.home-hero__tribo img:nth-child(5) { height: 77px; }

/* `container-type` para a deriva medir o hero e não a janela — ver abaixo. */
.home-hero__simbolos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size;
}
.home-hero__simbolos img {
  position: absolute;
  left: 100%;
  /* Os símbolos são azuis sobre transparente: o filtro põe-nos a branco. */
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(201, 242, 74, .42));
  animation: hero-deriva linear infinite;
  /* Largura da janela — o que corre em browsers sem container queries. */
  --hero-deriva: calc(-100vw - 220px);
}
/* Onde `cqw` existe, a deriva passa a medir a largura do próprio hero: num
   ecrã largo, `100vw` fazia o símbolo sair do hero a um terço do percurso e
   passar o resto invisível. */
@supports (width: 1cqw) {
  .home-hero__simbolos img { --hero-deriva: calc(-100cqw - 220px); }
}
.home-hero__simbolos img:nth-child(1) {
  top: 8%; width: 104px; opacity: .5; animation-duration: 24s;
}
.home-hero__simbolos img:nth-child(2) {
  top: 20%; width: 98px; opacity: .45; animation-duration: 30s; animation-delay: 10s;
}
.home-hero__simbolos img:nth-child(3) {
  top: 44%; width: 92px; opacity: .42; animation-duration: 27s; animation-delay: 5s;
}
.home-hero__simbolos img:nth-child(4) {
  top: 58%; width: 84px; opacity: .44; animation-duration: 26s; animation-delay: 15s;
}

/* O padding de baixo é o que mantém o botão acima do acampamento. */
.home-hero__conteudo {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 720px;
  padding: 46px 24px 134px;
  text-align: center;
  color: #fff;
}
.home-hero__titulo {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -.01em;
  margin: 0 0 10px;
  color: #fff;
  text-shadow: 0 4px 22px rgba(15, 9, 48, .55);
}
.home-hero__sub {
  margin: 0 0 22px;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 2px 14px rgba(15, 9, 48, .6);
  text-wrap: pretty;
}
.home-hero__btn {
  display: inline-block;
  padding: 13px 34px;
  background: var(--color-accent-lime);
  color: var(--color-accent-lime-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 10px 26px -10px rgba(201, 242, 74, .7);
}
.home-hero__btn:hover { background: oklch(87% .19 130); color: var(--color-accent-lime-ink); }

@keyframes hero-desloca-fundo {
  from { background-position: 0 bottom; }
  to { background-position: -1200px bottom; }
}
@keyframes hero-desloca-meio {
  from { background-position: 0 bottom; }
  to { background-position: -1000px bottom; }
}
@keyframes hero-desloca-frente {
  from { background-position: 0 bottom; }
  to { background-position: -1400px bottom; }
}
@keyframes hero-balanco {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}
@keyframes hero-deriva {
  from { transform: translateX(0) rotate(0); }
  to { transform: translateX(var(--hero-deriva)) rotate(-24deg); }
}

@media (max-width: 640px) {
  .home-hero { min-height: 330px; }
  .home-hero__conteudo { padding: 34px 18px 120px; }
  .home-hero__titulo { font-size: 1.9rem; }
  .home-hero__sub { font-size: .95rem; }
  .home-hero__tribo { left: 2%; transform: scale(.74); transform-origin: left bottom; }
  .home-hero__simbolos img { width: 62px; }
}

/* R4 — o !important é o que vence os `animation-*` dos :nth-child() acima. */
@media (prefers-reduced-motion: reduce) {
  .home-hero__camada,
  .home-hero__tribo img,
  .home-hero__simbolos img { 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 .comunidade-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; }
}