/* Página de Treinamento em IA. Usa o mundo da home v5 (site-v5.css), a base das páginas de produto
   (agentes.css) e as peças da Automação (automacao.css: janela fixa, três formas, cartão de prova). */

/* ---------- hero: o mapa de maturidade do time (três planos) ---------- */
.mt{position:relative;display:block;padding:0;justify-items:normal;}
.mt-back{position:absolute;inset:-14% -16% -12% 4%;pointer-events:none;z-index:0;will-change:transform;}
.mt-back::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--violet-200) 1.1px, transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent);mask-image:radial-gradient(closest-side, #000 55%, transparent);opacity:0.7;}
.mt-back img{position:absolute;right:-18%;top:-6%;width:78%;max-width:none;opacity:0.07;}
.mt-mid{position:relative;z-index:1;will-change:transform;}
.mt-card{background:#fff;border:1px solid var(--line-2);border-radius:24px;padding:22px 24px 18px;box-shadow:0 2px 6px rgba(67,38,130,0.08), 0 40px 80px -34px rgba(67,38,130,0.42);}
.mt-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;margin-bottom:20px;}
.mt-head b{font-family:var(--font-display);font-weight:600;font-size:16px;}
.mt:not(.js) .mt-toggle{display:none;}
.mt-toggle{display:inline-flex;background:var(--paper);border-radius:999px;padding:3px;}
.mt-toggle button{all:unset;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--t2);padding:5px 12px;border-radius:999px;transition:background-color .3s var(--ease-out), color .3s var(--ease-out);}
.mt-toggle button[aria-pressed="true"]{background:var(--violet);color:#fff;}
.mt-toggle button:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}
.mt-grid{display:grid;grid-template-columns:96px minmax(0, 1fr);gap:10px 12px;align-items:center;}
.mt-cols{grid-column:2;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:6px;align-items:end;}
.mt-cols span{font-size:11.5px;font-weight:600;line-height:1.2;color:var(--t2);}
.mt-row{display:contents;}
.mt-area{font-size:13.5px;font-weight:600;color:var(--ink);}
.mt-track{position:relative;height:40px;border-radius:10px;background:repeating-linear-gradient(90deg, var(--violet-50) 0 calc(25% - 6px), transparent calc(25% - 6px) 25%);}
/* cada pessoa ocupa a largura de uma coluna e anda por ela (só transform): --pa e --pb são a coluna
   mais a fração da vaga, centrada entre as pessoas que dividem a mesma coluna em cada momento */
.mt-track i{position:absolute;left:0;top:0;bottom:0;width:25%;transform:translateX(calc(var(--pa) * 100%));transition:transform .9s var(--ease-out);transition-delay:calc(var(--k) * 70ms);}
.mt.is-fim .mt-track i{transform:translateX(calc(var(--pb) * 100%));}
.mt-track i::before{content:"";position:absolute;top:50%;left:-4.5px;width:9px;height:9px;margin-top:-4.5px;border-radius:999px;background:var(--violet-400);transition:background-color .4s .5s;}
.mt.is-fim .mt-track i.p::before{background:var(--pink);}
.mt.is-static .mt-track i,.mt.is-static .mt-track i::before{transition:none;}
.mt-note{margin-top:16px;text-align:right;font-size:12px;color:var(--t3);}
.mt-front{position:absolute;left:-36px;bottom:-36px;z-index:2;pointer-events:none;will-change:transform;}
.mt-proof{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;max-width:270px;background:#fff;border-radius:16px;padding:12px 16px 13px 12px;box-shadow:0 2px 6px rgba(67,38,130,0.10), 0 24px 48px -18px rgba(67,38,130,0.42);pointer-events:auto;}
.mt-proof b{font-family:var(--font-display);font-weight:600;font-size:15.5px;line-height:1.15;letter-spacing:-0.005em;}
.mt-proof small{font-size:12.5px;line-height:1.35;color:var(--t2);text-wrap:pretty;}
@media (max-width: 999px){.mt{max-width:620px;margin:0 auto;width:100%;}}
@media (max-width: 640px){
  .mt-back{inset:-10% -20% 20% -10%;}
  .mt-card{padding:18px 16px 14px;border-radius:20px;}
  .mt-grid{grid-template-columns:minmax(0, 1fr);gap:4px;}
  .mt-cols{grid-column:1;margin-bottom:6px;}
  .mt-cols span{font-size:11px;}
  .mt-area{font-size:12.5px;margin-top:6px;}
  .mt-track{height:34px;}
  .mt-front{position:relative;left:auto;bottom:auto;margin-top:12px;}
  .mt-proof{max-width:none;}
}

/* ---------- 1 · o programa (três formas, no papel) ---------- */
#programa .formas-h{max-width:20ch;}
#programa .fm-art{background:#fff;}
.waves,.tracks,.asks{width:min(100%, 260px);}
.waves{display:grid;gap:6px;}
.waves p{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;background:var(--paper);border-radius:12px;padding:6px 12px;}
.waves b{grid-row:span 2;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--violet);}
.waves span{font-size:12.5px;font-weight:500;color:var(--ink);}
.waves i{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--t3);}
.tracks{display:grid;gap:8px;}
.tracks p{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;}
.tracks b{font-size:13px;font-weight:600;}
.tracks span{font-size:12px;color:var(--t2);}
.asks{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.asks li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;font-weight:500;color:var(--ink);}
.asks svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--violet);}

/* ---------- 2 · a régua (janela fixa, seção escura) ---------- */
.ps-txt p.lv-k{margin-top:10px;}
#regua .ps-stage .win{min-height:380px;}
.ps-txt .lv-k b{font-weight:600;color:#fff;}
@media (min-width: 1100px){
  .ps.is-sticky .ps-txt p.lv-k{font-size:15.5px;line-height:1.5;}
  .ps.is-sticky .ps-step:not(.is-active) .lv-k b{color:inherit;}
}
.rg-bar{list-style:none;margin:0;padding:12px 16px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:4px;border-bottom:1px solid var(--line-2);}
.rg-bar li{font-size:11.5px;font-weight:600;line-height:1.2;color:var(--t3);padding-top:9px;border-top:4px solid var(--paper-2);}
.rg-bar li.done{color:var(--t2);border-top-color:var(--violet-300);}
.rg-bar li.on{color:var(--violet);border-top-color:var(--violet);}
.win p.tk-q{font-size:12.5px;line-height:1.45;color:var(--t2);font-style:italic;}
.ck{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:7px;}
.ck li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--ink);}
.ck svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--violet);}
.draft,.instr,.ind{border:1px solid var(--line-2);border-radius:10px;padding:10px;margin-bottom:12px;background:#fff;}
.win p.dr-l{font-size:12.5px;line-height:1.45;color:var(--ink);margin-top:4px;}
.win p.dr-tag{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.dr-tag span{font-size:11px;font-weight:600;color:var(--violet);background:var(--violet-50);border-radius:999px;padding:3px 9px;}
.win .instr p:not(.art-h),.win .ind p:not(.art-h){display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line-2);font-size:12.5px;line-height:1.35;color:var(--t2);}
.instr b,.ind b{font-family:var(--font-mono);font-weight:500;font-size:11px;color:var(--ink);white-space:nowrap;}

/* ---------- 3 · teses ---------- */
.lvl{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap;}
.lvl.l2{color:var(--t2);background:var(--paper-2);}
.lvl.l3{color:var(--violet);background:var(--violet-50);}
.lvl.l4{color:#fff;background:var(--violet);}
@media (max-width: 560px){.lvl{white-space:normal;}#why-1 .sheet td + td,#why-1 .sheet th + th{padding-left:10px;}#why-1 .sheet td{vertical-align:top;}}
.score{display:grid;grid-template-columns:56px minmax(0, 1fr);gap:6px 12px;align-items:center;}
.sc-area{grid-column:1 / -1;margin-top:10px;font-size:13px;font-weight:600;color:var(--ink);}
.sc-area:first-child{margin-top:0;}
.sc-k{font-size:12px;color:var(--t3);}
.sc-bar{height:22px;border-radius:7px;}
.sc-key{grid-template-columns:repeat(2, minmax(0, 1fr));}
.sc-key li{grid-template-columns:auto 1fr;font-size:13px;}

/* um rosa por bloco: nas teses, o rosa fica só na aba ativa */
#teses .verdict i{background:var(--violet);}
#why-4 .flow li.is-done::before{background:var(--violet);border-color:var(--violet);}

/* ---------- 4 · resultado ---------- */
.sheet td .sub{display:block;margin-top:2px;font-size:12px;color:var(--t3);}
.cnt{white-space:nowrap;}
@media (max-width: 999px){#resultado .res{grid-template-columns:minmax(0, 1fr);}}
@media (max-width: 560px){#resultado .sheet td.n{white-space:normal;}#resultado td.n + td.n{padding-left:20px;}}