@charset "utf-8";
/* ==========================================================================
   fgv-base.css — reset, tipografia, links, foco, utilitários, anti-FOUC
   --------------------------------------------------------------------------
   CSS puro. NÃO depende de JavaScript nem do Tailwind.
   Se o Tailwind falhar em carregar, a página continua legível e navegável.
   ========================================================================== */

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--fgv-page-bg);
  color: var(--fgv-ink);
  font-family: var(--fgv-font);
  font-size: var(--fgv-text-base);
  line-height: var(--fgv-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--fgv-space-3); line-height: 1.25; color: var(--fgv-blue); font-weight: 600; }
h1 { font-size: var(--fgv-text-3xl); }
h2 { font-size: var(--fgv-text-2xl); }
h3 { font-size: var(--fgv-text-xl); }
h4 { font-size: var(--fgv-text-lg); }

p { margin: 0 0 var(--fgv-space-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--fgv-space-4); padding-left: 1.35rem; }
li + li { margin-top: var(--fgv-space-1); }

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--fgv-border); margin: var(--fgv-space-6) 0; }

strong, b { font-weight: 600; color: var(--fgv-ink-soft); }

code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }

/* ---------------------------------------------------------------- links -- */
a {
  color: var(--fgv-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--fgv-dur-fast) var(--fgv-ease);
}
a:hover { color: var(--fgv-navy); }

/* NÃO existe regra global `a:visited` — e isso é deliberado.
   ---------------------------------------------------------------------------
   `a:visited` tem especificidade (0,1,1): pseudo-classe + tipo. Isso GANHA de
   qualquer componente de classe única, como .fgv-btn (0,1,0). E botão Voltar,
   cartão do hub, link de PDF e skip link são todos <a>.

   Já aconteceu: com `a:visited { color: var(--fgv-teal) }`, o teal #007199 caía
   sobre o navy #013d7c do botão Voltar — 1,95:1 de contraste, contra os 4,5:1
   exigidos pela WCAG. Depois da primeira visita, o texto "Voltar" praticamente
   desaparecia, em todas as páginas.

   Compensar isso componente por componente exige confiar em como cada navegador
   resolve `var()` dentro de `:visited` (que só aceita um conjunto restrito de
   propriedades). Preferimos eliminar a causa: link visitado usa a mesma cor do
   link normal. É também o comportamento do site antigo, então não há regressão.

   Se um dia quiser marcar link já visitado, faça APENAS em contexto de texto e
   com uma cor que passe no contraste sobre o fundo daquele contexto, por exemplo:

     .fgv-prose a:visited { color: var(--fgv-navy); }

   O navy dá 10:1 sobre o fundo #f7f8f9. Nunca no seletor `a` solto. As declarações `:visited` em fgv-components.css são
   a segunda rede de proteção, para o caso de alguém reintroduzir uma regra global. */

/* ----------------------------------------------------------------- foco -- */
:focus-visible {
  outline: var(--fgv-focus-ring);
  outline-offset: var(--fgv-focus-offset);
  border-radius: var(--fgv-radius-sm);
}
/* Navegadores sem :focus-visible ainda mostram foco visível */
:focus:not(:focus-visible) { outline: none; }

/* .is-focus / .is-hover / .is-active: usados por assets/componentes.html para
   exibir os estados lado a lado. Reaproveitam as MESMAS declarações dos
   estados reais (ver fgv-components.css) — a galeria não pode divergir. */
.is-focus {
  outline: var(--fgv-focus-ring);
  outline-offset: var(--fgv-focus-offset);
  border-radius: var(--fgv-radius-sm);
}

/* ---------------------------------------------------------- formulários -- */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }

/* ------------------------------------------------------------ estrutura -- */
.fgv-container {
  width: 100%;
  max-width: var(--fgv-container);
  margin-inline: auto;
  padding-inline: var(--fgv-gutter);
}
@media (max-width: 480px) {
  .fgv-container { padding-inline: 1rem; }
}

/* <main> cresce para empurrar o rodapé até o fim da viewport */
main { flex: 1 0 auto; }

/* ---------------------------------------------------------- utilitários -- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto; white-space: normal;
}

.fgv-text-center { text-align: center; }

/* ----------------------------------------------------------- anti-FOUC --
   O build de navegador do Tailwind gera as utilities por JavaScript.
   Escondemos o conteúdo por, no máximo, ~1,5s até o Tailwind terminar.
   Com JavaScript DESLIGADO a classe nunca é adicionada → nada é escondido.
   O <noscript> abaixo é a segunda rede de proteção.
   -------------------------------------------------------------------------- */
html.fgv-tw-pending body > *:not(noscript) { visibility: hidden; }

/* -------------------------------------------------- entrada da página --- */
@keyframes fgv-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fgv-enter {
  animation: fgv-enter 320ms var(--fgv-ease) both;
}
.fgv-enter-1 { animation-delay: 40ms; }
.fgv-enter-2 { animation-delay: 80ms; }
.fgv-enter-3 { animation-delay: 120ms; }

/* --------------------------------------------------- movimento reduzido -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ impressão -- */
@media print {
  .fgv-header, .fgv-footer, .fgv-skip-link, .fgv-filter { display: none !important; }
  body { background: #fff; }
  .fgv-accordion__panel { display: block !important; }
}