/* ==========================================================================
   Crivelli Prop — Listado de propiedades (archivo del CPT "properties")
   Mismo sistema (prefijo cp-*) que la ficha de propiedad. Header/footer/
   botones base en site.css; acá solo la parte visual propia de esta
   pantalla, que envuelve el markup REAL de Estatik (buscador, tarjetas,
   orden, paginación, guardar) — ver los overrides en /estatik4/.
   Mobile first. Breakpoints: 768px y 1024px.
   ========================================================================== */

:root {
  --cp-violet: #5C1F5B;
  --cp-violet-mid: #7A2E79;
  --cp-violet-deep: #3A1339;
  --cp-gold: #C9A84C;
  --cp-gold-dark: #A8893A;
  --cp-bone: #F8F6F3;
  --cp-band: #EEEBE7;
  --cp-ink: #1E1E1E;
  --cp-body: #4A4A4A;
  --cp-muted: #6B6B6B;
  --cp-line: rgba(92, 31, 91, .10);
  --cp-line-soft: rgba(92, 31, 91, .08);
  --cp-radius: 4px;
  --cp-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --cp-sans: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cp-max: 1200px;
}

.cp-page,
.cp-page *,
.cp-page *::before,
.cp-page *::after {
  box-sizing: border-box;
}

.cp-page h1,
.cp-page h2,
.cp-page h3,
.cp-page h4 {
  margin: 0;
  font-family: var(--cp-serif);
  font-weight: 700;
  line-height: 1.3;
  /* Astra define text-transform:capitalize para todos los h2 del sitio
     (Personalizar > Tipografía); sin esto se cuela en cualquier h2 nuestro
     (p.ej. "No Encontramos Propiedades..." en vez de "No encontramos..."). */
  text-transform: none;
}

.cp-page p {
  margin: 0;
}

.cp-page ul,
.cp-page ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-page img {
  max-width: 100%;
  display: block;
}

.cp-page a {
  color: var(--cp-violet);
  text-decoration: none;
}

.cp-page a:hover {
  color: var(--cp-violet-mid);
}

.cp-page button {
  font: inherit;
}

.cp-page ::selection {
  background: var(--cp-gold);
  color: var(--cp-violet);
}

.cp-wrap {
  width: 100%;
  max-width: var(--cp-max);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .cp-wrap {
    padding: 0 32px;
  }
}

.cp-eyebrow {
  display: inline-block;
  font-family: var(--cp-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cp-gold);
}

.cp-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--cp-violet-mid);
  stroke: var(--cp-violet-mid);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Botones --------------------------------------------------------------- */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 28px;
  border: 0;
  cursor: pointer;
  font-family: var(--cp-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  border-radius: var(--cp-radius);
  transition: background .18s, color .18s, border-color .18s;
}

.cp-btn--gold {
  background: var(--cp-gold);
  color: var(--cp-violet-deep);
  box-shadow: 0 12px 30px rgba(201, 168, 76, .28);
}

.cp-btn--gold:hover {
  background: var(--cp-gold-dark);
  color: var(--cp-violet-deep);
}

.cp-btn--outline {
  background: transparent;
  color: var(--cp-violet);
  border: 2px solid var(--cp-violet);
  padding: 11px 26px;
}

.cp-page a.cp-btn--outline:hover,
.cp-btn--outline:hover {
  background: var(--cp-violet);
  color: #fff;
}

/* --- Hero del listado -------------------------------------------------------- */
.cp-page-hero {
  position: relative;
  background: var(--cp-violet);
  overflow: hidden;
}

.cp-page-hero__glow {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(201, 168, 76, .10);
}

.cp-page-hero__rule {
  /* El buscador se integra directo al banner violeta (mismo fondo, sin
     corte), así que no hace falta la línea dorada que separaba el hero
     de una banda de otro color debajo. */
  display: none;
}

.cp-page-hero__inner {
  position: relative;
  padding-top: 56px;
  padding-bottom: 32px;
}

.cp-page-hero .cp-eyebrow {
  margin-bottom: 16px;
}

.cp-page-hero__title {
  font-size: 34px;
  color: #fff;
}

.cp-page-hero__count {
  margin-top: 14px;
  font-family: var(--cp-sans);
  font-size: 16px;
  color: rgba(255, 255, 255, .78);
}

@media (min-width: 1024px) {
  .cp-page-hero__inner {
    padding-top: 88px;
  }

  .cp-page-hero__title {
    font-size: 48px;
    line-height: 1.2;
  }
}

/* --- Filtros (markup real de Estatik: es-field / es-search) ---------------
   El buscador se integra directo al banner violeta del hero (mismo fondo,
   sin tarjeta blanca ni sombra) — no es una banda separada superpuesta. */
.cp-filters-band {
  position: relative;
  /* El panel de Select2 no se agrega al final del <body> (como asumía el
     comentario más abajo) sino adentro de .cp-filters — su z-index alto
     solo pelea contra elementos DENTRO de esta misma banda. .cp-toolbar
     (más abajo en el documento, con su propio z-index:1) vive en una rama
     distinta del árbol, así que sin esto terminaba pintando encima del
     desplegable, tapando las opciones que sobresalen por debajo de la
     banda violeta. Con esto toda la banda gana esa pulseada. */
  z-index: 5;
  background: var(--cp-violet);
  border-bottom: 1px solid rgba(201, 168, 76, .30);
  padding-bottom: 44px;
}

.cp-filters {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.cp-filters__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.cp-filters .es-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-filters span.es-field__label,
.cp-filters .es-field__label {
  font-family: var(--cp-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cp-gold);
}

.cp-filters input[type="text"],
.cp-filters input[type="number"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  background: #fff;
  font: 400 15px var(--cp-sans);
  color: var(--cp-ink);
}

.cp-filters input:focus {
  outline: 2px solid var(--cp-violet);
  outline-offset: -2px;
}

/* --- Dropdown propio para el <select> de "Ordenar por" --------------------
   Operación/Tipo/Barrio/Dormitorios ya vienen mejorados por Estatik con
   Select2 (se re-viste más abajo, sobre sus propias clases). "Ordenar por"
   es un <select> nativo sin Select2: el sistema operativo del visitante es
   quien pinta el color de resaltado del popup nativo (podía verse verde,
   azul, etc. según el equipo), así que para que se vea violeta como el
   resto del sitio el <select> real queda oculto visualmente (pero
   funcional: sigue mandando el valor y reacciona a foco/teclado) y arriba
   se dibuja un botón + panel propios. assets/js/page-propiedades.js arma
   ese panel. */
.cp-select {
  position: relative;
}

.cp-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cp-select__trigger {
  position: relative;
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 38px 12px 14px;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  background: #fff;
  font: 400 15px var(--cp-sans);
  color: var(--cp-ink);
  text-align: left;
  cursor: pointer;
}

.cp-select__trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--cp-violet);
  border-bottom: 2px solid var(--cp-violet);
  transform: rotate(45deg);
  transition: transform .15s;
}

.cp-select.is-open .cp-select__trigger::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.cp-select:focus-within .cp-select__trigger {
  outline: 2px solid var(--cp-violet);
  outline-offset: -2px;
}

.cp-select__panel {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  padding: 6px;
  background: #fff;
  border-radius: var(--cp-radius);
  box-shadow: 0 18px 40px rgba(30, 30, 30, .28);
}

.cp-select.is-open .cp-select__panel {
  display: block;
}

.cp-select__option {
  padding: 10px 12px;
  border-radius: calc(var(--cp-radius) - 1px);
  font: 400 15px var(--cp-sans);
  color: rgb(30, 30, 30);
  cursor: pointer;
}

.cp-select__option:hover,
.cp-select__option.is-selected {
  background: var(--cp-violet);
  color: #fff;
  font-weight: 700;
}

/* --- Select2 (Operación/Tipo/Barrio/Dormitorios) ---------------------------
   Estatik ya inicializa Select2 sobre estos campos; se re-viste su propio
   markup (no es un popup nativo del sistema operativo, es HTML/CSS normal)
   en vez de duplicar un dropdown propio como el de "Ordenar por". Estatik
   trae su propio CSS para estos mismos selectores (altura 40px, etc.) que
   carga en el <head> — acá se fuerza con !important para no depender del
   orden de encolado entre el plugin y el tema. */
.cp-filters .select2-container {
  width: 100% !important;
}

.cp-filters .select2-selection--single {
  box-sizing: border-box !important;
  height: 48px !important;
  padding: 12px 38px 0 14px !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: var(--cp-radius) !important;
  background: #fff !important;
}

.cp-filters__grid .js-es-field.es-field {
  padding-bottom: 0 !important;
}

.cp-filters .select2-selection__rendered {
  padding: 0 !important;
  line-height: 46px !important;
  font: 400 15px var(--cp-sans) !important;
  color: var(--cp-ink) !important;
}

.cp-filters .select2-selection__arrow {
  height: 46px !important;
  right: 10px !important;
}

.cp-filters .select2-selection__arrow b {
  border-color: var(--cp-violet) transparent transparent transparent !important;
}

.cp-filters .select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent var(--cp-violet) transparent !important;
}

.cp-filters .select2-container--focus .select2-selection--single {
  outline: 2px solid var(--cp-violet);
  outline-offset: -2px;
}

/* Con "Todas"/"Todos" ya como opción real de la lista (ver
   es_search_render_field_html en functions.php), el botón "×" nativo de
   Select2 para volver al placeholder queda redundante — y se superponía al
   texto de la opción elegida ("×Casa"), dando la sensación de que no había
   ningún valor seleccionado. */
.cp-filters .select2-selection__clear {
  display: none !important;
}

/* El panel de Select2 se agrega adentro de cada .select2-container (no al
   final del <body>), por eso además hizo falta subir el z-index de TODA
   .cp-filters-band más arriba — este z-index acá solo ordena el panel
   contra otros elementos de su misma banda. Fondo blanco con
   selección/hover en violeta (mismo criterio que el resto de los campos con
   fondo claro del sitio). */
.select2-dropdown {
  z-index: 9999;
  border: 1px solid var(--cp-line-soft);
  border-radius: var(--cp-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(30, 30, 30, .18);
}

.select2-search--dropdown {
  display: none;
}

.select2-results__option {
  padding: 10px 14px;
  font: 400 15px var(--cp-sans);
  color: var(--cp-ink);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--cp-violet);
  color: #fff;
  font-weight: 700;
}

.cp-filters .es-field-row__range {
  display: flex;
  /* El campo "Máx." no tiene label propia (solo "Mín." la lleva), así que
     con align-items:center su input queda más abajo que el de "Mín.";
     alineando por abajo, ambos inputs quedan a la misma altura. */
  align-items: flex-end;
  gap: 8px;
}

.cp-filters .es-field-row__range .es-field {
  flex: 1;
  min-width: 0;
}

.cp-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-bottom: 8px;
}

.cp-filters__actions .cp-btn {
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
}

.cp-filters__actions .cp-btn.cp-btn--gold:focus {
  background: var(--cp-gold);
}

.cp-filters__actions .cp-btn--outline {
  padding: 9px 18px;
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.cp-filters__actions .cp-btn--outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--cp-violet);
}

@media (min-width: 768px) {
  .cp-filters {
    padding: 0;
    margin: 0;
  }

  .cp-filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
  }
}

@media (min-width: 1024px) {

  /* $container_classes envuelve el <form> en un div propio (mismo patrón que
     el template original de Estatik) — el flex tiene que ir en el form, que
     es el padre real de __grid/__actions, no en el wrapper .cp-filters. */
  .cp-filters__form {
    display: flex;
    align-items: flex-end;
    gap: 24px;
  }

  .cp-filters__grid {
    flex: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 1.9fr;
  }

  .cp-filters__actions {
    margin-top: 0;
    flex: none;
  }
}

/* --- Grilla ------------------------------------------------------------------ */
.cp-results {
  padding: 32px 0 8px;
}

.cp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .cp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

@media (min-width: 1024px) {
  .cp-results {
    padding-top: 40px;
  }

  .cp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* --- Barra de resultados (contador + orden + vista) ------------------------ */
.cp-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 0 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cp-line);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 28px;
}

.cp-toolbar__count {
  font-family: var(--cp-sans);
  font-size: 14px;
  color: var(--cp-muted);
}

.cp-toolbar__count b {
  font-weight: 700;
  color: var(--cp-violet);
}

.cp-toolbar__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.cp-sort .es-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.es-field__sort label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.es-field__sort span.es-field__label {
  font-size: 13px;
  color: var(--cp-muted);
  letter-spacing: .3px;
}

.cp-sort .es-field__label {
  font-family: var(--cp-sans);
  font-size: 13px;
  letter-spacing: .3px;
  color: var(--cp-muted);
  text-transform: none;
  width: stretch;
}

.cp-sort .cp-select {
  min-width: 170px;
}

.cp-sort .cp-select__trigger {
  min-height: 40px;
  padding: 0 36px 0 12px;
  line-height: 38px;
  font-size: 14px;
}

.cp-sort button.cp-select__trigger:focus,
.cp-sort button.cp-select__trigger:hover {
  outline: 2px solid var(--cp-violet);
  outline-offset: -2px;
  background-color: #fff;
}

.cp-sort .cp-select__trigger::after {
  margin-top: -5px;
}

.cp-views {
  display: flex;
  gap: 6px;
}

.cp-views a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  color: var(--cp-violet);
  transition: background .18s, color .18s, border-color .18s;
}

.cp-views a:hover {
  background: var(--cp-band);
  border-color: var(--cp-violet);
}

/* aria-pressed solo refleja el estado con el que se cargó la página — el
   JS real de Estatik nunca lo toca después de un clic, solo actualiza la
   clase es-btn--active (ver layout-buttons.php). Si el estilo mirara las
   dos cosas con "o", después del primer clic quedarían DOS botones
   resaltados a la vez (el viejo por el atributo ya desactualizado, el
   nuevo por la clase) — por eso el estilo depende únicamente de la clase,
   que es la que se mantiene sincronizada de verdad. */
.cp-views a.es-btn--active {
  background: var(--cp-violet);
  border-color: var(--cp-violet);
  color: #fff;
}

.cp-views svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 768px) {
  .cp-toolbar {
    padding: 0 0 16px;
  }
}

@media (min-width: 1024px) {
  .cp-toolbar {
    padding: 0 0 16px;
  }
}

/* --- Tarjeta de propiedad ---------------------------------------------------- */
.cp-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--cp-line-soft);
  border-radius: var(--cp-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(30, 30, 30, .06);
  transition: transform .2s, box-shadow .2s;
  height: 100%;
}

.cp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(92, 31, 91, .10);
}

.cp-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.cp-card__link:hover {
  color: inherit;
}

.cp-card__link:focus-visible {
  outline: 2px solid var(--cp-violet);
  outline-offset: 2px;
}

.cp-card__media {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--cp-band);
  overflow: hidden;
}

.cp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-card__media--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cp-card__media--empty svg {
  width: 40px;
  height: 40px;
  color: var(--cp-gold);
  stroke: var(--cp-gold);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-card__media--empty span {
  font-family: var(--cp-sans);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #A08FA0;
}

.cp-card__badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--cp-radius);
  font-family: var(--cp-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cp-badge--operation {
  background: var(--cp-violet);
  color: #fff;
}

/* Estado (Reservado, Vendido, Alquilado): algo que le pasó a la propiedad
   de cara a la operación — violeta profundo con borde interno dorado. */
.cp-badge--status {
  background: var(--cp-violet-deep);
  color: var(--cp-gold);
  border: 1px solid rgba(201, 168, 76, .45);
}

/* Marca comercial (Destacado, Novedad, Precio actualizado): la agencia
   resaltando algo de la propiedad — distinto de "estado". Dorado con
   sombra dorada, para que no se lea igual que el badge de estado. */
.cp-badge--flag {
  background: var(--cp-gold);
  color: var(--cp-violet-deep);
  box-shadow: 0 6px 18px rgba(201, 168, 76, .34);
}

/* Tipo (Departamento/Casa/PH/...): a diferencia de operación/estado/marca,
   no va apoyado sobre la foto — es informativo, no una llamada de atención,
   así que va en el cuerpo de la tarjeta con un tratamiento más discreto. */
.cp-badge--type {
  background: rgba(255, 255, 255, .94);
  color: var(--cp-violet);
  border: 1px solid var(--cp-line);
}

.cp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

.cp-card__title {
  font-size: 22px;
  color: var(--cp-ink);
  margin-bottom: 8px;
  text-wrap: pretty;
}

.cp-card__link:hover .cp-card__title {
  color: var(--cp-violet);
}

.cp-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cp-sans);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .3px;
  color: var(--cp-muted);
  margin-bottom: 16px;
}

.cp-card__location svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: var(--cp-gold);
  stroke-width: 2;
}

.cp-card__price {
  font-family: var(--cp-serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--cp-violet);
  margin-top: auto;
}

.cp-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cp-line-soft);
}

.cp-card__specs li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cp-sans);
  font-size: 13px;
  color: var(--cp-body);
}

.cp-card__specs .cp-icon {
  width: 16px;
  height: 16px;
}

.cp-card__cta {
  display: block;
  margin-top: 20px;
  padding: 13px 28px;
  border-radius: var(--cp-radius);
  background: var(--cp-gold);
  color: var(--cp-violet-deep);
  font-family: var(--cp-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  transition: background .18s;
}

.cp-card__link:hover .cp-card__cta {
  background: var(--cp-gold-dark);
}

/* Guardar favorito (control real de Estatik, mismo patrón que la ficha) */
.cp-card__control {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

.cp-card__control .es-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  background: rgba(255, 255, 255, .94);
  color: var(--cp-violet);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(30, 30, 30, .10);
  transition: background .18s, color .18s, border-color .18s;
}

.cp-card__control .es-btn:hover {
  background: #fff;
  border-color: var(--cp-violet);
}

.cp-card__control .es-btn.es-btn--active {
  background: var(--cp-gold);
  border-color: var(--cp-gold);
  color: var(--cp-violet-deep);
}

.cp-card__control .es-icon {
  font-size: 16px;
  color: inherit;
}

.cp-card__control .es-btn.es-btn--active .es-icon {
  color: var(--cp-violet-deep) !important;
}

.cp-card__control .es-btn__label {
  display: none;
}

/* Vista lista: misma tarjeta, foto al costado */
.cp-grid.es-listings--list {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

@media (min-width: 768px) {
  .cp-grid.es-listings--list .cp-card:hover {
    transform: none;
    box-shadow: 0 18px 40px rgba(92, 31, 91, .10);
  }

  .cp-grid.es-listings--list .cp-card__link {
    flex-direction: row;
  }

  .cp-grid.es-listings--list .cp-card__media {
    width: 34%;
    flex: none;
    aspect-ratio: auto;
  }

  .cp-grid.es-listings--list .cp-card__body {
    flex: 1;
    display: grid;
    align-content: start;
    grid-template-columns: minmax(0, 1fr) 190px;
    grid-template-areas: "title price" "loc price" "specs cta";
    column-gap: 32px;
    padding: 28px 32px;
  }

  .cp-grid.es-listings--list .cp-card__title {
    grid-area: title;
    font-size: 24px;
  }

  .cp-grid.es-listings--list .cp-card__location {
    grid-area: loc;
  }

  .cp-grid.es-listings--list .cp-card__price {
    grid-area: price;
    margin-top: 0;
    text-align: right;
    align-self: start;
  }

  .cp-grid.es-listings--list .cp-card__specs {
    grid-area: specs;
    align-self: end;
  }

  .cp-grid.es-listings--list .cp-card__cta {
    grid-area: cta;
    align-self: end;
    margin-top: 16px;
  }

  .cp-grid.es-listings--list .cp-card__control {
    right: calc(66% + 16px);
  }
}

@media (min-width: 1024px) {
  .cp-grid.es-listings--list .cp-card__media {
    width: 30%;
  }

  .cp-grid.es-listings--list .cp-card__control {
    right: calc(70% + 16px);
  }
}

/* --- Paginación (paginate_links real de WP, type=list) --------------------- */
.cp-pagination {
  display: flex;
}

.cp-pagination ul.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding: 48px 0 72px;
}

.cp-pagination li {
  display: contents;
}

.cp-pagination .page-numbers {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  background: #fff;
  font-family: var(--cp-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--cp-violet);
  transition: background .18s, color .18s, border-color .18s;
}

a.page-numbers:hover {
  background: var(--cp-violet);
  border-color: var(--cp-violet);
  color: #fff;
}

.cp-pagination .page-numbers.current {
  background: var(--cp-violet);
  border-color: var(--cp-violet);
  color: #fff;
}

.cp-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--cp-muted);
  font-weight: 400;
}

/* --- Cero resultados --------------------------------------------------------- */
.cp-empty {
  background: #fff;
  border: 1px solid var(--cp-line-soft);
  border-radius: var(--cp-radius);
  box-shadow: 0 8px 24px rgba(30, 30, 30, .06);
  padding: 48px 24px;
  text-align: center;
}

/* .cp-empty__mark/__text son <p> — el reset .cp-page p{margin:0} de más
   arriba pega más fuerte que una sola clase (clase+elemento gana a clase
   sola), así que sin calificarlas con .cp-empty el margin:auto que las
   centra quedaba anulado y aparecían pegadas a la izquierda. */
.cp-empty .cp-empty__mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: var(--cp-radius);
  background: rgba(201, 168, 76, .16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-empty__mark svg {
  width: 28px;
  height: 28px;
  color: var(--cp-gold-dark);
  stroke: var(--cp-gold-dark);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-empty__title {
  font-size: 28px;
  color: var(--cp-violet);
}

.cp-empty .cp-empty__text {
  max-width: 46ch;
  margin: 14px auto 28px;
  font-family: var(--cp-sans);
  font-size: 17px;
  line-height: 1.8;
  color: var(--cp-body);
  text-wrap: pretty;
}

.cp-empty .cp-btn {
  font-size: 15px;
  font-weight: 700;
}

@media (min-width: 768px) {
  .cp-empty {
    padding: 72px 40px;
  }
}