/* 6 · A sala — classes sa- (a foto da porta dissolvida na malha; os cinco sentidos acendem) */
.sa-secao{overflow:hidden}
.sa-miolo{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"abre fotos" "ritual fotos";column-gap:clamp(32px,5vw,88px);row-gap:44px;align-items:start}
.sa-olho-sep{width:1px;height:12px;background:currentColor;opacity:.5}
.sa-abre{grid-area:abre}
.sa-titulo{max-width:12ch;margin-bottom:22px}
.sa-titulo em{display:block}
.sa-voz{margin:30px 0 0;max-width:40ch}
.sa-voz .wf-citacao{color:var(--petroleo)}

/* os cinco sentidos: coluna sob a etiqueta, na parede branca da foto (desktop) */
.sa-sentidos{grid-area:fotos;align-self:start;justify-self:start;z-index:3;list-style:none;display:grid;row-gap:13px;margin:98px 0 0 30px;position:relative;padding-left:0}
.sa-sentidos::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--ameixa-clara);opacity:.8}
.sa-sentidos li{display:grid;grid-template-columns:9px auto auto;align-items:center;column-gap:12px;opacity:.35;translate:-8px 0;transition:opacity .7s var(--curva), translate .7s var(--curva);transition-delay:calc(.5s + var(--i) * .24s)}
.sa-sentidos li i{width:9px;height:9px;border-radius:50%;border:1px solid var(--ameixa);background:var(--papel);transition:background .5s, box-shadow .9s;transition-delay:calc(.6s + var(--i) * .24s);position:relative;z-index:1}
.sa-sentidos li b{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.08em;color:var(--ameixa)}
.sa-sentidos li span{font-family:var(--mono);font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--petroleo)}
.sa-sentidos.wf-visivel li{opacity:1;translate:0 0}
.sa-sentidos.wf-visivel li i{background:var(--ameixa);box-shadow:0 0 0 5px color-mix(in oklab, var(--ameixa) 15%, transparent)}

/* as fotos: a da porta sangra 60 px para cada lado da coluna e se dissolve na malha */
.sa-fotos{grid-area:fotos;position:relative;margin:0 0 56px}
.sa-porta{position:relative;margin:0 -60px;aspect-ratio:1/1;max-height:760px}
.sa-porta::before{content:"";position:absolute;left:50%;top:66%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle, color-mix(in oklch, var(--ameixa-clara) 60%, var(--papel)) 0%, color-mix(in oklab, var(--greige-2) 80%, transparent) 40%, transparent 66%);filter:blur(30px);z-index:0}
.sa-porta img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 66%;filter:sepia(.12) saturate(.92);
  -webkit-mask-image:radial-gradient(ellipse 78% 76% at 50% 50%, #000 55%, transparent 100%), linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0, #000 20%, #000 66%, transparent 100%);
  mask-image:radial-gradient(ellipse 78% 76% at 50% 50%, #000 55%, transparent 100%), linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0, #000 20%, #000 66%, transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.sa-etiqueta{position:absolute;z-index:2;left:90px;top:40px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ameixa);line-height:1.5;padding-left:22px}
.sa-etiqueta::before{content:"";position:absolute;left:0;top:7px;width:12px;height:1px;background:var(--ameixa)}
.sa-etiqueta small{display:block;font-size:10px;color:var(--tinta-suave);letter-spacing:.06em}
.sa-poltrona{position:absolute;z-index:4;left:0;bottom:-44px;width:min(34%,220px);margin:0;padding:8px 8px 10px;border-radius:14px;background:var(--vidro);box-shadow:var(--vidro-borda);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sa-poltrona img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:42% 28%;border-radius:8px}
.sa-poltrona figcaption{margin-top:9px;font-size:10px;text-align:center}
.sa-ambiente{position:absolute;z-index:3;left:calc(min(34%,220px) + 30px);right:0;bottom:-30px;margin:0;max-width:34ch}
.sa-ambiente-fala{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.4;color:var(--petroleo)}

/* o ritual */
.sa-ritual{grid-area:ritual}
.sa-tag{color:var(--ameixa);margin-bottom:10px}
.sa-ritual .wf-h3{margin-bottom:12px}
.sa-prova{margin:26px 0 0;padding-left:18px;border-left:1px solid var(--ameixa-clara);max-width:40ch}

@media (max-width:1100px){
  .sa-miolo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sa-porta{margin:0;aspect-ratio:1/1.05}
  .sa-etiqueta{left:22px;top:34px}
  .sa-sentidos{margin:88px 0 0 22px}
  .sa-ambiente{position:static;margin:18px 0 0;max-width:none}
  .sa-fotos{margin-bottom:0}
}
@media (max-width:760px){
  .sa-miolo{grid-template-columns:1fr;grid-template-areas:"abre" "fotos" "sentidos" "ritual";row-gap:28px}
  .sa-titulo{max-width:none;margin-bottom:16px}
  .sa-voz{margin-top:22px}
  .sa-fotos{margin:6px 0 0}
  .sa-porta{aspect-ratio:1/1;max-height:none}
  .sa-porta img{object-position:46% 70%;
    -webkit-mask-image:radial-gradient(ellipse 88% 86% at 50% 52%, #000 60%, transparent 100%), linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
    mask-image:radial-gradient(ellipse 88% 86% at 50% 52%, #000 60%, transparent 100%), linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%)}
  .sa-etiqueta{left:12px;top:16px}
  .sa-poltrona{position:relative;left:auto;bottom:auto;width:46%;margin:-16% 0 0 auto;padding:6px 6px 8px}
  .sa-ambiente{margin-top:14px}
  .sa-sentidos{grid-area:sentidos;align-self:start;justify-self:stretch;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0}
  .sa-sentidos::before{display:none}
  .sa-sentidos li{grid-template-columns:8px auto auto;column-gap:8px}
  .sa-sentidos li span{font-size:12px}
  .sa-ritual{padding-top:4px}
}