@charset "utf-8";
/* ==========================================================================
   fgv-components.css — biblioteca de componentes do Portal ECLASS / FGV
   --------------------------------------------------------------------------
   CSS puro, sem dependência de JavaScript nem do Tailwind.
   O Tailwind entra apenas como "tempero" (espaçamento/grid/breakpoints) no HTML.

   Índice
     1. Skip link
     2. Header
     3. Hero
     4. Footer
     5. Botões          .fgv-btn
     6. Spotlight       .fgv-spotlight   (destaque de recurso novo)
     7. Cartões         .fgv-card / .fgv-card-grid
     8. Accordion       .fgv-accordion
     9. Modal de vídeo  .fgv-modal
    10. Link de PDF     .fgv-doc-link
    11. Embed           .fgv-embed
    12. Tabela          .fgv-table
    13. Filtro/busca    .fgv-filter
    14. Blocos de apoio (.fgv-prose, .fgv-note, .fgv-group-title, .fgv-sprite)
   ========================================================================== */

/* ============================================================== 0. ícones =
   Declarado antes dos componentes de propósito: assim regras como
   .fgv-card__chevron ou .fgv-accordion__chevron conseguem sobrescrever o
   tamanho padrão sem precisar de !important.                                */
.fgv-icon {
  display: inline-block;
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex: 0 0 auto;
}
.fgv-icon--fill { fill: currentColor; stroke: none; }

/* Sprite de símbolos SVG injetado por fgv-layout.js */
.fgv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ================================================================ 1. skip */
.fgv-skip-link {
  position: absolute;
  left: var(--fgv-space-4);
  top: 0;
  z-index: 200;
  display: inline-block;
  padding: var(--fgv-space-3) var(--fgv-space-4);
  background: var(--fgv-navy);
  color: var(--fgv-on-dark);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--fgv-radius-md) var(--fgv-radius-md);
  /* Animar transform, nunca top: não recalcula layout e não "vaza" 1px
     quando o tamanho da fonte do usuário é maior que o previsto. */
  transform: translateY(-105%);
  transition: transform var(--fgv-dur) var(--fgv-ease);
}
.fgv-skip-link:visited { color: var(--fgv-on-dark); }
.fgv-skip-link:focus,
.fgv-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--fgv-on-dark);
}

/* ============================================================== 2. header */
.fgv-header {
  background: var(--fgv-white);
  border-bottom: 1px solid var(--fgv-border);
}
.fgv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fgv-space-4);
  min-height: 76px;
  padding-block: var(--fgv-space-3);
}
.fgv-header__logo { display: inline-flex; align-items: center; }
.fgv-header__logo img { display: block; height: auto; }
/* Logo do DTI: proporção 250x76 (3,29), com três linhas de texto pequeno abaixo
   do "FGV DTI". Por isso é exibido bem maior que a antiga marca CTE (148x38).
   Largura FLUIDA: 215px no desktop, encolhendo até 150px no celular. Com largura
   fixa ele brigava com o botão Voltar e jogava o header para duas linhas —
   156px de altura a 320px, metade da primeira tela de um celular pequeno. */
.fgv-header__logo img.is-dti    { width: clamp(150px, 44vw, 215px); max-width: 100%; }
.fgv-header__logo img.is-eclass { width: 248px; max-width: 55vw; }
.fgv-header__logo img.is-cte    { width: 148px; max-width: 40vw; }  /* marca antiga, sem uso */

@media (max-width: 560px) {
  /* Rede de segurança. <img> dentro de flex NÃO encolhe abaixo da largura
     declarada, então um logo largo estoura a página em vez de se ajustar — foi o
     que aconteceu a 320px (13px de estouro). O clamp() acima resolve o caso
     normal; isto cobre o resto: rótulos de Voltar mais longos, como
     "Ir para a Ajuda", passam para a segunda linha em vez de estourar. */
  .fgv-header__inner {
    flex-wrap: wrap;
    row-gap: var(--fgv-space-3);
    min-height: 0;
    padding-block: var(--fgv-space-4);
  }
  .fgv-header__logo { min-width: 0; }
}

/* ================================================================ 3. hero =
   Faixa cinza clara, não colorida. A página passa a ter três zonas distintas:
   header branco → hero em --fgv-hero-bg (#e6eaee) → conteúdo em --fgv-page-bg
   (#f7f8f9), com um filete em --fgv-border-strong fechando o hero.

   O gradiente azul pesava demais: aparecia em toda página, competia com o
   conteúdo e roubava o destaque do .fgv-spotlight, que é o único bloco que
   PRECISA chamar atenção. Agora existe um só elemento forte por página.

   Um cinza mais claro que este some contra o fundo da página — a primeira
   tentativa usou --fgv-page-bg e o topo inteiro ficou branco.                 */
/* .fgv-hero {
  background: var(--fgv-hero-bg);
  border-bottom: 1px solid var(--fgv-border-strong);
  color: var(--fgv-ink);
} */

.fgv-hero {
    background: #f4f4f4;
    border-bottom: 1px solid #ededed;
    color: var(--fgv-ink);
}

.fgv-hero__inner {
  padding-block: var(--fgv-space-6);
}
.fgv-hero__title {
  margin: 0;
  color: var(--fgv-blue);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}


/* .fgv-hero__subtitle {
  margin: var(--fgv-space-3) 0 0;
  max-width: 62ch;
  color: var(--fgv-ink);
  font-size: var(--fgv-text-lg);
} */

/* .fgv-hero__subtitle {
    margin: var(--fgv-space-3) 0 0;
    max-width: 80ch;
    color: var(--fgv-ink);
    font-size: var(--fgv-text-lg);
} */

.fgv-hero__subtitle {
    margin: var(--fgv-space-3) 0 0;
    max-width: 80ch;
    color: var(--fgv-ink);
    font-size: var(--fgv-text-md);
}

@media (max-width: 640px) {
  /* Padding reduzido MAS o título nunca é cortado (bug do #Sidebar height:15px) */
  .fgv-hero__inner { padding-block: var(--fgv-space-5); }
  .fgv-hero__subtitle { font-size: var(--fgv-text-base); }
}

/* ============================================================== 4. footer */
.fgv-footer {
  margin-top: var(--fgv-space-8);
  background: var(--fgv-navy-dark);
  color: var(--fgv-on-dark-soft);
  font-size: var(--fgv-text-sm);
}
.fgv-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fgv-space-2);
  padding-block: var(--fgv-space-5);
}
.fgv-footer a,
.fgv-footer a:visited { color: var(--fgv-on-dark); }

/* ============================================================= 5. botões */
.fgv-btn {
  --_btn-bg: var(--fgv-navy);
  --_btn-fg: var(--fgv-on-dark);
  --_btn-bd: var(--fgv-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fgv-space-2);
  min-height: var(--fgv-tap);
  padding: var(--fgv-space-3) var(--fgv-space-5);
  border: 1px solid var(--_btn-bd);
  border-radius: var(--fgv-radius-md);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  font-size: var(--fgv-text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fgv-dur) var(--fgv-ease),
              border-color var(--fgv-dur) var(--fgv-ease),
              color var(--fgv-dur) var(--fgv-ease),
              box-shadow var(--fgv-dur) var(--fgv-ease),
              transform var(--fgv-dur) var(--fgv-ease);
}
.fgv-btn:visited { color: var(--_btn-fg); }
.fgv-btn:hover, .fgv-btn.is-hover { background: var(--fgv-blue); border-color: var(--fgv-blue); color: var(--fgv-on-dark); box-shadow: var(--fgv-shadow-md); transform: translateY(-1px); }
.fgv-btn:active, .fgv-btn.is-active { transform: translateY(0); box-shadow: var(--fgv-shadow-sm); }
.fgv-btn[disabled],
.fgv-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.fgv-btn--primary   { --_btn-bg: var(--fgv-navy); --_btn-fg: var(--fgv-on-dark); --_btn-bd: var(--fgv-navy); }
.fgv-btn--secondary { --_btn-bg: transparent; --_btn-fg: var(--fgv-navy); --_btn-bd: var(--fgv-navy); }
.fgv-btn--secondary:hover, .fgv-btn--secondary.is-hover { background: var(--fgv-navy); color: var(--fgv-on-dark); }
.fgv-btn--ghost     { --_btn-bg: transparent; --_btn-fg: var(--fgv-blue); --_btn-bd: transparent; }
.fgv-btn--ghost:hover, .fgv-btn--ghost.is-hover { background: var(--fgv-surface-hover); color: var(--fgv-blue); border-color: var(--fgv-surface-hover); }

/* "Voltar" — <a> de verdade, nunca <button> dentro de <a> */
.fgv-btn--back {
  --_btn-bg: var(--fgv-navy);
  --_btn-fg: var(--fgv-on-dark);
  --_btn-bd: var(--fgv-navy);
  padding-inline: var(--fgv-space-4);
}
.fgv-btn--back .fgv-icon { transition: transform var(--fgv-dur) var(--fgv-ease); }
.fgv-btn--back:hover .fgv-icon, .fgv-btn--back.is-hover .fgv-icon { transform: translateX(-2px); }

.fgv-btn--sm { min-height: 36px; padding: var(--fgv-space-2) var(--fgv-space-4); font-size: var(--fgv-text-sm); }
.fgv-btn--md { /* padrão */ }
.fgv-btn--lg { min-height: 52px; padding: var(--fgv-space-4) var(--fgv-space-6); font-size: var(--fgv-text-lg); }

.fgv-btn--block { width: 100%; }

/* Botão claro para usar SOBRE fundo escuro (hero, spotlight, rodapé). */
/* .fgv-btn--on-dark {
  --_btn-bg: var(--fgv-white);
  --_btn-fg: var(--fgv-navy);
  --_btn-bd: var(--fgv-white);
} */

.fgv-btn--on-dark {
    --_btn-bg: #ffffff;
    --_btn-fg: var(--fgv-navy);
    --_btn-bd: #bae2f5;
}

/* .fgv-btn--on-dark:hover,
.fgv-btn--on-dark.is-hover {
  background: var(--fgv-surface-hover);
  border-color: var(--fgv-surface-hover);
  color: var(--fgv-navy);
} */

.fgv-btn--on-dark:hover, .fgv-btn--on-dark.is-hover {
    background: #ffffff;
    border-color: var(--fgv-surface-hover);
    color: var(--fgv-navy);
}

.fgv-btn--on-dark:focus-visible { outline-color: var(--fgv-white); }

/* ========================================================= 6. spotlight =
   Destaque de recurso novo. NÃO é um cartão de destino: é um anúncio, e por
   isso quebra o padrão das caixas usadas dentro das seções de plataforma.
   Existe no máximo um por página.                                          */

/* .fgv-spotlight {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fgv-space-5);
  padding: var(--fgv-space-6);
  overflow: hidden;
  border-left: 4px solid var(--fgv-cyan);
  border-radius: var(--fgv-radius-lg);
  background: var(--fgv-gradient-spotlight);
  color: var(--fgv-on-dark);
  box-shadow: var(--fgv-shadow-lg);
} */

.fgv-spotlight {
  position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--fgv-space-5);
    padding: var(--fgv-space-6);
    overflow: hidden;
    /* border-left: 4px solid #0e4258; */
    border-radius: var(--fgv-radius-lg);
    /* background: var(--fgv-gradient-spotlight); */
    color: var(--fgv-on-dark);
    /* box-shadow: var(--fgv-shadow-lg); */
    background-color: #a5e5ff57;
    border: 1px solid #daebf3;
    /* background: #A5E5FF57 !important; */
   background: linear-gradient(90deg, #cdf0ff57 0%, #cbebf5 100%);
}


/* Brilho ciano decorativo no canto superior direito — bem longe do texto,
   justamente para não derrubar o contraste. */
/* .fgv-spotlight::after {
  content: "";
  position: absolute;
  top: -45%;
  right: -8%;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 143, 211, 0.55) 0%, rgba(0, 143, 211, 0) 70%);
  pointer-events: none;
} */
.fgv-spotlight > * { position: relative; z-index: 1; }

.fgv-spotlight__badge {
  /* Alinha com o topo do texto, não com o meio do bloco: o ícone tem que ficar
     na linha do rótulo "Novo" e do título. */
  align-self: start;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--fgv-radius-md);
  background: rgba(255, 255, 255, 0.14);
}
.fgv-spotlight__badge .fgv-icon { width: 34px; height: 34px; }

/* Badge com imagem em vez de ícone SVG.
   O fundo vira BRANCO SÓLIDO de propósito: o PNG do Professor CTE não tem canal
   alfa, então sobre o badge translúcido apareceria um quadrado branco recortado.
   Assim o conjunto lê como um ícone de aplicativo sobre o gradiente. */

/* .fgv-spotlight__badge--image {
  padding: 4px;
  border-color: transparent;
  background: var(--fgv-white);
  overflow: hidden;
} */

.fgv-spotlight__badge--image {
  padding: 8px;
  border-color: transparent;
  background: var(--fgv-white);
  overflow: hidden;
  border: 2px solid #c8e6f3d4;
}

.fgv-spotlight__badge--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Compensa a margem branca EMBUTIDA no arquivo: em icone_prof_cte_v2.png o
     desenho ocupa 132x93 px de uma tela de 192x192 — 68,8% da largura, com
     30 px de sobra em cada lado. Sem isso o ícone fica perdido no meio do tile.
     1/0,688 = 1,45. O desenho está centralizado no arquivo, então escalar pelo
     centro basta; o overflow:hidden do badge corta a margem que sobra, que é
     branca sobre branco e não aparece.

     Trocou o arquivo? Meça a caixa do desenho e recalcule: escala = largura da
     tela / largura do desenho. Se o novo PNG já vier justo, apague esta linha. */
  transform: scale(1.45);
}

/* .fgv-spotlight__eyebrow {
  display: inline-block;
  margin: 0 0 var(--fgv-space-2);
  padding: 2px var(--fgv-space-3);
  border-radius: var(--fgv-radius-pill);
  background: #fbff9f;
  color: #727514;
  font-size: var(--fgv-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
} */

.fgv-spotlight__eyebrow {
    display: inline-block;
    margin: 0 0 var(--fgv-space-2);
    padding: 2px var(--fgv-space-3);
    border-radius: var(--fgv-radius-pill);
    background: #0093cf;
    color: #ffffff;
    font-size: var(--fgv-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 10px;
}


/* .fgv-spotlight__title {
  margin: 0;
  color: var(--fgv-on-dark);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
} */

.fgv-spotlight__title {
    margin: 0;
    color: #0a5170;
    font-size: clamp(1.25rem, 1.05rem + 1vw, 1.425rem);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

/* .fgv-spotlight__text {
  margin: var(--fgv-space-3) 0 0;
  max-width: 60ch;
  color: var(--fgv-on-dark-soft);
} */

.fgv-spotlight__text {
    margin: var(--fgv-space-3) 0 0;
    max-width: 60ch;
    color: #0a5170;
    line-height: 23px;
}

.fgv-spotlight__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fgv-space-2);
  margin: var(--fgv-space-4) 0 0;
}


/* .fgv-spotlight__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--fgv-space-2);
  padding: var(--fgv-space-1) var(--fgv-space-3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--fgv-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--fgv-on-dark);
  font-size: var(--fgv-text-sm);
  font-weight: 600;
}
 */
.fgv-spotlight__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--fgv-space-2);
    padding: var(--fgv-space-1) var(--fgv-space-3);
    /* border: 1px solid rgb(115 171 195); */
    border-radius: var(--fgv-radius-pill);
    background: rgb(90 155 181);
    /* color: var(--fgv-on-dark); */
    font-size: var(--fgv-text-sm);
    /* font-weight: 600; */
    min-width: 180px;
}

.fgv-spotlight__tag .fgv-icon { width: 16px; height: 16px; }
.fgv-spotlight__cta { margin: 0; }

/* ---- .fgv-spotlight--plain: mesma anatomia, sem o fundo -------------------
   Para destacar algo sem competir com o spotlight cheio. Só um por página
   também, e nunca ao lado do cheio — dois destaques lado a lado se anulam.
   A cor sai de --_cat quando a seção tem .fgv-cat; sem isso, cai no teal. */

.fgv-spotlight--plain {
  background: none;
    /* border: 1px solid var(--fgv-border); */
    /* border-left: 4px solid var(--_cat, var(--fgv-teal)); */
    /* box-shadow: var(--fgv-shadow-sm); */
    color: var(--fgv-ink);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--fgv-space-5);
    padding: var(--fgv-space-6);
    overflow: hidden;
    /* border-left: 4px solid #0e4258; */
    border-radius: var(--fgv-radius-lg);
    /* background: var(--fgv-gradient-spotlight); */
    color: var(--fgv-on-dark);
    /* box-shadow: var(--fgv-shadow-lg); */
    background-color: #f1f1f1;
    border: 1px dashed #e1e1e1;
    /* background: #eeeeee !important; */
    /* background: linear-gradient(90deg, #a5e5ff57 0%, #e6f9ff 100%);*/
}

.fgv-spotlight--plain::after { content: none; }   /* sem o brilho ciano */

/* .fgv-spotlight--plain .fgv-spotlight__badge {
  border-color: transparent;
  background: var(--_cat-soft, var(--fgv-surface-hover));
  color: var(--_cat, var(--fgv-teal));
} */

.fgv-spotlight--plain .fgv-spotlight__badge {
    border-color: #cee0e7;
    background: #ffffff;
    color: var(--_cat, var(--fgv-teal));
}

.fgv-spotlight--plain .fgv-spotlight__eyebrow {
  background: var(--_cat, var(--fgv-teal));
  color: var(--fgv-on-dark);
}

/* .fgv-spotlight--plain .fgv-spotlight__title { color: var(--_cat, var(--fgv-blue)); } */
.fgv-spotlight--plain .fgv-spotlight__title { color: #007199; }

.fgv-spotlight--plain .fgv-spotlight__text  { color: var(--fgv-ink); }
.fgv-spotlight--plain .fgv-spotlight__tag {
  border-color: var(--fgv-border);
  background: var(--_cat-soft, var(--fgv-surface-hover));
  color: var(--_cat, var(--fgv-blue));
}

@media (max-width: 900px) {
  .fgv-spotlight {
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--fgv-space-5);
    gap: var(--fgv-space-4);
  }
  .fgv-spotlight__cta { grid-column: 1 / -1; }
  .fgv-spotlight__cta .fgv-btn { width: 100%; }
}
@media (max-width: 480px) {
  .fgv-spotlight { grid-template-columns: minmax(0, 1fr); }
  .fgv-spotlight__badge { width: 52px; height: 52px; }
  .fgv-spotlight__badge .fgv-icon { width: 28px; height: 28px; }
  .fgv-spotlight::after { width: 16rem; height: 16rem; top: -30%; }
}

/* ============================================================ 7. cartões */
.fgv-card-grid {
  display: grid;
  gap: var(--fgv-space-4);
  /* 20rem e nao 17.5rem: com 280px de trilha, a faixa dos ~640px cabia 2 colunas
     e sobrava so 148px para o texto, quebrando quase todo titulo. Com 320px de
     trilha, essa faixa cai para 1 coluna e o titulo respira. */
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Em telas muito estreitas garante 1 coluna sem estouro */
@media (max-width: 380px) {
  .fgv-card-grid { grid-template-columns: 1fr; }
}

.fgv-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--fgv-space-4);
  height: 100%;
  min-height: var(--fgv-tap);
  padding: var(--fgv-space-5);
  border: 1px solid var(--fgv-border);
  border-radius: var(--fgv-radius-lg);
  background: var(--fgv-white);
  color: var(--fgv-blue);
  text-decoration: none;
  box-shadow: var(--fgv-shadow-sm);
  transition: transform 180ms var(--fgv-ease),
              box-shadow 180ms var(--fgv-ease),
              border-color 180ms var(--fgv-ease),
              background-color 180ms var(--fgv-ease);
}
/* No celular o texto vale mais que o respiro: menos padding, mais linha útil. */
@media (max-width: 480px) {
  .fgv-card { padding: var(--fgv-space-4); gap: var(--fgv-space-3); }
  .fgv-card__badge { width: 40px; height: 40px; }
  .fgv-card__badge .fgv-icon { width: 22px; height: 22px; }
}
/* Abaixo de 420px o chevron sai. Ele é decorativo (aria-hidden) e o cartão
   inteiro já é clicável — os ~30px que ele ocupava sustentam o título em uma
   linha só, que é o que importa nessa largura. */
@media (max-width: 420px) {
  .fgv-card__chevron { display: none; }
}

.fgv-card:visited { color: var(--fgv-blue); }
.fgv-card:hover, .fgv-card.is-hover {
  transform: translateY(-2px);
  border-color: var(--fgv-cyan);
  background: var(--fgv-white);
  box-shadow: var(--fgv-shadow-lg);
  color: var(--fgv-blue);
}
.fgv-card:active, .fgv-card.is-active { transform: translateY(0); box-shadow: var(--fgv-shadow-sm); }

.fgv-card__badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--fgv-radius-md);
  background: var(--fgv-surface-hover);
  color: var(--fgv-teal);
  transition: background-color 180ms var(--fgv-ease), color 180ms var(--fgv-ease);
}
.fgv-card:hover .fgv-card__badge, .fgv-card.is-hover .fgv-card__badge { background: var(--fgv-teal); color: var(--fgv-on-dark); }
.fgv-card__badge .fgv-icon { width: 24px; height: 24px; }

.fgv-card__body { flex: 1 1 auto; min-width: 0; }
.fgv-card__title {
  display: block;
  margin: 0;
  font-size: var(--fgv-text-base);
  font-weight: 700;
  color: var(--fgv-blue);
  line-height: 1.35;
}
.fgv-card__meta {
  display: block;
  margin: var(--fgv-space-1) 0 0;
  font-size: var(--fgv-text-sm);
  font-weight: 400;
  color: var(--fgv-ink);
}
.fgv-card__chevron {
  flex: 0 0 auto;
  align-self: center;
  width: 18px; height: 18px;
  color: var(--fgv-steel-light);
  transition: transform 180ms var(--fgv-ease), color 180ms var(--fgv-ease);
}
.fgv-card:hover .fgv-card__chevron, .fgv-card.is-hover .fgv-card__chevron { transform: translateX(2px); color: var(--fgv-cyan); }

/* Destaque — item novo/prioritário. A informação NÃO é dada só por cor:
   há a etiqueta textual .fgv-card__tag. */
.fgv-card--featured {
  border-color: var(--fgv-cyan);
  background: linear-gradient(180deg, #f4fbff 0%, #ffffff 60%);
}
.fgv-card__tag {
  display: inline-block;
  margin-bottom: var(--fgv-space-2);
  padding: 2px var(--fgv-space-2);
  border-radius: var(--fgv-radius-pill);
  background: var(--fgv-teal);
  color: var(--fgv-on-dark);
  font-size: var(--fgv-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ================================================== 7.1 cor por categoria =
   `.fgv-cat` + um modificador definem duas variáveis locais, e todo o resto do
   bloco só as consome. Para criar uma categoria nova: acrescente dois tokens em
   fgv-tokens.css e UMA regra `.fgv-cat--nome` aqui. Nada além disso.

   A cor entra em poucos pontos, de propósito: ícone e título do grupo, título e
   badge do cartão, e a borda no hover. O FUNDO do cartão continua branco e a
   linha de apoio continua em --fgv-ink — sem isso a página viraria um mosaico e
   o texto perderia legibilidade.                                             */
.fgv-cat {
  --_cat: var(--fgv-blue);
  --_cat-soft: var(--fgv-surface-hover);
}
.fgv-cat--eclass { --_cat: var(--fgv-cat-eclass); --_cat-soft: var(--fgv-cat-eclass-soft); }
.fgv-cat--teams  { --_cat: var(--fgv-cat-teams);  --_cat-soft: var(--fgv-cat-teams-soft); }
.fgv-cat--zoom   { --_cat: var(--fgv-cat-zoom);   --_cat-soft: var(--fgv-cat-zoom-soft); }
.fgv-cat--office { --_cat: var(--fgv-cat-office); --_cat-soft: var(--fgv-cat-office-soft); }

.fgv-cat .fgv-group-title { color: var(--_cat); }
.fgv-cat .fgv-group-title .fgv-icon { color: var(--_cat); }

/* Título do cartão na cor da categoria. A linha de apoio (.fgv-card__meta) NÃO
   muda: ela é texto corrido e fica em --fgv-ink, que tem mais contraste. */
.fgv-cat .fgv-card__title { color: var(--_cat); }

.fgv-cat .fgv-card__badge { background: var(--_cat-soft); color: var(--_cat); }
.fgv-cat .fgv-card:hover,
.fgv-cat .fgv-card.is-hover { border-color: var(--_cat); }
.fgv-cat .fgv-card:hover .fgv-card__badge,
.fgv-cat .fgv-card.is-hover .fgv-card__badge { background: var(--_cat); color: var(--fgv-on-dark); }
.fgv-cat .fgv-card:hover .fgv-card__chevron,
.fgv-cat .fgv-card.is-hover .fgv-card__chevron { color: var(--_cat); }

/* O cartão em destaque dentro de uma categoria usa a cor dela, não o azul fixo. */
.fgv-cat .fgv-card--featured {
  border-color: var(--_cat);
  background: linear-gradient(180deg, var(--_cat-soft) 0%, var(--fgv-white) 60%);
}
.fgv-cat .fgv-card__tag { background: var(--_cat); }

/* =========================================================== 8. accordion */
.fgv-accordion {
  border: 1px solid var(--fgv-border);
  border-radius: var(--fgv-radius-lg);
  background: var(--fgv-white);
  box-shadow: var(--fgv-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--fgv-dur) var(--fgv-ease);
}
.fgv-accordion:hover { box-shadow: var(--fgv-shadow-md); }

.fgv-accordion__header {
  padding: var(--fgv-space-4) var(--fgv-space-5);
  background: var(--fgv-gradient-band);
  color: var(--fgv-on-dark);
}
.fgv-accordion__header > :first-child { margin-top: 0; }
.fgv-accordion__header h2,
.fgv-accordion__header h3 {
  margin: 0;
  color: var(--fgv-on-dark);
  font-size: var(--fgv-text-xl);
  font-weight: 600;
}
.fgv-accordion__header p {
  margin: var(--fgv-space-2) 0 0;
  color: var(--fgv-on-dark-soft);
  font-size: var(--fgv-text-sm);
  line-height: 1.5;
}

.fgv-accordion__item + .fgv-accordion__item { border-top: 1px solid var(--fgv-border); }
.fgv-accordion__item > h3,
.fgv-accordion__item > h4 { margin: 0; font-size: inherit; }

.fgv-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--fgv-space-3);
  width: 100%;
  min-height: var(--fgv-tap);
  padding: var(--fgv-space-3) var(--fgv-space-5);
  border: 0;
  background: var(--fgv-surface-alt);
  color: var(--fgv-ink-soft);
  font-size: var(--fgv-text-base);
  font-weight: 600;
  text-align: left;
  transition: background-color var(--fgv-dur) var(--fgv-ease),
              color var(--fgv-dur) var(--fgv-ease);
}
.fgv-accordion__trigger:hover, .fgv-accordion__trigger.is-hover { background: var(--fgv-surface-hover); color: var(--fgv-blue); }
.fgv-accordion__trigger[aria-expanded="true"] {
  background: var(--fgv-surface-hover);
  color: var(--fgv-blue);
  box-shadow: inset 0 -3px 0 0 var(--fgv-cyan);
}
.fgv-accordion__trigger > span { flex: 1 1 auto; }

.fgv-accordion__chevron {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  color: var(--fgv-steel);
  transition: transform var(--fgv-dur-slow) var(--fgv-ease), color var(--fgv-dur) var(--fgv-ease);
}
.fgv-accordion__trigger[aria-expanded="true"] .fgv-accordion__chevron {
  transform: rotate(90deg);
  color: var(--fgv-cyan);
}

.fgv-accordion__panel {
  padding: var(--fgv-space-5);
  background: var(--fgv-white);
  border-top: 1px solid var(--fgv-border);
  font-size: var(--fgv-text-sm);
}
.fgv-accordion__panel > :last-child { margin-bottom: 0; }
.fgv-accordion__panel[hidden] { display: none; }

/* Rodapé de ação do painel (onde vive o "Acesse aqui") */
.fgv-accordion__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--fgv-space-2);
  margin-top: var(--fgv-space-4);
}

/* =============================================================== 9. modal */
.fgv-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--fgv-space-4);
  background: rgba(1, 33, 66, 0.72);
  opacity: 0;
  transition: opacity var(--fgv-dur) var(--fgv-ease);
}
.fgv-modal.is-open { display: flex; opacity: 1; }

.fgv-modal__dialog {
  position: relative;
  width: 100%;
  max-width: min(64rem, 92vw);
  max-height: min(92vh, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--fgv-radius-lg);
  background: var(--fgv-white);
  box-shadow: var(--fgv-shadow-lg);
  transform: translateY(-16px);
  opacity: 0;
  transition: transform var(--fgv-dur) var(--fgv-ease), opacity var(--fgv-dur) var(--fgv-ease);
}
.fgv-modal.is-open .fgv-modal__dialog { transform: translateY(0); opacity: 1; }

.fgv-modal__header {
  display: flex;
  align-items: flex-start;
  gap: var(--fgv-space-3);
  padding: var(--fgv-space-4) var(--fgv-space-5);
  background: var(--fgv-white);
  border-bottom: 1px solid var(--fgv-border);
}
.fgv-modal__title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--fgv-blue);
  font-size: var(--fgv-text-lg);
  font-weight: 700;
  line-height: 1.3;
}
.fgv-modal__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--fgv-tap); height: var(--fgv-tap);
  margin: calc(var(--fgv-space-2) * -1) calc(var(--fgv-space-2) * -1) 0 0;
  border: 1px solid transparent;
  border-radius: var(--fgv-radius-md);
  background: transparent;
  color: var(--fgv-ink-soft);
  transition: background-color var(--fgv-dur) var(--fgv-ease), color var(--fgv-dur) var(--fgv-ease);
}
.fgv-modal__close:hover, .fgv-modal__close.is-hover { background: var(--fgv-surface); color: var(--fgv-navy); }
.fgv-modal__close .fgv-icon { width: 20px; height: 20px; }

.fgv-modal__body { background: #000; overflow: auto; }

/* Links DENTRO do modal — escopado. Nunca `a { all: unset }` global. */
.fgv-modal a,
.fgv-modal a:visited { color: var(--fgv-cyan); }

/* ======================================================== 10. link de PDF */
.fgv-doc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fgv-space-3);
  min-height: var(--fgv-tap);
  padding: var(--fgv-space-2) var(--fgv-space-4) var(--fgv-space-2) var(--fgv-space-3);
  border: 1px solid var(--fgv-border);
  border-radius: var(--fgv-radius-md);
  background: var(--fgv-white);
  color: var(--fgv-blue);
  font-size: var(--fgv-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--fgv-dur) var(--fgv-ease),
              border-color var(--fgv-dur) var(--fgv-ease),
              box-shadow var(--fgv-dur) var(--fgv-ease),
              transform var(--fgv-dur) var(--fgv-ease);
}
.fgv-doc-link:visited { color: var(--fgv-blue); }
.fgv-doc-link:hover, .fgv-doc-link.is-hover {
  transform: translateY(-1px);
  border-color: var(--fgv-cyan);
  background: var(--fgv-surface-hover);
  box-shadow: var(--fgv-shadow-sm);
  color: var(--fgv-navy);
}
.fgv-doc-link:active, .fgv-doc-link.is-active { transform: translateY(0); }
.fgv-doc-link .fgv-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--fgv-teal); }
.fgv-doc-link__ext {
  flex: 0 0 auto;
  padding: 1px var(--fgv-space-2);
  border-radius: var(--fgv-radius-sm);
  background: var(--fgv-surface);
  color: var(--fgv-ink-soft);
  font-size: var(--fgv-text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.fgv-doc-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fgv-space-2);
  margin: 0; padding: 0;
  list-style: none;
}
.fgv-doc-list li { margin: 0; }

/* =============================================================== 11. embed */
.fgv-embed {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--fgv-radius-md);
  background: #000;
}
.fgv-embed--16x9 { aspect-ratio: 16 / 9; }
.fgv-embed--4x3  { aspect-ratio: 4 / 3; }
.fgv-embed > iframe,
.fgv-embed > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Formulário/aplicação de altura variável: sem proporção fixa */
.fgv-embed--form {
  aspect-ratio: auto;
  background: var(--fgv-white);
  border: 1px solid var(--fgv-border);
}
.fgv-embed--form > iframe {
  position: static;
  height: clamp(560px, 90vh, 900px);
}
.fgv-embed__caption {
  margin-top: var(--fgv-space-2);
  color: var(--fgv-ink-muted);
  font-size: var(--fgv-text-sm);
}

/* ============================================================== 12. tabela */
.fgv-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--fgv-border);
  border-radius: var(--fgv-radius-md);
}
.fgv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fgv-text-sm);
  background: var(--fgv-white);
}
.fgv-table caption {
  padding: var(--fgv-space-3);
  color: var(--fgv-ink-soft);
  font-weight: 600;
  text-align: left;
}
.fgv-table th {
  padding: var(--fgv-space-3) var(--fgv-space-4);
  background: var(--fgv-teal);
  color: var(--fgv-on-dark);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.fgv-table td {
  padding: var(--fgv-space-3) var(--fgv-space-4);
  border-top: 1px solid var(--fgv-border);
  color: var(--fgv-ink);
}
.fgv-table tbody tr:nth-child(even) td { background: var(--fgv-page-bg); }

/* ============================================================== 13. filtro */
.fgv-filter { margin-bottom: var(--fgv-space-5); }
.fgv-filter__field {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 30rem;
}
.fgv-filter__field .fgv-icon {
  position: absolute;
  left: var(--fgv-space-3);
  width: 20px; height: 20px;
  color: var(--fgv-steel);
  pointer-events: none;
}
.fgv-filter__input {
  width: 100%;
  min-height: var(--fgv-tap);
  padding: var(--fgv-space-3) var(--fgv-space-4) var(--fgv-space-3) 2.75rem;
  border: 1px solid var(--fgv-border-strong);
  border-radius: var(--fgv-radius-md);
  background: var(--fgv-white);
  color: var(--fgv-ink);
  font-size: var(--fgv-text-base);
  transition: border-color var(--fgv-dur) var(--fgv-ease), box-shadow var(--fgv-dur) var(--fgv-ease);
}
.fgv-filter__input::placeholder { color: var(--fgv-ink-muted); }
.fgv-filter__input:hover, .fgv-filter__input.is-hover { border-color: var(--fgv-steel); }
.fgv-filter__status {
  margin-top: var(--fgv-space-2);
  color: var(--fgv-ink-muted);
  font-size: var(--fgv-text-sm);
  min-height: 1.4em;
}
.fgv-filter-empty {
  padding: var(--fgv-space-6);
  border: 1px dashed var(--fgv-border-strong);
  border-radius: var(--fgv-radius-md);
  background: var(--fgv-white);
  color: var(--fgv-ink-soft);
  text-align: center;
}
.fgv-filter-empty[hidden] { display: none; }

/* =================================================== 14. blocos de apoio */
.fgv-prose { max-width: 100%; }
.fgv-prose p { text-align: left; }

.fgv-section { margin-block: var(--fgv-space-7); }
.fgv-section:first-of-type { margin-top: var(--fgv-space-6); }

.fgv-group-title {
  display: flex;
  align-items: center;
  gap: var(--fgv-space-3);
  margin: 0 0 var(--fgv-space-4);
  color: var(--fgv-blue);
  font-size: var(--fgv-text-lg);
  font-weight: 700;
}
.fgv-group-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--fgv-border);
}
.fgv-group-title .fgv-icon { width: 20px; height: 20px; color: var(--fgv-teal); }

.fgv-note {
  padding: var(--fgv-space-4) var(--fgv-space-5);
  border-left: 4px solid var(--fgv-cyan);
  border-radius: var(--fgv-radius-md);
  background: var(--fgv-white);
  box-shadow: var(--fgv-shadow-sm);
}

/* Colunas de tutoriais — substitui .colunas-tutorial { float: left } */
.fgv-columns {
  display: grid;
  gap: var(--fgv-space-5);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .fgv-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fgv-stack {
  display: grid;
  gap: var(--fgv-space-5);
  align-content: start;
}

/* Trava de scroll do <body> quando o modal está aberto */
body.fgv-scroll-locked { overflow: hidden; }

.m-top {
  margin-top: 20px;
}