/* =========================================================
   IF Imóveis — Single (Galeria + Conteúdo) — ifim-single.css
   (VERSÃO LIMPA — sem CSS duplicado)
   ========================================================= */

:root{
  --ifim-thumb-size: 64px;
  --ifim-thumb-gap: 10px;

  /* Desktop: altura-base = 6 thumbs visíveis */
  --ifim-hero-h: calc(
    (var(--ifim-thumb-size) * 6) +
    (var(--ifim-thumb-gap) * 5) +
    12px + /* padding vertical do container .ifim-ml-thumbs (6 + 6) */
    2px    /* borda do container */
  );
}

.ifim-wrap, .ifim-wrap *{ box-sizing:border-box; }

.ifim-wrap{
  width:100%;
  margin:0 auto;
  overflow-x:clip;
}

.ifim-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.04);
  padding: 25px 20px 50px;
}

.ifim-section{ margin-top:18px; }

.ifim-topbar-card{
  padding: 25px 20px;
}

.ifim-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 12px 0;
}
.ifim-topbar-title{
  display:none;
  min-width:0;
}
.ifim-topbar-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  background:rgba(0,90,255,.10);
  color:#111827;
}
.ifim-topbar-heading{
  margin:6px 0 0;
  font-size:16px;
  font-weight:600;
  line-height:1.25;
  color:#0b2aa1;
}
.ifim-loc{ margin:0; color:#6b7280; font-size:14px; display:flex; gap:8px; align-items:center; }
.ifim-price-block{
display:flex;
flex-direction:column;
align-items:flex-end;
margin-left:auto;
text-align:right;
}
.ifim-price {
margin: 0;
font-weight: 700;
color: #111827;
font-size: 22px;
white-space: nowrap;
background-color:#fafe83;
padding:2px 10px;
border-radius:8px;
display:inline-block;
}

.ifim-price-note{
margin:6px 0 0;
font-size:12px;
line-height:1.35;
color:#4b5563;
text-align:right;
}

.ifim-col{ min-width:0; }

.ifim-h2 {
font-weight: 600;
margin: 0 0 12px 0;
font-size: 22px;
color: #111827;
}

.ifim-muted{ color:#6b7280; }
.ifim-desc{
color:#111827;
line-height:1.4;
font-size: 14px;
}
.ifim-desc p{ margin:0 0 12px 0; }
.ifim-desc p:last-child{ margin-bottom:0; }

/* ===== HERO: galeria esquerda + vídeo direita ===== */
.ifim-hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap:18px;
  align-items:start;
}
.ifim-hero-grid.no-video{ grid-template-columns: 1fr; }

@media(max-width:980px){
  .ifim-hero-grid{ grid-template-columns:1fr; }
  .ifim-price{ font-size:22px; }
  .ifim-topbar-title{ display:block; }
}

/* ===== Mercado Livre style gallery (thumbs left) ===== */
.ifim-hero-left{
  display:flex;
  gap:12px;
  align-items:stretch;
}

/* thumbs wrapper */
.ifim-ml-thumbs-wrap{
  width:86px;
  flex:0 0 86px;
  position:relative;
}

/* thumbs vertical */
.ifim-ml-thumbs{
  width:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--ifim-thumb-gap);

  /* padrão: até 7 thumbs (mobile/geral). No desktop forçamos 6 via media query */
  max-height: calc((var(--ifim-thumb-size) * 7) + (var(--ifim-thumb-gap) * 6) + 12px + 2px);
  overflow:auto;

  scrollbar-width:none;
  padding:6px;
  border-radius:14px;
  background:#fff;
  border:1px solid #f1f5f9;
}
.ifim-ml-thumbs::-webkit-scrollbar{ width:0; height:0; }

@media(max-width:980px){
	
.ifim-topbar {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 25px;
}

.ifim-price-block{
align-items:flex-start;
margin-left:0;
text-align:left;
}

.ifim-price-note{
text-align:left;
}

.ifim-ml-thumbs{
max-height: calc(
(var(--ifim-thumb-size) * 4) +
(var(--ifim-thumb-gap) * 3) +
12px + 2px
);
}
  
}


/* =========================================================
   THUMB = sempre QUADRADO
   ========================================================= */
.ifim-wrap a.ifim-ml-thumb{
  width:var(--ifim-thumb-size) !important;
  height:var(--ifim-thumb-size) !important;
  min-width:var(--ifim-thumb-size) !important;
  min-height:var(--ifim-thumb-size) !important;
  max-width:var(--ifim-thumb-size) !important;
  max-height:var(--ifim-thumb-size) !important;
  flex:0 0 var(--ifim-thumb-size) !important;

  display:block !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;

  border-radius:14px !important;
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 8px 14px rgba(0,0,0,.05) !important;

  text-decoration:none !important;
  line-height:0 !important;
  cursor:pointer;

  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

.ifim-wrap a.ifim-ml-thumb:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(0,0,0,.10) !important;
}

.ifim-wrap a.ifim-ml-thumb.is-active{
  border-color:#94a3b8 !important;
  box-shadow:0 12px 22px rgba(0,0,0,.10) !important;
}

/* imagem dentro do thumb */
.ifim-wrap a.ifim-ml-thumb > img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:0 !important;
}

/* setas ↑ ↓ (links) */
.ifim-thumbs-nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:36px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(229,231,235,.9);
  background:rgba(255,255,255,.95);
  color:#111827;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 22px rgba(0,0,0,.10);
  transition:transform .10s ease, filter .12s ease, opacity .12s ease;
  z-index:5;
  text-decoration:none;
  line-height:1;
}
.ifim-thumbs-nav:hover{ filter:brightness(.98); transform:translateX(-50%) translateY(-1px); }
.ifim-thumbs-nav.is-disabled{ opacity:.35; pointer-events:none; transform:translateX(-50%); }

.ifim-thumbs-nav.up{ top:-10px; }
.ifim-thumbs-nav.down{ bottom:-10px; }

/* principal */
.ifim-ml-main{ flex:1; min-width:0; }

/* =========================================================
   Área fixa/limitada para a imagem grande (não “dança”)
   ========================================================= */
.ifim-ml-mainbtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;

  height: clamp(320px, 52vh, 560px);

  background:#f3f4f6;
  border-radius:16px;
  overflow:hidden;

  text-decoration:none;
}
@media(max-width:980px){
  .ifim-ml-mainbtn{ height: clamp(240px, 46vh, 420px); }
}

/* imagem grande centralizada e contida */
.ifim-ml-mainimg{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
  background:transparent;
}

/* fallback */
.ifim-gallery-main{
  border-radius:16px;
  overflow:hidden;
  background:#f3f4f6;

  height: clamp(320px, 52vh, 560px);
  display:flex;
  align-items:center;
  justify-content:center;
}
@media(max-width:980px){
  .ifim-gallery-main{ height: clamp(240px, 46vh, 420px); }
}
.ifim-gallery-main img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.ifim-gallery-empty{ padding:26px; text-align:center; color:#6b7280; font-weight:800; }

.ifim-single-video-stage{
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 78vh;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}
.ifim-single-video-stage iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== VÍDEO AO LADO (BASE) ===== */
.ifim-video-card{
  border-radius:16px;
  overflow:hidden;
  padding:0;
  position:relative;
}

/* preview clicável (cortado) */
.ifim-video-preview{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  text-decoration:none;
  cursor:pointer;
}

.ifim-video-preview__video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important; /* <-- pode cortar (como você pediu) */
  object-position:center !important;
  filter:brightness(.86);
}

.ifim-video-preview__play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:72px;
  height:72px;
  border-radius:999px;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  padding-left:4px;
  box-shadow:0 25px 60px rgba(0,0,0,.55);
  transition:transform .12s ease, background .12s ease;
}

.ifim-video-preview:hover .ifim-video-preview__play{
  transform:translate(-50%, -50%) scale(1.04);
  background:rgba(0,0,0,.52);
}

.ifim-video-preview:hover .ifim-video-preview__video{
  filter:brightness(.78);
}

/* vídeo no lightbox */
.ifim-lightbox__video{
  max-width:100%;
  max-height:100%;
  width:min(1180px, 100%);
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow: 0 25px 60px rgba(0,0,0,.55);
}

/* ===== grid do conteúdo abaixo ===== */
.ifim-main-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap:18px;
  align-items:start;
}
@media(max-width:980px){
  .ifim-main-grid{ grid-template-columns:1fr; }
}

/* chips */
.ifim-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.ifim-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius: 8px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:600;
  font-size:13px;
  color:#111827;
}

li.ifim-chip img {
height: 1.6em !important;
width: 1.6em !important;
}

/* botão (links) */
.ifim-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  text-decoration:none;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  cursor:pointer;
  width:100%;
}
.ifim-btn-primary{ background:#111827; color:#fff; border-color:#111827; }
.ifim-btn:hover{ filter:brightness(.99); }

/* ===== related carousel (clean) ===== *//* ===== related carousel (clean) ===== *//* ===== related carousel (clean) ===== */
/* ===== related carousel (clean) ===== *//* ===== related carousel (clean) ===== *//* ===== related carousel (clean) ===== */
/* ===== related carousel (clean) ===== *//* ===== related carousel (clean) ===== *//* ===== related carousel (clean) ===== */
/* ===== related carousel (clean) ===== *//* ===== related carousel (clean) ===== *//* ===== related carousel (clean) ===== */

/* =========================================================
   RELATED / "Você também pode se interessar por"
   - 4 cards visíveis (desktop)
   - sem scrollbar visível
   - imagem sem cortar (contain)
   - título sem encavalar (clamp 2 linhas)
========================================================= */

.ifim-related-wrap{
  position: relative;
  padding: 0 44px; /* espaço interno pras setas sem atrapalhar os cards */
}

/* trilha */
.ifim-related-track{
  --gap: 16px;

  display: flex;
  gap: var(--gap);

  overflow-x: auto;
  overflow-y: hidden;

  padding: 4px 0;                 /* sem padding lateral (evita “meio” 5º card) */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge antigo */
}
.ifim-related-track::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* card: 4 por vez */
.ifim-related-card{
  scroll-snap-align: start;

  flex: 0 0 calc((100% - (var(--gap) * 3)) / 4);
  max-width: calc((100% - (var(--gap) * 3)) / 4);

  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;

  box-shadow: 0 10px 25px rgba(0,0,0,.04);

  text-decoration: none;
  color: inherit;

  display: flex;
  flex-direction: column;

  transition: transform .12s ease, box-shadow .12s ease;
}
.ifim-related-card:hover{
  transform: translateY(-1px);
}

/* thumb */
.ifim-related-thumb{
  aspect-ratio: 9 / 16;
  height: auto;
  background: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ifim-related-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;            /* NÃO corta */
  object-position: center;
  display: block;
}
.ifim-related-thumb iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.ifim-related-thumb-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
}

/* corpo */
.ifim-related-body{
  padding: 10px 15px 20px;
}

/* título sem encavalar */
.ifim-related-title{
  margin: 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  color: #111827;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(14px * 1.25 * 2); /* padroniza altura visual */
}

/* setas */
.ifim-related-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 36px;
  height: 36px;
  border-radius: 999px;

  border: 1px solid rgba(229,231,235,.95);
  background: rgba(255,255,255,.97);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  user-select: none;

  box-shadow: 0 12px 22px rgba(0,0,0,.10);

  text-decoration: none;
  color: #111827;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

.ifim-related-nav.prev{left: 10px;}
.ifim-related-nav.next{ right: 10px; }

.ifim-related-nav:hover{
  background: #fff;
  filter: brightness(0.98);
}

/* responsivo */
@media (max-width: 980px){
  .ifim-related-wrap{ padding: 0 40px; }

  .ifim-related-card{
    flex: 0 0 calc((100% - (var(--gap) * 1)) / 2);
    max-width: calc((100% - (var(--gap) * 1)) / 2);
  }
}

@media (max-width: 560px){
  .ifim-related-wrap{ padding: 0 36px; }

  .ifim-related-card{
    flex: 0 0 100%;
    max-width: 100%;
  }
}



/* ===== Lightbox ===== *//* ===== Lightbox ===== *//* ===== Lightbox ===== *//* ===== Lightbox ===== */
/* ===== Lightbox ===== *//* ===== Lightbox ===== *//* ===== Lightbox ===== *//* ===== Lightbox ===== */
/* ===== Lightbox ===== *//* ===== Lightbox ===== *//* ===== Lightbox ===== *//* ===== Lightbox ===== */
/* ===== Lightbox ===== *//* ===== Lightbox ===== *//* ===== Lightbox ===== *//* ===== Lightbox ===== */

.ifim-lightbox{ display:none; }
.ifim-lightbox.is-open{
  display:block;
  position:fixed;
  inset:0;
  z-index:999999;
  animation:ifimFadeIn .12s ease;
}
@keyframes ifimFadeIn{ from{opacity:0} to{opacity:1} }

.ifim-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgb(0 0 0 / 82%);
  backdrop-filter: blur(2px);
}

.ifim-lightbox__panel{
  position:relative;
  width: min(1280px, calc(100% - 48px));
  height: min(86vh, 760px);
  margin: 56px auto 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color: rgb(255 255 255 / 65%);
}

.ifim-lightbox__img{
  max-width:100%;
  max-height:100%;
  display:block;
  border-radius:14px;
  box-shadow: 0 25px 60px rgba(0,0,0,.55);
  background:#111827;
}

/* X */
.ifim-lightbox__close{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  padding: 0 0 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.ifim-lightbox__close:hover{ background:rgba(0,0,0,.50); }

/* setas */
.ifim-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  padding: 0 0 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.28);
  color:#fff;
  font-size:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.ifim-lightbox__nav:hover{ background:rgba(0,0,0,.45); }

.ifim-lightbox__nav.prev{ left:14px; }
.ifim-lightbox__nav.next{ right:14px; }

.ifim-lightbox__counter{
  position:absolute;
  bottom:12px;
  right:12px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:800;
  font-size:13px;
}

body.ifim-lb-open{ overflow:hidden; }

/* =========================================================
   DESKTOP — altura igual para: thumbs (6), foto e vídeo
   ========================================================= */
@media (min-width: 981px){

  /* thumbs: exatamente 6 visíveis */
  .ifim-ml-thumbs{
    max-height: var(--ifim-hero-h) !important;
  }

  .ifim-hero-left{ align-items: stretch !important; }
  .ifim-hero-grid{ align-items: stretch !important; }

  /* foto principal: mesma altura */
  .ifim-ml-mainbtn{
    height: var(--ifim-hero-h) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .ifim-ml-mainimg{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  .ifim-gallery-main{
    height: var(--ifim-hero-h) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .ifim-gallery-main img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  /* ===== VÍDEO: mesma altura do hero (preview pode cortar) ===== */
  .ifim-video-card{
    height: var(--ifim-hero-h) !important;
    border-radius:16px !important;
    overflow:hidden !important;
    min-width:0 !important;
  }

  /* garante que o preview preencha toda a área */
  .ifim-video-preview{ height:100%; }

  .ifim-video-card video,
  .ifim-video-card img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
    border-radius:0 !important;
  }
}

/* =========================================================
   MOBILE — mantém responsivo (altura por clamp)
   ========================================================= */
@media (max-width: 980px){
  .ifim-ml-mainbtn{ height: clamp(240px, 33vh, 420px) !important; }
  .ifim-gallery-main{ height: clamp(240px, 33vh, 420px) !important; }

  .ifim-video-card{
    height: clamp(240px, 33vh, 420px) !important;
    background:#000 !important;
  }
  .ifim-video-card video,
  .ifim-video-card img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:0 !important;
  }
}

/* =========================================================
   LOCALIZAÇÃO (abaixo da Descrição) — estilo tipo QuintoAndar
   ========================================================= */
.ifim-card.ifim-card-location{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top:18px;
background-image:url('bg-maps.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.ifim-location-lines{
margin-top: 8px;
margin-bottom: 14px;
}

.ifim-location-main{
font-size: 18px;
font-weight: 700;
color: #111827;
line-height: 1.2;
}

.ifim-location-sub{
margin-top: 6px;
font-size: 14px;
font-weight: 500;
color: #374151;
line-height: 1.3;
}

.ifim-btn-maps {
width: auto;
padding: 7px 20px;
font-weight: 600;
border-radius: 10px;
background-color: #012e8a;
border: none;
}

.ifim-btn-maps:hover {
color: #dddddd;
}

/* =========================
   Botão WhatsApp (Fale com o anunciante)
   ícone: icon-whatsapp.png (mesma pasta do CSS)
========================= */

.ifim-section-whatsapp{
  margin-top: 12px;
}

.ifim-btn-whatsapp{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #67b246;            /* verde parecido com o print */
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}

a.ifim-btn.ifim-btn-whatsapp:hover {
color: #ffffff;
background-color: #4e8735;
}

.ifim-btn-whatsapp::before{
  content: "";
  width: 30px;
  height: 30px;
  background: url("icon-whatsapp.png") no-repeat center / contain;
  flex: 0 0 30px;
}

.ifim-btn-whatsapp__text{
  line-height: 1;
}

/* Botão: Ver mais ofertas deste anunciante */
a.ifim-btn.ifim-btn-anunciante {
background: #012e8a;
color: #fff;
border: none;
border-radius: 6px;
font-weight: 700;
}

a.ifim-btn.ifim-btn-anunciante:hover{
background: #011f5f; /* hover mais escuro */
color: #fff;
}

.ifim-edit-notice {
display: flex;
background-color: #f3ff90;
justify-content: center;
padding: 10px;
border: 2px solid #b7b7b7;
border-radius: 6px;
margin-bottom: 40px;
}

a.ifim-edit-cancel {
margin-left: 5px;
font-weight: 700;
color: red;
}

/* Layout novo da interna: video esquerda, detalhes+descricao direita */
.ifim-single-main-row{
  display:grid;
  grid-template-columns:minmax(240px, 25%) minmax(0, 1fr);
  gap:18px;
  align-items:start;
}

.ifim-single-video-col{ min-width:0; }
.ifim-single-side-col{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}

.ifim-single-video-card{
  padding:0;
  overflow:hidden;
}

.ifim-single-video-card iframe{
  width:100%;
  aspect-ratio:9 / 16;
  border:0;
  display:block;
  background:#000;
}

.ifim-single-actions{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.ifim-single-actions .ifim-btn{
  width:100%;
  max-width:none;
}

@media(max-width:980px){
  .ifim-single-main-row{
    grid-template-columns:1fr;
  }
  .ifim-single-actions{
    grid-template-columns:1fr;
  }
}