/* 04 · Tratamentos: três portas num corredor. Base (sem JS e telas estreitas): portas empilhadas, todas abertas. */
.tr-sec{overflow:clip}
.tr-topo{display:grid;gap:1.2rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.tr-titulo{max-width:17ch}
.tr-lead{max-width:30rem}

.tr-corredor{--tr-f:11rem;--tr-g:1.1rem;position:relative;display:grid;gap:.75rem}
.tr-porta{position:relative;min-width:0;margin:7px;background:var(--wf-folha);border-radius:1px;box-shadow:0 0 0 1px rgb(35 31 30 / .2),0 0 0 6px var(--wf-folha),0 0 0 7px rgb(35 31 30 / .14),18px 24px 30px -20px rgb(50 40 34 / .5)}
.tr-h{margin:0;font:inherit}
.tr-botao{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tr-botao[aria-disabled="true"]{cursor:default}
.tr-botao:focus-visible{outline:none}
.tr-botao:focus-visible .tr-folha{outline:2px solid var(--wf-vinho);outline-offset:-7px}

/* a folha da porta (no empilhado: a travessa de cima, com a plaqueta) */
.tr-folha{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:1rem;min-height:5.5rem;padding:.9rem 4.4rem .9rem 1rem;
  background:linear-gradient(100deg in oklab,#fdfcfa,#f1eeea 60%,#e9e6e1);border-bottom:1px solid rgb(35 31 30 / .1)}
.tr-plaq{position:relative;display:inline-flex;align-items:center;padding:.5rem 1.55rem .42rem;border-radius:2px;
  background:linear-gradient(118deg in oklab,rgb(255 255 255 / .96),rgb(250 246 241 / .86) 45%,rgb(255 255 255 / .94));border:1px solid #fff;
  box-shadow:6px 9px 14px -9px rgb(50 40 34 / .5),2px 3px 0 -1px rgb(255 255 255 / .6)}
.tr-plaq::before,.tr-plaq::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c3beb6 55%,#6f6a63);box-shadow:1px 2px 2px rgb(0 0 0 / .25)}
.tr-plaq::before{left:7px}.tr-plaq::after{right:7px}
.tr-nome{font-family:var(--wf-serif);font-size:1.5rem;line-height:1.1;background:linear-gradient(100deg,#6f5220,#a07a2e 30%,#7d5c24 55%,#a07a2e 80%,#6f5220);-webkit-background-clip:text;background-clip:text;color:transparent}
.tr-plaq{grid-row:1 / span 2;justify-self:start}
.tr-conta{font-size:var(--wf-t-mini);line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--wf-tinta-2);white-space:nowrap;grid-row:1 / span 2}
.tr-abrir{display:none}
.tr-macaneta{position:absolute;right:1.1rem;top:50%;width:2.3rem;height:.5rem;margin-top:-.25rem;border-radius:.25rem;background:linear-gradient(180deg,#fff,#c9c4bc 45%,#8d877f);box-shadow:2px 4px 5px rgb(0 0 0 / .28)}
.tr-macaneta::before{content:"";position:absolute;right:-.3rem;top:50%;width:1.1rem;height:1.1rem;margin-top:-.55rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c9c4bc 55%,#7b756d);box-shadow:2px 3px 4px rgb(0 0 0 / .25)}

/* a sala */
.tr-sala{position:relative;background:var(--wf-folha);isolation:isolate}
.tr-foto{position:relative;margin:0;height:12rem;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 96%);mask-image:linear-gradient(180deg,#000 45%,transparent 96%)}
.tr-foto img{width:150%;height:100%;max-width:none;object-fit:cover;object-position:0% 40%}
.tr-foto-b img{object-position:0% 58%}
.tr-foto-c img{object-position:0% 72%}
.tr-conteudo{position:relative;padding:0 1.15rem 1.4rem;margin-top:-1rem}
.tr-rotulo{display:none}
.tr-lista{list-style:none;padding:0;margin:0}
.tr-lista li{padding:.95rem 0 1rem;border-top:1px solid color-mix(in oklab,var(--wf-ouro) 34%,transparent)}
.tr-lista li:first-child{border-top:0}
.tr-lista strong{display:block;font-family:var(--wf-serif);font-weight:400;font-size:1.28rem;line-height:1.2;color:var(--wf-tinta)}
.tr-lista span{display:block;margin-top:.25rem;font-size:.97rem;line-height:1.5;color:var(--wf-tinta-2);max-width:31rem}
.tr-fala{display:block;margin-top:.7rem;padding-left:.9rem;border-left:1px solid var(--wf-ouro);font-family:var(--wf-serif);font-size:1.12rem;line-height:1.3;color:var(--wf-tinta);quotes:"“" "”"}
.tr-quem{display:block;padding-left:.9rem;border-left:1px solid var(--wf-ouro);padding-top:.2rem;font-style:normal;font-size:var(--wf-t-mini);color:var(--wf-tinta-2)}

/* fecho */
.tr-fim{margin-top:clamp(2.2rem,3vw,2.6rem);display:grid;gap:1.3rem;justify-items:start}
.tr-fim-frase{font-family:var(--wf-serif);font-size:clamp(1.35rem,2.3vw,1.95rem);line-height:1.22;max-width:27ch;text-wrap:balance}

/* com JS, empilhado: uma aberta por vez */
.tr-js .tr-porta:not(.tr-aberta) .tr-sala{display:none}
.tr-js .tr-porta:not(.tr-aberta) .tr-folha{border-bottom-color:transparent}
.tr-js .tr-porta:not(.tr-aberta) .tr-conta{align-self:end;grid-row:auto}
.tr-js .tr-porta:not(.tr-aberta) .tr-abrir{display:block;align-self:start;font-size:var(--wf-t-mini);line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--wf-ouro-esc);text-decoration:underline;text-decoration-color:var(--wf-ouro);text-underline-offset:.3em}
.tr-js .tr-porta:not(.tr-aberta) .tr-folha{box-shadow:inset 0 -3px 0 #f1dcaa}
.tr-js .tr-aberta .tr-sala{animation:tr-chega .7s var(--wf-curva) both}
@keyframes tr-chega{from{opacity:0}to{opacity:1}}
.tr-js .tr-aberta .tr-macaneta{transform:rotate(-24deg);transform-origin:calc(100% - .25rem) 50%}
.tr-macaneta{transition:transform .5s var(--wf-curva)}

@media (min-width:600px){
  .tr-foto{position:absolute;inset:0 0 0 auto;width:44%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 14%,rgb(0 0 0 / .5) 48%,#000 82%);mask-image:linear-gradient(90deg,transparent 14%,rgb(0 0 0 / .5) 48%,#000 82%)}
  .tr-foto img{width:100%;object-position:0% 50%}
  .tr-foto-b img{object-position:30% 50%;transform:scale(1.14);transform-origin:30% 100%}
  .tr-foto-c img{object-position:12% 50%;transform:scale(1.26);transform-origin:20% 96%}
  .tr-conteudo{margin-top:0;padding:.6rem 1.6rem 1.6rem;width:66%}
}

/* corredor: portas lado a lado, a aberta mais larga */
@media (min-width:1000px){
  .tr-topo{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:3rem}
  .tr-lead{justify-self:end;padding-bottom:.4rem}
  .tr-js .tr-corredor{--tr-p:calc(var(--tr-f) + 16px + var(--tr-g));--tr-i:0;display:flex;gap:var(--tr-g);container-type:inline-size;padding-bottom:4.2rem}
  .tr-js .tr-corredor::after{content:"";position:absolute;z-index:-2;left:-2.5rem;right:-2.5rem;bottom:0;height:4.2rem;border-top:1px solid rgb(35 31 30 / .22);background:linear-gradient(180deg in oklab,rgb(35 31 30 / .11),rgb(35 31 30 / .03) 28%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)}
  .tr-js .tr-corredor::before{content:"";position:absolute;z-index:-1;bottom:.2rem;height:4rem;left:calc(var(--tr-i)*var(--tr-p) - .6rem);width:calc(100% - 2*var(--tr-p) + 2.6rem);background:linear-gradient(180deg in oklab,rgb(255 238 196 / .95),rgb(255 240 205 / .35) 55%,transparent);clip-path:polygon(1.2rem 0,calc(100% - 2.2rem) 0,100% 100%,0 100%);filter:blur(5px);opacity:0;transition:left 1s var(--wf-curva),opacity 1.2s .3s}
  .tr-js .tr-corredor.wf-visto::before{opacity:1}
  .tr-js .tr-corredor:has(.tr-porta:nth-child(2).tr-aberta){--tr-i:1}
  .tr-js .tr-corredor:has(.tr-porta:nth-child(3).tr-aberta){--tr-i:2}
  .tr-js .tr-porta{flex:0 0 var(--tr-f);overflow:hidden;background:linear-gradient(180deg in oklab,#fff8e9,#f1e2c4);margin:8px 8px 0;box-shadow:0 0 0 1px rgb(35 31 30 / .2),0 0 0 7px var(--wf-folha),0 0 0 8px rgb(35 31 30 / .14),20px 26px 34px -22px rgb(50 40 34 / .5);transition:flex-grow 1s var(--wf-curva)}
  .tr-js .tr-porta.tr-aberta{flex-grow:1;box-shadow:0 0 0 1px rgb(35 31 30 / .2),0 0 0 7px var(--wf-folha),0 0 0 8px rgb(35 31 30 / .14),20px 26px 34px -22px rgb(50 40 34 / .5)}
  .tr-js .tr-h{position:absolute;inset:0 auto 0 0;width:var(--tr-f);z-index:2;perspective:1100px;perspective-origin:0 46%}
  .tr-js .tr-aberta .tr-h{width:4rem}
  .tr-js .tr-botao{position:absolute;inset:0 auto 0 0;width:var(--tr-f);height:100%;transform-style:preserve-3d}
  .tr-js .tr-aberta .tr-botao{width:4rem}
  .tr-js .tr-folha{position:absolute;inset:0 auto 0 0;width:var(--tr-f);min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.8rem;padding:9.5rem .6rem 0;border:0;
    background:linear-gradient(96deg in oklab,#fdfcfa,#f3f0ec 55%,#e6e2dc);box-shadow:inset -1px 0 0 rgb(35 31 30 / .18);
    transform-origin:0 50%;transform:rotateY(-24deg);transition:transform 1.1s var(--wf-curva),filter 1.1s var(--wf-curva)}
  .tr-js .tr-folha::before,.tr-js .tr-folha::after{content:"";position:absolute;left:13%;right:13%;border:1px solid rgb(35 31 30 / .1);box-shadow:inset 1px 1px 0 #fff,1px 1px 0 #fff;pointer-events:none;transition:opacity .4s}
  .tr-js .tr-folha::before{top:5%;height:50%}
  .tr-js .tr-folha::after{top:60%;bottom:5%}
  .tr-js .tr-plaq{z-index:1}
  .tr-js .tr-nome{font-size:1.75rem}
  .tr-js .tr-conta{position:relative;z-index:1;font-size:.875rem;letter-spacing:.1em}
  .tr-js .tr-porta:not(.tr-aberta) .tr-abrir{position:absolute;left:0;right:0;bottom:11%;margin:0;text-align:center;z-index:1}
  .tr-js .tr-porta:not(.tr-aberta) .tr-folha{box-shadow:inset -1px 0 0 rgb(35 31 30 / .18)}
  .tr-js .tr-macaneta{right:.9rem;top:55%;z-index:1}
  .tr-js .tr-botao:hover .tr-folha,.tr-js .tr-botao:focus-visible .tr-folha{transform:rotateY(-33deg)}
  .tr-js .tr-aberta .tr-folha,.tr-js .tr-aberta .tr-botao:hover .tr-folha,.tr-js .tr-aberta .tr-botao:focus-visible .tr-folha{transform:rotateY(-78deg);background:linear-gradient(96deg in oklab,#cfcac3,#ebe7e1 70%,#f6f3ef);box-shadow:inset -5px 0 0 #fbf9f6,inset -6px 0 0 rgb(35 31 30 / .18)}
  .tr-js .tr-aberta .tr-folha::before,.tr-js .tr-aberta .tr-folha::after{opacity:0}
  .tr-js .tr-corredor:not(.wf-visto) .tr-aberta .tr-folha{transform:rotateY(-24deg)}
  .tr-js .tr-aberta .tr-sala::before{content:"";position:absolute;inset:0 auto 0 0;width:7rem;z-index:1;background:linear-gradient(90deg in oklab,rgb(50 40 34 / .16),transparent);pointer-events:none}
  .tr-js .tr-aberta .tr-folha>*{opacity:0;transition:opacity .3s}
  .tr-js .tr-folha>*{transition:opacity .5s .5s}
  .tr-js .tr-porta:not(.tr-aberta) .tr-sala{display:grid;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
  .tr-js .tr-sala{display:grid;width:calc(100cqw - 2*var(--tr-f) - 2*var(--tr-g) - 48px);height:100%;min-height:33rem;opacity:1;transition:opacity .9s .25s;animation:none!important}
  .tr-js .tr-rotulo{display:flex;align-items:baseline;gap:1rem;margin-bottom:.9rem}
  .tr-rotulo span{font-family:var(--wf-serif);font-size:2.3rem;line-height:1;color:var(--wf-tinta)}
  .tr-rotulo small{font-size:var(--wf-t-mini);letter-spacing:.12em;text-transform:uppercase;color:var(--wf-ouro-esc)}
  .tr-js .tr-conteudo{align-self:center;width:64%;padding:2rem 1rem 2rem 5.4rem}
  .tr-js .tr-foto{width:44%}
  .tr-lista li{padding:.6rem 0 .66rem}
  .tr-lista strong{font-size:1.24rem}
  .tr-lista span{font-size:.95rem}
  .tr-fim{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2.5rem}
}
@media (min-width:1000px) and (max-width:1180px){
  .tr-corredor{--tr-f:9.6rem}
  .tr-js .tr-conta{letter-spacing:.05em}
  .tr-js .tr-conteudo{width:72%;padding-left:5rem}
  .tr-js .tr-foto{width:38%}
}
@media (max-width:420px){
  .tr-folha{column-gap:.7rem;padding-left:.85rem;padding-right:3.5rem}
  .tr-plaq{padding-left:1.3rem;padding-right:1.3rem}
  .tr-conta,.tr-js .tr-porta:not(.tr-aberta) .tr-abrir{letter-spacing:.04em}
  .tr-macaneta{right:.9rem;width:1.8rem}
}