/* ============================================================
   Assistente e acessibilidade — o mesmo do InvenTI (AccessibilityFab).
   Um botão redondo; o painel só aparece quando alguém pede.

   Espelha do produto, botão a botão:
     · Tour guiado — Rápido / Detalhado  (o par text/long do SCREEN_TOUR)
     · Velocidade da voz — Lenta 0,8× · Normal 1× · Rápida 1,25×
     · Legenda — Off · Compacta · Normal · Grande  (padrão: compacta)
     · A- / A+ (0,85–1,3)  ·  Alto contraste  ·  Parar narração
   A voz é a do NAVEGADOR — o modo local do produto (ADR-0002).
   ============================================================ */

/* holofote: a seção narrada acende, o resto recua */
[data-narracao] { transition: opacity .45s ease, filter .45s ease; }
body.narrando [data-narracao]      { opacity: .24; filter: saturate(.5); }
body.narrando [data-narracao].secao-em-foco { opacity: 1;   filter: none; }

/* ---- o botão ---- */

.a11y-fab {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 50; width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%;
  background: var(--rosa); color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--rosa) 40%, transparent);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), filter .2s ease;
}
.a11y-fab:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); }
.a11y-fab svg { width: 1.45rem; height: 1.45rem; }
body.narrando .a11y-fab::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--rosa); animation: a11y-pulso 1.9s ease-out infinite;
}
@keyframes a11y-pulso {
  0%   { opacity: .9; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.45); }
  100% { opacity: 0;  transform: scale(1.45); }
}

/* ---- o painel ---- */

.a11y-painel {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: calc(clamp(1rem, 3vw, 2rem) + 4rem);
  z-index: 50; width: min(22rem, calc(100vw - 2rem));
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: var(--sombra);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  padding: 1.1rem 1.15rem 1.15rem;
  display: grid; gap: 1.05rem;
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1), visibility .22s;
}
.a11y-painel[hidden] { display: grid; opacity: 0; visibility: hidden; transform: translateY(8px) scale(.97); pointer-events: none; }

.a11y-painel header { display: flex; align-items: center; gap: .6rem; }
.a11y-painel header h2 {
  font: 500 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint); margin: 0; flex: 1;
}
.a11y-fechar {
  all: unset; cursor: pointer; width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center; border-radius: 2px; color: var(--fg-faint);
  font: 400 1rem/1 var(--texto);
}
.a11y-fechar:hover { background: var(--bg-inset); color: var(--fg); }

.a11y-grupo > label,
.a11y-grupo > span.rot {
  display: block; margin-bottom: .45rem;
  font: 400 .7rem/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-faint);
}

.a11y-linha { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* segmentos */
.a11y-seg { display: inline-flex; box-shadow: inset 0 0 0 1px var(--line); border-radius: 2px; overflow: hidden; flex: 1; }
.a11y-seg button {
  all: unset; cursor: pointer; flex: 1; text-align: center; padding: .42rem .3rem;
  font: 400 .72rem/1 var(--mono); color: var(--fg-faint);
}
.a11y-seg button:hover { color: var(--fg); }
.a11y-seg button[aria-pressed="true"] { background: var(--roxo); color: #fff; }

/* botões de ação */
.a11y-acao {
  all: unset; cursor: pointer; flex: 1; text-align: center;
  padding: .55rem .6rem; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--fg);
  font: 500 .84rem/1 var(--texto);
}
.a11y-acao:hover { background: var(--bg-inset); }
.a11y-acao.forte { background: var(--rosa); color: #fff; box-shadow: none; }

/* chave liga/desliga */
.a11y-chave {
  all: unset; cursor: pointer; width: 2.6rem; height: 1.4rem; border-radius: 999px;
  background: var(--line); position: relative; transition: background .18s ease; flex: none;
}
.a11y-chave::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: var(--bg-soft); transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.a11y-chave[aria-pressed="true"] { background: var(--rosa); }
.a11y-chave[aria-pressed="true"]::after { transform: translateX(1.2rem); }
.a11y-chave + span { font-size: .88rem; color: var(--fg-soft); }

.a11y-nota {
  margin: 0; font: 400 .72rem/1.5 var(--mono); color: var(--fg-faint);
}

/* ---- legenda de rodapé (NarrationCaption) ---- */

.legenda-narracao {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(120%);
  bottom: clamp(1rem, 3vw, 2rem); z-index: 45;
  width: min(56rem, calc(100vw - 2rem));
  background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 3px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  padding: .85rem 1.1rem .7rem;
  transition: transform .34s cubic-bezier(.2,.7,.3,1), opacity .34s ease;
  opacity: 0;
}
.legenda-narracao.visivel { transform: translateX(-50%); opacity: 1; }

.legenda-narracao b {
  display: block; margin-bottom: .3rem;
  font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--rosa-texto);
}
.legenda-narracao p { margin: 0; max-width: none; color: var(--fg); font-size: .93rem; line-height: 1.55; }

.legenda-narracao[data-tam="normal"] p { font-size: 1.05rem; }
.legenda-narracao[data-tam="big"]    p { font-size: 1.25rem; line-height: 1.5; }

.legenda-narracao .passo {
  display: flex; align-items: center; gap: .6rem; margin-top: .6rem;
  font: 400 .7rem/1 var(--mono); color: var(--fg-faint);
}
.legenda-narracao .passo i { flex: 1; height: 2px; background: var(--line); display: block; }
.legenda-narracao .passo i b { display: block; height: 100%; background: var(--rosa); width: 0; transition: width .4s ease; }
.legenda-narracao .passo button {
  all: unset; cursor: pointer; padding: .18rem .4rem; border-radius: 2px;
  color: var(--fg-soft); font: 700 .7rem/1 var(--mono);
}
.legenda-narracao .passo button:hover { background: var(--bg-inset); color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .a11y-fab, .a11y-painel, .legenda-narracao, .a11y-chave::after { transition: none; }
  body.narrando .a11y-fab::after { animation: none; }
}

/* ---- o aviso de RECUO de idioma na legenda ----------------------------------
   16 das 33 páginas têm roteiro só em português. Quando alguém escolhe inglês ou
   espanhol numa delas, a narração recua para o português — e isso passa a ser DITO,
   aqui, em vez de acontecer calado. *Falta declarada é pendência; falta silenciosa é
   defeito, porque quem ouve não tem como distinguir uma da outra.* */
.legenda-narracao[data-recuo]:not([data-recuo=""])::before {
  content: "⚠ " attr(data-recuo) " — este trecho ainda só existe em português";
  display: block; margin-bottom: .45rem;
  font: 600 .72rem/1.35 var(--mono, ui-monospace, monospace);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--warn-fg); background: var(--warn-bg);
  border-left: 2px solid var(--warn-line); border-radius: 0 6px 6px 0;
  padding: .3rem .55rem;
}

/* ============================================================
   26/09 · A ZEFA NARRA — o rosto no botão, a pose ao lado da legenda,
   a legenda em TRECHOS com a palavra falada acesa e o DADO em destaque.
   Ver `narracao.js` §«LEGENDA EM TRECHOS».
   ============================================================ */

/* o botão é o rosto dela, com o selo universal de acessibilidade no canto */
.a11y-fab { width: 3.6rem; height: 3.6rem; padding: 0; overflow: visible;
  background: linear-gradient(135deg, var(--brand-rosa), var(--brand-azul)); }
.a11y-fab-rosto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-sizing: border-box; }
.a11y-fab-selo { position: absolute; right: -4px; bottom: -4px; width: 1.45rem; height: 1.45rem;
  display: grid; place-items: center; border-radius: 50%; background: var(--roxo); color: #fff;
  box-shadow: 0 0 0 2px var(--bg-soft); }
.a11y-fab-selo svg { width: .95rem; height: .95rem; }
.a11y-fab:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 3px; }

/* o painel ganha a apresentação dela */
.a11y-painel { width: min(24rem, calc(100vw - 2rem)); max-height: calc(100vh - 7rem); overflow: auto; }
.a11y-painel header { align-items: flex-start; }
.a11y-zefa { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 12%;
  flex: none; box-shadow: 0 0 0 2px var(--bg-soft), 0 0 0 4px color-mix(in srgb, var(--rosa) 60%, transparent); }
.a11y-cab { flex: 1; min-width: 0; }
.a11y-painel header .a11y-cab h2 { margin: .15rem 0 .35rem; }
.a11y-ola { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--fg-soft); max-width: none; }
.a11y-escala { min-width: 3.2rem; text-align: center; font: 500 .8rem/1 var(--mono); color: var(--fg-soft); }
.a11y-chaves { gap: .5rem; }
.a11y-chaves small { color: var(--fg-faint); font-size: .76rem; }

/* ---- a legenda com a ZEFA ao lado ---- */
.legenda-narracao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: center;
  padding: .75rem 1.1rem .65rem .75rem; }
.leg-zefa { position: relative; width: 84px; align-self: end; }
.leg-zefa img { display: block; width: 84px; height: auto; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .12s linear; background: #eee; }
.leg-zefa img.troca { animation: leg-pose .45s cubic-bezier(.2,.7,.3,1); }
@keyframes leg-pose { from { opacity: .2; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* a onda: 5 barras. Com o áudio neural medido, a altura vem da energia real (JS);
   com a voz do navegador, um balanço suave só enquanto ela fala. */
.leg-onda { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  display: flex; gap: 3px; align-items: center; height: 16px; padding: 2px 6px; border-radius: 99px;
  background: var(--roxo); box-shadow: 0 0 0 2px var(--bg-soft); }
.leg-onda i { width: 3px; height: 12px; border-radius: 2px; background: #fff; transform: scaleY(.2);
  transform-origin: center; transition: transform .08s linear; }
.legenda-narracao.falando:not(.onda-real) .leg-onda i { animation: leg-onda .9s ease-in-out infinite; }
.legenda-narracao.falando:not(.onda-real) .leg-onda i:nth-child(2) { animation-delay: -.2s; }
.legenda-narracao.falando:not(.onda-real) .leg-onda i:nth-child(3) { animation-delay: -.45s; }
.legenda-narracao.falando:not(.onda-real) .leg-onda i:nth-child(4) { animation-delay: -.1s; }
.legenda-narracao.falando:not(.onda-real) .leg-onda i:nth-child(5) { animation-delay: -.6s; }
@keyframes leg-onda { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* o trecho: no máximo duas linhas, grande o bastante para ler de relance */
.legenda-narracao p.leg-deixa { font-size: 1.02rem; line-height: 1.5; min-height: 3em; }
.legenda-narracao[data-tam="normal"] p.leg-deixa { font-size: 1.16rem; }
.legenda-narracao[data-tam="big"]    p.leg-deixa { font-size: 1.4rem; line-height: 1.45; }
.leg-deixa.entra { animation: leg-entra .28s ease-out; }
/* nunca parte de opacidade 0: com a aba em segundo plano o navegador congela a animação no 1º quadro, e a legenda sumiria */
@keyframes leg-entra { from { opacity: .45; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.leg-deixa .w { transition: color .15s ease; }
.leg-deixa .w.dita  { color: var(--fg); }
.leg-deixa .w.ativa { color: var(--fg); text-decoration: underline 2px var(--rosa); text-underline-offset: 4px; }
body.narrando .leg-deixa .w:not(.dita):not(.ativa) { color: var(--fg-soft); }
/* o DADO: sempre legível — negrito e fundo, nunca só pela cor (WCAG 1.4.1) */
.leg-deixa .w.dado { font-weight: 700; color: var(--fg); background: color-mix(in srgb, var(--rosa) 18%, transparent);
  border-radius: 4px; padding: 0 .12em; box-decoration-break: clone; }

/* as fichas de dados declarados no roteiro */
.leg-dados { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.leg-dados li { display: flex; align-items: baseline; gap: .4rem; padding: .28rem .6rem; border-radius: 8px;
  background: var(--bg-inset); border: 1px solid var(--line); }
.leg-dados strong { font: 700 1.05rem/1 var(--display); color: var(--rosa-texto); }
.leg-dados span { font: 400 .72rem/1.2 var(--mono); color: var(--fg-soft); text-transform: uppercase; letter-spacing: .04em; }

.leg-transcricao { margin-top: .55rem; max-height: 9.5rem; overflow: auto; padding: .55rem .7rem; border-radius: 8px;
  background: var(--bg-inset); font-size: .9rem; line-height: 1.55; color: var(--fg); }
.legenda-narracao .passo .leg-tx { margin-left: .3rem; font: 500 .68rem/1 var(--mono); text-transform: uppercase;
  letter-spacing: .06em; box-shadow: inset 0 0 0 1px var(--line); padding: .3rem .5rem; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .legenda-narracao { grid-template-columns: 56px minmax(0, 1fr); gap: .6rem; }
  .leg-zefa, .leg-zefa img { width: 56px; }
  .leg-dados strong { font-size: .95rem; }
}

/* ---- o ROLO da ZEFA — porte do `zefa-rolo.css` do InvenTI (ZEFA-ROLO-1) ----
   Um papel que DESENROLA de trás da foto do botão para a esquerda e ENROLA de volta para trás
   dela. `--zefa-rolo` é quanto do papel está enrolado (0 % aberto, 100 % todo atrás da foto);
   registrada com `@property` para poder ser animada. O rolo fica ABAIXO do botão (z 49 < 50):
   é isso que faz o papel sumir atrás da foto. */
@property --zefa-rolo { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

.zefa-rolo {
  --zefa-rolo: 0%;
  position: fixed; z-index: 49; pointer-events: none;
  right: calc(clamp(1rem, 3vw, 2rem) + 1.8rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + .1rem);
  width: min(24rem, calc(100vw - 5.5rem));
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28)) drop-shadow(0 1px 2px rgba(0, 0, 0, .2));
}
.zefa-rolo-papel {
  position: relative; pointer-events: auto;
  clip-path: inset(0 0 0 var(--zefa-rolo));
  padding: .7rem 2.4rem .55rem 1.1rem;              /* à direita: o trecho que fica atrás da foto */
  border-radius: 10px 4px 4px 10px; color: #3b2a12;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 30%, rgba(120, 80, 20, .08)),
    linear-gradient(90deg, #f6e7c4, #fbf3de 18%, #fdf7e8 60%, #f3e2ba);
  border-top: 1px solid rgba(160, 120, 60, .35); border-bottom: 1px solid rgba(160, 120, 60, .45);
}
.zefa-rolo[data-fase="fechando"] .zefa-rolo-papel { pointer-events: none; }
/* o bastão: a ponta enrolada do papel, que viaja com a borda */
.zefa-rolo-bastao {
  position: absolute; top: -5px; bottom: -5px; left: var(--zefa-rolo); width: 14px; translate: -50% 0;
  border-radius: 7px; pointer-events: none;
  background: linear-gradient(90deg, #a67c3d, #f4dfb0 40%, #fff6dd 55%, #b88a45);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 20, .35);
}
.zefa-rolo-bastao::before, .zefa-rolo-bastao::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0; width: 10px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-roxo), var(--brand-rosa));
}
.zefa-rolo-bastao::before { top: -3px; }
.zefa-rolo-bastao::after { bottom: -3px; }

.zefa-rolo-linha { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-size: .86rem; line-height: 1.4; max-width: none; }
.zefa-rolo-linha + .zefa-rolo-linha { margin-top: .35rem; }
.zefa-rolo-icone {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: .75rem; background: linear-gradient(135deg, var(--brand-roxo), var(--brand-rosa));
}
.zefa-rolo-icone svg { width: .9rem; height: .9rem; }
.zefa-rolo-pe { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .5rem; }
.zefa-rolo-pe button { all: unset; cursor: pointer; box-sizing: border-box; min-height: 24px; }   /* alvo ≥ 24 px (WCAG 2.5.8) */
.zefa-rolo-pe .zefa-rolo-ouvir { padding: .32rem .65rem; border-radius: 7px; font: 600 .78rem/1.2 var(--texto); color: #fff;
  background: linear-gradient(135deg, var(--brand-roxo), var(--brand-rosa)); }
.zefa-rolo-pe .zefa-rolo-acao { padding: .25rem .4rem; border-radius: 6px; font: 600 .76rem/1.2 var(--texto); color: #6b21a8;
  text-decoration: underline; text-underline-offset: 2px; }
.zefa-rolo-pe .zefa-rolo-acao:hover { background: rgba(124, 58, 237, .1); }
.zefa-rolo-pe .zefa-rolo-fechar { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #5b4520; }
.zefa-rolo-pe .zefa-rolo-fechar:hover { background: rgba(120, 80, 20, .12); }
.zefa-rolo-pe button:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }

/* tema escuro: o papel vira pergaminho à meia-luz, sem perder o contraste */
html:not([data-theme="light"]) .zefa-rolo-papel {
  color: #f5f0ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 35%),
    linear-gradient(90deg, #2a1f3d, #33264a 25%, #2d2242 70%, #241a36);
  border-top-color: rgba(236, 72, 153, .45); border-bottom-color: rgba(124, 58, 237, .55);
}
html:not([data-theme="light"]) .zefa-rolo-pe .zefa-rolo-acao { color: #f9a8d4; }
html:not([data-theme="light"]) .zefa-rolo-pe .zefa-rolo-acao:hover { background: rgba(236, 72, 153, .15); }
html:not([data-theme="light"]) .zefa-rolo-pe .zefa-rolo-fechar { color: #e9d5ff; }
html:not([data-theme="light"]) .zefa-rolo-pe button:focus-visible { outline-color: #38bdf8; }

/* o movimento: desenrola (0,9 s, desacelerando) e enrola de volta (0,7 s, acelerando para trás da foto) */
.zefa-rolo[data-fase="abrindo"] { animation: zefa-rolo-abre .9s cubic-bezier(.2, .8, .25, 1) both; }
.zefa-rolo[data-fase="fechando"] { animation: zefa-rolo-fecha .7s cubic-bezier(.55, 0, .85, .35) both; }
@keyframes zefa-rolo-abre { from { --zefa-rolo: 100%; } to { --zefa-rolo: 0%; } }
@keyframes zefa-rolo-fecha { from { --zefa-rolo: 0%; } to { --zefa-rolo: 100%; } }
/* movimento reduzido (sistema OU painel da ZEFA): sem desenrolar — aparece e some com fade */
.zefa-rolo[data-reduzir][data-fase="abrindo"] { animation: zefa-rolo-surge .25s ease-out both; }
.zefa-rolo[data-reduzir][data-fase="fechando"] { animation: zefa-rolo-some .25s ease-in both; }
@keyframes zefa-rolo-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes zefa-rolo-some { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .zefa-rolo[data-fase="abrindo"] { animation: zefa-rolo-surge .25s ease-out both; }
  .zefa-rolo[data-fase="fechando"] { animation: zefa-rolo-some .25s ease-in both; }
}
@media (forced-colors: active) {
  .zefa-rolo-papel { border: 1px solid CanvasText; }
  .zefa-rolo-bastao { background: CanvasText; }
}

/* o OLÁ: enquanto o rolo está aberto, a foto do botão vira a ZEFA acenando (poses/acenando.webp),
   enquadrada no rosto e na mão; um leve balanço do botão acompanha o aceno */
.a11y-fab.acenando .a11y-fab-rosto { object-position: 34% 26%; animation: zefa-aceno-entra .18s ease-out both; }
.a11y-fab.acenando { animation: zefa-ola 1.1s ease-in-out 2; }
@keyframes zefa-aceno-entra { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes zefa-ola { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .a11y-fab.acenando, .a11y-fab.acenando .a11y-fab-rosto { animation: none; } }

/* ---- as preferências de leitura ---- */
.a11y-leitura body { letter-spacing: .03em; word-spacing: .12em; line-height: 1.8; }
.a11y-leitura p, .a11y-leitura li { line-height: 1.85; }
.a11y-links a:not(.btn):not(.brand) { text-decoration: underline 2px !important; text-underline-offset: 3px; }
.a11y-links a:focus-visible, .a11y-links button:focus-visible { outline: 3px solid var(--azul-texto) !important; outline-offset: 3px; }
.a11y-sem-movimento *, .a11y-sem-movimento *::before, .a11y-sem-movimento *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important; }
.a11y-regua { position: fixed; left: 0; right: 0; top: 0; height: 44px; z-index: 40; pointer-events: none; display: none;
  background: color-mix(in srgb, var(--azul) 10%, transparent);
  border-block: 2px solid color-mix(in srgb, var(--azul) 55%, transparent); }
.a11y-regua.ligada { display: block; }

@media (prefers-reduced-motion: reduce) {
  .leg-zefa img { transition: none; }
  .leg-deixa.entra, .leg-zefa img.troca, .legenda-narracao.falando .leg-onda i { animation: none !important; }
}
@media print { .a11y-fab, .a11y-painel, .legenda-narracao, .zefa-rolo, .a11y-regua { display: none !important; } }
.leg-dados[hidden], .leg-transcricao[hidden] { display: none !important; }
.a11y-chaves .a11y-linha { flex-wrap: nowrap; align-items: center; }
.a11y-chaves .a11y-chave { flex: none; }
.a11y-chaves .a11y-linha > span { flex: 1; min-width: 0; line-height: 1.35; }
.a11y-chaves small { display: block; }

/* ============================================================
   26/09 · o PAINEL reorganizado e moderno — cartão «Ouvir», abas, blocos e perfis.
   Sobrescreve o painel antigo (coluna única de grupos iguais, cantos cortados).
   ============================================================ */
.a11y-painel {
  width: min(25.5rem, calc(100vw - 1.5rem)); max-height: min(44rem, calc(100vh - 6.5rem)); overflow: auto;
  padding: 1rem; gap: .85rem; border-radius: 20px; clip-path: none;
  background: color-mix(in srgb, var(--bg-soft) 92%, transparent); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--rosa) 20%);
  box-shadow: 0 24px 60px rgba(10, 6, 30, .35), 0 2px 6px rgba(10, 6, 30, .12);
  overscroll-behavior: contain; scrollbar-width: thin;
}
.a11y-painel .a11y-ico { width: 1.15rem; height: 1.15rem; flex: none; }
.a11y-topo { display: flex; gap: .75rem; align-items: center; }
.a11y-topo .a11y-zefa { width: 48px; height: 48px; object-position: 50% 40%; }
.a11y-painel .a11y-topo h2 { font: 600 .98rem/1.25 var(--display); letter-spacing: 0; text-transform: none; color: var(--fg); margin: 0 0 .15rem; }
.a11y-painel .a11y-ola { font-size: .84rem; }
.a11y-painel .a11y-fechar { align-self: flex-start; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; }

/* o cartão principal */
.a11y-ouvir { display: grid; gap: .7rem; padding: .85rem; border-radius: 16px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--brand-roxo) 22%, var(--bg-soft)), color-mix(in srgb, var(--brand-rosa) 14%, var(--bg-soft)));
  border: 1px solid color-mix(in srgb, var(--rosa) 30%, transparent); }
.a11y-ouvir-cab { display: flex; gap: .6rem; align-items: center; color: var(--rosa-texto); }
.a11y-ouvir-cab .a11y-ico { width: 1.6rem; height: 1.6rem; }
.a11y-ouvir h3 { margin: 0; font: 600 .95rem/1.2 var(--display); color: var(--fg); }
.a11y-ouvir p { margin: .1rem 0 0; font-size: .78rem; color: var(--fg-soft); max-width: none; }
.a11y-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.a11y-play { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: .55rem; align-items: center;
  padding: .6rem .7rem; border-radius: 12px; background: var(--bg-soft); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.a11y-play .a11y-ico { width: 1.9rem; height: 1.9rem; padding: .45rem; border-radius: 50%; box-sizing: border-box;
  background: var(--bg-inset); color: var(--rosa-texto); }
.a11y-play b { display: block; font: 600 .88rem/1.2 var(--texto); }
.a11y-play small { display: block; font-size: .72rem; color: var(--fg-soft); }
.a11y-play.forte { background: linear-gradient(135deg, var(--brand-roxo), var(--brand-rosa)); color: #fff; box-shadow: none; }
.a11y-play.forte .a11y-ico { background: rgba(255, 255, 255, .22); color: #fff; }
.a11y-play.forte small { color: rgba(255, 255, 255, .85); }
.a11y-play:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--rosa), 0 6px 16px rgba(10, 6, 30, .18); }
.a11y-controle { display: none; gap: .5rem; }
.a11y-painel.tocando .a11y-controle { display: grid; grid-template-columns: 1fr 1fr; }
.a11y-painel .a11y-controle .a11y-acao { border-radius: 10px; }

/* as abas, em pílula */
.a11y-abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; padding: .25rem; border-radius: 12px; background: var(--bg-inset); }
.a11y-abas [role="tab"] { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: .4rem; align-items: center; justify-content: center;
  padding: .5rem .4rem; border-radius: 9px; font: 600 .8rem/1 var(--texto); color: var(--fg-soft); transition: background .15s ease, color .15s ease; }
.a11y-abas [role="tab"]:hover { color: var(--fg); }
.a11y-abas [role="tab"][aria-selected="true"] { background: var(--bg-soft); color: var(--fg); box-shadow: 0 1px 4px rgba(10, 6, 30, .15); }
.a11y-abas [role="tab"][aria-selected="true"] .a11y-ico { color: var(--rosa-texto); }
.a11y-aba { display: grid; gap: .85rem; }
.a11y-aba[hidden] { display: none; }
.a11y-painel .a11y-seg { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.a11y-painel .a11y-seg button { padding: .5rem .3rem; font-size: .8rem; }
.a11y-painel .a11y-seg button[aria-pressed="true"] { background: linear-gradient(135deg, var(--brand-roxo), var(--brand-rosa)); }

/* o tamanho do texto: A pequeno · medidor · % · A grande */
.a11y-tamanho { display: grid; grid-template-columns: 2.4rem 1fr auto 2.4rem; gap: .55rem; align-items: center; }
.a11y-passo { all: unset; box-sizing: border-box; cursor: pointer; width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line); font: 700 .85rem/1 var(--display); color: var(--fg); }
.a11y-passo.maior { font-size: 1.25rem; }
.a11y-passo:hover { background: var(--bg-inset); }
.a11y-medidor { height: 6px; border-radius: 99px; background: var(--bg-inset); overflow: hidden; }
.a11y-medidor i { display: block; height: 100%; width: 23%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-roxo), var(--brand-rosa)); transition: width .2s ease; }

/* os blocos: ícone, nome, descrição e o estado escrito */
.a11y-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.a11y-tile { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; gap: .35rem; align-content: start;
  padding: .7rem .7rem .6rem; border-radius: 14px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .15s ease, background .15s ease, transform .15s ease; min-height: 6.2rem; }
.a11y-tile .a11y-ico { width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 9px; background: var(--bg-inset); color: var(--fg-soft); }
.a11y-tile b { display: block; font: 600 .84rem/1.2 var(--texto); color: var(--fg); }
.a11y-tile small { display: block; font-size: .72rem; line-height: 1.3; color: var(--fg-soft); }
.a11y-tile-estado { position: absolute; top: .65rem; right: .65rem; font: 600 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); }
.a11y-tile:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--rosa); }
.a11y-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--rosa) 12%, var(--bg-soft)); box-shadow: inset 0 0 0 2px var(--rosa); }
.a11y-tile[aria-pressed="true"] .a11y-ico { background: linear-gradient(135deg, var(--brand-roxo), var(--brand-rosa)); color: #fff; }
.a11y-tile[aria-pressed="true"] .a11y-tile-estado { color: var(--rosa-texto); }
.a11y-tiles .a11y-tile:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }

/* os perfis */
.a11y-painel .a11y-sub { margin: 0; font-size: .8rem; color: var(--fg-soft); max-width: none; }
.a11y-perfis { display: grid; gap: .45rem; }
.a11y-perfil { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: .7rem; align-items: center; padding: .6rem .7rem;
  border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: var(--bg-soft); transition: box-shadow .15s ease, background .15s ease; }
.a11y-perfil .a11y-ico { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 10px; box-sizing: border-box; background: var(--bg-inset); color: var(--rosa-texto); }
.a11y-perfil b { display: block; font: 600 .86rem/1.2 var(--texto); color: var(--fg); }
.a11y-perfil small { display: block; font-size: .74rem; color: var(--fg-soft); }
.a11y-perfil:hover { box-shadow: inset 0 0 0 1px var(--rosa); }
.a11y-perfil[aria-pressed="true"] { background: color-mix(in srgb, var(--rosa) 12%, var(--bg-soft)); box-shadow: inset 0 0 0 2px var(--rosa); }
.a11y-perfil[aria-pressed="true"]::after { content: "✓"; margin-left: auto; font-weight: 700; color: var(--rosa-texto); }
.a11y-restaurar { all: unset; cursor: pointer; justify-self: start; display: inline-flex; gap: .4rem; align-items: center; padding: .4rem .6rem;
  border-radius: 8px; font: 500 .8rem/1 var(--texto); color: var(--fg-soft); }
.a11y-restaurar:hover { background: var(--bg-inset); color: var(--fg); }

/* rodapé: atalhos recolhidos */
.a11y-pe { display: grid; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.a11y-pe summary { cursor: pointer; display: flex; gap: .45rem; align-items: center; font: 600 .8rem/1 var(--texto); color: var(--fg-soft); list-style: none; }
.a11y-pe summary::-webkit-details-marker { display: none; }
.a11y-pe summary::after { content: "▾"; margin-left: auto; transition: transform .15s ease; }
.a11y-pe details[open] summary::after { transform: rotate(180deg); }
.a11y-atalhos { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .78rem; color: var(--fg-soft); }
.a11y-atalhos kbd { display: inline-block; min-width: 1.4rem; padding: .12rem .35rem; border-radius: 5px; text-align: center;
  font: 600 .7rem/1.2 var(--mono); color: var(--fg); background: var(--bg-inset); box-shadow: inset 0 -1px 0 var(--line), 0 0 0 1px var(--line); }

/* foco visível em tudo que é clicável no painel */
.a11y-painel button:focus-visible, .a11y-painel summary:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .a11y-play, .a11y-tile, .a11y-perfil, .a11y-medidor i, .a11y-abas [role="tab"] { transition: none; }
  .a11y-play:hover, .a11y-tile:hover { transform: none; }
}
@media (forced-colors: active) {
  .a11y-tile[aria-pressed="true"], .a11y-perfil[aria-pressed="true"], .a11y-abas [aria-selected="true"] { outline: 2px solid Highlight; }
}
@media (max-width: 420px) {
  .a11y-painel { right: .75rem; }
  .a11y-tiles { grid-template-columns: 1fr; }
}

/* 26/09 · a VISIBILIDADE troca na hora ao abrir (e só depois do fade ao fechar). Antes ela
   também «transitava» 0,22 s: o `abrir()` punha o foco no ✕ enquanto o painel ainda estava
   `visibility: hidden` — o foco não entrava, e quem usa teclado ficava fora do painel. */
.a11y-painel { transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1), visibility 0s linear 0s; }
.a11y-painel[hidden] { transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1), visibility 0s linear .22s; }

/* ============================================================
   27/09 · botões e painel mais modernos, com «gif» animado (pedido do dono).
   Tudo em CSS, com os tokens do site: nenhuma imagem nova, nenhum recurso de fora.
   Animação só onde ajuda a entender o estado — e parada com movimento reduzido.
   ============================================================ */

/* o botão da ZEFA: um anel de luz que respira devagar em volta do rosto */
.a11y-fab::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, var(--brand-roxo), var(--brand-rosa), var(--brand-roxo));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity: .75; animation: a11y-anel 6s linear infinite;
}
.a11y-fab:hover::before, .a11y-fab:focus-visible::before { opacity: 1; }
body.narrando .a11y-fab::before { animation-duration: 2.4s; opacity: 1; }
@keyframes a11y-anel { to { transform: rotate(360deg); } }

/* os dois modos: cartão com ícone redondo, texto e o equalizador à direita */
.a11y-play { position: relative; min-height: 3.6rem; padding-right: .7rem; align-items: center; }
.a11y-play > span:not(.a11y-eq) { min-width: 0; }
.a11y-play small { line-height: 1.3; }
.a11y-play .a11y-dur { margin-top: .15rem; font: 600 .68rem/1 var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .9; }
.a11y-play .a11y-ico { transition: transform .2s ease; }
.a11y-play:hover .a11y-ico { transform: scale(1.08); }
.a11y-play.forte:not([data-ativo]) .a11y-ico { animation: a11y-convite 2.6s ease-in-out infinite; }
@keyframes a11y-convite {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); }
  35% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

/* o «gif»: 4 barras que dançam no modo que está tocando; paradas e baixas no resto */
.a11y-eq { position: absolute; right: .6rem; top: .55rem;
  display: inline-flex; align-items: flex-end; gap: 2px; height: .85rem; }
.a11y-eq i { display: block; width: 3px; height: 30%; border-radius: 2px; background: currentColor; opacity: .55; }
.a11y-play:not(.forte) .a11y-eq { color: var(--rosa-texto); }
.a11y-play[data-ativo] .a11y-eq i { opacity: 1; animation: a11y-eq .9s ease-in-out infinite; }
.a11y-play[data-ativo] .a11y-eq i:nth-child(2) { animation-delay: -.3s; }
.a11y-play[data-ativo] .a11y-eq i:nth-child(3) { animation-delay: -.6s; }
.a11y-play[data-ativo] .a11y-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes a11y-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* seletores de idioma, velocidade e legenda: trilho em pílula, com o escolhido em destaque */
.a11y-painel .a11y-seg { display: flex; width: 100%; box-sizing: border-box; gap: 3px; padding: 3px; border-radius: 12px; background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--line); }
.a11y-painel .a11y-seg button {
  flex: 1 1 0; min-width: 0; min-height: 2.2rem; border-radius: 9px; font: 600 .8rem/1 var(--texto); letter-spacing: 0; text-transform: none;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.a11y-painel .a11y-seg button:hover { background: color-mix(in srgb, var(--rosa) 10%, transparent); }
.a11y-painel .a11y-seg button[aria-pressed="true"] { box-shadow: 0 2px 8px rgba(10, 6, 30, .22); }
.a11y-painel .a11y-grupo .rot { font: 600 .68rem/1 var(--mono); letter-spacing: .08em; }

/* abas: o ícone da aba escolhida pulsa uma vez ao trocar */
.a11y-abas [role="tab"][aria-selected="true"] .a11y-ico { animation: a11y-aba .35s ease-out; }
@keyframes a11y-aba { from { transform: scale(.7); } to { transform: scale(1); } }

/* blocos de leitura: o ícone ganha um brilho quando liga */
.a11y-tile[aria-pressed="true"] .a11y-ico { animation: a11y-aba .35s ease-out; }

/* foco sempre visível e com contraste nas duas cores de fundo */
.a11y-painel .a11y-play:focus-visible, .a11y-painel .a11y-seg button:focus-visible,
.a11y-painel .a11y-tile:focus-visible, .a11y-painel .a11y-perfil:focus-visible, .a11y-painel [role="tab"]:focus-visible {
  outline: 3px solid var(--azul-texto); outline-offset: 2px;
}

/* movimento reduzido — do sistema OU o bloco «Pausar animações» do próprio painel: tudo para,
   e o equalizador fica como um desenho estático (barras em alturas diferentes, não animadas) */
@media (prefers-reduced-motion: reduce) {
  .a11y-fab::before, .a11y-play .a11y-ico, .a11y-play[data-ativo] .a11y-eq i,
  .a11y-abas [role="tab"] .a11y-ico, .a11y-tile .a11y-ico { animation: none !important; }
}
.a11y-sem-movimento .a11y-fab::before { animation: none !important; }
.a11y-play[data-ativo] .a11y-eq i:nth-child(1) { --h: 45%; }
.a11y-play[data-ativo] .a11y-eq i:nth-child(2) { --h: 90%; }
.a11y-play[data-ativo] .a11y-eq i:nth-child(3) { --h: 60%; }
.a11y-play[data-ativo] .a11y-eq i:nth-child(4) { --h: 75%; }
@media (prefers-reduced-motion: reduce) { .a11y-play[data-ativo] .a11y-eq i { height: var(--h); } }
.a11y-sem-movimento .a11y-play[data-ativo] .a11y-eq i { height: var(--h); }
@media (forced-colors: active) { .a11y-fab::before { display: none; } }

/* ============================================================
   27/09 · a ILUSTRAÇÃO do trecho, ao lado da legenda — troca junto com a pose da ZEFA,
   no início da fala (mapa em `narracao.js`, «MAPA etapa → contexto → mídia»).
   Print real da seção quando há; senão um SVG do site que se desenha uma vez.
   ============================================================ */
.legenda-narracao:has(.leg-ilus:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) 132px; }
.leg-ilus { margin: 0; width: 132px; height: 88px; border-radius: 10px; overflow: hidden; align-self: center;
  background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center;
  color: var(--rosa-texto); }
.leg-ilus[hidden] { display: none; }
.leg-ilus img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.leg-ilus svg { width: 100%; height: 100%; }
.leg-ilus .il-t { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.leg-ilus .il-p { fill: var(--azul-texto, currentColor); }
.leg-ilus.entra { animation: leg-ilus-entra .45s cubic-bezier(.2,.7,.3,1); }
.leg-ilus.entra .il-t { stroke-dasharray: 320; stroke-dashoffset: 320; animation: leg-ilus-traco 1.1s ease-out forwards; }
.leg-ilus.entra .il-p { opacity: 0; animation: leg-ilus-ponto .5s ease-out .8s forwards; }
.legenda-narracao.falando .leg-ilus .il-anda { animation: leg-ilus-anda 2.4s ease-in-out infinite; }
@keyframes leg-ilus-entra { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes leg-ilus-traco { to { stroke-dashoffset: 0; } }
@keyframes leg-ilus-ponto { to { opacity: 1; } }
@keyframes leg-ilus-anda { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(78px); } }
@media (max-width: 700px) {
  .legenda-narracao:has(.leg-ilus:not([hidden])) { grid-template-columns: 56px minmax(0, 1fr); }
  .leg-ilus { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .leg-ilus.entra, .leg-ilus.entra .il-t, .leg-ilus.entra .il-p, .legenda-narracao.falando .leg-ilus .il-anda { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
}
.a11y-sem-movimento .leg-ilus .il-t { stroke-dashoffset: 0 !important; }
.a11y-sem-movimento .leg-ilus .il-p { opacity: 1 !important; }

/* ============================================================
   28/09 · o MARCADOR e a SETA no que está sendo narrado (ver «MARCADOR E SETA» em narracao.js).
   ============================================================ */
.narrado { position: relative; z-index: 2; outline: 2px solid var(--rosa); outline-offset: 4px; clip-path: none !important; /* o corte de canto do .card engolia a borda */
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--rosa) 22%, transparent), 0 18px 40px color-mix(in srgb, var(--brand-roxo) 35%, transparent) !important;
  transform: translateY(-4px); transition: transform .3s ease, box-shadow .3s ease, outline-color .3s ease; }
.narr-seta { position: fixed; z-index: 44; width: 40px; height: 40px; pointer-events: none; opacity: 0; color: var(--rosa-texto);
  transition: opacity .25s ease, top .35s cubic-bezier(.2,.7,.3,1), left .35s cubic-bezier(.2,.7,.3,1);
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--brand-roxo) 45%, transparent)); }
.narr-seta.visivel { opacity: 1; }
.narr-seta svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.narr-seta.visivel svg { animation: narr-seta-cutuca 1.1s ease-in-out infinite; }
.narr-seta.de-cima svg { transform: rotate(90deg); }
.narr-seta.da-direita svg { transform: rotate(180deg); }
.narr-seta.da-direita.visivel svg { animation-name: narr-seta-cutuca-esq; }
@keyframes narr-seta-cutuca-esq { 0%, 100% { transform: rotate(180deg) translateX(0); } 50% { transform: rotate(180deg) translateX(6px); } }
/* 28/09 · margem de rolagem do alvo: o cabeçalho fixo em cima e a barra do narrador embaixo nunca o cobrem */
.narrado { scroll-margin-top: 90px; scroll-margin-bottom: 200px; }
.narr-seta.de-cima.visivel svg { animation-name: narr-seta-cutuca-baixo; }
@keyframes narr-seta-cutuca { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes narr-seta-cutuca-baixo { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .narrado { transform: none; transition: none; }
  .narr-seta, .narr-seta.visivel svg { transition: none; animation: none !important; }
}
.a11y-sem-movimento .narrado { transform: none; }
.a11y-sem-movimento .narr-seta.visivel svg { animation: none; }
@media (forced-colors: active) { .narrado { outline: 3px solid Highlight; } }