:root{
  color-scheme:light;
  --marfim:#F5F0E6; --superficie:#FBF8F2; --sutil:#EDE6D8;
  --tinta:#16333C; --tinta-2:#2E5A66; --tinta-3:#4A6B75;
  --coral:#D96B55; --coral-wash:#F8E7E1; --coral-linha:#E4A092;
  --salvia:#5F7E6B; --salvia-wash:#E3EBE4;
  --rule:#DED4C1; --rule-2:#C6B89E;
  --disp:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --sombra:0 1px 2px rgba(22,51,60,.05), 0 10px 28px -16px rgba(22,51,60,.24);
}
*{box-sizing:border-box}
body{margin:0;background:var(--marfim);color:var(--tinta);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
button{font-family:var(--sans)}
.disp{font-family:var(--disp);font-variation-settings:"SOFT" 20,"WONK" 1;letter-spacing:-.016em;line-height:1.06}
.lbl{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-3)}
.wrap{max-width:760px;margin:0 auto;padding:34px 22px 110px}
.wrap.larga{max-width:900px}
.oculto{display:none!important}

/* trilha do percurso */
.trilha-topo{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.pt{width:27px;height:27px;border-radius:50%;border:1px solid var(--rule-2);background:var(--superficie);
  display:flex;align-items:center;justify-content:center;font:500 12.5px/1 var(--sans);color:var(--tinta-3);
  text-decoration:none;transition:all .16s ease}
.pt:hover{border-color:var(--coral);color:var(--coral)}
.pt.feito{background:var(--salvia);border-color:var(--salvia);color:#fff}
.pt.aqui{background:var(--coral);border-color:var(--coral);color:#fff;font-weight:600}
.pt-lig{width:13px;height:1px;background:var(--rule-2)}
.pt-nome{font-size:12.5px;color:var(--tinta-3);margin-left:5px}

/* abertura */
.abre{display:flex;flex-direction:column;gap:24px}
.abre h1{font-size:clamp(36px,7.2vw,58px)}
.abre h1 em{font-style:italic;color:var(--coral)}
.lede{font-size:18px;line-height:1.62;color:var(--tinta-2);max-width:58ch}
.escala{display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.escala div{background:var(--superficie);padding:11px 17px;display:grid;
  grid-template-columns:30px 1fr;gap:14px;align-items:baseline;font-size:15.5px;color:var(--tinta-2)}
.escala b{font-family:var(--disp);font-size:21px;line-height:1;color:var(--coral);font-weight:500}
.cx{border:1px solid var(--rule);background:var(--superficie);border-radius:2px;
  padding:22px 24px;display:flex;flex-direction:column;gap:11px}
.cx.coral{border-left:2px solid var(--coral)}
.cx.salvia{border-left:2px solid var(--salvia)}
.cx.aviso-forte{border-left:2px solid var(--coral);background:var(--coral-wash)}
.cx p{font-size:15.5px;line-height:1.65;color:var(--tinta-2)}
.cx strong{color:var(--tinta);font-weight:600}
.cx a{color:var(--coral)}
.btn{font-size:15px;font-weight:500;background:var(--coral);color:#fff;border:1px solid var(--coral);
  padding:13px 26px;border-radius:2px;cursor:pointer;align-self:flex-start;text-decoration:none;
  display:inline-block;transition:opacity .18s ease,transform .12s ease}
.btn:hover{opacity:.9}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}
.btn2{background:transparent;color:var(--tinta);border-color:var(--rule-2)}
.btn2:hover{border-color:var(--tinta);opacity:1}
.btn-sm{padding:8px 15px;font-size:13.5px}
.acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
button:focus-visible,a:focus-visible,.lk:focus-visible,.op:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* progresso */
.topo{position:sticky;top:0;z-index:20;background:var(--marfim);
  padding:12px 0 11px;border-bottom:1px solid var(--rule);margin-bottom:22px}
.prog{display:flex;flex-direction:column;gap:8px}
.trilho{height:5px;background:var(--sutil);border-radius:2px;overflow:hidden}
.trilho i{display:block;height:100%;width:0;background:var(--coral);transition:width .28s ease}
.pinfo{display:flex;justify-content:space-between;font-size:12.5px;color:var(--tinta-3)}
.pinfo b{color:var(--tinta);font-weight:600}

/* item likert */
.item{border:1px solid var(--rule);background:var(--superficie);border-radius:2px;
  padding:18px 20px 15px;display:flex;flex-direction:column;gap:13px;margin-bottom:11px}
.item.ok{border-color:var(--rule-2);background:var(--sutil)}
.item-n{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3)}
.item-t{font-size:17px;line-height:1.45;max-width:56ch}
.lik{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.lk{background:var(--marfim);border:1px solid var(--rule);border-radius:2px;padding:10px 4px 8px;
  cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;color:var(--tinta-2);
  transition:all .16s ease}
.lk:hover{border-color:var(--coral);background:var(--coral-wash)}
.lk.on{background:var(--coral);border-color:var(--coral);color:#fff}
.lk b{font-family:var(--disp);font-size:18px;line-height:1;font-weight:500}
.lk span{font-size:9.5px;line-height:1.15;text-align:center}
@media(max-width:560px){.lk span{display:none}.lk{padding:12px 4px}}

/* par — escolha forçada entre dois */
.par{border:1px solid var(--rule);background:var(--superficie);border-radius:2px;
  padding:17px 18px 15px;display:flex;flex-direction:column;gap:12px;margin-bottom:11px}
.par.ok{border-color:var(--rule-2);background:var(--sutil)}
.par-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dois{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:600px){.dois{grid-template-columns:1fr}}
.op{background:var(--marfim);border:1px solid var(--rule);border-radius:2px;padding:14px 15px;
  cursor:pointer;text-align:left;font:400 15.5px/1.45 var(--sans);color:var(--tinta-2);
  transition:all .16s ease}
.op:hover{border-color:var(--coral);background:var(--coral-wash);color:var(--tinta)}
.op.on{background:var(--coral);border-color:var(--coral);color:#fff}

/* triade */
.tres{display:grid;grid-template-columns:1fr;gap:7px}
@media(min-width:640px){.tres{grid-template-columns:repeat(3,1fr)}}

/* gabarito vertical */
.gab{margin-top:26px;border:1px solid var(--rule);background:var(--superficie);
  border-radius:2px;padding:19px 20px 16px;display:flex;flex-direction:column;gap:13px;box-shadow:var(--sombra)}
.gab-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.gab-h .t{font-family:var(--disp);font-size:20px;line-height:1}
.gab-h .s{font-size:12.5px;color:var(--tinta-3)}
.cols{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.col{display:flex;flex-direction:column;gap:6px;align-items:center}
.col .n{font-family:var(--disp);font-size:16px;line-height:1;color:var(--tinta-3)}
.col .tubo{width:100%;height:74px;background:var(--sutil);border-radius:2px;position:relative;
  display:flex;align-items:flex-end;overflow:hidden}
.col .tubo i{display:block;width:100%;background:var(--tinta-3);transition:height .3s ease;height:0}
.col.top .tubo i{background:var(--coral)}
.col.top .n{color:var(--coral);font-weight:600}
.col .v{font-size:11.5px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.col.top .v{color:var(--coral);font-weight:600}

/* resultado */
.res{display:flex;flex-direction:column;gap:26px}
.hip{border:1px solid var(--rule);border-top:3px solid var(--coral);background:var(--superficie);
  border-radius:2px;padding:27px 27px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sombra)}
.hip.sa{border-top-color:var(--salvia)}
.hip h2{font-family:var(--disp);font-size:clamp(28px,5.2vw,44px);line-height:1.02}
.hip h2 b{font-weight:500;color:var(--coral)}
.hip.sa h2 b{color:var(--salvia)}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;border:1px solid var(--rule-2);color:var(--tinta-2);background:var(--marfim)}
.pill.co{color:var(--coral);border-color:var(--coral);background:var(--coral-wash)}
.pill.sa{color:var(--salvia);border-color:var(--salvia);background:var(--salvia-wash)}
.placar{display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.pl{background:var(--superficie);padding:12px 16px;display:grid;
  grid-template-columns:28px 1fr 74px;gap:13px;align-items:center}
.pl.p1{background:var(--coral-wash)}
.pl .n{font-family:var(--disp);font-size:20px;line-height:1;color:var(--tinta-3)}
.pl.p1 .n{color:var(--coral)}
.pl .nm{font-size:14.5px;color:var(--tinta-2)}
.pl.p1 .nm{color:var(--tinta);font-weight:600}
.pl .v{font-size:13px;color:var(--tinta-3);text-align:right;font-variant-numeric:tabular-nums}
.pl.p1 .v{color:var(--coral);font-weight:600}
.pl .bar{grid-column:1/-1;height:3px;background:var(--sutil);border-radius:2px;overflow:hidden}
.pl .bar i{display:block;height:100%;background:var(--tinta-3)}
.pl.p1 .bar i{background:var(--coral)}
.grid2{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:2px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.cel{background:var(--superficie);padding:18px 20px;display:flex;flex-direction:column;gap:7px}
.cel .k{font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3)}
.cel .v{font-size:15.5px;line-height:1.55;color:var(--tinta)}
.aviso{font-size:13px;color:var(--tinta-3);line-height:1.6;max-width:64ch}
.aviso b{color:var(--tinta-2);font-weight:600}

/* faixas (nível) */
.faixas{display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.fx{background:var(--superficie);padding:15px 18px;display:grid;grid-template-columns:1fr 58px;
  gap:10px;align-items:center}
.fx.on{background:var(--coral-wash)}
.fx .t{font-size:15px;color:var(--tinta-2)}
.fx.on .t{color:var(--tinta);font-weight:600}
.fx .v{font-size:13px;text-align:right;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.fx.on .v{color:var(--coral);font-weight:600}
.fx .bar{grid-column:1/-1;height:4px;background:var(--sutil);border-radius:2px;overflow:hidden}
.fx .bar i{display:block;height:100%;background:var(--tinta-3);transition:width .3s ease}
.fx.on .bar i{background:var(--coral)}

/* seletor de tipo */
.sel9{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
@media(min-width:620px){.sel9{grid-template-columns:repeat(9,1fr)}}
.s9{background:var(--marfim);border:1px solid var(--rule);border-radius:2px;padding:11px 4px;
  cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:center;color:var(--tinta-2);
  transition:all .16s ease}
.s9:hover{border-color:var(--coral);background:var(--coral-wash)}
.s9 b{font-family:var(--disp);font-size:20px;line-height:1;font-weight:500}
.s9 span{font-size:9.5px;text-align:center;line-height:1.15}

/* cartões do percurso */
.etapas{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.etapas{grid-template-columns:1fr 1fr}}
.et{display:flex;flex-direction:column;gap:10px;background:var(--superficie);
  border:1px solid var(--rule);border-left:3px solid var(--rule-2);border-radius:2px;
  padding:21px 22px 19px;text-decoration:none;box-shadow:var(--sombra);
  transition:transform .16s ease,border-color .16s ease}
.et:hover{transform:translateY(-2px);border-left-color:var(--coral)}
.et.feito{border-left-color:var(--salvia)}
.et-h{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.et-n{font-family:var(--disp);font-size:15px;color:var(--tinta-3)}
.et.feito .et-n{color:var(--salvia)}
.et h3{font-family:var(--disp);font-size:25px;line-height:1.08}
.et .d{font-size:15px;line-height:1.55;color:var(--tinta-2);flex:1}
.et .est{font-size:13.5px;color:var(--tinta-3);border-top:1px dotted var(--rule-2);padding-top:10px}
.et .est b{color:var(--salvia);font-weight:600}
.et .go{font-size:14px;font-weight:500;color:var(--coral)}
.et.feito .go{color:var(--tinta-3)}
.marca{font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;border:1px solid var(--rule-2);color:var(--tinta-3)}
.marca.ok{color:var(--salvia);border-color:var(--salvia);background:var(--salvia-wash)}

.voltar{position:fixed;left:14px;bottom:14px;z-index:99;font:500 13px/1 var(--sans);
  text-decoration:none;background:var(--superficie);color:var(--tinta-2);border:1px solid var(--rule);
  border-radius:2px;padding:9px 14px;box-shadow:0 2px 10px -4px rgba(22,51,60,.3)}
.voltar:hover{border-color:var(--coral);color:var(--coral)}
@media print{.voltar,.topo,.acts,.trilha-topo{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* envio para a instrutora */
.campos{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}
@media(min-width:560px){.campos{grid-template-columns:1.4fr 1fr}}
.campos label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--tinta-3)}
.campos input{font:400 16px/1.4 var(--sans);color:var(--tinta);background:var(--marfim);
  border:1px solid var(--rule-2);border-radius:2px;padding:11px 13px;width:100%}
.campos input:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:var(--coral)}
.env-ok{border-left-color:var(--salvia)!important}
