/* bloco acessibilidade: atalhos de salto, botao flutuante e painel.
   Segue o padrao dos sites de governo (A- A A+, alto contraste, Libras,
   atalhos Alt+numero), mas sem a barra cinza no topo, que brigaria com
   o hero. Estado guardado no localStorage. */

/* ---------- links de salto, aparecem so no teclado ---------- */
.pular {
  position: fixed; z-index: 500; top: 12px; left: 12px;
  padding: 14px 22px; border-radius: 999px;
  background: var(--teal); color: var(--dark);
  font-size: 14px; font-weight: 700;
  translate: 0 -160%;
  transition: translate .35s var(--mola);
}
.pular:focus-visible { translate: 0 0; outline: 3px solid #fff; outline-offset: 2px; }
.pular:nth-of-type(2):focus-visible { translate: 0 0; }

/* ---------- botao flutuante ---------- */
.acesso { position: fixed; z-index: 210; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); }
.acesso__botao {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding-inline: 16px;
  border-radius: 999px;
  background: var(--dark); color: #fff;
  box-shadow: inset 0 0 0 1px var(--dark-line), 0 14px 34px rgba(0, 0, 0, .38);
  font-size: 13px; font-weight: 600;
  transition: background-color .35s var(--suave), color .35s var(--suave), transform .45s var(--mola);
}
.acesso__botao:hover { transform: translateY(-2px); background: var(--teal); color: var(--dark); }
.acesso__rotulo { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .5s var(--mola); }
.acesso__botao:hover .acesso__rotulo, .acesso__botao:focus-visible .acesso__rotulo { max-width: 140px; }

/* ---------- painel ---------- */
.acesso__painel {
  position: absolute; bottom: 64px; left: 0;
  width: 296px; padding: 22px;
  border-radius: 22px;
  background: rgba(10, 23, 25, .97); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--dark-line), 0 28px 70px rgba(0, 0, 0, .5);
  color: #fff;
}
.acesso__painel[hidden] { display: none; }
.acesso__titulo { font-family: var(--display); font-weight: 900; font-size: 22px; margin-bottom: 18px; }
.acesso__grupo { padding-block: 16px; box-shadow: inset 0 1px 0 var(--dark-line); }
.acesso__nome { display: block; margin-bottom: 10px; color: #888b8f; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.acesso__botoes { display: flex; gap: 8px; }
.acesso__botoes--coluna { flex-direction: column; }
.acesso__botoes button {
  flex: 1; min-height: 42px; padding-inline: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: #fff; font-size: 13px; font-weight: 600;
  transition: background-color .3s var(--suave), color .3s var(--suave);
}
.acesso__botoes button:hover { background: color-mix(in srgb, var(--teal) 18%, transparent); color: var(--teal); }
.acesso__botoes button[aria-pressed="true"], .acesso__botoes button.ativo { background: var(--teal); color: var(--dark); }
.acesso__botoes small { font-size: 11px; vertical-align: super; }
.acesso__atalhos { display: flex; flex-direction: column; gap: 8px; color: #a8abaf; font-size: 12px; }
.acesso__atalhos kbd { display: inline-block; min-width: 22px; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); font: inherit; text-align: center; }
.acesso__limpar { width: 100%; margin-top: 16px; min-height: 40px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--dark-line); color: #a8abaf; font-size: 12px; transition: color .3s var(--suave); }
.acesso__limpar:hover { color: #fff; }

@media (max-width: 680px) {
  .acesso__painel { width: min(300px, calc(100vw - 40px)); }
}

/* ---------- alto contraste ----------
   Preto de fundo, branco no texto, amarelo nos elementos acionaveis, que
   e o padrao dos sites de governo. Some com veus, marcas d'agua e
   gradientes decorativos, que so atrapalham nesse modo. */
html[data-contraste="alto"] body,
html[data-contraste="alto"] main > section,
html[data-contraste="alto"] .eventos__palco,
html[data-contraste="alto"] .ecossistema__palco,
html[data-contraste="alto"] footer,
html[data-contraste="alto"] .cabecalho.solido,
html[data-contraste="alto"] .acesso__painel { background: #000 !important; }

html[data-contraste="alto"] *, html[data-contraste="alto"] .section-lead { color: #fff !important; }
html[data-contraste="alto"] a,
html[data-contraste="alto"] .eyebrow,
html[data-contraste="alto"] em,
html[data-contraste="alto"] .teal-link,
html[data-contraste="alto"] button { color: #ffd300 !important; }
html[data-contraste="alto"] a:focus-visible, html[data-contraste="alto"] button:focus-visible { outline: 3px solid #ffd300 !important; }
html[data-contraste="alto"] .pill, html[data-contraste="alto"] .acesso__botao { background: #000 !important; box-shadow: inset 0 0 0 2px #ffd300 !important; }
html[data-contraste="alto"] svg { stroke: #ffd300 !important; }
html[data-contraste="alto"] img { filter: grayscale(1) contrast(1.2); }

/* decoracao que atrapalha no modo de alto contraste */
html[data-contraste="alto"] .hero__veu,
html[data-contraste="alto"] .hero__foto,
html[data-contraste="alto"] .eventos__veu,
html[data-contraste="alto"] .eventos__midia::after,
html[data-contraste="alto"] .manifesto__marca,
html[data-contraste="alto"] .manifesto__faisca,
html[data-contraste="alto"] .rodape__marca,
html[data-contraste="alto"] .ecossistema__vertical,
html[data-contraste="alto"] .luz-cursor,
html[data-contraste="alto"] .elo,
html[data-contraste="alto"] .contato::after { display: none !important; }

/* o texto vazado do hero precisa virar texto cheio aqui */
html[data-contraste="alto"] .hero__linha2,
html[data-contraste="alto"] .eventos__selo strong,
html[data-contraste="alto"] .rodape__marca span { -webkit-text-stroke: 0 !important; background: none !important; color: #fff !important; }