/* ========================
   Reset e Comportamentos
=========================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light only;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden;
}

body.modal-aberto {
  overflow: hidden;
}

/* ========================
   Links e Ancoras
=========================== */

a {
  text-decoration: none;
  color: inherit;
}

a:visited {
  color: inherit;
}

a:active,
a:hover {
  color: inherit;
}

/* ========================
   Conteúdo do Imóvel
=========================== */

.conteudo-imovel {
  padding: 5vw 7vw;
  text-align: center;
  max-width: 900px;
}

.imagem-principal {
  width: 100%;
  max-width: 800px;
  border-radius: 1vw;
}

.titulo-imovel {
  font-size: 10vw;
}

.preco {
  font-size: 2rem;
  color: green;
  font-weight: bold;
  margin-top: 0.5rem;
}

.descricao {
  text-align: justify;
  word-break: normal;
  hyphens: auto;
  padding: 4vw 0vw;
  font-size: 1.1rem;
  line-height: 1.6;
}



/* ========================
   Campos Adicionais
=========================== */

.campos-adicionais {
  text-align: left;
  margin: 2rem auto;
  font-size: 1.2rem;
  line-height: 1.8;
  padding: 0 1rem;
}

.campos-adicionais a {
  color: #f1f1f1;
}


.banheiro_detalhes {
  display: flex;
  font-size: 0.8rem;
  margin-left: 1rem;
  color: #808080;
}

.banheiro_detalhes img {
  margin-top: 0.25rem;
  height: 1rem;
  width: auto;
}

.botao-maps {
  display: inline-block;
  font-size: 1rem;
  margin-bottom: 1vw;
  padding: 0.5rem 1rem;
  background-color: #007BFF;
  color: white !important;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.botao-maps:hover {
  background-color: #0056b3;
}

/* ============================
   Mapa Incorporado - Estilo
   ============================ */
.mapa-container {
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 800px;
   aspect-ratio: 4 / 3;
  /* aspect-ratio: 1 / 1; */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(230, 0, 0, 0.1);
}

.mapa-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ========================
   Galeria de Imagens
=========================== */

.galeria {
  margin-top: 2.5vw;
}

.galeria h3 {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
}

.galeria-imagens {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.galeria-imagens img {
  width: 200px;
  border-radius: 6px;
  transition: transform 0.2s;
  object-fit: cover;
}

.galeria-imagens img:hover {
  transform: scale(1.05);
}

/* ========================
   Carrossel de Imagens Secundárias
=========================== */

.galeria-imagens-scroll {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
}

.galeria-imagens-scroll img {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 180px;
  height: 130px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s;
}

.galeria-imagens-scroll img:hover {
  transform: scale(1.05);
}

.galeria-imagens-scroll {
  scrollbar-width: auto;
}


/* ========================
   Visualizador Fullscreen
=========================== */

#imagem-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#imagem-viewer img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
}

#imagem-viewer .navegacao {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  padding: 2vw;
}

#imagem-viewer .prev {
  padding-right: 10vw;
  padding-top: 10vw;
  padding-bottom: 10vw;
  left: 2vw;
  z-index: 999;
}

#imagem-viewer .next {
  padding-left: 10vw;
  padding-top: 10vw;
  padding-bottom: 10vw;
  right: 2vw;
  z-index: 999;
}

#imagem-viewer .fechar {
  position: absolute;
  top: 3vw;
  right: 3vw;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding-top: 2vw;
  padding-right: 2vw;
  padding-left: 100vw;
  padding-bottom: 100vw;
}


#imagem-viewer .fechar img {
  width: 20vw;
  height: auto;
  pointer-events: none;
}

#imagem-viewer .navegacao img {
  width: 10vw;
  height: auto;
  pointer-events: none;
}

.imagem-scroll-container {
  margin-left: 2vw;
  margin-right: 2vw;
  gap: 2vw;
  display: flex;
  overflow-x: scroll;
  width: 100%;
  height: 100%;
  scroll-snap-type: x mandatory;
  align-items: center;
  justify-content: flex-start;
}

.imagem-scroll-container::-webkit-scrollbar {
  display: none;
}

.imagem-fullscreen {
  flex: 0 0 100%;
  height: auto;
  max-height: 90vh;
  scroll-snap-align: center;
  object-fit: contain;
  border-radius: 12px;
}



/*==================
  Botão Whatsapp
==================*/
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  font-size: 1.2rem;
  padding: 0.75rem 1.5rem;
  background-color: #25d366;
  color: white !important;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.2s;
  max-width: 90%;
  width: fit-content;
}

.btn-whatsapp:hover {
  background-color: #1ebe5d;
  transform: scale(1.03);
}

.btn-whatsapp img {
  width: 24px;
  height: 24px;
}


/* ========================
   Botão de Alternância de Tema
=========================== */
.btn-tema {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.btn-tema img {
  width: 24px;
  height: 24px;
  filter: invert(0.8);
  transition: transform 0.2s ease;
}

.btn-tema:hover img {
  transform: scale(1.1);
}


/* ========================
   Modo Escuro 
=========================== */
body.modo-escuro {
  background-color: #121212;
  color: #e0e0e0;
}

body.modo-escuro .titulo-imovel,
body.modo-escuro .descricao,
body.modo-escuro .campos-adicionais,
body.modo-escuro .galeria h3,
body.modo-escuro .footer_info p {
  color: #e0e0e0;
}

body.modo-escuro .preco {
  color: #81c784;
}

body.modo-escuro .botao-maps {
  background-color: #2196f3;
}

body.modo-escuro .botao-maps:hover {
  background-color: #1976d2;
}

body.modo-escuro .btn-whatsapp {
  background-color: #25d366;
}

body.modo-escuro .btn-whatsapp:hover {
  background-color: #1ebe5d;
}

body.modo-escuro .footer {
  background-color: #1c1c1c;
  color: #e0e0e0;
}

body.modo-escuro .footer_logo img,
body.modo-escuro .footer_info img {
  filter: brightness(0.8);
}

body.modo-escuro .footer_copyright {
  color: #aaaaaa;
}

body.modo-escuro #imagem-viewer {
  background-color: rgba(0, 0, 0, 0.95);
}

body.modo-escuro .bloco-detalhe a{
  color: white;
}

/* Esconde layout-desktop no mobile */
main.desktop {
  display: none;
}



/* ========================
   Responsividade para Desktop
=========================== */
/* ========================
   Responsividade para Desktop
=========================== */
@media (min-width: 768px) {

  /* ========================
     Estrutura Geral
  ========================= */

  main.mobile {
    display: none;
  }

  main.desktop {
    display: block;
  }

  .conteudo-imovel {
    padding: 1vw 4vw;
    max-width: 100vw;
  }

  /* ========================
     Layout Principal (3 colunas)
  ========================= */

  .layout-desktop {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2vw;
    margin-top: 2vw;
    width: 100%;
    /* height: 80vh; */
  }

  .coluna-esquerda {
    flex: 0 0 15%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* height: 100%; */
    overflow-y: auto;
    height: 80vh;
  }

  .coluna-esquerda img {
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    object-fit: cover;
  }

  .coluna-central {
    flex: 0 0 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
  }

  .coluna-central img {
    max-width: 100%;
    height: 100%;
    border-radius: 8px;
  }

  .coluna-direita {
    flex: 1;
    padding-right: 1vw;
    display: flex;
    text-align: left;
    flex-direction: column;
    height: 100%;
    gap: 1vw;
  }


  /* ==========================
  Imagem principal / mapa
  ============================*/

.imagem-principal-container {
  position: relative;
  width: 100%;
  height: 80vh; /* <- mesma altura da coluna */
}

.imagem-principal-click{
  height: 100%;
}

.imagem-principal,
.mapa-principal iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5vw;
  display: block;
  border: 0;
}

.mapa-principal {
  display: none;
  height: 100%; /* essencial */
}

.botao-mapa-toggle {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
}

.botao-mapa-toggle:hover {
  background-color: #0056b3;
}



  /* ========================
     Blocos proporcionais
  ========================= */

  .bloco-direita {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: flex-start;
  }

  /* ========================
     Título e Preço
  ========================= */

  .titulo-imovel {
    font-size: 2.5vw;
  }

  .preco {
    font-size: 2vw;
    color: green;
    font-weight: bold;
    margin-top: 0vw;
    margin-bottom: 0.5vw;
  }

  /* ========================
     Descrição
  ========================= */

  .descricao {
    white-space: pre-line;
    padding: 0;
    font-size: 1vw;
    line-height: 1.6;
  }

  /* ========================
     Campos em Grade (2 colunas)
  ========================= */

  .campos-grid {
    display: flex;
    justify-content: left;
    text-align: left;
    align-items: left;
    flex-wrap: wrap;

  }

  .bloco-detalhe {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.4vw;
  }

  .bloco-detalhe a{
    color: black;
  }

  .linha-detalhe {
    display: flex;
    margin-left: 0.5vw;
    font-size: 0.8vw;
    color: #666;
    line-height: 1.6em;
  }

  .campos-adicionais {
    text-align: left;
    margin: 0 0;
    font-size: 1.2rem;
    line-height: 1.8;
    padding: 0 0;
  }

  .campos-adicionais.campos-grid {
    display: flex;


    flex-wrap: wrap;
    line-height: 1vw;
    gap: 1vw 3vw;
    /*y e x*/
  }

  .campos-adicionais.campos-grid>* {
    flex: 1 1 45%;
  }

  .campos-adicionais .detalhe {
    font-size: 1vw;
    color: #666;
    margin-left: 0.5rem;
  }


  /* ========================
     Galeria
  ========================= */

  .galeria h3 {
    font-size: 1.2vw;
    margin-bottom: 1rem;
  }

  .galeria-imagens-scroll img,
  .galeria-imagens img {
    border-radius: 6px;
  }

  /* ========== SCROLLBAR MODO CLARO ========== */
  .coluna-esquerda {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #c1c1c1 #f3f3f3;
    /* thumb | track */
  }

  .coluna-esquerda::-webkit-scrollbar {
    width: 8px;
    /* Largura da barra */
    background: #f3f3f3;
    /* Cor do trilho */
  }

  .coluna-esquerda::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    /* Cor da "bolinha" */
    border-radius: 6px;
    transition: background 0.2s;
  }

  .coluna-esquerda::-webkit-scrollbar-thumb:hover {
    background: #888;
    /* Cor no hover */
  }

  /* ========== SCROLLBAR MODO ESCURO ========== */
  body.modo-escuro .coluna-esquerda {
    scrollbar-color: #222 #151515;
    /* thumb | track */
  }

  body.modo-escuro .coluna-esquerda::-webkit-scrollbar {
    background: #151515;
  }

  body.modo-escuro .coluna-esquerda::-webkit-scrollbar-thumb {
    background: #222;
  }

  body.modo-escuro .coluna-esquerda::-webkit-scrollbar-thumb:hover {
    background: #444;
  }

  /*==================
  Botão Whatsapp
==================*/
  .btn-whatsapp {
    margin-top: 1vw;
    gap: 1vw;
    font-size: 1.2rem;
    padding: 0.75rem 1vw;
    border-radius: 8px;
  }


  .btn-whatsapp img {
    width: 2vw;
    height: auto;
  }

  /* ========================
     Visualizador Fullscreen
  ========================= */

  #imagem-viewer img {
    max-width: 90vw;
    max-height: 90vh;
  }

  #imagem-viewer .navegacao img,
  #imagem-viewer .fechar img {
    width: 5vw;
  }

  /* ========================
     Miniaturas laterais
  ========================= */

  .thumb-secundaria {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
  }

}