/* ===========================================================================
   Stephanes 2210 · plugin de acessibilidade
   ---------------------------------------------------------------------------
   Barra de ajustes para quem enxerga pouco ou não enxerga: corpo do texto,
   contraste, cor, espaçamento, cursor, guia de leitura e leitura em voz alta.
   Três regras guiaram o desenho:
     · o painel é da campanha, não de um plugin genérico: navy, amarelo cívico
       e a faixa verde-amarela do logotipo no topo do cartão;
     · nada aqui depende de servidor de terceiro, então funciona offline, não
       vaza visitante para fora e não some se o fornecedor cair;
     · cada ajuste é um botão com aria-pressed, porque leitor de tela precisa
       ouvir se a opção está ligada, não só qual é o nome dela.
   O ajuste de corpo do texto NÃO mora aqui: como o site usa px e clamp(), ele
   é medido e reaplicado em JavaScript (ver assets/js/acessibilidade.js).
   =========================================================================== */

.acess { font-family: var(--fonte); }

/* ── botão flutuante ────────────────────────────────────────────────────── */
/* Canto esquerdo de propósito: o direito já é do WhatsApp, e dois botões
   disputando o mesmo canto viram um alvo só para quem tem baixa visão. */
.acess-abrir {
  position: fixed; left: 18px; z-index: 130;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--azul-republica); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(11,36,80,.34), 0 2px 6px rgba(11,36,80,.2);
  transition: transform .3s var(--mola), background-color .3s ease;
}
.acess-abrir svg { width: 30px; height: 30px; }
.acess-abrir:hover { transform: translateY(-3px); background: var(--azul-institucional); }
.acess-abrir[aria-expanded="true"] { background: var(--azul-institucional); }
/* ponto amarelo avisa, sem abrir o painel, que já existe ajuste ligado */
.acess-abrir.tem-ajuste::after {
  content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--amarelo-civico); box-shadow: 0 0 0 3px var(--azul-institucional);
}

/* ── painel ─────────────────────────────────────────────────────────────── */
.acess-painel {
  position: fixed; left: 18px; z-index: 140;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: 328px; max-height: calc(100vh - 120px); overflow: hidden auto; overscroll-behavior: contain;
  background: var(--papel); color: var(--tinta); border-radius: var(--r-g);
  box-shadow: var(--s3), 0 24px 64px rgba(11,36,80,.28);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transform-origin: 0 100%;
  transition: opacity .25s var(--mola), transform .25s var(--mola), visibility .25s;
}
.acess-painel.aberto { opacity: 1; visibility: visible; transform: none; }
.acess-painel .faixa-topo { height: 5px; background: var(--faixa); }

.acess-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; background: var(--azul-institucional); color: #fff;
}
/* o site pinta todo h2 de navy, e navy sobre o cabeçalho navy some */
.acess-cab h2 { font-family: var(--fonte-titulo); font-size: 15px; line-height: 1.1; letter-spacing: .02em; color: #fff; }
.acess-cab p { font-size: 11.5px; color: rgba(255,255,255,.72); margin-top: 3px; font-weight: 500; }
.acess-fechar {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center;
}
.acess-fechar:hover { background: rgba(255,255,255,.26); }
.acess-fechar svg { width: 18px; height: 18px; }

.acess-corpo { padding: 14px 16px 16px; }
.acess-grupo + .acess-grupo { margin-top: 16px; }
.acess-grupo > h3 {
  font-family: var(--fonte); font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tinta-50); margin-bottom: 9px;
}

/* ── controle de corpo do texto ─────────────────────────────────────────── */
.acess-texto {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
  border: 1px solid var(--linha); border-radius: var(--r-m); padding: 6px;
}
.acess-texto button {
  height: 38px; border: 0; border-radius: var(--r-p); cursor: pointer;
  background: var(--gelo-fundo); color: var(--azul-institucional); font-weight: 800; font-size: 16px;
}
.acess-texto button:hover { background: var(--amarelo-civico); }
.acess-texto button:disabled { opacity: .4; cursor: not-allowed; background: var(--gelo-fundo); }
.acess-texto .valor { text-align: center; font-weight: 800; font-size: 14px; color: var(--tinta); }
.acess-texto .valor small { display: block; font-size: 10.5px; font-weight: 600; color: var(--tinta-50); letter-spacing: .04em; }

/* ── grade de ajustes ───────────────────────────────────────────────────── */
.acess-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acess-item {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px;
  padding: 10px; border: 1px solid var(--linha); border-radius: var(--r-m); cursor: pointer;
  background: var(--papel); color: var(--tinta); text-align: left;
  font-size: 12px; font-weight: 700; line-height: 1.25;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.acess-item svg { width: 22px; height: 22px; flex: none; }
.acess-item:hover { background: var(--gelo-fundo); border-color: rgba(18,54,107,.28); }
.acess-item[aria-pressed="true"] {
  background: var(--azul-institucional); border-color: var(--azul-institucional); color: #fff;
}
.acess-item[aria-pressed="true"] svg { color: var(--amarelo-civico); }

/* ── leitura em voz alta ────────────────────────────────────────────────── */
.acess-voz { display: grid; gap: 8px; }
.acess-ouvir {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px;
  width: 100%; padding: 12px; border: 0; border-radius: var(--r-m); cursor: pointer;
  background: var(--amarelo-civico); color: var(--azul-institucional);
  font-size: 13px; font-weight: 800; text-align: left;
}
.acess-ouvir:hover { background: var(--amarelo-luz); }
.acess-ouvir svg { width: 22px; height: 22px; }
.acess-voz .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acess-sem-voz { font-size: 11.5px; color: var(--tinta-50); font-weight: 600; }

/* ── rodapé do painel ───────────────────────────────────────────────────── */
.acess-rod { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linha); display: grid; gap: 8px; }
.acess-zerar {
  border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--papel); cursor: pointer;
  padding: 10px; font-size: 12.5px; font-weight: 800; color: var(--azul-institucional);
}
.acess-zerar:hover { background: var(--gelo-fundo); }
.acess-dica { font-size: 11px; color: var(--tinta-50); font-weight: 600; text-align: center; }
.acess-dica kbd {
  font-family: inherit; font-weight: 800; background: var(--gelo-fundo);
  border: 1px solid var(--linha); border-radius: 5px; padding: 1px 5px; color: var(--tinta);
}

@media (max-width: 560px) {
  .acess-abrir { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }
  .acess-abrir svg { width: 27px; height: 27px; }
  /* no celular o painel vira gaveta: com 320px de tela, cartão flutuante
     encosta nas duas bordas e ainda cobre o botão que o abriu */
  .acess-painel {
    left: 0; right: 0; bottom: 0; width: auto; max-height: 84vh;
    border-radius: var(--r-g) var(--r-g) 0 0; transform: translateY(16px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .acess-abrir, .acess-painel, .acess-item { transition: none; }
  .acess-abrir:hover { transform: none; }
}
@media print { .acess-abrir, .acess-painel, .acess-guia { display: none !important; } }

/* ===========================================================================
   Os ajustes propriamente ditos
   Todos entram por uma classe no <html>, para que qualquer página do site
   receba o mesmo tratamento sem precisar conhecer o plugin.
   =========================================================================== */

/* ── corpo do texto aumentado ───────────────────────────────────────────── */
/* O menu do topo é uma linha só que não quebra. Com o texto grande ele
   transborda e o último item, que é o botão do grupo, sai da tela. Quando o
   plugin aumenta o corpo, a barra passa a quebrar em duas linhas. */
html.acess-texto-maior .cab .nav { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
html.acess-texto-maior .cab .menu { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
html.acess-texto-maior .cab .menu a { white-space: normal; }

/* ── alto contraste ─────────────────────────────────────────────────────── */
/* Zera fundo, sombra e imagem de fundo de tudo e repinta em preto e branco.
   É agressivo por necessidade: o site tem dezenas de fundos, véus e gradientes
   e um a um não dá para prever. O painel é repintado logo abaixo, senão ele
   ficaria transparente sobre a página. */
/* Peso de seletor importa aqui: a regra-vassoura abaixo vale (0,1,2), e cada
   exceção é escrita com o mesmo peso e depois dela, para vencer no desempate
   por ordem. Sem isso o título voltaria a ser branco como o resto. */
html.acess-contraste body,
html.acess-contraste body * {
  background-image: none !important; background-color: transparent !important;
  color: #FFFFFF !important; border-color: #FFFFFF !important;
  box-shadow: none !important; text-shadow: none !important;
}
html.acess-contraste body { background-color: #000000 !important; }
/* pseudo-elemento não é filho, então a vassoura acima não o alcança: sem esta
   regra os gradientes decorativos de ::before continuam pintando o fundo */
html.acess-contraste body *::before, html.acess-contraste body *::after {
  background-image: none !important; background-color: transparent !important; box-shadow: none !important;
}
/* o ponto amarelo do botão e a faixa do painel continuam existindo */
html.acess-contraste .acess-abrir.tem-ajuste::after { background-color: var(--amarelo-luz) !important; box-shadow: none !important; }
html.acess-contraste .acess-painel .faixa-topo { background-color: var(--amarelo-luz) !important; }
/* os títulos do site quebram a linha em <span>, então o amarelo tem de valer
   para os filhos também, senão metade do título fica branca */
html.acess-contraste body h1, html.acess-contraste body h2, html.acess-contraste body h3,
html.acess-contraste body h4, html.acess-contraste body strong, html.acess-contraste body b,
html.acess-contraste body h1 *, html.acess-contraste body h2 *,
html.acess-contraste body h3 *, html.acess-contraste body h4 * {
  color: var(--amarelo-luz) !important;
}
html.acess-contraste body a { color: var(--amarelo-luz) !important; text-decoration: underline !important; }
html.acess-contraste body button, html.acess-contraste body .btn, html.acess-contraste body input,
html.acess-contraste body select, html.acess-contraste body textarea {
  background-color: #000000 !important; border: 2px solid var(--amarelo-luz) !important;
  color: var(--amarelo-luz) !important;
}
html.acess-contraste body :focus-visible { outline: 3px solid var(--amarelo-luz) !important; outline-offset: 3px; }
/* o painel volta a ter chão sólido e continua sendo o painel da campanha */
html.acess-contraste .acess-painel { background-color: #000000 !important; border: 2px solid var(--amarelo-luz) !important; }
html.acess-contraste .acess-cab { background-color: #101010 !important; }
html.acess-contraste .acess-abrir { background-color: #000000 !important; border: 2px solid var(--amarelo-luz) !important; color: var(--amarelo-luz) !important; }
html.acess-contraste .acess-item[aria-pressed="true"],
html.acess-contraste .acess-ouvir { background-color: var(--amarelo-luz) !important; color: #000000 !important; border-color: var(--amarelo-luz) !important; }
html.acess-contraste .acess-item[aria-pressed="true"] svg,
html.acess-contraste .acess-ouvir svg { color: #000000 !important; }

/* A foto do hero e o véu que dava chão ao texto: o véu é gradiente e some
   com a regra acima, e aí sobra texto branco sobre fotografia, que é o
   contrário de alto contraste. Some com os dois; foto de conteúdo fica. */
html.acess-contraste .hero .foto, html.acess-contraste .hero .veu { display: none !important; }

/* ── contraste invertido e tons de cinza ────────────────────────────────── */
/* O filtro entra em cada bloco de primeiro nível do <body>, e não no <html>.
   Assim o painel, que é irmão deles, fica de fora e mantém as cores da
   campanha: filtrar o painel junto e desfazer com um segundo filtro não volta
   ao ponto de partida, o amarelo cívico voltava mostarda. Filtro no elemento
   filtrado não desloca nada; quem se deslocaria seria um position:fixed
   dentro dele, e os dois botões flutuantes são filhos diretos do body. */
html.acess-inverter body > *:not(.acess) { filter: invert(1) hue-rotate(180deg); }
html.acess-cinza body > *:not(.acess) { filter: grayscale(1); }
html.acess-inverter.acess-cinza body > *:not(.acess) { filter: invert(1) hue-rotate(180deg) grayscale(1); }
/* o chão da página não é bloco nenhum: inverte na mão */
html.acess-inverter body { background-color: #0C0A07 !important; }
/* foto invertida vira negativo: desfaz só a inversão, dentro do bloco que já
   está filtrado. Se houver tons de cinza junto, o cinza do bloco prevalece. */
html.acess-inverter img, html.acess-inverter video, html.acess-inverter iframe {
  filter: invert(1) hue-rotate(180deg);
}

/* ── links destacados ───────────────────────────────────────────────────── */
html.acess-links a:not(.acess-abrir) {
  text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px !important;
  outline: 2px dashed currentColor; outline-offset: 2px;
}
html.acess-links a:not(.acess-abrir):hover { background-color: var(--amarelo-civico) !important; color: var(--azul-institucional) !important; }

/* ── fonte legível ──────────────────────────────────────────────────────── */
/* Troca Lemon Milk e Inter por uma sem serifa de traço aberto e caixa alta
   larga, que é o que ajuda quem tem dislexia ou baixa visão. A pilha começa
   na Atkinson Hyperlegible para quem já a tem instalada e cai em fontes de
   sistema, sem baixar arquivo nenhum. */
html.acess-fonte-legivel body, html.acess-fonte-legivel body * {
  font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, 'DejaVu Sans', sans-serif !important;
  letter-spacing: .01em;
}
html.acess-fonte-legivel h1, html.acess-fonte-legivel h2,
html.acess-fonte-legivel h3, html.acess-fonte-legivel h4 { letter-spacing: 0 !important; }

/* ── espaçamento do texto (WCAG 1.4.12) ─────────────────────────────────── */
html.acess-espaco body p, html.acess-espaco body li, html.acess-espaco body dd,
html.acess-espaco body dt, html.acess-espaco body blockquote, html.acess-espaco body figcaption,
html.acess-espaco body label, html.acess-espaco body td, html.acess-espaco body th,
html.acess-espaco body h1, html.acess-espaco body h2, html.acess-espaco body h3, html.acess-espaco body h4 {
  line-height: 1.85 !important; letter-spacing: .12em !important; word-spacing: .16em !important;
}
html.acess-espaco body p { margin-bottom: 1.6em !important; }
/* dentro do painel o espaçamento estouraria os botões, que já são compactos */
html.acess-espaco .acess-painel, html.acess-espaco .acess-painel * {
  line-height: 1.35 !important; letter-spacing: normal !important; word-spacing: normal !important;
}

/* ── cursor grande ──────────────────────────────────────────────────────── */
html.acess-cursor, html.acess-cursor body, html.acess-cursor body * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'><path d='M7 2 L7 27 L13.2 21.2 L17.2 30 L21.6 28 L17.6 19.4 L26 19.4 Z' fill='%23F2C400' stroke='%230B2450' stroke-width='2' stroke-linejoin='round'/></svg>") 6 2, auto !important;
}
html.acess-cursor a, html.acess-cursor button, html.acess-cursor [role="button"],
html.acess-cursor label, html.acess-cursor select, html.acess-cursor summary {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'><path d='M12 3 a2.4 2.4 0 0 1 4.8 0 v9.5 a2.2 2.2 0 0 1 4.4 .3 v1.4 a2.2 2.2 0 0 1 4.2 .9 v6.4 c0 4.7-3.2 8.6-8.4 8.6 -5 0-8.6-3.3-8.6-8.6 V13 a2.3 2.3 0 0 1 3.6-1.9 Z' fill='%23F2C400' stroke='%230B2450' stroke-width='2' stroke-linejoin='round'/></svg>") 10 2, pointer !important;
}

/* ── guia de leitura ────────────────────────────────────────────────────── */
.acess-guia {
  position: fixed; left: 0; right: 0; top: 0; height: 46px; z-index: 125; pointer-events: none;
  background: rgba(242,196,0,.16);
  border-top: 2px solid rgba(11,36,80,.55); border-bottom: 2px solid rgba(11,36,80,.55);
  will-change: transform;
}

/* ── pausar animações ───────────────────────────────────────────────────── */
html.acess-parar body *, html.acess-parar body *::before, html.acess-parar body *::after {
  animation: none !important; transition: none !important;
}
html.acess-parar { scroll-behavior: auto !important; }

/* ── bloco sendo lido em voz alta ───────────────────────────────────────── */
.acess-lendo {
  outline: 3px solid var(--amarelo-civico) !important; outline-offset: 4px;
  background-color: rgba(242,196,0,.18) !important; border-radius: 6px;
}
html.acess-contraste .acess-lendo { background-color: rgba(255,216,77,.28) !important; }