/* Community Lab: a credencial de evento e o mapa de gente. Papel frio com uma
   constelação discreta de nós ligados, tinta beringela, violeta elétrico para a
   ação e coral de cordão de crachá para o que acabou de acontecer. Cartões com
   faixa e furo de credencial, pílulas redondas, títulos largos em Unbounded.
   Cores chapadas, sem degradê: o padrão do fundo é um SVG repetido. */
:root {
  --fundo: #eef0f7; --sup: #ffffff; --sup2: #e3e6f1; --tinta: #1a1238; --tinta2: #4a4763; --fraco: #6c6a82;
  --linha: #d7d9e6; --cor: #5b2ee0; --cor-t: #ffffff; --cor2: #ff5c39;
  --esc: #1a1238; --esc-t: #eef0f7; --esc-f: rgba(238, 240, 247, .74);
  --raio: 14px; --raio-p: 999px; --sombra: 0 16px 40px -18px rgba(26, 18, 56, .34);
  --f-tit: 'Unbounded', system-ui, sans-serif; --f-txt: 'Onest', system-ui, sans-serif; --f-mono: 'Azeret Mono', ui-monospace, monospace;
  --tit-peso: 600; --tit-esp: -.02em;
  --violeta-s: #ece6ff; --coral-s: #ffe6de; --verde: #0e9f8a; --ambar: #e39b0b; --azul: #2f7de1; --magenta: #d6337a;
  --rede: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%231A1238' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M22 34 L78 62 L140 30 M78 62 L106 128 L34 146 M106 128 L166 150'/%3E%3C/g%3E%3Cg fill='%231A1238' fill-opacity='.11'%3E%3Ccircle cx='22' cy='34' r='2.4'/%3E%3Ccircle cx='78' cy='62' r='3.4'/%3E%3Ccircle cx='140' cy='30' r='2.2'/%3E%3Ccircle cx='106' cy='128' r='2.8'/%3E%3Ccircle cx='34' cy='146' r='2'/%3E%3Ccircle cx='166' cy='150' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  --rede-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%23EEF0F7' stroke-opacity='.08' stroke-width='1'%3E%3Cpath d='M22 34 L78 62 L140 30 M78 62 L106 128 L34 146 M106 128 L166 150'/%3E%3C/g%3E%3Cg fill='%23EEF0F7' fill-opacity='.13'%3E%3Ccircle cx='22' cy='34' r='2.4'/%3E%3Ccircle cx='78' cy='62' r='3.4'/%3E%3Ccircle cx='140' cy='30' r='2.2'/%3E%3Ccircle cx='106' cy='128' r='2.8'/%3E%3Ccircle cx='34' cy='146' r='2'/%3E%3Ccircle cx='166' cy='150' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
body { background: var(--fundo) var(--rede); font-feature-settings: "tnum" 1; }
h1 { font-size: clamp(2rem, 3.15vw, 2.9rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); letter-spacing: -.035em; line-height: 1.08; }
h3 { font-family: var(--f-txt); font-weight: 700; letter-spacing: -.01em; }
h1 em { color: var(--cor); font-style: normal; }
::selection { background: var(--cor2); color: #fff; }

.topo { background: color-mix(in srgb, var(--fundo) 92%, transparent); }
.cassi { font: 600 .98rem var(--f-tit); letter-spacing: -.04em; }
.prod { display: inline-flex; align-items: center; gap: 8px; font: 600 .86rem var(--f-tit); letter-spacing: -.03em; }
.simbolo { width: 26px; height: 26px; flex: none; }
.links a { font-weight: 500; }
.idiomas a[aria-current] { background: var(--tinta); color: var(--fundo); }
.btn { font-weight: 600; border-color: var(--tinta); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--tinta); }
.btn-p { border-color: var(--cor); }
.btn-p:hover { box-shadow: 0 4px 0 var(--tinta); }
.sobre { font: 500 .7rem var(--f-mono); letter-spacing: .14em; color: var(--cor); display: inline-flex; align-items: center; gap: 10px; }
.sobre::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cor2); box-shadow: 13px 0 0 -1px var(--cor), 24px 0 0 -2px var(--tinta); margin-right: 24px; }
.lede { color: var(--tinta2); font-size: 1.1rem; }

/* Herói: texto à esquerda, o palco à direita, tudo na primeira tela */
@media (min-width: 1081px) {
  .heroi { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 3.4vw, 52px); padding-top: clamp(28px, 3.2vw, 46px); }
  .heroi .lede { font-size: 1.02rem; margin-top: 18px; }
  .heroi .cta { margin-top: 24px; }
  .heroi .sobre { margin-bottom: 14px; }
  .palco { aspect-ratio: 16 / 12.8 !important; }
}
@media (min-width: 721px) { .palco { aspect-ratio: 16 / 12; } }
.palco { container-type: inline-size; border: 2px solid var(--tinta); border-radius: 22px; box-shadow: 0 10px 0 -2px var(--sup2), 0 10px 0 0 var(--tinta); background: var(--sup); }
.ilus { font-family: var(--f-mono); }

/* Cartões como credenciais de evento: faixa colorida no topo e o furo do cordão */
.tcs { background: none; border: 0; gap: 16px; overflow: visible; }
.tc { position: relative; background: var(--sup); border: 1px solid var(--linha) !important; border-radius: 18px; padding: 44px 22px 26px; overflow: hidden; }
.tc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: var(--azul); }
.tc::after { content: ""; position: absolute; left: 50%; top: 8px; width: 38px; height: 9px; margin-left: -19px; border-radius: 6px; background: var(--fundo); border: 1px solid rgba(26, 18, 56, .25); }
.tc:nth-child(1)::before { background: var(--tinta); }
.tc:nth-child(2)::before { background: var(--ambar); }
.tc:nth-child(3)::before { background: var(--cor2); }
.tc-cassi { background: var(--violeta-s); border-color: var(--cor) !important; }
.tc-cassi::before { background: var(--cor); }
.tc-cassi h3 { color: var(--tinta); }
.tag { font: 500 .6rem var(--f-mono); letter-spacing: .1em; border-radius: 999px; color: var(--tinta2); background: var(--fundo); border-color: var(--linha); padding: 3px 9px; }
.tc-cassi .tag { color: var(--cor); background: var(--sup); border-color: var(--cor); }
blockquote { border-left: 0; padding-left: 0; font: 600 clamp(1.2rem, 2.1vw, 1.7rem)/1.25 var(--f-tit); letter-spacing: -.03em; font-style: normal; display: flex; gap: 16px; align-items: flex-start; }
blockquote::before { content: ""; flex: none; width: 36px; height: 36px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M27 20 L35 33' stroke='%231A1238' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='15.5' cy='22' r='9.5' fill='none' stroke='%231A1238' stroke-width='3.4'/%3E%3Ccircle cx='26' cy='18' r='8' fill='%235B2EE0'/%3E%3Ccircle cx='35' cy='33' r='4.6' fill='%23FF5C39'/%3E%3C/svg%3E") center / contain no-repeat; }

.rl { border-top: 1px solid var(--linha); }
.rl:last-child { border-bottom: 1px solid var(--linha); }
.rl h3 { font: 600 clamp(1.02rem, 1.5vw, 1.24rem)/1.3 var(--f-tit); letter-spacing: -.03em; }
.et b { font: 600 .7rem var(--f-mono); letter-spacing: .1em; display: inline-flex; align-items: center; gap: 8px; }
.et b::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--cor); flex: none; }
.rl:nth-child(2) .et b::before { background: var(--cor2); }
.rl:nth-child(3) .et b::before { background: var(--verde); }
.rl:nth-child(4) .et b::before { background: var(--ambar); }
.rl:nth-child(5) .et b::before { background: var(--azul); }
.rl:nth-child(6) .et b::before { background: var(--magenta); }
.et span { font-family: var(--f-mono); }

.sec-esc { background: var(--esc) var(--rede-c); }
.ps { border-radius: 16px; border: 1px solid rgba(238, 240, 247, .2); background: rgba(238, 240, 247, .05); }
.ps .n { font: 600 .74rem var(--f-mono); color: var(--tinta); background: var(--cor2); border-radius: 999px; height: 26px; min-width: 26px; padding: 0 6px; display: grid; place-items: center; }
.ps h3 { font: 600 1.02rem/1.25 var(--f-tit); letter-spacing: -.02em; }
.ps .gt { font-family: var(--f-mono); color: #ffb39f !important; }
.sec-esc .sobre { color: #b9a6ff; }
.sec-esc .sobre::before { box-shadow: 13px 0 0 -1px #b9a6ff, 24px 0 0 -2px var(--esc-t); }

.pv { position: relative; border-radius: 18px; border-color: var(--linha); overflow: hidden; padding-top: 30px; }
.pv::before { content: ""; position: absolute; left: 24px; top: 14px; width: 28px; height: 6px; border-radius: 4px; background: var(--sup2); }
.pv b { color: var(--cor); font-weight: 600; letter-spacing: -.05em; }
.pv:nth-child(2) b { color: var(--cor2); }
.pv:nth-child(3) b { color: var(--verde); }
.pv:nth-child(4) b { color: var(--tinta); }
.cx { border-radius: 18px; }
.cx h3 { font: 600 1.15rem var(--f-tit); letter-spacing: -.03em; }
.nao li::before { color: var(--cor2); }
.sim li::before { content: "●"; color: var(--cor); font-size: .7rem; top: 4px; }
.fq summary h3 { font-weight: 600; }
.fq summary::after { color: var(--cor2); }
.fc { border-radius: 18px; border: 2px solid var(--tinta); }
.fc input, .fc textarea { border-radius: 10px; }
.fc label span { font-family: var(--f-mono); font-weight: 500; }
.fim h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); }

/* ================= Palco ================= */
.pc { color: var(--tinta); font-family: var(--f-txt); }
.pc-abas { background: var(--tinta); border-bottom: 0; gap: 5px; padding: 7px; }
.pc-aba { border-radius: 10px; padding: 6px 9px; color: rgba(238, 240, 247, .72); }
.pc-aba i { color: var(--cor2); opacity: 1; }
.pc-aba b { font: 600 .66rem var(--f-mono); letter-spacing: .01em; }
.pc-aba small { font: 400 .6rem var(--f-txt); }
.pc-aba:hover { background: rgba(238, 240, 247, .08); }
.pc-aba[aria-selected="true"] { background: var(--cor); color: #fff; }
.pc-aba[aria-selected="true"] i { color: #fff; }
.pc-prog { background: var(--cor2); height: 3px; }
.cena { padding: 0; }

.cl { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; background: var(--sup); }
.cl-bar { display: flex; align-items: center; gap: 14px; padding: 7px 14px; background: var(--sup); border-bottom: 1px solid var(--linha); flex: none; }
.cl-bar .mc { display: flex; align-items: center; gap: 7px; font: 600 .74rem var(--f-tit); letter-spacing: -.03em; white-space: nowrap; }
.cl-bar .mc svg { width: 19px; height: 19px; }
.cl-bar nav { display: flex; gap: 14px; margin-left: auto; }
.cl-bar nav span { font-size: .66rem; font-weight: 500; color: var(--tinta2); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cl-bar nav span.on { color: #fff; font-weight: 600; background: var(--tinta); }
.cl-bar .eu { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: var(--violeta-s); border: 1.5px solid var(--cor); flex: none; }
.cl-bar .eu img { width: 100%; display: block; }
.cl-corpo { position: relative; flex: 1; min-height: 0; padding: 11px 14px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--fundo); }
.cl-ey { font: 500 .56rem var(--f-mono); letter-spacing: .12em; color: var(--cor); text-transform: uppercase; }
.cl-h { font: 600 1.02rem/1.1 var(--f-tit); letter-spacing: -.04em; }
.cl-m { font: 400 .6rem var(--f-mono); color: var(--tinta2); }
.cl-av { border-radius: 50%; overflow: hidden; flex: none; border: 2px solid var(--sup); box-shadow: 0 0 0 1.6px var(--anel, var(--tinta)); }
.cl-av img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cl-tag { display: inline-block; font: 600 .5rem var(--f-mono); letter-spacing: .08em; padding: 2px 7px; color: var(--cor); background: var(--violeta-s); border-radius: 999px; white-space: nowrap; }
.cl-tag.t1 { color: #b8360f; background: var(--coral-s); }
.cl-tag.t3 { color: #0a7263; background: #d5f2ec; }
.cl-tag.t4 { color: #8a5a00; background: #fdefcf; }
.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: 600 .62rem var(--f-txt); padding: 6px 12px; border-radius: 999px; background: var(--cor); color: #fff; white-space: nowrap; transition: transform .16s ease, background .16s ease; }
.cl-btn.sec { background: var(--sup); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.cl-btn.apertado { transform: scale(.93); background: var(--tinta); }
.cl-sup { background: var(--sup); border: 1px solid var(--linha); border-radius: 14px; }
.cl-sub { font: 500 .5rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta2); }
.cl-link { font: 600 .6rem var(--f-txt); color: var(--cor); }

/* --- mapa --- */
.cl-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex: none; }
.cl-vivo { display: inline-flex; align-items: center; gap: 6px; font: 400 .6rem var(--f-mono); color: var(--tinta2); background: var(--sup); border: 1px solid var(--linha); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.cl-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--cor2); box-shadow: 0 0 0 3px var(--coral-s); animation: cl-pulsa 1.6s ease-in-out infinite; }
.cl-vivo b { font-weight: 600; color: var(--tinta); }
@keyframes cl-pulsa { 50% { box-shadow: 0 0 0 6px transparent; } }
.cl-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; }
.cl-seg { display: inline-flex; border-radius: 999px; padding: 3px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--linha); }
.cl-seg span { font: 600 .6rem var(--f-txt); padding: 4px 11px; border-radius: 999px; color: var(--tinta2); transition: background .24s ease, color .24s ease; white-space: nowrap; }
.cl-seg span.on { background: var(--tinta); color: #fff; }
.cl-leg { display: flex; flex-wrap: wrap; gap: 3px 12px; min-height: 13px; flex: 1; min-width: 0; }
.cl-leg span { font: 400 .56rem var(--f-mono); color: var(--tinta2); display: inline-flex; align-items: center; gap: 5px; opacity: 0; transform: translateY(3px); transition: opacity .3s ease, transform .3s ease; white-space: nowrap; }
.cl-leg span.ok { opacity: 1; transform: none; }
.cl-leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cl-leg b { font-weight: 500; color: var(--fraco); }
.cl-corpo > .cl-leg { flex: none; }
.cl-mapa { position: relative; flex: 1; min-height: 0; background: var(--sup); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; transition: background .6s ease; }
.cl-mapa > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-halo { transition: opacity .45s ease; }
.cl-halo text { font: 500 10px var(--f-mono); }
.cl-nd { transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; }
.cl-nd.apagado { opacity: .2; }
.cl-in { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.cl-lg { opacity: .34; transition: stroke-dashoffset 1s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; }
.cl-lf { opacity: .9; transition: stroke-dashoffset .8s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.cl-zoom { position: absolute; right: 8px; bottom: 8px; display: grid; gap: 4px; z-index: 1; }
.cl-zoom span { width: 22px; height: 22px; display: grid; place-items: center; background: var(--sup); border: 1px solid var(--linha); border-radius: 50%; font: 500 .74rem var(--f-mono); color: var(--tinta2); }
.cl-ficha { position: absolute; width: 220px; background: var(--sup); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra); padding: 18px 12px 11px; opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .24s ease, transform .24s ease; pointer-events: none; overflow: hidden; z-index: 2; }
.cl-ficha.on { opacity: 1; transform: none; }
.cl-ficha::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--faixa, var(--cor)); }
.cl-ficha .cab { display: flex; gap: 9px; align-items: center; margin-bottom: 7px; }
.cl-ficha .nm { font: 600 .74rem/1.15 var(--f-tit); letter-spacing: -.03em; }
.cl-ficha .l { font: 400 .5rem/1.5 var(--f-mono); letter-spacing: .04em; color: var(--tinta2); }
.cl-ficha .tags { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 7px; }
.cl-ficha .tags span { font: 500 .52rem var(--f-txt); background: var(--fundo); border-radius: 999px; padding: 2px 7px; }
.cl-ficha .cz { font: 500 .54rem var(--f-mono); color: var(--cor); background: var(--violeta-s); border-radius: 8px; padding: 4px 7px; margin-bottom: 7px; }
.cl-ficha .pe { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cl-ficha .md { display: flex; gap: 3px; }
.cl-ficha .md svg { width: 20px; height: 20px; }
.cl-toast { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; background: var(--tinta); color: #fff; border-radius: 999px; box-shadow: var(--sombra); font: 500 .62rem var(--f-txt); white-space: nowrap; opacity: 0; transition: opacity .3s ease, transform .3s ease; z-index: 3; max-width: calc(100% - 20px); overflow: hidden; }
.cl-toast.on { opacity: 1; transform: translate(-50%, 0); }
.cl-toast b { font-weight: 700; }
.cl-toast i { width: 16px; height: 16px; border-radius: 50%; background: var(--verde); display: grid; place-items: center; color: #fff; font: 700 .52rem var(--f-txt); font-style: normal; flex: none; }

/* --- o Network com o celular ao lado --- */
.cl-net { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; }
.cl-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.cl-leg { display: none !important; }

/* O celular: moldura de tinta, botão lateral coral, tela no papel da marca */
.cl-fone { position: relative; background: var(--tinta); border-radius: 26px; padding: 6px; min-height: 0; display: flex; box-shadow: 0 7px 0 -2px var(--sup2), 0 7px 0 0 var(--tinta); align-self: stretch; }
.cl-fone::after { content: ""; position: absolute; right: -4px; top: 74px; width: 4px; height: 30px; border-radius: 0 3px 3px 0; background: var(--cor2); }
.fn-tela { flex: 1; min-width: 0; min-height: 0; background: var(--fundo); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.fn-st { display: flex; align-items: center; justify-content: space-between; padding: 7px 13px 0; font: 600 .5rem var(--f-mono); color: var(--tinta); flex: none; }
.fn-st i { width: 40px; height: 11px; background: var(--tinta); border-radius: 999px; }
.fn-mc { display: flex; align-items: center; gap: 5px; padding: 8px 11px 5px; font: 600 .64rem var(--f-tit); letter-spacing: -.04em; flex: none; }
.fn-mc svg { width: 15px; height: 15px; }
.fn-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 3px 9px 7px; overflow: hidden; }
.fn-corpo.entra { animation: cl-fone-entra .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes cl-fone-entra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.fn-corpo > .cl-ey { font-size: .48rem; }
.fn-quem { display: none; }
.fn-eu { position: relative; display: flex; align-items: center; gap: 7px; background: var(--sup); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 8px 7px; overflow: hidden; flex: none; }
.fn-eu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--faixa, var(--cor)); }
.fn-eu div, .fn-it div { min-width: 0; display: grid; }
.fn-eu b { font: 600 .64rem/1.15 var(--f-tit); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-eu small { font: 400 .48rem/1.4 var(--f-mono); color: var(--tinta2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-eu .tg { display: flex; gap: 3px; margin-top: 3px; overflow: hidden; }
.fn-eu .tg i:first-child { flex: none; }
.fn-eu .tg i { font: 500 .46rem var(--f-txt); font-style: normal; background: var(--fundo); border-radius: 999px; padding: 1px 6px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.fn-t { font: 600 .6rem var(--f-txt); color: var(--tinta); margin-top: 1px; flex: none; }
.fn-lista { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.fn-it { display: flex; align-items: center; gap: 7px; background: var(--sup); border: 1px solid transparent; border-radius: 12px; padding: 5px 6px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease, background .3s ease, border-color .3s ease; }
.fn-it.on { opacity: 1; transform: none; }
.fn-it.esc { background: var(--violeta-s); border-color: var(--cor); }
.fn-it .cl-av { border-width: 1.5px; }
.fn-it b { font: 600 .6rem/1.2 var(--f-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-it small { font: 400 .5rem/1.28 var(--f-txt); color: var(--tinta2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fn-env { margin-left: auto; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--cor); color: #fff; }
.fn-env svg { width: 10px; height: 10px; }
.fn-abas { display: flex; border-top: 1px solid var(--linha); background: var(--sup); padding: 6px 2px 9px; flex: none; }
.fn-abas span { position: relative; flex: 1 1 auto; min-width: 0; padding: 0 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--tinta2); }
.fn-abas span.on { color: var(--cor); }
.fn-abas svg { width: 15px; height: 15px; }
.fn-abas small { font: 600 .44rem var(--f-txt); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-abas em { position: absolute; top: -4px; left: calc(50% + 3px); min-width: 13px; height: 13px; border-radius: 999px; background: var(--cor2); color: #fff; font: 700 .46rem/13px var(--f-mono); font-style: normal; text-align: center; padding: 0 3px; box-shadow: 0 0 0 2px var(--sup); }
.cl-fone.sg .fn-it { padding: 6px; }
.cl-net .cl-ficha { width: 196px; padding: 15px 10px 9px; }
.cl-net .cl-ficha .tags span:nth-child(n+3) { display: none; }


/* --- contextos --- */
.cl-ctx { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }
.cl-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.cl-chips span { display: inline-flex; align-items: center; gap: 6px; font: 600 .6rem var(--f-txt); padding: 4px 11px 4px 8px; border-radius: 999px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--linha); color: var(--tinta2); transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.cl-chips span i { width: 8px; height: 8px; border-radius: 50%; }
.cl-chips span.on { background: var(--tinta); color: #fff; box-shadow: none; }
.cl-por { display: inline-flex; align-items: center; gap: 7px; background: var(--sup); border-radius: 999px; padding: 4px 11px; box-shadow: inset 0 0 0 1px var(--linha); white-space: nowrap; }
.cl-por b { font: 600 .62rem var(--f-txt); color: var(--cor); }
.troca { opacity: 0; transform: translateY(3px); }
.tt, .nt, .cl-por b { transition: opacity .2s ease, transform .2s ease; }
.cl-motor { flex: none; font: 500 .56rem var(--f-mono); color: var(--tinta2); display: flex; align-items: center; gap: 7px; }
.cl-motor::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cor2); flex: none; }

/* --- sugestões --- */
.cl-dois { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 11px; }
.cl-dois.s { grid-template-columns: minmax(0, 1fr) 204px; }
.cl-cruza { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow: hidden; }
.cl-cz-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.cl-eu { display: flex; align-items: center; gap: 8px; }
.cl-eu .nm { font: 600 .66rem var(--f-tit); letter-spacing: -.03em; }
.cl-cz-t { font: 600 .58rem var(--f-mono); color: #fff; background: var(--cor); border-radius: 999px; padding: 4px 10px; white-space: nowrap; opacity: 0; transition: opacity .3s ease; }
.cl-cz-t:not(:empty) { opacity: 1; }
.cl-mapa.mini { border-radius: 12px; }
.cl-contato { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 11px; background: var(--sup); border: 1.5px solid var(--tinta); border-radius: 14px; box-shadow: var(--sombra); opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; z-index: 2; }
.cl-contato.on { opacity: 1; transform: none; }
.cl-contato .nm { font: 600 .7rem var(--f-tit); letter-spacing: -.03em; }
.cl-contato .bts { display: flex; gap: 5px; margin-left: auto; }
.cl-btn.wa { background: #128c5e; }
.cl-cruza .cl-toast { bottom: 64px; }
.cl-pop { position: absolute; left: 26px; top: 64px; width: 236px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--sup); border: 1.5px solid var(--tinta); border-radius: 14px; box-shadow: var(--sombra); opacity: 0; transform: translateY(-6px); transition: opacity .28s ease, transform .28s ease; z-index: 4; }
.cl-pop.on { opacity: 1; transform: none; }
.cl-pop svg { width: 52px; height: 52px; flex: none; }
.cl-pop .k { font: 500 .5rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cor); }
.cl-pop .nm { font: 600 .82rem var(--f-tit); letter-spacing: -.03em; }
.cl-pop .fr { font: 400 .58rem var(--f-txt); color: var(--tinta2); }

/* --- durante --- */
.cl-tres { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .72fr); gap: 12px; }
.cl-col { display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow: hidden; }
.cl-lista { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.cl-op { position: relative; padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease; flex: none; }
.cl-op.entrando { opacity: 0; transform: translateY(-14px); }
.cl-op .lin { display: flex; align-items: center; gap: 6px; }
.cl-op .lo { font: 400 .5rem var(--f-mono); letter-spacing: .06em; color: var(--tinta2); text-transform: uppercase; }
.cl-op .tt { font: 600 .7rem/1.25 var(--f-tit); letter-spacing: -.03em; }
.cl-op .au { display: flex; align-items: center; gap: 5px; font: 400 .52rem var(--f-mono); color: var(--tinta2); white-space: nowrap; overflow: hidden; }
.cl-op .au .cl-av { width: 16px; height: 16px; border-width: 1px; }
.cl-op .au b { font: 600 .58rem var(--f-txt); color: var(--tinta); }
.cl-op .ex { margin-left: auto; }
.cl-novo { margin-left: auto; font: 600 .48rem var(--f-mono); color: #fff; background: var(--cor2); padding: 2px 7px; border-radius: 999px; letter-spacing: .08em; }
.cl-res { font: 400 .58rem/1.4 var(--f-txt); color: var(--tinta2); background: var(--fundo); border-radius: 10px; padding: 6px 8px; }
.cl-res b { display: block; font: 500 .46rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cor); margin-bottom: 2px; }
.cl-reac { display: flex; gap: 4px; }
.cl-reac span { font: 600 .54rem var(--f-txt); border-radius: 999px; padding: 3px 8px; background: var(--fundo); transition: background .2s ease, color .2s ease; }
.cl-reac span.on { background: var(--cor); color: #fff; }
.cl-reac b { font: 500 .54rem var(--f-mono); margin-left: 4px; }
.cl-fil { display: flex; gap: 5px; flex-wrap: wrap; }
.cl-fil span { font: 500 .56rem var(--f-txt); color: var(--tinta2); display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--linha); }
.cl-fil span.on { color: #fff; background: var(--tinta); box-shadow: none; }
.cl-fil i { width: 7px; height: 7px; border-radius: 50%; background: var(--cor); display: inline-block; }
.cl-fil i.t1 { background: var(--cor2); } .cl-fil i.t3 { background: var(--verde); } .cl-fil i.t4 { background: var(--ambar); }
.cl-cheg { padding: 10px 11px; display: flex; flex-direction: column; gap: 8px; }
.cl-cheg .fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 4px; }
.cl-cheg .ch { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 500 .54rem var(--f-txt); opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.cl-cheg .ch.on { opacity: 1; transform: none; }
.cl-rank { padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.cl-rank .rw { display: flex; align-items: center; gap: 6px; font: 600 .58rem var(--f-txt); }
.cl-rank .po { font: 600 .56rem var(--f-mono); width: 12px; color: var(--cor2); }
.cl-rank .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cl-rank .pp { margin-left: auto; font: 500 .54rem var(--f-mono); white-space: nowrap; }
.cl-rank .fx { display: none; }
.cl-rank .rw { padding: 5px 6px; border-radius: 10px; }
.cl-rank .rw.top { background: var(--fundo); }
.cl-rank > .cl-m { margin-top: auto; }

/* --- painel --- */
.cl-abs { display: flex; gap: 5px; overflow: hidden; flex: none; }
.cl-abs span { font: 500 .58rem var(--f-txt); color: var(--tinta2); padding: 3px 9px; border-radius: 999px; white-space: nowrap; transition: color .2s ease, background .2s ease; }
.cl-abs span.on { color: #fff; background: var(--tinta); font-weight: 600; }
.cl-abs em { font: 600 .48rem var(--f-mono); font-style: normal; color: #fff; background: var(--cor2); border-radius: 999px; padding: 0 5px; margin-left: 4px; }
.cl-tab { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--sup); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; flex: none; }
.cl-tab th { font: 500 .48rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta2); text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.cl-tab td { font: 500 .6rem var(--f-txt); padding: 11px 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.cl-tab tr:last-child td { border-bottom: 0; }
.cl-tab .nm { font: 600 .62rem var(--f-txt); white-space: nowrap; }
.cl-tab td.cd { font: 500 .6rem var(--f-mono); }
.cl-tab .br { display: grid; gap: 3px; min-width: 50px; }
.cl-tab .br b { font: 500 .54rem var(--f-mono); white-space: nowrap; }
.cl-tab .br i { display: block; height: 5px; background: var(--sup2); border-radius: 3px; overflow: hidden; }
.cl-tab .br i s { display: block; height: 100%; width: 0; background: var(--cor); transition: width .9s cubic-bezier(.22, 1, .36, 1); text-decoration: none; border-radius: 3px; }
.cl-tab .br.co i s { background: var(--cor2); }
.cl-falta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; flex: none; }
.cl-falta > b { font: 600 .66rem var(--f-tit); letter-spacing: -.03em; margin-right: 2px; }
.cl-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 .58rem var(--f-txt); background: var(--coral-s); border-radius: 999px; padding: 3px 10px 3px 4px; opacity: 0; transition: opacity .3s ease; }
.cl-chip.on { opacity: 1; }
.cl-chip b { font: 600 .6rem var(--f-mono); background: var(--cor2); color: #fff; border-radius: 999px; padding: 1px 6px; }
.cl-dois.k { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.cl-sinais { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.cl-sinais .sg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cl-sinais .it { display: flex; gap: 7px; align-items: flex-start; opacity: .25; transition: opacity .4s ease; }
.cl-sinais .it.on { opacity: 1; }
.cl-sinais .md svg { width: 34px; height: 34px; display: block; }
.cl-sinais .it b { display: block; font: 600 1.05rem/1 var(--f-tit); letter-spacing: -.04em; }
.cl-sinais .t { display: block; font: 600 .56rem var(--f-txt); margin-top: 2px; }
.cl-sinais .d { display: block; font: 400 .5rem/1.35 var(--f-txt); color: var(--tinta2); }
.cl-sinais .nota { margin-top: auto; }
.cl-aud { padding: 10px 12px; display: grid; gap: 5px; align-content: start; transition: box-shadow .3s ease; overflow: hidden; }
.cl-aud.foco { box-shadow: 0 0 0 2px var(--cor); }
.cl-aud .ln { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 2px 8px; align-items: baseline; padding-top: 5px; border-top: 1px solid var(--linha); opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.cl-aud .ln.on { opacity: 1; transform: none; }
.cl-aud .q { font: 400 .52rem var(--f-mono); color: var(--tinta2); white-space: nowrap; grid-row: span 2; }
.cl-aud .d { font: 400 .52rem var(--f-mono); color: var(--tinta2); }
.cl-aud b { font: 600 .6rem var(--f-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cl-baixo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 11px; }
.cl-cons { padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; justify-content: space-between; overflow: hidden; }
.cl-cons .ln { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: baseline; }
.cl-cons .t { font: 600 .6rem var(--f-txt); }
.cl-cons b { font: 500 .56rem var(--f-mono); color: var(--tinta2); }
.cl-cons i { grid-column: 1; display: block; height: 9px; background: var(--sup2); border-radius: 5px; overflow: hidden; }
.cl-cons i s { display: block; height: 100%; width: 0; background: var(--cor); border-radius: 5px; transition: width .9s cubic-bezier(.22, 1, .36, 1); }
.cl-cons .co i s { background: var(--cor2); }
.cl-cons em { font: 600 .74rem var(--f-tit); font-style: normal; letter-spacing: -.03em; }
.cl-baixo .cl-sinais .sg { grid-template-columns: minmax(0, 1fr); gap: 7px; }
.cl-baixo .cl-sinais .it { align-items: center; gap: 10px; padding: 5px 7px; border-radius: 12px; background: var(--fundo); }
.cl-baixo .cl-sinais .md svg { width: 38px; height: 38px; }
/* --- depois --- */
.cl-dois.b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cl-bol { padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.cl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cl-kpis div { display: flex; flex-direction: column; gap: 3px; border-radius: 12px; padding: 8px; background: var(--fundo); }
.cl-kpis div:first-child { background: var(--violeta-s); }
.cl-kpis b { display: block; font: 600 1.1rem/1 var(--f-tit); letter-spacing: -.04em; }
.cl-kpis div:first-child b { color: var(--cor); }
.cl-kpis span { font: 400 .5rem/1.25 var(--f-mono); color: var(--tinta2); }
.cl-gr { display: grid; gap: 5px; }
.cl-gr div { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; align-items: center; font: 500 .58rem var(--f-txt); }
.cl-gr i { height: 8px; border-radius: 4px; background: var(--sup2); overflow: hidden; display: block; }
.cl-gr i s { display: block; height: 100%; width: 0; transition: width .9s cubic-bezier(.22, 1, .36, 1); border-radius: 4px; }
.cl-gr b { font: 500 .56rem var(--f-mono); }
.cl-fila { display: flex; align-items: center; gap: 0; }
.cl-fila .cl-av { margin-right: -6px; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.cl-fila .cl-av.on { opacity: 1; transform: none; }
.cl-fila .mais { margin-left: 14px; font: 600 .58rem var(--f-mono); color: var(--cor); }
.cl-medmes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.cl-medmes > div { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.cl-medmes > div.on { opacity: 1; transform: none; }
.cl-medmes svg { width: 100%; max-width: 44px; height: auto; display: block; }
.cl-medmes b { font: 600 .56rem var(--f-mono); }
.cl-lido { margin-top: auto; display: grid; gap: 3px; padding: 8px 9px; border-radius: 12px; background: var(--fundo); }
.cl-lido b { font: 600 .66rem/1.25 var(--f-tit); letter-spacing: -.03em; }
.cl-dois .dir { gap: 10px; }
.cl-cresce { flex: 1; min-height: 0; padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.cl-cresce .cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cl-novo2 { font: 600 .56rem var(--f-mono); color: #fff; background: var(--cor2); border-radius: 999px; padding: 3px 9px; opacity: 0; transform: scale(.8); transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); white-space: nowrap; }
.cl-novo2.on { opacity: 1; transform: none; }
.cl-sem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.cl-sem span { font: 500 .52rem var(--f-mono); text-align: center; padding: 3px 0; border-radius: 999px; background: var(--fundo); color: var(--tinta2); transition: background .25s ease, color .25s ease; }
.cl-sem span.on { background: var(--tinta); color: #fff; }
.cl-mapa.cr { border-radius: 12px; }
.cl-cresce .rs { flex: none; }
.cl-texto { padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; flex: none; }
.cl-txt { font: 400 .6rem/1.45 var(--f-txt); background: var(--fundo); border-radius: 10px; padding: 7px 9px; }
.cl-btn.cp { align-self: flex-start; }

@media (max-width: 1080px) and (min-width: 721px) {
  .cl-tres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cl-tres .lado { display: none; }
}
@media (max-width: 720px) {
  .pc-abas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pc-aba small { display: none; }
  .pc-aba b { font-size: .6rem; }
  .palco { height: min(162vw, 632px); border-radius: 18px; }
  .cl-net, .cl-dois.s { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  .cl-ficha { display: none; }
  .cl-fone { background: var(--sup); border: 1px solid var(--linha); border-radius: 14px; padding: 0; box-shadow: none; }
  .cl-fone::after { display: none; }
  .fn-tela { border-radius: 14px; background: var(--sup); }
  .fn-st, .fn-mc, .fn-abas, .fn-eu, .fn-t, .fn-env { display: none; }
  .fn-quem { display: inline; }
  .fn-corpo { padding: 7px 8px 8px; gap: 5px; }
  .fn-corpo > .cl-ey { font-size: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fn-lista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
  .fn-it, .cl-fone.sg .fn-it { background: var(--fundo); padding: 4px 5px; gap: 5px; }
  .fn-it:nth-child(n+5) { display: none; }
  .fn-it b { font-size: .58rem; }
  .fn-it small { font-size: .5rem; -webkit-line-clamp: 2; }
  .cl-bar { padding: 6px 10px; }
  .cl-bar nav span:not(.on) { display: none; }
  .cl-corpo { padding: 9px 9px 10px; gap: 7px; }
  .cl-h { font-size: .9rem; }
  .cl-top .cl-m, .cl-esc-m { display: none !important; }
  .cl-vivo { font-size: .54rem; padding: 3px 8px; }
  .cl-ctl { gap: 6px; }
  .cl-ctl > .cl-m { display: none; }
  .cl-seg span { padding: 4px 8px; font-size: .56rem; }
  .cl-leg { display: none; }
  .cl-chips span { font-size: .54rem; padding: 3px 8px 3px 6px; }
  .cl-ctx > .cl-ey { display: none; }
  .cl-por { padding: 3px 9px; }
  .cl-motor { font-size: .5rem; }
  .cl-dois { grid-template-columns: minmax(0, 1fr); }
  .cl-dois.s { grid-template-rows: minmax(0, 1fr) auto; }
  .cl-contato .bts .li { display: none; }
  .cl-contato { gap: 7px; padding: 7px 9px; }
  .cl-contato .bts { margin-left: 0; }
  .cl-pop { left: 10px; right: 10px; width: auto; top: auto; bottom: 14px; }
  .cl-tres { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; }
  .cl-tres .lado { display: none; }
  .cl-tres .cl-ey { display: none; }
  .cl-tres .ops .cl-op:nth-child(n+3) { display: none; }
  .cl-tres .mural .cl-op:nth-child(n+2) { display: none; }
  .cl-fil span:nth-child(n+4) { display: none; }
  .cl-op .au .ex { display: none; }
  .cl-abs span:nth-child(n+5) { display: none; }
  .cl-tab th:nth-child(5), .cl-tab td:nth-child(5), .cl-tab th:nth-child(2), .cl-tab td:nth-child(2) { display: none; }
  .cl-tab td, .cl-tab th { padding: 6px 5px; }
  .cl-tab .br { min-width: 0; }
  .cl-dois.k, .cl-dois.b { grid-template-columns: minmax(0, 1fr); }
  .cl-baixo { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .cl-cons { display: none; }
  .cl-baixo .cl-sinais .sg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-baixo .cl-sinais .it { flex-direction: column; align-items: flex-start; }
  .cl-baixo .cl-sinais .md svg { width: 28px; height: 28px; }
  .cl-fila, .cl-medmes { display: none; }
  .cl-aud { display: none; }
  .cl-sinais .sg { gap: 6px; }
  .cl-sinais .md svg { width: 26px; height: 26px; }
  .cl-sinais .it { flex-direction: column; gap: 4px; }
  .cl-sinais .d { display: none; }
  .cl-dois.b { grid-template-rows: auto minmax(0, 1fr); }
  .cl-bol { gap: 6px; padding: 9px 10px; }
  .cl-bol .cl-sub, .cl-bol .cl-gr, .cl-bol > .cl-m, .cl-lido { display: none; }
  .cl-bol .cl-h { font-size: .82rem; }
  .cl-kpis { gap: 4px; }
  .cl-kpis div { padding: 6px 5px; }
  .cl-kpis b { font-size: .9rem; }
  .cl-kpis span { font-size: .44rem; }
  .cl-texto { display: none; }
}