/* EXPLICA AI — camada de plataforma · usa apenas tokens (tokens.css) */
.ic{display:block;flex:none}
body{background:var(--color-background-backdrop)}
.app{background:var(--color-background-canvas)}

/* ---------- topo ---------- */
.topbar{padding:calc(var(--space-3) + var(--safe-t)) var(--gutter) var(--space-3)}
.brand{gap:var(--space-2);font:700 15px/1 var(--font-learning);letter-spacing:.08em;color:var(--color-brand-primary)}
.brand span:last-child{white-space:nowrap}
#brandMark{display:flex}
.topbar-right{gap:var(--space-2)}
.prof-btn{display:flex;align-items:center;gap:var(--space-2);height:44px;padding:0 var(--space-3) 0 5px;border-radius:var(--radius-pill);background:var(--color-background-surface);box-shadow:var(--elevation-1);font:var(--type-ui);font-size:14.5px;color:var(--color-text-primary)}
.prof-btn .ic{color:var(--color-text-muted)}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--color-brand-primary);color:var(--color-text-inverse);font:600 15px/1 var(--font-display);flex:none;position:relative}
.av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--color-brand-accent);border:2px solid var(--color-background-surface)}
.av.lg{width:46px;height:46px;font-size:20px}
.icon-btn{width:44px;height:44px;color:var(--color-text-primary);box-shadow:var(--elevation-1)}
.icon-btn.off{opacity:1;color:var(--color-text-muted)}
.mini-progress[hidden],.tabbar[hidden]{display:none!important}
.mini-progress{box-shadow:var(--elevation-1);font:var(--type-data);font-size:13.5px;height:44px}
.mini-progress span{width:34px}
@media (max-width:420px){.mini-progress span{display:none}.mini-progress{padding:0 var(--space-3)}.brand{font-size:14px;letter-spacing:.06em}}
@media (max-width:370px){.brand span:last-child{display:none}}

/* ---------- tabbar ---------- */
.tabbar{background:color-mix(in srgb,var(--color-background-surface) 94%,transparent);border-top:1px solid var(--color-border-subtle)}
.tabbar a{min-height:var(--tap);justify-content:center;font:500 10.5px/1.1 var(--font-learning);color:var(--color-text-muted);position:relative}
.tabbar a i{height:26px;display:grid;place-items:center;filter:none!important;opacity:1!important;transition:transform var(--dur-base) var(--ease-enter)}
.tabbar a.on{color:var(--color-text-primary);font-weight:700}
.tabbar a.on i{transform:translateY(-1px)!important}
.tabbar a.on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--color-brand-accent)}

/* ---------- botões ---------- */
.btn{min-height:calc(var(--tap) + 8px);border-radius:var(--radius-md);font:var(--type-ui);font-size:16.5px;transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.btn-primary{background:var(--color-brand-accent);color:var(--color-on-accent);box-shadow:0 6px 18px color-mix(in srgb,var(--lumen-500) 28%,transparent)}
.btn-dark{background:var(--color-brand-primary);color:var(--color-on-brand)}
.btn-ghost{background:var(--color-background-surface);box-shadow:var(--elevation-1);color:var(--color-text-primary)}
.btn-brand{background:var(--color-brand-primary);color:var(--color-on-brand);box-shadow:var(--elevation-2)}
.btn-brand .ic{color:var(--color-brand-accent)}
.btn.sm{min-height:var(--tap);font-size:15.5px;border-radius:var(--radius-md)}
.cta-grid .btn-row .btn i{display:grid;place-items:center;color:var(--color-text-secondary)}
.say{background:var(--color-brand-primary);color:var(--color-on-brand);min-width:44px;height:44px}
.say .ic{width:20px;height:20px}
.say.sm{height:36px;min-width:0;padding:0 var(--space-3);font:var(--type-caption);font-size:13px;gap:6px;background:var(--color-background-sunken);color:var(--color-text-primary)}
.say.sm .ic{width:16px;height:16px}

/* ---------- títulos (display) ---------- */
.hero .flag span{font:var(--type-overline);letter-spacing:var(--tracking-overline)}
.eyebrow{font:var(--type-overline);letter-spacing:var(--tracking-overline);color:var(--color-text-muted);text-transform:uppercase}
.q-meta{font:var(--type-overline);letter-spacing:.1em;text-transform:uppercase}

/* ---------- HOME GLOBAL ---------- */
body[data-scope="global"] main{padding-bottom:calc(120px + var(--safe-b))}
.brand-hero{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--color-background-inverse);color:var(--color-text-inverse);padding:var(--space-8) var(--space-6) var(--space-6);margin-top:var(--space-1);isolation:isolate}
.bh-art{position:absolute;inset:0;z-index:-1;opacity:.95}
.bh-art .ln{fill:none;stroke:color-mix(in srgb,var(--paper-0) 14%,transparent);stroke-width:1.2}
.bh-art .ln.lit{stroke:var(--color-brand-accent);stroke-width:1.6;opacity:.9}
.bh-art .dot{fill:color-mix(in srgb,var(--paper-0) 28%,transparent)}
.bh-art .dot.lit{fill:var(--color-brand-accent)}
.bh-name{display:flex;align-items:center;gap:var(--space-2);font:var(--type-overline);letter-spacing:.2em;color:var(--color-text-inverse-muted)}
.brand-hero h1{font:var(--type-display-xl);letter-spacing:-.02em;margin-top:var(--space-12);max-width:12ch}
.brand-hero h1 em{font-style:italic;color:var(--color-brand-accent);font-weight:500}
.verbs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);font:var(--type-caption);font-size:13px;color:var(--color-text-inverse-muted)}
.verbs span{display:flex;align-items:center;gap:var(--space-2)}
.verbs span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--color-brand-accent)}
.hello{font:var(--type-heading-l);letter-spacing:-.015em;margin:var(--space-8) 0 var(--space-3)}
.continue{display:block;border-radius:var(--radius-xl);overflow:hidden;background:var(--color-background-surface);box-shadow:var(--elevation-2);transition:transform var(--dur-fast) var(--ease-standard)}
.continue:active{transform:scale(.99)}
.ct-img{height:148px;background-size:cover;background-position:center 60%;position:relative}
.ct-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--ink-950) 50%,transparent))}
.ct-img .ct-subj{position:absolute;left:var(--space-4);bottom:var(--space-3);z-index:1;display:flex;align-items:center;gap:6px;color:var(--paper-0);font:var(--type-overline);letter-spacing:var(--tracking-overline)}
.ct-body{padding:var(--space-4) var(--space-5) var(--space-5)}
.ct-body h3{font:var(--type-display-l);letter-spacing:-.02em;margin-top:var(--space-2)}
.ct-t{color:var(--color-text-secondary);font-weight:500;margin-top:var(--space-1)}
.ct-prog{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) 0}
.ct-prog .bar{flex:1;margin:0;height:8px}
.ct-prog b{font:var(--type-data)}
.ct-next{font:var(--type-caption);color:var(--color-text-muted);margin-bottom:var(--space-4);display:flex;gap:6px;align-items:center}
.packs{display:grid;gap:var(--space-3)}
.pk{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:var(--space-4);background:var(--color-background-surface);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);box-shadow:var(--elevation-1);text-align:left;width:100%;min-height:76px}
.pk-ico{width:52px;height:52px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:26px;background:var(--color-background-sunken);color:var(--color-text-primary)}
.pk b{display:block;font:var(--type-heading-s)}
.pk small{color:var(--color-text-muted);font-size:13px}
.pk .go{color:var(--color-text-muted)}
.pk.new{grid-template-columns:52px 1fr;border:1.5px dashed var(--color-border-strong);box-shadow:none;background:transparent}
.pk.new .pk-ico{background:var(--color-brand-primary);color:var(--color-brand-accent)}
.empty{text-align:center;padding:var(--space-8) var(--space-5);border-radius:var(--radius-xl);background:var(--color-background-surface);box-shadow:var(--elevation-1)}
.empty .ic{margin:0 auto var(--space-3);color:var(--color-text-muted)}
.empty h3{font:var(--type-heading-m);margin-bottom:var(--space-1)}

/* ---------- EXPLICA: botão contextual ---------- */
.fab{position:fixed;z-index:45;right:max(var(--space-4),calc(50% - 240px + var(--space-4)));bottom:calc(84px + var(--safe-b));height:52px;padding:0 var(--space-5) 0 var(--space-4);border-radius:var(--radius-pill);background:var(--color-brand-primary);color:var(--color-on-brand);font:700 14px/1 var(--font-learning);letter-spacing:.1em;box-shadow:var(--elevation-3);display:flex;align-items:center;gap:var(--space-2);transition:transform var(--dur-fast) var(--ease-standard)}
.fab .ic{color:var(--color-brand-accent)}
.fab:active{transform:scale(.95)}
.fab .fab-ctx{font:500 12px/1 var(--font-learning);letter-spacing:0;color:var(--color-text-inverse-muted);max-width:0;overflow:hidden;white-space:nowrap;transition:max-width var(--dur-slow) var(--ease-enter)}
.fab.has-ctx .fab-ctx{max-width:120px}
body[data-scope="global"] .fab{bottom:calc(var(--space-6) + var(--safe-b))}

/* ---------- sheets ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:80;pointer-events:none}
.sheet-wrap.open{pointer-events:auto}
.scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--dur-slow) var(--ease-standard)}
.sheet-wrap.open .scrim{opacity:1}
.sheet{position:absolute;left:50%;bottom:0;width:100%;max-width:480px;max-height:90dvh;overflow:auto;overscroll-behavior:contain;transform:translate(-50%,105%);transition:transform var(--dur-sheet) var(--ease-enter);background:var(--color-background-canvas);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-3) var(--gutter) calc(var(--space-6) + var(--safe-b));box-shadow:var(--elevation-overlay)}
.sheet-wrap.open .sheet{transform:translate(-50%,0)}
.grab{width:40px;height:5px;border-radius:9px;background:var(--color-border-strong);margin:0 auto var(--space-4)}
.sh-title{font:var(--type-heading-l);margin-bottom:var(--space-3)}
.prof-list{display:grid;gap:var(--space-2);margin-bottom:var(--space-3)}
.prof{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--color-background-surface);box-shadow:var(--elevation-1);text-align:left;border:2px solid transparent;min-height:68px}
.prof.on{border-color:var(--color-brand-primary)}
.prof b{display:block;font:var(--type-heading-s)}.prof small{color:var(--color-text-muted);font-size:13px}
.prof i{margin-left:auto;color:var(--color-brand-primary)}
.priv{background:var(--color-background-surface);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);box-shadow:var(--elevation-1)}
.priv summary{font:var(--type-ui);font-size:14.5px;cursor:pointer;display:flex;align-items:center;gap:var(--space-2);min-height:32px}
.priv dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-4);margin:var(--space-3) 0 var(--space-2);font-size:14.5px}
.priv dt{color:var(--color-text-muted);font-weight:600}.priv dd{font-weight:600}
.form{display:grid;gap:var(--space-3)}
.form label{display:grid;gap:6px;font:var(--type-ui);font-size:14px}
.form small{font-weight:500;color:var(--color-text-muted)}
.form input,.form select{font:inherit;font-weight:500;font-size:16px;min-height:var(--tap);border-radius:var(--radius-md);border:1.5px solid var(--color-border-subtle);background:var(--color-background-surface);padding:0 var(--space-4);color:var(--color-text-primary)}
.form input:focus-visible,.form select:focus-visible{outline:3px solid var(--color-focus);outline-offset:0;border-color:transparent}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.src-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-4)}
.src{min-height:88px;border-radius:var(--radius-md);background:var(--color-background-surface);box-shadow:var(--elevation-1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:var(--type-ui);font-size:14px;color:var(--color-text-secondary)}
.src small{font:var(--type-overline);font-size:10px;letter-spacing:.08em;color:var(--color-brand-accent-text);text-transform:uppercase}
.flow-mini{margin-top:var(--space-4);font:var(--type-caption);color:var(--color-text-secondary);background:var(--color-background-sunken);border-radius:var(--radius-md);padding:var(--space-3);text-align:center;line-height:1.6}

/* ---------- EXPLICA PANEL ---------- */
.sheet.tutor{height:88dvh;display:flex;flex-direction:column;padding-bottom:calc(var(--space-3) + var(--safe-b))}
.tu-head{display:flex;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border-subtle)}
.tu-head b{display:block;font:700 14px/1.2 var(--font-learning);letter-spacing:.1em}
.tu-head small{display:flex;align-items:center;gap:4px;font:var(--type-caption);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px;margin-top:2px}
.tu-logo{display:flex}
.icon-btn.sm{width:44px;height:44px;margin-left:auto}
.tu-log{flex:1;overflow:auto;padding:var(--space-4) 2px;display:flex;flex-direction:column;gap:var(--space-3);overscroll-behavior:contain}
.msg{display:flex;animation:msgIn var(--dur-slow) var(--ease-enter) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.me{justify-content:flex-end}
.msg .bub{max-width:88%;border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font:var(--type-learning)}
.msg.me .bub{background:var(--color-brand-primary);color:var(--color-on-brand);border-bottom-right-radius:6px;font-weight:500}
.msg.ai .bub{background:var(--color-background-surface);box-shadow:var(--elevation-1);border-bottom-left-radius:6px;max-width:94%}
.msg.ai img{border-radius:var(--radius-md);margin-top:var(--space-3);aspect-ratio:16/10;object-fit:cover;width:100%}
.msg .meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.src-b{display:inline-flex;align-items:center;gap:5px;font:var(--type-overline);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:var(--radius-pill)}
.src-b .ic{width:14px;height:14px}
.src-b.mat{background:var(--color-source-material-bg);color:var(--color-source-material)}
.src-b.ext{background:var(--color-source-extra-bg);color:var(--color-source-extra)}
.src-b.none{background:var(--color-background-sunken);color:var(--color-text-muted)}
.msg .close{margin-top:var(--space-2);font-size:14px;color:var(--color-text-muted);font-weight:500}
.msg .fix{display:flex;align-items:center;gap:6px;font:var(--type-overline);letter-spacing:.1em;text-transform:uppercase;color:var(--color-feedback-error-text);margin-bottom:var(--space-2)}
.msg .fix .ic{width:16px;height:16px}
.msg .weak{display:flex;gap:var(--space-2);margin-top:var(--space-3);font-size:14px;font-weight:600;color:var(--color-feedback-warning-text);background:var(--color-feedback-warning-bg);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3)}
.msg .weak .ic{width:16px;height:16px;margin-top:2px}
.go-screen{display:inline-flex;align-items:center;gap:4px;margin-top:var(--space-3);min-height:36px;font:var(--type-ui);font-size:14.5px;color:var(--color-text-primary);border-bottom:2px solid var(--color-brand-accent)}
.tu-quiz .q-card{box-shadow:none;padding:var(--space-3) 0 0;background:transparent}
.tu-quiz .q-prompt{font-size:17px}
.thinking{display:flex;gap:5px;padding:var(--space-4)}
.thinking i{width:7px;height:7px;border-radius:50%;background:var(--color-text-muted);animation:think 1s var(--ease-standard) infinite}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s;background:var(--color-brand-accent)}
@keyframes think{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.tu-chips{display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-2) 0;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
.tu-chips::-webkit-scrollbar{display:none}
.tu-chips button{flex:none;display:flex;align-items:center;gap:6px;font:var(--type-caption);font-size:13.5px;min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--color-background-surface);box-shadow:var(--elevation-1);color:var(--color-text-primary)}
.tu-chips .ic{width:16px;height:16px;color:var(--color-text-muted)}
.tu-in{display:flex;gap:var(--space-2);padding-top:var(--space-2)}
.tu-in input{flex:1;min-width:0;font:inherit;font-size:16px;min-height:52px;border-radius:var(--radius-pill);border:1.5px solid var(--color-border-subtle);background:var(--color-background-surface);padding:0 var(--space-5);color:var(--color-text-primary)}
.tu-in input:focus-visible{outline:3px solid var(--color-focus);outline-offset:0;border-color:transparent}
.tu-send{width:52px;height:52px;border-radius:50%;background:var(--color-brand-primary);color:var(--color-brand-accent);flex:none;display:grid;place-items:center}
.ask-inline{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-3);min-height:40px;font:var(--type-ui);font-size:14px;color:var(--color-text-primary);background:var(--color-background-surface);border-radius:var(--radius-pill);padding:0 var(--space-4);box-shadow:var(--elevation-1)}
.ask-inline .ic{color:var(--color-brand-accent-text)}

/* ---------- componentes pedagógicos: estados canônicos ---------- */
.q-opt{min-height:calc(var(--tap) + 10px);border-radius:var(--radius-md)}
.q-opt.right .l::after,.q-opt.wrong .l::after{content:""}
.state-mastered{color:var(--learn-mastered)}.state-weak{color:var(--learn-weak)}

/* densidade: beginner amplia texto didático; advanced compacta */
[data-density="beginner"] .msg .bub{font-size:18px}
[data-density="advanced"] .hero{min-height:280px}
.skip{position:absolute;left:var(--space-3);top:-60px;z-index:100;background:var(--color-brand-primary);color:var(--color-on-brand);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font:var(--type-ui)}
.skip:focus{top:var(--space-3)}
/* motion didático da marca: informação dispersa → organização → resposta */
.bh-art .ln{stroke-dasharray:420;stroke-dashoffset:420;animation:organize 1.6s var(--ease-enter) forwards}
.bh-art .ln:nth-child(2n){animation-delay:.12s}.bh-art .ln:nth-child(3n){animation-delay:.24s}
.bh-art .dot{animation:settle .9s var(--ease-enter) both}
@keyframes organize{to{stroke-dashoffset:0}}
@keyframes settle{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.fab[hidden]{display:none}
.fab>span:first-of-type{transition:max-width var(--dur-slow) var(--ease-enter),opacity var(--dur-base);max-width:90px;overflow:hidden;white-space:nowrap}
.fab.compact{padding:0;width:52px;justify-content:center;gap:0}
.fab.compact>span{max-width:0!important;opacity:0}

/* =====================================================================
   SUPER DESIGN SYSTEM v1.1 — camada de componentes (só visual; nenhuma lógica muda)
   ===================================================================== */
/* marca */
.ea-mark{display:block;flex:none}
.wm{white-space:nowrap}
.brand{letter-spacing:.005em;word-spacing:.12em}
.brand .ai,.tu-id .ai{color:var(--color-brand-accent)}      /* wordmark oficial: AI em gold (marca, não texto corrido) */
.bh-name{color:var(--color-text-inverse);letter-spacing:.005em;word-spacing:.12em;font:700 15px/1 var(--font-learning)}
.bh-name .ai{color:var(--color-brand-accent)}
.topbar{background:color-mix(in srgb,var(--color-background-canvas) 92%,transparent)}
.app{box-shadow:none}
/* FAB oficial: pílula navy 52 · símbolo negativo 30 · elevation-3 */
.fab{height:var(--fab-h);background:var(--color-brand-primary);color:var(--color-on-brand);box-shadow:var(--elevation-3);gap:var(--space-2);padding:0 var(--space-5) 0 var(--space-3)}
.fab .ea-mark{width:30px;height:30px}
.fab.compact{width:var(--fab-h)}
.fab.has-reply::after{content:"";position:absolute;top:6px;right:8px;width:10px;height:10px;border-radius:50%;background:var(--color-brand-accent);border:2px solid var(--color-brand-primary)}
.fab.is-min .fab-ctx{max-width:120px}
.sheet-wrap.min{display:none}
/* tutor */
.sheet.tutor{top:var(--sheet-top);height:auto;max-height:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--elevation-overlay)}
.tu-head .icon-btn.sm{width:40px;height:40px;flex:none}
.tu-head .tu-id{flex:1;min-width:0}
.tu-head .tu-id b{font:700 15px/1.2 var(--font-learning);letter-spacing:.005em;word-spacing:.12em}
.tu-head small{max-width:none}
.msg.me .bub{border-radius:var(--bubble-user-radius)}
.msg.ai .bub{border-radius:var(--bubble-tutor-radius)}
.msg .bub p{max-width:var(--measure)}
.thinking{align-items:center}
.thinking span{margin-left:var(--space-2);font:var(--type-caption);color:var(--color-text-muted)}
.tu-chips button{min-height:40px}
.tu-send{background:var(--color-brand-accent);color:var(--color-on-accent);width:48px;height:48px;border-radius:var(--radius-md)}
.tu-in input{height:48px;border-radius:var(--radius-md);border:1.5px solid var(--color-border-strong)}
/* selos de origem — 5 fontes, 2 famílias de cor oficiais + neutros (ícone + texto) */
.src-b{min-height:var(--badge-h)}
.src-b.source-material{background:var(--color-source-material-bg);color:var(--color-source-material)}
.src-b.source-general{background:var(--color-source-general-bg);color:var(--color-source-general)}
.src-b.source-school{background:var(--color-source-school-bg);color:var(--color-source-school)}
.src-b.source-profile{background:var(--color-source-profile-bg);color:var(--color-source-profile)}
.src-b.source-fresh{background:var(--color-source-fresh-bg);color:var(--color-source-fresh)}
/* botões */
.btn-primary{box-shadow:var(--elevation-1)}
.btn:active,.say:active,.q-opt:active,.tabbar a:active{transform:scale(var(--pressed-scale))}
.btn[disabled],.btn[aria-disabled="true"]{opacity:var(--disabled-opacity);box-shadow:none;cursor:default}
.say.speaking{animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-brand-accent) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
/* QUESTION */
.q-meta{font:var(--type-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--color-text-muted)}
.q-prompt{font:var(--type-heading-l);letter-spacing:-.01em;text-wrap:pretty}
.tu-quiz .q-prompt{font:var(--type-heading-m)}
.q-opt{min-height:var(--qopt-min);font:600 var(--learn-size)/1.3 var(--font-learning);background:var(--color-background-surface);border:2px solid var(--color-border-subtle);display:grid;grid-template-columns:34px 1fr;column-gap:12px;row-gap:2px;align-items:center}
.q-opt .l{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--color-background-sunken)}
.q-opt.sel{border-color:var(--color-brand-primary)}
.q-opt.right{border-color:var(--color-feedback-success);background:var(--color-feedback-success-bg)}
.q-opt.right .l{background:var(--color-feedback-success);color:var(--color-on-brand)}
.q-opt.wrong{border-color:var(--color-feedback-error);background:var(--color-feedback-error-bg)}
.q-opt.wrong .l{background:var(--color-feedback-error);color:var(--color-on-brand)}
.q-opt.right.shake{animation:none}
.q-opt.right:not(.wrong){animation:okPop var(--dur-base) var(--ease-success)}
@keyframes okPop{from{transform:scale(.96)}to{transform:scale(1)}}
.q-tag{grid-column:2;font:var(--type-overline);letter-spacing:.08em;text-transform:uppercase}
.q-opt.right .q-tag{color:var(--color-feedback-success-text)}
.q-opt.wrong .q-tag{color:var(--color-feedback-error-text)}
/* ERROR → CORRECTION → RETEST (nunca punitivo) */
.remind .h{display:flex;align-items:center;gap:6px;font:var(--type-heading-s);letter-spacing:0;text-transform:none;color:var(--color-feedback-success-text)}
.remind.good .h{color:var(--color-feedback-success-text)}
.remind li{font:500 var(--learn-size)/1.45 var(--font-learning)}
.remind.fix{background:var(--color-background-surface);border:1.5px solid var(--color-border-subtle);border-left:4px solid var(--color-feedback-success)}
.remind .fix-h{display:flex;align-items:flex-start;gap:6px;font:500 15px/1.35 var(--font-learning);color:var(--color-feedback-error-text);margin-bottom:var(--space-2)}
.remind .fix-h svg{flex:none;margin-top:1px}
.remind .lembre{margin-top:var(--space-3);font:var(--type-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--color-text-muted)}
.remind .retest{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--color-feedback-warning-bg);color:var(--color-feedback-warning-text);font:600 14px/1.3 var(--font-learning)}
.remind .retest i{width:10px;height:10px;background:var(--learn-weak);flex:none}
.remind .fix-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}
.remind .fix-act .ask-inline{margin-top:0}
.ask-inline{background:var(--color-brand-primary);color:var(--color-on-brand);border-radius:var(--radius-pill);padding:0 var(--space-4) 0 var(--space-2)}
.ask-inline .ea-mark{width:22px;height:22px}
/* DON'T CONFUSE / MEMORY HOOK */
.warn{background:var(--color-background-surface);border:1.5px solid var(--color-feedback-warning)}
.callout{background:var(--color-feedback-warning-bg);border-color:var(--color-feedback-warning-border)}
/* texto didático: medida de leitura */
.lead,.muted,.section p,.zc-body p{max-width:var(--measure)}
p{text-wrap:pretty}
/* MAPA §17 */
.st:focus-visible,.zone:focus-visible{outline:none;stroke:var(--color-focus);stroke-width:3}
.st.sel,.zone.sel{stroke:var(--learn-map-selected-stroke);stroke-width:2.4}
.st.dim{fill:var(--learn-map-dim)!important}
/* VISUAL HOTSPOT §16: 44 px */
.hot button{width:var(--hotspot);height:var(--hotspot);font:700 16px/1 var(--font-learning);color:var(--color-text-primary)}
.hot.open button{background:var(--color-brand-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--color-brand-accent) 35%,transparent)}
.hot{transform:translate(-22px,-22px)}
/* campos */
.form input,.form select{min-height:48px;border-radius:var(--radius-md);border:1.5px solid var(--color-border-strong)}
/* desktop: área central legível */
@media (min-width:600px){.cat-stack{grid-template-columns:1fr}}
img{height:auto}
.map-list{margin-top:var(--space-2)}
.map-list summary{min-height:44px;display:flex;align-items:center;font:600 14px/1.2 var(--font-learning);color:var(--color-text-secondary);cursor:pointer}
.map-list .ml-grid{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-bottom:var(--space-2)}
.map-list button{min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--color-background-surface);box-shadow:var(--elevation-1);font:600 14px/1 var(--font-learning)}
/* COMPARE §21: 2 colunas, borda-topo da cor de aprendizagem, linhas com fundo -bg */
.vs .col{background:var(--color-background-surface);color:var(--color-text-primary);border-top:4px solid var(--c);box-shadow:var(--elevation-1)}
.vs .col .loc{color:var(--color-text-muted);opacity:1}
.vs li{background:var(--cbg);color:var(--color-text-primary)}
.vs .c-cer{--c:var(--learn-vegetacao);--cbg:var(--learn-vegetacao-bg);background:var(--color-background-surface)}
.vs .c-pan{--c:var(--learn-clima);--cbg:var(--learn-clima-bg);background:var(--color-background-surface)}
/* DON'T CONFUSE §21: borda gold-500 · rótulo “Não confunda” gold-700 · frase de correção */
.warn>div>b{color:var(--color-text-primary)}
.warn>div>b::before{content:"Não confunda";display:block;font:var(--type-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--color-feedback-warning-text);margin-bottom:4px}
.warn p{color:var(--color-text-secondary);font-size:var(--learn-size);max-width:var(--measure)}
/* a11y v1.1: estados "ainda não" legíveis (contraste AA), nunca só por opacidade */
.badge{opacity:1;color:var(--color-text-muted)}
.badge:not(.on){background:var(--color-background-sunken);box-shadow:none}
.step{opacity:1}
.step:not(.on){box-shadow:none;background:var(--color-background-sunken)}
.step:not(.on) b{color:var(--color-text-muted)}
.step:not(.on) .e{filter:grayscale(1);opacity:.55}
.t-relevo,.t-clima,.t-veg{color:var(--color-text-primary)}
.t-relevo{box-shadow:inset 0 -3px 0 var(--learn-relevo)}.t-clima{box-shadow:inset 0 -3px 0 var(--learn-clima)}.t-veg{box-shadow:inset 0 -3px 0 var(--learn-vegetacao)}
.b-relevo{background:color-mix(in srgb,var(--learn-relevo) 82%,var(--ink-900))}.b-veg{background:color-mix(in srgb,var(--learn-vegetacao) 78%,var(--ink-900))}.b-clima{background:color-mix(in srgb,var(--learn-clima) 88%,var(--ink-900))}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wm-svg{display:block;height:16px;width:auto;overflow:visible}
@media (max-width:370px){.brand .wm-svg{display:none}}
/* ---------- Home: globo de conhecimento (pedido do usuário, 30/09) ---------- */
.brand-hero{min-height:420px;display:flex;flex-direction:column;background:var(--color-background-inverse)}
.brand-hero .bh-globe{position:absolute;inset:0;z-index:-2;display:block}
.brand-hero .bh-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--color-background-inverse) 80%,transparent) 0%,transparent 20%),linear-gradient(0deg,color-mix(in srgb,var(--color-background-inverse) 92%,transparent) 0%,color-mix(in srgb,var(--color-background-inverse) 60%,transparent) 38%,transparent 62%)}
.brand-hero h1{margin-top:auto;padding-top:var(--space-12);text-shadow:0 1px 18px color-mix(in srgb,var(--color-background-inverse) 70%,transparent)}
.brand-hero .verbs span{color:var(--color-text-inverse)}