/* QualiLab: a mesa da analista. Papel liso, tinta índigo, marca-texto e anotação
   na margem. Nenhum gradiente de fundo: a matéria é papel, ficha e post-it. */
:root {
  --fundo: #f4f0e6; --sup: #fffdf7; --sup2: #ebe5d6; --tinta: #12143a; --tinta2: #3a3d5c; --fraco: #6b7392;
  --linha: rgba(18, 20, 58, .16); --cor: #1d2585; --cor-t: #fffdf7; --cor2: #ff7a45;
  --esc: #0d1140; --esc-t: #f4f0e6; --esc-f: rgba(244, 240, 230, .74);
  --raio: 4px; --raio-p: 4px; --sombra: 0 1px 0 rgba(18, 20, 58, .2);
  --f-tit: 'Outfit', system-ui, sans-serif; --f-cit: 'Newsreader', Georgia, serif;
  --tit-peso: 700; --tit-esp: -.03em;
  --mt-am: #ffe14d; --mt-lj: #ffb08a; --mt-vd: #8fffcb; --mt-az: #a9c8ff; --mt-rs: #ffb3d1;
}
body { background: var(--fundo); }
h1 { font-size: clamp(2.1rem, 4.3vw, 3.7rem); line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 3.3vw, 2.8rem); line-height: 1.08; }
.heroi { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; }
.heroi-t { padding-top: clamp(0px, 3vw, 40px); }

/* Marca-texto: bloco liso, levemente torto, como riscado à mão */
h1 em, h2 em { color: var(--tinta); position: relative; white-space: normal; z-index: 0; font-style: normal;
  background: var(--mt-am); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .12em; border-radius: 3px 8px 4px 9px; }

.topo { background: var(--fundo); backdrop-filter: none; border-bottom: 1.5px solid var(--tinta); }
.prod { font: 700 1.05rem var(--f-tit); letter-spacing: -.02em; }
.prod b { font-weight: 700; background: var(--mt-am); padding: 0 .18em; border-radius: 2px 6px 3px 7px; }
.sobre { font-family: var(--f-mono); color: var(--cor2); letter-spacing: .12em; }
.sobre::before { content: "● "; }
.btn { border: 1.5px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); font-family: var(--f-tit); font-weight: 600; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.btn-p { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); box-shadow: 3px 3px 0 var(--cor2); }
.btn-p:hover { box-shadow: 1px 1px 0 var(--cor2); }
.idiomas { border: 1.5px solid var(--tinta); background: var(--sup); }
.idiomas a[aria-current] { background: var(--tinta); }
.lede { font-size: 1.1rem; }

/* O palco é uma folha presa na mesa */
.palco { aspect-ratio: 4 / 3; background: var(--sup); border: 1.5px solid var(--tinta); border-radius: 6px; box-shadow: 8px 8px 0 var(--tinta); }
.palco::before { content: ""; position: absolute; top: -9px; left: 50%; width: 92px; height: 20px; margin-left: -46px; background: var(--mt-am); opacity: .92; transform: rotate(-1.4deg); z-index: 4; }
.pc-abas { background: var(--sup2); border-bottom: 1.5px solid var(--tinta); }
.pc-aba { border-radius: 3px; color: var(--tinta2); }
.pc-aba[aria-selected="true"] { background: var(--tinta); color: var(--fundo); }
.pc-prog { background: var(--cor2); height: 3px; }

/* Bloco do trabalho: quatro fichas com aba colorida */
.tcs { border: 0; background: none; gap: 14px; overflow: visible; border-radius: 0; }
.tc { background: var(--sup); border: 1.5px solid var(--tinta); border-right: 1.5px solid var(--tinta); border-radius: 3px; position: relative; padding-top: 34px; }
.tc::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 10px; background: var(--mt-az); border: 1.5px solid var(--tinta); border-radius: 3px 3px 0 0; }
.tc:nth-child(2)::before { background: var(--mt-am); }
.tc:nth-child(3)::before { background: var(--mt-lj); }
.tc-cassi { background: var(--tinta); color: var(--fundo); }
.tc-cassi::before { background: var(--mt-vd); }
.tc-cassi h3 { color: var(--mt-vd); }
.tc-cassi p { color: rgba(244, 240, 230, .82); }
.tc-cassi .tag { color: var(--mt-vd); }
.tag { border-radius: 2px; }
blockquote { border-left: 0; padding-left: 0; font: italic 400 clamp(1.25rem, 2.2vw, 1.7rem)/1.4 var(--f-cit); max-width: 34em; position: relative; margin-top: 44px; }
blockquote::before { content: "NOTA DA ANALISTA"; display: block; font: 600 .62rem var(--f-mono); letter-spacing: .12em; color: var(--cor2); margin-bottom: 10px; font-style: normal; }
html[lang="en"] blockquote::before { content: "ANALYST'S NOTE"; }
html[lang="es"] blockquote::before { content: "NOTA DE LA ANALISTA"; }

/* Perguntas que o produto responde: verbatim em serifa, código na margem */
.rl { border-top: 1.5px solid var(--tinta); }
.rl:last-child { border-bottom: 1.5px solid var(--tinta); }
.rl h3 { font: italic 500 clamp(1.2rem, 1.9vw, 1.55rem)/1.25 var(--f-cit); letter-spacing: -.01em; }
.et b { color: var(--tinta); background: var(--mt-am); display: inline-block; padding: 2px 6px; border-radius: 2px 5px 3px 6px; }
.et span { display: block; margin-top: 6px; }

.sec-esc .sobre { color: var(--mt-vd); }
.ps { border: 1.5px solid rgba(244, 240, 230, .34); border-radius: 3px; background: none; }
.ps .n { color: var(--mt-vd); }
.ps .gt { color: var(--mt-am) !important; }

.pv { border: 0; border-top: 1.5px solid var(--tinta); border-radius: 0; background: none; padding: 18px 0 0; }
.pv b { font: 700 clamp(2.4rem, 4.4vw, 3.8rem)/1 var(--f-tit); color: var(--tinta); display: inline-block; background: var(--mt-am); padding: 0 .1em; border-radius: 3px 9px 4px 10px; }
.pv:nth-child(2) b { background: var(--mt-lj); }
.pv:nth-child(3) b { background: var(--mt-vd); }
.pv:nth-child(4) b { background: var(--mt-az); }
.pv span { display: block; margin-top: 8px; }
.dupla { margin-top: 28px; gap: 28px; }
.cx { border: 1.5px solid var(--tinta); border-radius: 3px; box-shadow: none; }
.cx:first-child { background: var(--mt-am); border: 0; transform: rotate(-.5deg); box-shadow: 4px 5px 0 rgba(18, 20, 58, .18); }
.cx:first-child li { color: var(--tinta); }
.cx:last-child { background-image: repeating-linear-gradient(transparent 0 31px, rgba(29, 37, 133, .16) 31px 32px); background-position: 0 58px; }
.fqs, .fq { border-color: var(--tinta); border-width: 1.5px; }
.fq summary::after { color: var(--cor2); }
.fim h2 em { background: var(--mt-am); }

/* ---------- Palco: cenas ---------- */
.cena { padding: 14px; font-family: var(--f-txt); color: var(--tinta); }
.ql-t { font: 600 .58rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fraco); }
.folha { background: var(--sup); border: 1.5px solid var(--tinta); border-radius: 3px; }
.cod { font: 700 .54rem var(--f-mono); color: var(--cor); }
.tc-m { font: 400 .5rem var(--f-mono); color: var(--fraco); }

/* Cena 1: envio */
.env { display: grid; grid-template-columns: 40% 1fr; grid-template-rows: 1fr auto; gap: 12px; height: 100%; }
.arqs { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.arq { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 8px 10px; opacity: 0; transform: translateY(-10px) rotate(-1deg); transition: opacity .35s, transform .35s; }
.arq.on { opacity: 1; transform: none; }
.arq:nth-child(even).on { transform: rotate(.4deg); }
.arq .ic { font: 700 .5rem var(--f-mono); padding: 4px 5px; background: var(--mt-az); border: 1.5px solid var(--tinta); border-radius: 2px; }
.arq .ic.a { background: var(--mt-lj); }
.arq .ic.d { background: var(--mt-am); }
.arq .nm { font: 600 .66rem var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arq .nm small { display: block; font-weight: 400; color: var(--fraco); font-size: .54rem; }
.arq .st { font: 600 .52rem var(--f-mono); color: var(--fraco); white-space: nowrap; }
.arq.ok .st { color: #0b7a4b; }
.trans { padding: 12px 14px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.trans-l { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 7px; min-height: 0; overflow: hidden; margin-top: 8px; }
.tl { font: 400 .74rem/1.4 var(--f-cit); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.tl.on { opacity: 1; transform: none; }
.tl .tc-m { margin-right: 6px; }
.tl .cod { margin-right: 5px; }
.resumo { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.resumo span { font: 600 .6rem var(--f-mono); padding: 5px 9px; border: 1.5px solid var(--tinta); border-radius: 2px; background: var(--sup); }
.resumo span b { font-family: var(--f-tit); font-size: .82rem; margin-right: 4px; }

/* Cena 2: os 19 agentes marcando a transcrição */
.ag { display: grid; grid-template-columns: 27% 1fr 30%; gap: 10px; height: 100%; }
.trilho { display: flex; flex-direction: column; min-height: 0; padding: 9px; }
.trilho-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.trilho-h b { font: 700 1.05rem var(--f-tit); }
.ags { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; }
.a { display: flex; align-items: center; gap: 6px; font: 500 .53rem/1 var(--f-txt); color: var(--fraco); transition: color .2s; white-space: nowrap; overflow: hidden; }
.a i { width: 9px; height: 9px; flex: none; border: 1.5px solid var(--tinta); border-radius: 2px; background: var(--sup); transition: background .2s; }
.a span { margin-left: auto; font: 600 .48rem var(--f-mono); opacity: 0; }
.a.run { color: var(--tinta); font-weight: 700; }
.a.run i { background: var(--c, var(--mt-am)); }
.a.ok { color: var(--tinta2); }
.a.ok i { background: var(--c, var(--mt-am)); }
.a.ok span { opacity: 1; }
.pagina { padding: 12px 14px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; }
.pagina-h { display: flex; justify-content: space-between; border-bottom: 1.5px solid var(--tinta); padding-bottom: 6px; margin-bottom: 8px; }
.pl { position: relative; font: 400 .74rem/1.5 var(--f-cit); margin-bottom: 7px; padding-right: 58px; }
.pl .m { background: transparent; transition: background .35s; border-radius: 2px 6px 3px 7px; padding: 0 .1em; }
.pl .m.on { background: var(--c); }
.pl .mg { position: absolute; right: 0; top: 1px; font: 700 .46rem var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta); border-bottom: 2px solid var(--c); opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; max-width: 56px; text-align: right; line-height: 1.2; }
.pl .mg.on { opacity: 1; transform: none; }
.achado { padding: 10px; display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow: hidden; }
.achado-t { font: 700 .74rem var(--f-tit); min-height: 1.1em; }
.passo-a { border-left: 3px solid var(--sup2); padding-left: 8px; opacity: .35; transition: opacity .35s, border-color .35s; }
.passo-a.on { opacity: 1; border-color: var(--cor2); }
.passo-a b { display: block; font: 700 .48rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cor2); }
.passo-a p { font: 400 .62rem/1.35 var(--f-txt); color: var(--tinta2); }
.passo-a:first-of-type p { font: italic 400 .68rem/1.35 var(--f-cit); color: var(--tinta); }

/* Cena 3: a busca por significado nas sessões */
.esp { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 10px; height: 100%; }
.perg { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; padding: 9px 12px; background: var(--tinta); color: var(--fundo); border-radius: 3px; font: 500 .78rem var(--f-txt); min-height: 38px; }
.perg .ql-t { color: var(--mt-am); flex: none; }
.perg .cursor { display: inline-block; width: 7px; height: 1em; background: var(--mt-am); margin-left: 2px; vertical-align: -2px; animation: pisca 1s steps(2) infinite; }
.sess { padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; min-height: 0; position: relative; overflow: hidden; }
.ses { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; }
.ses > span { font: 600 .54rem var(--f-mono); }
.tiras { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; }
.tiras i { height: 16px; background: var(--sup2); border-radius: 1px; transition: background .25s; }
.tiras i.hit { background: var(--cor2); }
.tiras i.scan { background: var(--mt-am); }
.sentido { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--linha); }
.termos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.termos span { font: italic 500 .7rem var(--f-cit); padding: 1px 7px; border-radius: 2px 7px 3px 8px; background: var(--sup2); opacity: .35; transition: opacity .3s, background .3s; }
.termos span.on { opacity: 1; background: var(--mt-am); }
.achou { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; align-items: center; }
.achou em { margin-left: auto; font: 600 .52rem var(--f-mono); font-style: normal; color: var(--fraco); opacity: 0; transition: opacity .4s; }
.achou em.on { opacity: 1; }
.achou span { font: 700 .52rem var(--f-mono); padding: 3px 6px; background: var(--mt-lj); border: 1.5px solid var(--tinta); border-radius: 2px; opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; }
.achou span.on { opacity: 1; transform: none; }
.resp { padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.bar-i { padding: 6px 0; border-top: 1px solid var(--linha); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.bar-i.on { opacity: 1; transform: none; }
.bar-i b { display: block; font: 700 .68rem var(--f-tit); }
.bar-i q { font: italic 400 .7rem/1.3 var(--f-cit); quotes: none; }
.bar-i q span { background: var(--mt-am); border-radius: 2px 6px 3px 7px; padding: 0 .1em; }
.bar-i code { margin-left: 5px; font: 700 .5rem var(--f-mono); color: var(--cor); }
.conf { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding-top: 8px; border-top: 1.5px solid var(--tinta); }
.conf .tr { grid-column: 1 / -1; height: 7px; background: var(--sup2); border: 1.5px solid var(--tinta); border-radius: 2px; overflow: hidden; }
.conf .tr i { display: block; height: 100%; width: 0; background: var(--cor2); transition: width 1.3s ease; }
.conf b { font: 700 .95rem var(--f-tit); }

/* Cena 4: as entregas, como objetos */
.ent { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; height: 100%; }
.curva { font: 600 .62rem var(--f-mono); padding-top: 9px; border-top: 1.5px solid var(--tinta); }
.pronto { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.pronto b { font: 700 1.2rem var(--f-tit); }
.regua { height: 14px; border: 1.5px solid var(--tinta); border-radius: 2px; display: flex; overflow: hidden; background: repeating-linear-gradient(135deg, var(--sup) 0 5px, var(--sup2) 5px 10px); }
.regua i { display: block; width: 0; background: var(--mt-vd); border-right: 1.5px solid var(--tinta); transition: width 2.4s ease; }
.ents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 0; align-content: center; }
.en { display: flex; flex-direction: column; gap: 6px; min-height: 0; opacity: 0; transform: translateY(14px) rotate(-1.5deg); transition: opacity .4s, transform .4s; }
.en.on { opacity: 1; transform: none; }
.en:nth-child(even).on { transform: rotate(.7deg); }
.obj { flex: none; aspect-ratio: 4 / 5; min-height: 0; padding: 9px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; position: relative; }
.en h4 { font: 700 .82rem var(--f-tit); }
.en small { font: 400 .54rem var(--f-mono); color: var(--fraco); display: block; }
.en .est { font: 700 .5rem var(--f-mono); color: var(--cor2); }
.en.ok .est { color: #0b7a4b; }
.o-tit { height: 6px; width: 60%; background: var(--tinta); border-radius: 1px; }
.o-ln { height: 3px; background: var(--sup2); border-radius: 1px; }
.o-cit { font: italic 400 .5rem/1.25 var(--f-cit); background: var(--mt-am); padding: 2px 3px; border-radius: 2px; }
.o-sec { margin-top: auto; font: 600 .46rem var(--f-mono); color: var(--fraco); }
.slides { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.15fr 1fr; gap: 4px; flex: 1; min-height: 0; }
.sl { border: 1.5px solid var(--tinta); border-radius: 2px; background: var(--sup); padding: 5px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.sl.capa { grid-column: 1 / -1; background: var(--tinta); justify-content: flex-end; }
.c-t { display: block; height: 6px; width: 72%; background: var(--mt-am); border-radius: 1px; }
.c-s { display: block; height: 3px; width: 44%; background: rgba(244, 240, 230, .6); border-radius: 1px; }
.sl.verb b { font: 700 1rem/0.7 var(--f-cit); color: var(--cor2); }
.v-m { display: block; height: 5px; width: 92%; background: var(--mt-am); border-radius: 1px 4px 2px 5px; }
.v-l { display: block; height: 3px; width: 64%; background: var(--sup2); border-radius: 1px; }
.sl.verb span { margin-top: auto; font: 700 .4rem var(--f-mono); color: var(--cor); }
.sl.tema { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 3px; }
.sl.tema > i { display: block; height: 6px; border-radius: 3px; border: 1px solid var(--tinta); }
.p-a { width: 46%; background: var(--mt-lj); } .p-b { width: 30%; background: var(--mt-az); } .p-c { width: 34%; background: var(--mt-vd); } .p-d { width: 42%; background: var(--mt-rs); }
.polo { width: 100%; margin-top: auto; height: 2px; background: var(--tinta); display: flex; justify-content: space-between; align-items: center; }
.polo u { width: 6px; height: 6px; border-radius: 50%; background: var(--cor2); border: 1px solid var(--tinta); text-decoration: none; }
.vozes { display: flex; gap: 6px; align-items: center; }
.vozes i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--tinta); background: var(--mt-az); flex: none; }
.vozes i + i { background: var(--mt-lj); margin-left: -12px; }
.vozes span { font: 600 .5rem var(--f-mono); }
.ondas { flex: 1; min-height: 16px; display: flex; align-items: center; gap: 2px; }
.ondas i { flex: 1; min-width: 2px; background: var(--tinta); border-radius: 1px; animation: onda 1s ease-in-out infinite; }
.url { font: 600 .46rem var(--f-mono); border: 1.5px solid var(--tinta); border-radius: 8px; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selo { align-self: flex-start; font: 700 .44rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; background: var(--mt-vd); border: 1.5px solid var(--tinta); padding: 2px 4px; border-radius: 2px; }
.mini { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.mini i { background: var(--sup2); border-radius: 1px; }
.mini i:nth-child(2) { background: var(--mt-am); }
.mini i:nth-child(4) { background: var(--mt-lj); }

@keyframes pisca { 50% { opacity: 0; } }
@keyframes onda { 0%, 100% { height: 18%; } 50% { height: 86%; } }

@media (max-width: 1080px) { .heroi { grid-template-columns: minmax(0, 1fr); } .tcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tc:nth-child(-n+2) { border-bottom: 1.5px solid var(--tinta); } }
@media (max-width: 720px) {
  .tcs { grid-template-columns: minmax(0, 1fr); }
  .tc { border-bottom: 1.5px solid var(--tinta); }
  .palco { box-shadow: 5px 5px 0 var(--tinta); }
  .env { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
  .arq { padding: 6px 8px; }
  .arq:nth-child(n+4) { display: none; }
  .ag { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; }
  .ags { flex-direction: row; flex-wrap: wrap; gap: 3px; justify-content: flex-start; }
  .a { gap: 0; }
  .a em, .a span { display: none; }
  .a i { width: 12px; height: 12px; }
  .trilho { padding: 7px 9px; }
  .trilho-h { margin-bottom: 5px; }
  .pl { font-size: .7rem; margin-bottom: 5px; padding-right: 50px; }
  .pl:nth-child(n+5) { display: none; }
  .palco { aspect-ratio: auto; }
  .pc-aba b { font-size: .54rem; letter-spacing: 0; overflow-wrap: anywhere; }
  .obj { aspect-ratio: 5 / 4; }
  .curva { font-size: .54rem; padding-top: 6px; }
  .termos span { font-size: .62rem; }
  .passo-a p { font-size: .6rem; }
  .esp { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; }
  .perg { font-size: .7rem; }
  .tiras i { height: 11px; }
  .sess { gap: 6px; padding: 8px 10px; }
  .ents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pronto b { font-size: 1rem; }
  .dupla { gap: 18px; }
  .cx:first-child { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .perg .cursor, .ondas i { animation: none; } }