/* Página de detalhe do imóvel */

.thumb,
.slide .bg,
.gmain,
.gth button,
.gallery-lightbox-stage img {
  -webkit-touch-callout:none;
  user-select:none;
}

.det {
  padding:130px 0 80px;
}

.back {
  background:transparent;
  border:1px solid rgba(184,147,90,.4);
  color:var(--marfim);
  border-radius:999px;
  padding:10px 22px;
  font:400 .9rem var(--sans);
  cursor:pointer;
  margin-bottom:24px;
  transition:.25s;
}

.back:hover {
  border-color:var(--ouro);
  color:var(--ouro-claro);
}

.dgrid {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:32px;
  align-items:start;
}

.gmain {
  position:relative;
  aspect-ratio:16/10;
  border-radius:28px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(184,147,90,.3);
  overflow:hidden;
}

.gmain[role="button"] {
  cursor:zoom-in;
}

.gmain-play {
  display:grid;
  place-items:center;
  width:64px;
  height:46px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:14px;
  background:#d71920;
  color:#fff;
  font-size:1.5rem;
}

.gmain[role="button"]:focus-visible {
  outline:3px solid var(--ouro-claro);
  outline-offset:3px;
}

.gmain iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
}

.gallery-lightbox {
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 56px;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  justify-items:center;
  gap:14px;
  padding:56px 28px 30px;
  background:rgba(8,7,6,.94);
}

.gallery-lightbox[hidden] {
  display:none;
}

.gallery-lightbox-stage {
  grid-column:2;
  grid-row:1;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}

.gallery-lightbox-stage img,
.gallery-lightbox-stage iframe {
  display:block;
  width:100%;
  height:100%;
  max-width:1600px;
  max-height:calc(100vh - 140px);
  object-fit:contain;
  border:0;
}

.gallery-lightbox-stage iframe {
  aspect-ratio:16/9;
}

.gallery-arrow {
  width:48px;
  height:48px;
}

#galleryPrev {
  grid-column:1;
  grid-row:1;
}

#galleryNext {
  grid-column:3;
  grid-row:1;
}

.gallery-close {
  position:absolute;
  top:16px;
  right:20px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(184,147,90,.55);
  border-radius:50%;
  background:var(--grafite2);
  color:var(--ouro-claro);
  font:400 2rem/1 Arial,sans-serif;
  cursor:pointer;
}

.gallery-close:hover {
  background:var(--ouro);
  color:var(--grafite);
}

.gallery-counter {
  grid-column:2;
  grid-row:2;
  color:var(--marfim);
  font-size:.9rem;
}

body.gallery-open {
  overflow:hidden;
}

.gthumbs {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

.gth {
  display:flex;
  gap:10px;
  min-width:0;
  overflow:hidden;
  scroll-behavior:smooth;
}

.gth button {
  flex:0 0 calc((100% - 30px) / 4);
  aspect-ratio:16/10;
  border-radius:16px;
  border:2px solid transparent;
  background-size:cover;
  background-position:center;
  cursor:pointer;
  padding:0;
  opacity:.65;
  transition:.25s;
}

.gth button.on {
  border-color:var(--ouro);
  opacity:1;
}

.gth-arrow {
  display:grid;
  place-items:center;
  padding:0;
  width:42px;
  height:42px;
  border:1px solid rgba(184,147,90,.4);
  border-radius:50%;
  background:var(--grafite2);
  color:var(--ouro-claro);
  font:400 1.8rem/1 Arial,sans-serif;
  text-align:center;
  cursor:pointer;
  transition:.2s;
}

.gth-arrow:hover {
  background:var(--ouro);
  color:var(--grafite);
}

.gth button.video-thumb {
  position:relative;
}

.gth button.video-thumb span {
  position:absolute;
  inset:50% auto auto 50%;
  display:grid;
  place-items:center;
  width:38px;
  height:28px;
  transform:translate(-50%,-50%);
  border-radius:8px;
  background:#d71920;
  color:#fff;
  font-size:1rem;
  opacity:1;
}

.dinfo {
  background:var(--grafite2);
  border:1px solid rgba(184,147,90,.3);
  border-radius:28px;
  padding:28px;
  position:sticky;
  top:110px;
}

.drow {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.tag2 {
  background:var(--ouro);
  color:var(--grafite);
  border-radius:999px;
  padding:3px 14px;
  font-size:.78rem;
  font-weight:500;
}

.drow .cod {
  font-size:.75rem;
  letter-spacing:.12em;
  opacity:.6;
}

.dinfo h2 {
  font-size:2rem;
  margin:0 0 4px;
}

.dinfo .loc {
  margin:0 0 18px;
  opacity:.75;
}

.dprice {
  font:600 2.2rem var(--serif);
  color:var(--ouro-claro);
  margin-bottom:18px;
}

.dprice small {
  font-size:1rem;
  opacity:.8;
}

.buy {
  width:100%;
  background:var(--ouro);
  border:0;
  color:var(--grafite);
  border-radius:999px;
  padding:16px;
  font:500 1rem var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.25s;
}

.buy:hover {
  background:var(--ouro-claro);
}

.note {
  font-size:.85rem;
  opacity:.7;
  margin:14px 0 0;
}

.dtext {
  margin-top:44px;
  max-width:900px;
}

.dtext h3 {
  font:500 1.7rem var(--serif);
  color:var(--ouro-claro);
  margin:32px 0 12px;
}

.feats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:12px;
}

.fe {
  background:var(--grafite2);
  border:1px solid rgba(184,147,90,.25);
  border-radius:20px;
  padding:16px;
  display:grid;
  gap:2px;
  justify-items:start;
}

.fe svg {
  width:26px;
  height:26px;
  color:var(--ouro-claro);
}

.fe b {
  font:600 1.5rem var(--serif);
}

.fe span {
  font-size:.85rem;
  opacity:.75;
}

.spec {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px;
  margin:0;
}

.spec div {
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid rgba(184,147,90,.2);
}

.spec dt {
  opacity:.7;
}

.spec dd {
  margin:0;
}

@media (max-width:900px) {
  .dgrid {
    grid-template-columns:1fr;
  }
  .dinfo {
    position:static;
  }
  .spec {
    grid-template-columns:1fr;
  }
  .det {
    padding-top:110px;
  }
}

@media (max-width:520px) {
  .gallery-lightbox {
    grid-template-columns:36px minmax(0,1fr) 36px;
    gap:6px;
    padding:60px 10px 22px;
  }
  .gallery-lightbox-stage img,
  .gallery-lightbox-stage iframe {
    max-height:calc(100vh - 120px);
  }
  .gallery-arrow {
    width:36px;
    height:36px;
  }
  .gallery-close {
    top:10px;
    right:10px;
    width:38px;
    height:38px;
  }
  .gthumbs {
    grid-template-columns:34px minmax(0,1fr) 34px;
    gap:6px;
  }
  .gth-arrow {
    width:34px;
    height:34px;
  }
  .gth {
    gap:6px;
  }
  .gth button {
    flex-basis:calc((100% - 18px) / 4);
    border-radius:10px;
  }
}

.wa {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  border:1px solid #25d366;
  color:#25d366;
  border-radius:999px;
  padding:14px;
  font:500 .95rem var(--sans);
  letter-spacing:.06em;
  transition:.25s;
}

.wa:hover {
  background:#25d366;
  color:#0b2e17;
}

.soldmsg {
  padding:14px 18px;
  border-radius:18px;
  background:rgba(140,47,47,.25);
  border:1px solid #8c2f2f;
  margin:0;
}
