:root{
  --bg:#0b0d12;
  --fg:#ffffff;
  --muted:#9aa4b2;
  --card:#131722;
  --primary:#ffffff;
  --radius:14px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
}
*{box-sizing:border-box}
body{margin:0;background:var(--fg);color:var(--bg);font-family:var(--font);line-height:1.5}
html, body {
  border: none !important;
}

.container{max-width:1280px;margin:0 auto;padding:0 0px}
.app-header,.app-footer{background:#0f1320;}
.app-footer{border-top:1px solid #20283a;border-bottom:none;margin-top:40px;padding:16px 0}
.app-header .container{display:flex;align-items:center;gap:20px;padding:14px 0}
.brand{color:var(--fg);text-decoration:none;font-weight:700}
h1{margin:24px 0 12px}
.muted{color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:0;list-style:none;margin:16px 0}
.card{background:var(--card);border:1px solid #20283a;border-radius:var(--radius);padding:12px}
.card img{width:100%;border-radius:10px;display:block}
.btn{display:inline-block;margin-top:8px;margin-bottom:6px;background:var(--primary);color:#002b23;text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:600}
.hero{width:100%;border-radius:var(--radius);border:1px solid #20283a;margin-top:8px}
.nav-link {
    color: #6b6b6b;
    
}




/* === VISIBILIDADE / EMPILHAMENTO DOS SLIDES === */
/* === CARROSSEL HERO =============================== */
#heroCarousel {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

#heroCarousel .carousel-item {
  position: absolute;
  inset: 0;
  display: none;
}

#heroCarousel .carousel-item.active {
  display: block;
}

#heroCarousel .carousel-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto sobre a imagem – DESKTOP */
.carousel-caption {
  position: absolute;
  left: 80px;          /* 👉 sempre depois da seta (20 + 42 + ~15) */
  bottom: 27%;
  color: #fff;
  text-align: left;

}

.carousel-caption .tagline {
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.carousel-caption h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.carousel-caption .desc {
  font-size: 1.1rem;
  margin: 0 0 1.2rem;
}

/* Botão principal (Saiba mais / Ver detalhes) */
.btn-carousel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 15px;
  background: #38cc29;
  color: #fff;
  border: none;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}

.btn-carousel:hover {
  background: #2dbf1e;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.btn-carousel:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

/* Setas do carrossel */
.hero-carousel {
  position: relative;
   z-index: 5; /* hero fica acima do fundo cinza */
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  z-index: 10;
  transition: background .2s ease, transform .1s ease;
}

.carousel-control.prev {
  left: 20px;
}

.carousel-control.next {
  right: 20px;
}

.carousel-control:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: translateY(-50%) scale(1.05);
}

.carousel-control:active {
  transform: translateY(-50%) scale(0.97);
}

/* Setas menores no mobile */
@media (max-width: 576px) {
  .carousel-control {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .carousel-control.prev {
    left: 10px;
  }

  .carousel-control.next {
    right: 10px;
  }
}

/* Mobile: mantém proporção + texto na mesma coluna */
@media (max-width: 768px) {
  #heroCarousel {
    height: auto;
  }

  #heroCarousel .carousel-item {
    position: relative;
    height: auto;
  }

  #heroCarousel .carousel-item > img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .carousel-caption {
    position: absolute;
   
    left: 80px;        /* 👉 mesma coluna que no desktop, sempre fora da seta */
    right: 16px;
    bottom: auto;
    max-width: none;
    text-align: left;
  }

  .carousel-caption h2 {
    font-size: 1.2rem;
    line-height: 1.25;
    margin-bottom: 6px;
  }

  .carousel-caption .desc {
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 10px;
  }

  .btn-carousel {
    padding: 8px 18px;
    font-size: 0.9rem;
  }
}

.search-wrapper-bg {
  background: #f5f5f5;     /* cinza bonito */
  position: relative;
 
  margin-top: -78px;       /* faz o cinza subir um pouco */
  padding-top: 60px;       /* compensa o margin-top */
  padding-bottom: 40px;    /* respiro */
}

/* ===== Card de busca de empreendimento (sobreposto ao carrossel) ===== */
.search-card {
  position: relative;
  width: 100%;
  /* puxa o card pra cima, sobrepondo o carrossel */
  margin-top: -20px !important;   /* ajuste fino aqui: -60, -80, -100... */
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 0 16px 32px;
   z-index: 20;
  
}

.search-card-form {
  width: 100%;
  max-width: 900px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #d3d5d2;
  padding: 22px 26px;
}


.search-card-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: #222;
  margin-bottom: 8px;
}

.search-card-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-card-input {
  flex: 1;
  border-radius: 15px;
  border: 1px solid #d0d4dd;
  padding: 10px 16px;
  font-size: 0.95rem;
  outline: none;
  color: #333;
}

.search-card-input::placeholder {
  color: #9aa4b2;
}

.search-card-input:focus {
  border-color: #38cc29;
  box-shadow: 0 0 0 1px rgba(192,25,65,0.25);
}

/* Botão Buscar estilizado */
.search-card-btn {
  border: none;
  border-radius: 15px;
  padding: 10px 26px;
  background: #38cc29;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}

/* Botão Buscar estilizado */
.search-card-btn-benefits {
  border: none;
  border-radius: 15px;
  padding: 10px 26px;
  background: #38cc29;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}

.search-card-btn:hover {
  background: #2dbf1e;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.search-card-btn-benefits:hover {
  background: #2dbf1e;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.search-card-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

.search-card-btn-benefits:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

/* Responsivo: empilha input e botão no mobile */
@media (max-width: 576px) {

  .search-card {
  
  margin-top: 10px !important;   /* ajuste fino aqui: -60, -80, -100... */
 
}

  .search-card-form {
    padding: 14px 14px;
  }

  .search-card-row {
    flex-direction: column;
    align-items: stretch;
  }

  .search-card-btn {
    width: 100%;
    text-align: center;
  }


}

/* === VITRINE DE IMÓVEIS (estilo Apto) =================== */

.vitrine-wrapper {
  padding: 0px 0 48px;
  background: #f6f7f8;
}

.vitrine-shell {
  max-width: 1280px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 10px;
   border: 1px solid #d3d5d2;
  padding: 28px 32px 28px;
}

.vitrine-header {
  text-align: center;
  margin-bottom: 24px;
}

.vitrine-pill--badge {
  border: none;
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #111827;
  color: #fff;
  margin-bottom: 10px;
}

.vitrine-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  color: #111827;
}

.vitrine-title-link {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Filtros (linha com 3 botões) */
.vitrine-filters {
 display: flex;
   flex: 0 0 auto; /* não deixa esticar nem quebrar */
  justify-content: center;
  gap: 12px;
  white-space: nowrap;
  margin-top: 22px;
  margin-bottom: 18px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 15px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: 0.9rem;
  color: #111827;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.filter-pill-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
  color: #4b5563;          /* cor única dos ícones */
}

.filter-pill-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.filter-pill-caret {
  font-size: 0.7rem;
  opacity: .7;
}


.filter-pill:hover {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.filter-pill.is-open {
  border-color: #2563eb;
  background: #eff6ff;
}

/* Painéis dos filtros (dropdowns) */
.filter-panels {
  position: relative;
  margin-bottom: 18px;
}

.filter-panel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-width: calc(100% - 32px);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  padding: 16px 18px 14px;
  z-index: 30;
  display: none;
}

.filter-panel.is-open {
  display: block;
}

.filter-panel-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
}

.filter-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.chip {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  padding: 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}

.chip:hover {
  border-color: #2563eb;
}

.filter-panel-footer {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.link-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.8rem;
  color: #2563eb;
  cursor: pointer;
}

.filter-apply-btn {
  border: none;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* Check / radio opções */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.check-row input {
  margin-top: 3px;
}

.check-title {
  font-weight: 500;
  color: #111827;
}

.check-sub {
  color: #6b7280;
}

.filter-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 6px 10px;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.filter-options-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Carrossel de cards */
.vitrine-carousel-shell {
  position: relative;
  margin-top: 18px;
  padding-top: 6px;
  padding-bottom: 46px; /* espaço para as setas ficarem abaixo dos cards */
}

.vitrine-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 6px;

  /* remover barra de rolagem em todos os navegadores */
  scrollbar-width: none; /* Firefox */
}
.vitrine-carousel::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.vitrine-carousel::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}

/* Card */
.vitrine-card {
  position: relative;        /* 🔴 IMPORTANTE */
  flex: 0 0 260px;
  max-width: 260px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 4px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.vitrine-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2; /* proporção exata 800 x 533 */
  overflow: hidden;
  border-bottom: none;
}


/* carrossel interno da foto do card */
.card-media-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-media-track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0%);
  transition: transform 0.4s ease;
}

/* cada foto ocupa 100% da largura do card */
.card-media-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* bolinhas de navegação dentro da foto */
.card-media-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.card-media-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.card-media-dot.is-active {
  width: 14px;
  border-radius: 999px;
  background: #ffffff;
}

/* garante que o botão de chat fica por cima da imagem e dos dots */
.vitrine-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: none;
}

.vitrine-chat-btn {
  position: absolute;
  right: 14px;
  bottom: -18px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
}


.badge-destaque {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  z-index:50;
}

.vitrine-card-body {
  padding: 12px 12px 14px;
  position: relative;
}

.vitrine-card-title {
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: #111827;
}

.vitrine-card-location {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0 0 8px;
}
.vitrine-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 10px;
  margin-bottom: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #333;
}

.meta-item svg {
  width: 20px;
  height: 20px;
  stroke: #333;
}


.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #111827;
}

.meta-item svg {
  width: 16px;
  height: 16px;
  stroke: #2dbf1e;
}


.vitrine-card-price {
  font-size: 0.95rem;
  margin: 0;
  color: #111827;
}

/* Botão de chat no card */
.vitrine-card-chat {
  position: absolute;
  right: 18px;          /* distância da borda direita do card */
  top: 155px;           /* ajuste fino: controla onde ele cruza imagem/branco */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #38cc29;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.20);
  cursor: pointer;
  z-index: 10;          /* 🔥 fica na frente da imagem e do texto */
}

.vitrine-card-chat-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
}

/* leve hover pra dar vida */
.vitrine-card-chat:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}


/* Setas do carrossel — estilo vermelho, abaixo dos cards */
/* Setas do carrossel — estilo vermelho, abaixo e mais à direita */
/* Setas do carrossel — estilo vermelho, abaixo e mais à direita */
/* --- SETAS DO CARROSSEL (versão perfeita) --- */

/* === SETAS DO CARROSSEL DE IMÓVEIS =================== */

.vitrine-arrow {
  position: absolute;
  top: 97%;                   
  transform: translateY(-50%);
  right: 40px; 
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px  solid #dfdede;
  opacity: 0;                            /* começa invisível */
  transition: opacity .25s ease; 
  background: #ffffff;
  color: #38cc29;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30; /* 🔥 encima de tudo */

}

.vitrine-arrow:hover {

  border: none;
  background: #38cc29;
  color: #ffffff;
  
}

.vitrine-arrow--prev {
  right: 88px; /* 🔥 20–30px mais pra esquerda, como você pediu */
}

/* seta direita gira */
.vitrine-arrow--next .vitrine-arrow-icon {
  transform: rotate(180deg);
}

.vitrine-arrow-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}


/* === ÍCONE DE CHAT NO CARD ======================== */

.vitrine-card-media {
  position: relative;       /* garante base pro chat absoluto */
}

/* bolinha branca com ícone de chat */
.vitrine-chat {
  position: absolute;
  right: 12px;
  bottom: -20px;            /* metade pra dentro da imagem, metade pro corpo do card */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25);
  cursor: pointer;
}

.vitrine-chat-icon {
  width: 18px;
  height: 18px;
  stroke: #2563eb;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* se quiser o balão preenchido em azul e o traço branco, troque por:
.vitrine-chat-icon {
  width: 18px;
  height: 18px;
  fill: #2563eb;
  stroke: #ffffff;
  stroke-width: 1.5;
}
*/




/* Responsivo */
@media (max-width: 768px) {
  .vitrine-shell {
    padding: 24px 16px 20px;
    border-radius: 0;
    box-shadow: none;
  }

  .vitrine-title {
    font-size: 1.3rem;
  }

  .vitrine-card {
    flex: 0 0 230px;
    max-width: 230px;
  }

  .vitrine-arrow {
    display: none; /* no mobile usuário arrasta com o dedo */
  }

  .filter-panel {
    left: 50%;
    transform: translateX(-50%);
  }
}


/* MINI SETAS DO CARROSSEL INTERNO ------------------------------------ */
.card-media-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.9); /* começa um pouco menor */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.75); /* 🔸 75% de opacidade (discreto) */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  opacity: 0;              /* escondida por padrão */
  pointer-events: none;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out,
    background 0.2s ease;
}

/* 🔹 Mostrar setas ao passar o mouse
   - funciona tanto na vitrine antiga (.vitrine-card-media)
   - quanto na vitrine nova (.project-card-media)
*/
.vitrine-card-media:hover .card-media-arrow,
.project-card-media:hover .card-media-arrow {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1); /* cresce suave */
}

/* Hover direto na bolinha da seta */
.card-media-arrow:hover {
  background: rgba(255, 255, 255, 0.95);
  opacity: 0.6;
}

/* Posições laterais */
.card-media-arrow--prev {
  left: 8px;
}

.card-media-arrow--next {
  right: 8px;
}

.card-media-arrow svg {
  display: block;
}


@media (max-width: 576px) {
  .vitrine-carousel {
    gap: 12px;
    padding-left: 16px;   /* dá aquele espaçamento do lado esquerdo */
    padding-right: 16px;
  }

  .vitrine-card {
    flex: 0 0 70%;       /* 🔥 Mostra 1 card inteiro + metade do próximo */
    max-width: 70%;
  }
}
@media (max-width: 1200px) {
  .filter-pill {
    padding: 6px 10px;
    font-size: 0.85rem;
  }


}

  .vitrine-carousel.is-dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

@media (min-width: 769px) {
  .vitrine-carousel-shell:hover .vitrine-arrow {
    opacity: 0.9;
  }

  .vitrine-arrow:hover {
    opacity: 1;
  }
}

/* Mobile: ativadas via classe JS */
.vitrine-carousel-shell.show-arrows .vitrine-arrow {
  opacity: 0.85 !important;  
}

/* ===== Seção de facilidades / benefícios ===== */

.section-benefits {
  width: 100%;
  background: #effcee;        /* fundo clarinho ocupando 100% */
  padding: 64px 0;
}

.benefits-layout {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: center;
}

/* Coluna esquerda */
.benefits-left {
  max-width: 100%;
}

.benefits-title {
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 16px;
  color: #020617; /* quase preto */
}

.benefits-subtitle {
  font-size: 1rem;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 24px;
}

/* Se você já tem um botão padrão, pode remover esse bloco
   e usar a classe existente */
.benefits-cta {
  padding: 14px 32px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

/* Coluna direita – grid de itens */
.benefits-right {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px; /* linhas x colunas */
}

.benefit-item {
  text-align: center;
}

.benefit-icon {
  font-size: 32px;
  margin-bottom: 12px;
  color: #38cc29; /* verde estilo “finanças” */
}

.benefit-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #020617;
}

.benefit-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4b5563;
}

/* ===== Responsivo ===== */

@media (max-width: 1024px) {
  .benefits-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .benefits-left {
    max-width: none;
    text-align: center;
  }

  .benefits-cta {
    margin: 0 auto;
    display: inline-block;
  }

  .benefits-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 24px;
  }
}

@media (max-width: 640px) {
  .benefits-right {
    grid-template-columns: 1fr;
  }
}

.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 2.4rem;   /* tamanho do ícone */
  color: #22c55e;      /* verde destaque */
}

.benefit-icon i {
  color: inherit;      /* usa o verde acima */
}

.benefit-item {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border-radius: 12px;
}

.benefit-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.benefit-item:hover .benefit-icon svg {
  transform: scale(1.09);
  opacity: 0.95;
}

.benefit-icon svg {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Section */

.section-listing {
  padding: 48px 0 64px;
  background: #f7f7f7;
}

.listing-header {
  text-align: center;
  margin-bottom: 32px;
}

.listing-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #041833;
  margin-bottom: 8px;
}

.listing-subtitle {
  font-size: 0.95rem;
  color: #667085;
}

/* GRID 3 x 3 */

.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}

@media (max-width: 1024px) {
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 0px 0px;
    
  }
}

@media (max-width: 640px) {
  .listing-grid {
    grid-template-columns: 1fr;
  }
}

/* CARD */

.project-card {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d0d4dd;
  display: flex;
  flex-direction: column;
}

/* capa quadrada + carrossel interno */

.project-card-media {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #f1f5f9;
}

.card-media-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* ajusta se quiser mais alto */
  overflow: hidden;
}

.card-media-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s ease;
}

.card-media-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 0 0 100%;
}

/* bolinhas do slider */

.card-media-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.card-media-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.card-media-dot.is-active {
  width: 16px;
  background: #22c55e; /* verde */
}

/* badge de status */

.project-status-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
  z-index:2;
}

.project-status--construction {
  background: #f97316; /* laranja */
}

/* conteúdo do card */

.project-card-body {
  padding: 16px 18px 18px;
}

.project-card-location {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin-bottom: 4px;
}

/* Título do imóvel como link – sem sublinhado */
.project-card-title a {
  text-decoration: none;
  color: inherit;           /* usa a mesma cor do título */
}

/* Opcional: leve mudança de cor no hover, mas sem underline */
.project-card-title a:hover {
  text-decoration: none;
  color: #111;              /* ou a cor que você já usa nos títulos */
}


.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 10px;
}

.project-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #4b5563;
}

/* Font Awesome verde */

.project-meta-icon {
  color: #38cc29; /* verde */
  font-size: 1rem;
}

/* preço */

.project-card-price {
  font-size: 0.9rem;
  color: #4b5563;
}

.project-card-price strong {
  font-size: 1rem;
  color: #111827;
}

/* botao "ver mais" */

.listing-actions {
  margin-top: 32px;
  text-align: center;
}

.project-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* mantém o feeling de link (mas elegante) */
.project-card-link:hover .project-card-title {
  text-decoration: underline;
}

/* acessibilidade no teclado */
.project-card-link:focus-visible {
  outline: 2px solid #22c55e;  /* verde do projeto */
  outline-offset: 4px;
}

.project-card-link .project-card-title {
  text-decoration: none;
}

.project-card-link:hover .project-card-title {
  text-decoration: none;
}
/* Container do botão — centralizado e com espaçamento */
.projects-actions {
  text-align: center;
  margin-top: 32px;
  margin-bottom: 40px;
}

/* Botão padronizado com o mesmo estilo do projeto */
.projects-view-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 15px;
  background: #38cc29;            /* verde padrão */
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.projects-view-all-btn:hover {
  background: #15803d;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* ===== SECTION CONSTRUTORAS ====================================== */

.section-brands {
  padding: 0px 0 40px;
  background: #f9fafb;            /* bem clarinho, diferencia do bloco anterior */
}

.section-title--center {
  text-align: center;
  margin-bottom: 32px;
}

/* Wrapper do carrossel */
.brands-carousel {
  overflow: hidden;
  width: 100%;
}

/* Faixa que desliza */
.brands-track {
  display: flex;
  gap: 16px;
  padding: 8px 0 4px;
  animation: brands-scroll 35s linear infinite;
}

/* Pausa animação ao passar mouse (UX mais gostosa no desktop)
   (agora controlado por classe, via CMS: pauseOnHover) */
.brands-carousel--pause:hover .brands-track {
  animation-play-state: paused;
}

/* Cartão quadrado do logo */
.brand-card {
  flex: 0 0 140px;                 /* largura fixa */
  height: 96px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

/* Link ocupando o card inteiro (quando houver href no CMS) */
.brand-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Ajuste da imagem dentro do quadrado */
.brand-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* 🔁 Animação de rolagem contínua dos logos */
@keyframes brands-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* anda metade da faixa, como duplicamos os logos */
    transform: translateX(-50%);
  }
}

/* Responsivo – em telas menores, logos um pouco menores */
@media (max-width: 768px) {
  .brand-card {
    flex: 0 0 120px;
    height: 84px;
  }

  .section-brands {
    padding: 10px 0 12px;
  }
}

/* ===== SECTION CTA FINANCIAMENTO ============================== */

.section-cta-financing {
  position: relative;      /* prende o ::before aqui dentro   */
  overflow: hidden;        /* corta sobra da imagem           */
  background: #07a9d2;     /* verde sólido no fundo           */
  padding: 56px 0 64px;
}

.section-cta-financing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/clientes-overlay.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.28;                 /* bem suave, só no fundo   */
  pointer-events: none;
  filter: saturate(0.6) brightness(1.15);
  z-index: 0;                    /* fica atrás do conteúdo   */
}


.cta-financing-inner,
.cta-financing-box {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  background: #ffffff;           /* branco sólido, sem transparência */
  border-radius: 16px;
  padding: 40px 32px 36px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
/* imagem sobreposta com opacidade */
.section-cta-financing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/clientes-overlay.jpg"); /* coloque aqui o caminho da sua imagem */
  background-size: cover;
  background-position: center;
  opacity: 0.05; /* 🔹 ~90% transparente → elegante e suave */
  pointer-events: none;
  filter: saturate(0.6) brightness(1.1); /* opcional → deixa mais clean */
}



..cta-financing-title {
  font-size: 1.8rem;
  margin-bottom: 16px;
  color: #0f172a;
}

.cta-financing-text {
  max-width: 720px;
  margin: 0 auto 24px;
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.6;
}

.cta-financing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border-radius: 15px;
  border: none;
  background: #38cc29;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-financing-btn:hover {
  background: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.35);
}

/* responsivo */
@media (max-width: 768px) {
  .section-cta-financing {
    padding: 40px 0 48px;
  }

  .cta-financing-inner,
  .cta-financing-box {
    padding: 28px 20px 32px;
  }

  .cta-financing-title {
    font-size: 1.3rem;
  }

  .cta-financing-text {
    font-size: 0.95rem;
  }
}

.vitrine-wrapper--similares {
  margin-top: 3rem;
}

.vitrine-header {

  justify-content: space-between;
  align-items: center;
}

.vitrine-nav {
  display: flex;
  gap: 0.5rem;
}

.vitrine-nav-btn {
  border: 1px solid #ddd;
  background: #fff;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 1.2rem;
  cursor: pointer;
}

/* container branco */
.vitrine-block {
  padding: 48px 0;         /* espaço superior e inferior */
}

.vitrine-block-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* header centralizado */
.vitrine-block-header {
  text-align: center;
  margin-bottom: 32px;
}

.vitrine-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0f172a;
}

.portal-bottom-section {
  padding: 48px 0 60px;
  border-top: 1px solid #eee;
  background: #fff;
}

.portal-bottom-section--alt {
  background: #fafafa; /* leve contraste na última */
}

.portal-bottom-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 32px;
  color: #222;
}

/* grid das colunas */
.portal-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* listas */
.portal-bottom-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-bottom-grid li + li {
  margin-top: 8px;
}

.portal-bottom-grid a {
  font-size: 0.95rem;
  color: #555;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.portal-bottom-grid a:hover {
  color: #00894f;           /* verde do portal / ajusta se quiser */
  transform: translateX(2px);
}

/* responsivo: empilha em telas menores */
@media (max-width: 960px) {
  .portal-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .portal-bottom-section {
    padding: 32px 0 24px;
  }

  .portal-bottom-grid {
    grid-template-columns: 1fr;
  }

  .portal-bottom-title {
    font-size: 1.25rem;
    margin-bottom: 24px;
  }
}

/* ===== FOOTER GERAL ===== */
.site-footer {
  margin-top: 0px;
  color: #ffffff;
  font-size: 14px;
}

/* fundo superior: cinza mais claro */
.site-footer .footer-top {
  background: #343b46;
  padding: 48px 0 32px;
}

/* fundo inferior: faixa mais escura */
.site-footer .footer-bottom {
  background: #242830;
  padding: 24px 0;
}

/* container central */
.footer-inner,
.footer-bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  
}

/* ===== COLUNAS SUPERIORES ===== */
.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.footer-column {
  min-width: 0;
}

.footer-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px;
  position: relative;
}

/* sublinhado dos títulos */
.footer-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #ffffff;
  margin-top: 6px;
}

/* links de lista */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #f5f5f5;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* ===== REDES SOCIAIS ===== */
.footer-column--social .footer-title {
  margin-bottom: 12px;
}

.footer-social-list {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.footer-social-item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #f5f5f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f5f5f5;
  text-decoration: none;
  font-size: 18px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.footer-social-item:hover {
  background: #f5f5f5;
  color: #343b46;
  transform: translateY(-1px);
}

/* ===== BLOCO INFERIOR ===== */
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

/* lado esquerdo: apps + links legais */
.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-apps {
  display: flex;
  gap: 16px;
}

.footer-app-badge img {
  display: block;
  height: 40px;   /* ajuste se seu PNG estiver maior/menor */
  width: auto;
}

/* links legais */
.footer-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 13px;
}

.footer-legal-links a {
  color: #d0d4db;
  text-decoration: none;
}

.footer-legal-links a:hover {
  text-decoration: underline;
}

/* lado direito: "facilitado por" + logo + texto */
.footer-bottom-right {
  text-align: right;
}

.footer-powered-by {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c0c5d0;
}

.footer-logo img {
  display: inline-block;
  height: 38px;   /* ajusta conforme o logo final */
  width: auto;
  margin-bottom: 8px;
}

.footer-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #c0c5d0;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 960px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .footer-bottom-inner {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom-right {
    text-align: left;
  }
}

/* ============================
   BUSCA – TOPO (HEADER + FILTROS + ORDENAR)
   ============================ */

/* ============================
   BUSCA – TOPO (3 LINHAS)
   ============================ */
.search-header {
  position: sticky;
  top: 0;              /* encosta no topo da janela */
  z-index: 9000;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding-top: 10px;
  
}

/* LINHA 1: Compra/Região + Filtros */
.search-line-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 20px;

}

/* LINHA 2: Título centralizado */
.search-line-middle { 
 
  background-color: #f9f9f9;
}

.search-header-title {
  font-size: 20px;
  font-weight: 300;
  color: #333;
  margin: 0 auto;
    background-color: #f9f9f9;
  max-width:1280px;
   padding-top: 26px;
  padding-bottom: 20px;
}

/* LINHA 3: Ordenar + Ver no mapa */
.search-line-bottom {
  display: flex;
   max-width:1280px;
   margin: 0 auto;
  justify-content: space-between;
  background-color: #f9f9f9;
 
}

/* Compra + Região (esquerda, linha 1) */
.buy-region-bar {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.buy-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.buy-type-btn-icon {
  font-size: 14px;
  color: #38cc29;

}
.buy-type-btn-caret {
  font-size: 12px;
  color: #999;
}

.buy-type-btn:hover {
  background: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}


.buy-region-breadcrumb {
  font-size: 14px;
  color: #555;
}

/* Ver no mapa (direita, linha 3) */
.search-map-link {
  font-size: 14px;
  color: #e00034;
  text-decoration: none;
}

.search-map-link:hover {
  text-decoration: underline;
}

/* ORDENAR (esquerda, linha 3) */
.order-bar {
  display: flex;
  align-items: center;
  margin-bottom:20px;
}

.order-select {
  position: relative;
  display: inline-block;
}

.order-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 15px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.order-btn-icon {
  font-size: 14px;
  color: #38cc29;
}

.order-btn-caret {
  font-size: 12px;
  color: #999;
}

.order-btn:hover {
  background: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}


.order-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 12px 0;
  display: none;
  z-index: 20;
}

.order-dropdown.open {
  display: block;
}

.order-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 14px;
  cursor: pointer;
}

.order-option:hover {
  background: #fafafa;
}

/* FILTROS (direita, linha 1) */
.filters-bar {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.filters-toggle {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #ffffff;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filters-toggle i {
  font-size: 14px;
}

.filters-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 10px;
  padding: 16px 20px 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  z-index: 30;
}

.filters-panel.open {
  display: block;
}

/* ============================
   Dropdown do botão COMPRA
   ============================ */

.buy-type-wrapper {
  position: relative;
  display: inline-block;
}

.buy-type-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 12px 16px;
  display: none;
  z-index: 25;
}

.buy-type-dropdown.open {
  display: block;
}

.buy-type-section {
  margin-bottom: 8px;
}

.buy-type-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.buy-type-radio input[type="radio"] {
  accent-color: #009e63; /* verdinho */
}

.buy-type-subsection {
  margin-left: 22px;
  margin-bottom: 8px;
}

.buy-type-subtitle {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #999;
  margin-bottom: 4px;
}

.buy-type-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 4px;
  padding: 4px 6px;
  border-radius: 4px;
}

.buy-type-checkbox input[type="checkbox"] {
  accent-color: #009e63;
}

.buy-type-checkbox:hover {
  background: #f5f5f5;
}

.buy-type-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 0 8px;
}

/* ============================
   Estilo dos radios/checkboxes
   (Compra, Ordenar, Filtros)
   ============================ */

/* Aumenta a área clicável dos labels */
.order-option,
.buy-type-radio,
.buy-type-checkbox,
.filter-group-body label {
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* Hover de linha */
.order-option:hover,
.buy-type-checkbox:hover,
.filter-group-body label:hover {
  background: #f7f7f7;
}

/* Espaço entre input e texto */
.order-option input,
.buy-type-radio input,
.buy-type-checkbox input,
.filter-group-body input {
  margin-right: 8px;
}

/* ===== Checkbox customizado ===== */
.buy-type-checkbox input[type="checkbox"],
.filter-group-body input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid #009e63;
  display: inline-block;
  position: relative;
  background: #fff;
  cursor: pointer;
}

/* “Check” preenchido */
.buy-type-checkbox input[type="checkbox"]:checked,
.filter-group-body input[type="checkbox"]:checked {
  background: #009e63;
}

/* Símbolo interno do check */
.buy-type-checkbox input[type="checkbox"]:checked::after,
.filter-group-body input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background: #fff;
}

/* ===== Radios customizados ===== */
.order-option input[type="radio"],
.buy-type-radio input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #009e63;
  display: inline-block;
  position: relative;
  background: #fff;
  cursor: pointer;
}

/* bolinha preenchida quando selecionado */
.order-option input[type="radio"]:checked,
.buy-type-radio input[type="radio"]:checked {
  background: #009e63;
}

.order-option input[type="radio"]:checked::after,
.buy-type-radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}

/* ============================
   Campo de região (ao lado de Compra)
   ============================ */

.region-search {
  display: flex;
  flex-direction: column;
  margin-left: 0px;
}

.region-search-label {
  font-size: 13px;
  color: #ff5673; /* rosa claro no "estado acima" */
  margin-bottom: 2px;
}

.region-search-input-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #ff5673;
  padding-bottom: 2px;
}

.region-search-icon {
  font-size: 14px;
  color: #ff5673;
  margin-right: 6px;
}

.region-search-input {
  border: none;
  outline: none;
  font-size: 15px;
  color: #222;
  flex: 1;
  padding: 2px 0;
}

.region-search-input::placeholder {
  color: #ccc;
}

/* Estado de foco: linha e texto mais fortes */
.region-search-input:focus {
  color: #111;
}

.region-search-input:focus + .region-search-underline,
.region-search-input-wrapper:focus-within {
  border-color: #e00034;
}

/* ============================
   Filtros – Valor com slider
   ============================ */

/* ============================
   Filtros – Tipo do imóvel (Casa)
   ============================ */

.filter-type-category {
  padding: 8px 0 4px;
}

.filter-type-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 10px;
  border-bottom: 1px solid #f1f1f1;
}

.filter-type-title {
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

.filter-type-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #b0b0b0;
}

/* linhas de opções */
.filter-type-options {
  padding-top: 8px;
}

.filter-type-option {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

/* aproveita o mesmo estilo geral que já fizemos:
   .filter-group-body label + inputs customizados */

/* ============================
   Toggle "selecionar tudo"
   ============================ */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #d3d3d3;
  border-radius: 999px;
  transition: 0.2s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: 0.2s;
}

/* ligado */
.toggle-switch input:checked + .toggle-slider {
  background-color: #e00034;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

/* Container de cada grupo de filtro */
.filter-group {
  border-bottom: 1px solid #f0f0f0;
}

/* Linha do cabeçalho (título + "Limpar filtros") */
.filter-group-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

/* Botão de cabeçalho (seta + texto) */
.filter-group-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* Seta */
.filter-group-chevron i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

/* Quando o grupo estiver aberto, rotaciona a seta */
.filter-group.open .filter-group-chevron i {
  transform: rotate(90deg);
}

/* Botão "Limpar filtros" à direita */
.filter-clear-btn {
  border: none;
  background: transparent;
  font-size: 12px;
  color: #b0b0b0;
  cursor: pointer;
}
/* Corpo dos filtros: escondido por padrão */
.filter-group-body {
  display: none;
  padding: 0 0 8px;
}

/* Quando estiver .open, aparece */
.filter-group-body.open {
  display: block;
}
.filter-type-category {
  padding: 8px 0 4px;
}

.filter-type-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 10px;
  border-bottom: 1px solid #f1f1f1;
}

.filter-type-title {
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

.filter-type-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #b0b0b0;
}

.filter-type-options {
  padding-top: 8px;
}

.filter-type-option {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #d3d3d3;
  border-radius: 999px;
  transition: 0.2s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #e00034;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}
/* Botão aplicar filtros (rodapé do painel) */
.filters-apply-btn {
  width: 100%;
  margin-top: 16px;
  padding: 12px 16px;
  border: none;
  border-radius: 15px;
  background: #38cc29;   /* verde padrão */
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 158, 99, 0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.filters-apply-btn:hover {
  background: #008255;
  box-shadow: 0 6px 16px rgba(0, 158, 99, 0.45);
}

.filters-apply-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0, 158, 99, 0.4);
}

.filters-toggle-icon {
  font-size: 14px;
  color: #38cc29;
}

/* ===== GRID DA BUSCA (4 colunas no desktop) ===== */

.section-search-results .listing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* Até ~1200px: 3 colunas */
@media (max-width: 1200px) {
  .section-search-results .listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet: 2 colunas */
@media (max-width: 900px) {
  .section-search-results .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 coluna */
@media (max-width: 600px) {
  .section-search-results .listing-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== LARGURA DA VITRINE DA BUSCA (quase full width) ===== */

/* 30px de margem em cada lado da tela */
.section-search-results {
  padding-left: 30px;
  padding-right: 30px;
}

/* Dentro da busca, o .container deixa de ter max-width fixo */
.section-search-results > .container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0; /* tira padding padrão do container, já estamos usando o do section */
}
/* ===== RESET das tentativas antigas de sticky/fixed ===== */
.portal-navbar--fixed,
body.page-search .portal-navbar {
  position: static;
  top: auto;
}

body.page-search main {
  padding-top: 0;
}

body.page-search .search-filters-bar {
  position: static;
  top: auto;
  z-index: auto;
}



.section-search-results > .container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background:#f9f9f9;
}

.section-search-results .listing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1200px) {
  .section-search-results .listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .section-search-results .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .section-search-results .listing-grid {
    grid-template-columns: 1fr;
  }
}

/* RESET de qualquer sticky/fixed antigo na barra */
.search-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
   margin: 0 auto;
   max-width: 1280px;

}

/* Quando a barra ganhar a classe, ela fixa no topo */
.search-header--fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Quando a barra estiver fixa */
body.page-search .search-header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}


/* Garante que a seção de resultados aproveita toda a largura com margens de 30px */
body.page-search .section-search-results {
  padding-left: 0px;
  padding-right: 0px;
   background:#f9f9f9;
   margin: 0 auto;
   max-width: 1280px;
}

.search-results-container {
background:#f9f9f9;

  }

.search-header-extra {
 background-color: #f9f9f9;
 
}

.search-header-extra .search-line-middle {
 
}

/* ============================
   AJUSTES MOBILE – BARRA TOPO
   ============================ */
@media (max-width: 768px) {
  /* Linha de cima da busca: vira layout mais compacto */
  .search-line-top {
    gap: 8px;   
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 20px;
   padding-left:0px;
  padding-right:0px !important;

  }

  /* Some o botão "Compra" */
  .buy-type-btn {
    display: none;
  }

  /* A parte da esquerda (região) ocupa todo o espaço */
  .search-top-left {
    flex: 1;
  }

  /* Input de região ocupa 100% da largura disponível */
  .search-region-input-wrapper,
  .search-region-input-wrapper input {
    width: 100%;
  }
}
.filters-panel-header {
  display: none;
}
/* ========= MOBILE: FILTROS EM OVERLAY DE TELA CHEIA ========= */
@media (max-width: 768px) {
  .filters-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    max-height: none;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    z-index: 8999;
    display: none;
    flex-direction: column;
  }

  .filters-panel.open {
    display: flex;
  }

  /* 🔹 Só no mobile o header aparece */
  .filters-panel-header {
    display: flex;              /* sobrescreve o display:none do desktop */
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    align-items: center;
    justify-content: space-between;
  }

  .filters-panel-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
  }

  .filters-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    color: #333;
  }

  .filters-panel-inner {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 16px;
    max-height: none;
  }

  .filters-panel-footer {
    flex-shrink: 0;
    padding: 16px 20px 24px;
    border-top: 1px solid #eee;
    background: #fff;
  }

  .filters-apply-btn {
    width: 100%;
  }
}

/* ==========================
   Paginação da busca
   ========================== */

.search-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0px 0 0px;
  flex-wrap: wrap;
  padding-bottom:40px;
}

.page-btn {
  min-width: 40px;
  height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.06s ease;
}

.page-btn:hover:not(:disabled) {
  border-color: #38cc29;
  color: #38cc29;
  box-shadow: 0 0 0 2px rgba(56, 204, 41, 0.15);
}

.page-btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* botão ativo (página atual) */
.page-btn--active {
  background-color: #38cc29;
  border-color: #38cc29;
  color: #fff;
  box-shadow: 0 4px 10px rgba(56, 204, 41, 0.35);
}

/* setas anterior/próximo */
.page-btn--arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

.page-btn--arrow i {
  font-size: 13px;
}

/* desabilitado (ex: anterior na página 1) */
.page-btn:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

/* reticências entre páginas */
.page-ellipsis {
  padding: 0 4px;
  color: #999;
  font-size: 16px;
}
@media (max-width: 480px) {
  .search-pagination {
    gap: 4px;
    margin-bottom: 40px;
  }

  .page-btn {
    min-width: 32px;
    height: 36px;
    padding: 0 10px;
  }
}

    /* =========================
   PÁGINA DE PROJETO (detalhe do imóvel)
   ========================== */

/* =====================================
   BARRA DE ABAS DO PROJETO (DESKTOP)
   ===================================== */

.project-page {
  background: #fff;
}

/* nav fixa logo abaixo do topo */
.project-tabs-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.project-tabs-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* botão de toggle – só mobile (desktop: escondido) */
.project-tabs-toggle {
  display: none; /* desktop */
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: #f5f5f5;
  color: #222;
  font-size: 0.95rem;
  font-weight: 600;
  align-items: center;
  justify-content: space-between;
}

.project-tabs-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.project-tabs-toggle-icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}

/* lista de abas (desktop) */
.project-tabs-inner {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.75rem 1rem;
  position: relative;  /* referência para o underline */
}

.project-tab-link {
  position: relative;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  white-space: nowrap;
  background:#f5f5f5;
}

.project-tab-link:hover {
  color: #38cc29;
  
}

/* underline animado – bar verde que se move */
.project-tabs-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: #38cc29;
  transform: translateX(0);
  transition: transform 0.25s ease, width 0.25s ease;
}

/* =====================================
   MOBILE – MENU VERTICAL OVERLAY
   ===================================== */

@media (max-width: 768px) {

  /* nav continua sticky, mas só mostra o botão */
  .project-tabs-nav {
    position: sticky;
    top: 0; /* se tiver uma navbar fixa acima, pode usar var(--portal-navbar-height, 56px) */
    z-index: 50;
  }

  /* botão aparece no mobile */
  .project-tabs-toggle {
    display: flex;
  }

  /* o container da nav vira referência pro overlay */
  .project-tabs-nav-inner {
    position: relative;
  }

  /* lista de abas vira overlay ABSOLUTO sobre o hero */
  .project-tabs-inner {
    position: absolute;
    top: 100%;     /* logo abaixo do botão */
    left: 0;
    right: 0;
    display: none; /* fechado por padrão */
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 1rem 0.75rem;
    background: #f5f5f5; /* fundo do menu aberto */
    color: #fff;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  }

  /* quando nav ganha .is-open (JS), o menu aparece */
  .project-tabs-nav.is-open .project-tabs-inner {
    display: flex;
  }

  .project-tabs-nav.is-open .project-tabs-toggle-icon {
    transform: rotate(180deg);
  }

  .project-tab-link {
    width: 100%;
    padding: 0.5rem 0;
    color: #111;
    background:#f5f5f5;
  }

  /* underline não é usado no mobile */
  .project-tabs-underline {
    display: none !important;
  }
}

/* =====================================
   HERO DO EMPREENDIMENTO
   ===================================== */

.project-hero {
  position: relative;
  color: #fff;
  background: #000;
  overflow: hidden;
}

.project-hero-media {
  width: 100%;
}

.project-hero-media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  filter: brightness(0.75);
}

/* conteúdo alinhado à ESQUERDA (desktop) */
.project-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 24px 64px;
}

.project-hero-content {
  max-width: 640px;
  text-align: left;
  margin-left: clamp(32px, 2vw, 160px);
}

.project-hero-badges {
  display: inline-flex;
  gap: 12px;
  margin-bottom: 16px;
}

.project-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.project-badge--phase {
  background: #ff8a2c;
  color: #fff;
}

.project-badge--highlight {
  background: #38cc29;
  color: #fff;
}

.project-hero-title {
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0 0 12px;
}

.project-hero-tagline {
  font-size: 1rem;
  margin: 0 0 16px;
}

.project-hero-location {
  font-size: 1.2rem;
  opacity: 0.9;
  font-weight: 500;
}

/* MOBILE – hero + imagem mais vertical */
@media (max-width: 768px) {
  .project-hero-overlay {
    padding: 32px 16px 40px;
  }

  .project-hero-content {
   
  }

  .project-hero-title {
    font-size: 1.8rem;
  }

  .project-hero-tagline {
    font-size: 0.95rem;
  }
}

/* imagem vertical ocupando quase a tela (tipo Even) */
@media (max-width: 700px) {
  .project-hero-media {
    max-height: calc(100vh - 80px);
    overflow: hidden;
  }

  .project-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .project-hero-content {
   
  }
}
/* Unificar cor do menu mobile (fechado + aberto) */
@media (max-width: 768px) {
  /* barra + botão + lista com a MESMA cor de fundo */
  .project-tabs-nav,
  .project-tabs-toggle,
  .project-tabs-inner {
    background: #f5f5f5;  /* mesma cor do menu fechado */
    color: #222;
  }

  /* links em texto escuro */
  .project-tab-link {
    color: #222;
    background:#f5f5f5;
  }
}
/* MOBILE – limpar qualquer gradiente/sombra do menu de abas */
@media (max-width: 768px) {

  /* barra + botão + lista */
  .project-tabs-nav,
  .project-tabs-toggle,
  .project-tabs-inner {
    background: #f5f5f5 !important;   /* sua cor base */
    background-image: none !important;
    box-shadow: none !important;
    border-color: #e1e1e6 !important; /* opcional, pra ficar uniforme */
  }

  /* se tiver algum pseudo-elemento fazendo degradê, some com ele */
  .project-tabs-nav::before,
  .project-tabs-nav::after,
  .project-tabs-inner::before,
  .project-tabs-inner::after {
    content: none !important;
    background: none !important;
  }

  /* texto em cor sólida */
  .project-tab-link {
    color: #222 !important;
  }
   .project-tab-link:hover {
    color: #38cc29 !important;
  }
}
/* MOBILE – hero mais vertical ocupando quase a tela inteira */
@media (max-width: 700px) {
  .project-hero-media {
    height: calc(100vh - 300px) !important;
    max-height: calc(100vh - 300px) !important;
    overflow: hidden;
  }

  .project-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .project-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 350px 24px 34px;
}
}

/* ================================
   CHAMADA / RESUMO DO IMÓVEL
   ================================ */

.project-summary {
  background: #ffffff;
  border-bottom: 1px solid #eee;
}

.project-summary-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;

  /* 
    mesma “linha” do texto do hero:
    24px (padding lateral do overlay) + clamp(...)
    e usamos o mesmo valor dos dois lados 
  */
  padding: 32px calc(24px + clamp(32px, 8vw, 160px));
  max-width: 1920px;
  margin: 0 auto;
  
}

/* Coluna ESQUERDA (texto) */

.project-summary-left {
  flex: 1.1;
}

.project-summary-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 8px;
}

.project-summary-subtitle {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: #666;
}

.project-summary-views {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #777;
  margin: 0;
}

.project-summary-views-icon {
  color: #38cc29;
}

/* Coluna CENTRAL (features com ícones) */

.project-summary-features {
  flex: 1.4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.project-summary-feature {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-summary-icon {
  font-size: 1.4rem;
  color: #38cc29;            /* ícones verdes */
}

.project-summary-feature-text strong {
  display: block;
  font-size: 0.9rem;
  color: #444;
}

.project-summary-feature-text span {
  display: block;
  font-size: 0.85rem;
  color: #777;               /* texto cinza */
}

/* Coluna DIREITA (preço + botões) */

.project-summary-price {
  flex: 0.9;
  border-radius: 12px;
  border: 1px solid #e3e3e3;
  padding: 16px 20px;
  background: #fafafa;
  text-align: center;
}

.project-summary-price-label {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 4px;
}

.project-summary-price-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #222;
  margin: 0 0 16px;
}

.project-summary-cta,
.project-summary-cta-secondary {
  width: 100%;
  border-radius: 15px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Botão principal – verde do projeto */
.project-summary-cta {
  background: #38cc29;
  color: #fff;
  margin-bottom: 10px;
  border-color: #38cc29;
}

.project-summary-cta:hover {
  background: #2baa21;
  border-color: #2baa21;
}

/* Botão secundário – outline */
.project-summary-cta-secondary {
  background: #fff;
  color: #38cc29;
  border-color: #38cc29;
}

.project-summary-cta-secondary:hover {
  background: #e9fbe7;
}

/* ============================
   RESPONSIVO – MOBILE
   ============================ */

@media (max-width: 900px) {
  .project-summary-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px 16px 28px;
  }

  .project-summary-left {
    text-align: left;
  }

  .project-summary-features {
    grid-template-columns: 1fr 1fr;
  }

  .project-summary-price {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .project-summary-inner {
    gap: 20px;
  }

  .project-summary-title {
    font-size: 1.3rem;
  }

  .project-summary-features {
    grid-template-columns: 1fr; /* 1 coluna só no bem pequeno, igual print */
  }

  .project-summary-feature {
    gap: 12px;
  }
}


/* =========================
   AJUSTE TOPO – DESKTOP
   ========================= */



.project-summary-inner {
  align-items: flex-start;   /* alinha caixa da direita e textos da esquerda pelo topo */
}

/* garante que o título cole no topo do bloco */
.project-summary-title,
.project-summary-main p:first-of-type {
  margin-top: 0;
}


/* =========================
   MOBILE – GRID BONITINHO
   ========================= */

@media (max-width: 600px) {



  /* Alinha ícone + texto bonitinho no centro */
  .project-summary-feature {
    display: flex;
    flex-direction: column;     /* ícone em cima, texto embaixo */
    align-items: center;        /* ⭐ centraliza o conjunto */
    gap: 6px;
  }

  .project-summary-icon {
    font-size: 1.6rem;
    color: #38cc29;
    margin: 0;
  }
}

/* =========================
   ITENS DE LAZER / CONDOMÍNIO
   ========================= */

.project-amenities {
  
  margin-top: 0px;           /* ajusta a distância */
}

/* SECTION ITENS DE LAZER / NO CONDOMÍNIO
   alinhada com .project-summary-inner */
.project-amenities-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* 👇 exatamente o mesmo cálculo da summary */
  padding: 32px calc(24px + clamp(32px, 8vw, 160px));
  max-width: 1920px;
  margin: 0 auto;
}

/* grid continua igual */
.project-amenities-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 40px;
}


.project-amenities-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 28px;
  color: #333;
}

/* GRID – desktop: 4 colunas, parecido com o layout de referência */

.project-amenity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.project-amenity-icon {
  font-size: 1.7rem;
  line-height: 1;
  color: #38cc29;   /* verde do projeto */
  flex-shrink: 0;
  margin-top: 2px;
}

.project-amenity-text {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.4;
}

/* =========================
   RESPONSIVO – MOBILE
   ========================= */



@media (max-width: 600px) {
  .project-amenities-inner {
    padding: 24px calc(16px + clamp(16px, 6vw, 40px)); /* levemente mais enxuto no mobile */
  }

  .project-amenities-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
    column-gap: 16px;
  }

  .project-amenity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .project-amenity-icon {
    font-size: 1.8rem;
    margin: 0 auto;
  }
}

/* =========================
   DIFERENCIAIS DO IMÓVEL
   ========================= */

/* ================================
   SECTION DIFERENCIAIS
================================ */

/* =============== DIFERENCIAIS =============== */

.project-differentials {
  background: #ffffff;
  padding: 56px 0 64px;
  border-top: 1px solid #f1f1f1;
}

.project-differentials-inner {
  max-width: 1920px;
  margin: 0 auto;
  /* mesma lógica de margem da .project-summary-inner */
  padding: 0 calc(24px + clamp(32px, 8vw, 160px));
}

.project-differentials-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 32px;
}

/* GRID DESKTOP – 4 colunas fixas */
.project-differentials-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 32px 48px;
}

/* Item (ícone dentro do círculo + texto embaixo) */
.project-differential-item {
  text-align: center;
  color: #555;
}

.project-differential-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2px solid #38cc29;
  background: #f7fdf6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38cc29;
  font-size: 32px; /* Font Awesome */
}

.project-differential-label {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* itens extras (a partir do 9º) ficam escondidos inicialmente */
.project-differential-item.is-collapsed {
  display: none;
}

/* quando a section ganha .is-expanded, mostra todos */
.project-differentials.is-expanded .project-differential-item.is-collapsed {
  display: block;
}

/* Wrapper do botão */
.project-differentials-toggle-wrapper {
  margin-top: 32px;
  text-align: center;
}

/* Botão Ver mais / Ver menos */
.project-differentials-toggle {
  padding: 10px 24px;
  border-radius: 15px;
  border: 1px solid #38cc29;
  background: #38cc29;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s ease, transform 0.1s ease;
}

.project-differentials-toggle:hover {
  filter: brightness(0.95);
}

.project-differentials-toggle:active {
  transform: scale(0.97);
}

/* =============== RESPONSIVO =============== */

@media (max-width: 1024px) {
  .project-differentials-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
}

@media (max-width: 768px) {
  .project-differentials {
    padding: 40px 0 48px;
  }

  .project-differentials-inner {
    padding: 0 20px;
  }

  /* MOBILE – 2 colunas, como você gostou */
  .project-differentials-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 24px 24px;
  }

  .project-differential-icon {
    width: 80px;
    height: 80px;
    font-size: 28px;
  }

  .project-differential-label {
    font-size: 0.9rem;
  }

  .project-differentials-toggle-wrapper {
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  /* se ficar muito apertado, continua em 2 colunas,
     mas você pode mudar para 1 coluna se quiser */
  .project-differentials-grid {
    gap: 20px 16px;
  }
}

/* =========================================================
   SECTION PLANTAS
   ========================================================= */

.project-plants {
  background: #ffffff;
  padding: 56px 0 72px;
  border-top: 1px solid #f1f1f1;
}

.project-plants-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 calc(24px + clamp(32px, 8vw, 160px)); /* mesma lógica das outras sections */
}

.project-plants-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 32px;
}

/* -------- Abas das torres -------- */

.plants-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 24px;
  overflow-x: auto;
}

.plants-tabs::-webkit-scrollbar {
  display: none;
}

.plants-tab {
  position: relative;
  padding: 8px 4px 14px;
  border: none;
  background: transparent;
  font-size: 0.98rem;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
}

.plants-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: #38cc29;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.plants-tab.is-active {
  color: #111;
}

.plants-tab.is-active::after {
  transform: scaleX(1);
}

/* -------- Layout principal (menu + viewer) -------- */

.plants-panels {
  margin-top: 24px;
}

.plants-panel {
  display: none;
}

.plants-panel.is-active {
  display: block;
}

.plants-layout {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

/* -------- Menu lateral -------- */

.plants-menu {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plants-metric-block {
  border-radius: 16px;
}

.plants-metric-toggle {
  width: 100%;
  border: none;
  background: #38cc29;
  color: #fff;
  border-radius: 14px;
  font-weight:600;
  font-size:1.3rem;
  padding: 14px 20px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 8px;
}

.plants-metric-main {
  font-weight: 600;
}

.plants-metric-sub {
  font-size: 0.8rem;
  opacity: 0.8;
}

.plants-metric-chevron {
  font-size: 0.8rem;
}

.plants-options {
  margin-top: 10px;
  display: none;
  flex-direction: column;
  gap: 8px;
}

.plants-metric-block.is-open .plants-options {
  display: flex;
}

/* tipologias (botões) — mais altos e profissionais */
.plants-option {
  border-radius: 14px;
  border: 1.5px solid #d0d4da;
  background: #ffffff;

  /* mais “alto” */
  padding: 12px 16px;
  min-height: 46px;

  /* mais “forte” */
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
   color: #555555;
  text-align: left;
  cursor: pointer;

  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.plants-option:hover {
  border-color: #38cc29;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
   color: #555555;
}

.plants-option.is-active {
  background: #dafed6;
  border-color: #38cc29;
  color: #555555;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.plants-metric-chevron{
  font-size: 0.95rem;
  display: inline-block;
  transition: transform .15s ease;
}

.plants-metric-block.is-open .plants-metric-chevron{
  transform: rotate(180deg);
}

/* -------- Viewer da planta (DESKTOP) -------- */

.plants-viewer {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plants-viewer-main {
  position: relative;
  overflow: hidden;
}

.plants-viewer-image {
  width: 100%;
  display: block;
  object-fit: contain;
}

.plants-fullscreen-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  border-radius: 999px;
  border: none;
  padding: 6px 14px;
  background: #ffffff;
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.plants-viewer-caption {
  font-size: 0.95rem;
  font-weight: 500;
  color: #222;
}

.plants-viewer-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 colunas: 3 itens em cima, 2 embaixo */
  gap: 8px 16px;
  font-size: 0.85rem;
  color: #444;
  margin-top: 4px;
}


.plants-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plants-meta-item dt {
  margin: 0;
  display: flex;
  align-items: center;
}

.plants-meta-item dd {
  margin: 0;
}

/* Ícone verde */
.plants-meta-icon {
  font-size: 1rem;
  color: #38cc29;
}

/* Texto “Área útil”, “Dormitórios”… fica só para acessibilidade,
   não aparece na tela, mas o JS continua lendo o conteúdo. */
.plants-meta-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .plants-viewer-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* continua 2 colunas no mobile */
    gap: 6px 12px;
  }
}

/* estado vazio */
.plants-empty {
  padding: 24px 0 8px;
  color: #777;
}

/* -------- Viewer MOBILE (por metragem) - base -------- */

.plants-viewer-mobile {
  display: none;  /* desktop: escondido */
}

.plants-figure-mobile {
  margin: 0;
}

.plants-image-mobile {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.plants-caption-mobile {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #444;
  text-align: left;
}

/* -------- Responsivo -------- */

@media (max-width: 1024px) {
  .plants-layout {
    flex-direction: column;
  }

  .plants-menu {
    width: 100%;
    max-width: 480px;
  }
}

@media (max-width: 768px) {
  .project-plants {
    padding: 40px 0 56px;
  }

  .project-plants-inner {
    padding: 0 20px;
  }

  /* Esconde o viewer grande no mobile */
  .project-plants [data-plants-viewer] {
    display: none;
  }

  /* Mostra o viewer por metragem logo abaixo das opções */
  .plants-viewer-mobile {
    display: block;
    margin-top: 12px;
  }

  .plants-viewer-main {
    border-radius: 16px;
  }
}
.plants-metric-block:not(.is-open) .plants-viewer-mobile {
  display: none !important;
}

/* =========================================================
   SECTION LOCALIZAÇÃO / MAPA
   ========================================================= */

.project-location {
  background: #ffffff;
  padding: 56px 0 72px;
  border-top: 1px solid #f1f1f1;
}

.project-location-inner {
  max-width: 1920px;
  margin: 0 auto;
  /* mesma lógica de margem lateral da section de lazer */
  padding: 0 calc(24px + clamp(32px, 8vw, 160px));
}

.project-location-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 24px;
}

.project-location-card {
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  border: 1px solid #e4e4e4;
}

/* Mapa em cima */

.project-location-map {
  width: 100%;
  height: 420px;
}

@media (max-width: 768px) {
  .project-location-map {
    height: 320px;
  }
}

/* Faixa inferior */

.project-location-bottom {
  display: grid;
  grid-template-columns: 2fr 3fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
}

.project-location-address-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin: 0 0 4px;
}

.project-location-address-text {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0054a6; /* tom de azul como referência */
}

/* Na região / chips */

.project-location-pois-title {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
}

.project-location-pois-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-location-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 15px;
  border: 1px solid #d0d4da;
  background: #fff;
  font-size: 0.85rem;
  color: #555;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.project-location-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-location-chip-icon i {
  font-size: 0.9rem;
}

.project-location-chip.is-active {
  background: #0054a6;
  border-color: #0054a6;
  color: #fff;
}

.project-location-chip.is-active .project-location-chip-icon i {
  color: #fff;
}

/* Botão "Como chegar?" */

.project-location-actions {
  display: flex;
  justify-content: flex-end;
}

.project-location-directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 15px;  
  background: #38cc29;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid #38cc29;
  white-space: nowrap;
  gap: 4px;
}

.project-location-directions:hover {
  filter: brightness(1.05);
}

/* ------- Responsivo ------- */

@media (max-width: 1024px) {
  .project-location-bottom {
    grid-template-columns: 1.2fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "address actions"
      "pois    pois";
  }

  .project-location-address {
    grid-area: address;
  }

  .project-location-pois {
    grid-area: pois;
  }

  .project-location-actions {
    grid-area: actions;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .project-location-inner {
    padding: 0 20px;
  }

  .project-location-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "address"
      "pois"
      "actions";
    gap: 16px;
  }

  .project-location-actions {
    justify-content: flex-start;
  }

  .project-location-pois-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .project-location-chip {
    white-space: nowrap;
  }
}

.map-category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.map-category-buttons button {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.map-category-buttons button.is-active {
  background: #0057ff;
  color: #fff;
  border-color: #0057ff;
}

.map-category-buttons button img {
  width: 20px;
  height: 20px;
}

/* RESPONSIVO — 3 botões na 1ª linha e 2 na 2ª */
@media (max-width: 768px) {
  .map-category-buttons button {
    flex: 1 1 calc(33.33% - 10px); /* 3 por linha */
    text-align: center;
    justify-content: center;
  }
  .map-category-buttons button:nth-child(n+4) {
    flex: 1 1 calc(50% - 10px); /* linha 2 = 2 botões */
  }
}

/* ================================
   MAPA – BOTÕES DE CATEGORIA
   Forçar quebra em 3 + 2 no mobile
================================ */

/* comportamento padrão (desktop/tablet) continua normal,
   só garantimos que possa quebrar linha se faltar espaço */
.project-location-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  overflow-x: visible !important;
  white-space: normal !important;
}

/* MOBILE: até ~640px */
@media (max-width: 640px) {
  .project-location-chips {
    justify-content: flex-start;
  }

  .project-location-chip {
    flex: 0 0 calc(33.333% - 0.5rem); /* ~3 por linha */
    padding: 0.35rem 0.4rem;
    font-size: 0.75rem;
    text-align: center;
  }
}

/* CELULAR MUITO ESTREITO: se quiser garantir que não estoure,
   pode afinar ainda mais abaixo de 380px, opcional */
@media (max-width: 380px) {
  .project-location-chip {
    flex: 0 0 calc(50% - 0.5rem); /* 2 por linha nos menores */
  }
}

/* MOBILE: layout 3 + 2 sem barra de rolagem */
@media (max-width: 768px) {
  .project-location-pois-chips {
    display: flex;
    flex-wrap: wrap;      /* <-- permite quebrar linha */
    overflow-x: visible;  /* <-- remove scroll horizontal */
    gap: 8px;
  }

  .project-location-chip {
    flex: 0 0 calc(33.33% - 8px); /* 3 por linha */
    justify-content: center;
    text-align: center;
    padding: 8px 6px;
    font-size: 0.78rem;
    white-space: normal;  /* quebra texto se precisar */
  }

  /* 2ª linha = 2 botões */
  .project-location-chip:nth-child(n+4) {
    flex: 0 0 calc(50% - 8px);
  }
}

/* CELULARES MUITO ESTREITOS */
@media (max-width: 400px) {
  .project-location-chip {
    flex: 0 0 calc(50% - 8px); /* tudo vira 2 por linha */
  }
}
/* ================================
   CORES POR CATEGORIA (BOTÕES)
   Ajuste os hex pra bater com o PNG
================================ */

/* Alimentação */
.project-location-chip[data-poi-category="food"] {
  border-color: #0082f9;
  color: #0082f9;
}
.project-location-chip[data-poi-category="food"] .project-location-chip-icon i {
  color: #0082f9;
}
.project-location-chip[data-poi-category="food"].is-active {
  background: #0082f9;
  border-color: #0082f9;
  color: #fff;
}
.project-location-chip[data-poi-category="food"].is-active .project-location-chip-icon i {
  color: #fff;
}

/* Conveniência / Supermercados */
.project-location-chip[data-poi-category="convenience"] {
  border-color: #f03b11;
  color: #f03b11;
}
.project-location-chip[data-poi-category="convenience"] .project-location-chip-icon i {
  color: #f03b11;
}
.project-location-chip[data-poi-category="convenience"].is-active {
  background: #f03b11;
  border-color: #f03b11;
  color: #fff;
}
.project-location-chip[data-poi-category="convenience"].is-active .project-location-chip-icon i {
  color: #fff;
}

/* Educação */
.project-location-chip[data-poi-category="education"] {
  border-color: #00ec00;
  color: #00ec00;
}
.project-location-chip[data-poi-category="education"] .project-location-chip-icon i {
  color: #00ec00;
}
.project-location-chip[data-poi-category="education"].is-active {
  background: #00ec00;
  border-color: #00ec00;
  color: #fff;
}
.project-location-chip[data-poi-category="education"].is-active .project-location-chip-icon i {
  color: #fff;
}

/* Lazer */
.project-location-chip[data-poi-category="leisure"] {
  border-color: #005200;
  color: #005200;
}
.project-location-chip[data-poi-category="leisure"] .project-location-chip-icon i {
  color: #005200;
}
.project-location-chip[data-poi-category="leisure"].is-active {
  background: #005200;
  border-color: #005200;
  color: #fff;
}
.project-location-chip[data-poi-category="leisure"].is-active .project-location-chip-icon i {
  color: #fff;
}

/* Saúde */
.project-location-chip[data-poi-category="health"] {
  border-color: #ff0a90;
  color: #ff0a90;
}
.project-location-chip[data-poi-category="health"] .project-location-chip-icon i {
  color: #ff0a90;
}
.project-location-chip[data-poi-category="health"].is-active {
  background: #ff0a90;
  border-color: #ff0a90;
  color: #fff;
}
.project-location-chip[data-poi-category="health"].is-active .project-location-chip-icon i {
  color: #fff;
}

/* =========================
   SEÇÃO DE VÍDEOS
   ========================= */

/* =========================
   SEÇÃO DE VÍDEOS
   ========================= */

/* =========================
   SEÇÃO DE VÍDEOS
   ========================= */

.project-videos {
  padding: 64px 0 80px;
  background: #f7f9fb;
}

.project-videos-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 calc(24px + clamp(32px, 8vw, 160px));
}

/* HERO */

.project-videos-hero {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 32px;
}

.project-videos-hero-media {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.16);
  background: #000;
}

.video-embed-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.video-embed-16x9 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project-videos-hero-title {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #0b1a33;
}

.project-videos-hero-subtitle {
  margin: 0;
  color: #555;
  line-height: 1.6;
}

/* FILTROS (topo da galeria) */

.project-videos-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.project-videos-filter {
  border-radius: 15px;
  border: 1px solid #d0d4da;
  padding: 6px 14px;
  background: #fff;
  font-size: 0.85rem;
  color: #555;
  cursor: pointer;
}

.project-videos-filter.is-active {
  background: #0054a6;
  border-color: #0054a6;
  color: #fff;
}

/* GRID DE VÍDEOS */

.project-videos-row {
  margin-bottom: 32px;
}

.project-videos-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.project-videos-row-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
}

.project-videos-grid {
  display: grid;
  gap: 16px;
}

/* horizontais – até 3 por linha em desktop */

.project-videos-grid--horizontal {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* shorts – cards verticais */

.project-videos-grid--shorts {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* CARD GENÉRICO */

.video-card {
  border-radius: 10px;
  border: none;
  padding: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  

}

.video-card:hover {
 
  
}

.video-card-thumb {
  position: relative;
  background: #000;
}

.video-card-thumb img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Thumb vertical (shorts) – 9:16 */

.video-card-thumb--vertical {
  padding-top: calc(16 / 9 * 100%); /* altura > largura (9:16 visual) */
}

.video-card-thumb--vertical img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* duração */

.video-card-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 6px;
  font-size: 0.7rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.8);
  color: #fff;
}

/* corpo */

.video-card-body {
  padding: 8px 12px 8px; /* ↓ menos padding pra reduzir “fundão” */
}

.video-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: #111827;
  line-height: 1.35;
  display: -webkit-box;              /* ↓ no máx. 2 linhas */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-meta {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 0;
}

.video-card-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.video-card-channel-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #e5e7eb;
  flex-shrink: 0;
  overflow: hidden;
}

.video-card-channel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card-channel-name {
  font-weight: 500;
}

.video-card-stats {
  color: #9ca3af;
}

/* RODAPÉ */

.project-videos-footer {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.project-videos-more {
  border-radius: 15px;
  border: none;
  background: #38cc29;              /* verde do projeto */
  color: #fff;
  padding: 14px 36px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(56,204,41,0.35);
}

/* MODAL HORIZONTAL */

.video-modal[hidden] {
  display: none !important;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.75);
}

.video-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 92vw);
  max-height: 80vh;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

.video-modal-player {
  width: 100%;
}

.video-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  border: none;
  background: rgba(15,23,42,0.9);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
}

/* OVERLAY SHORTS */

.shorts-overlay[hidden] {
  display: none !important;
}

.shorts-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.shorts-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.92);
}

.shorts-overlay-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shorts-overlay-player {
  width: min(420px, 90vw);
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

.shorts-video-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.shorts-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* botões overlay */

.shorts-overlay-close {
  position: absolute;
  top: 20px;
  right: 24px;
  border: none;
  background: rgba(15,23,42,0.9);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 18px;
}

.shorts-overlay-nav {
  position: absolute;
  border: none;
  background: rgba(15,23,42,0.8);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 20px;
}

.shorts-overlay-nav--prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.shorts-overlay-nav--next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* RESPONSIVO */

@media (max-width: 960px) {
  .project-videos-hero {
    grid-template-columns: 1fr;
  }

  .project-videos-inner {
    padding: 0 20px;
  }

  .video-modal-dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

@media (max-width: 640px) {
  .project-videos {
    padding-top: 48px;
  }

  .project-videos-row-title {
    font-size: 1rem;
  }

  .video-card-title {
    font-size: 0.9rem;
  }
}

/* =========================
   SHORTS – texto e layout
   ========================= */

.video-card-body--shorts {
  padding: 6px 8px 10px;
}

.video-card-title--shorts {
  font-size: 0.9rem;
  line-height: 1.3;
  margin-bottom: 4px;

  display: -webkit-box;
  -webkit-line-clamp: 2;   /* máximo 2 linhas (padrão YouTube Shorts) */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-stats {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 0;
}
/* ---------- SHORTS (VÍDEOS VERTICAIS) ---------- */

/* Grid mais estreita para caber 5 por linha em desktop */
.project-videos-grid--shorts {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* Em telas grandes: força 5 por linha, igual YouTube */
@media (min-width: 1200px) {
  .project-videos-grid--shorts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Card de short: um pouco mais estreito e compacto */
.video-card--short {
  border-radius: 10px;
  
}

/* Thumb vertical (mantém 9:16) */
.video-card-thumb--vertical {
  position: relative;
  padding-top: calc(16 / 9 * 100%); /* aspecto 9:16 (altura maior) */
  background: #000;
}

.video-card-thumb--vertical img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Corpo do short com 3 linhas: título + canal + stats */
.video-card-body--short {
  padding: 8px 8px 10px;
}

.video-card-title--short {
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.3;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;     /* no máximo 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-channel--short {
  margin: 0 0 2px;
  font-size: 0.72rem;
  color: #4b5563;
}

.video-card-meta--short {
  margin: 0;
  font-size: 0.7rem;
  color: #6b7280;
}

/* Mobile: deixa um pouco mais largo e com fontes um tiquinho maiores */
@media (max-width: 768px) {
  .project-videos-grid--shorts {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .video-card-title--short {
    font-size: 0.8rem;
  }

  .video-card-channel--short,
  .video-card-meta--short {
    font-size: 0.74rem;
  }
}
@media (max-width: 768px) {
  /* horizontais: 1 por linha */
  .project-videos-grid--horizontal {
    grid-template-columns: 1fr !important;
  }

  /* shorts: 2 por linha */
  .project-videos-grid--shorts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Botão "Voltar para a página" no overlay de shorts */
.shorts-overlay-back {
  position: absolute;
  left: 24px;
  top: 20px;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  background: rgba(248, 250, 252, 0.95);
  color: #111827;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}

/* Ajuste das setas para ficarem empilhadas verticalmente à direita */
.shorts-overlay-nav--prev,
.shorts-overlay-nav--next {
  right: 16px;
  left: auto;
}

.shorts-overlay-nav--prev {
  top: calc(50% - 26px);
}

.shorts-overlay-nav--next {
  top: calc(50% + 26px);
}

/* Overlay full-screen */
.reels-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* fundo clicável */
.reels-backdrop {
  position: absolute;
  inset: 0;
}

/* container do conteúdo */
.reels-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  max-height: 100vh;
  padding: 24px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* header topo */
.reels-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.reels-close {
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.reels-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* área central */
.reels-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, auto) 60px;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
}

/* moldura do vídeo (9:16) centralizada */
.reels-video-frame {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 80px);
  margin: 0 auto;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
}

.reels-video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* coluna de navegação (↑ / ↓) */
.reels-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.reels-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.reels-nav-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* responsivo – em telas muito pequenas some a coluna de navegação */
@media (max-width: 768px) {
  .reels-shell {
    padding-inline: 16px;
  }
  .reels-main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  .reels-nav {
    flex-direction: row;
    justify-content: center;
  }
}

/* ===== MODAL VÍDEO HORIZONTAL ===== */

.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
}

.video-modal-dialog {
  position: relative;
  z-index: 1;
  max-width: 960px;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-frame {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
}

/* 16:9 */
.video-modal-frame iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* botão FECHAR flutuante no canto superior direito */
.video-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 2;
}

.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 768px) {
  .video-modal-dialog {
    height: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-modal-frame {
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
  }

  .video-modal-frame iframe {
    width: 100%;
    height: auto;
    max-height: 60vh; /* pra não estourar demais, fica harmonioso */
  }

  .video-modal-close {
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* ====== LAYOUT BASE QUE JÁ EXISTIA (ajustado) ====== */

.reels-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  max-height: 100vh;
  padding: 24px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.reels-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
  column-gap: 32px;
  align-items: center;
}

/* coluna vídeo */
.reels-video-column {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.reels-video-frame {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 120px);
  margin: 0 auto;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
}

.reels-video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* nav lateral */
.reels-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reels-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.reels-nav-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* coluna meta (desktop) */
.reels-meta {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.reels-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.reels-caption {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 16px;
}

.reels-youtube-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  text-decoration: none;
  background: #ff0000;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.reels-youtube-link:hover {
  background: #e00000;
}

.reels-counter {
  font-size: 12px;
  opacity: 0.7;
}

/* meta mobile (overlay embaixo do vídeo) */
.reels-meta-mobile {
  display: none; /* só aparece no mobile */
}

@media (max-width: 768px) {
  .reels-shell {
    padding: 0;
  }

  .reels-main {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .reels-video-column {
    position: relative;
    width: 100vw;
    height: 100vh;
  }

  .reels-video-frame {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }

  .reels-nav {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    z-index: 3;
  }

  .reels-nav-btn {
    background: rgba(0, 0, 0, 0.55);
  }

  /* esconde a coluna meta padrão e mostra a mobile */
  .reels-meta {
    display: none;
  }

  .reels-meta-mobile {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    z-index: 4;
    display: block;
    pointer-events: none; /* texto não bloqueia cliques no vídeo */
  }

  .reels-meta-mobile-inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 16px 16px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2));
    color: #fff;
    pointer-events: auto; /* mas o conteúdo pode receber cliques */
  }

  .reels-meta-mobile .reels-title {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .reels-meta-mobile .reels-caption {
    font-size: 13px;
    opacity: 0.9;
  }

  /* botão fechar no topo, sobre o vídeo */
  .reels-header {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    margin: 0;
  }

  .reels-close {
    background: rgba(0, 0, 0, 0.55);
    padding: 8px 14px;
    font-size: 12px;
  }
}
/* === MODAL VÍDEO HORIZONTAL – LAYOUT NOVO === */

.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
}

.video-modal-dialog {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
}

.video-modal-content {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1.4fr);
  gap: 24px;
  align-items: flex-start;
}

/* lado esquerdo – vídeo */
.video-modal-left {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

.video-embed-16x9 iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* lado direito – informações */
.video-modal-meta {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.video-modal-channel {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.video-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.video-modal-info {
  font-size: 13px;
  opacity: 0.75;
  margin-bottom: 18px;
}

.video-modal-cta {
  display: block;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  background: #f97316; /* laranja / pode trocar para a cor da marca */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}

.video-modal-cta:hover {
  background: #ea580c;
}

.video-modal-youtube {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 13px;
  text-decoration: none;
  color: #fff;
}

.video-modal-youtube:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* botão fechar */
.video-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 2;
}

.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* === MOBILE === */
@media (max-width: 768px) {
  .video-modal-dialog {
    height: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-modal-content {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .video-modal-left {
    border-radius: 8px;
    box-shadow: none;
  }

  .video-embed-16x9 iframe {
    max-height: 55vh;
  }

  .video-modal-meta {
    font-size: 13px;
  }

  .video-modal-title {
    font-size: 16px;
  }

  .video-modal-close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}

/* ============================
   CARROSSEL DE VÍDEOS (B)
   ============================ */

.project-videos-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.project-videos-row-title {
  margin: 0;
}

.project-videos-row-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.project-videos-arrow {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.project-videos-arrow:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: #ffffff;
  transform: translateY(-1px);
}

.project-videos-arrow:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

/* trilhos horizontais */
.project-videos-grid--horizontal,
.project-videos-grid--shorts {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.75rem 0.25rem 0rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.project-videos-grid--horizontal .video-card,
.project-videos-grid--shorts .video-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Desktop */
@media (min-width: 1024px) {
  .project-videos-grid--horizontal .video-card--horizontal {
    width: calc(33.333% - 0.75rem);
  }

  .project-videos-grid--shorts .video-card--short {
    width: 190px;
  }
}

/* Mobile / tablet */
@media (max-width: 1023.98px) {
  .project-videos-grid--horizontal .video-card--horizontal {
    width: 80%;
  }

  .project-videos-grid--shorts .video-card--short {
    width: 55%;
  }
}

/* Scrollbar discreto (opcional) */
.project-videos-grid--horizontal::-webkit-scrollbar,
.project-videos-grid--shorts::-webkit-scrollbar {
  height: 6px;
}

.project-videos-grid--horizontal::-webkit-scrollbar-thumb,
.project-videos-grid--shorts::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

/* ==============================
   SECTION + CABEÇALHO
================================= */

.section-gallery {
  padding: 24px 0 72px;   /* ↑ aumentei o padding-top pra dar mais respiro */
  background:#f7f9fb;
}

.section-gallery-inner {
  margin: 0 auto;
  padding: 0 calc(24px + clamp(32px, 8vw, 160px));
}

.section-gallery-header {
  margin-bottom: 20px;
}

.section-gallery-header h2 {
  font-size: 2rem;
  margin-bottom: 4px;
}

.section-gallery-header p {
  color: #666;
  font-size: 0.95rem;
}

/* ==============================
   FILTROS DE CATEGORIA
================================= */

.gallery-filters {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gallery-filter {
  border: 1px solid #ddd;
  background: #f8f8f8;
  border-radius: 15px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}

.gallery-filter.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* ==============================
   VITRINE DESKTOP (AIRBNB)
================================= */

.airbnb-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 50% / 50% */
  column-gap: 5px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  margin-top: 30px;
  margin-bottom: 50px;              /* garante espaçamento antes da próxima section */
}

/* altura única da vitrine */
.airbnb-gallery-main,
.airbnb-gallery-side {
  height: 420px;
}

.airbnb-gallery-main {
  position: relative;
  background: #eee;
}

.airbnb-gallery-main img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: filter 0.15s ease-out;
  cursor: pointer;
}

/* hover: escurece levemente, igual miniaturas */
.airbnb-gallery-main img:hover {
  filter: brightness(0.82);
}


/* miniaturas (direita) */
.airbnb-gallery-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
}

.airbnb-gallery-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: filter 0.15s ease-out;
}

.airbnb-gallery-side img:hover {
  filter: brightness(0.82);
}

/* botão "Ver todas as fotos" */
.airbnb-gallery-show-all {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 9px 18px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 5;            /* <<< garante que nunca “suma” */
}


.airbnb-gallery-show-all:hover {
  background: rgba(0, 0, 0, 0.9);
}

/* ==============================
   VITRINE MOBILE (1 grande + 2 pequenas)
================================= */

@media (max-width: 768px) {

  .section-gallery-inner{

    margin: 0 auto;
    padding: 0 20px;
}


  .airbnb-gallery {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 5px;
    border-radius: 0;
  }

  .airbnb-gallery-main {
    height: auto;
  }

  .airbnb-gallery-main img {
    width: 100%;
    height: auto;
  }

  /* linha de baixo com 2 fotos menores */
  .airbnb-gallery-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 110px;
    gap: 5px;
    height: auto;
  }

  .airbnb-gallery-side img {
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    cursor: pointer !important;
  }

  /* esconde 3ª e 4ª mini no mobile */
  .airbnb-gallery-side img:nth-child(n+3) {
    display: none !important;
  }
}

/* ==============================
   POPUP / TOUR POR FOTOS (LAYOUT AIRBNB)
================================= */

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

/* fundo branco ocupando toda a tela */
.gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  overflow-y: auto;
}

/* Conteúdo com padding igual ao site, tela inteira */
.gallery-overlay-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 24px calc(24px + clamp(32px, 8vw, 160px));
  display: flex;
  flex-direction: column;
}

/* header */

.gallery-overlay-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.gallery-overlay-back {
  border: none;
  background: #f5f5f5;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9rem;
}

.gallery-overlay-header-text h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.gallery-overlay-header-text p {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: #777;
}

/* miniaturas das categorias (topo) */

.gallery-overlay-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 10px 0 18px;
  border-bottom: 1px solid #eee;
  margin-bottom: 28px;
}

.gallery-overlay-cat {
  width: 120px;
  cursor: pointer;
  text-align: center;
  border-radius: 12px;
}

.gallery-overlay-cat-thumb {
  width: 100%;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.gallery-overlay-cat-label {
  font-size: 0.85rem;
  margin-top: 6px;
  display: block;
  color: #444;
}

.gallery-overlay-cat.is-active .gallery-overlay-cat-label {
  font-weight: 600;
}

/* blocos de galeria por categoria */

.gallery-overlay-scroll {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.gallery-overlay-section {
  padding-bottom: 8px;
}

.gallery-overlay-section-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 14px;
  color: #111;
  border-left: 4px solid #111;
  padding-left: 8px;
}

/* grid de fotos em cada categoria */

.gallery-overlay-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-overlay-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer; /* mãozinha na página de fotos */
}

/* miniaturas das categorias também com mãozinha */
.gallery-overlay-cat-thumb {
  width: 100%;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  cursor: pointer;
}


/* telas maiores: 3 colunas */

@media (min-width: 900px) {
  .gallery-overlay-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* mobile overlay */

@media (max-width: 600px) {
  .gallery-overlay-shell {
    max-width: 100%;
    padding: 20px;
  }

  .gallery-overlay-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .gallery-overlay-cat {
    width: 100px;
  }

  .gallery-overlay-cat-thumb {
    height: 70px;
  }
}

/* lista de imagens base (não aparece na página) */

.gallery-hidden-list {
  display: none;
}

/* ==============================
   LIGHTBOX / CARROSSEL FULL-SCREEN
================================= */

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

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox-inner {
  width: 100%;
  max-width: 1100px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.gallery-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  margin-bottom: 10px;
}

.gallery-lightbox-close {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

.gallery-lightbox-counter {
  font-size: 0.95rem;
  opacity: 0.85;
}

.gallery-lightbox-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.gallery-lightbox-figure {
  margin: 0;
  flex: 1;
  text-align: center;
}

.gallery-lightbox-figure img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 12px;
  cursor: pointer; /* agora dá cara de clique */
}

/* tudo que é botão/clique dentro do lightbox */
.gallery-lightbox-close,
.gallery-lightbox-arrow,
.gallery-lightbox-cta {
  cursor: pointer;
}

.gallery-lightbox-figure figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #eee;
}

.gallery-lightbox-arrow {
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox-arrow:hover {
  background: rgba(255,255,255,0.28);
}

/* mobile */
@media (max-width: 768px) {
  .gallery-lightbox-inner {
    padding: 12px;
  }

  .gallery-lightbox-main {
    position: relative;      /* vira referência pras setas */
    gap: 0;
  }

  .gallery-lightbox-figure {
    flex: 1;
  }

  .gallery-lightbox-figure img {
    max-height: 70vh;
  }

  /* Setas sobre a foto, no topo direito */
  .gallery-lightbox-arrow {
    position: absolute;
    top: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
  }

  .gallery-lightbox-arrow.prev {
    right: 58px;
  }

  .gallery-lightbox-arrow.next {
    right: 16px;
  }
}


/* Footer do lightbox: botão Saiba mais */

.gallery-lightbox-footer {
  margin-top: 16px;
  text-align: center;
}

.gallery-lightbox-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: #ff385c;      /* vibe Airbnb */
  color: #fff;
  font-size: 0.95rem;
  text-decoration: none;
  font-weight: 500;
}

.gallery-lightbox-cta:hover {
  background: #e03152;
}

.airbnb-gallery-main img,
.airbnb-gallery-side img {
  cursor: pointer !important;
}
/* ==============================
   SECTION PROJETISTAS
================================= */

/* ==============================
   SECTION PROJETISTAS
================================= */

.section-designers {
  padding: 72px 0;
  padding-top:40px;
  padding-bottom:40px;
  background: #f7f9fb;
}

.section-designers-inner {
  padding: 0 calc(24px + clamp(32px, 8vw, 160px));
}

.designers-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  column-gap: 64px;
  align-items: stretch;
}

/* COLUNA ESQUERDA */

.designers-copy h2 {
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.2;
  margin-bottom: 16px;
}

.designers-copy h2 span {
  color: #b00815;
}

.designers-lead {
  font-size: 1.05rem;
  margin-bottom: 16px;
}

.designers-text {
  color: #555;
  margin-bottom: 16px;
}

.designers-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  margin-top: 12px;
}

.designers-highlights li::before {
  content: "• ";
  color: #b00815;
}

/* COLUNA DIREITA – CARROSSEL */

.designers-carousel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.designers-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #777;
}

.designers-arrows {
  display: flex;
  gap: 8px;
}

.designers-arrow {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.designers-arrow:hover {
  background: #111;
  color: #fff;
}

/* trilha horizontal */

.designers-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

/* esconder scrollbar */

.designers-track::-webkit-scrollbar {
  display: none;
}
.designers-track {
  scrollbar-width: none;
}

/* CARD PROJETISTA */

.designer-card {
  flex: 0 0 320px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
  padding: 18px 18px 16px; 
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-snap-align: start;
}

.designer-thumb {
  margin: 0 0 10px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f5f5;
}

.designer-thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* contador "1 / 3" no canto da foto */

.designer-thumb-counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.75rem;
}

.designer-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f3f3;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
}

.designer-card h3 {
  font-size: 1.05rem;
  margin: 0;
}

.designer-summary {
  font-size: 0.9rem;
  color: #555;
  flex: 1;
}

.designer-more {
  align-self: flex-start;
  border: none;
  border-radius: 15px;
  background: #111;
  color: #fff;
  font-size: 0.85rem;
  padding: 8px 16px;
  cursor: pointer;
}

.designer-more:hover {
  background: #000;
}

/* RESPONSIVO – MOBILE */

@media (max-width: 960px) {
  .section-designers-inner {
    padding: 0 20px;
  }

  .designers-layout {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .designer-card {
    flex: 0 0 100%;
  }
}

/* ==============================
   MODAL PROJETISTA – FULLSCREEN
================================= */

.designer-modal[hidden] {
  display: none;
}

.designer-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.designer-modal-dialog {
  width: 100%;
  max-width: 1000px;
  padding: 32px 32px 40px;
  box-sizing: border-box;
}

.designer-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.designer-modal-title-group h3 {
  margin: 0;
  font-size: 1.6rem;
}

.designer-modal-title-group span {
  display: block;
  font-size: 0.9rem;
  color: #777;
}

.designer-modal-close {
  border: none;
  background: #f3f3f3;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.9rem;
}

/* layout interno */

.designer-modal-layout {
  display: flex;
  gap: 32px;
  align-items: center;
}

/* coluna da foto */

.designer-modal-media {
  position: relative;
  flex: 0 0 auto;
}

.designer-media-main img,
[data-designer-media-main] {
  max-width: 360px;
  max-height: 420px;
  width: auto;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

/* contador no modal */

.designer-media-counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.8rem;
}

/* coluna do texto */

.designer-modal-content {
  flex: 1 1 auto;
}

.designer-modal-content p {
  color: #555;
  margin-bottom: 16px;
}

/* CTA */

.designer-modal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 10px 22px;
  border-radius: 15px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  cursor: pointer;
}

.designer-modal-cta:hover {
  background: #000;
}

/* SETAS DO CARROSSEL NO MODAL */

.designer-media-arrow {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}

.designer-media-arrow.prev {
  transform: translateX(calc(-50% - 24px));
}

.designer-media-arrow.next {
  transform: translateX(calc(-50% + 24px));
}

.designer-media-arrow:hover {
  background: rgba(0, 0, 0, 0.9);
}

/* modal responsivo */

@media (max-width: 768px) {
  .designer-modal-dialog {
    max-width: 100%;
    padding: 24px 20px 32px;
  }

  .designer-modal-layout {
    flex-direction: column;
    align-items: center;
  }

  .designer-media-main img,
  [data-designer-media-main] {
    max-width: 100%;
    max-height: 60vh;
  }
}

/* ==============================
   SECTION – FICHA TÉCNICA
================================= */

/* =========================================================
   SECTION FICHA TÉCNICA
   HTML: .section-techsheet (parte texto + parte ficha)
   ========================================================= */

/* ==============================
   SECTION FICHA TÉCNICA
================================= */

.section-techsheet {
  padding: 40px 0 40px;
  background: #ffffff;
}

/* mesmo alinhamento lateral das outras sections */
.section-techsheet-inner {
  padding: 0 calc(24px + clamp(32px, 8vw, 160px));
  box-sizing: border-box;
}

/* PARTE 1 – texto */
.section-techsheet-top {
  margin-bottom: 40px;
}

.tech-intro {
  text-align:center;
}

.tech-intro-title {
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.2;
  margin-bottom: 18px;
}

.tech-intro-text {
  margin-bottom: 12px;
  color: #444;
  font-size: 1rem;
}

.tech-intro-cta {
  display: inline-flex;
  margin-top: 18px;
  padding: 12px 32px;
  border-radius: 15px;
  background: #06a569;     /* verde do projeto */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.tech-intro-cta:hover {
  background: #048856;
}

/* PARTE 2 – imagem + ficha */

.section-techsheet-body {
  background: #f7f7f7;
  padding: 0px 0 0px;
}

.techsheet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: 56px;
  align-items: flex-start;
}

/* imagem desktop + mobile */

.techsheet-image {
  margin: 0;
}

.techsheet-image img {
  width: 100%;
  display: block;
  border-radius: 0 0 0 0;
  object-fit: cover;
}

/* por padrão, só desktop aparece */
.techsheet-image--mobile {
  display: none;
}

/* coluna ficha técnica */
.techsheet-specs {
  padding-top: 38px;
}

.techsheet-title {
  font-size: 1.6rem;
  margin: 0 0 16px;
}

.techsheet-list {
  margin: 0 0 24px;
}

.tech-item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr); /* título | descrição */
  column-gap: 0px;
  padding: 4px 0;
  font-size: 0.95rem;
}

.tech-item dt {
  font-weight: 600;
  color: #06a569;
}

.tech-item dd {
  margin: 0;
  color: #444;
}

.tech-item--note dt {
  font-weight: 700;
}

.techsheet-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border-radius: 15px;
  background: #38cc29;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom:40px;

}

.obra-status-icon {

  }

.techsheet-download:hover {
  background: #048856;
}



/* ==============================
   RESPONSIVO
================================= */

@media (max-width: 960px) {
  .section-techsheet-top {
    margin-bottom: 32px;
  }

  .techsheet-layout {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  /* mostra imagem mobile (fachada vertical) e esconde a horizontal */
  .techsheet-image--desktop {
    display: none;
  }

  .techsheet-image--mobile {
    display: block;
  }

  .techsheet-specs {
    padding-top: 0;
  }

  /* dt e dd continuam na mesma linha, só ajusta largura */
  .tech-item {
    grid-template-columns: 120px minmax(0, 1fr);
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  .tech-intro-title {
    font-size: 1.7rem;
  }

  .section-techsheet-inner {
    padding: 0 20px;
  }

  .tech-item {
    grid-template-columns: 110px minmax(0, 1fr);
  }
}

/* Ajustes MOBILE da ficha técnica */
@media (max-width: 640px) {
  /* 1) Imagem da ficha técnica full-width, sem margem */
  .section-techsheet-body .section-techsheet-inner {
    padding: 0; /* tira as laterais só na parte de baixo */
  }

  .techsheet-image--mobile img {
    width: 100%;
    display: block;
  }

  /* Reaplica padding só no bloco de textos da ficha */
  .techsheet-specs {
    padding: 20px 20px 0;
  }

  /* 2) Botão "DOWNLOAD FICHA" centralizado */
  .techsheet-download {
    display: flex;
    margin: 12px auto 0; /* centraliza horizontalmente */
      width:260px;
  margin-bottom:40px;
  }
}

/* =========================================
   SECTION – DÚVIDAS
========================================= */

.section-lead-doubts {
  background: #f5f5f5;
  padding: 72px 0;
}

.section-lead-doubts-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center; /* centraliza o bloco em relação ao título */
}

.lead-doubts-title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin-bottom: 32px;
}

/* BLOCO = FORM + BOTÃO (centralizado, com conteúdo alinhado à esquerda) */
.lead-doubts-block {
  display: inline-flex;          /* permite centralizar com text-align:center */
  flex-direction: column;
  align-items: flex-start;       /* esquerda em comum para form e botão */
  gap: 24px;
  text-align: left;              /* textos alinhados à esquerda */
}

/* FORM */

.lead-doubts-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.lead-doubt-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}

/* checkboxes levemente estilizados */
.lead-doubt-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: #2bb24c; /* verde do projeto nos browsers modernos */
}

/* BOTÃO */

.lead-doubts-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border-radius: 15px;           /* 15px como você pediu */
  border: none;
  cursor: pointer;
  background: #2bb24c;           /* ajuste para o verde do projeto */
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.lead-doubts-cta:hover {
  filter: brightness(1.05);
}

/* =========================================
   MODAL – ATENDIMENTO EMAIL (igual estava)
========================================= */

.lead-modal[hidden] {
  display: none;
}

.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.lead-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 6px;
  padding: 32px 32px 40px;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  z-index: 1;
}

/* header */

.lead-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 24px;
}

.lead-modal-title {
  flex: 1;
  text-align: center;
  font-size: 1.6rem;
}

.lead-modal-close,
.lead-modal-back {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
}

.lead-modal-back {
  padding: 4px 8px;
}

/* steps */

.lead-modal-steps {
  min-height: 160px;
}

.lead-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lead-field-label {
  font-size: 0.95rem;
  font-weight: 500;
}

.lead-input,
.lead-textarea {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #c8d4ff;
  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
}

.lead-input:focus,
.lead-textarea:focus {
  border-color: #2bb24c;
  box-shadow: 0 0 0 1px rgba(76,141,255,0.2);
}

.lead-textarea {
  resize: vertical;
  min-height: 120px;
}

/* telefone */

.lead-phone-row {
  display: flex;
  gap: 8px;
}

.lead-phone-ddi {
  max-width: 120px;
}

/* radios */

.lead-optin-text {
  text-align: center;
  margin-bottom: 8px;
}

.lead-optin-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin: 0 auto 8px;
}

.lead-radio {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* botões do modal */

.lead-btn-primary {
  align-self: center;
  padding: 12px 32px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: #2bb24c;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}

/* progress bar */

.lead-modal-progress {
  margin-top: 28px;
  height: 6px;
  border-radius: 15px;
  background: #e0e6ff;
  overflow: hidden;
}

.lead-modal-progress-bar {
  height: 100%;
  width: 0%;
  background: #2bb24c;
  border-radius: inherit;
  transition: width 0.25s ease;
}

/* mobile */

/* ============================
   AJUSTES MOBILE – DÚVIDAS + MODAL
============================ */
@media (max-width: 768px) {
  /* 1) Centralizar o botão SABER MAIS! no mobile */
  .lead-doubts-block {
    align-items: center;        /* garante que tudo dentro fique centralizado */
  }

  .lead-doubts-cta {
    align-self: center;         /* força o botão a ficar no centro */
  }

  .lead-doubts-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  padding-left:65px;
  padding-right:65px;
  border-radius: 15px;           /* 15px como você pediu */
  border: none;
  cursor: pointer;
  background: #2bb24c;           /* ajuste para o verde do projeto */
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  
}


  /* 2) Modal ocupando a tela inteira no mobile */
  .lead-modal {
    align-items: stretch;
    justify-content: stretch;
  }

  .lead-modal-dialog {
    width: 100%;
    max-width: 100%;
    height: 100vh;              /* ocupa a altura toda da tela */
    margin: 0;
    border-radius: 0;
    padding: 24px 16px 24px;    /* um respiro nas laterais */
    box-shadow: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .lead-modal-steps {
    flex: 1;                    /* conteúdo cresce e empurra a barra de progresso pro fim */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/* CTA "Ver torre" dentro das plantas */
.plants-tower-cta {
  margin-top: 24px;
  text-align: right;
}

.plants-tower-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 15px;
  border: none;
  background: #00a651; /* ajuste para o verde padrão do projeto, se tiver outro */
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.plants-tower-btn:hover {
  background: #019146;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.plants-tower-btn.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

/* mobile: botão centralizado */
@media (max-width: 960px) {
  .plants-tower-cta {
    text-align: center;
    margin-top: 20px;
  }
}
.plants-tower-icon {
  margin-right: 8px;
  font-size: 0.95em;
}



.tower-modal[hidden] {
  display: none;
}

.tower-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  /* full-screen, sem centralizar card */
  align-items: stretch;
  justify-content: stretch;
}

/* BACKDROP */

.tower-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

/* DIALOG – FULLSCREEN */

.tower-modal-dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  /* full-screen de verdade */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 rgba(0,0,0,0); /* sem sombra na tela toda */
  overflow: hidden;
}

/* HEADER */

.tower-modal-header {
  padding: 20px 32px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tower-modal-title {
  font-size: 1.8rem;
  font-weight: 700;
}

.tower-modal-close {
  border: none;
  background: transparent;
  font-size: 1.6rem;
  cursor: pointer;
}

/* BODY – GRID  (ESQ: torres  / DIR: ficha da torre) */

.tower-modal-body {
  flex: 1;
  display: grid;
  grid-template-columns: 320px minmax(0, 1.6fr);
  min-height: 0;          /* importante pro overflow funcionar */
}

/* SIDEBAR ESQUERDA */

.tower-modal-sidebar {
  border-right: 1px solid #eee;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fafafa;
  min-height: 0;
}

.tower-sidebar-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Lista de torres com scroll independente */

.tower-slides {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  margin-top: 4px;

  /* faz a lista crescer e scrollar dentro da sidebar */
  flex: 1;
  overflow-y: auto;
}

/* Card da torre */

.tower-slide {
  display: flex;
  width: 100%;
  text-align: left;
  border-radius: 4px;
  border: 1px solid #e1e1e1;
  padding: 8px;
  gap: 10px;
  cursor: pointer;
  background: #fff;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.12s ease;
}

.tower-slide:hover {
  border-color: #2d8c3c;
  box-shadow: 0 0 0 1px rgba(45,140,60,0.12);
  transform: translateY(-1px);
}

.tower-slide.is-active {
  border-color: #2d8c3c;
  box-shadow: 0 0 0 1px rgba(45,140,60,0.25);
  background: #f7fbf8;
}

.tower-slide-thumb {
  flex: 0 0 64px;
  height: 64px;
  border-radius: 2px;
  overflow: hidden;
  background: #ddd;
}

.tower-slide-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tower-slide-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.tower-slide-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.tower-slide-meta {
  font-size: 0.8rem;
  color: #666;
}

.tower-slide-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f5ec;
  color: #2d8c3c;
  font-size: 0.75rem;
  font-weight: 600;
}

.tower-slide-tag--soon {
  background: #fff4e0;
  color: #b77700;
}

/* COLUNA DIREITA – DETALHES */

.tower-modal-details {
  padding: 32px 40px 40px;
  overflow-y: auto;
  min-height: 0;
}

.tower-detail {
  display: none;
}

.tower-detail.is-active {
  display: block;
}

.tower-detail-title {
  font-size: 1.7rem;
  margin-bottom: 20px;
}

.tower-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
}

.tower-detail-item dt {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tower-detail-item dd {
  font-size: 1.05rem;
}

/* MOBILE */

@media (max-width: 768px) {
  .tower-modal-dialog {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .tower-modal-header {
    padding: 16px 16px;
  }

  .tower-modal-title {
    font-size: 1.4rem;
  }

  .tower-modal-body {
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr;
  }

  .tower-modal-sidebar {
    border-right: none;
    border-bottom: 1px solid #eee;
    padding: 12px 12px 10px;
    background: #fafafa;
  }

  /* Lista de torres vira carrossel horizontal no mobile */
  .tower-slides {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding-bottom: 4px;
  }

  .tower-slide {
    flex: 0 0 220px;
  }

  .tower-modal-details {
    padding: 18px 16px 24px;
  }

  .tower-detail-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 768px) {
  /* já existe no seu CSS, garante que o container aceite pseudo-elemento */
  .tower-slides {
    position: relative;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
  }

  .tower-slides::-webkit-scrollbar {
    display: none;            /* Chrome/Safari */
  }

  /* Fadinha na direita pra sugerir que é rolável */
  .tower-slides::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
  }
}
.tower-detail-item dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tower-detail-icon {
  font-size: 0.95rem;
  color: #2d8c3c; /* mesmo verde do projeto */
}

/* =========================
   STATUS DA OBRA + GALERIA
   ========================= */

.project-obra-status {
  background: #ffffff;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}

.project-obra-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); /* ≈ 40% / 60% */
  gap: 40px;
  align-items: flex-start;

  padding: 40px calc(24px + clamp(32px, 8vw, 160px));
  max-width: 1920px;
  margin: 0 auto;
}

/* Coluna esquerda – status */

.obra-status-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.obra-status-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.obra-status-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  color: #111827;
}

.obra-status-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.obra-status-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Círculo de progresso geral */

.obra-progress-circle {
  --obra-progress: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background:
    conic-gradient(
      #22c55e calc(var(--obra-progress) * 1%),
      #e5e7eb 0
    );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.obra-progress-circle-inner {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.obra-progress-circle-value {
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}

.obra-progress-circle-label {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 4px;
}

/* Lista de barras */

.obra-status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.obra-status-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.obra-status-item-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.obra-status-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ecfdf3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  font-size: 0.9rem;
}

.obra-status-label {
  color: #111827;
}

.obra-status-percent {
  font-weight: 600;
  color: #16a34a;
  font-size: 0.9rem;
}

.obra-status-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.obra-status-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to right, #22c55e, #16a34a);
  width: 0;
  transition: width 0.3s ease-out;
}

/* Coluna direita – galeria */

.obra-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.obra-gallery-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.obra-gallery-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  color: #111827;
}

.obra-gallery-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.obra-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.obra-thumb {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1;
}

.obra-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.obra-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.25));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.obra-thumb:hover img {
  transform: scale(1.04);
  filter: brightness(1.03);
}

.obra-thumb:hover::after {
  opacity: 1;
}

/* Lightbox da obra */

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

.obra-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.obra-lightbox-inner {
  position: relative;
  max-width: min(1200px, 100vw - 48px);
  max-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.obra-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
}

.obra-lightbox-figure img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.obra-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  border: none;
  background: transparent;
  color: #f9fafb;
  font-size: 2rem;
  cursor: pointer;
}

/* RESPONSIVO */

@media (max-width: 1024px) {
  .project-obra-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* barras primeiro, galeria depois */
  .obra-status-col {
    order: 1;
  }

  .obra-gallery-col {
    order: 2;
  }

  .obra-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .project-obra-inner {
    padding: 32px clamp(16px, 6vw, 24px);
  }

  .obra-progress-circle {
    margin: 0 auto 12px;
  }

  .obra-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .obra-lightbox-close {
    top: 12px;
    right: 12px;
  }

  .obra-lightbox-inner {
    max-width: 100vw;
    max-height: 100vh;
    padding: 0 12px;
  }
}

/* =========================
   CARROSSEL – OFERTAS / REVENDAS
   ========================= */

.project-deals {
  background: #ffffff;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}

.project-deals-inner {
  padding: 40px calc(24px + clamp(32px, 8vw, 160px));
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ROW (ofertas / revendas) */

.deals-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.deals-row-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.deals-row-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #111827;
}

.deals-row-subtitle {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.deals-row-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deals-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.deals-nav-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.deals-nav-icon {
  font-size: 0.9rem;
  line-height: 1;
}

/* Track – carrossel horizontal */

.deals-track-wrapper {
  position: relative;
}

.deals-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.search-card-btn-especialista {
  height: 52px;
  padding: 0 28px;
  border-radius: 10px;
  border: none;
  background: #22c55e;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  width: 50%;
  text-align: center;
}

/* esconder barra de scroll mas manter usabilidade */
.deals-track::-webkit-scrollbar {
  height: 0;
}
.deals-track {
  scrollbar-width: none;
}
.deals-track::-webkit-scrollbar {
  display: none;
}

/* Cards */

.deal-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: clamp(230px, 26vw, 280px);
}

.deal-card-inner {
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: 12px;
  padding: 0;
  background: #ffffff;
  cursor: pointer;
  border:1px solid #d2d2d2;
  overflow: hidden;

  text-decoration: none;
  color: inherit;
}



.deal-media {
  position: relative;
  border-radius: 0px;
  overflow: hidden;
  aspect-ratio: 4 / 3; /* estilo Airbnb */
}

.deal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.deal-card-inner:hover .deal-media img {
  transform: scale(1.04);
  filter: brightness(1.03);
}

.deal-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
  color: #111827;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

.deal-badge--resale {
  background: rgba(59, 130, 246, 0.96);
  color: #f9fafb;
}

.deal-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.15s ease, transform 0.15s ease;
}

.deal-fav:hover {
  background: rgba(220, 38, 38, 0.95);
  transform: scale(1.05);
}

.deal-body {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deal-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: #111827;
}

.deal-location {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}

.deal-price {
  margin: 4px 0 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #16a34a;
}

.deal-meta {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
}

/* Diferencia visual revendas levemente */
.deals-row--resales .deal-price {
  color: #1d4ed8;
}

/* MOBILE */

@media (max-width: 900px) {
  .project-deals-inner {
    padding: 32px clamp(16px, 6vw, 24px);
    gap: 32px;
  }

  .deals-row-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .deals-row-controls {
    align-self: flex-end;
  }

  .deal-card {
    width: 70vw; /* 1 card por vez quase cheio, estilo app */
  }
}

@media (max-width: 600px) {
  .deal-card {
    width: 78vw;
  }
}

/* =========================
   POPUP – FICHA DA UNIDADE
   ========================= */

.deal-modal[hidden] {
  display: none;
}

/* MODAL EM TELA CHEIA BRANCA (PARECE UMA PÁGINA) */
.deal-modal {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: #ffffff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}

.deal-modal-backdrop {
  display: none; /* não usamos overlay escuro aqui */
}

/* CONTEÚDO CENTRAL (PARECE UMA PÁGINA) */
.deal-modal-dialog {
  position: relative;
  background: #ffffff;
  border-radius: 0;
  margin: 0;
  padding: 24px calc(24px + clamp(32px, 8vw, 160px)) 32px;
  max-width: 1920px;
  width: 100%;
  min-height: 100vh;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* HEADER */

.deal-modal-header {
  padding-right: 40px;
  margin-bottom: 16px;
}

.deal-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.04);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  transition: background 0.15s ease, transform 0.15s ease;
}

.deal-modal-close:hover {
  background: rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.deal-modal-header-breadcrumb {
  font-size: 0.78rem;
  color: #6b7280;
  margin-bottom: 2px;
}

.deal-modal-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #111827;
}

.deal-modal-ref {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #6b7280;
}

/* ================= LAYOUT PRINCIPAL (GALERIA + FORM) ================= */

.deal-modal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

/* GALERIA */

.deal-modal-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deal-modal-gallery-main {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 3;
}

.deal-modal-gallery-main-btn {
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #000;
  position: relative;
}

.deal-modal-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.deal-modal-gallery-main-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.75);
  color: #f9fafb;
  font-size: 0.8rem;
  border-radius: 999px;
}

.deal-modal-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background 0.15s ease, transform 0.15s ease;
}

.deal-modal-gallery-arrow--prev {
  left: 12px;
}
.deal-modal-gallery-arrow--next {
  right: 12px;
}

.deal-modal-gallery-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.05);
}

/* Thumbs */

.deal-modal-thumbs {
  display: none;
}

.deal-modal-thumb {
  border-radius: 10px;
  border: 2px solid transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  height: 72px;
}

.deal-modal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.deal-modal-thumb.is-active {
  border-color: #16a34a;
}

/* ================= ASIDE – APENAS FORM ================= */

.deal-modal-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.deal-modal-contact-card {
  border-radius: 16px;
  padding: 14px 16px 16px;
  border: 1px solid #e5e7eb;
  margin-top:40px;
}

.deal-modal-contact-card h2 {
  margin: 0 0 8px;
  font-size: 0.98rem;
}

/* TABS "MENSAGEM / AGENDAR VISITA" */

.deal-modal-contact-tabs {
  display: flex;
  gap: 0;
  margin: 4px 0 10px;
  border-radius: 10px;
  padding: 2px;
  background: #f3f4f6;
}

.deal-modal-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.deal-modal-tab.is-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 0 0 1px #111827, 0 1px 3px rgba(15, 23, 42, 0.12);
}

.deal-modal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deal-modal-form.is-hidden {
  display: none;
}

.deal-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: #4b5563;
}

.deal-modal-field input,
.deal-modal-field textarea {
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 6px 8px;
  font-size: 0.85rem;
  outline: none;
}

.deal-modal-field input:focus,
.deal-modal-field textarea:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.3);
}

.deal-modal-submit {
  margin-top: 4px;
  border-radius: 10px;
  border: none;
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: 600;
  background: #16a34a;
  color: #ffffff;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.deal-modal-submit-icon {
  color: #ffffff;    /* garante contraste dentro do botão verde */
  font-size: 0.9rem;
}


/* ================= RESUMO PREÇO + MAPA ================= */

.deal-modal-summary {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.deal-modal-summary-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deal-modal-price-label {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.deal-modal-price {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #16a34a;
}

.deal-modal-cond {
  margin: 2px 0 10px;
  font-size: 0.86rem;
  color: #6b7280;
}

.deal-modal-cta {
  width: auto;
  min-width: 180px;
  max-width: 100%;
  border-radius: 999px;
  border: none;
  padding: 8px 18px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.deal-modal-cta-icon {
  color: #ffffff;    /* ícone branco dentro do botão vermelho */
  font-size: 0.95rem;
}


.deal-modal-cta:hover {
  background: #dc2626;
  box-shadow: 0 10px 20px rgba(220, 38, 38, 0.25);
  transform: translateY(-1px);
}

.deal-modal-summary-map {
  display: flex;
  align-items: center;
 
}

.deal-modal-map-card {
  border-radius: 18px;


  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.deal-modal-map-icon {
  font-size: 1.1rem;
}

.deal-modal-map-text p {
  margin: 0;
  font-size: 0.86rem;
  color: #111827;
}

.deal-modal-map-arrow {
  font-size: 1.2rem;
  color: #9ca3af;
}

/* ================= LINHA DE ESPECIFICAÇÕES ================= */

.deal-modal-specs {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.deal-modal-spec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.deal-modal-spec-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.deal-modal-spec-label {
  margin: 0;
  color: #6b7280;
}

.deal-modal-spec-value {
  margin: 0;
  font-weight: 600;
  color: #111827;
}

/* ================= DETALHES (DESCRIÇÃO + LAZER) ================= */

.deal-modal-details {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* só uma coluna, largura total */
}


.deal-modal-details-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.deal-modal-details-right {
  display: none;/* coluna vazia só para alinhar com o form – deixa em branco */
}

.deal-modal-details-block h2 {
  margin: 0 0 6px;
  font-size: 0.98rem;
}

.deal-modal-details-block p {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: #4b5563;
}

.deal-modal-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.85rem;
  color: #4b5563;
}

/* lista em múltiplas colunas (desktop) */
.deal-modal-list--columns {
  column-count: 3;
  column-gap: 32px;
}

.deal-modal-toggle-desc {
  margin-top: 6px;
  border: none;
  padding: 0;
  background: transparent;
  color: #2563eb;
  font-size: 0.82rem;
  cursor: pointer;
}

.deal-modal-desc-extra {
  margin-top: 6px;
}

/* ================= LIGHTBOX FOTOS – FULLSCREEN ================= */

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

.deal-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9700;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.deal-gallery-lightbox-inner {
  position: relative;
  max-width: min(1200px, 100vw - 32px);
  max-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.deal-gallery-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
}

.deal-gallery-lightbox-figure img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

.deal-gallery-lightbox-close {
  position: fixed;              /* fica preso no viewport */
  top: 18px;
  right: 28px;
  border: none;
  background: rgba(15, 23, 42, 0.65);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #f9fafb;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}


.deal-gallery-lightbox-arrow {
  position: fixed;              /* fixa no viewport, não na imagem */
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.7);
  color: #f9fafb;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deal-gallery-lightbox-arrow--prev {
  left: 24px;
}

.deal-gallery-lightbox-arrow--next {
  right: 24px;
}

/* ================= RESPONSIVO ================= */

@media (max-width: 1024px) {
  .deal-modal-dialog {
    padding: 18px 20px 24px;
  }

  .deal-modal-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .deal-modal-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .deal-modal-summary-map {
    justify-content: flex-start;
  }

  .deal-modal-specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .deal-modal-details {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .deal-modal {
    align-items: stretch;
    justify-content: stretch;
  }

  .deal-modal-dialog {
    padding: 14px 12px 20px;
    /* já é flex-direction: column globalmente, então aqui não precisa mexer */
  }

  /* Em vez de grid, "explode" o layout para os filhos ficarem no fluxo principal */
  .deal-modal-layout {
    display: contents; /* faz galeria e aside virarem irmãos diretos dentro do dialog */
  }

  /* ORDEM DOS BLOCOS NO MOBILE */
  .deal-modal-gallery {
    order: 1;
  }

  .deal-modal-summary {
    order: 2;
  }

  .deal-modal-specs {
    order: 3;
  }

  .deal-modal-details {
    order: 4;
  }

  .deal-modal-aside {
    order: 5; /* form vai pro final */
  }

  /* resto das regras que você já tinha pode ficar igual */
  .deal-modal-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deal-modal-list--columns {
    column-count: 1;
  }

  .deal-gallery-lightbox-inner {
    max-width: 100vw;
    max-height: 100vh;
  }

  .deal-gallery-lightbox-arrow--prev {
    left: 12px;
  }
  .deal-gallery-lightbox-arrow--next {
    right: 12px;
  }
}


.deal-modal-tab-icon,
.deal-modal-map-icon i,
.deal-modal-spec-icon i {
  color: #16a34a;
}

.deal-modal-list--columns {
  list-style: none;
  padding-left: 0;
}

.deal-modal-list--columns li {
  position: relative;
  padding-left: 18px;
  break-inside: avoid;
}

.deal-modal-list--columns li::before {
  content: "\f00c"; /* ícone fa-check */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-size: 0.7rem;
  color: #16a34a;
}

.deal-modal-details {
  grid-template-columns: minmax(0, 1fr);
}

/* LABEL + TEXTO DO CAMPO */
.deal-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: #4b5563;
}

/* WRAPPER DO INPUT COM ÍCONE */
.deal-modal-input {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 6px 8px 6px 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.deal-modal-input--textarea {
  align-items: flex-start;
}

/* ÍCONE DENTRO DO CAMPO */
.deal-modal-input-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 0.9rem;
}

.deal-modal-input-icon--top {
  padding-top: 3px;
}

/* INPUTS E TEXTAREA SEM BORDA PRÓPRIA */
.deal-modal-input input,
.deal-modal-input textarea {
  border: none;
  background: transparent;
  padding: 4px 4px;
  font-size: 0.85rem;
  width: 100%;
  outline: none;
  color: #111827;
}

/* PLACEHOLDER MAIS SUAVE */
.deal-modal-input input::placeholder,
.deal-modal-input textarea::placeholder {
  color: #9ca3af;
}

/* FOCO BONITO (BORDA VERDE) */
.deal-modal-input:focus-within {
  border-color: #16a34a;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.25);
  background: #ffffff;
}

.deal-modal-input:focus-within .deal-modal-input-icon {
  color: #16a34a;
}

/* HEADER */

.deal-modal-header {
  position: relative;
  padding-right: 40px;
  margin-bottom: 16px;

  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* bloco de textos (breadcrumb + título + ref) */
.deal-modal-header-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Botão voltar (esquerda) */
.deal-modal-back {
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  cursor: pointer;
  color: #111827;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.deal-modal-back i {
  font-size: 1rem;
}

/* hover bonitinho */
.deal-modal-back:hover {
  background: rgba(15, 23, 42, 0.05);
  transform: translateX(-1px);
  color: #16a34a;
}

/* já existia, só garantindo que continue ok */
.deal-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.04);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  transition: background 0.15s ease, transform 0.15s ease;
}

.deal-modal-close:hover {
  background: rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .deal-modal-header {
    padding-right: 12px; /* não precisa mais reservar espaço pro X */
    gap: 8px;
  }

  /* some com o X no mobile */
  .deal-modal-close {
    display: none;
  }

  .deal-modal-back {
    width: 30px;
    height: 30px;
    margin-top: 2px;
  }

  .deal-modal-title {
    font-size: 1.1rem;
  }
}
/* Capa do vídeo principal + botão play */

.project-video-hero {
  position: relative;
}

.project-video-hero-cover {
  position: absolute;
  inset: 0;          /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Botão de play centralizado na capa */
/* Botão de play centralizado na capa */
.project-video-hero-play {
  position: absolute;
  inset: 0;
  border: none;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.55)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Bolinha branca */
.project-video-hero-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;                 /* um pouco maior */
  aspect-ratio: 1 / 1;         /* garante círculo perfeito */
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #16a34a;   /* cor do projeto */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background 0.2s ease, border-color 0.2s ease;
}

/* Triângulo (play) em CSS */
.project-video-hero-play-icon::before {
  content: "";
  position: absolute;
  /* tamanho do triângulo */
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid #16a34a;   /* cor do projeto */

  /* posição – levemente mais para a direita e um pouco mais baixo */
  top: 52%;     /* desce um pouco */
  left: 50%;
  transform: translate(-38%, -50%);  /* empurra um pouco para a direita */
  transition: border-left-color 0.2s ease, transform 0.2s ease;
}

/* Hover (desktop) */
.project-video-hero:hover .project-video-hero-play-icon {
  transform: scale(1.05);
  background: #16a34a;
  border-color: #16a34a;
  box-shadow: 0 18px 40px rgba(22, 163, 74, 0.45);
}

/* No hover o triângulo fica branco */
.project-video-hero:hover .project-video-hero-play-icon::before {
  border-left-color: #ffffff;
  /* pequeno ajuste fino no hover, se quiser */
  transform: translate(-36%, -50%);
}

/* Badge de status da obra (Futuro lançamento, Lançamento, etc.) */
.project-status-badge {
  position: absolute;
  top: 12px;
  left: 12px;

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

  padding: 4px 10px;
  border-radius: 10px;

  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  background: #f97316; /* cor default */
  color: #ffffff;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

/* Variações por fase (batendo com o phaseClass que montamos no backend) */
.project-status-badge--scp {
  background: #6b7280; /* cinza */
}

.project-status-badge--futuro_lancamento {
  background: #0ea5e9; /* azul claro */
}

.project-status-badge--breve_lancamento {
  background: #6366f1; /* roxo/azul */
}

.project-status-badge--lancamento {
  background: #22c55e; /* verde lançamento */
}

.project-status-badge--obra_iniciada {
  background: #eab308; /* amarelo */
}

.project-status-badge--obra_acelerada {
  background: #f97316; /* laranja */
}

.project-status-badge--obra_fase_final {
  background: #f59e0b; /* amarelo mais forte */
}

.project-status-badge--pronto_para_morar {
  background: #111827; /* quase preto */
}

.search-autocomplete-wrapper {
  width: 100%;
}

.search-autocomplete-list {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}

.search-autocomplete-item {
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
}

.search-autocomplete-item:hover {
  background: #f3f4f6;
}

.search-autocomplete-item-icon {
  margin-right: 8px;
  font-size: 14px;
  opacity: 0.7;
}

.search-autocomplete-item-label {
  font-size: 14px;
  font-weight: 600;
}

.search-autocomplete-item-sub {
  font-size: 12px;
  color: #6b7280;
}

.search-autocomplete-list {
  width: 100%;
  box-sizing: border-box;
}
/* ===========================
   CARD DE BUSCA NA HOME
   =========================== */

.search-card {
  display: flex;
  justify-content: center;
  margin-top: 0px;        /* ajusta se estiver muito colado no hero */
  margin-bottom: 40px;
}

.search-card-form {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
  padding: 24px;
  margin-top:30px;
  max-width: 900px;
  width: 100%;
}

.search-card-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 🔹 Campo de texto grande ocupando todo o espaço */
.search-card-row .search-input {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  font-size: 16px;
}

/* 🔹 Botão "Buscar" no mesmo tamanho do input */
.search-card-btn {
  height: 52px;
  padding: 0 28px;
  border-radius: 10px;
  border: none;
  background: #22c55e;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;

}

.search-card-btn-benefits {
  height: 52px;
  padding: 0 28px;
  border-radius: 10px;
  border: none;
  background: #22c55e;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;

}

.search-card-btn-benefits:hover {
  background: #16a34a;
}

.search-autocomplete-group-header {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.search-autocomplete-group-header:first-child {
  border-top: none;
}

.search-autocomplete-group-icon {
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-autocomplete-item {
  width: 100%;
  text-align: left;
  border: none;
  background: #ffffff;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
}

.search-autocomplete-item:hover {
  background: #f3f4f6;
}

.search-autocomplete-item-label {
  font-size: 14px;
  font-weight: 500;
}

.search-autocomplete-item-sub {
  font-size: 12px;
  color: #6b7280;
}

.meta-icon {
    color: #38cc29;
    font-size: 1rem;
}

 
    .vitrine-card-link {
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .vitrine-card-link:hover,
    .vitrine-card-link:focus {
      text-decoration: none;
    }


.filter-price-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.filter-price-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.filter-price-label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.filter-price-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d3d3d3;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  background: #fff;
}

.filter-price-input::placeholder {
  color: #bfbfbf;
}

.filter-price-dash {
  align-self: center;
  margin-bottom: 6px;
  font-size: 16px;
  color: #999;
}
/* ============================
   Filtro de Área (m²)
   ============================ */

/* ============================
   Filtro de Área (m²)
   ============================ */

.filter-area-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* campo - traço - campo */
  column-gap: 8px;
  align-items: flex-end;
  margin-top: 4px;
  width: 100%;
  box-sizing: border-box;
}

.filter-area-field {
  min-width: 0; /* deixa o grid encolher sem estourar */
  display: flex;
  flex-direction: column;
}

.filter-area-label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.filter-area-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #d3d3d3;
  border-radius: 6px;
  padding: 0 8px;
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.filter-area-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 2px 8px 0;
  font-size: 14px;
  color: #333;
  background: transparent;
  min-width: 0; /* evita estourar o grid */
}

.filter-area-input::placeholder {
  color: #bfbfbf;
}

.filter-area-unit {
  font-size: 13px;
  color: #999;
  margin-left: 4px;
  white-space: nowrap;
}

.filter-area-dash {
  align-self: center;
  margin-bottom: 6px;
  font-size: 16px;
  color: #999;
}

/* ============================
   Filtro – Características do imóvel
   ============================ */

.filter-feature-group {
  margin-bottom: 16px;
}

.filter-feature-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.filter-feature-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-feature-pill {
  min-width: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  font-size: 13px;
  color: #555;
  text-align: center;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-feature-pill:hover {
  border-color: #009e63;
  box-shadow: 0 0 0 1px rgba(0, 158, 99, 0.18);
}

/* Estado "selecionado" (vamos ligar via JS depois) */
.filter-feature-pill.is-selected {
  border-color: #009e63;
  background: #e6f7f1;
  color: #006b42;
  box-shadow: 0 0 0 1px rgba(0, 158, 99, 0.25);
}
/* ============================
   Filtros – checkboxes simples
   ============================ */

/* ============================
   Filtros – checkboxes simples
   ============================ */

/* container com scroll vertical discreto */
.filter-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  max-height: 190px;       /* limita altura */
  overflow-y: auto;        /* scroll vertical discreto */
  padding-right: 4px;
}

/* cada item 100% de largura, uma linha só */
.filters-panel .filter-checkbox-option,
.filters-panel .filter-type-option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 4px 0;
  margin: 0;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  background: transparent;
}

/* labels em geral dentro do painel de filtros */
.filters-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* ============================
   Checkbox customizado (apenas listas de opções)
   ============================ */

.filters-panel .filter-checkbox-option input[type="checkbox"],
.filters-panel .filter-type-option input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #cfd3d8;
  background-color: #ffffff;
  background-image: none;  /* mata qualquer estilo global */
  box-shadow: none;
  position: relative;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* hover do quadradinho (verde do projeto) */
.filters-panel .filter-checkbox-option input[type="checkbox"]:hover,
.filters-panel .filter-type-option input[type="checkbox"]:hover {
  border-color: #009e63;
}

/* estado marcado: fundo verde + borda verde */
.filters-panel .filter-checkbox-option input[type="checkbox"]:checked,
.filters-panel .filter-type-option input[type="checkbox"]:checked {
  background-color: #009e63;
  border-color: #009e63;
}

/* remove qualquer pseudo anterior que possa ter ficado */
.filters-panel .filter-checkbox-option input[type="checkbox"]::after,
.filters-panel .filter-type-option input[type="checkbox"]::after {
  content: none;
}

/* ✅ V fininho centralizado (usa ::before) */
.filters-panel .filter-checkbox-option input[type="checkbox"]:checked::before,
.filters-panel .filter-type-option input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  left: 7px;   /* ajusta horizontal */
  top: 4px;    /* ajusta vertical */
  width: 3px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;  /* desenha o V */
  transform: rotate(45deg);
}

/* acessibilidade */
.filters-panel .filter-checkbox-option input[type="checkbox"]:focus-visible,
.filters-panel .filter-type-option input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(0, 158, 99, 0.35);
  outline-offset: 2px;
}

/* ============================
   NÃO mexer no toggle "selecionar tudo"
   ============================ */

.toggle-switch input[type="checkbox"] {
  appearance: auto;
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  position: static;
  margin: 0;
}

.filter-feature-pill.is-active {
  background-color: var(--color-primary-green, #16a34a); /* usa o verde do projeto se existir */
  color: #ffffff;
  border-color: var(--color-primary-green, #16a34a);
}

/* trava scroll quando abre */
.obra-lightbox-open {
  overflow: hidden;
}

/* backdrop */
.obra-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 9999;
}

/* caixa do lightbox */
.obra-lightbox-inner {
  position: relative;
  width: min(980px, 92vw);
  max-height: 90vh;
}

/* imagem */
.obra-lightbox-figure {
  margin: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.obra-lightbox-figure img {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* legenda (descrição) */
.obra-lightbox-caption {
  max-width: 92%;
  text-align: center;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.35;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}

/* botão fechar (X) premium */
.obra-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.obra-lightbox-close:hover {
  transform: scale(1.06);
  background: rgba(0,0,0,.62);
  border-color: rgba(255,255,255,.28);
}

.obra-lightbox-close:active {
  transform: scale(.98);
}
/* ====== FIX DESKTOP: garante 1 grande + side à direita ====== */
@media (min-width: 769px) {
  .airbnb-gallery {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    column-gap: 5px !important;
  }

  .airbnb-gallery-main {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    height: 420px !important;
  }

  .airbnb-gallery-side {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    height: 420px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 5px !important;
  }
}

/* ==============================
   PLANTAS — TABS TORRES
================================= */

.plants-tabs {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 18px 0 16px;
  overflow-x: auto;
  padding-bottom: 0px;
  -webkit-overflow-scrolling: touch;
}

.plants-tabs::-webkit-scrollbar { height: 6px; }
.plants-tabs::-webkit-scrollbar-thumb {  }

.plants-tab {
  appearance: none;
  
  background: #fff;
  color: #111;
  padding: 10px 14px;
 
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

.plants-tab:hover { transform: translateY(-1px); }
.plants-tab.is-active {

}

/* ==============================
   PLANTAS — ANIMAÇÃO DOS PANELS
================================= */

.plants-panels { position: relative; }

.plants-panel {
  display: none;
  opacity: 0;
  transform: translateY(10px);
}

.plants-panel.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* transição suave ao trocar */
.plants-panel.is-animating {
  transition: opacity .22s ease, transform .22s ease;
}

/* estado de saída (panel atual) */
.plants-panel.is-leaving {
  opacity: 0;
  transform: translateY(10px);
}

/* estado de entrada (novo panel) */
.plants-panel.is-entering {
  opacity: 0;
  transform: translateY(10px);
}

.tower-detail-layout{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

.tower-detail-plan{
  flex: 0 0 40%;
  margin:0;
}

.tower-detail-plan-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:2px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  object-fit:contain;
}

.tower-detail-plan-empty{
  width:100%;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#fff;
  border:1px dashed rgba(0,0,0,.18);
  color: rgba(0,0,0,.55);
  padding:16px;
  text-align:center;
}

.tower-detail-info{
  flex: 1 1 60%;
  min-width:0;
}

@media (max-width: 900px){
  .tower-detail-layout{ flex-direction:column; }
  .tower-detail-plan{ width:100%; }
}
/* grid interno do detalhe: 40% imagem / 60% conteúdo */
.tower-detail-grid{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 28px;
  align-items: start;
}

/* imagem */
.tower-detail-media{
  margin: 0;
  width: 100%;
}
.tower-detail-media-img{
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  background: #fff;
}

/* conteúdo */
.tower-detail-content{
  min-width: 0;
}

/* mobile: imagem em cima, conteúdo embaixo */
@media (max-width: 900px){
  .tower-detail-grid{
    grid-template-columns: 1fr;
  }
  .tower-detail-media-img{
    max-height: 360px;
  }
}

/* ===== Torre: manter 2 por linha no mobile ===== */
@media (max-width: 768px) {
  .tower-details,
  .tower-detail-list,
  .tower-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .tower-detail-item {
    width: calc(50% - 6px); /* 2 por linha */
    margin: 0;
  }

  /* evita "estourar" texto */
  .tower-detail-item dd {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* se ficar apertado em telas muito pequenas */
@media (max-width: 360px) {
  .tower-detail-item { width: 100%; }
}

.video-card-channel-badge{
  width: 28px;
  height: 28px;
  border-radius: 999px; /* combina com seu style */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: #111;
  color: #fff;
  margin-right: 10px;
  flex: 0 0 auto;
}
.video-card-channel-badge{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  background: #111;
  color: #fff;
  flex: 0 0 28px;
}
.video-card-channel{
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-card-channel-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px; /* quadrado elegante, não círculo infantil */
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.video-card-channel-name{
  font-size: 12px;
  font-weight: 600;
  color: #444;
}
.video-card-channel--short{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.video-card-channel-avatar--short{
  width:26px;
  height:26px;
  border-radius:999px;
  object-fit:contain;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.video-card-body--short{
  display: flex;
  flex-direction: column;
}

/* Avatar + nome */
.video-card-channel--short{
  order: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Título */
.video-card-title--short{
  order: 2;
  font-weight: 400;
}

/* Caption */
.video-card-meta--short{
  order: 3;
  font-size: 12px;
  opacity: 0.75;
}

.video-card--horizontal .video-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: transparent;
}

.video-card--horizontal .video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ✅ Alinhar topo da foto com topo do texto */
.designer-modal-layout {
  align-items: flex-start;  /* se for flex */
  /* ou, se for grid, pode usar: align-items: start; */
}

/* ✅ Garantir que cada coluna respeite o topo */
.designer-modal-media,
.designer-modal-content {
  align-self: flex-start;
}

/* (opcional, mas deixa mais profissional quando o texto é enorme) */
.designer-modal-content {
  overflow: auto;
  max-height: 70vh; /* ajuste se quiser */
}

/* ===== SECTION CONSTRUTORAS ====================================== */

.section-brands {
 
  padding: 0px 0 40px;
  background: #f9fafb;
}

.section-title--center {
  text-align: center;
  margin-bottom: 32px;
}

/* Wrapper com setas + viewport */
.brands-scroller {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
   padding-left:20px;
  padding-right:20px;
}

/* Botões */
.brands-arrow {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.brands-arrow:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.brands-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* Área rolável */
.brands-viewport {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 8px 2px;
  scrollbar-width: none;              /* Firefox */
}

.brands-viewport::-webkit-scrollbar { /* Chrome/Safari */
  display: none;
}

.brands-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Card do logo */
.brand-card {
  flex: 0 0 140px;
  height: 96px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.brand-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.brand-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .brand-card {
    flex: 0 0 120px;
    height: 84px;
  }

  .section-brands {
    padding: 10px 0 12px;
  }

  .brands-arrow {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 20px;
  }
}

/* === Scroll Snap (encaixe tipo Netflix) === */
.brands-viewport {
 .brands-viewport { scroll-snap-type: x proximity; }   /* encaixa no eixo X */
  scroll-padding-left: 2px;          /* pequeno ajuste pro primeiro card */
}

.brands-row {
  scroll-snap-stop: always;          /* tenta “parar” sempre num item */
}

.brand-card {
  scroll-snap-align: start;          /* alinha o card no início do viewport */
}
.brands-row { gap: 18px; }
.brand-card { flex: 0 0 148px; }

.vitrine-card { position: relative; }

/* mesmo posicionamento do chat (botão flutuante) */
.vitrine-card-fav{
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  color: #111;
}

.vitrine-card-fav:hover{ transform: translateY(-1px); }
.vitrine-card-fav:active{ transform: translateY(0px); }

.vitrine-card-fav.is-active{
  color: #b91c1c;               /* coração vermelho */
  background: rgba(255,255,255,.98);
}

.vitrine-card-fav-icon{ width: 20px; height: 20px; }

.card-media-carousel{
  position: relative;
}

.card-media-track{
  display: flex;
  width: 100%;
  transform: translateX(0);
  transition: transform .35s ease;
  will-change: transform;
}

.card-media-track img{
  width: 100%;
  flex: 0 0 100%;
  display: block;
}

/* ✅ Setas por cima da imagem e clicáveis */
.card-media-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  pointer-events: auto;
}

/* posicionamento */
.card-media-arrow--prev{ left: 10px; }
.card-media-arrow--next{ right: 10px; }

/* ✅ Dots por cima também */
.card-media-dots{
  position: absolute;
 
 
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 20;
  pointer-events: auto;
}

/* (opcional) se você tiver algum overlay na mídia, ele NÃO pode capturar clique */
.vitrine-card-media::before,
.vitrine-card-media::after{
  pointer-events: none;
}

/* ícone dentro do badge */
.project-badge i {
  margin-right: 8px;
  font-size: 0.95em;
  line-height: 1;
}

/* Badge azul claro (referência) */
.project-badge--ref {
  background: #3399ff;        /* azul claro */
  border: 1px solid #3399ff;  /* azul borda */
  color: #ffffff;             /* azul texto */
}

.section-techsheet .tech-item dt{
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-techsheet .tech-item dt i{
  width: 18px;
  text-align: center;
  opacity: .9;
  flex: 0 0 18px;
}
/* Praia abaixo do título */
.project-card-beach{
  margin: 0px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
   font-size: 0.85rem;
  opacity: .92;
  margin-bottom:10px;
}
.project-card-beach i{
 
   font-size: 1rem;
   color: #38cc29;
}

/* Badge Referência */
.project-card-refrow{ margin-top: 20px; margin-bottom: 20px;}

.project-ref-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #38cc29;
}
.project-ref-badge i{
   font-size: 1rem;
  color: #fff;
}
/* =========================
   HERO: linhas de local + features
   ========================= */

.hero-carousel .carousel-caption{
  /* mantém seu layout e melhora legibilidade */
  max-width: 1280px;
}



.hero-carousel .hero-locline .hero-sep{
  opacity: .65;
}

.hero-carousel .hero-loc{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}

.hero-carousel .hero-loc i{
  font-size: 13px;
  opacity: .95;
}

.hero-carousel .hero-featline{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 12px;
}

.hero-carousel .hero-feat{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.95);
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.hero-carousel .hero-feat i{
  font-size: 14px;
  opacity: .95;
}

/* Mobile: deixa mais “clean” e não estoura */
@media (max-width: 768px){

  .hero-carousel .hero-loc{
    padding: 6px 10px;
  }
  .hero-carousel .hero-feat{
    font-size: 13px;
    padding: 7px 10px;
  }
}
/* 1ª linha do hero: Praia • Bairro • Cidade-UF (texto puro, sem badges/ícones) */
.hero-carousel .hero-locline{
  margin: 10px 0 10px;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Mobile */
@media (max-width: 768px){
  .hero-carousel .hero-locline{
    font-size: 13px;
    margin: 8px 0 8px;
  }
}

/* =========================
   HOME: Nearby Places
   ========================= */

.home-nearby {
  padding: 56px 0;
}

.home-nearby__inner {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.home-nearby__head {
  margin-bottom: 18px;
}

.home-nearby__title {
  font-size: 26px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
}

.home-nearby__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.85;
}

.home-nearby__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.home-nearby__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
  backdrop-filter: blur(6px);
}

.home-nearby__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.home-nearby__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.05);
  flex: 0 0 auto;
}

.home-nearby__icon i {
  font-size: 16px;
}

.home-nearby__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  display: inline-block;
}

.home-nearby__label {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-nearby__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.home-nearby__distance {
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
}

.home-nearby__hint {
  position: relative;
}

.home-nearby__hint-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  padding: 0;
}

.home-nearby__hint-btn:hover {
  background: rgba(0,0,0,0.04);
}

.home-nearby__tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px, calc(100vw - 48px));
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.35;
  box-shadow: 0 18px 36px rgba(0,0,0,0.28);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}

.home-nearby__tooltip::before {
  content: "";
  position: absolute;
  right: 12px;
  top: -6px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: rgba(20, 20, 20, 0.92);
}

.home-nearby__hint:hover .home-nearby__tooltip,
.home-nearby__hint:focus-within .home-nearby__tooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Empty */
.home-nearby__empty {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
  border: 1px dashed rgba(0,0,0,0.16);
}

.home-nearby__empty-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.home-nearby__empty-text {
  opacity: 0.85;
  font-size: 14px;
}

@media (max-width: 900px) {
  .home-nearby__grid {
    grid-template-columns: 1fr;
  }
}
.pr-nearby-simple { padding: 0px 0; }
.pr-nearby-simple__header{
  text-align: center;
     padding: 40px calc(24px + clamp(32px, 8vw, 160px));
    max-width: 1920px;
    margin: 0 auto;
    
}

.pr-nearby-simple__title,
.pr-nearby-simple__subtitle{
  text-align: center;
}


.pr-nearby-simple__list{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.pr-nearby-simple__item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding: 14px 12px;
  border: 1px solid #38cc29;

  border-radius: 14px;
  background: rgba(0,0,0,.01);
}

.pr-nearby-simple__item:last-child{  }

.pr-nearby-simple__icon{
  width: 78px;
  height: 78px;
  border-radius: 999px;
  border: 2px solid #38cc29;
  display:flex;
  align-items:center;
 justify-content:center;
  flex: 0 0 auto;
  background: rgba(0,0,0,.02);
}
.pr-nearby-simple__icon i{
  font-size: 26px;
  opacity: .9;
  color: #38cc29;
}

.pr-nearby-simple__body{ min-width:0; flex: 1 1 auto; }
.pr-nearby-simple__name{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 6px;
  white-space: normal;
  word-break: break-word;
}

.pr-nearby-simple__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.pr-nearby-simple__distance{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  opacity: .82;
}

.pr-nearby-simple__links{
  display:flex;
  gap: 12px;
}
.pr-nearby-simple__link{
  font-size: 13px;
  text-decoration: none;
  opacity: .85;
  border-bottom: 1px dotted rgba(0,0,0,.25);
}
.pr-nearby-simple__link:hover{ opacity: 1; }
.pr-nearby-simple__link--strong{
  font-weight: 700;
  border-bottom-style: solid;
  border-bottom-color: rgba(0,0,0,.35);
}

/* tooltip inline */
.pr-tip-inline{
  position:relative;
  border:none;
  background:transparent;
  padding:4px;
  margin:-4px;
  cursor:pointer;
  opacity:.85;
}
.pr-tip-inline:hover{ opacity:1; }

.pr-tip-inline::after{
  content: attr(data-tip);
  position:absolute;
  left: 0;
  top: calc(100% + 10px);
  width: min(340px, 75vw);
  padding:10px 12px;
  border-radius:12px;
  background: rgba(0,0,0,.90);
  color:#fff;
  font-size:12px;
  line-height:1.35;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
  transform: translateY(-4px);
  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 20;
}
.pr-tip-inline::before{
  content:"";
  position:absolute;
  left: 12px;
  top: calc(100% + 4px);
  border: 7px solid transparent;
  border-bottom-color: rgba(0,0,0,.90);
  opacity:0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  z-index: 21;
}
.pr-tip-inline:hover::after,
.pr-tip-inline:focus::after,
.pr-tip-inline:hover::before,
.pr-tip-inline:focus::before{
  opacity:1;
  transform: translateY(0);
}

@media (max-width: 1024px){
  .pr-nearby-simple__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .pr-nearby-simple__list{
    grid-template-columns: 1fr;
  }
}

/* ================================
   Tooltip inline (pr-tip-inline)
   - centralizado + dente
================================ */

/* botão */
.pr-tip-inline{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  line-height: 1;
}

/* o “balão” do tooltip (pseudo-elemento) */
.pr-tip-inline::after{
  content: attr(data-tip);
  position: absolute;

  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%);

  z-index: 60;
  min-width: 220px;
  max-width: 320px;
  min-height:40px;

  background: #111;
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;

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

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  white-space: normal;
  text-align: left;

  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}



/* abre no hover e foco (acessível) */
.pr-tip-inline:hover::after,
.pr-tip-inline:focus-visible::after{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

.pr-tip-inline:hover::before,
.pr-tip-inline:focus-visible::before{
  opacity: 1;
  visibility: visible;
}

/* se algum ancestral tiver overflow hidden, isso evita “cortar” o tooltip */
.pr-nearby-simple__item,
.pr-nearby-simple__meta,
.pr-nearby-simple__distance{
  overflow: visible;
}
/* ✅ encaixe do search-card inline dentro do buy-region-bar */
.buy-region-bar .region-search--inline {
  flex: 1;
  min-width: 460px; /* mais largo pra caber o placeholder */
}

/* ============================
   Search card inline (UX melhor)
============================ */
:root {
  /* se você já tiver variável de tema, troca aqui */
  --ux-green: #16a34a;           /* verde */
  --ux-green-hover: #15803d;     /* hover */
  --ux-green-press: #166534;     /* active */
  --ux-border: #e5e7eb;          /* borda */
  --ux-text: #111827;            /* texto */
  --ux-muted: #6b7280;           /* placeholder */
  --ux-bg: #ffffff;
  --ux-focus: rgba(22, 163, 74, 0.18);
}

.search-card-inline {
  width: 100%;
}

.search-card-inline__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* input wrap ocupa tudo */
.search-card-inline__inputWrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* ícone */
.search-card-inline__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #6b7280;
  pointer-events: none;
}

/* input mais “premium” */
.search-card-inline__input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--ux-border);
  border-radius: 10px;
  padding: 0 14px 0 40px; /* espaço pro ícone */
  font-size: 14px;
  color: var(--ux-text);
  background: var(--ux-bg);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

/* placeholder mais legível */
.search-card-inline__input::placeholder {
  color: var(--ux-muted);
}

/* foco (ux) */
.search-card-inline__input:focus {
  border-color: var(--ux-green);
  box-shadow: 0 0 0 4px var(--ux-focus);
}

/* hover leve */
.search-card-inline__input:hover {
  border-color: #d1d5db;
}

/* botão verde padrão */
.search-card-inline__btn {
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #38cc29;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
  white-space: nowrap;
}

/* hover com “elevate” */
.search-card-inline__btn:hover {
  background: var(--ux-green-hover);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

/* clique */
.search-card-inline__btn:active {
  background: var(--ux-green-press);
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(0,0,0,0.10);
}

/* acessibilidade: foco */
.search-card-inline__btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.22);
}

/* mobile: botão ocupa menos e input continua grande */
@media (max-width: 640px) {
  .buy-region-bar .region-search--inline {
    min-width: 320px;              /* deixa o flex decidir (evita estourar) */
  }

  .search-card-inline__row {
    gap: 8px;
  }

  /* ✅ input mais baixo + fonte menor no mobile */
  .search-card-inline__input {
    height: 36px;              /* era 44 */
    border-radius: 10px;
    padding: 0 12px 0 34px;    /* ícone mais perto */
    font-size: 12px;           /* texto digitado */
  }

  .search-card-inline__icon {
    left: 12px;
    font-size: 12px;
  }

  /* ✅ placeholder menor pra caber melhor */
  .search-card-inline__input::placeholder {
    font-size: 11px;
    letter-spacing: 0;
  }

  /* ✅ botão mais baixo também */
  .search-card-inline__btn {
    height: 36px;              /* era 44 */
    border-radius: 10px;
    padding: 0 12px;
    font-size: 12px;
  }
}



/* Links do topnav por fase */
.portal-center-nav .nav-phase-link {
  border-radius: 12px;
  padding: 8px 10px;
  transition: color .15s ease, opacity .15s ease;
}

/* ícone sempre verde (estado normal) */
.portal-center-nav .nav-phase-icon {
  color: #38cc29;
  font-size: 14px;
  line-height: 1;
  transition: color .15s ease;
}

/* hover = muda a cor do TEXTO e do ÍCONE (sem fundo) */
.portal-center-nav .nav-phase-link:hover {
  background: transparent !important;
 color: #38cc29;
}

/* ícone acompanha a cor do hover */
.portal-center-nav .nav-phase-link:hover .nav-phase-icon {
  color: #38cc29;
}
/* ===== Topnav: ícones (Font Awesome) em verde ===== */
.portal-action-icon,
.portal-btn-icon,
.nav-phase-icon {
  color: var(--ux-green);
}

/* garante que o ícone não “herde” outra cor do bootstrap */
.portal-action-link i,
.portal-auth-area .btn i,
.nav-phase-link i {
  color: var(--ux-green);
}

/* hover: muda só a cor do link (texto + ícone acompanha) */
.portal-action-link:hover,
.nav-phase-link:hover {
  color: var(--ux-green-hover);
}

.portal-action-link:hover i,
.nav-phase-link:hover i {
  color: var(--ux-green-hover);
}

/* opcional: foco acessível sem fundo */
.portal-action-link:focus-visible,
.nav-phase-link:focus-visible {
  outline: none;
  text-decoration: none;
  box-shadow: 0 0 0 4px var(--ux-focus);
  border-radius: 10px;
}
/* ===== Botão Sair: hover verde + ícone branco ===== */

/* hover/focus */
.portal-logout-btn:hover,
.portal-logout-btn:focus,
.portal-logout-btn:focus-visible {
  background: var(--ux-green) !important;
  border-color: var(--ux-green) !important;
  color: #fff !important;
}

/* ícone branco no hover */
.portal-logout-btn:hover i,
.portal-logout-btn:focus i,
.portal-logout-btn:focus-visible i {
  color: #fff !important;
}

/* opcional: remove o cinza do active e mantém verde */
.portal-logout-btn:active {
  background: var(--ux-green-press) !important;
  border-color: var(--ux-green-press) !important;
  color: #fff !important;
}

.portal-logout-btn:active i {
  color: #fff !important;
}
/* ===== Hover verde (padrão) para Entrar / Criar conta ===== */

/* ENTRAR (btn-outline-dark) -> hover verde + texto/ícone branco */
.portal-auth-area .btn.btn-outline-dark:hover,
.portal-auth-area .btn.btn-outline-dark:focus,
.portal-auth-area .btn.btn-outline-dark:focus-visible {
  background: var(--ux-green) !important;
  border-color: var(--ux-green) !important;
  color: #fff !important;
}

.portal-auth-area .btn.btn-outline-dark:hover i,
.portal-auth-area .btn.btn-outline-dark:focus i,
.portal-auth-area .btn.btn-outline-dark:focus-visible i,
.portal-auth-area .btn.btn-outline-dark:hover svg,
.portal-auth-area .btn.btn-outline-dark:focus svg,
.portal-auth-area .btn.btn-outline-dark:focus-visible svg {
  color: #fff !important;
}

/* Se o ícone for SVG com stroke="currentColor", garante branco */
.portal-auth-area .btn.btn-outline-dark:hover svg path,
.portal-auth-area .btn.btn-outline-dark:focus svg path,
.portal-auth-area .btn.btn-outline-dark:focus-visible svg path {
  stroke: #fff !important;
}

/* CRIAR CONTA (btn-dark) -> hover verde + texto/ícone branco */
.portal-auth-area .btn.btn-dark:hover,
.portal-auth-area .btn.btn-dark:focus,
.portal-auth-area .btn.btn-dark:focus-visible {
  background: var(--ux-green) !important;
  border-color: var(--ux-green) !important;
  color: #fff !important;
}

.portal-auth-area .btn.btn-dark:hover i,
.portal-auth-area .btn.btn-dark:focus i,
.portal-auth-area .btn.btn-dark:focus-visible i {
  color: #fff !important;
}
/* ===== Bordas verdes no estado normal (todos os botões do topo) ===== */

/* Entrar (outline) */
.portal-auth-area .btn.btn-outline-dark {
  border-color: var(--ux-green) !important;
  color: var(--ux-text) !important; /* mantém texto normal */
}

/* Sair (outline secondary) */
.portal-auth-area .btn.btn-outline-secondary {
  border-color: var(--ux-green) !important;
  color: var(--ux-text) !important;
}

/* Criar conta (dark) — mantém preenchido, mas borda verde */
.portal-auth-area .btn.btn-dark {
  border-color: var(--ux-green) !important;
}

/* Garantir que o ícone (FA) fique verde no normal, se você quiser */
.portal-auth-area .btn i {
  color: var(--ux-green) !important;
}



/* Se tiver SVG (Entrar/Favoritos) e quiser o stroke verde no normal */
.portal-auth-area .btn svg path {
  stroke: var(--ux-green) !important;
}
/* Hover do botão Sair: fundo verde + texto/ícone branco */
.portal-logout-btn:hover,
.portal-logout-btn:focus {
  background: var(--ux-green);
  border-color: var(--ux-green);
  color: #fff !important; /* texto */
}

/* garante o ícone branco no hover */
.portal-logout-btn:hover i,
.portal-logout-btn:focus i,
.portal-logout-btn:hover svg,
.portal-logout-btn:focus svg {
  color: #fff !important;
  stroke: #fff !important;
}
/* Hover do botão Sair: força TUDO branco (texto + filhos) */
.portal-logout-btn:hover,
.portal-logout-btn:focus {
  background: var(--ux-green) !important;
  border-color: var(--ux-green) !important;
  color: #fff !important;
}

/* força qualquer texto interno */
.portal-logout-btn:hover *,
.portal-logout-btn:focus * {
  color: #fff !important;
}

/* se tiver SVG */
.portal-logout-btn:hover svg,
.portal-logout-btn:focus svg {
  stroke: #fff !important;
  fill: #fff !important; /* se algum svg usar fill */
}
.btn-carousel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;              /* controla o espaço entre texto e ícone */
  padding:12px 28px;
  border-radius:15px;
  background:#38cc29;
  color:#fff;
  border:none;
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:background .2s ease, transform .1s ease, box-shadow .2s ease;
}

/* ícone */
.btn-carousel i{
  color:#fff;
  margin:0;               /* remove o “empurrão” extra */
  font-size:.95em;
  line-height:1;
}
/* =========================================================
   HOME • Search Card (visual igual da página de resultados)
   Alvo: .search-wrapper-bg .search-card .search-input + botão
========================================================= */

.search-wrapper-bg{
  background:#f6f7f8;          /* fundo clarinho atrás */
  padding: 18px 0;
}

.search-card{
  width: 100%;
}

.search-card-form{
  width: 100%;
}

.search-card-row{
  display:flex;
  align-items:center;
  gap: 12px;
  width: 100%;
}

/* INPUT (pill + ícone embutido) */
.search-card-row .search-input{
  flex: 1;
  min-width: 0;                /* evita quebrar layout */
  height: 48px;
  border-radius: 18px;

  background: #fff;
  border: 2px solid rgba(56, 204, 41, 0.28);
  
  padding: 0 16px 0 46px;       /* espaço pro ícone */
  font-size: 15px;
  color: #111827;
  outline: none;

  /* ícone de lupa dentro do input (CSS-only) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 21l-4.3-4.3m1.3-5.2a7.5 7.5 0 1 1-15 0a7.5 7.5 0 0 1 15 0Z' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 16px 50%;
  background-size: 18px 18px;

  transition: border-color .15s ease, box-shadow .15s ease;
}

.search-card-row .search-input::placeholder{
  color:#6b7280;
  font-size: 14px;
}

/* foco “premium” */
.search-card-row .search-input:focus{
  border-color: rgba(56, 204, 41, 0.60);
  box-shadow: 0 0 0 5px rgba(56, 204, 41, 0.18);
}

/* BOTÃO */
.search-card-row .search-card-btn{
  height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  border: 0;
  background: #38cc29;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.search-card-row .search-card-btn:hover{
  background:#2fb321;
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

.search-card-row .search-card-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(0,0,0,0.10);
}

/* MOBILE: baixa altura e placeholder menor pra caber */
@media (max-width: 640px){
  .search-wrapper-bg{ padding: 0px 0; }

  .search-card-row{ gap: 10px; }

  .search-card-row .search-input{
    height: 42px;
    border-radius: 16px;
    padding-left: 42px;
    font-size: 14px;
    background-position: 14px 50%;
  }

  .search-card-row .search-input::placeholder{
    font-size: 12.5px;
  }

  .search-card-row .search-card-btn{
    height: 42px;
    border-radius: 14px;
    padding: 0 14px;
    font-size: 13px;
  }
}
.badge-destaque--lancamento { background: #16a34a; }
.badge-destaque--breve_lancamento { background: #f59e0b; }
.badge-destaque--obra_iniciada { background: #2563eb; }
.badge-destaque--obra_fase_final { background: #7c3aed; }
.badge-destaque--obra_acelerada { background: #0ea5e9; }
.badge-destaque--pronto_para_morar { background: #111827; }
.badge-destaque--futuro_lancamento { background: #ef4444; }

.projects-view-all-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* =========================
   PROJECT: Nearby Places (alinhamento padrão)
   ========================= */

.pr-nearby-simple .container{
  padding: 0px calc(24px + clamp(32px, 8vw, 160px));
  max-width: 1920px;
  margin: 0 auto;
  margin-bottom:80px;
}

/* header não precisa mais “duplicar” padding */
.pr-nearby-simple__header{
  padding: 0;
  text-align: left;
}

.pr-nearby-simple__title,
.pr-nearby-simple__subtitle{
  text-align: center;
}

/* só um respiro entre header e grid */
.pr-nearby-simple__list{
  margin-top: 18px;
}


@media (max-width: 991.98px) {

 .search-card-row .search-input{
    height: 52px;        /* ou 48px, se preferir */
    min-height: 52px;
    font-size: 16px;     /* evita zoom/chato no iOS e deixa “normal” */
    padding: 0 16px 0 42px; /* mantém o ícone embutido + altura consistente */
    line-height: 52px;
  }

  .search-card-row .search-card-btn{
    height: 52px;        /* igual ao input */
    padding: 0 18px;
    font-size: 15px;
  }


  

   }

   /* MOBILE / TABLET */
@media (max-width: 768px) {
  .hero-carousel .carousel,
  .hero-carousel .carousel-item {
    height: clamp(420px, 62vh, 560px);
    /* ✅ altura ideal:
       - mínimo 420px (não fica “retangular baixinho”)
       - responsivo (62vh)
       - máximo 560px (não ocupa a tela inteira) */
  }

  /* legenda com respiro e leitura boa */
  .hero-carousel .carousel-caption {
    left: 66px;
    right: 16px;
    bottom: 18px;
    padding: 16px 14px;
    border-radius: 14px;
    max-width: 680px;
  }
}

/* Extra (opcional): melhora contraste do texto no mobile */
@media (max-width: 768px) {
  .hero-carousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.60) 0%,
      rgba(0,0,0,0.25) 45%,
      rgba(0,0,0,0.00) 75%
    );
    pointer-events: none;
  }

  .hero-carousel .carousel-item {
    position: relative; /* necessário pro ::after */
  }

  .hero-carousel .carousel-caption {
    position: absolute; /* garante que fica acima do overlay */
    z-index: 2;
  }
}

/* =========================================================
   ✅ FIX DEFINITIVO — HERO mobile com altura FIXA + crop
   - trava a altura do hero
   - imagem sempre ocupa 100% (horizontal/vertical)
   - caption não altera a altura (overlay)
========================================================= */

@media (max-width: 768px){
  /* ajuste aqui o “tamanho ideal” */
  .hero-carousel{
    --hero-h: 460px; /* tenta 440/460/480 */
  }

  .hero-carousel .carousel{
    height: var(--hero-h) !important;
    overflow: hidden;
    position: relative;
  }

  .hero-carousel .carousel-item{
    height: var(--hero-h) !important;
    position: relative;
    overflow: hidden;
  }

  /* a imagem não pode ditar altura — ela preenche o slide */
  .hero-carousel .carousel-item > img{
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
  }

  /* caption em overlay (não empurra a altura) */
  .hero-carousel .carousel-caption{
    position: absolute;
    left: 56px;
    right: 16px;
    bottom: 70px;
    z-index: 2;

    padding: 14px 14px;
    border-radius: 14px;
    max-width: 680px;
  }

  /* overlay leve pra leitura (opcional, mas fica bem profissional) */
  .hero-carousel .carousel-item::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.25) 45%,
      rgba(0,0,0,0) 75%
    );
    pointer-events:none;
  }

  .navbar-toggler:focus {
  
  box-shadow: none;
  
  }

.vitrine-shell {
border:none;
padding: 0px 0px 0px;
}

.vitrine-wrapper {
  padding: 0px 0 0px;
}

.search-card-btn-benefits {
  height: 52px;
  padding: 0 28px;
  border-radius: 10px;
  border: none;
  background: #22c55e;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  width: 50%;
  text-align: center;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px;
}

.benefits-right
 {
    padding:16px;
}

.site-footer .footer-top

 {
   
    padding-left: 16px;
}

 .site-footer .footer-bottom-inner {
 padding-left: 16px;
}

.listing-subtitle {
    padding:16px;
}


.search-header-extra{

  padding-left:16px;
  padding-right:16px; 
}

.search-top-right {
padding-right:16px; 

}   

}

/* ==========================================
   ✅ NAVBAR MOBILE: collapse acima de tudo
   - não depende de position do pai
   - mantém o toggle do Bootstrap funcionando
========================================== */
@media (max-width: 991.98px){

  /* navbar sempre acima */
  .portal-navbar,
  .navbar{
    position: sticky;
    top: 0;
    z-index: 9500;
  }

  /* garante que o botão sempre receba clique */
  .navbar-toggler{
    position: relative;
    z-index: 0;
  }

  /* altura da sua navbar (ajuste se precisar) */
  :root{
    --portal-navbar-h: 64px;
  }

  /* quando ABERTO (Bootstrap adiciona .show) */
  #portalNav.collapse.show{
    position: fixed;
    left: 0;
    right: 0;
    
    z-index: 9600;

    background: #fff;
    max-height: calc(100vh - var(--portal-navbar-h));
    overflow-y: auto;

    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
  }

  /* durante a animação (estado intermediário do Bootstrap) */
  #portalNav.collapsing{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--portal-navbar-h);
    z-index: 9600;

    background: #fff;
    max-height: calc(100vh - var(--portal-navbar-h));
    overflow-y: auto;

    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
  }


  .section-search-results > .container {

    padding-left:16px;
    padding-right:16px;

  }

/* ==========================================
   ✅ FIX: navbar só fica fixa quando menu está aberto
========================================== */
body.nav-open .portal-navbar,
body.nav-open .navbar{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9700;
}

/* quando a navbar vira fixed, empurra o conteúdo pra não “subir” por baixo */
body.nav-open{
  padding-top: var(--portal-navbar-h, 64px);
}



    .project-hero-overlay {
     padding: 0px 0px 0px; 
     margin-top:150px;
     margin-left:16px;
    }

    .project-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
}

  /* Centraliza o grid no mobile */
  .project-summary-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;      /* ⭐ centraliza cada coluna no grid */
    text-align: center;         /* ⭐ centraliza o texto abaixo do ícone */
    column-gap: 41px;
    row-gap: 30px;
    margin-top:30px;
    
  }


/* ✅ FIX: subtitle do Project Summary nunca estoura horizontal */
.project-summary .project-summary-left,
.project-summary .project-summary-inner{
  max-width: 100%;
  overflow-x: hidden; /* segurança */
}

.project-summary .project-summary-subtitle{
  display: block;
  width: 100%;
  max-width: 100%;
  margin-right: 0 !important;

  white-space: normal !important;      /* mata nowrap herdado */
  overflow-wrap: anywhere !important;  /* quebra onde precisar */
  word-break: break-word !important;   /* fallback */
}
 .project-hero-content {
  max-width: 640px;
  text-align: left;
  margin-left: 0px;
}

  .project-summary-title {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 600;
  }

.buy-region-bar .region-search--inline {
    flex: 1;
    min-width: 280px;
}

.airbnb-gallery {
     margin-top: 30px;
     margin-bottom: 0px;
 }

 .section-gallery {
padding-top:40px;
padding: 24px 0 0px;
  }

      .gallery-lightbox-inner {
        padding-right: 26px;
        padding-left:13px;
    }

    .tech-intro-cta {

    background: #38cc29;
    color: #ffffff;
       }


.tech-item dt {
color: #38cc29;
}
.tech-item dd {
margin-left: 20px;
}



.obra-status-icon {
color: #38cc29;
}

.obra-status-bar-fill {
   background: #38cc29;
}


.obra-lightbox  {
  margin-right:10px;
 }
}




/* --- FIX overflow horizontal (mobile) --- */

/* garante que padding não estoure largura em alguns cenários */
.section-designers-inner {
  box-sizing: border-box;
  max-width: 100%;
}

/* clássico do grid: permite os filhos encolherem sem “empurrar” a página */
.designers-layout > * {
  min-width: 0;
}

/* reforço extra (porque aqui tem flex + overflow) */
.designers-carousel,
.designers-track {
  min-width: 0;
  max-width: 100%;
}

/* se ainda sobrar 1px de overflow em algum device, corta no container da section */
.section-designers {
  overflow-x: clip; /* pode trocar por hidden se precisar de suporte mais amplo */
}
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  /* evita filhos “vazarem” a página */
  main, .project-page {
    overflow-x: clip;
  }

  /* o carrossel pode ter overflow interno, mas não pode empurrar o body */
  .section-designers,
  .section-designers-inner,
  .designers-layout,
  .designers-carousel {
    max-width: 100%;
  }

  .designers-copy,
  .designers-carousel {
    min-width: 0;
  }

  .designers-track {
    width: 100%;
    max-width: 100%;
  }

  /* mapa do Google: garante que nada interno cause overflow no body */
  .project-location-map {
    max-width: 100%;
    overflow: hidden;
    position: relative;
  }
}




/* Hover: muda o link e o ícone junto */
.footer-social-item:hover {
  color: #00ec00; /* <-- seu verde do projeto */
  background:none;
  border-color: #00ec00;

}

/* =========================
   MODAL (Popup)
========================= */
.portal-modal{
  position: fixed;
  inset: 0;
  display: none;             /* abre via JS trocando pra flex */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.portal-modal.is-open{
  display: flex;
}

.portal-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.62);
  backdrop-filter: blur(6px);
}

.portal-modal__dialog{
  position: relative;
  width: min(560px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  padding: 18px 18px 16px;
  overflow: hidden;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  border: 1px solid rgba(17,17,17,.08);
}

.portal-modal.is-open .portal-modal__dialog{
  transform: translateY(0);
  opacity: 1;
}

.portal-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.92);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.portal-modal__close:hover{
  transform: scale(1.03);
  background: #fff;
}

.portal-modal__header{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 4px 6px 12px 6px;
  border-bottom: 1px solid rgba(17,17,17,.08);
}

.portal-modal__badge{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 204, 41, 0.12);
  color: #1e8f16;
  flex: 0 0 auto;
}

.portal-modal__title{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #121212;
}
.portal-modal__subtitle{
  margin: 4px 0 0;
  font-size: .92rem;
  color: rgba(17,17,17,.65);
  line-height: 1.35;
}

/* =========================
   FORM
========================= */
.lead-form{
  padding: 14px 6px 0 6px;
}

.lead-form__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.lead-form__field--full{
  grid-column: 1 / -1;
}

.lead-form__label{
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(17,17,17,.72);
  margin: 0 0 6px;
}

.lead-form__input,
.lead-form__textarea{
  width: 100%;
  border: 1px solid rgba(17,17,17,.14);
  border-radius: 14px;
  padding: 12px 12px;
  font-size: .96rem;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  background: #fff;
}

.lead-form__textarea{
  resize: vertical;
  min-height: 110px;
}

.lead-form__input:focus,
.lead-form__textarea:focus{
  border-color: rgba(56,204,41,.55);
  box-shadow: 0 0 0 4px rgba(56,204,41,.12);
}

.lead-form__footer{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.lead-form__helper{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(17,17,17,.60);
  font-size: .86rem;
}
.lead-form__helper i{
  color: #1e8f16;
}

.lead-form__submit{
  border: none;
  border-radius: 14px;
  background: #38cc29;
  color: #0b2a09;
  font-weight: 900;
  padding: 12px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 20px rgba(56,204,41,.18);
  transition: transform .12s ease, filter .12s ease;
}
.lead-form__submit:hover{
  transform: translateY(-1px);
  filter: brightness(0.98);
}
.lead-form__submit:active{
  transform: translateY(0);
}

.lead-form__toast{
  margin-top: 12px;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: .9rem;
  display: none; /* exibir via JS depois */
}

@media (max-width: 520px){
  .lead-form__grid{
    grid-template-columns: 1fr;
  }
}

.lead-form__consent {
  margin-top: 6px;
}

.lead-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: rgba(17,17,17,.70);
  line-height: 1.3;
}

.lead-consent input {
  margin-top: 2px;
}