/* ====== CONTÊINER 50% CENTRALIZADO ====== */
.panel-wrap{
  width: clamp(640px, 48vw, 1000px);
  margin: 2.5rem auto 3.5rem;
  position: relative;
}

/* “Sombra no chão” para efeito de flutuar */
.panel-wrap::before{
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  bottom:-14px;
  height: 22px;
  border-radius: 999px;
  filter: blur(10px);
  background: radial-gradient(closest-side, #000000, transparent 80%);
  z-index:-1;
}

/* ====== SEÇÃO ====== */
.empreendimentos-tabs{
  background: #ffffff;           /* página clara */
  padding: 2.5rem 0 3rem;
}

/* ====== TABS (pílulas) ====== */
.tabs{
  display:flex;
  gap:.75rem;
  justify-content:flex-start;
  margin-bottom: 1rem;
  font-family: "Roboto", sans-serif;
}
.tab-btn{
  appearance:none;
  border:4px solid #004921;
  background:#004921;
  color:#fff;
  font-weight:900;
  letter-spacing:.3px;
  padding:.8rem 2rem;
  border-radius:999px;
  cursor:pointer;
  transition:.2s transform, .2s background, .2s border-color, .2s color;
  box-shadow:0 10px 24px #1482465b;
  font-size: 0.8rem;
}
.tab-btn:hover{ transform: translateY(-1px); }
.tab-btn.is-active{
  background:#148245;
  border: 4px solid #148245;
  color:#fff;
  box-shadow:0 10px 24px #1482465b;
  font-size: 1rem;  
}

/* ====== ÁREA INTERNA (cartão “flutuando”) ====== */
.tab-content{
  background:#ffffff;
  border:2px solid #6b7280;
  border-radius:16px;
  box-shadow: 0 18px 40px #1482463b, 0 2px 6px #1482463b;
  padding: 16px;         /* <<< separação igual nas bordas */
  transition:.2s transform, 2s box-shadow;
}
.tab-content:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.07);
}

/* ====== PAINÉIS ====== */
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }


.feature-card .emp-name{ margin:0 0 6px; color:#111; font-size:1.15rem; font-weight:800; }
.feature-card .emp-loc{ margin:0 0 10px; color:#727171; }
.feature-card .emp-specs{
  list-style:none; margin:0 0 14px; padding:0; color:#111; display:grid; gap:2px;
}
/* ====== CARD “EM OBRAS” ====== */
.emp-card.feature-card{
  width:100%;
  margin: 0 auto;               /* <<< garante centralizado dentro do painel */
  background:#ffffff;
  border:1px solid #6b7280;
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 12px 28px #0000005b;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Caixa da imagem com centralização */
.feature-card .emp-media{
  display:flex;
  align-items:start;
  justify-content:center;
  background:#eee;             
}
/* IMAGEM FIXA 284x150 (sem distorcer) */
.feature-card .emp-media img{
  width: 100%;
  height: 300px;
  object-fit: cover;            /* preenche sem achatar; use 'contain' se preferir bordas */
  display:block;
}
.feature-card .emp-body{
  padding:16px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

.feature-card .emp-btn{
  display:inline-block; 
  margin-top:10px;
  padding:12px 16px;
  border-radius:999px;
  background:#ffffff; 
  color:#000000; 
  font-weight:800; 
  text-align:center;
  border:2px solid #6b7280; 
  text-decoration:none; 
  transition:.2s filter, .2s transform;
}
.feature-card .emp-btn:hover{ 
  filter:brightness(1.05); 
  transform: translateY(-1px); 
}

/* ====== FINALIZADOS (lista dentro do mesmo painel 50%) ====== */
.emp-grid--finalizados{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.emp-grid--finalizados .emp-card{
  background:#fff;
  border:1px solid #6b7280;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:.2s transform, .2s box-shadow;

  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.emp-grid--finalizados .emp-card:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.10);
}
/* Mesma caixa e tamanho de imagem dos finalizados */
.emp-grid--finalizados .emp-media{
  display:flex;
  align-items:start;
  justify-content:center;
  background:#eee;
}
.emp-grid--finalizados .emp-media img{
  width: 100%;
  height: 230px;
  object-fit: cover;            /* troque para 'contain' se quiser ver a foto inteira */
  display:block;
}
.emp-grid--finalizados .emp-body{ 
  padding:14px; 
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

.emp-grid--finalizados .emp-name{ margin:0 0 4px; color:#111; font-weight:800; }
.emp-grid--finalizados .emp-loc{ margin:0 0 10px; color:#6b7280; font-size:.95rem; }
.emp-grid--finalizados .emp-specs{ list-style:none; margin: 0 0 12px; padding:0; display:grid; gap:4px; color:#000000; }
.emp-grid--finalizados .emp-btn{
  align-self:center; width:90%;
  border-radius:999px; padding:10px 14px;
  background:#ffffff; color:#000000; font-weight:800; text-decoration:none; border:2px solid #6b7280;
  transition:.2s filter, .2s transform;
}
.emp-grid--finalizados .emp-btn:hover{ filter:brightness(1.05); transform: translateY(-1px); }

/* ====== RESPONSIVO ====== */
@media (max-width:900px){
  .panel-wrap{ width:min(92vw,720px); }
}
@media (max-width: 900px) {
  .emp-grid--finalizados {
    grid-template-columns: 1fr; /* uma coluna em telas pequenas */
  }
}
/* ===== BANNER SUPERIOR ===== */
.banner-pagina {
  position: relative;
  width: 100%;
  height: 500px; /* ajuste se quiser mais alto ou mais baixo */
  background: 
    url(/imagens/4marketing.site.png) center/cover no-repeat;
  /* coloque sua imagem local dentro da pasta Imagens */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000000;
}

/* Overlay interno */
.banner-overlay {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Título principal */
.banner-titulo {
  font-size: 3rem;
  font-weight: 800;
  margin: 0;
}

/* Breadcrumb com links na mesma linha */
.banner-breadcrumb {
  display: flex;
  justify-content: center;
  gap: 16px; /* espaço entre os links */
  flex-wrap: wrap;
}

.banner-breadcrumb a {
  color: #000000;
  font-size: 1.4rem;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.banner-breadcrumb a:hover {
  color: #ED1C24; /* cor de destaque no hover */
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
  .banner-pagina {
    height: 280px;
  }
  .banner-titulo {
    font-size: 2rem;
  }
}