/* tr · Tratamentos — pele creme. O seletor do hero vira o índice: o pedido dela (você) → o tratamento (ela). */
.tr-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(closest-side at 8% 18%, color-mix(in oklab, var(--rosado) 45%, transparent), transparent),
    radial-gradient(closest-side at 96% 88%, color-mix(in oklab, var(--ouro-claro) 38%, transparent), transparent)}

.tr-cab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px 64px;align-items:end}
.tr-lead{font-size:var(--t-lead);line-height:1.45;color:var(--cafe-2);max-width:24em;padding-bottom:.4em}

.tr-mesa{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:clamp(28px,3.6vw,56px);margin-top:clamp(48px,6vw,88px);align-items:start}

/* os pedidos */
.tr-lado-t{font-weight:700;font-size:var(--t-peq);margin-bottom:14px}
.tr-abas{display:flex;flex-direction:column;gap:6px}
.tr-aba{position:relative;display:grid;grid-template-columns:2.2em minmax(0,1fr);grid-template-areas:"n p" "n m";align-items:baseline;gap:2px 6px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid color-mix(in oklab, var(--cafe) 16%, transparent);border-radius:24px;padding:14px 22px 15px 18px;color:var(--cafe);
  transition:background .3s var(--ease),border-color .3s,color .3s,transform .3s var(--ease);-webkit-tap-highlight-color:transparent}
.tr-aba:hover{background:color-mix(in oklab, #fff 55%, transparent);border-color:color-mix(in oklab, var(--cafe) 40%, transparent)}
.tr-aba:focus-visible{outline:2px solid var(--ouro-tinta);outline-offset:3px}
.tr-aba-n{grid-area:n;font-weight:500;font-size:var(--t-mini);color:var(--ouro-tinta);font-variant-numeric:tabular-nums}
.tr-aba-pedido{grid-area:p;font-family:var(--f-sua);font-style:italic;font-weight:400;font-size:clamp(1.15rem, 1rem + .4vw, 1.375rem);line-height:1.2}
.tr-aba-nome{grid-area:m;font-weight:500;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cafe-2);margin-top:4px}
.tr-aba[aria-selected="true"]{background:var(--chocolate);border-color:var(--chocolate);color:var(--creme);border-radius:24px 0 0 24px;width:calc(100% + clamp(28px,3.6vw,56px) + 2px);margin-right:calc(-1 * (clamp(28px,3.6vw,56px) + 2px));z-index:1}
.tr-aba[aria-selected="true"] .tr-aba-n,.tr-aba[aria-selected="true"] .tr-aba-nome{color:var(--ouro-claro)}
/* cantos côncavos que costuram a lingueta no painel */
.tr-aba[aria-selected="true"]::before,.tr-aba[aria-selected="true"]::after{content:"";position:absolute;right:0;width:24px;height:24px;pointer-events:none}
.tr-aba[aria-selected="true"]::before{bottom:100%;background:radial-gradient(circle at 0 0, transparent 23.5px, var(--chocolate) 24px)}
.tr-aba[aria-selected="true"]::after{top:100%;background:radial-gradient(circle at 0 100%, transparent 23.5px, var(--chocolate) 24px)}
.tr-abas > .tr-aba:first-child[aria-selected="true"]::before{display:none}
.tr-outro{margin-top:26px;font-family:var(--f-sua);font-style:italic;font-size:var(--t-texto);color:var(--cafe-2);display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.tr-outro .link-fio{font-family:var(--f-dela);font-style:normal;color:var(--cafe)}
.tr-foto{margin:clamp(28px,3vw,40px) 0 0;max-width:460px}
.tr-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:40% 20%;border-radius:var(--raio-card);box-shadow:0 30px 60px -36px rgba(58,36,25,.7)}
.tr-foto figcaption{margin-top:10px;font-size:var(--t-mini);color:var(--cafe-2)}

/* o painel da resposta: chocolate das lâminas dela */
.tr-paineis{container-type:inline-size;display:flex;flex-direction:column;gap:24px}
.js .tr-paineis{display:grid}
.js .tr-painel{grid-area:1 / 1}
.js .tr-painel:not(.on){visibility:hidden;opacity:0;pointer-events:none}
.tr-painel{position:relative;overflow:clip;isolation:isolate;border-radius:28px;padding:clamp(28px,5cqi,60px);color:var(--creme);
  background:
    radial-gradient(closest-side at 88% 4%, color-mix(in oklab, var(--blusa) 50%, transparent), transparent),
    radial-gradient(closest-side at 100% 100%, color-mix(in oklab, var(--noite) 75%, transparent), transparent),
    var(--chocolate);
  box-shadow:0 50px 90px -50px rgba(58,36,25,.75)}
.tr-painel:focus-visible{outline:2px solid var(--ouro-tinta);outline-offset:4px}
.tr-quer{display:block;margin:calc(-.3em) 0 0 -.04em;font-family:var(--f-sua);font-style:italic;font-weight:300;font-size:min(17cqi, 9.6rem);line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.4px color-mix(in oklab, var(--ouro-claro) 55%, transparent);white-space:nowrap;pointer-events:none;user-select:none}
.tr-pediu{margin-top:12px;font-family:var(--f-sua);font-style:italic;font-weight:300;font-size:var(--t-lead);line-height:1.3;color:color-mix(in oklab, var(--creme) 88%, transparent);max-width:20em}
.tr-pediu .quem,.tr-nome .quem{color:var(--ouro-claro)}
.tr-nome{position:relative;margin:clamp(24px,4cqi,40px) 0 0;font-weight:400}
.tr-nome-t,.tr-brilho{display:block;font-family:var(--f-dela);font-weight:800;font-size:min(calc(var(--tr-g) * .92cqi), 6.3rem);line-height:.9;letter-spacing:-.04em}
.tr-nome-t{color:var(--creme);text-shadow:0 .06em .2em rgba(40,20,10,.25)}
.tr-brilho{position:absolute;left:0;right:0;bottom:0;color:transparent;background:linear-gradient(100deg, transparent 30%, var(--ouro-claro) 46%, #fff6dc 50%, var(--ouro-claro) 54%, transparent 70%) no-repeat;background-size:250% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;opacity:0;pointer-events:none}
.tr-painel.tr-varre .tr-brilho{animation:tr-varre 1.5s var(--ease) forwards}
@keyframes tr-varre{0%{opacity:1;background-position:120% 0}80%{opacity:1}100%{opacity:0;background-position:-30% 0}}

.tr-corpo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5cqi,48px);margin-top:clamp(24px,3.6cqi,34px);padding-top:clamp(22px,3cqi,28px);border-top:1px solid color-mix(in oklab, var(--creme) 22%, transparent)}
.tr-texto{font-size:var(--t-texto);line-height:1.55;color:color-mix(in oklab, var(--creme) 94%, transparent)}
.tr-fala{margin:22px 0 0;padding-left:18px;border-left:2px solid var(--ouro)}
.tr-fala blockquote{margin:0}
.tr-fala p{font-weight:700;font-size:1.125rem;line-height:1.35}
.tr-fala figcaption{margin-top:6px;font-size:var(--t-mini);color:color-mix(in oklab, var(--creme) 78%, transparent)}
.tr-para-t{font-weight:500;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro-claro);margin-bottom:12px}
.tr-para ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tr-para li{position:relative;padding-left:24px;font-size:var(--t-texto);line-height:1.4}
.tr-para li::before{content:"";position:absolute;left:0;top:.68em;width:13px;height:1.5px;background:var(--ouro-claro)}
.tr-aviso{margin-top:18px;font-family:var(--f-sua);font-style:italic;font-weight:400;font-size:var(--t-texto);color:color-mix(in oklab, var(--creme) 86%, transparent)}
.tr-acoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(26px,4cqi,36px)}
.tr-painel .btn-zap{background:var(--creme);color:var(--cafe)}
.tr-prox{display:grid;grid-template-columns:minmax(0,auto) 22px;grid-template-areas:"r s" "p s";align-items:center;gap:0 12px;min-height:48px;padding:4px 0;background:none;border:0;cursor:pointer;text-align:right;color:var(--creme)}
.tr-prox-r{grid-area:r;font-weight:500;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro-claro)}
.tr-prox-p{grid-area:p;font-family:var(--f-sua);font-style:italic;font-weight:400;font-size:var(--t-peq);border-bottom:1px solid color-mix(in oklab, var(--ouro-claro) 50%, transparent)}
.tr-prox svg{grid-area:s;width:22px;height:22px;fill:none;stroke:var(--ouro-claro);stroke-width:1.6;transition:transform .3s var(--ease)}
.tr-prox:hover svg{transform:translateX(4px)}
.tr-prox:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:4px;border-radius:6px}
.tr-painel .btn-zap svg{fill:var(--ouro-tinta)}
.tr-painel .btn-zap:hover{background:#fff}

/* painel estreito (notebook pequeno): o corpo vira uma coluna */
@container (max-width:640px){
  .tr-corpo{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (min-width:1024px) and (max-width:1180px){
  .tr-aba{padding:12px 16px 13px 14px}
  .tr-aba-pedido{font-size:1.0625rem}
}

/* ---------- tablet e celular ---------- */
@media (max-width:1023px){
  .tr-cab{grid-template-columns:minmax(0,1fr)}
  .tr-mesa{grid-template-columns:minmax(0,1fr);gap:0}
  .tr-lado{display:contents}
  .tr-lado-t{order:1}
  .tr-abas{order:2;margin-bottom:24px}
  .tr-paineis{order:3}
  .tr-outro{order:4}
  .tr-foto{order:5;max-width:380px}
  .tr-aba[aria-selected="true"]{width:auto;margin-right:0;border-radius:999px}
  .tr-aba[aria-selected="true"]::before{display:none}
  .tr-abas{flex-direction:row;flex-wrap:wrap;gap:8px}
  .tr-aba{display:inline-flex;width:auto;border-radius:999px;padding:10px 18px 11px}
  .tr-aba-n,.tr-aba-nome{display:none}
  .tr-aba-pedido{font-size:1.0625rem}
  .tr-aba[aria-selected="true"]{transform:none}
  .tr-aba[aria-selected="true"]::after{display:none}
  .js .tr-paineis{display:block}
  .js .tr-painel:not(.on){display:none}
}
@media (max-width:640px){
  .tr-abas{margin-right:calc(-1 * var(--pad))}
  .tr-abas{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding:4px var(--pad) 10px 2px;scrollbar-width:none;
    -webkit-mask:linear-gradient(to right,#000 85%,transparent);mask:linear-gradient(to right,#000 85%,transparent)}
  .tr-abas::-webkit-scrollbar{display:none}
  .tr-aba{flex:none;scroll-snap-align:start;white-space:nowrap;min-height:46px}
  .tr-outro{margin-right:var(--pad);font-size:1.0625rem}
  .tr-painel{border-radius:22px;padding:28px 22px 26px}
  .tr-corpo{grid-template-columns:minmax(0,1fr)}
  .tr-quer{font-size:16.5cqi}
  .tr-nome-t{text-shadow:none}
  .tr-painel .btn-zap{white-space:normal;text-align:center;line-height:1.25;padding:12px 22px}
  .tr-acoes{flex-direction:column;align-items:stretch}
  .tr-prox{justify-content:end}
  .tr-foto{max-width:300px}
}
@media (prefers-reduced-motion:reduce){
  .tr-aba{transition:none}
  .tr-painel.tr-varre .tr-brilho{animation:none}
}