/* Seção 5 · espaco — O consultório (claro). Prefixo es-
   Gesto: o fio da visita desce pelo corredor entre as fotos conforme a rolagem;
   cada sala "acende" (ponto âmbar + foto ganha luz) quando o fio chega nela. */

.es-sec { --es-gap: clamp(3rem, 1rem + 4vw, 5.5rem); }

/* cabeçalho: título largo, apoio à direita */
.es-cab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--es-gap); align-items: end; }
.es-cab .wf-parada { grid-column: 1 / -1; }
.es-lead { margin: 0 0 .4rem; }

/* galeria em duas colunas desencontradas, com o corredor (o fio) no vão */
.es-galeria { position: relative; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--es-gap); align-items: start; }
.es-col-a { padding-top: clamp(3rem, 1.5rem + 4.5vw, 7rem); }

.es-fio { position: absolute; left: calc(5 / 12 * (100% - var(--es-gap)) + var(--es-gap) / 2); top: var(--es-y1, 0); height: calc(var(--es-y3, 0px) - var(--es-y1, 0px));
  width: 1px; translate: -.5px 0; background: color-mix(in oklab, var(--madeira) 35%, transparent); pointer-events: none; }
.es-fio::after { content: ""; position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--es-p, 1));
  background: linear-gradient(to bottom, var(--ambar), var(--ambar-luz) 70%, var(--ambar)); box-shadow: 0 0 10px 1px rgb(240 194 127 / .55); }

.es-quadro { margin: 0; position: relative; }
.es-foto { aspect-ratio: 3 / 2; box-shadow: 0 24px 50px -28px rgb(58 42 32 / .45); }
.es-q2 .es-foto { aspect-ratio: 4 / 3; border-radius: 140px var(--raio) var(--raio) var(--raio); }
.es-foto img { transition: filter 1.4s var(--suave), scale 1.8s var(--suave); }
.js .es-quadro:not(.es-luz) .es-foto img { filter: brightness(.86) saturate(.85) sepia(.12); scale: 1.035; }

/* legenda: o ponto fica sobre o fio, no vão entre as colunas */
.es-leg { position: relative; display: flex; margin-top: 1rem; }
.es-col-a .es-leg { justify-content: flex-end; text-align: right; }
.es-leg-txt { display: grid; gap: .2rem; }
.es-leg b { font-weight: 400; font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--madeira-escura); line-height: 1.3; }
.es-leg small { font-family: var(--serif); font-size: 1.125rem; line-height: 1.3; color: var(--cafe-suave); }
.es-pt { position: absolute; top: calc(.65rem - 6.5px); width: 13px; height: 13px; border-radius: 50%;
  background: var(--travertino); border: 1px solid var(--madeira);
  transition: background .6s, border-color .6s, box-shadow .9s; }
.es-col-a .es-pt { right: calc(var(--es-gap) / -2 - 6.5px); }
.es-col-b .es-pt { left: calc(var(--es-gap) / -2 - 6.5px); }
.es-luz .es-pt, html:not(.js) .es-pt { background: var(--ambar); border-color: var(--ambar);
  box-shadow: 0 0 0 5px rgb(192 130 58 / .16), 0 0 18px 3px rgb(240 194 127 / .55); }

/* vozes: frase em serifa grande, sem cartão */
.es-voz { margin: 2.2rem 0 0; }
.es-voz p { margin: 0 0 .8rem; font-family: var(--serif); font-size: clamp(1.45rem, 1.05rem + 1vw, 1.95rem); line-height: 1.26; letter-spacing: -.01em; text-wrap: pretty; }
.es-voz cite { font-style: normal; font-size: var(--t-mini); color: var(--cafe-suave); }
.es-voz-dir { max-width: 26rem; margin: 2rem 0 0 auto; }

/* o andar: o número grande é o ponto de impacto tipográfico */
.es-onde { margin-top: clamp(4rem, 2rem + 6vw, 8rem); }
.es-andar { position: relative; margin: 0; font-family: var(--serif); font-size: clamp(7rem, 4rem + 9vw, 13rem); line-height: .82; letter-spacing: -.05em; color: var(--madeira); }
.es-andar > span:not(.es-pt) { font-size: .46em; vertical-align: top; letter-spacing: 0; margin-left: .04em; color: var(--madeira-escura); }
.es-piso { position: absolute; left: 1.02em; right: calc(var(--es-gap) / -2); bottom: .02em; height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in oklab, var(--madeira) 55%, transparent)); }
.es-andar .es-pt { top: auto; bottom: calc(.02em - 6px); }
.es-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.es-onde-txt { margin: .9rem 0 .35rem; font-family: var(--serif); font-size: var(--t-sub); line-height: 1.15; }
.es-onde-end { margin: 0 0 .5rem; color: var(--cafe-suave); }

.es-q3 { margin-top: clamp(4rem, 2rem + 5vw, 7rem); width: 86%; }
.es-c41 { position: absolute; right: -16.3%; bottom: -3.4rem; width: min(19rem, 58%); }

/* ---------- celular e tablet ---------- */
@media (max-width: 860px) {
  .es-sec { --es-gap: 1.9rem; }
  .es-cab { display: block; }
  .es-lead { margin-top: 1.3rem; }
  .es-galeria { display: flex; flex-direction: column; padding-left: var(--es-gap); margin-top: 3rem; }
  .es-col { display: contents; }
  .es-q1 { order: 1; } .es-col-a > .es-voz { order: 2; } .es-q2 { order: 3; margin-top: 3.2rem; } .es-voz-dir { order: 4; }
  .es-q3 { order: 5; margin-top: 3.2rem; width: auto; } .es-onde { order: 6; margin-top: 4.5rem; }
  .es-foto { margin-right: calc(-1 * var(--margem)); border-radius: 22px 0 0 22px !important; }
  .es-q2 .es-foto { border-top-left-radius: 80px !important; }
  .es-fio { left: calc(var(--es-gap) / 2); }
  .es-col-a .es-leg { justify-content: flex-start; }
  .es-col-a .es-pt, .es-col-b .es-pt { right: auto; left: calc(var(--es-gap) / -2 - 6.5px); }
  .es-q2 .es-foto { border-radius: 80px 22px 22px 22px; }
  .es-foto { border-radius: 22px; }
  .es-voz { margin-top: 1.4rem; }
  .es-voz-dir { margin: 1.4rem 0 0; max-width: none; }
  .es-voz p { font-size: 1.375rem; }
  .es-c41 { position: relative; right: auto; top: auto; width: auto; margin-top: 1rem; }
  .es-andar { font-size: 6.5rem; }
  .es-piso { display: none; }
  .es-col-a .es-leg { justify-content: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .js .es-quadro .es-foto img { filter: none; scale: none; }
  .es-fio::after { transform: none; }
}