/* =====================================================================
   Cidade TPF · v2 · Identidade TPF (tema "TEMA TPF" do modelo oficial)
   Marinho #00284D · Azul #0067FF · Azul-claro #0096FF · Laranja #FD6B3F
   ===================================================================== */
:root {
  --marinho: #00284D; --azul: #0067FF; --ciano: #0096FF; --laranja: #FD6B3F;
  --claro1: #92CAFF; --claro2: #65A3FF; --claro3: #5ABDFE;
  --gelo: #F2F7FF; --linha: #D8E4F5; --tinta: #0B1E33; --cinza: #5A6B80;
  --ok: #16A34A; --atencao: #F59E0B; --erro: #DC2626;
  --r: 16px; --sombra: 0 12px 32px rgba(0, 40, 77, .18);
  font-family: Aptos, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--tinta); background: var(--gelo); }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: .2em 0 .45em; line-height: 1.15; color: var(--marinho); }
p { line-height: 1.5; }
.mini { font-size: .85rem; color: var(--cinza); }
.card { background: #fff; border-radius: var(--r); box-shadow: var(--sombra); padding: 20px; }
.btn-grande { width: 100%; padding: 15px; border: 0; border-radius: 12px; background: var(--azul); color: #fff; font-size: 1.05rem; font-weight: 800; }
.btn-grande:active { transform: translateY(1px); background: #0056d6; }
.btn-grande:disabled { opacity: .55; }
.btn-sec { padding: 12px 14px; border: 2px solid var(--linha); border-radius: 12px; background: #fff; color: var(--marinho); font-weight: 700; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 900; color: var(--marinho); letter-spacing: -.01em; }
.marca i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--azul); color: #fff; font-style: normal; font-size: .85rem; font-weight: 900; }
.marca-simbolo { display: block; height: 34px; width: auto; flex: none; }
.marca b { font-size: 1.25rem; line-height: 1; } .marca small { display: block; font-size: .7rem; font-weight: 700; color: var(--ciano); letter-spacing: .14em; text-transform: uppercase; }
.fase { display: inline-block; background: var(--marinho); color: #fff; font-weight: 800; font-size: .74rem; padding: 5px 11px; border-radius: 99px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.tag { display: inline-block; font-size: .76rem; font-weight: 800; color: var(--azul); background: #E6F0FF; padding: 4px 10px; border-radius: 99px; margin-bottom: 8px; }
.evento { background: #FFF2EC; border-left: 5px solid var(--laranja); border-radius: 10px; padding: 12px 14px; font-weight: 700; margin: 8px 0 12px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140px); background: var(--marinho); color: #fff; padding: 12px 18px; border-radius: 12px; transition: .3s; z-index: 99; }
.toast.on { transform: translate(-50%, 0); }

/* ---------- cidade 3D ---------- */
.cidade { position: absolute; inset: 0; overflow: hidden; background: #cfe6ff; }
.cidade-canvas { width: 100%; height: 100%; display: block; transition: filter .8s; }
.foco .cidade-canvas { filter: blur(3px) brightness(.82) saturate(.9); }
.cidade-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rotulo { position: absolute; left: 0; top: 0; background: var(--marinho); color: #fff; padding: 5px 11px; border-radius: 9px; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .25); }
.rotulo small { display: block; color: var(--claro1); font-size: 10px; } .rotulo b { font-weight: 800; }
.rotulo::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--marinho); border-bottom: 0; }
.rotulo.projeto { background: #fff; color: var(--marinho); } .rotulo.projeto small { color: var(--ciano); } .rotulo.projeto::after { border-top-color: #fff; }
.rotulo.proposta { background: var(--laranja); } .rotulo.proposta::after { border-top-color: var(--laranja); }
.rotulo.bloqueado { opacity: .75; } .rotulo.bloqueado b::before { content: "🚧 "; }
.rotulo.foco { background: var(--azul); transform-origin: bottom center; font-size: 15px; padding: 7px 14px; }
.rotulo.foco::after { border-top-color: var(--azul); }
.cidade-fade { position: absolute; inset: 0; background: radial-gradient(circle, #fff 0%, #EAF3FF 55%, var(--claro1) 100%); opacity: 0; pointer-events: none; transition: opacity .15s; }
.terco { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 34px 30px; background: linear-gradient(0deg, rgba(0, 40, 77, .92), rgba(0, 40, 77, 0)); color: #fff; pointer-events: none; animation: sobe .8s ease; }
.terco small { color: var(--claro1); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.terco h1 { color: #fff; font-size: 2.2rem; margin: 4px 0; } .terco p { margin: 0; max-width: 900px; font-size: 1.1rem; opacity: .95; }
@keyframes sobe { from { transform: translateY(30px); opacity: 0; } }

/* ---------- participante ---------- */
.tela-participante { min-height: 100vh; background: var(--marinho); }
.tela-participante .cidade { position: fixed; inset: 0; z-index: 0; }
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); background: rgba(0, 40, 77, .94); color: #fff; backdrop-filter: blur(6px); }
.hud-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 2px solid var(--claro1); flex: none; background: #E6F0FF; }
.hud-avatar svg { width: 100%; height: 100%; display: block; }
.hud-nome { flex: 1; min-width: 0; } .hud-nome b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.hud-nome small { opacity: .75; font-size: .72rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-num { text-align: center; background: rgba(255, 255, 255, .1); border-radius: 10px; padding: 3px 10px; min-width: 62px; }
.hud-num small { display: block; font-size: .6rem; opacity: .75; text-transform: uppercase; letter-spacing: .05em; }
.hud-num b { font-size: 1.05rem; } .hud-num.pts b { color: #FFD0BF; } .hud-num.pos b { color: var(--claro1); }
.app { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; padding: 72px 14px 24px; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; }
.app.topo { justify-content: flex-start; }
.palco { max-height: calc(100vh - 96px); overflow: auto; animation: sobe .4s ease; }
.palco.translucido { background: rgba(255, 255, 255, .94); backdrop-filter: blur(4px); }
.entrada { display: grid; gap: 14px; margin-top: 4px; background: #fff; }
.entrada label { display: grid; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--marinho); }
.entrada input { font: inherit; padding: 12px 14px; border: 2px solid var(--linha); border-radius: 12px; background: var(--gelo); }
.entrada input:focus { outline: none; border-color: var(--azul); }
.aviso { color: var(--cinza); text-align: center; }
.criador { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: start; }
.criador .preview { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; border: 4px solid var(--azul); background: #E6F0FF; }
.criador .preview svg { width: 100%; height: 100%; }
.abas { display: flex; flex-wrap: wrap; gap: 6px; }
.abas button { border: 0; background: var(--gelo); color: var(--marinho); font-weight: 700; font-size: .78rem; padding: 7px 10px; border-radius: 99px; }
.abas button.on { background: var(--marinho); color: #fff; }
.opcoes-av { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; grid-column: 1 / -1; }
.opcoes-av button { border: 2px solid var(--linha); background: #fff; border-radius: 12px; padding: 6px 10px; font-size: .8rem; font-weight: 700; color: var(--marinho); }
.opcoes-av button.on { border-color: var(--azul); box-shadow: 0 0 0 3px #CFE0FF; }
.opcoes-av button.cor { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.opcoes-av button.mini-av { padding: 0; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; }
.opcoes-av button.mini-av svg { width: 100%; height: 100%; display: block; }
.olhe { text-align: center; padding: 22px 16px; }
.olhe .icone { font-size: 3rem; animation: pisca 1.6s ease-in-out infinite; }
@keyframes pisca { 50% { transform: scale(1.12); } }
.olhe h2 { margin: 6px 0; }
.resumo { text-align: left; background: var(--gelo); border-radius: 12px; padding: 12px 14px; font-size: .92rem; margin-top: 12px; border-left: 4px solid var(--ciano); }
.relogio { position: relative; height: 24px; background: #E3ECF8; border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
#barra { height: 100%; background: var(--azul); transition: width .2s linear; }
#barra.urgente { background: var(--laranja); }
.relogio span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: .82rem; color: var(--marinho); }
.mg-pergunta { font-weight: 800; font-size: 1.08rem; margin-bottom: 14px; line-height: 1.3; color: var(--marinho); }
.mg-ops { display: grid; gap: 10px; }
.mg-op { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; border-radius: 14px; padding: 13px 14px; color: #fff; font-weight: 700; }
.mg-op b { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, .22); border-radius: 9px; }
.op0 { background: var(--azul); } .op1 { background: var(--marinho); } .op2 { background: var(--ciano); } .op3 { background: var(--laranja); } .op4 { background: #3B5B85; }
.mg-op:disabled { opacity: .4; } .mg-op.sel { opacity: 1; outline: 4px solid var(--claro1); }
.mg-audio { border: 0; background: var(--ciano); color: #fff; font-weight: 800; padding: 10px 14px; border-radius: 12px; margin-bottom: 8px; }
.mg-fala { background: var(--gelo); border-left: 5px solid var(--ciano); padding: 10px 12px; border-radius: 10px; font-style: italic; margin-bottom: 12px; }
.mg-ligar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mg-ligar > div { display: grid; gap: 8px; align-content: start; }
.lg { position: relative; text-align: left; border: 2px solid var(--linha); background: #fff; border-radius: 12px; padding: 10px; font-size: .84rem; font-weight: 600; min-height: 56px; color: var(--tinta); }
.lg.sel { border-color: var(--azul); box-shadow: 0 0 0 3px #CFE0FF; }
.lg i { position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-style: normal; font-size: .75rem; display: grid; place-items: center; font-weight: 900; }
.mg-ok { margin-top: 14px; width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--azul); color: #fff; font-weight: 900; font-size: 1.02rem; }
.mg-ok:disabled { background: #B8C5D6; }
.mg-sec { margin-top: 14px; padding: 14px; border: 0; border-radius: 12px; background: var(--gelo); font-weight: 800; color: var(--marinho); }
.mg-linha { display: flex; gap: 10px; align-items: center; } .mg-linha .mg-ok { flex: 1; }
.mg-ordem { display: grid; gap: 8px; }
.od { display: flex; gap: 10px; align-items: center; text-align: left; border: 2px solid var(--linha); background: #fff; border-radius: 12px; padding: 12px; font-weight: 600; color: var(--tinta); }
.od i { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--gelo); font-style: normal; font-weight: 900; display: grid; place-items: center; color: var(--marinho); }
.od.on { border-color: var(--azul); background: #EEF4FF; } .od.on i { background: var(--azul); color: #fff; }
.mg-mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; perspective: 800px; }
.mem { position: relative; aspect-ratio: 3/4; border: 0; background: none; padding: 0; transform-style: preserve-3d; transition: transform .35s; }
.mem span { position: absolute; inset: 0; border-radius: 10px; display: grid; place-items: center; backface-visibility: hidden; padding: 4px; font-size: .7rem; font-weight: 700; line-height: 1.15; text-align: center; }
.mem .f { background: linear-gradient(135deg, var(--marinho), var(--azul)); color: #fff; font-size: 1.5rem; }
.mem .v { background: #fff; border: 2px solid var(--ciano); transform: rotateY(180deg); color: var(--tinta); }
.mem .v.a { font-size: .95rem; color: var(--marinho); font-weight: 900; }
.mem.vira { transform: rotateY(180deg); } .mem.par .v { background: #E6F0FF; border-color: var(--azul); }
.mg-info { font-size: .88rem; color: var(--cinza); margin-top: 8px; }
.mg-doc { background: #FFFDF7; border: 1px solid #E8DFC5; border-radius: 8px; padding: 12px 14px; font-family: Georgia, serif; font-size: .9rem; }
.doc-cab { font-family: inherit; font-weight: 800; font-size: .72rem; letter-spacing: .06em; color: var(--cinza); border-bottom: 2px solid #E8DFC5; padding-bottom: 6px; margin-bottom: 6px; }
.mg-doc p { margin: 0; padding: 8px 6px; border-radius: 6px; cursor: pointer; border-bottom: 1px dotted #E8DFC5; }
.mg-doc p.mk { background: #FFE3D8; box-shadow: inset 4px 0 0 var(--laranja); }
.cls { display: grid; gap: 8px; }
.cls-item { border: 2px solid var(--linha); border-radius: 12px; padding: 10px; background: #fff; }
.cls-item p { margin: 0 0 8px; font-weight: 700; font-size: .9rem; }
.cls-item div { display: flex; gap: 6px; flex-wrap: wrap; }
.cls-item button { border: 2px solid var(--linha); background: var(--gelo); border-radius: 99px; padding: 6px 12px; font-size: .8rem; font-weight: 800; color: var(--marinho); }
.cls-item button.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.cls-item.feito { border-color: var(--claro2); }
.nuvem-in { display: grid; gap: 8px; }
.nuvem-in input { font: inherit; padding: 13px 14px; border: 2px solid var(--linha); border-radius: 12px; }
.nuvem-in input:focus { outline: none; border-color: var(--azul); }
.enviado { text-align: center; font-size: 1.25rem; font-weight: 900; padding: 26px 0; color: var(--azul); }
.enviado small { display: block; font-size: .9rem; color: var(--cinza); font-weight: 600; margin-top: 6px; }
.revela { text-align: center; padding: 12px; border-radius: 14px; margin-bottom: 12px; }
.revela.bom { background: #E6F0FF; } .revela.meio { background: #EEF4FF; } .revela.ruim { background: #FFF0EA; } .revela.neutro { background: var(--gelo); }
.revela h2 { margin: 0 0 4px; }
.ganho { font-size: 2.3rem; font-weight: 900; color: var(--azul); }
.revela.ruim .ganho { color: var(--laranja); }
.posicao { font-weight: 700; color: var(--marinho); }
.gabarito { background: var(--gelo); border-radius: 12px; padding: 12px 14px; font-size: .92rem; }
.gabarito h4 { margin: 0 0 6px; }
.gabarito p { color: var(--cinza); margin-bottom: 0; }
.final-pos { text-align: center; background: var(--marinho); color: #fff; border-radius: 16px; padding: 18px; margin-bottom: 14px; }
.final-pos b { display: block; font-size: 3.1rem; color: var(--claro1); line-height: 1; }
.final-pos em { display: block; font-style: normal; margin-top: 6px; opacity: .9; }
.barras { display: grid; gap: 8px; }
.barra-l { display: grid; grid-template-columns: 1.5fr 2fr 38px; gap: 8px; align-items: center; font-size: .84rem; }
.barra-l > div { height: 12px; background: #E3ECF8; border-radius: 99px; overflow: hidden; }
.barra-l i { display: block; height: 100%; background: var(--azul); border-radius: 99px; transition: width .8s; }
.barra-l i.at { background: var(--atencao); } .barra-l i.rv { background: var(--laranja); }
.barra-l b { text-align: right; color: var(--marinho); }
.chat { display: grid; gap: 10px; }
.chat-log { display: grid; gap: 8px; max-height: 46vh; overflow: auto; padding: 4px; }
.msg { padding: 10px 12px; border-radius: 14px; font-size: .92rem; line-height: 1.45; max-width: 90%; white-space: pre-wrap; }
.msg.eu { background: var(--azul); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.msg.ia { background: var(--gelo); color: var(--tinta); border-bottom-left-radius: 4px; }
.msg.ia small { display: block; color: var(--ciano); font-weight: 700; margin-top: 6px; font-size: .74rem; }
.chat-in { display: flex; gap: 8px; } .chat-in textarea { flex: 1; font: inherit; padding: 10px 12px; border: 2px solid var(--linha); border-radius: 12px; resize: none; min-height: 52px; }
.chat-in button { border: 0; background: var(--azul); color: #fff; border-radius: 12px; padding: 0 16px; font-weight: 800; }
.digitando { display: inline-flex; gap: 4px; } .digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); animation: pula 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 50% { transform: translateY(-5px); opacity: .5; } }

/* ---------- telão ---------- */
.tela-painel { height: 100vh; overflow: hidden; background: var(--marinho); }
.tela-painel .cidade { position: fixed; inset: 0; }
.p-top { position: fixed; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; gap: 20px; padding: 10px 24px; background: rgba(0, 40, 77, .92); color: #fff; backdrop-filter: blur(6px); }
.p-top .marca { color: #fff; } .p-top .marca small { color: var(--claro1); }
.p-modulo { min-width: 0; } .p-modulo b { display: block; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-modulo small { color: var(--claro1); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; }
.p-kpis { flex: 1; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; overflow: hidden; }
@media (max-width: 1400px) { .p-kpis span { padding: 4px 8px; font-size: .66rem; } .p-kpis span b { font-size: .9rem; } .p-top .marca small { display: none; } }
.p-kpis span { background: rgba(255, 255, 255, .08); border-radius: 10px; padding: 5px 11px; font-size: .72rem; text-align: center; border-bottom: 3px solid var(--ciano); }
.p-kpis span b { display: block; font-size: 1rem; }
.p-kpis .at { border-color: var(--atencao); } .p-kpis .rv { border-color: var(--laranja); }
.p-jog { font-size: 1.4rem; background: var(--azul); padding: 6px 16px; border-radius: 12px; font-weight: 800; }
.p-lado { position: fixed; z-index: 3; top: 84px; right: 22px; max-height: calc(100vh - 106px); width: 600px; background: rgba(255, 255, 255, .97); border-radius: 22px; box-shadow: var(--sombra); padding: 26px 30px; overflow: auto; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s, left .4s, right .4s, top .4s, width .4s; }
.p-lado.pos-direita { right: 22px; left: auto; }
.p-lado.pos-esquerda { left: 22px; right: auto; }
.p-lado.pos-centro { left: 50%; right: auto; transform: translateX(-50%); }
.p-lado.pos-inferior { left: 22px; right: 22px; top: auto; bottom: 22px; width: auto; max-height: 44vh; columns: auto; }
.p-lado.pos-inferior h1 { font-size: 1.6rem; }
.p-lado.oculto { opacity: 0; pointer-events: none; }
.p-lado.pos-direita.oculto { transform: translateX(110%); }
.p-lado.pos-esquerda.oculto { transform: translateX(-110%); }
.p-lado.pos-centro.oculto { transform: translate(-50%, 30px) scale(.96); }
.p-lado.pos-inferior.oculto { transform: translateY(110%); }
.p-lado.entra.pos-direita { animation: entraL .55s ease; } .p-lado.entra.pos-esquerda { animation: entraE .55s ease; }
.p-lado.entra.pos-centro { animation: entraC .55s ease; } .p-lado.entra.pos-inferior { animation: entraB .55s ease; }
.p-lado.oculto.entra { animation: none; }
@keyframes entraL { from { transform: translateX(50px); opacity: 0; } }
@keyframes entraE { from { transform: translateX(-50px); opacity: 0; } }
@keyframes entraB { from { transform: translateY(40px); opacity: 0; } }
@keyframes entraC { from { transform: translate(-50%, 30px); opacity: 0; } }
.p-lado h1 { font-size: 2rem; } .p-lado h1.pergunta { font-size: 1.6rem; }
.texto-grande { font-size: 1.2rem; }
.slide h1 { font-size: 2.3rem; }
.slide .x { font-size: 1.35rem; line-height: 1.45; }
.slide ul { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.slide li { font-size: 1.2rem; padding: 12px 16px 12px 18px; background: var(--gelo); border-left: 5px solid var(--azul); border-radius: 10px; animation: sobe .5s ease both; }
.slide li:nth-child(2) { animation-delay: .1s; } .slide li:nth-child(3) { animation-delay: .2s; } .slide li:nth-child(4) { animation-delay: .3s; } .slide li:nth-child(5) { animation-delay: .4s; } .slide li:nth-child(6) { animation-delay: .5s; }
.destaque { margin-top: 14px; background: var(--marinho); color: #fff; font-weight: 800; padding: 14px 18px; border-radius: 12px; font-size: 1.15rem; }
.pontos { display: flex; gap: 6px; margin-top: 16px; } .pontos i { width: 28px; height: 6px; border-radius: 3px; background: var(--linha); } .pontos i.on { background: var(--azul); }
.qr { display: grid; place-items: center; margin: 14px auto; padding: 12px; background: #fff; border: 6px solid var(--marinho); border-radius: 18px; width: max-content; }
.url { text-align: center; font-weight: 800; color: var(--azul); word-break: break-all; }
.grande-n { text-align: center; font-size: 1.3rem; margin-top: 12px; color: var(--marinho); } .grande-n b { font-size: 3.2rem; color: var(--azul); display: block; line-height: 1; }
.desfile { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.desfile span { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); animation: sobe .5s ease both; }
.desfile svg { width: 100%; height: 100%; display: block; }
.p-ops { display: grid; gap: 10px; margin: 14px 0; }
.p-op { display: flex; gap: 12px; align-items: center; color: #fff; padding: 13px 16px; border-radius: 14px; font-weight: 700; font-size: 1.08rem; }
.p-op b { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, .22); border-radius: 10px; }
.p-rodape { display: flex; gap: 22px; align-items: center; margin-top: 16px; font-size: 1.05rem; color: var(--marinho); }
.p-rodape b { font-size: 1.7rem; color: var(--azul); }
.anel { position: relative; width: 104px; height: 104px; }
.anel svg { transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 10; }
.anel .fundo { stroke: #E3ECF8; } .anel .arco { stroke: var(--azul); stroke-linecap: round; transition: stroke-dasharray .1s linear; }
.anel .arco.urgente { stroke: var(--laranja); }
.anel b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: var(--marinho); }
.gabarito.grande { font-size: 1.1rem; }
.pergunta-p { font-size: 1.05rem; color: var(--cinza); }
.dist { display: grid; gap: 8px; margin: 14px 0; }
.dl { display: grid; grid-template-columns: 34px 1fr 54px; gap: 10px; align-items: center; font-weight: 800; color: var(--marinho); }
.dl span { width: 34px; height: 34px; border-radius: 9px; background: var(--gelo); display: grid; place-items: center; }
.dl > div { height: 22px; background: var(--gelo); border-radius: 8px; overflow: hidden; }
.dl i { display: block; height: 100%; background: #A9BCD6; transition: width 1s; }
.dl.certo span, .dl.certo i { background: var(--azul); color: #fff; }
.dl.atalho span, .dl.atalho i { background: var(--laranja); color: #fff; }
.explica { color: var(--cinza); font-size: 1.02rem; }
.top-lista { list-style: none; padding: 0; margin: 6px 0; font-size: 1.02rem; }
.top-lista li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.top-lista li > i { font-style: normal; font-weight: 900; color: var(--cinza); width: 26px; }
.top-lista .av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; } .top-lista .av svg { width: 100%; height: 100%; display: block; }
.top-lista small { color: var(--cinza); } .top-lista em { margin-left: auto; font-style: normal; font-weight: 900; color: var(--azul); }
.auditoria { text-align: center; background: var(--marinho); color: #fff; border-radius: 18px; padding: 22px; margin: 16px 0; }
.auditoria b { display: block; font-size: 3.8rem; color: var(--claro1); line-height: 1; }
.auditoria em { color: #FFC2AD; font-style: normal; font-weight: 900; }
.podio { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 16px 0; }
.deg { flex: 1; max-width: 190px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.deg .av { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: var(--sombra); } .deg .av svg { width: 100%; height: 100%; display: block; }
.deg b { font-size: 1rem; margin-top: 6px; color: var(--marinho); } .deg small { color: var(--cinza); font-size: .74rem; } .deg em { font-style: normal; font-weight: 900; color: var(--azul); }
.deg .base { width: 100%; margin-top: 6px; background: var(--marinho); color: #fff; font-weight: 900; font-size: 1.5rem; border-radius: 12px 12px 0 0; display: grid; place-items: center; }
.d1 .base { height: 120px; background: var(--azul); } .d2 .base { height: 88px; } .d3 .base { height: 64px; background: var(--ciano); }
.nuvem { position: relative; height: 62vh; }
.nuvem span { position: absolute; transform: translate(-50%, -50%); font-weight: 900; white-space: nowrap; line-height: 1; animation: surge .6s ease both; }
@keyframes surge { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
.convidado { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; padding: 30px 48px 40px; background: linear-gradient(0deg, rgba(0, 40, 77, .95), rgba(0, 40, 77, 0)); color: #fff; }
.convidado small { color: var(--claro1); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.convidado h1 { color: #fff; font-size: 2.6rem; margin: 6px 0; } .convidado p { font-size: 1.2rem; margin: 0; opacity: .9; }
.som { position: fixed; right: 18px; bottom: 18px; z-index: 9; border: 0; background: var(--laranja); color: #fff; font-weight: 800; padding: 10px 16px; border-radius: 99px; box-shadow: var(--sombra); }

/* ---------- controle ---------- */
.tela-controle { background: var(--gelo); }
.login { max-width: 380px; margin: 10vh auto; display: grid; gap: 12px; text-align: center; }
.login input { font: inherit; padding: 13px; border: 2px solid var(--linha); border-radius: 12px; text-align: center; font-size: 1.2rem; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.teclado button { border: 0; background: var(--gelo); border-radius: 12px; padding: 14px 0; font-size: 1.3rem; font-weight: 800; color: var(--marinho); }
.teclado button[data-k="OK"] { background: var(--azul); color: #fff; }
.ctl-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 16px; background: var(--marinho); color: #fff; position: sticky; top: 0; z-index: 3; }
.grow { flex: 1; }
.pill { background: rgba(255, 255, 255, .12); padding: 5px 10px; border-radius: 99px; font-size: .86rem; }
.btn { border: 0; background: #fff; color: var(--marinho); font-weight: 800; padding: 9px 14px; border-radius: 10px; text-decoration: none; font-size: .88rem; }
.btn.primario { background: var(--azul); color: #fff; padding: 14px 26px; font-size: 1.08rem; }
.btn.alerta { background: var(--laranja); color: #fff; padding: 14px 20px; font-size: 1.02rem; }
.btn.perigo { background: transparent; color: #FFC2AD; border: 1px solid #FFC2AD; }
.btn:disabled { opacity: .4; }
.ctl-grid { display: grid; grid-template-columns: 310px 1fr 330px; gap: 14px; padding: 14px; height: calc(100vh - 60px); }
.ctl-roteiro, .ctl-rank, .ctl-centro { background: #fff; border-radius: 14px; padding: 12px; overflow: auto; box-shadow: 0 2px 10px rgba(0, 40, 77, .06); }
.rt { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 8px; font-size: .84rem; border-left: 4px solid transparent; color: var(--tinta); }
.rt:hover { background: var(--gelo); } .rt.on { background: #E6F0FF; border-left-color: var(--azul); font-weight: 800; }
.rt.feito span { color: var(--azul); }
.rt small { display: block; color: var(--cinza); margin-left: 24px; font-size: .72rem; }
.rt.modulo { margin-top: 8px; border-top: 1px solid var(--linha); padding-top: 10px; }
.ctl-passo h2 { color: var(--marinho); }
.ctl-botoes { display: flex; gap: 12px; justify-content: space-between; margin: 18px 0; }
.ctl-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.ctl-kpis span { background: var(--gelo); padding: 8px 12px; border-radius: 10px; font-size: .84rem; }
.ctl-rank ol { padding-left: 0; list-style: none; margin: 0 0 16px; font-size: .86rem; }
.ctl-rank li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--gelo); }
.ctl-rank li small { grid-column: 1; margin-left: 28px; color: var(--cinza); }
.ctl-rank li em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 900; color: var(--azul); }
.ctl-slides { display: flex; gap: 6px; align-items: center; margin-top: 8px; } .ctl-slides i { width: 22px; height: 6px; border-radius: 3px; background: var(--linha); } .ctl-slides i.on { background: var(--azul); }
.ctl-aviso { background: #FFF2EC; border-left: 4px solid var(--laranja); padding: 10px 12px; border-radius: 8px; font-size: .88rem; }

@media (max-width: 1100px) { .ctl-grid { grid-template-columns: 1fr; height: auto; } }
.palco.compacto { padding: 12px 16px; } .palco.compacto h2 { margin: 0; font-size: 1.1rem; }

/* ---------- v3: legenda do mundo, barra de exploração ---------- */
.mundo-legenda { position: absolute; left: 50%; top: 86px; transform: translate(-50%, -12px); text-align: center; color: #fff; pointer-events: none; opacity: 0; transition: .5s; text-shadow: 0 2px 16px rgba(0, 0, 0, .55); width: min(92%, 900px); z-index: 2; }
.mundo-legenda.on { opacity: 1; transform: translate(-50%, 0); }
.mundo-legenda small { display: block; color: var(--claro1); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; }
.mundo-legenda b { display: block; font-size: clamp(1.4rem, 3.4vw, 3rem); font-weight: 900; letter-spacing: -.01em; }
.mundo-legenda span { display: block; font-size: clamp(.85rem, 1.4vw, 1.15rem); opacity: .9; margin-top: 4px; }
.tela-participante .mundo-legenda { top: 74px; }
.mundo-barra { position: absolute; z-index: 6; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mundo-barra.base { left: 18px; bottom: 18px; }
.mundo-barra.topo { right: 10px; top: 70px; justify-content: flex-end; max-width: 92%; }
.mundo-barra button { border: 0; background: rgba(0, 40, 77, .92); color: #fff; font-weight: 800; padding: 10px 14px; border-radius: 99px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); font-size: .9rem; }
.mundo-barra button[data-a="seguir"] { background: var(--azul); }
.mundo-barra .dica { background: rgba(255, 255, 255, .92); color: var(--marinho); padding: 8px 12px; border-radius: 99px; font-size: .78rem; font-weight: 700; }
body.explorando .app { display: none !important; }
.tela-painel .mundo-barra.base { bottom: 18px; }
body.missao .mundo-barra { display: none; }
.com-lado .mundo-legenda { left: calc((100vw - var(--lw, 600px) - 44px) / 2); width: min(52vw, 760px); }
.com-lado-esq .mundo-legenda { left: calc(var(--lw, 600px) + 44px + (100vw - var(--lw, 600px) - 44px) / 2); width: min(52vw, 760px); }
.com-lado-esq .mundo-barra.base { left: auto; right: 18px; }
.com-lado-inf .mundo-barra.base { bottom: calc(44vh + 40px); }
.tela-participante .app { pointer-events: none; }
.tela-participante .app > * { pointer-events: auto; }
.tela-participante .mundo-legenda { top: 118px; }
.tela-participante .mundo-legenda b { font-size: 1.25rem; }
.tela-participante .mundo-barra.topo { top: 64px; }
/* ---------- v4: vinhetas de título, marca TPF Verse, VOCÊ ---------- */
.mundo-titulo { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .8s; color: #fff; text-shadow: 0 4px 30px rgba(0, 40, 77, .65); }
.mundo-titulo.on { opacity: 1; }
.mundo-titulo::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 120vw); height: min(560px, 80vh); transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(0, 40, 77, .62) 0%, rgba(0, 40, 77, .35) 40%, transparent 70%); z-index: -1; }
.mundo-titulo { isolation: isolate; }
.tit-emb svg { width: clamp(90px, 12vw, 170px); height: auto; filter: drop-shadow(0 0 24px rgba(0, 150, 255, .7)); }
.mundo-titulo.on .tit-emb { animation: emb-in 1.4s cubic-bezier(.2, .9, .2, 1.2) both; }
@keyframes emb-in { from { transform: scale(.3) rotate(-90deg); opacity: 0; } }
.emb .orb1 { transform-origin: 60px 60px; animation: gira 9s linear infinite; }
.emb .orb2 { transform-origin: 60px 60px; animation: gira 6s linear infinite reverse; }
@keyframes gira { to { transform: rotate(360deg); } }
.tit-txt { display: flex; flex-wrap: nowrap; align-items: baseline; gap: .35em; margin-top: 10px; }
.tit-tpf { font-weight: 900; font-size: clamp(2.2rem, 6vw, 5.4rem); letter-spacing: -.02em; }
.tit-logo { align-self: center; height: clamp(2.1rem, 5.6vw, 5rem); width: auto; margin-right: clamp(.5rem, 1.6vw, 1.6rem); filter: drop-shadow(0 4px 24px rgba(0, 40, 77, .7)); }
.tit-nome { font-weight: 500; font-size: clamp(2.2rem, 6vw, 5.4rem); letter-spacing: .28em; white-space: nowrap; }
.com-lado .tit-nome, .com-lado-esq .tit-nome { font-size: clamp(1.7rem, 4vw, 4.4rem); }
.com-lado .tit-logo, .com-lado-esq .tit-logo { height: clamp(1.6rem, 3.7vw, 4rem); }
/* celular: logo + nome em uma linha cabendo na largura (≈ 11,7 × tamanho da fonte) */
.tela-participante .tit-nome { font-size: min(7.2vw, 2.2rem); }
.tela-participante .tit-logo { height: min(6.4vw, 2rem); }
.tit-nome i { font-style: normal; display: inline-block; opacity: 0; }
.mundo-titulo.on .tit-nome i { animation: letra .7s ease both; }
@keyframes letra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.mundo-titulo .tit-logo { opacity: 0; }
.mundo-titulo.on .tit-logo { animation: letra .8s ease .1s both; }
.tit-sub { margin-top: 6px; font-size: clamp(.95rem, 1.6vw, 1.35rem); letter-spacing: .12em; color: var(--claro1); text-transform: uppercase; font-weight: 700; opacity: 0; }
.mundo-titulo.on .tit-sub { animation: letra .9s ease 1s both; }
.mundo-titulo.on .tit-txt { position: relative; overflow: hidden; }
.mundo-titulo.on .tit-txt::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: brilho 2.4s ease 1s 1; }
@keyframes brilho { to { left: 120%; } }
.com-lado .mundo-titulo { right: calc(var(--lw, 600px) + 44px); }
.com-lado-esq .mundo-titulo { left: calc(var(--lw, 600px) + 44px); }
.com-lado-inf .mundo-titulo { bottom: 44vh; }
.tela-participante .mundo-titulo { top: -10vh; }
.marca-verse { position: absolute; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; color: #fff; opacity: .72; pointer-events: none; font-size: .72rem; letter-spacing: .32em; font-weight: 300; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.marca-verse b { font-weight: 900; }
.marca-verse svg { width: 22px; height: 22px; }
.marca-verse img { height: 15px; width: auto; display: block; }
.tela-participante .marca-verse { left: 12px; bottom: auto; top: 64px; transform: none; font-size: .6rem; }
.rotulo.voce { background: var(--laranja); border-color: #fff; font-size: 13px; z-index: 3; animation: pisca 1.6s ease-in-out infinite; }
.rotulo.voce::after { border-top-color: var(--laranja); }

/* ---------- v5: nomes no mundo, zoom do explorar ---------- */
.cidade-labels.pessoas { z-index: 2; }
.rotulo.apresentador { background: var(--laranja); border-color: #fff; font-size: 12px; padding: 4px 10px; z-index: 2; }
.rotulo.apresentador::after { border-top-color: var(--laranja); }
.rotulo.pessoa { background: rgba(255, 255, 255, .94); color: var(--marinho); font-size: 11px; padding: 3px 8px; border-radius: 8px; border: 0; box-shadow: 0 3px 10px rgba(0, 40, 77, .25); opacity: 0; }
.rotulo.pessoa::after { border-top-color: rgba(255, 255, 255, .94); border-width: 5px; bottom: -5px; }
.rotulo.pessoa.on { animation: nomeVaiVem 6s ease forwards; }
@keyframes nomeVaiVem { 0% { opacity: 0; } 10% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
.mundo-zoom { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 8px; right: 18px; bottom: 90px; }
.mundo-zoom:empty { display: none; }
.mundo-zoom button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(0, 40, 77, .92); color: #fff; font-size: 1.35rem; font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer; }
.mundo-zoom button:hover { background: var(--azul); }
.tela-participante .mundo-zoom { bottom: 26px; right: 12px; }
body.missao .mundo-zoom { display: none; }

/* ---------- v5: controle (telão, participantes, exportação) ---------- */
.menu-exp { position: relative; } .menu-exp summary { list-style: none; cursor: pointer; } .menu-exp summary::-webkit-details-marker { display: none; }
.menu-exp-lista { position: absolute; right: 0; top: 42px; background: #fff; border-radius: 12px; box-shadow: var(--sombra); padding: 6px; display: grid; min-width: 240px; z-index: 10; }
.menu-exp-lista button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 8px; font-weight: 700; color: var(--marinho); cursor: pointer; }
.menu-exp-lista button:hover { background: var(--gelo); }
.ctl-telao { margin-top: 16px; background: var(--gelo); border-radius: 12px; padding: 12px 14px; }
.ctl-telao h3 { margin: 0 0 8px; color: var(--marinho); }
.linha-tel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; font-size: .86rem; font-weight: 700; color: var(--marinho); }
.linha-tel.col { flex-direction: column; align-items: stretch; }
.linha-tel textarea { border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; font: inherit; font-weight: 500; resize: vertical; }
.seg { display: inline-flex; flex-wrap: wrap; background: #fff; border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 6px 10px; border-radius: 8px; font-weight: 700; color: var(--marinho); cursor: pointer; font-size: .82rem; }
.seg button.on { background: var(--azul); color: #fff; }
.btn.tog { background: #fff; border: 1px solid var(--linha); }
.btn.tog.ativo { background: var(--laranja); color: #fff; border-color: var(--laranja); }
.abas-ctl { display: flex; gap: 4px; margin-bottom: 10px; } .abas-ctl button { flex: 1; border: 0; background: var(--gelo); padding: 8px; border-radius: 10px; font-weight: 800; color: var(--marinho); cursor: pointer; } .abas-ctl button.on { background: var(--azul); color: #fff; }
#busca { width: 100%; border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; font: inherit; }
.lista-part { list-style: none; padding: 0; margin: 0; font-size: .84rem; }
.lista-part li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--gelo); }
.lista-part .av svg { width: 32px; height: 32px; }
.lista-part b { display: block; color: var(--marinho); } .lista-part small { color: var(--cinza); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.lista-part .acoes { display: flex; gap: 4px; align-items: center; } .lista-part .acoes em { font-style: normal; font-weight: 900; color: var(--azul); margin-right: 4px; }
.lista-part .acoes button { border: 0; background: var(--gelo); border-radius: 8px; padding: 5px 7px; cursor: pointer; }
.lista-part .acoes button.rem:hover { background: #FFE1D6; }
.modal { position: fixed; inset: 0; background: rgba(0, 40, 77, .45); display: grid; place-items: center; z-index: 50; }
.modal[hidden] { display: none !important; }
.modal-c { background: #fff; border-radius: 16px; padding: 20px 22px; width: min(420px, 92vw); display: grid; gap: 10px; box-shadow: var(--sombra); }
.modal-c h3 { margin: 0; color: var(--marinho); } .modal-c label { display: grid; gap: 4px; font-weight: 700; font-size: .86rem; color: var(--marinho); }
.modal-c input { border: 1px solid var(--linha); border-radius: 10px; padding: 9px 10px; font: inherit; }
.modal-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } .modal-b .btn.primario { padding: 9px 18px; font-size: .95rem; }
.toast-ctl { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--marinho); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 700; z-index: 60; box-shadow: var(--sombra); }

/* ---------- v6: imagens no telão ---------- */
.slide-img { margin: 14px 0; text-align: center; }
.slide-img img { max-width: 100%; max-height: 42vh; border-radius: 14px; box-shadow: 0 8px 26px rgba(0, 40, 77, .18); object-fit: contain; background: #fff; }
.slide-img.grande img { max-height: 64vh; }
.slide-img figcaption { margin-top: 8px; color: var(--cinza); font-size: .95rem; }
.slide-img .sem-img { display: none; }
.slide-img.falhou img { display: none; } .slide-img.falhou .sem-img { display: block; padding: 18px; border: 2px dashed var(--linha); border-radius: 12px; color: var(--cinza); }

/* ---- Clínica de Projetos · provocações ---- */
.prov-box { margin-top: 12px; border-top: 1px solid var(--linha); padding-top: 10px; }
.prov-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.prov-cab select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linha); font: inherit; }
.prov-lista { display: grid; gap: 8px; max-height: 52vh; overflow: auto; margin-top: 6px; }
.prov-item { background: var(--gelo); border-radius: 10px; padding: 10px 12px; border: 2px solid transparent; }
.prov-item.on { border-color: var(--laranja); background: #FFF2EC; }
.prov-item small { color: var(--cinza); display: block; }
.prov-item p { margin: 6px 0 8px; font-size: .95rem; white-space: pre-wrap; }
.mg-prov .prov-q { background: var(--gelo); border-left: 4px solid var(--laranja); border-radius: 10px; padding: 12px 14px; font-size: 1.02rem; line-height: 1.45; margin: 8px 0 12px; }
.mg-prov textarea { width: 100%; min-height: 150px; border-radius: 12px; border: 2px solid var(--linha); padding: 12px; font: inherit; font-size: 1rem; resize: vertical; box-sizing: border-box; }
.mg-prov .mg-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.prov-mods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; }
.prov-mod { background: var(--gelo); border: 1px solid var(--linha); border-radius: 10px; padding: 8px 6px; text-align: center; font-size: .78rem; color: #00284D; line-height: 1.2; }
.prov-mod b { display: block; font-size: 1.5rem; color: #FD6B3F; }
.prov-dest { display: grid; gap: 12px; margin-top: 10px; }
.prov-card { background: var(--gelo); color: #00284D; border-radius: 14px; padding: 14px 16px; border-left: 6px solid #FD6B3F; }
.prov-card small { display: block; color: #0067FF; font-weight: 800; margin-bottom: 4px; }
.prov-card em { display: block; color: #5B6573; font-style: normal; font-size: .85em; margin-bottom: 6px; }
.prov-card p { margin: 0; font-size: 1.15em; line-height: 1.4; white-space: pre-wrap; }

/* ---------- tela inicial (atalhos) ---------- */
.tela-inicio { min-height: 100vh; background: linear-gradient(160deg, #00284D 0%, #003a70 45%, #0067FF 100%); }
.ini { max-width: 1080px; margin: 0 auto; padding: 28px 16px 40px; }
.ini-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.tela-inicio .marca, .tela-inicio .marca b { color: #fff; }
.tela-inicio h1 { color: #fff; font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
.tela-inicio > .ini > .mini { color: #CFE3FF; margin-top: 0; }
.ini-status { font-size: .85rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .14); padding: 6px 12px; border-radius: 99px; }
.ini-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 22px; }
.ini-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: var(--r); box-shadow: var(--sombra); padding: 22px; color: var(--tinta); text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.ini-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 40, 77, .3); }
a.ini-card:focus-visible, .ini-btn:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.ini-ico { font-size: 2.2rem; line-height: 1; }
.ini-card b { font-size: 1.25rem; color: var(--marinho); }
.ini-card small { color: var(--cinza); line-height: 1.45; flex: 1; }
.ini-btn { display: inline-block; text-align: center; margin-top: 6px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--azul); color: #fff; font-weight: 800; text-decoration: none; }
.ini-btn.sec { background: #fff; color: var(--marinho); border: 2px solid var(--linha); }
.ini-part small { flex: 0; }
.ini-qr { align-self: center; width: 168px; padding: 10px; background: #fff; border: 1px solid var(--linha); border-radius: 12px; }
.ini-qr svg { display: block; width: 100%; height: auto; }
.ini-url { display: block; text-align: center; font-size: .85rem; background: var(--gelo); border-radius: 8px; padding: 8px; word-break: break-all; color: var(--marinho); }
.ini-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ini-rodape { color: #FFE3D8 !important; font-weight: 700; margin-top: 18px; }
@media (max-width: 420px) { .ini-acoes { grid-template-columns: 1fr; } }