/* Sitio público */

/* ── Cabecera ── */
.top { border-bottom: 1px solid var(--line); background: var(--bone); }
.top .bar { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: grid; gap: 3px; text-decoration: none; line-height: 1; margin-right: auto; }
.brand-main { font: 800 22px/1 var(--font); font-stretch: 118%; letter-spacing: -.01em; text-transform: uppercase; }
.brand-sub { font: 500 10.5px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--mute); }
.top nav { display: flex; gap: 26px; }
.top nav a { font: 500 14px/1 var(--font); text-decoration: none; color: var(--ink-2); padding: 8px 0; border-bottom: 1px solid transparent; }
.top nav a:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 760px) { .top nav { display: none; } .top .bar { height: 60px; } .brand-main { font-size: 19px; } }

/* ── Introducción ── */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding-block: clamp(40px, 8vw, 96px) clamp(32px, 5vw, 56px); }
.intro h1 {
  font: 800 clamp(40px, 7.4vw, 104px)/.94 var(--font); font-stretch: 112%; letter-spacing: -.035em; max-width: 12.5em; text-wrap: balance;
}
.intro .eyebrow { margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.intro .eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.stats { display: grid; gap: 18px; min-width: 210px; padding-bottom: 8px; }
.stats div { border-top: 1px solid var(--ink); padding-top: 10px; }
.stats dt { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.stats dd { font: 700 28px/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .intro { grid-template-columns: 1fr; gap: 28px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  .stats dd { font-size: 22px; }
}

/* ── Filtros ── */
.filters { display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(3, minmax(130px, 1fr)) auto auto; gap: 14px; align-items: end;
  padding: 18px 0; border-block: 1px solid var(--ink); }
.f-top, .f-panel { display: contents; }
.f-toggle { display: none; }
.seg { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.seg legend { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 0; margin-bottom: 6px; }
.seg .opts { display: flex; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); height: 46px; overflow: hidden; }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; height: 100%; padding: 0 14px; font: 500 14px var(--font); white-space: nowrap; color: var(--ink-2); border-right: 1px solid var(--line); }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--ink); color: var(--bone); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -4px; }
.f-clear { align-self: center; padding-top: 22px; }

.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px 18px; }
#count { font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sort { display: flex; align-items: center; gap: 10px; }
.sort span { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.sort .select { width: auto; height: 38px; font-size: 14px; background-color: transparent; }

@media (max-width: 900px) {
  .filters { grid-template-columns: 1fr; gap: 0; padding: 14px 0; }
  .f-top { display: flex; gap: 10px; }
  .f-top .f-search { flex: 1; }
  .f-toggle { display: inline-flex; }
  .f-toggle .badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--ink); color: var(--bone); font: 600 11px var(--font); padding: 0 6px; }
  .f-panel { display: none; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 16px; }
  .f-panel.open { display: grid; }
  .f-panel .seg, .f-panel .f-clear { grid-column: 1 / -1; }
  .f-clear { padding-top: 0; justify-self: start; }
  .sort span { display: none; }
}

/* ── Tarjetas ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 40px 24px; padding-bottom: 72px; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 34px; } }
.card { position: relative; display: grid; gap: 14px; align-content: start; }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: var(--r); }
.card-link:focus-visible { outline-offset: 6px; }
.ph { position: relative; aspect-ratio: 4 / 3; background: #e4dfd2; overflow: hidden; border-radius: var(--r); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.card:hover .ph img { transform: scale(1.035); }
.ph-empty { display: grid; place-items: center; height: 100%; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.tag { position: absolute; top: 12px; left: 12px; background: var(--ink); color: var(--bone); padding: 7px 10px 6px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.card h3 { font: 700 20px/1.2 var(--font); letter-spacing: -.01em; }
.card h3 .b { display: block; font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 7px; }
.card h3 .v { font-weight: 400; color: var(--ink-2); }
.specs { display: flex; flex-wrap: wrap; font: 400 13px/1 var(--mono); color: var(--ink-2); margin-top: 10px; }
.specs li + li::before { content: ''; display: inline-block; width: 1px; height: 11px; background: var(--line-2); margin: 0 11px; vertical-align: -1px; }
.card .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.price { font: 800 26px/1 var(--font); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.ask { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r);
  font: 600 13px var(--font); text-decoration: none; color: var(--ink); transition: .15s; }
.ask svg { width: 16px; height: 16px; }
.ask:hover { background: var(--wa); border-color: var(--wa); color: #fff; }

.skel .ph { background: linear-gradient(100deg, #e4dfd2 30%, #ece8dc 50%, #e4dfd2 70%); background-size: 300% 100%; animation: sh 1.4s infinite linear; }
.skel .line { height: 14px; background: #e4dfd2; border-radius: 2px; }
@keyframes sh { to { background-position: -150% 0; } }

.empty { grid-column: 1 / -1; padding: 56px 0 32px; max-width: 520px; }
.empty h3 { font: 700 26px/1.15 var(--font); letter-spacing: -.02em; margin-bottom: 10px; }
.empty p { color: var(--ink-2); margin-bottom: 22px; }
.empty .row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Entregados ── */
.sold-sec { padding-block: 0 64px; }
.sold-sec .sec-head { border-top: 1px solid var(--ink); padding-top: 40px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 26px; }
.sec-head h2 { font: 800 clamp(24px, 3.4vw, 36px)/1 var(--font); font-stretch: 108%; letter-spacing: -.03em; }
.sold-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.sold-card { display: grid; gap: 10px; }
.sold-card .ph { aspect-ratio: 4 / 3; }
.sold-card img { filter: grayscale(1) contrast(.95); opacity: .78; }
.sold-card .tag { top: 8px; left: 8px; font-size: 10px; padding: 6px 8px 5px; }
.sold-card b { display: block; font: 600 14px/1.25 var(--font); }
.sold-card small { font: 400 12px var(--mono); color: var(--mute); }
@media (max-width: 1000px) { .sold-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .sold-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .sold-card { flex: 0 0 62%; scroll-snap-align: start; }
}

/* ── Contacto ── */
.contact { background: var(--ink); color: var(--bone); }
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; padding-block: clamp(48px, 8vw, 96px); }
.contact h2 { font: 800 clamp(32px, 5.4vw, 68px)/.98 var(--font); font-stretch: 110%; letter-spacing: -.035em; margin-bottom: 20px; text-wrap: balance; }
.contact .lead { color: #b9b5a8; max-width: 34em; margin-bottom: 30px; font-size: 17px; }
.contact .btn { height: 56px; padding: 0 28px; font-size: 16px; }
.contact dl { display: grid; gap: 22px; align-content: end; }
.contact dt { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8d897c; margin-bottom: 8px; }
.contact dd { font-size: 17px; }
.contact dl div { border-top: 1px solid #3a3931; padding-top: 14px; }
.contact a:not(.btn) { text-underline-offset: 3px; }
@media (max-width: 800px) { .contact .wrap { grid-template-columns: 1fr; gap: 40px; } }

.foot-bar { background: var(--ink); color: #8d897c; border-top: 1px solid #2b2a24; }
.foot-bar .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; font: 400 12px/1.5 var(--mono); letter-spacing: .04em; }

/* ── Ficha del auto ── */
.crumbs { padding-block: 22px; font: 400 12.5px var(--mono); letter-spacing: .04em; color: var(--mute); }
.crumbs a { color: var(--ink-2); }
.d-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding-bottom: 40px; }
.gallery { min-width: 0; }
.stage { position: relative; }
.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r); background: #e4dfd2; }
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3; border: 0; padding: 0; background: none; cursor: zoom-in; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.nav-btn { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(250,248,243,.92); display: grid; place-items: center; }
.nav-btn:hover { background: #fff; }
.nav-btn svg { width: 18px; height: 18px; }
.nav-btn.prev { left: 12px; } .nav-btn.next { right: 12px; }
.counter { position: absolute; right: 12px; bottom: 12px; background: var(--ink); color: var(--bone); font: 500 12px/1 var(--mono); padding: 7px 10px 6px; letter-spacing: .06em; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.thumbs button { flex: 0 0 96px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: var(--r); overflow: hidden; background: #e4dfd2; opacity: .6; }
.thumbs button[aria-current="true"] { border-color: var(--ink); opacity: 1; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.info { position: sticky; top: 24px; display: grid; gap: 22px; }
.info h1 { font: 800 clamp(30px, 4vw, 44px)/1.02 var(--font); font-stretch: 108%; letter-spacing: -.03em; margin-top: 12px; }
.info h1 span { display: block; font-weight: 400; font-size: .6em; letter-spacing: -.01em; color: var(--ink-2); margin-top: 6px; }
.info .big-price { font: 800 clamp(34px, 4.4vw, 48px)/1 var(--font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.notice { padding: 14px 16px; border: 1px solid var(--ink); border-radius: var(--r); font-size: 15px; }
.notice b { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; display: block; margin-bottom: 4px; }
.cta { display: grid; gap: 12px; }
.cta .btn { height: 56px; font-size: 16px; }
.cta .sub { display: flex; gap: 20px; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.specs-table { border-top: 1px solid var(--ink); }
.specs-table div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.specs-table dt { font: 500 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.specs-table dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.desc-sec { max-width: 62ch; padding-bottom: 56px; }
.desc-sec h2, .more h2 { font: 800 24px/1 var(--font); font-stretch: 108%; letter-spacing: -.02em; margin-bottom: 16px; }
.desc-sec p { color: var(--ink-2); font-size: 17px; white-space: pre-line; }
.more { border-top: 1px solid var(--ink); padding-top: 36px; }
.more .grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.sticky-cta { display: none; }
@media (max-width: 860px) {
  .d-grid { grid-template-columns: 1fr; }
  .info { position: static; }
  .thumbs { display: none; }
  .gallery { margin-inline: calc(var(--gut) * -1); }
  .track { border-radius: 0; }
  .nav-btn { display: none; }
  .sticky-cta { display: flex; position: fixed; inset: auto 0 0 0; z-index: 20; align-items: center; justify-content: space-between; gap: 14px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--ink); }
  .sticky-cta .p { font: 800 22px/1 var(--font); letter-spacing: -.02em; }
  .sticky-cta .btn { height: 46px; }
  body.detail { padding-bottom: 76px; }
  .cta .btn-main { display: none; }
}

/* Visor de fotos */
.lb { border: 0; padding: 0; background: rgba(21,20,15,.96); max-width: none; max-height: none; width: 100vw; height: 100dvh; color: #fff; }
.lb::backdrop { background: #000; }
.lb img { position: absolute; inset: 56px 56px; width: calc(100% - 112px); height: calc(100% - 112px); object-fit: contain; }
.lb button { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; }
.lb button:hover { background: rgba(255,255,255,.18); }
.lb .x { top: 12px; right: 12px; } .lb .l { left: 8px; top: 50%; } .lb .r { right: 8px; top: 50%; }
.lb svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .lb img { inset: 56px 0; width: 100%; height: calc(100% - 112px); } }