/* ══ Atlas vivo (22/10/2026) ══════════════════════════════════════════════════════════════════════════════════════
   As três partes interativas do Atlas que estavam na página do GFE (lp-vite universo-infinito/livro-vendas.html):
   o celular encostando no Box (demo NFC + boot do Atlas), o Estudo da Fórmula F = ma e as telas vivas do
   Observatório dentro do hub. Blocos copiados de lá; aqui só mudaram os caminhos e a fonte de rótulo. */

/* ── demo NFC do Box ──────────────────────────────────────────
   Simulação de aproximar o celular da tag NFC embutida no Box. Todo o
   movimento sai de UMA variável, --p (0 = longe, 1 = encostado): o celular
   anda, as ondas acendem e o chip pulsa em função dela. Assim o arrasto do
   dedo e a demo automática usam o mesmo caminho, o JS só escreve --p.
   Passado o limiar, o estado vira .is-tap (flash) e depois .is-open (Atlas
   na tela). ------------------------------------------------------------- */
.nfc{margin:clamp(30px,5.5vh,56px) auto 0;max-width:min(1000px,100%)}
.nfc-head{text-align:center;max-width:640px;margin-inline:auto}
.nfc-kick{display:inline-block;font-family:var(--font);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint);border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;margin-bottom:14px}
.nfc-h3{font-family:var(--font-d);font-weight:600;font-size:clamp(1.15rem,2.2vw,1.6rem);
  line-height:1.35}
.nfc-h3 span{color:var(--mint)}

/* Escala. O palco é quadrado de lado --bw. Dentro dele a câmera do Three.js
   (fov 42, z 3.4) enquadra 2.61 unidades de altura e o estojo tem 2.0, então o
   box ocupa 76,6% do lado, é isso que --bh calcula. Daí em diante a
   comparação é física: um celular tem 14,7 cm contra ~24 cm de altura do
   estojo (61%), e 9:19,5 de proporção própria. Mudar só --bw preserva a
   relação de tamanho real em qualquer breakpoint. */
.nfc-stage{--p:0;--bw:min(430px,52vw);
  /* o palco do canvas é levemente mais baixo que largo só pra cortar o ar
     morto acima e abaixo do estojo; a câmera tem fov vertical, então a altura
     do box continua sendo 76,6% da altura do wrap. */
  --wh:calc(.9 * var(--bw));--bh:calc(.766 * var(--wh));
  --ph:calc(.61 * var(--bh));--pw:calc(.4615 * var(--ph));
  --travel:calc(.42 * var(--bw));--pad:clamp(18px,3.5vw,34px);
  position:relative;display:flex;justify-content:center;align-items:center;
  min-height:clamp(345px,40vw,500px);
  margin-top:clamp(22px,4vh,40px);padding:var(--pad);
  border:1px solid var(--line-s);border-radius:18px;background:rgba(4,12,24,.42);
  overflow:hidden;touch-action:pan-y;user-select:none}
.nfc-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  /* glow ambiente atrás do Box (esq.) e do celular (dir.), sempre presente,
     mais o realce quente que cresce com --p perto do contato. */
  background:
    radial-gradient(46% 60% at 62% 50%,rgba(24,240,255,calc(.06 + .18*var(--p))),transparent 72%),
    radial-gradient(42% 58% at 28% 50%,rgba(24,240,255,.16),transparent 72%),
    radial-gradient(34% 52% at 80% 54%,rgba(150,170,255,.12),transparent 72%);
  transition:background .2s linear}

/* lado do Box */
/* a margem à direita é a vaga do celular em repouso. Como margem (e não
   padding da stage), o flex a inclui na conta e o conjunto box+celular fica
   centrado, com padding o box saía puxado pra esquerda. */
.nfc-obj{position:relative;width:var(--bw);height:var(--wh);
  margin-right:calc(var(--travel) + var(--pw) * .5)}
/* halo quente ATRAS do estojo: o render do box tem fundo transparente, entao
   sem isso ele flutua no navy sem pousar em nada. Fica em ::before do wrapper,
   que pinta antes do canvas, a luz vaza pelas bordas, nunca por cima. */
.nfc-obj::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:94%;height:88%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(24,240,255,.2),rgba(24,240,255,.07) 54%,transparent 78%)}
.nfc-box3d{position:relative;width:100%;height:100%}
.nfc-box3d canvas{display:block;width:100%!important;height:100%!important}
/* A tag é o próprio emblema GFE, no centro da face da frente. Por isso o alvo
   é um HALO vazado em volta dele, e não um disco: um disco dourado taparia
   justamente o "GFE" que a pessoa precisa ver sendo encostado. O glifo de
   ondas do NFC fica na borda de cima do halo, fora da tipografia. */
/* --emb-x / --emb-y / --emb-d são escritos pelo JS do box 3D: posição e
   diâmetro do emblema GFE projetados pela câmera real. O fallback vale só
   enquanto o Three.js não rodou (ou se falhar). */
.nfc-chip{position:absolute;top:var(--emb-y,46%);left:var(--emb-x,50%);translate:-50% -50%;
  width:var(--emb-d,12%);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:start center;color:var(--mint);
  border:2px solid rgba(245,170,80,calc(.75 + .25 * var(--p)));
  box-shadow:0 0 calc(16px + 30px * var(--p)) rgba(245,170,80,calc(.45 + .4 * var(--p))),
             0 0 calc(6px + 12px * var(--p)) rgba(255,205,130,calc(.35 + .3 * var(--p))),
             inset 0 0 calc(12px + 22px * var(--p)) rgba(24,240,255,calc(.22 + .22 * var(--p)));
  scale:calc(1 + .05 * var(--p))}
/* ondas do NFC pousadas na borda de cima do círculo, sobre o vão acima do "GFE" */
.nfc-chip svg{width:19%;height:19%;margin-top:-19%;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(4,12,24,.95))}
/* três anéis: cada um nasce na borda do emblema e some pra fora. Só rodam com
   --p alto, senão a caixa fica piscando o tempo todo no scroll. */
.nfc-ring{position:absolute;top:var(--emb-y,46%);left:var(--emb-x,50%);translate:-50% -50%;
  width:var(--emb-d,12%);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(24,240,255,.55);opacity:0;pointer-events:none}
.nfc-stage.is-live .nfc-ring{animation:nfc-ping 1.5s var(--ease) infinite}
.nfc-ring:nth-of-type(2){animation-delay:.5s}
.nfc-ring:nth-of-type(3){animation-delay:1s}
@keyframes nfc-ping{0%{opacity:calc(.7*var(--p));scale:1}100%{opacity:0;scale:3.1}}

/* lado do celular */
/* O celular vive DENTRO de .nfc-obj e é ancorado à tag: em p=1 a BORDA DE CIMA
   do aparelho encosta no CENTRO do halo (emb-x,emb-y), é ali que fica a antena
   NFC de um celular real. O curso é diagonal (a mão vem de baixo e da direita)
   e o aparelho endireita conforme chega. font-size = largura do aparelho, então
   todo o conteúdo da tela é dimensionado em em e acompanha a escala sem uma
   segunda tabela de tamanhos. */
.nfc-phone{position:absolute;top:var(--emb-y,46%);left:var(--emb-x,50%);z-index:2;
  width:var(--pw);height:var(--ph);font-size:var(--pw);
  border-radius:.14em;padding:.022em;cursor:grab;
  background:linear-gradient(150deg,#4a3a22,#151b26 40%,#0b1119 70%,#3d2f1c);
  box-shadow:0 .1em .2em rgba(0,0,0,.55),0 0 0 1px rgba(24,240,255,.18);
  /* origem no topo-centro: a rotação pivota no ponto de contato, então o topo
     fica cravado no centro do halo mesmo com o aparelho levemente inclinado.
     translate(-50%,0) em p=1 = topo-centro sobre (emb-x,emb-y); em p=0 o curso
     diagonal (--travel) estaciona o celular embaixo e à direita. */
  transform-origin:50% 0;
  transform:translate(calc(-50% + var(--travel) * (1 - var(--p))),
                      calc((-50% + var(--travel) * .5) * (1 - var(--p))))
            rotate(calc(-11deg + 7deg * var(--p)));
  /* top/left/width/font-size so mudam na saida da vitrine (ver .is-vitrine);
     estao aqui pra volta ao estado inicial ser animada, e nao um pulo seco. */
  transition:transform .32s var(--ease),top .45s var(--ease),left .45s var(--ease),
             width .45s var(--ease),height .45s var(--ease),font-size .45s var(--ease)}
/* Depois do toque o aparelho VOLTA pro lado e cresce ate a altura do Box.
   A comparacao fisica de tamanho (14,7cm x 24cm) so importa na CHEGADA, pra
   vender que a tag e real; passado o toque o que interessa e LER o Atlas, e
   num aparelho de 61% da altura do box a tela fica pequena demais. Ele
   estaciona no vao ja reservado a direita (travel + pw/2), centrado nesse vao,
   e alinhado verticalmente com o box: top:50% de .nfc-obj + translateY(-50%)
   cai no mesmo eixo que a camera do Three.js usa pra centrar o estojo. */
/* Tamanho do aparelho na vitrine, com TRAVA. Antes era --pvh:var(--bh) fixo :
   a altura do box, e no celular, onde o vao reservado a direita encolhe, o
   aparelho passava da borda e a cena inteira saia do lugar. Agora o teto vem
   do espaco que existe: --pvw-max e o vao (travel + meia largura do aparelho)
   menos uma folga; a altura sai desse teto pela propria proporcao 9:19.5, e so
   usa a altura do box quando ela cabe. */
.nfc-stage{--pvw-max:calc(var(--travel) + var(--pw) * .5 - 8px);
  --pvh:min(var(--bh),calc(var(--pvw-max) / .4615));
  --pvw:calc(.4615 * var(--pvh))}
.nfc-stage.is-vitrine .nfc-phone{
  top:50%;left:100%;width:var(--pvw);height:var(--pvh);font-size:var(--pvw);
  transform:translate(calc((var(--travel) + var(--pw) * .5 - var(--pvw)) * .5),-50%) rotate(0deg);
  transition:transform .62s var(--ease),top .62s var(--ease),left .62s var(--ease),
             width .62s var(--ease),height .62s var(--ease),font-size .62s var(--ease),
             box-shadow .62s var(--ease);
  box-shadow:0 .09em .22em rgba(0,0,0,.6),0 0 0 1px rgba(24,240,255,.3),
             0 0 .55em rgba(24,240,255,.16)}
.nfc-phone.is-drag{cursor:grabbing;transition:none}
/* sem isto o Chrome inicia o drag NATIVO da imagem da tela no primeiro
   movimento, dispara pointercancel e o arrasto morre no primeiro pixel.
   pan-y (e não none) preserva o scroll vertical da página no celular. */
.nfc-phone{touch-action:pan-y;-webkit-user-drag:none}
.nfc-phone img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.nfc-phone::after{content:"";position:absolute;top:.045em;left:50%;translate:-50%;
  width:34%;height:.025em;border-radius:99px;background:#05090f;z-index:3}
.nfc-screen{position:relative;height:100%;border-radius:.12em;
  overflow:hidden;background:#060b13}
.nfc-scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.05em;padding:.08em;text-align:center;
  opacity:0;transition:opacity .3s var(--ease)}
.nfc-scr[data-scr="lock"]{opacity:1;
  background:radial-gradient(70% 50% at 50% 22%,rgba(24,240,255,.13),transparent 70%)}
.nfc-lock-h{font-family:var(--font-d);font-size:.2em;line-height:1.1;color:var(--text)}
.nfc-lock-p{font-family:var(--font);font-size:.07em;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
/* Carregando: entra assim que a tag e lida e SEGURA a cena enquanto o aparelho
   vai pro lado e endireita. A tela do Atlas so aparece depois que ele chegou :
   assim a pessoa le a tela parada, nunca em movimento. */
.nfc-scr[data-scr="load"]{gap:.05em;
  background:radial-gradient(70% 50% at 50% 30%,rgba(24,240,255,.13),transparent 70%)}
.nfc-spin{width:.17em;height:.17em;border-radius:50%;
  border:.018em solid rgba(24,240,255,.22);border-top-color:var(--mint);
  animation:nfc-spin .8s linear infinite}
@keyframes nfc-spin{to{transform:rotate(360deg)}}
.nfc-load-t{font-family:var(--font);font-size:.06em;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2)}
.nfc-load-b{width:52%;height:.014em;border-radius:99px;
  background:rgba(24,240,255,.18);overflow:hidden}
.nfc-load-b i{display:block;width:38%;height:100%;border-radius:99px;background:var(--mint);
  animation:nfc-load 1.1s var(--ease) infinite}
@keyframes nfc-load{0%{transform:translateX(-110%)}100%{transform:translateX(275%)}}
.nfc-scr[data-scr="app"] img{width:100%;height:100%;object-fit:contain;object-position:top center}
.nfc-scr[data-scr="app"]{padding:0;background:#fff}
/* flash branco-ouro do instante do toque */
.nfc-flash{position:absolute;inset:0;background:rgba(253,195,102,.85);opacity:0;
  pointer-events:none;z-index:4}

.nfc-stage.is-tap .nfc-flash{animation:nfc-flash .5s var(--ease)}
@keyframes nfc-flash{0%{opacity:0}18%{opacity:.9}100%{opacity:0}}
.nfc-stage.is-tap .nfc-phone{animation:nfc-bump .4s var(--ease)}
@keyframes nfc-bump{30%{rotate:-2.5deg}70%{rotate:1.2deg}}
.nfc-stage.is-tap .nfc-scr[data-scr="lock"]{opacity:0}
/* o toque cai DIRETO no carregando, nao ha tela intermediaria de "tag lida" */
.nfc-stage.is-tap .nfc-scr[data-scr="load"]{opacity:1}
.nfc-stage.is-open .nfc-scr[data-scr="lock"],
.nfc-stage.is-open .nfc-scr[data-scr="load"]{opacity:0}
.nfc-stage.is-open .nfc-scr[data-scr="app"]{opacity:1}
/* enquanto o boot roda, ele cobre a telinha; lock/load/app ficam ocultos */
.nfc-stage.is-boot .nfc-scr[data-scr="lock"],
.nfc-stage.is-boot .nfc-scr[data-scr="load"],
.nfc-stage.is-boot .nfc-scr[data-scr="app"]{opacity:0}
.nfc-stage.is-boot .nfc-scr[data-scr="boot"]{opacity:1}

/* Afordância: nada se move sozinho, então a seta pulsa sobre o celular até a
   pessoa pegar nele. Fica presa ao aparelho (herda o transform do pai), some
   no primeiro toque e não intercepta o ponteiro. */
.nfc-dica{position:absolute;top:50%;left:-.34em;translate:0 -50%;z-index:3;
  display:grid;place-items:center;width:.26em;height:.26em;border-radius:50%;
  background:var(--mint);color:var(--on-mint);pointer-events:none;
  box-shadow:0 0 0 .05em rgba(24,240,255,.22);animation:nfc-dica 1.7s var(--ease) infinite}
.nfc-dica svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
@keyframes nfc-dica{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(-22%);opacity:1}}
.nfc-stage.ja-mexeu .nfc-dica{opacity:0;animation:none;transition:opacity .3s}

.nfc-foot{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(14px,2.4vh,20px);font-family:var(--font);
  font-size:clamp(.62rem,2.4vw,.72rem);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);text-align:center}
/* min-width:0, item de flex nao encolhe abaixo do proprio conteudo por padrao,
   entao a frase inteira ficava numa linha so e vazava pela direita no celular.
   Com isto ela pode quebrar. */
.nfc-foot>span{min-width:0}
.nfc-replay{font:inherit;color:var(--mint);background:none;border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;cursor:pointer;transition:background .2s var(--ease)}
.nfc-replay:hover{background:var(--mint-a14)}

@media(max-width:560px){
  /* no celular a conta é apertada: box + curso + aparelho precisam caber em
     ~1.35·--bw. Curso menor (o celular já nasce mais perto) compra a largura
     que falta sem encolher o box nem falsear a comparação de tamanho. */
  .nfc-stage{--bw:64vw;--travel:calc(.25 * var(--bw));--pad:12px}
}
/* sem movimento: o celular já nasce encostado e o Atlas na tela, a ideia
   chega pela imagem final, sem depender da animação. */
@media(prefers-reduced-motion:reduce){
  .nfc-stage{--p:1}
  /* --p:1 já deixa o celular encostado (topo no centro do halo); só matamos a
     animação, mantendo o transform derivado de --p para o docking correto. */
  .nfc-phone{animation:none}
  .nfc-stage .nfc-ring{animation:none}
  .nfc-scr[data-scr="lock"]{opacity:0}
  .nfc-scr[data-scr="app"]{opacity:1}
}


/* ═══════════════════════════════════════════════════════════════════════
   ESTUDO DA FÓRMULA · F = ma, amostra jogável do Atlas
   Portado do handoff "Estudo da Fórmula v3" (o protótipo original roda num
   compilador de design e não é código aproveitável; aqui é JS puro).
   O tema CLARO é de propósito: dentro da dobra escura, o bloco lê como uma
   TELA do produto, não como mais uma seção da LP. Por isso está todo
   escopado em .ef-* e não herda nenhum token da página.
   ═══════════════════════════════════════════════════════════════════════ */
/* Museo: a família do Atlas. O repo só tem 100/300/500/900 em woff2, o
   protótipo pedia 700 para a ênfase; aqui a ênfase é 500 e o peso 700
   (Museo900) fica só nos eyebrows/CTA, que são caixa alta e curtos. */
@font-face{font-family:MuseoUN;src:url('/produtos/_comum/fontes/Museo300-Regular.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:MuseoUN;src:url('/produtos/_comum/fontes/Museo500-Regular.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:MuseoUN;src:url('/produtos/_comum/fontes/Museo900-Regular.woff2') format('woff2');font-weight:700;font-display:swap}

.ef{--ink:#082F49;--soft:rgba(12,74,110,.68);--faint:rgba(12,74,110,.45);
  --ac:#0ECFAD;--acd:#0B8F7A;--tint:#F0FFFB;--tile:#F1F7F5;--tileon:#D9FBF2;
  --efline:#E4EAE8;--dash:#DCE5DF;--amb:#E2C24A;--ambd:#8A6D1A;
  font-family:MuseoUN,system-ui,-apple-system,sans-serif;font-weight:300;
  color:var(--ink);line-height:1.5;text-align:left;letter-spacing:normal;
  background:#FFFFFF;border-radius:22px;overflow:hidden;
  margin:clamp(26px,4vh,48px) auto 0;max-width:1000px;
  box-shadow:0 34px 90px -44px rgba(0,0,0,.85),0 0 0 1px rgba(24,240,255,.14)}
.ef *{box-sizing:border-box}
.ef strong{font-weight:500}
.ef em{font-style:italic}

/* barra de cima: é o que faz o bloco parecer o Atlas aberto, e não um card */
.ef-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:11px clamp(14px,2.4vw,22px);background:rgba(255,255,255,.92);
  border-bottom:1px solid #EDF1EE}
.ef-top-n{display:flex;flex-direction:column;gap:1px;min-width:0}
.ef-top-t{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.15}
.ef-top-s{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acd)}
.ef-top-pill{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:6px 13px;border-radius:9999px;background:var(--tileon);color:var(--acd);white-space:nowrap}
.ef-main{display:flex;flex-direction:column;gap:15px;padding:clamp(15px,2.6vw,24px)}

/* seções = fichas brancas (o layout "fichas" do protótipo) */
.ef-sec{background:#fff;border:1px solid var(--efline);border-radius:20px;
  padding:20px clamp(15px,2.4vw,24px);display:flex;flex-direction:column;gap:13px}
.ef-sec--hero{align-items:center;text-align:center;gap:12px}
.ef-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:1px dashed #E0E8E2;padding-bottom:13px}
.ef-ic{flex:none;width:40px;height:40px;border-radius:13px;background:var(--tile);
  display:flex;align-items:center;justify-content:center;font-size:18px}
.ef-hdt{flex:1;min-width:190px;display:flex;flex-direction:column;gap:2px}
.ef-kick{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acd)}
.ef-h{margin:0;font-family:MuseoUN,sans-serif;font-weight:300;font-size:19px;color:var(--ink);line-height:1.2;letter-spacing:normal}
.ef-h strong{font-weight:500}
.ef-sub{font-size:12px;font-weight:300;color:var(--faint)}

.ef-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center}
.ef-chip{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:9999px;background:#F0F2F4;color:var(--soft)}
.ef-chip--area{border:1.5px solid #3DB888;background:rgba(61,184,136,.12);color:#1F6B4E}
.ef-t1{margin:0;font-family:MuseoUN,sans-serif;font-weight:300;letter-spacing:normal;
  font-size:clamp(21px,3vw,30px);color:var(--ink);line-height:1.15}
.ef-t1 strong{font-weight:500}

/* fórmula clicável, tracejado é convite, sólido+tint é o selecionado */
.ef-toks{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;padding:4px 0 0}
.ef-tok{font-family:MuseoUN,sans-serif;font-size:clamp(26px,4.6vw,40px);line-height:1;
  padding:12px 15px 14px;border-radius:18px;border:2px dashed var(--dash);background:#fff;
  color:var(--ink);cursor:pointer;transition:all .18s ease}
.ef-tok:hover{background:#EFF7F2;transform:translateY(-2px)}
.ef-tok.on{border-style:solid;border-color:var(--ac);background:var(--tint);
  color:var(--acd);transform:translateY(-3px)}
.ef-tok--still{border-color:transparent;background:transparent;color:#8CA3B2;cursor:default}
.ef-tok--still:hover{background:transparent;transform:none}
.ef-hint{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:300;color:var(--soft)}

.ef-deco{width:100%;max-width:760px;background:var(--tint);border:1px solid rgba(14,207,173,.35);
  border-radius:18px;padding:16px 20px;display:flex;gap:18px;align-items:center;
  text-align:left;flex-wrap:wrap}
.ef-deco-l{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:92px}
.ef-deco-sym{display:flex;align-items:center;justify-content:center;width:82px;height:68px;
  border-radius:13px;background:#fff;border:1px solid var(--tileon);font-size:28px;color:var(--acd)}
.ef-deco-un{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 11px;border-radius:9999px;background:var(--tileon);color:var(--acd);white-space:nowrap}
.ef-deco-r{flex:1;min-width:220px;display:flex;flex-direction:column;gap:5px}
.ef-deco-n{font-size:15px;font-weight:500;color:var(--ink)}
.ef-deco-p{margin:0;font-size:13px;line-height:1.62;font-weight:300;color:var(--soft)}
.ef-deco-d{margin-top:5px;display:flex;align-items:flex-start;gap:9px;background:#fff;
  border:1px solid var(--efline);border-radius:12px;padding:10px 13px;
  font-size:12.5px;line-height:1.55;color:var(--ink)}
.ef-deco-d svg{flex:none;width:13px;height:13px;margin-top:3px;stroke:var(--ac);
  stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* CTA menta com sombra dura, assinatura do Atlas */
.ef-cta{font-family:MuseoUN,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:12px 22px;border-radius:15px;border:none;cursor:pointer;
  background:var(--ac);color:#fff;box-shadow:0 4px 0 #0AA48A;transition:all .12s ease}
.ef-cta:hover{filter:brightness(1.05)}
.ef-cta:active{transform:translateY(3px);box-shadow:none}
.ef-cta--off{background:#fff;color:var(--soft);border:1.5px solid var(--dash);box-shadow:none}
.ef-cta--off:active{transform:none}

.ef-cv{display:block;width:100%;height:340px;border-radius:16px;background:#fff;border:1px solid var(--efline)}
.ef-cv--lab{height:290px}
.ef-fold{display:flex;flex-direction:column;gap:12px}
.ef-fold[hidden]{display:none}

.ef-g2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:stretch}
.ef-box{background:#fff;border:1px solid var(--efline);border-radius:16px;padding:14px 16px}
.ef-cap{display:flex;align-items:flex-start;gap:13px}
.ef-cap-n{flex:none;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;
  padding:5px 10px;border-radius:9999px;background:var(--tileon);color:var(--acd)}
.ef-cap-t{margin:0;font-size:13.5px;line-height:1.62;font-weight:300;color:var(--ink)}
.ef-cap-x{margin-top:9px;font-size:16px;color:var(--ink);overflow-x:auto}
.ef-lines-h{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.ef-lines{display:flex;flex-direction:column;gap:5px}
.ef-line{text-align:left;border:none;cursor:pointer;font-family:MuseoUN,sans-serif;
  display:flex;align-items:center;gap:10px;border-radius:11px;padding:8px 11px;
  background:transparent;opacity:.3;transition:opacity .3s ease,background .2s ease}
.ef-line.seen{opacity:.75}
.ef-line.on{opacity:1;background:var(--tint)}
.ef-line-n{flex:none;width:18px;height:18px;border-radius:9999px;background:#F0F2F4;color:var(--soft);
  font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.ef-line.seen .ef-line-n{background:var(--tileon);color:var(--acd)}
.ef-line.on .ef-line-n{background:var(--ac);color:#fff}
.ef-line-x{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ef-transport{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ef-tbtns{display:flex;gap:6px}
.ef-tb{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--dash);background:#fff;
  color:var(--soft);font-size:15px;cursor:pointer;font-family:MuseoUN,sans-serif}
.ef-tb:hover{border-color:var(--ac);color:var(--acd)}
.ef-tb--play{width:52px;border-radius:9999px;border:none;background:var(--ac);color:#fff;
  box-shadow:0 4px 0 #0AA48A;transition:all .12s ease}
.ef-tb--play:active{transform:translateY(3px);box-shadow:none}
.ef-dots{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ef-dot{min-width:29px;height:29px;border-radius:9999px;border:1.5px solid #DFE8E3;background:#fff;
  color:var(--soft);font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;
  cursor:pointer;padding:0 8px;transition:all .15s ease}
.ef-dot:hover{border-color:var(--ac)}
.ef-dot.seen{background:var(--tileon);border-color:var(--tileon);color:var(--acd)}
.ef-dot.on{background:var(--ac);border-color:var(--ac);color:#fff}

/* laboratório */
.ef-g3{display:grid;grid-template-columns:minmax(200px,1fr) minmax(180px,.8fr) minmax(220px,1.1fr);
  gap:12px;align-items:stretch}
.ef-ctrl{display:flex;flex-direction:column;gap:6px;justify-content:center}
.ef-ctrl-h{display:flex;justify-content:space-between;font-size:12px;font-weight:500;color:var(--soft)}
.ef-ctrl-v{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:var(--acd)}
.ef-ctrl-r{display:flex;align-items:center;gap:8px}
.ef-ctrl-f{display:flex;justify-content:space-between;font-size:10px;font-weight:300;color:var(--faint)}
.ef-step{flex:none;width:29px;height:29px;border-radius:50%;border:1.5px solid var(--dash);
  background:#fff;color:var(--soft);font-size:15px;font-weight:500;cursor:pointer;
  font-family:MuseoUN,sans-serif;line-height:1}
.ef-step:hover{border-color:var(--ac);color:var(--acd)}
.ef-rng{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;flex:1;min-width:0;margin:0}
.ef-rng::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:#EAEEEB}
.ef-rng::-moz-range-track{height:6px;border-radius:4px;background:#EAEEEB}
.ef-rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-8px;
  width:22px;height:22px;border-radius:50%;background:var(--ac);border:3px solid #fff;
  box-shadow:0 1px 5px rgba(4,16,26,.25)}
.ef-rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ac);
  border:3px solid #fff;box-shadow:0 1px 5px rgba(4,16,26,.25)}
.ef-live{text-align:center;display:flex;flex-direction:column;justify-content:center;gap:5px}
.ef-live-h{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acd)}
.ef-live-v{font-size:15px;color:var(--ink)}
.ef-insight{background:var(--tint);border:1px solid rgba(14,207,173,.35);border-radius:14px;
  padding:11px 15px;font-size:12.5px;line-height:1.6;font-weight:300;color:var(--ink);
  display:flex;align-items:center}

/* acordeões do "Para ir além" */
.ef-acc{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font-family:MuseoUN,sans-serif;cursor:pointer;border:1.5px dashed var(--dash);background:#fff;
  border-radius:18px;padding:13px 16px;transition:all .16s ease}
.ef-acc:hover{background:#EFF7F2;transform:translateY(-2px)}
.ef-acc[aria-expanded=true]{border-style:solid;border-color:var(--ac);background:var(--tint);transform:none}
.ef-acc-ic{flex:none;width:38px;height:38px;border-radius:13px;background:var(--tile);
  display:flex;align-items:center;justify-content:center;font-size:16px}
.ef-acc[aria-expanded=true] .ef-acc-ic{background:var(--tileon)}
.ef-acc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ef-acc-t b{font-size:14.5px;font-weight:500;color:var(--ink)}
.ef-acc-t span{font-size:12px;font-weight:300;color:rgba(12,74,110,.55)}
.ef-acc-ch{flex:none;width:29px;height:29px;border-radius:9999px;background:#F0F2F4;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  color:var(--acd);transition:transform .2s ease}
.ef-acc[aria-expanded=true] .ef-acc-ch{background:var(--tileon);transform:rotate(180deg)}
.ef-accp{background:#fff;border:1px solid var(--efline);border-radius:18px;padding:18px 22px;
  display:flex;flex-direction:column;gap:11px}
.ef-accp[hidden]{display:none}
.ef-accp--amb{background:rgba(226,194,74,.08);border:1.5px dashed var(--amb)}
.ef-accp p{margin:0;font-size:13.5px;line-height:1.7;font-weight:300;color:var(--ink)}
.ef-accp p b{font-weight:500;color:var(--acd)}
.ef-accp--amb p b{color:var(--ambd)}
.ef-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.ef-figs img{width:100%;height:auto;border-radius:12px;border:1px solid var(--efline);background:#fff}
.ef-figc{font-size:11px;font-weight:300;color:var(--faint);text-align:center}
.ef-bancas{display:flex;gap:8px;flex-wrap:wrap}
.ef-banca{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:6px 12px;border-radius:9999px}
.ef-banca--enem{border:1.5px solid #E87560;background:rgba(232,117,96,.12);color:#A23A28}
.ef-banca--fuv{border:1.5px solid #5BAFBE;background:rgba(91,175,190,.12);color:#2A6975}
.ef-banca--uni{border:1.5px solid #3DB888;background:rgba(61,184,136,.12);color:#1F6B4E}

.ef-foot{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:12px;font-weight:300;color:var(--faint);text-align:center;padding-top:2px}

/* mesmo caso do .ob: dentro do painel do hub quem manda é a largura do bloco,
   não a da janela. */
.ef{container-type:inline-size}
@container (max-width:700px){
  .ef-g2,.ef-g3{grid-template-columns:1fr}
  .ef-cv{height:250px}
  .ef-cv--lab{height:225px}
  /* símbolo EM CIMA, texto EMBAIXO, cada um em largura cheia (não espreme
     a coluna de texto num fio de 1 caractere). */
  .ef-deco{flex-direction:column;align-items:stretch;padding:12px;gap:10px}
  .ef-deco-l{flex-direction:row;justify-content:center}
  /* cabeçalho do card: ícone + texto na 1ª linha (texto ocupa tudo), botão
     desce pra uma linha própria em largura cheia, some a coluna espremida */
  .ef-hd{align-items:flex-start;gap:10px}
  .ef-hdt{flex:1 1 auto;min-width:0}
  .ef-cta{flex:1 1 100%;width:100%;padding:11px 22px}
  .ef-main{gap:12px;padding:12px}
  .ef-sec{padding:14px 12px}
  .ef-tok{font-size:clamp(22px,7cqw,32px);padding:9px 11px 11px}
  .ef-toks{gap:6px}
}
/* FALLBACK por viewport: se o navegador não suportar @container (Safari antigo),
   garante o mesmo empilhamento no celular, senão as definições vazam. */
@media (max-width:760px){
  .ef-g2,.ef-g3{grid-template-columns:1fr}
  .ef-cv{height:250px}
  .ef-cv--lab{height:225px}
  .ef-deco{flex-direction:column;align-items:stretch;padding:12px;gap:10px}
  .ef-deco-l{flex-direction:row;justify-content:center}
  .ef-deco-r{min-width:0}
  .ef-hd{align-items:flex-start;gap:10px}
  .ef-hdt{flex:1 1 auto;min-width:0}
  .ef-cta{flex:1 1 100%;width:100%;padding:11px 22px}
  .ef-main{gap:12px;padding:12px}
  .ef-sec{padding:14px 12px}
  .ef-toks{gap:6px}
  /* trava rígida: nada dentro do Estudo pode ultrapassar a largura da tela */
  .ef,.ef-main,.ef-sec,.ef-deco,.ef-deco-r,.ef-deco-p,.ef-deco-d{max-width:100%;box-sizing:border-box}
  .ef-deco-r{min-width:0}
  .ef-deco-p,.ef-deco-d span{overflow-wrap:anywhere;word-break:break-word}
}
.ef-deco-p,.ef-cap-t,.ef-accp p{overflow-wrap:break-word}
/* dentro do acordeão ele é o conteúdo do painel, não uma ilha solta na dobra */
.hub-body .ef{margin:14px 0 0;max-width:none;box-shadow:none;border:1px solid #E4EAE8}
.hub-body .ef p{font-size:inherit;line-height:inherit;color:inherit;margin-top:0}
.hub-body .ef p b,.hub-body .ef b{color:inherit}
.hub-body .ef .ef-deco-p{font-size:13px;line-height:1.62;color:var(--soft)}
.hub-body .ef .ef-cap-t{font-size:13.5px;line-height:1.62}
.hub-body .ef .ef-accp p{font-size:13.5px;line-height:1.7}
@media (prefers-reduced-motion:reduce){
  .ef-tok,.ef-acc,.ef-line,.ef-dot,.ef-cta,.ef-tb{transition:none}
  .ef-acc:hover,.ef-tok:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   OBSERVATÓRIO DE QUESTÕES, telas vivas dentro do hub 01–06
   Porte do handoff design_handoff_observatorio_questoes, perfil VESTIBULAR
   (ENEM · FUVEST · UNICAMP). Os dados saem de data/*.json do handoff, não
   do protótipo, ver o bloco OB_* no <script>.
   Cada tela entra no acordeão que já falava dela, no lugar do print.
   Herda o tema claro de .ef; aqui só o que é próprio do Observatório.
   ═══════════════════════════════════════════════════════════════════════ */
.ob{--ink:#082f49;--soft:#5F6368;--faint:#8A97A8;--ac:#15AFBA;--acd:#0B7E86;
  --tint:#E5FFFF;--tile:#F7F7F7;--efline:#E7EBF0;--dash:#C9D6E4;
  font-family:MuseoUN,system-ui,-apple-system,sans-serif;font-weight:300;
  color:var(--ink);line-height:1.5;text-align:left;letter-spacing:normal;
  background:#FFFFFF;border-radius:18px;padding:clamp(14px,2.2vw,22px);
  margin:4px 0 2px;display:flex;flex-direction:column;gap:16px}
.ob *{box-sizing:border-box}
.ob strong,.ob b{font-weight:500}

.ob-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ob-h h4{margin:0;font-family:MuseoUN,sans-serif;font-weight:300;font-size:18px;
  color:var(--ink);letter-spacing:normal;line-height:1.2}
.ob-h h4 strong{font-weight:500}
.ob-note{font-size:11.5px;font-weight:300;color:var(--faint)}
.ob-sub{margin:0;font-size:12.5px;line-height:1.6;font-weight:300;color:var(--soft)}
.ob-card{background:var(--tile);border:1px solid var(--tile);border-radius:16px;
  padding:16px 18px;display:flex;flex-direction:column;gap:12px}

/* barra empilhada por banca, o desenho que se repete em quase toda tela */
.ob-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:10.5px;font-weight:500;color:var(--soft)}
/* item da legenda de raciocínio clicável (abre a explicação do termo) */
.ob-leg-b{display:inline-flex;align-items:center;gap:5px;background:none;border:none;
  cursor:pointer;font-family:MuseoUN,sans-serif;font-size:10.5px;font-weight:500;color:var(--soft);
  padding:2px 4px;border-radius:6px;transition:background .15s,color .15s}
.ob-leg-b:hover{background:var(--tint);color:var(--acd)}
.ob-leg-b:hover .ob-sw{outline:2px solid var(--ac);outline-offset:1px}
.ob-leg-b.on{background:var(--tint);color:var(--acd)}
.ob-leg-b.on .ob-sw{outline:2px solid var(--ac);outline-offset:1px}
.ob-legend span{display:flex;align-items:center;gap:5px}
.ob-sw{width:9px;height:9px;border-radius:3px;flex:none}
.ob-bar{display:block;height:13px;border-radius:7px;background:#FFFFFF;overflow:hidden;position:relative}
.ob-bar i{position:absolute;inset:0;display:flex;border-radius:7px;overflow:hidden;
  transition:width 1s cubic-bezier(.22,.8,.3,1)}
.ob-bar i b{display:block;height:100%}

/* 02 · radar de recorrência */
.ob-rank{display:flex;flex-direction:column}
.ob-rank-h,.ob-row{display:grid;grid-template-columns:38px minmax(120px,1fr) 120px;
  gap:10px;align-items:center;padding:9px 8px}
.ob-rank-h{background:#fff;border:1px solid var(--efline);border-radius:12px;margin-bottom:8px}
.ob-rank-h span{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ob-row{border:none;border-radius:12px;cursor:pointer;background:transparent;width:100%;
  text-align:left;font-family:MuseoUN,sans-serif;transition:background .15s ease}
.ob-row:hover{background:var(--tint);box-shadow:inset 0 0 0 2px #B5E9ED}
.ob-n{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ac)}
.ob-nome{display:flex;align-items:center;gap:8px;min-width:0}
.ob-nome span{font-size:12.5px;font-weight:500;color:#233F5B;min-width:0}
.ob-eq{flex:none;font-family:ui-monospace,Menlo,monospace;font-size:10px;padding:2px 7px;
  border-radius:7px;background:#EEF3FA;border:1px solid #D9E2EF;color:#233F5B}
.ob-tot{font-family:ui-monospace,Menlo,monospace;font-size:12px;text-align:right;color:var(--soft)}
.ob-idx{justify-self:end;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;
  padding:4px 0;width:48px;text-align:center;border-radius:9999px;border:2px solid var(--ac)}
.ob-mais{align-self:center;background:var(--tile);border:2px solid var(--tile);color:var(--ac);
  font-family:MuseoUN,sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:9px 20px;border-radius:14px;cursor:pointer;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.05)}
.ob-mais:hover{border-color:var(--ac);background:var(--tint)}

/* busca + filtros da galeria */
.ob-filtros{display:flex;flex-direction:column;gap:10px;background:#fff;
  border:1px solid var(--efline);border-radius:16px;padding:12px 14px}
.ob-busca{position:relative}
.ob-busca input{width:100%;font-family:MuseoUN,sans-serif;font-size:12.5px;font-weight:500;
  color:#233F5B;background:#F4F6F9;border:2px solid #F4F6F9;border-radius:9999px;
  padding:10px 14px 10px 34px;transition:border-color .15s ease}
.ob-busca input:focus{outline:none;border-color:var(--ac)}
.ob-busca svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;stroke:var(--ac);stroke-width:2.4;fill:none}
.ob-frow{display:grid;grid-template-columns:50px 1fr;gap:10px;align-items:center}
.ob-frow>b{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ob-chips{display:flex;gap:6px;flex-wrap:wrap}
.ob-chip{display:flex;align-items:center;gap:6px;font-family:MuseoUN,sans-serif;font-size:11px;
  font-weight:500;padding:6px 13px;border-radius:9999px;cursor:pointer;
  border:1.5px solid #E3E9F2;background:#fff;color:var(--soft);transition:all .15s ease}
.ob-chip:hover{border-color:var(--ac)}
.ob-chip.on{background:#0C2D48;border-color:#0C2D48;color:#fff}
.ob-chip i{width:8px;height:8px;border-radius:50%;flex:none}
.ob-conta{font-size:11.5px;font-weight:500;color:var(--faint);align-self:flex-end}
.ob-conta b{font-weight:700;color:var(--ac)}

/* cards da galeria */
.ob-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px}
.ob-fcard{text-align:left;background:var(--tile);border:2px solid var(--tile);border-radius:16px;
  padding:14px;cursor:pointer;font-family:MuseoUN,sans-serif;display:flex;flex-direction:column;
  gap:10px;transition:border-color .15s ease,transform .15s ease}
.ob-fcard:hover{border-color:var(--ac);transform:translateY(-2px)}
.ob-fcard-t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ob-area{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:9999px}
.ob-fcard-q{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:700;color:var(--ac)}
.ob-fcard-eq{display:flex;align-items:center;justify-content:center;min-height:64px;
  background:#fff;border-radius:12px;padding:10px;font-family:Georgia,serif;
  font-size:19px;color:#233F5B;text-align:center}
.ob-fcard-n{font-size:13px;font-weight:500;color:var(--ink);line-height:1.3}
.ob-fcard-f{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10.5px;font-weight:500;color:var(--faint)}
/* "ver dossiê →" é o botão do cartão: uma linha por natureza; quem divide a largura é o "mais cobrada" */
.ob-fcard-f b{flex:none;white-space:nowrap;font-weight:700;color:var(--ac)}
.ob-vazio{background:#fff;border:2px dashed var(--dash);border-radius:16px;padding:26px;
  text-align:center;font-size:12.5px;color:var(--soft)}

/* 03 · mapa */
/* sem min-width nem scroll: o mapa escala pra caber na largura do painel.
   As fontes do SVG (em unidades do viewBox) são maiores pra sobreviver à
   redução. */
.ob-mapa{background:#fff;border-radius:16px;padding:10px}
.ob-mapa svg{width:100%;height:auto;display:block}
.ob-mapa svg g{cursor:pointer}
.ob-mapa svg g:hover{opacity:.75}
.ob-zonas{display:flex;flex-direction:column;gap:3px}
.ob-zona{text-align:left;cursor:pointer;font-family:MuseoUN,sans-serif;background:#fff;
  border:1.5px solid #fff;border-radius:10px;padding:7px 11px;display:flex;flex-direction:column;
  gap:5px;transition:border-color .15s ease}
.ob-zona:hover{border-color:var(--ac)}
.ob-zona-h{display:flex;align-items:center;gap:7px}
.ob-zona-h b{font-size:11px;font-weight:700;letter-spacing:.04em;color:#233F5B}
.ob-zona-h em{margin-left:auto;font-style:normal;font-family:ui-monospace,Menlo,monospace;
  font-size:10.5px;font-weight:700;color:#233F5B}
.ob-mini{height:6px;border-radius:3px;background:#EDF1F7;overflow:hidden;display:block}
.ob-mini i{display:block;height:100%;border-radius:4px;transition:width .9s ease}

/* 04 · gaps + linha do tempo */
.ob-gaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:10px}
.ob-gap{text-align:left;background:#fff;border:2px solid #fff;border-radius:14px;padding:13px 15px;
  cursor:pointer;font-family:MuseoUN,sans-serif;display:flex;flex-direction:column;gap:6px;
  transition:all .15s ease}
.ob-gap:hover{border-color:var(--ac);background:var(--tint);transform:translateY(-2px)}
.ob-gap b{font-size:12.5px;font-weight:700;color:var(--ink)}
.ob-gap span{font-size:11.5px;font-weight:300;line-height:1.55;color:var(--soft)}
.ob-gap-t{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.ob-gap-t em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;
  font-weight:700;padding:3px 8px;border-radius:9999px}
.ob-tl{display:flex;align-items:flex-end;gap:4px;height:104px}
.ob-tl>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.ob-tl i{border-radius:4px 4px 0 0;background:var(--ac);display:block;
  transition:height .9s cubic-bezier(.22,.8,.3,1)}
.ob-tl-x{display:flex;gap:4px;margin-top:6px}
.ob-tl-x span{flex:1;text-align:center;font-family:ui-monospace,Menlo,monospace;
  font-size:9px;color:#9FB3C8}
.ob-quote{margin:0;padding:6px 0 6px 13px;border-left:3px solid var(--ac);font-style:italic;
  font-size:12.5px;line-height:1.6;color:var(--soft)}

/* 05 · DNA das bancas */
.ob-bancas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ob-banca-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ob-banca-n{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--ink)}
.ob-banca-q{margin-top:2px;font-size:11px;color:var(--faint)}
.ob-anel{position:relative;width:52px;height:52px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center}
.ob-anel span{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;
  align-items:center;justify-content:center;font-family:ui-monospace,Menlo,monospace;
  font-size:10.5px;font-weight:700;color:#233F5B}
.ob-rac{display:flex;height:11px;border-radius:6px;overflow:hidden;background:#EDF1F7}
.ob-rac b{display:block;height:100%;transition:width .9s cubic-bezier(.22,.8,.3,1)}
.ob-assin{border-top:1px solid #EDF1F7;padding-top:10px;font-size:12px;line-height:1.6;color:var(--soft)}
.ob-assin b{color:var(--ink);font-weight:700}
.ob-top{display:flex;flex-direction:column;gap:5px}
.ob-top>span{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ob-topb{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;
  border:2px solid #fff;border-radius:11px;padding:7px 11px;cursor:pointer;
  font-family:MuseoUN,sans-serif;transition:all .15s ease}
.ob-topb:hover{border-color:var(--ac);background:var(--tint)}
.ob-topb i{font-style:normal;font-size:12px;font-weight:500;color:#233F5B}
.ob-topb em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700}
.ob-tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:11px}
.ob-tipo{border:2px solid #EDF1F7;border-radius:16px;padding:15px;display:flex;
  flex-direction:column;gap:9px;background:#fff}
.ob-tipo>b{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:9999px}
.ob-tipo p{margin:0;font-size:12px;line-height:1.6;color:var(--soft)}
.ob-tipo ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.ob-tipo li{font-size:11.5px;line-height:1.5;color:var(--soft)}
.ob-tipo-h{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ob-tipo-ex{border-left:2px solid var(--ac);background:var(--tint);border-radius:0 8px 8px 0;
  padding:8px 11px;font-size:11.5px!important;line-height:1.55!important;color:var(--soft)!important}
.ob-peso{display:grid;grid-template-columns:58px 1fr 34px;align-items:center;gap:9px}
.ob-peso b{font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:700}
.ob-peso em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;
  font-weight:700;text-align:right;color:#233F5B}
.ob-ex{border-top:1px solid #EDF1F7;padding-top:9px;font-size:11.5px;line-height:1.6;
  color:var(--soft);font-style:italic}

/* 06 · relatório */
.ob-tab{width:100%;overflow-x:auto}
/* corpo rolável das tabelas: revela poucas linhas por vez e rola o resto */
.ob-scroll{max-height:220px;overflow-y:auto;border-radius:0 0 8px 8px}
.ob-tab-h,.ob-tab-r{display:grid;gap:8px;align-items:center;padding:9px 10px;min-width:520px}
.ob-tab--r2 .ob-tab-h,.ob-tab--r2 .ob-tab-r{grid-template-columns:minmax(130px,1fr) minmax(60px,110px) 54px 54px 54px 48px}
.ob-tab--r3 .ob-tab-h,.ob-tab--r3 .ob-tab-r{grid-template-columns:1fr 82px 82px 82px}
.ob-tab-h{background:var(--tile);border-bottom:1px solid #E3E9F2}
.ob-tab-h span,.ob-tab-h button{font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);background:none;border:none;padding:0;
  font-family:MuseoUN,sans-serif}
.ob-tab-h button{cursor:pointer;text-align:right}
.ob-tab-r{border-top:1px solid #EDF1F7;border-radius:8px;cursor:pointer;background:transparent;
  width:100%;text-align:left;font-family:MuseoUN,sans-serif;transition:background .15s ease}
.ob-tab-r:hover{background:var(--tint);box-shadow:inset 0 0 0 2px #B5E9ED}
.ob-cel{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:700;
  padding:4px 6px;border-radius:7px;text-align:center}
.ob-cel--r{text-align:right}
.ob-r1{display:flex;flex-direction:column;gap:16px}
.ob-r1-row{display:grid;grid-template-columns:74px 1fr 38px;align-items:center;gap:11px}
.ob-r1-row>b{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:700}
.ob-r1-bar{display:flex;height:22px;border-radius:8px;overflow:hidden;background:#EDF1F7}
.ob-r1-bar b{display:flex;align-items:center;justify-content:center;height:100%;
  font-size:10px;font-weight:700;color:#233F5B;transition:width .9s cubic-bezier(.22,.8,.3,1)}
.ob-selo{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700;
  padding:3px 9px;border-radius:8px;background:var(--tint);color:var(--ac)}

/* números do topo (acordeão 01) */
.ob-kpis{display:flex;flex-wrap:wrap;gap:8px}
.ob-kpi{display:flex;align-items:baseline;gap:6px;background:var(--tile);border-radius:9999px;padding:8px 15px}
.ob-kpi b{font-weight:700;font-size:15px;color:var(--ac);font-variant-numeric:tabular-nums}
.ob-kpi span{font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}

/* dossiê, overlay compartilhado por todas as telas */
.ob-ov{position:fixed;inset:0;z-index:96;display:none;background:rgba(4,12,24,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:clamp(10px,3vh,34px)}
.ob-ov.on{display:flex;align-items:center;justify-content:center}
.ob-dos{width:min(880px,100%);max-height:92vh;overflow-y:auto;background:#fff;border-radius:22px;
  padding:clamp(18px,3vw,30px);display:flex;flex-direction:column;gap:18px;
  box-shadow:0 30px 90px rgba(4,12,24,.5);
  font-family:MuseoUN,system-ui,sans-serif;font-weight:300;color:#082f49;
  text-align:left;line-height:1.5;letter-spacing:normal}
.ob-dos-h{background:var(--tint);border-radius:16px;padding:18px 22px;text-align:center}
.ob-dos-h h4{margin:0;font-weight:700;font-size:clamp(18px,2.4vw,26px);line-height:1.2;color:#0C2D48}
.ob-dos-chips{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.ob-dos-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.ob-dos-eq{display:flex;align-items:center;justify-content:center;background:var(--tile);
  border-radius:16px;padding:22px;min-height:104px;font-family:Georgia,serif;font-size:26px;color:#233F5B}
.ob-dos-g{display:flex;align-items:center;gap:15px;background:var(--tile);border-radius:16px;padding:15px}
.ob-gauge{position:relative;flex:none;width:80px;height:80px;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.ob-gauge>span{width:62px;height:62px;border-radius:50%;background:#fff;display:flex;
  flex-direction:column;align-items:center;justify-content:center}
.ob-gauge b{font-weight:700;font-size:21px;line-height:1;color:var(--ac)}
.ob-gauge em{font-style:normal;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#9FB3C8}
.ob-gauge-t{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
.ob-gauge-d{font-size:12.5px;line-height:1.6;color:#3C4A5A}
.ob-dos-bars{display:flex;flex-direction:column;gap:8px}
.ob-dos-bar{display:grid;grid-template-columns:68px 1fr 30px;align-items:center;gap:11px}
.ob-dos-bar b{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700}
.ob-dos-bar em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
  font-weight:700;text-align:right;color:#233F5B}
.ob-dos-leitura{background:var(--tint);border:2px solid #B5E9ED;border-radius:16px;padding:15px 17px}
.ob-dos-leitura b{display:block;font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ac);margin-bottom:7px}
.ob-dos-leitura p{margin:0;font-size:13px;line-height:1.7;color:#0C2D48}
.ob-dos-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ob-fechar{margin-left:auto;font-family:MuseoUN,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:11px 26px;border-radius:14px;
  border:1px solid #EFEFEF;background:#fff;color:#233F5B;cursor:pointer}
.ob-fechar:hover{background:var(--tile)}

/* O painel do hub tem ~500px no desktop, mas a JANELA tem 1180, então quem
   manda aqui é @container (a largura do próprio bloco), não @media. */
.ob{container-type:inline-size}
/* .hub-body p / .hub-body p b são do tema ESCURO e têm especificidade maior
   que .ob-sub. Dentro da ilha clara isso pintava o texto de âmbar. */
.hub-body .ob p{font-size:inherit;line-height:inherit;color:inherit;margin-top:0}
.hub-body .ob p b,.hub-body .ob b{color:inherit}
.hub-body .ob .ob-sub{font-size:12.5px;line-height:1.6;color:var(--soft)}
.hub-body .ob .ob-quote{font-size:12.5px;line-height:1.6;color:var(--soft)}
.hub-body .ob .ob-tipo p{font-size:12px;line-height:1.6;color:var(--soft)}
/* o dossiê é overlay, fica fora do .hub-body, mas ainda dentro da .dobra */
.ob-dos p{color:inherit;font-size:inherit;line-height:inherit;margin-top:0}
.ob-dos .ob-sub{font-size:12.5px;line-height:1.6;color:#5F6368}
@container (max-width:640px){
  /* # · Fórmula · Por banca (Total e Nota removidos) */
  .ob-rank-h,.ob-row{grid-template-columns:22px minmax(0,1fr) 96px;gap:8px}
  .ob-rank-h .ob-hide,.ob-row .ob-hide{display:none}
  .ob-frow{grid-template-columns:1fr;gap:6px}
  .ob-tl{height:80px}
  .ob-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px}
  .ob-bancas,.ob-tipos,.ob-gaps,.ob-dos-2{grid-template-columns:1fr}
  .ob-tab-h,.ob-tab-r{min-width:430px}
  .ob-tab--r2 .ob-tab-h,.ob-tab--r2 .ob-tab-r{grid-template-columns:minmax(100px,1fr) 46px 46px 46px 42px}
  .ob-tab--r2 .ob-hide{display:none}
  .ob-r1-row{grid-template-columns:62px 1fr 32px;gap:8px}
}
/* navegadores sem @container caem no fallback por janela */
@supports not (container-type:inline-size){
  @media (max-width:900px){
    .ob-rank-h,.ob-row{grid-template-columns:22px minmax(0,1fr) 96px;gap:8px}
    .ob-rank-h .ob-hide,.ob-row .ob-hide{display:none}
    .ob-frow{grid-template-columns:1fr}
  }
}
@media (prefers-reduced-motion:reduce){
  .ob-bar i,.ob-mini i,.ob-tl i,.ob-rac b,.ob-r1-bar b{transition:none}
  .ob-fcard:hover,.ob-gap:hover{transform:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   BOOT DO ATLAS, cobre o retângulo (.nfc-stage) quando o celular encosta.
   Layout legível; escala com clamp para caber no palco em qualquer largura.
   ═══════════════════════════════════════════════════════════════════════ */
.abt{position:absolute;inset:0;z-index:8;border-radius:inherit;background:#FFFFFF;
  font-family:MuseoUN,system-ui,-apple-system,sans-serif;color:#082f49;
  display:flex;flex-direction:column;opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease);text-align:left;letter-spacing:normal;line-height:1.4}
.abt.on{opacity:1;pointer-events:auto}
.abt *{box-sizing:border-box}
.abt-top{flex:none;display:flex;align-items:center;gap:clamp(6px,1.4vw,12px);
  padding:clamp(10px,2.4vw,18px) clamp(12px,3vw,22px) 0}
.abt-badge{flex:none;background:#E5FFFF;border-radius:10px;padding:5px 10px;
  text-align:center;line-height:1.2;font-size:clamp(9px,1.5vw,12px)}
.abt-badge b{font-weight:700;color:#0C2D48}
.abt-badge span{display:block;font-size:.72em;color:#5F6368;letter-spacing:.04em}
.abt-bar{flex:1;height:clamp(8px,1.6vw,13px);border-radius:999px;background:#E5E7EB;overflow:hidden}
.abt-bar i{display:block;height:100%;border-radius:999px;background:#3DBE54;width:0;
  padding:3px 6px;transition:width .45s var(--ease)}
.abt-bar em{display:block;height:3px;border-radius:999px;background:#B1F9BA}
.abt-un{width:clamp(30px,5vw,44px);flex:none}
.abt-mid{flex:1;min-height:0;overflow:visible;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(3px,.7vw,7px);padding:6px clamp(12px,3vw,22px) clamp(18px,2.6vw,28px)}
.abt-logo{width:clamp(48px,8vw,80px)}
.abt-h{margin:0;text-align:center;font-weight:300;font-size:clamp(15px,2.6vw,26px);
  color:#082f49;line-height:1.15;max-width:16ch}
.abt-h strong{font-weight:700}
.abt-perfil{display:flex;align-items:center;gap:6px;background:#E3E8FF;border-radius:999px;
  padding:4px 12px;font-size:clamp(9px,1.5vw,12.5px);font-weight:500;color:#5B57D9}
.abt-perfil i{width:7px;height:7px;border-radius:50%;background:#7D7AFF}
.abt-perfil b{font-weight:700}
.abt-num{font-weight:700;font-size:clamp(24px,4.2vw,42px);line-height:1;color:#15AFBA;
  font-variant-numeric:tabular-nums}
.abt-num-l{font-size:clamp(8px,1.3vw,11px);letter-spacing:.16em;text-transform:uppercase;color:#5F6368}
.abt-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.abt-chip{font-size:clamp(9px,1.4vw,12px);font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--bg);color:var(--fg);opacity:.25;transition:opacity .5s ease}
.abt-chip.on{opacity:1}
.abt-status{font-size:clamp(11px,1.7vw,15px);font-weight:500;color:#15AFBA;min-height:1.3em;text-align:center}
.abt-icons{position:relative;width:clamp(54px,8.5vw,92px);height:clamp(54px,8.5vw,92px);flex:none;margin-top:0}
.abt-icons img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .4s ease;animation:abt-float 3.6s ease-in-out infinite}
.abt-icons img.on{opacity:1}
@keyframes abt-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
.abt-steps{list-style:none;margin:0;padding:0;width:min(400px,80%);display:flex;flex-direction:column;gap:1px}
.abt-steps li{display:flex;align-items:center;gap:8px;min-height:clamp(24px,3.4vw,38px);
  padding:0 10px;border-radius:9px;font-size:clamp(10px,1.6vw,13px);
  transition:opacity .4s ease,background .3s ease}
.abt-steps li .ic{flex:none;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.abt-steps li .ic img{width:16px;height:16px}
.abt-steps li .sp{width:12px;height:12px;border-radius:50%;border:2px solid #C9D6E4;
  border-top-color:#15AFBA;animation:abt-spin .8s linear infinite}
@keyframes abt-spin{to{transform:rotate(360deg)}}
.abt-steps li.done{color:#15AFBA}
.abt-steps li.now{background:#F2F3F4;color:#082f49;font-weight:500}
.abt-steps li.wait{color:#8A97A8;opacity:.6}
.abt-steps li.fim.done{background:#E2FFE6;color:#17B978;font-weight:700}
.abt-foot{position:relative;flex:none;height:clamp(42px,6vw,60px);display:flex;
  align-items:center;justify-content:center;background:#BBFFEC}
.abt-wave{position:absolute;left:0;top:clamp(-9px,-1.3vw,-15px);width:100%;pointer-events:none}
.abt-cta{position:relative;font-family:MuseoUN,sans-serif;font-size:clamp(9px,1.4vw,12px);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0 clamp(20px,4vw,40px);
  height:clamp(34px,5vw,44px);border-radius:14px;border:none;cursor:pointer;
  background:#63F376;color:#3B9247;box-shadow:inset 0 -4px 0 rgba(0,0,0,.1);
  opacity:.55;transition:opacity .3s ease}
.abt-cta:not([disabled]){opacity:1}
.abt-cta:not([disabled]):hover{filter:brightness(1.03)}
@media (prefers-reduced-motion:reduce){ .abt-icons img,.abt-steps li .sp{animation:none} }

/* O hub da PV abre o painel com max-height:1000px, e as telas do Observatório passam disso no celular. No #atlas o
   painel abre em grid 0fr → 1fr (anima até a altura real) e o miolo usa a largura toda, como na página do GFE. */
@media(max-width:860px){
  #atlas .hub-panel{max-height:none;overflow:visible;display:grid;grid-template-rows:0fr;grid-template-columns:minmax(0,1fr);
    transition:grid-template-rows .5s var(--ease)}
  #atlas .hub-item.on .hub-panel{max-height:none;grid-template-rows:1fr}
  #atlas .hub-panel>*{overflow:hidden;min-height:0;min-width:0}
  #atlas .hub-body{padding:4px clamp(12px,4vw,18px) 22px}
  #atlas .hub-item:not(.on) .hub-kick{display:none}
  #atlas .hub-item:not(.on) .hub-body{padding-top:0;padding-bottom:0}
}
/* régua da margem: o título de cada aba corre até a borda, sem equilíbrio de linhas */
#atlas .hub-h3{text-wrap:wrap}