/* ===========================================================
   We Barra by Living — Estilos Mobile
   Overrides para telas pequenas (tablet/celular)
   =========================================================== */

/* ----- Tablet e abaixo (até 991.98px) ----- */
@media (max-width: 991.98px) {
  /* Evita scroll lateral no mobile */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  section { max-width: 100vw; overflow-x: hidden; }
  img, video, iframe { max-width: 100%; }

  /* Hero: bloco superior encolhe (só logo + texto, sem 100vh) */
  .hero__top { min-height: auto; padding-bottom: 2.5rem; padding-left: 1.6rem;}
  .hero__title { letter-spacing: 4px; }

  /* Galeria: mosaico mobile — 3 colunas com spans variados */
  .galeria-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: 90px !important;
    grid-auto-flow: dense;
    gap: 6px;
  }
  /* limpa os grid-area do desktop */
  .galeria-grid > * { grid-area: auto !important; }

  /* tall (2 linhas) — cria altura no mosaico */
  .galeria-grid > :nth-child(3),
  .galeria-grid > :nth-child(5),
  .galeria-grid > :nth-child(10),
  .galeria-grid > :nth-child(13) { grid-row: span 2 !important; }

  /* wide (2 colunas) — cria largura no mosaico */
  .galeria-grid > :nth-child(4),
  .galeria-grid > :nth-child(7),
  .galeria-grid > :nth-child(11),
  .galeria-grid > :nth-child(16) { grid-column: span 2 !important; }

  /* Reduz padding vertical das seções (equivale a py-3 do Bootstrap = 1rem) */
  .contato,
  .localizacao,
  .dados,
  .experiencia,
  .plantas,
  .facilidades,
  .apartamento,
  .living,
  .video {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  /* .localizacao tinha height fixo — solta no mobile */
  .localizacao { height: auto; min-height: 0; }

  /* posição/fundo da navbar (fixa + .scrolled) ficam no style.css.
     Aqui só o padding menor do mobile. */
  .hero .navbar { padding: .6rem 0; }

  /* o menu colapsado abre por baixo da navbar e tem fundo próprio + links centralizados */
  .hero .navbar-collapse {
    /* background: rgba(64, 51, 49, .95); */
    padding: 1rem;
    margin-top: .6rem;
    border-radius: 4px;
    text-align: center;
  }
  .hero .navbar-collapse .hero__menu {
    align-items: center;
    width: 100%;
  }
  .hero .navbar-collapse .nav-item {
    width: 100%;
    text-align: center;
  }
}

/* ----- Celular (até 575px) ----- */
@media (max-width: 575px) {
  /* mantém 3 colunas no mosaico, só reduz altura das linhas */
  .galeria-grid { grid-auto-rows: 75px !important; gap: 5px; }
  .pref-grid    { gap: 1.2rem; }
  .form-card    { padding: 2rem; }
  .hero__menu   { gap: .8rem; }
}



@media (max-width: 800px){
.apartamento {
  background-image: url('../img/bg-apartamento.png');
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 6rem 0;
  border-top: none;
}

#heromobile{
  background-image: url('../img/hero-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px ;

display: flex;
justify-content: start;
align-items: end;
}
.video {
  min-height: 300px;
  height: 30vh;
  background: 
              url("../img/video-bg.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.localizacao {
  background: linear-gradient(rgba(64,51,49,.35), rgba(64, 51, 49, 0)),
              url("../img/endereco-bg-md.png") center/cover no-repeat;
  color: #fff;
  padding: 1rem 0;
  height: 400px;

}

.localizacao .container {
  display: flex;
  justify-content: space-between;
  align-items: start;
flex-direction: column;
height: 100%;

}

.plantas {
  background:  
              url("../img/plantasbgmb.png") center/cover no-repeat,
              linear-gradient(rgb(0, 0, 0), rgb(64, 51, 49));
  color: #fff;
  padding: 1rem 0;
  height: 400px;
}

.plantas .container {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  height: 100%;
}

.titulo {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 1rem;
}
.living__logo {
    width: 80px;
}

.footer {
  background: 
              url("../img/bg-mobilefooter.png") center/cover no-repeat;
  color: #fff;
  padding: 3.5rem 0;
}

.numeros{
   letter-spacing: 0px !important 
}

.tipagem{
   letter-spacing: 0px !important 
  
}

}
.numeros{
  letter-spacing: 4px  ;
}