/* es · O espaço: as fotos reais cortadas como facetas de uma mesma pedra.
   As posições e os recortes das facetas saem de um script (retângulos + encontros a 45°, com 10 unidades de aresta);
   a pedra tem proporção fixa: 1300 × 780 no desktop, 350 × 940 no celular. */
.es-secao { background: var(--papel-claro); }
.es-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.es-cabeca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(3rem, 5.5vw, 5rem); }
.es-titulo { margin-top: 1.6rem; max-width: 9.5em; }

.es-pedra { position: relative; container-type: inline-size; aspect-ratio: 1300 / 780; margin-inline: 4px; }
.es-cinta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.es-cinta polygon { fill: none; stroke: var(--rosa); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.es-cinta-c { display: none; }
.es-faceta { position: absolute; margin: 0; overflow: hidden; background: var(--pedra-2); }
.es-foto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.es-f-parede img { object-position: 100% 0; }
.es-f-ampulheta img { object-position: 30% 58%; }
.es-f-espera img { object-position: 0 70%; }
.es-f-estante img { object-position: 50% 0; }
.es-num { position: absolute; left: 50%; bottom: 1.5cqw; translate: -50% 0; display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; font-family: var(--f-titulo); font-size: 1rem; line-height: 1; color: var(--tinta); background: rgb(251 246 239 / .94); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.es-f-eco { display: flex; flex-direction: column; justify-content: center; padding: 0 3.2cqw; background: var(--pedra-1); }
.es-eco-fala { font-size: max(1.3rem, 2.25cqw); line-height: 1.1; }
.es-f-onde { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 3.6cqw !important; padding: 0 3.4cqw; background: var(--aco); color: var(--tinta); }
.es-onde-n { font-family: var(--f-titulo); font-size: max(1.6rem, 3.3cqw); line-height: 1; }
.es-onde-t { font-size: var(--t-mini); font-weight: 500; letter-spacing: .04em; margin-top: .45rem; }
.es-t { background: var(--pedra-4); }
.es-t:nth-of-type(3n) { background: var(--pedra-3); }
.es-t:nth-of-type(4n) { background: var(--pedra-5); }
.es-t1, .es-t5 { background: var(--rosa); }

/* uma luz só para a pedra inteira, a 37° */
.es-pedra::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(127deg, rgb(255 250 243 / 0) 28%, rgb(255 250 243 / .2) 44%, rgb(255 250 243 / 0) 58%); mix-blend-mode: soft-light; }
/* faceta acesa: o número vira pedra rosa; quando a visitante escolhe uma, as outras descansam */
.es-foto { cursor: pointer; }
.es-foto img { transition: opacity .9s var(--suave), scale 1.6s var(--suave); }
.es-num { transition: background-color .7s, color .7s; }
.es-acesa .es-num { background: var(--rosa-texto); color: var(--papel-claro); }
.es-acesa img { scale: 1.035; }
.es-escolhida .es-foto:not(.es-acesa) img { opacity: .5; }
.es-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(127deg, rgb(255 250 243 / 0) 35%, rgb(255 250 243 / .34) 50%, rgb(255 250 243 / 0) 65%); translate: -100% 0; opacity: 0; }
.es-acesa::after { translate: 100% 0; opacity: 1; transition: translate 1.8s var(--suave), opacity .3s; }

.es-pe { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(3rem, 5.5vw, 5rem); }
.es-destaque { margin: 0; }
.es-destaque-fala { font-size: clamp(1.75rem, 3.5vw, 3.2rem); line-height: 1.08; max-width: 15em; }
.es-indice li { border-top: 1px solid var(--fio); }
.es-indice li:last-child { border-bottom: 1px solid var(--fio); }
.es-indice-b { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 56px; padding: .5rem 0; text-align: left; font-size: 1rem; color: var(--tinta-suave); transition: color .5s, padding .6s var(--suave); }
.es-indice-n { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; font-family: var(--f-titulo); font-size: 1rem; line-height: 1; color: var(--rosa-texto); background: var(--pedra-1); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); transition: background-color .7s, color .7s; }
.es-indice-b:hover { color: var(--tinta); }
.es-indice-b:focus-visible { outline-offset: -2px; }
.es-indice-b.es-on { color: var(--tinta); padding-left: .6rem; }
.es-indice-b.es-on .es-indice-n { background: var(--rosa-texto); color: var(--papel-claro); }
.es-indice-dica { margin-top: 1rem; }

/* gerado: desktop 1300x780 (12 encontros) */
.es-f-parede { left: 0.385%; top: 0.641%; width: 24.615%; height: 98.718%; clip-path: polygon(31.58% 0.00%, 90.29% 0.00%, 100.00% 4.04%, 100.00% 95.96%, 90.29% 100.00%, 31.58% 100.00%, 0.00% 86.87%, 0.00% 13.13%); }
.es-f-cafe { left: 25.769%; top: 0.641%; width: 24.231%; height: 67.949%; clip-path: polygon(9.86% 0.00%, 90.14% 0.00%, 100.00% 5.86%, 100.00% 93.01%, 88.23% 100.00%, 17.48% 100.00%, 0.00% 89.61%, 0.00% 5.86%); }
.es-f-ampulheta { left: 25.769%; top: 69.872%; width: 24.231%; height: 29.487%; clip-path: polygon(17.48% 0.00%, 88.23% 0.00%, 100.00% 16.12%, 100.00% 86.49%, 90.14% 100.00%, 9.86% 100.00%, 0.00% 86.49%, 0.00% 23.94%); }
.es-f-eco { left: 50.769%; top: 0.641%; width: 23.077%; height: 29.487%; clip-path: polygon(10.36% 0.00%, 89.64% 0.00%, 100.00% 13.51%, 100.00% 83.88%, 87.64% 100.00%, 18.36% 100.00%, 0.00% 76.06%, 0.00% 13.51%); }
.es-f-espera { left: 50.769%; top: 31.410%; width: 23.077%; height: 67.949%; clip-path: polygon(18.36% 0.00%, 87.64% 0.00%, 100.00% 6.99%, 100.00% 94.14%, 89.64% 100.00%, 10.36% 100.00%, 0.00% 94.14%, 0.00% 10.39%); }
.es-f-estante { left: 74.615%; top: 0.641%; width: 25.000%; height: 62.821%; clip-path: polygon(9.56% 0.00%, 68.90% 0.00%, 100.00% 20.63%, 100.00% 93.66%, 90.44% 100.00%, 16.94% 100.00%, 0.00% 88.76%, 0.00% 6.34%); }
.es-f-onde { left: 74.615%; top: 64.744%; width: 25.000%; height: 34.615%; clip-path: polygon(16.94% 0.00%, 90.44% 0.00%, 100.00% 11.51%, 100.00% 62.57%, 68.90% 100.00%, 9.56% 100.00%, 0.00% 88.49%, 0.00% 20.40%); }
.es-t1 { left: 25.769%; top: 63.342%; width: 3.533%; height: 11.777%; clip-path: polygon(0.00% 0.00%, 100.00% 50.00%, 0.00% 100.00%); }
.es-t2 { left: 50.769%; top: 24.881%; width: 3.533%; height: 11.777%; clip-path: polygon(0.00% 0.00%, 100.00% 50.00%, 0.00% 100.00%); }
.es-t3 { left: 47.852%; top: 65.650%; width: 2.148%; height: 7.161%; clip-path: polygon(100.00% 0.00%, 100.00% 100.00%, 0.00% 50.00%); }
.es-t4 { left: 71.698%; top: 27.189%; width: 2.148%; height: 7.161%; clip-path: polygon(100.00% 0.00%, 100.00% 100.00%, 0.00% 50.00%); }
.es-t5 { left: 74.615%; top: 58.214%; width: 3.533%; height: 11.777%; clip-path: polygon(0.00% 0.00%, 100.00% 50.00%, 0.00% 100.00%); }
.es-t6 { left: 23.698%; top: 0.641%; width: 3.374%; height: 2.811%; clip-path: polygon(0.00% 0.00%, 100.00% 0.00%, 50.00% 100.00%); }
.es-t7 { left: 48.698%; top: 0.641%; width: 3.374%; height: 2.811%; clip-path: polygon(0.00% 0.00%, 100.00% 0.00%, 50.00% 100.00%); }
.es-t8 { left: 72.544%; top: 0.641%; width: 3.374%; height: 2.811%; clip-path: polygon(0.00% 0.00%, 100.00% 0.00%, 50.00% 100.00%); }
.es-t9 { left: 23.698%; top: 96.548%; width: 3.374%; height: 2.811%; clip-path: polygon(50.00% 0.00%, 100.00% 100.00%, 0.00% 100.00%); }
.es-t10 { left: 48.698%; top: 96.548%; width: 3.374%; height: 2.811%; clip-path: polygon(50.00% 0.00%, 100.00% 100.00%, 0.00% 100.00%); }
.es-t11 { left: 72.544%; top: 96.548%; width: 3.374%; height: 2.811%; clip-path: polygon(50.00% 0.00%, 100.00% 100.00%, 0.00% 100.00%); }
.es-t12 { left: 97.929%; top: 61.291%; width: 1.687%; height: 5.623%; clip-path: polygon(100.00% 0.00%, 100.00% 100.00%, 0.00% 50.00%); }
@media (max-width: 900px) {
.es-f-parede { left: 1.000%; top: 0.372%; width: 46.571%; height: 45.000%; clip-path: polygon(23.28% 0.00%, 91.44% 0.00%, 100.00% 3.30%, 100.00% 94.34%, 85.31% 100.00%, 8.56% 100.00%, 0.00% 96.70%, 0.00% 8.97%); }
.es-f-estante { left: 49.571%; top: 0.372%; width: 49.429%; height: 24.787%; clip-path: polygon(8.06% 0.00%, 78.06% 0.00%, 100.00% 16.29%, 100.00% 94.01%, 91.94% 100.00%, 13.84% 100.00%, 0.00% 89.72%, 0.00% 5.99%); }
.es-f-ampulheta { left: 49.571%; top: 25.904%; width: 49.429%; height: 19.468%; clip-path: polygon(13.84% 0.00%, 91.94% 0.00%, 100.00% 7.62%, 100.00% 92.38%, 91.94% 100.00%, 13.84% 100.00%, 0.00% 86.91%, 0.00% 13.09%); }
.es-f-eco { left: 1.000%; top: 46.117%; width: 98.000%; height: 13.085%; clip-path: polygon(4.07% 0.00%, 95.93% 0.00%, 100.00% 11.34%, 100.00% 88.66%, 95.93% 100.00%, 4.07% 100.00%, 0.00% 88.66%, 0.00% 11.34%); }
.es-f-cafe { left: 1.000%; top: 59.947%; width: 52.286%; height: 39.681%; clip-path: polygon(7.62% 0.00%, 86.91% 0.00%, 100.00% 6.42%, 100.00% 96.26%, 92.38% 100.00%, 20.74% 100.00%, 0.00% 89.83%, 0.00% 3.74%); }
.es-f-espera { left: 55.286%; top: 59.947%; width: 43.714%; height: 23.723%; clip-path: polygon(15.65% 0.00%, 90.88% 0.00%, 100.00% 6.26%, 100.00% 93.74%, 90.88% 100.00%, 15.65% 100.00%, 0.00% 89.26%, 0.00% 10.74%); }
.es-f-onde { left: 55.286%; top: 84.415%; width: 43.714%; height: 15.213%; clip-path: polygon(15.65% 0.00%, 90.88% 0.00%, 100.00% 9.76%, 100.00% 73.46%, 75.20% 100.00%, 9.12% 100.00%, 0.00% 90.24%, 0.00% 16.75%); }
.es-t1 { left: 49.571%; top: 23.665%; width: 5.014%; height: 3.734%; clip-path: polygon(0.00% 0.00%, 100.00% 50.00%, 0.00% 100.00%); }
.es-t2 { left: 43.557%; top: 43.505%; width: 10.029%; height: 1.867%; clip-path: polygon(50.00% 0.00%, 100.00% 100.00%, 0.00% 100.00%); }
.es-t3 { left: 49.271%; top: 59.947%; width: 10.029%; height: 1.867%; clip-path: polygon(0.00% 0.00%, 100.00% 0.00%, 50.00% 100.00%); }
.es-t4 { left: 55.286%; top: 82.176%; width: 5.014%; height: 3.734%; clip-path: polygon(0.00% 0.00%, 100.00% 50.00%, 0.00% 100.00%); }
.es-t5 { left: 46.414%; top: 0.372%; width: 4.314%; height: 0.803%; clip-path: polygon(0.00% 0.00%, 100.00% 0.00%, 50.00% 100.00%); }
.es-t6 { left: 1.000%; top: 44.941%; width: 2.157%; height: 1.606%; clip-path: polygon(0.00% 0.00%, 100.00% 50.00%, 0.00% 100.00%); }
.es-t7 { left: 96.843%; top: 24.729%; width: 2.157%; height: 1.606%; clip-path: polygon(100.00% 0.00%, 100.00% 100.00%, 0.00% 50.00%); }
.es-t8 { left: 96.843%; top: 58.771%; width: 2.157%; height: 1.606%; clip-path: polygon(100.00% 0.00%, 100.00% 100.00%, 0.00% 50.00%); }
.es-t9 { left: 52.128%; top: 98.824%; width: 4.314%; height: 0.803%; clip-path: polygon(50.00% 0.00%, 100.00% 100.00%, 0.00% 100.00%); }
.es-t10 { left: 1.000%; top: 58.771%; width: 2.157%; height: 1.606%; clip-path: polygon(0.00% 0.00%, 100.00% 50.00%, 0.00% 100.00%); }
.es-t11 { left: 96.843%; top: 44.941%; width: 2.157%; height: 1.606%; clip-path: polygon(100.00% 0.00%, 100.00% 100.00%, 0.00% 50.00%); }
.es-t12 { left: 96.843%; top: 83.239%; width: 2.157%; height: 1.606%; clip-path: polygon(100.00% 0.00%, 100.00% 100.00%, 0.00% 50.00%); }
}

@media (max-width: 900px) {
  .es-cabeca, .es-pe { grid-template-columns: 1fr; gap: 1.8rem; }
  .es-pedra { aspect-ratio: 350 / 940; max-width: 30rem; margin-inline: auto; }
  .es-cinta-d { display: none; }
  .es-cinta-c { display: block; }
  .es-num { bottom: 2.4cqw; }
  .es-f-eco { padding: 0 7cqw; }
  .es-eco-fala { font-size: max(1.35rem, 6.6cqw); }
  .es-f-onde { padding: 0 5cqw; }
  .es-onde-n { font-size: 1.6rem; }
  .es-f-onde { padding-bottom: 7cqw !important; }
}