/* Tratamentos (prefixo tr-): a escala de cores deitada. Cada tratamento é uma lâmina; a ativa se adianta. */
.tr-secao{background:var(--porcelana); overflow:hidden;
  --tr-dente:clamp(78px, 7.6vw, 110px); --tr-haste:74px; --tr-trilho:9px}
.tr-secao .wf-malha i:nth-child(1){left:-18%; top:-30%; width:70vmax; height:70vmax;
  background:radial-gradient(closest-side, #fbf8f1, #fbf8f100);
  background:radial-gradient(closest-side in oklch, oklch(.981 .011 90), oklch(.981 .011 90 / 0))}
.tr-secao .wf-malha i:nth-child(2){right:-20%; top:-40%; width:64vmax; height:64vmax; opacity:.8;
  background:radial-gradient(closest-side, #cdd8df, #e3e9ec00);
  background:radial-gradient(closest-side in oklch, oklch(.868 .02 236), oklch(.925 .009 228 / 0))}
.tr-secao .wf-malha i:nth-child(3){left:10%; bottom:-50%; width:80vmax; height:80vmax;
  background:radial-gradient(closest-side, #e6d8c0, #e6d8c000);
  background:radial-gradient(closest-side in oklch, oklch(.885 .034 86), oklch(.885 .034 86 / 0))}

.tr-cabeca{display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:var(--e3) var(--e5); align-items:end}
.tr-cabeca .wf-sobrelinha{grid-column:1 / -1; margin-bottom:var(--e2)}
.tr-cabeca .wf-apoio{max-width:27em; padding-bottom:.35em}

/* a escala */
.tr-escala-caixa{position:relative; margin-top:var(--e5)}
.tr-escala{list-style:none; margin:0 auto; padding:0; position:relative; display:grid; grid-template-columns:repeat(5, 1fr); max-width:62rem}
.tr-escala::after{content:""; position:absolute; z-index:2; left:0; right:0; top:calc(var(--tr-dente) * 1.233 + var(--tr-haste) + 14px); height:var(--tr-trilho); border-radius:var(--raio);
  background:linear-gradient(180deg, #46505d, var(--tinta) 55%, var(--tinta-3)); box-shadow:0 14px 22px -10px rgb(37 47 60 / .5), 0 1px 0 rgb(255 255 255 / .18) inset}
.tr-lamina::after{content:""; position:absolute; z-index:3; left:50%; top:calc(var(--tr-dente) * 1.233 + var(--tr-haste) + 14px - 2px); width:11px; height:6px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%, #0f151d, #2b3542 70%); box-shadow:0 0 0 1px rgb(246 241 231 / .22)}
.tr-lamina{position:relative; display:flex; justify-content:center; opacity:0; transform:translateY(18px); transition:opacity 1s var(--curva), transform 1s var(--curva); transition-delay:calc(var(--k) * 90ms + 120ms)}
.wf-rev.visto .tr-lamina, .tr-secao:not(.tr-js) .tr-lamina{opacity:1; transform:none}
.tr-aba{appearance:none; background:none; border:0; margin:0; padding:14px 0 0; font:inherit; color:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; width:100%; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.tr-aba:focus-visible{outline:none}
.tr-aba:focus-visible .tr-rotulo{outline:2px solid var(--tinta); outline-offset:4px; border-radius:var(--raio)}
.tr-corpo{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; transform:translateY(0); transition:transform .55s var(--curva)}
.tr-dente{width:var(--tr-dente); height:auto; overflow:visible; filter:drop-shadow(0 9px 9px rgb(37 47 60 / .2)) drop-shadow(0 1px 1px rgb(37 47 60 / .12)); transition:filter .55s var(--curva)}
.tr-dente use{fill:var(--tom)}
.tr-haste{position:relative; display:block; width:3px; height:var(--tr-haste); margin-top:-3px; border-radius:2px 2px 0 0;
  background:linear-gradient(90deg, #7d868e, #c9cfd4 42%, #a8b0b7 60%, #7a838b)}
.tr-haste::before{content:""; position:absolute; left:50%; top:-5px; width:13px; height:9px; transform:translateX(-50%); border-radius:2px 2px 3px 3px;
  background:linear-gradient(90deg, #7d868e, #d6dbdf 40%, #b8bfc5 62%, #7a838b); box-shadow:0 1px 2px rgb(37 47 60 / .35), 0 1px 0 rgb(255 255 255 / .35) inset}
.tr-rotulo{display:flex; flex-direction:column; align-items:center; gap:.2rem; margin-top:calc(var(--tr-trilho) + 18px); font-size:.92rem; font-weight:500; color:var(--tinta-2); text-align:center; line-height:1.3; transition:color .35s}
.tr-rotulo b{font-family:var(--f-titulo); font-weight:400; font-size:1.08rem; letter-spacing:.06em; color:var(--aco); transition:color .35s}
.tr-curto{display:none}
.tr-lamina.ativa .tr-corpo{transform:translateY(-15px)}
.tr-lamina.ativa .tr-dente{filter:drop-shadow(0 24px 18px rgb(37 47 60 / .26)) drop-shadow(0 2px 2px rgb(37 47 60 / .12))}
.tr-lamina.ativa .tr-rotulo{color:var(--tinta)}
.tr-lamina.ativa .tr-rotulo b{color:var(--tinta)}
@media (hover:hover){
  .tr-lamina:not(.ativa) .tr-aba:hover .tr-corpo{transform:translateY(-5px)}
  .tr-lamina:not(.ativa) .tr-aba:hover .tr-rotulo{color:var(--tinta)}
}
.tr-dica{margin:var(--e3) 0 0; text-align:center; font-size:var(--t-pequeno); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2)}
.tr-dica i{display:block; width:1px; height:.9rem; margin:0 auto .5rem; background:var(--tinta-2); opacity:.55}
.tr-dica-toque{display:none}
.tr-toque .tr-dica-ponteiro{display:none} .tr-toque .tr-dica-toque{display:inline}
.tr-secao:not(.tr-js) .tr-dica{display:none}

/* os painéis: todos na mesma célula; só o ativo aparece (sem JS, ficam empilhados) */
.tr-paineis{display:grid; gap:var(--e5); margin-top:var(--e4); padding-top:var(--e4); border-top:1px solid var(--fio)}
.tr-painel{display:grid; grid-template-columns:minmax(14rem, 1fr) minmax(0, 2fr); gap:var(--e3) var(--e5); align-items:start; align-content:start}
.tr-js .tr-painel{grid-area:1 / 1; visibility:hidden; opacity:0; transform:translateY(10px); transition:opacity .55s var(--curva), transform .55s var(--curva), visibility 0s .55s}
.tr-js .tr-painel.ativa{visibility:visible; opacity:1; transform:none; transition-delay:0s}
.tr-painel-nome{display:flex; flex-direction:column; gap:.6rem}
.tr-codigo{display:flex; align-items:flex-end; gap:.9rem}
.tr-mini{width:2.3rem; height:auto; overflow:visible; filter:drop-shadow(0 4px 4px rgb(37 47 60 / .22))}
.tr-mini use{fill:var(--tom)}
.tr-num{font-family:var(--f-titulo); font-size:clamp(2.4rem, 1.8rem + 1.8vw, 3.4rem); letter-spacing:.02em; color:var(--marfim-3); line-height:.9}
.tr-painel h3{font-size:clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height:1.15; max-width:12em}
.tr-painel-texto{max-width:34em; color:var(--tinta-2)}
.tr-fala{margin:var(--e3) 0 0; padding-left:var(--e3); border-left:1px solid var(--marfim-3)}
.tr-fala blockquote{margin:0; font-family:var(--f-titulo); font-size:1.22rem; line-height:1.35; color:var(--tinta); text-wrap:pretty}
.tr-fala-p{color:var(--tinta-2)}
.tr-fala figcaption{margin-top:.5rem; font-size:var(--t-pequeno); letter-spacing:.06em; color:var(--tinta-2)}
.tr-painel .wf-link{margin-top:var(--e3); color:var(--tinta)}

/* ───────── celular ───────── */
@media (max-width:860px){
  .tr-secao{--tr-dente:clamp(48px, 13.4vw, 62px); --tr-haste:40px; --tr-trilho:7px}
  .tr-cabeca{grid-template-columns:1fr; gap:var(--e2)}
  .tr-cabeca .wf-apoio{padding-bottom:0}
  .tr-escala-caixa{margin-top:var(--e4)}
  .tr-escala{margin-inline:calc(var(--margem) * -.35)}
  .tr-escala::after{top:calc(var(--tr-dente) * 1.233 + var(--tr-haste) + 10px)}
  .tr-lamina::after{top:calc(var(--tr-dente) * 1.233 + var(--tr-haste) + 10px - 1px); width:8px; height:4px}
  .tr-haste::before{top:-4px; width:9px; height:7px}
  .tr-dica i{height:.6rem; margin-bottom:.35rem}
  .tr-aba{padding-top:10px}
  .tr-haste{width:2px}
  .tr-rotulo{margin-top:calc(var(--tr-trilho) + 12px); font-size:.7rem; letter-spacing:.02em; gap:.05rem}
  .tr-rotulo b{font-size:.85rem}
  .tr-longo{display:none} .tr-curto{display:inline}
  .tr-lamina.ativa .tr-corpo{transform:translateY(-9px)}
  .tr-dica{margin-top:var(--e2); font-size:.68rem; letter-spacing:.12em}
  .tr-paineis{gap:var(--e4); margin-top:var(--e3); padding-top:var(--e3)}
  .tr-painel{grid-template-columns:1fr; gap:var(--e2)}
  .tr-painel h3{font-size:1.5rem; max-width:none}
  .tr-num{font-size:2rem}
  .tr-mini{width:1.7rem}
  .tr-painel-nome{gap:.4rem}
  .tr-fala blockquote{font-size:1.12rem}
}