/* =========================================================================
   Propeka — Sistema de interfaz de descubrimiento
   =========================================================================
   Alcance: páginas de resultados, ficha de propiedad y perfiles públicos.
   Todo va prefijado con .pk- y encapsulado en .pk-app para no filtrar estilos
   al resto del sitio ni depender del CSS de demo de Houzez.

   Orden: 1 reinicio local · 2 tipografía · 3 controles ·
          5 barra de búsqueda · 6 chips · 7 tarjetas · 8 listado ·
          9 hoja de filtros · 10 mapa · 11 ficha · 12 perfiles ·
          13 estados · 14 responsive
   ========================================================================= */

/* Shared tokens live in `propeka-tokens.css`. */

/* --- 1. Objetivos táctiles y alturas de control ---------------------------
   Medido en la línea base: los controles de la interfaz aparecían con cuatro
   alturas distintas (40, 42, 44 y 126 px) y tres controles primarios quedaban
   por debajo del objetivo táctil accesible en 59 capturas:

     .pk-operacion__op        segmento Comprar/Alquilar/Todo   (69 incidencias)
     .pk-chip__x              aspa de retirada de un filtro    (24 incidencias)

   Se unifica la altura con el token y se garantiza el área pulsable sin
   agrandar visualmente los controles: el aspa del chip mantiene su tamaño
   dibujado y amplía su zona activa con un pseudoelemento.
   -------------------------------------------------------------------------- */

.pk-app .pk-btn,
.pk-app .pk-campo,
.pk-app select,
.pk-app .pk-desplegable__disparo {
  min-height: var(--pk-alto-ctl);
}

/* Segmento de operación: es un control primario, no una pestaña decorativa. */
.pk-operacion__op {
  min-height: var(--pk-alto-ctl);
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: var(--pk-e4);
}

/* El aspa del chip conserva su dibujo pero pulsa como un control de 44 px. */
.pk-chip__x { position: relative; }
.pk-chip__x::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: var(--pk-alto-ctl); height: var(--pk-alto-ctl);
  transform: translate(-50%, -50%);
}

/* --- 2. Reinicio local -------------------------------------------------- */
.pk-app {
  color: var(--pk-txt);
  background: var(--pk-n0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* Ninguna vista de Propeka desborda en horizontal. */
}
/* Reinicio local con especificidad calibrada: `.pk-app :where(elemento)`
   pesa (0,1,0).
     - Gana a los selectores de elemento del tema padre — `a { color: … }`
       (0,0,1) — así que Houzez no puede teñir los enlaces de Propeka.
     - Empata con las clases de componente (`.pk-btn--primario`, `.pk-chip`),
       que van después en este archivo y por tanto se imponen.
   Un reinicio más específico (`.pk-app button`, 0,1,1) impediría que cualquier
   componente fijara su propio fondo; uno de especificidad cero lo dejaría a
   merced del tema. */
.pk-app *, .pk-app *::before, .pk-app *::after { box-sizing: border-box; }
.pk-app :where(img) { max-width: 100%; height: auto; display: block; }
.pk-app :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.pk-app :where(a) { color: inherit; text-decoration: none; }
.pk-app :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.pk-app :where(dl, dd, figure, p, h1, h2, h3, h4) { margin: 0; }

/* Foco visible y uniforme: requisito de accesibilidad, no decoración. */
.pk-app :focus-visible {
  outline: 2px solid var(--pk-navy);
  outline-offset: 2px;
  border-radius: var(--pk-r-sm);
}

.pk-contenedor {
  width: 100%;
  max-width: var(--pk-ancho);
  margin-inline: auto;
  padding-inline: var(--pk-pad);
}

.pk-oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.pk-icono { width: 1.25em; height: 1.25em; flex: none; }

/* --- 3. Tipografía ------------------------------------------------------ */
.pk-h1 {
  margin: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pk-tinta);
}
.pk-h2 {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.25; font-weight: 700; letter-spacing: -.015em;
  color: var(--pk-tinta);
}
.pk-h3 {
  margin: 0;
  font-size: var(--pk-fs-base); line-height: 1.35; font-weight: 700;
  color: var(--pk-tinta);
}
.pk-sub { margin: var(--pk-e2) 0 0; color: var(--pk-txt-sec); font-size: var(--pk-fs-base); line-height: 1.5; }
.pk-menor { font-size: var(--pk-fs-sm); color: var(--pk-txt-ter); }

/* --- 4. Controles ------------------------------------------------------- */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--pk-e2);
  min-height: 44px;               /* Objetivo táctil accesible. */
  padding: 0 var(--pk-e5);
  border-radius: var(--pk-r);
  font-size: var(--pk-fs-base); font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--pk-t), border-color var(--pk-t), color var(--pk-t), box-shadow var(--pk-t);
  white-space: nowrap;
}
.pk-btn--primario { background: var(--pk-primario); color: #fff; }
.pk-btn--primario:hover { background: var(--pk-primario-osc); color: #fff; }
.pk-btn--secundario { background: var(--pk-n0); color: var(--pk-tinta); border-color: var(--pk-n200); box-shadow: var(--pk-s1); }
.pk-btn--secundario:hover { border-color: var(--pk-n400); background: var(--pk-n25); }
.pk-btn--fantasma { background: transparent; color: var(--pk-navy); }
.pk-btn--fantasma:hover { background: var(--pk-n50); }
.pk-btn--bloque { width: 100%; }
.pk-btn[disabled], .pk-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Campo de formulario base */
.pk-campo {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--pk-e3);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r);
  background: var(--pk-n0);
  color: var(--pk-txt);
  font-size: var(--pk-fs-base);
  transition: border-color var(--pk-t), box-shadow var(--pk-t);
  appearance: none;
}
.pk-campo:focus { border-color: var(--pk-navy); box-shadow: var(--pk-foco); outline: none; }
select.pk-campo {
  padding-right: var(--pk-e8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566573' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
}
.pk-etiqueta {
  display: block;
  margin-bottom: var(--pk-e2);
  font-size: var(--pk-fs-sm); font-weight: 600;
  color: var(--pk-txt-sec);
}

/* --- 5. Cabecera y barra de búsqueda ------------------------------------ */
.pk-migas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--pk-e1);
  padding: var(--pk-e4) 0 0;
  font-size: var(--pk-fs-sm); color: var(--pk-txt-ter);
}
.pk-migas a { color: var(--pk-txt-sec); }
.pk-migas a:hover { color: var(--pk-primario); text-decoration: underline; }
.pk-migas li { display: flex; align-items: center; gap: var(--pk-e1); }
.pk-migas li + li::before { content: "/"; color: var(--pk-n300); }
.pk-migas [aria-current] { color: var(--pk-txt); font-weight: 600; }

/* En la ficha, el último nivel es el título completo del anuncio y a 1440 se
   partía en una segunda línea que empezaba con la barra «/» suelta. El título
   ya está entero en el H1 justo debajo, así que en escritorio la miga actual se
   recorta con puntos suspensivos y conserva el texto completo como `title`
   implícito del H1. En móvil la regla de ≤860px la hace desplazable. */
@media (min-width: 861px) {
  .pk-ficha .pk-migas { flex-wrap: nowrap; }
  .pk-ficha .pk-migas li { flex: none; white-space: nowrap; }
  .pk-ficha .pk-migas li:last-child { flex: 0 1 auto; min-width: 0; }
  .pk-ficha .pk-migas li:last-child [aria-current] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* `.pk-cabecera__fila` se retiro con el encabezado de dos bloques: la unica
   plantilla que lo imprimia era `listado.php`, que ahora usa `__texto` y
   `__acciones`. Un selector sin marcado es una trampa para el proximo cambio. */
.pk-cabecera { padding: var(--pk-e4) 0 var(--pk-e5); }

/* Barra de filtros primarios, adherida al hacer scroll. */
.pk-barra {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.5) blur(8px);
  border-bottom: 1px solid var(--pk-n100);
}
.pk-barra--fija { box-shadow: var(--pk-s2); }
/*
 * La barra de filtros nunca desborda su contenedor.
 *
 * Medido a 1440 px: «Guardar búsqueda» terminaba en x=1443 con el viewport en
 * 1440 y su contenedor en 1320 — el control se salía de la página por la
 * derecha. La fila no cabía y no tenía permiso para reorganizarse.
 *
 * Ahora la barra puede envolver y sus controles encogerse, de modo que la fila
 * se reordena en lugar de escaparse. Los desplegables conservan una anchura
 * mínima legible para no quedar reducidos a dos caracteres.
 */
.pk-barra__interior {
  display: flex; align-items: center; gap: var(--pk-e2);
  padding-block: var(--pk-e3);
  flex-wrap: wrap;
  row-gap: var(--pk-e2);
}
.pk-barra__interior > * { min-width: 0; }
.pk-barra .pk-desplegable { flex: 0 1 auto; min-width: 9ch; }
.pk-barra .js-pk-guardar-busqueda,
.pk-barra .js-pk-mapa,
.pk-barra .js-pk-abrir-hoja { flex: 0 0 auto; }

/* Conmutador Comprar / Alquilar */
.pk-operacion {
  display: inline-flex; padding: 3px;
  background: var(--pk-n50); border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-pill);
}
.pk-operacion__op {
  padding: 0 var(--pk-e4); min-height: 36px;
  display: inline-flex; align-items: center;
  border-radius: var(--pk-r-pill);
  font-size: var(--pk-fs-sm); font-weight: 600; color: var(--pk-txt-sec);
  transition: background var(--pk-t), color var(--pk-t);
}
.pk-operacion__op[aria-pressed="true"] {
  background: var(--pk-n0); color: var(--pk-tinta); box-shadow: var(--pk-s1);
}

/* Control desplegable de filtro */
.pk-desplegable { position: relative; }
.pk-desplegable__disparo {
  display: inline-flex; align-items: center; gap: var(--pk-e2);
  min-height: 40px; padding: 0 var(--pk-e3);
  border: 1px solid var(--pk-n200); border-radius: var(--pk-r);
  background: var(--pk-n0); font-size: var(--pk-fs-sm); font-weight: 500;
  color: var(--pk-txt); white-space: nowrap;
  transition: border-color var(--pk-t), background var(--pk-t);
}
.pk-desplegable__disparo:hover { border-color: var(--pk-n400); }
/* La etiqueta refleja el filtro activo («Q500,000 – Q900,000»), así que su
   longitud depende de los datos. Se trunca para que ningún valor pueda
   ensanchar la barra y expulsar las acciones fuera del viewport. */
.pk-desplegable__etq {
  display: block; max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-desplegable__disparo[aria-expanded="true"] { border-color: var(--pk-navy); box-shadow: var(--pk-foco); }
.pk-desplegable__disparo--activo {
  border-color: var(--pk-navy); background: #eef5fa; color: var(--pk-navy); font-weight: 600;
}
.pk-desplegable__disparo::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566573' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--pk-t);
}
.pk-desplegable__disparo[aria-expanded="true"]::after { transform: rotate(180deg); }

/*
 * Panel flotante de la barra de busqueda (desplegables de operacion, tipo...).
 *
 * Cuidado con el nombre. Hasta 2026-09-08 el escritorio de usuario anadia
 * tambien `pk-panel` como clase de <body>, asi que esta regla -absolute con
 * max-width 420px- caia sobre el propio <body> y aplastaba el escritorio
 * entero. Medido en /propiedades-favoritas/: body de 420px dentro de un
 * viewport de 1536, con la cabecera, el titulo y el contenido colapsados en una
 * columna de 98px. La clase de <body> paso a llamarse `pk-escritorio`; este
 * nombre queda reservado para el componente.
 */
.pk-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 280px; max-width: min(92vw, 420px);
  max-height: min(70vh, 480px); overflow-y: auto;
  padding: var(--pk-e4);
  background: var(--pk-n0);
  border: 1px solid var(--pk-n200); border-radius: var(--pk-r-lg);
  box-shadow: var(--pk-s3);
}
.pk-panel[hidden] { display: none; }
.pk-panel--der { left: auto; right: 0; }
.pk-panel__pie {
  display: flex; gap: var(--pk-e2); justify-content: space-between; align-items: center;
  margin-top: var(--pk-e4); padding-top: var(--pk-e3);
  border-top: 1px solid var(--pk-n100);
  position: sticky; bottom: calc(var(--pk-e4) * -1);
  background: var(--pk-n0);
}

/* Opción con casilla y conteo de faceta */
.pk-opcion {
  display: flex; align-items: center; gap: var(--pk-e3);
  padding: var(--pk-e2) var(--pk-e2);
  border-radius: var(--pk-r-sm);
  /* El tema padre marca `strong, b, label` a 700: la fila declara su propio
     peso para no heredar una lista entera en negrita. funda deja la etiqueta
     en normal y distingue el recuento solo por color. */
  font-size: var(--pk-fs-base); font-weight: var(--pk-fw-normal); cursor: pointer;
  transition: background var(--pk-t);
}
.pk-opcion:hover { background: var(--pk-n50); }
.pk-opcion input { width: 18px; height: 18px; accent-color: var(--pk-primario); flex: none; margin: 0; }
.pk-opcion__txt { flex: 1; min-width: 0; }
.pk-opcion__n {
  font-size: var(--pk-fs-sm); color: var(--pk-txt-ter);
  font-variant-numeric: tabular-nums;
}
/* Una opción sin resultados en el contexto actual se muestra, pero apagada:
   comunica el porqué en lugar de desaparecer sin explicación. */
.pk-opcion--vacia { opacity: .45; }
.pk-opcion--vacia input { pointer-events: none; }

.pk-rango { display: flex; align-items: center; gap: var(--pk-e2); }
.pk-rango span { color: var(--pk-txt-ter); }

/* --- 6. Chips de filtros seleccionados ---------------------------------- */
.pk-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-e2);
  padding-bottom: var(--pk-e4);
}
.pk-chip {
  display: inline-flex; align-items: center; gap: var(--pk-e2);
  min-height: 40px; padding: 0 var(--pk-e2) 0 var(--pk-e3);
  background: var(--pk-n50); border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r-pill);
  font-size: var(--pk-fs-sm); font-weight: 600; color: var(--pk-txt);
}
/* El aspa mide 24 px pero su zona pulsable se extiende a 40 px con un
   pseudo-elemento: se conserva la escala visual sin penalizar el táctil. */
.pk-chip__x {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: var(--pk-txt-sec);
  transition: background var(--pk-t), color var(--pk-t);
}
.pk-chip__x::before {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px;
}
.pk-chip__x:hover { background: var(--pk-primario); color: #fff; }
.pk-chip__x .pk-icono { width: 12px; height: 12px; stroke-width: 2.4; }
.pk-chip--limpiar {
  background: transparent; border-color: transparent;
  color: var(--pk-primario); padding-inline: var(--pk-e2); text-decoration: underline;
}
.pk-chip--limpiar:hover { background: var(--pk-primario-suave); }

/* --- 7. Tarjeta de propiedad -------------------------------------------- */
.pk-tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--pk-n0);
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-lg);
  overflow: hidden;
  transition: box-shadow var(--pk-t), border-color var(--pk-t), transform var(--pk-t);
}
.pk-tarjeta:hover { box-shadow: var(--pk-s3); border-color: var(--pk-n200); }
.pk-tarjeta:focus-within { box-shadow: var(--pk-s3); border-color: var(--pk-navy); }

.pk-tarjeta__medio { background: var(--pk-n100); }
.pk-tarjeta__foto { position: relative; overflow: hidden; }
.pk-tarjeta__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 220ms cubic-bezier(.2,.7,.4,1);
}
.pk-tarjeta:hover .pk-tarjeta__img { transform: scale(1.03); }
.pk-tarjeta__medio { overflow: hidden; }

/* Marcador de posición cuando no hay imagen utilizable. */
.pk-sinimg {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--pk-n50), var(--pk-n100));
  color: var(--pk-n400);
}
.pk-sinimg .pk-icono { width: 40px; height: 40px; }

/* Foto que no llega (2026-09-21): la petición falla o el adjunto ya no existe.
   La reserva es el mismo componente «sin fotografía» que la tarjeta ya usa
   cuando el anuncio no tiene fotos, así que hereda la proporción y la
   geometría de cada variante (compacta, amplia, promocionada, móvil). La
   muestra propeka-sitio.js una sola vez; nunca se reintenta la descarga, y
   el texto alternativo deja de pintarse suelto sobre la caja de la foto. */
.pk-sinimg[hidden] { display: none; }
.pk-tarjeta__foto--fallo .pk-tarjeta__img { display: none; }
.pk-posicion__foto--fallo .pk-posicion__img { display: none; }
.pk-tarjeta img.pk-img--fallo {
  background: linear-gradient(135deg, var(--pk-n50), var(--pk-n100));
}

.pk-tarjeta__badges {
  position: absolute; top: var(--pk-e3); left: var(--pk-e3);
  display: flex; flex-wrap: wrap; gap: var(--pk-e1); max-width: calc(100% - 76px);
}
/* Distintivo 12/16 con peso 600, como la referencia. Estaba en peso 700, que
   junto a las mayúsculas y al `letter-spacing` lo hacía competir con el título
   por la atención. El distintivo informa; no encabeza. */
.pk-badge {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 var(--pk-e2);
  border-radius: var(--pk-r-sm);
  background: rgba(13,35,56,.82); color: #fff;
  font-size: var(--pk-fs-xs); line-height: var(--pk-lh-xs);
  font-weight: var(--pk-fw-semi); letter-spacing: .02em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.pk-badge--destacada { background: var(--pk-primario); }
.pk-badge--operacion { background: rgba(255,255,255,.94); color: var(--pk-tinta); }
.pk-badge--exito { background: var(--pk-exito); }

.pk-tarjeta__fotos {
  position: absolute; right: var(--pk-e3); bottom: var(--pk-e3);
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 var(--pk-e2);
  border-radius: var(--pk-r-sm);
  background: rgba(13,35,56,.72); color: #fff;
  font-size: var(--pk-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.pk-tarjeta__fotos .pk-icono { width: 14px; height: 14px; }

/* Favorito: control real dentro de una tarjeta enlazada por completo. */
.pk-fav {
  position: absolute; top: var(--pk-e2); right: var(--pk-e2); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  /* J-2 · 44 px. Era 40, con un comentario que lo llamaba «el mínimo
     accesible»; no lo es. 44 es el suelo de WCAG 2.5.5, y es el que este
     proyecto ya aplica al CTA de la cabecera y al teléfono de la ficha.
     Un control aislado y redondo sobre una foto es justo el caso que la
     norma contempla; no es un enlace dentro de una frase. */
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--pk-txt-sec);
  box-shadow: var(--pk-s1);
  transition: transform var(--pk-t), color var(--pk-t), background var(--pk-t);
}
.pk-fav:hover { transform: scale(1.08); color: var(--pk-primario); }
.pk-fav .pk-icono { width: 20px; height: 20px; }
.pk-fav[aria-pressed="true"] { color: var(--pk-primario); }
.pk-fav[aria-pressed="true"] .pk-icono { fill: var(--pk-primario); }

.pk-tarjeta__cuerpo {
  display: flex; flex-direction: column; gap: var(--pk-e2);
  padding: var(--pk-e4);
  min-width: 0;
  flex: 1;
}
/* El precio NO es más grande que el título.
   La referencia tipografía precio y dirección en el mismo paso (16/24) y deja
   que la jerarquía la hagan el peso 600 y 8 px de aire por encima. Es
   contraintuitivo en un portal inmobiliario, y es justamente lo que permite que
   una lista larga se lea tranquila: si cada tarjeta grita, ninguna destaca.
   Antes era 20 px con peso 700 y `letter-spacing` negativo. */
.pk-tarjeta__precio {
  display: flex; align-items: baseline; gap: var(--pk-e2); flex-wrap: wrap;
  margin-top: var(--pk-e2);
  font-size: var(--pk-fs-base); line-height: var(--pk-lh-base);
  font-weight: var(--pk-fw-semi);
  color: var(--pk-tinta);
}
.pk-tarjeta__precio small { font-size: var(--pk-fs-sm); font-weight: var(--pk-fw-normal); color: var(--pk-txt-ter); }
.pk-tarjeta__precio--consultar { font-size: var(--pk-fs-base); color: var(--pk-txt-sec); }

/* La ubicación es prominente por decisión de producto: en Guatemala es el
   primer criterio de descarte del comprador. */
.pk-tarjeta__ubic {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--pk-fs-sm); font-weight: 500; line-height: 1.35;
  color: var(--pk-tinta);
}
.pk-tarjeta__ubic .pk-icono { width: 16px; height: 16px; margin-top: 2px; color: var(--pk-txt-ter); }
.pk-tarjeta__ubic span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-width: 0; overflow: hidden; overflow-wrap: anywhere; white-space: normal;
}
.pk-tarjeta__ctx { font-size: var(--pk-fs-sm); color: var(--pk-txt-sec); margin-left: 22px; margin-top: -4px; }

/* Título a DOS líneas fijas.
   El castellano corre ~20 % más largo que el neerlandés y los títulos de Propeka
   son descriptivos («Apartamento en Alquiler Zona 15 Refugio de Alcalá»), no
   direcciones de cuatro palabras. Con una sola línea casi todas acababan en
   puntos suspensivos y se comían el nombre de la zona, que es el primer criterio
   de descarte del comprador guatemalteco.

   El peso era 650, que no existe en Open Sans y el navegador redondeaba.

   B-2 · FUERA LA BANDA VACÍA DE 24 px.

   Había aquí un `min-height: calc(var(--pk-lh-base) * 2)` —48 px— puesto
   cuando la columna medía 728 y casi todos los títulos ocupaban dos líneas.
   Con el marco unificado a 1020 la mayoría entra en UNA: medido en
   `/propiedades/`, el `h2` daba 48 px de alto con un enlace de 22 dentro. Eso
   son 24 px de vacío entre cada título y su dirección, repetidos por toda la
   lista, en la página más visitada del sitio.

   La intención original —filas parejas con títulos de una y dos líneas— no
   necesita reservar hueco:

     - en la LISTA la tarjeta es horizontal y cada una es su propia fila, así
       que no hay nada con lo que alinearse: la reserva era pérdida pura;
     - en la REJILLA de la portada las tarjetas ya se estiran a la misma altura
       por ser elementos de un grid, y `.pk-datos { margin-top: auto }` ancla la
       franja inferior. La alineación la hace la estructura, no un hueco.

   El `-webkit-line-clamp: 2` se queda: es el techo, que es lo que de verdad
   hacía falta para que un título largo no rompa la retícula. */
.pk-tarjeta__titulo {
  margin: 0;
  font-size: var(--pk-fs-base); line-height: var(--pk-lh-base);
  font-weight: var(--pk-fw-semi); color: var(--pk-tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pk-tarjeta__titulo a { color: inherit; }
.pk-tarjeta__titulo a:hover {
  color: var(--pk-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pk-datos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--pk-e1) var(--pk-e3);
  margin-top: auto; padding-top: var(--pk-e3);
  border-top: 1px solid var(--pk-n100);
  font-size: var(--pk-fs-sm); color: var(--pk-txt-sec);
}
.pk-datos li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pk-datos .pk-icono { width: 17px; height: 17px; color: var(--pk-n400); }
.pk-datos b { font-weight: 600; color: var(--pk-txt); font-variant-numeric: tabular-nums; }

.pk-anunciante {
  display: flex; align-items: center; gap: var(--pk-e2);
  padding-top: var(--pk-e3); margin-top: var(--pk-e1);
  border-top: 1px solid var(--pk-n100);
  font-size: var(--pk-fs-xs); color: var(--pk-txt-ter);
}
.pk-anunciante__logo {
  width: 26px; height: 26px; border-radius: var(--pk-r-sm);
  object-fit: contain; background: var(--pk-n50); flex: none;
}
.pk-anunciante__n { font-weight: 600; color: var(--pk-tinta); }

/* Enlace que cubre la tarjeta sin atrapar los controles anidados.
   Los controles se elevan por encima con z-index; NO se les cambia el
   `position`, o el favorito perdería su anclaje absoluto. */
.pk-tarjeta__enlace::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.pk-tarjeta__medio { position: relative; z-index: 2; }
.pk-anunciante a { position: relative; z-index: 2; }
.pk-fav { z-index: 3; }

/* --- 7b. Tarjeta promocionada ------------------------------------------- */
/*
 * Rebalanceo (remediación de aceptación).
 *
 * Medición previa, en navegador real: a 1440 px la tarjeta medía 573 px y el
 * 58,4 % de su columna de contenido quedaba VACÍO; a 768 px llegaba a 984 px,
 * más de un viewport completo. La causa era que la altura la imponía la
 * columna de medios —imagen 3/2 al 44 % del ancho, más una tira de miniaturas
 * proporcional— y el contenido, que ocupa bastante menos, dejaba un campo
 * muerto a la derecha.
 *
 * Ahora manda el CONTENIDO: la fila de la retícula se dimensiona por el cuerpo
 * (con un mínimo legible) y la imagen rellena la columna izquierda con
 * `object-fit: cover`. La tarjeta deja de crecer sin motivo y el anuncio
 * destacado sigue siendo evidente sin aplastar al inventario normal.
 */
.pk-promo { border-color: var(--pk-n200); box-shadow: var(--pk-s2); }
.pk-promo__tira {
  display: flex; align-items: center; gap: var(--pk-e2);
  padding: var(--pk-e2) var(--pk-e4);
  background: var(--pk-primario-suave);
  border-bottom: 1px solid #f7d9de;
  font-size: var(--pk-fs-xs); font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--pk-primario-osc);
}

@media (min-width: 900px) {
  .pk-promo {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    /* La segunda fila la define el contenido, con un mínimo que mantiene la
       imagen legible. Ya no la impone la proporción de la foto. */
    grid-template-rows: auto minmax(248px, auto);
    grid-template-areas:
      "tira   tira"
      "medio  cuerpo";
    align-items: stretch;
  }
  .pk-promo .pk-promo__tira { grid-area: tira; }
  .pk-promo .pk-tarjeta__medio {
    grid-area: medio; display: flex; flex-direction: column;
    min-height: 0; /* Permite que la columna se ajuste a la fila. */
  }
  .pk-promo .pk-tarjeta__cuerpo {
    grid-area: cuerpo;
    padding: var(--pk-e4) var(--pk-e5);
    /* Los datos y el anunciante se anclan abajo: el espacio sobrante se
       reparte, no se acumula en un hueco al final. */
    justify-content: space-between;
    gap: var(--pk-e2);
  }
  /* La foto se saca del flujo dentro de su caja: si contribuyera con su altura
     intrínseca (fotografías de 1.500 px) la fila crecería sin control —medido:
     1.622 px de tarjeta— en lugar de ajustarse al contenido. Así la columna de
     medios sólo aporta su mínimo y la imagen rellena lo que haya. */
  .pk-promo .pk-tarjeta__foto { flex: 1 1 auto; min-height: 180px; }
  .pk-promo .pk-tarjeta__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    aspect-ratio: auto; object-fit: cover;
  }
  .pk-promo .pk-sinimg { position: absolute; inset: 0; aspect-ratio: auto; }
  .pk-promo .pk-tarjeta__precio { font-size: var(--pk-fs-xl); }
  .pk-promo .pk-tarjeta__ubic { font-size: var(--pk-fs-base); }

  /* La franja de miniaturas es un acento, no una segunda galería: altura fija
     y discreta en vez de una proporción que estiraba la tarjeta. */
  .pk-promo .pk-promo__tiras { height: 76px; }
  .pk-promo .pk-promo__tiras img { height: 76px; aspect-ratio: auto; }
}

/* A partir de 1200 px sobra anchura. En lugar de dejar la mitad derecha en
   blanco, la columna de medios se lleva algo más de espacio y la línea de
   hechos se reparte a lo ancho, de modo que el bloque de contenido llega
   visualmente hasta el borde en vez de quedar apelotonado a la izquierda. */
@media (min-width: 1200px) {
  .pk-promo { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
  .pk-promo .pk-tarjeta__cuerpo { padding: var(--pk-e5) var(--pk-e6); }
  .pk-promo .pk-datos {
    justify-content: space-between;
    gap: var(--pk-e2) var(--pk-e4);
    /* Con pocos hechos, repartirlos de extremo a extremo los separaría en
       exceso; el tope evita esa dispersión. */
    max-width: 560px;
  }
  .pk-promo .pk-tarjeta__precio { font-size: var(--pk-fs-xl); }
  .pk-promo .pk-tarjeta__titulo { max-width: 62ch; }
  .pk-promo .pk-anunciante { justify-content: flex-start; }
}

.pk-promo__tiras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin-top: 2px; flex: none;
}
.pk-promo__tiras img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/*
 * Densidad en apilado (tablet y móvil).
 *
 * Por debajo de 900 px la tarjeta se apila, y con la franja de miniaturas
 * llegaba a 984 px: más de un viewport sólo para el primer anuncio pagado.
 * Las miniaturas se retiran —son decorativas y ya llevan `aria-hidden`— y la
 * foto principal adopta una proporción más baja. No se oculta NINGÚN dato:
 * precio, ubicación, hechos y anunciante siguen completos.
 */
@media (max-width: 899.98px) {
  .pk-promo .pk-promo__tiras { display: none; }
  .pk-promo .pk-tarjeta__img { aspect-ratio: 16 / 10; }
  .pk-promo .pk-tarjeta__cuerpo { padding: var(--pk-e4); gap: var(--pk-e2); }
  .pk-promo .pk-promo__tira { padding: 6px var(--pk-e4); }

  /* Tope de altura de la foto en apilado.
     A 768 px la tarjeta promocionada medía 731 px —el 71 % del viewport— porque
     una proporción 16/10 sobre 728 px de ancho da una foto de 455 px. Con una
     altura máxima la foto se recorta por el centro en lugar de estirar la
     tarjeta, y el inventario normal deja de quedar fuera de la primera pantalla. */
  .pk-promo .pk-tarjeta__img { max-height: 34vh; object-fit: cover; }
}

@media (max-width: 575.98px) {
  .pk-promo .pk-tarjeta__img { aspect-ratio: 16 / 9; }
  .pk-promo .pk-tarjeta__precio { font-size: var(--pk-fs-lg); }
}

/*
 * Estabilidad de altura de la tarjeta estándar.
 *
 * Medido en móvil: hasta 73 px de diferencia entre la tarjeta más alta y la
 * más baja de la misma lista, según cuántas líneas ocupara la ubicación, si
 * había título añadido y si los hechos daban la vuelta. Se RESERVA el espacio
 * de esos bloques en lugar de dejarlo variar, de modo que la retícula no baila
 * al desplazarse. No se recorta información: la reserva es un mínimo.
 */
.pk-tarjeta__ubic span { min-height: 2.7em; }          /* dos líneas a 1.35 */
.pk-tarjeta__cuerpo .pk-datos { min-height: 42px; }

/*
 * Retícula de varias columnas: el precio también se alinea.
 *
 * La reserva de arriba cubre la ubicación y los hechos, pero NO la línea de
 * contexto (`.pk-tarjeta__ctx`, «Carretera a El Salvador · Ciudad de
 * Guatemala · Guatemala»), que unas fichas tienen y otras no. Medido en el
 * perfil de agencia a 1440: título, ubicación, hechos y anunciante caían a la
 * misma altura en las tres tarjetas de la fila, pero el precio aparecía a 414,
 * 360 y 389 px del borde superior. La fila se leía desalineada y la tarjeta sin
 * contexto mostraba un hueco vacío.
 *
 * En lugar de reservar una línea más —que dejaría hueco en las fichas sin
 * contexto— el precio pasa a anclar el grupo inferior: precio, hechos y
 * anunciante quedan pegados abajo y el espacio sobrante se acumula ENTRE la
 * ubicación y el precio, que es donde no se nota.
 *
 * Sólo en la retícula de varias columnas (`.pk-bloque`: perfiles, portada,
 * directorio). La lista de resultados usa `.pk-resultados` con tarjeta
 * horizontal y una por fila, donde no hay nada que alinear.
 */
.pk-bloque .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__precio { margin-top: auto; }
.pk-bloque .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__cuerpo .pk-datos { margin-top: 0; }

@media (max-width: 575.98px) {
  /* En una columna estrecha el título secundario se limita a una línea: la
     ubicación ya identifica la propiedad y el título completo está en la ficha. */
  .pk-tarjeta__titulo { -webkit-line-clamp: 2; }  /* B-2: sin reserva */
  /* A una columna no hay fila que alinear: la reserva de dos líneas para la
     ubicación dejaba una banda vacía de ~22 px entre la ubicación y el precio
     en cada tarjeta con ubicación de una línea (portada a 390, medido el
     22-09-2026). El precio sigue anclado abajo cuando hay contexto. */
  .pk-tarjeta__ubic span { min-height: 0; }
}

/*
 * Estado comercial no disponible.
 */
.pk-no-disponible {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pk-e2);
  margin-top: var(--pk-e4);
  padding: var(--pk-e3) var(--pk-e4);
  background: var(--pk-n50);
  border: 1px solid var(--pk-n200);
  border-left: 4px solid var(--pk-txt-ter);
  border-radius: var(--pk-r);
}
.pk-no-disponible__et {
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  font-size: var(--pk-fs-sm); color: var(--pk-tinta);
}
.pk-no-disponible__tx { font-size: var(--pk-fs-base); color: var(--pk-txt-sec); }

.pk-contacto__cerrado { display: flex; flex-direction: column; gap: var(--pk-e3); }
.pk-movil-contacto__estado {
  font-size: var(--pk-fs-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--pk-txt-sec); margin-left: auto;
}

/* Avisos accesibles del formulario de contacto. */
.pk-aviso {
  padding: var(--pk-e3) var(--pk-e4); border-radius: var(--pk-r);
  font-size: var(--pk-fs-base); margin-bottom: var(--pk-e4);
}
.pk-aviso--exito { background: #eaf7ef; border: 1px solid #b9e3c8; color: #1c6b3a; }
.pk-aviso--error { background: var(--pk-primario-suave); border: 1px solid #f2c4cb; color: var(--pk-primario-osc); }
.pk-aviso:focus { outline: 2px solid var(--pk-navy); outline-offset: 2px; }

.pk-precio-grande--consultar { font-size: var(--pk-fs-lg); color: var(--pk-txt-sec); white-space: normal; }

/* --- 7d. Pantallas de cuenta -------------------------------------------- */
/*
 * Favoritas y búsquedas guardadas se sirven ahora con plantillas del tema hijo
 * y con los componentes de Propeka, de modo que el usuario identificado ve la
 * misma interfaz que en el resto del sitio.
 */
.pk-cuenta { background: var(--pk-n0); }
.pk-cuenta__enc {
  padding-bottom: var(--pk-e5);
  margin-bottom: var(--pk-e6);
  border-bottom: 1px solid var(--pk-n100);
}
.pk-cuenta__enc .pk-h1 { margin-bottom: var(--pk-e2); }

.pk-guardadas { display: flex; flex-direction: column; gap: var(--pk-e3); }
.pk-guardada {
  display: flex; align-items: center; gap: var(--pk-e4); flex-wrap: wrap;
  padding: var(--pk-e4) var(--pk-e5);
  background: var(--pk-n0);
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-lg);
  transition: border-color var(--pk-t), box-shadow var(--pk-t);
}
.pk-guardada:hover { border-color: var(--pk-n200); box-shadow: var(--pk-s1); }
.pk-guardada__txt { flex: 1 1 260px; min-width: 0; }
.pk-guardada__t {
  display: block;
  font-size: var(--pk-fs-lg);
  font-weight: var(--pk-fw-semi);
  color: var(--pk-tinta);
  line-height: var(--pk-lh-ajustado);
}
.pk-guardada__t:hover { color: var(--pk-primario); }
.pk-guardada__f { margin-top: 4px; font-size: var(--pk-fs-sm); color: var(--pk-txt-sec); }
.pk-guardada__m { margin-top: 4px; font-size: var(--pk-fs-sm); color: var(--pk-txt-ter); }
.pk-guardada__acc { display: flex; gap: var(--pk-e2); flex: none; }
.pk-btn--fantasma { background: none; border: 1px solid transparent; color: var(--pk-txt-sec); }
.pk-btn--fantasma:hover { border-color: var(--pk-n200); color: var(--pk-primario); background: var(--pk-n25); }
.pk-guardada.pk-guardada--yendose { opacity: .4; pointer-events: none; }

@media (max-width: 640px) {
  .pk-guardada { padding: var(--pk-e4); }
  .pk-guardada__acc { width: 100%; }
  .pk-guardada__acc .pk-btn { flex: 1; }
}

/* --- 8. Listado --------------------------------------------------------- */
/*
 * Nota de arquitectura.
 *
 * Esta seccion contiene PRIMITIVAS COMPARTIDAS: `.pk-rejilla`, `.pk-tarjeta` y
 * `.pk-paginacion` los consumen tambien la ficha, los perfiles y el panel de
 * favoritos. Lo que solo vive en `/propiedades/` se define una sola vez en la
 * capa autoritativa del final del archivo, no aqui.
 *
 * `.pk-resultados { padding-bottom }` y el bloque de `.pk-orden` estaban
 * declarados en los dos sitios. Solo los usa la vista de resultados, y la
 * copia de aqui no era inofensiva: su `width: 100%` de la consulta de 900 px
 * resolvia contra la fila flexible del encabezado y desbordaba la pagina 101 px
 * a 768. Se han retirado; su unica definicion esta abajo.
 */
.pk-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--pk-e5);
}
.pk-rejilla > .pk-promo { grid-column: 1 / -1; }

/*
 * Resultados de alta densidad: una columna editorial legible y un rail
 * publicitario independiente, como en los grandes portales inmobiliarios.
 */
.pk-results-layout {
  display: grid;
  grid-template-columns: minmax(0, 820px) 160px;
  /* La lista se alinea a la izquierda y el rail al borde derecho del
     contenedor. Con `center` las dos columnas sumaban 1012 px dentro de un
     contenedor de 1152 y quedaban 140 px de aire repartido a los lados: el
     rail flotaba sin pertenecer al borde y la lista aparecía descentrada
     respecto de la cabecera y de los chips, que sí llegan al contenedor. */
  justify-content: space-between;
  align-items: start;
  gap: var(--pk-e8);
}
.pk-results-layout [data-pk-listado] { min-width: 0; }
.pk-results-layout .pk-rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--pk-e4); }

/*
 * Resultados de alta densidad.
 *
 * Desde 700 px la referencia viva de Funda usa una fila compacta con
 * fotografía lateral e información escaneable. La foto permanece fuera del
 * flujo en una caja acotada, por lo que una toma vertical nunca puede volver
 * a estirar la tarjeta. En móvil se conserva la composición apilada.
 */
@media (min-width: 700px) {
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) {
    display: grid;
    grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
    grid-template-areas: "medio cuerpo";
    min-height: 256px;
    align-items: stretch;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__medio {
    grid-area: medio;
    position: relative;
    min-height: 256px;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__foto {
    position: absolute;
    inset: 0;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__img,
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-sinimg {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__cuerpo {
    grid-area: cuerpo;
    min-width: 0;
    padding: var(--pk-e5);
    gap: var(--pk-e2);
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__ubic span {
    min-height: 0;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-anunciante {
    padding-top: var(--pk-e2);
    margin-top: 0;
  }
}

.pk-split--mapa .pk-results-layout {
  display: block;
  max-width: none;
}
.pk-split--mapa .pk-results-rail { display: none; }

.pk-paginacion {
  display: flex; justify-content: center; align-items: center; gap: var(--pk-e1);
  margin-top: var(--pk-e10); flex-wrap: wrap;
}
.pk-paginacion a, .pk-paginacion span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 var(--pk-e3);
  border: 1px solid var(--pk-n200); border-radius: var(--pk-r);
  font-size: var(--pk-fs-base); font-weight: 600; color: var(--pk-txt-sec);
  transition: border-color var(--pk-t), background var(--pk-t), color var(--pk-t);
}
.pk-paginacion a:hover { border-color: var(--pk-navy); color: var(--pk-navy); }
.pk-paginacion [aria-current="page"] { background: var(--pk-tinta); border-color: var(--pk-tinta); color: #fff; }
.pk-paginacion .pk-pag-hueco { border: 0; min-width: 24px; }

/* --- 9. Hoja de filtros (móvil) y panel avanzado ------------------------ */
.pk-hoja {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: var(--pk-n0);
  /* Alto real del viewport: evita que el navegador móvil tape el pie. */
  height: 100dvh;
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(.2,.8,.3,1);
}

/* La barra de administración no debe cubrir el encabezado del diálogo. */
body.admin-bar .pk-hoja {
  top: 32px;
  height: calc(100dvh - 32px);
}
/* A 390 px #wpadminbar es absolute, mide 46 px y tiene z-index: 99999.
   La hoja debe cubrirlo: una reserva fija deja una banda al desplazarse y
   top: 0 sin elevar la capa oculta el titulo y el cierre bajo la barra.
   El velo queda entre la barra y el dialogo, tambien a 768-782 px. */
@media (max-width: 782px) {
  body.admin-bar .pk-hoja {
    top: 0;
    height: 100dvh;
    z-index: 100001;
  }
  body.admin-bar .pk-velo { z-index: 100000; }
}
.pk-hoja[hidden] { display: none; }
.pk-hoja--abierta { transform: translateY(0); }
.pk-hoja__cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pk-e3);
  padding: var(--pk-e3) var(--pk-e4);
  border-bottom: 1px solid var(--pk-n100);
  flex: none;
}
.pk-hoja__cerrar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--pk-txt-sec);
}
.pk-hoja__cerrar:hover { background: var(--pk-n50); }
.pk-hoja__cuerpo {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--pk-e4) var(--pk-e4) var(--pk-e8);
  overscroll-behavior: contain;
}
.pk-hoja__pie {
  flex: none;
  padding: var(--pk-e3) var(--pk-e4);
  /* Zona segura de iOS: el botón nunca queda bajo la barra del navegador. */
  padding-bottom: calc(var(--pk-e3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pk-n100);
  background: var(--pk-n0);
  box-shadow: var(--pk-s4);
  display: flex; gap: var(--pk-e3); align-items: center;
}
.pk-hoja__pie .pk-btn--primario { flex: 1; }

.pk-seccion { padding: var(--pk-e5) 0; border-bottom: 1px solid var(--pk-n100); }
.pk-seccion:first-child { padding-top: 0; }
.pk-seccion:last-child { border-bottom: 0; }
.pk-seccion__t {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 var(--pk-e3);
  font-size: var(--pk-fs-base); font-weight: 700; color: var(--pk-tinta);
}
.pk-seccion__n {
  font-size: var(--pk-fs-xs); font-weight: 600; color: var(--pk-primario);
  background: var(--pk-primario-suave); border-radius: var(--pk-r-pill);
  padding: 2px var(--pk-e2);
}
.pk-seccion__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pk-e3); }

/* Grupo de botones tipo «2+ dormitorios» */
.pk-pildoras { display: flex; flex-wrap: wrap; gap: var(--pk-e2); }
.pk-pildora {
  min-height: 40px; padding: 0 var(--pk-e4);
  display: inline-flex; align-items: center;
  border: 1px solid var(--pk-n200); border-radius: var(--pk-r-pill);
  font-size: var(--pk-fs-sm); font-weight: 600; color: var(--pk-txt-sec);
  background: var(--pk-n0);
  transition: all var(--pk-t);
}
.pk-pildora:hover { border-color: var(--pk-n400); }
.pk-pildora[aria-pressed="true"] {
  background: var(--pk-tinta); border-color: var(--pk-tinta); color: #fff;
}

.pk-velo {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(13,35,56,.45);
  opacity: 0; transition: opacity 200ms;
}
.pk-velo[hidden] { display: none; }
.pk-velo--visible { opacity: 1; }

/* Barra flotante de filtros en móvil */
.pk-movil-barra {
  position: sticky; top: 0; z-index: 30;
  display: none;
  gap: var(--pk-e2);
  padding: var(--pk-e2) var(--pk-e4);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pk-n100);
}
/* Los controles se reparten el ancho; con el mapa oculto por debajo de 1025 px
   quedan dos, y con pantallas muy estrechas «Guardar» se reduce a su icono
   conservando la etiqueta accesible. */
.pk-movil-barra .pk-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
@media (max-width: 380px) {
  .pk-movil-barra .js-pk-guardar-busqueda .pk-btn__txt { display: none; }
  .pk-movil-barra .js-pk-guardar-busqueda { flex: 0 0 auto; }
}
/* 44 px, no 42: son los controles tactiles principales de la vista movil y
   deben respetar la misma escala que el resto de la interfaz. */
.pk-movil-barra .pk-btn { flex: 1; min-height: var(--pk-alto-ctl); }
.pk-cuenta-pip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--pk-r-pill);
  background: var(--pk-primario); color: #fff;
  font-size: var(--pk-fs-xs); font-weight: 700;
}

/* --- 10. Mapa ----------------------------------------------------------- */
.pk-split { display: grid; grid-template-columns: 1fr; gap: 0; }
.pk-split--mapa { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
/* `.pk-mapa` es, por defecto, un bloque normal en el flujo.
   Antes traia de serie `position: sticky; top: 64px; height: calc(100dvh - 64px)`,
   que es el comportamiento de la vista partida de resultados. En la ficha de
   propiedad ese mismo bloque es un mapa de situacion pequeno, y la plantilla
   tenia que desactivar la fijacion con un `style="position:static"` en linea.
   Bastaba con que Leaflet reescribiera el atributo `style` al inicializar el
   contenedor para que reapareciera la fijacion: el mapa se desplazaba 64 px
   —exactamente el valor de `top`— y tapaba el parrafo de aviso que va debajo
   («La ubicacion mostrada es aproximada»), que dejaba de verse.
   La fijacion pertenece a la vista partida y solo alli se declara. */
.pk-mapa {
  position: relative;
  background: var(--pk-n100);
  border-radius: var(--pk-r-lg);
  overflow: hidden;
}
.pk-split--mapa .pk-mapa {
  position: sticky; top: 64px;
  height: calc(100dvh - 64px);
}
/* Mapa de situacion de la ficha: altura fija y sin fijacion. */
.pk-mapa[data-pk-mapa-ficha] { height: 340px; }
.pk-mapa[hidden] { display: none; }
.pk-mapa__aviso {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--pk-e3); height: 100%; padding: var(--pk-e6);
  /* Secundario, no terciario: este aviso va sobre `--pk-n100`, un gris claro,
     y el terciario se quedaba en 4.21:1 sobre ese fondo. */
  color: var(--pk-txt-sec); text-align: center;
}

/* Espera del mapa.
   El aviso de carga y el de «ningun resultado tiene ubicacion» comparten
   contenedor pero NO significan lo mismo: uno describe un proceso, el otro
   afirma un hecho. El giro distingue el primero de un vistazo, sin necesidad
   de leer, que es justo lo que faltaba cuando la ruta `?mapa=1` abria con la
   conclusion equivocada. */
.pk-mapa__spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--pk-n300);
  border-top-color: var(--pk-primario);
  border-radius: 50%;
  animation: pk-girar 720ms linear infinite;
}

@keyframes pk-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pk-mapa__spinner { animation-duration: 2400ms; }
}

/* Nota sobre resultados sin ubicación. Va por encima del lienzo de Leaflet
   (z-index 400 en sus controles) para que no quede oculta. */
.pk-mapa__nota {
  position: absolute; left: var(--pk-e3); right: var(--pk-e3); bottom: var(--pk-e3);
  z-index: 500;
  margin: 0; padding: var(--pk-e2) var(--pk-e3);
  background: rgba(255,255,255,.95);
  border: 1px solid var(--pk-n200); border-radius: var(--pk-r-sm);
  box-shadow: var(--pk-s1);
  font-size: var(--pk-fs-sm); color: var(--pk-txt-sec); text-align: center;
}
.pk-mapa__nota[hidden] { display: none; }
.pk-mapa__nota--error {
  top: 80px; bottom: auto;
  pointer-events: none;
}

/* --- 11. Ficha de propiedad -------------------------------------------- */
.pk-ficha { padding-bottom: var(--pk-e16); }

/*
 * sec. 1.3 · Re-derived from Funda's ratio relationship, not one rule per count.
 *
 * Measured on Funda: large tile 574x448, four small tiles 285x222, 4px gutter
 * both axes. 222+4+222 = 448 and 285+4+285 = 574 — the small block is a
 * scaled copy of the large tile, both at the same aspect ratio (1.28). A grid
 * of equal `1fr` tracks sharing one gap value sums back to the spanned
 * element's size BY CONSTRUCTION, for any span — that relationship, not a
 * hand-picked pixel height per count, is why the mosaic cannot go ragged.
 *
 * R-03 found the gap this produces when the relationship is hand-applied per
 * count instead of once: four photos had no rule at all, because three
 * separate rules had been written for three separate row counts and a fourth
 * was never added. There are really only three distinct SHAPES, not five —
 * see the PHP in `single-property.php` for how a count maps to one of them.
 */
.pk-galeria {
  display: grid;
  gap: var(--pk-e2);
  border-radius: var(--pk-r-lg);
  overflow: hidden;
  margin-top: var(--pk-e4);
}
.pk-galeria__pieza { position: relative; margin: 0; background: var(--pk-n100); overflow: hidden; }
.pk-galeria__pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms; }
.pk-galeria__pieza:hover img { transform: scale(1.04); }
.pk-galeria__pieza img { aspect-ratio: 4 / 3; }

/* 1 photo — the lead alone. No spanning to define: there is nothing to span. */
.pk-galeria--sola { grid-template-columns: 1fr; }

/*
 * 2-4 photos — lead beside a single column of 1-3 thumbnails, stacked.
 *
 * The row count is the ONLY thing that changes between what used to be three
 * separate rules (`--2`, `--3`, `--4`). `--pk-galeria-filas` is set inline by
 * PHP from the actual thumbnail count, so this is now one rule instead of
 * three, and a fifth or sixth count would need no new CSS — only a wider cap
 * in the PHP, which is where the true limit belongs.
 *
 * Two columns, not a lead spanning two of an equal four: `2fr` beside a
 * single `1fr` thumbnail column is what keeps the lead at the same width
 * regardless of how many rows the thumbnail column holds.
 */
.pk-galeria--vertical {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(var(--pk-galeria-filas, 1), 1fr);
}
.pk-galeria--vertical .pk-galeria__pieza--principal {
  grid-row: span var(--pk-galeria-filas, 1);
}

/*
 * 5+ photos — lead beside a 2x2 block of exactly four thumbnails, Funda's
 * actual mosaic. Never more than four thumbnails render regardless of how
 * many photos the listing has, so the shape is fixed and needs no variable —
 * this is the one count that was always correct, because it was the only one
 * ever exercised by the inventory before R-03.
 */
.pk-galeria--mosaico {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.pk-galeria--mosaico .pk-galeria__pieza--principal { grid-row: span 2; }

.pk-galeria__todas {
  position: absolute; right: var(--pk-e3); bottom: var(--pk-e3);
  display: inline-flex; align-items: center; gap: var(--pk-e2);
  min-height: 40px; padding: 0 var(--pk-e4);
  background: rgba(255,255,255,.95); color: var(--pk-tinta);
  border-radius: var(--pk-r); font-size: var(--pk-fs-sm); font-weight: 600;
  box-shadow: var(--pk-s2);
}
.pk-galeria__todas:hover { background: #fff; }

.pk-acciones-media {
  position: absolute; top: var(--pk-e3); right: var(--pk-e3); z-index: 3;
  display: flex; gap: var(--pk-e2);
}
.pk-accion-redonda {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--pk-txt-sec);
  box-shadow: var(--pk-s1);
  transition: color var(--pk-t), transform var(--pk-t);
}
.pk-accion-redonda:hover { color: var(--pk-primario); transform: scale(1.06); }
.pk-accion-redonda[aria-pressed="true"] { color: var(--pk-primario); }
.pk-accion-redonda[aria-pressed="true"] .pk-icono { fill: var(--pk-primario); }

/* =========================================================================
   Ficha de propiedad — retícula medida en la referencia en vivo
   =========================================================================
   Medido en su ficha a 1521 px de ventana: marco de 1020 con una retícula
   `696px 300px`, es decir 24 px de separación. Aquí era `1fr 360px` con 40 px
   dentro de un marco de 1200: la columna de contenido salía 56 px más ancha,
   el rail 60 más, y la ficha no compartía marco con el resto del sitio.
   ========================================================================= */
.pk-ficha__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
  margin-top: var(--pk-e6);
}

/* En movil las dos columnas se apilan: el rail de contacto pasa a ser un
   bloque normal debajo del contenido principal y el mapa se ve sin apretar. */
@media (max-width: 767.98px) {
  .pk-ficha__cols {
    grid-template-columns: 1fr;
    gap: var(--pk-e5);
  }

}

.pk-ficha__enc { display: flex; justify-content: space-between; gap: var(--pk-e6); flex-wrap: wrap; align-items: flex-start; }
.pk-precio-grande {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--pk-tinta); white-space: nowrap;
}
.pk-precio-grande small { display: block; font-size: var(--pk-fs-sm); font-weight: 500; color: var(--pk-txt-ter); }

/* Fila de hechos principales */
.pk-hechos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--pk-e3);
  margin-top: var(--pk-e6);
  padding: var(--pk-e5);
  background: var(--pk-n25);
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-lg);
}
.pk-hecho { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.pk-hecho__ic { color: var(--pk-navy); }
.pk-hecho__v { font-size: var(--pk-fs-lg); font-weight: 700; color: var(--pk-tinta); font-variant-numeric: tabular-nums; }
.pk-hecho__l { font-size: var(--pk-fs-sm); color: var(--pk-txt-ter); }

.pk-bloque { margin-top: var(--pk-e10); }
.pk-bloque__t { margin-bottom: var(--pk-e4); }
.pk-prosa { color: var(--pk-txt-sec); line-height: 1.7; font-size: var(--pk-fs-base); max-width: 68ch; }
.pk-prosa p { margin: 0 0 var(--pk-e4); }
.pk-prosa p:last-child { margin-bottom: 0; }

/* Características agrupadas */
/* =========================================================================
   R-05 · Características — a layout-model fix, then corrected against Funda
   =========================================================================
   Measured on a commercial listing at 1440, five groups in a two-column grid:

     - groups were INDEPENDENT blocks in `repeat(auto-fit, minmax(280px,1fr))`,
       so their heights differed (120, 120, 161, 161, 120) and rows never
       aligned across columns. A one-row group opposite a five-row group left a
       large void, which is what read as ragged.
     - values were right-aligned, so their left edges landed at 388, 397, 501,
       502, 739, 821, 845 and 896 — nine values, no shared edge, impossible to
       scan as a column.
     - labels computed weight 700 against values at 600: the emphasis was
       inverted. The value is the answer.
     - every row carried its own rule, so the section read as a table of
       fifteen bands instead of grouped facts.

   First pass: one grid for the whole section, two pairs per row, weight moved
   to the values. That fixed the void and the shared edge, but two things in
   it were never measured against a reference — they were instinct, stated as
   fact. Funda's `Kenmerken` (measured live at 1536, `dl` with
   `grid-template-columns: 231.8px 430.5px`) corrects both:

     - "no per-row rules" was wrong. Funda uses light hairlines between rows,
       and on a list this long they are what makes it scannable, not noise.
     - "weight on values" was also wrong. Funda carries the label/value
       distinction with COLOUR alone — label `#4D4D4D`, value `#333333`, both
       weight 400. Bold values read heavier at nine rows than the layout needs.

   And the one still open: nine groups at Funda NEVER run two pairs to a row.
   One column, always. Two columns was the original scatter problem at half
   scale — two label tracks of different widths is still two edges, not one.
   Single column removes the coincidence entirely: one grid, one label track,
   one value edge, for as many groups as the listing has.
   ========================================================================= */
.pk-grupos {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--pk-e6);
}

.pk-grupo { display: contents; }

.pk-grupo__t {
  grid-column: 1 / -1;
  font-size: var(--pk-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pk-txt-ter);
  margin: var(--pk-e6) 0 var(--pk-e3);
  padding-bottom: var(--pk-e2); border-bottom: 1px solid var(--pk-n100);
}

/* The first header opens the section, so it does not need the separation that
   divides one group from the next. */
.pk-grupo:first-child .pk-grupo__t { margin-top: 0; }

/*
 * The pair wrapper is `display: contents`, so `<dt>`/`<dd>` become items of
 * the single `.pk-grupos` grid directly — no wrapper of its own carries
 * geometry, so removing it costs nothing in the accessibility tree, and the
 * `max-content` label track sizes to the longest label in the WHOLE section,
 * not per group or per row.
 */
.pk-pares { display: contents; }
.pk-pares .pk-par { display: contents; }

.pk-pares dt, .pk-pares .pk-par__k {
  padding: var(--pk-e2) 0;
  font-size: var(--pk-fs-base);
  color: var(--pk-txt-sec);
  font-weight: var(--pk-fw-normal);
  border-bottom: 1px solid var(--pk-n50);
}

/* Funda, measured: no weight difference between label and value — colour
   alone carries the distinction. `--pk-txt` over `--pk-txt-sec` is the same
   relationship as Funda's `#333` over `#4D4D4D`. */
.pk-pares dd, .pk-pares .pk-par__v {
  margin: 0;
  padding: var(--pk-e2) 0;
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-normal);
  color: var(--pk-txt);
  text-align: left;
  border-bottom: 1px solid var(--pk-n50);
}

/* The last row of a group does not need a rule under it: the group's own
   bottom margin already separates it from what follows. */
.pk-grupo:last-of-type .pk-par:last-child dt,
.pk-grupo:last-of-type .pk-par:last-child dd {
  border-bottom: 0;
}

.pk-amenidades { display: flex; flex-wrap: wrap; gap: var(--pk-e2); }
.pk-amenidad {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--pk-e2) var(--pk-e3);
  background: var(--pk-n50); border-radius: var(--pk-r-pill);
  font-size: var(--pk-fs-sm); color: var(--pk-txt-sec);
}
.pk-amenidad .pk-icono { width: 15px; height: 15px; color: var(--pk-exito); }
/* El verde de «incluido» tiene sentido en la marca de una amenidad; en el pin de
   «Zonas donde opera» decía «sí» donde sólo hay un lugar. */
.pk-amenidad--zona .pk-icono { color: var(--pk-txt-ter); }

/*
 * Rail de la ficha: se adhiere el RAIL, no sus piezas.
 *
 * Con `position: sticky` en `.pk-contacto` el problema no desaparecia, solo
 * cambiaba de sitio: un elemento adherido siempre acaba pasando por encima de
 * lo que va DESPUES en su mismo contenedor. Primero era el anuncio el que
 * tapaba la tarjeta de contacto; al dejar el anuncio en el flujo, era la
 * tarjeta adherida la que tapaba el anuncio (medido: el marco «300 x 600» se
 * veia a traves de los campos del formulario).
 *
 * La solucion correcta es adherir el contenedor completo y no sus hijos: asi
 * nada del rail puede solaparse con nada. Se limita la altura al alto util de
 * la ventana y se permite el desplazamiento interno para que el anuncio siga
 * siendo alcanzable aunque el rail sea mas alto que la pantalla.
 */
/*
 * A-5: el rail deja de ser un panel con desplazamiento propio.
 *
 * Medido a 1440x900 antes del cambio: `clientHeight` 796 contra `scrollHeight`
 * 1392. Casi 600 px —el formulario de contacto entero y la reserva del
 * anuncio— quedaban detras de una barra de desplazamiento interna, dentro de
 * una pagina que ya se desplaza. Nadie busca contenido en un scroller anidado.
 *
 * La razon original de adherir el CONTENEDOR era que, adhiriendo los hijos, la
 * tarjeta de contacto se solapaba con el anuncio. Se resuelve sin encerrar
 * nada: el rail fluye con la pagina, la tarjeta de contacto es lo unico
 * adherido —para que la accion principal siga alcanzable al bajar, que es lo
 * que justificaba la barra fija de escritorio que A-4 retira— y el anuncio se
 * posiciona explicitamente, de modo que pinta POR ENCIMA de la tarjeta
 * adherida y no puede quedar tapado por ella.
 */
/*
 * El rail debe ESTIRARSE a la altura de la fila, no encogerse a su contenido.
 *
 * Un elemento adherido solo puede desplazarse dentro de su bloque contenedor.
 * Con `align-self: start` el rail medía 262 px al lado de una columna de
 * 2235 px, así que la tarjeta —declarada sticky más abajo— no tenía por dónde
 * viajar: a 1600 px de scroll estaba a -1032 px de la ventana, es decir, se
 * había ido con la página. Y al lado de la descripción quedaban dos mil
 * píxeles de columna vacía. Medido el 2026-09-08 a 1536 px.
 *
 * `stretch` es el valor por defecto de la rejilla; se declara para que nadie
 * lo vuelva a "arreglar" con `start` sin leer esto.
 */
.pk-ficha__rail {
  align-self: stretch;
}

/* 88 px suponía una cabecera adherida que en la ficha no existe (medido: nada
   fijo salvo la barra de administración de WordPress). Sin cabecera, el margen
   es el del sistema; con barra de administración se le suma su alto. */
.pk-ficha__rail > .pk-contacto {
  position: sticky;
  top: var(--pk-e6);
}
body.admin-bar .pk-ficha__rail > .pk-contacto { top: calc(32px + var(--pk-e6)); }
/* Adherida sólo mientras la tarjeta es compacta. Con el formulario abierto
   mide ~790 px: fijada arriba, «Enviar consulta» quedaba bajo el borde de
   cualquier ventana de menos de ~850 px de alto (una laptop de 1366×768
   tiene ~650 útiles) en TODA la página. Medido el 2026-09-23 a 1036×502. */
:is(.pk-ficha__rail, .pk-perfil__rail) > .pk-contacto:has(form:not([hidden])) { position: static; }

/* Peso visual de la acción principal del rail: misma altura táctil (44 px),
   cuerpo de texto un punto menor. Era el elemento más saturado de la página. */
.pk-contacto .pk-btn--bloque { font-size: var(--pk-fs-sm); }

.pk-ficha__rail > .pk-ad-slot {
  position: relative;
  z-index: 1;
}

/*
 * En movil nada se adhiere: la columna ya es una sola y la barra fija de
 * contacto —que en este ancho SI existe— cumple ese papel.
 *
 * Esta anulacion vive AQUI, y no en el bloque movil de la seccion del rail que
 * hay mas arriba, porque alli quedaba antes que la regla base en el orden del
 * archivo. Con la misma especificidad gana la ultima, asi que la version de
 * escritorio se imponia dentro de la consulta de medios: medido a 390,
 * `position` seguia siendo `sticky`. Estar dentro de un `@media` no aporta
 * especificidad; el orden manda igual.
 */
@media (max-width: 767.98px) {
  .pk-ficha__rail > .pk-contacto { position: static; }
}

/* Panel de contacto */
.pk-contacto {
  padding: var(--pk-e5);
  background: var(--pk-n0);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r-lg);
  box-shadow: var(--pk-s2);
}
.pk-contacto__id { display: flex; align-items: center; gap: var(--pk-e3); margin-bottom: var(--pk-e4); }
.pk-contacto__logo {
  width: 56px; height: 56px; border-radius: var(--pk-r); flex: none;
  object-fit: contain; background: var(--pk-n50); padding: 4px;
  border: 1px solid var(--pk-n100);
}
.pk-contacto__tipo {
  font-size: var(--pk-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pk-navy);
}
.pk-contacto__acciones { display: flex; flex-direction: column; gap: var(--pk-e2); margin-top: var(--pk-e4); }

/*
 * R-06 · The phone, made subordinate. Measured before the change: the WhatsApp
 * button and the phone both rendered 258x44 at weight 600, differing only in
 * fill. Identical mass reads as two primary actions and flattens the hierarchy
 * the red button exists to create.
 *
 * The 44 px target stays — that is an accessibility floor, not a styling
 * choice. What goes is the mass: no fill, no border, normal weight, secondary
 * text colour, and — per Funda, measured live at 1536 in a follow-up pass
 * (sec. 1.1) — no full width either. Funda's secondary is a plain text link sized
 * to its content, not a slot matching the container, so `.pk-btn--bloque`'s
 * `width: 100%` goes and `align-self: flex-start` stops the column flexbox's
 * default `stretch` from re-imposing it.
 *
 * The WhatsApp button is approved and untouched.
 */
.pk-contacto__tel {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--pk-e2);
  min-height: var(--pk-alto-ctl);
  padding: 0 var(--pk-e2);
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-normal);
  text-decoration: none;
  border-radius: var(--pk-r);
  transition: color var(--pk-t);
}

.pk-contacto__tel:hover,
.pk-contacto__tel:focus-visible {
  color: var(--pk-primario-osc);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pk-contacto__tel .pk-icono { width: 16px; height: 16px; }

/*
 * R-06 sec. 1.1 · A quiet trigger for the collapsed form.
 *
 * Same register as the phone link above — intrinsic width, secondary colour,
 * normal weight — so neither secondary affordance competes with the one
 * filled button. Hidden once the form is open: it has nothing left to do.
 */
.pk-contacto__disparo-form {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--pk-e2);
  min-height: var(--pk-alto-ctl);
  padding: 0 var(--pk-e2);
  margin: 0;
  background: none;
  border: 0;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-normal);
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--pk-r);
  transition: color var(--pk-t);
}

.pk-contacto__disparo-form:hover,
.pk-contacto__disparo-form:focus-visible {
  color: var(--pk-primario-osc);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pk-contacto__disparo-form .pk-icono { width: 16px; height: 16px; }
.pk-contacto__disparo-form[aria-expanded="true"] { display: none; }

.pk-form-campo { margin-bottom: var(--pk-e3); }
.pk-form-campo textarea.pk-campo { min-height: 96px; padding: var(--pk-e3); resize: vertical; }

/* =========================================================================
   Barra de accion fija de la ficha
   =========================================================================
   A-4 — REVERTIDO A MOVIL. La ronda anterior la extendio a escritorio con el
   argumento de que quien bajaba a leer la descripcion se quedaba sin via de
   contacto. El argumento era correcto; la solucion, no. Medido a 1536:

     - la barra se pintaba fija, 69 px de alto, en TODOS los anchos, de modo
       que tapaba permanentemente los ultimos 69 px de cada ficha;
     - convivia con la tarjeta de contacto del rail, y entre las dos dejaban
       CINCO vias de contacto simultaneas en pantalla —«Escribir por WhatsApp»,
       el telefono, WhatsApp, «Contactar» y un segundo WhatsApp—.

   Cinco llamadas a la misma accion no son enfasis, son ruido. El hueco real
   que la barra tapaba lo cubre ahora A-5: el rail deja de esconder 600 px tras
   un scroller anidado y su tarjeta de contacto queda adherida, asi que la
   accion sigue alcanzable al bajar sin ocupar una franja fija.

   El nombre de la clase vuelve a describir lo que hace.
   ========================================================================= */

/* Por defecto NO existe. Sin esta linea, por encima de 768 el bloque se queda
   sin ninguna regla y el navegador lo pinta como un `div` normal en flujo:
   deja de estar fijo, pero sigue viendose. Medido asi tras el primer intento:
   `display: block`, `position: static`, 1440x72,6 al final de la pagina. */
.pk-movil-contacto { display: none; }

@media (max-width: 767.98px) {

.pk-movil-contacto {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: var(--pk-e3); align-items: center;
  padding: var(--pk-e3) var(--pk-e4);
  padding-bottom: calc(var(--pk-e3) + env(safe-area-inset-bottom, 0px));
  min-height: 68px;
  background: var(--pk-n0);
  border-top: 1px solid var(--pk-n200);
  box-shadow: var(--pk-s4);
}

/* La barra fija tapaba el final de la pagina. Medido a 390x844 en una ficha,
   con la pagina en su desplazamiento maximo (scrollY 5579 de 5579): los
   enlaces de Facebook, Instagram, LinkedIn, TikTok y el WhatsApp del pie
   quedaban dentro de la banda de la barra y no quedaba recorrido para
   sacarlos, asi que eran cinco enlaces imposibles de pulsar. El pie reserva
   la altura de la barra cuando la barra existe. */
body:has(.pk-movil-contacto) .pk-pie {
  padding-bottom: calc(68px + var(--pk-e4) + env(safe-area-inset-bottom, 0px));
}
.pk-movil-contacto .pk-btn { flex: 1; }
.pk-movil-contacto__precio { font-weight: 700; color: var(--pk-tinta); white-space: nowrap; }

/* El precio no puede empujar las acciones fuera de la pantalla.
   Medido el 2026-09-21 en la ficha de un alquiler sin precio publicado, cuyo
   hueco de precio trae la cadena larga «Precio pendiente de confirmacion»:
     __ident    flex 0/0/auto  -> NO encoge, se queda en 269 px
     __precio   min-width auto + white-space nowrap
     __acciones flex 1/1/0%    -> solo recibe el sobrante, 62 px
   y como los botones tienen suelo tactil de 44 px, desbordaban su propio
   padre: a 390 «Contactar» salia 3 px de la ventana y a 320 los DOS botones
   se iban, 73 px el peor. Con un precio corto («US$ 195,000») no se nota,
   asi que el defecto solo aparece en los anuncios sin precio.
   Se deja encoger al identificador y se recorta el precio con puntos
   suspensivos; las acciones conservan su ancho natural. Un precio real nunca
   llega al recorte, de modo que el diseno no cambia para el caso normal.
   Medido despues: 320 73->-31, 390 3->-31, 430 -31->-31, y la etiqueta
   «Contactar» pasa de 44 px a 102 px, que es donde vuelve a leerse. */
.pk-movil-contacto__precio { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Las dos declaraciones que acompanan a esta van mas abajo, despues de
   `.pk-movil-contacto__ident { flex: 0 0 auto }`: escritas aqui perdian por
   orden de archivo contra esa regla y contra la base de `__acciones`, y el
   defecto seguia vivo en el navegador aunque la hoja ya estuviera desplegada.
   Medido en staging: `__ident` seguia computando `0/0/auto` y `__acciones`
   quedaba en 0 px de ancho. */

.pk-movil-contacto__interior {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-e3);
}

.pk-movil-contacto__ident {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--pk-e3);
}

.pk-movil-contacto__dir {
  overflow: hidden;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk-movil-contacto__acciones {
  display: flex;
  flex: 1;
  gap: var(--pk-e2);
}

/* La direccion sobra en este ancho: el precio y las acciones son lo unico que
   cabe sin apretar los objetivos tactiles por debajo de 44 px. */
.pk-movil-contacto__dir { display: none; }
/* `flex: 0 0 auto` daba por hecho que el hueco del precio es corto. No siempre:
   un anuncio sin precio publicado trae «Precio pendiente de confirmacion», 31
   caracteres que no encogen, y entonces el identificador se quedaba en 269 px y
   las acciones en CERO, con los dos botones —que tienen suelo tactil de 44 px—
   desbordando su propio padre. Medido en staging a 320: el peor salia 73 px
   fuera de la ventana. Con `0 1 auto` el identificador cede y el precio se
   recorta con puntos suspensivos (regla de arriba); un precio real nunca llega
   al recorte, asi que el caso normal no cambia. */
.pk-movil-contacto__ident { flex: 0 1 auto; min-width: 0; }
.pk-movil-contacto__acciones { flex: 0 0 auto; }
.pk-movil-contacto__acciones .pk-btn { flex: 1; }

/* Despeja los 68 px que la barra ocupa sobre el final del contenido. Vive con
   la barra: si una se enciende, el otro tambien. */
.pk-ficha { padding-bottom: 96px; }

} /* fin @media (max-width: 767.98px) — A-4 */

/* --- 11b. Visor de galería a pantalla completa ------------------------- */
/* Vive fuera de .pk-app (se monta en <body>), así que define sus propios
   valores en lugar de heredar los tokens. */
.pk-visor {
  position: fixed; inset: 0; z-index: 1200;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(8,18,28,.96);
  padding: 56px 16px;
}
.pk-visor--abierto { display: flex; }
body.admin-bar .pk-visor {
  top: 32px;
  height: calc(100dvh - 32px);
}
/* Como la hoja, el visor cubre la barra movil sin reservar un hueco fijo. */
@media (max-width: 782px) {
  body.admin-bar .pk-visor {
    top: 0;
    height: 100dvh;
    z-index: 100001;
  }
}
.pk-visor__marco {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.pk-visor__marco img {
  max-width: 100%; max-height: calc(100dvh - 112px);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 8px;
}
.pk-visor__barra {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  color: #fff;
}
.pk-visor__contador { font-size: var(--pk-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.pk-visor__btn, .pk-visor__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  border: 0; cursor: pointer;
  transition: background 140ms;
}
.pk-visor__btn:hover, .pk-visor__nav:hover { background: rgba(255,255,255,.24); }
/* !important porque el anillo genérico de los botones lo lleva (contesta al
   `outline: none !important` del padre); aquí el fondo es negro y el anillo
   azul marino no se vería. */
.pk-visor__btn:focus-visible, .pk-visor__nav:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }
.pk-visor__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.pk-visor__nav--prev { left: 12px; }
.pk-visor__nav--next { right: 12px; }
.pk-visor .pk-icono { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .pk-visor { padding: 56px 0; }
  .pk-visor__nav { width: 40px; height: 40px; }
  .pk-visor__nav--prev { left: 6px; }
  .pk-visor__nav--next { right: 6px; }
}

/* --- 12. Perfiles públicos --------------------------------------------- */
.pk-perfil-enc {
  display: flex; gap: var(--pk-e6); align-items: center; flex-wrap: wrap;
  padding: var(--pk-e8) 0;
  border-bottom: 1px solid var(--pk-n100);
}
.pk-perfil-enc__logo {
  width: 104px; height: 104px; flex: none;
  border-radius: var(--pk-r-lg); object-fit: contain;
  background: var(--pk-n0); padding: var(--pk-e2);
  border: 1px solid var(--pk-n200); box-shadow: var(--pk-s1);
}
.pk-perfil-enc__tipo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--pk-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pk-navy); margin-bottom: var(--pk-e1);
}
.pk-perfil-enc__meta { display: flex; flex-wrap: wrap; gap: var(--pk-e4); margin-top: var(--pk-e3); font-size: var(--pk-fs-sm); color: var(--pk-txt-sec); }
.pk-perfil-enc__meta li { display: inline-flex; align-items: center; gap: 6px; }
.pk-perfil-enc__acciones { margin-left: auto; display: flex; gap: var(--pk-e2); flex-wrap: wrap; }

.pk-equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--pk-e4); }
.pk-agente {
  display: flex; align-items: center; gap: var(--pk-e3);
  padding: var(--pk-e3);
  border: 1px solid var(--pk-n100); border-radius: var(--pk-r);
  transition: border-color var(--pk-t), box-shadow var(--pk-t);
}
.pk-agente:hover { border-color: var(--pk-n300); box-shadow: var(--pk-s1); }
.pk-agente img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--pk-n100); }

/* --- 13. Estados: carga, vacío, error ---------------------------------- */
.pk-esqueleto {
  border: 1px solid var(--pk-n100); border-radius: var(--pk-r-lg); overflow: hidden;
  background: var(--pk-n0);
}
.pk-esqueleto__b { background: var(--pk-n100); border-radius: var(--pk-r-sm); }
.pk-esqueleto__medio { aspect-ratio: 4 / 3; border-radius: 0; }
.pk-esqueleto__cuerpo { padding: var(--pk-e4); display: flex; flex-direction: column; gap: var(--pk-e3); }
.pk-esqueleto__b--40 { width: 40%; height: 22px; }
.pk-esqueleto__b--70 { width: 70%; height: 16px; }
.pk-esqueleto__b--100 { width: 100%; height: 14px; }
.pk-pulso { animation: pk-pulso 1.4s ease-in-out infinite; }
@keyframes pk-pulso { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* Durante una recarga los resultados se atenúan en lugar de desaparecer:
   el usuario no pierde el contexto visual. */
.pk-listado--cargando { opacity: .45; pointer-events: none; transition: opacity var(--pk-t); }

/*
 * Estado vacío.
 *
 * El margen vertical era de `--pk-e16` arriba y abajo más `--pk-e8` de relleno:
 * en un perfil sin inventario y sin biografía la página quedaba con ~350 px de
 * blanco antes del mensaje, y en el estado sin resultados en móvil había un
 * hueco visible entre los chips y el icono. El bloque se compacta manteniendo
 * el aire suficiente para que se lea como un estado deliberado y no como un
 * fallo de carga.
 */
.pk-vacio {
  max-width: 560px; margin: var(--pk-e10) auto; text-align: center;
  padding: var(--pk-e6) var(--pk-e6);
}
@media (max-width: 860px) {
  .pk-vacio { margin: var(--pk-e6) auto; padding: var(--pk-e5) var(--pk-e4); }
  .pk-vacio__ic { width: 56px; height: 56px; margin-bottom: var(--pk-e4); }
  .pk-vacio__ic .pk-icono { width: 26px; height: 26px; }
}
/* La fila de sugerencia mantiene etiqueta y cifra alineadas: la etiqueta puede
   envolver, la cifra nunca se parte ni cae a otra línea. A 390 px ambas
   envolvían por separado y las líneas base quedaban descolocadas. */
.pk-vacio__sug .pk-pares li {
  display: flex; align-items: baseline; gap: var(--pk-e3);
}
.pk-vacio__sug .pk-par__k { flex: 1 1 auto; min-width: 0; }
.pk-vacio__sug .pk-par__v { flex: none; white-space: nowrap; margin-left: auto; }
.pk-vacio__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--pk-n50); color: var(--pk-n400);
  margin-bottom: var(--pk-e5);
}
.pk-vacio__ic .pk-icono { width: 32px; height: 32px; }
.pk-vacio__sug { margin-top: var(--pk-e6); text-align: left; }
.pk-vacio__sug h3 { font-size: var(--pk-fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--pk-txt-ter); margin-bottom: var(--pk-e3); }

.pk-aviso {
  display: flex; align-items: center; gap: var(--pk-e3);
  padding: var(--pk-e3) var(--pk-e4);
  background: var(--pk-primario-suave); border: 1px solid #f7d9de;
  border-radius: var(--pk-r); color: var(--pk-primario-osc);
  font-size: var(--pk-fs-sm);
}

/* Región de anuncio para lectores de pantalla y avisos breves */
.pk-toast {
  position: fixed; left: 50%; bottom: var(--pk-e8); z-index: 1100;
  transform: translateX(-50%) translateY(12px);
  padding: var(--pk-e3) var(--pk-e5);
  background: var(--pk-tinta); color: #fff;
  border-radius: var(--pk-r-pill); font-size: var(--pk-fs-sm); font-weight: 600;
  box-shadow: var(--pk-s3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--pk-t), transform var(--pk-t);
}
.pk-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- 14. Responsive ----------------------------------------------------- */
@media (max-width: 1200px) {
  .pk-ficha__cols { grid-template-columns: minmax(0,1fr) 320px; gap: var(--pk-e8); }
  .pk-split--mapa { grid-template-columns: minmax(0,1fr) minmax(0, 40%); }
  .pk-results-layout {
    display: block;
    max-width: 920px;
    margin-inline: auto;
  }
  .pk-results-rail { display: none; }
}

/* La barra de filtros primarios no cabe entera por debajo de ~1200 px:
   las acciones secundarias pasan a icono con su etiqueta accesible, en lugar
   de desbordar el viewport. */
/* Etiqueta larga por defecto; la corta sólo aparece cuando la larga no cabe.
   Ambas son etiquetas completas: nunca se muestra un fragmento en minúscula. */
.pk-btn__txt--corto { display: none; }

@media (max-width: 1320px) {
  .pk-barra__interior { gap: var(--pk-e1); }
  .pk-desplegable__etq { max-width: 16ch; }
  .pk-barra .pk-btn { padding-inline: var(--pk-e3); }
  .pk-barra .js-pk-guardar-busqueda .pk-btn__txt,
  .pk-barra .js-pk-mapa .pk-btn__txt { display: none; }
}
@media (max-width: 1080px) {
  .pk-barra .js-pk-abrir-hoja .pk-btn__txt--largo { display: none; }
  .pk-barra .js-pk-abrir-hoja .pk-btn__txt--corto { display: inline; }
}

@media (max-width: 1024px) {
  .pk-ficha__cols { grid-template-columns: minmax(0,1fr); }
  .pk-contacto { position: static; }
  .pk-split--mapa { grid-template-columns: minmax(0,1fr); }
  .pk-rejilla { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--pk-e4); }

  /*
   * Vista de mapa móvil: sustituye la lista dentro del mismo estado canónico.
   * Conserva Filtros / Mapa / Guardar visibles y evita intentar comprimir un
   * mapa y una lista en dos columnas estrechas.
   */
  .pk-split--mapa .pk-results-layout { display: none; }
  .pk-split--mapa .pk-mapa {
    display: block;
    position: relative;
    top: auto;
    width: 100%;
    height: calc(100dvh - 190px);
    min-height: 520px;
    border-radius: var(--pk-r-lg);
  }
}

@media (max-width: 900px) {
  .pk-galeria {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .pk-galeria__pieza--principal { grid-column: 1 / -1; grid-row: auto; }
  .pk-galeria__pieza:nth-child(n+4) { display: none; }
}

/* Punto de corte del filtrado: por debajo, la experiencia es de hoja
   completa; no una versión comprimida de la de escritorio. */
@media (max-width: 860px) {
  .pk-barra { display: none; }
  .pk-movil-barra { display: flex; }
  /* A-4: la barra de contacto NO se enciende aqui. Su punto de corte es 768,
     el mismo en el que el rail se apila; entre 768 y 860 el rail sigue siendo
     una columna con la tarjeta de contacto adherida, asi que la barra seria
     una segunda via redundante. El relleno que la despeja viaja con ella. */
  .pk-cabecera { padding-top: var(--pk-e4); }
  .pk-hechos { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); padding: var(--pk-e4); gap: var(--pk-e4) var(--pk-e3); }
  .pk-perfil-enc { padding: var(--pk-e6) 0; gap: var(--pk-e4); }
  .pk-perfil-enc__logo { width: 72px; height: 72px; }
  .pk-perfil-enc__acciones { margin-left: 0; width: 100%; }
  .pk-perfil-enc__acciones .pk-btn { flex: 1; }
}

@media (max-width: 640px) {
  .pk-rejilla { grid-template-columns: 1fr; gap: var(--pk-e4); }
  /* La galería va a sangre: el margen negativo usa el MISMO token que el
     relleno del contenedor, así nunca puede desbordar. */
  .pk-galeria { grid-template-columns: 1fr; margin-inline: calc(var(--pk-pad) * -1); border-radius: 0; }
  .pk-galeria__pieza:nth-child(n+2) { display: none; }
  .pk-seccion__rejilla { grid-template-columns: 1fr; }
  .pk-ficha__enc { gap: var(--pk-e3); }
  .pk-promo .pk-tarjeta__medio { flex: 1 1 100%; max-width: 100%; }
}

/*
 * Jerarquía de la ficha en móvil.
 *
 * El encabezado apilaba migas completas + H1 + jerarquía enlazada + título +
 * precio, cada uno con su propio margen: la primera pantalla se iba en texto
 * repetido y el precio y los hechos quedaban por debajo del pliegue.
 *
 * Se compacta SIN quitar contexto: las migas siguen ahí y siguen siendo
 * navegables, pero se muestran en una sola línea desplazable con los niveles
 * más cercanos visibles; los márgenes entre título, ubicación y precio se
 * ajustan; y el precio sube junto al título en lugar de caer a un bloque
 * aparte. Ningún dato desaparece.
 */
@media (max-width: 860px) {
  /* Migas partidas en líneas: ningún nivel queda fuera de pantalla y no hay
     que arrastrar de lado. Antes iban en una tira desplazable sin barra
     visible, y a 390 px el nivel actual empezaba en x = 450, fuera del
     viewport (medido el 21-09-2026 como visitante). */
  .pk-ficha .pk-migas {
    flex-wrap: wrap;
    row-gap: 2px;
    overflow: visible;
    padding-bottom: 0;
  }
  .pk-ficha .pk-migas li { flex: none; white-space: nowrap; min-width: 0; }
  /* La barra cierra cada nivel en vez de abrir el siguiente: una línea nueva
     nunca empieza por «/». */
  .pk-ficha .pk-migas li + li::before { content: none; }
  .pk-ficha .pk-migas li:not(:last-child)::after { content: "/"; color: var(--pk-n300); }
  /* Los niveles intermedios se acortan; el primero se conserva entero. 14ch
     deja «Guatemala» entero y los demás reconocibles. */
  .pk-ficha .pk-migas li:not(:first-child):not(:last-child) a {
    display: inline-block; max-width: 14ch;
    overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
  }
  /* El nivel actual es el título completo del anuncio: ocupa lo que quede de
     su línea o una línea entera, recortado con puntos suspensivos. El título
     íntegro está en el H1 justo debajo. */
  .pk-ficha .pk-migas li:last-child { flex: 1 1 auto; }
  .pk-ficha .pk-migas li:last-child [aria-current] {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Encabezado: título, ubicación y precio como un solo bloque compacto. */
  .pk-ficha__enc { gap: var(--pk-e2); }
  .pk-ficha .pk-h1 { font-size: var(--pk-fs-lg); line-height: 1.25; margin: 0; }
  .pk-ficha .pk-sub { margin-top: 4px; font-size: var(--pk-fs-sm); }
  .pk-ficha .pk-sub + .pk-sub { margin-top: 2px; }
  .pk-ficha .pk-precio-grande {
    margin-top: var(--pk-e2);
    font-size: var(--pk-fs-xl);
    white-space: normal;
  }
  .pk-ficha .pk-hechos { margin-top: var(--pk-e4); }
  .pk-no-disponible { margin-top: var(--pk-e3); }
}

@media (max-width: 380px) {
  .pk-datos { gap: var(--pk-e1) var(--pk-e2); font-size: var(--pk-fs-sm); }
  .pk-tarjeta__cuerpo { padding: var(--pk-e3); }
}

/* Respeta la preferencia del sistema por menos movimiento. */
/* =========================================================================
   Authoritative Funda-structured property-results template
   =========================================================================
   This is the route-specific master card/search system. Shared discovery
   primitives above remain available to profiles, account pages, and property
   detail views until those templates are deliberately propagated.
   ========================================================================= */

.pk-resultados {
  /* El token gobierna la caja exterior; el numero que hay que igualar es el
     CONTENIDO, asi que se le suma el relleno. Ver la nota del marco horizontal
     en `propeka-sitio.css`: la regla unificada de contenedores reparte este
     token con `!important`, de modo que este es el unico punto de control. */
  --pk-ancho: calc(var(--pk-results-shell) + var(--pk-pad) + var(--pk-pad));
  padding-bottom: 40px;
  overflow: visible;
  font-family: "Open Sans", Arial, sans-serif;
  background: var(--pk-n0);
}

.pk-resultados__intro {
  width: min(100%, var(--pk-results-column));
  margin: 16px auto 0;
}

/* =========================================================================
   Region de busqueda
   =========================================================================
   Una fila de ubicacion dominante y, debajo, los refinamientos rapidos. Total
   medido en escritorio: 136 px.

   NO SE FIJA AL DESPLAZAR. Medido en la referencia en vivo, su region de
   busqueda declara `position: sticky` con `top: -76px` sobre una caja de 76 px
   de alto: se va con el contenido y no vuelve, ni al bajar ni al subir. En
   escritorio nada queda anclado arriba.

   Aqui estaba fijada a `top: 0` con 137 px de alto, de modo que en una vista de
   674 px utiles el 20 % de la pantalla lo ocupaba permanentemente el
   formulario, justo en la pagina cuyo trabajo es enseñar resultados. Ademas
   tapaba la tarjeta que quedaba debajo con un corte duro.

   En movil se conserva la barra compacta `.pk-movil-barra`, que si se fija:
   ahi el patron es correcto y la revision lo aprobo. */
.pk-resultados .pk-barra {
  position: relative;
  z-index: 40;
  background: var(--pk-n0);
  border-bottom: 1px solid var(--pk-n100);
  backdrop-filter: none;
}

.pk-resultados .pk-barra__interior {
  display: block;
  padding-block: 16px;
}

/* Separacion de 8 px: la referencia usa `gap-2`, medido entre el borde de un
   control y el del siguiente. */
.pk-resultados .pk-barra__fila {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  gap: 8px;
}

.pk-resultados .pk-barra__fila + .pk-barra__fila { margin-top: 16px; }
.pk-resultados .pk-barra__fila > * { min-width: 0; }

.pk-resultados .pk-barra .pk-btn,
.pk-resultados .pk-barra .pk-desplegable__disparo,
.pk-resultados .pk-operacion {
  min-height: 44px;
  border-radius: 4px;
  box-shadow: none;
}

.pk-resultados .pk-barra .pk-btn { padding-inline: 16px; }
.pk-resultados .pk-barra .pk-icono { width: 18px; height: 18px; }

.pk-resultados .pk-desplegable--ubicacion,
.pk-resultados .pk-barra__ubicacion-fija {
  flex: 1 1 auto;
}

.pk-resultados .pk-desplegable--ubicacion .pk-desplegable__disparo,
.pk-resultados .pk-barra__ubicacion-fija {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  gap: 10px;
  padding-inline: 14px;
  border: 1px solid var(--pk-n300);
  border-radius: 4px;
  color: var(--pk-txt);
  background: var(--pk-n0);
  font-size: var(--pk-fs-sm);
}

.pk-resultados .pk-desplegable--ubicacion .pk-desplegable__etq {
  max-width: none;
  flex: 1;
  text-align: left;
}

/* «Guardar búsqueda» necesita 157 px de texto y tenia 152 utiles dentro de una
   base fija de 154: la etiqueta se cortaba contra el borde derecho del boton.
   Se dimensionan por contenido con un minimo, que es lo que hace la referencia
   con sus dos acciones de la primera fila. */
.pk-resultados .pk-barra__fila--principal .js-pk-mapa { flex: 0 0 auto; min-width: 100px; }
.pk-resultados .pk-barra__fila--principal .js-pk-guardar-busqueda {
  flex: 0 0 auto;
  min-width: 154px;
  white-space: nowrap;
}

/* =========================================================================
   Segunda fila: seis refinamientos de peso equivalente
   =========================================================================
   Medido en la referencia a 1440: la fila ocupa el ancho completo del marco
   interior (1010 px) con siete controles y 9 px de separacion —99, 99, 154,
   153, 153, 153 y 152 px—. No son anchos arbitrarios: reparten el peso visual
   de forma pareja entre las seis dimensiones de busqueda y dejan el acceso a
   todos los filtros anclado al borde derecho.

   Antes esta fila gastaba el ancho de tres controles en un segmentado de
   operacion y solo ofrecia tres desplegables. Ahora la operacion es un
   desplegable mas y la retícula reproduce el reparto medido.
   ========================================================================= */
.pk-resultados .pk-barra__fila--filtros .pk-desplegable {
  flex: 1 1 auto;
  min-width: 0;
}

/* Reparto medido en vivo: 100, 100, 155, 155, 155, 155 y 152 px, con 8 px de
   separacion, sumando el marco de 1020 exacto. «Operación» es mas larga que
   «Koop» y no cabe en 100, asi que toma 122 y los cuatro anchos ceden 8 px
   cada uno; el total del marco no cambia. Es diferencia de idioma. */
/* Sin encogimiento: los siete controles ya suman el marco exacto, y dejar que
   encojan es lo que truncaba «Operación». */
.pk-resultados .pk-barra__fila--filtros .pk-desplegable { flex-shrink: 0; }
.pk-resultados .pk-barra__fila--filtros .pk-desplegable--operacion { flex-basis: 122px; }
.pk-resultados .pk-barra__fila--filtros .pk-desplegable--precio { flex-basis: 100px; }
.pk-resultados .pk-barra__fila--filtros .pk-desplegable--tipo { flex-basis: 149px; }
.pk-resultados .pk-barra__fila--filtros .pk-desplegable--amenidades { flex-basis: 149px; }
.pk-resultados .pk-barra__fila--filtros .pk-desplegable--m2 { flex-basis: 150px; }
.pk-resultados .pk-barra__fila--filtros .pk-desplegable--dormitorios { flex-basis: 150px; }

.pk-resultados .pk-barra__fila--filtros .pk-desplegable__disparo { width: 100%; }

/* El texto del disparador nunca ensancha el control: el ancho lo fija la
   retícula y una etiqueta larga se recorta con puntos suspensivos. */
.pk-resultados .pk-barra__fila--filtros .pk-desplegable__etq {
  overflow: hidden;
  max-width: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La operacion vive dentro de su panel como una lista de una sola eleccion:
   es un modo de busqueda, no un filtro acumulable. */
.pk-resultados .pk-panel--operacion { min-width: 200px; }

.pk-resultados .pk-panel--operacion .pk-operacion {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: none;
  border: 0;
  gap: 2px;
}

.pk-resultados .pk-panel--operacion .pk-operacion__op {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 10px;
  border-radius: 4px;
  color: var(--pk-txt);
  font-size: var(--pk-fs-sm);
  text-align: left;
}

.pk-resultados .pk-panel--operacion .pk-operacion__op:hover {
  background: var(--pk-n50);
}

.pk-resultados .pk-panel--operacion .pk-operacion__op[aria-pressed="true"] {
  color: var(--pk-primario-osc);
  background: var(--pk-primario-suave);
  font-weight: var(--pk-fw-semi);
}

.pk-resultados .pk-desplegable__disparo {
  justify-content: space-between;
  min-height: 44px;
  padding-inline: 12px;
  border-color: var(--pk-n300);
  border-radius: 4px;
  font-size: var(--pk-fs-sm);
}

.pk-resultados .pk-desplegable__disparo--activo {
  color: var(--pk-primario-osc);
  border-color: var(--pk-primario);
  background: var(--pk-primario-suave);
}

/* Estado ABIERTO del disparador.
   La regla generica de la capa compartida se declaraba antes que el
   `border-color` de esta capa y perdia: medido con el panel desplegado, el
   control seguia blanco con borde gris y sin sombra, es decir, no habia ni una
   señal de que ese menu fuera el abierto. La referencia tiñe el control
   entero. Aqui se usa el mismo gesto con la tinta de marca. */
.pk-resultados .pk-barra .pk-desplegable__disparo[aria-expanded="true"] {
  color: var(--pk-navy);
  border-color: var(--pk-navy);
  background-color: var(--pk-n50);
  box-shadow: none;
}

.pk-resultados .pk-barra .pk-desplegable__disparo--activo[aria-expanded="true"] {
  color: var(--pk-primario-osc);
  border-color: var(--pk-primario);
  background-color: var(--pk-primario-suave);
}

/* «Todos los filtros» es el séptimo control de la fila y era el único que no
   parecía un control: seis pastillas con filete y una etiqueta de texto suelta
   pegada al borde del marco. Con el filete declarado pero sin ancho ni estilo,
   la regla anterior no pintaba nada.

   Va con filete rojo y NO relleno: relleno competiría con «Crear una
   publicación», que es la única acción primaria de la página. Misma altura de
   44 px, mismo radio y mismo relleno interior que sus seis compañeras, para que
   la fila se lea como una sola pieza. */
/* Base fija de 152 px, no `auto`. Con `auto` el botón tomaba el ancho de su
   contenido, robaba espacio a la fila y «Operación» —que en castellano ya iba
   justa— caía en puntos suspensivos. Los siete controles suman exactamente el
   marco: 122+100+149+149+150+150+152 más seis separaciones de 8 = 1020. */
.pk-resultados .pk-barra__todos {
  flex: 0 0 152px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-e2);
  height: 44px;
  padding-inline: var(--pk-e3);
  border: 1px solid var(--pk-primario);
  border-radius: var(--pk-r-sm);
  background: var(--pk-n0);
  color: var(--pk-primario-osc);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
  white-space: nowrap;
  transition: background-color var(--pk-t), color var(--pk-t);
}

.pk-resultados .pk-barra__todos:hover,
.pk-resultados .pk-barra__todos:focus-visible {
  background: var(--pk-primario-suave);
  color: var(--pk-primario-osc);
}

/* El filete rojo no llegaba a pintarse y salía gris.
   Causa: `.pk-resultados .pk-barra__todos` tiene especificidad (0,2,0), y en
   `propeka-sitio.css` viven `body.pk-sitio .pk-btn` y
   `body.pk-sitio .pk-btn--secundario`, que son (0,2,1) y ganan. El botón lleva
   las tres clases a la vez, así que la capa de sitio pisaba a la de componente.

   Se resuelve subiendo la especificidad de origen —añadir `body.pk-sitio` a la
   regla del componente— y NO con `!important`, que sólo trasladaría el problema
   a la siguiente regla que quiera cambiar este botón. */
body.pk-sitio .pk-resultados .pk-barra__todos {
  border: 1px solid var(--pk-primario);
  background: var(--pk-n0);
  color: var(--pk-primario-osc);
}
body.pk-sitio .pk-resultados .pk-barra__todos:hover,
body.pk-sitio .pk-resultados .pk-barra__todos:focus-visible {
  background: var(--pk-primario-suave);
  border-color: var(--pk-primario);
  color: var(--pk-primario-osc);
}

.pk-resultados .pk-panel {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(13,35,56,.10);
}

/* Chips sit in the same 728px editorial column as results. */
.pk-resultados .pk-chips {
  width: min(100%, var(--pk-results-column));
  margin: 16px auto 0;
  padding: 0;
}

.pk-resultados .pk-chip {
  min-height: 36px;
  border-radius: 18px;
}

.pk-resultados .pk-split { display: block; }
.pk-resultados .pk-results-layout {
  display: block;
  width: min(100%, var(--pk-results-column));
  max-width: var(--pk-results-column);
  margin-inline: auto;
}
.pk-resultados .pk-results-layout [data-pk-listado] { width: 100%; }
.pk-resultados .pk-results-rail { display: none; }

/* Paid top positions: 728 / 3 cards with 16px gaps = 232px each.
   Medido en la referencia: rotulo de 16 px, 7 px de aire y tarjetas de 187 px,
   209 px de franja en total. */
.pk-posiciones {
  width: 100%;
  margin-top: 16px;
}

/* Medido en vivo: rotulo de 12/16 en caja de 20 px, 4 px de aire y tarjetas de
   195 px — 223 px de franja. */
.pk-posiciones__rotulo {
  /* `flex` y no `inline-flex`: en linea, la caja arrastra el hueco del
     descendente de la fuente del contenedor y la franja crecia 6 px. */
  display: flex;
  align-items: center;
  width: max-content;
  height: 20px;
  margin: 0 0 8px;
  padding-inline: 6px;
  /* B-36 · Era un `3px` literal, el unico del producto entero. Al token. */
  border-radius: var(--pk-r-sm);
  color: var(--pk-txt-sec);
  background: var(--pk-n50);
  font-size: var(--pk-fs-xs);
  font-weight: var(--pk-fw-semi);
  line-height: 16px;
  letter-spacing: .01em;
}

/* Las tarjetas se reparten el marco en vez de medir 232 px fijos: con la
   columna unificada, tres columnas iguales de (1020 − 2×16)/3 = 329,3 px. Se
   expresa con la retícula, no con un número, para que siga cuadrando si el
   marco cambia. */
.pk-posiciones__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: inline proximity;
}

.pk-posiciones__pista::-webkit-scrollbar { display: none; }

.pk-posicion {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--pk-r-sm);
  background: var(--pk-n0);
  /* Una sola receta de sombra en toda la página, y suave. La anterior era
     `0 1px 4px rgba(13,35,56,.18)`: un 18 % de opacidad a 4 px de difuminado
     dibuja un cerco duro bajo cada tarjeta. */
  box-shadow: var(--pk-s1);
  border: 1px solid var(--pk-n100);
  scroll-snap-align: start;
}

.pk-posicion__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Proporción, no altura fija. Estaba en 131 px de alto: con la tarjeta a 232 px
   daba un 16:9 sobre fuentes 4:3, y al ensanchar la tarjeta a 329 se habría
   convertido en un buzón de 2,5:1. La proporción 3:2 es la de la referencia y
   se mantiene igual a cualquier ancho. */
.pk-posicion__foto {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--pk-n100);
}

/* El recorte manda sobre la proporcion de la fuente.
   Especificidad deliberada (0-3-0): `propeka-sitio.css` se carga DESPUES y
   declara `body.pk-sitio img { height: auto }` con 0-1-2, que le ganaba a un
   `.pk-posicion__img` a secas. Con la foto original de 640x480 el alto «auto»
   se resolvia en 1500 px dentro de un recorte de 123 y la franja de pago
   arrancaba en tres manchas de color plano. Se ancla a la caja con `inset`
   para que la altura no dependa de la imagen. */
.pk-app .pk-posicion__foto > .pk-posicion__img,
.pk-app .pk-posicion__foto > .pk-sinimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  aspect-ratio: auto;
}

.pk-posicion__marca {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: 7px;
  border-radius: 4px;
  color: var(--pk-primario-osc);
  background: rgba(255,255,255,.94);
  font-size: var(--pk-fs-xs);
  font-weight: 700;
}

/* El cuerpo del destacado usa EL MISMO sistema que la tarjeta de resultado:
   mismo paso tipográfico, mismo peso, mismos 8 px de aire antes del precio y
   las mismas dos líneas de título. Antes tenía su propia escala (14/18 con
   puntos suspensivos a una línea) y por eso el carrusel se leía como un
   componente de otro sitio pegado encima de la lista. */
.pk-posicion__cuerpo {
  display: flex;
  flex-direction: column;
  padding: var(--pk-e3) var(--pk-e4) var(--pk-e4);
}

.pk-posicion__cuerpo h2 {
  margin: 0;
  overflow: hidden;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-base);
  font-weight: var(--pk-fw-semi);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(var(--pk-lh-base) * 2);
}

.pk-posicion__cuerpo p {
  margin: var(--pk-e2) 0 0;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-base);
  font-weight: var(--pk-fw-semi);
}

.pk-posicion__enlace:hover h2 { color: var(--pk-primario-osc); }

/* =========================================================================
   Encabezado de resultados: bloque editorial + fila de acciones
   =========================================================================
   La referencia separa dos cosas que aqui estaban fundidas en una linea de
   24 px: el bloque editorial —recuento en 20/28 y linea de apoyo en 15/22,
   unos 52 px— y, debajo, una fila de acciones con la seleccion de zonas a la
   izquierda y el orden a la derecha. Medido entre el final de las posiciones
   destacadas y la primera tarjeta, la region completa ocupa 140-144 px.

   Comprimir los dos bloques en una fila unica era la razon de que el recuento
   —el dato que orienta toda la pagina— pesara lo mismo que un pie de foto.
   ========================================================================= */
/*
 * Medido en vivo sobre la referencia: el bloque completo mide 100,8 px y se
 * cierra con una regla de 0,8 px. Dentro, el recuento va en 20/28 con peso 600
 * y el lugar justo debajo en 16/24 con peso normal —MISMO color, no un gris
 * secundario—; despues, a 8 px, una fila de acciones de 24 px, no de 44.
 *
 * Aqui medía 144 px con una fila de acciones de 44: 43 px de mas empujando
 * hacia abajo toda la lista y una fila de controles con el triple de peso del
 * que le corresponde. Las dos acciones son enlaces de texto, no controles.
 */
.pk-resultados .pk-cabecera {
  display: block;
  min-height: 0;
  padding: 0 0 16px;
  margin-top: 16px;
  border-bottom: 1px solid var(--pk-n100);
}

.pk-resultados .pk-cabecera__texto { min-width: 0; }

/*
 * El titulo de la pagina medIa 20/28/600 — exactamente el mismo cuerpo, peso
 * e interlineado que el precio de una tarjeta de resultado (US$ 150,000), de
 * modo que el H1 no pesaba mas que un resultado suelto. Sube a 1.75rem, la
 * escala que el H1 de la ficha ya usa (28/36). De D-56 se conservan el peso
 * semi, el color tinta y el renglon unico: con 1068 px de contenedor
 * «45 propiedades en Guatemala» cabe de sobra en una linea. Movil sigue 20/26.
 */
.pk-resultados .pk-h1 {
  color: var(--pk-tinta);
  font-size: var(--pk-fs-xl);
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0;
}

.pk-resultados .pk-sub {
  margin-top: 0;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-normal);
  line-height: 24px;
}

.pk-resultados .pk-cabecera__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 24px;
  margin-top: 8px;
  gap: 16px;
}

.pk-resultados .pk-cabecera__zonas {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0;
  gap: 10px;
  border: 0;
  background: none;
  color: var(--pk-tinta);
  font: inherit;
  font-size: var(--pk-fs-base);
  line-height: 24px;
  cursor: pointer;
}

.pk-resultados .pk-cabecera__zonas:hover {
  color: var(--pk-primario-osc);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pk-resultados .pk-cabecera__zonas .pk-icono {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.pk-resultados .pk-cabecera__zonas[hidden] { display: none; }

.pk-resultados .pk-orden {
  display: flex;
  /* `width: auto` explícito: la capa compartida de descubrimiento pone
     `width: 100%` por debajo de 900 px, y como aquí el control vive dentro de
     un contenedor flexible ese 100 % resolvía a los 728 px de la columna y
     desbordaba la página a 768. Declararlo cierra la puerta. */
  width: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

/*
 * El orden es un ENLACE de texto, no un campo de formulario.
 * En la referencia se lee «Sorteer: Relevantie» en 16/24, azul, sin caja: pesa
 * lo mismo que «Selecteer buurten» al otro extremo de la fila. Aqui era un
 * `<select>` de 44 px con borde, que en una fila de 24 flotaba como un
 * formulario suelto y desequilibraba el encabezado.
 *
 * Sigue siendo un `<select>` real —teclado, lector de pantalla y cambio de
 * estado intactos—; lo que cambia es que deja de pintarse como una caja.
 */
.pk-resultados .pk-orden { color: var(--pk-tinta); }

.pk-resultados .pk-orden__etq {
  flex: 0 0 auto;
  margin: 0;
  color: inherit;
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-normal);
  line-height: 24px;
}

.pk-resultados .pk-orden select {
  width: auto;
  min-width: 0;
  height: 24px;
  min-height: 0;
  padding: 0 20px 0 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background-color: transparent;
  /* La flecha de `select.pk-campo` no llegaba (imagen calculada `none`,
     medido el 21-09-2026): a 390 «Relevancia» se leía como texto suelto, sin
     nada que dijera que se puede cambiar. Misma flecha que el resto de campos. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566573' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: right center;
  font-size: var(--pk-fs-base);
  line-height: 24px;
  cursor: pointer;
}

.pk-resultados .pk-orden select:focus-visible {
  outline: 2px solid var(--pk-tinta);
  outline-offset: 2px;
}

/* One result language: a divider row with a 3:2 image.
   16 px de aire entre la regla del encabezado y la primera tarjeta, y 12 px
   entre tarjetas: es la separacion medida en la referencia. */
.pk-resultados .pk-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 16px;
  gap: 12px;
}

.pk-resultados .pk-tarjeta {
  position: relative;
  width: 100%;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--pk-n100);
  border-radius: 0;
  background: var(--pk-n0);
  box-shadow: none;
  transition: background-color var(--pk-t);
}

.pk-resultados .pk-tarjeta:hover,
.pk-resultados .pk-tarjeta:focus-within {
  border-color: var(--pk-n100);
  box-shadow: none;
  transform: none;
}

.pk-resultados .pk-tarjeta:not(.pk-promo):hover { background: var(--pk-n25); }
.pk-resultados a.pk-tarjeta__medio {
  display: block;
  color: inherit;
  text-decoration: none;
}
.pk-resultados .pk-tarjeta__medio { background: var(--pk-n100); }
.pk-resultados .pk-tarjeta__foto { border-radius: 8px; }
.pk-resultados .pk-tarjeta__img,
.pk-resultados .pk-sinimg { aspect-ratio: 3 / 2; }

/*
 * D-1 · One radius, not two. This rule hard-coded `border-radius: 4px` — not
 * on any token — against the shared `.pk-badge` rule's `var(--pk-r-sm)`
 * (6px), so the SAME badge class rendered two different radii depending on
 * which page it was on. Height and padding stay smaller here on purpose:
 * results cards are denser than the homepage grid.
 */
.pk-resultados .pk-badge {
  height: 20px;
  padding-inline: 7px;
  font-size: var(--pk-fs-xs);
}

.pk-resultados .pk-tarjeta__badges {
  top: 8px;
  left: 8px;
  gap: 4px;
}

.pk-resultados .pk-tarjeta__fotos {
  right: 8px;
  bottom: 8px;
  height: 22px;
  border-radius: 4px;
}

.pk-resultados .pk-fav {
  position: absolute;
  z-index: 4;
  top: 4px;
  right: 0;
  /* J-2 · 44, igual que la regla base. Esta sobrescritura era la que dejaba
     el favorito en 40 en la página de resultados, que es donde más se pulsa. */
  width: 44px;
  height: 44px;
  color: var(--pk-txt-sec);
  background: transparent;
  box-shadow: none;
}

.pk-resultados .pk-fav:hover {
  color: var(--pk-primario);
  background: var(--pk-primario-suave);
  transform: none;
}

.pk-resultados .pk-tarjeta__titulo {
  /* B-36 · Era `--pk-navy` (#004274, el marino de Houzez), que no esta en la
     paleta. La regla base de `.pk-tarjeta__titulo` ya usa `--pk-tinta`; esta
     sobrescritura era la que lo desviaba, en el elemento de texto mas
     repetido de la vista. */
  /* D-61 · Ahora va en `--pk-enlace` (#5366c9, el indigo del manual de 2015,
     con 42 usos alli) y en peso normal. NO es volver al marino de Houzez que
     B-36 retiro: es el unico azul con ascendencia en el manual, y entra como
     el color de ENLACE que a la paleta le faltaba. Medida la referencia, su
     titulo de tarjeta va en color a peso 400 y la negrita queda reservada al
     precio; sin color de enlace el titulo tenia que sostenerse con negrita y
     competia con el precio. Contraste 5,10:1. Ver `palette.md`. */
  color: var(--pk-enlace);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-normal);
  line-height: 24px;
}

.pk-resultados .pk-tarjeta__titulo a:hover {
  color: var(--pk-primario-osc);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Escala de la tarjeta, medida en vivo sobre la referencia: titulo, direccion,
   precio y caracteristicas comparten 16/24; solo cambian el peso y el color.
   Aqui la direccion y las caracteristicas iban en 14/20 —dos pixeles por
   debajo, fuera de la tolerancia de una— y la tarjeta se leia mas apagada. */
.pk-resultados .pk-tarjeta__ubic {
  color: var(--pk-txt);
  font-size: var(--pk-fs-base);
  font-weight: 400;
  line-height: 24px;
}

.pk-resultados .pk-tarjeta__ubic span { min-height: 0; }
.pk-resultados .pk-tarjeta__ctx {
  margin: 0;
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-sm);
  line-height: 18px;
}

.pk-resultados .pk-tarjeta__precio {
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
}

.pk-resultados .pk-tarjeta__precio small { font-size: var(--pk-fs-xs); }
.pk-resultados .pk-datos {
  min-height: 28px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  gap: 8px 20px;
  color: var(--pk-txt);
  font-size: var(--pk-fs-base);
  line-height: 24px;
}
.pk-resultados .pk-datos .pk-icono { width: 18px; height: 18px; }

.pk-resultados .pk-anunciante {
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-xs);
  line-height: 20px;
}
.pk-resultados .pk-anunciante__logo { width: 22px; height: 22px; }

@media (min-width: 768px) {
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) {
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr);
    grid-template-rows: 152px;
    grid-template-areas: "medio cuerpo";
    height: 164px;
    min-height: 0;
    padding-bottom: 12px;
  }

  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__medio {
    grid-area: medio;
    position: relative;
    width: 228px;
    height: 152px;
    min-height: 0;
    overflow: hidden;
    border-radius: 8px;
  }

  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__foto {
    position: absolute;
    inset: 0;
  }

  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__img,
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-sinimg {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    aspect-ratio: 3 / 2;
  }

  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__cuerpo {
    grid-area: cuerpo;
    display: flex;
    min-width: 0;
    /* Antes `height: 152px` fijo. El título pasa a dos líneas, así que la altura
       se vuelve mínima en vez de fija: las filas siguen parejas porque el propio
       título reserva sus dos líneas con `min-height`. */
    min-height: 152px;
    padding: 4px 40px 4px 16px;
    gap: 0;
  }

  /* Los importes completos deben seguir legibles; el sufijo puede bajar. */
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__precio {
    overflow: visible;
    white-space: normal;
  }

  /* El título NO. En castellano los títulos de Propeka son descriptivos y a una
     sola línea se comían el nombre de la zona, que es el primer criterio de
     descarte del comprador guatemalteco. Dos líneas, y se reservan siempre. */
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    /* B-2: sin reserva. El clamp fija el techo; la altura la pone el texto. */
  }

  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__ctx {
    display: none;
  }

  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-datos {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
  }

  /* Tres datos, como la referencia. El cuarto y el quinto entraban en la fila
     porque cabian, no porque ayudaran a comparar: a partir del tercero la
     linea deja de escanearse y se lee. Siguen todos en la ficha. */
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-datos li:nth-child(n+4) {
    display: none;
  }

  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-anunciante {
    margin-top: auto;
  }

  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-anunciante__logo {
    display: none;
  }
}

/* Promoted result: 40px strip, 728×323px mosaic, then details. */
.pk-resultados .pk-promo {
  display: block;
  padding-bottom: 12px;
  border-color: var(--pk-n100);
  box-shadow: none;
}

.pk-resultados .pk-promo__tira {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--pk-primario-osc);
  background: var(--pk-primario-suave);
  border: 0;
  font-size: var(--pk-fs-xs);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}

.pk-resultados .pk-promo .pk-tarjeta__medio {
  display: grid;
  grid-template-columns: 2fr 1fr;
  width: 100%;
  height: 323px;
  gap: 2px;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
}

.pk-resultados .pk-promo--sin-secundaria .pk-tarjeta__medio {
  grid-template-columns: 1fr;
}

.pk-resultados .pk-promo .pk-tarjeta__foto {
  position: relative;
  min-height: 0;
  border-radius: 0;
}

.pk-resultados .pk-promo .pk-tarjeta__img,
.pk-resultados .pk-promo .pk-sinimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  aspect-ratio: auto;
}

.pk-resultados .pk-promo__tiras {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  height: 323px;
  margin: 0;
  gap: 2px;
}

.pk-resultados .pk-promo--una-secundaria .pk-promo__tiras {
  grid-template-rows: 1fr;
}

.pk-resultados .pk-promo__tiras img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  aspect-ratio: auto;
}

.pk-resultados .pk-promo .pk-tarjeta__cuerpo {
  display: flex;
  min-height: 174px;
  padding: 16px;
  gap: 4px;
}

.pk-resultados .pk-promo .pk-fav {
  top: 48px;
  right: 8px;
  color: var(--pk-tinta);
  background: rgba(255,255,255,.94);
}

.pk-resultados .pk-promo .pk-tarjeta__ubic { font-size: var(--pk-fs-sm); }
.pk-resultados .pk-promo .pk-tarjeta__precio { font-size: var(--pk-fs-base); }
.pk-resultados .pk-promo .pk-datos { margin-top: 4px; }
.pk-resultados .pk-promo .pk-anunciante { margin-top: auto; }

/* Advertisements and pagination use the reference rhythm. */
.pk-resultados .pk-paginacion {
  min-height: 72px;
  margin-top: 12px;
  gap: 4px;
}

/*
 * J-2 · La paginación era 32 x 32, el control más pequeño del producto y uno
 * de los que más se pulsan en móvil. Sube al suelo de 44. El relleno lateral
 * se mantiene, así que los números de dos cifras siguen holgados; lo único
 * que cambia es la caja pulsable.
 *
 * El radio pasa de un `4px` literal al token compartido: era uno de los seis
 * radios sueltos que B-36 midió en esta misma ruta.
 */
.pk-resultados .pk-paginacion a,
.pk-resultados .pk-paginacion span {
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--pk-r-sm);
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
  font-weight: 600;
}

.pk-resultados .pk-paginacion a[rel] { min-width: 44px; }
.pk-resultados .pk-paginacion a:hover {
  color: var(--pk-primario-osc);
  background: var(--pk-primario-suave);
}
.pk-resultados .pk-paginacion [aria-current="page"] {
  color: #fff;
  background: var(--pk-primario);
}

/* Desktop map-only mode with the measured 160px ad rail. */
@media (min-width: 1025px) {
  .pk-resultados .pk-split--mapa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    width: calc(100vw - 32px);
    margin-left: calc(50% - 50vw + 16px);
    gap: 16px;
  }

  .pk-resultados .pk-split--mapa .pk-mapa {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    top: auto;
    display: block;
    width: 100%;
    height: calc(100dvh - 196px);
    border-radius: 0;
  }

  body.admin-bar .pk-resultados .pk-split--mapa .pk-mapa {
    height: calc(100dvh - 228px);
  }

  .pk-resultados .pk-split--mapa .pk-results-layout {
    grid-column: 2;
    grid-row: 1;
    display: block;
    width: 160px;
    margin: 0;
  }

  .pk-resultados .pk-split--mapa [data-pk-listado] { display: none; }
  .pk-resultados .pk-split--mapa .pk-results-rail {
    display: flex;
    width: 160px;
    margin: 0;
  }
}

/* Desktop all-filters is a centered 676px dialog; mobile remains a full
   viewport sheet. */
@media (min-width: 768px) {
  .pk-resultados .pk-hoja {
    inset: 36px auto auto 50%;
    width: min(676px, calc(100vw - 72px));
    height: calc(100dvh - 72px);
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(13,35,56,.22);
    transform: translate(-50%, calc(100% + 72px));
  }

  body.admin-bar .pk-resultados .pk-hoja {
    top: 36px;
    height: calc(100dvh - 72px);
  }

  .pk-resultados .pk-hoja--abierta { transform: translate(-50%, 0); }
  .pk-resultados .pk-hoja__cab {
    min-height: 56px;
    padding: 8px 16px;
  }
  .pk-resultados .pk-hoja__cuerpo { padding: 16px 24px 32px; }
  .pk-resultados .pk-hoja__pie { padding-inline: 24px; }
}

/* Colapso de tableta.
   La referencia a 768 conserva cuatro refinamientos rapidos —operacion,
   precio, tipo y el cuarto— y retira los DOS ULTIMOS, area y dormitorios.
   Se colapsa por la derecha, en orden inverso de prioridad, no por criterio
   propio: antes desaparecia dormitorios y se quedaban los demas, que es otra
   jerarquia. */
@media (max-width: 1000px) and (min-width: 768px) {
  .pk-resultados .pk-barra { display: block; }
  .pk-resultados .pk-movil-barra { display: none; }
  .pk-resultados .pk-desplegable--m2,
  .pk-resultados .pk-desplegable--dormitorios { display: none; }
  .pk-resultados .pk-barra__todos { flex-basis: 140px; }
}

/* Entre 1000 y 1100 la fila sigue completa pero sin holgura: se retira el
   sexto control antes de que cualquiera de ellos empiece a truncar texto. */
@media (min-width: 1001px) and (max-width: 1099.98px) {
  .pk-resultados .pk-desplegable--m2 { display: none; }
}

@media (min-width: 768px) and (max-width: 800px) {
  .pk-resultados { --pk-pad: 12px; }
}

/* Funda retains its horizontal result row at exactly 768px and changes below. */
@media (max-width: 767.98px) {
  .pk-resultados {
    --pk-pad: 16px;
    padding-bottom: 24px;
  }

  .pk-resultados .pk-barra {
    display: block;
  }

  .pk-resultados .pk-barra__interior { padding-block: 8px; }
  .pk-resultados .pk-barra__fila--principal { min-height: 44px; }
  .pk-resultados .pk-barra__fila--filtros,
  .pk-resultados .pk-barra__fila--principal > .js-pk-mapa,
  .pk-resultados .pk-barra__fila--principal > .js-pk-guardar-busqueda {
    display: none;
  }

  /* La barra compacta se fija al BORDE DE LA VENTANA, no 60 px por debajo.
     Ese desfase compensaba una cabecera de sitio que antes quedaba anclada
     arriba; al dejar de estarlo, la barra se clavaba a 60 px y arrastraba una
     franja blanca vacia de 60 px sobre ella durante todo el desplazamiento. */
  .pk-resultados .pk-movil-barra {
    position: sticky;
    top: 0;
    z-index: 39;
    display: flex;
    min-height: 60px;
    gap: 4px;
    padding: 8px 16px;
    background: var(--pk-n0);
    border-bottom: 1px solid var(--pk-n100);
    backdrop-filter: none;
  }

  /* Esta nota decia que la barra de administracion SI es fija en movil. No lo
     es: medido el 2026-09-21 a 390 px, #wpadminbar computa `absolute` y se va
     con el desplazamiento. Clavar la barra compacta a 46 px reproducia
     exactamente el defecto que la regla de arriba ya habia corregido una vez
     con 60 px —«arrastraba una franja blanca vacia ... durante todo el
     desplazamiento»—, esta vez solo para quien ha iniciado sesion. Vuelve al
     borde de la ventana, como en el caso sin sesion. */

  .pk-resultados .pk-movil-barra .pk-btn {
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px;
    border-color: transparent;
    border-radius: 4px;
    box-shadow: none;
    font-size: var(--pk-fs-sm);
  }

  .pk-resultados .pk-movil-barra .pk-btn__txt,
  .pk-resultados .pk-movil-barra .js-pk-guardar-busqueda .pk-btn__txt {
    display: inline;
  }

  .pk-resultados .pk-chips { margin-top: 12px; }

  /* La franja de pago sangra hasta el borde derecho, pero NO con `100vw`:
     esa unidad incluye la barra de desplazamiento y a 767 px producia 4 px de
     desplazamiento horizontal en toda la pagina. Se sangra contra el propio
     relleno del contenedor, que es la medida que de verdad hay que compensar. */
  .pk-posiciones {
    width: auto;
    margin-top: 12px;
    margin-right: calc(-1 * var(--pk-pad));
  }

  .pk-posiciones__pista {
    grid-auto-columns: min(232px, calc(100vw - 48px));
    padding-right: 16px;
  }

  .pk-posicion {
    width: min(232px, calc(100vw - 48px));
  }

  .pk-resultados .pk-cabecera {
    min-height: 0;
    padding: 16px 0 8px;
  }

  .pk-resultados .pk-h1 { font-size: var(--pk-fs-lg); line-height: 26px; }
  .pk-resultados .pk-sub { font-size: var(--pk-fs-sm); line-height: 20px; }

  .pk-resultados .pk-cabecera__acciones {
    min-height: 40px;
    margin-top: 8px;
    gap: 12px;
  }

  /* La accion de zonas se queda en una linea. Partida en dos —«Seleccionar /
     zonas»— desalineaba la fila entera contra el selector de orden, que si es
     de una sola linea. */
  .pk-resultados .pk-cabecera__zonas {
    /* J-2 · 44, no 40. Es una de las dos acciones de la fila de filtros en
       móvil, y ambas se pulsan con el pulgar. */
    min-height: 44px;
    font-size: var(--pk-fs-sm);
    white-space: nowrap;
  }


  .pk-resultados .pk-orden { flex: 0 1 auto; gap: 6px; }

  /* En movil el rotulo del orden se retira: el propio valor —«Relevancia»— ya
     dice de que se trata, y los 358 px de la columna no dan para las dos
     acciones con etiqueta. La referencia hace lo mismo a este ancho. */
  .pk-resultados .pk-orden__etq {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .pk-resultados .pk-orden select {
    width: min(42vw, 150px);
    min-width: 0;
    /* J-2 · 44. Acompaña a «Seleccionar zonas» en la misma fila y las dos se
       pulsan con el pulgar, así que comparten alto. */
    height: 44px;
    min-height: 44px;
    padding-left: 10px;
    font-size: var(--pk-fs-sm);
  }

  .pk-resultados .pk-rejilla { gap: 12px; }

  .pk-resultados .pk-tarjeta:not(.pk-promo) {
    display: block;
    padding-bottom: 12px;
  }

  .pk-resultados .pk-tarjeta:not(.pk-promo) .pk-tarjeta__medio {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
  }

  .pk-resultados .pk-tarjeta:not(.pk-promo) .pk-tarjeta__foto,
  .pk-resultados .pk-tarjeta:not(.pk-promo) .pk-tarjeta__img,
  .pk-resultados .pk-tarjeta:not(.pk-promo) .pk-sinimg {
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  /* Altura mínima, no fija: el título ocupa dos líneas y necesita crecer. */
  .pk-resultados .pk-tarjeta:not(.pk-promo) .pk-tarjeta__cuerpo {
    min-height: 152px;
    overflow: hidden;
    padding: 10px 0 4px;
    gap: 2px;
  }

  /* Dos líneas también en móvil. Es donde más falta hacen: el ancho es menor y
     el título en castellano se truncaba casi siempre. */
  .pk-resultados .pk-tarjeta:not(.pk-promo) .pk-tarjeta__titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    /* B-2: sin reserva. El clamp fija el techo; la altura la pone el texto. */
  }

  .pk-resultados .pk-tarjeta:not(.pk-promo) .pk-tarjeta__ctx {
    display: none;
  }

  /* Tres datos tambien en movil: la fila de caracteristicas de la referencia
     no cambia de densidad al estrecharse, y aqui llegaba a mostrar cinco en
     el ancho mas justo de todos. */
  .pk-resultados .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-datos li:nth-child(n+4) {
    display: none;
  }

  .pk-resultados .pk-tarjeta:not(.pk-promo) .pk-fav {
    top: 8px;
    right: 8px;
    color: var(--pk-tinta);
    background: rgba(255,255,255,.94);
  }

  .pk-resultados .pk-promo__tira {
    min-height: 40px;
    padding-inline: 12px;
  }

  .pk-resultados .pk-promo .pk-tarjeta__medio {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    gap: 2px;
  }

  .pk-resultados .pk-promo--sin-secundaria .pk-tarjeta__medio {
    grid-template-rows: auto;
  }

  .pk-resultados .pk-promo .pk-tarjeta__foto {
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  .pk-resultados .pk-promo .pk-tarjeta__img,
  .pk-resultados .pk-promo .pk-sinimg {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .pk-resultados .pk-promo__tiras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    height: auto;
    gap: 2px;
  }

  .pk-resultados .pk-promo__tiras img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .pk-resultados .pk-promo .pk-tarjeta__cuerpo {
    min-height: 172px;
    padding: 12px 40px 8px 0;
  }

  .pk-resultados .pk-promo .pk-fav {
    top: 48px;
    right: 8px;
  }

  .pk-resultados .pk-split--mapa {
    display: block;
    width: calc(100% + (var(--pk-pad) * 2));
    margin-left: calc(var(--pk-pad) * -1);
  }

  .pk-resultados .pk-split--mapa .pk-results-layout { display: none; }
  .pk-resultados .pk-split--mapa .pk-mapa {
    position: relative;
    top: auto;
    display: block;
    width: 100%;
    height: calc(100dvh - 180px);
    min-height: 0;
    border-radius: 0;
  }

  body.admin-bar .pk-resultados .pk-split--mapa .pk-mapa {
    height: calc(100dvh - 226px);
  }

  .pk-resultados .pk-paginacion {
    justify-content: flex-start;
    overflow-x: auto;
  }
}

@media (max-width: 380px) {
  .pk-posiciones { width: calc(100vw - 16px); }
  .pk-posiciones__pista { padding-right: 16px; }
  .pk-resultados .pk-movil-barra .pk-btn { font-size: var(--pk-fs-xs); }
  .pk-resultados .pk-movil-barra .pk-icono { width: 17px; height: 17px; }
}

/* Houzez/Bootstrap resets `outline-style` after the base focus token. Restore
   one explicit keyboard ring at the authoritative results layer. */
body.pk-sitio .pk-resultados
  :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pk-tinta) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pk-app *, .pk-app *::before, .pk-app *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Impresión: la ficha debe poder llevarse a una visita. */
@media print {
  .pk-barra, .pk-movil-barra, .pk-movil-contacto, .pk-hoja, .pk-velo,
  .pk-acciones-media, .pk-paginacion { display: none !important; }
  .pk-ficha__cols { grid-template-columns: 1fr; }
}

/* =========================================================================
   Portada del marketplace
   =========================================================================
   Arquitectura tomada de la referencia en vivo: una banda de entrada con la
   busqueda flotando sobre ella, una fila de tres accesos directos y despues
   inventario real. Reutiliza la tarjeta, los tokens y el marco de
   `/propiedades/`: la portada NO es un sistema aparte.
   ========================================================================= */
.pk-portada { padding-bottom: var(--pk-e12); }

.pk-hero {
  padding-top: var(--pk-e12); /* Batch E: literal 48px, same value, tokenised. */
  background: linear-gradient(180deg, var(--pk-primario-suave) 0%, var(--pk-n0) 100%);
}

/*
 * Batch F · The empty right half.
 *
 * Measured before: the headline sat in a 457px column inside a 1020px frame
 * — not because the frame was narrow (A-1 already established the frame is
 * correct; see D-15), but because nothing was ever placed in the other
 * ~560px. Photography fills it now. Text keeps the flexible track; the photo
 * gets a fixed range so it neither crowds the headline on a slightly
 * narrower desktop nor grows unbounded on a very wide one.
 */
.pk-hero__fila {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 440px);
  align-items: center;
  gap: var(--pk-e8);
}

.pk-hero__fila--sin-foto { grid-template-columns: 1fr; }

.pk-hero__titulo {
  /*
   * Batch F: was 20ch, which is what kept the headline to a narrow column
   * even once it had real room to breathe. Widened so it wraps over TWO
   * lines instead of three at this column's actual width — verified by
   * measurement after deploying, not assumed from character counts.
   */
  max-width: 34ch;
  margin: 0;
  color: var(--pk-tinta);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: var(--pk-fw-fuerte);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.pk-hero__sub {
  max-width: 46ch;
  margin: var(--pk-e3) 0 0; /* Batch E: literal 12px, same value, tokenised. */
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  line-height: 1.55;
}

/*
 * One ratio, one radius, no shadow — per the brief. No scrim either: the
 * headline lives in its own column, never over the photo, so there is no
 * text-over-image contrast problem to solve.
 */
.pk-hero__foto {
  border-radius: var(--pk-r-lg);
  overflow: hidden;
}

.pk-hero__foto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Photo drops entirely below 768px — tested against dropping it below the
   search card instead, and removing it outright puts the search card
   closer to the top, which is the instruction's own tiebreaker. */
@media (max-width: 767.98px) {
  .pk-hero__foto { display: none; }
  .pk-hero__fila { grid-template-columns: 1fr; }
}
/* Tableta (768–1023): la foto conservaba sus 440 px y dejaba 260 px al texto:
   el titular caía en cuatro líneas y la entradilla en cinco, apretados junto
   a una foto que dominaba la fila (medido el 22-09-2026 a 768). Las dos
   columnas se reparten el ancho, con algo más para el texto. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pk-hero__fila { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--pk-e6); }
}

/* Tarjeta de busqueda: el elemento con mas peso de la pagina. */
.pk-buscador {
  /* Batch E: 28px was off the scale. Rounds up to --pk-e8/32, the same
     "new component starts here" gap used elsewhere on this page. */
  margin-top: var(--pk-e8);
  padding: 8px 8px 16px;
  background: var(--pk-n0);
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-lg);
  box-shadow: var(--pk-s3);
}

.pk-buscador__ops {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--pk-n100);
}

.pk-buscador__op {
  padding: 12px 20px;
  border-bottom: 3px solid transparent;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
  text-decoration: none;
}

.pk-buscador__op:hover { color: var(--pk-tinta); }

.pk-buscador__op--activa {
  color: var(--pk-primario-osc);
  border-bottom-color: var(--pk-primario);
}

.pk-buscador__forma {
  display: flex;
  align-items: center;
  margin-top: 16px;
  padding-inline: 8px;
  gap: 12px;
  flex-wrap: wrap;
}

.pk-buscador__campo {
  flex: 1 1 320px;
  min-width: 0;
  height: var(--pk-alto-ctl-lg);
  padding-inline: 16px;
  border: 1px solid var(--pk-n300);
  border-radius: var(--pk-r-sm);
  color: var(--pk-txt);
  background: var(--pk-n0);
  font-size: var(--pk-fs-base);
}

.pk-buscador__campo:focus-visible {
  outline: 0;
  border-color: var(--pk-navy);
  box-shadow: var(--pk-foco);
}

.pk-buscador__enviar {
  flex: 0 0 auto;
  min-height: var(--pk-alto-ctl-lg);
  padding-inline: 24px;
}

.pk-buscador__mapa {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: var(--pk-navy);
  font-size: var(--pk-fs-base);
  text-decoration: none;
}

.pk-buscador__mapa:hover { color: var(--pk-primario-osc); text-decoration: underline; }
.pk-buscador__mapa .pk-icono { width: 20px; height: 20px; }

/* Accesos directos: tres destinos reales, no tres tarjetas decorativas. */
.pk-atajos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--pk-e8); /* Batch E: literal 32px, same value, tokenised. */
  gap: var(--pk-e4);
}

.pk-atajo {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  gap: 14px;
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r);
  background: var(--pk-n0);
  color: var(--pk-tinta);
  text-decoration: none;
  transition: border-color var(--pk-t), box-shadow var(--pk-t);
}

.pk-atajo:hover { border-color: var(--pk-n300); box-shadow: var(--pk-s2); }

.pk-atajo__icono {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--pk-r-sm);
  color: var(--pk-primario-osc);
  background: var(--pk-primario-suave);
}

.pk-atajo__icono .pk-icono { width: 22px; height: 22px; }
.pk-atajo strong { display: block; font-size: var(--pk-fs-base); font-weight: var(--pk-fw-semi); }
.pk-atajo small { display: block; margin-top: 2px; color: var(--pk-txt-ter); font-size: var(--pk-fs-sm); }

/*
 * Batch E · Vertical rhythm — between-section gap.
 *
 * Was a literal `48px`. Same VALUE as `--pk-e12` — the number was already
 * right — but a literal pixel value next to nine `var(--pk-e*)` siblings in
 * this file is exactly what lets a future edit drift off the scale without
 * anyone noticing, because nothing marks it as the same role. Tokenised so
 * "the gap between two homepage sections" has one name, not one number
 * copied by hand.
 */
.pk-seccion { margin-top: var(--pk-e12); }
/* La separación entre secciones de PÁGINA no vale dentro de un desplegable de
   filtros ni de la hoja de filtros: ahí `.pk-seccion` es una sección de
   formulario que ya se separa con su relleno y su borde (véase 990). Medido el
   21-09-2026 como visitante: 48 px muertos sobre «Tipo de propiedad» en la hoja
   a 390 y 65 px sobre los campos del panel «Precio» a 1440. */
.pk-panel .pk-seccion,
.pk-hoja .pk-seccion { margin-top: 0; }
/* Tras la cabecera de página (`.pk-dir-cab`: acerca, contacto) la primera
   sección sumaba el relleno inferior de la cabecera, estos 48 px y su propio
   relleno: 84 px entre la entradilla y el primer `h2` a 1440, un vacío que
   desconectaba el título del contenido (medido el 22-09-2026). Con 36 px
   queda al paso de «Ayuda», cuyo cuerpo sigue a la misma cabecera. */
.pk-dir-cab + .pk-seccion { margin-top: 0; }

/* En móvil el único desplegable que queda fuera de la hoja de filtros es
   «Buscar por ubicación», y su disparador ocupa todo el ancho (343 px a 390).
   El panel se abría a su ancho de contenido, 293 px: más estrecho que el
   control que lo abre, con la página asomando a la derecha (medido el
   21-09-2026 como visitante). El panel toma el ancho de su disparador. */
@media (max-width: 1023.98px) {
  /* También en tableta (768: control de 459 px, panel de 293) y sin el mínimo
     de 280 px, que a 320 dejaba el panel 7 px más ancho que su disparador. */
  .pk-desplegable > .pk-panel { width: 100%; min-width: 0; max-width: none; }
}

.pk-seccion__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.pk-seccion__titulo {
  margin: 0;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-lg);
  font-weight: var(--pk-fw-semi);
  line-height: 1.3;
}

/*
 * En la portada el H1 del hero mide 40px y los cuatro titulos de seccion
 * medIan 20px, el mismo cuerpo que el titulo de una tarjeta, de modo que
 * ninguna seccion se anunciaba y la pagina se leia como una columna plana.
 * Sube a 1.75rem desde 768 — la escala que la ficha ya usa — en vez de
 * inventar un tamano nuevo. En movil se queda en 1.25rem.
 */
@media (min-width: 768px) {
  .pk-seccion__titulo { font-size: var(--pk-fs-xl); line-height: 1.28; }
}

.pk-seccion__enlace { color: var(--pk-navy); font-size: var(--pk-fs-base); text-decoration: none; }
.pk-seccion__enlace:hover { color: var(--pk-primario-osc); text-decoration: underline; }

/* La portada muestra la MISMA tarjeta que los resultados, en tres columnas. */
.pk-rejilla--portada {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Pistas de descubrimiento por tipo y por zona. */
/*
 * Las dos rejillas «Explora» son el mismo componente y median distinto: tipo
 * a 4 columnas de 246px con cinco fichas —una huerfana y tres celdas vacias—
 * y zona a 5 columnas de 194px, una al lado de la otra. Se igualan a cinco:
 * los cinco tipos entran en una sola fila y ambas secciones comparten modulo.
 * `grid-auto-rows: 1fr` empareja ademas las filas — en zona la primera medIa
 * 104px y la segunda 80px solo porque «Carretera a El Salvador» ocupa dos
 * lineas. En tableta y movil siguen mandando las reglas de mas abajo.
 */
.pk-pistas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  gap: 12px;
  grid-auto-rows: 1fr;
  list-style: none;
}

.pk-pistas--compacta { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* La fila ya iguala su alto con `grid-auto-rows: 1fr`, pero el enlace es un
   bloque dentro del `li` y su borde terminaba donde terminaba su texto: una
   pista de dos lineas («Carretera a El Salvador») quedaba mas alta que sus
   vecinas de fila. El enlace ocupa ahora toda la celda. */
.pk-pistas > li { display: flex; }
.pk-pistas > li > .pk-pista { flex: 1 1 auto; min-width: 0; }

.pk-pista {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r-sm);
  color: var(--pk-tinta);
  text-decoration: none;
  transition: border-color var(--pk-t), background-color var(--pk-t);
}

.pk-pista:hover { border-color: var(--pk-primario); background: var(--pk-primario-suave); }
.pk-pista span { display: block; font-size: var(--pk-fs-base); font-weight: var(--pk-fw-semi); }
.pk-pista small { display: block; margin-top: 2px; color: var(--pk-txt-ter); font-size: var(--pk-fs-sm); }

/* Explicacion del modelo: Propeka es un marketplace, no una corredora. */
.pk-explica__pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 20px 0 0;
  padding: 0;
  gap: 24px;
  list-style: none;
  counter-reset: pk-paso;
}

.pk-explica__pasos li {
  padding-top: 16px;
  border-top: 3px solid var(--pk-primario);
  counter-increment: pk-paso;
}

.pk-explica__pasos strong {
  display: block;
  margin-bottom: 6px;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
}

.pk-explica__pasos strong::before {
  content: counter(pk-paso) ". ";
  color: var(--pk-primario);
}

.pk-explica__pasos p { margin: 0; color: var(--pk-txt-sec); line-height: 1.55; }

@media (max-width: 1023.98px) {
  .pk-rejilla--portada { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-pistas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pk-pistas--compacta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .pk-hero { padding-top: 28px; }
  .pk-buscador__forma { gap: 10px; }
  .pk-buscador__campo { flex: 1 1 100%; }
  .pk-buscador__enviar { flex: 1 1 auto; }
  .pk-atajos { grid-template-columns: 1fr; margin-top: var(--pk-e6); } /* Batch E: literal 24px, tokenised. */
  .pk-rejilla--portada { grid-template-columns: 1fr; gap: 16px; }
  .pk-pistas,
  .pk-pistas--compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Batch E: 36px was off the scale (nothing between --pk-e8/32 and
     --pk-e12/40 exists). Steps down from the desktop gap to --pk-e8,
     matching .pk-atajos's own mobile step at this same breakpoint. */
  .pk-seccion { margin-top: var(--pk-e8); }
  .pk-explica__pasos { grid-template-columns: 1fr; gap: 20px; }
}

/* La tarjeta de la portada habla el MISMO idioma que la de resultados: sin
   linea de contexto y con tres datos. Con la linea puesta en unas fichas y no
   en otras, los precios de la fila quedaban a distinta altura. */
.pk-rejilla--portada .pk-tarjeta__ctx { display: none; }
.pk-rejilla--portada .pk-datos li:nth-child(n+4) { display: none; }
.pk-rejilla--portada .pk-tarjeta__cuerpo { gap: 4px; }

/* =========================================================================
   Directorio profesional
   =========================================================================
   Inmobiliarias y agentes con UNA sola tarjeta. La ruta servia un listado de
   propiedades —quien buscaba una inmobiliaria encontraba pisos—, asi que aqui
   no habia diseno que reutilizar: es sistema nuevo, construido con los mismos
   tokens y el mismo marco que el resto.
   ========================================================================= */
.pk-directorio { padding-bottom: var(--pk-e12); }

.pk-dir-cab { padding-block: var(--pk-e8) var(--pk-e4); }

.pk-dir-cab__titulo {
  margin: 0;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-xl);
  font-weight: var(--pk-fw-semi);
  line-height: 1.2;
}

.pk-dir-cab__sub {
  max-width: 62ch;
  margin: 10px 0 0;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  line-height: 24px;
}

/* Pestanas: el mismo gesto que el orden de resultados, subrayado en marca. */
.pk-dir-pestanas {
  display: flex;
  margin-bottom: var(--pk-e6);
  gap: 4px;
  border-bottom: 1px solid var(--pk-n100);
}

.pk-dir-pestana {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--pk-e4);
  gap: 8px;
  border-bottom: 3px solid transparent;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
  text-decoration: none;
}

.pk-dir-pestana:hover { color: var(--pk-tinta); }

.pk-dir-pestana--activa {
  color: var(--pk-primario-osc);
  border-bottom-color: var(--pk-primario);
}

.pk-dir-pestana__n {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: 7px;
  border-radius: var(--pk-r-pill);
  color: var(--pk-txt-ter);
  background: var(--pk-n50);
  font-size: var(--pk-fs-xs);
  font-weight: var(--pk-fw-semi);
}

.pk-dir-pestana--activa .pk-dir-pestana__n {
  color: var(--pk-primario-osc);
  background: var(--pk-primario-suave);
}

/* Tarjeta profesional */
.pk-dir-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  gap: var(--pk-e4);
  list-style: none;
}

.pk-prof {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r);
  background: var(--pk-n0);
  transition: border-color var(--pk-t), box-shadow var(--pk-t);
}

.pk-prof:hover { border-color: var(--pk-n300); box-shadow: var(--pk-s2); }

.pk-prof__enlace {
  display: flex;
  flex: 1;
  padding: var(--pk-e5);
  gap: var(--pk-e4);
  color: inherit;
  text-decoration: none;
}

.pk-prof__medio { flex: 0 0 auto; }

.pk-prof__logo {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-sm);
  background: var(--pk-n0);
}

/* Sin logotipo NO se deja un hueco: la inicial identifica igual y mantiene la
   fila alineada con las tarjetas que si lo tienen. */
.pk-prof__inicial {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--pk-r-sm);
  color: var(--pk-primario-osc);
  background: var(--pk-primario-suave);
  font-size: var(--pk-fs-xl);
  font-weight: var(--pk-fw-fuerte);
}

.pk-prof__cuerpo { min-width: 0; }

.pk-prof__nombre {
  display: block;
  color: var(--pk-navy);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
  line-height: 24px;
}

.pk-prof__enlace:hover .pk-prof__nombre { color: var(--pk-primario-osc); }

.pk-prof__tipo {
  display: block;
  margin-top: 2px;
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-sm);
  line-height: 20px;
}

.pk-prof__desc {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 8px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
  line-height: 21px;
}

.pk-prof__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pk-e3) var(--pk-e5);
  gap: var(--pk-e3);
  border-top: 1px solid var(--pk-n100);
  flex-wrap: wrap;
}

.pk-prof__inv { color: var(--pk-txt-ter); font-size: var(--pk-fs-sm); }
.pk-prof__acciones { display: flex; gap: 8px; }

.pk-btn--sm {
  min-height: 36px;
  padding-inline: var(--pk-e3);
  font-size: var(--pk-fs-sm);
}

/* Estado vacio honesto: dice que no hay nada, por que, y ofrece una salida. */
.pk-vacio-caja {
  max-width: 460px;
  margin: var(--pk-e12) auto;
  padding: var(--pk-e6);
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r);
  background: var(--pk-n0);
  text-align: center;
}

.pk-vacio-caja__titulo {
  margin: 0 0 8px;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
}

.pk-vacio-caja__texto { margin: 0; color: var(--pk-txt-sec); line-height: 22px; }
.pk-vacio-caja__acc { margin: var(--pk-e5) 0 0; }

@media (max-width: 767.98px) {
  .pk-dir-cab { padding-block: var(--pk-e5) var(--pk-e3); }
  .pk-dir-cab__titulo { font-size: var(--pk-fs-xl); }
  .pk-dir-rejilla { grid-template-columns: 1fr; }
  .pk-prof__enlace { padding: var(--pk-e4); gap: var(--pk-e3); }
  .pk-prof__logo,
  .pk-prof__inicial { width: 56px; height: 56px; }
  .pk-prof__pie { padding-inline: var(--pk-e4); }
  .pk-prof__acciones { flex: 1; justify-content: flex-end; }
}

/* =========================================================================
   Planes y estados comerciales
   =========================================================================
   La ruta comercial no puede devolver al usuario a la portada sin explicacion.
   Cuando hay paquetes se presentan como tarjetas comparables; cuando no los
   hay, se dice cual es el modelo vigente y se ofrecen las acciones que de
   verdad funcionan. Ningun boton activa cobro.
   ========================================================================= */
.pk-planes { padding-bottom: var(--pk-e12); }
.pk-planes__prueba {
  margin: 0 0 var(--pk-e6);
  padding: var(--pk-e3) var(--pk-e4);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r);
  background: var(--pk-n50);
  color: var(--pk-tinta);
  font-size: var(--pk-fs-sm);
  line-height: 1.5;
}
/* Quien ya tiene plan: cuantos activos tiene y si algun plan le da sitio. */
.pk-planes__mio {
  margin: 0 0 var(--pk-e4);
  padding: var(--pk-e3) var(--pk-e4);
  border: 1px solid var(--pk-aviso);
  border-left-width: 4px;
  border-radius: var(--pk-r);
  background: var(--pk-aviso-suave);
  color: #713f12;
  font-size: var(--pk-fs-sm);
  line-height: 1.5;
}
.pk-planes__mio p { margin: 0; }
.pk-planes__mio a { color: inherit; font-weight: 600; text-decoration: underline; }
/* Un plan que no le da sitio no enlaza a la pasarela: se ve, no se pulsa. */
.pk-btn--inerte {
  cursor: default;
  opacity: .6;
  pointer-events: none;
}
.pk-planes__comunes {
  margin-top: var(--pk-e6);
  padding: var(--pk-e5);
  border-radius: var(--pk-r);
  background: var(--pk-n50);
}
.pk-planes__comunes h2 { margin: 0 0 var(--pk-e3); font-size: var(--pk-fs-base); }
.pk-planes__comunes ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--pk-e3) var(--pk-e6);
  margin: 0;
  /* Sin viñetas no hay nada que sangrar: con 16 px los tres puntos quedaban
     desalineados del título y del párrafo del mismo bloque (visto el
     22-09-2026 a 1440 y 390). */
  padding-left: 0;
  list-style: none;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-sm);
}
.pk-planes__comunes p { margin: var(--pk-e4) 0 0; color: var(--pk-txt-sec); font-size: var(--pk-fs-sm); }

/*
 * Conmutador mensual / anual. Dos posiciones dentro de una pastilla, con la
 * activa en blanco sobre el fondo gris: el patron habitual de los comparadores
 * de planes, y se lee de un vistazo cual esta puesta. Son `<button>` de verdad
 * con `aria-pressed`, no enlaces: no navegan, cambian lo que se ve.
 */
.pk-cambio {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 var(--pk-e5);
  padding: 4px;
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r-lg);
  background: var(--pk-n50);
}

.pk-cambio__op {
  min-height: var(--pk-alto-ctl-sm);
  padding: 0 var(--pk-e4);
  border: 0;
  border-radius: var(--pk-r-sm);
  background: transparent;
  color: var(--pk-txt-sec);
  font-family: inherit;
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
  cursor: pointer;
  transition: background var(--pk-t), color var(--pk-t);
}

.pk-cambio__op:hover { color: var(--pk-tinta); }

.pk-cambio__op.is-activo {
  background: var(--pk-n0);
  color: var(--pk-tinta);
  box-shadow: 0 1px 2px rgba(13, 35, 56, .12);
}

/*
 * `minmax` a 230 px y no a 260: con CUATRO planes publicados —los tres de pago
 * mas la prueba— a 260 no caben en el contenedor de 1068 px
 * (4x260 + 3x20 de hueco = 1100) y el cuarto se iba solo a una segunda fila.
 * Es la misma huerfana que D-57 quito de las rejillas «Explora». A 230 entran
 * los cuatro, cada tarjeta mide 252 px reales, y `grid-auto-rows: 1fr` empareja
 * las alturas para que los botones queden a la misma linea.
 */
.pk-planes__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  gap: var(--pk-e5);
  list-style: none;
}
@media (min-width: 540px) and (max-width: 1099.98px) {
  .pk-planes__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pk-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pk-e6);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r-lg);
  background: var(--pk-n0);
}

.pk-plan__nombre {
  margin: 0;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
}

.pk-plan__precio {
  margin: var(--pk-e3) 0 var(--pk-e4);
  color: var(--pk-tinta);
  font-size: var(--pk-fs-hero);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.pk-plan__precio small {
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-normal);
  letter-spacing: 0;
}

.pk-plan__rasgos {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
  line-height: 22px;
}

/* Cabecera de la tarjeta: nombre y, si procede, distintivo del recomendado. */
.pk-plan__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-e2);
}

/*
 * El distintivo va en `--pk-enlace` y NO en el rojo de marca: el rojo es el
 * color de accion y ya lo lleva el boton de este mismo plan. Dos rojos en la
 * misma tarjeta compiten entre si; el indigo señala sin gritar.
 */
/*
 * Va sobre el filete superior de la tarjeta, no junto al nombre. Medido el
 * 15-09-2026 a 1440: en una tarjeta de 252 px, «10 propiedades» y el distintivo
 * no cabían en una línea, el nombre se partía en dos y el precio de ese plan
 * quedaba 22 px más abajo que los otros tres. Fuera del flujo, los cuatro
 * nombres ocupan una línea y los precios se alinean.
 */
.pk-plan__insignia {
  position: absolute;
  top: -11px;
  left: var(--pk-e6);
  flex: none;
  padding: 2px 8px;
  border-radius: var(--pk-r-sm);
  background: var(--pk-enlace);
  color: var(--pk-n0);
  font-size: var(--pk-fs-xs);
  font-weight: var(--pk-fw-semi);
  line-height: 16px;
  white-space: nowrap;
}

/*
 * `--destacado` ya NO pinta borde. Marca el plan recomendado, que es una
 * afirmacion del negocio y no se mueve; para eso le basta el distintivo.
 *
 * El resalte azul es `--elegido`, que es del visitante: salta al plan que
 * elige. Arranca sobre el recomendado —lo que la pagina propone— y a partir
 * de ahi manda quien mira. Mezclar las dos cosas en la misma clase hacia que
 * el azul se quedara clavado en un plan que quiza no era el que interesaba.
 */
.pk-plan--elegido {
  border-color: var(--pk-enlace);
  box-shadow: 0 0 0 1px var(--pk-enlace);
}

/* La tarjeta entera es elegible; el enlace de accion sigue siendo el enlace. */
.pk-plan { cursor: pointer; }
.pk-plan:not(.pk-plan--elegido):hover { border-color: var(--pk-n300); }

/*
 * El periodo va SIEMPRE en su propia linea, en las cuatro tarjetas.
 *
 * En linea con el precio, «/ 2 meses» no cabia en 240 px y se partia por el
 * espacio: «/ 2» junto al precio y «meses» sola debajo. Con `nowrap` dejaba de
 * partirse pero saltaba entera, asi que SOLO esa tarjeta tenia el bloque de
 * precio a dos lineas y su «Incluye:» quedaba 45 px mas abajo que el de las
 * otras tres. Forzar dos lineas en todas cuesta 22 px de alto y alinea las
 * cuatro listas; que se alineen es justo para lo que existe un comparador.
 */
.pk-plan__periodo {
  display: block;
  white-space: nowrap;
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-normal);
  letter-spacing: 0;
}

.pk-plan__incluye {
  margin: var(--pk-e2) 0 var(--pk-e2);
  color: var(--pk-tinta);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
}

/*
 * Lo que NO entra se marca, no se omite. Si una fila simplemente falta hay que
 * contar y comparar de memoria; con el aspa a la vista, la diferencia entre
 * dos planes se lee en vertical de un vistazo. Es lo que hace la referencia.
 */
.pk-plan__rasgos li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--pk-e2);
  margin-bottom: 6px;
}

.pk-rasgo__marca { position: relative; flex: none; width: 16px; height: 22px; }

.pk-rasgo__marca::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--pk-exito);
  border-bottom: 2px solid var(--pk-exito);
  transform: rotate(-45deg);
}

.pk-rasgo--no { color: var(--pk-txt-ter); }

.pk-rasgo--no .pk-rasgo__marca::before,
.pk-rasgo--no .pk-rasgo__marca::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 12px;
  height: 0;
  border: 0;
  border-top: 2px solid var(--pk-n300);
  transform: rotate(45deg);
}

.pk-rasgo--no .pk-rasgo__marca::after { transform: rotate(-45deg); }

.pk-plan__desc { margin-top: var(--pk-e4); color: var(--pk-txt-sec); font-size: var(--pk-fs-sm); }
.pk-plan__acc { margin: auto 0 0; padding-top: var(--pk-e5); }
.pk-plan__acc .pk-btn { width: 100%; }
@media (min-width: 768px) {
  .pk-plan__acc { min-height: 116px; }
}

/* La limitacion se dice, no se esconde: el prototipo no contrata en linea. */
.pk-plan__nota {
  display: block;
  margin-top: 8px;
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-xs);
  line-height: 1.5;
  text-align: center;
}

/* Estado sin planes */
.pk-estado {
  max-width: 720px;
  margin: 0 auto var(--pk-e10);
  padding: var(--pk-e8);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r-lg);
  background: var(--pk-n25);
}

.pk-estado__titulo {
  margin: 0 0 var(--pk-e3);
  color: var(--pk-tinta);
  font-size: var(--pk-fs-lg);
  font-weight: var(--pk-fw-semi);
  line-height: 1.3;
}

.pk-estado__texto { margin: 0; color: var(--pk-txt-sec); font-size: var(--pk-fs-base); line-height: 24px; }

.pk-estado__lista {
  margin: var(--pk-e5) 0 0;
  padding-left: 20px;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  line-height: 24px;
}

.pk-estado__lista li { margin-bottom: 6px; }

.pk-estado__acc {
  display: flex;
  margin: var(--pk-e6) 0 0;
  gap: var(--pk-e3);
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  .pk-estado { padding: var(--pk-e5); }
  .pk-estado__acc .pk-btn { flex: 1 1 100%; }
}

/* =========================================================================
   Tarjeta amplia de resultados y franja de posiciones compacta (2026-09-08)
   =========================================================================
   La referencia (funda.nl) estrenó en septiembre una tarjeta de resultado
   más rica: foto principal con dos miniaturas a la izquierda; a la derecha
   distintivos, precio a 20/28, dirección, hechos con icono, un extracto de
   una o dos líneas y el anunciante en su propia caja con logotipo. Medido en
   vivo a 1536: tarjeta de 986×508 con borde de 1 px y radio de 8, foto de
   488×340 y miniaturas de 240×160, sin sombra.

   Se adopta con nuestra escala y nuestros colores: 3:2 en TODAS las fotos
   (la referencia mezcla 1,44 y 3:2), título en tinta y no en azul, rojo sólo
   en las acciones. Va al final de la hoja y con especificidad (0,5,x) para
   ganar a la fila compacta de 228 px (2661-2760), que sigue siendo la tarjeta
   de favoritas, similares, portada y perfiles: sólo `listado.php` pide la
   variante.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia {
    display: grid;
    grid-template-columns: 488px minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "medio cuerpo";
    gap: var(--pk-e4);
    height: auto;
    min-height: 0;
    padding: var(--pk-e4);
    border: 1px solid var(--pk-n100);
    border-radius: 10px;
    margin-bottom: var(--pk-e1); /* 12 de rejilla + 4 = 16 entre tarjetas con borde */
    background: var(--pk-n0);
    overflow: hidden;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia:hover { box-shadow: none; border-color: var(--pk-n200); }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__medio {
    grid-area: medio;
    display: flex;
    flex-direction: column;
    gap: var(--pk-e2);
    width: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__foto {
    position: relative;
    inset: auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--pk-r);
    background: var(--pk-n100);
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__img,
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-sinimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__tiras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pk-e2);
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__tiras img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--pk-r);
    background: var(--pk-n100);
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__cuerpo {
    grid-area: cuerpo;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    min-width: 0;
    padding: var(--pk-e8) 0 0;
  }
  /* El precio va primero y a 20/28: es lo único que la referencia sube un
     paso, y sigue siendo un solo elemento por tarjeta. */
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__precio {
    order: -1;
    margin: 0 0 var(--pk-e1);
    font-size: var(--pk-fs-lg);
    line-height: var(--pk-lh-lg);
    font-weight: var(--pk-fw-semi);
    white-space: normal;
    overflow: visible;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    font-size: var(--pk-fs-base);
    line-height: var(--pk-lh-base);
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__ubic {
    margin-top: 2px;
    font-size: var(--pk-fs-base);
    line-height: var(--pk-lh-base);
    font-weight: var(--pk-fw-normal);
    color: var(--pk-tinta);
    white-space: normal;
    overflow: visible;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__ubic span { min-height: 0; }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__ctx {
    display: block;
    margin: 0;
    font-size: var(--pk-fs-sm);
    line-height: var(--pk-lh-sm);
    color: var(--pk-txt-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-datos {
    flex-wrap: wrap;
    margin-top: var(--pk-e2);
    min-height: 0;
    padding: 0;
    border: 0;
    gap: var(--pk-e1) var(--pk-e4);
    white-space: normal;
    overflow: visible;
  }
  /* Cuatro hechos caben a lo ancho de 470 px sin dejar de escanearse. */
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-datos li:nth-child(n+4) { display: inline-flex; }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-datos li:nth-child(n+5) { display: none; }
  /* Ritmo de la columna, medido en la tarjeta de funda el 10-09-2026:
     contenido a 64 px del borde superior, precio 20/28 en 600 y TODO lo
     demas en 400 —un solo peso fuerte—, 4 px antes de los hechos y 24 px
     antes de la entradilla, que es la unica separacion real. La nuestra
     arrancaba a 21 px con DOS pesos fuertes (precio y titulo) y 12 px antes
     de la entradilla. Los hechos bajan a 400 aqui, no en la regla base,
     para no tocar la tarjeta compacta ni la destacada. */
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-datos b { font-weight: var(--pk-fw-normal); }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__extracto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-style: italic;
    overflow: hidden;
    margin: var(--pk-e6) 0 0;
    font-size: var(--pk-fs-base);
    line-height: var(--pk-lh-base);
    color: var(--pk-txt-sec);
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-anunciante--caja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pk-e3);
    margin-top: auto;
    padding: var(--pk-e3) var(--pk-e4);
    min-height: 0;
    border: 1px solid var(--pk-n100);
    border-radius: var(--pk-r);
    font-size: var(--pk-fs-sm);
    line-height: var(--pk-lh-sm);
    color: var(--pk-txt-ter);
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-anunciante--caja > span { order: -1; min-width: 0; }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-anunciante--caja .pk-anunciante__logo {
    display: block;
    flex: none;
    order: 2;
    width: 56px;
    height: 56px;
    border: 1px solid var(--pk-n100);
    border-radius: var(--pk-r-sm);
    object-fit: contain;
    background: var(--pk-n0);
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-anunciante__n { font-weight: var(--pk-fw-semi); color: var(--pk-enlace); }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia a.pk-anunciante__n:hover { color: var(--pk-primario-osc); text-decoration: underline; }
  /* El corazón sigue sobre la foto principal, dentro del relleno de 16 px. */
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-fav {
    top: calc(var(--pk-e4) + var(--pk-e2));
    left: calc(var(--pk-e4) + 488px - 44px - var(--pk-e2));
    right: auto;
  }
}
/* Entre 768 y 991 la columna de 488 se come el cuerpo: la foto baja a 300 y
   se retiran las miniaturas. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia { grid-template-columns: 300px minmax(0, 1fr); }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__tiras { display: none; }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-fav { left: calc(var(--pk-e4) + 300px - 44px - var(--pk-e2)); }
}
/* En móvil la tarjeta apilada del listado ya existe (3098+); sólo se retiran
   las miniaturas y el extracto queda a dos líneas. El anunciante vuelve a ser
   la línea sencilla de siempre. */
@media (max-width: 767.98px) {
  .pk-resultados .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__tiras { display: none; }
  .pk-resultados .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__extracto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-style: italic;
    overflow: hidden;
    margin: var(--pk-e2) 0 0;
    font-size: var(--pk-fs-sm);
    line-height: var(--pk-lh-sm);
    color: var(--pk-txt-sec);
  }
}

/* Posiciones destacadas: cuatro huecos de 243 px, como la fila «Toppositie»
   de la referencia (243×162 medidos), en vez de dos o tres tarjetas a un
   tercio del marco que empujaban el recuento y la lista fuera de la primera
   pantalla. Título y precio van sobre la foto, en blanco sobre un degradado;
   debajo, el anunciante. Con menos de cuatro destacadas los huecos sobrantes
   quedan vacíos: la franja no se estira. */
.pk-resultados .pk-posiciones__pista {
  grid-auto-columns: 243px;
  gap: var(--pk-e4);
}
.pk-resultados .pk-posicion {
  border: 0;
  box-shadow: none;
  border-radius: var(--pk-r);
  background: transparent;
  overflow: visible;
}
.pk-resultados .pk-posicion__enlace { position: relative; display: block; height: auto; }
.pk-resultados .pk-posicion__foto { border-radius: var(--pk-r); }
.pk-resultados .pk-posicion__cuerpo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--pk-e8) var(--pk-e3) var(--pk-e3);
  border-radius: 0 0 var(--pk-r) var(--pk-r);
  /* Tres paradas, no dos. El degradado era lineal de 0 a .78, pero el titulo
     no empieza abajo: empieza tras los 32 px de relleno superior, o sea a un
     30 % de una caja de 106 px, donde la rampa lineal solo habia llegado a
     .23. Sobre una foto clara —la de ladrillo de Jardines de San Cristobal es
     el peor caso del catalogo— el blanco se lavaba y el titulo dejaba de
     leerse. La parada intermedia sube esa zona a .38 sin tocar los extremos:
     arriba sigue siendo transparente y abajo sigue siendo .78, asi que la
     silueta de la tarjeta no cambia; solo deja de haber un hueco claro justo
     donde cae el texto. La referencia (funda, franja "Toppositie") mantiene
     el velo parejo por la misma razon. */
  background: linear-gradient(180deg,
    rgba(13, 35, 56, 0) 0%,
    rgba(13, 35, 56, .38) 32%,
    rgba(13, 35, 56, .78) 100%);
}
.pk-resultados .pk-posicion__cuerpo h2 {
  min-height: 0;
  color: var(--pk-n0);
  font-size: var(--pk-fs-sm);
  line-height: var(--pk-lh-sm);
  font-weight: var(--pk-fw-semi);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.pk-resultados .pk-posicion__cuerpo p {
  margin: 2px 0 0;
  color: var(--pk-n0);
  font-size: var(--pk-fs-sm);
  line-height: var(--pk-lh-sm);
  font-weight: var(--pk-fw-normal);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.pk-resultados .pk-posicion__enlace:hover h2 { color: var(--pk-n0); text-decoration: underline; }
.pk-resultados .pk-posicion__agencia {
  margin: var(--pk-e2) 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--pk-fs-sm);
  line-height: var(--pk-lh-sm);
  color: var(--pk-txt-sec);
}
@media (max-width: 767.98px) {
  .pk-resultados .pk-posiciones__pista { grid-auto-columns: 232px; }
}

/* Ficha: dos elementos gritaban a la vez —h1 a 34/700 y precio a 32/700—.
   El h1 sigue mandando (28/36) y el precio baja un paso (24/32, semi): la
   jerarquía la hacen el peso y el espacio, no dos tamaños enormes. Sólo en
   escritorio; el móvil conserva su escala (1888). */
@media (min-width: 768px) {
  .pk-ficha .pk-h1 { font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -.01em; }
  .pk-ficha .pk-precio-grande { font-size: 1.5rem; line-height: 2rem; font-weight: var(--pk-fw-semi); letter-spacing: -.01em; }
}

/* Ficha en móvil: el precio (28 px) era mayor que el h1 (20 px), la jerarquía
   al revés que en escritorio. Medido a 390: h1 a y=510, precio a y=641. Ahora
   h1 24/32 y precio 22/28 semi. Y la caja de hechos medía 294 px porque los
   cuatro hechos se apilaban en una columna con relleno de 20: pasan a dos
   columnas fijas con relleno de 16, como la fila de hechos de la referencia. */
@media (max-width: 767.98px) {
  .pk-ficha .pk-h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -.01em; }
  .pk-ficha .pk-precio-grande { font-size: 1.375rem; line-height: 1.75rem; font-weight: var(--pk-fw-semi); letter-spacing: -.01em; }
  .pk-ficha .pk-hechos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pk-e3) var(--pk-e4);
    padding: var(--pk-e4);
  }
  .pk-ficha .pk-hecho__v { font-size: var(--pk-fs-base); line-height: var(--pk-lh-base); }
}

/* Con cinco o seis hechos, dos columnas daban tres filas de 80 px (286 px de
   caja a 390). Tres columnas: dos filas, ~190 px, y el icono un paso menor. */
@media (max-width: 767.98px) {
  .pk-ficha .pk-hechos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pk-e3) var(--pk-e2); }
  .pk-ficha .pk-hecho__ic .pk-icono { width: 20px; height: 20px; }
  .pk-ficha .pk-hecho__l { font-size: var(--pk-fs-xs); line-height: var(--pk-lh-xs); }
}

/* =========================================================================
   Ficha: descripción importada, recorte, ubicación sin mapa, similares
   (2026-09-08, pase visual contra funda.nl/detail)
   ========================================================================= */

/* La descripción la escribe el anunciante con sus propios `<h2>`/`<h3>` y
   `<hr>`. Medido en Vía Maris: doce subtítulos a 34 px/700, mayores que el
   «Descripción» de la página (24 px). Al pintar, cualquier encabezado
   importado es un subtítulo de 16/24 semi en tinta, y el filete un hilo. */
.pk-prosa h1, .pk-prosa h2, .pk-prosa h3, .pk-prosa h4, .pk-prosa h5, .pk-prosa h6 {
  margin: var(--pk-e5) 0 var(--pk-e2);
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-base);
  font-weight: var(--pk-fw-semi);
  letter-spacing: 0;
  color: var(--pk-tinta);
}
.pk-prosa > :first-child { margin-top: 0; }
.pk-prosa hr { height: 0; margin: var(--pk-e5) 0; border: 0; border-top: 1px solid var(--pk-n100); }
.pk-prosa ul, .pk-prosa ol { margin: 0 0 var(--pk-e4); padding-left: 1.25em; }
.pk-prosa li { margin: 0 0 var(--pk-e1); }
.pk-prosa strong, .pk-prosa b { font-weight: var(--pk-fw-semi); color: var(--pk-tinta); }
.pk-prosa a { color: var(--pk-primario-osc); text-decoration: underline; text-underline-offset: 2px; }
.pk-prosa img { max-width: 100%; height: auto; border-radius: var(--pk-r); }

/* Recorte a unas catorce líneas (14 × 27,2 = 381 px) con un degradado al
   blanco y el botón debajo, como «Lees de volledige omschrijving». Sin
   JavaScript no hay recorte: `es-recortada` la pone el script sólo cuando
   sobra texto. */
.pk-prosa-caja { position: relative; }
.pk-prosa-caja.es-recortada:not(.es-abierta) .pk-prosa {
  max-height: 381px;
  overflow: hidden;
}
.pk-prosa-caja.es-recortada:not(.es-abierta) .pk-prosa::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  height: 96px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--pk-n0) 100%);
  pointer-events: none;
}
.pk-prosa-caja.es-recortada:not(.es-abierta) { padding-bottom: 44px; }
.pk-prosa-caja.es-recortada:not(.es-abierta) .pk-prosa { position: static; }
.pk-prosa__mas {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-e2);
  min-height: 44px;
  margin-top: var(--pk-e2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pk-primario-osc);
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-base);
  font-weight: var(--pk-fw-semi);
  cursor: pointer;
}
.pk-prosa__mas::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--pk-t);
}
.pk-prosa__mas[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.pk-prosa__mas:hover { text-decoration: underline; text-underline-offset: 3px; }
.pk-prosa__mas:focus-visible { outline: 2px solid var(--pk-tinta); outline-offset: 2px; border-radius: var(--pk-r-sm); }
.pk-prosa-caja.es-recortada:not(.es-abierta) .pk-prosa__mas { position: absolute; left: 0; bottom: 0; margin: 0; }

/* Ubicación sin coordenadas: una tarjeta que explica y da la salida, en vez
   de un H2 sobre una línea de miga de pan. */
.pk-ubic-sin-mapa {
  display: flex;
  gap: var(--pk-e4);
  align-items: flex-start;
  padding: var(--pk-e5);
  border: 1px dashed var(--pk-n200);
  border-radius: var(--pk-r);
  background: var(--pk-n25, #fafbfc);
}
.pk-ubic-sin-mapa__ic { flex: none; color: var(--pk-txt-ter); }
.pk-ubic-sin-mapa__ic .pk-icono { width: 24px; height: 24px; }
.pk-ubic-sin-mapa__t { margin: 0 0 var(--pk-e1); font-weight: var(--pk-fw-semi); color: var(--pk-tinta); }
.pk-ubic-sin-mapa__x { margin: 0 0 var(--pk-e3); color: var(--pk-txt-sec); font-size: var(--pk-fs-sm); line-height: var(--pk-lh-sm); }
.pk-ubic-sin-mapa .pk-btn { display: inline-flex; gap: var(--pk-e2); }

/* Similares: tres por fila en escritorio, no cuatro con la cuarta huérfana en
   una segunda fila (medido: la «Destacada» sola abajo a la izquierda). En
   tableta, dos columnas, las cuatro. */
@media (min-width: 992px) {
  .pk-ficha .pk-bloque .pk-rejilla > .pk-tarjeta:nth-child(n+4) { display: none; }
}

/* La línea de contexto de la tarjeta compacta llevaba 22 px de sangría para
   alinearse bajo un icono de ubicación que ya no existe: quedaba colgada. */
.pk-tarjeta__ctx { margin-left: 0; }

/* Dos disparadores en el rail —mensaje y visita— como dos enlaces del mismo
   peso, uno debajo del otro, con el icono a la izquierda. */
.pk-contacto__disparo-form + .pk-contacto__disparo-form { margin-top: 0; }

/* Encabezado de la ficha: el precio iba a la derecha del título cuando cabía y
   debajo cuando el título ocupaba dos líneas —dos composiciones para la misma
   página según el ancho—. La referencia apila siempre: dirección, ciudad,
   precio, hechos. Aquí igual, y es además el orden que ya tenía el móvil. */
.pk-ficha .pk-ficha__enc { flex-direction: column; align-items: flex-start; gap: var(--pk-e3); }
.pk-ficha .pk-ficha__enc > div { min-width: 0; }
.pk-ficha .pk-precio-grande { margin: 0; }

/* Hechos como fila, no como caja. La referencia pone «64 m² wonen · 2
   slaapkamers · B energielabel» en una línea bajo el precio, con el icono al
   lado del dato; aquí era una caja con borde, fondo y cada hecho apilado en
   tres alturas (medido: 118 px en escritorio, 182 en móvil). Misma
   información, la mitad de altura, y el encabezado queda compacto:
   título, ubicación, precio, hechos. */
.pk-ficha .pk-hechos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-e2) var(--pk-e6);
  margin-top: var(--pk-e4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.pk-ficha .pk-hecho {
  flex-direction: row;
  align-items: center;
  gap: var(--pk-e2);
}
.pk-ficha .pk-hecho__ic { display: inline-flex; color: var(--pk-txt-ter); }
.pk-ficha .pk-hecho__ic .pk-icono { width: 20px; height: 20px; }
.pk-ficha .pk-hecho__v { font-size: var(--pk-fs-base); line-height: var(--pk-lh-base); font-weight: var(--pk-fw-semi); color: var(--pk-tinta); }
.pk-ficha .pk-hecho__l { font-size: var(--pk-fs-base); line-height: var(--pk-lh-base); color: var(--pk-txt-sec); }
@media (max-width: 767.98px) {
  .pk-ficha .pk-hechos { display: flex; gap: var(--pk-e1) var(--pk-e4); padding: 0; }
  .pk-ficha .pk-hecho__v, .pk-ficha .pk-hecho__l { font-size: var(--pk-fs-sm); line-height: var(--pk-lh-sm); }
  .pk-ficha .pk-hecho__ic .pk-icono { width: 18px; height: 18px; }
}

/* Encabezados importados seguidos («Dirección: …», «Tipo: …», «Precio: …»):
   entre uno y el siguiente sobra el aire de sección; 8 px, no 20. */
.pk-prosa h1 + h2, .pk-prosa h2 + h2, .pk-prosa h2 + h3, .pk-prosa h3 + h3, .pk-prosa h3 + h4, .pk-prosa h4 + h4 { margin-top: var(--pk-e2); }

/* =========================================================================
   Pase de pulido 2026-09-09 · resultados y ficha, mirados de verdad
   ========================================================================= */

/* Posiciones destacadas: con menos de cuatro, los huecos NO se quedan vacíos.
   Tres tarjetas de 243 px dejaban un tercio del marco en blanco a la derecha:
   la fila se leía incompleta, no compacta. Las columnas se reparten el marco
   hasta 329 px (tres tarjetas) y bajan solas a 243 con cuatro, que es
   exactamente lo que cabe: 4 × 243 + 3 × 16 = 1020. */
@media (min-width: 768px) {
  .pk-resultados .pk-posiciones__pista { grid-auto-columns: minmax(243px, 329px); }
}

/* En tableta (768-991) tres posiciones de 243 no caben en 744: la tercera se
   cortaba por la derecha. Se reparten el marco; con cuatro, la pista sigue
   desplazándose en horizontal como hasta ahora. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pk-resultados .pk-posiciones__pista { grid-auto-columns: minmax(200px, 1fr); }
}

/* Tarjeta amplia: el extracto vuelve a DOS lineas, en cursiva.
   El pase anterior lo subio a cuatro para llenar los 190 px de hueco entre el
   texto y la caja del anunciante, dando por supuesto que «los portales que
   usan esta anatomia llenan la columna». Medido en funda el 10-09-2026, la
   referencia hace justo lo contrario: una entradilla en CURSIVA de dos lineas
   (16/24, #4d4d4d) y el hueco se deja vacio a proposito. Su tarjeta mide
   986x508 con MENOS texto que la nuestra a 1020x527. El hueco no era un
   defecto que rellenar: era aire. */
@media (min-width: 992px) {
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__extracto { -webkit-line-clamp: 2; }
}

/* «Precio pendiente de confirmación» salía a 20/600, el tamaño del precio: una
   frase de cinco palabras a escala de titular. Baja a 16/24 en gris. */
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__precio.pk-tarjeta__precio--consultar {
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-base);
  color: var(--pk-txt-sec);
}

/* Publicación destacada: el MISMO sistema que la tarjeta amplia. Medido a
   1536: precio a 16 px (la tarjeta normal lo lleva a 20), hechos repartidos con
   `space-between` en 560 px (120 px de hueco entre dato y dato), sin borde ni
   radio cuando todas las demás tarjetas de la lista los tienen, y el mosaico
   con las esquinas inferiores redondeadas dentro de un cuerpo cuadrado. */
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo {
  padding-bottom: 0;
  margin-bottom: var(--pk-e1);
  border: 1px solid var(--pk-n100);
  border-radius: 10px;
  background: var(--pk-n0);
  overflow: hidden;
}
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo:hover { border-color: var(--pk-n200); }
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-tarjeta__medio { border-radius: 0; }
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--pk-e4);
  gap: 0;
}
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-tarjeta__precio {
  order: -1;
  margin: 0 0 var(--pk-e1);
  font-size: var(--pk-fs-lg);
  line-height: var(--pk-lh-lg);
  font-weight: var(--pk-fw-semi);
}
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-tarjeta__precio small { font-size: var(--pk-fs-sm); }
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-tarjeta__titulo {
  min-height: 0;
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-base);
}
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-tarjeta__ubic {
  margin-top: 2px;
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-base);
  font-weight: var(--pk-fw-normal);
  color: var(--pk-txt-sec);
}
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-datos {
  justify-content: flex-start;
  width: auto;
  max-width: none;
  min-height: 0;
  margin-top: var(--pk-e2);
  padding: 0;
  gap: var(--pk-e1) var(--pk-e4);
}
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-tarjeta__extracto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: var(--pk-e3) 0 0;
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-base);
  color: var(--pk-txt-sec);
}
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-anunciante {
  margin-top: var(--pk-e4);
  font-size: var(--pk-fs-sm);
  line-height: var(--pk-lh-sm);
}
@media (max-width: 767.98px) {
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-tarjeta__cuerpo { padding: var(--pk-e3) var(--pk-e4) var(--pk-e4); }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-tarjeta__extracto { font-size: var(--pk-fs-sm); line-height: var(--pk-lh-sm); }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-fav { top: 48px; right: 8px; }
}

/* Paginación: la página actual iba en rojo macizo, el color de las acciones,
   y no es una acción. Tinta. */
.pk-resultados .pk-paginacion [aria-current="page"] {
  color: var(--pk-n0);
  background: var(--pk-tinta);
}

/* Entre el final de la lista (fondo blanco de `.pk-app`) y el pie (fondo n25)
   asomaban 48 px del fondo del cuerpo (#f8f8f8): dos grises pegados que se
   leían como un hueco. En resultados y ficha el pie arranca donde acaba la
   vista; el aire lo pone el propio relleno inferior de la vista. */
body.pk-vista-resultados .pk-pie,
body.single-property .pk-pie { margin-top: 0; }

/* Tarjeta amplia en móvil: el precio primero y un paso mayor (18/26), como en
   escritorio y como en la referencia; iba tercero y al mismo tamaño que el
   título. Se retira además el relleno derecho de 40 px que reservaba sitio a
   un corazón que en resultados va sobre la foto. */
@media (max-width: 767.98px) {
  .pk-resultados .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    padding-right: 0;
    gap: 2px;
  }
  .pk-resultados .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__precio {
    order: -1;
    margin: 0 0 2px;
    font-size: 1.125rem;
    line-height: 1.625rem;
  }
  .pk-resultados .pk-tarjeta.pk-tarjeta--amplia .pk-tarjeta__precio small { font-size: var(--pk-fs-xs); }
}

/* =========================================================================
   Ficha · pase de pulido 2026-09-09
   ========================================================================= */

/* Características en tarjetas por grupo, como los «Kenmerken» de la
   referencia (medido: cada grupo en su caja con borde y radio, título del
   grupo a 16/600 en tinta, columna de etiquetas de ancho fijo en todas las
   cajas, filas de 41 px con filete claro). Aquí era una sola lista plana con
   versalitas grises: una hoja de especificaciones, no una ficha. La columna
   de etiquetas es la MISMA en todas las cajas (34 % del ancho), así que sigue
   habiendo un solo borde de valores en toda la sección. */
.pk-ficha .pk-grupos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pk-e4);
}
.pk-ficha .pk-grupo {
  display: grid;
  grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
  column-gap: var(--pk-e5);
  padding: var(--pk-e3) var(--pk-e5) var(--pk-e2);
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r);
  background: var(--pk-n0);
}
.pk-ficha .pk-grupo__t,
.pk-ficha .pk-grupo:first-child .pk-grupo__t {
  margin: 0 0 var(--pk-e1);
  padding-bottom: var(--pk-e2);
  border-bottom: 0;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
  letter-spacing: 0;
  text-transform: none;
}
.pk-ficha .pk-pares dt,
.pk-ficha .pk-pares dd {
  padding: 10px 0;
  border-bottom: 1px solid var(--pk-n100);
}
.pk-ficha .pk-grupo .pk-par:last-child dt,
.pk-ficha .pk-grupo .pk-par:last-child dd { border-bottom: 0; }

/* Similares: la misma tarjeta que la portada —sin línea de contexto y con tres
   datos— para que los precios queden a la misma altura en las tres. Medido:
   una tarjeta con la dirección a dos líneas y cinco datos bajaba su precio
   50 px respecto a la vecina. */
.pk-ficha #similares .pk-tarjeta__ctx { display: none; }
.pk-ficha #similares .pk-datos li:nth-child(n+4) { display: none; }
.pk-ficha #similares .pk-tarjeta__cuerpo { gap: 4px; }

/* La fila de hechos de la ficha partía «286 v² Terreno» a una segunda línea
   con 24 px de hueco entre hechos; con 20 px caben los cinco en una línea a
   700 px y, cuando no caben, la segunda línea conserva el mismo ritmo. */
@media (min-width: 992px) {
  .pk-ficha .pk-hechos { gap: var(--pk-e2) var(--pk-e5); }
}

/* Barra fija de la ficha en móvil: cabía en 390 por 15 px. A 375 (iPhone SE y
   mini, y cualquier marco con barra de desplazamiento) precio + WhatsApp +
   Contactar medían 380 en una caja de 343 y «Contactar» salía cortado por la
   derecha. Los botones pueden encoger y, por debajo de 420 px, WhatsApp queda
   en icono: es la marca más reconocible del país y no necesita rótulo al lado
   de «Contactar». */
@media (max-width: 767.98px) {
  .pk-movil-contacto__acciones { min-width: 0; }
  .pk-movil-contacto__acciones .pk-btn {
    flex: 1 1 0;
    min-width: 44px;
    padding-inline: var(--pk-e3);
    white-space: nowrap;
  }
  .pk-movil-contacto__precio { font-size: var(--pk-fs-base); }
}
@media (max-width: 419.98px) {
  .pk-movil-contacto__acciones .pk-btn--secundario { flex: 0 0 44px; padding-inline: 0; justify-content: center; }
  .pk-movil-contacto__acciones .pk-btn--secundario .pk-btn__txt { display: none; }
}

/* Entre 768 y 1024 la ficha es de una sola columna (el rail baja al final) y
   la barra fija se apagaba a 768: quien lee en tableta tenía que llegar al
   final de la página para poder contactar. La barra sigue mientras no exista
   el rail lateral, con el título visible porque cabe, como la barra de
   resumen de la referencia. */
@media (min-width: 768px) and (max-width: 1024.98px) {
  .pk-movil-contacto {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    min-height: 68px;
    padding: var(--pk-e3) var(--pk-e6);
    background: var(--pk-n0);
    border-top: 1px solid var(--pk-n200);
    box-shadow: var(--pk-s4);
  }
  .pk-movil-contacto__interior {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: var(--pk-e4);
    min-width: 0;
    max-width: 1020px;
    margin-inline: auto;
  }
  .pk-movil-contacto__ident { display: flex; flex-direction: column; min-width: 0; }
  .pk-movil-contacto__dir {
    overflow: hidden;
    color: var(--pk-tinta);
    font-size: var(--pk-fs-base);
    font-weight: var(--pk-fw-semi);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pk-movil-contacto__precio {
    color: var(--pk-txt-sec);
    font-size: var(--pk-fs-sm);
    font-weight: var(--pk-fw-normal);
    white-space: nowrap;
  }
  .pk-movil-contacto__acciones { display: flex; flex: none; gap: var(--pk-e2); }
  .pk-ficha { padding-bottom: 96px; }
}

/* Landing con ubicación fija (p. ej. Zona 10): la introducción se centraba en
   una columna estrecha (empezaba 200 px a la derecha del recuento) y, sin el
   botón de zonas, el selector de orden se quedaba pegado a la izquierda. La
   introducción se alinea con la página y el orden vuelve a la derecha. */
.pk-resultados .pk-resultados__intro { margin-inline: 0; }
.pk-resultados .pk-cabecera__acciones .pk-orden { margin-left: auto; }

/* Modo mapa en escritorio: el carril de 160 px reservado al anuncio seguía
   ocupando su columna aunque el hueco estuviera vacío (`data-pk-ad-state=
   "vacio"`), y el mapa quedaba con una franja blanca muerta a la derecha. Sin
   anuncio, el mapa ocupa todo el marco. */
@media (min-width: 1025px) {
  .pk-resultados .pk-split--mapa .pk-results-layout:has(> .pk-results-rail[data-pk-ad-state="vacio"]) { display: none; }
  .pk-resultados .pk-split--mapa:has(.pk-results-rail[data-pk-ad-state="vacio"]) { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Perfil público · pase de pulido 2026-09-09
   ========================================================================= */

/* Dos columnas en escritorio: la biografía, las zonas y el equipo a la
   izquierda; a la derecha la MISMA tarjeta de contacto de la ficha, adherida.
   Medido a 1536: la prosa ocupaba 580 px y la mitad derecha de la página
   estaba vacía; las acciones de contacto flotaban en una fila propia bajo la
   cabecera. Por debajo de 1025 la página vuelve a una columna, con las
   acciones en la cabecera y sin rail. */
.pk-perfil__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--pk-e8);
  align-items: start;
}
.pk-perfil__rail > .pk-contacto { position: sticky; top: var(--pk-e6); }
body.admin-bar .pk-perfil__rail > .pk-contacto { top: calc(32px + var(--pk-e6)); }
.pk-contacto--perfil .pk-contacto__tipo { margin: 0; }
.pk-contacto--perfil > .pk-h3 { margin: 0; }
.pk-contacto--perfil .pk-contacto__tel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-contacto__dato {
  display: flex;
  align-items: flex-start;
  gap: var(--pk-e2);
  margin: var(--pk-e4) 0 0;
  padding-top: var(--pk-e4);
  border-top: 1px solid var(--pk-n100);
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
  line-height: var(--pk-lh-sm);
}
.pk-contacto__dato .pk-icono { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--pk-txt-ter); }
@media (min-width: 1025px) {
  .pk-perfil-enc__acciones { display: none; }
}
@media (max-width: 1024.98px) {
  .pk-perfil__cols { grid-template-columns: minmax(0, 1fr); }
  .pk-perfil__rail { display: none; }
}

/* La rejilla de propiedades del perfil habla el mismo idioma que la portada:
   sin línea de contexto, tres datos y sin banda reservada bajo la dirección,
   para que los precios de una fila queden a la misma altura. */
body.single-houzez_agency .pk-rejilla .pk-tarjeta__ctx,
body.single-houzez_agent .pk-rejilla .pk-tarjeta__ctx { display: none; }
body.single-houzez_agency .pk-rejilla .pk-datos li:nth-child(n+4),
body.single-houzez_agent .pk-rejilla .pk-datos li:nth-child(n+4) { display: none; }
body.single-houzez_agency .pk-rejilla .pk-tarjeta__ubic span,
body.single-houzez_agent .pk-rejilla .pk-tarjeta__ubic span,
.pk-ficha #similares .pk-tarjeta__ubic span { min-height: 0; }
body.single-houzez_agency .pk-rejilla .pk-tarjeta__cuerpo,
body.single-houzez_agent .pk-rejilla .pk-tarjeta__cuerpo { gap: 4px; }

/* «Precio pendiente de confirmación» en la ficha salía a 24/600, la escala del
   precio: una frase de cinco palabras como titular. Un paso menos y en gris,
   en escritorio y en móvil. En la barra fija de móvil la misma frase, a 16 px
   y sin partir, no cabía junto a los dos botones: baja a 12/600 y puede
   partirse en dos líneas dentro de su hueco. */
.pk-ficha .pk-precio-grande.pk-precio-grande--consultar {
  font-size: var(--pk-fs-lg);
  line-height: var(--pk-lh-lg);
  font-weight: var(--pk-fw-semi);
  color: var(--pk-txt-sec);
}
.pk-movil-contacto__precio.pk-movil-contacto__precio--consultar {
  max-width: 110px;
  font-size: var(--pk-fs-xs);
  line-height: 1.25;
  font-weight: var(--pk-fw-semi);
  color: var(--pk-txt-sec);
  white-space: normal;
}

/* «Enviar consulta» volvía a pintarse en rojo macizo: la capa de sitio declara
   `body.pk-sitio button[type="submit"]` en rojo con especificidad (0,1,2) y le
   ganaba a `.pk-btn--secundario` (0,1,0), así que con el formulario abierto el
   rail tenía DOS rellenos rojos —justo lo que R-06 retiró—. Medido en móvil
   con el formulario abierto. Se fija en la propia tarjeta de contacto. */
body.pk-sitio .pk-contacto__form button[type="submit"].pk-btn--secundario {
  background: var(--pk-n0);
  color: var(--pk-tinta);
  border-color: var(--pk-n200);
  box-shadow: var(--pk-s1);
}
body.pk-sitio .pk-contacto__form button[type="submit"].pk-btn--secundario:hover,
body.pk-sitio .pk-contacto__form button[type="submit"].pk-btn--secundario:focus-visible {
  background: var(--pk-n25);
  color: var(--pk-tinta);
  border-color: var(--pk-n400);
}

/* El título de la publicación destacada partía a 567 px («… Amueblado y /
   equipado») dentro de un cuerpo de 1018: el límite de la tarjeta compacta.
   Hasta 760 px, que es una línea larga pero legible. */
.pk-resultados .pk-rejilla > .pk-tarjeta.pk-promo .pk-tarjeta__titulo { max-width: 760px; }

/* Con cinco hechos, la fila seguía partiendo el último («286 v² Terreno») a
   una segunda línea: un huérfano. Con cinco o más, retícula de tres columnas
   alineadas (3 + 2), que se lee como composición y no como desbordamiento. */
@media (min-width: 992px) {
  .pk-ficha .pk-hechos:has(> :nth-child(5)) {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: var(--pk-e8);
    row-gap: var(--pk-e2);
  }
}

/* «45 propiedades» y «en Guatemala» en una sola línea (pedido del propietario,
   2026-09-09): el recuento en tinta y semi, y el lugar a continuación en gris
   al mismo cuerpo. Partido en dos líneas se leía como dos datos. Es la
   cabecera de `listado.php`: vale para `/propiedades/`, las veinte landings,
   el estado de cero resultados y cada repintado AJAX. Si el lugar es largo,
   salta de línea entero. */
.pk-resultados .pk-cabecera__texto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .35em;
}
.pk-resultados .pk-cabecera__texto .pk-sub {
  margin: 0;
  font-size: var(--pk-fs-lg);
  line-height: 28px;
  font-weight: var(--pk-fw-normal);
  color: var(--pk-txt-sec);
}
@media (max-width: 767.98px) {
  .pk-resultados .pk-cabecera__texto .pk-sub { font-size: var(--pk-fs-lg); line-height: 26px; }
}

/* =========================================================================
   Acerca de Propeka (`propeka-acerca.php`).
   Poco estilo propio a proposito: la pagina reutiliza `.pk-seccion`,
   `.pk-seccion__titulo`, `.pk-explica__pasos` y `.pk-btn`, que ya existen.
   Solo se define lo que no tenia componente.
   ========================================================================= */
.pk-acerca__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
  line-height: 26px;
}

.pk-acerca__lista li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}

.pk-acerca__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pk-primario);
}

.pk-acerca__intro,
.pk-acerca__cierre {
  margin: 0 0 12px;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  line-height: 26px;
}

.pk-acerca__cierre { margin: 16px 0 0; }
.pk-acerca__cierre a { color: var(--pk-enlace); }
/* El correo de /contacto/ es un `mailto:` pero salía en el color del texto y
   sin subrayado: no se distinguía como enlace. */
.pk-acerca__lista a { color: var(--pk-enlace); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   Documentos legales (`template/propeka-documento.php`)
   Mismo encabezado que directorio y acerca; el cuerpo es `.pk-prosa` a ancho
   de lectura y, al lado, la lista de documentos legales. Los `h2` del
   contenido bajan a un paso por encima del cuerpo: antes medían lo mismo que
   el `h1` de la página.
   ========================================================================= */
.pk-documento__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--pk-e10);
  align-items: start;
  padding-bottom: var(--pk-e10);
}
/* El cuerpo arrancaba a 16 px de la entradilla (solo el relleno de la
   cabecera): el primer `h2` de «Ayuda» quedaba pegado a ella. Mismo paso
   que acerca y contacto tras su cabecera (medido el 22-09-2026 a 1440). */
.pk-dir-cab + .pk-documento__cols { padding-top: var(--pk-e5); }
.pk-documento__cuerpo { max-width: 68ch; }
.pk-documento .pk-prosa { color: var(--pk-txt); }
.pk-documento .pk-prosa h2 {
  margin: var(--pk-e8) 0 var(--pk-e2);
  color: var(--pk-tinta);
  font-size: var(--pk-fs-lg);
  line-height: 1.3;
}
.pk-documento .pk-prosa > h2:first-child { margin-top: 0; }
.pk-documento .pk-prosa a { color: var(--pk-enlace); }
.pk-documento__nav {
  position: sticky;
  top: var(--pk-e6);
  padding: var(--pk-e5);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r-lg);
}
.pk-documento__nav-t {
  margin: 0 0 var(--pk-e2);
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
}
.pk-documento__nav ul { margin: 0; padding: 0; list-style: none; }
.pk-documento__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--pk-enlace);
}
.pk-documento__nav a:hover { text-decoration: underline; text-underline-offset: 2px; }
.pk-documento__nav a[aria-current="page"] { color: var(--pk-tinta); font-weight: var(--pk-fw-semi); }
.pk-documento__nav-sep { margin-top: var(--pk-e2); padding-top: var(--pk-e2); border-top: 1px solid var(--pk-n100); }

@media (max-width: 1023.98px) {
  .pk-documento__cols { grid-template-columns: 1fr; gap: var(--pk-e8); }
  .pk-documento__nav { position: static; }
}

/*
 * «Que no hace Propeka» va sobre fondo suave y con filete rojo: es la
 * diferencia que sostiene el producto —no intermedia, no cobra comision— y
 * la pagina anterior afirmaba justo lo contrario. Merece leerse aparte.
 */
.pk-acerca__no {
  padding: var(--pk-e6);
  border-left: 3px solid var(--pk-primario);
  border-radius: var(--pk-r-sm);
  background: var(--pk-primario-suave);
}

.pk-acerca__botones { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: var(--pk-e3); }

/* Etiqueta de una propiedad que ya no está disponible: gris, no verde. El verde
   es el tono de «incluido» en toda la interfaz y «Vendida» no es eso. */
.pk-badge--inactivo { background: var(--pk-n300); color: var(--pk-tinta); }

/* Ficha sin fotografías: caja baja con el aviso escrito, no un 4:3 vacío. */
.pk-sinimg--nota {
  flex-direction: column;
  gap: var(--pk-e2);
  aspect-ratio: auto;
  min-height: 160px;
  margin-top: var(--pk-e4);
  border-radius: var(--pk-r-lg);
  padding: var(--pk-e6) var(--pk-e4);
  text-align: center;
}
.pk-sinimg__tx { margin: 0; color: var(--pk-txt-sec); font-size: var(--pk-fs-sm); }

/* =========================================================================
   Pasada 2026-09-22 · ficha de propiedad
   ========================================================================= */

/* Las listas que el anunciante escribe en la descripción («217 m² de
   construcción, 3 dormitorios, Sala, Comedor…») salían como una columna de
   catorce renglones sin viñeta: 430 px de alto a 1440 para palabras sueltas.
   Con viñeta se escanean; a partir de siete elementos van a dos columnas. */
.pk-ficha .pk-prosa ul { list-style: disc; }
.pk-ficha .pk-prosa ol { list-style: decimal; }
.pk-ficha .pk-prosa li::marker { color: var(--pk-n400); }
@media (min-width: 768px) {
  .pk-ficha .pk-prosa ul:has(> li:nth-child(7)) { columns: 2; column-gap: var(--pk-e8); }
  .pk-ficha .pk-prosa ul:has(> li:nth-child(7)) > li { break-inside: avoid; }
}

/* «Propiedades similares» usa la misma tarjeta que la portada aprobada y debe
   hablar su idioma: sin línea de contexto y con tres datos. Con contexto en
   unas fichas y cinco datos en otras, el precio de la fila caía a 657 y
   680 px y los datos de la tercera tarjeta partían en dos renglones. */
.pk-ficha .pk-bloque .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-tarjeta__ctx { display: none; }
.pk-ficha .pk-bloque .pk-rejilla > .pk-tarjeta:not(.pk-promo) .pk-datos li:nth-child(n+4) { display: none; }

/* =========================================================================
   Pasada 2026-09-22 · Acerca y Contacto: un solo ritmo
   =========================================================================
   Las dos páginas heredaban dos `.pk-seccion` que no se conocen: la del panel
   (relleno 20 y filete inferior) y la de la portada (48 arriba). Sumadas
   daban 64–85 px entre secciones, filetes en unas sí y en otras no, el título
   pegado a su texto (0 px) y la última llamada a 20 px de «Búsquedas
   populares». Además el texto corría a todo el contenedor: 120 caracteres
   por línea a 1440. */
.pk-acerca { padding-bottom: var(--pk-e16); }
.pk-acerca .pk-dir-cab { padding-bottom: var(--pk-e4); }
.pk-acerca .pk-seccion,
.pk-acerca .pk-seccion:first-child { margin-top: 0; padding: var(--pk-e10) 0 0; border-bottom: 0; }
.pk-acerca .pk-seccion__titulo { margin-bottom: var(--pk-e3); }
.pk-acerca .pk-dir-cab__sub,
.pk-acerca .pk-acerca__intro,
.pk-acerca .pk-acerca__lista { max-width: 68ch; }
.pk-acerca .pk-seccion.pk-acerca__no { margin-top: var(--pk-e10); padding: var(--pk-e8); }
.pk-acerca .pk-seccion.pk-acerca__no .pk-acerca__cierre { max-width: 68ch; }

/* Contacto: las dos respuestas a «¿a quién escribo?» van juntas y a la par.
   Casi siempre la respuesta es la de la izquierda —quien publica—, por eso
   conserva el fondo suave y el filete rojo. */
.pk-contactar__par { display: grid; gap: var(--pk-e6); margin-top: var(--pk-e10); }
.pk-contactar__par > .pk-seccion,
.pk-contactar__par > .pk-seccion:first-child,
.pk-contactar__par > .pk-seccion.pk-acerca__no { margin: 0; padding: var(--pk-e8); border-radius: var(--pk-r-lg); }
.pk-contactar__par > .pk-seccion:not(.pk-acerca__no) { border: 1px solid var(--pk-n200); background: var(--pk-n0); }
.pk-contactar__par .pk-acerca__botones { margin-top: var(--pk-e5); }
@media (min-width: 992px) {
  .pk-contactar__par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .pk-acerca { padding-bottom: var(--pk-e12); }
  .pk-acerca .pk-seccion,
  .pk-acerca .pk-seccion:first-child { padding-top: var(--pk-e8); }
  .pk-acerca .pk-seccion.pk-acerca__no,
  .pk-contactar__par > .pk-seccion,
  .pk-contactar__par > .pk-seccion:first-child,
  .pk-contactar__par > .pk-seccion.pk-acerca__no { padding: var(--pk-e5); }
  .pk-contactar__par { gap: var(--pk-e4); margin-top: var(--pk-e8); }
}

/* Píldoras de precio del mapa de resultados (sustituyen al pin azul de
   Leaflet). El ancla del icono es su esquina: la píldora se centra encima
   del punto y el piquito lo señala. */
.leaflet-marker-icon.pk-pin { width: auto !important; height: auto !important; background: none; border: 0; }
.pk-pin__precio {
  position: absolute;
  bottom: 8px;
  left: 0;
  transform: translateX(-50%);
  padding: 4px 10px;
  border: 1px solid var(--pk-n200);
  border-radius: 999px;
  background: var(--pk-n0);
  box-shadow: 0 2px 6px rgba(14, 25, 45, .22);
  color: var(--pk-tinta);
  font: var(--pk-fw-semi) 13px/18px var(--pk-fuente, inherit);
  white-space: nowrap;
  transition: background var(--pk-t), color var(--pk-t), border-color var(--pk-t);
}
.pk-pin__precio::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--pk-n200);
  border-bottom: 1px solid var(--pk-n200);
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.pk-pin:hover .pk-pin__precio,
.pk-pin:focus-visible .pk-pin__precio,
.pk-pin.leaflet-marker-icon:focus .pk-pin__precio {
  border-color: var(--pk-primario);
  background: var(--pk-primario);
  color: var(--pk-n0);
}
.pk-pin:hover { z-index: 1000 !important; }
/* Globo del mapa: el de Leaflet salía sin aire —texto a 0 px del borde,
   porque el `main.css` de Houzez fija `.leaflet-popup-content { margin: 0
   !important }`— y con el enlace en el azul de la librería. El aire va como
   relleno, que esa regla no toca. */
body .leaflet-container .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--pk-r); box-shadow: 0 8px 24px rgba(14, 25, 45, .22); }
body .leaflet-container .leaflet-popup-content {
  box-sizing: content-box;
  padding: var(--pk-e3) 36px 14px var(--pk-e4);
  color: var(--pk-tinta);
  font: var(--pk-fw-normal) var(--pk-fs-sm)/20px var(--pk-fuente);
}
body .leaflet-container .leaflet-popup-content strong { display: block; margin-bottom: 2px; font-size: var(--pk-fs-base); font-weight: var(--pk-fw-semi); }
body .leaflet-container .leaflet-popup-content br { display: none; }
body .leaflet-container .leaflet-popup-content a { color: var(--pk-enlace); }
body .leaflet-container .leaflet-popup-content a:hover { color: var(--pk-primario-osc); text-decoration: underline; }
body .leaflet-container a.leaflet-popup-close-button { top: 8px; right: 8px; width: 24px; height: 24px; font: 20px/24px Arial, sans-serif; color: var(--pk-txt-sec); }

/* Barra de resultados entre 768 y 1320: «Mapa» y «Guardar búsqueda» se
   quedaban en icono suelto dentro de cajas de 100 y 154 px —más aire que
   contenido, y un corazón a secas no dice «guardar búsqueda»—. En la fila
   principal hay sitio para la etiqueta corta; el nombre accesible sigue
   siendo el `aria-label` completo. */
@media (min-width: 768px) and (max-width: 1320px) {
  .pk-barra .js-pk-mapa .pk-btn__txt { display: inline; }
  .pk-barra .js-pk-guardar-busqueda { min-width: 0; }
  .pk-barra .js-pk-guardar-busqueda::after { content: "Guardar"; }
}

/* En la tarjeta amplia el corazón va SOBRE la foto; la regla de resultados
   (`background: transparent`) es de cuando iba junto al texto. Sin disco era
   un trazo fino de 20 px perdido en la fotografía. */
@media (min-width: 768px) {
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-fav {
    color: var(--pk-tinta);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--pk-s1);
  }
  .pk-resultados .pk-rejilla > .pk-tarjeta.pk-tarjeta--amplia .pk-fav:hover { color: var(--pk-primario); background: var(--pk-n0); }
}

/* De 992 a 1024 el marco mide 984 px y la retícula de escritorio (contenido
   + rail de 300) cabe con holgura; la columna única dejaba el texto a 600 px
   y media pantalla en blanco, con el contacto al final de la página. En esa
   franja vuelve el rail fijo y se apaga la barra inferior; por debajo de 992
   sigue el patrón de tableta. */
@media (min-width: 992px) and (max-width: 1024.98px) {
  .pk-ficha__cols { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  .pk-ficha__rail > .pk-contacto { position: sticky; }
  .pk-movil-contacto { display: none; }
}
/* La reserva del pie para la barra fija sólo existe donde la barra se ve:
   el elemento está en el DOM a todos los anchos y `:has()` la aplicaba
   también en escritorio, 84 px de pie vacío bajo el copyright. */
@media (min-width: 992px) {
  body:has(.pk-movil-contacto) .pk-pie { padding-bottom: 0; }
}
/* Migas entre 600 y 860: hay sitio para dos renglones, así que los niveles
   intermedios van enteros en vez de cortados a 14ch («Propiedades e…»). */
@media (min-width: 600px) and (max-width: 860px) {
  .pk-ficha .pk-migas li:not(:first-child):not(:last-child) a { max-width: none; }
}

/* Galería de 641 a 900: la foto principal a todo el ancho y dos miniaturas
   debajo sumaban 824 px a 768 —título y precio quedaban fuera de una
   pantalla de 1024 de alto—. Mosaico compacto: principal a dos filas y dos
   miniaturas apiladas, ~360 px, las mismas tres fotos. */
@media (min-width: 641px) and (max-width: 900px) {
  .pk-galeria.pk-galeria--mosaico,
  .pk-galeria.pk-galeria--vertical {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 2 / 1;
  }
  .pk-galeria .pk-galeria__pieza--principal { grid-column: auto; grid-row: span 2; }
  .pk-galeria--mosaico .pk-galeria__pieza img,
  .pk-galeria--vertical .pk-galeria__pieza img { aspect-ratio: auto; height: 100%; }
}
/* «Ver las N fotos» cuelga ahora de la galería (antes de la quinta pieza). */
.pk-galeria { position: relative; }
.pk-galeria > .pk-galeria__todas { z-index: 2; }
/* Visor de fotos: a 0,96 la página seguía asomando detrás —migas, precio y
   el botón rojo de contacto como fantasmas alrededor de la foto—. Fondo
   pleno: en el visor sólo existe la fotografía. */
.pk-visor { background: rgb(8, 18, 28); }

/* Cero resultados: la recuperación («Quitar el filtro de precio · 34
   propiedades») heredaba el gris de etiqueta de la ficha técnica y se leía
   deshabilitada, cuando es la acción más útil de la página. */
.pk-vacio__sug a.pk-par__k { color: var(--pk-enlace); font-weight: var(--pk-fw-semi); }
.pk-vacio__sug a.pk-par__k:hover,
.pk-vacio__sug a.pk-par__k:focus-visible { color: var(--pk-primario-osc); text-decoration: underline; text-underline-offset: 2px; }
.pk-vacio > .pk-h2 + .pk-sub { margin-top: var(--pk-e2); }

/* «Todos los filtros» mide 152 px fijos; con la cifra de filtros activos
   (icono 18 + texto 107 + cifra 20 + huecos + relleno = 193) el icono
   cruzaba el borde izquierdo y la cifra el derecho. Con cifra, el botón
   toma su ancho; los desplegables de la fila absorben la diferencia. */
.pk-barra .js-pk-abrir-hoja:has(.pk-cuenta-pip) { flex: 0 0 auto; }
/* El precio activo toma el ancho de su cifra abreviada; si la fila no da
   más, es él quien cede (hasta sus 100 px de siempre), nunca la fila. */
.pk-resultados .pk-barra__fila--filtros .pk-desplegable--precio:has(.pk-desplegable__disparo--activo) { flex: 0 1 auto; min-width: 100px; }
.pk-barra .pk-desplegable--precio .pk-desplegable__disparo--activo .pk-desplegable__etq { max-width: 24ch; }
/* Con cifra de filtros activos, «Filtros ②» dice lo mismo que «Todos los
   filtros ②» y deja sitio a las etiquetas activas de la fila. */
.pk-barra .js-pk-abrir-hoja:has(.pk-cuenta-pip) .pk-btn__txt--largo { display: none; }
.pk-barra .js-pk-abrir-hoja:has(.pk-cuenta-pip) .pk-btn__txt--corto { display: inline; }
/* En la barra de tableta hay sitio: «Precio pendiente de confirmación» no se
   encajona a 110 px en dos renglones bajo un título de una línea. */
@media (min-width: 768px) {
  .pk-movil-contacto__precio.pk-movil-contacto__precio--consultar { max-width: none; white-space: nowrap; }
}
/* El nombre del anunciante en la tarjeta de contacto es un enlace suelto,
   no una palabra dentro de una frase: 168×22. Llega a 24 sin moverse. */
.pk-contacto .pk-h3 > a { display: inline-flex; align-items: center; min-height: 24px; }

/* =========================================================================
   Mapas con el aire de funda (2026-09-22, petición del propietario)
   =========================================================================
   Sin cambiar de proveedor (sigue OpenStreetMap, sin clave): el teselado
   estándar de OSM es de colores saturados —carreteras naranjas y rosas,
   parques verde intenso— y competía con las píldoras de precio. Se apaga a
   un gris claro con el agua y el verde aún reconocibles, como el mapa de
   funda, y los controles de Leaflet pasan al sistema de la casa. */
body .leaflet-container { background: #eef1f4; font-family: var(--pk-fuente); }
body .leaflet-container .leaflet-tile-pane { filter: saturate(.22) brightness(1.1) contrast(.86); }
body .leaflet-container .leaflet-bar {
  overflow: hidden;
  border: 0;
  border-radius: var(--pk-r);
  box-shadow: 0 2px 8px rgba(14, 25, 45, .18);
}
body .leaflet-container .leaflet-bar a {
  width: 40px;
  height: 40px;
  border-bottom: 1px solid var(--pk-n200);
  color: var(--pk-tinta);
  font: 400 22px/40px var(--pk-fuente);
}
body .leaflet-container .leaflet-bar a:last-child { border-bottom: 0; }
body .leaflet-container .leaflet-bar a:hover { background: var(--pk-n100); color: var(--pk-tinta); }
body .leaflet-container .leaflet-control-attribution {
  padding: 1px 6px;
  border-radius: 4px 0 0 0;
  background: rgba(255, 255, 255, .8);
  color: var(--pk-txt-ter);
  font-size: 11px;
}
body .leaflet-container .leaflet-control-attribution a { color: var(--pk-txt-sec); }