/* =========================================================
   ACESSIBILIDADE — botão flutuante, painel e modos
   Arquivo isolado: só afeta a página quando o painel é usado (as classes a11y-* ficam no <html>).
   Sem amarelo e sem vermelho, como o resto do site.
   ========================================================= */

/* ---------- Botão flutuante e painel ---------- */
.a11y-ui { font-family: var(--font-body, 'Segoe UI', Arial, sans-serif); font-size: 16px; line-height: 1.4; color: var(--ink, #101830); }
/* Discreto: pequeno, branco com ícone azul e meio translúcido; ganha destaque no mouse, no foco e com o painel aberto */
.a11y-fab {
    position: fixed; z-index: 1050; right: 16px; bottom: var(--a11y-base, 16px);
    width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
    background: rgba(255, 255, 255, .92); color: var(--blue, #003898); border: 1px solid rgba(0, 56, 152, .18); border-radius: 50%;
    box-shadow: 0 3px 12px -5px rgba(0, 38, 107, .35); cursor: pointer; opacity: .8;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease, color .15s ease;
}
.a11y-fab:hover, .a11y-fab:focus-visible, .a11y-fab[aria-expanded="true"] { opacity: 1; }
.a11y-fab:hover { background: var(--blue, #003898); color: #fff; transform: scale(1.06); }
.a11y-fab svg { width: 24px; height: 24px; display: block; fill: currentColor; }
.a11y-fab:focus-visible, .a11y-ui button:focus-visible { outline: 3px solid var(--blue-mid, #2a62d6); outline-offset: 3px; }
.a11y-fab:focus-visible { outline-color: var(--blue-ink, #0a1a45); background: #fff; }

.a11y-painel {
    position: fixed; z-index: 1120; right: 16px; bottom: calc(var(--a11y-base, 16px) + 58px);
    width: min(392px, calc(100vw - 32px)); max-height: calc(100vh - var(--a11y-base, 16px) - 82px); overflow: auto; overscroll-behavior: contain;
    background: #fff; border: 1px solid var(--line, #e0dbd0); border-radius: var(--r-xl, 16px);
    box-shadow: 0 24px 60px -16px rgba(10, 26, 69, .45), 0 2px 10px rgba(10, 26, 69, .1);
}
.a11y-painel[hidden] { display: none; }
.a11y-topo {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px 12px 20px; background: #fff; border-bottom: 1px solid var(--line, #e0dbd0);
}
.a11y-topo h2 { font-family: var(--font-display, 'Barlow Condensed', Arial, sans-serif); font-size: 26px; line-height: 1; color: var(--blue, #003898); margin: 0; }
.a11y-fechar {
    width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
    background: var(--blue-50, #eef3fd); color: var(--blue, #003898); border: 0; border-radius: 50%;
}
.a11y-fechar:hover { background: var(--blue-100, #d9e4fb); }
.a11y-fechar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.a11y-corpo { padding: 6px 20px 20px; }
.a11y-grupo {
    margin: 18px 0 10px; font-family: var(--font-display, 'Barlow Condensed', Arial, sans-serif);
    font-size: 19px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--blue, #003898);
}
.a11y-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a11y-tile {
    min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px;
    padding: 12px; text-align: left; background: #fff; color: var(--ink, #101830);
    border: 2px solid var(--line, #e0dbd0); border-radius: var(--r-lg, 12px);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.a11y-tile:hover { border-color: var(--blue-mid, #2a62d6); background: var(--blue-50, #eef3fd); }
.a11y-tile i { font-size: 22px; color: var(--blue, #003898); }
.a11y-tile-rotulo { font-weight: 700; font-size: 15px; line-height: 1.2; }
.a11y-tile-estado { font-size: 12px; font-weight: 600; color: var(--muted, #566079); }
.a11y-tile[aria-pressed="true"] { background: var(--blue, #003898); border-color: var(--blue, #003898); color: #fff; }
.a11y-tile[aria-pressed="true"] i, .a11y-tile[aria-pressed="true"] .a11y-tile-estado { color: #fff; }
.a11y-tile-largo { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.a11y-tile-largo .a11y-tile-texto { display: grid; gap: 2px; }

.a11y-tamanho { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.a11y-tamanho button {
    min-height: 48px; padding: 0 12px; font-weight: 800; font-size: 18px; text-align: center;
    background: #fff; color: var(--blue, #003898); border: 2px solid var(--blue, #003898); border-radius: var(--r-lg, 12px);
}
.a11y-tamanho button:hover:not(:disabled) { background: var(--blue, #003898); color: #fff; }
.a11y-tamanho button:disabled { opacity: .4; cursor: not-allowed; }
.a11y-tamanho output { min-width: 56px; text-align: center; font-weight: 800; font-size: 18px; color: var(--ink, #101830); }

.a11y-nota { margin: 10px 2px 0; font-size: 13px; line-height: 1.4; color: var(--muted, #566079); }
.a11y-reset {
    width: 100%; margin-top: 18px; min-height: 48px; padding: 0 16px; font-weight: 700;
    background: var(--blue-50, #eef3fd); color: var(--blue, #003898); border: 2px solid var(--blue-100, #d9e4fb); border-radius: 999px;
}
.a11y-reset:hover { background: var(--blue-100, #d9e4fb); }

@media (max-width: 560px) {
    .a11y-fab { right: 12px; }
    .a11y-painel { right: 10px; left: 10px; width: auto; }
}
/* Com o assistente virtual na tela, o botão de acessibilidade fica empilhado acima do dele */
html.tem-assistente .a11y-fab { right: 27px; bottom: calc(var(--a11y-base, 16px) + 80px); }
html.tem-assistente .a11y-painel { bottom: calc(var(--a11y-base, 16px) + 134px); max-height: calc(100vh - var(--a11y-base, 16px) - 158px); }
@media print { .a11y-ui { display: none !important; } }

/* ---------- Tamanho do texto ----------
   Os font-size do site (style.css e ofertas.css) são multiplicados por var(--a11y-fs, 1). Só o texto cresce e o
   layout se reorganiza normalmente (como no zoom de texto do navegador). Títulos de cartaz gigantes não são escalados. */
html.a11y-tam-1 { --a11y-fs: 1.15; }
html.a11y-tam-2 { --a11y-fs: 1.3; }
html.a11y-tam-3 { --a11y-fs: 1.5; }
/* Com texto maior, o menu do topo (que só vira "hambúrguer" abaixo de 1180 px) ganha folga para não ser cortado */
@media (min-width: 1181px) {
    html[class*="a11y-tam-"] .nav-flex { gap: 12px; }
    html[class*="a11y-tam-"] .logo img { height: 44px; }
    html[class*="a11y-tam-"] .nav-links li a { padding: 8px 6px; letter-spacing: .02em; }
    html[class*="a11y-tam-"] .nav-links li a.btn-destaque-header { padding: 10px 14px; margin-left: 4px; }
    /* texto no tamanho máximo: um pouco menos de espaço entre os itens para o menu (agora com "Revista") caber */
    html.a11y-tam-3 .nav-links li a { padding: 8px 4px; }
    html.a11y-tam-3 .nav-links li a.btn-destaque-header { padding: 10px 12px; }
}

/* ---------- Fonte de fácil leitura ---------- */
html.a11y-fonte { --font-body: Verdana, 'Segoe UI', Arial, sans-serif; --font-display: Verdana, 'Segoe UI', Arial, sans-serif; }
html.a11y-fonte body :not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]) { text-transform: none !important; letter-spacing: normal; }

/* ---------- Espaçamentos ---------- */
html.a11y-linhas body :not(.a11y-ui):not(.a11y-ui *):not([vw]):not([vw] *) { line-height: 1.9 !important; }
html.a11y-letras body :not(.a11y-ui):not(.a11y-ui *):not([vw]):not([vw] *) { letter-spacing: .12em !important; word-spacing: .18em !important; }

/* ---------- Destacar links (azul claro, sem amarelo) ---------- */
html.a11y-links:not(.a11y-contraste) body a {
    text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important;
    font-weight: 700 !important; background-color: var(--blue-100, #d9e4fb) !important; color: var(--blue-ink, #0a1a45) !important;
    border-radius: 3px;
}

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

/* ---------- Alto contraste (fundo preto, texto branco, links azul-claro) ----------
   :where() zera a especificidade das exceções, para as regras de links e do painel (mais abaixo) sempre vencerem.
   Ficam de fora: imagens, vídeo, o tradutor VLibras e o topo com vídeo (que já tem texto branco sobre fundo escuro). */
html.a11y-contraste body,
html.a11y-contraste body *:not(:where(img, video, canvas, svg, [vw], [vw] *, #vlibras-access-wrapper, #vlibras-app-root, .hero-video, .hero-video *)) {
    background-color: #000 !important; background-image: none !important; color: #fff !important;
    border-color: #fff !important; box-shadow: none !important; text-shadow: none !important;
}
html.a11y-contraste body a[href]:not(:where(.hero-video a)),
html.a11y-contraste body a[href]:not(:where(.hero-video a)) *:not(:where(img, svg)) { color: #8fd3ff !important; text-decoration: underline !important; }
html.a11y-contraste body button:not(:where(.hero-video button)),
html.a11y-contraste body input, html.a11y-contraste body select, html.a11y-contraste body textarea { border: 2px solid #fff !important; }
html.a11y-contraste body :focus-visible { outline: 4px solid #8fd3ff !important; outline-offset: 3px !important; }
/* painel: botão ativado = cores invertidas (fundo branco, texto preto) */
html.a11y-contraste .a11y-tile[aria-pressed="true"],
html.a11y-contraste .a11y-tile[aria-pressed="true"] * { background-color: #fff !important; color: #000 !important; }
html.a11y-contraste .a11y-fab { background-color: #000 !important; color: #fff !important; border-color: #fff !important; opacity: 1; }
html.a11y-contraste .a11y-fab svg { fill: #fff; }