.zonas {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 8px var(--pad-x) 20px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zonas::-webkit-scrollbar { display: none; }

.zona {
  flex: 0 0 auto; scroll-snap-align: start;
  padding: 8px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  background: var(--surface); font-size: 13px; color: var(--ink); font-weight: 400; white-space: nowrap;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  font-family: inherit; line-height: 1; text-align: center;
  min-height: 36px;
}
.zona:active { transform: scale(0.96); }

.zona.is-active {
  border-color: var(--accent); background: var(--accent-soft);
}

.rail {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-left: 20px;
  padding: 4px var(--pad-x) 10px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.prop {
  flex: 0 0 78%; scroll-snap-align: start;
  background: var(--surface); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-soft); cursor: pointer;
  transition: transform 0.15s;
}
.prop:active { transform: scale(0.985); }
.prop .pic { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.prop .pic.a { background: linear-gradient(160deg, #D8C49C 0%, #8E6A41 100%); }
.prop .pic.b { background: linear-gradient(160deg, #C8B89A 0%, #6F563B 100%); }
.prop .pic.c { background: linear-gradient(160deg, #E0CDB0 0%, #A98358 100%); }
.prop .pic::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 55%; background: var(--surface); clip-path: polygon(2% 100%, 0% 35%, 50% 0%, 100% 35%, 98% 100%); }
.prop .pic.pic--img::after { display: none; }
.prop .badge { position: absolute; top: 12px; left: 12px; background: var(--surface); color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 10px; border-radius: var(--radius-pill); }
.prop .body { padding: 18px 18px 20px; }
.prop .loc { font-size: 11.5px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.prop h3 { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: clamp(20px, 2.2vw, 22px); line-height: 1.15; margin: 5px 0 7px; letter-spacing: -0.01em; }
.prop .meta { font-size: clamp(11.5px, 1.3vw, 12.5px); color: var(--ink-mute); margin-bottom: 0; }

.swipe-hint { display: flex; align-items: center; gap: 8px; margin: 2px var(--pad-x) 0; font-size: 12.5px; color: var(--ink-faint); }
.swipe-hint .dash { flex: 1; height: 1px; background: var(--line-soft); }
.swipe-hint span { display: inline-flex; align-items: center; gap: 6px; }
.swipe-hint .ar { animation: nudge 1.6s ease-in-out infinite; }

@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.prop:focus-visible { outline: 2px solid var(--accent-2); outline-offset: var(--focus-offset); }

.preventa-note {
  margin: 0 var(--pad-x) var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-2-soft);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.preventa-note strong { color: var(--accent-2-hover); font-weight: 700; }
.preventa-note a { color: var(--accent-2-hover); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.preventa-note a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: var(--focus-offset); }

/* ─── Tablet+ (≥ 600px): grid ────────────────────────────────────── */
@media (width >= 600px) {
  .swipe-hint { display: none; }

  .rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    padding: 4px var(--pad-x) 10px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .prop { flex: initial; }
  .prop:active { transform: none; }
}

/* ─── Desktop (≥ 1024px) ────────────────────────────────────────── */
@media (width >= 1024px) {
  .rail { 
    grid-template-columns: repeat(3, 1fr); 
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .prop { 
    flex: 0 0 calc(33.333% - 22px);
    scroll-snap-align: start;
  }
  .prop h3 { font-size: clamp(22px, 2.4vw, 24px); }
}

/* ─── Hover ──────────────────────────────────────────────────────── */
@media (hover: hover) {
  .prop:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .zona:hover { border-color: var(--accent); color: var(--accent); }
  .zona.is-active:hover { background: var(--accent-soft); }
  .preventa-note a:hover { color: var(--accent-2); }
}