/* Seção 3 · tratamentos — frascos com níveis numa bancada; o aberto se enche (classes tr-) */
.tr-secao{--tr-curva:cubic-bezier(.3,.8,.2,1);--tr-area:190px;--tr-ameixa-texto:color-mix(in oklch, var(--ameixa) 55%, var(--ameixa-escura))} /* ameixa para texto miúdo: AA sobre a parte mais escura da malha */
.tr-cabeca{margin-bottom:clamp(24px,3vw,40px)}
.tr-titulo{max-width:none}
.tr-cabeca-linha{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.62fr);gap:16px clamp(40px,6vw,96px);align-items:end;margin-top:22px}
/* ficha da bancada: um rótulo em mono */
.tr-ficha{justify-self:end;width:100%;max-width:400px;padding:16px 20px 14px;border-radius:12px;background:var(--vidro);box-shadow:var(--vidro-borda);font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.5;color:var(--tinta-suave)}
.tr-ficha > div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:0 14px;padding:5px 0;border-top:1px solid rgba(13,50,70,.12)}
.tr-ficha .tr-ficha-topo{border-top:0;padding-top:0;padding-bottom:8px;text-transform:uppercase;letter-spacing:.14em;color:var(--petroleo)}
.tr-ficha dt{text-transform:uppercase;letter-spacing:.1em;color:var(--tr-ameixa-texto);font-size:10.5px;padding-top:1px}
.tr-ficha dd{color:var(--tinta)}

/* bancada: uma grade só; fileira 1 = frascos, fileira 2 = o painel aberto */
.tr-bancada{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:12px;align-items:end;
  background:linear-gradient(rgba(13,50,70,.28), rgba(13,50,70,.28)) 0 var(--tr-area) / 100% 1px no-repeat}
.tr-item{grid-row:1;align-self:end;min-width:0}
.tr-item--grande{grid-column:span 2}
.tr-item.wf-entra{transition-delay:calc(var(--i) * .08s)}

.tr-frasco{display:grid;grid-template-rows:var(--tr-area) auto;justify-items:center;width:100%;padding:0 2px;text-align:center;color:var(--tinta-suave);border-radius:12px}
.tr-frasco:focus-visible{outline-offset:6px}
.tr-vidro{position:relative;display:block;align-self:end;width:44px;height:var(--h,106px);margin-bottom:0;transition:translate .5s var(--curva)}
.tr-frasco:hover .tr-vidro{translate:0 -3px}
.tr-tampa{position:absolute;left:50%;top:0;width:18px;height:14px;transform:translateX(-50%);border-radius:4px 4px 2px 2px;background:var(--petroleo);box-shadow:inset 0 2px 0 rgba(255,255,255,.25);transition:transform .6s var(--curva)}
.tr-gargalo{position:absolute;left:50%;top:12px;width:16px;height:14px;transform:translateX(-50%);background:var(--vidro);box-shadow:inset 0 0 0 1px rgba(13,50,70,.2)}
.tr-corpo{position:absolute;left:0;right:0;top:24px;bottom:0;border-radius:9px 9px 14px 14px;background:var(--vidro);box-shadow:var(--vidro-borda);overflow:hidden}
.tr-liquido{position:absolute;left:3px;right:3px;bottom:3px;height:var(--n);border-radius:0 0 12px 12px;background:var(--liquido);transition:height 2.4s var(--tr-curva)}
.tr-liquido::after{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:4px;border-radius:3px;background:rgba(255,255,255,.32)}
.tr-menisco{position:absolute;left:-2px;right:-2px;top:-4px;height:8px;border-radius:50%;background:color-mix(in oklch, var(--ameixa-clara) 75%, white);opacity:.95;box-shadow:0 1px 0 rgba(255,255,255,.7)}
.tr-ticks{position:absolute;right:3px;top:10px;bottom:10px;width:7px;background:repeating-linear-gradient(180deg, rgba(13,50,70,.32) 0 1px, transparent 1px 7px) 100% 0 / 4px 100% no-repeat, repeating-linear-gradient(180deg, rgba(13,50,70,.42) 0 1px, transparent 1px 35px) 100% 0 / 7px 100% no-repeat}
.tr-rotulo{position:absolute;left:6px;right:6px;top:16px;height:20px;display:grid;place-items:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--petroleo);background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(13,50,70,.12), 0 1px 2px rgba(13,50,70,.12);border-radius:2px}
.tr-pe{position:absolute;left:50%;bottom:-6px;width:70px;height:10px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center, rgba(13,50,70,.22), rgba(13,50,70,.06) 55%, transparent 72%);transition:background .6s, transform .5s var(--curva), opacity .5s}
.tr-nome{display:block;padding:14px 0 0;font-family:var(--mono);font-size:11px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;max-width:15ch;transition:color .4s}
.tr-nome small{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--tr-ameixa-texto);margin-top:4px;text-transform:uppercase}

/* o grande: o Ritual dos 5 Sentidos */
.tr-item--grande .tr-vidro{width:76px;height:186px}
.tr-item--grande .tr-tampa{width:28px;height:20px;border-radius:6px 6px 3px 3px}
.tr-item--grande .tr-gargalo{top:18px;width:30px;height:20px}
.tr-item--grande .tr-corpo{top:36px;border-radius:14px 14px 18px 18px}
.tr-item--grande .tr-liquido{border-radius:0 0 16px 16px}
.tr-item--grande .tr-rotulo{left:10px;right:10px;top:26px;height:26px;font-size:10px}
.tr-item--grande .tr-pe{width:110px;bottom:-7px}
.tr-item--grande .tr-nome{max-width:22ch}

/* aberto: tirado da prateleira, enche, destampa, rótulo aceso */
.tr-frasco[aria-expanded="true"]{color:var(--petroleo)}
.tr-frasco[aria-expanded="true"] .tr-nome{font-weight:500}
.tr-frasco[aria-expanded="true"] .tr-vidro{translate:0 -5px}
.tr-frasco[aria-expanded="true"] .tr-liquido{height:calc(100% - 6px)}
.tr-frasco[aria-expanded="true"] .tr-tampa{transform:translate(-50%,-7px) rotate(-10deg)}
.tr-frasco[aria-expanded="true"] .tr-rotulo{background:var(--ameixa);color:#fff;box-shadow:0 0 0 1px color-mix(in oklch, var(--ameixa) 70%, white), 0 1px 3px rgba(94,52,80,.35)}
.tr-frasco[aria-expanded="true"] .tr-pe{transform:translate(-50%,5px) scaleX(.8);background:radial-gradient(ellipse at center, color-mix(in oklch, var(--ameixa) 40%, transparent), color-mix(in oklch, var(--ameixa) 10%, transparent) 55%, transparent 72%)}
.tr-rotulo{transition:background .5s, color .5s, box-shadow .5s}

/* o painel de leitura (fileira 2) */
.tr-detalhe{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px clamp(32px,5vw,80px);align-items:start;padding:clamp(28px,4vw,44px) 0 8px;animation:tr-chega .7s var(--curva) both}
.tr-detalhe[hidden]{display:none}
@keyframes tr-chega{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.tr-detalhe-cabeca{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.tr-detalhe-num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--tr-ameixa-texto);animation:tr-chega .5s .1s var(--curva) both}
.tr-detalhe-texto .wf-texto{max-width:52ch}
.tr-voz{padding-left:18px;border-left:1px solid var(--ameixa-clara);max-width:40ch}
.tr-voz--paciente{border-left-color:rgba(13,50,70,.22)}

/* fecho */
.tr-fecho{display:flex;justify-content:space-between;align-items:end;gap:24px 48px;flex-wrap:wrap;margin-top:clamp(56px,7vw,88px);padding-top:28px;border-top:1px solid rgba(13,50,70,.14)}
.tr-fecho-voz .wf-citacao{color:var(--petroleo)}

@media (max-width:1100px){
  .tr-cabeca-linha{grid-template-columns:1fr;gap:18px}
  .tr-ficha{justify-self:start;max-width:520px}
  .tr-bancada{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:28px;background:none;align-items:end}
  .tr-item{grid-row:auto}
  .tr-item--grande{grid-column:span 2}
  .tr-detalhe{grid-row:auto;grid-column:1/-1;border-top:1px solid rgba(13,50,70,.18)}
  .tr-frasco{grid-template-rows:var(--tr-area) auto}
}
@media (max-width:760px){
  .tr-cabeca-linha{grid-template-columns:1fr;gap:18px}
  .tr-ficha{justify-self:start;max-width:none;padding:14px 16px 12px}
  .tr-ficha > div{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .tr-bancada{grid-template-columns:1fr 1fr;grid-auto-flow:row dense;gap:10px;background:none;align-items:stretch}
  .tr-item{grid-row:auto}
  .tr-item--grande{grid-column:1/-1}
  .tr-frasco{grid-template-rows:none;grid-template-columns:40px minmax(0,1fr);column-gap:10px;align-items:center;justify-items:start;text-align:left;padding:14px 10px 14px 8px;border-radius:14px;background:color-mix(in oklab, var(--folha) 70%, transparent);box-shadow:inset 0 0 0 1px rgba(13,50,70,.12);min-height:100%}
  .tr-frasco[aria-expanded="true"]{background:color-mix(in oklab, var(--folha) 95%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ameixa) 45%, transparent)}
  .tr-vidro{width:30px;height:72px;justify-self:center}
  .tr-tampa{width:13px;height:10px}
  .tr-gargalo{top:9px;width:11px;height:10px}
  .tr-corpo{top:17px;border-radius:6px 6px 10px 10px}
  .tr-liquido{left:2px;right:2px;bottom:2px;border-radius:0 0 8px 8px}
  .tr-liquido::after{display:none}
  .tr-rotulo{left:4px;right:4px;top:10px;height:13px;font-size:7px}
  .tr-ticks{right:2px;top:6px;bottom:6px;width:5px}
  .tr-pe{display:none}
  .tr-nome{padding:0;max-width:none;font-size:10.5px;letter-spacing:.04em;line-height:1.3;min-width:0;hyphens:manual}
  .tr-item--grande .tr-frasco{grid-template-columns:60px minmax(0,1fr)}
  .tr-item--grande .tr-vidro{width:46px;height:104px}
  .tr-item--grande .tr-tampa{width:18px;height:14px}
  .tr-item--grande .tr-gargalo{top:12px;width:18px;height:14px}
  .tr-item--grande .tr-corpo{top:24px;border-radius:9px 9px 14px 14px}
  .tr-item--grande .tr-rotulo{left:6px;right:6px;top:14px;height:16px;font-size:8px}
  .tr-item--grande .tr-nome{font-size:12px;max-width:none}
  .tr-detalhe{grid-column:1/-1;grid-template-columns:1fr;gap:14px;padding:6px 6px 18px;border-top:0}
  .tr-detalhe-texto .wf-texto{max-width:none}
  .tr-voz{max-width:none}
  .tr-fecho{margin-top:36px;padding-top:24px}
}