/* ═════════ Prancha 02 · Sobre — corte do edifício ═════════ */
.so { --so-base: 6.2rem; --so-tinta: var(--nanquim); --so-luz: color-mix(in oklab, var(--luz-2) 62%, transparent); --so-p: 1; padding-bottom: clamp(3rem, 6vw, 5rem); }

/* cabeçalho */
.so-cabeca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.so-cabeca .wf-h2 { max-width: 15ch; }
.so-cabeca-b .wf-texto { margin: 0 0 .4rem; padding-left: 1.25rem; border-left: 1px solid var(--ouro-tinta); }

/* palco: retrato + edifício */
.so-palco { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: end; }

/* retrato */
.so-retrato { position: relative; margin: 0 0 0 calc(-1 * var(--margem)); align-self: end; z-index: 1; }
.so-disco { position: absolute; left: 52%; top: 44%; width: 96%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--luz) 70%, white) 0%, color-mix(in oklab, var(--luz-2) 75%, transparent) 50%, transparent 100%); }
.so-construcao { position: absolute; left: 52%; top: 44%; width: 96%; translate: -50% -50%; overflow: visible; z-index: -1; fill: none; stroke: var(--ouro-tinta); stroke-width: 1; opacity: .55; }
.so-retrato img { width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 9%), linear-gradient(to left, transparent 0, #000 5%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent 0, #000 9%), linear-gradient(to left, transparent 0, #000 5%); mask-composite: intersect; }
.so-legenda { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; padding: .9rem 0 0 var(--margem); border-top: 1px solid var(--so-tinta); }
.so-legenda .wf-rotulo { color: var(--so-tinta); }
.so-legenda-reg { font-size: var(--t-mini); color: var(--nanquim-2); font-family: var(--f-tecnica); letter-spacing: .1em; text-transform: uppercase; }

/* ───── edifício em corte ───── */
.so-predio { position: relative; display: flex; flex-direction: column; padding: 0 clamp(5rem, 7vw, 6.5rem) 0 clamp(2.6rem, 3.6vw, 3.4rem); }
.so-teto { position: relative; flex: none; height: 26px; border: 1.5px solid var(--so-tinta); border-bottom: 0; margin: 0 -14px; }
.so-teto i { position: absolute; inset: 6px 0 0; border-top: 1.5px solid var(--so-tinta);
  background: repeating-linear-gradient(45deg, var(--so-tinta) 0 1px, transparent 1px 6px); }
.so-teto::before, .so-teto::after { content: ""; position: absolute; bottom: 100%; width: 1.5px; height: 18px; background: var(--so-tinta); }
.so-teto::before { left: -1.5px; } .so-teto::after { right: -1.5px; }

.so-pavs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; border-inline: 1.5px solid var(--so-tinta); }
.so-pav { position: relative; padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2.4vw, 2rem); isolation: isolate; }
.so-pav[data-pav="2"]::before, .so-pav[data-pav="3"]::before { content: ""; position: absolute; left: -14px; right: -14px; bottom: -6px; height: 12px; z-index: 2;
  border-block: 1.5px solid var(--so-tinta); background: var(--papel) repeating-linear-gradient(45deg, var(--so-tinta) 0 1px, transparent 1px 6px); }

/* luz do pavimento aceso: sobe do piso */
.so-pav::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--so-luz), color-mix(in oklab, var(--luz) 25%, transparent));
  transform-origin: bottom; transform: scaleY(0); transition: transform 1.1s var(--curva); }
.so-pav.aceso::after { transform: none; }

.so-pav-cab { display: flex; flex-direction: column; gap: .35rem; }
.so-pav-tipo { color: var(--ouro-tinta); display: flex; align-items: baseline; gap: .7rem; }
.so-pav-num { color: var(--nanquim-2); }
.so-pav-num::after { content: "/"; margin-left: .7rem; opacity: .5; }
.so-pav-nome { font-weight: 300; font-size: clamp(1.6rem, 2.3vw, 2.3rem); line-height: 1.08; letter-spacing: -.01em; transition: color .6s; }
.so-nivel { position: absolute; left: calc(100% + 14px + .8rem); bottom: 0; display: flex; flex-direction: column-reverse; gap: .35rem; font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--nanquim-2); transition: color .6s; }
.so-nivel i { display: block; width: 4.2rem; height: 9px; border-top: 1px solid currentColor; position: relative; }
.so-nivel i::before { content: ""; position: absolute; left: .8rem; top: -9px; border: 5px solid transparent; border-bottom: 8px solid currentColor; border-top: 0; }
.so-pav.aceso .so-nivel { color: var(--ouro-tinta); }

.so-pav-corpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .9s var(--curva), opacity .6s; }
.so-pav-dentro { min-height: 0; overflow: hidden; padding-top: 1rem; }
.so-pav-txt { margin: 0; font-size: var(--t-corpo); line-height: 1.55; color: var(--nanquim-2); max-width: 34rem; }
.so-fala { margin: 1.1rem 0 0; padding-left: 1rem; border-left: 1px solid var(--ouro-tinta); }
.so-fala p { margin: 0; font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.4; color: var(--nanquim); }
.so-fala footer { margin-top: .45rem; color: var(--nanquim-2); }

.so-pav-dentro--2 { display: flow-root; }
.so-falas { display: contents; }
.so-falas p { margin: 0; color: var(--nanquim); }
.so-dentro-curto .so-so-largo { display: none; }
.so-fala-grande { font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1.24; }
.so-fala-media { margin-top: .7rem !important; font-size: var(--t-corpo); line-height: 1.5; color: var(--nanquim-2) !important; }
.so-fonte { margin-top: .8rem !important; color: var(--ouro-tinta) !important; }
.so-detalhe { float: right; width: clamp(6rem, 8vw, 7.5rem); margin: .3rem 0 .6rem 1.4rem; }
.so-detalhe img { width: 100%; height: auto; aspect-ratio: 410 / 560; object-fit: cover; object-position: center 30%; border: 1px solid var(--so-tinta); padding: 4px; background: var(--papel); filter: saturate(.85); }
.so-detalhe figcaption { margin-top: .5rem; color: var(--nanquim-2); font-size: var(--t-mini); letter-spacing: .1em; line-height: 1.3; }
.so-detalhe figcaption b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--nanquim); margin-top: .2rem; }

.so-pav-fecho { margin: 1.1rem 0 .25rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.so-pav-fecho .wf-citacao { font-size: clamp(1.3rem, 1.7vw, 1.6rem); color: var(--nanquim); }
.so-pav-fecho .wf-rotulo { color: var(--nanquim-2); }
.so-link { color: var(--nanquim); margin-top: .25rem; }

/* terreno */
.so-chao { position: relative; flex: none; height: 46px; margin: 0 -2.2rem; border-top: 2px solid var(--so-tinta);
  background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--nanquim) 45%, transparent) 0 1px, transparent 1px 7px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
.so-sapata { position: absolute; top: 0; width: 46px; height: 22px; border: 1.5px solid var(--so-tinta); border-top: 0; background: var(--papel); }
.so-sapata:nth-child(1) { left: calc(2.2rem - 22px); } .so-sapata:nth-child(2) { right: calc(2.2rem - 22px); }
.so-chao-cota { position: absolute; right: 0; top: .55rem; font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--nanquim-2); background: var(--papel); padding: 0 .4rem; }

/* título do desenho */
.so-titulo-desenho { flex: none; display: flex; align-items: center; gap: .9rem; margin: .4rem 0 0; font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--nanquim); }
.so-titulo-desenho b { display: block; font-weight: 400; color: var(--nanquim-2); margin-top: .3rem; letter-spacing: .1em; }
.so-ref { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border: 1.5px solid var(--so-tinta); border-radius: 50%; position: relative; }

/* linha de cota vertical + ponto de luz */
.so-cota { position: absolute; left: clamp(.6rem, 1vw, .9rem); top: 26px; bottom: calc(46px + 3.4rem); width: 1px; background: var(--nanquim-2); }
.so-cota::before, .so-cota::after { content: ""; position: absolute; left: -6px; width: 13px; border-top: 1px solid var(--nanquim-2); transform: rotate(-45deg); }
.so-cota::before { top: 0; } .so-cota::after { bottom: 0; }
.so-cota-ponto { position: absolute; left: 50%; bottom: 0; width: 14px; height: 14px; border-radius: 50%; margin: 0 0 -7px -7px;
  background: var(--ouro-tinta); box-shadow: 0 0 0 5px color-mix(in oklab, var(--luz-2) 70%, transparent), 0 0 28px 10px color-mix(in oklab, var(--luz-2) 80%, transparent);
  transform: translateY(calc(-1px * var(--so-p) * var(--so-curso, 0))); }

/* ───── com movimento: o palco fica preso e os pavimentos acendem de baixo para cima ───── */
.so-anima .so-palco { height: calc(100svh + 190svh); align-items: start; }
.so-anima { --so-pt: clamp(2.5rem, 7svh, 4.5rem); }
.so-anima .so-retrato, .so-anima .so-predio { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding-block: var(--so-pt) clamp(1.25rem, 3svh, 2rem); }
.so-anima .so-cota { top: calc(var(--so-pt) + 26px); bottom: calc(clamp(1.25rem, 3svh, 2rem) + 46px + 3.4rem); }
.so-anima .so-pav:not(.aberto) .so-pav-cab { flex-direction: row; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
.so-anima .so-pav:not(.aberto) { padding-block: .95rem; }
.so-anima .so-retrato { justify-content: flex-end; align-self: start; }
.so-anima .so-retrato img { max-height: calc(100svh - 10rem); width: auto; max-width: 100%; margin-inline: auto; }
.so-anima .so-pavs { flex: 1; min-height: 0; }
.so-anima .so-pav.aberto { flex: 1; }
.so-anima .so-pav-corpo { grid-template-rows: 0fr; opacity: 0; }
.so-anima .so-pav.aberto .so-pav-corpo { grid-template-rows: 1fr; opacity: 1; }
.so-anima .so-pav:not(.aceso) .so-pav-nome { color: color-mix(in oklab, var(--nanquim) 42%, transparent); }
.so-anima .so-cota-ponto { transition: transform .3s linear; }

/* ───── tablet e celular ───── */
@media (max-width: 960px) {
  .so-cabeca { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .so-cabeca .wf-h2 { max-width: 18ch; }
  .so-palco { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .so-retrato { max-width: 34rem; width: 100%; margin-inline: auto; }
  .so-legenda { padding-left: 0; }
  .so-anima .so-palco { height: auto; }
  .so-anima .so-retrato { position: relative; height: auto; padding: 0; }
  .so-anima .so-retrato img { max-height: none; width: 100%; }
  .so-anima .so-palco::after { content: ""; display: block; height: 170svh; }
}
@media (max-width: 620px) {
  .so .wf-carimbo > span:nth-child(3) { display: none; }
  .so-predio { padding: 0 0 0 1.9rem; margin-right: 14px; }
  .so-cota { left: .2rem; }
  .so-nivel { display: none; }
  .so-pav { padding: .85rem 1rem; }
  .so-pav-nome { font-size: 1.45rem; }
  .so-pav-dentro { padding-top: .7rem; }
  .so-detalhe { width: 4.6rem; margin-left: .9rem; }
  .so-fala-grande { font-size: 1.3rem; }
  .so-detalhe figcaption b { font-size: .9rem; }
  .so-chao { margin-inline: -14px; height: 40px; }
  .so-sapata:nth-child(1) { left: -9px; } .so-sapata:nth-child(2) { right: -9px; }
  .so-chao-cota { top: 1.3rem; }
  .so-titulo-desenho b { letter-spacing: .06em; }
  .so-ref { width: 2.2rem; height: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) { .so-pav::after { transform: none; } }
html:not(.js) .so-pav::after { transform: none; }
.so-medindo .so-pav-corpo, .so-medindo .so-pav::after { transition: none !important; }
/* número do pavimento, grande e esmaecido, no canto do cômodo aberto */
.so-pav-fantasma { position: absolute; right: clamp(.8rem, 1.6vw, 1.4rem); bottom: .1rem; z-index: -1; font-family: var(--f-titulo); font-weight: 300; font-size: clamp(5rem, 9vw, 9rem); line-height: .8; letter-spacing: -.04em;
  color: color-mix(in oklab, var(--ouro-tinta) 16%, transparent); opacity: 0; transform: translateY(12px); transition: opacity .8s, transform 1s var(--curva); pointer-events: none; }
.so-pav.aberto.aceso .so-pav-fantasma, html:not(.js) .so-pav-fantasma { opacity: 1; transform: none; }
.so:not(.so-anima) .so-pav-fantasma { display: none; }
@media (max-width: 620px) {
  .so-anima { --so-pt: 1.25rem; }
  .so-anima .so-pav:not(.aberto) .so-pav-palavra { display: none; }
  .so-anima .so-pav:not(.aberto) .so-pav-cab { flex-wrap: nowrap; gap: .8rem; }
  .so-anima .so-pav:not(.aberto) .so-pav-nome { font-size: 1.3rem; }
  .so-anima .so-pav:not(.aberto) { padding-block: .8rem; }
  .so-detalhe { width: 4rem; }
  .so-fala-grande { font-size: 1.2rem; }
}
@media (max-width: 620px) {
  .so-detalhe-rot, .so-td-extra { display: none; }
  .so-detalhe figcaption b { margin-top: 0; }
}
/* notebooks baixos (768–860 px de altura): palco mais enxuto para o pavimento mais longo caber */
@media (min-width: 961px) and (max-height: 860px) {
  .so-anima { --so-pt: 1.75rem; }
  .so-anima .so-titulo-desenho { display: none; }
  .so-anima .so-cota { bottom: calc(clamp(1.25rem, 3svh, 2rem) + 46px); }
  .so-anima .so-pav { padding-block: .9rem; }
  .so-anima .so-pav-nome { font-size: clamp(1.5rem, 2vw, 1.9rem); }
  .so-anima .so-pav-dentro { padding-top: .6rem; }
  .so-anima .so-fala-grande { font-size: 1.35rem; }
  .so-anima .so-retrato img { max-height: calc(100svh - 7rem); }
}

/* ═════════ rodada 2 ═════════ */
.so-predio { --so-pl: clamp(2.6rem, 3.6vw, 3.4rem); --so-cl: clamp(.6rem, 1vw, .9rem); padding-left: var(--so-pl); }
.so-cota { left: var(--so-cl); }

/* 1 · luz de verdade: ponto no forro abre um cone elíptico */
.so-pav::after { background:
  radial-gradient(ellipse 70% 95% at 50% 0, color-mix(in oklab, var(--luz) 92%, white) 0%, color-mix(in oklab, var(--luz-2) 72%, transparent) 38%, color-mix(in oklab, var(--luz-2) 22%, transparent) 70%, transparent 100%),
  linear-gradient(to top, color-mix(in oklab, var(--luz-2) 26%, transparent), transparent 60%);
  transform-origin: top; transform: scaleY(.15); opacity: 0; transition: transform 1.3s var(--curva), opacity .9s; }
.so-pav.aceso::after { transform: none; opacity: 1; }
.so-lampada { position: absolute; top: 0; left: 50%; width: 2.6rem; height: 5px; margin-left: -1.3rem; z-index: 1; background: var(--nanquim); border-radius: 0 0 3px 3px; }
.so-lampada::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; margin: 1px 0 0 -4px; border-radius: 50%; background: var(--papel-3); transition: background-color .6s, box-shadow .8s; }
.so-pav.aceso .so-lampada::after { background: var(--luz); box-shadow: 0 0 0 3px color-mix(in oklab, var(--luz-2) 70%, transparent), 0 0 22px 8px color-mix(in oklab, var(--luz-2) 90%, transparent); }
.so-pav[data-pav="3"] .so-lampada { top: 0; }

/* 4 · laje hachurada da esquerda para a direita ao acender; apagada, só contorno */
.so-pav[data-pav="2"]::before, .so-pav[data-pav="3"]::before {
  background: repeating-linear-gradient(45deg, var(--so-tinta) 0 1px, transparent 1px 6px) 0 0 / var(--so-laje, 100%) 100% no-repeat, var(--papel);
  transition: background-size 1.1s var(--curva) .15s; }
.so-anima .so-pav { --so-laje: 0%; }
.so-anima .so-pav.aceso { --so-laje: 100%; }
@property --so-laje { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
.so-pav[data-pav="2"], .so-pav[data-pav="3"] { transition: --so-laje 1.1s var(--curva) .1s; }

/* 3 · texto de cota em pé sobre a linha de cota, no pavimento aberto */
.so-cota-txt { position: absolute; top: 50%; left: calc(-1 * var(--so-pl) + var(--so-cl) - 1.5px); z-index: 3; translate: -50% -50%; rotate: -90deg;
  font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ouro-tinta);
  background: var(--papel); padding: .2rem .6rem; transition: opacity .6s .3s; }
.so-anima .so-pav:not(.aberto) .so-cota-txt { opacity: 0; transition-delay: 0s; }

/* 2 · retrato e prédio no mesmo terreno (palco preso, lado a lado) */
.so-anima .so-chao { height: 46px; }
.so-anima .so-titulo-desenho { height: calc(var(--so-base) - 46px); margin: 0; padding-top: .45rem; align-items: flex-start; }
@media (min-width: 961px) {
  .so-anima .so-legenda { height: var(--so-base); align-content: flex-start; margin-right: calc(-1 * clamp(1.5rem, 3.5vw, 3.5rem)); border-top: 2px solid var(--so-tinta); }
  .so-anima .so-retrato img { margin-bottom: -2px; }
}
@media (min-width: 961px) and (max-height: 860px) {
  .so { --so-base: 3.6rem; }
  .so-anima .so-chao { height: var(--so-base); }
  .so-anima .so-cota { bottom: calc(clamp(1.25rem, 3svh, 2rem) + var(--so-base)); }
  .so-anima .so-legenda { flex-direction: column; flex-wrap: nowrap; gap: .25rem; padding-top: .6rem; }
  .so-anima .so-legenda > * { white-space: nowrap; }
}

/* 5 · celular */
@media (max-width: 620px) {
  .so-predio { --so-pl: 1.9rem; --so-cl: .2rem; }
  .so-anima .so-titulo-desenho { display: none; }
  .so-anima .so-cota { bottom: calc(clamp(1.25rem, 3svh, 2rem) + 40px); }
  .so-anima .so-chao { height: 40px; }
  .so-lampada { width: 2rem; margin-left: -1rem; }
}
@media (prefers-reduced-motion: reduce) { .so-pav::after { transform: none; opacity: 1; } }
html:not(.js) .so-pav::after { transform: none; opacity: 1; }
/* ajustes da rodada 2 */
.so-lampada { top: 6px; }
.so-pav[data-pav="3"] .so-lampada { top: 0; }
.so-cota-txt { writing-mode: vertical-rl; rotate: 180deg; translate: 0 -50%; background: none; padding: 0; line-height: 1;
  left: calc(-1 * var(--so-pl) + var(--so-cl) - 1.6rem); }
.so-legenda { flex: none; }
@media (min-width: 961px) { .so-anima .so-retrato img { max-height: calc(100svh - var(--so-pt) - 2rem - 6.2rem); } }
@media (min-width: 961px) and (max-height: 860px) { .so-anima .so-retrato img { max-height: calc(100svh - var(--so-pt) - 2rem - 3.6rem); } }
@media (max-width: 620px) { .so-cota-txt { left: calc(-1 * var(--so-pl) + var(--so-cl) + .5rem); } }
.so-anima .so-pav.aceso:not(.aberto) .so-lampada::after { box-shadow: 0 0 0 2px color-mix(in oklab, var(--luz-2) 60%, transparent); }
.so-anima .so-pav.aceso:not(.aberto)::after { opacity: .55; }