/* tr · Tratamentos: uma pedra só, cada tratamento é uma faceta */
.tr-secao { background: var(--papel-claro); }

.tr-cabeca { display: grid; row-gap: 1.6rem; }
.tr-titulo { font-size: clamp(2.9rem, 7.1vw, 7rem); line-height: .94; text-wrap: balance; }

/* ───────── palco: pedra + índice ───────── */
.tr-palco { --tr-vao: clamp(2rem, 6vw, 6.5rem); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); column-gap: var(--tr-vao); align-items: start; margin-top: clamp(2.5rem, 5vw, 4.5rem); }

.tr-pedra { --tr-alvo: 7; position: sticky; top: max(1.5rem, calc(50vh - min(20vw, 19.5rem) - 1.5rem)); }
.tr-pedra-corpo { position: relative; width: min(100%, 39rem); aspect-ratio: 1; margin-left: auto; }
.tr-sombra { position: absolute; left: 8%; right: 4%; top: 58%; height: 50%; background: radial-gradient(closest-side, rgb(120 78 62 / .3), rgb(120 78 62 / 0)); }
.tr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr-gira { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(calc(var(--tr-rot, 0) * 1deg)); }
.tr-pronto .tr-gira, .tr-pronto .tr-f-n { transition: transform 1.4s var(--suave); }
.tr-f-base { stroke: var(--aresta); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tr-faceta, .tr-canto, .tr-mesa-g { transform-box: fill-box; transform-origin: center; }
.tr-faceta { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 1.1s var(--suave) .15s; }
.tr-f-luz { fill: var(--papel-claro); opacity: .3; transition: opacity 1s ease-in-out; pointer-events: none; }
.tr-f-n { font-family: var(--f-titulo); font-size: 44px; fill: var(--tinta); text-anchor: middle; dominant-baseline: central; pointer-events: none; transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--tr-rot, 0) * -1deg)); opacity: .78; }
.tr-faceta:hover .tr-f-luz { opacity: .12; }
.tr-faceta.tr-acesa { transform: translate(calc(var(--dx) * 22px), calc(var(--dy) * 22px)); }
.tr-faceta.tr-acesa .tr-f-luz { opacity: 0; }
.tr-faceta.tr-acesa .tr-f-base { stroke: #fff; stroke-width: 2; }
.tr-faceta.tr-acesa .tr-f-n { opacity: 1; }
.tr-pav line, .tr-refl { stroke: var(--aresta); stroke-width: .8; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.tr-cinta { fill: none; stroke: var(--rosa); stroke-opacity: .5; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }

/* luz fixa: a pedra gira, a luz fica (claro em cima à esquerda, sombra embaixo à direita) */
.tr-luz { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; clip-path: polygon(17.49% 16.33%, 48.37% 3.23%, 62.90% 5.01%, 89.69% 25.20%, 95.41% 38.68%, 91.32% 71.97%, 82.51% 83.67%, 51.63% 96.77%, 37.10% 94.99%, 10.31% 74.80%, 4.59% 61.32%, 8.68% 28.03%); }
.tr-luz i { position: absolute; border-radius: 50%; width: 92%; aspect-ratio: 1; left: -22%; top: -22%; background: radial-gradient(closest-side in oklab, rgb(255 252 246 / 1), rgb(255 252 246 / .4) 55%, rgb(255 252 246 / 0)); }
.tr-luz-b { mix-blend-mode: multiply; }
.tr-luz-b i { left: -8%; top: auto; bottom: -52%; width: 100%; background: radial-gradient(closest-side in oklab, rgb(170 112 100 / .62), rgb(190 140 126 / .26) 58%, rgb(190 140 126 / 0)); }

/* a ponte: da faceta acesa até o índice */
.tr-ponte { position: absolute; left: 99.4%; top: 55.9%; width: calc(var(--tr-vao) - .6%); height: 1px; background: var(--rosa); opacity: .7; transform-origin: left; }
.tr-ponte::after { content: ""; position: absolute; right: -.35rem; top: -.35rem; width: .7rem; height: .7rem; background: var(--rosa); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }

/* a pedra se monta quando chega à tela */
.js .tr-pedra[data-entra] { opacity: 1; transform: none; }
.js .tr-pedra .tr-faceta, .js .tr-pedra .tr-canto, .js .tr-pedra .tr-mesa-g { opacity: 0; }
.js .tr-pedra.wf-visto .tr-faceta, .js .tr-pedra.wf-visto .tr-canto, .js .tr-pedra.wf-visto .tr-mesa-g { animation: tr-monta .8s var(--suave) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes tr-monta { from { opacity: 0; translate: calc(var(--dx) * 44px) calc(var(--dy) * 44px); scale: .95; } to { opacity: 1; translate: 0 0; scale: 1; } }
.js .tr-ponte { transform: scaleX(0); transition: transform 1.2s var(--suave) 1s; }
.js .tr-pedra.wf-visto .tr-ponte { transform: none; }

.tr-mesa { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; text-align: center; }
.tr-mesa-n { font-family: var(--f-titulo); font-size: clamp(3rem, 6.4vw, 6.2rem); line-height: .9; color: var(--tinta); }
.tr-mesa-de { margin-top: .5rem; font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); }
.tr-legenda { display: grid; justify-items: center; gap: .25rem; width: min(100%, 39rem); margin: .6rem 0 0 auto; text-align: center; }
.tr-legenda-n { font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); }
.tr-legenda-n b { font-weight: 600; color: var(--tinta); }
.tr-legenda-nome { font-family: var(--f-titulo); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; color: var(--tinta); }
.tr-dica { margin-top: .4rem; }

.tr-abre { margin-bottom: clamp(1.6rem, 2.6vw, 2.4rem); max-width: 30em; }

/* ───────── índice ───────── */
.tr-indice { border-top: 1px solid var(--fio); counter-reset: none; }
.tr-item { border-bottom: 1px solid var(--fio); position: relative; }
.tr-nome { font: inherit; }
.tr-botao { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto auto; column-gap: 0; align-items: baseline; width: 100%; min-height: 48px; padding: clamp(1.1rem, 1.9vw, 1.7rem) 0; text-align: left; }
.tr-num { font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; color: var(--rosa-texto); }
.tr-rotulo { font-family: var(--f-titulo); font-size: clamp(2.1rem, 4.3vw, 4.2rem); line-height: 1; color: var(--tinta); opacity: .58; transition: opacity .6s var(--suave), transform .8s var(--suave); transform-origin: left center; }
.tr-botao:hover .tr-rotulo, .tr-botao:focus-visible .tr-rotulo { opacity: .82; }
.tr-aberto .tr-rotulo { opacity: 1; }
.tr-pista { align-self: center; margin: 0 1.4rem 0 1rem; font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); text-align: right; transition: opacity .6s; }
.tr-aberto .tr-pista { opacity: 0; }
.tr-sinal { align-self: center; width: 1.05rem; height: 1.05rem; background: var(--pedra-4); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); transition: background-color .6s, transform .8s var(--suave); }
.tr-aberto .tr-sinal { transform: rotate(37deg) scale(1.5); }
.tr-item:nth-child(1) .tr-sinal { background: #aab6bf; }
.tr-item:nth-child(2) .tr-sinal { background: #e9d3c0; }
.tr-item:nth-child(3) .tr-sinal { background: #e6cab4; }
.tr-item:nth-child(4) .tr-sinal { background: #d3a898; }
.tr-item:nth-child(5) .tr-sinal { background: #dcb8a6; }
.tr-item:nth-child(6) .tr-sinal { background: #ead2b9; }

.tr-painel { display: grid; grid-template-rows: 1fr; }
.tr-painel-dentro { overflow: hidden; min-height: 0; padding-left: 3.2rem; }
.tr-painel .wf-texto { max-width: 31em; }
.tr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.6rem; margin-top: .9rem; padding-bottom: clamp(1.3rem, 2vw, 1.9rem); min-height: 48px; }
.tr-meta > span { font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); }
.tr-elo { color: var(--tinta); }
.js .tr-painel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .7s var(--suave), visibility 0s .7s; }
.js .tr-aberto .tr-painel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .7s var(--suave), visibility 0s; }
.js .tr-painel-dentro > * { opacity: 0; transition: opacity .5s; }
.js .tr-aberto .tr-painel-dentro > * { opacity: 1; transition: opacity .8s .15s; }

.tr-com-foto { display: grid; grid-template-columns: minmax(0, 1fr) clamp(8rem, 13vw, 12rem); gap: 1.5rem; align-items: start; }
.tr-mini-foto { --c: 14px; aspect-ratio: 4 / 3; margin-bottom: 1.6rem; }
.tr-mini-foto img { object-position: 40% 60%; }

/* ───────── equipe ───────── */
.tr-equipe { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(2rem, 6vw, 6.5rem); row-gap: clamp(2rem, 4vw, 3.5rem); align-items: end; margin-top: clamp(4.5rem, 9vw, 8.5rem); padding-top: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--fio); }
.tr-foto-cx { max-width: 44rem; }
.tr-foto-a { --c: clamp(14px, 1.6vw, 24px); --a: clamp(56px, 9vw, 132px); aspect-ratio: 960 / 715; clip-path: polygon(var(--c) 0, calc(100% - var(--a)) 0, 100% calc(var(--a) * .7536), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--a) 100%, 0 calc(100% - var(--a) * .7536), 0 var(--c)); }
.tr-foto-leg { margin-top: .8rem; padding-left: clamp(56px, 9vw, 132px); }
.tr-gente-t { margin-bottom: 1.4rem; }
.tr-nomes li { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 0; border-top: 1px solid var(--fio); }
.tr-nomes li:nth-child(2) { padding-left: 12%; }
.tr-nomes li:nth-child(3) { padding-left: 24%; }
.tr-quem { font-family: var(--f-titulo); font-size: clamp(2.3rem, 4.4vw, 4.3rem); line-height: 1; }
.tr-nomes .wf-mini { letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--rosa-texto); }
.tr-voz { align-self: start; }
.tr-voz-fala { font-size: clamp(1.7rem, 3.2vw, 3.1rem); line-height: 1.08; max-width: 17em; }
.tr-fecho { align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.tr-fecho .wf-texto { max-width: 15em; }

@media (min-width: 1024px) and (max-width: 1279px) { .tr-pista { display: none; } }
@media (max-width: 1023px) {
  .tr-palco { grid-template-columns: 1fr; row-gap: 0; }
  .tr-lista { display: contents; }
  .tr-abre { order: 1; margin-bottom: 1.2rem; }
  .tr-indice { order: 3; border-top: 0; }
  /* a pedra pequena fica presa no alto enquanto a lista passa: quem toca num item vê a faceta acender */
  .tr-pedra { --tr-alvo: -53; order: 2; position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; column-gap: 1.25rem; margin-inline: calc(var(--margem) * -1); padding: .7rem var(--margem); background: var(--papel-claro); border-bottom: 1px solid var(--fio); }
  .tr-pedra-corpo { width: 8.5rem; margin: 0; }
  .tr-faceta { pointer-events: none; }
  .tr-sombra, .tr-ponte, .tr-dica, .tr-mesa-de { display: none; }
  .tr-f-n { display: none; }
  .tr-mesa-n { font-size: 1.9rem; }
  .tr-faceta.tr-acesa { transform: translate(calc(var(--dx) * 34px), calc(var(--dy) * 34px)); }
  .tr-legenda { width: auto; margin: 0; justify-items: start; text-align: left; gap: .35rem; }
  .tr-legenda-nome { font-size: clamp(1.6rem, 7vw, 2.4rem); line-height: 1; }
  .tr-equipe { grid-template-columns: 1fr; }
  .tr-gente { order: 2; } .tr-voz { order: 3; } .tr-fecho { order: 4; }
}
@media (max-width: 600px) {
  .tr-botao { grid-template-columns: 2.4rem minmax(0, 1fr) auto; padding: 1.15rem 0; }
  .tr-pista { display: none; }
  .tr-painel-dentro { padding-left: 0; }
  .tr-rotulo { font-size: clamp(1.9rem, 9.4vw, 2.6rem); }
  .tr-com-foto { grid-template-columns: 1fr; gap: 0; }
  .tr-mini-foto { order: -1; width: 62%; margin-bottom: 1.1rem; }
  .tr-fecho .botao { width: 100%; }
  .tr-fecho .wf-texto { max-width: none; }
}