/* ==========================================================================
   MUNDO DO TRABALHO — Etapa 1: Autoconhecimento
   Sistema visual "Painel de Oficina"
   Sem dependencias externas. Funciona offline, via file://
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* Chapa de maquina */
  --graphite:#191C21;
  --panel:#21252B;
  --panel-2:#2A2F36;
  --edge:#3A414B;
  --edge-soft:#2C323A;

  /* Tinta */
  --chalk:#E9E7E2;
  --zinc:#939AA5;

  /* Tres vozes na sala */
  --sinal:#FFB000;     /* a voz do curriculo: PARTIU! SE LIGA! DEMORO! BORA LA! FECHO! */
  --digital:#35D0E8;   /* a camada digital: GitHub, IA, Canva, portfolio */
  --voce:#46D77F;      /* voce: suas respostas, seu progresso, concluido */

  --sinal-dim:rgba(255,176,0,.14);
  --digital-dim:rgba(53,208,232,.13);
  --voce-dim:rgba(70,215,127,.13);

  --rail:clamp(46px, 4.4vw, 76px);
  --pad-x:clamp(28px, 5vw, 92px);
  --pad-y:clamp(26px, 4.4vh, 68px);

  --ease:cubic-bezier(.22,.61,.36,1);

  color-scheme:dark;
}

[data-theme="light"]{
  --graphite:#F3F4F6;
  --panel:#FFFFFF;
  --panel-2:#E7EAEE;
  --edge:#C6CCD4;
  --edge-soft:#DCE1E7;
  --chalk:#171A1F;
  --zinc:#59616B;
  --sinal:#9A6000;
  --digital:#0B6C7E;
  --voce:#0F6B42;
  --sinal-dim:rgba(154,96,0,.10);
  --digital-dim:rgba(11,108,126,.09);
  --voce-dim:rgba(15,107,66,.09);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--graphite);
  color:var(--chalk);
  font-family:ui-sans-serif,system-ui,"Segoe UI",Cantarell,"Noto Sans",Roboto,Helvetica,Arial,sans-serif;
  font-size:clamp(17px,1.32vw,25px);
  line-height:1.5;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Tipografia --------------------------------------------------------- */
/* Escala modular ~1.5 (quinta justa), comprimida no corpo para leitura a distancia */

h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}

.display{
  font-size:clamp(2.7rem,5.6vw,5.6rem);
  font-weight:900;
  line-height:.96;
  letter-spacing:-.035em;
}
.title{
  font-size:clamp(2rem,3.7vw,3.7rem);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.028em;
  max-width:19ch;
}
.subtitle{
  font-size:clamp(1.15rem,1.72vw,1.85rem);
  font-weight:500;
  line-height:1.38;
  color:var(--zinc);
  max-width:56ch;
}
.lead{
  font-size:clamp(1.1rem,1.58vw,1.7rem);
  line-height:1.5;
  max-width:60ch;
}
.small{
  font-size:clamp(.9rem,1.04vw,1.12rem);
  line-height:1.45;
  color:var(--zinc);
  max-width:70ch;
}
.tiny{
  font-size:clamp(.78rem,.86vw,.95rem);
  line-height:1.4;
  color:var(--zinc);
}
code,kbd,samp,.mono{
  font-family:ui-monospace,"Cascadia Code",Consolas,"DejaVu Sans Mono",Menlo,monospace;
  font-size:.92em;
}
strong{font-weight:700;color:var(--chalk)}
em{font-style:italic}

/* --- Palco -------------------------------------------------------------- */
.deck{position:fixed;inset:0}

.slide{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  justify-content:center;
  padding:var(--pad-y) var(--pad-x) calc(var(--pad-y) + 18px) calc(var(--rail) + var(--pad-x));
  overflow:hidden;
}
.slide.is-current{display:flex;animation:settle .34s var(--ease) both}

@keyframes settle{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

.slide__body{width:100%;max-width:1520px;margin:0 auto}

/* Espacamento vertical interno consistente */
.stack > * + *{margin-top:clamp(14px,1.9vh,30px)}
.stack-tight > * + *{margin-top:clamp(8px,1vh,14px)}
.stack-loose > * + *{margin-top:clamp(22px,3.4vh,48px)}

/* --- Regua lateral (bloco atual) ---------------------------------------- */
.rail{
  position:fixed;
  left:0;top:0;bottom:0;
  width:var(--rail);
  background:var(--panel);
  border-right:1px solid var(--edge-soft);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:18px 0 26px;
  z-index:30;
}
.rail__mark{
  width:16px;height:16px;
  border:2px solid var(--sinal);
  border-radius:50%;
  flex:none;
}
.rail__name{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:clamp(.7rem,.78vw,.88rem);
  font-weight:700;
  letter-spacing:.16em;
  color:var(--zinc);
  white-space:nowrap;
  overflow:hidden;
  max-height:60vh;
}
.rail__num{
  font-size:clamp(1.5rem,2.2vw,2.3rem);
  font-weight:900;
  letter-spacing:-.05em;
  color:var(--sinal);
  line-height:1;
}

/* --- Escala de progresso (ticks) ---------------------------------------- */
.ticks{
  position:fixed;
  left:var(--rail);right:0;bottom:0;
  height:18px;
  display:flex;
  align-items:flex-end;
  gap:1px;
  padding:0 2px 3px;
  z-index:30;
  background:linear-gradient(to top,var(--graphite) 55%,transparent);
}
.tick{
  flex:1 1 0;
  height:3px;
  border:0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  background:var(--edge-soft);
  transition:height .18s var(--ease),background .18s var(--ease);
  cursor:pointer;
  min-width:1px;
}
.tick[data-block="1"].is-seen{background:var(--sinal)}
.tick[data-block="2"].is-seen{background:var(--digital)}
.tick[data-block="3"].is-seen{background:var(--voce)}
.tick.is-current{height:13px;background:var(--chalk)}
.tick:hover{height:9px}

/* --- Contador ----------------------------------------------------------- */
.counter{
  position:fixed;
  right:clamp(14px,2vw,28px);
  bottom:clamp(20px,2.6vh,34px);
  font-size:clamp(.78rem,.9vw,1rem);
  font-weight:700;
  color:var(--zinc);
  letter-spacing:.04em;
  z-index:31;
  font-variant-numeric:tabular-nums;
}
.counter b{color:var(--chalk)}

/* --- Marcadores do livro ------------------------------------------------ */
.marker{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:clamp(.95rem,1.24vw,1.35rem);
  font-weight:900;
  letter-spacing:.03em;
  padding:.3em .8em;
  border:2px solid var(--sinal);
  color:var(--sinal);
  background:var(--sinal-dim);
}
.marker--digital{border-color:var(--digital);color:var(--digital);background:var(--digital-dim)}
.marker--voce{border-color:var(--voce);color:var(--voce);background:var(--voce-dim)}

.tagline{
  font-size:clamp(.82rem,.96vw,1.05rem);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--zinc);
}

/* --- Abertura de bloco -------------------------------------------------- */
.slide--opener{justify-content:flex-end;padding-bottom:clamp(60px,9vh,130px)}
.slide--opener .opener__num{
  position:absolute;
  right:-.06em;
  top:50%;
  transform:translateY(-54%);
  font-size:min(62vh,44vw);
  font-weight:900;
  line-height:.72;
  letter-spacing:-.07em;
  color:var(--panel-2);
  pointer-events:none;
  user-select:none;
}
.slide--opener .slide__body{position:relative;z-index:1}
.hazard{
  height:clamp(16px,2vh,24px);
  width:min(100%,560px);
  background:repeating-linear-gradient(120deg,var(--sinal) 0 14px,transparent 14px 30px);
}
.hazard--digital{background:repeating-linear-gradient(120deg,var(--digital) 0 14px,transparent 14px 30px)}
.hazard--voce{background:repeating-linear-gradient(120deg,var(--voce) 0 14px,transparent 14px 30px)}

/* --- Capa --------------------------------------------------------------- */
.slide--cover{justify-content:center}
.cover__rule{
  height:5px;width:min(100%,420px);
  background:linear-gradient(90deg,var(--sinal) 0 33.3%,var(--digital) 33.3% 66.6%,var(--voce) 66.6% 100%);
}

/* --- Paineis ------------------------------------------------------------ */
.panel{
  background:var(--panel);
  border:1px solid var(--edge-soft);
  border-left:4px solid var(--edge);
  padding:clamp(14px,1.7vw,26px) clamp(16px,2vw,30px);
}
.panel--sinal{border-left-color:var(--sinal)}
.panel--digital{border-left-color:var(--digital)}
.panel--voce{border-left-color:var(--voce)}
.panel__head{
  font-size:clamp(.95rem,1.22vw,1.32rem);
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:.35em;
}

/* Grades */
.grid{display:grid;gap:clamp(10px,1.3vw,20px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid--asym{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.grid--wide-left{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}

/* --- Listas ------------------------------------------------------------- */
.list{list-style:none;padding:0;display:flex;flex-direction:column;gap:clamp(9px,1.25vh,18px)}
.list li{
  display:flex;
  gap:.75em;
  align-items:flex-start;
  font-size:clamp(1.02rem,1.44vw,1.55rem);
  line-height:1.4;
  max-width:62ch;
}
.list li::before{
  content:"";
  flex:none;
  width:.58em;height:.58em;
  margin-top:.45em;
  background:var(--sinal);
}
.list--digital li::before{background:var(--digital)}
.list--voce li::before{background:var(--voce)}
.list--steps{counter-reset:step}
.list--steps li::before{
  counter-increment:step;
  content:counter(step);
  width:1.55em;height:1.55em;
  margin-top:.05em;
  background:none;
  border:2px solid var(--digital);
  color:var(--digital);
  font-weight:900;
  font-size:.72em;
  display:grid;
  place-items:center;
}

/* Revelacao progressiva */
[data-reveal]{
  opacity:.16;
  filter:blur(1.2px);
  transition:opacity .3s var(--ease),filter .3s var(--ease),transform .3s var(--ease);
  transform:translateY(4px);
}
[data-reveal].is-on{opacity:1;filter:none;transform:none}

/* --- Cartoes que viram --------------------------------------------------- */
.flip{
  perspective:1200px;
  cursor:pointer;
  border:0;padding:0;background:none;
  font:inherit;color:inherit;
  text-align:left;
  min-height:clamp(150px,22vh,260px);
  /* grid faz o .flip__inner esticar ate a altura do botao. Sem isso o
     botao nao tem altura definida, o height:100% do filho nao resolve e
     as faces absolutas colapsam. */
  display:grid;
}
.flip__inner{
  position:relative;
  transition:transform .48s var(--ease);
  transform-style:preserve-3d;
}
.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
.flip__face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.4em;
  padding:clamp(14px,1.7vw,26px);
  border:1px solid var(--edge);
  background:var(--panel);
}
.flip__face--front{border-top:4px solid var(--sinal)}
.flip__face--back{
  transform:rotateY(180deg);
  background:var(--panel-2);
  border-top:4px solid var(--sinal);
  justify-content:flex-start;
  overflow:auto;
}
.flip__word{
  font-size:clamp(1.15rem,1.9vw,2.05rem);
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--sinal);
}
.flip__hint{font-size:clamp(.75rem,.86vw,.95rem);color:var(--zinc);font-weight:600}
.flip__text{font-size:clamp(.92rem,1.14vw,1.22rem);line-height:1.42}
.flip--digital .flip__face{border-top-color:var(--digital)}
.flip--digital .flip__word{color:var(--digital)}
.flip--voce .flip__face{border-top-color:var(--voce)}
.flip--voce .flip__word{color:var(--voce)}

/* --- Botoes / chips ------------------------------------------------------ */
.btn{
  font:inherit;
  font-weight:700;
  font-size:clamp(.88rem,1.04vw,1.1rem);
  padding:.55em 1.2em;
  border-radius:999px;
  border:2px solid var(--edge);
  background:var(--panel);
  color:var(--chalk);
  cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.btn:hover{border-color:var(--chalk)}
.btn--digital{border-color:var(--digital);color:var(--digital)}
.btn--digital:hover{background:var(--digital-dim)}
.btn--voce{border-color:var(--voce);color:var(--voce)}
.btn--voce:hover{background:var(--voce-dim)}
.btn:focus-visible,.flip:focus-visible,.tick:focus-visible,.tab:focus-visible,
.adj:focus-visible,.quiz__opt:focus-visible,.check:focus-visible,.quad:focus-visible{
  outline:3px solid var(--digital);
  outline-offset:3px;
}

.chips{display:flex;flex-wrap:wrap;gap:.5em}
.chip{
  font-size:clamp(.8rem,.96vw,1.02rem);
  font-weight:700;
  padding:.3em .85em;
  border-radius:999px;
  border:1.5px solid var(--edge);
  color:var(--zinc);
}
.chip--sinal{border-color:var(--sinal);color:var(--sinal)}
.chip--digital{border-color:var(--digital);color:var(--digital)}
.chip--voce{border-color:var(--voce);color:var(--voce)}

/* --- Abas --------------------------------------------------------------- */
.tabs{display:flex;flex-wrap:wrap;gap:.5em;border-bottom:1px solid var(--edge-soft);padding-bottom:.7em}
.tab{
  font:inherit;font-weight:700;
  font-size:clamp(.86rem,1.04vw,1.12rem);
  padding:.45em 1em;
  border:1.5px solid var(--edge-soft);
  background:none;color:var(--zinc);
  cursor:pointer;
  transition:.16s var(--ease);
}
.tab:hover{color:var(--chalk)}
.tab.is-active{background:var(--sinal);border-color:var(--sinal);color:var(--graphite)}
.tabpane{display:none}
.tabpane.is-active{display:block;animation:settle .26s var(--ease) both}

/* --- Codigo ------------------------------------------------------------- */
.code{
  background:var(--panel-2);
  border:1px solid var(--edge-soft);
  border-left:4px solid var(--digital);
  padding:clamp(12px,1.4vw,20px) clamp(14px,1.7vw,24px);
  font-family:ui-monospace,"Cascadia Code",Consolas,"DejaVu Sans Mono",Menlo,monospace;
  font-size:clamp(.82rem,1vw,1.08rem);
  line-height:1.62;
  white-space:pre-wrap;
  overflow:auto;
  max-height:50vh;
  color:var(--chalk);
}
.code .c-key{color:var(--digital)}
.code .c-dim{color:var(--zinc)}

/* --- Previa de pagina de exemplo ---------------------------------------- */
.preview{display:flex;flex-direction:column;gap:.7em;min-width:0}
.preview__frame{
  display:block;
  width:100%;
  height:clamp(190px,36vh,420px);
  border:1px solid var(--edge-soft);
  border-left:4px solid var(--digital);
  background:var(--panel-2);
  color-scheme:light dark;
}
.preview .btn{align-self:start}

.copyrow{display:flex;align-items:center;gap:.8em;flex-wrap:wrap}
.copyrow__ok{color:var(--voce);font-weight:700;font-size:.92rem;opacity:0;transition:opacity .2s}
.copyrow__ok.is-on{opacity:1}

/* --- Tabela de pontos --------------------------------------------------- */
.score{width:100%;border-collapse:collapse;font-size:clamp(.88rem,1.16vw,1.24rem)}
.score th,.score td{
  text-align:left;
  padding:.62em .8em;
  border-bottom:1px solid var(--edge-soft);
  vertical-align:top;
}
.score th{font-weight:800;color:var(--zinc);font-size:.88em;border-bottom-color:var(--edge)}
.score td:last-child,.score th:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.score tbody tr:hover{background:var(--panel)}
.score .pts{font-weight:900;color:var(--voce)}
.score tfoot td{font-weight:900;border-bottom:0;padding-top:.9em}
.score tfoot .pts{color:var(--sinal);font-size:1.15em}

/* --- Ficha de entrega --------------------------------------------------- */
.ficha{
  border:2px solid var(--voce);
  background:var(--voce-dim);
  padding:clamp(14px,1.8vw,26px);
}
.ficha__pts{
  font-size:clamp(2.2rem,4.6vw,4.4rem);
  font-weight:900;
  line-height:.9;
  letter-spacing:-.05em;
  color:var(--voce);
}
.rubric{display:flex;flex-direction:column;gap:.55em}
.rubric__row{
  display:flex;justify-content:space-between;gap:1em;
  font-size:clamp(.92rem,1.16vw,1.24rem);
  padding-bottom:.5em;
  border-bottom:1px solid var(--edge-soft);
}
.rubric__row b{color:var(--voce);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Curtigrama --------------------------------------------------------- */
.curti{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;background:var(--edge);border:1px solid var(--edge)}
.quad{
  background:var(--panel);
  border:0;
  padding:clamp(14px,2vw,30px);
  min-height:clamp(120px,19vh,210px);
  text-align:left;
  font:inherit;color:inherit;
  cursor:pointer;
  transition:background .18s var(--ease);
  display:flex;flex-direction:column;gap:.35em;justify-content:center;
}
.quad:hover{background:var(--panel-2)}
.quad.is-open{background:var(--panel-2)}
.quad__axis{font-size:clamp(.78rem,.94vw,1rem);font-weight:700;color:var(--zinc);letter-spacing:.06em}
.quad__name{font-size:clamp(1.3rem,2.3vw,2.4rem);font-weight:900;letter-spacing:-.03em}
.quad__desc{font-size:clamp(.88rem,1.06vw,1.12rem);color:var(--zinc);line-height:1.4;max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.quad.is-open .quad__desc{max-height:12em}
.quad:nth-child(1) .quad__name{color:var(--voce)}
.quad:nth-child(2) .quad__name{color:var(--digital)}
.quad:nth-child(3) .quad__name{color:var(--sinal)}
.quad:nth-child(4) .quad__name{color:var(--chalk)}

/* --- Seletor de adjetivos ----------------------------------------------- */
.adjgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.adj{
  font:inherit;font-weight:700;
  font-size:clamp(.74rem,.96vw,1.04rem);
  padding:.65em .3em;
  border:1.5px solid var(--edge-soft);
  background:var(--panel);
  color:var(--zinc);
  cursor:pointer;
  transition:.14s var(--ease);
  text-align:center;
}
.adj:hover{color:var(--chalk);border-color:var(--edge)}
.adj.is-picked{background:var(--voce);border-color:var(--voce);color:var(--graphite)}
.adj.is-locked{opacity:.34;cursor:not-allowed}
.adjbar{display:flex;align-items:center;gap:1em;flex-wrap:wrap}
.adjcount{font-weight:900;font-size:clamp(1rem,1.3vw,1.4rem);font-variant-numeric:tabular-nums}
.adjcount.is-full{color:var(--voce)}

/* --- Quiz --------------------------------------------------------------- */
.quiz{display:flex;flex-direction:column;gap:clamp(8px,1.1vh,14px)}
.quiz__q{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:.6em;
  align-items:center;
  border:1px solid var(--edge-soft);
  background:var(--panel);
  padding:clamp(8px,1vw,14px) clamp(12px,1.4vw,20px);
}
.quiz__text{font-size:clamp(.94rem,1.24vw,1.34rem);line-height:1.35}
.quiz__opt{
  font:inherit;font-weight:800;
  font-size:clamp(.78rem,.94vw,1rem);
  padding:.42em 1em;
  border-radius:999px;
  border:1.5px solid var(--edge);
  background:none;color:var(--zinc);
  cursor:pointer;transition:.14s var(--ease);
}
.quiz__opt:hover{color:var(--chalk);border-color:var(--chalk)}
.quiz__q.is-answered .quiz__opt{pointer-events:none;opacity:.45}
.quiz__q.is-answered .quiz__opt.is-right{opacity:1;background:var(--voce);border-color:var(--voce);color:var(--graphite)}
.quiz__q.is-answered .quiz__opt.is-wrong-pick{opacity:1;border-color:var(--sinal);color:var(--sinal)}
.quiz__why{
  grid-column:1/-1;
  font-size:clamp(.84rem,1vw,1.06rem);
  color:var(--zinc);
  line-height:1.4;
  max-height:0;overflow:hidden;
  transition:max-height .3s var(--ease),margin .3s var(--ease);
}
.quiz__q.is-answered .quiz__why{max-height:10em;margin-top:.4em}

/* --- Checklist ---------------------------------------------------------- */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.check{
  display:flex;align-items:center;gap:.7em;
  font:inherit;
  font-size:clamp(.88rem,1.08vw,1.16rem);
  text-align:left;
  padding:.6em .9em;
  border:1px solid var(--edge-soft);
  background:var(--panel);
  color:var(--chalk);
  cursor:pointer;
  transition:.14s var(--ease);
}
.check__box{
  flex:none;width:1.25em;height:1.25em;
  border:2px solid var(--edge);
  display:grid;place-items:center;
  font-size:.8em;font-weight:900;color:transparent;
}
.check.is-done{border-color:var(--voce);background:var(--voce-dim)}
.check.is-done .check__box{border-color:var(--voce);background:var(--voce);color:var(--graphite)}
.check.is-done .check__label{text-decoration:line-through;text-decoration-color:var(--voce);opacity:.7}
.check__pts{margin-left:auto;font-weight:800;color:var(--voce);font-size:.85em;white-space:nowrap}
.progressbar{height:10px;background:var(--panel-2);border:1px solid var(--edge-soft)}
.progressbar__fill{height:100%;width:0;background:var(--voce);transition:width .35s var(--ease)}

/* --- Cronometro --------------------------------------------------------- */
.timer{display:flex;align-items:center;gap:.8em;flex-wrap:wrap}
.timer__clock{
  font-family:ui-monospace,"Cascadia Code",Consolas,"DejaVu Sans Mono",monospace;
  font-size:clamp(2rem,4vw,3.8rem);
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--sinal);
  line-height:1;
}
.timer__clock.is-out{color:var(--chalk);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

/* --- Carrossel de perguntas --------------------------------------------- */
.carousel{
  border:1px solid var(--edge);
  border-left:4px solid var(--voce);
  background:var(--panel);
  padding:clamp(20px,3vw,44px);
  min-height:clamp(150px,24vh,260px);
  display:flex;flex-direction:column;justify-content:center;gap:1em;
}
.carousel__q{
  font-size:clamp(1.5rem,3vw,3rem);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.025em;
  max-width:24ch;
}
.carousel__nav{display:flex;align-items:center;gap:1em}
.carousel__pos{font-weight:800;color:var(--zinc);font-variant-numeric:tabular-nums}

/* --- Anatomia (elementos numerados de um artefato) ---------------------- */
.anatomy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.1vw,16px)}
.anat{
  border:1px solid var(--edge-soft);
  background:var(--panel);
  padding:clamp(12px,1.5vw,22px);
  display:flex;flex-direction:column;gap:.3em;
  border-top:3px solid var(--edge);
}
.anat:nth-child(3n+1){border-top-color:var(--sinal)}
.anat:nth-child(3n+2){border-top-color:var(--digital)}
.anat:nth-child(3n+3){border-top-color:var(--voce)}
.anat__k{font-size:clamp(.94rem,1.2vw,1.28rem);font-weight:900;letter-spacing:-.01em}
.anat__v{font-size:clamp(.84rem,1.02vw,1.1rem);color:var(--zinc);line-height:1.38}

/* --- Arvore das profissoes ---------------------------------------------- */
.tree{display:flex;flex-direction:column;align-items:center;gap:0}
.tree__row{display:flex;gap:clamp(6px,1vw,18px);justify-content:center;flex-wrap:wrap}
.tree__node{
  border:1px solid var(--edge);
  background:var(--panel);
  padding:.55em .8em;
  text-align:center;
  min-width:clamp(88px,9vw,150px);
}
.tree__node b{display:block;font-size:clamp(.82rem,.98vw,1.06rem);font-weight:800}
.tree__node span{display:block;font-size:clamp(.72rem,.84vw,.9rem);color:var(--zinc);line-height:1.3}
.tree__node--me{border-color:var(--voce);background:var(--voce-dim)}
.tree__node--me b{color:var(--voce)}
.tree__link{width:2px;height:clamp(14px,2.2vh,28px);background:var(--edge)}

/* --- Overview ----------------------------------------------------------- */
.overview{
  position:fixed;inset:0;
  background:var(--graphite);
  z-index:60;
  display:none;
  flex-direction:column;
  padding:clamp(18px,2.6vh,34px) clamp(20px,3vw,44px);
  gap:16px;
}
.overview.is-on{display:flex}
.overview__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:8px;
  overflow:auto;
  padding-right:6px;
}
.ovcard{
  border:1px solid var(--edge-soft);
  background:var(--panel);
  border-left:3px solid var(--edge);
  padding:.7em .85em;
  text-align:left;
  font:inherit;color:inherit;
  cursor:pointer;
  display:flex;flex-direction:column;gap:.15em;
  min-height:68px;
  transition:.14s var(--ease);
}
.ovcard:hover{background:var(--panel-2);border-color:var(--chalk)}
.ovcard.is-current{border-color:var(--chalk);background:var(--panel-2)}
.ovcard[data-block="1"]{border-left-color:var(--sinal)}
.ovcard[data-block="2"]{border-left-color:var(--digital)}
.ovcard[data-block="3"]{border-left-color:var(--voce)}
.ovcard__n{font-size:.72rem;font-weight:800;color:var(--zinc);font-variant-numeric:tabular-nums}
.ovcard__t{font-size:.86rem;font-weight:700;line-height:1.25}

/* --- Ajuda -------------------------------------------------------------- */
.help{
  position:fixed;inset:0;
  background:rgba(0,0,0,.72);
  z-index:70;
  display:none;
  place-items:center;
  padding:24px;
}
.help.is-on{display:grid}
.help__box{
  background:var(--panel);
  border:1px solid var(--edge);
  border-top:5px solid var(--sinal);
  padding:clamp(22px,3vw,40px);
  max-width:620px;width:100%;
}
.keys{display:grid;grid-template-columns:auto 1fr;gap:.6em 1.2em;align-items:center;margin-top:1.2em}
kbd{
  background:var(--panel-2);
  border:1px solid var(--edge);
  border-bottom-width:3px;
  padding:.18em .6em;
  font-weight:700;
  font-size:.86rem;
  white-space:nowrap;
}

/* --- Utilitarios --------------------------------------------------------- */
.row{display:flex;gap:clamp(10px,1.4vw,22px);align-items:center;flex-wrap:wrap}
.row > .title{max-width:28ch}
.row--between{justify-content:space-between}
.muted{color:var(--zinc)}
.sinal{color:var(--sinal)}
.digital{color:var(--digital)}
.voce{color:var(--voce)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hr{height:1px;background:var(--edge-soft);border:0}
.src{
  position:absolute;
  left:calc(var(--rail) + var(--pad-x));
  bottom:calc(var(--pad-y) * .52);
  font-size:clamp(.66rem,.76vw,.82rem);
  color:var(--zinc);
  opacity:.65;
}

/* --- Projetores baixos (768px de altura e similares) --------------------- */
/* Sem isto, slides densos passam do rodape e o conteudo e cortado em sala.   */
@media (max-height:860px){
  :root{
    --pad-y:clamp(16px,2.8vh,34px);
    --pad-x:clamp(24px,4vw,68px);
  }
  .stack > * + *{margin-top:clamp(9px,1.5vh,20px)}
  .stack-loose > * + *{margin-top:clamp(13px,2.2vh,30px)}
  .stack-tight > * + *{margin-top:clamp(5px,.8vh,10px)}
  .display{font-size:clamp(2.1rem,4.4vw,4.2rem)}
  .title{font-size:clamp(1.62rem,2.9vw,2.9rem)}
  .subtitle{font-size:clamp(1rem,1.4vw,1.5rem)}
  .lead{font-size:clamp(.98rem,1.3vw,1.4rem);line-height:1.42}
  .list{gap:clamp(6px,.9vh,12px)}
  .list li{font-size:clamp(.94rem,1.24vw,1.3rem);line-height:1.34}
  .code{max-height:44vh;font-size:clamp(.72rem,.88vw,.95rem);line-height:1.5}
  .preview__frame{height:clamp(150px,30vh,320px)}
  .panel{padding:clamp(10px,1.3vw,20px) clamp(12px,1.6vw,24px)}
  .flip{min-height:clamp(120px,19vh,210px)}
  .carousel{min-height:clamp(120px,20vh,210px);padding:clamp(16px,2.4vw,34px)}
  .carousel__q{font-size:clamp(1.3rem,2.6vw,2.6rem)}
  .quad{min-height:clamp(96px,15vh,170px)}
  .score th,.score td{padding:.48em .7em}
  .rubric__row{padding-bottom:.38em}
  .check{padding:.48em .8em}
}

/* --- Projetores 4:3 antigos (1024x768) ---------------------------------- */
@media (max-width:1100px) and (max-height:860px){
  .display{font-size:clamp(1.9rem,4vw,3.4rem)}
  .title{font-size:clamp(1.45rem,2.7vw,2.4rem)}
  .anatomy{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- Responsivo (laptop estreito) --------------------------------------- */
@media (max-width:820px){
  .grid-3,.grid-4,.grid-5,.anatomy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--asym,.grid--wide-left,.checks{grid-template-columns:minmax(0,1fr)}
  .adjgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rail__name{display:none}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4,.grid-5,.anatomy{grid-template-columns:minmax(0,1fr)}
  .adjgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .curti{grid-template-columns:minmax(0,1fr)}
}

/* --- Movimento reduzido -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .slide.is-current{animation:none}
}

/* --- Impressao ----------------------------------------------------------- */
@media print{
  body{overflow:visible;background:#fff;color:#000}
  .rail,.ticks,.counter,.overview,.help{display:none !important}
  .slide{position:static;display:flex !important;page-break-after:always;min-height:96vh;padding:24px}
}