/* 04 · Tratamentos (noite) · prefixo tr- */
.tr-sec{--tr-ouro:linear-gradient(105deg,#8a6a22 0%,#d6b35c 14%,#f4e8bd 24%,#b98f38 36%,#7c5c1c 48%,#e3c777 60%,#f6ecc8 68%,#c9a24a 80%,#8a6a22 100%);
  --tr-linha:rgba(233,215,160,.16);overflow:clip}
.tr-dentro{display:flex;flex-direction:column}

/* ---------- retrato: sangra na noite, sem emenda ---------- */
.tr-retrato{margin:0;pointer-events:none;position:relative;z-index:0;order:1;
  margin-inline:calc(var(--wf-gutter)*-1);margin-top:clamp(1.2rem,4vw,2rem);transition-duration:1.6s}
.tr-retrato img{display:block;width:100%;height:auto;max-width:none;aspect-ratio:4/4.5;object-fit:cover;object-position:50% 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 9%,#000 24%,#000 80%,rgba(0,0,0,.5) 93%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 7%,#000 18%,#000 52%,rgba(0,0,0,.62) 66%,rgba(0,0,0,.16) 82%,transparent 96%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 9%,#000 24%,#000 80%,rgba(0,0,0,.5) 93%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 7%,#000 18%,#000 52%,rgba(0,0,0,.62) 66%,rgba(0,0,0,.16) 82%,transparent 96%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* ---------- topo: título e a peça principal ---------- */
.tr-legenda{display:none}
.tr-topo{display:contents}
.tr-topo>.wf-etiqueta{order:0;align-self:flex-start}
.tr-titulo{order:0}
.tr-lead{order:0;margin:clamp(1.1rem,2vw,1.6rem) 0 0}
.tr-protocolo{order:2;position:relative;z-index:1;margin-top:clamp(-5.6rem,-20vw,-4.2rem)}
.tr-protocolo::before{content:"";position:absolute;z-index:-1;left:-18%;top:-12%;width:120%;height:70%;pointer-events:none;background:radial-gradient(50% 50% at 42% 50% in oklab,rgba(201,162,74,.13) 0%,rgba(201,162,74,.05) 45%,transparent 72%)}
.tr-prot-rotulo{margin:0 0 .5rem;font-family:var(--wf-f-titulo);font-size:var(--wf-t-mini);letter-spacing:.2em;text-transform:uppercase;color:var(--wf-ouro-claro)}
.tr-prot-nome{margin:0;font-weight:400;line-height:.98;width:max-content}
.tr-letreiro{display:block;width:max-content;font-family:var(--wf-f-titulo);font-size:min(13vw,4.6rem);letter-spacing:.02em;text-transform:uppercase;padding:.04em 0 .06em;
  filter:drop-shadow(.025em .045em .03em rgba(0,0,0,.6)) drop-shadow(0 0 1.6rem rgba(201,162,74,.2))}
.tr-prot-fio{width:min(100%,30rem);margin:clamp(1rem,2vw,1.5rem) 0 clamp(1rem,2vw,1.4rem);transition-duration:1.4s}
.tr-prot-sub{margin:0;font-family:var(--wf-f-titulo);font-size:var(--wf-t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--wf-perola)}
.tr-prot-texto{margin:1rem 0 0;max-width:31em;color:var(--wf-perola);text-wrap:pretty}
.tr-prot-fala{margin-top:1.3rem;max-width:30em;padding-left:1.1rem;border-left:1px solid var(--wf-ouro)}
.tr-prot-fala p{font-size:var(--wf-t-lead);line-height:1.45;color:var(--wf-perola);font-weight:300}

/* ---------- o índice ---------- */
.tr-plano{order:3;margin-top:clamp(3.5rem,8vw,7rem);position:relative;z-index:1}
.tr-onda{display:none}
.tr-plano-rotulo{margin:0 0 1.1rem;font-family:var(--wf-f-titulo);font-size:var(--wf-t-mini);letter-spacing:.2em;text-transform:uppercase;color:var(--wf-perola-suave)}
.tr-indice{list-style:none;margin:0;padding:0;border-top:1px solid var(--tr-linha)}
.tr-item{border-bottom:1px solid var(--tr-linha);position:relative}
.tr-nome{margin:0;font-weight:400}
.tr-bt{all:unset;box-sizing:border-box;display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;align-items:baseline;width:100%;min-height:64px;padding:1.05rem 0 .95rem;
  font-family:var(--wf-f-titulo);text-transform:uppercase;letter-spacing:.05em;color:var(--wf-perola);-webkit-tap-highlight-color:transparent}
.tr-n{font-size:var(--wf-t-mini);letter-spacing:.1em;color:var(--wf-ouro-claro)}
.tr-rot{font-size:clamp(1.18rem,.9rem + 1.5vw,2rem);line-height:1.18;text-wrap:balance;justify-self:start;padding:.06em 0;
  background:linear-gradient(var(--tr-apagado,var(--wf-perola)),var(--tr-apagado,var(--wf-perola))) 100% 0/100% 100% no-repeat,var(--tr-ouro) calc(var(--wf-reflexo)*100%) 0/260% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--wf-perola);
  transition:background-size .7s var(--wf-ease)}
.tr-sinal{display:none}
.tr-painel-dentro{padding:0 0 0 2.4rem}
.tr-painel-dentro>:last-child{margin-bottom:1.5rem}
.tr-txt{margin:0;max-width:33em;color:var(--wf-perola);text-wrap:pretty}
.tr-fala{margin-top:.9rem;max-width:33em}
.tr-fala p{color:var(--wf-perola);font-weight:300}
.tr-fala cite{color:var(--wf-perola-suave)}

/* com JS: o índice vira escolha. Sem JS, tudo fica à vista */
.tr-nome[data-wf].wf-visto,.tr-retrato[data-wf].wf-visto,.tr-prot-nome[data-wf].wf-visto{clip-path:none}
.tr-vivo .tr-bt{cursor:pointer}
.tr-vivo .tr-rot{--tr-apagado:#d8cdbd}
.tr-vivo .tr-aceso .tr-rot{filter:drop-shadow(0 0 .9rem rgba(201,162,74,.28))}
.tr-vivo .tr-bt:focus-visible{outline:2px solid var(--wf-ouro-claro);outline-offset:2px}
.tr-vivo .tr-item::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--tr-ouro) calc(var(--wf-reflexo)*100%) 0/260% 100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--wf-ease)}
.tr-vivo .tr-item.tr-aceso::after{transform:scaleX(1)}
.tr-vivo .tr-item.tr-aceso .tr-rot{background-size:0% 100%,260% 100%}
.tr-vivo .tr-sinal{display:block;align-self:center;width:.95rem;height:.95rem;margin-left:1rem;position:relative}
.tr-vivo .tr-sinal::before,.tr-vivo .tr-sinal::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--wf-ouro-claro);transition:transform .5s var(--wf-ease)}
.tr-vivo .tr-sinal::after{transform:rotate(90deg)}
.tr-vivo .tr-aceso .tr-sinal::after{transform:rotate(0)}
.tr-vivo .tr-painel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s var(--wf-ease),visibility 0s .6s}
.tr-vivo .tr-painel-dentro{overflow:hidden;min-height:0;opacity:0;transition:opacity .45s var(--wf-ease)}
.tr-vivo .tr-aceso .tr-painel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s var(--wf-ease),visibility 0s}
.tr-vivo .tr-aceso .tr-painel-dentro{opacity:1;transition-delay:.12s}

/* ---------- pé: equipe, botão, aviso ---------- */
.tr-pe-fio{order:4;margin-top:clamp(2.8rem,6vw,5.5rem);transition-duration:1.6s}
.tr-pe{order:5;margin-top:clamp(2rem,3.4vw,3rem);display:grid;gap:2.4rem;position:relative;z-index:1}
.tr-equipe-nome{margin:0 0 .8rem;font-family:var(--wf-f-titulo);font-size:clamp(1.18rem,.9rem + 1.5vw,1.6rem);letter-spacing:.05em;text-transform:uppercase;line-height:1.2}
.tr-equipe-nome span{display:block;font-size:var(--wf-t-mini);letter-spacing:.2em;color:var(--wf-perola-suave);margin-bottom:.5rem}
.tr-equipe-fala{max-width:30em}
.tr-equipe-fala p{color:var(--wf-perola);font-weight:300}
.tr-aviso{margin:1.3rem 0 0;font-size:var(--wf-t-mini);line-height:1.55;color:var(--wf-perola-suave);max-width:30em}
.tr-aviso span{display:block;margin-top:.25rem}

/* ---------- a partir de 900 px ---------- */
@media (min-width:900px){
  .tr-dentro{display:block}
  .tr-retrato{position:absolute;z-index:0;margin:0;top:calc(var(--wf-respiro)*-.62);right:calc(var(--wf-gutter)*-1 - 1.5rem);width:min(54vw,780px)}
  .tr-retrato img{aspect-ratio:3/4;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.28) 10%,rgba(0,0,0,.8) 22%,#000 32%,#000 82%,rgba(0,0,0,.5) 93%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 7%,#000 17%,#000 62%,rgba(0,0,0,.7) 76%,rgba(0,0,0,.25) 90%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.28) 10%,rgba(0,0,0,.8) 22%,#000 32%,#000 82%,rgba(0,0,0,.5) 93%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 7%,#000 17%,#000 62%,rgba(0,0,0,.7) 76%,rgba(0,0,0,.25) 90%,transparent 100%)}
  .tr-legenda{display:block;position:absolute;right:calc(var(--wf-gutter) + 1.5rem);bottom:-.6rem;padding-top:.8rem;border-top:1px solid var(--wf-ouro);min-width:11rem;font-size:var(--wf-t-mini);line-height:1.5;color:var(--wf-perola-suave);text-align:left}
  .tr-legenda b{display:block;font-family:var(--wf-f-titulo);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--wf-perola)}
  .tr-topo{display:block;position:relative;z-index:1;max-width:min(52%,40rem);min-height:min(58vw,820px)}
  .tr-lead{max-width:27em}
  .tr-protocolo{margin-top:clamp(3rem,5.5vw,5rem)}
  .tr-letreiro{font-size:clamp(4.4rem,7.6vw,7.4rem);white-space:nowrap}
  .tr-prot-nome{line-height:.96}

  .tr-plano{margin-top:clamp(3rem,6vw,6rem)}
  .tr-bt{grid-template-columns:3.2rem minmax(0,1fr) auto;min-height:72px;padding:1.2rem 0 1.05rem}
  .tr-painel-dentro{padding-left:3.2rem}

  /* com JS: nomes à esquerda, o texto do escolhido à direita, na altura dele */
  .tr-vivo .tr-indice{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(2.5rem,6vw,6.5rem);border-top:0;position:relative;padding-bottom:1.5rem}
  .tr-vivo .tr-item{display:contents}
  .tr-vivo .tr-item::after{display:none}
  .tr-vivo .tr-nome{grid-column:1;border-bottom:1px solid var(--tr-linha);position:relative}
  .tr-vivo .tr-item:first-child .tr-nome{border-top:1px solid var(--tr-linha)}
  .tr-vivo .tr-nome::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:calc(100% + clamp(2.5rem,6vw,6.5rem));background:var(--tr-ouro) calc(var(--wf-reflexo)*100%) 0/260% 100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--wf-ease)}
  .tr-vivo .tr-aceso .tr-nome::after{transform:scaleX(1)}
  .tr-vivo .tr-solto .tr-nome::after{width:100%}
  .tr-vivo .tr-item:nth-child(1) .tr-nome{grid-row:1}.tr-vivo .tr-item:nth-child(2) .tr-nome{grid-row:2}.tr-vivo .tr-item:nth-child(3) .tr-nome{grid-row:3}.tr-vivo .tr-item:nth-child(4) .tr-nome{grid-row:4}
  .tr-vivo .tr-item:nth-child(5) .tr-nome{grid-row:5}.tr-vivo .tr-item:nth-child(6) .tr-nome{grid-row:6}.tr-vivo .tr-item:nth-child(7) .tr-nome{grid-row:7}
  .tr-vivo .tr-bt{transition:padding-left .6s var(--wf-ease)}
  .tr-vivo .tr-aceso .tr-bt{padding-left:.9rem}
  .tr-vivo .tr-item:not(.tr-aceso) .tr-bt:hover .tr-rot{background-size:0% 100%,260% 100%}
  .tr-vivo .tr-sinal{display:none}
  .tr-vivo .tr-painel{grid-column:2;grid-row:1/span 7;align-self:start;display:block;visibility:hidden;opacity:0;transform:translate3d(0,calc(var(--tr-y,0px) + .9rem),0);transition:opacity .35s var(--wf-ease),transform .6s var(--wf-ease),visibility 0s .35s}
  .tr-vivo .tr-aceso .tr-painel{visibility:visible;opacity:1;transform:translate3d(0,var(--tr-y,0px),0);transition:opacity .6s var(--wf-ease) .15s,transform .7s var(--wf-ease) .1s,visibility 0s}
  .tr-vivo .tr-painel-dentro{overflow:visible;opacity:1;padding:0}
  .tr-vivo .tr-painel-dentro>:last-child{margin-bottom:0}
  .tr-vivo .tr-txt{font-size:var(--wf-t-lead);line-height:1.5;max-width:25em}
  .tr-vivo .tr-fala{margin-top:1.2rem;max-width:27em;padding-left:1.1rem;border-left:1px solid var(--wf-ouro)}

  .tr-indice{counter-reset:tr}
  .tr-nome{counter-increment:tr}
  .tr-vivo .tr-painel-dentro::before{content:"0" counter(tr) " / 07";display:flex;align-items:flex-end;box-sizing:border-box;height:var(--tr-h,72px);padding-bottom:1.45rem;margin-bottom:1.5rem;border-bottom:1px solid var(--wf-ouro);font-family:var(--wf-f-titulo);font-size:var(--wf-t-mini);letter-spacing:.2em;color:var(--wf-ouro-claro)}
  .tr-vivo .tr-onda{display:block;position:absolute;z-index:-1;right:-2%;bottom:-9%;width:min(40%,31rem);aspect-ratio:1190/864;opacity:.2;pointer-events:none;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='360 90 1190 864'%3E%3Cpath d='M370 166 C410 122 470 98 540 98 C650 100 740 170 820 290 C900 410 960 520 1030 620 C1090 706 1140 770 1200 826 C1290 900 1400 912 1540 894 C1420 944 1300 944 1220 912 C1140 880 1080 820 1010 720 C930 600 860 470 780 350 C720 262 650 190 570 160 C500 136 430 142 370 166 Z'/%3E%3C/svg%3E"),linear-gradient(135deg,transparent 12%,#000 62%);-webkit-mask-size:contain,100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-composite:source-in;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='360 90 1190 864'%3E%3Cpath d='M370 166 C410 122 470 98 540 98 C650 100 740 170 820 290 C900 410 960 520 1030 620 C1090 706 1140 770 1200 826 C1290 900 1400 912 1540 894 C1420 944 1300 944 1220 912 C1140 880 1080 820 1010 720 C930 600 860 470 780 350 C720 262 650 190 570 160 C500 136 430 142 370 166 Z'/%3E%3C/svg%3E"),linear-gradient(135deg,transparent 12%,#000 62%);mask-size:contain,100% 100%;mask-repeat:no-repeat;mask-position:center;mask-composite:intersect}
  .tr-pe{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(2.5rem,6vw,6.5rem);align-items:start}
  .tr-aviso{margin-top:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  .tr-sec *,.tr-sec *::before,.tr-sec *::after{transition-duration:.01ms!important;transition-delay:0s!important}
}
