/* Shopper Insight Lab: o supermercado como linguagem gráfica. Branco chapado,
   tomate e gema, preto de etiqueta. Etiqueta de gôndola, splash de oferta,
   código de barras e cupom fiscal. Nenhum degradê: só cor chapada e borda dura.
   Dentro do palco o app aparece como ele é: branco limpo com verde discreto. */
:root {
  --fundo: #ffffff; --sup: #ffffff; --sup2: #f3f1ea; --tinta: #111111; --tinta2: #33312c; --fraco: #6b675e;
  --linha: rgba(17, 17, 17, .18); --cor: #dc2c14; --cor-t: #ffffff; --cor2: #ffd21f;
  --esc: #111111; --esc-t: #ffffff; --esc-f: rgba(255, 255, 255, .76);
  --raio: 6px; --raio-p: 6px; --sombra: 5px 5px 0 #111111;
  --f-tit: 'Archivo Black', 'Arial Black', system-ui, sans-serif; --f-txt: 'Archivo', system-ui, sans-serif;
  --f-mono: 'Space Mono', ui-monospace, monospace;
  --tit-peso: 400; --tit-esp: -.025em;
  --app: #3d8b6e; --app-e: #2c6b53; --app-f: #e7f2ec; --app-l: #dfe5e0; --app-b: #f6f8f5; --app-t: #16211c; --app-c: #7b877f;
  --barras: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24'%3E%3Cpath fill='%23111' d='M0 0h3v24H0zM5 0h1v24H5zM8 0h2v24H8zM12 0h1v24h-1zM14 0h3v24h-3zM19 0h1v24h-1zM22 0h1v24h-1zM25 0h3v24h-3zM30 0h2v24h-2zM34 0h1v24h-1zM37 0h3v24h-3zM42 0h1v24h-1zM45 0h2v24h-2zM49 0h1v24h-1zM52 0h3v24h-3zM57 0h1v24h-1zM60 0h2v24h-2z'/%3E%3C/svg%3E");
}
body { background: var(--fundo); counter-reset: sec; }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.9rem); line-height: 1.02; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.06; }
h3 { letter-spacing: -.01em; }
h1 em { color: #fff; background: var(--cor); padding: 0 .14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Topo com toldo de mercado */
.topo { background: #fff; backdrop-filter: none; border-bottom: 3px solid var(--tinta); }
.topo::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 3px); height: 12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='12'%3E%3Cpath fill='%23dc2c14' d='M0 0h28v6a14 6 0 0 1-28 0z'/%3E%3Cpath fill='%23ffd21f' d='M28 0h28v6a14 6 0 0 1-28 0z'/%3E%3C/svg%3E") repeat-x; }
.cassi { font-family: var(--f-tit); font-weight: 400; }
.prod { font: 400 .95rem var(--f-tit); letter-spacing: -.01em; }
.prod b { font-weight: 400; background: var(--cor2); padding: 0 .2em; border: 2px solid var(--tinta); border-radius: 3px; }
.links a { font-weight: 600; color: var(--tinta); }
.idiomas { border: 2px solid var(--tinta); border-radius: 6px; }
.idiomas a { border-radius: 3px; font-weight: 700; }
.idiomas a[aria-current] { background: var(--tinta); color: var(--cor2); }
.btn { border: 2.5px solid var(--tinta); box-shadow: 4px 4px 0 var(--tinta); font-weight: 700; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinta); }
.btn-p { border-color: var(--tinta); }
.btn-demo { background: var(--cor2); }
.btn-demo::before { content: "▸"; font-size: 1.1em; line-height: 1; }

/* Etiqueta de seção: o número sai como preço de gôndola */
.sobre { color: var(--tinta); font-weight: 700; letter-spacing: .12em; }
.heroi { padding-top: clamp(48px, 6.5vw, 92px); grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
.heroi .sobre { display: flex; align-items: center; gap: 12px; }
.heroi .sobre::before { content: ""; flex: none; width: 44px; height: 18px; background: var(--barras) left center / 64px 18px repeat-x; }
.sec { counter-increment: sec; }
.sec > .sobre { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.sec > .sobre::before { content: counter(sec, decimal-leading-zero); font: 400 2.5rem/1 var(--f-tit); letter-spacing: -.04em; color: var(--tinta);
  background: var(--cor2); border: 2.5px solid var(--tinta); border-radius: 4px; padding: 5px 12px 3px; transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--tinta); }
.sec-esc > .sobre::before { box-shadow: 3px 3px 0 var(--cor); }
.lede { font-size: 1.1rem; }

/* O palco: a tela do simulador, com splash de oferta no canto */
.palco { aspect-ratio: 4 / 3; overflow: visible; border: 3px solid var(--tinta); border-radius: 12px; background: var(--app-b);
  box-shadow: 10px 10px 0 var(--cor2), 10px 10px 0 3px var(--tinta); }
.palco::after { content: "3\A MISSIONS"; white-space: pre; position: absolute; z-index: 8; top: -52px; right: -30px; width: 104px; height: 104px;
  display: grid; place-items: center; text-align: center; font: 400 .74rem/1.05 var(--f-tit); color: var(--cor2); background: var(--cor); transform: rotate(12deg);
  clip-path: polygon(50.0% 0.0%, 58.9% 11.0%, 71.7% 5.0%, 74.9% 18.7%, 89.1% 18.8%, 86.0% 32.6%, 98.7% 38.9%, 90.0% 50.0%, 98.7% 61.1%, 86.0% 67.4%, 89.1% 81.2%, 74.9% 81.3%, 71.7% 95.0%, 58.9% 89.0%, 50.0% 100.0%, 41.1% 89.0%, 28.3% 95.0%, 25.1% 81.3%, 10.9% 81.2%, 14.0% 67.4%, 1.3% 61.1%, 10.0% 50.0%, 1.3% 38.9%, 14.0% 32.6%, 10.9% 18.8%, 25.1% 18.7%, 28.3% 5.0%, 41.1% 11.0%); }
html[lang="pt-BR"] .palco::after { content: "3\A MISSÕES"; }
html[lang="es"] .palco::after { content: "3\A MISIONES"; }
.pc { overflow: hidden; border-radius: 9px; }
.pc-abas { background: var(--tinta); border-bottom: 3px solid var(--tinta); padding-right: 66px; }
.pc-aba { color: rgba(255, 255, 255, .72); border-radius: 5px; }
.pc-aba b { font-family: var(--f-txt); font-weight: 700; font-size: .72rem; letter-spacing: 0; }
.pc-aba[aria-selected="true"] { background: var(--cor2); color: var(--tinta); }
.pc-prog { background: var(--cor); height: 3px; }
.ilus { margin-top: 10px; }

/* O trabalho: quatro etiquetas de gôndola */
.tcs { border: 0; background: none; gap: 16px; overflow: visible; border-radius: 0; }
.tcs .tc { position: relative; background: #fff; border: 2.5px solid var(--tinta); border-radius: 6px; padding-top: 38px; overflow: hidden; }
.tcs .tc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--cor); border-bottom: 2.5px solid var(--tinta); }
.tcs .tc:nth-child(2)::before { background: var(--tinta); }
.tcs .tc:nth-child(3)::before { background: var(--cor); }
.tcs .tc:nth-child(1)::before { background: var(--sup2); }
.tag { background: var(--tinta); color: #fff; border: 0; border-radius: 3px; padding: 4px 8px; font-weight: 700; }
.tcs .tc-cassi { background: var(--cor2); box-shadow: var(--sombra); }
.tcs .tc-cassi::before { background: var(--tinta); }
.tc-cassi h3 { color: var(--tinta); }
.tc-cassi p { color: var(--tinta); }
.tc-cassi .tag { background: var(--cor); color: #fff; }
blockquote { border: 2.5px solid var(--tinta); border-left: 2.5px solid var(--tinta); background: var(--cor2); padding: 22px 28px; font: 600 clamp(1.1rem, 1.8vw, 1.4rem)/1.4 var(--f-txt);
  border-radius: 6px; max-width: 44em; transform: rotate(-.5deg); box-shadow: var(--sombra); margin-top: 40px; }

/* O que responde */
.rl { border-top: 2.5px solid var(--tinta); }
.rl:last-child { border-bottom: 2.5px solid var(--tinta); }
.et b { display: inline-block; background: var(--cor); color: #fff; padding: 4px 9px; border-radius: 3px; letter-spacing: .06em; }
.et span { display: block; margin-top: 7px; }

/* Método: fundo preto, número de gôndola em gema */
.ps { border: 2px solid rgba(255, 255, 255, .3); border-radius: 6px; background: none; }
.ps .n { font: 400 2.3rem/.9 var(--f-tit); letter-spacing: -.04em; color: var(--cor2); padding-top: 0; }
.ps .gt { border-top: 1px dashed rgba(255, 255, 255, .34); padding-top: 10px; }

/* Provas: etiquetas de preço com furo e código de barras */
.pv { position: relative; border: 2.5px solid var(--tinta); border-radius: 6px; box-shadow: var(--sombra); padding: 40px 22px 50px; overflow: hidden; }
.pv::before { content: ""; position: absolute; left: 50%; top: 12px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2.5px solid var(--tinta); background: var(--sup2); }
.pv::after { content: ""; position: absolute; left: 22px; bottom: 14px; width: 128px; height: 22px; background: var(--barras) left center / 64px 22px repeat-x; }
.pv b { color: var(--tinta); font-size: clamp(1.7rem, 2.5vw, 2.3rem); white-space: nowrap; }
.pv:nth-child(odd) { background: var(--cor2); }
.pv:nth-child(3) { transform: rotate(.6deg); }
.pv:nth-child(2) { transform: rotate(-.6deg); }
.pv.rv.ok:nth-child(2) { transform: rotate(-.6deg); }
.pv.rv.ok:nth-child(3) { transform: rotate(.6deg); }
.pv span { color: var(--tinta); }
.dupla { margin-top: 34px; gap: 28px; align-items: start; }

/* O que nunca faz: cupom fiscal */
.cx:first-child { position: relative; border: 0; border-radius: 0; background-color: var(--sup2); padding: 40px 30px 84px; font-family: var(--f-mono);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath fill='%23fff' d='M0 0h16L8 9z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath fill='%23fff' d='M0 9h16L8 0z'/%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x; background-position: left top, left bottom; }
.cx:first-child h3 { text-align: center; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 2px dashed var(--tinta); }
.cx:first-child li { font: 400 .84rem/1.55 var(--f-mono); color: var(--tinta); padding-bottom: 12px; border-bottom: 1px dashed rgba(17, 17, 17, .3); }
.cx:first-child li:last-child { border-bottom: 0; }
.cx:first-child::after { content: ""; position: absolute; left: 50%; bottom: 30px; width: 192px; height: 30px; margin-left: -96px; background: var(--barras) left center / 64px 30px repeat-x; }
.nao li::before { color: var(--cor); }
.cx:last-child { border: 2.5px solid var(--tinta); border-radius: 6px; box-shadow: 6px 6px 0 var(--cor2), 6px 6px 0 2.5px var(--tinta); }
.sim li { font-weight: 600; color: var(--tinta); }
.sim li::before { color: var(--cor); }

.fqs, .fq { border-color: var(--tinta); }
.fqs { border-top-width: 2.5px; }
.fq summary::after { font-family: var(--f-tit); color: var(--cor); }

.sec.fim { background: var(--cor2); border: 3px solid var(--tinta); border-radius: 12px; box-shadow: 10px 10px 0 var(--tinta);
  width: calc(100% - 2 * clamp(16px, 5vw, 72px)); margin: 24px auto 84px; counter-increment: none; }
.fim > p { color: var(--tinta); }
.fim .btn { background: #fff; }
.fim .btn-p { background: var(--cor); }
.fim .btn-demo { background: var(--tinta); color: var(--cor2); }
.rodape { background: var(--tinta); color: rgba(255, 255, 255, .7); border-top: 0; }
.rodape a { color: #fff; }

/* ---------- Palco: o app ---------- */
.cena { padding: 12px; background: var(--app-b); color: var(--app-t); font-family: var(--f-txt); }
.g-cartao { background: #fff; border: 1px solid var(--app-l); border-radius: 10px; padding: 11px 12px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.g-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.g-h h4, .g-av h4 { font: 700 .68rem var(--f-txt); }
.g-h small { font: 400 .48rem var(--f-mono); color: var(--app-c); white-space: nowrap; }
.g-fase { font: 700 .5rem var(--f-mono); letter-spacing: .08em; }

.g-toast { position: absolute; z-index: 7; top: 10px; left: 50%; transform: translate(-50%, -160%); opacity: 0; transition: transform .4s cubic-bezier(.2, .9, .3, 1.2), opacity .3s;
  background: #111; color: #fff; border-radius: 8px; padding: 8px 14px 9px; border-left: 7px solid var(--app); max-width: 78%; box-shadow: 0 6px 0 rgba(17, 17, 17, .14); }
.g-toast.on { transform: translate(-50%, 0); opacity: 1; }
.g-toast b { display: block; font: 700 .7rem var(--f-txt); }
.g-toast span { display: block; font: 400 .58rem/1.3 var(--f-txt); opacity: .86; }
.g-toast.falta { border-left-color: var(--cor); }
.g-toast.corte { border-left-color: var(--cor2); }

/* Cena 1: briefing da missão */
.g-m { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.g-trilha { grid-column: 1 / -1; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.g-trilha li { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 3px solid var(--app-l); color: var(--app-c); font: 600 .58rem var(--f-txt); transition: color .3s, border-color .3s; min-width: 0; }
.g-trilha li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-trilha i { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font: 700 .5rem var(--f-mono); font-style: normal; }
.g-trilha li.ok { color: var(--app); border-color: var(--app); }
.g-trilha li.ok i { background: var(--app); color: #fff; border-color: var(--app); }
.g-trilha li.on { color: var(--app-t); border-color: var(--app-t); }
.g-av { gap: 9px; }
.g-avs { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g-a { position: relative; background: #eef3ef; border: 2.5px solid transparent; border-radius: 10px; overflow: hidden; transition: transform .25s, border-color .25s, background .25s; min-height: 0; }
.g-a svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g-a u { position: absolute; right: 5px; top: 5px; width: 17px; height: 17px; border-radius: 50%; background: var(--app); color: #fff; font: 700 .56rem var(--f-mono); display: grid; place-items: center; text-decoration: none; transform: scale(0); transition: transform .3s cubic-bezier(.2, .9, .3, 1.5); z-index: 2; }
.g-a.hv { border-color: #a9cdbd; transform: scale(1.04); }
.g-a.sel { border-color: var(--app); background: var(--app-f); }
.g-a.sel u { transform: scale(1); }
.g-selos { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.g-selos > span { font: 400 .48rem var(--f-mono); border: 1px solid var(--app-l); border-radius: 20px; padding: 3px 7px; color: var(--app-c); white-space: nowrap; }
.g-selos .ids { border: 0; padding: 0; display: flex; gap: 3px; }
.g-selos .ids b { font: 700 .46rem var(--f-mono); background: var(--app-f); color: var(--app-e); border-radius: 3px; padding: 3px 5px; }
.g-ms { gap: 7px; opacity: .35; transform: translateY(10px); transition: opacity .45s, transform .45s; }
.g-ms.on { opacity: 1; transform: none; }
.g-ms-h { display: flex; justify-content: space-between; align-items: center; }
.g-ms .g-fase { background: var(--app); color: #fff; padding: 4px 8px; border-radius: 4px; }
.g-pts { display: flex; gap: 4px; }
.g-pts i { width: 18px; height: 6px; border-radius: 3px; background: var(--app-l); }
.g-pts i.on { background: var(--app); }
.g-ms h3 { font: 400 1.35rem/1.05 var(--f-tit); letter-spacing: -.02em; }
.g-ms p { font: 400 .72rem/1.4 var(--f-txt); color: #44524a; }
.g-chips { display: flex; gap: 7px; }
.g-chips > span { flex: 1; min-width: 0; border-radius: 8px; padding: 6px 9px; background: var(--app-f); border: 1px solid #c4dccf; }
.g-chips small { display: block; font: 400 .48rem var(--f-mono); color: var(--app-e); text-transform: uppercase; letter-spacing: .06em; }
.g-chips b { font: 700 1rem var(--f-mono); color: var(--app-e); white-space: nowrap; }
.g-dur { background: #fff !important; border-color: var(--app-l) !important; }
.g-dur b { font-size: .8rem; color: var(--app-t); }
.g-fases { list-style: none; padding: 0; display: grid; gap: 4px; margin-top: 2px; }
.g-fases li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font: 600 .62rem var(--f-txt); padding: 5px 8px; border: 1px solid var(--app-l); border-radius: 7px; color: var(--app-c); opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s; }
.g-fases li.vis { opacity: 1; transform: none; }
.g-fases li.on { color: var(--app-t); border-color: var(--app); background: var(--app-f); }
.g-fases i { width: 15px; height: 15px; border-radius: 4px; background: var(--app-l); color: #fff; font: 700 .48rem var(--f-mono); font-style: normal; display: grid; place-items: center; }
.g-fases li.on i { background: var(--app); }
.g-fases small { font: 400 .46rem var(--f-mono); text-transform: uppercase; }
.g-ir { margin-top: auto; border: 0; border-radius: 8px; background: var(--app); color: #fff; font: 700 .76rem var(--f-txt); padding: 10px; box-shadow: 0 4px 0 var(--app-e); transition: transform .15s, box-shadow .15s, background .15s; }
.g-ir.pulsa { animation: g-pulsa .9s ease-in-out infinite; }
.g-ir.press { transform: translateY(4px); box-shadow: 0 0 0 var(--app-e); background: var(--app-e); }
.g-m .g-toast { left: 26%; top: auto; bottom: 12px; transform: translate(-50%, 180%); border-left-color: var(--app); }
.g-m .g-toast.on { transform: translate(-50%, 0); }

.g-obs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.g-obs small { font: 700 .46rem var(--f-mono); letter-spacing: .08em; color: var(--app-c); margin-right: 2px; }
.g-obs span { font: 400 .48rem var(--f-mono); border: 1px dashed #b9c3bc; border-radius: 4px; padding: 2px 6px; color: #44524a; white-space: nowrap; }

/* A gôndola: painel de fundo escuro, tábua com borda, trilho de preço e sombra das embalagens */
.g-gd { position: relative; flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); background: #dfe5df; border: 1px solid var(--app-l); border-radius: 10px; overflow: hidden; }
.g-prat { position: relative; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 9px 12px 0; }
.g-prat::before { content: ""; position: absolute; left: 0; right: 0; bottom: 23px; height: 8px; background: rgba(17, 17, 17, .1); }
.g-prat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 23px; background: #f4f6f2; border-top: 4px solid #cbd3cc; box-shadow: inset 0 -3px 0 #c0c9c1, inset 0 3px 0 #fff; }
.g-prat-n { position: absolute; left: 5px; top: 3px; font: 400 .42rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #94a099; }
.g-pk { position: relative; z-index: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 3px; }
.g-pk::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 23px; height: 5px; border-radius: 50%; background: rgba(17, 17, 17, .16); }
.g-emb { position: relative; flex: 1 1 0; min-height: 0; max-height: 100px; width: min(72%, 82px); margin-top: auto; border-radius: 6px; display: flex; align-items: flex-end; justify-content: center;
  transition: transform .25s, outline-color .25s; outline: 2.5px solid transparent; outline-offset: 3px; }
.g-emb svg { display: block; width: 100%; height: 100%; }
.g-emb svg text { pointer-events: none; }
.g-etq { position: relative; z-index: 2; margin-top: 4px; height: 17px; line-height: 14px; background: #fff; border: 1.5px solid #111; border-left: 6px solid var(--cor2); outline: 0; border-radius: 2px; padding: 0 5px; font: 700 .56rem/14px var(--f-mono); color: #111; box-shadow: -1.5px 0 0 #111, 0 2px 0 rgba(17, 17, 17, .2); }
.g-etq::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 4px; margin-left: -5px; background: #b7c0b8; border-radius: 2px 2px 0 0; }
.g-pk.foco .g-emb { outline-color: var(--app); transform: translateY(-3px); }
.g-pk.pulo .g-emb { animation: g-pulo .5s ease; }
.g-pk.falta .g-emb { outline-color: transparent !important; border: 1.5px dashed #a7b2aa; border-radius: 6px; transform: none !important; }
.g-pk.falta .g-emb svg { visibility: hidden; }
.g-pk.falta::before { display: none; }
.g-pk.treme .g-emb { animation: g-treme .4s ease 2; }
.g-faixa { position: absolute; left: -12%; right: -12%; top: 50%; margin-top: -7px; background: #111; color: #fff; font: 700 .38rem/14px var(--f-mono); font-style: normal; letter-spacing: .04em; text-align: center; transform: rotate(-9deg); white-space: nowrap; }

/* Cena 2: compra ao vivo */
.g-c { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 31%; gap: 10px; }
.g-c-esq { min-height: 0; min-width: 0; display: flex; }
.g-c .g-toast { left: 34.5%; top: 14px; }
.g-lado { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.g-lado > div { background: #fff; border: 1px solid var(--app-l); border-radius: 9px; padding: 7px 10px; }
.g-lado .g-mi { background: var(--app); border-color: var(--app); color: #fff; display: flex; align-items: center; gap: 8px; }
.g-mi > div { min-width: 0; }
.g-busto { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: #fff; }
.g-busto svg, .g-user svg { display: block; width: 100%; height: 100%; }
.g-user { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--app-l); background: #fff; }
.g-mi .g-fase { opacity: .85; display: block; }
.g-mi b { font: 700 .78rem var(--f-txt); }
.g-rel { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.g-lado small { font: 400 .48rem var(--f-mono); color: var(--app-c); text-transform: uppercase; letter-spacing: .04em; }
.g-rel b { font: 700 .92rem var(--f-mono); }
.g-vb-h { display: flex; align-items: baseline; gap: 4px; margin-bottom: 5px; flex-wrap: wrap; }
.g-vb-t { font: 700 .82rem var(--f-mono); display: inline-block; }
.g-vb-t.muda { animation: g-muda .7s ease 2; }
.g-vb-r { margin-left: auto; font: 700 .5rem var(--f-mono); font-style: normal; color: var(--app-e); white-space: nowrap; }
.g-vb-tr { height: 9px; border-radius: 5px; background: #e8ece8; overflow: hidden; }
.g-vb-tr i { display: block; height: 100%; width: 0; background: var(--app); transition: width .5s ease, background .3s; }
.g-vb.estouro .g-vb-tr i { background: var(--cor); }
.g-vb.estouro .g-vb-r { color: var(--cor); }
.g-lado .g-vb.estouro { border-color: var(--cor); }
.g-cart { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.g-cart-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.g-cart-h b { font: 700 .68rem var(--f-txt); }
.g-cart-h span { font: 400 .5rem var(--f-mono); color: var(--app-c); }
.g-cart-l { list-style: none; padding: 0; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.g-cart-l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; font: 600 .62rem var(--f-txt); opacity: 0; transform: translateX(12px); transition: opacity .3s, transform .3s, color .3s; }
.g-cart-l li.on { opacity: 1; transform: none; }
.g-cart-l li i { width: 13px; height: 16px; display: block; }
.g-cart-l li i svg { display: block; width: 100%; height: 100%; }
.g-cart-l li b { font: 400 .58rem var(--f-mono); }
.g-cart-l li.alerta { color: var(--cor); }
.g-cart-l li.fora { opacity: .3; text-decoration: line-through; }
.g-tot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed #b9c3bc; padding-top: 5px; margin-top: 4px; font: 600 .6rem var(--f-txt); }
.g-tot b { font: 700 .86rem var(--f-mono); }
.g-log ul { list-style: none; padding: 0; margin-top: 3px; display: grid; gap: 2px; min-height: 3.4em; }
.g-log li { display: flex; gap: 5px; font: 400 .5rem/1.3 var(--f-mono); color: #44524a; white-space: nowrap; overflow: hidden; }
.g-log li b { font-weight: 700; color: var(--app-c); }
.g-log li.poe b { color: var(--app-e); } .g-log li.tira b { color: var(--cor); } .g-log li.troca b { color: #a66f00; }
.g-cur { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; transition: transform .62s cubic-bezier(.45, .05, .2, 1); }
.g-cur svg { display: block; width: 24px; height: 28px; margin: -2px 0 0 -11px; }
.g-cur i { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--app); opacity: 0; }
.g-cur.para i { animation: g-anel 1s ease-out infinite; }
.g-selo-ok { position: absolute; z-index: 5; left: 34.5%; top: 44%; transform: translate(-50%, -50%) rotate(-8deg) scale(1.7); opacity: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), opacity .25s;
  background: #fff; color: var(--app-e); border: 3px solid var(--app-e); border-radius: 6px; padding: 7px 14px; font: 400 .95rem var(--f-tit); white-space: nowrap; }
.g-selo-ok.on { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }

/* Cenas 3 e 4: painel */
.g-d { height: 100%; display: flex; flex-direction: column; gap: 8px; }
.g-top { display: flex; align-items: center; gap: 10px; }
.g-logo { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; min-width: 0; }
.g-logo i { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 6px; background: var(--app); }
.g-logo b { font: 700 .74rem/1.1 var(--f-txt); white-space: nowrap; }
.g-logo small { font: 400 .5rem var(--f-txt); color: var(--app-c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-guias { margin-left: auto; display: flex; background: #e8ece8; border-radius: 8px; padding: 2px; }
.g-guias span { font: 600 .58rem var(--f-txt); padding: 4px 10px; border-radius: 6px; color: #5d6a62; white-space: nowrap; }
.g-guias span.on { background: #fff; color: var(--app-e); font-weight: 700; }
.g-n { font: 700 .5rem var(--f-mono); background: var(--app-f); color: var(--app-e); border: 1px solid #c4dccf; border-radius: 20px; padding: 4px 8px; white-space: nowrap; }
.g-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.g-kpi { background: #fff; border: 1px solid var(--app-l); border-radius: 9px; padding: 7px 10px; min-width: 0; }
.g-kpi small { display: block; font: 400 .5rem/1.2 var(--f-txt); color: var(--app-c); }
.g-kpi b { font: 400 1.15rem/1.15 var(--f-tit); color: var(--app-e); }
.g-d-c { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: 8px; }
.g-mapa { gap: 0; }
.g-gd.calor { border: 0; border-radius: 6px; }
.g-gd.calor .g-prat { padding: 7px 6px 0; gap: 4px; }
.g-cel { position: absolute; inset: 7px 0 25px 0; border-radius: 4px; display: grid; place-items: center; font: 700 .66rem var(--f-mono); opacity: 0; transform: scale(.7); transition: opacity .4s, transform .4s; }
.g-cel.on { opacity: .84; transform: none; }
.g-leg { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 6px; }
.g-leg i { width: 18px; height: 8px; }
.g-leg small { font: 400 .46rem var(--f-mono); color: var(--app-c); margin: 0 3px; }
.g-fat { gap: 0; justify-content: flex-start; }
.g-bar { display: grid; grid-template-columns: auto 44px minmax(0, 1fr) 26px; gap: 6px; align-items: center; font: 600 .6rem var(--f-txt); padding: 5px 0; border-top: 1px solid #eef2ee; opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .35s; }
.g-bar.on { opacity: 1; transform: none; }
.g-bar > i { width: 9px; height: 9px; border-radius: 2px; }
.g-bar .tr { height: 9px; background: #eef2ee; border-radius: 2px; overflow: hidden; }
.g-bar u { display: block; height: 100%; width: 0; background: var(--app); transition: width .9s ease; text-decoration: none; }
.g-bar b { font: 700 .54rem var(--f-mono); text-align: right; }

.g-t { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.g-qd { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 4px; padding: 9px 10px 7px 6px; }
.g-ey { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font: 700 .5rem var(--f-mono); color: var(--app-c); text-transform: uppercase; letter-spacing: .08em; }
.g-ex { grid-column: 2; text-align: center; font: 700 .5rem var(--f-mono); color: var(--app-c); text-transform: uppercase; letter-spacing: .08em; }
.g-plano { position: relative; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.g-q { border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; min-width: 0; opacity: 0; transition: opacity .4s; }
.g-q.on { opacity: 1; }
.g-q b { font: 700 .62rem/1.15 var(--f-txt); }
.g-q small { font: 400 .45rem/1.25 var(--f-mono); color: #5d6a62; }
.g-q em { font: 700 .42rem var(--f-mono); font-style: normal; color: var(--app-c); }
.q-ca { background: #dcefe4; text-align: right; align-items: flex-end; }
.q-ca b { color: var(--app-e); }
.q-fi { background: #e4ecfa; }
.q-in { background: #efefec; justify-content: flex-end; }
.q-at { background: #fff0b3; justify-content: flex-end; text-align: right; align-items: flex-end; }
.g-pt { position: absolute; z-index: 2; width: 0; height: 0; opacity: 0; transform: translateY(-46px); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.g-pt.on { opacity: 1; transform: none; }
.g-pt i { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: var(--t); border: 2px solid #fff; box-shadow: 0 0 0 1px #111; display: grid; place-items: center; font: 700 .42rem var(--f-mono); font-style: normal; }
.g-pt u { display: none; position: absolute; left: 15px; top: -7px; font: 700 .5rem/14px var(--f-txt); background: #fff; border: 1px solid #111; border-radius: 3px; padding: 0 4px; text-decoration: none; white-space: nowrap; }
.g-pt.rot u { display: block; }
.g-pt.esq u { left: auto; right: 15px; }
.g-col { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.g-subs { flex: 1 1 0; }
.g-sub { display: flex; align-items: center; gap: 5px; font: 600 .62rem var(--f-txt); padding: 5px 0; border-top: 1px solid #eef2ee; opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .35s; }
.g-sub.on { opacity: 1; transform: none; }
.g-sub i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.g-sub em { font-style: normal; color: var(--app-c); }
.g-sub b { margin-left: auto; font: 700 .58rem var(--f-mono); background: var(--app-f); color: var(--app-e); border-radius: 10px; padding: 1px 7px; }
.g-ar { flex: 1.1 1 0; }
.g-ar-l { display: flex; align-items: center; gap: 3px; }
.g-ar-l i { width: 7px; height: 7px; border-radius: 1px; display: inline-block; }
.g-ar-l i.a, .g-arl u.a { background: var(--app); }
.g-ar-l i.r, .g-arl u.r { background: var(--cor); }
.g-ar-l i.r { margin-left: 4px; }
.g-arl { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; align-items: center; font: 600 .58rem var(--f-txt); padding: 4px 0; border-top: 1px solid #eef2ee; opacity: 0; transition: opacity .35s; }
.g-arl.on { opacity: 1; }
.g-arl .bs { display: grid; gap: 2px; }
.g-arl .bs div { display: flex; align-items: center; gap: 4px; }
.g-arl u { display: block; height: 6px; width: 0; max-width: calc(100% - 30px); border-radius: 1px; transition: width .8s ease; text-decoration: none; }
.g-arl b { font: 700 .44rem var(--f-mono); }

@keyframes g-pulsa { 50% { transform: scale(1.03); box-shadow: 0 4px 0 var(--app-e), 0 0 0 5px rgba(61, 139, 110, .2); } }
@keyframes g-pulo { 30% { transform: translateY(-14px) rotate(-4deg); } 60% { transform: translateY(-4px) scale(.94); } }
@keyframes g-treme { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes g-anel { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes g-muda { 50% { color: var(--cor); transform: scale(1.18); } }

@media (max-width: 1080px) {
  .heroi { grid-template-columns: minmax(0, 1fr); }
  .palco { margin-top: 34px; margin-right: 10px; }
  .palco::after { right: -8px; top: -58px; }
}
@media (max-width: 720px) {
  .topo::after { height: 9px; background-size: 42px 9px; }
  .sec > .sobre::before { font-size: 2rem; }
  .sec > .sobre { margin-bottom: 20px; }
  .pc-abas { padding-right: 6px; }
  .g-obs { display: none; }
  .g-m .g-toast { left: 50%; top: 44px; bottom: auto; transform: translate(-50%, -160%); }
  .g-trilha { display: flex; }
  .g-trilha li { flex: 1 1 0; }
  .g-trilha li.on { flex: 0 0 auto; padding-left: 4px; padding-right: 4px; }
  .palco { aspect-ratio: auto; margin-top: 70px; margin-right: 8px; box-shadow: 6px 6px 0 var(--cor2), 6px 6px 0 3px var(--tinta); }
  .palco::after { width: 84px; height: 84px; font-size: .6rem; right: -4px; top: -82px; }
  .pc-aba b { font-size: .58rem; }
  .tcs .tc { border: 2.5px solid var(--tinta); }
  blockquote { transform: none; padding: 18px 20px; }
  .pv { padding: 36px 16px 46px; transform: none !important; }
  .pv b { white-space: normal; font-size: 1.6rem; }
  .pv::after { left: 16px; width: 96px; }
  .cx:first-child { padding: 34px 20px 80px; }
  .sec.fim { box-shadow: 6px 6px 0 var(--tinta); margin-bottom: 56px; }
  .cena { padding: 8px; }

  .g-m { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 7px; }
  .g-trilha li span { display: none; }
  .g-trilha li.on span { display: inline; }
  .g-trilha li { justify-content: center; }
  .g-av { padding: 8px 10px; gap: 6px; }
  .g-avs { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 46px; gap: 5px; flex: none; }
  .g-a { border-width: 2px; border-radius: 8px; }
  .g-a u { width: 13px; height: 13px; right: 2px; top: 2px; font-size: .44rem; }
  .g-selos .ids { display: none; }
  .g-ms { padding: 9px 11px; gap: 5px; }
  .g-ms h3 { font-size: 1.1rem; }
  .g-ms p { font-size: .66rem; }
  .g-chips b { font-size: .84rem; }
  .g-fases li { padding: 4px 7px; font-size: .58rem; }

  .g-c { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 7px; }
  .g-c .g-toast, .g-selo-ok { left: 50%; }
  .g-selo-ok { top: 30%; font-size: .8rem; }
  .g-prat { padding: 7px 6px 0; gap: 3px; }
  .g-emb { width: min(78%, 64px); }
  .g-emb .fl, .g-emb .pw { display: none; }
  .g-prat::after { height: 20px; border-top-width: 3px; }
  .g-prat::before { bottom: 20px; height: 6px; }
  .g-pk::before { bottom: 20px; }
  .g-etq::after { display: none; }
  .g-busto { width: 26px; height: 26px; }
  .g-user { display: none; }
  .g-etq { height: 15px; font-size: .5rem; line-height: 12px; margin-top: 4px; padding: 0 3px; border-left-width: 4px; }
  .g-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
  .g-lado > div { padding: 5px 8px; }
  .g-mi b { font-size: .66rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .g-rel b { font-size: .8rem; }
  .g-vb, .g-cart { grid-column: 1 / -1; }
  .g-cart-l { flex-direction: row; flex-wrap: wrap; gap: 2px 8px; height: 34px; flex: none; }
  .g-cart-l li { display: inline-flex; gap: 4px; font-size: .56rem; align-items: center; }
  .g-cart-l li i { width: 10px; height: 13px; }
  .g-tot { margin-top: 3px; padding-top: 3px; }
  .g-log { display: none; }

  .g-logo small, .g-n { display: none; }
  .g-guias span { padding: 4px 7px; font-size: .54rem; }
  .g-kpis { gap: 4px; }
  .g-kpi { padding: 5px 6px; }
  .g-kpi small { font-size: .42rem; min-height: 2.4em; }
  .g-kpi b { font-size: .9rem; }
  .g-d-c { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
  .g-cartao { padding: 8px 9px; }
  .g-cel { inset: 0 0 21px 0; font-size: .56rem; }
  .g-bar { padding: 3px 0; }
  .g-bar:nth-of-type(n+6) { display: none; }
  .g-t { grid-template-rows: minmax(0, 1.5fr) auto; }
  .g-ar { display: none; }
  .g-subs { flex: none; }
  .g-sub { padding: 3px 0; font-size: .58rem; }
  .g-sub:nth-of-type(n+5) { display: none; }
  .g-q b { font-size: .54rem; }
  .g-q small { font-size: .4rem; }
  .g-pt i { width: 18px; height: 18px; left: -9px; top: -9px; font-size: .36rem; }
  .g-pt u { font-size: .44rem; }
}
@media (prefers-reduced-motion: reduce) { .g-ir.pulsa, .g-cur.para i, .g-pk.pulo .g-emb, .g-pk.treme .g-emb, .g-vb-t.muda { animation: none; } }