/* =========================================================================
   PROVA — folha de estilo única (consolidada em 02/10/2026; ver docs/PLANO_UX.md)
   Identidade (manifesto): uma revista sendo montada. Muito branco, grid rígido, serifa de alto
   contraste só nos títulos, rótulos em caixa-alta pequena (créditos de foto), uma cor de autoridade
   (bordô), feedback sem confete, transições curtas.
   Regras de UX: alvo de toque ≥ 44px; texto ≥ 4,5:1 e ícones ≥ 3:1 de contraste; número sempre com
   legenda; cor carrega o significado só junto com ícone ou palavra.
   ========================================================================= */
:root {
  /* neutros */
  --fundo: #FFFFFF;
  --cinza-0: #FAFAFB;
  --cinza-1: #F4F4F6;
  --linha: #ECECF0;
  --cinza-2: #E2E2E7;
  --cinza-3: #C7C7CF;         /* só decoração e desabilitado; nunca texto */
  --inativo: #84848E;         /* ícones inativos (≥ 3:1 no branco) */
  --suave: #63636B;           /* texto secundário (≈ 6:1 no branco) */
  --tinta: #17171A;
  --tinta-2: #3A3A40;
  /* marca: bordô (a mesma identidade do app de looks) */
  --acento: #8C2340;
  --acento-esc: #651830;
  --acento-claro: #F8EEF1;
  --acento-borda: #E2B8C4;
  /* estados (fundos de botão com texto branco ≥ 4,5:1) */
  --ok: #1A7D46; --ok-esc: #125A32; --ok-vivo: #22A05A; --ok-claro: #EAF7EF; --ok-borda: #9ED9B6;
  --erro: #B83333; --erro-esc: #8E2626; --erro-claro: #FDEEEE;
  --alerta: #8F6200; --alerta-claro: #FDF4DC;
  --info: #6B4E8C; --info-claro: #F3EEF8;
  /* gamificação (só em ícones e traços; o número fica em --tinta) */
  --paete: #B48A3C;
  --fogo: #E0592A;
  --ouro: #A8851C;
  /* famílias de fibra (barra de composição) */
  --fib-natural: #5E7A4F; --fib-artificial: #B08A5A; --fib-sintetica: #3E4A5C; --fib-outro: #A9A9B2;
  /* escalas */
  --t-cap: 11.5px; --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 20px; --t-xl: 28px; --t-xxl: 36px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --r-s: 8px; --raio: 16px; --r-l: 24px; --r-p: 999px;
  --sombra: 0 1px 2px rgba(20,20,30,.04), 0 6px 18px rgba(20,20,30,.05);
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --logo: 'Playfair Display', Georgia, serif;
  --topo-seg: env(safe-area-inset-top, 0px);
  --base-seg: env(safe-area-inset-bottom, 0px);
  /* superfícies e papéis (trocam no tema escuro) */
  color-scheme: light;
  --superficie: #FFFFFF;      /* cartões, botões, folhas */
  --moldura: #EEEEF1;         /* fora do app, no computador */
  --marca: #8C2340;           /* fundo de botão da marca (texto branco) */
  --acento-txt: #651830; --ok-txt: #125A32; --erro-txt: #8E2626;
  --nav-fundo: rgba(255,255,255,.96);
  --balao-eu: #F3F7FC; --ouro-claro: #FFF6DA;
  --r1-fundo: #FBE9EC; --r1-txt: #7A1E37; --r2-txt: #6E4B00;
  --destaque: #17171A;        /* faixas escuras com texto branco (entrega, avisos) */
}

/* ---------- Tema escuro ----------
   Ligado por js (Ajustes > Aparência: automático, claro ou escuro). "Automático" segue o celular,
   que costuma escurecer à noite. Mesmo contraste mínimo do claro (texto ≥ 4,5:1). */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #121215; --superficie: #1C1C21; --cinza-0: #19191E; --cinza-1: #25252B; --linha: #2E2E35;
  --cinza-2: #3A3A42; --cinza-3: #4B4B53; --inativo: #8B8B95; --suave: #A6A6B0; --tinta: #EEEEF2; --tinta-2: #CFCFD6;
  --marca: #A32D50; --acento: #EE8FA9; --acento-esc: #6E1C35; --acento-claro: #33171F; --acento-borda: #7A3550; --acento-txt: #F4B3C4;
  --ok: #1A7A45; --ok-esc: #145C34; --ok-vivo: #34B86C; --ok-claro: #11301F; --ok-borda: #2B6E47; --ok-txt: #86DDAB;
  --erro: #AD3333; --erro-esc: #7E2222; --erro-claro: #351A1A; --erro-txt: #F3A3A3;
  --alerta: #9A6A00; --alerta-claro: #33290F; --info: #7A5DA3; --info-claro: #251C33;
  --fogo: #F07040; --ouro: #D2AE3A;
  --fib-natural: #7C9C6B; --fib-artificial: #C49A66; --fib-sintetica: #7F8FAB; --fib-outro: #6A6A72;
  --moldura: #000000; --nav-fundo: rgba(28,28,33,.94); --balao-eu: #1D2733; --ouro-claro: #2E2812;
  --r1-fundo: #3A1A24; --r1-txt: #F4B3C4; --r2-txt: #F0C766; --destaque: #2A2A31;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { transition: background-color .2s; font-family: var(--sans); color: var(--tinta); font-size: 15px; background: var(--moldura); display: flex; justify-content: center; align-items: center; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; font-size: inherit; }
input, select, textarea { font-family: inherit; font-size: 16px; }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.iu { width: 22px; height: 22px; display: block; flex-shrink: 0; }
svg.ilus { width: 100%; height: 100%; display: block; }
.centro { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* foco visível para teclado e leitores de tela (o toque não mostra o anel) */
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible, .opcao:focus-visible, .escolha:focus-visible { outline-offset: 3px; }

/* ---------- Moldura ---------- */
.app { width: 100%; max-width: 430px; height: 100%; height: 100dvh; max-height: 900px; background: var(--fundo); position: relative; overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 500px) { .app { height: calc(100% - 40px); border-radius: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.12); } }
.tela { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rolagem { flex: 1; overflow-y: auto; overflow-x: hidden; }
.rolagem.com-nav { padding-bottom: calc(100px + var(--base-seg)); }
.pad { padding: 24px 22px; }
.pad-x { padding-left: 20px; padding-right: 20px; }

/* ---------- Botões ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 14px 18px; border-radius: 14px;
  font-weight: 600; font-size: 16px; letter-spacing: 0; text-transform: none;
  background: var(--marca); color: #fff; transition: transform .08s, opacity .15s; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { background: var(--cinza-1); color: #8A8A94; cursor: default; }
.btn.ok { background: var(--ok); }
.btn.erro { background: var(--erro); }
.btn.contorno { background: var(--superficie); color: var(--tinta); border: 1px solid var(--cinza-2); }
.btn.texto { background: transparent; color: var(--suave); box-shadow: none; text-transform: none; letter-spacing: 0; font-size: 15px; }
.btn.perigo { color: var(--erro); }
.btn + .btn { margin-top: 10px; }
.btn svg.iu { width: 18px; height: 18px; }

/* ---------- Tipos ---------- */
.sobre, .rotulo-caps { font-size: var(--t-cap); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--suave); }
.titulo-tela, .resultado h2, .folha h3, .novo-tit, .cracha h2, .ed-cab h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.5px; }
.titulo-tela { font-size: 26px; line-height: 1.15; margin: 4px 0 20px; }
.marca { font-family: var(--logo); font-weight: 700; font-size: 21px; letter-spacing: .5px; text-transform: uppercase; }
.marca::after { content: '.'; color: var(--acento); }
.fogo-cor { color: var(--fogo); } .ok-cor { color: var(--ok); } .vidas-cor { color: var(--acento); } .paete-cor { color: var(--paete); } .cafe-cor { color: #7A5636; }
.separador { height: 1px; background: var(--linha); margin: 24px 0 18px; }
.sec-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.vazio { text-align: center; padding: 14px; color: var(--suave); }

.av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff; flex-shrink: 0; background: var(--cor, var(--suave)); }

/* ---------- Auth / onboarding ---------- */
.hero { text-align: center; padding: calc(40px + var(--topo-seg)) 28px 8px; }
.hero .pers { margin: 0 auto 16px; }
.hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.hero h1.marca { font-size: 38px; }
.hero p { color: var(--suave); margin-top: 8px; line-height: 1.55; }
.campo { display: block; margin-bottom: 12px; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--cinza-0); color: var(--tinta); font-weight: 500; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento); background: var(--superficie); outline: none; box-shadow: 0 0 0 3px var(--acento-claro); }
.campo > span { display: block; font-size: var(--t-xs); font-weight: 700; color: var(--suave); margin: 0 0 6px 2px; }
.com-prefixo { position: relative; display: block; }
.com-prefixo b { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--suave); pointer-events: none; }
.com-prefixo input { padding-left: 42px; }
.erro-msg { color: var(--erro); font-weight: 600; font-size: 14px; margin: 4px 2px 12px; }
.nota { color: var(--suave); font-size: var(--t-xs); text-align: center; margin-top: 18px; line-height: 1.5; }
.onb-topo { display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--topo-seg)) 16px 10px 8px; }
.dica { font-size: var(--t-xs); color: var(--suave); font-weight: 600; margin-top: 4px; }

/* ---------- Fala de personagem ---------- */
.fala { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.balao { flex: 1; position: relative; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 18px 18px 18px 6px; padding: 10px 14px; box-shadow: var(--sombra); }
.quem-nome { font-size: var(--t-cap); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--acento); margin-bottom: 2px; }
.balao .txt { font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--tinta); }
.fala-grande .pers { width: 76px; height: 76px; }
.fala-grande .balao .txt { font-size: 19px; line-height: 1.4; }
.cena-linha.dir .fala { flex-direction: row-reverse; }
.cena-linha.dir .balao { border-radius: 18px 18px 6px 18px; background: var(--balao-eu); }
.cena-linha.nova { animation: entra-fala .18s ease both; }
@keyframes entra-fala { from { transform: translateY(10px); opacity: 0; } }

.escolhas { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 20px; }
.escolhas.grade { display: grid; grid-template-columns: 1fr 1fr; }
.escolha { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--linha); border-radius: var(--raio); background: var(--superficie); box-shadow: 0 2px 0 var(--linha); font-size: 15px; font-weight: 600; cursor: pointer; }
.escolha .ck { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--inativo); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.escolha.multi .ck { border-radius: 7px; }
.escolha.sel { border-color: var(--acento-borda); background: var(--acento-claro); box-shadow: 0 2px 0 var(--acento-borda); }
.escolha.sel .ck { background: var(--marca); border-color: var(--acento); color: #fff; }
.escolha.sel .ck svg { width: 13px; height: 13px; stroke-width: 3.5; }
.escolha .esc-ic { width: 36px; height: 36px; border-radius: 12px; background: var(--cinza-1); color: var(--tinta-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.escolha.sel .esc-ic { background: var(--superficie); color: var(--acento); }
.escolha .esc-ic svg.i { width: 20px; height: 20px; }
.escolha .esc-txt { flex: 1; line-height: 1.25; }
.escolha .esc-txt small { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--suave); }
.escolhas.grade .escolha { flex-direction: column; align-items: flex-start; gap: 8px; position: relative; }
.escolhas.grade .escolha .ck { position: absolute; right: 10px; top: 10px; }
.escolha.radio { margin-bottom: 8px; }
.escolha.radio input { position: absolute; opacity: 0; pointer-events: none; }
.escolha.radio:has(input:checked) { border-color: var(--acento-borda); background: var(--acento-claro); }
.escolha.radio:has(input:checked) .ck { border: 6px solid var(--acento); }
.escolha.radio:has(input:focus-visible) { outline: 3px solid var(--acento); outline-offset: 2px; }
.rodape { padding: 14px 20px calc(18px + var(--base-seg)); background: var(--superficie); }

/* ---------- Progresso ---------- */
.progresso { flex: 1; height: 12px; background: var(--cinza-1); border-radius: 99px; overflow: hidden; }
.progresso > div { height: 100%; background: var(--ok-vivo); border-radius: 99px; transition: width .3s ease; }
.fechar { color: var(--inativo); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.fechar svg.i { width: 24px; height: 24px; stroke-width: 2.4; }

/* ---------- Topo (contadores) ---------- */
.topo { display: flex; align-items: center; padding: calc(8px + var(--topo-seg)) 12px 4px; background: var(--superficie); z-index: 2; }
.chips { display: flex; width: 100%; justify-content: space-between; }
.chip { display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 6px; border-radius: 12px; font-weight: 800; font-size: 15px; color: var(--tinta); }
.chip:active { background: var(--cinza-1); }
.chip.apagado { color: var(--suave); }
.nivel { position: relative; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.nivel svg.iu { position: absolute; inset: 0; width: 100%; height: 100%; }
.nivel b { position: relative; font-size: 11.5px; font-weight: 800; color: #fff; }
.meta-mini { position: relative; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.meta-mini svg.anel-m { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.meta-mini .am-base { fill: none; stroke: var(--cinza-1); stroke-width: 3.5; }
.meta-mini .am-feito { fill: none; stroke: var(--ouro); stroke-width: 3.5; stroke-linecap: round; }
.meta-mini.batida .am-feito { stroke: var(--ok-vivo); }
.meta-mini svg.iu { width: 14px; height: 14px; position: relative; }

/* ---------- Menu flutuante ---------- */
.nav { position: absolute; left: 16px; right: 16px; bottom: calc(12px + var(--base-seg)); z-index: 5; display: flex; justify-content: space-around; padding: 6px;
  background: var(--nav-fundo); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 24px; box-shadow: 0 10px 30px rgba(20,20,30,.13), 0 0 0 1px rgba(20,20,30,.05); }
.nav button { flex: 1; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--inativo); border-radius: 18px; }
.nav button svg.i { width: 25px; height: 25px; stroke-width: 1.9; }
.nav button span { font-size: 11px; font-weight: 700; color: var(--suave); }
.nav button.ativo { color: var(--acento); }
.nav button.ativo span { color: var(--acento); }
.nav button.ativo svg { fill: var(--acento-claro); }

/* ---------- Modal = folha que sobe de baixo (padrão de 2026 no celular) ---------- */
.veu { position: absolute; inset: 0; background: rgba(23,23,26,.4); z-index: 20; display: flex; align-items: flex-end; justify-content: center; animation: aparece .15s; }
.folha { position: relative; width: 100%; max-height: 90%; overflow-y: auto; background: var(--superficie); border-radius: 26px 26px 0 0; padding: 26px 20px calc(18px + var(--base-seg)); animation: sobe .2s cubic-bezier(.2, 1, .4, 1); box-shadow: 0 -10px 40px rgba(0,0,0,.14); }
.folha::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 99px; background: var(--cinza-2); }
.folha h3 { font-size: 20px; letter-spacing: -.3px; margin-bottom: 6px; line-height: 1.2; }
.folha p { color: var(--suave); line-height: 1.5; margin-bottom: 16px; }
.folha .linha-info { color: var(--tinta-2); font-size: 15px; text-align: center; margin: -2px 0 16px; line-height: 1.45; }
.folha-x { position: absolute; top: 10px; right: 10px; }
.modal-pers { display: flex; justify-content: center; margin: 0 auto 12px; width: 120px; height: 120px; align-items: center; }
.modal-pers.grande svg.i, .modal-pers.grande svg.iu { width: 64px; height: 64px; }
.modal-pers.peca { width: 150px; height: 150px; }
.modal-pers.fogo-cor svg.i { fill: #FFD8C9; }
.folha ol.guia { list-style: none; counter-reset: g; margin: 6px 0 18px; }
.folha ol.guia li { counter-increment: g; padding: 10px 0 10px 32px; border-top: 1px solid var(--linha); line-height: 1.45; font-size: 14.5px; font-weight: 500; position: relative; }
.folha ol.guia li::before { content: counter(g); position: absolute; left: 0; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--acento-claro); color: var(--acento); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cena-falas { margin: 14px 0 16px; max-height: 50vh; overflow-y: auto; }
.escada-lista { margin: 8px 0 16px; }
.degrau-linha { display: flex; align-items: center; gap: 12px; padding: 7px 4px; font-weight: 700; color: var(--tinta-2); }
.degrau-linha.futuro { color: var(--suave); font-weight: 600; }
.degrau-linha.atual { background: var(--acento-claro); border-radius: 12px; padding-left: 8px; }
.degrau-linha em { margin-left: auto; font-style: normal; font-size: var(--t-cap); font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #fff; background: var(--marca); padding: 3px 8px; border-radius: 99px; margin-right: 6px; }
.dl-ic { width: 34px; height: 34px; display: flex; flex-shrink: 0; }
.dl-ic > svg, .dl-ic .gema { width: 100%; height: 100%; }
@keyframes aparece { from { opacity: 0; } }
@keyframes sobe { from { transform: translateY(40px); opacity: .5; } }
.toast { position: absolute; left: 50%; bottom: calc(100px + var(--base-seg)); transform: translateX(-50%); background: var(--destaque); color: #fff; padding: 12px 16px; border-radius: 14px; font-weight: 600; font-size: 14px; z-index: 30; animation: aparece .2s; max-width: 90%; text-align: center; display: flex; align-items: center; gap: 12px; }
.toast button { color: #F2C2CF; font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .5px; min-height: 32px; padding: 0 4px; }

/* conteúdo das folhas de informação */
.semana { display: flex; justify-content: space-between; margin-bottom: 20px; }
.semana div { text-align: center; font-size: var(--t-xs); font-weight: 700; color: var(--suave); }
.semana .d { width: 34px; height: 34px; border-radius: 50%; background: var(--cinza-1); margin-bottom: 4px; display: flex; align-items: center; justify-content: center; }
.semana .d.on { background: var(--fogo); color: #fff; }
.semana .d svg.i { width: 16px; height: 16px; }
.numero-grande { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 6px; }
.numero-grande svg.i { width: 56px; height: 56px; fill: #FFD8C9; }
.numero-grande svg.iu { width: 56px; height: 56px; }
.numero-grande b { font-size: 52px; font-weight: 800; line-height: 1; }
.mini-info { display: flex; justify-content: center; gap: 16px; font-size: 13px; font-weight: 700; color: var(--suave); margin-bottom: 12px; }
.mini-info span { display: flex; align-items: center; gap: 4px; } .mini-info svg.i, .mini-info svg.iu { width: 16px; height: 16px; }
.anel { position: relative; width: 150px; height: 150px; margin: 4px auto 12px; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-base { fill: none; stroke: var(--cinza-1); stroke-width: 10; }
.anel-feito { fill: none; stroke: var(--ouro); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.anel.batida .anel-feito { stroke: var(--ok-vivo); }
.anel-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ouro); }
.anel-txt b { font-size: 24px; color: var(--tinta); }
.anel-txt small { font-size: var(--t-xs); font-weight: 700; color: var(--suave); }
.coracoes { display: flex; justify-content: center; gap: 8px; margin: 6px 0 12px; }
.espera { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; color: var(--tinta-2); margin: 0 0 16px; }
.espera svg.i { width: 18px; height: 18px; color: var(--suave); }
.ganho { display: flex; justify-content: center; gap: 14px; font-size: 22px; font-weight: 800; color: var(--tinta); margin: 6px 0; align-items: center; }
.ganho svg.i, .ganho svg.iu { width: 22px; height: 22px; } .ganho span { display: flex; align-items: center; gap: 4px; }
.codigo-grande { text-align: center; font-size: 34px; font-weight: 800; letter-spacing: 6px; margin: 4px 0 16px; padding: 14px; border-radius: 18px; background: var(--cinza-0); border: 1.5px dashed var(--cinza-2); }
.ou { display: flex; align-items: center; gap: 10px; color: var(--suave); font-size: var(--t-xs); font-weight: 700; margin: 14px 0; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.aviso { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--cinza-0); font-size: 14px; font-weight: 600; width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; }
.legenda-vd { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 18px; }
.legenda-vd div { display: flex; gap: 12px; align-items: flex-start; }
.legenda-vd b { display: block; font-size: 15px; }
.legenda-vd small { font-size: 13.5px; color: var(--suave); line-height: 1.4; }
.chave { width: 46px; height: 28px; border-radius: 99px; background: var(--cinza-2); position: relative; flex-shrink: 0; transition: background .15s; }
.chave::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFE; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }

/* ---------- Lição ---------- */
.licao-topo { display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--topo-seg)) 16px 8px 6px; }
.licao-topo .vidas { color: var(--tinta); font-weight: 800; display: flex; align-items: center; gap: 4px; min-width: 40px; justify-content: flex-end; }
.licao-corpo { flex: 1; overflow-y: auto; padding: 0 20px; display: flex; flex-direction: column; }
.q-wrap { margin: auto 0; width: 100%; padding: 8px 0 20px; }
.q-rot { margin-bottom: 10px; color: var(--acento); }
.q-titulo { font-size: 19px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; margin-bottom: 18px; }
.q-ilus { width: 150px; height: 150px; margin: 0 auto 14px; }
.q-ilus.peq { width: 96px; height: 96px; }
.opcoes { display: flex; flex-direction: column; gap: 10px; }
.opcao { width: 100%; min-height: 52px; padding: 13px 16px; text-align: left; font-size: 15px; font-weight: 600; line-height: 1.35; border: 1.5px solid var(--linha); border-radius: var(--raio); background: var(--superficie); box-shadow: 0 2px 0 var(--linha); display: flex; align-items: center; gap: 10px; }
.opcao:hover:not(:disabled) { background: var(--cinza-0); }
.opcao.sel { border-color: var(--acento-borda); background: var(--acento-claro); box-shadow: 0 2px 0 var(--acento-borda); color: var(--acento-txt); }
.opcao.certa { border-color: var(--ok-borda); background: var(--ok-claro); color: var(--ok-txt); box-shadow: 0 2px 0 var(--ok-borda); }
.opcao.errada { border-color: var(--acento-borda); background: var(--erro-claro); color: var(--erro-txt); box-shadow: 0 2px 0 var(--acento-borda); }
.opcao:disabled { cursor: default; }
.opcao .cx { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--inativo); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--superficie); }
.opcao .cx svg.i { width: 13px; height: 13px; stroke-width: 3.5; }
.opcao.sel .cx { background: var(--marca); border-color: var(--acento); color: #fff; }
.opcao.certa .cx { background: var(--ok); border-color: var(--ok); color: #fff; }
.afirmacao { font-size: 17px; font-weight: 700; line-height: 1.45; margin: 4px 0 18px; padding: 16px; border-radius: 18px; background: var(--cinza-0); border: 1px solid var(--linha); }
.tipo-missao .fala .pers, .tipo-historia .fala .pers, .tipo-jogo .fala .pers { width: 36px; height: 36px; }
.tipo-vf .fala-grande .pers { width: 52px; height: 52px; }
.tipo-vf .fala { margin-bottom: 6px; }
.tipo-vf .q-ilus.peq { width: 130px; height: 130px; margin-top: 4px; }

/* Certo / errado: ícone grande + palavra */
.vf { display: flex; justify-content: center; gap: 36px; margin-top: 18px; }
.vf-op { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--suave); }
.vf-btn { width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--superficie); border: 1.5px solid var(--linha); box-shadow: 0 3px 0 var(--linha); }
.vf-btn svg.i { width: 38px; height: 38px; stroke-width: 2.6; }
.vf-btn.sim { color: var(--ok); } .vf-btn.nao { color: var(--erro); }
.vf-btn.sel.sim { background: var(--ok-claro); border-color: var(--ok-borda); box-shadow: 0 3px 0 var(--ok-borda); }
.vf-btn.sel.nao { background: var(--erro-claro); border-color: var(--acento-borda); box-shadow: 0 3px 0 var(--acento-borda); }
.vf-btn.certa { background: var(--ok); color: #fff; border-color: var(--ok); box-shadow: 0 3px 0 var(--ok-esc); }
.vf-btn.errada { background: var(--erro); color: #fff; border-color: var(--erro); box-shadow: 0 3px 0 var(--erro-esc); }

/* Pares */
.pares { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pares .col { display: flex; flex-direction: column; gap: 10px; }
.par { min-height: 56px; padding: 10px; font-size: 14px; font-weight: 700; text-align: center; border: 1.5px solid var(--linha); border-radius: 14px; background: var(--superficie); box-shadow: 0 2px 0 var(--linha); line-height: 1.3; }
.par.sel { border-color: var(--acento-borda); background: var(--acento-claro); }
.par.ok { opacity: .35; cursor: default; box-shadow: none; }
.par.erro { animation: treme .35s; border-color: var(--acento-borda); background: var(--erro-claro); }
@keyframes treme { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.treme { animation: treme .35s; }

/* ---------- "Vale a pena?": a peça como etiqueta de loja ---------- */
.peca-card { border-radius: 22px; background: var(--cinza-0); border: 1px solid var(--linha); padding: 14px; margin-bottom: 14px; }
.pc-topo { display: flex; gap: 14px; align-items: center; }
.pc-ilus { width: 112px; height: 120px; flex-shrink: 0; border-radius: 16px; background: var(--superficie); padding: 6px; }
.pc-ilus > svg { width: 100%; height: 100%; }
.pc-info { flex: 1; min-width: 0; }
.pc-nome { font-weight: 800; font-size: 17px; line-height: 1.2; }
.pc-canal { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--suave); margin-top: 4px; }
.pc-canal svg.i { width: 15px; height: 15px; }
.pc-preco { display: inline-block; margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: -.3px; color: #fff; background: var(--destaque); padding: 4px 12px 5px 18px; border-radius: 6px 99px 99px 6px; position: relative; }
.pc-preco::before { content: ''; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--cinza-0); }
.fibras { margin-top: 14px; }
.fib-barra { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--superficie); }
.fib-barra span { display: block; height: 100%; }
.fib-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--tinta-2); }
.fib-leg span { display: inline-flex; align-items: center; gap: 6px; }
.fib-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fib-leg small { font-weight: 600; color: var(--suave); font-size: var(--t-xs); }
.fib-extra { margin-top: 6px; font-size: 13px; color: var(--suave); font-weight: 600; }
.fib-sem { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px; border-radius: 12px; border: 1.5px dashed var(--cinza-3); background: var(--superficie); font-family: 'Courier New', ui-monospace, monospace; font-weight: 700; font-size: 14px; }
.fib-sem svg.i { width: 18px; height: 18px; color: var(--alerta); }
.detalhes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.detalhes span { font-size: 13px; font-weight: 600; color: var(--tinta-2); background: var(--superficie); border: 1px solid var(--linha); border-radius: 99px; padding: 5px 10px; line-height: 1.3; }
.vd-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.vd-ajuda { width: 44px; height: 44px; margin: -10px -8px -10px 0; display: flex; align-items: center; justify-content: center; color: var(--suave); border-radius: 50%; }
.vd-ajuda svg.i { width: 22px; height: 22px; }
.vereditos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vd { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border-radius: var(--raio); background: var(--superficie); border: 1.5px solid var(--linha); box-shadow: 0 2px 0 var(--linha); font-weight: 700; font-size: 14.5px; text-align: left; line-height: 1.2; }
.vd-ic { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; background: var(--vc); }
.vd-ic svg.i { width: 18px; height: 18px; stroke-width: 2.6; }
.vd.sel { border-color: var(--vc); background: color-mix(in srgb, var(--vc) 9%, var(--fundo)); box-shadow: 0 2px 0 var(--vc); }
.vd.certa { border-color: var(--ok-borda); background: var(--ok-claro); box-shadow: 0 2px 0 var(--ok-borda); color: var(--ok-txt); }
.vd.errada { border-color: var(--acento-borda); background: var(--erro-claro); box-shadow: 0 2px 0 var(--acento-borda); color: var(--erro-txt); }
.vd:disabled { cursor: default; }
.vd-comprar { --vc: var(--ok); } .vd-ressalvas { --vc: var(--alerta); } .vd-promocao { --vc: var(--info); } .vd-evitar { --vc: var(--erro); }

/* Missão: escolher entre peças */
.op-peca { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 18px; background: var(--superficie); box-shadow: 0 2px 0 var(--linha); }
.op-ilus { width: 66px; height: 72px; flex-shrink: 0; border-radius: 12px; background: var(--cinza-0); padding: 3px; }
.op-ilus > svg { width: 100%; height: 100%; }
.op-peca .info { flex: 1; min-width: 0; }
.op-peca .l1 { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 14.5px; }
.op-peca .comp { font-size: 13px; font-weight: 700; color: var(--tinta-2); margin: 3px 0 1px; }
.op-peca .det { font-size: 13px; color: var(--suave); line-height: 1.3; }
.op-peca .mini-fib { display: flex; height: 6px; border-radius: 99px; overflow: hidden; gap: 1px; margin: 5px 0 3px; max-width: 160px; }
.op-peca .mini-fib span { display: block; height: 100%; }
.op-peca.sel { border-color: var(--acento-borda); background: var(--acento-claro); }
.op-peca.certa { border-color: var(--ok-borda); background: var(--ok-claro); }
.op-peca.errada { border-color: var(--acento-borda); background: var(--erro-claro); }
.prazo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.prazo span { font-size: 13px; font-weight: 800; color: var(--acento); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.prazo-barra { flex: 1; height: 6px; border-radius: 99px; background: var(--marca); transform-origin: left; animation: prazo var(--t, 40s) linear forwards; }
@keyframes prazo { to { transform: scaleX(0); } }

/* Completar / ordenar */
.frase { font-size: 19px; font-weight: 700; line-height: 2.1; margin: 4px 0 20px; }
.lacuna { display: inline-block; min-width: 76px; height: 34px; vertical-align: middle; border-bottom: 2px solid var(--inativo); margin: 0 4px; }
.lacuna.cheia { min-width: 0; height: auto; border: 1.5px solid var(--linha); border-radius: 12px; padding: 4px 12px; font-size: 16px; font-weight: 700; background: var(--superficie); box-shadow: 0 2px 0 var(--linha); line-height: 1.4; }
.lacuna.certa { border-color: var(--ok-borda); background: var(--ok-claro); color: var(--ok-txt); }
.lacuna.errada { border-color: var(--acento-borda); background: var(--erro-claro); color: var(--erro-txt); }
.banco { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip-op { min-height: 44px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--superficie); box-shadow: 0 2px 0 var(--linha); font-weight: 700; font-size: 14.5px; }
.chip-op.usado, .chip-op:disabled { opacity: .35; box-shadow: none; }
.ordem-alvo { min-height: 64px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 10px; border-radius: 18px; background: var(--cinza-0); border: 1.5px dashed var(--cinza-2); }
.ordem-vazio { color: var(--suave); font-weight: 600; font-size: 14px; text-align: center; padding: 10px; }
.ordem-item { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 44px; padding: 10px 12px; border-radius: 12px; background: var(--superficie); border: 1.5px solid var(--linha); font-weight: 700; font-size: 14.5px; }
.ordem-item b { width: 22px; height: 22px; border-radius: 50%; background: var(--acento-claro); color: var(--acento); font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ordem-item.certa { border-color: var(--ok-borda); background: var(--ok-claro); }
.ordem-item.errada { border-color: var(--acento-borda); background: var(--erro-claro); }

/* Historinha, ouvir, imagem, jogo */
.conversa { margin-bottom: 8px; }
.ouvir { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 18px; }
.ouvir-btns { display: flex; gap: 12px; align-items: center; }
.som { width: 72px; height: 72px; border-radius: 22px; background: var(--marca); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 var(--acento-esc); }
.som svg.i { width: 34px; height: 34px; }
.som.peq { width: 52px; height: 52px; border-radius: 16px; background: var(--acento-claro); color: var(--acento); box-shadow: 0 3px 0 var(--acento-borda); }
.som.peq svg.i { width: 24px; height: 24px; }
.som.falando { animation: pulsa-som 1s ease-in-out infinite; }
@keyframes pulsa-som { 50% { transform: scale(1.06); } }
.ouvir-txt { font-weight: 600; color: var(--tinta-2); text-align: center; background: var(--cinza-0); border-radius: 14px; padding: 10px 14px; font-size: 14.5px; }
.ler { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--linha); font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ler svg.i { width: 18px; height: 18px; }
.grade-img { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.img-op { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 18px; border: 1.5px solid var(--linha); background: var(--superficie); box-shadow: 0 2px 0 var(--linha); font-weight: 700; font-size: 14px; text-align: center; }
.img-ilus { width: 100%; height: 104px; }
.img-ilus > svg { width: 100%; height: 100%; }
.img-op.sel { border-color: var(--acento-borda); background: var(--acento-claro); }
.img-op.certa { border-color: var(--ok-borda); background: var(--ok-claro); }
.img-op.errada { border-color: var(--acento-borda); background: var(--erro-claro); }
.jogo-passos { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.jogo-passos span { width: 26px; height: 6px; border-radius: 99px; background: var(--cinza-2); }
.jogo-passos span.ok { background: var(--ok-vivo); } .jogo-passos span.atual { background: var(--marca); }
.jogo-cena { padding: 14px; border-radius: 22px; background: var(--cinza-0); margin-bottom: 14px; }
.jogo-cena .fala:last-child { margin-bottom: 0; }

/* Cartão "novo na redação" */
.novo { text-align: center; }
.novo .rotulo-caps { color: var(--acento); }
.novo-ilus { width: 150px; height: 150px; margin: 10px auto 4px; }
.novo .etq { margin: 12px auto 6px; }
.novo-tit { font-size: 28px; line-height: 1.1; margin: 10px 0 16px; }
.novo .fala { text-align: left; }

/* Etiqueta de roupa desenhada */
.etq { position: relative; max-width: 250px; margin: 0 auto; padding: 22px 18px 14px; background: #FFFFFE; border: 1px solid #E2E2E8; border-radius: 6px; box-shadow: 0 10px 26px rgba(20,20,30,.07); text-align: center; color: #222; font-family: 'Courier New', ui-monospace, monospace; font-size: 13.5px; line-height: 1.55; transform: rotate(-1.2deg); }
.etq::before { content: ''; position: absolute; top: 9px; left: 50%; width: 46px; margin-left: -23px; border-top: 1px dashed #BBB; }
.etq-tam { display: inline-block; border: 1.5px solid #222; padding: 1px 9px; font-weight: 700; margin-bottom: 10px; }
.etq-linhas div + div { margin-top: 4px; }
.etq-cuidados { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #CCC; }
.etq-cuidados .cuidado { width: 26px; height: 26px; color: #222; }
.etq-origem { margin-top: 10px; font-size: var(--t-xs); color: #555; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- Feedback (painel de baixo) ----------
   A fala da chefe é o veredito; a resposta certa vem em destaque verde e a explicação, legível. */
.feedback { position: relative; padding: 16px 20px calc(18px + var(--base-seg)); border-radius: 26px 26px 0 0; animation: sobe-fb .2s ease; }
@keyframes sobe-fb { from { transform: translateY(30px); opacity: .5; } }
.feedback.certo { background: var(--ok-claro); }
.feedback.errado { background: var(--erro-claro); }
.feedback.certo .quem-nome { color: var(--ok-txt); }
.fb-topo { padding-right: 40px; }
.fb-topo .fala { margin-bottom: 10px; }
.fb-topo .balao .txt { font-size: 17px; font-weight: 700; }
.fb-certa { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; background: var(--superficie); border: 1.5px solid var(--ok-borda); color: var(--ok-txt); font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.fb-certa svg.i { width: 18px; height: 18px; stroke-width: 3; margin-top: 1px; }
.feedback p.exp { display: flex; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--tinta-2); margin-bottom: 14px; }
.feedback p.exp svg.i { width: 18px; height: 18px; margin-top: 2px; color: var(--suave); }
.bandeira { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; color: var(--suave); display: flex; align-items: center; justify-content: center; }
.bandeira svg.i { width: 18px; height: 18px; }
.bandeira:hover { color: var(--tinta); background: var(--superficie); }

/* ---------- Resultado ---------- */
.resultado { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; }
.resultado .pers { margin-bottom: 12px; }
.resultado h2 { font-size: 26px; margin: 6px 0 6px; line-height: 1.15; }
.resultado .sub { color: var(--suave); margin-bottom: 22px; line-height: 1.5; }
.fala-resultado { width: 100%; text-align: left; margin-bottom: 18px; }
.stats { display: flex; width: 100%; gap: 6px; margin-top: 14px; }
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 2px 8px; border-top: 1px solid var(--linha); }
.stat svg.iu, .stat svg.i { width: 22px; height: 22px; }
.stat .v { font-size: 24px; font-weight: 800; letter-spacing: -.4px; line-height: 1.1; }
.stat .r { font-size: var(--t-cap); font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .8px; }
.anel-p { position: relative; width: 26px; height: 26px; }
.anel-p svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-p circle { fill: none; stroke-width: 4; }
.anel-p .ap-base { stroke: var(--cinza-1); } .anel-p .ap-feito { stroke: var(--ok-vivo); stroke-linecap: round; }
.meta-dia { width: 100%; margin-top: 18px; text-align: left; }
.meta-dia .md-cab { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--suave); margin-bottom: 6px; }
.meta-dia .md-cab b { color: var(--tinta); }
.meta-dia .md-barra { height: 10px; border-radius: 99px; background: var(--cinza-1); overflow: hidden; }
.meta-dia .md-barra div { height: 100%; border-radius: 99px; background: var(--ouro); }
.meta-dia.batida .md-barra div { background: var(--ok-vivo); }
.promo { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 12px 16px; border: 1px solid var(--linha); border-radius: 16px; text-align: left; }
.promo .ic-cargo, .promo .gema { width: 44px; height: 44px; }
.promo small { display: block; font-size: var(--t-cap); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--suave); }
.promo b { font-size: 18px; font-weight: 800; }
.carimbo { display: inline-block; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--acento); border: 3px solid var(--acento); font-size: 22px; padding: 6px 14px; border-radius: 3px; margin: 10px 0 18px; transform: rotate(-6deg); animation: carimbar .3s cubic-bezier(.2, 1.6, .4, 1); }
.carimbo.peq { font-size: 13px; border-width: 2px; padding: 3px 8px; margin: 0 0 10px; }
@keyframes carimbar { from { transform: rotate(-6deg) scale(1.8); opacity: 0; } }

/* ---------- Personagens ---------- */
.pers { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; animation: pers-entra .18s cubic-bezier(.2, 1.3, .4, 1) both; }
.pers svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pers.mini { width: 28px; height: 28px; }
.pers.g { width: 112px; height: 112px; }
.pers.gg { width: 140px; height: 140px; }
.pers .olho { transform-box: fill-box; transform-origin: center; animation: piscar 4.2s infinite; }
.pers-andy .olho { animation-delay: 1.3s; } .pers-emi .olho { animation-delay: 2.1s; } .pers-nico .olho { animation-delay: .6s; } .pers-gisa .olho { animation-delay: 2.8s; }
.pers-miranda.humor-errado .oculos { animation: abaixa-oculos .5s .15s ease forwards; }
.pers.humor-certo svg, .pers.humor-feliz svg { animation: aceno .6s .1s ease; transform-origin: 50% 90%; }
.pers.humor-errado svg { animation: nega .5s .1s ease; transform-origin: 50% 90%; }
@keyframes piscar { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes pers-entra { from { transform: scale(.6) translateY(8px); opacity: 0; } }
@keyframes abaixa-oculos { to { transform: translateY(7px); } }
@keyframes aceno { 30% { transform: rotate(-5deg); } 60% { transform: rotate(3deg); } }
@keyframes nega { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.sem-anim, .sem-anim svg { animation: none !important; }
.veu.estatico, .veu.estatico .folha { animation: none; }

/* =========================================================================
   EDIÇÕES — base (o desenho atual está em "Edições como narrativa", no fim do arquivo)
   ========================================================================= */
.pad-corredor { padding: 24px 22px 32px; }


.edicao { padding-top: 4px; }
.ed-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.ed-cab h2 { font-size: 24px; line-height: 1.15; }
.ed-cab small { display: block; margin-bottom: 2px; }
.esp-fich { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0; }
@keyframes respira { 50% { box-shadow: 0 0 0 2.5px var(--acento), 0 0 0 10px color-mix(in srgb, var(--acento) 8%, var(--fundo)); } }
.lista-editorias { display: flex; flex-direction: column; gap: 10px; }
.editoria { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; min-height: 64px; padding: 8px 14px 8px 8px; border-radius: 16px; border: 1px solid var(--linha); background: var(--superficie); }
.editoria.ativo { border-color: var(--tinta); }
.ed-ilus { width: 48px; height: 48px; border-radius: 12px; background: color-mix(in srgb, var(--cor) 10%, var(--fundo)); flex-shrink: 0; }
.ed-ilus > svg { width: 100%; height: 100%; }
.ed-nome { flex: 1; font-weight: 800; font-size: 15px; }
.ed-nome small { display: block; font-size: 13px; font-weight: 500; color: var(--suave); margin-top: 1px; }
.ed-prog { width: 40px; flex-shrink: 0; text-align: right; font-size: var(--t-xs); font-weight: 700; color: var(--suave); }
.ed-prog i { display: block; height: 4px; border-radius: 99px; background: var(--cinza-1); margin-top: 4px; overflow: hidden; }
.ed-prog i b { display: block; height: 100%; background: var(--cor); }

/* ---------- Provador (o caderno) ---------- */
.reg-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-btn { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px; border-radius: 20px; color: #fff; text-align: left; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.reg-btn:active { transform: translateY(3px); box-shadow: none; }
.reg-btn.comprei { background: #4F6B5A; } .reg-btn.desisti { background: var(--marca); }
.reg-btn svg.iu, .reg-btn svg.i { width: 30px; height: 30px; color: #fff; flex-shrink: 0; }
.reg-btn b { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; }
.economia { margin: 16px 0 4px; padding: 16px; border-radius: 20px; background: var(--cinza-0); border: 1px solid var(--linha); }
.eco-valor { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.eco-valor small { display: block; font-family: var(--sans); margin-bottom: 6px; }
.eco-barra { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px; margin: 14px 0 8px; background: var(--cinza-1); }
.eco-barra span { display: block; height: 100%; }
.eco-barra .b-arara { background: var(--marca); } .eco-barra .b-comprei { background: #4F6B5A; }
.eco-leg { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.eco-leg span { display: flex; align-items: center; gap: 6px; }
.eco-leg i { width: 10px; height: 10px; border-radius: 3px; }
.reg-hist { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-weight: 800; font-size: 14px; color: var(--tinta-2); }
.reg-hist small { flex: 1; text-align: left; font-weight: 600; color: var(--suave); font-size: var(--t-xs); }
.reg-hist svg.i { width: 18px; height: 18px; }
.seta { transform: rotate(-90deg); transition: transform .2s; display: flex; } .seta.aberta { transform: rotate(90deg); }
.hist { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.h-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--cinza-0); font-size: 14px; }
.h-dec { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.h-dec svg.i { width: 15px; height: 15px; stroke-width: 2.6; }
.h-dec.comprei { background: #4F6B5A; } .h-dec.desisti { background: var(--marca); } .h-dec.pensando { background: var(--inativo); }
.h-nome { flex: 1; font-weight: 700; } .h-preco { font-weight: 700; color: var(--suave); font-size: 13px; }
.tiles-ed { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 12px; }
.tile-ed { display: flex; align-items: center; gap: 10px; min-height: 64px; text-align: left; padding: 12px; border-radius: 16px; border: 1px solid var(--linha); background: var(--superficie); }
.te-ic svg.iu { width: 30px; height: 30px; }
.tile-ed b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.2; }
.tile-ed small { font-size: var(--t-xs); color: var(--suave); line-height: 1.3; }
.icones-escolha { display: flex; gap: 8px; }
.ie { flex: 1; position: relative; } .ie input { position: absolute; opacity: 0; pointer-events: none; }
.ie span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 4px; border-radius: 16px; border: 1.5px solid var(--linha); background: var(--superficie); color: var(--suave); cursor: pointer; text-align: center; }
.ie span svg.i { width: 22px; height: 22px; }
.ie small { font-size: var(--t-xs); font-weight: 700; line-height: 1.15; }
.ie input:checked + span { border-color: var(--vc, var(--acento)); background: color-mix(in srgb, var(--vc, var(--acento)) 9%, var(--fundo)); color: var(--vc, var(--acento)); }
.ie input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }

/* ---------- Redação (mesas) ---------- */
.grupos-abas { display: flex; gap: 8px; margin: 0 0 12px; overflow-x: auto; }
.gaba { min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--cinza-1); font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--tinta-2); display: flex; align-items: center; gap: 6px; }
.gaba small { font-size: var(--t-xs); font-weight: 600; color: var(--suave); }
.gaba.ativo { background: var(--destaque); color: #fff; } .gaba.ativo small { color: #ccc; }
.gaba.mais { width: 44px; padding: 0; justify-content: center; background: var(--acento-claro); color: var(--acento); }
.ranking { display: flex; flex-direction: column; }
.rk { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 14px; }
.rk.eu { background: var(--cinza-0); }
.rk .av { width: 36px; height: 36px; font-size: 14px; }
.rk-pos { font-size: 14px; width: 26px; text-align: center; font-weight: 700; color: var(--suave); }
.rk-nome { flex: 1; font-weight: 700; font-size: 14.5px; }

/* ---------- Crachá (perfil) ---------- */
.cracha { position: relative; margin: 0 auto 22px; max-width: 290px; padding: 26px 18px 16px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--linha); box-shadow: 0 12px 30px rgba(20,20,30,.08); text-align: center; }
.meu-av { position: relative; display: inline-block; margin: 0 auto; }
.meu-av .lapis { position: absolute; right: -2px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--marca); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--fundo); }
.meu-av .lapis svg.i { width: 15px; height: 15px; }
.cracha .meu-av .pers { width: 96px; height: 96px; }
.cracha h2 { font-size: 22px; margin-top: 10px; }
.cr-cargo { font-size: var(--t-cap); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--suave); margin-top: 2px; }
.conquistas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.conq { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 18px; background: var(--cinza-0); border: 1px solid var(--linha); }
.conq b { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; }
.conq small { font-size: var(--t-xs); color: var(--suave); display: block; line-height: 1.3; }
.conq-ic { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ouro-claro); margin-bottom: 4px; }
.conq-ic svg.iu { width: 26px; height: 26px; }
.conq.bloq .conq-ic { background: var(--cinza-1); }
.conq.bloq b { color: var(--suave); }
/* domínio por tema: grade de retalhos (cor = faixa de domínio; toque = retoque do tema) */
.carrossel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; }
.carrossel::-webkit-scrollbar { display: none; }
.obs { flex: 0 0 76%; scroll-snap-align: start; padding: 14px; border-radius: 20px; background: var(--superficie); border: 1px solid var(--linha); }
.obs b { display: block; font-size: 15px; font-weight: 800; }
.obs p { font-size: 14px; color: var(--tinta-2); line-height: 1.45; margin-top: 4px; }
/* Sua capa (revista) */
.revista { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; color: #17171A;
  background: radial-gradient(90% 70% at 60% 55%, #F4E6E1 0%, #E9D6D2 55%, #D9BFBE 100%); box-shadow: 0 18px 40px rgba(60,20,30,.22); }
.rv-topo { position: absolute; top: 8px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; z-index: 3; }
.rv-mast { position: absolute; top: 18px; left: 0; right: 0; text-align: center; font-family: var(--logo); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -1px; text-transform: uppercase; color: var(--acento); z-index: 1; }
.rv-modelo { position: absolute; left: 50%; bottom: -7%; width: 118%; transform: translateX(-40%); z-index: 2; }
.rv-modelo .pers { width: 100%; height: auto; aspect-ratio: 1; animation: none; border-radius: 0; }
.rv-modelo svg > circle:first-of-type { display: none; }
.rv-modelo svg g[clip-path] { clip-path: none; }
.rv-lado { position: absolute; left: 14px; top: 34%; width: 38%; z-index: 3; text-shadow: 0 0 6px rgba(244,230,225,.95), 0 1px 0 rgba(255,255,255,.8); }
.rv-lado p { font-size: 11px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .4px; }
.rv-lado p b { display: block; color: var(--acento); font-size: 10.5px; letter-spacing: 1.4px; margin-bottom: 2px; }
.rv-lado p:not(:first-child) { font-size: 11px; color: var(--tinta-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.rv-manchete { position: absolute; left: 14px; bottom: 44px; width: 62%; z-index: 3; }
.rv-manchete small { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.rv-manchete em { display: block; font-family: var(--logo); font-style: italic; font-weight: 700; font-size: 34px; line-height: .95; color: var(--acento); text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.rv-rodape { position: absolute; left: 14px; right: 12px; bottom: 10px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 3; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.barras { width: 46px; height: 24px; background: #FFFFFE; padding: 3px; background-image: repeating-linear-gradient(90deg, #17171A 0 1.5px, transparent 1.5px 3px, #17171A 3px 4px, transparent 4px 6.5px); background-clip: content-box; border: 3px solid #FFFFFE; }
.card { border: 1.5px solid var(--linha); border-radius: 20px; padding: 16px; margin-bottom: 12px; background: var(--superficie); }
.card h4 { font-size: 16px; font-weight: 800; }
.card p { font-size: 14px; color: var(--suave); line-height: 1.45; }

/* Criador de personagem */
.ed-prev { display: flex; justify-content: center; margin: 4px 0 12px; }
.ed-prev .pers { width: 132px; height: 132px; }
.ed-abas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; scrollbar-width: none; }
.ed-abas::-webkit-scrollbar { display: none; }
.ed-abas button { min-height: 44px; padding: 0 14px; border-radius: 99px; background: var(--cinza-1); font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--tinta-2); }
.ed-abas button.ativo { background: var(--destaque); color: #fff; }
.ed-opcoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.ed-opcoes.cores { grid-template-columns: repeat(6, 1fr); }
.ed-op { aspect-ratio: 1; border-radius: 16px; border: 2px solid var(--linha); background: var(--superficie); padding: 3px; display: flex; align-items: center; justify-content: center; }
.ed-op.sel { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro); }
.ed-op .sw { width: 100%; height: 100%; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.mini-av { width: 100%; height: 100%; display: block; }
.mini-av svg { width: 100%; height: 100%; display: block; }
.ed-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-acoes .btn + .btn { margin-top: 0; }
.cores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0 6px; }
.cores button { aspect-ratio: 1; border-radius: 50%; background: var(--cor); }

/* gema (ícone de reserva dos cargos) */
.gema { display: inline-flex; position: relative; width: 28px; height: 28px; flex-shrink: 0; }
.gema svg { width: 100%; height: 100%; }

/* ---------- Movimento reduzido: sem animações para quem pediu no sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Ajustes de 02/10 (tarde): um título só, tema e pequenos reforços de adesão ---------- */
.eco-valor span { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--suave); letter-spacing: 0; }
.ganho-peq { font-style: normal; display: flex; align-items: center; gap: 4px; font-weight: 800; color: var(--tinta); }
.q-dica { font-size: 15px; font-weight: 600; color: var(--suave); white-space: nowrap; }
.tile-ed b { font-size: 14.5px; }
.obs { display: flex; gap: 10px; align-items: flex-start; flex-basis: 72%; }
.obs svg.i { width: 24px; height: 24px; color: var(--acento); flex-shrink: 0; margin-top: 1px; }
.obs p { margin-top: 0; font-weight: 600; color: var(--tinta); }
.conq { cursor: pointer; }
.tema-escolha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; margin: 6px 0 4px; border-radius: 14px; background: var(--cinza-1); }
.tema-escolha button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 60px; justify-content: center; border-radius: 11px; font-weight: 700; font-size: 13px; color: var(--suave); }
.tema-escolha button.ativo { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.promo b { font-size: 17px; }
.stat.subiu svg { animation: pulsa-som .6s ease 2; }
.stat.subiu .r { color: #B5421A; }
:root[data-tema="escuro"] .stat.subiu .r { color: var(--fogo); }
:root[data-tema="escuro"] .tema-escolha button.ativo { background: var(--cinza-2); }
:root[data-tema="escuro"] .cafe-cor { color: #D9AE84; }

/* ---------- Entrada sem cadastro ---------- */
.aviso-salvar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0 0 16px; padding: 12px 14px; border-radius: 16px; background: var(--acento-claro); border: 1.5px solid var(--acento-borda); color: var(--acento-txt); text-align: left; }
.aviso-salvar b { flex: 1; font-size: 15px; }
.aviso-salvar svg.i:last-child { transform: rotate(180deg); width: 18px; height: 18px; }
.tema-escolha button b { font-size: 18px; font-weight: 800; color: var(--tinta); }
.boas-vindas { display: flex; flex-direction: column; justify-content: center; }
.boas-vindas .hero { padding-bottom: 40px; }
.boas-vindas .hero p { font-size: 17px; }

/* ---------- Refino (02/10, noite): mais espaço, menos informação, serifa só no logotipo ---------- */
.voltar-linha { display: flex; align-items: center; gap: 6px; margin: -6px 0 8px -12px; }
.voltar-linha .titulo-tela { margin: 0; }
.linha-link { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 0 2px; border-top: 1px solid var(--linha); text-align: left; color: var(--tinta); }
.linha-link + .linha-link { border-top: 1px solid var(--linha); }
.linha-link:last-child { border-bottom: 1px solid var(--linha); }
.linha-link b { flex: 1; font-size: 16px; font-weight: 700; }
.linha-link > span { font-size: 14px; font-weight: 600; color: var(--suave); }
.linha-link svg.i:first-child { width: 22px; height: 22px; color: var(--acento); }
.linha-link svg.i:last-child { width: 18px; height: 18px; color: var(--inativo); transform: rotate(180deg); }
.linha-link.feita svg.i:first-child { color: var(--ok-vivo); }
.edicao + .linha-link { margin-top: 36px; }
.cracha { border: none; box-shadow: none; background: transparent; padding: 0 0 8px; margin-bottom: 28px; max-width: none; }
.cr-cargo { display: block; margin: 4px auto 0; min-height: 32px; padding: 0 12px; border-radius: 99px; background: var(--cinza-1); font-size: 12px; color: var(--tinta-2); }
.economia { background: transparent; border: none; padding: 4px 0 0; margin-top: 28px; }
.reg-hist { border-bottom: none; margin-top: 8px; }
.dicas { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.dicas p { display: flex; gap: 10px; color: var(--tinta-2); line-height: 1.4; margin: 0; font-size: 14.5px; }
.dicas svg.i { color: var(--acento); flex-shrink: 0; }
.folha .conquistas { margin-top: 10px; }
.conq { background: transparent; border: none; padding: 8px 4px; }
.peca-card, .grupo { box-shadow: none; }
.topo .chips { padding: 0 6px; }

/* ---------- Três abas (02/10): mesa dentro do Provador, Crachá enxuto ---------- */
.sec-tit { font-size: 18px; font-weight: 800; letter-spacing: -.3px; margin: 36px 0 10px; }
.ranking { list-style: none; margin-bottom: 8px; }
.rk { padding: 8px 2px; }
.rk.eu { background: transparent; }
.rk.eu .rk-nome { color: var(--acento); }
.rk-pos { width: 18px; }
.rk-xp { width: auto; }
.cracha { text-align: center; margin: 8px 0 28px; }
.linha-link .chave { margin-left: auto; }
.chave.on { background: var(--ok); } .chave.on::after { transform: translateX(18px); }
.aviso-salvar { margin-bottom: 20px; }
.rk-xp { display: flex; flex-direction: row; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: var(--tinta); }
.rk-xp svg.iu { width: 14px; height: 14px; }
.linha-link > span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* =========================================================================
   Refino 2 (02/10): traço leve. Botões e opções planos (sem sombra 3D), bordas de 1px,
   pesos 500–700, ícones menores, o retrato como acesso ao perfil, menu com duas seções.
   ========================================================================= */
.opcao, .escolha, .vd, .op-peca, .img-op, .par, .chip-op, .ordem-item, .lacuna.cheia, .tile-ed, .item-loja {
  box-shadow: none; border-width: 1px; border-color: var(--cinza-2); font-weight: 500; }
.opcao.sel, .escolha.sel, .vd.sel, .op-peca.sel, .img-op.sel, .par.sel { border-color: var(--acento); border-width: 1.5px; box-shadow: none; }
.opcao.certa, .vd.certa, .op-peca.certa, .img-op.certa { box-shadow: none; }
.opcao.errada, .vd.errada, .op-peca.errada, .img-op.errada { box-shadow: none; }
.vd { font-weight: 600; }
.vf-btn { box-shadow: none; border-width: 1px; border-color: var(--cinza-2); width: 80px; height: 80px; }
.vf-btn.sel.sim, .vf-btn.sel.nao, .vf-btn.certa, .vf-btn.errada { box-shadow: none; }
.balao { border-width: 1px; box-shadow: none; }
.balao .txt { font-weight: 500; }
.fb-topo .balao .txt { font-weight: 600; }
.som { box-shadow: none; } .som.peq { box-shadow: none; }
.peca-card { border: none; }

/* topo: retrato à esquerda, contadores à direita */
.topo { gap: 10px; padding: calc(10px + var(--topo-seg)) 18px 6px; }
.topo .chips { width: auto; flex: 1; justify-content: flex-end; gap: 14px; padding: 0; }
.chip { font-weight: 600; font-size: 15px; gap: 5px; padding: 0 2px; }
.retrato { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; position: relative; padding: 0; }
.retrato .pers { width: 40px; height: 40px; animation: none; }
.retrato.pendente::after { content: ''; position: absolute; right: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 2px var(--fundo); }

/* menu: duas seções, uma pílula discreta no centro */
.nav { left: 50%; right: auto; transform: translateX(-50%); width: 230px; padding: 5px; border-radius: 22px; box-shadow: 0 8px 24px rgba(20,20,30,.10), 0 0 0 1px var(--linha); }
.nav button { min-height: 50px; flex-direction: row; gap: 8px; border-radius: 17px; }
.nav button svg.i { width: 21px; height: 21px; stroke-width: 1.8; }
.nav button span { font-size: 14px; font-weight: 600; }
.nav button.ativo { background: var(--acento-claro); }
.nav button.ativo svg { fill: none; }

/* pautas e capas mais leves */

/* provador */
.reg-btn { background: var(--cinza-0); color: var(--tinta); border: 1px solid var(--linha); box-shadow: none; min-height: 60px; }
.reg-btn:active { transform: scale(.98); }
.reg-btn.comprei, .reg-btn.desisti { background: var(--cinza-0); }
.reg-btn svg.iu, .reg-btn svg.i { width: 24px; height: 24px; }
.reg-btn.comprei svg { color: #4F6B5A; } .reg-btn.desisti svg { color: var(--acento); }
.reg-btn b { font-size: 15px; font-weight: 600; }
.eco-valor { font-size: 30px; font-weight: 700; letter-spacing: -.8px; }
.eco-barra { height: 6px; }
.tile-ed b { font-weight: 600; }
.sec-tit { font-weight: 700; }
.rk-nome { font-weight: 500; }
.rk-xp { font-weight: 600; }

/* listas e folhas */
.linha-link b { font-weight: 500; }
.linha-link svg.i:first-child { color: var(--suave); }
.folha { border-radius: 22px 22px 0 0; }
.cracha h2 { font-weight: 700; }
.cr-cargo { font-weight: 600; letter-spacing: .8px; }
.titulo-tela { font-weight: 700; }
.ed-cab h2 { font-weight: 700; }
.resultado h2 { font-weight: 700; }
.stat .v { font-weight: 700; }
.marca::after { color: var(--acento); }
.retrato { width: 44px; height: 44px; }
.retrato .pers { width: 44px; height: 44px; }
.cr-cargo { min-height: 44px; padding: 0 16px; }
.marca { text-transform: none; letter-spacing: -.5px; font-weight: 700; }
.hero h1.marca { font-size: 44px; }

/* =========================================================================
   Edições como narrativa (02/10): a carreira numa linha, a edição como cena
   (a fala que abre a edição), as pautas como capítulos numa linha do tempo.
   ========================================================================= */
.carreira-linha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 10px; width: 100%; min-height: 48px; margin: -4px 0 18px; text-align: left; color: var(--suave); font-size: 14px; }
.carreira-linha b { color: var(--tinta); font-weight: 600; }
.carreira-linha .cl-cargo { justify-self: end; font-weight: 500; }
.carreira-linha svg.i { width: 16px; height: 16px; transform: rotate(180deg); color: var(--inativo); }
.cl-barra { grid-column: 1 / -1; display: block; height: 3px; border-radius: 99px; background: var(--cinza-1); overflow: hidden; }
.cl-barra b { display: block; height: 100%; background: var(--acento); }

.cena-ed { padding: 22px 20px 20px; border-radius: 24px; background: var(--cinza-0); }
.ce-topo { display: flex; justify-content: space-between; align-items: center; margin: -6px -8px 2px 0; }
.ce-topo .esp-fich { color: var(--suave); }
.ce-topo .esp-fich svg.i { width: 20px; height: 20px; }
.cena-ed h2 { font-size: 28px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; }
.ce-fala { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; }
.ce-fala .pers { width: 34px; height: 34px; animation: none; }
.ce-fala p { font-size: 16px; line-height: 1.4; color: var(--tinta-2); font-style: italic; }
.ce-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 13px; color: var(--suave); font-weight: 500; }
.ce-prog i { flex: 1; height: 4px; border-radius: 99px; background: var(--cinza-2); overflow: hidden; }
.ce-prog i b { display: block; height: 100%; background: var(--acento); }
.ed-fechada { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ok-txt); }
.ed-fechada svg.i { width: 18px; height: 18px; }

.pautas { list-style: none; margin: 18px 0 0; position: relative; }
.pautas::before { content: ''; position: absolute; left: 21px; top: 26px; bottom: 26px; width: 1.5px; background: var(--cinza-2); }
.pauta-l { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 4px 10px; border-radius: 14px; text-align: left; position: relative; }
.pauta-l:active { background: var(--cinza-0); }
.pl-marca { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--fundo); border: 1.5px solid var(--cinza-3); position: relative; z-index: 1; }
.pl-marca svg.i { width: 13px; height: 13px; stroke-width: 3; color: #fff; }
.feito .pl-marca { background: var(--ok-vivo); border-color: var(--ok-vivo); }
.atual .pl-marca { border: 2px solid var(--acento); }
.atual .pl-marca i { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.pl-tit { flex: 1; font-size: 16px; font-weight: 500; color: var(--tinta); }
.pl-tit small { font-size: 12px; font-weight: 500; color: var(--suave); margin-left: 4px; }
.pauta-l.atual .pl-tit { font-weight: 600; color: var(--acento); }
.pauta-l.futuro .pl-tit { color: var(--suave); }
.pl-lock svg.i { width: 15px; height: 15px; color: var(--inativo); }
.ed-promo { display: flex; align-items: center; gap: 10px; margin: 20px 0 0 10px; font-size: 14px; color: var(--suave); }
.ed-promo .ic-cargo, .ed-promo .gema { width: 26px; height: 26px; flex-shrink: 0; }
.links-fim { margin-top: 32px; }

.carreira-lista { list-style: none; margin: 6px 0 12px; }
.cr-ed { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 6px 4px; text-align: left; border-bottom: 1px solid var(--linha); }
.cr-txt { flex: 1; }
.cr-txt b { display: block; font-size: 15px; font-weight: 600; }
.cr-txt small { font-size: 13px; color: var(--suave); }
.cr-ed.futuro .cr-txt b { color: var(--suave); font-weight: 500; }
.cr-num { font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.ce-topo { margin: 0 -8px 0 0; align-items: flex-start; }
.ce-topo h2 { padding-top: 4px; }

/* =========================================================================
   Caderno em destaque, Primeira fila, abertura em stories, menu de ícones (02/10, noite)
   ========================================================================= */
/* o caderno: o que você avaliou e anotou, num bloco próprio */
.caderno { margin-top: 18px; padding: 20px 18px 10px; border-radius: 22px; background: var(--acento-claro); }
.cd-eco { display: flex; align-items: baseline; gap: 8px; }
.cd-eco b { font-size: 30px; font-weight: 700; letter-spacing: -.8px; color: var(--acento-txt); }
.cd-eco span { font-size: 15px; font-weight: 500; color: var(--suave); }
.caderno .eco-barra { background: var(--superficie); }
.cd-lista { list-style: none; margin-top: 14px; border-top: 1px solid var(--acento-borda); }
.cd-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--acento-borda); }
.cd-item:last-child { border-bottom: none; }
.cd-nome { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; }
.cd-nome small { display: block; font-weight: 500; font-size: 12.5px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-preco { font-weight: 600; font-size: 14px; color: var(--tinta-2); }
.cd-vd .vd-ic { width: 26px; height: 26px; }
.cd-vd .vd-ic svg.i { width: 14px; height: 14px; }
.cd-mais { width: 100%; min-height: 44px; font-weight: 600; font-size: 14px; color: var(--acento-txt); }
.cd-vazio { display: flex; align-items: center; gap: 14px; padding: 4px 0 12px; }
.cd-ilus { width: 64px; height: 64px; flex-shrink: 0; }
.cd-vazio p { font-weight: 500; color: var(--tinta-2); }

/* primeira fila */
.fila-lead { display: flex; gap: 10px; align-items: flex-start; margin: -8px 0 22px; color: var(--tinta-2); line-height: 1.45; }
.fila-lead svg.i { width: 22px; height: 22px; color: var(--acento); flex-shrink: 0; margin-top: 1px; }
.fila-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.fila-cab b { font-size: 15px; font-weight: 600; }
.fila-cab span { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--suave); }
.fila-cab svg.i { width: 15px; height: 15px; }
.rk.top .rk-pos { color: var(--acento); font-weight: 700; }
.ranking + .btn { margin-top: 12px; }
.pontos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pontos li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: 16px; background: var(--cinza-0); text-align: center; }
.pontos b { font-size: 15px; font-weight: 700; }
.pontos span { font-size: 12px; color: var(--suave); }

/* menu: três ícones; o nome aparece só na seção aberta */
.nav { width: auto; padding: 5px; gap: 2px; }
.nav button { flex: 0 0 auto; min-width: 56px; padding: 0 14px; }
.nav button span { display: none; }
.nav button.ativo span { display: inline; }

/* abertura em stories */
.intro { background: var(--fundo); padding-top: var(--topo-seg); cursor: pointer; }
.intro-barras { display: flex; gap: 4px; padding: 14px 18px 0; }
.intro-barras i { flex: 1; height: 3px; border-radius: 99px; background: var(--cinza-2); overflow: hidden; position: relative; }
.intro-barras i.cheia { background: var(--acento); }
.intro-barras i.atual::after { content: ''; position: absolute; inset: 0; background: var(--acento); transform-origin: left; animation: enche var(--t) linear forwards; }
@keyframes enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.intro-pular { align-self: flex-end; min-height: 44px; padding: 0 18px; font-weight: 600; font-size: 14px; color: var(--suave); }
.intro-cena { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 0 32px; text-align: center; }
.intro-ver { width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; animation: intro-entra .6s cubic-bezier(.2, 1.1, .3, 1) both; }
.intro-ver .pers { width: 170px; height: 170px; animation: none; }
.intro-ver > svg { width: 150px; height: 150px; }
.intro-txt { font-size: 22px; line-height: 1.35; font-weight: 600; letter-spacing: -.3px; color: var(--tinta); max-width: 320px; animation: intro-texto .6s .15s ease both; }
@keyframes intro-entra { from { opacity: 0; transform: scale(.85) translateY(10px); } }
@keyframes intro-texto { from { opacity: 0; transform: translateY(12px); } }
.nav { width: max-content; }

/* Perfil: baixar / apagar dados (LGPD) — discretos, no fim da folha */
.dados-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 8px; }
.dados-links .btn.texto { width: auto; min-height: 44px; margin: 0; padding: 0 8px; line-height: 1; font-size: 13px; color: var(--tinta-2, inherit); text-decoration: none; display: inline-flex; align-items: center; }
.dados-links .btn.texto.perigo { color: var(--erro); }
.nota a { color: inherit; }