/* Mapa de Carreira: funil (carreira.html), aba do app (membro.html#carreira) e
   PDF. Só tokens do DS (ds.css/base.css) e as durações --mov-* / transitions.dev.
   O resto (palco, alternativas, checkout, cartões) é o CSS do QI e do catálogo. */

/* ---------- hexágono ---------- */
.mc-hex { width: 100%; margin: 8px auto; }
.mc-hex--espera .mc-hex__forma, .mc-hex--espera .mc-hex__ponto, .mc-hex--espera .mc-hex__letra { opacity: 0; }
.mc-hex svg { display: block; width: 100%; height: auto; overflow: visible; }
.mc-hex__grade polygon, .mc-hex__grade line { fill: none; stroke: var(--q-borda, #E2DED4); stroke-width: 1; }
.mc-hex__grade polygon:first-child { stroke: var(--q-borda-forte, #CFC9BC); }
.mc-hex__forma { fill: rgb(58 52 196 / 16%); stroke: var(--q-prim, #3A34C4); stroke-width: 2.5; stroke-linejoin: round; }
.mc-hex__ponto { fill: var(--q-sup, #fff); stroke: var(--q-prim, #3A34C4); stroke-width: 2; }
.mc-hex__ponto.on { fill: var(--q-ouro, #E9A23B); stroke: var(--q-tinta, #14172E); }
.mc-hex__letra { font: 700 15px/1 var(--q-display); fill: var(--q-suave, #545A73); }
.mc-hex__letra.on { fill: var(--q-tinta, #14172E); }
.mc-hex__letra.on .mc-hex__l { fill: var(--q-prim, #3A34C4); }
.mc-hex__l { font-size: 17px; }
.mc-hex__nome { font: 500 12.5px/1 var(--q-ui); }
.mc-hex__num { font: 700 13px/1 var(--q-display); fill: var(--q-prim, #3A34C4); }
[data-tema="noite"] .mc-hex__grade polygon, [data-tema="noite"] .mc-hex__grade line { stroke: rgb(255 255 255 / 14%); }
[data-tema="noite"] .mc-hex__forma { fill: rgb(143 139 255 / 22%); stroke: var(--q-prim-noite, #8F8BFF); }
[data-tema="noite"] .mc-hex__letra { fill: var(--q-noite-suave, #A7ABC6); }
[data-tema="noite"] .mc-hex__letra.on, [data-tema="noite"] .mc-hex__letra.on .mc-hex__l { fill: var(--q-noite-texto, #F2F0EA); }
[data-tema="noite"] .mc-hex__num { fill: var(--q-ouro, #E9A23B); }
[data-tema="noite"] .mc-hex__ponto { fill: var(--q-noite-2, #171A33); stroke: var(--q-prim-noite, #8F8BFF); }

/* ---------- funil ---------- */
.mc-funil .contador { gap: 12px; }
.mc-parte { font: var(--q-t-legenda); color: var(--cor-texto-suave); }
.mc-pergunta { font: var(--q-t-rotulo); color: var(--cor-texto-suave); margin: 0 0 6px; }
.mc-item { font-size: clamp(24px, 5.4vw, 32px); }
.mc-instrucao { margin-top: 4px; }
.alternativas .mc-num {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; margin-right: 10px;
  border-radius: 50%; border: 1.5px solid var(--cor-borda); font: 600 13px/1 var(--fonte-titulo); color: var(--cor-texto-suave);
}
.alternativas .alt[aria-pressed="true"] .mc-num { border-color: currentColor; color: inherit; }
.mc-voltar { margin: 14px auto 0; display: block; }
.mc-aviso { margin-top: 20px; padding: 16px 18px; border-radius: var(--raio-m); background: var(--cor-superficie-2); font-size: 14px; line-height: 1.55; color: var(--cor-texto-suave); }
.mc-aviso h2 { font: var(--q-t-rotulo); color: var(--cor-texto); margin: 0 0 6px; }
.mc-aviso p { margin: 0 0 8px; }
.mc-aviso p:last-child { margin-bottom: 0; }
.mc-como li { align-items: flex-start; }
/* esqueleto do 1º quadro (carreira.html): a entrada em texto-fantasma e linhas
   (.q-esq-t / .q-esq de componentes.css, tokens --mov-*), sem texto solto */
.mc-esq { pointer-events: none; user-select: none; }
/* o texto-fantasma fica na fonte de reserva (métricas da Sora/Figtree, base.css):
   a fonte da web chegando não reflui o esqueleto */
.mc-esq > [aria-hidden] { --fonte-titulo: "Sora Fallback", var(--fonte-sistema); --fonte-corpo: "Figtree Fallback", var(--fonte-sistema); font-family: var(--fonte-corpo); }
/* o aviso legal vem do servidor (textos.json): no desktop, onde a tela é centrada
   na altura, o cartão do esqueleto tem a altura medida do real (19/out: pt e en
   346 px, es 368) para a troca não mover nada. Mudou o aviso, meça de novo
   (scratchpad/carga-mapa/alturas.mjs). */
@media (min-width: 1024px) {
  .mc-esq .mc-aviso { height: 346px; overflow: hidden; }
  html[lang="es"] .mc-esq .mc-aviso { height: 368px; }
}
.mc-esq .btn { background: var(--q-sup-2); color: transparent; box-shadow: none; border-color: transparent;
  animation: q-esq-pulso 1.6s var(--mov-ease-mover) infinite alternate; }
.mc-esq .mc-aviso .q-esq--linha { height: calc(1.55em - 8px); margin: 4px 0; }
.mc-esq .mc-aviso p { margin: 0 0 8px; display: flex; flex-direction: column; } /* linhas sem margem colapsada */
@media (prefers-reduced-motion: reduce) { .mc-esq .btn { animation: none; } }
/* antes do JS medir o palco, o esqueleto ocupa a altura (a página 1 ainda não é absoluta) */
.mc-funil .palco-slide:not([style]) > .t-page[data-page-id="1"] { position: relative; }

.mc-previa { display: grid; gap: 24px; }
.mc-previa__topo h1 { margin-bottom: 6px; }
.mc-cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.mc-previa__mapa { text-align: center; padding: 22px 18px; }
.mc-codigo-rot { font: var(--q-t-sobre); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-suave); margin: 0; }
.mc-codigo { font: 800 clamp(56px, 16vw, 84px)/1 var(--fonte-titulo); letter-spacing: .06em; color: var(--cor-primaria); margin: 6px 0 4px; display: flex; justify-content: center; gap: .08em; }
.mc-codigo span { display: inline-block; }
.mc-codigo-nomes { margin: 0 0 4px; font-weight: 600; }
.mc-previa__mapa .mini { margin: 6px 0 0; color: var(--cor-texto-suave); font-size: 13.5px; }
.mc-previa__ocup > .sub { text-align: left; margin-top: 4px; }
.mc-ocups { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.mc-ocup { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--cor-borda); border-radius: var(--raio-m); background: var(--cor-superficie); }
.mc-ocup__n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-primaria-clara); color: var(--cor-primaria); font: 700 14px/1 var(--fonte-titulo); }
.mc-ocup__txt { display: grid; gap: 3px; min-width: 0; }
.mc-ocup__txt span { color: var(--cor-texto-suave); font-size: 14.5px; }
.mc-ocup__txt small { color: var(--cor-texto-suave); font-size: 12.5px; }
.mc-ocup--fechada { background: var(--cor-superficie-2); border-style: dashed; }
.mc-ocup--fechada .mc-ocup__txt strong { color: var(--cor-texto-suave); }
.mc-traco { display: block; height: 10px; width: 70%; border-radius: 6px; background: var(--cor-borda); }
.mc-cadeado { margin-left: auto; color: var(--cor-texto-suave); flex: none; }
.mc-pagador { display: grid; gap: 12px; margin: 12px 0; }
.mc-pagador .mini { margin: 0; font-size: .85rem; color: var(--cor-texto-suave); }
.mc-aprovado { text-align: center; }

@media (min-width: 900px) {
  .mc-funil .palco:has(.mc-previa) { max-width: 720px; }
  .mc-previa__mapa .mc-hex { max-width: 380px !important; }
}

/* ---------- aba Carreira (área de membro) ---------- */
/* nav de baixo do celular: com a aba Carreira são 6 itens numa linha só */
@media (max-width: 899px) {
  .app-membro .app-nav.q-nav:has(> a[data-aba="carreira"]) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .app-membro .app-nav.q-nav:has(> a[data-aba="carreira"]) a span { white-space: nowrap; }
}
.app-membro .q-card.mc-heroi { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .app-membro .q-card.mc-heroi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.mc-heroi__codigo { font: 800 clamp(56px, 12vw, 88px)/1 var(--q-display); letter-spacing: .06em; color: var(--q-noite-texto, #F2F0EA); margin: 4px 0; }
.mc-heroi__nomes { margin: 0 0 12px; font-weight: 600; color: var(--q-noite-texto, #F2F0EA); }
.mc-heroi .q-stat__rotulo, .mc-heroi .q-note { color: var(--q-noite-suave, #A7ABC6); }
.mc-escores { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-escores li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 2.8em; gap: 10px; align-items: center; font-size: 14px; color: var(--q-noite-texto, #F2F0EA); }
.mc-escores b { font-family: var(--q-display); }
.mc-escores .mc-barra { height: 6px; border-radius: 4px; background: rgb(255 255 255 / 12%); overflow: hidden; }
.mc-escores .mc-barra i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--v, 0)); background: var(--q-prim-noite, #8F8BFF); border-radius: inherit; transition: transform var(--mov-lento, 360ms) var(--mov-ease, ease-out); }
.mc-escores li.on .mc-barra i { background: var(--q-ouro, #E9A23B); }
.mc-escores .num { text-align: right; }
.mc-letra { display: grid; gap: 8px; }
.mc-letra__cab { display: flex; align-items: center; gap: 12px; }
.mc-letra__l { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--q-prim-100); color: var(--q-prim); font: 800 22px/1 var(--q-display); }
.mc-letra__n { font: var(--q-t-h3); margin: 0; }
.mc-letra dl { margin: 0; display: grid; gap: 8px; }
.mc-letra dt { font: var(--q-t-rotulo); color: var(--q-suave); }
.mc-letra dd { margin: 0; color: var(--q-texto); }
.mc-grupo + .mc-grupo { margin-top: 20px; }
.mc-grupo__t { font: var(--q-t-rotulo); color: var(--q-suave); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--q-borda); text-transform: none; }
.mc-ocup-app { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--q-borda); }
.mc-ocup-app:first-of-type { border-top: 0; padding-top: 0; }
.mc-ocup-app__cab { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.mc-ocup-app__nome { font: 600 17px/1.3 var(--q-display); margin: 0; }
.mc-ocup-app__cod { font: 700 13px/1 var(--q-display); color: var(--q-prim); letter-spacing: .06em; }
.mc-ocup-app p { margin: 0; color: var(--q-texto); }
.mc-ocup-app .mc-porque { color: var(--q-suave); font-size: 14px; }
.mc-ocup-app .mc-selo-qi { font-size: 13.5px; color: var(--q-ouro-texto); }
.mc-fonte { margin-top: 12px; font-size: 12.5px; color: var(--q-suave); }
.mc-quad { display: grid; gap: 12px; }
@media (min-width: 600px) { .mc-quad { grid-template-columns: 1fr 1fr; } }
.mc-quad__c { border: 1.5px solid var(--q-borda); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.mc-quad__c.on { border-color: var(--q-prim-200); background: var(--q-prim-100); }
.mc-quad__t { font: var(--q-t-rotulo); margin: 0; }
.mc-quad__l { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-quad__l span { font: 700 13px/1 var(--q-display); padding: 6px 9px; border-radius: 999px; background: var(--q-sup); border: 1px solid var(--q-borda); }
.mc-quad__c p { margin: 0; font-size: 14px; color: var(--q-suave); }
.mc-valores { list-style: none; margin: 0; padding: 0; counter-reset: mcv; display: grid; gap: 10px; }
.mc-valores li { counter-increment: mcv; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.mc-valores li::before { content: counter(mcv); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--q-sup-2); font: 700 13px/1 var(--q-display); color: var(--q-suave); }
.mc-valores li:first-child::before { background: var(--q-ouro); color: var(--q-tinta); }
.mc-valores strong { display: block; }
.mc-valores span { color: var(--q-suave); font-size: 14px; }
.mc-plano__sem + .mc-plano__sem { margin-top: 18px; }
.mc-plano__t { font: var(--q-t-rotulo); margin: 0 0 8px; color: var(--q-suave); }
.mc-tarefa { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; cursor: pointer; min-height: 44px; }
.mc-tarefa input { position: absolute; opacity: 0; pointer-events: none; }
.mc-tarefa .q-check__caixa { flex: none; margin-top: 2px; }
.mc-tarefa span:last-child { transition: color var(--mov-medio, 240ms) var(--mov-ease, ease-out); }
.mc-tarefa input:checked ~ span:last-child { color: var(--q-suave); text-decoration: line-through; text-decoration-color: var(--q-borda-forte); }
.mc-plano__barra { margin: 4px 0 14px; }
.mc-aviso-app { font-size: 14px; line-height: 1.6; color: var(--q-suave); }
.mc-aviso-app p { margin: 0 0 8px; }

/* ---------- PDF ---------- */
.mc-pdf { background: #e9e6df; margin: 0; font: var(--q-t-corpo); color: var(--q-tinta); }
.mc-pdf__barra { position: sticky; top: 0; z-index: 2; display: flex; gap: 12px; justify-content: center; padding: 12px; background: var(--q-noite); }
.mc-folha { width: 210mm; min-height: 296mm; margin: 16px auto; background: #fff; padding: 16mm 15mm; box-sizing: border-box; box-shadow: 0 2px 10px rgb(0 0 0 / 10%); }
.mc-folha h1 { font: 700 28px/1.1 var(--q-display); margin: 0 0 6px; }
.mc-folha h2 { font: 700 18px/1.2 var(--q-display); margin: 18px 0 8px; }
.mc-folha .mc-bloco { break-inside: avoid; page-break-inside: avoid; }
.mc-folha p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.mc-folha .mc-hex { max-width: 300px; }
.mc-pdf__cab { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--q-prim); padding-bottom: 8px; margin-bottom: 14px; font: 700 15px/1 var(--q-display); }
.mc-folha .mc-pdf__cod { margin: 0; font: 800 56px/1 var(--q-display); color: var(--q-prim); letter-spacing: .06em; }
.mc-pdf__tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mc-pdf__tab td, .mc-pdf__tab th { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--q-borda); vertical-align: top; }
.mc-pdf__rod { margin-top: 14px; font-size: 10.5px !important; color: var(--q-suave); }
@media print {
  @page { size: A4; margin: 0; }
  .mc-pdf { background: #fff; }
  .mc-pdf__barra { display: none; }
  .mc-folha { margin: 0; box-shadow: none; min-height: auto; }
  .mc-folha + .mc-folha { break-before: page; page-break-before: always; }
}
@media (max-width: 820px) { .mc-folha { width: auto; margin: 12px; padding: 20px 16px; min-height: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mc-escores .mc-barra i, .mc-tarefa span:last-child { transition: none; }
}

/* ---------- treinos ligados (aba Carreira, js/mapa-carreira/treinos.js) ---------- */
.mc-treinos__seg { display: grid; width: 100%; max-width: 560px; }
.mc-treinos__seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; min-width: 0; font-size: 13.5px; }
.mc-treinos__seg button span { overflow: hidden; text-overflow: ellipsis; }
.mc-treinos__seg button b { font: 700 14px/1 var(--q-display); color: var(--q-prim); }
.mc-treinos__painel { min-width: 0; }
.mc-treinos__trilha { display: grid; gap: 10px; }
.mc-treinos__intro, .mc-treinos__prog { margin: 0; }
.mc-treinos__intro { max-width: 72ch; }
.mc-treinos__barra { margin: 0 0 6px; max-width: 560px; }
.mc-treinos__sem-plus { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--q-sup-2); }
.mc-treinos__sem-plus .q-text { margin: 0; }
.app-membro .q-card.mc-treino { display: flex; flex-direction: column; gap: 10px; }
.mc-treino__cab { display: flex; align-items: center; gap: 12px; }
.mc-treino__tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--tinta-jogo, var(--q-prim-100)); flex: none; }
.mc-treino__tile .jogo-mini { --mini: 44px; background: transparent; }
.mc-treino__nome { margin: 0; }
.mc-treino__cab .q-meta { margin: 2px 0 0; }
.mc-treino__porque { margin: 0; flex: 1 1 auto; }
.mc-treino .q-actions-wrap { margin-top: 2px; }
.mc-treinos__nota { margin: 0; }