/* Seção: massagens e pele. O estojo branco das pedras, o que fica sobre a bancada da sala dela:
   cada pedra é um tratamento; a que a pessoa levanta sai da cavidade, esquenta e mostra o texto. */
.tratamentos{position:relative;z-index:6;isolation:isolate;overflow:clip;background:var(--creme);margin-top:-2.4rem;border-radius:2.4rem 2.4rem 0 0;padding:calc(var(--respiro) * .75) var(--margem) calc(var(--respiro) * .8 + 2.4rem)}
.tr-dentro{max-width:var(--largura);margin:0 auto}
.tr-cab h2{margin-top:1rem}
.tr-cab>p:not(.olho){margin-top:1.1rem;max-width:44ch;font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.6;color:var(--tinta-2)}
.tr-palco{margin-top:clamp(2.4rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,5vw,5.5rem);align-items:center}

/* a bancada: ripado por trás, estojo em cima da fita */
.tr-bancada{position:relative;padding-top:clamp(3rem,7vw,6rem)}
.tr-ripas{position:absolute;z-index:-1;left:calc(-1 * var(--margem));right:-8%;top:18%;bottom:1.2rem;
  background:repeating-linear-gradient(90deg,#c08a5e 0 19px,#96623c 19px 21px,#cb9a6f 21px 40px,#8a5935 40px 43px,#b98356 43px 60px,#9a6640 60px 62px);
  opacity:.8;-webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 62%),linear-gradient(90deg,#000 62%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 4%,#000 62%),linear-gradient(90deg,#000 62%,transparent 100%);mask-composite:intersect}
.tr-ripas::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg in oklab,rgba(255,244,228,.5) 0%,rgba(255,244,228,.12) 55%,rgba(255,214,150,.85) 97%)}
.tr-bandeja{position:relative;z-index:1;margin:0 clamp(.2rem,2.4vw,2.2rem);display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));column-gap:clamp(.3rem,1vw,.9rem);row-gap:1.5rem;align-items:center;
  background:linear-gradient(180deg,#fffdf9,#f4ece2);border-radius:1.6rem;padding:clamp(.9rem,1.8vw,1.5rem) clamp(.8rem,1.6vw,1.4rem) clamp(1rem,1.8vw,1.5rem) clamp(.5rem,1vw,1rem);
  box-shadow:0 -1px 0 #fff inset,0 -10px 18px -10px rgba(120,84,54,.25) inset,0 34px 40px -26px rgba(60,32,14,.65),0 0 0 1px rgba(255,255,255,.6)}
.tr-grupo{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--madeira-texto);text-align:center;padding:0 .2rem}
.tr-bandeja button{min-width:0;hyphens:manual;appearance:none;border:0;background:none;padding:.3rem .2rem .2rem;font:inherit;color:var(--tinta-2);cursor:pointer;display:grid;justify-items:center;gap:.55rem;font-size:clamp(.74rem,.95vw,.86rem);font-weight:500;line-height:1.25;text-align:center;border-radius:1rem;-webkit-tap-highlight-color:transparent}
.tr-cava{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1.42;border-radius:50%;background:radial-gradient(ellipse at 50% 30% in oklab,#b9ab9d,#d9cdc0 78%);box-shadow:0 7px 10px rgba(74,50,34,.5) inset,0 -2px 0 rgba(255,255,255,.95) inset,0 2px 0 #fff}
.tr-cava::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(closest-side in oklch,rgba(255,196,110,.95),rgba(247,160,90,.35) 60%,transparent);opacity:0;transition:opacity .9s .2s}
.tr-bandeja button[aria-selected="true"] .tr-cava::before{opacity:1;animation:calor 5s ease-in-out infinite alternate}
.tr-cava svg{position:relative;width:88%;filter:drop-shadow(0 5px 4px rgba(40,22,10,.4));transition:transform .8s var(--pouso),filter .6s}
.js .tr-bancada.visto .tr-cava svg{animation:salto .7s var(--curva) calc(.5s + var(--i) * .11s) both}
@keyframes salto{40%{transform:translateY(-22%)}}
.tr-bandeja button[aria-selected="true"] .tr-cava svg{animation:none!important}
.tr-bandeja button:hover .tr-cava svg{transform:translateY(-4px)}
.tr-bandeja button[aria-selected="true"]{color:var(--tinta);font-weight:700}
/* a pedra levantada sobe pouco: não pode cobrir o nome do tratamento da fileira de cima */
.tr-bandeja button[aria-selected="true"] .tr-cava svg{transform:translate(9%,-30%) scale(1.12) rotate(-7deg);filter:drop-shadow(0 20px 12px rgba(40,22,10,.5))}
.tr-bandeja button span:last-child{display:flex;align-items:center;gap:.4rem;min-height:2.5em}
.tr-bandeja button span:last-child::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--pink);flex:none;transform:scale(0);transition:transform .4s var(--pouso)}
.tr-bandeja button[aria-selected="true"] span:last-child::before{transform:scale(1)}
.tr-bancada .led{margin-top:-.3rem;position:relative;z-index:0}

/* o painel do tratamento levantado */
.tr-painel{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:center}
.tr-painel.com-foto{grid-template-columns:minmax(0,1fr) clamp(10rem,17vw,15.5rem)}
.tr-painel[hidden]{display:none}
.tr-painel:not([hidden]){animation:surge .6s var(--curva) both}
.tr-painel h3{margin-top:.7rem;font-size:clamp(2rem,3.9vw,3.6rem);line-height:1;letter-spacing:-.02em}
/* com foto ao lado a coluna é estreita: o nome mais comprido (Radiofrequência) precisa caber inteiro */
.tr-painel.com-foto h3{font-size:clamp(1.7rem,2.9vw,2.8rem)}
.tr-painel p.tr-t{margin-top:1.1rem;font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.6;max-width:40ch;color:var(--tinta-2)}
.tr-painel .dela-fala{margin-top:1.3rem;padding-left:1rem;border-left:2px solid var(--mel-2);font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.15;letter-spacing:-.008em;max-width:24ch;text-wrap:balance}
.tr-painel .dela-fala small{display:block;margin-top:.5rem;font-family:var(--sans);font-size:.78rem;letter-spacing:0;color:var(--tinta-2)}
.tr-painel .btn{margin-top:1.6rem}
.tr-painel .olho b{font-weight:700;color:var(--tinta-2);letter-spacing:.12em}
.tr-painel .olho b::before{content:"·";margin:0 .6em}
.tr-painel figure{margin:0}
.tr-painel img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:1.6rem;box-shadow:0 34px 50px -28px rgba(74,40,16,.65),0 0 0 1px rgba(255,255,255,.35)}
.tr-painel figcaption{margin-top:.7rem;font-size:.78rem;line-height:1.4;color:var(--tinta-2)}
@media (min-width:861px) and (max-width:1180px){
  .tr-painel.com-foto{grid-template-columns:minmax(0,1fr) 9rem;gap:1.2rem}
  .tr-painel .btn{white-space:nowrap;padding:.85rem 1.15rem;font-size:.9rem}
}
@media (max-width:860px){
  .tratamentos{border-radius:1.6rem 1.6rem 0 0;margin-top:-1.6rem}
  .tr-palco{grid-template-columns:1fr;gap:2.4rem}
  .tr-bancada{padding-top:3.4rem}
  .tr-ripas{right:calc(-1 * var(--margem));top:0}
  .tr-bandeja{margin:0;column-gap:.35rem;padding:.9rem .7rem 1rem .3rem}
  .tr-bandeja button{font-size:.72rem;padding:.3rem 0 .2rem}
  .tr-bandeja button span:last-child{gap:.25rem}
  .tr-grupo{font-size:.58rem;letter-spacing:.14em}
  .tr-painel.com-foto{grid-template-columns:1fr;gap:0}
  .tr-painel.com-foto h3{font-size:clamp(2rem,9vw,2.6rem)}
  .tr-bandeja{row-gap:1.1rem}
  .tr-painel.com-foto>div{display:contents}
  .tr-painel.com-foto figure{order:5;margin-top:1.4rem}
  .tr-painel.com-foto .btn{order:6;justify-self:start}
  .tr-painel img{aspect-ratio:16/10;border-radius:1.3rem;object-position:50% 34%}
  .tr-painel figcaption{display:block}
}
/* tablet em pé: o estojo não precisa da largura inteira */
@media (min-width:600px) and (max-width:860px){
  .tr-bancada{max-width:31rem}
  .tr-ripas{right:auto;width:calc(100% + var(--margem) + 3rem)}
  .tr-painel.com-foto{grid-template-columns:minmax(0,1fr) 15rem;gap:1.6rem;align-items:center}
  .tr-painel.com-foto>div{display:block}
  .tr-painel.com-foto figure{order:0;margin-top:0}
  .tr-painel img{aspect-ratio:4/5;object-position:50% 50%}
}