/* O consultório — prefixo es-. Claro: a sala vista por janelas que pendem do trilho e seguem a hora. */

.es-cabeca {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 2rem clamp(2rem, 4vw, 6rem); align-items: end;
}
.es-cabeca__titulo .wf-titulo { margin-top: 1rem; max-width: 12ch; }
.es-hora {
  margin-top: 1.5rem; line-height: 1.6;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave);
}
.es-hora .wf-ponto { vertical-align: middle; margin-right: .25rem; }
.es-hora__fim { white-space: nowrap; }
.es-cabeca__apoio .wf-texto { max-width: 50ch; }
.es-apoio--celular { display: none; }

/* ---------- o percurso: duas fileiras de janelas penduradas num trilho ---------- */
.es-passeio { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.es-fileira {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.25rem; align-items: stretch;
  padding-top: 1px;
}
.es-fileira::before { /* o trilho de onde as janelas pendem */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: color-mix(in oklab, var(--caramelo) 55%, transparent);
}
.es-janela { display: grid; grid-template-rows: auto 1fr; gap: .8rem; min-width: 0; }
.es-janela .wf-janela { width: 100%; border-top-left-radius: 0; border-top-right-radius: 0; }
.es-janela--porta    { grid-column: 1 / 5; }
.es-janela--recepcao { grid-column: 5 / 13; }
.es-janela--espera   { grid-column: 1 / 5; }
.es-janela--corredor { grid-column: 5 / 7; }
.es-janela--sala     { grid-column: 7 / 13; }
.es-janela--porta .wf-janela    { aspect-ratio: 4 / 4.6; }
.es-janela--recepcao .wf-janela { aspect-ratio: 3 / 2; }
.es-janela--espera .wf-janela   { aspect-ratio: 6 / 7; }
.es-janela--corredor .wf-janela { aspect-ratio: 2 / 4.2; }
.es-janela--sala .wf-janela     { aspect-ratio: 4 / 3; }
.es-janela--porta img { object-position: 50% 42%; }
.es-janela--espera img { object-position: 50% 62%; }
.es-janela--corredor img { object-position: 46% 50%; }

/* a persiana mais alta, com o nome do passo escrito nela */
.es-janela .wf-janela--persiana::before { height: 1.7rem; }
.es-passo {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 1.7rem;
  display: flex; align-items: center; gap: .55rem; padding: 0 .9rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden;
}
.es-passo b { font-family: var(--fonte-titulo); font-weight: 500; font-size: .95rem; letter-spacing: .02em; color: var(--caramelo); }

/* frase no vidro, dentro da janela */
.es-vidro {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 4.5rem 1.3rem 1.15rem; color: var(--tinta);
  background: linear-gradient(to top, rgba(28, 20, 16, .9), rgba(28, 20, 16, .72) 45%, rgba(28, 20, 16, .25) 78%, transparent);
}
.es-vidro blockquote { max-width: 26ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.es-vidro figcaption { color: var(--tinta); opacity: .85; }

.es-legenda { align-self: end; font-size: .88rem; line-height: 1.45; color: var(--tinta-suave); }

/* ---------- o andar e as quatro vidraças ---------- */
.es-fatos {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem clamp(2rem, 4vw, 5rem);
  align-items: start;
  margin-top: clamp(3rem, 2.5rem + 3vw, 5.5rem);
}
.es-andar { display: flex; flex-direction: column; gap: .6rem; padding-top: 1.4rem; border-top: 1px solid color-mix(in oklab, var(--caramelo) 55%, transparent); }
.es-andar__num { color: var(--tinta-escura); }
.es-andar__texto { font-size: .92rem; line-height: 1.5; color: var(--tinta-suave); max-width: 28ch; }
.es-andar__texto strong { display: block; font-weight: 600; color: var(--tinta-escura); margin-bottom: .1rem; }
.es-vidracas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.25rem; margin: 0; }
.es-vidraca { min-width: 0; padding-top: 1.4rem; border-top: 1px solid color-mix(in oklab, var(--caramelo) 55%, transparent); }
.es-vidraca dt { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.es-vidraca dd { margin: .9rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--tinta-suave); }
.es-vidraca dd strong { display: block; font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.25rem; line-height: 1.25; color: var(--tinta-escura); margin-bottom: .35rem; text-wrap: balance; }

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
  .es-fatos { grid-template-columns: 1fr; gap: 2rem; }
  .es-vidracas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .es-cabeca { grid-template-columns: 1fr; gap: 1.5rem; }
  .es-cabeca__titulo .wf-titulo { max-width: none; }
  .es-janela--espera   { grid-column: 1 / 5; }
  .es-janela--corredor { grid-column: 5 / 8; }
  .es-janela--sala     { grid-column: 8 / 13; }
  .es-janela--corredor .wf-janela { aspect-ratio: 3 / 4.2; }
  .es-janela--sala .wf-janela { aspect-ratio: 5 / 4.3; }
}

/* ---------- celular: o corredor de janelas, deslizando sob um trilho só ---------- */
@media (max-width: 680px) {
  .es-apoio--extra { display: none; }
  .es-apoio--celular { display: block; margin-top: 1.75rem; }
  .es-passeio {
    display: flex; align-items: flex-start; gap: 1rem;
    margin-inline: calc(-1 * var(--margem)); padding: 0 var(--margem) .5rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .es-passeio::-webkit-scrollbar { display: none; }
  .es-fileira { display: contents; } /* as cinco janelas numa faixa só */
  .es-fileira::before { display: none; }
  .es-janela { flex: 0 0 min(72vw, 19rem); scroll-snap-align: start; scroll-margin-inline-start: var(--margem); border-top: 1px solid color-mix(in oklab, var(--caramelo) 55%, transparent); }
  .es-janela--recepcao, .es-janela--sala { flex-basis: min(84vw, 23rem); }
  .es-janela--porta .wf-janela, .es-janela--espera .wf-janela { aspect-ratio: 3 / 4; }
  .es-janela--corredor .wf-janela { aspect-ratio: 3 / 4.4; }
  .es-janela--recepcao .wf-janela, .es-janela--sala .wf-janela { aspect-ratio: 4 / 3; }
  .es-vidro { padding: 4rem 1rem 1rem; }
  .es-legenda { align-self: start; }
  .es-vidracas { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
}
@media (max-width: 420px) {
  .es-vidracas { grid-template-columns: 1fr; }
}