/* =========================================================================
   assets/20_hm_home.css — módulo Início (PREFIX "hm")

   Todo seletor parte de .hm-app: o Dash serve assets/ em qualquer rota, então
   quem isola é o root, não o nome do arquivo.
   ========================================================================= */

/* Tokens do módulo. No ROOT do pacote e não em :root — o 00_base.css publica
   um conjunto fechado (--ink/--muted/--paper/--panel/--line/--green/--lime/
   --red) e tudo fora dele é deste pacote. Apagar este bloco deixa todo var()
   abaixo sem valor e a página cai no CSS base, sem erro nenhum. */
.hm-app {
  --hm-sp: clamp(20px, 5vw, 64px);
  --hm-r: 16px;
  --hm-sombra: 0 18px 44px rgba(23, 33, 28, .07);
  --hm-sombra-alta: 0 24px 56px rgba(23, 33, 28, .13);

  display: block;
  min-height: 100vh;
  padding: clamp(48px, 8vw, 104px) var(--hm-sp) var(--hm-sp);
}

/* ---------------------------------------------------------------- cabeçalho */
.hm-app .hm-hero { max-width: 920px; margin-bottom: clamp(32px, 5vw, 56px); }

.hm-app .hm-hero__eyebrow {
  margin: 0;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hm-app .hm-hero__titulo {
  max-width: 850px;
  margin: 12px 0 16px;
  font: 700 clamp(44px, 8vw, 88px)/.96 Georgia, serif;
  letter-spacing: -.05em;
}

.hm-app .hm-hero__descricao {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
}

/* ------------------------------------------------------------------ atalhos */
.hm-app .hm-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 960px;
}

.hm-app .hm-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--hm-r);
  background: var(--panel);
  box-shadow: var(--hm-sombra);
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.hm-app .hm-card:hover,
.hm-app .hm-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: var(--hm-sombra-alta);
}

.hm-app .hm-card:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.hm-app .hm-card__titulo { font: 700 24px/1.2 Georgia, serif; }

.hm-app .hm-card__descricao {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.hm-app .hm-card__acao {
  margin-top: 6px;
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 560px) {
  .hm-app .hm-atalhos { grid-template-columns: 1fr; }
}