/* Tema JM — página do imóvel (24/10/2026). Usa os tokens do tema.css (carregado antes no layout).
   Sem JS: tudo visível, passeio vira faixa com rolagem horizontal, fotos abrem em tela cheia só com JS. */

.im { --im-largura: var(--largura); }
.tema-jm .im h1, .tema-jm .im h2, .tema-jm .im h3 { font-family: var(--serifa); font-weight: 500; letter-spacing: -.005em; }

/* ---------- botões extra ---------- */



/* ---------- topo: fotos primeiro ---------- */
.im-topo { background: var(--papel); }
.im-topo__in { max-width: var(--largura); margin: 0 auto; padding: 24px 24px 0; }
.im-topo__linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.im-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-2); }
.im-trilha a { color: var(--tinta-2); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--motion-dur-2), color var(--motion-dur-2); }
.im-trilha a:hover { color: var(--noite); border-color: var(--ouro); }
.im-compartilhar { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--linha); border-radius: var(--raio-pill); background: var(--papel); color: var(--noite); font: 500 14px var(--sans); cursor: pointer; transition: border-color var(--motion-dur-2), background var(--motion-dur-2); }
.im-compartilhar:hover { border-color: var(--ouro); background: var(--marfim); }
.im-compartilhar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* mosaico: 1 grande + até 4 menores */
.im-mosaico { display: grid; gap: 8px; height: clamp(300px, 52vh, 540px); border-radius: 10px; overflow: hidden; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.im-mosaico--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.im-mosaico--2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.im-mosaico--3 { grid-template-columns: 2fr 1fr; }
.im-mosaico--4 { grid-template-columns: 2fr 1fr 1fr; }
.im-mosaico__foto:first-child { grid-row: 1 / -1; }
.im-mosaico--4 .im-mosaico__foto:nth-child(2) { grid-column: 2 / -1; }
.im-mosaico__foto { position: relative; padding: 0; border: 0; background: var(--marfim); cursor: zoom-in; overflow: hidden; min-height: 0; }
.im-mosaico__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--motion-ease-out), filter var(--motion-dur-2); }
.im-mosaico__foto:hover img { transform: scale(1.04); }
.im-mosaico__foto:focus-visible { outline: 3px solid var(--ouro); outline-offset: -3px; }
.im-mosaico__todas { position: absolute; right: 14px; bottom: 14px; padding: 9px 16px; border-radius: var(--raio-pill); background: rgba(255,253,248,.95); color: var(--noite); font: 500 14px var(--sans); box-shadow: 0 6px 18px rgba(4,12,51,.18); }

/* título e preço */
.im-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding: 32px 0 26px; border-bottom: 1px solid var(--linha); }
.im-cab__tipo { font-size: 14.5px; font-weight: 500; color: var(--ouro-texto); }
.im-cab__titulo { margin-top: 8px; font: 500 clamp(28px, 3vw, 40px)/1.15 var(--serifa) !important; color: var(--noite); text-wrap: balance; max-width: 26ch; }
.im-cab__onde { margin-top: 10px; display: flex; align-items: center; gap: 6px; color: var(--tinta-2); font-size: 16px; }
.im-cab__onde svg { width: 18px; height: 18px; fill: none; stroke: var(--ouro-texto); stroke-width: 1.7; flex: none; }
.im-cab__preco { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.im-cab__preco p { display: flex; flex-direction: column; }
.im-cab__preco span { font-size: 13px; color: var(--tinta-2); }
.im-cab__preco strong { font: 600 clamp(28px, 2.6vw, 36px)/1.1 var(--serifa); color: var(--noite); font-variant-numeric: lining-nums tabular-nums; }
.im-cab__preco small { font: 400 15px var(--sans); color: var(--tinta-2); }

/* ficha em linha */
.im-ficha { display: flex; flex-wrap: wrap; gap: 12px 0; padding: 22px 0 6px; }
.im-ficha li { display: flex; align-items: baseline; gap: 8px; padding: 0 28px; border-left: 1px solid var(--linha); }
.im-ficha li:first-child { padding-left: 0; border-left: 0; }
.im-ficha strong { font: 600 26px/1 var(--serifa); color: var(--noite); font-variant-numeric: lining-nums tabular-nums; }
.im-ficha span { font-size: 15px; color: var(--tinta-2); }

/* avisos de envio */
.im-aviso { max-width: var(--largura); margin: 24px auto 0; padding: 16px 20px; border-radius: 8px; font-size: 16px; }
.im-aviso--ok { background: #eaf4ec; color: #1e5631; }
.im-aviso--erro { background: #fbeaea; color: #8c1d18; }

/* ---------- corpo ---------- */
.im-corpo { max-width: var(--largura); margin: 0 auto; padding: 48px 24px clamp(64px, 8vw, 100px); display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; }
.im-bloco + .im-bloco { margin-top: 48px; padding-top: 44px; border-top: 1px solid var(--linha); }
.im-bloco .titulo { font-size: clamp(26px, 2.4vw, 32px); }
.im-texto { margin-top: 22px; font-size: 17px; line-height: 1.7; color: var(--tinta); max-width: 66ch; }
.im-texto p + p { margin-top: 14px; }
.im-texto strong { color: var(--noite); font-weight: 600; }
.im-texto ul { list-style: disc; padding-left: 22px; margin: 12px 0; }

.im-comodidades { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.im-comodidades li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--marfim); border: 1px solid var(--linha); border-radius: var(--raio); font-size: 16px; }
.im-comodidades li::before { content: ''; width: 8px; height: 8px; transform: rotate(45deg); background: var(--ouro); flex: none; }

.im-custos { margin-top: 24px; max-width: 520px; }
.im-custos div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.im-custos dt { color: var(--tinta-2); }
.im-custos dt small { font-size: 13px; }
.im-custos dd { margin: 0; font: 600 20px var(--serifa); color: var(--noite); font-variant-numeric: lining-nums tabular-nums; }
.im-custos__total { border-bottom: 0 !important; }
.im-custos__total dt { color: var(--noite); font-weight: 600; }
.im-custos__total dd { font-size: 26px; color: var(--ouro-texto); }

.im-onde { margin-top: 18px; font-size: 18px; color: var(--tinta); }
.im-mapa { margin-top: 20px; height: 340px; border-radius: 10px; overflow: hidden; background: var(--marfim); isolation: isolate; border: 1px solid var(--linha); }
.im-mapa .leaflet-tile-pane { filter: saturate(.55) sepia(.18) hue-rotate(-8deg) brightness(1.03); }
.im-mapa__nota { margin-top: 10px; font-size: 14px; color: var(--tinta-2); }
.im-mapa__nota a { color: inherit; }

/* cartão lateral */
.im-lado { position: sticky; top: 96px; }
.im-cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 30px 60px rgba(7,21,79,.08); overflow: hidden; }
.im-cartao__titulo { font: 500 28px/1.1 var(--serifa) !important; color: var(--noite); }
.im-simula { padding: 28px; background: var(--noite); color: #fff; }
.im-simula .im-cartao__titulo { color: #fff; }
.im-simula__res { margin: 18px 0 20px; display: flex; flex-direction: column; }
.im-simula__res span { font-size: 13px; color: #b9bfdc; }
.im-simula__res strong { font: 500 36px/1.1 var(--serifa); background: var(--gradiente-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: lining-nums tabular-nums; }
.im-simula__res small { margin-top: 4px; font-size: 13.5px; color: #c9cee6; }
.im-faixa { display: grid; gap: 8px; margin-top: 16px; font-size: 14px; color: #dfe2f1; }
.im-faixa > span { display: flex; justify-content: space-between; }
.im-faixa output { color: var(--ouro-claro); font-weight: 500; }
.im-faixa input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.im-faixa input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ouro) var(--fill, 50%), rgba(255,255,255,.18) var(--fill, 50%)); }
.im-faixa input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); }
.im-faixa input[type="range"]::-moz-range-progress { height: 3px; background: var(--ouro); }
.im-faixa input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9.5px; border-radius: 50%; background: var(--ouro-claro); border: 3px solid var(--noite); box-shadow: 0 0 0 1px var(--ouro); transition: transform var(--motion-dur-2) var(--motion-ease-out); }
.im-faixa input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ouro-claro); border: 3px solid var(--noite); box-shadow: 0 0 0 1px var(--ouro); }
.im-faixa input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.im-faixa input[type="range"]:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; border-radius: 4px; }
.im-faixa--taxa { grid-template-columns: 1fr auto; align-items: center; }
.im-faixa__taxa { display: flex; align-items: center; gap: 6px; }
.im-faixa__taxa input { width: 76px; min-height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--linha-escura); background: rgba(255,255,255,.06); color: #fff; font: 500 16px var(--sans); text-align: right; }
.im-faixa__taxa input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(196,154,72,.3); }
.im-simula__nota { margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: #b9bfdc; }

.im-form { padding: 28px; display: grid; gap: 14px; }
.im-form__lead { margin-top: -4px; font-size: 15px; color: var(--tinta-2); }
.im-form textarea { min-height: 88px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; font: 400 16px/1.5 var(--sans); color: var(--tinta); resize: vertical; transition: border-color var(--motion-dur-2), box-shadow var(--motion-dur-2); }
.im-form textarea:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(196,154,72,.25); }
.im-form__ir { width: 100%; }
.im-form__ir.is-carregando span { opacity: .6; }
.im-form__wpp { text-align: center; font-size: 15px; color: var(--noite); text-underline-offset: 4px; }

/* parecidos */
.im-parecidos .cards { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.im-parecidos .card__titulo { font-size: 21px; }
@media (max-width: 1100px) { .im-parecidos .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .im-parecidos .cards { grid-template-columns: 1fr; } }

/* barra do celular */
.im-barra { display: none; }

/* ---------- tela cheia ---------- */
.im-luz { position: fixed; inset: 0; z-index: 200; height: 100vh; height: 100dvh; background: #040c33; color: #fff; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.im-luz[hidden] { display: none; }
.im-luz__topo { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; position: relative; z-index: 2; }
.im-luz__cont { font: 500 18px var(--serifa); color: #dfe2f1; font-variant-numeric: tabular-nums; }
.im-luz__cont b { color: var(--ouro-claro); font-weight: 500; }
.im-luz__x, .im-luz__seta { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linha-escura); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background var(--motion-dur-2), transform var(--motion-dur-2) var(--motion-ease-out); }
.im-luz__x:hover, .im-luz__seta:hover { background: rgba(255,255,255,.16); }
.im-luz__x svg, .im-luz__seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.im-luz__palco { margin: 0; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; overflow: hidden; padding: 8px 88px; touch-action: pan-y; }
.im-luz__palco img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; }
.im-luz__seta { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); }
.im-luz__seta--ant { left: 18px; }
.im-luz__seta--prox { right: 18px; }
.im-luz__seta:hover { transform: translateY(-50%) scale(1.06); }
.im-luz__miniaturas { position: relative; z-index: 2; display: flex; gap: 8px; padding: 14px 20px 18px; overflow-x: auto; justify-content: safe center; scrollbar-width: thin; scrollbar-color: var(--ouro) transparent; }
.im-luz__miniaturas button { display: block; width: 76px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: none; cursor: pointer; opacity: .55; transition: opacity var(--motion-dur-2), border-color var(--motion-dur-2); }
.im-luz__miniaturas button[aria-current="true"] { opacity: 1; border-color: var(--ouro); }
.im-luz__miniaturas button:hover { opacity: .9; }
.im-luz__miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.im-toast { position: fixed; left: 50%; bottom: 96px; z-index: 210; transform: translate(-50%, 16px); padding: 12px 20px; border-radius: var(--raio-pill); background: var(--noite); color: #fff; font-size: 15px; box-shadow: 0 12px 30px rgba(4,12,51,.35); opacity: 0; pointer-events: none; transition: opacity var(--motion-dur-2) var(--motion-ease-out), transform var(--motion-dur-2) var(--motion-ease-out); }
.im-toast.is-visivel { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .im-corpo { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .im-lado { position: static; }
}
@media (max-width: 860px) {
  .im-topo__in { padding: 16px 0 0; }
  .im-topo__linha { padding: 0 16px; margin-bottom: 12px; }
  /* celular: só a foto principal, rolando de lado as demais */
  .im-mosaico { display: flex; height: auto; border-radius: 0; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .im-mosaico::-webkit-scrollbar { display: none; }
  .im-mosaico__foto { flex: 0 0 88%; aspect-ratio: 4 / 3; scroll-snap-align: center; }
  .im-mosaico--1 .im-mosaico__foto { flex-basis: 100%; }
  .im-cab, .im-ficha { margin: 0 16px; }
  .im-cab { grid-template-columns: 1fr; gap: 16px; align-items: start; padding: 22px 0 20px; }
  .im-cab__preco { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .im-cab__preco .btn { display: none; }
  .im-ficha li { padding: 0 16px; }
  .im-ficha strong { font-size: 22px; }
  .im-luz__palco { padding: 0 8px; }
  .im-luz__seta { display: none; }
}
@media (max-width: 700px) {
  .im-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,253,248,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); }
  .im-barra p { display: flex; flex-direction: column; line-height: 1.15; }
  .im-barra span { font-size: 12px; color: var(--tinta-2); }
  .im-barra strong { font: 600 20px var(--serifa); color: var(--noite); }
  .im-barra .btn { min-height: 46px; padding: 0 20px; }
  .tema-jm:has(.im-barra) .wa-fab { bottom: 84px; }
  .tema-jm:has(.im-barra) .rodape { padding-bottom: 72px; }
  .im-simula, .im-form { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .im-mosaico__foto img { transition: none; }
}