/* ==========================================================================
   GLOSSÁRIO  (/glossario)
   ==========================================================================
   Página de consulta, não de leitura. Quem chega aqui já tem um termo na
   cabeça e quer a definição em segundos — veio de uma apólice na mesa, de um
   e-mail da seguradora ou de uma busca pela sigla solta.

   Isso dita três decisões:

   1. HERO CURTO E SEM FOTO. Foto de caminhão empurraria o índice para baixo
      da dobra, e o índice é o produto desta página. As demais páginas de
      índice do site usam .hero-indice, com imagem; esta não (mesma lógica da
      família de legislação — ver a nota no topo de lei.css).

   2. ALFABETO FIXO NO TOPO. A navegação A–Z gruda abaixo do header enquanto a
      pessoa rola. Em página de consulta, voltar ao topo para trocar de letra é
      o atrito que faz desistir.

   3. <dl> DE VERDADE. Termo em <dt>, definição em <dd>. É a marcação que
      descreve o que a página é, e é o que leitor de tela e extrator de dados
      esperam de um glossário.

   Blocos:
     .glos-hero        faixa escura com título e contagem
     .glos-alfabeto    navegação A–Z, fixa ao rolar
     .glos-letra       cada seção de letra
     .glos-termo       o verbete
   ========================================================================== */

/* ---------- 1. Hero ---------- */

.glos-hero {
  padding-block: var(--sp-5) clamp(var(--sp-10), 6vw, var(--sp-16));
  background: var(--c-navy);
  color: var(--c-white);
}

.glos-migalhas { margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-10)); }
.glos-migalhas .migalhas__lista { color: rgb(255 255 255 / 0.6); }

/* A palavra é o letreiro da página, não um rótulo: quem chega por busca de um
   termo solto precisa reconhecer onde caiu antes de ler qualquer outra coisa.
   Por isso ela vem maior que o próprio H1 (decisão do cliente, 14/10/2026).
   O H1 continua sendo o H1 para busca e leitor de tela — o que mudou é só o
   peso visual. */
.glos-hero__marca {
  font-size: var(--fs-50);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-blue);
}

.glos-hero__titulo {
  max-width: 20ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-28);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: rgb(255 255 255 / 0.92);
}

.glos-hero__lead {
  max-width: 62ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-18);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.82);
}

/* ---------- 2. Alfabeto ---------- */

/* Gruda logo abaixo do header. O deslocamento é --header-h, e não um número
   escrito aqui: com 72px fixos a barra parava 12px ATRÁS do header de 84px e
   parecia ter encolhido ao rolar — foi o que o cliente viu em 14/10/2026.
   Todo sticky do site usa essa variável; este era o único que não usava. */
.glos-alfabeto {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  padding-block: var(--sp-4);
  background: var(--c-gray-100);
  border-bottom: 1px solid var(--c-gray-150);
}

.glos-alfabeto__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.glos-letra-link {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding-inline: var(--sp-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  background: var(--c-white);
  border: 1px solid var(--c-gray-150);
  border-radius: var(--r-input);
}
a.glos-letra-link:hover {
  text-decoration: none;
  color: var(--c-blue-text);
  border-color: var(--c-blue);
}

/* Letra sem nenhum verbete: continua visível para a fileira não ter buracos,
   mas não é link e não finge que leva a algum lugar. */
.glos-letra-link--vazia {
  color: var(--c-gray);
  background: transparent;
  border-style: dashed;
}

/* ---------- 3. Verbetes ---------- */

.glos-lista { padding-block: clamp(var(--sp-10), 5vw, var(--sp-16)); }

.glos-letra + .glos-letra { margin-top: clamp(var(--sp-10), 5vw, var(--sp-14)); }

/* O deslocamento compensa o header mais o alfabeto fixo: sem isso, o link
   A–Z deixa o título da letra escondido atrás dos dois. A barra tem 65px de
   altura; a folga extra dá respiro entre ela e o título. */
.glos-letra__titulo {
  scroll-margin-top: calc(var(--header-h) + 65px + var(--sp-5));
  padding-bottom: var(--sp-3);
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  color: var(--c-blue);
  border-bottom: 2px solid var(--c-gray-150);
}

/* O vão entre linhas é maior que o entre colunas de propósito: numa lista de
   consulta, o que separa um verbete do seguinte é o espaço em branco acima
   dele. Com o mesmo gap nos dois eixos, quatro definições de três linhas viram
   um bloco cinza só e a pessoa perde o lugar ao rolar (ajuste pedido pelo
   cliente em 14/10/2026). */
.glos-letra__termos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(var(--sp-6), 4vw, var(--sp-12));
  row-gap: clamp(var(--sp-8), 4vw, var(--sp-12));
  margin: clamp(var(--sp-6), 3vw, var(--sp-8)) 0 0;
}

.glos-termo { scroll-margin-top: calc(var(--header-h) + 65px + var(--sp-5)); }

.glos-termo__nome {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
}
.glos-termo__sigla {
  margin-left: var(--sp-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: var(--c-gray);
}

.glos-termo__texto {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--text-body);
}

/* Sempre em linha própria. Como inline-block, ele emendava no fim do texto em
   uns verbetes e caía sozinho em outros, conforme a definição quebrasse —
   duas aparências para o mesmo elemento na mesma tela. */
.glos-termo__veja {
  display: block;
  width: fit-content;
  margin-top: var(--sp-3);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  /* Azul da marca, e não o tom escuro: a regra do cliente é que #00668f só
     apareça em hover (07/10/2026). Este arquivo nasceu violando isso. */
  color: var(--c-blue);
}
.glos-termo__veja:hover { color: var(--c-blue-text); text-decoration: underline; }

/* ==========================================================================
   TELAS MENORES
   ========================================================================== */

@media (max-width: 860px) {
  .glos-letra__termos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  /* No celular o alfabeto rola em faixa própria: duas linhas de pílulas comiam
     meia tela. O `top` NÃO é redefinido aqui — --header-h já vale 72px nesta
     largura, e era justamente um número escrito à mão que fazia a barra sumir
     atrás do header. */
  .glos-alfabeto__lista {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .glos-alfabeto__lista::-webkit-scrollbar { display: none; }
}