/* Sinal RT · mascotes em teste (cópia de teste). Nenhuma direção aprovada: exceção ao manual v2 ainda em proposta.
   Cores só dos tokens: sinal, tinta, linha e rastro; na faixa escura, as versões da faixa. */

.m-lugar { --m-sinal: var(--sinal); --m-tinta: var(--tinta); --m-olho: #FFFFFF; --m-linha: #B9C6D6; --m-rastro: var(--rastro);
  --m-tam: 48px; position: relative; display: inline-flex; align-items: flex-end; gap: 14px; pointer-events: none;
  transition: opacity var(--t-entrada) var(--curva-saida), transform var(--t-entrada) var(--curva-saida); }
.m-lugar[hidden] { display: none; }
.m-lugar.m-escuro { --m-sinal: var(--faixa-sinal); --m-tinta: var(--faixa-tinta); --m-olho: #101A2C; --m-linha: rgba(243, 246, 250, .3); --m-rastro: rgba(243, 246, 250, .55); }
.m-lugar.m-entra { opacity: .4; transform: translateY(18px); }
.m-caixa { display: block; flex: none; width: var(--m-tam); transition: transform var(--t-estado) var(--curva); }
.m-lugar[data-dir="b"] .m-caixa { width: calc(var(--m-tam) * .9); }
.m-lugar[data-dir="c"] .m-caixa { width: calc(var(--m-tam) * 1.15); }
.m-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* A · o quadrado do sinal */
.m-a .m-q { fill: var(--m-sinal); }
.m-a .m-olho { fill: var(--m-olho); transform-box: fill-box; transform-origin: center; transition: transform var(--t-texto) var(--curva); }
.m-a .m-olhos { transition: transform var(--t-texto) var(--curva); }
.m-a .m-corpo { transform-box: fill-box; transform-origin: 50% 100%; transition: transform var(--t-estado) var(--curva); }
.m-lugar[data-pose="apontando"] .m-a .m-corpo { transform: rotate(-8deg); }
.m-lugar[data-pose="apontando"][data-mascote-lado="dir"] .m-a .m-corpo { transform: rotate(8deg); }
.m-lugar[data-pose="contente"] .m-a .m-olho { transform: scaleY(.32); }
.m-lugar[data-dir="a"][data-pose="guardando"] .m-caixa { transform: translateX(var(--m-desloca, -12px)); }

/* B · Registro */
.m-b .m-cel { fill: var(--m-tinta); transition: transform var(--t-estado) var(--curva); transition-delay: calc(var(--i, 0) * 9ms); }
.m-b .m-cel-sinal { fill: var(--m-sinal); }

/* C · a cruz de registro */
.m-c .c-tr { stroke: var(--m-tinta); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: square; fill: none; }
.m-c .c-tick { stroke-width: 1; }
.m-c .c-olho { fill: var(--m-sinal); }
.m-c .c-olhos { transition: transform var(--t-texto) var(--curva), opacity var(--t-controle) linear; }
.m-c .c-ticks, .m-c .c-seta, .m-c .c-fechados { opacity: 0; transition: opacity var(--t-texto) var(--curva); }
.m-c .c-l, .m-c .c-r { transform-box: fill-box; transition: transform var(--t-estado) var(--curva); }
.m-c .c-l { transform-origin: right center; }
.m-c .c-r { transform-origin: left center; }
.m-c .c-corpo { transform-box: view-box; transform-origin: 50px 50px; transition: transform var(--t-estado) var(--curva); }
.m-lugar[data-pose="apontando"] .m-c .c-r { transform: scaleX(1.35); }
.m-lugar[data-pose="apontando"] .m-c .c-seta { opacity: 1; }
.m-lugar[data-pose="apontando"][data-mascote-lado="esq"] .m-c .c-corpo { transform: scaleX(-1); }
.m-lugar[data-pose="medindo"] .m-c .c-l, .m-lugar[data-pose="medindo"] .m-c .c-r { transform: scaleX(1.25); }
.m-lugar[data-pose="medindo"] .m-c .c-ticks { opacity: 1; }
.m-lugar[data-pose="fora"] .m-c .c-corpo { transform: rotate(45deg); }
.m-lugar[data-pose="fora"] .m-c .c-olhos { opacity: 0; }
.m-lugar[data-pose="fora"] .m-c .c-fechados { opacity: 1; }

/* Grade com a vaga do sinal (página de erro) */
.m-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--m-tam) * .08); width: calc(var(--m-tam) * .9); align-self: center; }
.m-grade i { display: block; aspect-ratio: 1; box-sizing: border-box; border: 1.5px solid var(--m-linha); }
.m-grade i.vaga { border-style: dashed; border-color: var(--m-rastro); }

/* Lugares no site */
.m-par { display: inline-flex; align-items: center; gap: 18px; }
.m-abertura { --m-tam: 44px; }
.m-abertura[data-dir="b"] { --m-tam: 52px; }
@media (max-width: 420px) {
  .acoes .m-par { width: 100%; }
  .acoes .m-par .botao { flex: 1 1 auto; width: auto; }
  .m-abertura { --m-tam: 36px; }
  .m-abertura[data-dir="b"] { --m-tam: 48px; }
}
.h-limiar-grupos.tem-mascote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
.h-limiar-grupos .m-lugar, .h-limiar-grupos .m-lugar span { border: 0; padding: 0; background: none; }
.h-limiar-grupos .m-lugar { display: inline-flex; }
.m-limiar { --m-tam: 32px; justify-self: end; }
.m-limiar[data-dir="b"] { --m-tam: 48px; }
.m-limiar[data-dir="c"] { --m-tam: 30px; }
.m-fim { position: absolute; right: 0; top: 50%; margin-top: calc(var(--m-tam) * -.6); --m-tam: clamp(96px, 10vw, 144px); }
.m-fim[data-dir="b"] { --m-tam: clamp(104px, 11vw, 150px); }
html[data-mascote-ativo="a"] .h-fim-marca, html[data-mascote-ativo="b"] .h-fim-marca, html[data-mascote-ativo="c"] .h-fim-marca { display: none; }
@media (max-width: 900px) {
  .m-fim { position: relative; top: auto; right: auto; margin-top: 8px; --m-tam: 56px; justify-self: start; }
  .m-fim[data-dir="b"] { --m-tam: 64px; }
}
.erro-com-mascote { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.erro-com-mascote > .topo-pagina { flex: 1 1 520px; min-width: 0; }
.m-erro { --m-tam: 72px; margin-bottom: clamp(48px, 6vw, 80px); }
@media (max-width: 600px) { .m-erro { --m-tam: 56px; margin-bottom: 40px; } }

/* Seletor da cópia de teste (não vai para produção): faixa no topo, fora do conteúdo */
.m-seletor { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
  background: var(--superficie); border-bottom: 1px solid var(--borda); font: 600 12px/1 var(--f-texto); color: var(--tinta-suave); }
.m-seletor span { margin-right: 6px; letter-spacing: .04em; text-transform: uppercase; }
.m-seletor button, .m-seletor a { min-width: 36px; min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--tinta); font: 700 13px/1 var(--f-texto); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.m-seletor button[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; }
.m-seletor a { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px; }
.m-seletor :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
@media (pointer: coarse) { .m-seletor button, .m-seletor a { min-width: 44px; min-height: 44px; } }

/* A hiperativo: camada fixa sobre o site (abaixo do cabeçalho e da barra de atalhos) */
.mh-camada { position: fixed; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; }
.mh-camada[hidden] { display: none; }
.mh { position: absolute; left: 0; top: 0; pointer-events: auto; touch-action: none; cursor: grab; will-change: transform; user-select: none; -webkit-user-select: none; }
.mh.pego { cursor: grabbing; }
.mh.vazado { pointer-events: none; } /* parado sobre algo clicável: o clique passa para o site */
.mh-mola { width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform 160ms var(--curva-saida); }
.mh-mola.amassa { transform: scale(1.12, .84); transition-duration: 70ms; }
.mh-mola.amassa-forte { transform: scale(1.22, .72); transition-duration: 70ms; }
.mh-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mh-q { fill: var(--sinal); }
.mh-olho { fill: #FFFFFF; transform-box: fill-box; transform-origin: center; transition: transform 90ms linear; }
.mh-olhos { transition: transform 280ms cubic-bezier(.2, .7, .2, 1); } /* 30/10: olhar mais suave */
.mh-mola.surpreso .mh-olho { transform: scale(1.35); transition-duration: 120ms; } /* susto sem pulo */
.mh-mola.pisca .mh-olho { transform: scaleY(.12); }
.mh-mola.dorme .mh-olho { transform: scaleY(.18); transition-duration: 400ms; }
.mh-pausa { position: fixed; z-index: 46; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  min-height: 44px; padding: 0 14px 0 34px; border: 1px solid var(--borda); border-radius: 6px; background: rgba(255, 255, 255, .94);
  color: var(--tinta); font: 700 13px/1 var(--f-texto); cursor: pointer; box-shadow: 0 10px 24px -16px rgba(16, 26, 44, .5); }
.mh-pausa::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--sinal); }
.mh-pausa[aria-pressed="true"]::before { opacity: .45; }
.mh-pausa:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.mh-pausa[hidden] { display: none; }
@media (max-width: 900px) { .mh-pausa { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
/* No cabeçalho: botão quadrado como o do menu; o texto fica para leitores de tela e na dica do ponteiro. */
.mh-pausa.na-cabeca { position: static; display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0;
  border: 1px solid var(--rastro); border-radius: 6px; background: transparent; box-shadow: none; color: var(--tinta); }
.mh-pausa.na-cabeca:hover { background: rgba(127, 140, 160, .12); }
.mh-pausa.na-cabeca::before { content: none; }
.mh-pausa.na-cabeca .mh-pausa-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mh-pausa-icone { display: none; }
.mh-pausa.na-cabeca .mh-pausa-icone { display: block; width: 24px; height: 24px; }
.mh-pausa-icone .ic-fundo { fill: #FFFFFF; }
.mh-pausa .ic-pausado, .mh-pausa[aria-pressed="true"] .ic-ativo { display: none; }
.mh-pausa[aria-pressed="true"] .ic-pausado { display: inline; }
.m-seletor-nota { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500; }
@media print { .mh-camada, .mh-pausa { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .m-lugar, .m-caixa, .m-lugar *, .m-lugar *::before { transition: none !important; }
  .m-lugar.m-entra { opacity: 1; transform: none; }
}
@media print { .m-lugar, .m-seletor { display: none !important; } }
/* Hiperativo: espaço para ele ficar de guarda em cima do grupo pequeno sem cobrir o controle deslizante. */
html[data-mascote-hiper="ligado"] .h-limiar-grupos { margin-top: 36px; }