/* ============================================================
   Petronas — Páginas internas (propiedades, asesores, blog, contacto)
   ============================================================ */

.page-hero { min-height: 340px; display: flex; align-items: flex-end; padding-bottom: 40px; }
.page-hero .container { width: min(var(--container), 92%); padding-top: 100px; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-hero .crumb { color: var(--muted); font-size: .85rem; margin-bottom: .6rem; }
.page-hero .crumb a:hover { color: var(--gold-500); }

.filter-bar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.2rem; box-shadow: var(--shadow); display: grid; gap: 1rem;
  grid-template-columns: 2fr repeat(2, 1fr) 1fr 1fr;
  margin-bottom: 2rem; align-items: end;
}
.filter-bar .field { margin-bottom: 0; }
.filter-bar .search-box { position: relative; }
.filter-bar .search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.filter-bar .search-box input { padding-left: 40px; }
.results-info { color: var(--muted); font-size: .9rem; margin-bottom: 1.2rem; }

.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.li-card { display: flex; flex-direction: column; }
.li-card .img { position: relative; height: 210px; background-size: cover; background-position: center; }
.li-card .img .price-badge { position: absolute; bottom: 12px; left: 12px; background: rgba(8,32,36,.86); color: #fff; padding: .4rem .8rem; border-radius: 9px; font-weight: 800; font-size: .95rem; }
.li-card .img .badge { position: absolute; top: 12px; left: 12px; }
.li-card .body { padding: 1.2rem; display: flex; flex-direction: column; flex: 1; }
.li-card h3 { font-size: 1.12rem; margin: .3rem 0 .4rem; }
.li-card .loc { color: var(--text-soft); font-size: .85rem; display: flex; gap: .3rem; align-items: center; margin-bottom: .6rem; }
.li-card .loc svg { width: 1em; height: 1em; color: var(--gold-500); flex: none; }
.li-card .attrs { display: flex; gap: .9rem; color: var(--text-soft); font-size: .85rem; margin-bottom: .8rem; flex-wrap: wrap; }
.li-card .attrs span { display: inline-flex; gap: .3rem; align-items: center; }
.li-card .attrs svg { width: 1em; height: 1em; color: var(--gold-500); }
.li-card .foot { margin-top: auto; display: flex; gap: .6rem; }

/* Equipo listado */
.team-listing { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.team-listing .team-card { text-align: center; padding: 1.8rem; }
.team-listing .team-card .photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; border: 4px solid var(--gold-500); }

/* Blog listado */
.blog-listing { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.blog-listing .blog-card .img { height: 200px; }

/* Artículo / detalle blog */
.article-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); max-width: 860px; margin-inline: auto; }
.article-body h1 { font-size: 2rem; margin-bottom: .5rem; }
.article-body .meta { color: var(--muted); margin-bottom: 1.4rem; }
.article-body img { border-radius: var(--radius-sm); margin-bottom: 1.2rem; }
.article-body .content { color: var(--text-soft); font-size: 1.05rem; line-height: 1.8; }
.article-body .content h3 { margin: 1.2rem 0 .5rem; color: var(--text); }
.article-body .content p { margin-bottom: 1rem; }
.article-body .content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }

@media (max-width: 900px) {
  .filter-bar { grid-template-columns: repeat(2, 1fr); }
  .listing-grid, .team-listing, .blog-listing { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .filter-bar { grid-template-columns: 1fr; }
  .listing-grid, .team-listing, .blog-listing { grid-template-columns: 1fr; }
}