@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

:root{
  /* Paleta Luxo (Preto e Dourado) */
  --bg-body: #121212;
  --bg-card: #1E1E1E;
  --bg-header: #000000;
  --font-size: 0.75rem;
  --font-size-lg: 0.9rem;
  --brand-gold: #D4AF37;       /* Dourado Principal */
  --brand-gold-hover: #F4C430; /* Dourado Claro */
  --brand-gold-dark: #AA8C2C;  /* Dourado Escuro */
  
  --text-main: #EAEAEA;
  --text-muted: #B0B0B0;
  
  --gray-100: #2C2C2C;
  --gray-300: #444444;
  
  --white: #ffffff;
  --heart-red: #E53935;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Roboto Slab', serif;
  background: var(--bg-body);
  color: var(--text-main);
  line-height:1.6;
}
a{text-decoration:none;color:inherit; transition: color 0.3s;}
a:hover { color: var(--brand-gold); }

.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}
.flex-col-screen{display:flex;flex-direction:column;min-height:100vh}
.flex-grow{flex:1}

/* === Header === */
.header{
  background: var(--bg-header);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  border-bottom: 1px solid var(--brand-gold-dark);
  position:sticky; top:0; z-index:50;
}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 0; position:relative}

.logo{font-size:var(--font-size);font-weight:700;color:var(--brand-gold);flex-shrink:0}
.logo-img {height: 80px; width: auto; display: block;}

.menu-toggle{display:none;padding:.5rem;border:none;background:none;color:var(--brand-gold);cursor:pointer;border-radius:.375rem}
.menu-toggle:focus{outline:none;box-shadow:0 0 0 2px var(--brand-gold)}
.menu-toggle svg{width:1.5rem;height:1.5rem}

.desktop-menu{display:flex;align-items:center;gap:1rem;flex:1;justify-content:space-between;margin-left:2rem}
.nav-links,.nav-actions{display:flex;align-items:center;flex-wrap:nowrap}
.nav-links a,.nav-actions a{padding:.5rem .75rem;color:var(--text-main);white-space:nowrap; font-family: 'Raleway', sans-serif; font-weight: 500;}
.nav-links a:hover,.nav-actions a:hover{color:var(--brand-gold)}

.btn-anuncie{
  background: linear-gradient(135deg, var(--brand-gold-dark), var(--brand-gold));
  color: #000 !important;
  padding:.5rem .75rem;
  border-radius:.375rem;
  margin-right:.75rem;
  font-weight: 700;
  border: 1px solid var(--brand-gold);
}
.btn-anuncie:hover{
  background: var(--brand-gold-hover);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

/* Backdrop Mobile */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.8);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:49;
}
.backdrop.active{opacity:1; visibility:visible; pointer-events:auto;}

/* Menu Mobile */
.mobile-menu{
  display:none;
  position:absolute; top:100%; right:1.5rem; z-index:100;
  background: var(--bg-card); border: 1px solid var(--brand-gold-dark); border-radius:.5rem; 
  box-shadow:0 8px 16px rgba(0,0,0,.5);
  padding:.5rem 0; min-width:240px; overflow:hidden;
  max-height:0; opacity:0; transform:translateY(-8px);
  transition:max-height .3s ease-out, opacity .2s ease, transform .2s ease;
}
.mobile-menu.is-open{ max-height:500px; opacity:1; transform:translateY(0); }
.mobile-menu a{display:block;padding:.75rem 1.5rem;color:var(--text-main)}
.mobile-menu a:hover{background:var(--gray-100);color:var(--brand-gold)}
.mobile-menu .btn-anuncie{margin:.5rem 1.5rem;display:block;text-align:center}

@media (max-width:1023px){
  .menu-toggle{display:block}
  .desktop-menu{display:none}
  .mobile-menu{display:block}
}
@media (min-width:1024px){
  .menu-toggle{display:none !important;}
  .desktop-menu{display:flex !important;justify-content:space-between}
  .mobile-menu{ display:none !important; }
}

/* === Hero Section === */
.hero-section{position:relative;height:14rem;background-size:cover;background-position:center; border-bottom: 4px solid var(--brand-gold);}
.hero-overlay{position:absolute;inset:0;background:#000;opacity:.7}
.hero-content{
  position:relative; z-index:10; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color: var(--brand-gold); text-align:center; padding:0 1rem
}
.hero-content h1{font-size:var(--font-size-lg);font-weight:700;margin-bottom:1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8);}
.hero-content p{font-size:var(--font-size-lg);margin-bottom:2rem;max-width:42rem; color: #fff;}
@media (min-width:768px){
  .hero-content h1{font-size:var(--font-size-lg)}
  .hero-content p{font-size:var(--font-size-lg)}
}

.search-bar-container{width:100%;max-width:42rem}
.search-bar{position:relative}
.search-input{
  width:100%; padding:1rem 1.5rem; border-radius:9999px; 
  border: 2px solid var(--brand-gold-dark); 
  background: rgba(0,0,0,0.6);
  color: var(--white);
}
.search-input::placeholder{color: #ccc;}
.search-input:focus{outline:none; box-shadow:0 0 0 2px var(--brand-gold); border-color: var(--brand-gold);}
.search-button{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  background: var(--brand-gold); color:#000; font-weight: 700;
  padding:.625rem 1.5rem; border:none;border-radius:9999px;cursor:pointer
}
.search-button:hover{background: var(--brand-gold-hover);}

/* === Sections === */
.content-section-gray{padding:4rem 0; background:transparent}
.content-section-white{padding:4rem 0; background: #0a0a0a}

.section-title{
  text-align:center; color: var(--brand-gold); font-size:var(--font-size-lg);
  font-weight:700; margin-bottom:.5rem; text-transform: uppercase; letter-spacing: 1px;
}
.section-subtitle{text-align:center;color:var(--text-muted);margin-bottom:3rem}

/* Filtros (Dropdown) */
.filter-label{ color: var(--text-main); font-family:'Raleway',sans-serif; }
.city-select{
  padding:.45rem .75rem;
  border-radius: 10px;
  border:1px solid var(--brand-gold-dark);
  font-family:'Raleway',sans-serif;
  font-size:var(--font-size);
  background: var(--bg-card);
  color: var(--text-main);
  min-width:200px;
}
.city-select:focus{ outline:none; border-color:var(--brand-gold); }

/* === Grid & Cards === */
.condo-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin:0 auto}
@media (min-width:768px){.condo-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.condo-grid{grid-template-columns:repeat(3,1fr)}}

.card{
  position:relative; overflow:hidden; border-radius:12px; 
  background: var(--bg-card);
  border: 1px solid #333;
  box-shadow:0px 10px 20px rgba(0,0,0,0.5);
  transition:all .4s cubic-bezier(.175,.885,0,1);
  height:280px; z-index:1;
}
.card:hover{
  transform:scale(1.02); 
  box-shadow:0px 10px 30px rgba(212, 175, 55, 0.15);
  border-color: var(--brand-gold-dark);
  z-index:2;
}

.card__image-container{
  position:absolute; inset:0 0 auto 0; height:250px; overflow:hidden; z-index:1;
  transition:height .4s cubic-bezier(.175,.885,0,1);
  border-bottom: 1px solid var(--brand-gold-dark);
}
.card__img{
  width:100%; height:100%; background-position:center; background-size:cover; background-repeat:no-repeat;
  transition:transform .4s cubic-bezier(.175,.885,0,1), filter .4s ease;
}
.card__image-container::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 60%);
  opacity:0; transition:opacity .4s ease; z-index:2;
}
.card:hover .card__image-container{height:100%}
.card:hover .card__img{transform:scale(1.1); filter:brightness(.5);}
.card:hover .card__image-container::after{opacity:1}

.card__type-tag{
  position:absolute; top:1rem; left:1rem; z-index:3;
  color:#000; font-size:var(--font-size); font-weight:700; padding:.35rem .85rem; border-radius:.375rem;
  text-transform:uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.tag-lancamento{background:var(--brand-gold); color: #000;}
.tag-pronto{background:var(--white); color: #000;}

.card__favorite-btn{
  position:absolute; top:1rem; right:1rem; z-index:4;
  width:40px; height:40px; border:none; border-radius:50%; background:rgba(0,0,0,0.7);
  border: 1px solid var(--brand-gold);
  padding:8px; cursor:pointer; opacity:0; transform:translateY(-10px); transition:all .3s ease;
}
.card:hover .card__favorite-btn{opacity:1; transform:translateY(0)}
.card__favorite-btn svg{width:100%; height:100%; fill:var(--brand-gold); transition:fill .2s ease, transform .2s ease;}
.card__favorite-btn:hover{background: var(--brand-gold);}
.card__favorite-btn:hover svg{fill: #000; transform:scale(1.1)}
.card__favorite-btn.favorited svg{fill:var(--heart-red);}

.card__info{
  position:absolute; bottom:0; left:0; width:100%;
  background: rgba(0,0,0,0.5); 
  padding:6px 4px 4px; z-index:2;
  transition:all .4s cubic-bezier(.175,.885,0,1);
}
.card:hover .card__info{background:transparent;}

.card__category{font-family:'Raleway',sans-serif; text-transform:uppercase; font-size:var(--font-size); letter-spacing:2px; font-weight:500; color:var(--brand-gold); margin-bottom: 5px; display:block;}

.card__title{
  margin:5px 0 10px; font-family:'Roboto Slab',serif; font-size:var(--font-size); font-weight:700; 
  color: var(--white); transition:color .4s
}
.card:hover .card__title{color:var(--brand-gold)}

.card__address{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);font-family:'Raleway',sans-serif;font-size:13px;margin:-5px 0 1rem; transition:color .4s}
.card:hover .card__address{color:var(--white)}

.address-icon{width:16px;height:16px;fill:var(--brand-gold);flex-shrink:0;}

.card__amenities{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.card__amenity-tag{
  background: #000; border: 1px solid #333; 
  color:var(--text-muted); font-family:'Raleway',sans-serif; font-size:.75rem; padding:.25rem .6rem; border-radius:9999px; transition:all .4s
}
.card:hover .card__amenity-tag{background:rgba(212, 175, 55, 0.2); border-color: var(--brand-gold); color:var(--brand-gold)}

/* === Paginação Centralizada === */
.pagination-controls {
  display: flex;
  justify-content: center; /* Centraliza Horizontalmente */
  align-items: center; /* Centraliza Verticalmente */
  margin-top: 3rem;
  gap: 15px; /* Espaço entre os elementos */
  width: 100%; /* Ocupa largura total para permitir o center funcionar */
}

.pagination-button{
  padding:.5rem 1rem;font-weight:600;color:var(--brand-gold);
  background:rgba(0,0,0,.6); 
  border:1px solid var(--brand-gold-dark); border-radius:.375rem; cursor:pointer; transition:all .3s;
}
.pagination-button:hover:not(:disabled){background:var(--brand-gold); color:#000; border-color:var(--brand-gold)}
.pagination-button:disabled{background:rgba(255,255,255,.05); border-color:#333; color:#555; cursor:not-allowed}
.pagination-status{font-weight:600;color:var(--text-main)}

/* Categorias */
.category-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:640px){.category-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.category-grid{grid-template-columns:repeat(4,1fr)}}
.category-card{
  padding:2rem;
  background: var(--bg-card);
  border:1px solid var(--gray-300); border-radius:.5rem;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.5);
  transition:all .3s ease;
}
.category-card:hover{
  transform:translateY(-4px);
  border-color: var(--brand-gold);
  box-shadow:0 10px 15px -3px rgba(212, 175, 55,.1);
}
.category-card svg{width:3rem;height:3rem;margin:0 auto 1rem; color:var(--brand-gold); display:block;}
.category-card h3{text-align:center;font-size:var(--font-size-lg);font-weight:600;color:var(--text-main)}
.category-card:hover h3{color:var(--brand-gold)}

/* Footer */
.footer{
  background: #000;
  color: var(--brand-gold);
  text-align:center; padding:3rem 0;
  border-top: 1px solid var(--brand-gold-dark);
}
.footer .footer-subtext{font-size:var(--font-size);color:#666;margin-top:.5rem}

/* Loaders */
.page-loader{
  position:fixed; inset:0; background:var(--bg-body); z-index:9999;
  display:flex; align-items:center; justify-content:center; transition:opacity .5s, visibility .5s;
}
.content-loader{display:none; padding:4rem 0; grid-column:1 / -1; display:flex; justify-content:center; align-items:center}
.spinner{
  border:4px solid #333; border-top:4px solid var(--brand-gold); 
  border-radius:50%; width:40px;height:40px; animation:spin 1s linear infinite
}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* Mapa (Leaflet Dark) */
.map-section {padding: 0 0 4rem 0; background: var(--bg-body);}

#map-container{
  width:100%;
  height: 520px;
  margin-top: 2rem;
  border: 2px solid var(--brand-gold-dark);
  border-radius: 8px;
  box-shadow:0 0 20px rgba(0,0,0,0.5);
  background:#222;
}

/* Inversão para modo noturno */
.leaflet-layer, 
.leaflet-control-zoom-in, 
.leaflet-control-zoom-out, 
.leaflet-control-attribution { 
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); 
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 3px 14px rgba(0,0,0,0.8);
}

.filters-row{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-bottom:1.5rem;
}
.filters-left{ display:flex; align-items:center; gap:.5rem; }