/* Visionaries: o passaporte digital da viagem.
   Marca da Link (brandbook 2024): Azul Link #10284E, Amarelo Link #FEC641 só no que é "você" e num botão principal por tela,
   Montserrat como fonte de sistema no lugar da Aeonik. IBM Plex Mono só para dado: voo, assento, hora, coordenada, identificador.
   Tallinn: azul, preto e branco da bandeira estoniana e o losango do bordado. Helsinki: azul e branco finlandeses e a onda. Tema claro sempre.

   Este arquivo é o sistema inteiro (o revisao.css foi fundido aqui). Ordem: tokens, base, cabeçalho, topo e abas, layout, componentes,
   telas, receitas de movimento, utilitários. Todo valor de cor, tamanho de texto, raio, sombra e curva vem dos tokens do :root:
   para trocar a fonte de título, o raio ou a curva do app inteiro, muda-se uma variável. */
:root {
  /* cor: marca */
  --navy: #10284E; --navy-2: #546484; --navy-3: #1A3560; --navy-4: #24447A; --navy-0: #0B1730; --navy-0-rgb: 8 17 36;
  --amarelo: #FEC641; --amarelo-2: #F5B92A;
  /* cor: papel e texto */
  --papel: #FAFAF7; --branco: #FFFFFF; --tinta: #0E1B33; --suave: #5A6578; --sobre-navy: #C9D1E0; --sobre-foto: #FFFFFF;
  /* cor: superfícies e bordas */
  --fundo-2: #EEF1F5; --fundo-3: #DDE2EA; --linha: #E2E5EA; --linha-forte: #C9D0DB; --borda-campo: #8D97A8; --controle-off: #7C8799;
  --visor-papel: #F1EFE8; --visor-quadro: #E7E4DA; --mapa-fundo: #D3E2F1;
  /* cor: estados */
  --ok: #187A50; --ok-fundo: #E7F5EE; --ok-claro: #9FE0BF; --erro: #B23A26; --erro-fundo: #FBE9E5; --erro-claro: #FFD9D2; --aviso-fundo: #FFF6DC;
  /* tinta de carimbo: o vermelho do selo de chegada no canvas do estúdio (story.js lê daqui). Não é erro: é tinta de documento. */
  --carimbo: #B0283A;
  /* cor: cidades (Tallinn é o padrão, Helsinki troca no body.helsinki) */
  --tll: #0072CE; --tll-claro: #E3F0FB; --hel: #002F6C; --hel-2: #5C8FD6; --hel-texto: #2C6FBB; --hel-claro: #E6EEF8;
  --cidade: var(--tll); --cidade-2: #111111; --cidade-claro: var(--tll-claro);
  /* tinta da fase: a fase da viagem (body.fase-pre/-tll/-hel/-pos, de base.js) troca o acento, a capa e as faixas do app inteiro.
     --acento é cor de texto e de traço sobre papel (contraste >= 4,5:1); --acento-fundo é a faixa clara; --noite é o fundo
     da capa e do documento escuro; --veu-cor tinge o véu sobre a foto. Antes e depois da viagem vale a Link: azul e amarelo. */
  --acento: var(--navy); --acento-fundo: #E9EDF4; --noite: var(--navy); --noite-2: var(--navy-3); --veu-cor: var(--navy-0); --sobre-noite: var(--sobre-navy);
  --papel-fase: #FAFAF7;
  /* tinta de cada fase (body.fase-*): acento, noite e papel de Tallinn, Helsinki e da volta */
  /* Tallinn é o azul da bandeira estoniana (a capa vira o sinine claro, o véu fica no preto da bandeira); Helsinki é o azul
     finlandês fundo sobre papel de neve; a volta é o papel dourado da lembrança. O papel de cada fase é visível de propósito:
     o aluno sabe em que cidade está sem olhar a foto. Pares conferidos: --suave sobre cada papel >= 5,2:1, --acento >= 5,5:1. */
  --tll-acento: #0062B1; --tll-noite: #0062B1; --tll-noite-2: #00508F; --tll-veu: #04101F; --tll-sobre-noite: #DCE8F6; --tll-papel: #EDF2F8;
  --hel-acento: #1F5FAD; --hel-noite: #002F6C; --hel-noite-2: #0B3F86; --hel-veu: #001433; --hel-sobre-noite: #C3D5EE; --hel-papel: #EEF4F9;
  --pos-acento-fundo: #FFF4D6; --pos-papel: #FBF6EA;

  --foil: linear-gradient(115deg, #0072CE 0%, #55C6E0 34%, #B8EBD6 58%, #FEC641 82%, #0072CE 100%);
  /* véus: foto de capa e entrada, vidro do topo, vidro sobre foto */
  --veu-entrada: linear-gradient(180deg, color-mix(in srgb, var(--navy) 20%, transparent), color-mix(in srgb, var(--navy) 94%, transparent) 62%);
  --vidro-foto: color-mix(in srgb, var(--navy) 62%, transparent);
  --branco-12: color-mix(in srgb, var(--branco) 12%, transparent); --branco-22: color-mix(in srgb, var(--branco) 22%, transparent);
  /* padrões em SVG */
  --padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6 L6 0 L12 6 L6 12Z' fill='%230072CE'/%3E%3Cpath d='M12 6 L18 0 L24 6 L18 12Z' fill='%23111'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23fff'/%3E%3Ccircle cx='18' cy='6' r='1.6' fill='%23fff'/%3E%3C/svg%3E");
  --padrao-tll: var(--padrao);
  --padrao-hel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Cpath d='M0 9 Q7 1 14 9 T28 9' stroke='%23002F6C' stroke-width='2' fill='none'/%3E%3Cpath d='M0 12 Q7 4 14 12 T28 12' stroke='%235C8FD6' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  --furos-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Crect x='3' y='1' width='10' height='6' rx='1.5' fill='%2310284E'/%3E%3C/svg%3E");
  --furos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Crect x='3' width='10' height='6' rx='1.5' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E");
  /* fontes: troque aqui a de título e o app todo muda */
  --fonte-display: 'Archivo', 'Montserrat', system-ui, sans-serif;
  --largura-display: 108%;
  --fonte-corpo: 'Montserrat', system-ui, sans-serif;
  --mono: 'Plex Mono', 'IBM Plex Mono', ui-monospace, monospace;
  /* texto: seis passos, piso de 12 px; os dois numerais são de display e ficam fora da escala */
  --t-1: 0.75rem; --t-2: 0.875rem; --t-3: 1rem; --t-4: 1.25rem; --t-5: 1.75rem; --t-6: 2.5rem;
  --t-numero: 3.5rem; --t-numero-xl: 5.5rem;
  /* rótulo de barra (abas, relógio, SOS): o passo 1 com teto, para o texto em 130% não estourar a barra */
  --t-rotulo: min(var(--t-1), 13px);
  /* raio: três passos mais a pílula; círculo é 50% */
  --r-1: 6px; --r-2: 12px; --r-3: 20px; --r-pilula: 999px;
  /* elevação: três passos (traço fino, cartão, flutuante) */
  --sombra-1: 0 1px 3px color-mix(in srgb, var(--tinta) 24%, transparent);
  --sombra-2: 0 1px 1px color-mix(in srgb, var(--tinta) 4%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--tinta) 22%, transparent);
  --sombra-3: 0 12px 30px -8px color-mix(in srgb, var(--tinta) 50%, transparent);
  --sombra: var(--sombra-2);
  /* espaço: escala de 4 px. Todo margin, padding e gap sai daqui; o que fica abaixo de 12 px fora da escala (1 a 7 px)
     é ajuste ótico de pílula, selo de contagem e ícone.
     --e-secao separa seções de tela; o título de seção fica a --e-4 do seu conteúdo, então o espaço acima de um título é sempre maior que o de baixo */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-7: 32px; --e-8: 40px;
  --e-secao: var(--e-8);
  /* movimento: saída suave para tudo que entra, entrada e saída para o que troca, e a curva do carimbo (mola) */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  /* o carimbo cai rápido e assenta: a batida (o achatamento e a volta) está nos quadros-chave, não numa curva que passa do alvo */
  --ease-carimbo: cubic-bezier(.5, 0, .15, 1);
  --dur-1: 150ms; --dur-2: 250ms; --dur-3: 500ms;
  --topo-folga: 0px;
  color-scheme: light only;
}
body.helsinki { --cidade: var(--hel-texto); --cidade-2: var(--hel-2); --cidade-claro: var(--hel-claro); --padrao: var(--padrao-hel); }
body.fase-tll { --acento: var(--tll-acento); --acento-fundo: var(--tll-claro); --noite: var(--tll-noite); --noite-2: var(--tll-noite-2); --veu-cor: var(--tll-veu); --sobre-noite: var(--tll-sobre-noite); --papel-fase: var(--tll-papel); }
body.fase-hel { --acento: var(--hel-acento); --acento-fundo: var(--hel-claro); --noite: var(--hel-noite); --noite-2: var(--hel-noite-2); --veu-cor: var(--hel-veu); --sobre-noite: var(--hel-sobre-noite); --papel-fase: var(--hel-papel); }
body.fase-pos { --acento: var(--navy); --acento-fundo: var(--pos-acento-fundo); --noite: var(--navy); --noite-2: var(--navy-3); --veu-cor: var(--navy-0); --papel-fase: var(--pos-papel); }

/* ---------- base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* a Plex Mono tem só 400, 500 e 600 e a Montserrat vai até 800: sem negrito sintético, um <b> pesado usa o corte real mais próximo */
html { font-size: 100%; font-synthesis-weight: none; }
html, body { margin: 0; background: var(--papel-fase); color: var(--tinta); font-family: var(--fonte-corpo); line-height: 1.45; font-size: 1rem; overscroll-behavior-y: none; }
body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); min-height: 100vh; -webkit-font-smoothing: antialiased; }
::selection { background: var(--amarelo); color: var(--navy); }
:focus-visible { outline: 2.5px solid var(--cidade); outline-offset: 2px; border-radius: var(--r-1); }
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--cidade); }
h1, h2, h3 { font-family: var(--fonte-display); font-stretch: var(--largura-display); line-height: 1.08; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
/* h1 é o título de tela: o mesmo corte em toda tela (aba, subpágina, capa); as variantes só trocam o tamanho */
h1 { font-size: var(--t-6); font-weight: 780; font-stretch: 116%; letter-spacing: -.025em; line-height: 1.04; overflow-wrap: break-word; }
h2 { font-size: var(--t-4); font-weight: 700; line-height: 1.12; }
h3 { font-size: var(--t-3); font-weight: 700; letter-spacing: -.005em; font-stretch: 100%; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
main:focus { outline: none; }
.mono { font-family: var(--mono); font-feature-settings: 'zero' 1; letter-spacing: 0; }
.dado { font-size: var(--t-2); color: var(--suave); font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.oculto { display: none !important; }
.oculto-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Texto do sistema: as fontes estão em rem, então seguem o tamanho de texto escolhido no Android e no navegador.
   No iPhone, -apple-system-body liga a raiz ao Tamanho do Texto dos Ajustes; a família e a altura de linha voltam às do app. */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
  html, body { font-family: var(--fonte-corpo); line-height: 1.45; font-weight: 400; }
}

/* ---------- cabeçalho de tela: um componente, três variantes
   .cab--aba   título de aba, com a faixa da cidade embaixo
   .cab--sub   subpágina: voltar e título menor
   .cab--painel título do staff, da família do título de aba, com os números de abertura em linhas de dado */
.cab { margin-top: var(--e-5); }
.cab-titulo { font-size: var(--t-6); }
.cab--aba .cab-titulo, .cab--painel .cab-titulo { color: var(--acento); }
.cab--aba .cab-titulo::after, .cab--painel .cab-titulo::after { content: ''; display: block; width: 72px; height: 10px; margin-top: 12px; background: var(--padrao) repeat-x left center / auto 10px; }
.cab--sub { margin-top: 0; }
.cab--sub .cab-titulo { font-size: var(--t-5); margin-top: 4px; }
.cab--painel .cab-titulo { margin-bottom: var(--e-3); }
.cab--painel .dado { margin-top: var(--e-1); }
.cab--painel .dado b { color: var(--tinta); font-weight: 600; }
.cab--painel .quem-falta { margin-top: var(--e-2); color: var(--suave); font-size: var(--t-2); border-bottom: 1px solid var(--linha); }
.cab--painel .quem-falta summary::after { flex: none; }
.cab--painel .quem-falta summary { cursor: pointer; font-weight: 400; min-height: 48px; padding: var(--e-2) 0; gap: var(--e-3); }
.cab--painel .quem-falta p { margin: 6px 0 var(--e-3); padding: 0; }
.voltar { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-2); color: var(--suave); text-decoration: none; min-height: 44px; }
.voltar svg { width: 18px; height: 18px; }

/* ---------- topo e navegação */
/* No app instalado do iPhone, o próprio sistema desfoca uma faixa de uns 30 px abaixo da barra de status, em degradê.
   A folga desce a marca e o relógio para fora dela. No navegador e no Android a folga é zero. */
@media (display-mode: standalone) { @supports (-webkit-touch-callout: none) { :root { --topo-folga: 28px; } } }
/* Parado no topo da tela, o topo é sólido. O vidro fosco (fundo translúcido com desfoque) só entra quando há conteúdo
   rolando por baixo dele: no iPhone, o desfoque ligado o tempo todo deixa a marca e o relógio com cara de borrados. */
.topo { position: sticky; top: 0; z-index: 20; background: var(--papel-fase);
  padding: calc(8px + env(safe-area-inset-top) + var(--topo-folga)) 20px 8px; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); border-bottom: 1px solid transparent;
  transition: background-color var(--dur-2), border-color var(--dur-2); }
.topo.rolou { border-bottom-color: color-mix(in srgb, var(--acento) 28%, var(--linha)); background: var(--papel-fase); }
.topo .linha { gap: var(--e-2); min-width: 0; flex-shrink: 0; }
.topo .linha:has(.sino-topo) { gap: 6px; }
.topo .marca { font-weight: 800; font-size: var(--t-3); letter-spacing: -.01em; color: var(--navy); display: flex; align-items: center; gap: var(--e-2); text-decoration: none; min-height: 44px; min-width: 0; flex: 1 1 auto; }
.topo .marca img { width: 34px; height: 34px; flex: none; }
.topo .marca span { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; overflow: hidden; }
.topo .marca small { font-family: var(--mono); font-weight: 600; font-size: var(--t-rotulo); letter-spacing: .06em; color: var(--suave); margin-top: 3px; white-space: nowrap; }
/* As duas bandeiras empilhadas, como os dois relógios ao lado: lado a lado elas cortavam o nome Visionaries no topo. */
.linguas { flex: none; display: flex; flex-direction: column; }
.linguas button { display: grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .35; filter: saturate(.4); transition: opacity var(--dur-1), filter var(--dur-1); }
.linguas button[aria-pressed="true"] { opacity: 1; filter: none; }
.linguas svg { display: block; width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 18%, transparent); }
.topo .relogio { flex: none; font-family: var(--mono); font-size: var(--t-rotulo); color: var(--suave); text-align: right; line-height: 1.3; }
.offline { font-size: var(--t-1); background: var(--navy); color: var(--branco); padding: 5px 11px; border-radius: var(--r-pilula); }
.socorro { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-2); background: var(--erro); color: var(--branco); font-weight: 700; font-size: var(--t-rotulo); text-decoration: none; letter-spacing: .04em; }
/* Sino do topo: abre a central de notificações e mostra quantas chegaram desde a última visita */
.sino-topo { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-2); color: var(--navy); text-decoration: none; }
.sino-topo svg { width: 24px; height: 24px; }
.sino-topo:active { background: var(--fundo-2); }
.sino-topo b { position: absolute; top: 2px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pilula); background: var(--erro); color: var(--branco); font-family: var(--mono); font-size: var(--t-1); font-weight: 600; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--papel); animation: sino-chega .45s var(--ease); }
@keyframes sino-chega { from { transform: scale(.4); opacity: 0; } }
/* Barra de abas sólida e opaca: o vidro fosco fixo sobre a tela rolando custava quadro a quadro no iPhone. */
.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--branco);
  border-top: 1px solid color-mix(in srgb, var(--acento) 22%, var(--linha)); display: flex; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.nav a { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: var(--t-rotulo); font-weight: 600; color: var(--suave); text-decoration: none; padding: 4px 0; min-height: 48px; transition: color var(--dur-1); }
.nav a svg { width: 24px; height: 24px; }
.nav a.ativo { color: var(--acento); }
.nav a .pino { position: relative; transition: transform var(--dur-1) var(--ease); }
.nav a:active .pino { transform: scale(.88); }
.nav a .pino b { position: absolute; top: -6px; right: -12px; background: var(--erro); color: var(--branco); font-size: var(--t-1); border-radius: var(--r-pilula); padding: 2px 6px; font-family: var(--mono); }
/* staff tem 6 abas: o rótulo mantém os 12 px e aperta o espaçamento entre as letras */
.nav:has(a:nth-child(6)) a { letter-spacing: -.03em; padding-left: 0; padding-right: 0; }
/* Telas estreitas: o topo aperta a margem e a marca para "Visionaries" caber inteiro ao lado dos dois relógios,
   e os rótulos das abas apertam as letras para "Passaporte" não encostar no vizinho. */
@media (max-width: 379px) {
  .topo { padding-left: var(--e-4); padding-right: var(--e-4); }
  .topo .marca { gap: 6px; }
  .topo .marca img { width: 30px; height: 30px; }
  .topo .linha:has(.sino-topo) { gap: 2px; }
  .nav a { letter-spacing: -.03em; }
}
.nav .marcador { position: absolute; top: -7px; left: 50%; width: 28px; height: 4px; margin-left: -14px; border-radius: 0 0 var(--r-pilula) var(--r-pilula); background: var(--amarelo); view-transition-name: marcador; }
/* A aba Passaporte pulsa quando o carimbo chega */
.nav a.recebeu .pino { animation: aba-recebe .5s var(--ease); }
@keyframes aba-recebe { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---------- layout */
main { padding: 0 20px 24px; max-width: 640px; margin: 0 auto; }
.secao { margin-top: var(--e-secao); }
.secao > h2 { margin-bottom: var(--e-4); }
.secao > .entre > h2 { margin-bottom: 0; }
.secao[id^="dia-"] { scroll-margin-top: 120px; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); }
/* O link curto ao lado do título ("todas", "ver os 42") não encolhe: com título de duas linhas, ele quebrava letra a letra. */
.entre > a, .entre > .dado, .entre > button { flex: none; white-space: nowrap; }
.linha { display: flex; align-items: center; gap: var(--e-3); }
.pilha > * + * { margin-top: var(--e-3); }
main .mono, main .dado, .tempo li .t, .link-seta b { overflow-wrap: break-word; }

/* ---------- foto de lugar (duotone já vem pronto do script).
   Capa e mapa vão de borda a borda com margem negativa: limite de largura neles encolhe a faixa e desalinha. */
.capa { position: relative; margin: 0 -20px; min-height: 320px; overflow: hidden; background: var(--navy); color: var(--sobre-foto); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 20px 20px; isolation: isolate; }
.capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.capa::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--veu-cor) 50%, transparent) 0%, color-mix(in srgb, var(--veu-cor) 40%, transparent) 35%, color-mix(in srgb, var(--veu-cor) 80%, transparent) 62%, color-mix(in srgb, var(--veu-cor) 95%, transparent) 100%); }
.capa h1 { font-size: var(--t-6); color: var(--sobre-foto); text-shadow: 0 1px 10px color-mix(in srgb, var(--navy-0) 55%, transparent); }
.capa .dado { color: var(--sobre-foto); text-shadow: 0 1px 10px color-mix(in srgb, var(--navy-0) 55%, transparent); }
.capa .credito { position: absolute; top: 10px; right: 12px; font-size: var(--t-1); color: var(--sobre-foto); max-width: 60%; text-align: right; padding: 2px 6px; border-radius: var(--r-1); background: var(--vidro-foto); }
.capa.baixa { height: 220px; }
.capa .faixa { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--padrao) repeat-x center / auto 8px; background-color: var(--branco); }

/* ---------- objetos e botões */
.objeto { background: var(--branco); border-radius: var(--r-3); box-shadow: var(--sombra-2); padding: var(--e-5); }
.objeto + .objeto { margin-top: var(--e-3); }
.objeto-navy { background: var(--navy); color: var(--branco); }
.alerta { background: var(--amarelo); color: var(--navy); border-radius: var(--r-3); padding: var(--e-5); }
.alerta .dado { color: var(--navy); }
.alerta .campo span { color: var(--tinta); }
/* Banner: aviso de estado que corre de borda a borda, sem caixa. Substitui o cartão de alerta no painel do staff. */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: var(--e-4) -20px 0; padding: var(--e-4) 20px; font-size: var(--t-3); border-radius: 0; }
.banner > p { flex: 1 1 14rem; }
.banner--erro { background: var(--erro); color: var(--branco); }
.banner--aviso { background: var(--amarelo); color: var(--navy); }
.banner .botao { flex: none; }
.banner--erro .botao { background: var(--branco); color: var(--erro); }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); border: 0; border-radius: var(--r-2); padding: var(--e-3) var(--e-5); font-weight: 700;
  background: var(--navy); color: var(--branco); cursor: pointer; text-decoration: none; min-height: 48px; transition: transform var(--dur-2) var(--ease), background var(--dur-2); }
.botao:active { transform: scale(.97); }
.botao.amarelo { background: var(--amarelo); color: var(--navy); }
.botao.claro { background: var(--fundo-2); color: var(--navy); }
.botao.contorno { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linha-forte); color: var(--navy); }
.botao.vidro { background: var(--vidro-foto); color: var(--branco); box-shadow: inset 0 0 0 1px var(--branco-22); }
.botao.cheio { width: 100%; }
.botao.pequeno { min-height: 44px; padding: var(--e-2) var(--e-4); font-size: var(--t-2); border-radius: var(--r-2); }
.botao:disabled { opacity: 1; background: var(--borda-campo); color: var(--branco); cursor: default; }
.botao svg { width: 20px; height: 20px; flex: none; }
.link-seta { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: 16px 0; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta); min-height: 56px; }
.link-seta:last-child { border-bottom: 0; }
.link-seta b { font-weight: 700; }
.link-seta svg { width: 18px; height: 18px; color: var(--suave); flex: none; }
.link-seta.bloco { display: block; }
.cs-lista button.link-seta { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--linha); text-align: left; font: inherit; color: inherit; min-height: 48px; cursor: pointer; }
.dado[href], a.dado { color: var(--acento); display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: -12px -4px; }

/* ---------- agora e agenda como linha do tempo */
/* Capa da tela Agora: cartão de embarque de borda a borda. Em cima a foto do lugar sob um véu na cor da noite da cidade,
   com o estado em pílula sólida, o relógio mono grande (hora local e de São Paulo) e o título; embaixo, depois do picote,
   o canhoto de papel com os campos e as ações. Todo texto sobre a foto fica na metade de baixo, onde o véu passa de 80%. */
.embarque { margin: 0 -20px; position: relative; }
.emb-foto { position: relative; isolation: isolate; overflow: hidden; background: var(--noite); color: var(--sobre-foto); min-height: 360px; padding: 64px 20px var(--e-6); display: flex; flex-direction: column; justify-content: flex-end; }
.emb-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.emb-foto::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--veu-cor) 30%, transparent) 0%, color-mix(in srgb, var(--veu-cor) 50%, transparent) 30%, color-mix(in srgb, var(--veu-cor) 84%, transparent) 58%, color-mix(in srgb, var(--veu-cor) 96%, transparent) 100%); }
.emb-foto .credito { position: absolute; top: 12px; right: 14px; font-size: var(--t-1); color: var(--sobre-foto); max-width: calc(100% - 28px); padding: 2px 6px; border-radius: var(--r-1); background: var(--vidro-foto); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-status { margin: 0 0 var(--e-4); }
.emb-chip { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 32px; padding: 4px 12px; border-radius: var(--r-pilula); background: var(--amarelo); color: var(--navy); font-size: var(--t-2); font-weight: 600; }
.emb-chip.ao-vivo { background: var(--branco); color: var(--navy); }
/* ponto fixo: o estado "agora" já vem escrito no rótulo, o ponto só marca a cor de ao vivo */
.emb-chip.ao-vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--erro); }
.emb-relogio { display: flex; align-items: flex-end; gap: var(--e-3); }
.emb-hora { font-size: min(var(--t-numero-xl), 23vw); white-space: nowrap; font-weight: 500; line-height: .86; letter-spacing: -.04em; color: var(--branco); font-variant-numeric: tabular-nums; }
.emb-fuso { font-size: var(--t-2); line-height: 1.3; color: var(--branco); padding-bottom: 6px; letter-spacing: .02em; }
.emb-foto h1 { margin-top: var(--e-4); font-size: var(--t-5); font-stretch: 112%; line-height: 1.06; color: var(--branco); }
/* o canhoto: papel, picote com dois recortes de meia-lua nas pontas, campos em mono como num bilhete */
.emb-canhoto { position: relative; background: var(--branco); padding: 20px 20px var(--e-5); box-shadow: var(--sombra-2); }
.emb-canhoto::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; border-top: 2px dashed var(--linha-forte); }
.emb-canhoto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--padrao) repeat-x center / auto 8px; background-color: var(--branco); }
/* Selo holográfico colado sobre o picote, como o holograma que amarra as duas metades de um documento: o mesmo foil do
   cartão de identidade. Foil no app marca o que é seu: o seu cartão e o seu próximo embarque. */
.emb-holo { position: absolute; z-index: 2; top: -26px; right: 20px; width: 52px; height: 52px; border-radius: 50%;
  background: url(/marca/simbolo.svg) center / 58% no-repeat, var(--foil); background-size: 58%, 220% 220%; background-position: center, 0 0;
  box-shadow: 0 0 0 3px var(--branco), 0 6px 16px -4px color-mix(in srgb, var(--tinta) 45%, transparent); }
/* O foil não roda em laço: na chegada à tela ele vira contra a luz uma vez, ida e volta, como o holograma de um
   documento inclinado na mão; tocar no canhoto vira de novo. Parado, continua com as cores do foil e não gasta bateria. */
.chegou .emb-holo, .emb-canhoto:active .emb-holo { animation: holo 1.6s var(--ease-in-out) .35s 2 alternate both; }
@keyframes holo { to { background-position: center, 100% 100%; } }
.emb-canhoto > .emb-holo + * { padding-right: 60px; }
.emb-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) 16px; margin: 0; }
.emb-campos > div { min-width: 0; }
.emb-campos .largo { grid-column: 1 / -1; }
/* rótulo de campo de documento (canhoto, e-ID): mono, caixa alta, .06em; o valor fica na fonte do corpo */
.emb-campos dt { font-family: var(--mono); font-size: var(--t-1); color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.emb-campos dd { margin: 2px 0 0; font-weight: 600; font-size: var(--t-3); line-height: 1.3; overflow-wrap: break-word; }
.emb-campos .tolerancia { font-size: var(--t-2); }
.emb-nota { margin-top: var(--e-4); font-size: var(--t-2); color: var(--tinta); }
.emb-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: 16px; padding-bottom: 12px; }
.emb-acoes:empty { display: none; }
.emb-destaque { padding-bottom: 20px; }
.emb-destaque .botao { width: 100%; }
.tolerancia { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); }
.tolerancia::before { content: ''; width: 8px; height: 8px; border-radius: 0; background: currentColor; transform: rotate(45deg); }
.tolerancia.zero { color: var(--erro); }
.tolerancia.zero.calma { color: var(--suave); }
.capa .tolerancia.zero { color: var(--amarelo); }
.tempo { position: relative; list-style: none; margin: 0; padding: 0 0 0 80px; }
.tempo::before { content: ''; position: absolute; left: 64px; top: 6px; bottom: 6px; width: 2px; background: var(--linha); }
/* O trilho da linha do tempo se preenche na cor da cidade até onde o relógio está. Quem calcula a altura é
   movimento.js (--prog, de 0 a 1); a escala vertical anda por transform, então o preenchimento nunca mexe no layout. */
@property --prog { syntax: '<number>'; inherits: true; initial-value: 0; }
.tempo::after { content: ''; position: absolute; left: 64px; top: 6px; bottom: 6px; width: 2px; border-radius: var(--r-pilula); background: var(--cidade);
  transform-origin: 50% 0; transform: scaleY(var(--prog, 0)); }
.tempo li { position: relative; padding: var(--e-3) 0 var(--e-4); transition: opacity var(--dur-2) var(--ease); }
.tempo li .h { position: absolute; left: -80px; top: 12px; width: 46px; font-family: var(--mono); font-size: var(--t-2); color: var(--suave); text-align: right; }
.tempo li .h .fuso { display: block; font-size: var(--t-1); color: var(--suave); }
.tempo li .ic { position: absolute; left: -30px; top: 8px; width: 28px; height: 28px; border-radius: var(--r-1); background: var(--papel); display: grid; place-items: center; z-index: 1; transition: background-color var(--dur-2) var(--ease); }
.tempo li .ic svg { width: 22px; height: 22px; }
.tempo li .ic.passo-n { font-family: var(--mono); font-weight: 600; color: var(--navy); background: var(--fundo-2); }
.tempo li .t { font-weight: 600; }
.tempo li .t a { display: inline-block; padding: 12px 0; margin: -12px 0; color: inherit; text-decoration-color: var(--linha-forte); }
.tempo li.passou { opacity: 1; }
.tempo li.passou .t, .tempo li.passou .suave, .tempo li.passou .h { color: var(--suave); }
.tempo li.passou .ic { opacity: .5; }
.tempo li.agora .ic { background: var(--acento-fundo); color: var(--acento); }
.tempo li.agora::before { content: ''; position: absolute; z-index: -1; inset: 0 -20px 0 -100px; background: var(--acento-fundo); }
.tempo { isolation: isolate; }
.tempo li.agora .h { color: var(--acento); font-weight: 600; }
.tempo li.agora .h::after { content: var(--t-agora, 'agora'); display: block; font-size: var(--t-1); color: var(--acento); }
.tempo li .tolerancia { margin-top: 4px; }
/* A atividade em curso pulsa três vezes na chegada à tela ou quando vira a atual, e para: é aviso de estado, não enfeite. */
.tempo li.agora.pulsa .ic::after { content: ''; position: absolute; inset: -1px; border-radius: var(--r-1); border: 2px solid var(--cidade); opacity: 0;
  animation: tempo-pulso 1.6s var(--ease) var(--pulso-atraso, .1s) 3; pointer-events: none; }
@keyframes tempo-pulso { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.recolhido { font-size: var(--t-1); color: var(--suave); background: none; border: 0; padding: 4px 0 var(--e-3); cursor: pointer; min-height: 44px; }

/* cartas de aposta em fileira */
.fileira { display: flex; gap: var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 16px; scrollbar-width: none; }
.fileira::-webkit-scrollbar { display: none; }
.carta { flex: 0 0 78%; scroll-snap-align: start; background: var(--branco); border-radius: var(--r-3); box-shadow: var(--sombra-2); overflow: hidden; text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; }
.carta img { width: 100%; height: 96px; object-fit: cover; display: block; }
.carta .corpo { padding: var(--e-4) 16px 16px; display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.carta .corpo .dado { margin-top: auto; }

/* ---------- aposta */
.opcoes { display: grid; gap: var(--e-2); margin-top: var(--e-4); }
.opcao { text-align: left; border: 1.5px solid var(--linha); background: var(--branco); border-radius: var(--r-2); padding: var(--e-3) var(--e-4); font-weight: 600; cursor: pointer; min-height: 52px; position: relative; overflow: hidden; }
.opcao.escolhida { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.opcao.certa { border-color: var(--ok); background: var(--ok-fundo); }
.opcao .barra { height: 4px; background: var(--linha); border-radius: var(--r-pilula); margin-top: var(--e-2); overflow: hidden; }
.opcao .barra i { display: block; height: 100%; background: var(--navy); }
.opcao .tag { font-size: var(--t-1); color: var(--suave); margin-left: 6px; font-weight: 400; }

details { border-top: 1px solid var(--linha); }
details:last-of-type { border-bottom: 1px solid var(--linha); }
details summary { font-weight: 700; cursor: pointer; list-style: none; padding: var(--e-4) 0; min-height: 48px; display: flex; justify-content: space-between; align-items: center; }
details summary::-webkit-details-marker { display: none; }
/* Número dentro do título da dobra: mesmo peso do título, não o 900 do bolder (a Montserrat vai até 800). */
summary b { font-weight: inherit; }
details summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave); transform: rotate(45deg); transition: transform var(--dur-2) var(--ease); margin-right: 4px; }
details[open] summary::after { transform: rotate(-135deg); }
details p { padding-bottom: var(--e-4); }

/* ---------- formulários */
.campo { display: block; margin: var(--e-3) 0; }
.campo span { display: block; font-size: var(--t-2); font-weight: 600; margin-bottom: 6px; color: var(--suave); }
.campo span .mono { float: right; font-weight: 400; }
.campo input, .campo select, .campo textarea { width: 100%; padding: var(--e-3) var(--e-4); border: 1.5px solid var(--borda-campo); border-radius: var(--r-2); background: var(--branco); min-height: 48px; }
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--cidade); outline: none; }
.chave { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); padding: var(--e-3) 0; min-height: 48px; cursor: pointer; }
.chave.compacta { padding: var(--e-2) 0; }
.chave input { appearance: none; position: relative; width: 50px; height: 30px; border-radius: var(--r-pilula); background: var(--controle-off); flex: none; transition: background var(--dur-2); cursor: pointer; }
/* a área de toque do botão é maior que o desenho: 44 px de altura */
.chave input::before { content: ''; position: absolute; inset: -8px -4px; }
.chave input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--branco); box-shadow: var(--sombra-1); transition: transform var(--dur-2) var(--ease); }
.chave input:checked { background: var(--acento); }
.chave input:checked::after { transform: translateX(20px); }
.com-olho { position: relative; display: block; }
.com-olho input { padding-right: 96px; }
.olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 var(--e-3); border: 0; border-radius: var(--r-2); background: var(--fundo-2); color: var(--navy); font-size: var(--t-1); font-weight: 600; cursor: pointer; }
.erro-campo { min-height: 0; color: var(--erro-claro); font-weight: 600; font-size: var(--t-2); margin: 0 0 var(--e-3); }
.erro-campo:empty { display: none; }
.estado-ajuda { margin-top: var(--e-3); color: var(--navy); font-weight: 600; font-family: inherit; font-size: var(--t-3); }
.estado-ajuda:empty { display: none; }

/* ---------- selos */
.selos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4) var(--e-3); }
.selo { text-decoration: none; color: var(--tinta); text-align: center; font-size: var(--t-1); font-weight: 600; line-height: 1.25; }
.selo .img { aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 6px; position: relative; }
.selo .img svg, .selo .img img { width: 100%; height: 100%; }
.selo .data { display: block; font-family: var(--mono); font-size: var(--t-1); color: var(--suave); font-weight: 400; margin-top: 2px; }
.selo.pendente .img::after { content: var(--t-em-analise, 'em análise'); position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-size: var(--t-1); background: var(--amarelo); color: var(--navy); padding: 3px 9px; border-radius: var(--r-pilula); white-space: nowrap; }
.selo.fechado { opacity: .55; }

/* ---------- Passaporte: capa e páginas. A capa repete o tratamento do topo da tela Agora; cada fase vira uma página
   com o motivo da placa dos seus selos no alto (bilhete, losango, onda, visto, foil, fita). */
/* Capa do Passaporte: capa de documento na cor da noite da fase, o losango gravado e a contagem em mono. Sem foto. */
.capa-passaporte { position: relative; margin: 0 -20px; padding: var(--e-7) 20px var(--e-7); background: var(--noite); color: var(--branco); overflow: hidden; isolation: isolate;
  background-image: repeating-radial-gradient(circle at 115% -10%, transparent 0 14px, color-mix(in srgb, var(--branco) 5%, transparent) 14px 15px); }
.capa-passaporte::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--padrao) repeat-x center / auto 8px; background-color: var(--branco); }
.cp-brasao { display: block; width: 64px; height: 64px; margin-bottom: var(--e-5); }
.capa-passaporte h1 { font-size: var(--t-5); font-stretch: 125%; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--amarelo); line-height: 1; }
.cp-emissor { margin-top: 8px; font-size: var(--t-2); text-transform: uppercase; letter-spacing: .12em; color: var(--sobre-noite); }
.capa-passaporte .medidor { margin-top: 24px; }
.capa-passaporte .medidor b { font-size: var(--t-numero); color: var(--branco); }
.capa-passaporte .medidor .dado { color: var(--sobre-noite); }
.capa-passaporte .medidor p { flex-wrap: wrap; }
.capa-passaporte .medidor .trilho { background: color-mix(in srgb, var(--branco) 22%, transparent); height: 8px; }
.capa-passaporte .dupla { margin: var(--e-6) 0 0; display: flex; flex-direction: column; gap: 2px; }
.capa-passaporte .dupla .dado { color: var(--sobre-noite); }
.capa-passaporte .dupla b { font-size: var(--t-4); font-weight: 700; line-height: 1.2; overflow-wrap: normal; }
.capa-passaporte .nota { margin: var(--e-2) 0 0; font-size: var(--t-2); color: var(--sobre-noite); max-width: 36ch; }
.medidor { margin-top: 16px; }
.medidor p { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--e-7); }
.medidor p > span { display: flex; flex-direction: column; gap: var(--e-1); }
.medidor b { font-size: var(--t-5); font-weight: 500; letter-spacing: -.04em; color: var(--navy); line-height: 1; }
.medidor .trilho { height: var(--e-2); border-radius: var(--r-pilula); background: var(--linha); margin-top: var(--e-3); overflow: hidden; }
.medidor .trilho i { display: block; height: 100%; width: var(--fim); background: var(--amarelo); border-radius: var(--r-pilula); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy) 8%, transparent); }
.filtro-passaporte { margin-top: 12px; }
/* Página de fase: título, a contagem e um trilho fino na cor da cidade; embaixo, o mural de carimbos. */
.pagina { position: relative; padding-top: var(--e-6); margin-top: var(--e-7); border: 0; }
.pagina > .faixa { position: absolute; left: -20px; right: -20px; top: 0; height: 10px; }
.pagina-pre > .faixa { height: 0; border-top: 2px dashed var(--navy); left: 0; right: 0; top: 4px; }
.pagina-tallinn > .faixa { background: var(--padrao-tll) repeat-x center / auto 10px; }
.pagina-helsinki > .faixa { background: var(--padrao-hel) repeat-x center / auto 10px; }
.pagina-viagem > .faixa { height: 4px; top: 3px; background: var(--navy); }
.pagina-raro > .faixa { height: 6px; top: 2px; background: var(--foil); }
.pagina-secreto > .faixa { background: repeating-linear-gradient(-45deg, var(--amarelo) 0 10px, var(--navy) 10px 20px); }
.pagina-tallinn { --pg: var(--tll); --pg-texto: var(--tll-acento); } .pagina-helsinki { --pg: var(--hel); --pg-texto: var(--hel); }
.pagina-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.pagina-topo h2 { font-size: var(--t-5); font-stretch: 112%; color: var(--pg-texto, var(--tinta)); }
.pagina-topo .dado { white-space: nowrap; }
/* Página fechada: quando a fase inteira está carimbada, a contagem vira o carimbo de página completa, em tinta da cidade.
   Só aparece com o dado (todos os selos da fase), e bate uma vez na chegada à tela. */
.pagina-topo:has(.pagina-completa) { flex-wrap: wrap; align-items: center; row-gap: var(--e-2); }
.pagina-completa { margin-left: auto; flex: none; display: inline-flex; flex-direction: column; align-items: center; padding: 3px 10px 4px; border: 2px solid var(--pg, var(--acento)); border-radius: var(--r-1);
  color: var(--pg, var(--acento)); font-family: var(--mono); font-size: var(--t-1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25;
  transform: rotate(-4deg); white-space: nowrap; }
.pagina-completa b { font-size: var(--t-2); letter-spacing: .02em; }
.chegou .pagina-completa { animation: completa .5s var(--ease-carimbo) .35s both; }
@keyframes completa { 0% { opacity: 0; transform: rotate(-12deg) scale(1.6); } 60% { opacity: 1; transform: rotate(-4deg) scale(.95); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
.pagina-topo .dado b { color: var(--tinta); font-weight: 600; }
.pagina-trilho { display: block; height: 3px; margin: var(--e-3) 0 16px; background: var(--linha); border-radius: var(--r-pilula); overflow: hidden; }
.pagina-trilho i { display: block; height: 100%; width: var(--fim); background: var(--pg, var(--acento)); border-radius: var(--r-pilula); }
/* Mural: quatro carimbos por linha. Conquistado em cor; faltando em silhueta; os três próximos que dá para fazer agora
   em cor esmaecida, com o contorno tracejado da fase e a marca "próximo". O detalhe de cada um abre na missão. */
.mural { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4) 8px; }
.mural .selo { display: flex; flex-direction: column; align-items: center; min-height: 44px; font-size: var(--t-1); }
.mural .selo .img { width: 100%; margin-bottom: 4px; border-radius: var(--r-2); }
.mural .selo .nome { line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.mural .selo:not(.tem):not(.pendente):not(.proximo) .img img { filter: brightness(0); opacity: .13; }
.mural .selo:not(.tem):not(.pendente):not(.proximo) .placa-provisoria { opacity: .5; }
.mural .selo:not(.tem) .nome { color: var(--suave); font-weight: 500; }
.mural .selo .data { display: none; }
/* O carimbo ganho bate torto e com a tinta um pouco gasta, como os carimbos do story; cada um num ângulo. */
.mural .selo.tem .img img { transform: rotate(var(--giro, -3deg)); filter: saturate(.92) contrast(1.04); opacity: .94; mix-blend-mode: multiply; }
.mural .selo.tem:nth-child(3n+1) { --giro: 4deg; } .mural .selo.tem:nth-child(3n+2) { --giro: -5deg; } .mural .selo.tem:nth-child(5n) { --giro: 2deg; }
.mural .selo .img { position: relative; isolation: isolate; }
.mural .selo.tem { --giro: -3deg; }
/* Continuidade do carimbo: o selo que acabou de voar para a aba bate no lugar dele na parede, uma vez, com a mesma batida. */
.mural .selo.recem .img img { animation: carimba .52s var(--ease-carimbo) .25s both; }
.mural .selo.recem .img::before { content: ''; position: absolute; inset: -4px; border-radius: var(--r-2); background: var(--amarelo); opacity: 0; z-index: -1;
  animation: recem-tinta 1.6s var(--ease) .55s both; }
@keyframes recem-tinta { 0% { opacity: .55; } 100% { opacity: 0; } }
/* O próximo cabe inteiro na célula dele: o tracejado é desenhado para dentro da caixa (offset negativo) e a marca
   "próximo" fica pousada dentro, no pé da caixa. Nada passa da borda, então a grade de 8 px nunca encosta no vizinho. */
.mural .selo.proximo .img { outline: 2px dashed var(--acento); outline-offset: -2px; background: var(--acento-fundo); padding: 4px 4px 0; }
.mural .selo.proximo .img::after { content: var(--t-proximo, 'próximo'); position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 10px); font-size: var(--t-1); font-weight: 600; line-height: 1.5; background: var(--acento); color: var(--branco); padding: 0 6px; border-radius: var(--r-pilula); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.mural .selo.proximo .nome { color: var(--tinta); font-weight: 600; }
.legenda-mural { display: flex; align-items: center; gap: var(--e-2); }
.legenda-mural i { flex: none; width: 14px; height: 14px; border-radius: var(--r-1); outline: 2px dashed var(--acento); outline-offset: -2px; background: var(--acento-fundo); }
/* Página fechada: a fase que não é a de agora. Nome menor, contagem e trilho à vista; o mural abre no toque. */
.pagina.fechada { margin-top: var(--e-6); padding-top: var(--e-4); }
.pagina-dobra, .pagina-dobra:last-of-type { border: 0; }
.pagina-dobra > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-4); align-items: center; padding: var(--e-2) 0; }
.pagina-dobra > summary .pagina-topo, .pagina-dobra > summary .pagina-trilho { grid-column: 1; }
.pagina-dobra > summary .pagina-trilho { margin: var(--e-2) 0 0; }
.pagina-dobra > summary::after { grid-column: 2; grid-row: 1 / span 2; }
.pagina-dobra > summary .pagina-topo h2 { font-size: var(--t-4); }
.pagina-dobra[open] > summary { margin-bottom: var(--e-4); }
.pagina-mapa { margin-top: 20px; }
.pagina-mapa > summary { font-size: var(--t-2); font-weight: 600; color: var(--acento); }
.pagina-mapa[open] > summary { margin-bottom: var(--e-3); }
.tag-agora { font-size: var(--t-1); font-weight: 600; background: var(--acento); color: var(--branco); border-radius: var(--r-pilula); padding: 2px 8px; vertical-align: middle; letter-spacing: 0; }
/* Mapa das páginas de cidade: o mapa vai de borda a borda e os selos ficam por cima, centrados no ponto de chegada. */
.mapa-cidade { position: relative; margin: 0 -20px; overflow: hidden; background: var(--mapa-fundo); }
.mapa-tallinn { --mapa-cor: var(--tll); }
.mapa-helsinki { --mapa-cor: var(--hel); }
.mapa-cidade > img, .mapa-cidade > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapa-cidade line { stroke: var(--borda-campo); stroke-width: 1.6; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.mapa-cidade circle { fill: var(--branco); stroke: var(--borda-campo); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mapa-cidade line.feita { stroke: var(--mapa-cor); stroke-width: 2.2; stroke-dasharray: none; }
.mapa-cidade circle.feita { fill: var(--mapa-cor); stroke: var(--branco); }
.mapa-cidade rect.hotel { fill: var(--navy); stroke: var(--branco); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pino-selo { position: absolute; width: 15%; transform: translate(-50%, -36%); text-align: center; }
.pino-selo .img img { filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--tinta) 22%, transparent)); }
.pino-selo .selo:not(.tem) .img img { background: var(--papel); border-radius: var(--r-2); opacity: .9; }
.pino-selo .selo { font-size: var(--t-1); line-height: 1.2; display: block; }
.pino-selo .selo .img { margin-bottom: 3px; }
.pino-selo .nome, .pino-selo .data { background: color-mix(in srgb, var(--papel) 92%, transparent); border-radius: var(--r-1); padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pino-selo .data { display: inline-block; }
.pino-selo .onde { display: block; max-width: 96px; margin-top: 3px; font-size: var(--t-1); color: var(--suave); background: color-mix(in srgb, var(--branco) 88%, transparent); padding: 1px 5px; border-radius: var(--r-1); white-space: normal; }
.rotulo-hotel { position: absolute; transform: translate(-50%, 9px); font-size: var(--t-1); font-weight: 600; color: var(--navy);
  background: color-mix(in srgb, var(--papel) 92%, transparent); padding: 1px 5px; border-radius: var(--r-1); pointer-events: none; }
.placa-provisoria { width: 86%; aspect-ratio: 1; border-radius: var(--r-3); border: 2px dashed var(--linha-forte); display: grid; place-items: center; font-size: var(--t-1); color: var(--suave); padding: var(--e-3); }
.selo.tem .placa-provisoria { border: 3px solid var(--navy); background: var(--branco); color: var(--navy); box-shadow: inset 0 0 0 4px var(--branco), inset 0 0 0 7px var(--amarelo); }
.passaporte-faixa { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.passaporte-faixa .selo { flex: 0 0 76px; }
.passaporte-faixa .selo .nome { overflow-wrap: break-word; font-size: var(--t-rotulo); }
.missao-topo { display: grid; grid-template-columns: 112px 1fr; gap: var(--e-4); align-items: center; margin-top: 6px; }
.missao-topo h1 { font-size: var(--t-5); }
.missao-selo .selo { display: block; }

/* ---------- câmera descartável */
.visor { margin: var(--e-5) -20px 0; padding: 20px; background: var(--visor-papel); position: relative; }
.visor .quadro { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-1); background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--tinta) 2.5%, transparent) 0 2px, transparent 2px 4px), var(--visor-quadro); display: grid; place-items: center; overflow: hidden; }
.visor .quadro::before, .visor .quadro::after { content: ''; position: absolute; width: 26px; height: 26px; border: 2.5px solid var(--acento); }
.visor .quadro::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.visor .quadro::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.visor .contador { position: relative; font-family: var(--mono); font-size: var(--t-numero); font-weight: 500; color: var(--navy); letter-spacing: -.04em; line-height: 1; text-align: center; }
.visor .contador small { display: block; width: fit-content; margin-inline: auto; font-size: var(--t-2); font-weight: 600; letter-spacing: 0; color: var(--navy); margin-top: 8px; padding: 3px var(--e-3); border-radius: var(--r-pilula); background: color-mix(in srgb, var(--branco) 92%, transparent); }
.visor .ultima { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(.6); opacity: .5; }
.disparador { width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--navy); box-shadow: 0 0 0 5px var(--visor-papel), 0 0 0 8px var(--navy); display: grid; place-items: center; margin: var(--e-6) auto 6px; cursor: pointer; transition: transform var(--dur-2) var(--ease); }
.disparador:active { transform: scale(.92); }
.disparador svg { width: 34px; height: 34px; color: var(--branco); }
.disparador:disabled { opacity: .35; }
.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 -20px; }
.album a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--linha); }
.album img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed figure { margin: 0 -20px var(--e-6); }
.feed img { width: 100%; display: block; }
.feed figcaption { padding: var(--e-3) 20px 0; font-size: var(--t-2); }

/* ---------- perfil e identidade */
/* Cartão de identidade da viagem, no molde do e-Residency: borda holográfica de 3 px (o único foil da tela), papel com
   guilhoché fino, emissor no alto, chip, dados em mono e as duas linhas de leitura de máquina no pé. */
.identidade { position: relative; border-radius: var(--r-3); border: 3px solid transparent; margin-top: var(--e-5); max-width: 100%; box-shadow: var(--sombra-2);
  background: repeating-radial-gradient(circle at 100% 0%, transparent 0 9px, color-mix(in srgb, var(--acento) 6%, transparent) 9px 10px) padding-box,
    linear-gradient(var(--branco), var(--branco)) padding-box, var(--foil) border-box;
  background-size: auto, auto, 200% 200%; }
.chegou .identidade, .identidade:active { animation: foil-borda 2.2s var(--ease-in-out) .3s 2 alternate both; }
@keyframes foil-borda { to { background-position: 0 0, 0 0, 100% 100%; } }
@keyframes foil { to { background-position: 100% 100%; } }
.identidade .dentro { padding: var(--e-4) 16px 12px; }
.id-emissor { display: flex; align-items: center; gap: var(--e-2); padding-bottom: var(--e-3); margin-bottom: var(--e-4); border-bottom: 1px solid var(--linha); font-family: var(--fonte-display); font-stretch: 112%; font-weight: 700; font-size: var(--t-2); letter-spacing: .01em; color: var(--navy); white-space: nowrap; }
.id-emissor img { flex: none; }
.id-emissor .mono { margin-left: auto; font-family: var(--mono); font-stretch: normal; font-weight: 500; font-size: var(--t-1); color: var(--suave); letter-spacing: .08em; }
.id-corpo { display: grid; grid-template-columns: 96px 1fr; gap: var(--e-4); align-items: start; }
.identidade .retrato { width: 96px; height: 120px; border-radius: var(--r-2); overflow: hidden; background: var(--fundo-2); position: relative; display: grid; place-items: center; }
.identidade .retrato img { width: 100%; height: 100%; object-fit: cover; }
.identidade .retrato svg { width: 48px; height: 48px; color: var(--linha-forte); }
.retrato-col { display: flex; flex-direction: column; align-items: stretch; }
/* Trocar a foto fica embaixo do retrato, nunca sobre o rosto: link de texto com 44px de alvo. */
.identidade .botao-foto { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1); padding: 0; border: 0; background: none;
  color: var(--navy); font: 600 var(--t-1)/1.2 var(--fonte-corpo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.identidade .botao-foto > svg { width: 14px; height: 14px; flex: none; }
.identidade .botao-foto:disabled { cursor: default; text-decoration: none; }
.id-dados { min-width: 0; }
.id-chip { display: block; width: 40px; height: 30px; margin-bottom: 8px; }
.identidade h2 { font-size: var(--t-4); font-stretch: 100%; margin-bottom: var(--e-2); }
.identidade dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px var(--e-3); font-family: var(--mono); font-size: var(--t-1); }
.identidade dt { color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.identidade dd { margin: 0; color: var(--tinta); font-weight: 500; }
.mrz { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px dashed var(--linha-forte); font-size: var(--t-1); line-height: 1.5; letter-spacing: .1em; color: var(--tinta); white-space: nowrap; overflow: hidden; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--fundo-2); overflow: hidden; display: grid; place-items: center; flex: none; font-size: var(--t-2); color: var(--navy); font-weight: 500; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.turma-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: var(--e-4) var(--e-2); }
.turma-lista a { text-decoration: none; color: var(--tinta); text-align: center; font-size: var(--t-1); font-weight: 600; line-height: 1.2; }
.turma-lista .avatar { width: 58px; height: 58px; margin: 0 auto 6px; font-size: var(--t-3); }
.guia .link-seta b { font-weight: 600; }
.conta-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); margin-top: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.conta-linha .mono { overflow-wrap: anywhere; }
/* Convite para instalar: uma linha só, ícone, texto, a ação que falta e o X. O passo a passo fica num detalhe. */
.instalar-linha { margin: var(--e-5) 0 0; padding: 6px 2px 6px 12px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-2); }
.il-topo { display: flex; align-items: center; gap: var(--e-2); }
.il-icone { flex: none; width: 22px; height: 22px; color: var(--acento); }
.il-texto { flex: 1; min-width: 0; line-height: 1.25; }
.il-texto b { font-size: var(--t-2); }
.il-topo .botao { flex: none; padding-inline: var(--e-3); }
.il-fechar { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--suave); border-radius: var(--r-2); cursor: pointer; }
.il-fechar svg { width: 16px; height: 16px; }
.il-passos { padding: var(--e-2) var(--e-3) var(--e-1) 0; }
.il-passos p { font-size: var(--t-2); padding: 0 0 var(--e-2); }

/* ---------- mapa e assentos */
.mapa { position: relative; margin: var(--e-5) -20px 0; overflow: hidden; background: var(--fundo-2); }
.mapa > img { width: 100%; display: block; }
.mapa .ponto { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--navy); color: var(--branco); font-family: var(--mono); font-size: var(--t-2); display: grid; place-items: center;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--branco) 90%, transparent), var(--sombra-3); text-decoration: none; }
.mapa .ponto::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.mapa .ponto.feito { background: var(--amarelo); color: var(--navy); }
.mapa .eu { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--cidade); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cidade) 25%, transparent); }
.sinal { display: grid; grid-template-columns: 92px 1fr; gap: var(--e-4); padding: var(--e-5) 0; border-bottom: 1px solid var(--linha); }
.sinal img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--r-2); display: block; }
.registro { font-family: var(--mono); font-size: var(--t-1); color: var(--ok); margin-top: 6px; line-height: 1.5; }
.cabine { overflow-x: auto; margin: 0 -20px; padding: var(--e-2) 20px; }
.cabine table { border-collapse: separate; border-spacing: 3px; margin: 0 auto; }
.cabine td { width: 34px; height: 34px; text-align: center; font-family: var(--mono); font-size: var(--t-1); border-radius: var(--r-1); padding: 0; }
.cabine td.assento { background: var(--fundo-3); color: transparent; cursor: pointer; }
.cabine td.turma { background: var(--navy-2); color: var(--branco); }
.cabine td.eu { background: var(--amarelo); color: var(--navy); }
.cabine td.troca { box-shadow: 0 0 0 2px var(--cidade); }
.cabine td.corredor { width: 14px; }
.cabine td.fila { color: var(--suave); background: none; cursor: default; }
/* só o assento livre ganha o contorno; turma e você mantêm as cores próprias */
.cabine td.assento:not(.turma):not(.eu) { box-shadow: inset 0 0 0 1px var(--borda-campo); }
.cabine td.assento.selecionado { outline: 2.5px solid var(--cidade); outline-offset: 1px; }
.info-assento { position: sticky; top: calc(58px + env(safe-area-inset-top) + var(--topo-folga)); z-index: 5; background: var(--papel); padding: var(--e-3) 0; margin-top: var(--e-3); min-height: 44px; }
.abas { display: flex; gap: 6px; overflow-x: auto; margin: var(--e-4) -20px; padding: 0 20px; scrollbar-width: none; }
.abas button { border: 0; background: var(--fundo-2); color: var(--navy); border-radius: var(--r-pilula); padding: var(--e-3) var(--e-4); font-weight: 600; white-space: nowrap; min-height: 44px; font-size: var(--t-2); }
.abas button.ativa { background: var(--acento); color: var(--branco); }
.abas button small { display: block; font-size: var(--t-1); opacity: .8; font-weight: 500; }
.abas button:has(small) { line-height: 1.15; padding-top: 6px; padding-bottom: 6px; }

/* agenda: atalhos de dia e dias passados recolhidos */
.chips-dias { position: sticky; top: calc(58px + env(safe-area-inset-top) + var(--topo-folga)); z-index: 10; display: flex; gap: 6px; overflow-x: auto; margin: var(--e-4) -20px 0; padding: var(--e-2) 20px; background: color-mix(in srgb, var(--papel) 95%, transparent); scrollbar-width: none; }
.chips-dias a { flex: none; font-family: var(--mono); font-size: var(--t-2); font-weight: 600; color: var(--navy); background: var(--fundo-2); border-radius: var(--r-pilula); padding: 0 var(--e-4); min-height: 44px; display: grid; place-items: center; text-decoration: none; }
.chips-dias a.hoje { background: var(--acento); color: var(--branco); }
.dias-passados { margin-top: 24px; }
.dias-passados > summary { font-size: var(--t-2); color: var(--suave); cursor: pointer; min-height: 44px; display: flex; align-items: center; }

/* ---------- avisos e conquista */
.aviso { position: fixed; left: 16px; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 50; background: var(--navy); color: var(--branco); padding: var(--e-4) 16px; border-radius: var(--r-2);
  box-shadow: var(--sombra-3); font-weight: 600; max-width: 600px; margin: 0 auto; display: flex; align-items: center; gap: var(--e-3); }
.aviso .t-success-check { flex: none; width: 22px; height: 22px; color: var(--amarelo); }
.aviso.erro { background: var(--erro); }
body:has(.entrada) { padding-bottom: 0; }
body:has(.entrada) .aviso { top: calc(16px + env(safe-area-inset-top)); bottom: auto; }
@keyframes sobe { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.conquista { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--papel) 98.5%, transparent); display: grid; place-items: center; text-align: center; padding: 24px; overflow: hidden; animation: aparece .3s var(--ease); }
@keyframes aparece { from { opacity: 0; } }
.conquista .botao { position: relative; z-index: 1; }
/* a página do passaporte onde o carimbo bate: papel com moldura holográfica, o único foil da tela */
.cq-pagina { position: relative; width: min(100%, 340px); padding: var(--e-7) var(--e-6) var(--e-6); border: 3px solid transparent; border-radius: var(--r-3); box-shadow: var(--sombra-3);
  background: linear-gradient(var(--branco), var(--branco)) padding-box, var(--foil) border-box; }
.cq-pagina h1 { font-size: var(--t-5); }
/* O carimbo bate quando o desenho do selo já pode ser pintado (.bate); só transform e opacidade, que o celular anima sem repintar. */
.conquista .carimbo { width: 210px; margin: 0 auto var(--e-5); opacity: 0; will-change: transform, opacity; }
.conquista.bate .carimbo { animation: carimbo .62s var(--ease-carimbo) both; }
.conquista .carimbo svg { width: 100%; height: auto; }
.conquista .carimbo img { width: 100%; }
.conquista .placa-provisoria { margin: auto; border: 3px solid var(--navy); }
/* a batida: cai de cima já girado, achata 6% no papel e assenta torto, como carimbo de borracha */
@keyframes carimbo { 0% { transform: scale(1.8) rotate(-14deg); opacity: 0; } 40% { opacity: 1; } 62% { transform: scale(.94) rotate(-3deg); } 80% { transform: scale(1.015) rotate(-4deg); } 100% { transform: scale(1) rotate(-4deg); opacity: 1; } }
.conquista .dado { margin: 6px 0 var(--e-5); }
.conquista.saindo { animation: conquista-sai .42s var(--ease) .18s forwards; }
.conquista.saindo .carimbo { visibility: hidden; }
@keyframes conquista-sai { to { opacity: 0; } }
.t-confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* ---------- entrada */
.entrada { min-height: 100vh; background: var(--navy); color: var(--branco); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 24px calc(40px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; isolation: isolate; }
.entrada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.entrada::after { content: ''; position: absolute; inset: 0; background: var(--veu-entrada); z-index: -1; }
.entrada h1 { font-size: var(--t-6); font-stretch: 118%; font-weight: 800; line-height: .98; letter-spacing: -.02em; margin-top: var(--e-3); }
.entrada h1 b { color: var(--amarelo); font-weight: 700; }
.entrada a { color: var(--amarelo); font-weight: 700; }
.entrada .faixa { height: 12px; background: var(--padrao) repeat-x center / auto 12px; background-color: var(--branco); margin: var(--e-6) -24px; }
.entrada > img.selo-marca { position: static; inset: auto; z-index: auto; object-fit: contain; width: 116px; height: 116px; margin: 0 0 var(--e-5) -4px; filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--navy-0) 55%, transparent)); }
.entrada .campo span { color: var(--sobre-navy); }
.entrada .campo input { color: var(--navy); }
.entrada .nomes { max-height: 44vh; overflow: auto; }
.entrada .nomes button { display: flex; align-items: center; gap: var(--e-3); width: 100%; background: var(--branco-12); color: var(--branco); border: 0; border-radius: var(--r-2); padding: var(--e-3) var(--e-3); margin-bottom: 6px; text-align: left; min-height: 52px; font-weight: 600; cursor: pointer; }
.entrada .nomes button.sugerido { background: var(--amarelo); color: var(--navy); }
.entrada .nomes .avatar { width: 32px; height: 32px; font-size: var(--t-1); background: var(--branco-12); color: var(--branco); }
.entrada-emissor { display: flex; align-items: center; gap: var(--e-3); }
.entrada-emissor img { width: 90px; height: auto; display: block; }
.entrada-emissor .mono { font-size: var(--t-1); color: var(--sobre-navy); letter-spacing: .06em; padding-left: var(--e-3); border-left: 1px solid color-mix(in srgb, var(--branco) 30%, transparent); }
.entrada-aviso { font-size: var(--t-1); color: var(--amarelo); margin: 0 0 var(--e-3); }
/* Sobre o azul da entrada o anel da cidade some (2,9:1): ali ele é branco. */
.entrada :focus-visible { outline-color: var(--branco); }
.entrada-nota { color: var(--sobre-navy); font-size: var(--t-2); }

/* ---------- wrapped: a sequência de cartões em tela cheia (wrapped.js). O azul fica dentro do cartão, que é o documento;
   em volta, o papel do app. Barras de progresso e controles por cima do cartão, na faixa que o Instagram cobre de qualquer jeito. */
body.modo-wrapped { padding-bottom: 0; }
body.modo-wrapped .topo, body.modo-wrapped .nav { display: none; }
body.modo-wrapped main { padding: 0; max-width: 560px; }
.wr { display: flex; flex-direction: column; align-items: center; min-height: 100svh; padding-top: calc(env(safe-area-inset-top) + var(--e-2)); }
.wr-quadro { position: relative; isolation: isolate; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r-2); background: var(--navy);
  width: min(calc(100% - var(--e-4)), calc((100svh - 172px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16));
  box-shadow: var(--sombra-3); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.wr-quadro::before { content: ''; position: absolute; inset: 0 0 auto; height: 84px; z-index: 1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--navy-0) 42%, transparent), transparent); }
.wr-quadro canvas { display: block; width: 100%; height: 100%; }
.wr-quadro .wr-cena.entra { animation: wr-onda 620ms cubic-bezier(.65, 0, .35, 1) both; }
@keyframes wr-onda { from { clip-path: circle(0% at var(--ox, 88%) 50%); } to { clip-path: circle(150% at var(--ox, 88%) 50%); } }
/* Formato Spotify Wrapped (terceira proposta): a linha sobe de trás da máscara, a pergunta sai antes da resposta, o
   número surge grande, a forma estoura com mola e gira devagar, e o grifo passa como marca-texto. */
/* Campo de dados (quarta proposta): a camada aparece seca, as barras e senoides correm sem parar, o gráfico cresce
   da base, a foto é varrida de cima para baixo, a linha fina se risca, a tarja sai do texto e a tela inverte num piscar. */
.a-aparece { animation-name: a-aparece; animation-timing-function: steps(2, end); }
@keyframes a-aparece { from { opacity: 0; } }
.a-corre-x { animation-name: a-corre-x; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0ms; }
@keyframes a-corre-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.a-cresce { animation-name: a-cresce; transform-origin: 50% 100%; animation-timing-function: cubic-bezier(.2, 1, .2, 1); }
@keyframes a-cresce { from { transform: scaleY(0); } }
.a-estica { animation-name: a-estica; transform-origin: 0 50%; animation-timing-function: cubic-bezier(.2, 1, .2, 1); }
@keyframes a-estica { from { transform: scaleX(0); } }
/* Anúncio do ganhador: o duelo pisca entre os dois últimos, e a foto de quem sobrou sai da grade e cresce até a moldura. */
.a-alterna { animation-name: a-alterna; animation-timing-function: steps(1, end); animation-iteration-count: var(--vezes, 6); }
@keyframes a-alterna { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.a-amplia { animation-name: a-amplia; transform-origin: 0 0; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
@keyframes a-amplia { 0% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(var(--s)); } 1% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(var(--s)); } }
.a-varre { animation-name: a-varre; animation-timing-function: steps(24, end); }
@keyframes a-varre { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.a-risca { animation-name: a-risca; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@keyframes a-risca { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.a-tarja { animation-name: a-tarja; animation-timing-function: cubic-bezier(.7, 0, .3, 1); animation-fill-mode: both; }
@keyframes a-tarja { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
/* Um corte para o quadro invertido, mantido, e um corte de volta: uma inversão só por cartão, abaixo do limite de três por segundo. */
.a-inverte { animation-name: a-inverte; animation-timing-function: linear; }
@keyframes a-inverte { 0%, 0.1% { opacity: 0; } 0.2%, 99.8% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
.a-scan { animation: a-scan 2600ms linear infinite; animation-delay: 1200ms; }
@keyframes a-scan { from { transform: translateY(0); } to { transform: translateY(var(--scan-h)); } }
.a-scan { opacity: .9; }
/* Barras e fechar sem transparência: segmento feito e atual cheio, pendente só com contorno. Cartão claro sem a faixa de sombra. */
.wr-barras span { background: transparent; box-shadow: inset 0 0 0 1px #FBF6EA; }
.wr-barras i { background: #FBF6EA; }
.wr-quadro.claro::before { display: none; }
.wr-quadro.claro .wr-barras span { box-shadow: inset 0 0 0 1px #04101F; }
.wr-quadro.claro .wr-barras i { background: #04101F; }
.wr-quadro.claro .wr-ic { color: #04101F; filter: none; }
.wr-camada.a-tarja { animation-direction: normal; }
.a-linha { overflow: hidden; }
.a-linha > canvas { animation: a-linha var(--dur) cubic-bezier(.2, .9, .1, 1) var(--atraso) both; }
@keyframes a-linha { from { transform: translateY(110%); } }
.a-pergunta { overflow: hidden; }
.a-pergunta > canvas { animation: a-pergunta 1900ms cubic-bezier(.2, .9, .1, 1) var(--atraso) both; }
@keyframes a-pergunta { 0% { transform: translateY(110%); } 22% { transform: none; } 80% { transform: none; opacity: 1; } 100% { transform: translateY(-40%); opacity: 0; } }
.a-surge { animation-name: a-surge; animation-timing-function: cubic-bezier(.34, 1.4, .5, 1); }
@keyframes a-surge { from { opacity: 0; transform: scale(.6) translateY(10%); } }
.a-estoura { animation-name: a-estoura; animation-timing-function: cubic-bezier(.34, 1.7, .5, 1); }
@keyframes a-estoura { from { opacity: 0; transform: scale(0) rotate(calc(var(--r) - 45deg)); } }
.a-gira-lento { animation-name: a-gira-lento; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0ms; }
@keyframes a-gira-lento { 0% { transform: rotate(0) scale(.85); } 12% { transform: rotate(15deg) scale(1); } 100% { transform: rotate(120deg) scale(1); } }
.a-grifa { animation-name: a-grifa; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@keyframes a-grifa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Cena do Wrapped (20/10): cada camada é um canvas num div posicionado em porcentagem do cartão. A animação de cada uma
   vem da classe a-*, com atraso e duração em variável; o estado final é sempre rotate(var(--r)), o mesmo do arquivo. */
.wr-cena { position: absolute; inset: 0; overflow: hidden; background: #04101F; }
.wr-camada { position: absolute; transform: rotate(var(--r, 0rad)); animation-duration: var(--dur, 700ms); animation-delay: var(--atraso, 0ms);
  animation-fill-mode: both; animation-timing-function: cubic-bezier(.16, 1, .3, 1); will-change: transform, opacity; }
.wr-camada > canvas { display: block; width: 100%; height: 100%; }
.wr-chao { position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; pointer-events: none; }
.wr-quadro .t-confetti-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.a-fundo { animation-name: a-fundo; }
@keyframes a-fundo { from { opacity: 0; transform: scale(1.04); } }
.a-sobe { animation-name: a-sobe; }
@keyframes a-sobe { from { opacity: 0; transform: translateY(8%) rotate(var(--r)); filter: blur(10px); } }
.a-cai { animation-name: a-cai; animation-timing-function: cubic-bezier(.3, 1.35, .45, 1); }
@keyframes a-cai { 0% { opacity: 0; transform: translateY(-70%) rotate(calc(var(--r) + 18deg)) scale(1.3); } 30% { opacity: 1; } 100% { transform: rotate(var(--r)); } }
.a-pula { animation-name: a-pula; animation-timing-function: cubic-bezier(.34, 1.6, .5, 1); }
@keyframes a-pula { 0% { opacity: 0; transform: translateY(45%) scale(.5, .7) rotate(var(--r)); } 40% { opacity: 1; } 100% { transform: rotate(var(--r)); } }
.a-carimbo { animation-name: a-carimbo; animation-timing-function: cubic-bezier(.55, 0, .7, .2); }
@keyframes a-carimbo { 0% { opacity: 0; transform: scale(2.6) rotate(calc(var(--r) - 12deg)); } 70% { opacity: 1; transform: scale(.96) rotate(var(--r)); } 100% { transform: rotate(var(--r)); } }
.a-carimbo-plano { animation-name: a-carimbo-plano; animation-timing-function: cubic-bezier(.55, 0, .7, .2); }
@keyframes a-carimbo-plano { from { opacity: 0; transform: scale(1.06); } }
.a-adesivo { animation-name: a-adesivo; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes a-adesivo { 0% { opacity: 0; transform: scale(.2) rotate(calc(var(--r) - 35deg)); } 50% { opacity: 1; } 100% { transform: rotate(var(--r)); } }
.a-gira { animation-name: a-gira; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes a-gira { from { transform: rotate(-18deg) scale(1.35); } to { transform: rotate(18deg) scale(1); } }
.a-revela { animation-name: a-revela; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
@keyframes a-revela { from { transform: scale(1.14); filter: brightness(1.8) saturate(.2); } }
.a-clarao { animation-name: a-clarao; animation-timing-function: ease-out; }
@keyframes a-clarao { from { opacity: .95; } to { opacity: 0; } }
.a-zoom { animation-name: a-zoom; animation-timing-function: linear; }
@keyframes a-zoom { from { transform: scale(1.14); } }
.a-pisca { animation-name: a-pisca; animation-timing-function: steps(1, end); }
@keyframes a-pisca { 0%, 22%, 44% { opacity: 0; } 11%, 33%, 55%, 100% { opacity: 1; } }
.a-vira { animation-name: a-vira; backface-visibility: hidden; animation-timing-function: cubic-bezier(.22, 1.25, .36, 1); }
@keyframes a-vira { 0% { opacity: 0; transform: perspective(1800px) rotateY(-170deg) scale(.75) rotate(var(--r)); } 25% { opacity: 1; } 100% { transform: perspective(1800px) rotateY(0) rotate(var(--r)); } }
.a-bate { animation-name: a-bate; animation-timing-function: cubic-bezier(.2, 1.4, .4, 1); }
@keyframes a-bate { from { opacity: 0; transform: scale(1.5) rotate(var(--r)); filter: blur(14px); } }
.a-desliza { animation-name: a-desliza; }
@keyframes a-desliza { from { opacity: 0; transform: translateX(-24%) rotate(var(--r)); } }
.a-traca { animation-name: a-traca; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@keyframes a-traca { from { clip-path: inset(54% 0 44% 0); } to { clip-path: inset(0 0 0 0); } }
.a-navega { animation-name: a-navega; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@keyframes a-navega { from { transform: translate(var(--dx), var(--dy)); } }
.a-entra-plana { animation-name: a-fundo; }
/* Carta holográfica: um brilho de foil passa por cima, em loop, depois que a carta vira (receita organic-shimmer). */
.holo::after { content: ''; position: absolute; inset: var(--hj, 0) var(--hi, 0); border-radius: 4%; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.75) 42%, rgba(85,198,224,.6) 50%, rgba(254,198,65,.6) 56%, transparent 72%) 0 0 / 260% 100% no-repeat;
  animation: a-holo 2.6s ease-in-out calc(var(--atraso) + var(--dur)) infinite; }
.holo-redondo::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light;
  background: conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(85,198,224,.5), rgba(255,255,255,0) 60%); animation: a-gira-holo 3s linear infinite; }
@keyframes a-holo { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes a-gira-holo { to { transform: rotate(1turn); } }
/* A pausa e o dedo segurando param só a passagem de cartão; a cena do cartão atual termina de entrar. */
.wr-quadro.escondido .wr-camada { animation-play-state: paused; }
.wr-quadro.batida { animation: wr-batida 280ms var(--ease-carimbo); }
@keyframes wr-entra { from { opacity: .4; transform: translateX(calc(var(--dir, 1) * 3%)) scale(1.015); } }
@keyframes wr-batida { 35% { transform: scale(.982); } }
.wr-barras { position: absolute; z-index: 2; top: var(--e-3); left: var(--e-3); right: var(--e-3); display: flex; gap: var(--e-1); pointer-events: none; }
.wr-barras span { flex: 1; height: 3px; overflow: hidden; border-radius: var(--r-pilula); background: color-mix(in srgb, var(--branco) 40%, transparent); --dur: 6.5s; }
.wr-barras span.longa { --dur: 11s; }
.wr-barras i { display: block; height: 100%; background: var(--branco); transform: scaleX(0); transform-origin: left; }
.wr-barras span.feita i { transform: scaleX(1); }
.wr-barras span.atual i { animation: wr-enche var(--dur) linear forwards; }
.wr-quadro.segurando .atual i, .wr-quadro.pausado .atual i, .wr-quadro.escondido .atual i { animation-play-state: paused; }
@keyframes wr-enche { to { transform: scaleX(1); } }
.wr-ctl { position: absolute; z-index: 2; top: calc(var(--e-3) + 6px); right: var(--e-1); display: flex; }
.wr-ic { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--branco);
  cursor: pointer; filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--navy-0) 70%, transparent)); transition: background-color var(--dur-1) var(--ease); }
.wr-ic:active { background: var(--branco-22); }
.wr-ic svg { width: 22px; height: 22px; }
.wr-ic:focus-visible { outline-color: var(--branco); }
/* Botões de passar para teclado e leitor de tela: o dedo usa as laterais do cartão. */
.wr-toque { position: absolute; z-index: 2; bottom: var(--e-3); width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.wr-toque:focus-visible { width: auto; height: 44px; clip: auto; padding: 0 var(--e-4); border-radius: var(--r-pilula); background: var(--branco); color: var(--navy); font-weight: 700; font-size: var(--t-2); }
.wr-ant { left: var(--e-3); } .wr-prox { right: var(--e-3); }
.wr-pe { width: 100%; padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom)); }
.wr-nome { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); margin: 0 var(--e-1) var(--e-2); }
.wr-nome b { font-family: var(--fonte-display); font-stretch: var(--largura-display); font-size: var(--t-4); font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.wr-nome span { font-family: var(--mono); font-size: var(--t-1); color: var(--suave); font-variant-numeric: tabular-nums; }
.wr-botoes { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--e-3); }
.wr-salvar, .wr-enviar { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 52px; border: 0; border-radius: var(--r-2);
  font-weight: 800; font-size: var(--t-3); color: var(--navy); cursor: pointer; transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.wr-salvar { background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--navy); }
.wr-enviar { background: var(--amarelo); }
.wr-salvar svg, .wr-enviar svg { width: 20px; height: 20px; flex: none; }
.wr-salvar:active, .wr-enviar:active { transform: scale(.97); }
.wr-enviar:active { background: var(--amarelo-2); }
.wr-legenda { margin: var(--e-2) 0 0; font-size: var(--t-1); line-height: 1.4; color: var(--suave); text-align: center; text-wrap: balance; }
/* Movimento reduzido: nada passa sozinho e nada desliza; a barra do cartão atual aparece cheia e a pausa some. */
.wr-trancado { margin-top: 0; padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: var(--fundo-2); color: var(--tinta); }
/* Convite do Wrapped na tela Agora: o bloco azul de marca, com o losango e o capítulo em ouro. */
.wr-convite { display: grid; grid-template-columns: 52px 1fr 20px; align-items: center; gap: var(--e-3); padding: var(--e-4); border-radius: var(--r-2); background: var(--navy); color: var(--branco); text-decoration: none;
  box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--navy) 70%, transparent); }
.wr-convite img { width: 52px; height: 52px; }
.wr-convite span { display: grid; gap: 2px; min-width: 0; }
.wr-convite small { font-family: var(--mono); font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase; color: var(--amarelo); }
.wr-convite b { font-family: var(--fonte-display); font-stretch: var(--largura-display); font-size: var(--t-4); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.wr-convite i { font-style: normal; font-size: var(--t-2); color: var(--sobre-navy, #C9D1E0); }
.wr-convite svg { width: 20px; height: 20px; color: var(--amarelo); }
.wr-convite:active { transform: scale(.985); }
.wr-quadro.quieto .wr-barras span.atual i { animation: none !important; transform: scaleX(1); }
.wr-quadro.quieto .wr-pausa { display: none; }
.wr-quadro.quieto .wr-camada, .wr-quadro.quieto .wr-camada > canvas, .wr-quadro.quieto .holo::after, .wr-quadro.quieto .holo-redondo::after { animation: none !important; }
.wr-quadro.quieto .wr-camada.a-pergunta, .wr-quadro.quieto .wr-camada.a-alterna, .wr-quadro.quieto .wr-camada.a-tarja, .wr-quadro.quieto .wr-camada.a-inverte, .wr-quadro.quieto .wr-camada.a-scan { display: none; }
.wr-quadro.quieto .wr-camada.a-clarao { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wr-quadro .wr-cena.entra { animation: wr-entra-suave var(--dur-1) ease-out !important; }
  .wr-camada, .wr-camada > canvas, .holo::after, .holo-redondo::after { animation: none !important; }
  .wr-camada.a-pergunta, .wr-camada.a-alterna, .wr-camada.a-tarja, .wr-camada.a-inverte, .wr-camada.a-scan { display: none; }
  .wr-camada.a-clarao { display: none; }
  .wr-quadro.batida { animation: none !important; }
}
@keyframes wr-entra-suave { from { opacity: .4; } }

/* ---------- staff */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-2); }
.tabela td, .tabela th { padding: var(--e-2) 6px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.tabela th { font-weight: 600; color: var(--suave); font-size: var(--t-1); white-space: nowrap; }
.oc-icone { width: 14px; height: 14px; vertical-align: -2px; color: var(--suave); }
.ocr-quem { gap: var(--e-3); padding-right: 40px; }
.oc-popup h2 { margin: 0; font-size: var(--t-4); }
.oc-popup .ocr-quem p { margin: 2px 0 0; font-size: var(--t-2); }
.oc-popup .campo { margin-top: var(--e-4); }
.oc-popup .np-acoes { grid-template-columns: 2fr 1fr; }
.ocr-atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.ocr-atalhos .botao { min-height: 48px; padding: 0 4px; font-size: var(--t-2); transition: transform var(--dur-2) var(--ease); }
.ocr-atalhos .botao[aria-pressed="true"] { background: var(--navy); color: var(--branco); }
.ocr-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ocr-tipos button { min-height: 40px; padding: 0 var(--e-3); border: 0; border-radius: var(--r-pilula); background: var(--fundo-2); color: var(--navy); font: inherit; font-size: var(--t-2); font-weight: 600; cursor: pointer; touch-action: manipulation; }
.ocr-tipos button[aria-checked="true"] { background: var(--navy); color: var(--branco); }
.missao-pede { margin: var(--e-2) 0 0; padding: var(--e-3) var(--e-3); background: var(--fundo-2); border-radius: var(--r-2); font-size: var(--t-3); }
.foto-repetida { margin: var(--e-2) 0 0; padding: var(--e-3) var(--e-3); background: var(--erro-fundo); color: var(--erro); border-radius: var(--r-2); font-size: var(--t-3); }
.aprovada { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.aprovada img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-2); flex: none; }
.aprovada > div { flex: 1; min-width: 0; }
.aprovada .com-rosto { flex: 1; }
.ajuda-acoes { flex-wrap: wrap; }
.ajuda-acoes .botao { background: var(--navy); color: var(--branco); }
.ajuda-acoes .botao.claro { background: var(--branco); color: var(--navy); }
.cs-lista, .cs-selos { list-style: none; padding: 0; margin: 0; }
.cs-escolhido { margin: var(--e-3) 0 4px; }
.cs-selos li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.cs-selos li .suave { font-size: var(--t-2); }
.cs-selos .linha { flex: none; flex-direction: column; gap: 6px; }
.tag-tem { font-size: var(--t-1); font-weight: 600; background: var(--ok-fundo); color: var(--ok); border-radius: var(--r-pilula); padding: 1px 7px; }
.mod-plano { padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.mod-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin-top: var(--e-3); }
.mod-grade figure { margin: 0; display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.mod-grade img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-2); }
.mod-grade figcaption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-1); }
.mod-grade .botao.pequeno { padding: 6px var(--e-2); font-size: var(--t-2); }
.ficha-saude th, .ficha-saude td { color: var(--erro); font-weight: 600; }
.link-pessoal:not(:empty) { margin-top: var(--e-3); padding-top: 6px; border-top: 1px solid var(--linha); }
.lacuna-dica { color: var(--erro); margin-top: var(--e-2); }
/* Foto ao lado do nome nas listas do staff; as iniciais ficam por baixo da foto */
.rosto { position: relative; width: 36px; height: 36px; font-size: var(--t-1); }
.rosto img { position: absolute; inset: 0; }
.rosto.pequeno { width: 28px; height: 28px; font-size: var(--t-1); }
.rosto.grande { width: 52px; height: 52px; font-size: var(--t-2); }
.com-rosto { display: inline-flex; align-items: center; gap: var(--e-3); }
.aluno-escolhido { padding: var(--e-3) 0 var(--e-4); }
/* Seletor da chamada: a escolhida por extenso e as atividades lado a lado */
.ativ-escolhida { margin-top: var(--e-4); }
.ativ-escolhida h2 { margin-top: 2px; }
.ativ-escolhida .dado { margin-top: var(--e-1); }
.ativ-trilho { display: flex; gap: var(--e-2); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; margin: var(--e-3) -20px 4px; padding: 2px 20px var(--e-3); scrollbar-width: none; }
.ativ-trilho::-webkit-scrollbar { display: none; }
/* As duas pontas esmaecem: o cartão anterior não aparece como uma fatia cortada, e o seguinte mostra que continua. */
.ativ-trilho { -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--tinta) 18px, var(--tinta) calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, var(--tinta) 18px, var(--tinta) calc(100% - 36px), transparent); }
.ativ-chip { flex: none; width: 152px; min-height: 92px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--e-1); text-align: left; padding: var(--e-3) var(--e-3); border: 1.5px solid var(--linha-forte); border-radius: var(--r-2); background: var(--branco); color: var(--tinta); font: inherit; cursor: pointer; }
.ativ-chip b { font-size: var(--t-2); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ativ-chip .dado { font-size: var(--t-1); }
.ativ-chip.on { background: var(--navy); border-color: var(--navy); color: var(--branco); }
.ativ-chip.on .dado { color: var(--sobre-navy); }
.ativ-agora { font-size: var(--t-1); background: var(--amarelo); color: var(--navy); border-radius: var(--r-pilula); padding: 1px 7px; }
.ativ-feita { color: var(--ok); font-weight: 600; }
.ativ-chip.on .ativ-feita { color: var(--ok-claro); }
/* Uso do app, no painel do staff */
.uso-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin-top: var(--e-3); }
.uso-numeros div { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-2); padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-1); }
.uso-numeros b { font-size: var(--t-5); color: var(--acento); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.uso-numeros span { font-size: var(--t-2); color: var(--suave); line-height: 1.3; }
.uso-dias, .uso-telas, .uso-pessoas { list-style: none; padding: 0; margin: var(--e-2) 0 0; }
.uso-dias li { display: grid; grid-template-columns: 48px 1fr 28px; align-items: center; gap: var(--e-3); padding: var(--e-1) 0; }
.uso-dias i { display: block; height: 10px; width: var(--w); min-width: 4px; border-radius: var(--r-pilula); background: var(--navy); }
.uso-dias b { text-align: right; font-size: var(--t-2); }
.uso-telas li, .uso-pessoas li { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--linha); }
.uso-telas .mono { font-size: var(--t-2); color: var(--navy); }
.uso-sumido { color: var(--erro); font-weight: 600; }
.erro-texto { color: var(--erro); }

/* ---------- staff: o manifesto (20/10)
   O painel é o manifesto de embarque da tripulação. Cabeçalho e abas cabem em 160 px, a chamada é uma linha de 60 px por
   aluno com P, A e X num controle segmentado, e o placar fixo filtra a lista. Atalhos de sala só em aula e visita. */
.painel-staff .cab--painel { margin-top: var(--e-3); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--e-4); }
.painel-staff .cab--painel .quem-falta[open] { grid-column: 1 / -1; }
.painel-staff .cab--painel .quem-falta:not([open]) summary { justify-content: flex-end; }
.painel-staff .cab--painel .cab-titulo { font-size: var(--t-5); margin: 0; }
.painel-staff .cab--painel .cab-titulo::after { display: none; }
.painel-staff .cab--painel .quem-falta { margin: 0; border: 0; }
.painel-staff .cab--painel .quem-falta[open] { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); margin-top: var(--e-2); }
.painel-staff .cab--painel .quem-falta summary .mono { font-weight: 600; color: var(--tinta); }
.painel-staff .cab--painel .quem-falta summary { min-height: 44px; padding: 6px 0; }
.painel-staff .cab--painel .quem-falta summary .dado { font-size: var(--t-2); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.abas-staff { display: grid; gap: 4px; margin: var(--e-3) 0 0; }
.abas-1 { display: flex; gap: 2px; padding: 3px; background: var(--branco); border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.abas-staff button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 4px; border: 0;
  border-radius: 9px; background: transparent; color: var(--navy); font: inherit; font-size: var(--t-2); font-weight: 600; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; transition: background-color var(--dur-1), color var(--dur-1), transform .12s var(--ease); }
.abas-staff button:active { transform: scale(.96); }
.abas-1 button { flex: 1 1 auto; padding: 0 var(--e-2); }
.abas-1 button.ativa { background: var(--acento); color: var(--branco); box-shadow: var(--sombra-1); }
.abas-2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.abas-2 button { color: var(--suave); font-weight: 500; text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.abas-2 button.ativa { color: var(--acento); font-weight: 700; text-decoration-color: var(--acento); text-decoration-thickness: 2.5px; }
.aba-conta { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pilula); background: var(--amarelo); color: var(--navy);
  font-size: var(--t-1); font-weight: 600; line-height: 1; }
.abas-staff button.urgente .aba-conta { background: var(--erro); color: var(--branco); }
.abas-1 button.ativa .aba-conta { box-shadow: 0 0 0 1.5px var(--branco); }

/* a partida escolhida e o trilho das outras */
.painel-staff .ativ-escolhida { margin-top: var(--e-3); }
.painel-staff .ativ-escolhida h2 { margin: 0; font-size: var(--t-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ativ-meta { margin-top: var(--e-1); font-size: var(--t-2); color: var(--suave); }
.ativ-meta b { color: var(--tinta); font-weight: 600; }
.painel-staff .ativ-trilho { margin: var(--e-2) -20px 0; padding: 2px 20px var(--e-2); gap: 6px; }
.painel-staff .ativ-chip { width: 140px; min-height: 0; gap: 0; padding: 6px var(--e-3); border-radius: var(--r-2); line-height: 1.3; }
.ativ-chip-h { font-size: var(--t-2); font-weight: 600; }
.ativ-chip-h i { font-style: normal; font-size: var(--t-1); font-weight: 500; color: var(--suave); }
.painel-staff .ativ-chip b { -webkit-line-clamp: 1; font-size: var(--t-2); }
.ativ-chip-s { font-size: var(--t-1); color: var(--suave); }
.ativ-chip.on .ativ-chip-h i, .ativ-chip.on .ativ-chip-s { color: var(--sobre-navy); }

/* placar fixo: quatro contagens que filtram a lista */
.painel-staff .chamada-fixa { position: sticky; top: calc(58px + env(safe-area-inset-top) + var(--topo-folga)); z-index: 5; margin: 0 -20px; padding: var(--e-2) 20px;
  background: var(--papel-fase); box-shadow: 0 1px 0 var(--linha), 0 8px 12px -12px color-mix(in srgb, var(--tinta) 40%, transparent); }
.placar-chamada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.placar-chamada button { position: relative; min-width: 0; min-height: 56px; padding: 7px 6px 6px 9px; border: 0; border-radius: var(--r-2); background: var(--fundo-2); color: var(--navy);
  font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: box-shadow var(--dur-1), transform .12s var(--ease); }
.placar-chamada button:active { transform: scale(.96); }
.placar-chamada b { display: block; font-size: var(--t-5); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.placar-chamada b .t-digit { display: inline-block; font-size: inherit; font-weight: inherit; line-height: inherit; }
.placar-chamada b, .placar-chamada b * { font-family: var(--mono); font-feature-settings: 'zero' 1; font-variant-numeric: normal; }
.placar-chamada span { display: block; margin-top: 2px; font-size: var(--t-1); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placar-chamada i { position: absolute; top: 7px; right: 8px; font-style: normal; font-family: var(--mono); font-size: var(--t-2); font-weight: 600; opacity: .85; }
.placar-chamada .presente { background: var(--navy); color: var(--branco); }
.placar-chamada .atrasado { background: var(--amarelo); }
.placar-chamada .ausente { background: var(--erro); color: var(--branco); }
.placar-chamada .sem { background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--navy); }
.placar-chamada .filtrando { box-shadow: 0 0 0 2.5px var(--papel-fase), 0 0 0 5px var(--acento); }
.placar-chamada .fechar-filtro { display: grid; place-items: center; width: 18px; height: 18px; top: 6px; right: 6px; border-radius: 50%; background: var(--acento); color: var(--branco); opacity: 1; }
.placar-chamada .fechar-filtro svg { width: 10px; height: 10px; }
.placar-chamada .sem.filtrando { box-shadow: inset 0 0 0 1.5px var(--navy), 0 0 0 2.5px var(--papel-fase), 0 0 0 5px var(--acento); }
.filtro-ativo { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); margin-top: 4px; font-size: var(--t-2); font-weight: 600; color: var(--acento); }
.link-botao { min-height: 44px; padding: 0; border: 0; background: none; color: var(--navy); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* a lista: uma linha por aluno, letra de índice, P A X segmentado */
.painel-staff .manifesto { margin-top: var(--e-2); padding-right: 30px; }
.manifesto .chamada-letra { padding: var(--e-4) 0 4px; border-bottom: 1px solid var(--linha-forte); font-family: var(--mono); font-size: var(--t-1); font-weight: 600; color: var(--acento);
  scroll-margin-top: calc(140px + env(safe-area-inset-top)); }
.manifesto .m-linha { display: grid; grid-template-columns: 36px minmax(0, 1fr) 132px; column-gap: var(--e-3); align-items: center; min-height: 60px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.manifesto .chamada-nome { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 44px; margin: 0 -4px; padding: 2px 4px; border: 0; border-radius: var(--r-1);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.manifesto .chamada-nome:active { background: var(--fundo-2); }
.m-nome { font-size: var(--t-2); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-nome .suave { font-weight: 500; }
.manifesto .chamada-nota { display: block; margin-top: 2px; font-family: var(--mono); font-size: var(--t-1); font-weight: 500; line-height: 1.3; color: var(--suave); }
.manifesto .chamada-nota b { font-weight: 600; color: var(--navy); border-radius: 3px; }
.manifesto .chamada-nota.visto { color: var(--ok); }
.manifesto .na-fila { align-self: flex-start; margin-top: 3px; font-style: normal; font-size: var(--t-1); font-weight: 600; color: var(--navy); background: var(--amarelo); border-radius: var(--r-pilula); padding: 1px 7px; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 44px; border-radius: var(--r-2); background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--linha-forte); overflow: hidden; }
.seg button { min-width: 0; border: 0; border-left: 1.5px solid var(--linha-forte); background: none; color: var(--navy); font-family: var(--mono); font-size: var(--t-3); font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: background-color .12s, color .12s; }
.seg button:first-child { border-left: 0; }
.seg button:active { background: var(--fundo-2); }
.seg button.on.presente { background: var(--navy); color: var(--branco); }
.seg button.on.atrasado { background: var(--amarelo); color: var(--navy); }
.seg button.on.ausente { background: var(--erro); color: var(--branco); }
.seg button:focus-visible { outline-offset: -3px; }
/* A marca bate como carimbo: no toque deste celular e quando chega a marca do outro staff, que ganha as iniciais em ouro. */
@keyframes marca-carimbo { 0% { transform: scale(1.4); opacity: .25; } 55% { transform: scale(.93); opacity: 1; } 100% { transform: none; } }
@keyframes marca-tinta { 0%, 45% { background: var(--amarelo); box-shadow: 0 0 0 3px var(--amarelo); } 100% { background: transparent; box-shadow: 0 0 0 3px transparent; } }
.seg button.bateu, .m-linha.carimbo .seg button.on { animation: marca-carimbo var(--dur-2) var(--ease-carimbo); }
.m-linha.carimbo .chamada-nota b { animation: marca-tinta 2.4s var(--ease); }
/* atalhos de sala, só em aula e visita: uma segunda linha da largura toda */
.manifesto .chamada-atalhos { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto auto auto; justify-content: space-between; gap: 4px; padding: 4px 0 2px; }
.manifesto .chamada-atalho { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-pilula);
  background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha-forte); color: var(--suave); font: inherit; font-size: var(--t-1); font-weight: 600; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; transition: background-color var(--dur-1), color var(--dur-1), transform .12s var(--ease); }
.manifesto .chamada-atalho:active { transform: scale(.96); }
.manifesto .chamada-atalho svg { width: 13px; height: 13px; flex: none; }
.manifesto .chamada-atalho.on { background: var(--navy); color: var(--branco); box-shadow: none; }
.manifesto .chamada-atalho.celebrar { box-shadow: inset 0 0 0 1.5px var(--amarelo-2); color: var(--navy); }
.manifesto .chamada-atalho.celebrar svg { color: var(--amarelo-2); }
.manifesto .chamada-atalho.celebrar.on { background: var(--amarelo); box-shadow: none; }
.manifesto .chamada-atalho.celebrar.on svg { color: var(--navy); }
.oc-notas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px var(--e-3); padding: 2px 0 0; }
.manifesto .m-linha > .oc-notas { grid-column: 2 / -1; }
.oc-notas small { font-size: var(--t-1); font-weight: 600; color: var(--suave); }
.oc-notas .oc-avisado { color: var(--ok); }
.oc-notas svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.chamada-faltam { margin: var(--e-4) 0; }
.chamada-completa { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-2); font-weight: 600; color: var(--ok); }
.chamada-completa svg { width: 18px; height: 18px; }
/* índice de letras na borda direita, como na agenda do celular */
.indice-letras { position: fixed; z-index: 4; top: calc(150px + env(safe-area-inset-top)); bottom: calc(96px + env(safe-area-inset-bottom)); right: max(0px, calc(50vw - 320px)); display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
.indice-letras.visivel { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease); }
.indice-letras button { width: 26px; height: min(20px, 2.6vh); padding: 0; border: 0; background: none; color: var(--acento); font-family: var(--mono); font-size: var(--t-1); font-weight: 600; line-height: 1; cursor: pointer; }

/* ajuda, fotos, avisos e o resto */
.nota-staff { margin-top: var(--e-4); max-width: 60ch; font-size: var(--t-2); color: var(--suave); }
.vazio-staff { margin-top: var(--e-4); padding: var(--e-6) var(--e-5); border: 1.5px dashed var(--linha-forte); border-radius: var(--r-3); text-align: center; font-size: var(--t-2); color: var(--suave); }
.ajuda-cartao { margin-top: var(--e-4); padding: var(--e-4); border-radius: var(--r-3); background: var(--erro); color: var(--branco); box-shadow: var(--sombra-2); }
.ajuda-cartao + .ajuda-cartao { margin-top: var(--e-3); }
.ajuda-cab { display: flex; align-items: center; gap: var(--e-3); }
.ajuda-cab .rosto { color: var(--navy); }
.ajuda-cab h3 { font-size: var(--t-4); }
.ajuda-cab .mono { margin-top: 2px; font-size: var(--t-1); color: var(--erro-claro); }
.ajuda-msg { margin-top: var(--e-3); font-size: var(--t-3); font-weight: 500; line-height: 1.4; }
.ajuda-quarto { margin-top: var(--e-1); font-size: var(--t-2); color: var(--erro-claro); }
.ajuda-cartao .ajuda-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; margin-top: var(--e-4); }
.ajuda-cartao .ajuda-acoes .botao { min-height: 44px; padding: 0 var(--e-2); background: var(--branco); color: var(--erro); font-size: var(--t-2); }
.ajuda-cartao .ajuda-acoes .botao.atendido { background: transparent; color: var(--branco); box-shadow: inset 0 0 0 1.5px var(--erro-claro); }
.ajuda-cartao .ajuda-acoes svg { width: 16px; height: 16px; }
.ajuda-sem { grid-column: span 2; align-self: center; font-size: var(--t-2); color: var(--erro-claro); }
.lista-staff li { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.lista-staff li > div { min-width: 0; }
.lista-staff p { margin-top: 2px; font-size: var(--t-2); }
.foto-cartao { margin-top: var(--e-4); overflow: hidden; border-radius: var(--r-3); background: var(--branco); box-shadow: var(--sombra-2); }
.foto-cartao .img-foto { display: block; width: 100%; max-height: 62vh; aspect-ratio: 4 / 5; margin: 0; border-radius: 0; object-fit: cover; }
.foto-cartao > :not(img) { margin-left: var(--e-4); margin-right: var(--e-4); }
.foto-quem { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-3); }
.foto-quem b { display: block; font-size: var(--t-3); }
.foto-quem .dado { display: block; }
.foto-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); margin-top: var(--e-4); margin-bottom: var(--e-4); }
.indice-mais { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e-4); }
.indice-mais .botao.pequeno { min-height: 44px; padding: 0 var(--e-3); background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha-forte); font-weight: 600; }
.staff-mais .secao[id] { scroll-margin-top: calc(72px + env(safe-area-inset-top)); }
.staff-disparar .secao.objeto > h2, .staff-mais .secao > h2 { display: flex; align-items: baseline; gap: var(--e-2); }
/* hipóteses: a contagem de apostas numa coluna à direita, sem quebrar */
.staff-disparar details > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; column-gap: var(--e-3); align-items: center; }
.staff-disparar details > summary .dado { white-space: nowrap; text-align: right; font-family: var(--mono); font-size: var(--t-1); }

/* revisão de selo (20/10): o pedido do aluno e o que o app registrou, com Conceder e Negar */
.revisoes-staff > h2 { display: flex; align-items: center; gap: var(--e-2); }
.rev-cartao { margin-top: var(--e-4); padding: var(--e-4); border-radius: var(--r-3); background: var(--branco); box-shadow: var(--sombra-2); }
.rev-cartao .foto-quem { margin-top: 0; }
.rev-texto { margin: var(--e-3) 0 0; padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: var(--aviso-fundo); font-size: var(--t-3); line-height: 1.4; }
.rev-provas { margin-top: var(--e-2); }
.rev-provas li { padding: 6px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-2); }
.rev-provas li .mono { color: var(--suave); font-size: var(--t-1); margin-right: 4px; }
.rev-provas li.ok { color: var(--ok); }
.rev-provas li.falhou { color: var(--erro); }
.rev-sem-prova { margin-top: var(--e-2); font-size: var(--t-2); color: var(--suave); }
.rev-cartao .foto-acoes { margin-bottom: 0; }

@media (min-width: 440px) {
  .manifesto .chamada-atalhos { justify-content: start; gap: 6px; }
}
@media (max-width: 370px) {
  .manifesto .m-linha { grid-template-columns: 32px minmax(0, 1fr) 120px; column-gap: var(--e-2); }
  .abas-staff button { font-size: var(--t-1); }
}
@media (prefers-reduced-motion: reduce) {
  .seg button.bateu, .m-linha.carimbo .seg button.on { animation: none; }
  .m-linha.carimbo .chamada-nota b { animation: none; background: var(--aviso-fundo); }
}

.revisao { padding-top: var(--e-6); border-top: 1px solid var(--linha); }
.revisao h2 { font-size: var(--t-4); }

/* ---------- avisos do staff: prévia da notificação no painel e cartão na tela Agora */
.previa-aviso { display: grid; grid-template-columns: 38px 1fr auto; gap: var(--e-3); align-items: start; background: color-mix(in srgb, var(--branco) 90%, transparent); border-radius: var(--r-3); padding: var(--e-3) var(--e-4);
  box-shadow: var(--sombra-2); border: 1px solid var(--linha); }
.previa-aviso img { width: 38px; height: 38px; border-radius: var(--r-2); }
.previa-aviso b { display: block; font-size: var(--t-3); line-height: 1.25; }
.previa-aviso span { display: block; font-size: var(--t-2); line-height: 1.35; color: var(--tinta); overflow-wrap: break-word; }
.previa-aviso i { font-style: normal; font-size: var(--t-1); color: var(--suave); }
.previa-capa { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-3); margin-top: var(--e-3); border: 1px solid var(--linha); }
/* Na tela Agora o aviso tem a cara da notificação que chegou no celular, com folga antes da capa de foto. */
.avisos-agora { display: grid; gap: var(--e-3); margin: var(--e-4) 0 var(--e-6); }
.aviso-agora { display: grid; grid-template-columns: 38px 1fr auto; gap: var(--e-3); align-items: start; background: var(--branco); border-radius: var(--r-3); padding: var(--e-4);
  border: 1px solid var(--linha); box-shadow: var(--sombra-2); }
.aviso-agora img { width: 38px; height: 38px; border-radius: var(--r-2); }
/* A imagem do aviso ocupa o topo do cartão de ponta a ponta, como a capa de um cartão de embarque. */
.aviso-agora .aviso-capa { grid-column: 1 / -1; width: calc(100% + 2 * var(--e-4)); max-width: none; height: auto; aspect-ratio: 2 / 1; object-fit: cover;
  margin: calc(-1 * var(--e-4)) calc(-1 * var(--e-4)) var(--e-1); border-radius: calc(var(--r-3) - 1px) calc(var(--r-3) - 1px) 0 0; background: var(--linha); }
.aviso-agora .de { font-size: var(--t-1); font-weight: 600; color: var(--suave); margin-bottom: 2px; }
.aviso-agora b { display: block; font-size: var(--t-3); line-height: 1.3; color: var(--tinta); }
.aviso-agora span { display: block; margin-top: 2px; font-size: var(--t-3); line-height: 1.4; color: var(--tinta); overflow-wrap: break-word; }
.aviso-agora a { display: inline-block; margin-top: var(--e-2); font-size: var(--t-2); font-weight: 700; color: var(--navy); }
.aviso-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.aviso-agora i { font-style: normal; font-size: var(--t-1); color: var(--suave); white-space: nowrap; }
.aviso-fechar { appearance: none; border: 0; background: var(--papel); color: var(--suave); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-4); line-height: 1; font-weight: 600; cursor: pointer; margin-right: -4px; }
.aviso-fechar svg { width: 16px; height: 16px; }
.staff-offline, .staff-sem-push { margin-top: var(--e-4); font-size: var(--t-3); }

/* ---------- Compartilhar: um botão só, e ele é a própria prévia do story. Painel azul-marinho com a borda holográfica do cartão
   de identidade, a imagem 9:16 em tamanho de leitura no meio e a ação em amarelo embaixo; tocar em qualquer parte compartilha. */
.compartilhar-botao { position: relative; display: grid; justify-items: center; gap: var(--e-4); width: 100%; margin-top: var(--e-4); padding: var(--e-6) var(--e-5) var(--e-5);
  border: 0; border-radius: var(--r-3); background: var(--navy); color: var(--branco); cursor: pointer; isolation: isolate;
  box-shadow: var(--sombra-3); transition: transform var(--dur-2) var(--ease); -webkit-tap-highlight-color: transparent; }
.compartilhar-botao::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: var(--r-3); background: var(--foil); background-size: 200% 200%; }
.chegou .compartilhar-botao::before, .compartilhar-botao:active::before { animation: foil 2.2s var(--ease-in-out) .3s 2 alternate both; }
.compartilhar-botao::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-3); background: var(--navy); }
.compartilhar-botao:active, .compartilhar-botao.tocado { transform: scale(.98); }
.cb-miniatura { width: min(62%, 230px); aspect-ratio: 9 / 16; border-radius: var(--r-3); overflow: hidden; border: 3px solid transparent; background: var(--foil) border-box;
  box-shadow: var(--sombra-3); transform: rotate(-2.5deg); }
.cb-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-miniatura i { display: grid; place-items: center; width: 100%; height: 100%; background: var(--navy-3); color: var(--sobre-navy);
  font-size: var(--t-1); font-weight: 500; font-style: normal; animation: cb-pisca 1.4s var(--ease) infinite alternate; }
@keyframes cb-pisca { to { background: var(--navy-4); } }
.cb-miniatura.chegou img { animation: cb-chega .55s var(--ease) both; }
@keyframes cb-chega { from { opacity: 0; transform: scale(.94); } }
.cb-acao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3); width: 100%; min-height: 52px; border-radius: var(--r-2);
  background: var(--amarelo); color: var(--navy); font-weight: 700; font-size: var(--t-3); }
.cb-acao svg { width: 22px; height: 22px; }
.cb-legenda { font-size: var(--t-1); color: var(--sobre-navy); text-align: center; }
.compartilhar-botao.gerando .cb-acao svg { animation: cb-sobe .9s var(--ease) infinite; }
@keyframes cb-sobe { 50% { transform: translateY(-3px); } }

/* ---------- turma em duplas de quarto e pulso */
.quartos { display: grid; grid-template-columns: 1fr; gap: var(--e-3); margin-top: var(--e-4); }
/* Cada quarto é um cartão-chave: a metade de cima na cor da noite da fase, com o número do quarto em branco; a dupla embaixo, no papel. */
.quarto { overflow: hidden; background: var(--branco); border-radius: var(--r-3); box-shadow: var(--sombra-2); padding: 0 0 var(--e-2); }
.quarto .quarto-topo { background: var(--noite); padding: var(--e-3) 16px; align-items: center; }
.quarto .quarto-topo h3 { color: var(--branco); }
.quarto .quarto-topo .dado { color: var(--sobre-noite); }
.quarto .quarto-dupla { padding: 0 16px; }
.quarto.meu { box-shadow: 0 0 0 3px var(--amarelo), var(--sombra-2); }
.quarto-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-3); }
.quarto-topo h3 { margin-top: 2px; overflow-wrap: break-word; }
.quarto-topo .dado { margin-top: 2px; }
.quarto-dupla { display: flex; gap: var(--e-4); flex-wrap: wrap; margin-top: var(--e-3); }
.quarto-dupla a { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--tinta); font-weight: 600; font-size: var(--t-3); min-height: 44px; flex: 1 1 140px; min-width: 0; }
.quarto-dupla a span { overflow-wrap: normal; min-width: 0; }
@media (max-width: 399px) { .quarto-dupla { flex-direction: column; gap: var(--e-1); } .quarto-dupla a { flex: none; } }
.quarto-dupla .avatar { width: 48px; height: 48px; }
.quarto .sem-dupla-texto { padding: var(--e-3) 16px 0; margin: 0; font-size: var(--t-2); color: var(--tinta); max-width: 52ch; }
.pulso-linha { margin: 6px 0 var(--e-4); }
.pulso-linha b { color: var(--tinta); font-weight: 600; }
.secao > .entre:has(> h2) + :is(.tempo, .recolhido) { margin-top: var(--e-4); }

/* ---------- álbum de missões: uma prateleira por missão, cada prova como página de passaporte com o selo carimbado no canto */
.prateleira { margin-top: var(--e-7); }
.prateleira + .prateleira { padding-top: 24px; border-top: 1px solid var(--linha); }
.prat-topo { display: grid; grid-template-columns: 3.25rem 1fr 22px; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--tinta); min-height: 56px; }
.prat-topo h3 { overflow-wrap: break-word; }
.prat-topo .dado { display: block; margin-top: 3px; }
.prat-topo .dado b { color: var(--navy); font-weight: 600; box-shadow: inset 0 -0.45em 0 var(--amarelo); }
.prat-topo svg { width: 18px; height: 18px; color: var(--suave); justify-self: end; }
.prat-selo { width: 3.25rem; height: 3.25rem; display: block; }
.trilho-provas { display: grid; grid-auto-flow: column; grid-auto-columns: min(54vw, 14rem); gap: var(--e-4); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: var(--e-6) 20px var(--e-3); margin: 0 -20px; scrollbar-width: none; }
.trilho-provas::-webkit-scrollbar { display: none; }
.prova { position: relative; margin: 0; scroll-snap-align: start; background: var(--branco); border-radius: var(--r-1); padding: var(--e-2) var(--e-2) var(--e-3);
  box-shadow: var(--sombra-2); }
.prova.minha { box-shadow: inset 0 0 0 2px var(--amarelo), var(--sombra-2); }
.prova .quadro-foto { border-radius: var(--r-1); overflow: hidden; background: var(--linha); }
.prova .quadro-foto img { aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.prova .carimbo { position: absolute; top: -12px; right: -9px; width: 30%; aspect-ratio: 1; pointer-events: none;
  transform: rotate(var(--giro)); }
.prova figcaption { padding: var(--e-3) 2px 0; font-size: var(--t-2); }
.prova-quem { display: flex; align-items: center; gap: var(--e-2); }
.prova-quem .avatar { width: 28px; height: 28px; font-size: var(--t-1); box-shadow: 0 0 0 2px var(--branco), 0 0 0 3px var(--linha); }
.prova.minha .prova-quem .avatar { box-shadow: 0 0 0 2px var(--branco), 0 0 0 3.5px var(--amarelo); }
.prova-quem b { flex: 1; min-width: 0; font-size: var(--t-2); font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prova-quem .mono { font-size: var(--t-1); color: var(--suave); flex-shrink: 0; }
.prova-legenda { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--e-1); color: var(--suave); font-size: var(--t-2); line-height: 1.35; }
@media (hover: hover) { .prova .quadro-foto:hover img { transform: scale(1.03); } }
/* A carimbada: quando a prova entra na tela pela primeira vez, o selo desce, bate e assenta. Sem JS ou com movimento reduzido, ele já está lá. */
.prova.por-carimbar .carimbo { opacity: 0; transform: rotate(calc(var(--giro) + 14deg)) scale(1.7); }
.prova.por-carimbar .carimbo, .prova.carimbou .carimbo { will-change: transform, opacity; }
.prova.carimbou .carimbo { animation: carimba .52s var(--ease-carimbo) calc(var(--i, 0) * 90ms) both; }
@keyframes carimba {
  0% { opacity: 0; transform: rotate(calc(var(--giro) + 14deg)) scale(1.7); }
  55% { opacity: 1; transform: rotate(var(--giro)) scale(.92); }
  100% { opacity: 1; transform: rotate(var(--giro)) scale(1); }
}
/* no computador: barra fina no tom da marca e a borda do trilho esmaecida, para a prova cortada não parecer defeito */
@media (hover: hover) and (pointer: fine) {
  .trilho-provas { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; padding-bottom: var(--e-4);
    mask-image: linear-gradient(90deg, var(--tinta) calc(100% - 64px), transparent); }
  .trilho-provas::-webkit-scrollbar { display: block; height: 6px; }
  .trilho-provas::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: var(--r-pilula); }
}

/* Ranking da turma: posição em mono, avatar, nome e a contagem de selos. A barra de fundo mede os selos contra o
   primeiro colocado; o amarelo marca só você, como no resto do app. */
.ranking { display: grid; gap: 6px; margin-top: var(--e-3); }
.ranking-completo { margin-top: var(--e-5); }
.ranking-linha { position: relative; display: grid; grid-template-columns: 2.4rem 36px 1fr auto; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-4) var(--e-2) var(--e-3); border-radius: var(--r-2);
  background: var(--branco); border: 1px solid var(--linha); text-decoration: none; color: var(--tinta); overflow: hidden; isolation: isolate; }
.ranking-linha .avatar { width: 36px; height: 36px; }
.ranking-linha .pos { font-size: var(--t-3); font-weight: 600; color: var(--suave); }
.ranking-linha.podio .pos { color: var(--acento); }
.ranking-linha .nome { min-width: 0; font-weight: 600; line-height: 1.25; overflow-wrap: normal; }
.ranking-linha .voce { margin-left: var(--e-2); padding: 1px 7px; border-radius: var(--r-pilula); background: var(--amarelo); color: var(--navy); font-size: var(--t-1); font-weight: 600; vertical-align: 2px; }
.ranking-linha.eu { border-color: var(--amarelo); box-shadow: 0 0 0 1px var(--amarelo); }
.ranking-linha .rk-conta { display: grid; justify-items: end; line-height: 1.1; }
.ranking-linha .rk-conta b { font-size: var(--t-4); color: var(--acento); font-weight: 600; }
.ranking-corte { height: 10px; margin: 0 auto; width: 4px; border-left: 2px dotted var(--linha-forte); }

/* ---------- linha do tempo das conquistas (/conquistas) e o atalho "Agora na turma" do Passaporte
   O painel de partidas da agenda aplicado aos selos: cada dia abre como página do Passaporte (faixa da cidade, dia na
   cor dela, contagem em mono) e cada conquista é uma linha com a hora em mono, o selo sobre a linha da cidade, quem
   ganhou o quê e o brinde ao alcance do polegar. A linha nova chega acesa e apaga depois de vista. */
.cq-intro { max-width: 52ch; }
.filtro-cq button .mono { margin-left: 6px; font-size: var(--t-1); font-weight: 500; opacity: .72; }
.cq-vazio { margin-top: var(--e-6); color: var(--suave); max-width: 46ch; }
/* O dia por extenso, como na agenda, na cor e no corte largo da página do Passaporte, com a contagem em mono na mesma linha. */
.cq-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.cq-topo h2 { font-size: var(--t-4); font-stretch: 112%; color: var(--pg-texto, var(--tinta)); }
.cq-topo h2 .tag-agora { vertical-align: 3px; }
.cq-conta { white-space: nowrap; }
.cq-conta b { color: var(--tinta); font-weight: 600; }
.cq-pista { font-family: var(--fonte-corpo); }
.cq-lista { position: relative; isolation: isolate; list-style: none; margin: var(--e-3) 0 0; padding: 0; }
.cq-lista::before { content: ''; position: absolute; z-index: -1; left: 78px; top: 6px; bottom: 6px; width: 2px; border-radius: var(--r-pilula); background: var(--pg, var(--acento)); }
.cq { position: relative; display: grid; grid-template-columns: 48px 40px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--linha); }
.cq:last-child { border-bottom: 0; }
.cq::before { content: ''; position: absolute; z-index: -2; inset: 0 -20px; background: var(--acento-fundo); opacity: 0; transition: opacity 1.2s var(--ease-in-out); }
.cq.nova::before { opacity: 1; }
.cq.nova.vista::before { opacity: 0; }
.cq .h { font-size: var(--t-2); color: var(--suave); text-align: right; }
.cq.nova:not(.vista) .h { color: var(--acento); font-weight: 600; }
.cq-selo { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-1); background: var(--papel-fase); }
/* O selo assenta girado como carimbo de passaporte, um para cada lado. */
.cq-lista > .cq:nth-child(odd) { --giro: -4deg; } .cq-lista > .cq:nth-child(even) { --giro: 3deg; }
.cq-selo img { transform: rotate(var(--giro, 0deg)); }
.cq-pilha b { position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--r-pilula);
  background: var(--acento); color: var(--branco); font-size: var(--t-1); font-weight: 600; box-shadow: 0 0 0 2px var(--papel-fase); }
.cq.nova:not(.vista) .cq-selo { background: var(--acento-fundo); }
.cq-selo { transition: background-color 1.2s var(--ease-in-out); }
.cq-selo img { display: block; width: 40px; height: 40px; }
.cq-selo .placa-provisoria { width: 40px; padding: 0; border-radius: var(--r-1); }
.cq-linha { display: grid; gap: 2px; min-height: 48px; padding: var(--e-1) 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-1); }
.cq-texto { font-size: var(--t-2); line-height: 1.3; }
.cq-texto b { font-weight: 700; color: var(--navy); }
/* Duas linhas, como no painel: quem ganhou; o selo e a posição. */
.cq-quem { font-size: var(--t-2); line-height: 1.25; }
.cq-quem b { font-weight: 700; color: var(--navy); }
.cq-oque { font-size: var(--t-2); line-height: 1.3; color: var(--suave); }
.cq-oque > b { font-weight: 600; color: var(--tinta); }
.cq-n-selos { white-space: nowrap; }
.cq.minha .cq-quem b { box-shadow: inset 0 -.34em 0 var(--amarelo); }
.cq-ordem { font-size: var(--t-1); color: var(--suave); white-space: nowrap; }
.cq-resumo { white-space: normal; }
.cq-pista { display: block; white-space: normal; }
.cq-ordem b { color: var(--acento); font-weight: 600; }
/* Brinde: pílula de 44 px na tinta da fase; brindado, enche. As taças batem e a palavra da cidade sobe do botão. */
.cq-brinde, .cq-recebeu { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 68px; min-height: 44px; padding: 0 var(--e-3); border-radius: var(--r-pilula); }
.cq-brinde { position: relative; border: 0; background: var(--acento-fundo); color: var(--acento); cursor: pointer;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
.cq-brinde:active { transform: scale(.94); }
.cq-brinde.brindei { background: var(--acento); color: var(--branco); }
.cq.nova:not(.vista) .cq-brinde:not(.brindei) { background: var(--branco); }
.cq-brinde .cq-n { font-size: var(--t-2); font-weight: 600; }
.cq-brinde .cq-n:empty { display: none; }
.cq-recebeu { color: var(--suave); font-size: var(--t-2); }
.cq-recebeu svg, .cq-tacas svg { width: 22px; height: 22px; }
.cq-tacas { display: grid; }
.cq-tacas .ic-taca1 { transform-origin: 6.5px 18.8px; }
.cq-tacas .ic-taca2 { transform-origin: 17.5px 18.8px; }
.cq-brinde.tilinta .ic-taca1 { animation: cq-taca1 .44s var(--ease-carimbo); }
.cq-brinde.tilinta .ic-taca2 { animation: cq-taca2 .44s var(--ease-carimbo); }
@keyframes cq-taca1 { 45% { transform: translateX(1.6px) rotate(18deg); } 100% { transform: none; } }
@keyframes cq-taca2 { 45% { transform: translateX(-1.6px) rotate(-18deg); } 100% { transform: none; } }
.cq-palavra { position: absolute; left: 50%; bottom: calc(100% + 2px); max-width: 76px; padding: 1px 6px; border-radius: var(--r-1); background: var(--branco); box-shadow: var(--sombra-1);
  color: var(--acento); font-size: var(--t-1); font-weight: 700; white-space: nowrap; pointer-events: none; animation: cq-palavra 1s var(--ease) both; }
@keyframes cq-palavra { 0% { opacity: 0; transform: translate(-50%, 6px); } 20%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
/* Detalhe da linha: abre no lugar, na coluna do texto, com o Fazer também e a fila de quem tem. */
.cq-detalhe { grid-column: 3 / -1; display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--dur-2) var(--ease-in-out), opacity var(--dur-1) var(--ease-in-out), visibility 0s linear var(--dur-2); }
.cq-detalhe > div { min-height: 0; overflow: hidden; }
.cq.aberta .cq-detalhe { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease) 80ms, visibility 0s; }
.cq-detalhe > div > :first-child { margin-top: var(--e-2); }
.cq-detalhe .dado b { color: var(--tinta); font-weight: 600; }
.cq-acao { margin: var(--e-2) 0 var(--e-3); }
.cq-acao .botao svg { width: 16px; height: 16px; }
.cq-fila { display: flex; gap: var(--e-2); margin: var(--e-3) -20px 0 0; padding: 4px 20px 4px 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.cq-fila::-webkit-scrollbar { display: none; }
.cq-fila a { display: grid; justify-items: center; gap: 2px; width: 60px; min-height: 44px; text-decoration: none; color: var(--tinta); font-size: var(--t-1); font-weight: 600; }
.cq-fila a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-fila a .mono { color: var(--suave); font-weight: 500; }
.cq-fila .avatar { width: 44px; height: 44px; margin-bottom: 2px; background: var(--branco); box-shadow: 0 0 0 1px var(--linha-forte); }
.cq-fila a.eu .avatar { box-shadow: 0 0 0 2px var(--papel-fase), 0 0 0 3.5px var(--amarelo); }
.cq-detalhe .link-seta { padding: var(--e-3) 0; min-height: 48px; border-bottom: 0; font-size: var(--t-2); }
/* Lista da rajada: um selo por linha, com a posição e o brinde de cada um. */
.cq-sub { list-style: none; margin: var(--e-2) 0 0; padding: 0; }
.cq-sub li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 6px 0; border-top: 1px solid var(--linha); }
.cq-sub .cq-texto { display: grid; gap: 2px; }
.cq-sub .cq-texto a { color: var(--navy); text-decoration: none; }
/* A chegada: o selo bate e assenta enquanto a hora sobe algarismo por algarismo (ticar, em movimento.js). */
.cq.por-chegar .cq-selo img { opacity: 0; transform: scale(1.6) rotate(10deg); }
.cq.chegou .cq-selo img { animation: carimba .52s var(--ease-carimbo) calc(var(--i, 0) * 140ms) both; }
/* Atalho no Passaporte: as três conquistas mais novas da turma na mesma linha do painel, num cartão que abre a linha do tempo. */
.agora-turma .at-lista { display: grid; margin-top: var(--e-3); padding: var(--e-1) var(--e-4); border-radius: var(--r-3); background: var(--branco); box-shadow: var(--sombra-2);
  text-decoration: none; color: var(--tinta); }
.at-linha { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.at-linha:last-child { border-bottom: 0; }
.at-selo { width: 40px; height: 40px; }
.at-selo img { display: block; width: 100%; height: 100%; }
.at-selo .placa-provisoria { width: 40px; padding: 0; }
.at-texto { font-size: var(--t-2); line-height: 1.3; }
.at-texto b { font-weight: 700; color: var(--navy); }
.at-quando { font-size: var(--t-1); color: var(--suave); white-space: nowrap; }

/* ---------- ajuda e notificações */
.contato-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-4) 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.contato-linha:last-child { border-bottom: 0; }
.notif-ligar { margin-top: var(--e-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding: 12px 12px 12px var(--e-4); border: 1px solid var(--linha); box-shadow: none; border-radius: var(--r-2); }
.notif-ligar p { margin: 0; flex: 1 1 12rem; min-width: 0; font-size: var(--t-2); line-height: 1.35; }
.notif-ligar .botao { width: auto; flex: none; min-height: 44px; padding: var(--e-2) var(--e-4); font-size: var(--t-2); }
.notif-ligar .botao svg { display: none; }
.notif-dia { text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-1); }
.notif-lista { list-style: none; padding: 0; margin: var(--e-2) 0 0; }
.notif { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-3); margin: 0 calc(-1 * var(--e-3)); border-radius: var(--r-2); text-decoration: none; color: var(--tinta); transition: background-color var(--dur-1); }
.notif:active { background: var(--fundo-2); }
.notif.nova { background: var(--aviso-fundo); }
.notif-icone { flex: none; width: 40px; height: 40px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--fundo-2); color: var(--navy); }
.notif-icone svg { width: 22px; height: 22px; }
.notif-icone.ni-aviso, .notif-icone.ni-saida { background: var(--navy); color: var(--amarelo); }
.notif-icone.ni-selo { background: var(--amarelo); }
.notif-icone.ni-staff { background: var(--erro); color: var(--branco); }
.notif-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-texto b { font-size: var(--t-3); line-height: 1.3; }
.notif-texto span { color: var(--suave); font-size: var(--t-2); line-height: 1.4; }
.notif-hora { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-2); font-size: var(--t-1); }
.notif-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--erro); }
button.notif { width: calc(100% + 2 * var(--e-3)); border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
button.notif.nova { background: var(--aviso-fundo); }
/* Pop-up da central: a notificação aberta de novo, com a capa do aviso no topo de ponta a ponta. */
.notif-popup { width: min(calc(100vw - 32px), 420px); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r-3); background: var(--branco); color: var(--tinta);
  box-shadow: var(--sombra-3); overflow: auto; animation: np-entra var(--dur-2) var(--ease); }
.notif-popup::backdrop { background: color-mix(in srgb, var(--tinta) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: np-fundo var(--dur-2) ease-out; }
.np-capa { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--linha); }
.np-fechar { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--branco) 88%, transparent); color: var(--tinta); box-shadow: var(--sombra-1); }
.np-fechar svg { width: 16px; height: 16px; }
.np-corpo { padding: var(--e-5); }
.np-de { display: flex; align-items: center; gap: var(--e-3); padding-right: 40px; }
.notif-popup:has(.np-capa) .np-de { padding-right: 0; }
.np-de .dado { font-size: var(--t-1); }
.notif-popup h2 { margin: var(--e-4) 0 0; font-size: var(--t-4); line-height: 1.25; }
.notif-popup p { margin: var(--e-2) 0 0; font-size: var(--t-3); line-height: 1.45; overflow-wrap: break-word; }
.np-acoes { display: grid; gap: var(--e-2); margin-top: var(--e-5); }
@keyframes np-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes np-fundo { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .notif-popup, .notif-popup::backdrop { animation: none; } }

/* ---------- janela de envio de foto: prévia, legenda e quem aparece (mesmo cartão do pop-up de notificação) */
.compor { width: min(calc(100vw - 32px), 420px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-3); background: var(--branco); color: var(--tinta);
  box-shadow: var(--sombra-3); overflow: auto; animation: np-entra var(--dur-2) var(--ease); }
.compor::backdrop { background: color-mix(in srgb, var(--tinta) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: np-fundo var(--dur-2) ease-out; }
.cp-previa { display: block; width: 100%; max-height: 38dvh; object-fit: cover; background: var(--linha); }
.cp-corpo { padding: var(--e-5); }
.compor h2 { margin: 0; font-size: var(--t-4); line-height: 1.25; }
.compor .campo textarea { min-height: 64px; }
.cp-chips { list-style: none; margin: 0 0 var(--e-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cp-chips:empty { display: none; }
.cp-chips li { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 999px; background: var(--acento-fundo); font-size: var(--t-2); }
/* .campo span estiliza o rótulo do campo; dentro das listas, o rosto e o nome voltam ao normal */
.compor .campo .cp-chips span, .compor .campo .cp-lista span { margin: 0; color: var(--tinta); font-weight: 500; font-size: var(--t-2); }
.compor .campo .avatar { display: grid; place-items: center; line-height: 1; color: var(--navy); }
.cp-chips .avatar { width: 26px; height: 26px; font-size: 10px; }
.cp-chips button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--suave); font-size: 18px; line-height: 1; cursor: pointer; }
.compor #cp-busca { width: 100%; padding: var(--e-3) var(--e-4); border: 1.5px solid var(--borda-campo); border-radius: var(--r-2); background: var(--branco); min-height: 48px; }
.compor #cp-busca:focus { border-color: var(--cidade); outline: none; }
.cp-lista { list-style: none; margin: var(--e-1) 0 0; padding: 0; }
.cp-lista button { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 48px; padding: 4px var(--e-2); border: 0; border-radius: var(--r-2); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cp-lista button:hover, .cp-lista button:focus-visible { background: var(--acento-fundo); }
.cp-lista .avatar { width: 32px; height: 32px; font-size: 12px; }
.cp-acoes { display: grid; gap: var(--e-2); margin-top: var(--e-5); }
@media (prefers-reduced-motion: reduce) { .compor, .compor::backdrop { animation: none; } }

/* ---------- álbum como folha de contato: o rolo do dia revelado, numerado como no filme */
.quadro-foto { appearance: none; border: 0; padding: 0; margin: 0; background: none; color: inherit; font: inherit; display: block; width: 100%; cursor: zoom-in; text-align: left; }
.quadro-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.feed .quadro-foto img { aspect-ratio: auto; }
.album .quadro-foto { aspect-ratio: 1; overflow: hidden; background: var(--linha); }
/* Folha de contato clara: papel de laboratório, os quadros em fileira e as perfurações do filme em azul-marinho em cima e embaixo. */
.folha { margin: var(--e-secao) -20px 0; padding: var(--e-6) 20px 24px; background: var(--branco); color: var(--tinta); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.folha h2 { color: var(--tinta); margin: 0; }
.folha .rolo { display: flex; justify-content: space-between; gap: var(--e-3); margin: var(--e-1) 0 var(--e-2); font-size: var(--t-2); color: var(--suave); }
.folha .rolo .mono { font-size: var(--t-1); color: var(--acento); font-weight: 600; }
.contato { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4) 6px; padding: 24px 0; }
.contato::before, .contato::after { content: ''; position: absolute; left: 0; right: 0; height: 8px; background: var(--furos-navy) repeat-x left center / 16px 8px; }
.contato::before { top: 4px; }
.contato::after { bottom: 4px; }
.contato .quadro-foto img { border-radius: 0; }
.legenda-quadro { display: flex; gap: 6px; align-items: baseline; margin-top: 6px; font-size: var(--t-1); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legenda-quadro b { font-family: var(--mono); color: var(--navy); font-weight: 600; }
.contato .quadro-foto img { box-shadow: 0 0 0 1px var(--linha); }
/* A revelação: na primeira vez que o rolo aparece, cada quadro sai do escuro, passa pelo âmbar da luz de laboratório e firma. */
.folha.revelando .quadro-foto img { filter: brightness(.06) sepia(1) contrast(.6) blur(3px); }
.folha.revelou .quadro-foto img { animation: revela 1.9s var(--ease) calc(var(--i, 0) * 70ms) forwards; }
@keyframes revela {
  0% { filter: brightness(.06) sepia(1) contrast(.6) blur(3px); }
  45% { filter: brightness(.7) sepia(.85) contrast(.85) blur(1px); }
  100% { filter: none; }
}
/* Suas fotos ainda não reveladas aparecem em negativo. */
.quadro-foto.negativo img { filter: invert(1) hue-rotate(180deg) sepia(.35) saturate(1.3); }

/* ---------- visualizador em tela cheia */
body.com-visor { overflow: hidden; }
.visor-foto { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr auto; color: var(--branco); background: rgb(var(--navy-0-rgb) / var(--fundo, 1)); }
.vf-topo { display: flex; justify-content: space-between; align-items: center; padding: calc(8px + env(safe-area-inset-top)) var(--e-3) var(--e-2); }
.vf-topo button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--branco-12); color: var(--branco); display: grid; place-items: center; cursor: pointer; transition: background-color var(--dur-1); }
.vf-topo button:active { background: var(--branco-22); }
.vf-topo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vf-conta { font-size: var(--t-2); color: var(--sobre-navy); }
.vf-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-x pinch-zoom; min-height: 0; }
.vf-trilho::-webkit-scrollbar { display: none; }
/* A altura e a grade definidas dão ao max-height: 100% da imagem uma referência; sem elas o Safari deixava a foto alta passar do quadro e cortava o fim. */
.vf-quadro { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 0 0 4px; }
.vf-quadro img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform var(--dur-2) var(--ease); user-select: none; -webkit-user-drag: none; }
.vf-pe { padding: var(--e-3) 20px calc(var(--e-5) + env(safe-area-inset-bottom)); min-height: 84px; }
.vf-nome { display: block; font-size: var(--t-3); }
.vf-quando { display: block; font-size: var(--t-1); color: var(--sobre-navy); margin-top: 2px; }
.vf-legenda { margin-top: 6px; font-size: var(--t-3); }
.vf-legenda:empty { display: none; }
.vf-acoes { display: flex; gap: var(--e-2); }
.vf-topo .vf-story { width: auto; padding: 0 var(--e-4); border-radius: var(--r-pilula); font-weight: 700; font-size: var(--t-2); background: var(--amarelo); color: var(--navy); }
.vf-topo .vf-story:active { background: var(--amarelo-2); }
/* Curtidas e comentários no visor. A curtida é sua, então enche em ouro sobre o navy (o ouro é você); o toque duplo
   na foto bate um carimbo de passaporte com o coração. Os comentários sobem numa folha de papel claro. */
.visor-foto [hidden] { display: none !important; }
.vf-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.vf-autor { min-width: 0; flex: 1; }
.vf-autor .vf-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-social { display: flex; gap: var(--e-2); flex: none; }
.vf-social button { display: inline-flex; align-items: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 var(--e-3) 0 10px; border: 0; border-radius: var(--r-pilula);
  background: var(--branco-12); color: var(--branco); font: 600 var(--t-2) / 1 var(--mono); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1); }
.vf-social button:active { background: var(--branco-22); }
.vf-social button:focus-visible, .vf-quem:focus-visible, .vf-aparecem:focus-visible, .vf-folha-fechar:focus-visible { outline: 2.5px solid var(--amarelo); outline-offset: 2px; }
.vf-social svg { width: 22px; height: 22px; flex: none; transform-origin: 50% 55%; }
.vf-social .vf-n:empty { display: none; }
.vf-social button:has(.vf-n:empty) { padding: 0; justify-content: center; width: 44px; }
.vf-curtir[aria-pressed="true"] { color: var(--amarelo); }
.vf-curtir[aria-pressed="true"] .ic-coracao, .mini-social.curti span:first-child .ic-coracao { fill: currentColor; }
.vf-quem, .vf-aparecem { display: block; min-height: 44px; margin: 2px 0 -10px; padding: 0; border: 0; background: none; color: var(--sobre-navy); font: inherit; font-size: var(--t-2); text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sobre-navy) 45%, transparent); text-underline-offset: 4px; }
.vf-carimbo { position: absolute; width: 120px; height: 120px; color: var(--amarelo); pointer-events: none; z-index: 3; transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 8px rgb(var(--navy-0-rgb) / .55)); will-change: transform, opacity; }
.vf-carimbo svg { width: 100%; height: 100%; display: block; }
.vf-folha { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: 640px; margin-inline: auto; max-height: min(74%, 600px); display: flex; flex-direction: column;
  background: var(--papel); color: var(--tinta); border-radius: var(--r-3) var(--r-3) 0 0; box-shadow: var(--sombra-3); padding-bottom: calc(env(safe-area-inset-bottom) + var(--teclado, 0px)); }
.vf-folha-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4) var(--e-2) var(--e-5); border-bottom: 1px solid var(--linha); }
.vf-folha-topo h2 { margin: 0 auto 0 0; font-size: var(--t-4); }
.vf-silenciar { min-height: 44px; padding: 0 var(--e-3); border: 0; border-radius: var(--r-pilula); background: none; color: var(--suave); font: 600 var(--t-1) / 1 var(--fonte-corpo); cursor: pointer; }
.vf-silenciar[aria-pressed="true"] { background: var(--fundo-2); color: var(--navy); }
.vf-folha-topo h2 .mono { font-size: var(--t-2); color: var(--suave); font-weight: 500; margin-left: 4px; }
.vf-folha-fechar { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fundo-2); color: var(--tinta); display: grid; place-items: center; cursor: pointer; flex: none; }
.vf-folha-fechar svg { width: 20px; height: 20px; }
.vf-folha-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--e-5); }
.vf-curtidores h3, .vf-aparece h3 { display: flex; gap: var(--e-2); align-items: baseline; margin: var(--e-4) 0 var(--e-2); font-size: var(--t-2); font-weight: 600; color: var(--suave); }
.vf-curtidores h3 .mono, .vf-aparece h3 .mono { font-size: var(--t-1); }
.vf-aparece:empty { display: none; }
.vf-ap-chips { list-style: none; margin: 0; padding: 0 0 var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vf-ap-chips > li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 3px 3px 3px; border-radius: var(--r-pilula); background: var(--acento-fundo); font-size: var(--t-2); font-weight: 500; color: var(--navy); }
.vf-ap-chips > li > span:not(.vf-rosto) { padding-right: var(--e-2); }
.vf-ap-tirar { width: 32px; height: 32px; margin-left: -6px; border: 0; border-radius: 50%; background: none; color: var(--suave); display: grid; place-items: center; cursor: pointer; }
.vf-ap-tirar svg { width: 14px; height: 14px; }
.vf-ap-chips > li.vf-ap-novo { background: none; padding: 0; }
.vf-ap-abrir { min-height: 36px; padding: 0 var(--e-3); border: 1.5px dashed var(--borda-campo); border-radius: var(--r-pilula); background: none; color: var(--navy); font: 600 var(--t-2) / 1 var(--fonte-corpo); cursor: pointer; }
.vf-ap-busca { display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--borda-campo); border-radius: var(--r-2); font: var(--t-3) / 1.4 var(--fonte-corpo); color: var(--tinta); background: var(--branco); }
.vf-ap-busca:focus { outline: none; border-color: var(--acento); }
.vf-ap-lista { border-bottom: 0; margin-bottom: var(--e-3); }
.vf-aparece:not(:empty):has(+ .vf-curtidores:empty) { border-bottom: 1px solid var(--linha); }
.vf-curtidores ul { list-style: none; margin: 0; padding: 0 0 var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-2); border-bottom: 1px solid var(--linha); }
.vf-curtidores li { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--e-3) 3px 3px; border-radius: var(--r-pilula); background: var(--fundo-2); font-size: var(--t-2); font-weight: 500; }
.vf-rosto { position: relative; width: 28px; height: 28px; font-size: var(--t-1); }
.vf-rosto img { position: absolute; inset: 0; }
.vf-comentarios { list-style: none; margin: 0; padding: var(--e-1) 0 var(--e-4); }
.vf-coment { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--e-3); align-items: start; padding: var(--e-3) 0; }
.vf-coment + .vf-coment { border-top: 1px solid var(--linha); }
.vf-coment .vf-rosto { width: 36px; height: 36px; }
.vf-coment-cab { display: flex; align-items: baseline; gap: var(--e-2); margin: 0; }
.vf-coment-cab b { font-size: var(--t-2); font-weight: 600; color: var(--navy); }
.vf-coment-cab .mono { font-size: var(--t-1); color: var(--suave); }
.vf-coment-texto { margin: 2px 0 0; font-size: var(--t-2); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.vf-coment-acoes { display: flex; gap: var(--e-1); margin: 2px 0 -8px -10px; }
.vf-coment-acoes button { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; min-width: 36px; padding: 0 10px; border: 0; border-radius: var(--r-pilula); background: none; color: var(--suave); font: 600 var(--t-1) / 1 var(--fonte-corpo); cursor: pointer; }
.vf-coment-acoes button:active { background: var(--fundo-2); }
.vf-coment-acoes svg { width: 17px; height: 17px; transform-origin: 50% 55%; }
.vf-coment-acoes .mono:empty { display: none; }
.vf-c-curtir[aria-pressed="true"] { color: var(--acento); }
.vf-c-curtir[aria-pressed="true"] .ic-coracao { fill: currentColor; }
.vf-respondendo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: var(--t-1); color: var(--suave); }
.vf-respondendo[hidden] { display: none; }
.vf-respondendo button { min-height: 32px; border: 0; background: none; color: var(--navy); font: 600 var(--t-1) / 1 var(--fonte-corpo); cursor: pointer; }
.vf-apagar { min-height: 44px; margin: -10px -8px 0 0; padding: 0 var(--e-2); border: 0; background: none; color: var(--suave); font: 600 var(--t-1) / 1 var(--fonte-corpo); cursor: pointer; }
.vf-apagar.confirmar { color: var(--erro); }
.vf-vazio { padding: var(--e-5) 0; color: var(--suave); font-size: var(--t-2); }
.vf-escrever { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--e-2); padding: var(--e-3) var(--e-4) var(--e-3) var(--e-5); border-top: 1px solid var(--linha); background: var(--branco); }
.vf-escrever textarea { display: block; width: 100%; min-height: 44px; max-height: 120px; padding: 10px 14px; border: 1.5px solid var(--borda-campo); border-radius: var(--r-2); resize: none;
  font: var(--t-3) / 1.4 var(--fonte-corpo); color: var(--tinta); background: var(--branco); }
.vf-escrever textarea::placeholder { color: var(--suave); }
.vf-escrever textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--acento) 25%, transparent); }
.vf-escrever textarea:disabled { background: var(--fundo-2); }
.vf-enviar { height: 44px; padding: 0 var(--e-4); border: 0; border-radius: var(--r-2); background: var(--navy); color: var(--branco); font: 700 var(--t-2) / 1 var(--fonte-corpo); cursor: pointer; }
.vf-enviar:disabled { background: var(--borda-campo); cursor: default; }
.vf-marcar { grid-column: 1 / -1; list-style: none; margin: 0; padding: var(--e-1) 0; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--linha); }
.vf-marcar[hidden] { display: none; }
.vf-marcar button { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 44px; padding: 4px var(--e-2); border: 0; border-radius: var(--r-2); background: none; font: inherit; font-size: var(--t-2); font-weight: 500; color: var(--navy); text-align: left; }
.vf-marcar button:active, .vf-marcar button:focus-visible { background: var(--fundo-2); }
.vf-marcar .vf-rosto { width: 32px; height: 32px; }
.vf-marca { font-weight: 600; color: var(--acento); }
.vf-escrever-nota { grid-column: 1 / -1; margin: 0; font-size: var(--t-1); color: var(--suave); }
.vf-escrever-nota:empty { display: none; }
.vf-escrever-nota.erro { color: var(--erro); }
/* Contagem miúda embaixo da miniatura: coração e balão em traço fino, cheio na cor da cidade quando a curtida é sua. */
.mini-social { display: inline-flex; gap: var(--e-2); flex: none; margin-left: auto; font: 500 var(--t-1) / 1 var(--mono); font-variant-numeric: tabular-nums; color: var(--suave); }
.mini-social:empty { display: none; }
.mini-social > span { display: inline-flex; align-items: center; gap: 3px; }
.mini-social svg { width: 12px; height: 12px; stroke-width: 2.4; }
.mini-social.curti > span:first-child { color: var(--acento); }
.legenda-quadro .lq-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Na folha de contato o quadro é estreito: a contagem desce para a linha de baixo e o nome fica inteiro. */
.legenda-quadro:has(.mini-social:not(:empty)) { flex-wrap: wrap; row-gap: 2px; }
.legenda-quadro .mini-social { flex-basis: 100%; margin-left: 0; }
.prova .mini-social { display: flex; margin: var(--e-2) 0 0; }
.prova .mini-social:empty { display: none; }

/* ---------- Story: foto escolhida com um modelo por cima, em 9:16 (story.js) */
/* O estúdio é editor de tela cheia: sem topo do app e sem barra de abas, para a prévia, os modelos, as fotos e o
   botão caberem num celular de 844 px de altura sem rolar. */
body.modo-editor { padding-bottom: 0; }
body.modo-editor .topo, body.modo-editor .nav { display: none; }
.story-barra { height: 48px; display: flex; align-items: center; padding-top: env(safe-area-inset-top); }
.story-barra .voltar { margin: 0; }
.story-palco { margin: 4px auto 0; width: min(100%, calc((100svh - 360px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16)); min-width: 180px; display: grid; gap: 6px; justify-items: center; }
.story-palco canvas { width: 100%; height: auto; aspect-ratio: 9 / 16; display: block; border-radius: var(--r-3); background: var(--navy);
  box-shadow: var(--sombra-3); touch-action: none; cursor: grab; }
.story-palco canvas.arrastando { cursor: grabbing; }
.story-palco.sem-arraste canvas { cursor: default; touch-action: auto; }
.story-dica { text-align: center; font-size: var(--t-2); color: var(--suave); }
.story-modelos { margin: var(--e-2) -20px 0; }
.story-modelos button { font-family: var(--fonte-corpo); font-size: var(--t-2); }
.story-fotos { display: flex; gap: var(--e-2); overflow-x: auto; margin: 6px -20px 0; padding: 2px 20px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.story-fotos::-webkit-scrollbar { display: none; }
.story-mini { flex: none; width: 64px; height: 90px; border-radius: var(--r-2); overflow: hidden; border: 0; padding: 0; background: var(--fundo-2); scroll-snap-align: start; cursor: pointer; position: relative; }
.story-mini img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-2) var(--ease); }
.story-mini::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-2); box-shadow: inset 0 0 0 0 var(--amarelo); transition: box-shadow var(--dur-2) var(--ease); }
.story-mini.escolhida::after { box-shadow: inset 0 0 0 4px var(--amarelo); }
.story-mini:active img { transform: scale(.96); }
.story-pe { position: sticky; bottom: 0; margin: var(--e-2) -20px 0; padding: var(--e-3) 20px calc(var(--e-3) + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--papel) 14px); }
.story-legenda { text-align: center; margin-top: 6px; font-size: var(--t-2); color: var(--suave); }

/* ---------- movimento: troca de tela, marcador da aba, preenchimentos na chegada e resposta ao toque */
.topo { view-transition-name: topo; }
.nav { view-transition-name: nav; }
main { view-transition-name: tela; }
::view-transition-group(marcador) { animation-duration: .38s; animation-timing-function: var(--ease); }
::view-transition-old(tela) { animation: tela-sai .09s var(--ease-in) both; }
::view-transition-new(tela) { animation: tela-entra .34s var(--ease) .07s both; }
[data-sentido=volta]::view-transition-new(tela) { animation-name: tela-volta; }
@keyframes tela-sai { to { opacity: 0; } }
@keyframes tela-entra { from { opacity: 0; transform: translateX(28px); } }
@keyframes tela-volta { from { opacity: 0; transform: translateX(-28px); } }
.medidor .trilho i, .opcao .barra i, .pagina-trilho i { transform-origin: left center; }
.chegou .medidor .trilho i { animation: enche .9s var(--ease) .15s both; }
.chegou .opcao .barra i { animation: enche .7s var(--ease) .1s both; }
.chegou .pagina-trilho i { animation: enche .7s var(--ease) .2s both; }
/* o trilho enche por escala, não por largura: o celular anima sem recalcular o layout da linha */
@keyframes enche { from { transform: scaleX(0); } }
.chamada button, .abas button, .opcao { transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-1), transform .12s var(--ease); }
.chamada button:active, .abas button:active, .opcao:active:not(:disabled) { transform: scale(.94); }
.opcao:active:not(:disabled) { transform: scale(.98); }
.ativ-chip { transition: background-color var(--dur-1), border-color var(--dur-1), transform .12s var(--ease); }
.ativ-chip:active { transform: scale(.96); }
.puxar { --y: 0px; --p: 0; position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + var(--topo-folga) + 52px); z-index: 19; pointer-events: none; transform: translate(-50%, calc(var(--y) - 100%)); opacity: min(1, calc(var(--p) * 2.5)); }
.puxar.voltando, main.voltando { transition: transform .36s var(--ease), opacity .36s var(--ease); }
.puxar-bola { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--branco); color: var(--navy); box-shadow: var(--sombra-3), 0 0 0 1px var(--linha); transform: scale(calc(.6 + var(--p) * .4)); transition: background-color var(--dur-2), color var(--dur-2); }
.puxar-bola svg { position: absolute; width: 22px; height: 22px; transition: opacity .18s, transform var(--dur-2) var(--ease); }
.puxar-seta { transform: rotate(calc(var(--p) * 180deg - 180deg)); }
.puxar.pronto .puxar-bola { background: var(--amarelo); }
.puxar.pronto .puxar-seta { transform: rotate(0deg) scale(1.08); }
.puxar-anel, .puxar-ok { opacity: 0; }
.puxar.girando .puxar-seta, .puxar.feito .puxar-seta { opacity: 0; }
.puxar.girando .puxar-bola { background: var(--branco); transform: scale(1); }
.puxar.girando .puxar-anel { opacity: 1; animation: puxar-gira .7s linear infinite; }
.puxar.feito .puxar-bola { background: var(--navy); color: var(--amarelo); transform: scale(1); }
.puxar.feito .puxar-ok { opacity: 1; animation: puxar-ok .3s var(--ease); }
@keyframes puxar-gira { to { transform: rotate(360deg); } }
@keyframes puxar-ok { from { transform: scale(.4); } }

/* ---------- receitas da biblioteca do sallve apps (app-template/transitions), com as cores da Link no lugar das da receita */
:root {
  --tabs-dur: var(--dur-2); --tabs-ease: var(--ease);
  --digit-dur: var(--dur-3); --digit-distance: 8px; --digit-stagger: 70ms; --digit-blur: 2px; --digit-ease: var(--ease); --digit-dir-x: 0; --digit-dir-y: 1;
  --badge-slide-dur: 260ms; --badge-pop-dur: var(--dur-3); --badge-pop-close-dur: 180ms; --badge-fade-dur: 400ms; --badge-fade-close-dur: 180ms; --badge-blur: 2px;
  --badge-offset-x: -8.2px; --badge-offset-y: 12.4px; --badge-slide-ease: var(--ease); --badge-pop-ease: var(--ease); --badge-close-ease: var(--ease-in-out);
  --toast-open: 350ms; --toast-close: var(--dur-2); --toast-distance: 16px; --toast-blur: 2px; --toast-scale: 0.97; --toast-ease: var(--ease);
  --check-opacity-dur: var(--dur-3); --check-rotate-dur: var(--dur-3); --check-rotate-from: 80deg; --check-bob-dur: var(--dur-3); --check-y-amount: 40px; --check-blur-dur: var(--dur-3); --check-blur-from: 10px;
  --check-path-dur: var(--dur-3); --check-path-delay: 80ms; --check-ease-out: var(--ease); --check-ease-opacity: var(--ease); --check-ease-rotate: var(--ease);
  --check-ease-bob: var(--ease); --check-ease-path: var(--ease);
  --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms; --shake-ease: var(--ease); --revert-dur: 280ms;
  --check-spin-dur: 900ms; --check-pop-dur: 350ms; --check-pop-ease: var(--ease); --check-fill-dur: 350ms; --check-fill-ease: var(--ease);
  --check-draw-dur: 600ms; --check-draw-delay: 80ms; --check-draw-ease: var(--ease); --check-revert-dur: var(--dur-2); --check-revert-ease: var(--ease);
  --check-hop: 3px; --check-up-dur: var(--dur-2); --check-up-ease: var(--ease); --check-down-dur: 300ms; --check-down-ease: var(--ease);
  --check-pop-scale: 1.09; --check-blur: 0.5px; --check-ring-w: 2.5px; --check-mark-w: 2; --check-green: var(--ok);
  --text-swap-dur: var(--dur-1); --text-swap-translate-y: 4px; --text-swap-blur: 2px; --text-swap-ease: var(--ease-in-out);
  --acc-expand: var(--dur-2); --acc-collapse: var(--dur-2); --acc-ease: var(--ease);
}

/* receita: transitions/tabs-sliding.md. A pílula azul-marinho desliza só por transform (movimento.js faz a troca de largura
   por escala, para o movimento não mexer no layout); a aba ativa só troca a cor do texto. */
.abas.t-tabs { position: relative; }
.abas.t-tabs button { position: relative; z-index: 1; transition: color var(--tabs-dur) var(--tabs-ease), background-color var(--tabs-dur) var(--tabs-ease); }
.abas.t-tabs button.ativa { background: transparent; color: var(--branco); }
.t-tabs-pill { position: absolute; top: 0; left: 0; width: 0; border-radius: var(--r-pilula); background: var(--acento); z-index: 0; pointer-events: none; transform-origin: 0 0;
  transition: transform var(--tabs-dur) var(--tabs-ease); will-change: transform; }

/* letreiro mono (movimento.js, ticar): cada caractere que muda sobe para o lugar, como num painel de partidas */
.tk { display: inline-block; animation: tk-sobe .46s var(--ease) calc(var(--k, 0) * 55ms) both; }
@keyframes tk-sobe { from { transform: translateY(.6em); opacity: 0; } }

/* receita: transitions/number-pop-in.md */
@keyframes t-digit-pop-in {
  0% { transform: translate(calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y))); opacity: 0; filter: blur(var(--digit-blur)); }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.t-digit-group.is-animating .t-digit { animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }
.t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
.t-digit-group.is-animating .t-digit[data-stagger="2"] { animation-delay: calc(var(--digit-stagger) * 2); }

/* receita: transitions/spinning-counter.md, com a célula de 1,14 em como no ContadorRolos do sallve apps */
.t-reel { display: inline-flex; align-items: center; height: 1.14em; }
.t-reel-col { position: relative; height: 1.14em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--tinta) 22%, var(--tinta) 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, var(--tinta) 22%, var(--tinta) 78%, transparent 100%); }
.t-reel-strip { display: flex; flex-direction: column; will-change: transform, filter; }
.t-reel-digit { height: 1.14em; display: flex; align-items: center; justify-content: center; }

/* receita: transitions/notification-badge.md, em linha com o nome da aba porque a fileira de abas rola na horizontal e cortaria o selo solto */
@keyframes t-badge-slide-in { from { transform: translate(var(--badge-offset-x), var(--badge-offset-y)); } to { transform: translate(0, 0); } }
.t-badge { display: inline-block; margin-left: 7px; vertical-align: 1px; pointer-events: none; will-change: transform; }
.t-badge[data-open="true"] { animation: t-badge-slide-in var(--badge-slide-dur) var(--badge-slide-ease); }
.t-badge-dot { display: block; min-width: 20px; padding: 2px 6px; border-radius: var(--r-pilula); background: var(--amarelo); color: var(--navy); font-size: var(--t-1); line-height: 16px; text-align: center;
  transform-origin: center; transform: scale(1); opacity: 1; filter: blur(0);
  transition: transform var(--badge-pop-dur) var(--badge-pop-ease), opacity var(--badge-fade-dur) var(--badge-pop-ease), filter var(--badge-pop-dur) var(--badge-pop-ease); will-change: transform, opacity, filter; }
.t-badge[data-open="false"] .t-badge-dot { transform: scale(0); opacity: 0; filter: blur(var(--badge-blur));
  transition: transform var(--badge-pop-close-dur) var(--badge-close-ease), opacity var(--badge-fade-close-dur) var(--badge-close-ease), filter var(--badge-pop-close-dur) var(--badge-close-ease); }

/* receita: transitions/toast.md */
.t-toast { opacity: 0; transform: translateY(var(--toast-distance)) scale(var(--toast-scale)); filter: blur(var(--toast-blur)); will-change: transform, opacity, filter;
  transition: opacity var(--toast-close) var(--toast-ease), transform var(--toast-close) var(--toast-ease), filter var(--toast-close) var(--toast-ease); }
.t-toast.is-open { opacity: 1; transform: translateY(0) scale(1); filter: blur(0);
  transition: opacity var(--toast-open) var(--toast-ease), transform var(--toast-open) var(--toast-ease), filter var(--toast-open) var(--toast-ease); }

/* receita: transitions/success-check.md */
.t-success-check { display: inline-block; transform-origin: center; opacity: 0; will-change: transform, opacity, filter; }
.t-success-check svg { display: block; overflow: visible; width: 100%; height: 100%; }
.t-success-check svg path { stroke-dasharray: 20; stroke-dashoffset: 20; }
.t-success-check[data-state="in"] { animation: t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards, t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards,
  t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards, t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards; }
.t-success-check[data-state="in"] svg path { animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards; }
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

/* receita: transitions/error-state-shake.md */
.t-input { transition: border-color var(--dur-1) var(--ease); }
.t-input.is-error { transition: border-color var(--revert-dur) var(--ease); }
.campo .t-input.is-error, .campo input.is-error, .campo textarea.is-error { border-color: var(--erro); }
.t-input.is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; }
@keyframes t-input-shake {
  0% { transform: translateX(0); animation-timing-function: var(--shake-ease); }
  28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
  57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
  100% { transform: translateX(0); }
}

/* receita: transitions/spinner-check-morph/css.md, dentro do botão: arco branco sobre o azul-marinho, disco verde da Link no fim */
.t-check-blur-wrap { display: inline-flex; filter: blur(0); transition: filter var(--check-revert-dur) var(--check-revert-ease); will-change: filter; }
.t-check-blur-wrap.is-crossing { filter: blur(var(--check-blur)); transition: filter calc(var(--check-fill-dur) * 0.45) var(--check-fill-ease); }
.t-check-badge { position: relative; width: 22px; height: 22px; flex: 0 0 22px; scale: 1; transition: scale var(--check-revert-dur) var(--check-revert-ease); will-change: scale, transform; }
.t-check-badge[data-state="done"] { scale: var(--check-pop-scale); transition: scale var(--check-pop-dur) var(--check-pop-ease);
  animation-name: t-check-pop-up, t-check-pop-down; animation-duration: var(--check-up-dur), var(--check-down-dur); animation-timing-function: var(--check-up-ease), var(--check-down-ease);
  animation-delay: 0ms, var(--check-up-dur); animation-fill-mode: forwards, forwards; }
@keyframes t-check-pop-up { from { transform: translateY(0); } to { transform: translateY(calc(var(--check-hop, 3px) * -1)); } }
@keyframes t-check-pop-down { from { transform: translateY(calc(var(--check-hop, 3px) * -1)); } to { transform: translateY(0); } }
.t-check-ring { position: absolute; inset: 0; border-radius: 50%; border: var(--check-ring-w) solid var(--branco-22); transition: opacity var(--check-revert-dur) var(--ease-in-out); }
.t-check-badge[data-state="done"] .t-check-ring { opacity: 0; transition: opacity calc(var(--check-fill-dur) * 0.7) var(--ease-in-out); }
.t-check-fill { position: absolute; inset: -1px; border-radius: 50%; background: var(--check-green); opacity: 0; transition: opacity var(--check-revert-dur) var(--check-revert-ease); will-change: opacity; }
.t-check-badge[data-state="done"] .t-check-fill { opacity: 1; transition: opacity var(--check-fill-dur) var(--check-fill-ease); }
.t-check-arc { position: absolute; inset: 0; border-radius: 50%; border: var(--check-ring-w) solid transparent; border-top-color: var(--branco);
  animation: t-check-spin var(--check-spin-dur) linear infinite; transition: opacity var(--check-revert-dur) var(--check-revert-ease); will-change: transform; }
@keyframes t-check-spin { to { transform: rotate(360deg); } }
.t-check-badge[data-state="done"] .t-check-arc { opacity: 0; animation-play-state: paused; transition: opacity calc(var(--check-fill-dur) * 0.5) var(--ease-in-out); }
.t-check-disc { position: absolute; inset: 0; display: grid; place-items: center; }
.t-check-disc svg { display: block; width: 100%; height: 100%; }
.t-check-mark { fill: none; stroke: var(--branco); stroke-width: var(--check-mark-w); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--check-mark-len, 20); stroke-dashoffset: var(--check-mark-len, 20); transition: stroke-dashoffset var(--check-revert-dur) var(--check-revert-ease); }
.t-check-badge[data-state="done"] .t-check-mark { stroke-dashoffset: 0; transition: stroke-dashoffset var(--check-draw-dur) var(--check-draw-ease) calc(var(--check-fill-dur) + var(--check-draw-delay) - 200ms); }
.botao.claro .t-check-ring, .botao.contorno .t-check-ring, .botao.amarelo .t-check-ring, .es-salvar .t-check-ring, .wr-salvar .t-check-ring { border-color: color-mix(in srgb, var(--navy) 15%, transparent); }
.botao.claro .t-check-arc, .botao.contorno .t-check-arc, .botao.amarelo .t-check-arc, .es-salvar .t-check-arc, .wr-salvar .t-check-arc { border-top-color: var(--navy); }
.botao:disabled:has(.t-check-badge), .es-salvar:disabled, .wr-salvar:disabled { opacity: 1; }

/* receita: transitions/text-states-swap.md */
.t-text-swap { display: inline-block; transform: translateY(0); filter: blur(0); opacity: 1; will-change: transform, filter, opacity;
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease); }
.t-text-swap.is-exit { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }
.t-text-swap.is-enter-start { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }

/* receita: transitions/accordion.md, no details nativo: a altura vai de 0 ao conteúdo, que entra saindo do desfoque.
   Navegador sem ::details-content abre na hora, como antes. */
details { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: hidden; opacity: 0; filter: blur(2px);
  transition: block-size var(--acc-collapse) var(--acc-ease), opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease), content-visibility var(--acc-collapse) allow-discrete; }
details[open]::details-content { block-size: auto; opacity: 1; filter: blur(0);
  transition: block-size var(--acc-expand) var(--acc-ease), opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease), content-visibility var(--acc-expand) allow-discrete; }

/* receita: transitions/image-gen-placeholder, no retrato do perfil enquanto a foto sobe */
.t-imgen { --imgen-dot: 2px; --imgen-pitch: 7px; --imgen-dot-color: color-mix(in srgb, var(--navy) 45%, transparent); --imgen-cycle: 1400ms; --imgen-scale-min: 0; --imgen-peak: 1;
  --imgen-ease: var(--ease-in-out); --imgen-reveal-dur: 650ms; --imgen-reveal-blur: 3px; --imgen-reveal-ease: var(--ease); isolation: isolate; }
.t-imgen-field { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: color-mix(in srgb, var(--fundo-2) 55%, transparent);
  transition: opacity var(--imgen-reveal-dur) var(--imgen-reveal-ease), filter var(--imgen-reveal-dur) var(--imgen-reveal-ease); }
.t-imgen .t-imgen-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(var(--imgen-reveal-blur)) saturate(.6);
  transition: opacity var(--imgen-reveal-dur) var(--imgen-reveal-ease), filter var(--imgen-reveal-dur) var(--imgen-reveal-ease); }
.t-imgen.is-revealed .t-imgen-field { opacity: 0; filter: blur(var(--imgen-reveal-blur)); }
.t-imgen.is-revealed .t-imgen-img { filter: blur(0) saturate(1); }
.t-imgen-field i { position: absolute; width: var(--imgen-dot); height: var(--imgen-dot); margin: calc(var(--imgen-dot) / -2) 0 0 calc(var(--imgen-dot) / -2); border-radius: 50%; background: var(--imgen-dot-color);
  opacity: calc(var(--imgen-peak) * var(--v, 1)); transform: scale(calc(var(--imgen-scale-min) + (1 - var(--imgen-scale-min)) * var(--v, 1))); }
.t-imgen.is-loading .t-imgen-field i { animation: t-imgen-twinkle calc(var(--imgen-cycle) * var(--k, 1)) var(--imgen-ease) var(--delay, 0ms) infinite; }
@keyframes t-imgen-twinkle { 0%, 100% { opacity: 0; transform: scale(var(--imgen-scale-min)); } 50% { opacity: var(--imgen-peak); transform: scale(1); } }

/* ---------- movimento reduzido: o que é só luz e preenchimento volta em versão de transparência; movimento de verdade
   (escala, giro, deslize) fica fora. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .conquista.bate .carimbo { animation: carimbo-suave .5s ease-out both !important; }
  .tempo li.agora.pulsa .ic::after { animation: tempo-brilho 1.6s ease-out var(--pulso-atraso, .1s) 3 !important; }
  ul.tempo { transition-duration: .6s !important; }
  .conquista { animation-duration: .3s !important; }
  .conquista.saindo, .nav a.recebeu .pino { animation: none !important; }
  .t-imgen.is-loading .t-imgen-field i { animation: none !important; }
  .cq-palavra { animation: none !important; opacity: 1; transform: translateX(-50%); }
  .t-imgen-field, .t-imgen .t-imgen-img { filter: none !important; transition: none !important; }
  .t-tabs-pill, .abas.t-tabs button { transition: none !important; }
  .t-digit-group .t-digit { animation: none !important; }
  .t-reel-strip { transition: none !important; filter: none !important; }
  .t-badge, .t-badge-dot { animation: none !important; transition: none !important; }
  .t-toast { transition: none !important; }
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .t-input { animation: none !important; transform: none !important; }
  .t-check-arc { animation: none !important; }
  .t-check-blur-wrap, .t-check-blur-wrap.is-crossing { filter: none !important; transition: none !important; }
  .t-check-ring, .t-check-arc, .t-check-fill { transition: none !important; }
  .t-check-badge, .t-check-mark { transition: none !important; animation: none !important; }
  .t-check-badge[data-state="done"] .t-check-mark { stroke-dashoffset: 0; }
  .t-text-swap { transition: none !important; }
  details::details-content { transition: none !important; }
  .compartilhar-botao::before, .cb-miniatura i, .cb-miniatura.chegou img, .compartilhar-botao.gerando .cb-acao svg { animation: none; }
  .folha.revelando .quadro-foto img, .folha.revelou .quadro-foto img { filter: none; animation: none; }
  .vf-quadro img { transition: none; }
  .vf-social button { transition: none; }
  .puxar.girando .puxar-anel { animation-duration: 1.6s; }
  .sino-topo b { animation: none; }
  .tk { animation: tk-acende .3s ease-out calc(var(--k, 0) * 40ms) both !important; }
  .identidade, .emb-holo, .compartilhar-botao::before { animation: none !important; }
  .mural .selo.recem .img img { animation: none !important; }
  .mural .selo.recem .img::before { animation: recem-tinta 1.2s ease-out .1s both !important; }
  .wr-quadro canvas.entra { --dir: 0; }
}
@keyframes tk-acende { from { opacity: 0; } }
@keyframes carimbo-suave { from { opacity: 0; transform: rotate(-4deg); } to { opacity: 1; transform: rotate(-4deg); } }
@keyframes tempo-brilho { 0% { opacity: .6; } 100% { opacity: 0; } }
[data-visor]::view-transition-old(tela), [data-visor]::view-transition-new(tela) { animation: none; }
[data-visor]::view-transition-old(root), [data-visor]::view-transition-new(root) { animation-duration: 260ms; }
/* A abertura: View Transition da miniatura até a foto, com as durações e a curva da receita image-open-tilt. */
::view-transition-group(foto-aberta) { animation-duration: 620ms; animation-timing-function: var(--ease); z-index: 90; }
[data-visor=fecha]::view-transition-group(foto-aberta) { animation-duration: 420ms; }
::view-transition-old(foto-aberta), ::view-transition-new(foto-aberta) { animation-duration: inherit; height: 100%; object-fit: cover; overflow: clip; }

/* ---------- utilitários: o que antes era style="" estático nos templates. Margens têm !important porque
   faziam parte de regras mais específicas (.secao > h2 etc.) quando eram inline. */
.mt-2 { margin-top: 2px !important; } .mt-4 { margin-top: 4px !important; } .mt-6 { margin-top: 6px !important; } .mt-8 { margin-top: 8px !important; }
.mt-10 { margin-top: var(--e-3) !important; } .mt-12 { margin-top: 12px !important; } .mt-14 { margin-top: var(--e-4) !important; } .mt-16 { margin-top: 16px !important; }
.mt-18 { margin-top: var(--e-5) !important; } .mt-20 { margin-top: 20px !important; }
.mb-4 { margin-bottom: 4px !important; } .mb-6 { margin-bottom: 6px !important; } .mb-8 { margin-bottom: 8px !important; } .mb-10 { margin-bottom: var(--e-3) !important; }
.mb-12 { margin-bottom: 12px !important; } .mb-14 { margin-bottom: var(--e-4) !important; }
.py-8 { padding-top: 8px; padding-bottom: 8px; } .pb-14 { padding-bottom: var(--e-4); }
.fs-1 { font-size: var(--t-1); } .fs-2 { font-size: var(--t-2); } .fs-3 { font-size: var(--t-3); } .fs-4 { font-size: var(--t-4); }
.lead { font-size: var(--t-4); font-weight: 600; line-height: 1.4; }
.endereco-grande { font-size: var(--t-5); font-weight: 700; line-height: 1.2; }
.assento-grande { font-size: var(--t-numero); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin: 8px 0 6px; color: var(--amarelo); }
.sobre-foto { color: var(--sobre-foto); }
.sobre-navy { color: var(--sobre-navy); }
.cor-navy { color: var(--navy); }
.flex-1 { flex: 1; } .flex-2 { flex: 2; } .quebra { flex-wrap: wrap; } .alinha-topo { align-items: flex-start; }
.bloco { display: block; } .centro { text-align: center; } .balance { text-wrap: balance; }
.lista-limpa { list-style: none; padding: 0; margin: 0; }
.lista-ord { padding-left: var(--e-6); margin: 12px 0 0; }
.lista-ord li { margin: 8px 0; }
.img-foto { display: block; width: 100%; border-radius: var(--r-2); }
.mini-visita { width: 52px; height: 52px; border-radius: var(--r-2); object-fit: cover; }
.ic-inline { width: 18px; height: 18px; vertical-align: -3px; }
.pos-rel { position: relative; }

/* A conversa de hoje, na tela Agora: a foto mais comentada do dia num cartão que abre o visor. */
.conversa-botao { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: var(--e-4); width: 100%; padding: var(--e-2); border: 1px solid var(--linha); border-radius: var(--r-3);
  background: var(--branco); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.conversa-botao:active { background: var(--fundo-2); }
.conversa-botao img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-2); display: block; }
.conversa-botao > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conversa-botao b { color: var(--navy); font-size: var(--t-3); }
.conversa-botao > svg { width: 20px; height: 20px; color: var(--suave); }

/* Embarque pelo app (16/10): cartão do aluno na tela Agora, nota na chamada do staff e o prêmio no ranking. */
/* Bilhete do embarque (19/10): o bilhete da saída na cor da fase, com picote e canhoto. Os dois recortes do picote têm a cor do
   papel da fase, para o bilhete parecer furado e não pintado. Marcado, o canhoto vira validado e a hora fica em amarelo. */
.bilhete { position: relative; background: var(--noite); color: var(--branco); border-radius: var(--r-2); overflow: hidden; box-shadow: var(--sombra-2); }
.bil-topo { padding: var(--e-4) var(--e-5) var(--e-5); }
.bil-linha { display: flex; justify-content: space-between; gap: var(--e-3); font-family: var(--mono); font-size: var(--t-1); letter-spacing: .06em; text-transform: uppercase; color: var(--sobre-noite); }
.bil-rota { margin-top: var(--e-3); font-family: var(--fonte-display); font-stretch: 112%; font-weight: 700; font-size: var(--t-5); line-height: 1.08; overflow-wrap: break-word; }
.bil-rota i { font-style: normal; font-family: var(--mono); font-size: var(--t-3); color: var(--amarelo); vertical-align: .2em; }
.bil-assento { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-4); }
.bil-assento span { font-family: var(--mono); font-size: var(--t-1); letter-spacing: .06em; text-transform: uppercase; color: var(--sobre-noite); }
.bil-assento input { width: 5.5rem; min-height: 44px; padding: 0 var(--e-3); border: 0; border-radius: var(--r-1); background: var(--branco-12); box-shadow: inset 0 0 0 1px var(--branco-22);
  color: var(--branco); font-family: var(--mono); font-size: var(--t-4); letter-spacing: .06em; text-transform: uppercase; }
.bil-assento input::placeholder { color: color-mix(in srgb, var(--branco) 40%, transparent); }
.bil-canhoto { position: relative; display: flex; align-items: center; gap: var(--e-4); padding: var(--e-4) var(--e-5) var(--e-5); border-top: 2px dashed color-mix(in srgb, var(--branco) 30%, transparent); }
.bil-canhoto::before, .bil-canhoto::after { content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--papel-fase); }
.bil-canhoto::before { left: -10px; } .bil-canhoto::after { right: -10px; }
.bil-hora { flex: none; font-family: var(--mono); line-height: 1.1; }
.bil-hora small { display: block; font-size: var(--t-1); letter-spacing: .06em; text-transform: uppercase; color: var(--sobre-noite); }
.bil-hora b { display: block; font-size: var(--t-5); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bil-canhoto .botao { flex: 1; min-height: 56px; font-size: var(--t-3); }
.bil-canhoto .botao:disabled { background: var(--amarelo); color: var(--navy); }
.validado .bil-canhoto { justify-content: space-between; }
.validado .bil-hora b { color: var(--amarelo); }
.bil-estado { font-weight: 700; font-size: var(--t-3); line-height: 1.25; text-align: right; }
.bil-corrigir { margin-top: var(--e-3); }
.bil-corrigir summary { cursor: pointer; font-size: var(--t-2); color: var(--sobre-noite); text-decoration: underline; text-underline-offset: 3px; }
.bil-corrigir-campo { display: flex; align-items: flex-end; gap: var(--e-3); }
.bil-faltam { margin-top: var(--e-6); }
.bil-faltam h3 { font-size: var(--t-3); }
.bil-faltam .botao.claro { background: var(--branco); box-shadow: var(--sombra-1); }
.vi-embarcar li { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--linha); }
.vi-embarcar li > span:not(.avatar) { flex: 1; min-width: 0; font-weight: 600; }
.vi-embarcar .avatar { flex: none; }
.vi-embarcar .botao { flex: none; }
.chamada li span .chamada-nota { display: block; font-weight: 500; font-size: var(--t-1); color: var(--suave); }
.chamada li span .chamada-nota.visto { color: var(--ok); }
.premio { padding: var(--e-2) var(--e-3); background: var(--aviso-fundo); border-radius: 8px; font-weight: 600; }
.premio .dado { margin-right: var(--e-2); }

/* Planos (17/10): o rolê que alguém abre para a turma ganha página própria, com capa, detalhes, quem vai e as fotos de quem foi.
   Sem foto de capa, o plano leva um bilhete navy com o dia e a hora, para a lista não virar uma pilha de fotos iguais. */
.plano-bilhete { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 84px; height: 84px; flex: none; border-radius: var(--r-2);
  background: var(--noite); color: var(--branco); position: relative; overflow: hidden; isolation: isolate; }
.plano-bilhete::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--padrao) repeat-x center / auto 6px; background-color: var(--branco); }
.plano-bilhete small { font-size: var(--t-1); text-transform: lowercase; color: var(--sobre-noite); }
.plano-bilhete b { font-family: var(--fonte-display); font-stretch: var(--largura-display); font-size: var(--t-5); line-height: 1; color: var(--amarelo); }
.plano-bilhete .mono { font-size: var(--t-1); padding-bottom: 6px; }
.plano-bilhete.largo { width: 100%; height: 96px; border-radius: 0; flex-direction: row; gap: var(--e-3); }
.plano-bilhete.largo .mono { padding-bottom: 0; }
/* Na capa sem foto, o bilhete entra no fluxo, acima do título: posição absoluta batia no título de duas linhas. */
.plano-bilhete.grande { align-self: flex-start; width: 104px; height: 104px; margin-bottom: var(--e-4); }
.plano-bilhete.grande b { font-size: var(--t-6); }

.plano-pe { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.plano-rostos { display: inline-flex; }
.avatar.mini { width: 26px; height: 26px; font-size: var(--t-1); font-weight: 700; background: var(--acento-fundo); color: var(--navy); box-shadow: 0 0 0 2px var(--branco); }
.avatar.mini.mais { background: var(--navy); color: var(--branco); }
.plano-rostos .avatar + .avatar { margin-left: -6px; }
.carta-plano .plano-pe { margin-top: auto; }

.plano-capa { min-height: 280px; }
.plano-capa h1 { overflow-wrap: anywhere; }
.plano-capa.sem-foto { min-height: 220px; background: var(--noite); }
.plano-capa.sem-foto::after { background: none; }
.plano-capa .emb-status { margin-bottom: var(--e-3); }
.plano-autor { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-4); }
.plano-autor a { color: var(--acento); font-weight: 600; }
.plano-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin: var(--e-4) 0 0; padding: var(--e-4); background: var(--branco); border-radius: var(--r-3); box-shadow: var(--sombra-2); }
.plano-campos dt { font-size: var(--t-1); color: var(--suave); }
.plano-campos .largo { grid-column: 1 / -1; }
.plano-campos dd { margin: 2px 0 0; font-weight: 700; color: var(--navy); font-size: var(--t-2); overflow-wrap: anywhere; }
.plano-texto { margin-top: var(--e-5); white-space: pre-line; font-size: var(--t-3); line-height: 1.55; overflow-wrap: anywhere; }
.plano-voce { font-weight: 700; color: var(--navy); margin-bottom: var(--e-3); }

.form-plano .campo textarea { min-height: 132px; }
.plano-escolher-capa { display: flex; align-items: center; gap: var(--e-4); width: 100%; min-height: 96px; margin-top: var(--e-4); padding: var(--e-4); border: 1.5px dashed var(--borda-campo); border-radius: var(--r-3);
  background: var(--branco); color: var(--navy); font-weight: 700; text-align: left; cursor: pointer; }
.plano-escolher-capa svg { width: 28px; height: 28px; flex: none; }
.plano-escolher-capa small { display: block; font-weight: 400; color: var(--suave); font-size: var(--t-2); margin-top: 2px; }
.plano-escolher-capa.com-foto { padding: 0; border: 0; overflow: hidden; }
.plano-escolher-capa.com-foto img { width: 100%; height: 200px; object-fit: cover; display: block; }

/* Bilhete de rolê (aba Rolês, 17/10): o cartão de embarque da tela Agora em tamanho de lista. O papel leva o recorte das
   duas meias-luas do picote por máscara; a sombra fica no link de fora, com drop-shadow, para seguir o recorte.
   Movimento: na chegada à aba (main.chegou), cada bilhete sai impresso de cima para baixo, como o cabeçote de impressora,
   com 70 ms entre um e outro; o redesenho da mesma tela não repete. Com "Reduzir movimento", só a transparência. */
.bilhetes { display: flex; flex-direction: column; gap: var(--e-3); }
.bilhete-role { --canhoto: 112px; --raio-picote: 9px; display: block; text-decoration: none; color: var(--tinta);
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--tinta) 6%, transparent)) drop-shadow(0 10px 16px color-mix(in srgb, var(--tinta) 14%, transparent));
  transition: transform var(--dur-2) var(--ease); -webkit-tap-highlight-color: transparent; }
.bilhete-role:active { transform: scale(.985); }
.bilhete-role:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 4px; border-radius: var(--r-3); }
.br-papel { display: grid; grid-template-columns: var(--canhoto) 1fr; min-height: 112px; border-radius: var(--r-3); overflow: hidden; background: var(--branco);
  -webkit-mask: radial-gradient(circle var(--raio-picote) at var(--canhoto) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--raio-picote) at var(--canhoto) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--raio-picote) at var(--canhoto) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--raio-picote) at var(--canhoto) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.br-canhoto { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--e-4) var(--e-3) var(--e-4) var(--e-4);
  background: var(--noite); color: var(--branco); border-right: 2px dashed color-mix(in srgb, var(--branco) 38%, transparent); }
.br-dia { font-size: var(--t-1); color: var(--sobre-noite); }
/* a hora cabe numa linha: cinco algarismos mono de 0,6 em no canhoto menos o padding */
.br-hora { font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; white-space: nowrap; color: var(--branco); }
.br-falta { margin-top: var(--e-2); font-size: var(--t-1); line-height: 1.35; color: var(--sobre-noite); }
.br-falta .contagem { display: block; font-family: var(--mono); color: var(--branco); white-space: nowrap; }
.br-falta.ao-vivo::before { content: ''; display: inline-block; margin-right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--erro); box-shadow: 0 0 0 2px var(--branco); animation: br-vivo 1.6s var(--ease-in-out) infinite; }
.br-voce { margin-top: var(--e-2); font-size: var(--t-1); font-weight: 700; color: var(--amarelo); }
.br-furo { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--amarelo); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--navy-0) 45%, transparent); }
.br-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--e-4) var(--e-4) var(--e-4) var(--e-5); }
.br-titulo { font-family: var(--fonte-display); font-stretch: var(--largura-display); font-size: var(--t-4); font-weight: 760; line-height: 1.1; letter-spacing: -.015em; color: var(--navy); overflow-wrap: anywhere; text-wrap: balance; }
.br-campo { display: flex; align-items: baseline; gap: var(--e-2); min-width: 0; }
.br-campo small { font-family: var(--mono); font-size: var(--t-1); color: var(--suave); }
.br-campo span { font-size: var(--t-2); font-weight: 600; color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }
.br-pe { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); margin-top: auto; padding-top: var(--e-1); }
.br-pe .mono { font-size: var(--t-2); color: var(--suave); }
.br-cheio { font-size: var(--t-1); font-weight: 700; color: var(--suave); padding: 2px 8px; border-radius: var(--r-pilula); background: var(--fundo-2); }
/* o próximo rolê: canhoto mais largo, hora maior e a capa no alto do corpo */
.bilhete-role.proximo { --canhoto: 136px; }
.bilhete-role.proximo .br-papel { min-height: 148px; }
.bilhete-role.proximo .br-hora { font-size: 2rem; }
.bilhete-role.proximo .br-titulo { font-size: var(--t-5); }
.br-capa { width: calc(100% + var(--e-4) + var(--e-5)); height: 112px; margin: calc(var(--e-4) * -1) calc(var(--e-4) * -1) var(--e-2) calc(var(--e-5) * -1); object-fit: cover; display: block; }
/* sem plano: o bilhete fantasma leva ao formulário */
/* Plano acontecendo (18/10): o bilhete de rolê com o canhoto aceso, "agora" e até que horas, e no corpo a linha do tempo
   do plano, do início ao fim, cheia até agora na cor da cidade. O ponto vivo é o mesmo vermelho do chip ao vivo. */
.ponto-vivo { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--erro); animation: br-vivo 1.6s var(--ease-in-out) infinite; }
.br-agora { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-bottom: var(--e-2); padding: 3px 10px 3px 8px; border-radius: var(--r-pilula);
  background: var(--branco); color: var(--navy); font-size: var(--t-1); font-weight: 700; }
.bilhete-role.agora .br-falta { margin-top: var(--e-1); }
.br-linha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-2); margin-top: var(--e-1); }
.br-linha .mono { font-size: var(--t-1); color: var(--suave); }
.br-linha i { position: relative; height: 4px; border-radius: 2px; background: var(--fundo-3); }
.br-linha i::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--feito); border-radius: inherit; background: var(--acento); }
.br-linha i::after { content: ''; position: absolute; top: 50%; left: var(--feito); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 0 2px var(--branco); }

/* Planos que rolaram, como o painel de partidas: uma folha só, uma linha por plano, separadas pelo picote. A hora em mono
   fica numa coluna fixa, o que e quem foi no meio, a capa à direita. Ouro só no que é seu. */
.painel-rolou { list-style: none; margin: 0; padding: 0 var(--e-4); background: var(--branco); border-radius: var(--r-3); box-shadow: var(--sombra-2); }
.painel-rolou li + li { border-top: 1.5px dashed var(--linha-forte); }
.linha-rolou { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: var(--e-3); min-height: 76px; padding: var(--e-3) 0;
  color: var(--tinta); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: opacity var(--dur-1) var(--ease); }
.linha-rolou:active { opacity: .6; }
.linha-rolou:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 2px; border-radius: var(--r-1); }
.rl-quando { display: flex; flex-direction: column; gap: 2px; align-self: start; padding-top: 2px; }
.rl-quando b { font-size: var(--t-4); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--navy); }
.rl-quando small { font-size: var(--t-1); color: var(--suave); white-space: nowrap; }
.rl-corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.rl-corpo > b { font-size: var(--t-3); font-weight: 700; line-height: 1.25; color: var(--navy); overflow-wrap: anywhere; }
.rl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); }
.rl-voce { font-size: var(--t-1); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pilula); background: var(--amarelo); color: var(--navy); }
.rl-capa { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: var(--r-2); display: block; background: var(--fundo-2); }

/* Plano acontecendo no alto da tela Agora: o aviso do staff com o ponto vivo e a hora de fim na linha de cima. */
.rolando-agora .de { display: flex; align-items: center; gap: 6px; color: var(--acento); font-weight: 700; }
.rolando-agora img { object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .ponto-vivo { animation: none; } }

.bilhete-role.vazio { filter: none; }
.bilhete-role.vazio .br-papel { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linha-forte); }
.bilhete-role.vazio .br-canhoto { background: var(--fundo-2); color: var(--suave); border-right-color: var(--linha-forte); }
.bilhete-role.vazio .br-dia, .bilhete-role.vazio .br-hora { color: var(--suave); }
.bilhete-role.vazio .br-titulo { font-size: var(--t-3); color: var(--tinta); }

.chegou .bilhete-role .br-papel { animation: br-imprime .52s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
.chegou .bilhete-role .br-hora { animation: br-hora .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 260ms); }
@keyframes br-imprime { from { clip-path: inset(0 0 100% 0); transform: translateY(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes br-hora { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes br-vivo { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .chegou .bilhete-role .br-papel { animation: br-aparece .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .chegou .bilhete-role .br-hora { animation: none; }
  .br-falta.ao-vivo::before { animation: none; }
}
@keyframes br-aparece { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------ 19/10: revisão dos primeiros dias de uso */
/* Check-in com a distância ao vivo (perto.js): a linha fica acima do botão, e o botão só libera dentro do raio. */
p.perto { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3); margin-top: var(--e-3); font-size: var(--t-2); color: var(--suave); }
p.perto .perto-texto { flex: 1 1 14rem; }
p.perto .perto-mapa { font-weight: 600; color: var(--acento); white-space: nowrap; }
p.perto.dentro .perto-texto { color: var(--ok); font-weight: 600; }
p.perto .perto-seta { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.35em; vertical-align: -0.1em; transform: rotate(var(--rumo, 0deg));
  background: currentColor; clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%); }
.botao.longe { background: var(--fundo-3); color: var(--suave); }
/* Mapa do raio (20/10): o círculo do check-in e o aluno nele, no ponto mais perto da tela. */
p.perto .perto-vivo { display: block; position: relative; flex: 1 1 100%; overflow: hidden; border-radius: var(--raio-2, 12px); background: var(--fundo-3); border: 1px solid var(--linha, #D9E0EA); }
p.perto .perto-vivo[hidden] { display: none; }
.perto-vivo .vivo-fundo { display: block; position: relative; overflow: hidden; }
.perto-vivo .vivo-fundo img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; pointer-events: none; filter: saturate(0.35) brightness(1.04); }
.perto-vivo .vivo-marcas { position: absolute; left: 0; top: 0; }
.perto-vivo .raio { fill: color-mix(in srgb, var(--navy) 14%, transparent); stroke: var(--navy); stroke-width: 2; stroke-dasharray: 6 4; }
.perto-vivo.dentro .raio { fill: color-mix(in srgb, var(--ok) 18%, transparent); stroke: var(--ok); stroke-dasharray: none; }
.perto-vivo .alvo { fill: var(--navy); }
.perto-vivo.dentro .alvo { fill: var(--ok); }
.perto-vivo .rumo { stroke: var(--navy); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0.7; }
.perto-vivo .precisao { fill: color-mix(in srgb, #2F80ED 14%, transparent); stroke: none; }
.perto-vivo .eu { fill: #2F80ED; stroke: #fff; stroke-width: 3; }
.perto-vivo .vivo-legenda { display: block; padding: 6px 10px; background: #fff; border-top: 1px solid var(--linha); color: var(--navy); font-size: var(--t-1); font-weight: 600; }
.perto-vivo.dentro .vivo-legenda { color: var(--ok); }
.perto-vivo .vivo-credito { position: absolute; right: 4px; bottom: 2px; font-size: 9px; color: var(--suave); background: rgba(255,255,255,0.8); padding: 0 4px; border-radius: 4px; }

/* Chamada: quem falta, com rosto, no alto da lista. */
/* Quem falta em duas colunas fixas (20/10): no fluxo livre a pessoa caía com o rosto numa linha e o nome na outra, e as
   colunas não alinhavam. Cada nome fica numa linha só, e o nome comprido termina em reticências. */
.faltam-chamada .faltam-nomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2) var(--e-3); font-size: var(--t-2); }
.faltam-chamada .faltam-nomes .com-rosto { display: flex; min-width: 0; gap: var(--e-2); }
.faltam-chamada .faltam-nomes .rosto { flex: none; }
.faltam-chamada .faltam-nomes .nome { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tela Agora: a Largada para quem está começando e a primeira atividade de amanhã. */
section.largada { border-left: 4px solid var(--amarelo); }
section.amanha .amanha-hora { display: flex; align-items: baseline; gap: var(--e-3); font-size: var(--t-3); }
section.amanha .amanha-hora b { font-size: var(--t-5, 1.6rem); color: var(--acento); }
.linha-botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* Escolha de postar com ou sem o logo da Link, nos cartões que têm o logo. */
.wr-link { display: flex; align-items: center; justify-content: center; gap: var(--e-2); width: 100%; min-height: 44px; margin-top: var(--e-2); border: 0; border-radius: var(--r-2); background: transparent; color: var(--navy); font: inherit; font-size: var(--t-2); font-weight: 600; }
.wr-link::before { content: ''; width: 36px; height: 22px; border-radius: var(--r-pilula); background: var(--controle-off); box-shadow: inset -14px 0 0 3px var(--controle-off), inset 0 0 0 3px var(--controle-off); background-color: var(--branco); transition: box-shadow var(--dur-1) var(--ease); }
.wr-link[aria-pressed="true"]::before { box-shadow: inset 14px 0 0 3px var(--navy), inset 0 0 0 3px var(--navy); }
.wr-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.wr-pe [hidden] { display: none !important; }

/* ---------- celebração do staff (20/10): medalha de ouro carimbada sobre o azul Link, raios girando atrás, título com a
   receita pro-gradient-text da transitions.dev e a receita confetti-burst (celebrar.js) pousando no botão Valeu. */
dialog.celebra { position: fixed; width: min(calc(100vw - 32px), 400px); padding: 0; border: 0; border-radius: var(--r-3); background: var(--branco); color: var(--tinta);
  box-shadow: var(--sombra-3); overflow: hidden; animation: cel-entra 520ms var(--ease) both; }
dialog.celebra::backdrop { background: color-mix(in srgb, var(--navy-0) 62%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: np-fundo var(--dur-2) ease-out; }
.cel-topo { position: relative; display: grid; place-items: center; height: 168px; overflow: hidden;
  background: radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--amarelo) 38%, transparent), transparent 62%), var(--navy); }
.cel-raios { position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--amarelo) 26%, transparent) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  animation: cel-gira 16s linear infinite, aparece 700ms ease-out 300ms both; }
.cel-medalha { position: relative; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; color: var(--navy);
  background: radial-gradient(circle at 35% 30%, #FFE08A, var(--amarelo) 45%, var(--amarelo-2));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--amarelo) 28%, transparent), inset 0 -4px 0 rgba(0, 0, 0, .12), 0 14px 30px -12px rgba(0, 0, 0, .55);
  animation: cel-medalha 900ms cubic-bezier(.2, .9, .25, 1.2) 160ms both; }
.cel-medalha svg { width: 54px; height: 54px; }
.cel-medalha::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--amarelo); opacity: 0; animation: cel-onda 1.6s ease-out 900ms 2; }
.cel-corpo { padding: var(--e-5); text-align: center; }
.cel-kicker { margin: 0; font-family: var(--mono); font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-2); animation: cel-sobe 500ms var(--ease) 420ms both; }
dialog.celebra h2 { margin: var(--e-2) 0 0; font-family: var(--fonte-display); font-stretch: var(--largura-display); font-size: 2.5rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  animation: cel-sobe 600ms var(--ease) 500ms both; }
dialog.celebra .cel-texto { margin: var(--e-3) 0 var(--e-5); font-size: var(--t-3); line-height: 1.45; color: var(--tinta); animation: cel-sobe 600ms var(--ease) 600ms both; }
dialog.celebra .botao { width: 100%; animation: cel-sobe 600ms var(--ease) 700ms both; }
@keyframes cel-entra { from { opacity: 0; transform: translateY(28px) scale(.94); } }
@keyframes cel-medalha { 0% { opacity: 0; transform: scale(2.3) rotate(-28deg); } 55% { opacity: 1; transform: scale(.9) rotate(6deg); } 80% { transform: scale(1.04) rotate(-2deg); } 100% { transform: none; } }
@keyframes cel-onda { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes cel-gira { to { transform: rotate(360deg); } }
@keyframes cel-sobe { from { opacity: 0; transform: translateY(12px); } }
/* receita: pro-gradient-text (transitions.dev), copiada sem mudar as camadas. */
:root { --gradient-text-hue-dur: 4000ms; --gradient-text-drift-dur: 5000ms; }
.t-gradient-text {
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 67 42' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.88'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0.34726 -1.3118e-7 8.6482e-7 0.89585 33.5 21)'><stop stop-color='rgba(0,110,245,1)' offset='0'/><stop stop-color='rgba(0,110,245,0)' offset='1'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 67 42' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.5'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-1.3 0.25 -1.2633 -2.7471 33.5 21)'><stop stop-color='rgba(0,110,245,1)' offset='0'/><stop stop-color='rgba(0,110,245,0)' offset='1'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 67 42' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.4'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.05 -0.8 0.46018 3.6184 33.5 21)'><stop stop-color='rgba(204,0,167,1)' offset='0'/><stop stop-color='rgba(170,0,204,0)' offset='0.71709'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 67 42' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-0.51067 -3.3275e-16 -4.3352e-14 -1.1396 33.5 21)'><stop stop-color='rgba(204,0,167,1)' offset='0'/><stop stop-color='rgba(170,0,204,0)' offset='1'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 67 42' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-0.45 -0.75 1.9052 -0.7091 33.5 21)'><stop stop-color='rgba(255,173,85,1)' offset='0'/><stop stop-color='rgba(255,173,85,0)' offset='1'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 67 42' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.25 -0.35 -0.4013 3.5959 33.5 21)'><stop stop-color='rgba(0,204,68,1)' offset='0'/><stop stop-color='rgba(0,196,102,0.75)' offset='0.25'/><stop stop-color='rgba(0,187,136,0.5)' offset='0.5'/><stop stop-color='rgba(0,170,204,0)' offset='1'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 67 42' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-0.87391 0.73043 -4.1482 -1.9503 33.5 21)'><stop stop-color='rgba(0,170,204,1)' offset='0'/><stop stop-color='rgba(0,170,204,0)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(rgb(108, 108, 108) 0%, rgb(216, 216, 216) 100%);
  /* Each colour layer is blown up to 180% and swings around the
     glyph box (the grey base ramp stays put at 100%), so the
     enlarged blobs sweep corner-to-corner through the letters.
     The repaint area is one ~55×47px word — negligible. */
  background-size: 180% 180%, 180% 180%, 180% 180%, 180% 180%,
                   180% 180%, 180% 180%, 180% 180%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    t-gradient-hue var(--gradient-text-hue-dur) linear infinite,
    t-gradient-drift var(--gradient-text-drift-dur) ease-in-out infinite;
}
/* Full hue cycle — ends where it starts, so the loop is seamless
   and the colour travel is unmistakable. Compositor-only. The
   saturate boost keeps the washes punchy at 180% blow-up. */
@keyframes t-gradient-hue {
  from { filter: hue-rotate(0deg) saturate(1.3); }
  to   { filter: hue-rotate(-360deg) saturate(1.3); }
}
/* Blob travel — perimeter orbit. Each blob is re-centred inside
   its own SVG tile (translation 33.5 21 above) and pinned to the
   ring of edge stops TL,T,TR,R,BR,B,BL,L. Every blob starts on
   the stop nearest its Figma quadrant and advances two ring
   stops per keyframe — a full lap around the text outline per
   cycle, so colour hugs and travels the edges while the middle
   keeps the grey ramp. Last layer (grey ramp) never moves. */
@keyframes t-gradient-drift {
  0%, 100% {
    background-position:
      100% 0%, 0% 50%, 100% 50%, 0% 100%,
      0% 0%, 50% 0%, 50% 100%, 0 0;
  }
  25% {
    background-position:
      100% 100%, 50% 0%, 50% 100%, 0% 0%,
      100% 0%, 100% 50%, 0% 50%, 0 0;
  }
  50% {
    background-position:
      0% 100%, 100% 50%, 0% 50%, 100% 0%,
      100% 100%, 50% 100%, 50% 0%, 0 0;
  }
  75% {
    background-position:
      0% 0%, 50% 100%, 50% 0%, 100% 100%,
      0% 100%, 0% 50%, 100% 50%, 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-gradient-text { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.celebra, .cel-raios, .cel-medalha, .cel-medalha::after, .cel-kicker, dialog.celebra h2, dialog.celebra .cel-texto, dialog.celebra .botao { animation: none; }
}