/* ─── PLATAFORMA · a história da Júlia ───
   Carregado DEPOIS do site.css. Tudo escopado em #plataforma; keyframes com prefixo "plat-".
   Estados iniciais das telas só existem sob .is-anima (classe posta pelo js/sec-plataforma.js):
   sem JS, com erro ou com movimento reduzido, a seção aparece inteira no estado final.
   Modos: estático (sem classe) · vivo (.is-anima.is-viva, ≥981×640) · cartões (.is-anima.is-cartoes).
   Cores (tokens do site.css): rosa = a jornada da Júlia e os destaques; roxo = fundos, avatares e barras;
   verde (--ok) SÓ no "ok" (ramo Confirmou, IA "confirmou"); âmbar (--atencao) = atendimento e segmentos em risco;
   laranja (--alerta) = "Não fez o pedido". Canal = pílula neutra com o ponto .canal (o do iFood tem contorno). */

/* ── seção ──
   overflow: NUNCA hidden (mata o sticky). "visible" antes de "clip" = Safari < 16 cai em visible,
   e não no overflow:hidden antigo do site.css. */
#plataforma.vitrine { padding: 110px 0 96px; position: relative; overflow: visible; overflow: clip; }
#plataforma.vitrine::after { content: none; } /* defensivo: o brilho antigo (.vitrine::after do site.css) sai */
#plataforma .vitrine__pontos { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(#dcd2f214 1px, transparent 1.4px) 0 0/26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 38% at 50% 10%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 70% 38% at 50% 10%, #000 30%, transparent 78%); }
#plataforma .wrap { position: relative; z-index: 1; }
#plataforma .cab-centro { margin-bottom: 44px; }
@media (max-width: 760px) { #plataforma.vitrine { padding: 76px 0; } }

#plataforma .historia { --topo: 0px; --app-h: min(560px, calc(100vh - 124px)); --cap-h: max(480px, 66vh); position: relative; }
@supports (height: 100svh) { #plataforma .historia { --app-h: min(560px, calc(100svh - 124px)); --cap-h: max(480px, 66svh); } }
@media (max-width: 520px) { #plataforma .historia { --topo: 0px; } }
#plataforma .historia svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#plataforma .historia__palco, #plataforma .guia { display: none; }

/* ── cards (estático e cartões) ── */
#plataforma .historia__caps { display: grid; gap: 24px; }
#plataforma .cap { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 48px; align-items: center; padding: 36px; border-radius: 28px; background: linear-gradient(180deg,#1a1130e6,#130c20e6); border: 1px solid #ffffff12; box-shadow: inset 0 1px 0 #ffffff0d, 0 50px 90px -40px #000000e6; }
#plataforma .cap__quando { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; border: 1px solid #ffffff1f; font: 700 12px/1 var(--texto); font-variant-numeric: tabular-nums; color: var(--muted); transition: color .4s, border-color .4s, background .4s, box-shadow .4s; }
#plataforma .cap__quando svg { width: 14px; height: 14px; }
#plataforma .is-anima .cap.is-ativo .cap__quando { color: var(--rosa-3); border-color: #f25e7a55; background: #f25e7a12; box-shadow: 0 0 24px #f25e7a22; }
#plataforma .cap__modulo { margin: 18px 0 10px; font: 700 11.5px/1 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: var(--roxo-3); }
#plataforma .cap h3 { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -.045em; }
#plataforma .cap__txt > p:not([class]) { margin-top: 14px; color: var(--muted); font-size: 15.5px; line-height: 1.75; }
#plataforma .cap .lista-ok { margin-top: 20px; }
#plataforma .cap__prova { margin-top: 22px; padding-top: 16px; border-top: 1px dashed #ffffff1a; font-size: 13px; color: var(--muted-2); }
#plataforma .cap__prova b { margin-right: 6px; font: 800 17px/1 var(--texto); background: linear-gradient(180deg,#fff,var(--roxo-4)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* isolation: o z-index do token/avatar fica contido aqui (a guia presa passa por cima dele) */
#plataforma .cap__tela { position: relative; isolation: isolate; border-radius: 18px; overflow: hidden; background: #100b19; border: 1px solid #dcd2f22e; box-shadow: 0 30px 70px -30px #000; }
#plataforma .cap__barra { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: var(--panel); border-bottom: 1px solid #ffffff10; }
#plataforma .cap__barra i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff1c; flex: none; }
#plataforma .cap__barra > span { margin-left: 8px; min-width: 0; font: 700 12px/1 var(--texto); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plataforma .cap__barra em, #plataforma .app__ilu { margin-left: auto; flex: none; font: 700 9.5px/1 var(--texto); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #736983; }
#plataforma .tela-cap { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 400px; padding: 18px 20px; font: 600 12.5px/1.35 var(--texto); color: #e0d8e8; }

/* ── modo vivo (desktop) ── */
@media (min-width: 981px) {
  #plataforma .historia.is-viva { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); column-gap: 64px; }
  #plataforma .is-viva .historia__palco { display: block; grid-column: 2; grid-row: 1; }
  #plataforma .is-viva .historia__caps { grid-column: 1; grid-row: 1; gap: 0; }
  #plataforma .is-viva .cap { display: flex; align-items: center; min-height: var(--cap-h); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  #plataforma .is-viva .cap__tela { display: none; }
  #plataforma .is-viva .cap__txt { max-width: 440px; opacity: .28; transition: opacity .5s ease; }
  #plataforma .is-viva .cap.is-ativo .cap__txt { opacity: 1; }
}
@media (min-width: 1180px) { #plataforma .historia.is-viva { column-gap: 72px; } }

#plataforma .app-wrap { position: sticky; top: calc(var(--topo) + (100vh - var(--topo) - var(--app-h)) / 2); isolation: isolate; }
@supports (height: 100svh) { #plataforma .app-wrap { top: calc(var(--topo) + (100svh - var(--topo) - var(--app-h)) / 2); } }
#plataforma .app__halo { position: absolute; inset: 8% -6%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, #5b409290, transparent); filter: blur(30px); animation: plat-respira 7s ease-in-out infinite; }
@keyframes plat-respira { 50% { opacity: .6; transform: scale(.96); } }
#plataforma .app { height: var(--app-h); display: grid; grid-template-columns: 60px minmax(0,1fr); grid-template-rows: 44px 2px minmax(0,1fr); border-radius: 22px; overflow: hidden; background: #100b19; border: 1px solid #dcd2f22e; box-shadow: 0 0 0 1px #c9b0f514, 0 50px 90px -40px #000000e6, 0 30px 130px -50px #5b4092a6; }
#plataforma .app__barra { grid-column: 1/-1; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--panel); border-bottom: 1px solid #ffffff10; }
#plataforma .app__barra > i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff1c; }
#plataforma .app__loja { margin-left: 8px; font: 700 12px/1 var(--texto); color: var(--muted); }
#plataforma .relogio { margin-left: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; background: #f25e7a14; border: 1px solid #f25e7a40; font: 700 11.5px/1 var(--texto); font-variant-numeric: tabular-nums; color: var(--rosa-3); overflow: hidden; }
#plataforma .relogio .ponto { width: 6px; height: 6px; }
#plataforma .historia [data-app] { display: inline-block; }
#plataforma .app__progresso { grid-column: 1/-1; display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; }
#plataforma .app__progresso i { position: relative; height: 2px; background: #ffffff12; overflow: hidden; }
#plataforma .app__progresso i::after { content: ""; position: absolute; inset: 0; transform: scaleX(var(--f,0)); transform-origin: left; background: linear-gradient(90deg, var(--roxo-2), var(--rosa-2)); }
#plataforma .app__lateral { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; background: #140d21; border-right: 1px solid #ffffff0d; }
#plataforma .app__logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg,var(--rosa-2),var(--roxo)); font: 800 10px/1 var(--texto); color: #fff; }
#plataforma .app__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--muted-2); transition: color .4s, background .4s; }
#plataforma .app__ico svg { width: 18px; height: 18px; }
#plataforma .app__ico.is-ativo { color: #fff; background: #7b5db833; }
#plataforma .app__marca { position: absolute; left: 0; top: 56px; width: 3px; height: 36px; border-radius: 0 3px 3px 0; background: var(--rosa-2); box-shadow: 0 0 12px var(--rosa-2); transform: translateY(calc(var(--mod,0) * 48px)); transition: transform .6s var(--ease); }
#plataforma .app__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#plataforma .app__cab { flex: none; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid #ffffff0d; }
#plataforma .app__cab b { font: 800 15px/1 var(--texto); color: #fff; }
#plataforma .app__cab > span:not(.app__busca) { font-size: 12px; color: var(--muted-2); }
#plataforma .app__busca { margin-left: auto; position: relative; padding: 7px 12px 7px 30px; border-radius: 9px; background: var(--panel); border: 1px solid #ffffff10; font-size: 11.5px; color: var(--muted-2); }
#plataforma .app__busca::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border: 1.6px solid currentColor; border-radius: 50%; }
#plataforma .app__busca::after { content: ""; position: absolute; left: 19px; top: 50%; width: 5px; height: 1.6px; margin-top: 3px; background: currentColor; transform: rotate(45deg); }
#plataforma .app__corpo { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#plataforma .app__corpo .tela-cap { position: absolute; inset: 0; min-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.985); transition: opacity .35s ease, transform .5s var(--ease), visibility 0s linear .5s; }
#plataforma .app__corpo .tela-cap.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .12s, transform .5s var(--ease) .12s, visibility 0s; }
#plataforma .app__nota { position: absolute; top: 100%; left: 0; right: 0; margin-top: 12px; text-align: center; font: 600 10.5px/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: #736983; }
#plataforma .sem-trans *:not(.fer) { transition: none !important; }

/* aperto: notebook baixo */
@media (min-width: 981px) and (max-height: 760px) {
  #plataforma .historia.is-viva .app__cab { height: 44px; }
  #plataforma .historia.is-viva .app__corpo .tela-cap { padding: 14px 18px; gap: 10px; }
  #plataforma .historia.is-viva .no[data-no] > span:not(.bolha) { display: none; }
  #plataforma .historia.is-viva .seta { height: 12px; }
  #plataforma .historia.is-viva .calor i { height: 8px; }
  #plataforma .historia.is-viva .calor { gap: 3px 4px; }
  #plataforma .historia.is-viva .funil__trilho { height: 24px; }
  #plataforma .historia.is-viva .rfv__c > span { font-size: 15px; }
  #plataforma .historia.is-viva .tela-reg { --mapa-w: 200px; }
  #plataforma .historia.is-viva .rank, #plataforma .historia.is-viva .rank-box { gap: 8px; }
  #plataforma .app__corpo .publico { right: 18px; bottom: 14px; gap: 5px; padding: 10px 12px; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  #plataforma .historia.is-viva .kb { grid-template-columns: 1fr 1fr; } #plataforma .historia.is-viva .kb__col--3 { display: none; }
  /* janela estreita: mapa menor para o ranking e o cartão do público caberem na coluna da direita */
  #plataforma .historia.is-viva .tela-reg { --mapa-w: 186px; }
  #plataforma .historia.is-viva .rank li { grid-template-columns: 84px minmax(0,1fr) 28px; font-size: 11px; }
  #plataforma .historia.is-viva .mapa__loja small { display: none; }
}

/* ── token e avatar estático ──
   .fer = o token que anda entre as âncoras [data-fer=k]; .fs = o avatar parado no estado final. Os nomes vêm do SV
   (são só mecânica, não aparecem na tela): o token mostra "JP", da Júlia Prado. */
#plataforma .fer { position: absolute; left: 0; top: 0; z-index: 5; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,var(--roxo-2),var(--roxo)); box-shadow: 0 0 0 3px #100b19, 0 0 0 5px var(--rosa-2), 0 0 26px #f25e7a66; opacity: 0; scale: .4; pointer-events: none; will-change: translate; transition: translate var(--fer-dur,.8s) cubic-bezier(.65,0,.25,1), opacity .35s ease, scale .6s var(--ease); }
#plataforma .fer b { font: 800 11px/1 var(--texto); color: #fff; }
#plataforma .fer.is-on { opacity: 1; scale: 1; }
#plataforma .fer.is-on.is-mini { scale: .34; }
#plataforma .fer::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--rosa-2); opacity: 0; }
#plataforma .fer.is-on::after { animation: plat-pulso 2.4s ease-out infinite; }
@keyframes plat-pulso { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
#plataforma .fer__nome { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 10px; border-radius: 99px; background: #100b19e6; border: 1px solid #f25e7a55; font: 700 11px/1 var(--texto); color: var(--rosa-3); opacity: 0; transition: opacity .3s; }
#plataforma .fer.tem-rotulo .fer__nome { opacity: 1; }
#plataforma .ancora { position: absolute; width: 0; height: 0; }
#plataforma .fs { position: absolute; left: 50%; top: 50%; z-index: 2; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,var(--roxo-2),var(--roxo)); box-shadow: 0 0 0 3px #100b19, 0 0 0 5px var(--rosa-2), 0 0 22px #f25e7a55; font: 800 10.5px/1 var(--texto); letter-spacing: 0; color: #fff; }
#plataforma .is-anima .tela-cap:not(.is-final) .fs, #plataforma .is-anima .tela-cap.com-fer .fs { visibility: hidden; }

/* pausa fora da tela */
#plataforma .historia.is-viva:not(.is-visivel) .app-wrap *, #plataforma .historia.is-viva:not(.is-visivel) .app-wrap *::before, #plataforma .historia.is-viva:not(.is-visivel) .app-wrap *::after,
#plataforma .is-cartoes .cap__tela:not(.is-vendo) *, #plataforma .is-cartoes .cap__tela:not(.is-vendo) *::before, #plataforma .is-cartoes .cap__tela:not(.is-vendo) *::after { animation-play-state: paused !important; }

/* ── guia (cartões, ≤980px) ── */
@media (max-width: 980px) {
  #plataforma .historia.is-cartoes .guia { display: flex; position: sticky; top: calc(var(--topo) + 10px); z-index: 4; width: fit-content; max-width: 100%; margin: 0 auto 16px; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: #181024f0; border: 1px solid #dcd2f22e; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 40px -20px #000; font: 700 12px/1 var(--texto); color: #fff; }
}
#plataforma .guia__av { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,var(--roxo-2),var(--roxo)); box-shadow: 0 0 0 2px var(--rosa-2); font: 800 9px/1 var(--texto); }
#plataforma .guia__t { color: var(--rosa-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
#plataforma .guia__mod { color: var(--muted); font-weight: 600; white-space: nowrap; }
#plataforma .guia__prog { display: flex; gap: 3px; }
#plataforma .guia__prog i { width: 12px; height: 3px; border-radius: 2px; background: #ffffff1f; transition: background .4s; }
#plataforma .guia__prog i.on { background: var(--rosa-2); }
@media (max-width: 360px) { #plataforma .guia__prog { display: none; } }

/* ── átomos das telas ── */
#plataforma .historia .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #7b5db840; color: var(--roxo-5); font: 800 10px/1 var(--texto); }
#plataforma .historia .av--fs { position: relative; background: transparent; border: 1.5px dashed #ffffff33; }
#plataforma .historia .av--roxo { background: linear-gradient(135deg,var(--roxo-2),var(--roxo)); color: #fff; }
/* canal (iFood / 99Food): pílula neutra + o ponto .canal do site.css. Sem fundo vermelho: o vermelho do iFood
   pintando a pílula se confundiria com o rosa da marca, que nesta cena é a cor da Júlia. */
#plataforma .historia .mp { display: inline-flex; align-items: center; gap: 4px; vertical-align: 1px; font-style: normal; padding: 1px 6px 1px 5px; border-radius: 5px; background: #ffffff12; color: #ece6f2; font: 700 10px/1.4 var(--texto); }
#plataforma .historia .mp .canal { width: 6px; height: 6px; }
#plataforma .historia .canal--ifood { box-shadow: 0 0 0 1px #fff; }

/* ── TELA 0 · Kanban ── */
#plataforma .kb-aviso { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: linear-gradient(120deg,#2a1120,#1f1633); border: 1px solid #f25e7a55; transition: opacity .45s ease, transform .45s var(--ease); }
#plataforma .kb-aviso__ico { position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #f25e7a26; color: var(--rosa-3); }
#plataforma .kb-aviso__ico svg { width: 15px; height: 15px; }
#plataforma .kb-aviso__txt { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plataforma .kb-aviso__txt b { color: #fff; }
#plataforma .kb-aviso__h { flex: none; font-size: 11px; color: var(--muted-2); }
/* "via sistema do restaurante" (longo) × "via seu sistema" (curto): com o longo, entre 981 e 1179px o aviso
   cortava em "Pizza grande ·" e o iFood do pedido da Júlia sumia */
#plataforma .kb-curto { display: none; }
@media (min-width: 981px) and (max-width: 1179px) {
  #plataforma .historia.is-viva .kb-longo { display: none; }
  #plataforma .historia.is-viva .kb-curto { display: inline; }
  #plataforma .historia.is-viva .kb-aviso { gap: 8px; padding-inline: 10px; }
}
#plataforma .historia .kb { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 0; }
#plataforma .historia .kb__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px; border-radius: 12px; background: var(--panel); overflow: hidden; }
#plataforma .historia .kb__t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 2px; }
#plataforma .historia .kb__t > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
#plataforma .historia .kb__t span { color: var(--muted-2); font-weight: 600; font-variant-numeric: tabular-nums; }
#plataforma .historia .kb__entrada { font-style: normal; padding: 3px 7px; border-radius: 99px; background: #f25e7a26; color: var(--rosa-3); font-size: 10px; }
#plataforma .historia .kb__card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border-radius: 10px; background: #211836; border: 1px solid #ffffff10; }
#plataforma .historia .kb__card > div { min-width: 0; }
#plataforma .historia .kb__card b { display: block; font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plataforma .historia .kb__card small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plataforma .kb__card--fer { position: relative; max-height: 64px; border-color: #f25e7a66 !important; background: linear-gradient(120deg,#2a1120,#211836) !important; transition: max-height .5s var(--ease), opacity .4s ease, padding .5s var(--ease), margin .5s var(--ease), border-width .5s, box-shadow 1s ease; }
/* selo "Novo" no canto (e não no fluxo, com margin-left:auto): no fluxo ele espremia o nome do card */
#plataforma .kb__novo { position: absolute; top: 6px; right: 6px; padding: 3px 7px; border-radius: 99px; background: #f25e7a26; color: var(--rosa-3); font: 700 9.5px/1 var(--texto); font-style: normal; }
#plataforma .is-anima .tela-kb.p2:not(.p3) .kb__card--fer { box-shadow: 0 0 0 1px #f25e7a99, 0 0 24px #f25e7a40; }
#plataforma .is-anima .tela-kb:not(.p1) .kb-aviso { opacity: 0; transform: translateY(-10px); }
#plataforma .is-anima .tela-kb:not(.p2) .kb__card--fer { max-height: 0; opacity: 0; padding-block: 0; margin-bottom: -8px; border-width: 0; }
/* enquanto abre, o conteúdo do card não vaza por cima do card de baixo */
#plataforma .is-anima .tela-kb:not(.p3) .kb__card--fer { overflow: hidden; }

/* ── TELA 1 · Automações ── */
#plataforma .tela-fluxo { background: radial-gradient(#ffffff0a 1px, transparent 1.4px) 0 0/16px 16px; }
#plataforma .historia .fluxo { flex: 1; display: grid; justify-items: center; align-content: center; padding: 0; }
#plataforma .historia .no { position: relative; width: min(290px,100%); display: grid; gap: 2px; text-align: left; padding: 8px 48px 8px 12px; border-radius: 12px; background: #1f1633; border: 1px solid #dcd2f24d; transition: opacity .4s ease, border-color .4s, box-shadow .5s; }
#plataforma .historia .no > small { font: 700 9.5px/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--roxo-3); }
#plataforma .historia .no b { font-size: 13px; color: #fff; }
#plataforma .historia .no > span:not(.bolha) { font-size: 11px; color: var(--muted-2); }
#plataforma .historia .no--gat .canal { width: 6px; height: 6px; margin: 0 5px 1px 1px; vertical-align: middle; }
#plataforma .historia .no--gat .canal--99 { margin-left: 4px; }
#plataforma .historia .no .ancora { right: 24px; top: 50%; }
#plataforma .historia .no--gat { border-color: #f25e7a66; background: linear-gradient(120deg,#2a1120,#1f1633); }
#plataforma .historia .no--gat > small { color: var(--rosa-3); }
#plataforma .historia .no--ia { border-color: #dcd2f266; box-shadow: 0 0 24px #7b5db840; }
#plataforma .no--ia::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 30%, #ffffff22 50%, transparent 70%) no-repeat 200% 0/200% 100%; }
#plataforma .is-anima .tela-fluxo.p6:not(.p7) .no--ia::after { animation: plat-varre .7s ease-out; }
@keyframes plat-varre { from { opacity: 1; background-position: -100% 0; } to { opacity: 1; background-position: 200% 0; } }
#plataforma .no__res { position: absolute; right: 56px; top: 50%; margin-top: -10px; padding: 4px 9px; border-radius: 99px; background: #2dbe6c26; color: var(--ok-claro); font: 700 10.5px/1.2 var(--texto); font-style: normal; transition: opacity .38s, transform .38s cubic-bezier(.3,1.5,.5,1); }
#plataforma .historia .seta { position: relative; width: 2px; height: 16px; background: #dcd2f224; }
#plataforma .historia .seta i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(var(--roxo-4), var(--rosa-3)); transition: height .3s ease; }
#plataforma .historia .ramos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; width: min(480px,100%); margin-top: 16px; }
#plataforma .historia .ramos::before { content: ""; position: absolute; top: -14px; left: 16%; right: 16%; height: 8px; border: 2px solid #2dbe6c88; border-bottom: 0; border-radius: 8px 8px 0 0; transition: border-color .4s; }
#plataforma .historia .no--mini { width: 100%; padding: 8px 10px; }
#plataforma .historia .no--mini b { font-size: 12px; }
#plataforma .historia .no--ok { padding-right: 38px; border-color: #2dbe6c66; box-shadow: 0 0 22px #2dbe6c40; } /* padding: o texto não passa por baixo do token */
#plataforma .historia .no--ok .ancora { right: 18px; }
#plataforma .historia .no--x { border-color: #ff6b3d55; }
#plataforma .tela-fluxo .ramos .no:not(.no--ok) { opacity: .38; }
#plataforma .fluxo__fase { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid #ffffff1a; font-size: 11.5px; transition: opacity .4s, transform .4s var(--ease); }
#plataforma .fluxo__fase i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
#plataforma .fluxo__fase b { color: var(--rosa-3); }
#plataforma .bolha { display: none; }
/* 1180px+ (janela viva) e 700–980px (cartões): ao lado do nó sobram ≥130px. Abaixo de 700px e na janela
   estreita (981–1179px) não cabem; aí os horários 20:15/20:16 ficam no "quando" dos capítulos 2 e 3. */
@media (min-width: 1180px), (min-width: 700px) and (max-width: 980px) {
  /* max-width 116px (spec: 130): entre 1180 e ~1215px a janela é estreita e 130px cortava o balão na borda da tela */
  #plataforma .bolha { display: block; position: absolute; left: calc(100% + 14px); top: 50%; margin-top: -16px; width: max-content; max-width: 116px; padding: 6px 9px; border-radius: 9px; border-top-left-radius: 2px; font: 500 11px/1.35 var(--texto); color: #e9edef; transition: opacity .3s, transform .3s cubic-bezier(.3,1.5,.5,1); }
  #plataforma .bolha--loja { background: #005c4b; }
  #plataforma .bolha--cli { background: #1f2c34; }
  #plataforma .bolha small { margin-left: 6px; font: 500 9.5px/1 var(--texto); letter-spacing: 0; text-transform: none; color: #8696a0; }
}
#plataforma .is-anima .tela-fluxo:not(.p1) [data-no="1"], #plataforma .is-anima .tela-fluxo:not(.p2) [data-no="2"], #plataforma .is-anima .tela-fluxo:not(.p4) [data-no="3"], #plataforma .is-anima .tela-fluxo:not(.p6) [data-no="4"] { opacity: .45; border-color: #dcd2f22e; box-shadow: none; }
#plataforma .is-anima .tela-fluxo:not(.p2) [data-seta="1"] i, #plataforma .is-anima .tela-fluxo:not(.p4) [data-seta="2"] i, #plataforma .is-anima .tela-fluxo:not(.p6) [data-seta="3"] i { height: 0; }
#plataforma .is-anima .tela-fluxo:not(.p3) .bolha--loja, #plataforma .is-anima .tela-fluxo:not(.p5) .bolha--cli { opacity: 0; transform: scale(.9); }
#plataforma .is-anima .tela-fluxo:not(.p7) .no__res { opacity: 0; transform: scale(.6); }
#plataforma .is-anima .tela-fluxo:not(.p8) .ramos .no { opacity: .45; box-shadow: none; }
#plataforma .is-anima .tela-fluxo:not(.p8) .ramos::before { border-color: #dcd2f22e; }
#plataforma .is-anima .tela-fluxo:not(.p9) .fluxo__fase { opacity: 0; transform: translateY(6px); }

/* ── TELA 2 · Performance ── */
#plataforma .perf-topo { display: flex; flex-wrap: wrap; gap: 8px; }
#plataforma .sel { padding: 7px 11px; border-radius: 9px; background: var(--panel); border: 1px solid #ffffff12; font-size: 11.5px; }
#plataforma .sel--sutil { color: var(--muted-2); }
#plataforma .historia .funil { display: grid; gap: 10px; padding: 0; }
#plataforma .historia .funil__l { display: grid; grid-template-columns: 100px minmax(0,1fr) 56px; gap: 12px; align-items: center; }
#plataforma .historia .funil__l > span { font-size: 12px; color: var(--muted); }
#plataforma .funil__trilho { position: relative; height: 30px; }
#plataforma .funil__trilho > i { display: block; height: 100%; width: var(--w); border-radius: 8px; background: linear-gradient(90deg,#7b5db899,#7b5db855); transform-origin: left; transition: transform .7s var(--ease) calc(var(--i) * 120ms); }
#plataforma .funil__l--v .funil__trilho > i { background: linear-gradient(90deg, var(--rosa-2), #f25e7a66); box-shadow: 0 0 18px #f25e7a44; }
#plataforma .funil__trilho .ancora { left: calc(var(--w) - 18px); top: 50%; }
#plataforma .historia .funil__l > b { text-align: right; color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
#plataforma .funil__mais { position: absolute; left: calc(var(--w) + 14px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 99px; background: #f25e7a26; border: 1px solid #f25e7a55; color: var(--rosa-3); font: 700 10.5px/1 var(--texto); transition: opacity .4s, transform .4s var(--ease); }
/* :not(.is-final) em vez de :not(.p3) (spec): o p3 chega 300ms depois do p2 e cortava a piscada de 600ms no meio */
#plataforma .is-anima .tela-perf.p2:not(.is-final) .funil__l--v > b { animation: plat-pisca .6s ease; }
@keyframes plat-pisca { 40% { color: var(--rosa-3); text-shadow: 0 0 10px var(--rosa-2); } }
/* leituras por dia e hora (o medidor de qualidade do SV saiu: no app ele não fica no painel de Performance) */
#plataforma .historia .perf-extra { margin-top: auto; padding: 0; transition: opacity .45s, transform .45s var(--ease); }
#plataforma .calor-box { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel); }
#plataforma .calor-box__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
#plataforma .calor-box__cab small { font-size: 11px; color: var(--muted-2); }
#plataforma .calor-box__cab span { font-size: 11.5px; color: var(--muted); }
#plataforma .calor-box__cab b { color: #fff; font-size: 13.5px; }
#plataforma .calor { display: grid; grid-template-columns: 30px repeat(7, minmax(0,1fr)); gap: 5px; align-items: center; padding: 0; }
#plataforma .calor > span { font: 700 9.5px/1 var(--texto); color: var(--muted-2); text-align: center; font-variant-numeric: tabular-nums; }
#plataforma .calor > span:nth-child(8n+9) { text-align: left; }
#plataforma .calor i { height: 15px; border-radius: 3px; background: color-mix(in srgb, var(--rosa-2) calc(var(--a) * 100%), #1f1633); transition: opacity .3s ease calc(var(--k) * 18ms); }
#plataforma .calor__top { box-shadow: 0 0 0 1.5px #fff; }
#plataforma .is-anima .calor__top { animation: plat-top 2.4s ease-in-out infinite; }
@keyframes plat-top { 50% { box-shadow: 0 0 0 1.5px #fff, 0 0 10px var(--rosa-2); } }
#plataforma .is-anima .tela-perf:not(.p1) .funil__trilho > i { transform: scaleX(0); }
#plataforma .is-anima .tela-perf:not(.p2) .funil__mais { opacity: 0; transform: translate(-6px, -50%); }
#plataforma .is-anima .tela-perf:not(.p3) .perf-extra { opacity: 0; transform: translateY(8px); }
#plataforma .is-anima .tela-perf:not(.p3) .calor i { opacity: .15; }

/* ── TELA 3 · RFV ── */
#plataforma .perfil { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel); }
#plataforma .perfil__nome { display: grid; gap: 4px; min-width: 0; }
#plataforma .perfil__nome b { font: 700 13.5px/1.1 var(--texto); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plataforma .perfil__nome > span { display: flex; gap: 4px; }
#plataforma .perfil__num { display: grid; gap: 3px; margin-left: 10px; }
#plataforma .perfil__num small { font-size: 10px; color: var(--muted-2); }
#plataforma .perfil__num b { font: 800 15px/1 var(--texto); color: #fff; font-variant-numeric: tabular-nums; }
#plataforma .perfil__tag { margin-left: auto; flex: none; padding: 4px 10px; border-radius: 99px; background: #7b5db84d; color: var(--roxo-5); font: 700 12px/1 var(--texto); font-style: normal; transition: opacity .3s, transform .38s cubic-bezier(.3,1.6,.5,1); }
#plataforma .linha-compras { position: relative; display: grid; grid-template-columns: repeat(3,1fr); }
#plataforma .linha-compras::before { content: ""; position: absolute; left: 8px; right: calc(33.333% - 4px); top: 4px; height: 1px; background: #ffffff1f; }
#plataforma .linha-compras li { position: relative; display: grid; gap: 3px; padding-top: 16px; }
#plataforma .linha-compras li > i { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa-2); box-shadow: 0 0 10px var(--rosa-2); transition: background .4s, box-shadow .4s; }
#plataforma .linha-compras b { font-size: 11px; color: #fff; }
#plataforma .linha-compras span { font-size: 10.5px; color: var(--muted-2); }
/* o R$ 10 OFF da campanha da terça (64,90 − 10 = 54,90): acende junto com o 2º pedido */
#plataforma .linha-compras .cupom { display: inline-block; margin-left: 2px; padding: 1px 5px; border-radius: 4px; background: #f25e7a26; color: var(--rosa-3); font: 700 9.5px/1.3 var(--texto); font-style: normal; white-space: nowrap; transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1); }
#plataforma .historia .rfv { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 0; grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: 1fr 1fr 1fr .8fr; grid-template-areas: "rec pot leal camp" "prom pot leal camp" "aten dorm risco naop" "hib hib perd perd"; }
#plataforma .historia .rfv__c { position: relative; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; border-radius: 12px; border: 1px solid #ffffff12; background: color-mix(in srgb, var(--rosa-2) calc(var(--a) * 55%), var(--panel)); transition: box-shadow .5s ease .4s; }
#plataforma .historia .rfv__c--v { background: color-mix(in srgb, var(--roxo-2) calc(var(--a) * 80%), var(--panel)); }
#plataforma .historia .rfv__c--al { background: color-mix(in srgb, #ffb547 calc(var(--a) * 45%), var(--panel)); }
#plataforma .historia .rfv__c--fr { background: color-mix(in srgb, var(--muted-2) calc(var(--a) * 50%), var(--panel)); }
#plataforma .historia .rfv__c b { font-size: 12px; line-height: 1.2; color: #fff; }
/* "> span": sem o >, a regra pegava o .fs dentro da âncora de Campeões (JP em 18px; sumia no celular) */
#plataforma .historia .rfv__c > span { font: 800 18px/1 var(--texto); color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* âncora no canto de baixo à direita (ao lado do número): no alto, a 981–1100px o token cobria o fim de "Campeões" */
#plataforma .historia .rfv__c .ancora { right: 22px; bottom: 22px; }
/* destino da Júlia: Campeões (o mesmo segmento da ficha e do público da tela 5) */
#plataforma .rfv__c--dest { box-shadow: inset 0 0 0 1.5px var(--rosa-3), 0 0 26px #f25e7a55; }
#plataforma .is-anima .rfv__c--dest { animation: plat-dest 2.6s ease-in-out infinite; }
@keyframes plat-dest { 50% { box-shadow: inset 0 0 0 1.5px var(--rosa-3), 0 0 12px #f25e7a33; } }
#plataforma .is-anima .tela-rfv.p2:not(.p3) .rfv__c--pot { animation: plat-flash .6s ease .45s both; }
@keyframes plat-flash { 40% { box-shadow: inset 0 0 0 1.5px #ffffffaa; } }
#plataforma .is-anima .tela-rfv:not(.p1) .linha-compras li:nth-child(1) > i, #plataforma .is-anima .tela-rfv:not(.p2) .linha-compras li:nth-child(2) > i, #plataforma .is-anima .tela-rfv:not(.p3) .linha-compras li:nth-child(3) > i { background: #3d3152; box-shadow: none; }
#plataforma .is-anima .tela-rfv:not(.p2) .cupom { opacity: 0; transform: scale(.7); }
#plataforma .is-anima .tela-rfv:not(.p4) .perfil__tag { opacity: 0; transform: scale(.7); }
#plataforma .is-anima .tela-rfv:not(.p3) .rfv__c--dest { box-shadow: none; animation: none; }

/* ── TELA 4 · Regiões e público ──
   Mapa de bairros (SVG) em volta da unidade Vila Mariana. --mapa-w é a largura do mapa; o cartão do público,
   no modo vivo, ocupa a coluna da direita (100% − mapa − paddings − gap). */
#plataforma .tela-reg { --mapa-w: 272px; }
#plataforma .reg-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#plataforma .filtro { padding: 6px 10px; border-radius: 9px; background: var(--panel); border: 1px solid #ffffff12; font-size: 11.5px; white-space: nowrap; }
#plataforma .filtro--on { background: #f25e7a26; border-color: #f25e7a66; color: var(--rosa-3); }
#plataforma .historia .reg { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--mapa-w) minmax(0,1fr); gap: 22px; align-items: start; padding: 0; }
#plataforma .mapa { position: relative; width: var(--mapa-w); aspect-ratio: 8/9; }
#plataforma .mapa > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke-width: 1; }
/* bairros: fundo = rosa na intensidade --a (participação nos pedidos); o traço da cor do fundo da tela separa os ladrilhos.
   Os 4 bairros do público (.alvo) vêm por último no SVG, para o contorno rosa ficar por cima dos vizinhos. */
#plataforma .mapa__bairros path { fill: color-mix(in srgb, var(--rosa-2) calc(var(--a) * 100%), #1f1633); stroke: #100b19; stroke-width: 2.5; transition: fill .6s ease calc(var(--dist,0) * 70ms), stroke .5s ease; }
#plataforma .mapa__bairros .alvo { stroke: var(--rosa-4); stroke-width: 1.6; }
#plataforma .mapa__aneis circle { fill: none; stroke: #ffffff30; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
#plataforma .mapa__linha { stroke: #fff; stroke-dasharray: 2 2.5; opacity: .85; vector-effect: non-scaling-stroke; }
#plataforma .mapa__nomes text { fill: #ffffffe0; stroke: none; font-family: var(--texto); font-size: 7.5px; font-weight: 700; text-anchor: middle; pointer-events: none; transition: fill .6s ease; }
#plataforma .mapa__loja { position: absolute; z-index: 1; width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; border-radius: 7px; background: #fff; color: var(--roxo); box-shadow: 0 0 0 3px #100b19, 0 6px 14px #000000aa; }
#plataforma .mapa__loja svg { width: 14px; height: 14px; stroke-width: 2; }
#plataforma .mapa__loja small { position: absolute; right: calc(100% + 7px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 3px 7px; border-radius: 99px; background: #100b19e0; border: 1px solid #ffffff1f; font: 700 9px/1.2 var(--texto); color: #fff; }
/* a Júlia no mapa (sem JS): o mesmo desenho do token encolhido — roxo com anel rosa, que aparece sobre o rosa da Vila Mariana */
#plataforma .mapa .fs { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; font-size: 0; background: linear-gradient(135deg, var(--roxo-2), var(--roxo)); box-shadow: 0 0 0 1.5px #100b19, 0 0 0 3px var(--rosa-2), 0 0 12px #f25e7a99; }
#plataforma .reg-dir { display: grid; gap: 16px; align-content: start; min-width: 0; }
#plataforma .rank-box { display: grid; gap: 10px; }
#plataforma .rank__t, #plataforma .rank__rod { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
#plataforma .rank__rod { color: var(--rosa-3); transition: opacity .4s ease; }
#plataforma .historia .rank { display: grid; gap: 10px; }
#plataforma .historia .rank li { display: grid; grid-template-columns: 96px minmax(0,1fr) 30px; gap: 8px; align-items: center; font-size: 12px; transition: opacity .4s ease; }
#plataforma .historia .rank li > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
#plataforma .historia .rank li i { height: 8px; border-radius: 5px; width: var(--w); background: linear-gradient(90deg, var(--roxo-2), var(--rosa-2)); transform-origin: left; transition: transform .6s var(--ease) calc(var(--i) * 100ms); }
#plataforma .historia .rank li b { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
#plataforma .historia .rank li:not(.alvo) { opacity: .45; }
#plataforma .reg-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; transition: opacity .4s, transform .4s var(--ease); }
#plataforma .reg-acao__b { font-size: 11px; color: var(--muted); }
#plataforma .reg-acao__b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--rosa-2); vertical-align: 1px; }
#plataforma .historia .pill-v { display: inline-block; padding: 8px 12px; border-radius: 99px; border: 1px solid #f25e7a55; color: var(--rosa-3); font: 700 12px/1 var(--texto); }
/* público do disparo: no fluxo da tela (cartões, estático); no modo vivo, entra por cima na coluna da direita */
#plataforma .publico { position: relative; z-index: 3; align-self: flex-end; width: min(320px, 100%); display: grid; gap: 7px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(160deg, #2a1120, #1f1633); border: 1px solid #f25e7a66; box-shadow: 0 24px 50px -16px #000, 0 0 30px #f25e7a26; transition: opacity .45s ease, transform .55s var(--ease); }
#plataforma .app__corpo .publico { position: absolute; right: 20px; bottom: 18px; width: min(300px, calc(100% - var(--mapa-w) - 62px)); }
#plataforma .publico__t { display: flex; align-items: center; gap: 7px; font: 800 10px/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--rosa-3); }
#plataforma .publico__t svg { width: 15px; height: 15px; }
#plataforma .publico__l { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 8px; font-size: 11.5px; line-height: 1.35; }
#plataforma .publico__l small { font-size: 10.5px; color: var(--muted-2); }
#plataforma .publico__l b { color: #fff; }
#plataforma .publico__n { padding-top: 7px; border-top: 1px dashed #ffffff1f; font-size: 12px; color: var(--muted); }
#plataforma .publico__n b { margin-right: 4px; font: 800 22px/1 var(--texto); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* estados iniciais (só com JS vivo): p1 onda · p2 ranking · p3 os 4 bairros · p4 ação do bairro · p5 público */
#plataforma .is-anima .tela-reg:not(.p1) .mapa__bairros path { fill: #1f1633; }
#plataforma .is-anima .tela-reg:not(.p1) .mapa__bairros .mapa__vm { fill: var(--roxo-2); }
#plataforma .is-anima .tela-reg:not(.p1) .mapa__nomes text { fill: #ffffff59; }
#plataforma .is-anima .tela-reg:not(.p3) .mapa__bairros .alvo { stroke: #100b19; stroke-width: 2.5; }
#plataforma .is-anima .tela-reg:not(.p2) .rank li i { transform: scaleX(0); }
/* o ranking só aparece com as barras: antes disso o rótulo da Júlia passa por cima da coluna da direita */
#plataforma .rank-box { transition: opacity .4s ease; }
@media (min-width: 641px) { #plataforma .is-anima .tela-reg:not(.p2) .rank-box { opacity: 0; } }
#plataforma .is-anima .tela-reg:not(.p3) .rank li:not(.alvo) { opacity: 1; }
#plataforma .is-anima .tela-reg:not(.p3) .rank__rod { opacity: 0; }
#plataforma .is-anima .tela-reg:not(.p4) .reg-acao { opacity: 0; transform: translateY(6px); }
#plataforma .is-anima .tela-reg:not(.p5) .publico { opacity: 0; transform: translateY(18px) scale(.97); }

/* ── fecho ── */
#plataforma .historia__fim { max-width: 860px; margin: 56px auto 0; text-align: center; }
#plataforma .historia__fim .eyebrow { margin-bottom: 18px; }
#plataforma .extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#plataforma .extras li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px; border: 1px solid #ffffff1f; background: #ffffff05; font: 600 13px/1.2 var(--texto); color: #e3dcea; }
#plataforma .extras li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--roxo-4); box-shadow: 0 0 8px #dcd2f2aa; }
#plataforma .historia__fim .link-seta { margin-top: 28px; }
#plataforma .historia__nota { margin-top: 18px; font-size: 12px; color: var(--muted-2); }

/* ── tablet: cards em 1 coluna ── */
@media (max-width: 980px) { #plataforma .cap { grid-template-columns: 1fr; gap: 28px; padding: 28px; } }

/* ── celular: telas compactas ── */
@media (max-width: 640px) {
  #plataforma .historia__caps { gap: 16px; }
  #plataforma .cap { gap: 22px; padding: 22px 16px 16px; border-radius: 22px; }
  #plataforma .cap h3 { font-size: 24px; line-height: 1.15; }
  #plataforma .cap__txt > p:not([class]) { font-size: 15px; line-height: 1.7; }
  #plataforma .cap .lista-ok li { font-size: 14px; }
  #plataforma .cap__prova { font-size: 12.5px; }
  #plataforma .cap__quando { font-size: 11.5px; }
  #plataforma .tela-cap { min-height: 280px; padding: 12px; gap: 10px; font-size: 11px; }
  #plataforma .fer { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  #plataforma .fer b { font-size: 9.5px; }
  #plataforma .fer__nome { display: none; }
  #plataforma .fs { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 9.5px; }
  #plataforma .kb-aviso { padding: 7px 9px; gap: 8px; }
  #plataforma .kb-aviso__txt { font-size: 11px; }
  #plataforma .kb-aviso__h { display: none; }
  #plataforma .historia .kb { grid-template-columns: 1fr 1fr; gap: 8px; }
  #plataforma .historia .kb__col--3 { display: none; }
  #plataforma .historia .kb__col { padding: 8px; gap: 6px; }
  #plataforma .historia .kb__card { padding: 7px; gap: 7px; }
  #plataforma .historia .kb__card:nth-of-type(n+4) { display: none; }
  #plataforma .historia .kb__card .av { width: 24px; height: 24px; font-size: 9px; }
  #plataforma .historia .kb__card b { font-size: 11px; }
  #plataforma .historia .kb__card small { font-size: 10px; }
  /* no card estreito a pílula do canal vira só o ponto (o nome "iFood" cortava o valor em reticências) */
  #plataforma .historia .kb__card .mp { font-size: 0; gap: 0; padding: 0; background: none; vertical-align: 0; }
  #plataforma .historia .kb__card .mp .canal { width: 7px; height: 7px; }
  #plataforma .kb__novo { display: none; }
  #plataforma .historia .no { padding: 6px 40px 6px 10px; }
  #plataforma .historia .no .ancora { right: 20px; }
  #plataforma .historia .no > small { display: none; }
  #plataforma .historia .no[data-no] > span:not(.bolha) { display: none; }
  #plataforma .historia .no b { font-size: 11.5px; }
  #plataforma .historia .seta { height: 10px; }
  #plataforma .historia .ramos { gap: 6px; }
  #plataforma .historia .no--mini b { font-size: 10.5px; }
  #plataforma .historia .no--mini > span { font-size: 9.5px; }
  #plataforma .historia .no--ok .ancora { right: 14px; }
  /* ramos: a regra .no acima também pegava os 3 ramos (padding-right 40px espremia o texto);
     o Confirmou ganha mais largura porque o token pousa nele */
  #plataforma .historia .ramos { grid-template-columns: 1.3fr 1fr 1fr; }
  #plataforma .historia .no--mini { padding: 6px 8px; }
  #plataforma .historia .no--ok { padding-right: 28px; }
  #plataforma .no__res { right: 40px; font-size: 9.5px; }
  #plataforma .fluxo__fase { font-size: 10.5px; }
  #plataforma .sel--sutil { display: none; }
  #plataforma .historia .funil__l { grid-template-columns: 74px minmax(0,1fr) 40px; gap: 7px; }
  #plataforma .historia .funil__l > span { font-size: 11px; } /* "Responderam" em 12px encostava na barra */
  #plataforma .funil__trilho { height: 18px; }
  #plataforma .funil__trilho .ancora { left: calc(var(--w) - 12px); }
  #plataforma .funil__mais { left: calc(var(--w) + 10px); }
  #plataforma .funil__mais span { display: none; }
  #plataforma .calor-box { padding: 9px 10px; gap: 8px; }
  #plataforma .calor-box__cab small { display: none; }
  #plataforma .calor-box__cab span { font-size: 11px; }
  #plataforma .calor-box__cab b { font-size: 12px; }
  #plataforma .calor { grid-template-columns: 22px repeat(7, minmax(0,1fr)); gap: 3px; }
  #plataforma .calor > span { font-size: 8.5px; }
  #plataforma .calor i { height: 8px; }
  /* faixa em 2 linhas: numa linha só o nome encolhia em reticências e o total quebrava em "R$ / 192,20" */
  #plataforma .perfil { flex-wrap: wrap; padding: 8px 10px; gap: 6px 8px; }
  #plataforma .perfil__nome { flex: 1 0 100%; }
  #plataforma .perfil .av, #plataforma .perfil__nome > span, #plataforma .perfil__num--total small { display: none; }
  #plataforma .perfil__num { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 4px; margin-left: 4px; }
  #plataforma .perfil__num small { text-transform: lowercase; font-size: 10.5px; }
  #plataforma .perfil__num b { font-size: 12px; white-space: nowrap; }
  #plataforma .perfil__nome + .perfil__num { margin-left: 0; }
  #plataforma .linha-compras { display: none; }
  #plataforma .historia .rfv { grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: none; grid-auto-rows: minmax(46px, auto); grid-template-areas: "rec pot leal" "prom camp camp" "aten dorm risco" "naop hib perd"; gap: 6px; }
  #plataforma .historia .rfv__c { padding: 7px 8px; }
  #plataforma .historia .rfv__c > span { display: none; }
  #plataforma .historia .rfv__c b { font-size: 10px; line-height: 1.15; }
  #plataforma .historia .rfv__c .ancora { right: 16px; top: 18px; bottom: auto; }
  /* Regiões: mapa de 130px sem os nomes (ilegíveis nesse tamanho); ranking com o nome em cima da barra */
  #plataforma .tela-reg { --mapa-w: 130px; }
  #plataforma .filtro--cidade { display: none; }
  #plataforma .filtro { padding: 5px 8px; font-size: 10.5px; }
  #plataforma .historia .reg { gap: 12px; }
  #plataforma .mapa__nomes, #plataforma .mapa__loja small { display: none; }
  #plataforma .mapa__bairros path { stroke-width: 3.5; }
  #plataforma .mapa__loja { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 5px; box-shadow: 0 0 0 2px #100b19; }
  #plataforma .mapa__loja svg { width: 11px; height: 11px; }
  #plataforma .mapa .fs { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  #plataforma .reg-dir { gap: 10px; }
  #plataforma .rank-box, #plataforma .historia .rank { gap: 7px; }
  #plataforma .rank__t, #plataforma .rank__rod { font-size: 8.5px; letter-spacing: .1em; }
  #plataforma .historia .rank li { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "n p" "b b"; gap: 3px 6px; font-size: 10.5px; }
  #plataforma .historia .rank li > span { grid-area: n; }
  #plataforma .historia .rank li i { grid-area: b; height: 5px; }
  #plataforma .historia .rank li b { grid-area: p; }
  #plataforma .reg-acao__b { display: none; }
  #plataforma .historia .pill-v { padding: 6px 9px; font-size: 10.5px; }
  #plataforma .publico { align-self: stretch; width: auto; padding: 10px 12px; gap: 5px; }
  #plataforma .publico__l { grid-template-columns: 58px minmax(0,1fr); font-size: 11px; }
  #plataforma .publico__n b { font-size: 19px; }
  #plataforma .extras { gap: 8px; }
  #plataforma .extras li { font-size: 12.5px; }
}
/* ≤400px: aviso do kanban compacto (em 360px ele cortava o chip do iFood do pedido da Júlia) */
@media (max-width: 400px) {
  #plataforma .kb-aviso { gap: 6px; padding-inline: 8px; }
  #plataforma .kb-aviso__ico { width: 22px; height: 22px; border-radius: 7px; }
  #plataforma .kb-aviso__txt { font-size: 10.5px; }
}
@media (max-width: 360px) {
  #plataforma .historia .no--mini:not(.no--ok) > span { display: none; }
  /* o token pousa no canto de cima do Confirmou: no meio ele cobria "Mover" */
  #plataforma .historia .no--ok { padding-right: 8px; }
  #plataforma .historia .no--ok .ancora { top: 0; right: 10px; }
  #plataforma .tela-reg { --mapa-w: 110px; }
}