/**
 * Vida Costera — Páginas de comuna (/propiedades-en-…/).
 *
 * Reutiliza los tokens y la tarjeta de propiedad que ya define el sitio
 * (module-nav.php): acá solo va lo propio de esta página.
 */

.vc-com {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 72px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--vc-fg);
}

/* ── Miga de pan ── */
.vc-com-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 22px 0 0; font-size: .78rem; color: var(--vc-muted);
}
.vc-com-crumbs a { color: var(--vc-muted); text-decoration: none; }
.vc-com-crumbs a:hover { color: var(--vc-primary); }
.vc-com-crumbs span[aria-current] { color: var(--vc-fg); font-weight: 600; }

/* ── Encabezado ── */
.vc-com-hero { padding: 18px 0 30px; max-width: 820px; }
.vc-com-hero h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 400; line-height: 1.12; letter-spacing: -.01em;
  margin: 0 0 14px;
}
.vc-com-lede { font-size: 1.02rem; line-height: 1.75; color: #3B4160; margin: 0 0 18px; }
.vc-com-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-com-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vc-prim-lt); color: var(--vc-primary);
  border-radius: 100px; padding: 5px 13px; font-size: .78rem; font-weight: 600;
}
.vc-com-pill.is-plain { background: var(--vc-bg2); color: var(--vc-muted); }

/* ── Secciones ── */
.vc-com-sec { margin: 44px 0 0; }
.vc-com-sec > h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 400;
  margin: 0 0 6px;
}
.vc-com-sec > p.vc-com-sub { color: var(--vc-muted); font-size: .9rem; margin: 0 0 20px; }

/* ── Grilla de propiedades (misma tarjeta del resto del sitio) ── */
.vc-com-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
}

/* ── Tarjetas de comuna (índice del litoral) ── */
.vc-com-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.vc-com-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--vc-card); border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius); padding: 18px 20px;
  box-shadow: var(--vc-shadow-s); transition: box-shadow .25s, transform .25s;
}
.vc-com-card:hover { box-shadow: var(--vc-shadow-m); transform: translateY(-3px); }
.vc-com-card strong { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: 3px; }
.vc-com-card em { font-style: normal; font-size: .78rem; color: var(--vc-primary); font-weight: 600; }
.vc-com-card p { margin: 8px 0 0; font-size: .82rem; line-height: 1.55; color: var(--vc-muted); }

/* ── Sectores ── */
.vc-com-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-com-chips span {
  background: var(--vc-card); border: 1px solid var(--vc-border);
  border-radius: 100px; padding: 6px 14px; font-size: .82rem; color: #3B4160;
}

/* Cobertura del litoral: la comuna con propiedades publicadas se distingue de
   aquella en la que trabajamos pero hoy no tenemos nada. El número es el dato
   que las separa, así que el color no carga solo con esa diferencia. */
.vc-com-chips span.is-live {
  border-color: var(--vc-primary); color: var(--vc-primary); font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
}
.vc-com-chips span.is-live b {
  background: var(--vc-primary); color: #fff; font-weight: 600;
  border-radius: 100px; min-width: 18px; padding: 1px 6px;
  font-size: .72rem; text-align: center;
}

/* ── Lectura de mercado ── */
.vc-com-market {
  background: var(--vc-card); border: 1px solid var(--vc-border);
  border-left: 3px solid var(--vc-primary);
  border-radius: var(--vc-radius); padding: 20px 22px;
}
.vc-com-market-nums { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 12px; }
.vc-com-market-nums div { display: flex; flex-direction: column; gap: 2px; }
.vc-com-market-nums strong {
  font-family: 'Instrument Serif', Georgia, serif; font-size: 1.7rem; font-weight: 400; line-height: 1;
}
.vc-com-market-nums span { font-size: .74rem; color: var(--vc-muted); text-transform: uppercase; letter-spacing: .05em; }
.vc-com-market p { margin: 0; font-size: .88rem; line-height: 1.65; color: #3B4160; }

/* ── Preguntas ── */
.vc-com-faq details {
  background: var(--vc-card); border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius); padding: 14px 18px; margin-bottom: 10px;
}
.vc-com-faq summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
.vc-com-faq p { margin: 10px 0 0; font-size: .89rem; line-height: 1.7; color: #3B4160; }

/* ── Cierre ── */
.vc-com-cta {
  margin-top: 48px; background: #0a1e2e; color: #fff;
  border-radius: 16px; padding: 34px 32px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.vc-com-cta h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 1.55rem; margin: 0 0 6px; color: #fff;
}
.vc-com-cta p { margin: 0; color: #b8cfe2; font-size: .9rem; max-width: 520px; line-height: 1.6; }
.vc-com-btn {
  display: inline-block; background: var(--vc-primary); color: #fff; text-decoration: none;
  border-radius: 100px; padding: 13px 28px; font-weight: 600; font-size: .92rem;
  transition: filter .2s;
}
.vc-com-btn:hover { filter: brightness(1.1); color: #fff; }

/* ── Enlaces a otras comunas ── */
.vc-com-near { display: flex; flex-wrap: wrap; gap: 10px; }
.vc-com-near a {
  background: var(--vc-card); border: 1px solid var(--vc-border); border-radius: 100px;
  padding: 8px 16px; font-size: .85rem; color: #3B4160; text-decoration: none; font-weight: 500;
}
.vc-com-near a:hover { border-color: var(--vc-primary); color: var(--vc-primary); }

@media (max-width: 640px) {
  .vc-com { padding: 0 16px 56px; }
  .vc-com-cta { padding: 26px 22px; }
}