/* 5 · O consultório (claro). Prefixo es-. */
.es-abre, .es-sala {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px);
  align-items: start; position: relative;
}

.es-foto { margin: 0; position: relative; }

/* abertura: título ao lado da recepção de mármore */
.es-topo { grid-column: 1 / 7; grid-row: 1; align-self: center; padding: 24px 0; }
.es-titulo { font-size: clamp(2.75rem, 6vw, 5.75rem); }
.es-lead { max-width: 24em; }
.es-placa { margin-top: 28px; padding-left: 16px; border-left: 3px solid var(--madeira); max-width: 30em; font-size: 1rem; color: var(--texto-suave); }
.es-placa b { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; color: var(--tinta); letter-spacing: -.01em; }
.es-f-marmore { grid-column: 7 / 13; grid-row: 1 / 3; margin-right: calc(var(--margem) * -1); }
.es-f-marmore .es-folha { aspect-ratio: 4 / 5; border-radius: var(--raio) 0 0 var(--raio); }
.es-f-marmore img { object-position: 50% 62%; }
.es-f-marmore::before { border-radius: var(--raio) 0 0 var(--raio); }
.es-f-proc::before { border-radius: 0 var(--raio) var(--raio) 0; }
.es-f-estante::before { border-radius: var(--raio) 0 0 var(--raio); }
.es-cita-google { grid-column: 3 / 9; grid-row: 2; align-self: end; margin-bottom: -40px; z-index: 2; }

/* cartão de papel para citação */
.es-cartao { padding: 26px 30px 22px; background: linear-gradient(180deg in oklab, #fdfaf4, #f8f2e8); border-radius: var(--raio); box-shadow: var(--sombra), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.es-cartao p { font-size: clamp(1.25rem, 1.75vw, 1.625rem); }

/* fotos: a porta de correr que abre */
.es-folha { position: relative; overflow: hidden; border-radius: var(--raio); background: var(--madeira-clara); }
/* sombra fora do recorte: aparece quando a porta termina de abrir */
.es-foto::before { content: ""; position: absolute; inset: 0; border-radius: var(--raio); box-shadow: var(--sombra); pointer-events: none; transition: opacity .8s .7s; }
.es-moldura::before { box-shadow: var(--sombra), 0 0 0 6px var(--papel-claro); }
.js .es-foto::before { opacity: 0; }
.js .es-foto.aberta::before { opacity: 1; }
.es-folha img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); }
.es-folha::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg in oklab, color-mix(in oklab, var(--pessego) 55%, transparent), color-mix(in oklab, var(--madeira-clara) 25%, transparent) 60%, transparent);
  mix-blend-mode: multiply; opacity: .7;
}
.js .es-folha { clip-path: inset(0 100% 0 0); transition: clip-path 1.25s cubic-bezier(.65, 0, .2, 1); }
.js .es-folha img { transform: scale(1.08); transition: transform 1.6s var(--curva); }
.js .es-foto.aberta .es-folha { clip-path: inset(0 0 0 0); }
.js .es-foto.aberta .es-folha img { transform: none; }

/* nomes das salas: o percurso */
.es-sala { margin-top: clamp(96px, 11vw, 160px); }
.es-nome {
  grid-column: 1 / -1; grid-row: 1; display: flex; align-items: baseline; gap: 16px;
  margin: 0 0 clamp(24px, 3vw, 36px); padding-bottom: 14px; border-bottom: 1px solid var(--linha);
  font-family: var(--f-titulo); font-weight: 300; font-size: var(--t-sub); letter-spacing: -.015em; color: var(--tinta);
}
.es-nome span { font-weight: 700; font-size: .7em; color: var(--tinta-molhada); font-variant-numeric: tabular-nums; }

/* citações */
.es-cita { margin: 0; position: relative; }
.es-cita p { font-family: var(--f-titulo); font-weight: 300; font-size: var(--t-sub); line-height: 1.22; letter-spacing: -.015em; color: var(--tinta); }
.es-cita p b { font-weight: 700; }
.es-cita footer { margin-top: 12px; font-size: .9375rem; color: var(--texto-suave); }

/* 1 · recepção */
.es-f-sofa { grid-column: 1 / 9; grid-row: 2 / 4; }
.es-f-sofa .es-folha { aspect-ratio: 4 / 3; }
.es-f-sofa img { object-position: 50% 62%; }
.es-f-balcao { grid-column: 9 / 12; grid-row: 2; }
.es-f-balcao .es-folha { aspect-ratio: 3 / 4; }
.es-cita-ana { grid-column: 9 / 13; grid-row: 3; margin-top: 32px; }

/* 2 · consultório */
.es-f-estante { grid-column: 5 / 13; grid-row: 2 / 4; margin-right: calc(var(--margem) * -1); }
.es-f-estante .es-folha { aspect-ratio: 5 / 4; border-radius: var(--raio) 0 0 var(--raio); }
.es-f-estante img { object-position: 50% 45%; }
.es-cita-grande { grid-column: 1 / 5; grid-row: 2; padding-top: 8px; }
.es-cita-grande p { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.15; }
.es-f-cadeiras { grid-column: 2 / 6; grid-row: 3 / 5; align-self: end; margin-bottom: -56px; z-index: 2; }
.es-f-cadeiras .es-folha { aspect-ratio: 3 / 4; }
.es-cita-humano { grid-column: 7 / 13; grid-row: 4; margin-top: 40px; }

/* 3 · sala de procedimento */
.es-cita-musica { grid-column: 7 / 13; grid-row: 2; align-self: center; padding-left: clamp(0px, 2vw, 32px); }
.es-cita-musica p { font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.1; letter-spacing: -.025em; }
.es-f-proc { grid-column: 1 / 7; grid-row: 2 / 4; margin-left: calc(var(--margem) * -1); }
.es-f-proc .es-folha { aspect-ratio: 5 / 6; border-radius: 0 var(--raio) var(--raio) 0; }
.es-f-proc img { object-position: 50% 60%; }
.es-f-exame { grid-column: 6 / 10; grid-row: 3; align-self: end; margin-bottom: -48px; z-index: 2; }
.es-f-exame .es-folha { aspect-ratio: 4 / 3; }

/* fecho */
.es-fecho { margin-top: clamp(96px, 11vw, 160px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--linha); }
.es-fecho p { font-size: var(--t-sec); line-height: 1.02; letter-spacing: -.03em; max-width: 15em; text-wrap: balance; }

/* tablet deitado */
@media (max-width: 1100px) {
  .es-topo { grid-column: 1 / 7; }
  .es-cita-google { grid-column: 2 / 9; }
}
/* tablet em pé e celular: um percurso vertical */
@media (max-width: 860px) {
  .es-abre, .es-sala { grid-template-columns: minmax(0, 1fr); }
  .es-abre > *, .es-sala > * { grid-column: 1; grid-row: auto; }
  .es-topo { padding: 0; }
  .es-f-marmore, .es-f-estante, .es-f-proc, .es-f-sofa { margin: 0 calc(var(--margem) * -1); }
  .es-f-marmore { margin-top: 32px; }
  .es-f-marmore .es-folha, .es-f-estante .es-folha, .es-f-proc .es-folha, .es-f-sofa .es-folha { border-radius: 0; }
  .es-f-marmore .es-folha { aspect-ratio: 4 / 4.4; }
  .es-cita-google { margin: -56px 4px 0; }
  .es-f-balcao, .es-f-cadeiras, .es-f-exame { width: 62%; justify-self: end; margin-top: -48px; z-index: 2; }
  .es-f-marmore::before, .es-f-estante::before, .es-f-proc::before, .es-f-sofa::before { border-radius: 0; }
  .es-f-cadeiras, .es-f-exame { margin-bottom: 0; align-self: auto; }
  .es-cita-musica { padding-left: 0; }
  .es-cita-ana, .es-cita-humano { margin-top: 28px; }
  .es-cita-grande { margin-top: 28px; }
  .es-cita-musica { margin-bottom: 28px; }
  .es-sala-3 .es-f-exame { margin-top: -48px; }
  .es-f-estante { order: 1; } .es-f-cadeiras { order: 2; } .es-cita-grande { order: 3; } .es-cita-humano { order: 4; }
}
@media (min-width: 600px) and (max-width: 860px) {
  .es-f-marmore .es-folha, .es-f-sofa .es-folha, .es-f-proc .es-folha { aspect-ratio: 16 / 11; }
  .es-f-balcao, .es-f-cadeiras, .es-f-exame { width: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .es-folha { clip-path: none; }
  .js .es-folha img { transform: none; }
}