/* de · Depois da porta — Prancha 06 (papel) */
.de { --de-tinta: var(--ouro-tinta); --de-x: 1rem; }
.de-dentro { position: relative; }

/* ───── cabeçalho ───── */
.de-cabeca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.de-cabeca .wf-carimbo { grid-column: 1 / -1; justify-self: start; }
.de-titulo { max-width: 15ch; }
.de-intro { margin: 0; }

/* ───── palco: planta fixa + linha do acompanhamento ───── */
.de-palco {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 1.4fr) minmax(0, 11fr);
  grid-template-areas: "planta . linha";
}
.de-planta-col { grid-area: planta; position: relative; z-index: 2; }
.de-planta { margin: 0; position: sticky; top: max(4.5rem, calc(50vh - 36vh - 2.5rem)); width: min(100%, calc(72vh * 560 / 600)); }
.de-carimbo-planta {
  display: grid; grid-template-columns: repeat(3, auto); margin: calc(-11% + 1.4rem) 0 0 7.1%; width: fit-content;
  border: 1px solid color-mix(in oklab, var(--nanquim) 26%, transparent);
  font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; line-height: 1.25; color: var(--nanquim-2);
}
.de-planta { container-type: inline-size; }
@container (max-width: 500px) { .de-cp-ed { display: none; } }
.de-carimbo-planta > span { white-space: nowrap; padding: .55rem .8rem .6rem; border-right: 1px solid color-mix(in oklab, var(--nanquim) 20%, transparent); }
.de-carimbo-planta > span:last-child { border-right: 0; }
.de-carimbo-planta b { display: block; white-space: nowrap; font-weight: 400; color: var(--nanquim); margin-top: .25rem; }
.de-carimbo-planta .de-ativo { color: var(--ouro-tinta); }
.de-cp-ativo { background: color-mix(in oklab, var(--ouro) 10%, transparent); }
/* luz morna que sai pela porta aberta */
.de-luz { position: absolute; left: 0; top: 0; width: 34rem; height: 22rem; translate: -38% -50%; border-radius: 50%;
  background: radial-gradient(closest-side in oklab, #e9d3ad 0%, #e9d3ad8c 35%, #f2ebe000 100%); opacity: 0; transition: opacity 2.4s ease .5s; z-index: -1; pointer-events: none; }
.de-aberta .de-luz { opacity: .85; }
.de-planta-desenho { isolation: isolate; }
.de-linha { grid-area: linha; position: relative; z-index: 1; list-style: none; margin: 0; padding: var(--de-desloc, 0) 0 0; }

/* planta da sala */
.de-planta-desenho { position: relative; aspect-ratio: 560 / 600; }
.de-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.de-foto {
  position: absolute; left: 9.643%; top: 12.333%; width: 64.286%; height: 75%;
  object-fit: cover; object-position: 50% 30%;
  filter: saturate(.92) contrast(1.02);
}
.de-parede { opacity: .55; }
.de-parede-linha, .de-batente { stroke: var(--nanquim); stroke-width: 1.4; }
.de-cota path { stroke: var(--nanquim-2); stroke-width: .8; opacity: .7; }
.de-arco-guia { stroke: var(--nanquim-2); stroke-width: .7; stroke-dasharray: 2 5; opacity: .45; }
.de-arco { stroke: var(--de-tinta); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.de-folha rect { fill: var(--nanquim); }
.de-folha { transform-box: view-box; transform-origin: 428px 110px; }
.de-dobradica { fill: var(--papel); stroke: var(--nanquim); stroke-width: 1.3; }

.de-rot { position: absolute; font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: var(--nanquim); white-space: nowrap; }
.de-rot-sala { left: 41.79%; top: 5%; transform: translate(-50%, -50%); background: var(--papel); padding: .15rem .6rem; }
.de-rot-porta { left: 77.2%; top: 17.6%; transform: translateY(-100%); color: var(--ouro-tinta); }
.de-porta-ponto { position: absolute; left: 76.43%; top: 28.333%; width: 0; height: 0; }
/* traço que sai pela porta até a linha (computador) */
.de-saida { position: absolute; left: 0; top: -.75px; height: 1.5px; width: var(--de-stub, 0px); background: var(--de-tinta); transform-origin: 0 50%; }
.de-saida::after { content: ""; position: absolute; left: 0; top: -3.25px; width: 8px; height: 8px; border-radius: 50%; background: var(--de-tinta); translate: -50% 0; }

/* trilho e preenchimento da linha */
.de-linha::before, .de-linha::after {
  content: ""; position: absolute; left: calc(var(--de-x) - .75px); top: var(--de-y0, 0px); width: 1.5px;
}
.de-linha::before { height: var(--de-alt, 0px); background: repeating-linear-gradient(to bottom, color-mix(in oklab, var(--de-tinta) 45%, transparent) 0 4px, transparent 4px 9px); }
.de-linha::after { height: var(--de-fill, 0px); background: var(--de-tinta); }

/* estações */
.de-est { position: relative; padding-left: clamp(2.75rem, 4vw, 3.5rem); margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.de-est:last-child { margin-bottom: 0; }
.de-marco {
  position: absolute; left: var(--de-x); top: .55rem; width: 15px; height: 15px; translate: -50% -50%; z-index: 1;
  border-radius: 50%; background: var(--papel); border: 1.5px solid var(--de-tinta);
  transition: background-color .5s, box-shadow .7s var(--curva);
}
.de-marco-ela { border-radius: 2px; rotate: 45deg; width: 13px; height: 13px; }
.de-marco-nota { width: 23px; height: 23px; background: radial-gradient(circle, var(--de-tinta) 0 3px, var(--papel) 3.5px); }
.de-est.on .de-marco { background: var(--de-tinta); box-shadow: 0 0 0 6px color-mix(in oklab, var(--ouro) 24%, transparent); }
.de-est.on .de-marco-nota { background: radial-gradient(circle, var(--papel) 0 3px, var(--de-tinta) 3.5px); }
.de-est-rot { font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-tinta); margin: 0 0 .9rem; line-height: 1.1; }
.de-fala { margin: 0; font-family: var(--f-titulo); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.32; color: var(--nanquim); text-wrap: pretty; }
.de-fala-g { font-weight: 300; font-size: clamp(1.6rem, 2.5vw, 2.3rem); line-height: 1.22; letter-spacing: -.005em; }
.de-fala-m { font-size: clamp(1.45rem, 2.1vw, 1.9rem); }
.de-fala-sep { font-style: normal; color: var(--ouro-tinta); margin: 0 .35em; }
.de-quem { font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--nanquim-2); margin: 1rem 0 0; }
.de-grifo {
  background: linear-gradient(color-mix(in oklab, var(--ouro) 34%, transparent), color-mix(in oklab, var(--ouro) 34%, transparent)) 0 88% / 100% .32em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.1s var(--curva) .35s;
}
.de-fala-ela { color: var(--ouro-tinta); }

/* destino: nota do Google */
.de-est-nota { padding-top: .25rem; }
.de-nota-num { display: flex; align-items: flex-end; gap: 1.1rem; margin: .25rem 0 .9rem; }
.de-nota-valor { font-family: var(--f-titulo); font-weight: 300; font-size: clamp(5rem, 9vw, 8.25rem); line-height: .8; letter-spacing: -.035em; color: var(--nanquim); }
.de-nota-lado { display: grid; gap: .5rem; padding-bottom: .35rem; }
.de-estrelas { color: var(--ouro-tinta); font-size: 1.2rem; letter-spacing: .22em; line-height: 1; }
.de-nota-txt { font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--nanquim); }
.de-nota-link { color: var(--nanquim); }

/* rota (celular): da porta até o início da linha */
.de-rota { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; display: none; }
.de-rota-linha { stroke: var(--de-tinta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ───── gesto: a porta abre e a linha acompanha a leitura ───── */
.de-folha { transition: transform 1.5s var(--curva); }
.de-arco { transition: stroke-dashoffset 1.5s var(--curva); }
.de-saida { transition: transform 1s var(--curva) .9s; }
.de-rota-linha { transition: stroke-dashoffset 1.3s var(--curva) .9s; }
.js .de-palco:not(.de-aberta) .de-folha { transform: rotate(90deg); }
.js .de-palco:not(.de-aberta) .de-arco, .js .de-palco:not(.de-aberta) .de-rota-linha { stroke-dashoffset: 1; }
.js .de-palco:not(.de-aberta) .de-saida { transform: scaleX(0); }
.js .de-est > :not(.de-marco) { opacity: .42; translate: -6px 0; transition: opacity .8s ease, translate 1s var(--curva); }
.js .de-est.on > :not(.de-marco) { opacity: 1; translate: none; }
.js .de-est:not(.on) .de-grifo { background-size: 0% .32em; }

/* ───── tablet e celular ───── */
@media (max-width: 999px) {
  .de-cabeca { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .de-titulo { max-width: 18ch; }
  .de-palco { grid-template-columns: minmax(0, 1fr); grid-template-areas: "planta" "linha"; }
  .de-planta { position: relative; top: 0; width: min(84%, 30rem); margin-bottom: 4.5rem; }
  .de-saida { display: none; }
  .de-planta { margin-bottom: 3.5rem; }
  .de-rota { display: block; }
  .de-linha { padding-top: 0; }
}
@media (max-width: 480px) {
  .de-carimbo-extra { display: none; }
  .de .wf-carimbo { letter-spacing: .1em; }
  .de .wf-carimbo > span { padding-inline: .7rem; }
  .de-rot-porta { top: 15.5%; }
  .de-carimbo-planta { grid-template-columns: repeat(2, auto); }
  .de-planta { width: 80%; }
  .de-est { padding-left: 2.6rem; }
  .de-nota-valor { font-size: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .de-est > :not(.de-marco) { opacity: 1; }
}
.de-fala-ela .de-grifo { white-space: nowrap; }