/* English Me v2 — "Céu aberto". Ver DESIGN.md. Celular primeiro; bloco de computador no fim. */
@font-face{font-family:'DejaVu Sans';font-weight:400;font-display:swap;src:url(fonts/dejavu-sans.woff2) format('woff2')}
@font-face{font-family:'DejaVu Sans';font-weight:700;font-display:swap;src:url(fonts/dejavu-sans-bold.woff2) format('woff2')}
@font-face{font-family:'DejaVu Serif';font-weight:400;font-display:swap;src:url(fonts/dejavu-serif.woff2) format('woff2')}
@font-face{font-family:'DejaVu Serif';font-weight:700;font-display:swap;src:url(fonts/dejavu-serif-bold.woff2) format('woff2')}   /* só para o diploma (js/diploma.js) */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-500i.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-600.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cormorant-700.woff2) format('woff2')}   /* serifa elegante só do certificado (Cormorant Garamond, OFL) */
@font-face{font-family:'Figtree';src:url(fonts/figtree.woff2?v=2) format('woff2');font-weight:400 900;font-display:swap}

:root{
  --b50:#EEF4FF;--b100:#DCE8FF;--b200:#B9D0FF;--b300:#8AB0FF;--b400:#4F86F0;--b500:#2F6BDB;--b600:#2356C2;--b700:#1B3A94;--b800:#142C73;--b900:#0E1B45;
  --rosa:#FFE3E6;--rosa2:#FFC9CF;--rosa-txt:#B3263B;
  --ok:#22C55E;--ok2:#16A34A;--ok-fundo:#E9FBEF;--ok-txt:#15803D;
  --erro:#EF4444;--erro2:#DC2626;--erro-fundo:#FEF0F0;--erro-txt:#B91C1C;
  --cz50:#F7F9FD;--cz100:#EEF1F7;--cz200:#DEE3EE;--cz300:#C5CCDB;--cz400:#9AA3B8;--cz600:#5B6478;--cz800:#2B3447;
  --grad:linear-gradient(135deg,#1B3A94 0%,#2F6BDB 100%);--grad-no:linear-gradient(180deg,#4F86F0,#2356C2);
  --sombra:0 0 0 1px rgba(27,58,148,.06),0 1px 2px -1px rgba(27,58,148,.08),0 6px 16px -4px rgba(27,58,148,.10);
  --sombra-alta:0 0 0 1px rgba(27,58,148,.06),0 8px 24px -6px rgba(27,58,148,.22);
  --r12:12px;--r16:16px;--r20:20px;--r24:24px;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-spring:cubic-bezier(.34,1.3,.64,1);
  --f:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;--menu:72px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--f);font-weight:500;font-size:16px;line-height:1.5;color:var(--b900);background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
::selection{background:var(--b100);color:var(--b900)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;margin:0}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
p{margin:0;text-wrap:pretty}
svg.i{width:1em;height:1em;flex:none;fill:currentColor;vertical-align:-.15em}
:focus-visible{outline:3px solid var(--b400);outline-offset:3px;border-radius:var(--r12)}
[hidden]{display:none!important}
img{display:block;max-width:100%}
.num{font-variant-numeric:tabular-nums}
.vis-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- casca ---------- */
#app{min-height:100%;display:flex;flex-direction:column}
#screen{flex:1;padding-bottom:calc(var(--menu) + env(safe-area-inset-bottom));outline:none;background:#fff url(img/fundo/ondas.svg) 0 0/780px auto}   /* blocos de ondas branco/azul-claro (escolha do Bruno, 21/10) */
.menu-stats,#menu .eu,.so-pc{display:none}
#menu{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--menu) + env(safe-area-inset-bottom));padding:6px 8px env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--cz200);display:flex;justify-content:space-around;align-items:center}
#menu a{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:var(--r16);text-decoration:none;font-size:11px;font-weight:700;color:var(--cz600);transition:color .15s,background .15s}
#menu a svg{width:26px;height:26px}
#menu a.on{color:var(--b600);background:var(--b50)}
#menu a:active{transform:scale(.96)}
#menu .logo{display:none}
body.foco #menu{display:none}
body.foco #screen{padding-bottom:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- botões ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 20px;border-radius:var(--r16);font-weight:800;font-size:16px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;user-select:none;-webkit-user-select:none;transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out),background .15s,color .15s}
.btn svg.i{width:22px;height:22px}
.btn-p{background:var(--b500);color:#fff;box-shadow:0 4px 0 var(--b600)}
.btn-s{background:#fff;color:var(--b700);border:2px solid var(--b100);box-shadow:0 4px 0 var(--b100)}
.btn-rosa{background:var(--rosa);color:var(--rosa-txt);box-shadow:0 4px 0 var(--rosa2)}
.btn-ok{background:var(--ok);color:#fff;box-shadow:0 4px 0 var(--ok2)}
.btn-erro{background:var(--erro);color:#fff;box-shadow:0 4px 0 var(--erro2)}
.btn-br{background:#fff;color:var(--b700);box-shadow:0 4px 0 var(--b200)}
.btn-ghost{background:none;color:var(--b600);min-height:44px;box-shadow:none;padding:0 12px;width:auto}
.btn:disabled,.btn[aria-disabled=true]{background:var(--cz100);color:var(--cz400);border-color:var(--cz100);box-shadow:0 4px 0 var(--cz200);cursor:default}
.btn:not(:disabled):active{transform:translateY(4px);box-shadow:0 0 0 transparent}
.btn-ghost:not(:disabled):active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .btn-p:not(:disabled):hover{background:var(--b400)}
  .btn-s:not(:disabled):hover{background:var(--b50)}
  .btn-rosa:not(:disabled):hover{background:var(--rosa2)}
  .btn-ok:not(:disabled):hover{filter:brightness(1.06)}
  .btn-erro:not(:disabled):hover{filter:brightness(1.06)}
}
.btn-auto{width:auto}
.btn-ico{width:48px;min-height:48px;padding:0;border-radius:var(--r16)}
.btn-ico svg.i{width:24px;height:24px}

/* ---------- superfícies ---------- */
.g{background:var(--grad);color:#fff}
.cartao{background:#fff;border-radius:var(--r20);box-shadow:var(--sombra)}
.sub{color:var(--cz600);font-size:14px;line-height:1.45}
.pequeno{font-size:13px;color:var(--cz600)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:999px;background:var(--b50);color:var(--b700);font-size:13px;font-weight:700}
.chip svg.i{width:16px;height:16px}
.mini-est{display:inline-flex;gap:2px}
.mini-est svg.i{width:13px;height:13px;color:var(--cz300)}
.mini-est svg.i.on{color:var(--b500)}
.estrela{color:var(--b500)}
.listras{height:10px;background:repeating-linear-gradient(180deg,var(--b100) 0 2px,#fff 2px 5px)}

/* mascote: vídeo do Bruno ou emblema */
.mascote{display:flex;align-items:center;justify-content:center;flex:none}
.mascote video,.mascote img{width:100%;height:100%;object-fit:contain}
.mascote.emblema svg{width:84%;height:84%;filter:drop-shadow(0 10px 14px rgba(27,58,148,.28));animation:flutua 3.2s var(--ease-out) infinite alternate}
.g .mascote.emblema svg{filter:drop-shadow(0 12px 20px rgba(0,0,0,.25))}
.m-grande{width:200px;height:200px}.m-medio{width:120px;height:120px}.m-peq{width:72px;height:72px}
@keyframes flutua{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-8px) rotate(3deg)}}
.ilus{width:160px;height:160px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(14,27,69,.22))}

/* avatares */
.avatar{width:48px;height:48px;border-radius:50%;background:var(--b50);box-shadow:0 0 0 1px rgba(14,27,69,.08) inset;object-fit:cover;flex:none}
.avatar-g{width:64px;height:64px}.avatar-p{width:36px;height:36px}

/* ---------- cabeçalho de tela ---------- */
.cab{position:relative;overflow:hidden;padding:calc(14px + env(safe-area-inset-top)) 20px 18px;border-radius:0 0 var(--r24) var(--r24)}
.cab .cantao{position:absolute;right:-6px;top:calc(4px + env(safe-area-inset-top));width:150px;height:84px;opacity:.16}
.cab small{display:block;font-size:13px;font-weight:600;opacity:.85}
.cab h1{font-size:26px;color:#fff;margin:2px 0 14px}
.cab p{font-size:15px;opacity:.9;max-width:36ch}
.cab-curta h1{margin-bottom:6px}
.stats{display:flex;gap:8px;flex-wrap:wrap}
.stat{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.16);font-size:14px;font-weight:800}
.stat svg.i{width:18px;height:18px}
.stat.fogo svg.i{color:#FFB4BC}
.stat.meta{font-weight:700}

/* topo fixo da trilha */
.topo-trilha{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--cz200)}
.topo-trilha .stats .stat{background:var(--b50);color:var(--b700)}
.topo-trilha .stat.fogo{color:var(--rosa-txt);background:var(--rosa)}
.topo-trilha .stat.fogo svg.i{color:var(--rosa-txt)}
.topo-trilha .stat.meta{color:var(--cz600);background:var(--cz100)}
.topo-trilha .marca-peq{display:flex;align-items:center;gap:6px;font-weight:800;font-size:17px;color:var(--b700);white-space:nowrap}
@media (max-width:759px){.topo-trilha .marca-peq span{display:none}}
.topo-trilha .marca-peq svg.i{width:22px;height:22px;color:var(--b500)}

/* ---------- trilha em caminho ---------- */
.trilha{padding-bottom:24px}
.cont{display:flex;align-items:center;gap:14px;margin:12px 16px 0;padding:12px 14px;border-radius:var(--r20);background:var(--b50)}
.cont .cont-txt{flex:1;min-width:0}
.cont small{display:block;font-size:12px;font-weight:700;color:var(--b600)}
.cont b{display:block;font-size:16px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont .btn{width:auto;min-height:44px;padding:0 16px;font-size:15px}
.seletor{display:flex;align-items:center;gap:8px;margin:12px 16px 2px}
.seletor>div{flex:1;text-align:center}
.seletor small{display:block;font-size:12px;font-weight:700;color:var(--cz600)}
.seletor b{font-size:18px;font-weight:800}
.seta{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:2px solid var(--b100);border-radius:var(--r16);color:var(--b600);background:#fff;box-shadow:0 3px 0 var(--b100);transition:transform .15s}
.seta svg.i{width:22px;height:22px}
.seta.off{opacity:.3;pointer-events:none}
.seta:active{transform:translateY(3px);box-shadow:none}
.unidade-cab{margin:16px 16px 8px;padding:14px 16px;border-radius:var(--r20);display:flex;align-items:center;gap:12px;box-shadow:0 6px 0 var(--b800)}
.unidade-cab.trav{background:var(--cz100);color:var(--cz600);box-shadow:0 6px 0 var(--cz200)}
.unidade-cab .u-txt{flex:1;min-width:0}
.unidade-cab small{display:block;font-size:12px;font-weight:700;opacity:.85}
.unidade-cab h2{font-size:19px;color:inherit;margin-top:2px}
.unidade-cab .u-est{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;opacity:.9;margin-top:6px}
.unidade-cab .u-est svg.i{width:14px;height:14px}
.unidade-cab .btn{width:auto;min-height:40px;padding:0 12px;font-size:14px;background:rgba(255,255,255,.14);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.unidade-cab.trav .btn{background:#fff;color:var(--cz600);box-shadow:0 3px 0 var(--cz200)}
.caminho{position:relative;display:flex;flex-direction:column;align-items:center;gap:40px;padding:52px 0 12px}
.no-wrap{position:relative;width:68px;height:68px;transform:translateX(calc(var(--dx,0) * var(--amp,1)))}   /* --amp abre o zigue-zague no computador */
.no{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--grad-no);box-shadow:0 6px 0 var(--b700);text-decoration:none;transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out)}
.no svg.i{width:30px;height:30px}
.no:active{transform:translateY(6px);box-shadow:0 0 0 transparent}
.no.feito{background:linear-gradient(180deg,var(--b300),var(--b500))}
.no.atual{background:var(--grad-no)}
.no.atual::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:4px solid var(--b200);animation:anel 1.8s var(--ease-out) infinite}
@keyframes anel{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.08);opacity:.35}}
.no.trav{background:var(--cz100);color:var(--cz400);box-shadow:0 6px 0 var(--cz300);cursor:default}
.no.trav:active{transform:none;box-shadow:0 6px 0 var(--cz300)}
.no-wrap .no-est{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);display:flex;gap:1px}
.no-wrap .no-est svg.i{width:12px;height:12px;color:var(--b500)}
.no-wrap .rotulo-no{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:8px;white-space:nowrap;font-size:12px;font-weight:700;color:var(--cz600);text-align:center}
.no-wrap.com-est .rotulo-no{margin-top:22px}
.balao-comecar{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);padding:8px 14px;border-radius:var(--r12);background:#fff;border:2px solid var(--b200);color:var(--b600);font-size:13px;font-weight:800;letter-spacing:.06em;white-space:nowrap;box-shadow:var(--sombra);animation:balanca 1.6s ease-in-out infinite}
.balao-comecar::after{content:"";position:absolute;left:50%;bottom:-8px;width:12px;height:12px;background:#fff;border-right:2px solid var(--b200);border-bottom:2px solid var(--b200);transform:translateX(-50%) rotate(45deg)}
@keyframes balanca{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
.caminho .passo-espaco{height:10px}
.em-breve,.vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:36px 20px}
.em-breve b,.vazio b{font-size:19px;font-weight:800}
.em-breve p,.vazio p{max-width:34ch;color:var(--cz600)}
.vazio .btn{max-width:300px;margin-top:8px}

/* convite para o lembrete diário */
.convite{margin:12px 16px 0;padding:14px 16px;border-radius:var(--r20);background:var(--b50);display:flex;flex-direction:column;gap:10px}
.convite b{display:block;font-size:15px}.convite span{display:block;font-size:13px;color:var(--cz600);margin-top:2px}
.convite-botoes{display:flex;gap:8px}.convite-botoes .btn{width:auto;min-height:40px;font-size:14px;padding:0 16px}
.caixa-inicio{margin:12px 16px 0;padding:16px;border-radius:var(--r20);background:var(--b50)}
.caixa-inicio h2{margin:0 0 2px;font-size:21px}.caixa-inicio .sub{margin:0 0 12px;font-size:14px;color:var(--cz600)}
.caixa-inicio .cartoes-escolha{margin-top:0;max-width:none}
/* missões do dia */
.missoes{margin:12px 16px 0;padding:12px 14px;border-radius:var(--r20);background:#fff;box-shadow:var(--sombra)}
.missoes h3{font-size:13px;font-weight:800;color:var(--b600);letter-spacing:.02em;margin-bottom:6px}
.missao{display:flex;align-items:center;gap:10px;padding:5px 0}
.missao .m-ico{width:28px;height:28px;border-radius:50%;background:var(--b50);color:var(--b600);display:grid;place-items:center;flex:none}
.missao .m-ico svg.i{width:15px;height:15px}
.missao.ok .m-ico{background:var(--ok-fundo);color:var(--ok-txt)}
.missao .m-txt{flex:1;min-width:0}.missao b{display:block;font-size:14px}
.missao .barra{height:6px;margin-top:4px;background:var(--cz100)}.missao .barra i::after{display:none}
.missao.ok .barra i{background:var(--ok)}
.missao .m-n{font-size:12px;font-weight:800;color:var(--cz600);flex:none}
.missao-nova>svg.i{color:var(--b500)}
.congela{display:flex;gap:8px;align-items:flex-start;margin-top:12px}.congela svg.i{width:18px;height:18px;flex:none;color:var(--b500);margin-top:2px}

/* ---------- páginas simples ---------- */
.pagina{min-height:100%}
.pagina-corpo{padding:18px 16px}
.topo-simples{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 10px 10px;border-bottom:1px solid var(--cz200);position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:5}
.topo-simples h1{font-size:18px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voltar{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r16);color:var(--b600)}
.voltar svg.i{width:24px;height:24px}
.objetivos{margin:18px 16px 0;padding:16px;border-radius:var(--r20);background:var(--b50)}
.objetivos h2{font-size:15px;color:var(--b700);margin-bottom:8px}
.objetivos ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.objetivos li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
.objetivos li svg.i{width:20px;height:20px;color:var(--b500);margin-top:2px}
.bloco-guia{padding:22px 16px 4px}
.bloco-guia h2{font-size:20px;margin-bottom:8px}
.bloco-guia p{margin-bottom:12px;line-height:1.6;font-size:16px;max-width:65ch}
.exemplos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.exemplos li{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r16);box-shadow:var(--sombra)}
.exemplos b{display:block;font-size:16px}.exemplos span{font-size:14px;color:var(--cz600)}
.exemplos.vocab{grid-template-columns:1fr 1fr}
.exemplos.vocab li{flex-direction:column;align-items:flex-start;gap:6px}
.exemplos.vocab .pron{font-size:12px;color:var(--b600);font-weight:700}
.b-som{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:var(--r12);background:var(--b500);color:#fff;box-shadow:0 3px 0 var(--b600);transition:transform .15s var(--ease-out),box-shadow .15s}
.b-som svg.i{width:20px;height:20px}
.b-som:active{transform:translateY(3px);box-shadow:none}
.b-som.tocando{animation:pulso-som .9s ease-in-out infinite}
@keyframes pulso-som{50%{transform:scale(1.08)}}
.cultura{margin:18px 16px 0;padding:16px;border-radius:var(--r20);background:var(--b700);color:#fff}
.cultura h2{font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#fff}
.cultura h2 svg.i{width:20px;height:20px}
.cultura p{opacity:.92;line-height:1.55}
.rodape-pagina{padding:24px 16px calc(24px + env(safe-area-inset-bottom))}

/* ---------- entrada / onboarding ---------- */
.entrada{min-height:100svh;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom))}
.entrada .ceu{position:absolute;inset:0;width:100%;height:100%;opacity:.14;pointer-events:none}
.entrada .slides{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}
.slide{display:none;flex-direction:column;align-items:center;gap:10px;animation:entra .32s var(--ease-out)}
.slide.on{display:flex}
.slide .ilus{width:250px;height:250px;margin-bottom:0}
.slide h1{font-size:30px;color:#fff;max-width:14ch}
.slide p{font-size:17px;opacity:.9;max-width:30ch}
.marca{display:flex;align-items:center;gap:8px;max-width:62%;font-size:19px;line-height:1.15;font-weight:800;color:#fff}
.marca svg.i{width:28px;height:28px;color:#fff}
.pontos{display:flex;gap:6px;justify-content:center;margin:18px 0}
.pontos i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:width .2s var(--ease-out),background .2s}
.pontos i.on{width:24px;background:#fff}
.entrada-botoes{display:grid;gap:12px;width:100%;max-width:360px;margin:0 auto;position:relative}
@keyframes entra{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.pagina-escolha{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:calc(28px + env(safe-area-inset-top)) 20px 24px;text-align:center}
.pagina-escolha:not(:has(.rodape-pagina)) .cartoes-escolha{margin-top:auto;margin-bottom:auto;padding:22px 0}
.pagina-escolha .rodape-pagina{margin-top:auto;width:100%;max-width:440px}
.pagina-escolha h1{margin:16px 0 8px;font-size:26px}
.pagina-escolha .sub{font-size:15px;max-width:34ch}
.cartoes-escolha{display:grid;gap:12px;width:100%;max-width:440px;margin-top:22px}
.cartao-escolha{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border:2px solid var(--b100);border-radius:var(--r20);background:#fff;box-shadow:0 4px 0 var(--b100);transition:transform .15s var(--ease-out),box-shadow .15s,border-color .15s,background .15s}
.cartao-escolha .ce-ico{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:var(--r16);background:var(--b50);color:var(--b600)}
.cartao-escolha .ce-ico svg.i{width:26px;height:26px}
.cartao-escolha .ce-ico img{width:40px;height:40px}
.cartao-escolha b{display:block;font-size:17px}.cartao-escolha span{display:block;font-size:14px;color:var(--cz600);line-height:1.4;margin-top:2px}
.cartao-escolha:active{transform:translateY(4px);box-shadow:none}
.cartao-escolha.sel{border-color:var(--b500);background:var(--b50);box-shadow:0 4px 0 var(--b300)}
@media (hover:hover) and (pointer:fine){.cartao-escolha:hover{border-color:var(--b300)}}
.selo-nivel{width:110px;height:110px;display:grid;place-items:center;border-radius:var(--r24);font-size:40px;font-weight:900;margin:6px 0;box-shadow:0 8px 0 var(--b800)}
.texto-resultado{max-width:40ch;line-height:1.55;margin-top:14px}
.resultado .rodape-pagina{width:100%;max-width:440px}

.pagina-form{min-height:100svh;display:flex;flex-direction:column}
.form{flex:1;display:flex;flex-direction:column;gap:14px;width:100%;max-width:440px;margin:0 auto;padding:22px 20px 28px}
.form button[type=submit]{margin-top:auto}
.form-intro{text-align:center;color:var(--cz600);line-height:1.45}
.form label{display:grid;gap:6px;font-size:14px;font-weight:700}
.form input{width:100%;min-height:52px;padding:12px 16px;border:2px solid var(--cz200);border-radius:var(--r16);font-size:16px;background:#fff;transition:border-color .15s,box-shadow .15s}
.form input:focus{outline:none;border-color:var(--b500);box-shadow:0 0 0 4px var(--b100)}
.senha{position:relative;display:block}
.senha input{padding-right:52px}
.ver-senha{position:absolute;right:6px;top:6px;width:40px;height:40px;color:var(--cz600);display:flex;align-items:center;justify-content:center;border-radius:var(--r12)}
.ver-senha svg.i{width:22px;height:22px}
.form-erro{padding:12px 14px;border-radius:var(--r16);background:var(--erro-fundo);color:var(--erro-txt);font-weight:700;font-size:14px}
.form-troca{text-align:center;font-size:14px;color:var(--cz600)}
.form-troca a{color:var(--b600);font-weight:800}

/* ---------- lição ---------- */
.licao{min-height:100svh;display:flex;flex-direction:column;max-width:720px;margin:0 auto}
.lic-topo{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px}
.fechar{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--cz400);border-radius:var(--r12)}
.fechar svg.i{width:24px;height:24px}
.barra{position:relative;flex:1;height:16px;background:var(--cz200);border-radius:8px;overflow:hidden}
.barra i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;border-radius:8px;background:linear-gradient(90deg,var(--b400),var(--b500));transition:transform .4s var(--ease-out)}
.barra i::after{content:"";position:absolute;left:8px;right:8px;top:4px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.combo{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;border-radius:999px;background:var(--b50);color:var(--b600);font-size:13px;font-weight:800;white-space:nowrap;animation:entra .25s var(--ease-out)}
.combo svg.i{width:16px;height:16px}
.contador{font-size:13px;font-weight:800;color:var(--cz600);white-space:nowrap}
.exercicio{flex:1;display:flex;flex-direction:column;padding:8px 16px 20px;animation:entra .28s var(--ease-out)}
/* exercício curto fica no meio da tela; os de montar/digitar ficam no alto, com o banco de blocos no pé */
.exercicio:not(:where(.ex-order,.ex-order_pt,.ex-translate,.ex-conversa,.ex-reorder_dialogue,.ex-type,.ex-fill_free))>:first-child{margin-top:auto}
.exercicio:not(:where(.ex-order,.ex-order_pt,.ex-translate,.ex-conversa,.ex-reorder_dialogue,.ex-type,.ex-fill_free))>:last-child{margin-bottom:auto}
.banco,.dialogo-banco{margin-top:auto}
.exercicio.travado .op:not(.certa):not(.errada),.exercicio.travado .par:not(.feito){opacity:.5}
.lic-rodape{padding:14px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--cz200);background:#fff;position:sticky;bottom:0;z-index:4}
.lic-rodape.dois{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}
.lic-rodape .atalhos{display:none}
.rotulo{margin:6px 0 8px;font-size:13px;font-weight:800;color:var(--b600)}
.enunciado{font-size:22px;font-weight:800;line-height:1.3;margin-bottom:10px}
.enunciado-bloco{margin-bottom:18px}
.palavra{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline dotted var(--b300);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer;border-radius:4px}
.palavra:hover{text-decoration-color:var(--b500)}
.dica-palavra{position:absolute;z-index:60;max-width:240px;padding:10px 12px;border-radius:var(--r12);background:var(--b900);color:#fff;font-size:15px;box-shadow:0 10px 24px rgba(14,27,69,.3);transform-origin:top center;animation:popover .16s var(--ease-out)}
.dica-palavra b{display:block;font-weight:800}.dica-palavra small{display:block;opacity:.75;font-size:13px}
@keyframes popover{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}}
.ouvir{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.b-ouvir,.b-devagar{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r12);font-size:14px;font-weight:800;transition:transform .15s var(--ease-out),box-shadow .15s}
.b-ouvir{background:var(--b500);color:#fff;box-shadow:0 3px 0 var(--b600)}
.b-devagar{background:var(--b50);color:var(--b700);box-shadow:0 3px 0 var(--b100)}
.b-ouvir svg.i,.b-devagar svg.i{width:18px;height:18px}
.b-ouvir:active,.b-devagar:active{transform:translateY(3px);box-shadow:none}
.ouvir-grande{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0 26px}
.alto-falante{width:104px;height:104px;border-radius:var(--r24);display:grid;place-items:center;background:var(--b500);color:#fff;box-shadow:0 6px 0 var(--b600);transition:transform .15s var(--ease-out),box-shadow .15s}
.alto-falante svg.i{width:48px;height:48px}
.alto-falante:active{transform:translateY(6px);box-shadow:none}
.alto-falante.tocando svg.i{animation:pulso-som .9s ease-in-out infinite}
.tartaruga{width:64px;height:64px;border-radius:var(--r16);background:var(--b50);color:var(--b700);display:grid;place-items:center;box-shadow:0 4px 0 var(--b100);transition:transform .15s var(--ease-out),box-shadow .15s}
.tartaruga svg.i{width:30px;height:30px}
.tartaruga:active{transform:translateY(4px);box-shadow:none}
.opcoes{display:grid;gap:10px}
.op{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;text-align:left;border:2px solid var(--b100);border-radius:var(--r16);background:#fff;font-size:16px;font-weight:700;line-height:1.3;box-shadow:0 4px 0 var(--b100);transition:transform .12s var(--ease-out),box-shadow .12s,background .15s,border-color .15s,color .15s}
.op:active{transform:translateY(4px);box-shadow:none}
.op.sel{border-color:var(--b500);background:var(--b50);color:var(--b700);box-shadow:0 4px 0 var(--b300)}
.op.certa{border-color:var(--ok);background:var(--ok-fundo);color:var(--ok-txt);box-shadow:0 4px 0 var(--ok)}
.op.errada{border-color:var(--erro);background:var(--erro-fundo);color:var(--erro-txt);box-shadow:0 4px 0 var(--erro);animation:treme .35s}
@media (hover:hover) and (pointer:fine){.op:not(:disabled):hover{border-color:var(--b300)}}
kbd{display:none}
.grade-fig{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.op-fig{flex-direction:column;justify-content:center;text-align:center;padding:14px 8px;min-height:160px;gap:8px}
.op-fig img{width:92px;height:92px}
.op-fig span{font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.op-chip{width:auto;min-height:48px;padding:10px 16px}
.frase-lacuna{line-height:1.7}
.lacuna{display:inline-block;min-width:96px;padding:0 8px;border-bottom:3px solid var(--b400);color:var(--b700);text-align:center;transition:background .15s;border-radius:6px 6px 0 0}
.lacuna.cheia{background:var(--b50)}
.dica-pt{color:var(--cz600);font-size:15px;margin-top:4px}
.cartao-palavra{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 18px 22px;width:100%;border-radius:var(--r24);box-shadow:var(--sombra-alta);margin-top:6px;background:#fff}
.cartao-palavra img{width:132px;height:132px;filter:drop-shadow(0 10px 12px rgba(14,27,69,.16))}
.pal-txt{display:flex;flex-direction:column;align-items:center;gap:6px}
.pal-en{font-size:34px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.pal-en.frase{font-size:24px;line-height:1.35;letter-spacing:-.01em}
.pal-pron{font-size:14px;font-weight:700;color:var(--b600)}
.pal-pt{font-size:18px;color:var(--cz600);margin-top:6px}
.cartao-palavra .ouvir{justify-content:center}
.repetir .nota{font-size:14px;color:var(--cz600);max-width:34ch;margin-top:12px;line-height:1.45}
.pares{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.pares .col{display:grid;gap:10px}
.par{min-height:60px;padding:10px;border:2px solid var(--b100);border-radius:var(--r16);background:#fff;font-weight:700;font-size:16px;box-shadow:0 4px 0 var(--b100);transition:transform .12s var(--ease-out),box-shadow .12s,background .15s,border-color .15s,opacity .2s}
.par:active{transform:translateY(4px);box-shadow:none}
.par.sel{border-color:var(--b500);background:var(--b50);color:var(--b700);box-shadow:0 4px 0 var(--b300)}
.par.feito{border-color:var(--ok);background:var(--ok-fundo);color:var(--ok-txt);box-shadow:none;opacity:.55;transform:scale(.98)}
.par.errada{border-color:var(--erro);background:var(--erro-fundo);animation:treme .35s}
@keyframes treme{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.resposta-blocos{position:relative;min-height:124px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding:8px 0;margin:12px 0 20px;background:repeating-linear-gradient(180deg,transparent 0 54px,var(--cz200) 54px 56px);background-position:0 2px}
.banco{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bloco{min-height:44px;padding:9px 14px;border:2px solid var(--b100);border-radius:var(--r12);background:#fff;font-size:17px;font-weight:600;box-shadow:0 3px 0 var(--b200);touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .12s var(--ease-out),box-shadow .12s,background .15s,color .15s}
.bloco:active{transform:translateY(3px);box-shadow:none}
.banco .bloco.usado{background:var(--cz100);border-color:var(--cz100);color:transparent;box-shadow:none;pointer-events:none}
.bloco.pousa{animation:pousa .22s var(--ease-out)}
@keyframes pousa{from{transform:translateY(10px) scale(.96);opacity:.6}to{transform:none;opacity:1}}
.bloco.arrastando{z-index:10;position:relative;box-shadow:0 10px 22px rgba(14,27,69,.24);opacity:.95}
.limpar{display:block;margin:16px auto 0;padding:8px 14px;color:var(--cz600);font-weight:800;font-size:14px;border-radius:var(--r12)}
.campo{width:100%;padding:14px 16px;border:2px solid var(--cz200);border-radius:var(--r16);background:var(--cz50);font-size:17px;resize:none;margin-top:12px;transition:border-color .15s,box-shadow .15s}
.campo:focus{outline:none;border-color:var(--b500);background:#fff;box-shadow:0 0 0 4px var(--b100)}
.campo-palavra{font-size:22px;font-weight:700;text-align:center;letter-spacing:.02em}
.frase-errada{margin:6px 0 0;padding:14px;border-radius:var(--r16);background:var(--rosa);color:var(--rosa-txt);font-weight:700;font-size:17px}
.conversa{display:flex;gap:10px;align-items:flex-end;margin:4px 0 18px}
.conversa .avatar{margin-bottom:4px}
.balao-fala{position:relative;flex:1;min-width:0;padding:12px 14px;border-radius:var(--r20);border-bottom-left-radius:6px;background:#fff;box-shadow:var(--sombra)}
.balao-fala .quem{display:block;font-size:12px;font-weight:800;color:var(--cz600);margin-bottom:2px}
.fala-en{font-size:18px;font-weight:700;line-height:1.4}
.b-pt{position:absolute;right:10px;top:10px;padding:4px 8px;border:1px solid var(--cz200);border-radius:8px;background:#fff;font-size:11px;font-weight:800;color:var(--cz600)}
.trad{margin-top:8px;color:var(--cz600);font-size:14px}
.dialogo-resp{margin:8px 0 14px;padding-left:22px;min-height:60px;display:grid;gap:8px}
.dialogo-resp li::marker{color:var(--b500);font-weight:800}
.dialogo-banco{display:grid;gap:8px}
.fala-cartao{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:2px solid var(--b100);border-radius:var(--r16);background:#fff;box-shadow:0 3px 0 var(--b100);font-size:15px;font-weight:600;transition:transform .12s var(--ease-out),box-shadow .12s}
.fala-cartao .avatar{width:32px;height:32px}
.fala-cartao:active{transform:translateY(3px);box-shadow:none}
.dialogo-resp .fala-cartao{border-color:var(--b400);background:var(--b50)}
.vf{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.vf .op{justify-content:center;min-height:64px;font-size:18px}
.vf .op svg.i{width:24px;height:24px}
.afirmacao{margin-top:18px;padding:16px;border-radius:var(--r20);background:var(--b50);font-size:18px;font-weight:700;line-height:1.4;text-align:center}
.mini-dialogo{display:grid;gap:10px;margin:8px 0 18px}
.mini-dialogo .conversa{margin:0}
.mini-dialogo .falta .balao-fala{border:2px dashed var(--b300);background:var(--b50);color:var(--b600);font-weight:800;text-align:center}
.mini-dialogo .direita{flex-direction:row-reverse}
.mini-dialogo .direita .balao-fala{border-bottom-left-radius:var(--r20);border-bottom-right-radius:6px}

/* peças de conversa e "Relembrando" */
.lacuna-peca{background:var(--b50);color:var(--b700);padding:0 6px;border-radius:8px;border-bottom:3px solid var(--b400)}
.cartao-palavra.peca .pal-en{font-size:26px;line-height:1.35;letter-spacing:-.01em}
.cartao-palavra.peca .trocas{display:grid;gap:8px;width:100%;margin-top:8px}
.troca-ex,.modelo{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:var(--r16);background:var(--b50);font:inherit;transition:transform .12s var(--ease-out)}
.troca-ex:active,.modelo:active{transform:scale(.98)}
.troca-ex svg.i,.modelo svg.i{width:20px;height:20px;color:var(--b600);flex:none}
.troca-ex b,.modelo b{display:block;font-size:16px;font-weight:700}.troca-ex small,.modelo small{display:block;font-size:13px;color:var(--cz600)}
.modelo{margin-bottom:12px;background:#fff;box-shadow:var(--sombra)}
.enunciado em{font-style:normal;color:var(--b600)}
.revisita{display:inline-flex;align-items:center;gap:6px;margin:4px 0 6px;padding:4px 10px;border-radius:999px;background:var(--rosa);color:var(--rosa-txt);font-size:12px;font-weight:800}
.revisita svg.i{width:14px;height:14px}
/* gramática: pedido, tabela de substituição; ouvido: pares, karaokê, gravar */
.pedido{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--rosa);color:var(--rosa-txt);font-size:13px;font-weight:800;letter-spacing:.04em;vertical-align:middle;margin:0 8px 4px 0}
.tabela{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin-top:14px}
.tab-col{display:grid;gap:8px;align-content:start}
.tab-chip{min-height:48px;padding:8px 8px;border:2px solid var(--b100);border-radius:var(--r12);background:#fff;font-weight:700;font-size:15px;box-shadow:0 3px 0 var(--b100);transition:transform .12s var(--ease-out),box-shadow .12s,background .15s,border-color .15s}
.tab-chip:active{transform:translateY(3px);box-shadow:none}
.tab-chip.sel{border-color:var(--b500);background:var(--b50);color:var(--b700);box-shadow:0 3px 0 var(--b300)}
.tab-chip.certa{border-color:var(--ok);background:var(--ok-fundo);color:var(--ok-txt);box-shadow:0 3px 0 var(--ok)}
.tab-chip.errada{border-color:var(--erro);background:var(--erro-fundo);color:var(--erro-txt);box-shadow:0 3px 0 var(--erro)}
.tab-frase{margin-top:14px;min-height:28px;text-align:center;font-size:18px;font-weight:700;color:var(--b700)}
.pares-op .op{min-height:64px}.pares-op .op b{display:block;font-size:18px}.pares-op .op small{display:block;color:var(--cz600);font-weight:600;font-size:13px}
.karaoke .kw{display:inline-block;border-radius:6px;padding:0 3px;transition:color .12s,background .12s}
.karaoke .kw.on{background:var(--b500);color:#fff}
.gravar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.gravar .btn{width:auto;min-height:40px;font-size:14px;padding:0 14px}
.gravar .rec.on{background:var(--erro);color:#fff;box-shadow:0 3px 0 var(--erro2);animation:pulso-som .9s ease-in-out infinite}
.autoaval{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:14px;color:var(--cz600)}
.autoaval .chip{cursor:pointer;border:2px solid transparent}.autoaval .chip.sel{border-color:var(--b500)}
.dica-cartao.foco h2{font-size:20px}
/* uso real: documento, números, mapa, missão */
.doc{margin:4px auto 0;max-width:420px;width:100%;padding:16px 18px;border-radius:12px;background:#fff;box-shadow:var(--sombra-alta);font-size:15px;color:var(--cz800)}
.doc-cab{font-weight:800;font-size:17px;color:var(--b900);margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--cz200)}
.doc-l{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--cz200)}.doc-l:last-child{border-bottom:0}
.doc-l b{white-space:nowrap;color:var(--b900)}
.doc-rod{margin-top:10px;font-size:13px;color:var(--cz600);text-align:center}
.doc-cardapio{background:#FFFDF7;border:1px solid #EFE6C8}.doc-cardapio .doc-cab{text-align:center;letter-spacing:.04em;text-transform:uppercase}
.doc-placa{background:var(--b700);color:#fff;text-align:center;border-radius:16px;border:6px solid #fff;outline:2px solid var(--b700)}.doc-placa .doc-cab{color:#fff;border-color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.06em}.doc-placa .doc-l{justify-content:center;border:0;font-weight:700;font-size:17px}.doc-placa .doc-l b{color:#fff}.doc-placa .doc-rod{color:rgba(255,255,255,.8)}
.doc-mensagem{background:#E7F6EC;border-radius:18px 18px 18px 6px}.doc-mensagem .doc-cab{font-size:13px;color:var(--cz600);border:0;margin-bottom:4px}.doc-mensagem .doc-l{border:0;padding:3px 0;justify-content:flex-start}
.doc-etiqueta{border:2px solid var(--cz300);border-radius:6px;font-family:ui-monospace,monospace;font-size:14px}
.doc-formulario .doc-l{border-bottom:1px solid var(--cz800);padding:8px 0}.doc-formulario .doc-l span{color:var(--cz600);font-size:13px}
.doc-passagem{border:2px dashed var(--b300);background:var(--b50)}.doc-passagem .doc-cab{text-transform:uppercase;letter-spacing:.06em}
.doc-recibo{font-family:ui-monospace,monospace;font-size:14px;background:#FCFCF8}.doc-recibo .doc-cab{text-align:center}
.doc-horario .doc-l{border-bottom:1px solid var(--cz200)}
.doc-anuncio .doc-cab{font-size:20px}.doc-anuncio{background:linear-gradient(180deg,#fff,var(--b50))}
.doc-cartao{background:var(--b900);color:#fff;border-radius:14px}.doc-cartao .doc-cab{color:#fff;border-color:rgba(255,255,255,.25)}.doc-cartao .doc-l{border:0;padding:3px 0}.doc-cartao .doc-l b{color:#fff}
.numeros-op .op .num{font-size:24px;font-weight:800;letter-spacing:.02em}
.mapa{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px;margin-top:14px;padding:10px;border-radius:var(--r20);background:var(--cz100)}
.mapa>*{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;text-align:center;font-size:12px;font-weight:700;line-height:1.15}
.mapa-rua{background:repeating-linear-gradient(0deg,var(--cz200) 0 2px,transparent 2px 10px);opacity:.6}
.mapa-lugar{background:#fff;border:2px solid var(--b100);color:var(--b900);padding:4px;box-shadow:0 3px 0 var(--b100);transition:transform .12s var(--ease-out),box-shadow .12s}
.mapa-lugar:active{transform:translateY(3px);box-shadow:none}
.mapa-lugar.sel{border-color:var(--b500);background:var(--b50);color:var(--b700)}
.mapa-lugar.certa{border-color:var(--ok);background:var(--ok-fundo);color:var(--ok-txt)}.mapa-lugar.errada{border-color:var(--erro);background:var(--erro-fundo);color:var(--erro-txt)}
.mapa-voce{background:var(--b500);color:#fff;gap:0}.mapa-voce svg.i{width:22px;height:22px}.mapa-voce small{font-size:10px}
.mis-tela .objetivo{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:var(--r16);background:var(--b50);color:var(--b700);font-weight:700}
.mis-tela .objetivo svg.i{width:20px;height:20px;flex:none}
.mis-tela .fala.errada .balao-fala{border:2px solid var(--erro);background:var(--erro-fundo)}
.mis-tela .fala.quase .balao-fala{border:2px solid #F59E0B;background:#FFF8E6}
.dica-missao{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--r16);font-size:14px;line-height:1.4;animation:entra .26s var(--ease-out)}
.dica-missao svg.i{width:18px;height:18px;flex:none;margin-top:2px}
.dica-missao.quase{background:#FFF8E6;color:#92400E}.dica-missao.nao{background:var(--erro-fundo);color:var(--erro-txt)}
.escolhas{margin-top:14px}.escolhas .op b{display:block;font-size:16px}.escolhas .op small{display:block;color:var(--cz600);font-weight:600;font-size:13px}
.mis-tela.chat .hist-corpo{background:#EFF2F7;border-radius:var(--r24);padding:12px 12px 18px;margin:8px 16px 0}
.chat-cab{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;border-bottom:1px solid var(--cz200);margin-bottom:12px}
.chat-cab .avatar{width:40px;height:40px}.chat-cab b{display:block;font-size:15px}.chat-cab span{font-size:12px;color:var(--ok-txt)}
.mis-tela.chat .fala .balao-fala{border-radius:16px 16px 16px 4px;background:#fff}
.mis-tela.chat .fala.direita .balao-fala{background:#D9FDD3;border-radius:16px 16px 4px 16px}
.mis-tela.chat .fala .quem{display:none}
/* fase 4: modo difícil, habilidades, caderno de erros, prova e certificado */
.chip-dificil{font-size:11px;font-weight:800;letter-spacing:.02em;padding:4px 9px;border-radius:999px;background:var(--rosa);color:var(--rosa-txt);white-space:nowrap;margin-left:8px}
.hab{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hab li{display:grid;grid-template-columns:104px 1fr 52px;align-items:center;gap:10px;font-weight:700;font-size:14px}
.hab .barra{height:10px;border-radius:999px;background:var(--cz100);overflow:hidden}.hab .barra i{display:block;height:100%;background:var(--b500);border-radius:999px;transform-origin:left;transition:transform .5s var(--ease-out)}
.hab .barra i::after{display:none}.hab b{text-align:right;color:var(--b700)}.hab li.fraca b{color:var(--erro-txt)}.hab li.fraca .barra i{background:var(--erro)}
.dica-hab{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:var(--r16);background:var(--b50);color:var(--b900);font-size:14px;line-height:1.45;margin-top:12px}
.dica-hab svg.i{width:20px;height:20px;flex:none;color:var(--b600);margin-top:1px}.dica-hab a{font-weight:800;color:var(--b600)}
.cont.prova{margin:14px 16px 0}.cont.prova.trav{background:var(--cz100);color:var(--cz600)}.cont.prova.trav small{color:var(--cz600)}.cont.prova.trav>svg.i{width:22px;height:22px;flex:none}
.cont.prova.feita{background:var(--ok-fundo)}.cont.prova.feita small{color:var(--ok-txt)}
.cartao-revisar.caderno{margin-top:14px}.cartao-revisar.caderno .num{color:var(--erro-txt)}
.certificado{display:grid;gap:16px}.certificado img{width:100%;border-radius:var(--r16);box-shadow:var(--sombra-alta);background:var(--cz100);aspect-ratio:1600/1131}
/* ---- visual americano (22/10/2026): vermelho nos detalhes, pedaço da bandeira (nunca inteira), skyline e Lady Liberty ---- */
:root{--vermelho:#E3263A;--vermelho2:#B3142A}
.btn-vermelho,.cont .btn-p,.card-p.prox .btn-p{background:var(--vermelho);box-shadow:0 4px 0 var(--vermelho2)}
#menu .logo svg.i,.topo-trilha .marca-peq svg.i{color:var(--vermelho)}
.cab.g,.fim-cab,.entrada,.unidade-cab.g,.cab-c.g{isolation:isolate}
.cab-c.g{position:relative;overflow:hidden}
.cab.g .cantao{display:none}
.cab.g::before,.fim-cab::before,.entrada::before,.unidade-cab.g::before,.cab-c.g::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(img/deco/skyline.svg) center bottom/auto 58px repeat-x}
.unidade-cab.g::before{background-size:auto 40px;background-position:right -20px bottom}
.cab-c.g::before{background-size:auto 76px}
.fim-cab::before{background:url(img/deco/liberty.svg) right 14px bottom -24px/auto 170px no-repeat,url(img/deco/skyline.svg) center bottom/auto 64px repeat-x}
.entrada::before{background:url(img/deco/liberty.svg) right -34px bottom 70px/auto 46svh no-repeat,url(img/deco/skyline.svg) center bottom/auto 96px repeat-x}
.cab.g::after,.fim-cab::after,.entrada::after,.cab-c.g::after{content:'';position:absolute;right:-22px;top:-18px;z-index:-1;width:240px;height:160px;pointer-events:none;background:url(img/deco/bandeira.svg) right top/240px auto no-repeat;transform:rotate(-8deg);transform-origin:right top;-webkit-mask-image:linear-gradient(105deg,transparent 22%,#000 62%);mask-image:linear-gradient(105deg,transparent 22%,#000 62%)}
.cab.g::after{width:210px;height:140px;background-size:210px auto;right:-40px;top:-30px;-webkit-mask-image:linear-gradient(110deg,transparent 30%,#000 66%);mask-image:linear-gradient(110deg,transparent 30%,#000 66%)}
.entrada::after{width:320px;height:210px;background-size:320px auto;right:-34px;top:-22px}
.cab-c.g::after{width:300px;height:200px;background-size:300px auto;right:-26px;top:-20px}
.cab-c.g .cab-acoes{align-self:flex-end}.cab-c.g .btn{background:#fff;color:var(--b700);box-shadow:0 3px 0 rgba(0,0,0,.22)}.cab-c.g .btn-rosa{background:var(--rosa);color:var(--rosa-txt)}
.cont{position:relative;overflow:hidden;isolation:isolate}
.cont::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--b900);-webkit-mask:url(img/deco/skyline.svg) right -10px bottom/auto 44px repeat-x;mask:url(img/deco/skyline.svg) right -10px bottom/auto 44px repeat-x;opacity:.5}
/* certificados de nível (Perfil) e verificação pública */
.certs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.certs li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r16);box-shadow:var(--sombra);background:#fff}
.certs .ic{width:40px;height:40px;border-radius:12px;background:var(--cz100);color:var(--cz400);display:grid;place-items:center;flex:none}.certs .ic svg.i{width:22px;height:22px}
.certs li.pronto .ic{background:var(--b50);color:var(--b600)}
.certs li>div{flex:1;min-width:0}.certs b{display:block;font-size:15px}.certs small{display:block;color:var(--cz600);font-size:13px;margin-top:2px}
.certs .btn{width:auto;min-height:40px;padding:0 14px;font-size:14px}
.cert-cod{display:flex;gap:8px;align-items:flex-start;line-height:1.45}.cert-cod svg.i{width:20px;height:20px;flex:none;color:var(--b600)}.cert-cod a{font-weight:700;color:var(--b600)}
.verif-form{display:grid;gap:10px}.verif-form .campo{text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.verif-ok,.verif-nao{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:16px;border-radius:var(--r16);font-size:14px;line-height:1.5}
.verif-ok{background:var(--ok-fundo);color:var(--ok-txt)}.verif-nao{background:var(--erro-fundo);color:var(--erro-txt)}
.verif-ok svg.i,.verif-nao svg.i{width:28px;height:28px;flex:none}.verif-ok b,.verif-nao b{display:block;font-size:17px;margin-bottom:4px}.verif-ok span,.verif-nao span{display:block}
/* leitura e podcast */
.texto{font-size:19px;line-height:1.8;margin:14px 0 18px}
.frase-lida{border-radius:6px;transition:background .15s}.frase-lida.tocando{background:var(--b50)}
.frase-pt{color:var(--cz600);font-size:15px}
.escuta{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:26px 0 10px}
.escuta .avatares{display:flex;gap:12px}
.escuta .avatar{width:64px;height:64px;transition:box-shadow .2s,transform .2s}
.escuta .av.tocando .avatar{box-shadow:0 0 0 4px var(--b300);transform:scale(1.06)}
.escuta p{color:var(--cz600);max-width:34ch;line-height:1.5}
.escuta .btn{max-width:360px}

/* cartão de dica (entre exercícios) */
.dica-cartao{display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-radius:var(--r24);background:var(--b50);margin-top:8px}
.dica-cartao .d-ico{width:52px;height:52px;border-radius:var(--r16);display:grid;place-items:center;background:#fff;color:var(--b600);box-shadow:var(--sombra)}
.dica-cartao .d-ico svg.i{width:28px;height:28px}
.dica-cartao .d-tipo{font-size:12px;font-weight:800;color:var(--b600);letter-spacing:.02em}
.dica-cartao h2{font-size:22px}
.dica-cartao p{font-size:16px;line-height:1.55}
.dica-cartao .exemplo{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r16);background:#fff;box-shadow:var(--sombra)}
.dica-cartao .exemplo b{display:block;font-size:16px}.dica-cartao .exemplo span{font-size:14px;color:var(--cz600)}

/* painel de resposta */
.painel{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border-radius:var(--r24) var(--r24) 0 0;animation:sobe .22s var(--ease-out)}
.painel.ok{background:var(--ok-fundo);color:var(--ok-txt)}
.painel.erro{background:var(--erro-fundo);color:var(--erro-txt)}
.painel .p-linha{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;letter-spacing:-.01em}
.painel .p-linha i{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.painel .p-linha svg.i{width:22px;height:22px}
.painel .p-acoes{display:flex;gap:8px;margin-left:auto}
.painel .p-acoes button{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;color:inherit}
.painel .p-acoes svg.i{width:20px;height:20px}
.painel p{margin-top:8px;font-size:15px;line-height:1.45}
.p-certa{font-weight:800;font-size:17px!important}
.p-certa span{display:block;font-weight:600;font-size:13px;opacity:.85}
.p-diff ins{text-decoration:none;background:rgba(255,255,255,.7);padding:0 4px;border-radius:4px}
.p-diff del{opacity:.6}
.p-volta{opacity:.85;font-size:13px!important}
.painel .btn{margin-top:16px}
@keyframes sobe{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* fim de lição */
.fim{min-height:100svh;display:flex;flex-direction:column;max-width:720px;margin:0 auto;position:relative}
.fim canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.fim-cab{position:relative;overflow:hidden;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:calc(24px + env(safe-area-inset-top)) 16px 24px;border-radius:0 0 var(--r24) var(--r24)}
.fim-cab .ceu{position:absolute;inset:0;width:100%;height:100%;opacity:.14}
.fim-cab h2{font-size:28px;color:#fff;position:relative;margin-top:12px}
.tres{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:-30px 0 6px;position:relative;z-index:3}
.tres svg.i{width:60px;height:60px;color:var(--cz200);filter:drop-shadow(0 4px 0 rgba(14,27,69,.08))}
.tres svg.i.on{color:var(--b500);filter:drop-shadow(0 4px 0 var(--b700))}
.tres svg.d1{width:76px;height:76px;margin-bottom:8px}
.pop{animation:pop .6s var(--ease-spring) both}
.pop.d1{animation-delay:.18s}.pop.d2{animation-delay:.36s}
@keyframes pop{0%{transform:scale(.3) rotate(-25deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px 16px 0}
.numeros div{padding:12px 6px;border-radius:var(--r16);text-align:center;box-shadow:var(--sombra)}
.numeros small{display:block;font-size:11px;font-weight:800;color:var(--cz600);letter-spacing:.04em}
.numeros b{display:block;font-size:24px;font-weight:800;color:var(--b600);margin-top:2px}
.pagina-corpo .numeros{padding:0 0 8px}
.medalha-nova{display:flex;align-items:center;gap:12px;margin:14px 16px 0;padding:14px;border-radius:var(--r20);background:var(--b50)}
.medalha-nova>svg.i{width:38px;height:38px;color:var(--b500);flex:none}
.medalha-nova small{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--b600)}
.medalha-nova b{display:block;font-size:16px}.medalha-nova span{font-size:13px;color:var(--cz600)}
.fim-mascote{display:flex;justify-content:center;padding:14px 0 0}   /* a mascote fica na parte branca, onde foi desenhada */
.fim-mascote .m-grande{width:200px;height:200px}
.fim-meta{text-align:center;color:var(--cz600);font-weight:600;font-size:15px;margin:16px 24px 0}
.fim-botao{margin-top:auto;padding:22px 16px calc(22px + env(safe-area-inset-bottom));display:grid;gap:10px}

/* história / conversa */
.hist-corpo{flex:1;padding:4px 16px 24px}
.hist-corpo h1{font-size:24px;margin-bottom:4px}
.contexto{color:var(--cz600);line-height:1.45;font-size:15px;margin-bottom:16px}
.falas{display:grid;gap:14px}
.fala{display:flex;gap:10px;align-items:flex-end;max-width:92%;animation:entra .26s var(--ease-out)}
.fala.direita{justify-self:end;flex-direction:row-reverse}
.fala .balao-fala{padding:10px 12px}
.fala.direita .balao-fala{background:var(--b50);border-bottom-left-radius:var(--r20);border-bottom-right-radius:6px}
.fala .fala-en{font-size:17px}
.fala-acoes{display:flex;gap:6px;margin-top:8px}
.fala-acoes .b-som{width:34px;height:34px}.fala-acoes .b-pt{position:static}
.fala.tocando .balao-fala{box-shadow:0 0 0 3px var(--b300),var(--sombra)}
.digitando{display:inline-flex;gap:4px;padding:6px 2px}
.digitando i{width:7px;height:7px;border-radius:50%;background:var(--cz300);animation:digita 1s infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes digita{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.pergunta-hist{padding:16px;border-radius:var(--r20);background:#fff;box-shadow:var(--sombra-alta);animation:entra .26s var(--ease-out)}
.pergunta-hist>b{display:block;margin-bottom:12px;font-size:17px}
.pergunta-hist .explica{margin-top:12px;font-size:14px;color:var(--b700);line-height:1.45}
.ouvir-tudo{margin-top:8px}
.conversa-vez{padding:14px;border-radius:var(--r20);background:var(--b50);margin:4px 0 10px}
.conversa-vez .rotulo{margin:0 0 4px}

/* revisar, liga, perfil */
.cartao-revisar{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 18px;border-radius:var(--r24);box-shadow:var(--sombra-alta);text-align:center}
.cartao-revisar .num{font-size:52px;font-weight:900;color:var(--b600);line-height:1;letter-spacing:-.03em}
.cartao-revisar .btn{margin-top:16px}
.lista-fracas{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.lista-fracas li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r16);box-shadow:var(--sombra);font-weight:700}
.lista-fracas li span{color:var(--cz600);font-weight:500;font-size:14px;margin-left:auto}
.carregando{text-align:center;color:var(--cz600);padding:24px}
.esqueleto{height:56px;border-radius:var(--r16);background:linear-gradient(90deg,var(--cz100) 25%,var(--cz50) 50%,var(--cz100) 75%);background-size:200% 100%;animation:brilha 1.2s linear infinite;margin-bottom:8px}
@keyframes brilha{to{background-position:-200% 0}}
.liga-cab{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.liga-cab div{padding:12px;border-radius:var(--r16);text-align:center;box-shadow:var(--sombra)}
.liga-cab small{display:block;font-size:11px;font-weight:800;color:var(--cz600);letter-spacing:.04em}
.liga-cab b{font-size:20px;color:var(--b600)}
.podio{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:8px;margin:8px 0 16px}
.podio div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:var(--r20) var(--r20) 8px 8px;background:var(--b50);text-align:center}
.podio div:nth-child(2){background:var(--b100);padding-top:18px}
.podio .inicial{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--grad-no);font-size:18px}
.podio b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podio span{font-size:13px;font-weight:800;color:var(--b600)}
.ranking{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ranking li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r16);box-shadow:var(--sombra);border-left:4px solid transparent}
.ranking li.sobe{border-left-color:var(--b400)}.ranking li.desce{border-left-color:var(--rosa2)}
.ranking li.eu{background:var(--b50);font-weight:800}
.ranking .pos{width:24px;font-weight:800;color:var(--cz600)}
.ranking .inicial{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--b700);background:var(--b100);font-size:14px}
.ranking .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking .est{display:flex;align-items:center;gap:4px;font-weight:800;color:var(--b600)}
.ranking .est svg.i{width:16px;height:16px;color:var(--b500)}
.titulo-secao{margin:24px 0 10px;font-size:17px}
.titulo-secao small{font-weight:600;color:var(--cz600);font-size:13px;margin-left:6px}
.segmentos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.seg{min-height:48px;border:2px solid var(--b100);border-radius:var(--r16);background:#fff;font-weight:800;box-shadow:0 3px 0 var(--b100);transition:transform .12s var(--ease-out),box-shadow .12s}
.seg:active{transform:translateY(3px);box-shadow:none}
.seg.sel{border-color:var(--b500);background:var(--b50);color:var(--b700);box-shadow:0 3px 0 var(--b300)}
.ajustes{display:grid;gap:8px}
.ajuste{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r16);box-shadow:var(--sombra)}
.ajuste svg.i{width:24px;height:24px;color:var(--b600)}
.ajuste b{flex:1;font-size:15px}
.chave{width:52px;height:30px;border-radius:999px;background:var(--cz300);position:relative;transition:background .2s;flex:none}
.chave::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s var(--ease-out)}
.chave[aria-checked=true]{background:var(--b500)}
.chave[aria-checked=true]::after{transform:translateX(22px)}
.medalhas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.medalhas li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 8px;border-radius:var(--r20);box-shadow:var(--sombra);color:var(--cz400)}
.medalhas li b{font-size:13px;color:var(--cz600)}.medalhas li small{font-size:11px;line-height:1.3}
.medalhas li.tem{color:var(--b600)}.medalhas li.tem b{color:var(--b900)}
.med{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--cz100);color:var(--cz300)}
.med svg.i{width:26px;height:26px}
.med.g{background:var(--grad-no);color:#fff;box-shadow:0 4px 0 var(--b700)}
.acoes-perfil{display:grid;gap:10px;margin-top:24px}
.perfil-topo{display:flex;align-items:center;gap:14px}
.perfil-topo .inicial{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:800;background:rgba(255,255,255,.18);color:#fff}

/* folha (diálogo) e aviso */
#sheet-root{position:fixed;inset:0;z-index:80;background:rgba(14,27,69,.5);display:flex;align-items:flex-end;justify-content:center;animation:fade .15s}
#sheet{width:100%;max-width:560px;background:#fff;border-radius:var(--r24) var(--r24) 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));animation:sobe .22s var(--ease-out)}
#sheet h3{font-size:20px;margin-bottom:6px}#sheet p{margin-bottom:18px;color:var(--cz600);line-height:1.45}
.folha-botoes{display:grid;gap:10px}
@keyframes fade{from{opacity:0}}
#toast{position:fixed;left:50%;bottom:calc(var(--menu) + 16px + env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:90;max-width:calc(100% - 32px);padding:12px 16px;border-radius:var(--r16);background:var(--b900);color:#fff;font-size:14px;font-weight:600;transition:opacity .2s,transform .2s var(--ease-out)}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- computador: barra no alto, curso com sumário, lição em duas colunas ---------- */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;flex:none;border:1px solid var(--cz200);border-bottom-width:2px;border-radius:6px;font:700 11px var(--f);color:var(--cz600);background:#fff}
  .op-fig kbd{position:absolute;top:8px;left:8px}
  body{background:#fff url(img/fundo/ondas.svg) 0 0/780px auto}
  #app{display:block;min-height:100vh}
  #screen{padding:24px 28px 48px;background:none;max-width:1440px;margin:0 auto}
  /* menu vira barra fixa no alto */
  #menu{position:sticky;top:0;bottom:auto;z-index:20;height:64px;padding:0 28px;flex-direction:row;justify-content:flex-start;align-items:center;gap:6px;border-top:0;border-bottom:1px solid var(--cz200);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
  #menu .logo{display:flex;flex:none;align-items:center;gap:8px;flex-direction:row;margin:0 20px 0 0;padding:0;font-size:18px;color:var(--b900);font-weight:800;max-width:none}
  #menu .logo svg.i{width:26px;height:26px;color:var(--b500)}
  #menu .logo b{color:var(--b600);font-weight:800}
  #menu a[data-aba]{max-width:none;flex:none;flex-direction:row;gap:8px;padding:10px 14px;font-size:15px;border-radius:var(--r12)}
  #menu a[data-aba] svg{width:20px;height:20px}
  #menu a[data-aba]:hover{background:var(--cz100);color:var(--b600)}
  #menu a.on{background:var(--b50);color:var(--b600)}
  .so-cel{display:none}.so-pc{display:inline}
  .menu-stats{display:flex;margin-left:auto}
  .menu-stats .stat{background:var(--b50);color:var(--b700)}.menu-stats .stat.fogo{background:var(--rosa);color:var(--rosa-txt)}.menu-stats .stat.fogo svg.i{color:var(--rosa-txt)}.menu-stats .stat.meta{background:var(--cz100);color:var(--cz600)}
  #menu .eu{display:grid;place-items:center;width:38px;height:38px;flex:none;margin-left:10px;padding:0;border-radius:50%;background:var(--grad-no);color:#fff;font-size:15px;font-weight:800;text-decoration:none;max-width:none}
  body.foco #menu{display:none}
  body.foco #screen{padding:0;max-width:none}
  /* páginas (liga, perfil, revisar, guia) centradas e mais largas */
  .pagina{max-width:1100px;margin:0 auto}
  .cab{border-radius:var(--r24);padding:28px 32px 24px}
  .cab h1{font-size:30px}
  .pagina-corpo{padding:24px 0}
  .medalhas{grid-template-columns:repeat(5,1fr)}
  .ajustes{grid-template-columns:1fr 1fr}
  .podio .inicial{width:56px;height:56px;font-size:20px}
  .ranking li{padding:12px 16px}
  .exemplos.vocab{grid-template-columns:1fr 1fr 1fr}
  .hist-corpo{max-width:760px;width:100%;margin:0 auto}
  .fala{max-width:80%}
  /* curso com sumário */
  .curso{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
  .sumario{position:sticky;top:88px;max-height:calc(100vh - 112px);overflow:auto;background:#fff;border-radius:var(--r24);box-shadow:var(--sombra);padding:12px}
  .nivel-c{margin:14px -12px 6px;padding:9px 24px;font-size:12px;font-weight:800;letter-spacing:.06em;color:#fff;text-transform:uppercase;background:var(--grad)}   /* faixa em degradê cruzando a coluna, atrás do título do nível */
  .nivel-c:first-child{margin-top:-12px;padding-top:12px}
  .sumario .mod-c{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;font-weight:800;color:var(--b900);text-decoration:none}
  .sumario .mod-c>span{flex:1;min-width:0}
  .sumario .mod-c i{width:28px;height:28px;border-radius:9px;background:var(--b500);color:#fff;display:grid;place-items:center;font-size:13px;font-style:normal;font-weight:800;flex:none}
  .sumario .mod-c:hover{background:var(--cz50)}
  .sumario .mod-c.on{background:var(--b50)}
  .sumario .mod-c.trav{color:var(--cz600)}.sumario .mod-c.trav i{background:var(--cz100);color:var(--cz400)}
  .sumario .mod-c svg.i{width:18px;height:18px;color:var(--cz400);flex:none}
  .sumario ul{list-style:none;margin:2px 0 8px;padding:0 0 0 14px}
  .sumario li a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;font-weight:600;color:var(--cz800);font-size:14px;text-decoration:none}
  .sumario li a>span{flex:1;min-width:0}
  .sumario li a:hover{background:var(--cz50)}
  .sumario li.on a{background:var(--b50);color:var(--b700);font-weight:800}
  .sumario li .pct{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--cz600);font-weight:700}
  .sumario li svg.i{width:18px;height:18px;color:var(--b400);flex:none}.sumario li .pct svg.i{width:12px;height:12px;color:var(--b500)}.sumario li.trav svg.i{color:var(--cz300)}
  .upag{display:flex;flex-direction:column;gap:18px;min-width:0}
  .cab-c{display:flex;align-items:flex-start;gap:20px;padding:24px 28px;border-radius:var(--r24);box-shadow:0 8px 0 var(--b800)}
  .cab-c.trav{background:var(--cz100);color:var(--cz600);box-shadow:0 8px 0 var(--cz200)}
  .cab-c .txt{flex:1;min-width:0}
  .cab-c small{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;opacity:.85}
  .cab-c h2{font-size:30px;color:inherit;margin:2px 0 10px}.cab-c.g h2{color:#fff}
  .cab-c ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:14px;opacity:.95}
  .cab-c ul li{display:flex;gap:8px;align-items:center}.cab-c ul svg.i{width:16px;height:16px;flex:none}
  .cab-c p{display:flex;gap:8px;align-items:center;font-size:15px}
  .cab-acoes{display:grid;gap:10px;flex:none}
  .cab-c .btn{width:auto;min-height:44px;background:rgba(255,255,255,.16);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.2)}
  .cab-c.trav .btn{background:#fff;color:var(--cz600);box-shadow:0 3px 0 var(--cz200)}
  .cab-c .btn-rosa{background:var(--rosa);color:var(--rosa-txt);box-shadow:0 3px 0 var(--rosa2)}
  .grade-passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
  .card-p{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:var(--r20);background:#fff;box-shadow:var(--sombra);min-height:150px;position:relative;border:2px solid transparent}
  .card-p.prox{border-color:var(--b300)}
  .card-p .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--grad-no);color:#fff;box-shadow:0 4px 0 var(--b700)}
  .card-p .ic svg.i{width:22px;height:22px}
  .card-p h4{font-size:16px;margin-top:4px}
  .card-p>span{font-size:13px;color:var(--cz600)}
  .card-p .btn{min-height:38px;font-size:14px;margin-top:auto;width:auto}
  .card-p.trav .ic{background:var(--cz100);color:var(--cz400);box-shadow:0 4px 0 var(--cz300)}
  .card-p.trav h4{color:var(--cz600)}
  .card-p .num{position:absolute;right:14px;top:14px;font-size:12px;font-weight:800;color:var(--cz400)}
  .upag .titulo-secao{margin:6px 0 0}
  .upag .missoes{margin:0;display:grid;grid-template-columns:auto 1fr 1fr 1fr;align-items:center;gap:6px 22px;padding:12px 20px}
  .upag .missoes h3{margin:0}.upag .missao{padding:0}
  .upag .cont.prova{margin:18px 0 0}
  .upag .convite{margin:0;flex-direction:row;align-items:center;justify-content:space-between}
  .upag .caixa-inicio{margin:0;padding:20px 22px}.upag .caixa-inicio .cartoes-escolha{grid-template-columns:1fr 1fr}
  .vocab-c{display:flex;flex-wrap:wrap;gap:8px}
  .vocab-c .chip{min-height:36px;font-size:14px;background:#fff;box-shadow:var(--sombra);color:var(--b900);cursor:pointer;text-decoration:none}
  .vocab-c .chip small{color:var(--cz600);font-weight:600;font-size:13px}
  .vocab-c .chip svg.i{color:var(--b500)}
  .upag .em-breve{padding:60px 20px}
  /* lição: pergunta à esquerda, resposta à direita */
  .licao,.fim{min-height:100vh;max-width:1400px;margin:0 auto}
  .licao.historia{max-width:840px}
  .lic-topo{padding:16px 28px 10px}
  .exercicio{padding:24px 40px 32px;max-width:800px;margin:0 auto;width:100%}
  .exercicio.duas{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:center;padding:24px 40px}
  .exercicio.duas>.col-pergunta{margin:0;padding:36px 32px;border-radius:var(--r24);background:#fff;box-shadow:var(--sombra-alta);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
  .exercicio.duas>.col-resposta{margin:0;display:flex;flex-direction:column;min-width:0}
  .col-pergunta>.rotulo{margin:0}
  .col-pergunta>.rotulo:only-child{font-size:24px;line-height:1.3;color:var(--b900)}
  .col-pergunta .enunciado{font-size:28px}
  .col-pergunta .enunciado-bloco{margin:0}
  .col-pergunta .ouvir{justify-content:center}
  .col-pergunta .ouvir-grande{margin:14px 0 4px}
  .col-pergunta .conversa,.col-pergunta .mini-dialogo,.col-pergunta .conversa-vez,.col-pergunta .frase-errada{width:100%;text-align:left}
  .col-pergunta .afirmacao{width:100%}
  .col-resposta .opcoes{grid-template-columns:1fr;gap:12px}
  .col-resposta .op{min-height:60px;font-size:17px}
  .col-resposta .grade-fig{grid-template-columns:1fr 1fr}
  .col-resposta .chips,.col-resposta .resposta-blocos,.col-resposta .campo,.col-resposta .vf,.col-resposta .dialogo-resp{margin-top:0}
  .col-resposta .banco{margin-top:18px}
  .col-pergunta .modelo{width:100%}
  .col-resposta .tabela{margin-top:0}
  .col-pergunta .doc{max-width:none}
  .mapa{max-width:520px;margin-left:auto;margin-right:auto}
  .col-resposta .pares-op{grid-template-columns:1fr 1fr}
  .texto{font-size:21px}
  .cartao-palavra:not(.repetir):has(img){flex-direction:row;text-align:left;align-items:center;gap:36px;padding:32px 40px}
  .cartao-palavra:not(.repetir):has(img) .pal-txt{align-items:flex-start}
  .cartao-palavra:not(.repetir):has(img) .ouvir{justify-content:flex-start}
  .pal-en{font-size:42px}
  .enunciado{font-size:26px}
  .grade-fig{grid-template-columns:repeat(4,1fr)}
  .painel{left:50%;transform:translateX(-50%);width:100%;max-width:1400px;border-radius:var(--r24) var(--r24) 0 0;padding:20px 40px calc(20px + env(safe-area-inset-bottom))}
  @keyframes sobe{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
  #sheet{animation:none}
  .lic-rodape{display:flex;justify-content:space-between;align-items:center;padding:16px 40px 20px;border:0;border-radius:var(--r20) var(--r20) 0 0;box-shadow:var(--sombra-alta)}
  .lic-rodape .atalhos{display:block;font-size:13px;color:var(--cz600)}
  .lic-rodape .btn{width:auto;min-width:240px}
  .lic-rodape.dois{display:flex}
  .painel .btn{display:flex;width:auto;min-width:240px;margin-left:auto}   /* Continuar à direita, alinhado com o Verificar: menos mouse */
  .lic-rodape > .btn:only-child{margin-left:auto}
  .fim{max-width:800px}
  .fim-cab{min-height:230px}
  .fim-mascote .m-grande{width:300px;height:300px}
  /* entrada e páginas de escolha (sem menu) */
  .entrada{min-height:100vh}
  .slide{flex-direction:row;text-align:left;align-items:center;gap:56px;max-width:900px}
  .slide .ilus{width:320px;height:320px;flex:none}
  .slide h1{font-size:44px;max-width:14ch}.slide p{font-size:19px;max-width:34ch;margin-top:12px}
  .entrada-botoes{max-width:420px}
  .entrada .slides{width:100%;max-width:1040px;margin:0 auto}
  .cartoes-escolha{max-width:560px}
  .cartoes-escolha:has(:nth-child(4)){grid-template-columns:1fr 1fr;max-width:720px}
  .form{flex:0 0 auto;max-width:480px;padding-top:32px}
  .form button[type=submit]{margin-top:8px}
}
@media (min-width:1280px) and (hover:hover) and (pointer:fine){.grade-passos{grid-template-columns:repeat(4,1fr)}}
/* diploma: idioma, prévia e botões */
.dip-idioma{display:flex;gap:8px;margin-bottom:14px}.dip-idioma .seg{flex:1}
.dip-previa{width:100%;aspect-ratio:792/612;border-radius:var(--r16);box-shadow:var(--sombra-alta);background:var(--cz100);display:block}
.dip-acoes{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:6px}.dip-acoes .btn{width:100%}.dip-acoes .largo{grid-column:1/-1}