/* =====================================================================
   Catalogo · catálogo público (storefront). Sin shell de Bricks.
   Usa tokens del PDS (--pr-*, rampas) — cero hex suelto.
   ===================================================================== */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--pr-bg); color: var(--pr-text); font-family: 'Hind', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* ---------- Topbar ---------- */
.cpx-topbar {
  background: var(--pr-surface);
  border-bottom: 1px solid var(--pr-border);
  padding: var(--pr-space-3) var(--pr-space-4);
  display: flex;
  align-items: center;
  gap: var(--pr-space-3);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
}
.cpx-topbar .cpx-logo { display: inline-flex; align-items: center; }
.cpx-topbar .cpx-logo img { height: 34px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; display: block; }
.cpx-topbar .cpx-spacer { flex: 1; }
a.cpx-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--pr-primary); text-decoration: none;
  font-size: var(--pr-fs-md); font-weight: 600;
  padding: 8px 16px; border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius); background: var(--pr-surface);
  white-space: nowrap;
}
a.cpx-back:hover { background: var(--gray-50); border-color: var(--pr-primary); }

.cpx-topbar-contacto {
  display: flex; align-items: center; gap: var(--pr-space-4); flex-wrap: wrap;
  font-size: var(--pr-fs-sm);
}
.cpx-contacto-dir, .cpx-contacto-tel {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--pr-text); text-decoration: none;
}
.cpx-contacto-dir:hover, .cpx-contacto-tel:hover { color: var(--pr-primary-strong); }
.cpx-topbar-contacto svg { width: 15px; height: 15px; flex: none; color: var(--pr-primary); }
.cpx-contacto-dir-info { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.cpx-contacto-dir-estrellas { display: inline-flex; gap: 1px; }
.cpx-contacto-dir-estrellas svg { width: 11px; height: 11px; color: var(--pr-warning); }
.cpx-contacto-toggle {
  border: 1px solid var(--pr-border); background: var(--pr-surface);
  color: var(--pr-primary); font-weight: 600; font-family: inherit;
  font-size: var(--pr-fs-sm); padding: 6px 12px; border-radius: var(--pr-radius); cursor: pointer;
}
.cpx-visitanos {
  display: inline-flex; align-items: center;
  color: var(--pr-primary-strong); font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; font-size: var(--pr-fs-xs);
}
@media (max-width: 820px) {
  .cpx-topbar-contacto { width: 100%; flex-direction: column; align-items: flex-start; gap: var(--pr-space-2); }
  /* En mobile el "Volver" se muda a la barra sticky de abajo (junto al CTA de WhatsApp). */
  .cpx-topbar .cpx-back { display: none; }
}

/* ---------- Banner ---------- */
.cpx-banner { position: relative; background: var(--gray-50); }
.cpx-banner-img { width: 100%; aspect-ratio: 16 / 5; max-height: 500px; object-fit: cover; display: block; }
.cpx-banner-texto {
  position: absolute; inset: auto 0 0 0; padding: var(--pr-space-4);
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color: #fff;
}
.cpx-banner-titulo { margin: 0; font-size: var(--pr-fs-2xl); font-weight: 700; }
.cpx-banner-sub { margin: 4px 0 0; font-size: var(--pr-fs-md); opacity: .95; }
@media (max-width: 820px) { .cpx-banner-img { max-height: 220px; } }

/* ---------- Wrap + buscador ---------- */
.cpx-wrap { max-width: 1180px; margin: 0 auto; padding: var(--pr-space-4); }

.cpx-buscador {
  position: relative;
  margin: var(--pr-space-2) 0 var(--pr-space-4);
}
.cpx-buscador .pr-input {
  padding-left: 44px; height: 48px; font-size: var(--pr-fs-md);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow);
}
.cpx-buscador .pr-input:focus { box-shadow: var(--pr-shadow-lg); }
.cpx-buscador-ic {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--pr-text-muted); pointer-events: none;
}
.cpx-buscador-ic svg { width: 18px; height: 18px; display: block; }

/* ---------- Layout 2 columnas ---------- */
.cpx-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--pr-space-4); align-items: start; }
.cpx-contenido { min-width: 0; }

.cpx-filtros {
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  padding: var(--pr-space-3);
  display: flex; flex-direction: column; gap: var(--pr-space-3);
  position: sticky; top: 84px;
}
.cpx-filtros-tit { font-size: var(--pr-fs-lg); font-weight: 700; color: var(--pr-text-strong); }
.cpx-filtros .pr-field { margin: 0; }
.cpx-filtro-rango { border: 0; padding: 0; margin: 0; }
.cpx-filtro-rango legend { padding: 0; margin-bottom: var(--pr-space-1); }
.cpx-filtro-marca { border: 0; padding: 0; margin: 0; }
.cpx-filtro-marca legend { padding: 0; margin-bottom: var(--pr-space-1); }
.cpx-filtros-limpiar { width: 100%; }

/* ---------- Filtro de marca: desplegable en árbol de 2 niveles ---------- */
.cpx-marca-campo { position: relative; }
.cpx-marca-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pr-space-2);
  width: 100%; text-align: left; font-family: inherit; font-size: var(--pr-fs-sm);
  padding: 8px 10px; border: 1px solid var(--pr-border); border-radius: var(--pr-radius);
  background: var(--pr-surface); color: var(--pr-text); cursor: pointer;
}
.cpx-marca-btn:hover { border-color: var(--pr-primary); }
.cpx-marca-campo.is-abierto .cpx-marca-btn { border-color: var(--pr-primary); }
.cpx-marca-btn-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpx-marca-btn-ic { width: 16px; height: 16px; flex: none; color: var(--pr-text-muted); transition: transform .15s; }
.cpx-marca-btn-ic svg { width: 16px; height: 16px; display: block; }
.cpx-marca-campo.is-abierto .cpx-marca-btn-ic { transform: rotate(180deg); }

.cpx-marca-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 25;
  background: var(--pr-surface); border: 1px solid var(--pr-border); border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow); padding: var(--pr-space-2);
  max-height: 320px; overflow-y: auto;
}
.cpx-marca-nodo + .cpx-marca-nodo { border-top: 1px solid var(--pr-border); }
.cpx-marca-nodo-fila { display: flex; align-items: center; gap: var(--pr-space-1); }
.cpx-marca-nodo-marca { flex: 1; min-width: 0; padding: 6px 2px; }
.cpx-marca-nodo-marca span { font-weight: 600; color: var(--pr-text-strong); overflow: hidden; text-overflow: ellipsis; }
.cpx-marca-toggle {
  flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--pr-text-muted); transition: transform .15s;
}
.cpx-marca-toggle svg { width: 16px; height: 16px; display: block; }
.cpx-marca-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.cpx-marca-nodo-modelos {
  display: flex; flex-direction: column; gap: 4px; padding: 2px 4px var(--pr-space-2) 26px;
}

/* ---------- Switch de moneda (presupuesto: ARS / USD no son comparables) ---------- */
.cpx-moneda-switch {
  display: flex; gap: 4px; padding: 3px;
  background: var(--pr-surface-2); border: 1px solid var(--pr-border); border-radius: var(--pr-radius-pill);
  margin-bottom: var(--pr-space-2);
}
.cpx-moneda-opt {
  flex: 1; font-family: inherit; font-size: var(--pr-fs-sm); font-weight: 600;
  padding: 5px 6px; border: 0; border-radius: var(--pr-radius-pill);
  background: none; color: var(--pr-text-muted); cursor: pointer;
}
.cpx-moneda-opt:hover { color: var(--pr-text-strong); }
.cpx-moneda-opt.is-activa { background: var(--pr-surface); color: var(--pr-primary-strong); box-shadow: var(--pr-shadow); }

/* ---------- Slider de rango (dos puntos arrastrables) ---------- */
.cpx-range { padding: 0 10px; }
.cpx-range-vals {
  display: flex; justify-content: space-between; gap: var(--pr-space-2);
  font-size: var(--pr-fs-sm); font-weight: 600; color: var(--pr-text-strong);
  margin-bottom: 6px;
}
.cpx-range-pista { position: relative; height: 22px; }
/* Riel de fondo */
.cpx-range-pista::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 4px; transform: translateY(-50%);
  background: var(--pr-surface-2); border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-pill);
}
/* Tramo seleccionado */
.cpx-range-fill {
  position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
  background: var(--pr-primary-fill); border-radius: var(--pr-radius-pill);
}
/* Los dos <input type=range> apilados: transparentes, sólo el thumb recibe el puntero */
.cpx-range-in {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.cpx-range-in:focus-visible { outline: none; }
.cpx-range-in::-webkit-slider-runnable-track { background: none; border: 0; }
.cpx-range-in::-moz-range-track { background: none; border: 0; }
.cpx-range-in::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--pr-primary-fill);
  box-shadow: var(--pr-shadow); cursor: grab; margin-top: 0;
}
.cpx-range-in::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--pr-primary-fill);
  box-shadow: var(--pr-shadow); cursor: grab;
}
.cpx-range-in:active::-webkit-slider-thumb { cursor: grabbing; }
.cpx-range-in:active::-moz-range-thumb { cursor: grabbing; }
.cpx-range-in:focus-visible::-webkit-slider-thumb { border-color: var(--pr-primary-strong); box-shadow: 0 0 0 3px var(--pr-primary-weak); }
.cpx-range-in:focus-visible::-moz-range-thumb { border-color: var(--pr-primary-strong); box-shadow: 0 0 0 3px var(--pr-primary-weak); }

.cpx-filtros-toggle { display: none; }

@media (max-width: 820px) {
  .cpx-layout { grid-template-columns: 1fr; }
  .cpx-filtros { position: static; }
  .cpx-filtros.is-cerrado { display: none; }
  .cpx-filtros-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--pr-space-2);
    width: 100%; background: var(--pr-surface); border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-lg); padding: var(--pr-space-3); margin-bottom: var(--pr-space-3);
    font-family: inherit; font-size: var(--pr-fs-md); font-weight: 700; color: var(--pr-text-strong); cursor: pointer;
  }
  .cpx-filtros-toggle-estado { font-weight: 400; font-size: var(--pr-fs-sm); color: var(--pr-text-muted); }
  .cpx-filtros-toggle-estado::after { content: " ▾"; display: inline-block; transition: transform .2s; }
  .cpx-filtros-toggle[aria-expanded="true"] .cpx-filtros-toggle-estado::after { transform: rotate(180deg); }
}

/* ---------- Grid + tarjetas ---------- */
.cpx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--pr-space-4);
}

.cpx-card {
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.cpx-card:hover { box-shadow: var(--pr-shadow-lg); transform: translateY(-3px); border-color: var(--pr-primary-weak); }

.cpx-card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--gray-50); }

/* Carrusel: capas apiladas, sólo la activa visible (crossfade en hover) */
.cpx-card-slider { position: absolute; inset: 0; }
.cpx-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .35s ease;
}
.cpx-card-img.is-activa { opacity: 1; }
.cpx-card-img--empty {
  position: static; opacity: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--pr-text-muted); font-size: var(--pr-fs-md);
}

.cpx-card-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
  display: flex; justify-content: center; gap: 5px;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.cpx-card-media:hover .cpx-card-dots { opacity: 1; }
.cpx-card-dot {
  width: 6px; height: 6px; border-radius: var(--pr-radius-pill);
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
  transition: background .2s ease;
}
.cpx-card-dot.is-activa { background: #fff; }
.cpx-card-share {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--pr-radius-pill);
  background: rgba(255,255,255,.92); color: var(--pr-primary-strong); cursor: pointer;
  box-shadow: var(--pr-shadow);
}
.cpx-card-share svg { width: 15px; height: 15px; display: block; }
.cpx-card-share:hover { background: #fff; }

/* Cinta diagonal "Reservado" sobre la foto — el contenedor (.cpx-card-media /
   .cpx-galeria-main-wrap) recorta con overflow:hidden lo que sobresale. */
.cpx-ribbon {
  position: absolute; top: 25px; left: -42px; z-index: 3;
  width: 170px; padding: 6px 0; text-align: center;
  background: var(--pr-danger); color: #fff;
  font-size: var(--pr-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  pointer-events: none;
}

.cpx-card-body { padding: var(--pr-space-3); display: flex; flex-direction: column; gap: var(--pr-space-2); flex: 1; }
.cpx-card-title {
  font-size: var(--pr-fs-lg); font-weight: 600; color: var(--pr-text-strong); line-height: 1.3; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(1.3em * 2);
}
.cpx-card-title:hover { color: var(--pr-primary-strong); }
.cpx-card-price { font-size: var(--pr-fs-xl); font-weight: 700; color: var(--pr-primary-strong); margin-top: auto; }
.cpx-card-actions { display: flex; flex-direction: column; gap: var(--pr-space-2); }
.cpx-card-interesa {
  width: 100%; justify-content: center;
  font-size: var(--pr-fs-md); font-weight: 700;
  padding: 11px 16px;
}
.cpx-card-interesa svg { width: 18px; height: 18px; display: block; flex: none; }
.cpx-card-detalle {
  width: 100%; justify-content: center; align-items: center; display: flex;
  font-size: var(--pr-fs-sm); font-weight: 600; white-space: nowrap;
  padding: 9px 14px; text-decoration: none;
}
.cpx-card-detalle svg { width: 16px; height: 16px; display: block; flex: none; }

/* ---------- Chips ---------- */
.cpx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cpx-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--pr-surface-2); color: var(--pr-text);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-pill);
  padding: 3px 9px; font-size: var(--pr-fs-xs); line-height: 1.5; white-space: nowrap;
}
.cpx-chip svg { width: 12px; height: 12px; display: block; flex: none; color: var(--pr-text-muted); }
.cpx-chip--ok { background: var(--pr-success-bg); border-color: transparent; color: var(--pr-success); }
.cpx-chip--ok svg { color: var(--pr-success); }
/* "Oferta": chip sólido sobre la foto (esquina inferior derecha, libre —
   la cinta "Reservado" ocupa la superior izquierda y "Compartir" la superior
   derecha). No excluyente con "Reservado": un auto puede mostrar las dos
   cosas a la vez, por eso van en esquinas distintas. */
.cpx-chip-oferta {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--pr-success); color: #fff;
  border-radius: var(--pr-radius);
  padding: 5px 12px; font-size: var(--pr-fs-sm); font-weight: 700; line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.cpx-chip-oferta svg { width: 13px; height: 13px; display: block; flex: none; }

/* ---------- Paginación / vacío / footer ---------- */
.cpx-paginacion { display: flex; justify-content: center; align-items: center; gap: var(--pr-space-3); margin-top: var(--pr-space-5); }
.cpx-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--pr-space-2);
  padding: var(--pr-space-5) var(--pr-space-4);
  color: var(--pr-text-muted); grid-column: 1 / -1;
}
.cpx-empty-ic {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--pr-surface-2); color: var(--pr-text-muted);
  margin-bottom: var(--pr-space-2);
}
.cpx-empty-ic svg { width: 26px; height: 26px; }
.cpx-empty-titulo { font-size: var(--pr-fs-lg); font-weight: 600; color: var(--pr-text); }
.cpx-empty-texto { font-size: var(--pr-fs-sm); color: var(--pr-text-muted); max-width: 360px; }
.cpx-empty-btn, .cpx-empty-acciones { margin-top: var(--pr-space-2); }
.cpx-empty-acciones { display: flex; gap: var(--pr-space-3); flex-wrap: wrap; justify-content: center; }
.cpx-empty-spinner {
  width: 32px; height: 32px; margin-bottom: var(--pr-space-2);
  border: 3px solid var(--pr-surface-2); border-top-color: var(--pr-primary);
  border-radius: 50%; animation: cpx-spin .8s linear infinite;
}
@keyframes cpx-spin { to { transform: rotate(360deg); } }

/* ---------- Skeleton de carga — modal "Ver detalle" ---------- */
.cpx-skel-foto {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--pr-radius-lg); background: var(--gray-50);
  display: flex; align-items: center; justify-content: center;
}
.cpx-skel-line, .cpx-skel-pill, .cpx-skel-fichatec-fila {
  background: linear-gradient(90deg, var(--pr-surface-2) 25%, var(--gray-50) 50%, var(--pr-surface-2) 75%);
  background-size: 200% 100%;
  animation: cpx-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--pr-radius);
}
.cpx-skel-line { height: 14px; margin-bottom: var(--pr-space-3); }
.cpx-skel-titulo { height: 26px; width: 65%; }
.cpx-skel-precio { height: 22px; width: 38%; }
.cpx-skel-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--pr-space-3); }
.cpx-skel-pill { display: inline-block; height: 22px; width: 74px; border-radius: var(--pr-radius-pill); }
.cpx-skel-desc { width: 100%; }
.cpx-skel-desc-short { width: 55%; }
.cpx-skel-fichatec-tit { height: 18px; width: 35%; }
.cpx-skel-fichatec-fila { height: 16px; width: 100%; margin-bottom: var(--pr-space-3); }
.cpx-skel-fichatec-fila:nth-child(2) { width: 88%; }
.cpx-skel-fichatec-fila:nth-child(3) { width: 92%; }
.cpx-skel-fichatec-fila:last-child { margin-bottom: 0; }

@keyframes cpx-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cpx-skel-line, .cpx-skel-pill, .cpx-skel-fichatec-fila {
    animation: none;
    background: var(--pr-surface-2);
  }
}

.cpx-footer {
  margin-top: var(--pr-space-5);
  border-top: 1px solid var(--pr-border);
  background: var(--pr-surface);
  text-align: center; color: var(--pr-text-muted); font-size: var(--pr-fs-sm);
  padding: var(--pr-space-4);
}
.cpx-footer-linea { display: flex; justify-content: center; gap: var(--pr-space-3); flex-wrap: wrap; font-weight: 500; color: var(--pr-text); }
.cpx-footer-extra { display: flex; justify-content: center; gap: var(--pr-space-3); flex-wrap: wrap; margin-top: 6px; }
.cpx-footer-extra span:not(:last-child)::after { content: " ·"; }

/* ---------- Lightbox fullscreen de fotos (click en la imagen principal) ---------- */
body.cpx-lightbox-open { overflow: hidden; }
.cpx-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10, 10, 10, .94);
  display: flex; align-items: center; justify-content: center;
}
.cpx-lightbox[hidden] { display: none; }
.cpx-lightbox-img {
  max-width: 92vw; max-height: 86vh; object-fit: contain;
  border-radius: var(--pr-radius); user-select: none;
}
.cpx-lightbox-cerrar, .cpx-lightbox-prev, .cpx-lightbox-next {
  position: absolute; background: rgba(255, 255, 255, .12); border: 0; color: #fff;
  border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.cpx-lightbox-cerrar svg, .cpx-lightbox-prev svg, .cpx-lightbox-next svg { width: 22px; height: 22px; }
.cpx-lightbox-cerrar:hover, .cpx-lightbox-prev:hover, .cpx-lightbox-next:hover { background: rgba(255, 255, 255, .22); }
.cpx-lightbox-cerrar { top: var(--pr-space-3); right: var(--pr-space-3); }
.cpx-lightbox-prev { left: var(--pr-space-3); top: 50%; transform: translateY(-50%); }
.cpx-lightbox-next { right: var(--pr-space-3); top: 50%; transform: translateY(-50%); }
.cpx-lightbox-contador {
  position: absolute; bottom: var(--pr-space-3); left: 50%; transform: translateX(-50%);
  color: #fff; font-size: var(--pr-fs-sm); background: rgba(0, 0, 0, .4);
  padding: 2px 10px; border-radius: 999px;
}
@media (max-width: 600px) {
  .cpx-lightbox-prev, .cpx-lightbox-next { width: 38px; height: 38px; }
}

/* ---------- Menú de compartir (fallback sin navigator.share) ---------- */
.cpx-share-menu {
  position: absolute; z-index: 1600;
  background: var(--pr-surface); border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius); box-shadow: var(--pr-shadow-lg);
  padding: 4px; min-width: 180px; display: flex; flex-direction: column;
}
.cpx-share-menu button, .cpx-share-menu a {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; text-align: left; text-decoration: none;
  color: var(--pr-text); font-family: inherit; font-size: var(--pr-fs-sm);
  padding: 8px 10px; border-radius: var(--pr-radius); cursor: pointer;
}
.cpx-share-menu button:hover, .cpx-share-menu a:hover { background: var(--pr-surface-2); }
.cpx-share-menu svg { width: 15px; height: 15px; display: block; color: var(--pr-primary); }

/* ===================================================================== */
/* ---------- Detalle (página /catalogo/auto Y modal "Ver detalle") ----- */
/* ===================================================================== */
.cpx-detalle { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--pr-space-5); align-items: start; }
.cpx-detalle-izq, .cpx-detalle-der { display: flex; flex-direction: column; gap: var(--pr-space-4); min-width: 0; }

@media (max-width: 820px) {
  .cpx-detalle { display: flex; flex-direction: column; gap: var(--pr-space-4); }
  .cpx-detalle-izq, .cpx-detalle-der { display: contents; }
  .cpx-galeria, .cpx-ficha, .cpx-fichatec { width: 100%; min-width: 0; align-self: stretch; }
  .cpx-galeria { order: 1; }
  .cpx-ficha { order: 2; }
  .cpx-fichatec { order: 3; }
}

.cpx-galeria-main-wrap {
  position: relative; overflow: hidden; border-radius: var(--pr-radius-lg);
}
.cpx-galeria-main {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--pr-radius-lg); background: var(--gray-50); display: block;
  cursor: zoom-in;
}
.cpx-galeria-thumbs { display: flex; gap: var(--pr-space-2); margin-top: var(--pr-space-2); flex-wrap: wrap; }
.cpx-galeria-thumbs img {
  width: 72px; height: 54px; object-fit: cover; border-radius: var(--pr-radius);
  cursor: pointer; border: 2px solid transparent; background: var(--gray-50);
}
.cpx-galeria-thumbs img.is-sel { border-color: var(--pr-primary); }

.cpx-ficha { background: var(--pr-surface); border: 1px solid var(--pr-border); border-radius: var(--pr-radius-lg); padding: var(--pr-space-4); }
.cpx-ficha-titulo, .cpx-ficha h1 { font-size: var(--pr-fs-2xl); margin: 0 0 var(--pr-space-1); color: var(--pr-text-strong); }
.cpx-ficha .cpx-precio { font-size: calc(var(--pr-fs-2xl) + 6px); font-weight: 700; color: var(--pr-primary-strong); margin: var(--pr-space-2) 0; }

.cpx-acciones { display: flex; gap: var(--pr-space-2); margin-top: var(--pr-space-3); flex-wrap: wrap; }
.cpx-acciones .pr-btn { flex: 1; justify-content: center; white-space: nowrap; }
.cpx-btn-compartir svg, #btn-compartir svg { width: 15px; height: 15px; }
.cpx-btn-consultar { font-weight: 700; }
.cpx-btn-consultar svg { width: 16px; height: 16px; }

.cpx-fichatec { background: var(--pr-surface); border: 1px solid var(--pr-border); border-radius: var(--pr-radius-lg); padding: var(--pr-space-4); }
.cpx-fichatec-tit { font-size: var(--pr-fs-md); font-weight: 700; color: var(--pr-text-strong); margin-bottom: var(--pr-space-3); }
.cpx-fichatec-lista { display: flex; flex-direction: column; }
.cpx-fichatec-fila { display: flex; align-items: center; gap: var(--pr-space-2); padding: 8px 0; border-bottom: 1px solid var(--pr-border); font-size: var(--pr-fs-sm); }
.cpx-fichatec-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.cpx-fichatec-fila svg { width: 16px; height: 16px; color: var(--pr-primary); flex: none; }
.cpx-fichatec-texto { color: var(--pr-text-strong); }

.cpx-desc { white-space: pre-wrap; line-height: 1.6; font-size: var(--pr-fs-md); }
.cpx-ficha .cpx-specs-basicas, .cpx-ficha .cpx-desc { margin-top: var(--pr-space-3); }

/* ---------- Modal "Ver detalle" ---------- */
.pr-modal.cpx-modal-detalle { max-width: 960px; width: 100%; }
.cpx-modal-detalle .pr-modal-body { max-height: 84vh; overflow-y: auto; }
.cpx-modal-detalle .cpx-ficha,
.cpx-modal-detalle .cpx-fichatec { border: 0; padding: 0; }

/* ---------- Animación apertura/cierre — sólo #modal-detalle ---------- */
#modal-detalle {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
#modal-detalle.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#modal-detalle .pr-modal {
  transform: translateY(14px) scale(.97);
  transition: transform .22s ease;
}
#modal-detalle.is-open .pr-modal {
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  #modal-detalle, #modal-detalle .pr-modal { transition-duration: .01ms; }
}

/* ---------- Recomendados — sólo página de detalle ---------- */
.cpx-recomendados { border-top: 1px solid var(--pr-border); padding-top: var(--pr-space-2); margin-top: var(--pr-space-5); }
.cpx-recomendados-titulo { font-size: var(--pr-fs-xl); font-weight: 700; color: var(--pr-text-strong); margin: 0 0 var(--pr-space-4); }

/* ---------- Barra sticky de WhatsApp (+ "Volver") — sólo página de detalle, mobile ---------- */
.cpx-whatsapp-sticky { display: none; }
@media (max-width: 820px) {
  .cpx-whatsapp-sticky:not([hidden]) {
    display: flex; align-items: center; gap: var(--pr-space-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: var(--pr-space-3) var(--pr-space-4);
    padding-bottom: calc(var(--pr-space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--pr-surface); border-top: 1px solid var(--pr-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
  }
  /* Altura fija e igual para los dos + nowrap: sin esto, a partir de ~360px de
     ancho el texto del botón de WhatsApp saltaba a 2 líneas y quedaba más alto
     que "Volver". */
  .cpx-whatsapp-sticky .cpx-back,
  .cpx-whatsapp-sticky .pr-btn { height: 40px; white-space: nowrap; }
  .cpx-whatsapp-sticky .cpx-back { flex: none; }
  .cpx-whatsapp-sticky .pr-btn { flex: 1; width: auto; }
  .cpx-whatsapp-sticky .pr-btn svg { width: 18px; height: 18px; }
  body.cpx-has-sticky { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* El botón "Consultar por WhatsApp" de la ficha queda duplicado por la barra
     sticky de abajo; en la página de detalle (no el modal, que no usa la barra
     sticky) se oculta para no repetir la acción. */
  #detalle-slot .cpx-btn-consultar { display: none; }
}