/* ============================================================
   Coopealianza Propiedades — Frontend
   Usa las variables del panel: --cap-primario/secundario/acento/texto/fondo-tarjeta/font/fs-*
   ============================================================ */
.cap-single, .cap-archive-body, .cap-hero { font-family: var(--cap-font, "Cabin", system-ui, sans-serif); color: var(--cap-texto, #23282d); }
.cap-single *, .cap-archive-body *, .cap-hero * { box-sizing: border-box; }
.cap-ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ===================== FICHA (single) ===================== */
.cap-single { background: #fff; padding: 30px 16px 60px; }
.cap-single-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; }
.cap-single-main { min-width: 0; }

/* Slider */
.cap-slider-track { position: relative; aspect-ratio: 16 / 10; border-radius: 14px 14px 0 0; overflow: hidden; background: #e9edf1; }
.cap-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; cursor: zoom-in; }
.cap-slide.is-active { opacity: 1; }
.cap-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; background: rgba(255,255,255,.85); color: var(--cap-primario, #1E54A2); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.18); z-index: 3; }
.cap-nav:hover { background: #fff; }
.cap-prev { left: 14px; } .cap-next { right: 14px; }
.cap-slider-badge { position: absolute; right: 0; bottom: 0; background: var(--cap-secundario, #FF8200); color: #fff; font-weight: 700; padding: 12px 26px; border-radius: 14px 0 0 0; z-index: 3; }
.cap-slider-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; z-index: 3; }
.cap-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.cap-dot.is-active { background: #fff; }

/* Contenedor de detalles */
.cap-details { background: #f0f1f3; border-radius: 0 0 14px 14px; padding: 28px 30px 30px; }
.cap-details-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
.cap-title { font-size: var(--cap-fs-h1, 28px); margin: 0 0 8px; color: var(--cap-texto, #23282d); }
.cap-address { color: #4a5568; line-height: 1.55; margin: 0 0 18px; }
.cap-sub { font-size: 16px; margin: 16px 0 8px; color: var(--cap-texto, #23282d); }
.cap-lote { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cap-lote li { display: flex; align-items: center; gap: 9px; color: #333; }
.cap-lote .cap-ico { color: #7a828c; }
.cap-lote a { color: var(--cap-primario, #1E54A2); text-decoration: none; display: flex; align-items: center; gap: 9px; }
.cap-lote a .cap-ico { color: var(--cap-primario, #1E54A2); }
.cap-price { font-size: 26px; font-weight: 800; color: var(--cap-primario, #1E54A2); margin: 4px 0 0; }

.cap-blue-h { color: var(--cap-primario, #1E54A2); font-size: var(--cap-fs-h2, 20px); margin: 0 0 14px; }
.cap-chars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cap-chars li { color: #333; font-size: 15px; }
.cap-char-l { color: #4a5568; }
.cap-char-v { font-weight: 700; }

.cap-downloads { display: flex; flex-direction: column; gap: 10px; }
.cap-doc { display: block; text-align: center; background: #8a8f98; color: #fff; padding: 11px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; transition: background .15s ease; }
.cap-doc:hover { background: #6f747c; color: #fff; }
.cap-gate { background: #fff; border: 1px dashed #cfd6dd; border-radius: 10px; padding: 16px; text-align: center; }
.cap-gate p { margin: 0 0 12px; color: #4a5568; font-size: 14px; }
.cap-muted { color: #8a94a0; }
.cap-share { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; background: none; border: 0; color: var(--cap-primario, #1E54A2); cursor: pointer; font-weight: 600; font-family: inherit; font-size: 15px; padding: 0; }

.cap-gallery-block { margin-top: 26px; }
.cap-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.cap-thumb { width: 150px; height: 100px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: border-color .15s ease, opacity .15s ease; }
.cap-thumb:hover { opacity: .85; }
.cap-thumb.is-active { border-color: var(--cap-primario, #1E54A2); }

/* Caja de contacto */
.cap-single-side { position: sticky; top: 20px; }
.cap-contact { background: var(--cap-primario, #1E54A2); border-radius: 14px; padding: 26px 24px; }
.cap-contact-h { color: #fff; font-size: 24px; margin: 0 0 20px; }
.cap-cbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; margin-bottom: 14px; color: #fff; transition: filter .15s ease; }
.cap-cbtn:last-child { margin-bottom: 0; }
.cap-cbtn:hover { filter: brightness(1.07); color: #fff; }
.cap-cbtn-cta { background: var(--cap-secundario, #FF8200); }
.cap-cbtn-wa, .cap-cbtn-tel { background: var(--cap-acento, #40C1AC); }

.cap-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; background: var(--cap-primario, #1E54A2); color: #fff; padding: 12px 24px; border-radius: 999px; text-decoration: none; font-weight: 700; }
.cap-back:hover { filter: brightness(1.07); color: #fff; }

.cap-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 10px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
.cap-btn-primary { background: var(--cap-primario, #1E54A2); color: #fff; }

/* Lightbox */
.cap-lightbox { position: fixed; inset: 0; background: rgba(8,15,30,.93); z-index: 100000; display: flex; align-items: center; justify-content: center; }
.cap-lightbox[hidden] { display: none; }
.cap-lb-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.cap-lb-close, .cap-lb-prev, .cap-lb-next { position: absolute; border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cap-lb-close { top: 20px; right: 24px; width: 46px; height: 46px; font-size: 28px; }
.cap-lb-prev, .cap-lb-next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; }
.cap-lb-prev { left: 24px; } .cap-lb-next { right: 24px; }
.cap-lb-close:hover, .cap-lb-prev:hover, .cap-lb-next:hover { background: rgba(255,255,255,.3); }

/* ===================== LISTADO (archive) ===================== */
.cap-hero { background: var(--cap-primario, #1E54A2); padding: 46px 16px; }
.cap-hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 290px 1fr; gap: 34px; align-items: center; }
.cap-hero-title { color: #fff; font-size: 38px; margin: 0 0 16px; line-height: 1.1; }
.cap-hero-text p { color: rgba(255,255,255,.92); margin: 0 0 10px; line-height: 1.45; }

.cap-filters-bar { background: rgba(255,255,255,.14); border-radius: 16px; padding: 22px; }
.cap-search-row { display: flex; gap: 10px; margin-bottom: 14px; }
.cap-search-row input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 14px 22px; font-size: 15px; font-family: inherit; }
.cap-btn-search { display: inline-flex; align-items: center; gap: 8px; background: #12346c; color: #fff; border: 0; border-radius: 999px; padding: 0 28px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.cap-btn-search:hover { background: #0e2a57; }
.cap-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.cap-pills:last-child { margin-bottom: 0; }
.cap-pills select, .cap-pills input { flex: 1; min-width: 130px; border: 0; border-radius: 999px; padding: 12px 18px; font-size: 14px; font-family: inherit; background: #fff; color: var(--cap-texto, #23282d); }
.cap-clear-link { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.cap-clear-link:hover { background: rgba(255,255,255,.32); color: #fff; }

.cap-archive-body { background: #fff; padding: 40px 16px 64px; }
.cap-archive-inner { max-width: 1200px; margin: 0 auto; }
.cap-results-count { color: #6a7480; margin: 0 0 22px; font-size: 15px; }

.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.cap-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(20,40,75,.08); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.cap-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,40,75,.14); }
.cap-card-media { position: relative; display: block; aspect-ratio: 16 / 11; background: #e9edf1; }
.cap-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-card-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #aeb6be; font-size: 14px; }
.cap-card-media .cap-badge { position: absolute; top: 10px; left: 10px; }
.cap-badge { display: inline-block; border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 700; background: #eef2f7; color: #4a5568; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.cap-badge.is-nueva { background: #E7F0FB; color: #1E5AA8; }
.cap-badge.is-oportunidad { background: #FFF3E2; color: #B5670E; }
.cap-badge.is-remate { background: #FBEAEA; color: #B23030; }
.cap-badge.is-destacada { background: #E7F6EC; color: #1E7E45; }
.cap-badge.is-vendida { background: #ECECEE; color: #6A7480; }

.cap-card-body { background: #f0f1f3; padding: 16px 18px 18px; flex: 1; }
.cap-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cap-card-headtext { min-width: 0; }
.cap-card-title { font-size: 17px; margin: 0 0 4px; line-height: 1.3; }
.cap-card-title a { color: var(--cap-texto, #23282d); text-decoration: none; }
.cap-card-title a:hover { color: var(--cap-primario, #1E54A2); }
.cap-card-price { color: var(--cap-primario, #1E54A2); font-weight: 800; font-size: 18px; margin: 0; }
.cap-card-more { flex: 0 0 auto; background: #8a8f98; color: #fff; padding: 8px 18px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s ease; }
.cap-card-more:hover { background: #6f747c; color: #fff; }
.cap-card-tipo { color: #4a5568; margin: 12px 0 10px; font-weight: 600; }
.cap-card-specs { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: #6a7480; font-size: 13px; }
.cap-spec-item { display: inline-flex; align-items: center; gap: 6px; }
.cap-spec-item .cap-ico { color: #8a94a0; }
.cap-card-map { display: inline-flex; align-items: center; gap: 6px; color: var(--cap-primario, #1E54A2); text-decoration: none; }
.cap-card-map .cap-ico { color: var(--cap-primario, #1E54A2); }

.cap-empty { grid-column: 1 / -1; background: #fff; border: 1px dashed #cfd6dd; border-radius: 14px; padding: 44px; text-align: center; color: #6a7480; }

/* Paginación */
.cap-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; }
.cap-page { min-width: 40px; height: 40px; padding: 0 12px; border: 1.5px solid #e2e6ea; background: #fff; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--cap-texto, #23282d); font-family: inherit; }
.cap-page:hover { border-color: var(--cap-primario, #1E54A2); }
.cap-page.is-active { background: var(--cap-primario, #1E54A2); color: #fff; border-color: var(--cap-primario, #1E54A2); }
.cap-page[disabled] { opacity: .45; cursor: default; }
.cap-grid-loader { display: flex; justify-content: center; padding: 30px; }
.cap-grid-loader[hidden] { display: none; }
.cap-spinner-f { width: 34px; height: 34px; border: 4px solid #dce3ea; border-top-color: var(--cap-primario, #1E54A2); border-radius: 50%; animation: cap-spin-f .8s linear infinite; }
@keyframes cap-spin-f { to { transform: rotate(360deg); } }
.cap-grid.is-loading { opacity: .5; pointer-events: none; }

/* ===================== Responsive ===================== */
@media (max-width: 980px) {
    .cap-single-grid { grid-template-columns: 1fr; }
    .cap-single-side { position: static; }
    .cap-hero-inner { grid-template-columns: 1fr; gap: 20px; }
    .cap-hero-title { font-size: 30px; }
}
@media (max-width: 760px) {
    .cap-details-cols { grid-template-columns: 1fr; gap: 22px; }
    .cap-title { font-size: var(--cap-fs-h1-movil, 24px); }
    .cap-blue-h { font-size: var(--cap-fs-h2-movil, 19px); }
    .cap-pills select, .cap-pills input { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cap-slide, .cap-card, .cap-cbtn, .cap-nav, .cap-thumb { transition: none; }
    .cap-spinner-f { animation: none; }
}