/* Chalé da Pedra Vermelha — página do chalé */

/* ---------- hero estático ---------- */
.heroc { position: relative; height: 100vh; height: 100svh; background: var(--tinta); color: var(--papel); overflow: hidden; overflow: clip; }
.heroc__fundo { position: absolute; inset: 0; }
.heroc__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 62%; }
.heroc__veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 12, 14, .42) 0%, rgba(16, 12, 14, 0) 32%),
    linear-gradient(4deg, rgba(16, 12, 14, .7) 0%, rgba(16, 12, 14, .14) 46%, rgba(16, 12, 14, 0) 66%);
}
.heroc__texto {
  position: absolute; inset: 0;
  max-width: var(--max);
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--gut) clamp(3.2rem, 7vh, 5.5rem);
  display: grid; align-content: end;
}
.heroc__titulo {
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw + .6rem, 5rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  max-width: 16em;
}
.heroc__apoio {
  margin-top: 1.4rem;
  max-width: 34em;
  font-size: clamp(.98rem, .35vw + .9rem, 1.12rem);
  color: var(--sobre-terra-70);
  transition-delay: .45s;
}
.heroc__local {
  position: absolute; right: var(--gut); bottom: 1.6rem;
  font-size: .8rem; letter-spacing: .04em;
  color: var(--sobre-terra-70);
}
@media (max-width: 700px) { .heroc__local { display: none; } }

/* ---------- apresentação ---------- */
.apres { padding: clamp(5rem, 12vh, 9rem) var(--gut); }
.apres__grade {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.apres__texto { display: grid; gap: 1.5rem; }
.apres__texto p { color: var(--tinta-70); max-width: 34em; }
.apres__numeros {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
.apres__numeros div {
  padding-top: 1rem;
  border-top: 1px solid var(--regua);
}
.apres__numeros dt {
  font-weight: 300;
  font-size: clamp(1.7rem, 2vw + .6rem, 2.4rem);
  line-height: 1.1;
  color: var(--terra);
}
.apres__numeros dd { margin-top: .25rem; font-size: .92rem; color: var(--tinta-70); }
@media (max-width: 900px) {
  .apres__grade { grid-template-columns: 1fr; }
  .apres__numeros { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- scroll expand (interior) ---------- */
.expande { height: 220vh; position: relative; }
.expande__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  overflow: hidden; overflow: clip;
}
.expande__quadro {
  position: relative;
  width: calc(100% - var(--exp-margem, 40%));
  height: calc(100% - var(--exp-margem-v, 30%));
  overflow: hidden;
  will-change: width, height;
}
.expande__quadro img { width: 100%; height: 100%; object-fit: cover; }
.expande__legenda {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.4rem, 4vw, 3rem);
  color: var(--papel);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw + .5rem, 2.9rem);
  letter-spacing: -.01em;
  background: linear-gradient(0deg, rgba(16, 12, 8, .55), rgba(16, 12, 8, 0));
  opacity: var(--exp-legenda, 0);
}
@media (max-width: 900px) { .expande { height: 180vh; } }

/* ---------- o rito (banheira) ---------- */
.rito { background: var(--tinta); color: var(--papel); }
.rito__grade {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(5rem, 12vh, 9rem) var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 4.5vw, 5.5rem);
  align-items: center;
}
.rito__foto { aspect-ratio: 4 / 5; max-height: 82vh; max-height: 82svh; justify-self: center; width: min(100%, 30rem); }
.rito__foto img { width: 100%; height: 100%; object-fit: cover; }
.rito__texto { display: grid; gap: 1.3rem; }
.rito__texto > p { color: var(--sobre-terra-70); max-width: 32em; }
@media (max-width: 900px) {
  .rito__grade { grid-template-columns: 1fr; }
}

/* ---------- galeria ---------- */
.galeria { padding: clamp(5rem, 12vh, 9rem) var(--gut); }
.galeria__in { max-width: var(--max); margin-inline: auto; display: grid; gap: clamp(1.8rem, 4vh, 2.8rem); }
.galeria__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}
.galeria__grade figure { aspect-ratio: 4 / 3; }
.galeria__grade img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .galeria__grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .galeria__grade { grid-template-columns: 1fr; }
}

/* ---------- matéria ---------- */
.materia { background: var(--mata); color: var(--papel); }
.materia__grade {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(5rem, 12vh, 9rem) var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 4.5vw, 5.5rem);
  align-items: center;
}
.materia__foto { aspect-ratio: 3 / 4; max-height: 78vh; max-height: 78svh; }
.materia__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 82%; }
.materia__texto { display: grid; gap: 1.3rem; }
.materia__texto > p { color: var(--sobre-terra-70); max-width: 34em; }
.materia__texto a { border-bottom: 1px solid var(--regua-terra); transition: border-color .3s; }
.materia__texto a:hover { border-color: var(--papel); }
.materia__lista { display: grid; margin-top: .6rem; max-width: 30rem; }
.materia__lista li {
  padding: .78rem 0;
  border-top: 1px solid var(--regua-terra);
  font-size: .95rem;
}
.materia__lista li:last-child { border-bottom: 1px solid var(--regua-terra); }
@media (max-width: 900px) {
  .materia__grade { grid-template-columns: 1fr; }
  .materia__foto { max-height: none; }
}

/* ---------- mais fotos a caminho ---------- */
.breve { padding: clamp(5rem, 12vh, 9rem) var(--gut); }
.breve__in {
  max-width: var(--max);
  margin-inline: auto;
  display: grid; gap: 1.4rem;
}
.breve__in > p { color: var(--tinta-70); max-width: 36em; }
.breve__grade {
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}
.breve__slot {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: var(--papel-2);
  border: 1px solid var(--regua);
}
.breve__slot .marca-svg { width: 3.2rem; color: var(--terra); opacity: .3; }
@media (max-width: 700px) {
  .breve__grade { grid-template-columns: 1fr 1fr; }
  .breve__slot:nth-child(3) { display: none; }
}

/* ---------- o lugar ---------- */
.lugarc { background: var(--papel-2); padding: clamp(5rem, 12vh, 9rem) var(--gut); }
.lugarc__texto {
  max-width: var(--max);
  margin-inline: auto;
  display: grid; gap: 1.3rem;
}
.lugarc__texto > p { color: var(--tinta-70); max-width: 36em; }
.lugarc__lista { display: grid; margin-top: .6rem; max-width: 30rem; }
.lugarc__lista li {
  padding: .78rem 0;
  border-top: 1px solid var(--regua);
  font-size: .95rem;
}
.lugarc__lista li:last-child { border-bottom: 1px solid var(--regua); }

/* ---------- fechamento ---------- */
.fecha { background: var(--terra); color: var(--papel); }
.fecha__in {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(6rem, 15vh, 10rem) var(--gut);
  display: grid; gap: 1.6rem;
}
.fecha__titulo {
  font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw + .5rem, 4.6rem);
  line-height: 1.1;
  letter-spacing: -.012em;
}
.fecha p { color: var(--sobre-terra-70); max-width: 30em; }
.fecha__acoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .expande { height: auto; }
  .expande__pin { position: static; height: auto; }
  .expande__quadro { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .expande__legenda { opacity: 1; }
}