/* Páginas por zona y operación (/venta/{zona}/, /arriendo/{zona}/) y sus índices.
   Mobile-first. Reutiliza .c21-results-* y .c21-grid de frontend.css (mismas tarjetas
   que /propiedades/); aquí solo lo que es propio de estas páginas. Sin ventanas
   emergentes ni elementos que tapen el contenido. */

.c21-zona { font-family: 'Instrument Sans', sans-serif; }

/* Hero */
.c21-zona .c21-results-hero__inner { padding: 22px 20px 24px; gap: 14px; }
.c21-zona .c21-results-hero__title { font-size: 28px; line-height: 1.12; }
.c21-zona-resumen { margin: 0; font-size: 16px; line-height: 1.45; color: #D8D3C7 !important; }
.c21-zona-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 2px; }
.c21-zona-wa {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px;
  background: #25D366; color: #08331a !important; font-size: 15px; font-weight: 700; text-decoration: none;
}
.c21-zona-wa:hover { background: #1fbd5a; }
.c21-zona-switch { color: #BEAF87 !important; font-size: 15px; font-weight: 600; text-decoration: none; }
.c21-zona-switch:hover { text-decoration: underline; }

/* Cuerpo */
.c21-zona .c21-results-body { padding: 20px 20px 44px; }
.c21-zona .c21-grid { margin-top: 4px; }

/* Cercanos, intro, FAQ, propietarios, enlaces */
.c21-zona-nearby { margin-top: 34px; }
.c21-zona-nearby h2, .c21-zona-intro h2, .c21-zona-faq h2, .c21-zona-links h2 {
  margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #141414;
}
.c21-zona-intro, .c21-zona-faq { margin-top: 40px; max-width: 820px; color: #2A2A28; }
.c21-zona-intro p, .c21-zona-faq p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.c21-zona-faq h3 { margin: 18px 0 6px; font-size: 17px; font-weight: 700; color: #141414; }
.c21-zona-faq p { margin-bottom: 0; }

.c21-zona-owner {
  display: flex; flex-direction: column; gap: 14px; margin-top: 44px; padding: 24px 22px; border-radius: 22px;
  background: #141414; color: #fff;
}
.c21-zona-owner h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #fff; }
.c21-zona-owner p { margin: 0; font-size: 15px; color: #D8D3C7; }
.c21-zona-owner__btn {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border-radius: 999px;
  background: #BEAF87; color: #141414 !important; font-size: 15px; font-weight: 700; text-decoration: none;
}
.c21-zona-owner__btn:hover { background: #AE9F77; }

.c21-zona-links { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 40px; }
.c21-zona-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c21-zona-links li a {
  display: inline-block; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid #E6E2D8;
  color: #1A1A1A; font-size: 14px; font-weight: 600; text-decoration: none;
}
.c21-zona-links li a:hover { border-color: #BEAF87; color: #7A6A3C; }

/* Índices /venta/ y /arriendo/ */
.c21-zona-hub-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.c21-zona-hub-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px;
  border-radius: 22px; overflow: hidden; background: #141414; color: #fff !important; text-decoration: none; padding: 18px;
}
.c21-zona-hub-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c21-zona-hub-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.05) 62%); }
.c21-zona-hub-card__name, .c21-zona-hub-card__n { position: relative; z-index: 1; }
.c21-zona-hub-card__name { font-size: 22px; font-weight: 700; }
.c21-zona-hub-card__n { font-size: 14px; color: #D8D3C7; margin-top: 2px; }
.c21-zona-hub-card:hover .c21-zona-hub-card__name { text-decoration: underline; }

@media (min-width: 700px) {
  .c21-zona .c21-results-hero__inner { padding: 28px 40px 30px; }
  .c21-zona .c21-results-hero__title { font-size: 38px; }
  .c21-zona .c21-results-body { padding: 24px 40px 56px; }
  .c21-zona-owner { flex-direction: row; align-items: center; justify-content: space-between; }
  .c21-zona-links { grid-template-columns: 1fr 1fr; }
  .c21-zona-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .c21-zona-hub-grid { grid-template-columns: repeat(3, 1fr); }
}