/* =========================================================================
   Propeka — Capa de sitio
   =========================================================================
   `propeka.css` sólo alcanza a las vistas propias de Propeka, porque todo va
   encapsulado en `.pk-app`. El resto del sitio —cabecera, pie, acceso,
   recuperación de contraseña, panel de usuario, favoritas, búsquedas
   guardadas, mis propiedades, perfil, publicar, contacto y 404— lo sirven
   plantillas de Houzez y quedaba con el aspecto de la demo del tema.

   Esta hoja aplica el MISMO sistema de diseño a esas superficies sin tocar un
   solo archivo del tema padre: sólo redefine presentación sobre las clases que
   Houzez ya imprime.

   Reglas de convivencia:
     - se apoya en los tokens de `propeka.css`, declarados en :root;
     - no usa `!important` salvo donde el padre lo usa primero;
     - no reescribe la estructura del DOM del padre;
     - si Houzez añade clases opcionales, los componentes siguen funcionando.

   Orden: 1 base · 2 cabecera · 3 pie · 4 formularios · 5 acceso ·
          6 panel de usuario · 7 tablas y tarjetas de panel · 8 estados ·
          9 404 · 10 utilidades
   ========================================================================= */

/* --- 1. Base ------------------------------------------------------------ */

body.pk-sitio {
  color: var(--pk-txt);
  -webkit-font-smoothing: antialiased;
}

/* Tipografía de marca.
   Staging renderizaba TODO el sitio en «Plus Jakarta Sans»: `body` y `h1`
   computaban esa familia y Open Sans ni siquiera llegaba a cargarse, pese a que
   `CLAUDE.md` sec. 6 fija Open Sans como tipografía de Propeka. Venía de los ajustes
   de Houzez, que viven en la base de datos y no viajan en el backport, así que
   la familia se fija aquí. Ver DECISIONS D-03.

   El selector enumera los elementos que Houzez y Elementor pintan con su propia
   familia y mayor especificidad que un `body` a secas. No se usa `!important`:
   basta con igualar el terreno. */
/*
 * D-3 · Plus Jakarta Sans still reached a few elements this list missed.
 *
 * Measured: `houzez-style-inline-css` (Houzez's own customizer-generated
 * `<style>` block, still carrying the demo's typography choice) sets
 * `font-family: Plus Jakarta Sans` DIRECTLY on `.main-nav`, `.dropdown-menu`,
 * `.login-register`, `.btn.btn-create-listing`, `.logged-in-nav` and
 * `.btn-phone-number`. A direct declaration on an element always wins over
 * whatever it would otherwise INHERIT from `body`, regardless of specificity
 * — inheritance is only a fallback for elements no rule targets at all. Our
 * list below only enumerated tag selectors (`a`, `span`, `p`…), which is why
 * leaf text nodes like `<a class="nav-link">` already computed Open Sans
 * correctly — matched by `body.pk-sitio a` — while their WRAPPING `<nav>` and
 * `<ul>` elements, matched by nothing of ours, kept Houzez's direct rule.
 *
 * No visible text actually rendered in the wrong font — every element that
 * holds text matched a tag selector already — but an ancestor still
 * disagreeing with its own descendants is exactly the kind of drift that
 * resurfaces the moment new markup is added inside it. Added the six classes
 * Houzez's rule names, so `body.pk-sitio .main-nav` (0,2,0) now out-specifies
 * the bare `.main-nav` (0,1,0) it was losing to.
 */
body.pk-sitio,
body.pk-sitio .elementor-widget-container,
body.pk-sitio h1, body.pk-sitio h2, body.pk-sitio h3,
body.pk-sitio h4, body.pk-sitio h5, body.pk-sitio h6,
body.pk-sitio p, body.pk-sitio a, body.pk-sitio span, body.pk-sitio li,
body.pk-sitio button, body.pk-sitio input, body.pk-sitio select,
body.pk-sitio textarea, body.pk-sitio label,
body.pk-sitio .main-nav, body.pk-sitio .dropdown-menu,
body.pk-sitio .login-register, body.pk-sitio .btn.btn-create-listing,
body.pk-sitio .logged-in-nav, body.pk-sitio .btn-phone-number {
  font-family: var(--pk-fuente);
}

/* Base tipográfica: 16/24. La referencia concentra el 87 % de su texto en este
   paso; aquí la base eran 15 px y la interlínea un ratio suelto, lo que producía
   siete tratamientos distintos del mismo tamaño. Ver DECISIONS D-04 y D-05. */
body.pk-sitio {
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-base);
}

/* Foco visible en TODO el sitio, no sólo en las vistas de Propeka.
   Houzez elimina el contorno en varios controles; aquí se restituye. */
body.pk-sitio :focus-visible {
  outline: 2px solid var(--pk-navy);
  outline-offset: 2px;
  border-radius: var(--pk-r-sm);
}
/* Houzez (`style-ltr.css`) declara `button:focus { outline: none }` y la regla
   que había aquí sólo devolvía el COLOR del anillo, no su ESTILO, así que
   ningún `button` del sitio pintaba anillo de foco de teclado: medido con Tab
   sobre el plegador de la barra lateral y sobre los disparadores del pie,
   `outline-style` seguía en `none` aunque `:focus-visible` sí coincidía.

   Sólo enlaces y botones. Los campos de formulario NO se tocan: su foco ya
   está resuelto más abajo con borde `--pk-navy` y resplandor `--pk-foco`, y
   ahí `outline: none` es deliberado, no un descuido. Añadirles contorno les
   pondría dos anillos. */
body.pk-sitio a:focus-visible,
body.pk-sitio button:focus-visible,
body.pk-sitio .menu-btn:focus-visible {
  outline: 2px solid var(--pk-navy);
  outline-offset: 2px;
}
/* …y aun así no bastaba: `main.css` del padre remata `button:focus` y
   `.btn:focus` con `outline: none !important`, y contra un !important sólo
   vale otro. Medido con Tab real el 21-09-2026, como visitante, a 390 y 1440:
   `outline-style: none` con `:focus-visible` coincidiendo en el botón del
   menú, el de la cuenta, «Buscar» de la portada, los corazones de favorito y
   los enlaces `.btn` de la cabecera. Los enlaces normales sí pintaban anillo.

   La respuesta se escribe con `:where()` para pesar lo mismo que la regla del
   padre (0-1-1) o menos: gana por venir después en el documento, y cualquier
   anillo propio de un componente con más peso —el visor de fotos lo pinta
   blanco sobre negro— sigue mandando siempre que también sea !important. */
:where(body.pk-sitio) button:focus-visible,
:where(body.pk-sitio) .btn:focus-visible {
  outline: 2px solid var(--pk-navy) !important;
  outline-offset: 2px !important;
}

/* Ninguna página debe desplazarse en horizontal. */
body.pk-sitio { overflow-x: clip; }

/* --- 1b. Sistema de contenedor ÚNICO ------------------------------------
   El sitio servía cuatro anchos de contenido simultáneos (1164, 1180, 1140 y
   1120 px) procedentes de Houzez, de Elementor y de sus secciones internas,
   con cuatro bordes izquierdos distintos. El resultado era que cada sección
   empezaba en un sitio y la página parecía descuadrada al desplazarse.

   Aquí las TRES familias de contenedor adoptan el mismo ancho y el mismo
   relleno lateral. Se actúa sobre el contenedor, nunca sobre el contenido, así
   que ni Houzez ni Elementor pierden su comportamiento interno.
   ------------------------------------------------------------------------ */

/*
 * `!important` justificado y acotado.
 *
 * El ancho de estos contenedores lo fijan reglas EN LÍNEA que se imprimen
 * después de esta hoja: el CSS por elemento de Elementor
 * (`.home .elementor-element-7de4c5ee > .elementor-container{max-width:1140px}`)
 * y un snippet heredado (`.container{max-width:1210px}` a partir de 1200 px).
 * No existe forma update-safe de ganarles desde una hoja enlazada sin subir la
 * especificidad de manera indefinida, porque cada sección de Elementor genera
 * su propio selector con su propio identificador.
 *
 * Se marca ÚNICAMENTE el ancho y el relleno del contenedor. Ni el contenido, ni
 * las columnas, ni el comportamiento interno de Elementor se tocan.
 */
body.pk-sitio .container,
body.pk-sitio .elementor-section > .elementor-container,
:where(body.pk-sitio) .pk-contenedor {
  width: 100% !important;
  max-width: var(--pk-ancho) !important;
  margin-inline: auto !important;
  padding-inline: var(--pk-pad) !important;
}

/* Las secciones internas de Elementor viven DENTRO de un contenedor que ya
   está acotado: si volvieran a aplicar su propio máximo y su propio relleno se
   produciría el doble margen que estrechaba el contenido de forma escalonada. */
body.pk-sitio .elementor-inner-section > .elementor-container {
  max-width: 100% !important;
  padding-inline: 0 !important;
}

/* Houzez y Elementor usan cunas negativas para compensar el relleno de sus
   columnas. Con el contenedor unificado esas cunas desbordarían por los lados. */
body.pk-sitio .elementor-section.elementor-section-boxed > .elementor-container { margin-inline: auto; }

/*
 * Borde izquierdo unico entre cabecera y contenido.
 *
 * Elementor separa sus columnas con relleno propio (la «gap» de columna), que
 * se aplica tambien en los lados EXTERIORES de la fila. El resultado medido:
 * el logo de la cabecera empieza en x=64 y el contenido empieza en x=70 en la
 * portada y en x=74 en Contacto, mientras que las plantillas propias de
 * Propeka —resultados y ficha— empiezan exactamente en 64. Es decir, las dos
 * paginas construidas con Elementor eran las unicas desalineadas, cada una
 * con un desfase distinto.
 *
 * Se anula el relleno horizontal solo en la primera y la ultima columna de
 * cada fila, de modo que los bordes exteriores coincidan con el contenedor y
 * las separaciones INTERIORES entre columnas se conserven intactas. Cubre
 * tanto las secciones clasicas como los contenedores flex de Elementor 4.
 */
body.pk-sitio .elementor-section > .elementor-container > .elementor-column:first-child > .elementor-element-populated,
body.pk-sitio .e-con > .e-con-inner > .e-child:first-child {
  padding-left: 0;
}
body.pk-sitio .elementor-section > .elementor-container > .elementor-column:last-child > .elementor-element-populated,
body.pk-sitio .e-con > .e-con-inner > .e-child:last-child {
  padding-right: 0;
}
/*
 * Contraste de dos componentes nativos de Houzez que aparecen en la portada.
 *
 * Medido sobre la pagina real:
 *   - `.label-status`  rojo #ed0028 sobre rosa palido #fde8ec = 3.87:1
 *   - `.btn-grey-outlined` («Close») gris #8b9898 sobre blanco = 2.98:1
 * Ambos por debajo del 4.5:1 exigido para texto normal. Se corrigen aqui, en
 * la capa de sitio del tema hijo, y no tocando el tema padre, para que
 * sobrevivan a las actualizaciones de Houzez.
 */
/* La etiqueta de estado es una «pastilla» rosa palido con texto rojo, un
   diseno deliberado que llega desde un snippet propio del sitio
   (`.home .item-listing-wrap .label`, especificidad 0-3-0). No se cambia el
   diseno: basta con oscurecer el texto de #ed0028 a #c50021, que sobre ese
   mismo rosa pasa de 3.87:1 a 5.28:1. La regla se escribe con 0-3-1 para
   ganar al snippet sin recurrir a `!important`. */
body.pk-sitio .label.label-status,
body.pk-sitio a.label.label-status {
  color: var(--pk-primario-osc);
}
body.pk-sitio .btn-grey-outlined {
  color: var(--pk-txt-sec);
  border-color: var(--pk-n200);
}

/*
 * Texto a varias columnas: una sola columna en pantallas estrechas.
 *
 * En «Acerca de nosotros» un widget de texto lleva `column-count: 2` fijado
 * desde el editor, sin punto de corte. A 390 px eso produce dos columnas de
 * 159 px —unos 20 caracteres por linea— con el parrafo saltando de una a otra
 * a mitad de frase. Es ilegible en movil.
 *
 * El umbral sale de la medida, no del gusto: una columna de texto necesita
 * unos 320 px para no romper la lectura, de modo que dos columnas mas su
 * separacion exigen un contenedor de ~660 px, es decir un viewport de ~724.
 * Por debajo de 768 px se fuerza columna unica. La regla solo tiene efecto
 * donde ya habia columnas, asi que no altera ningun otro widget.
 */
@media (max-width: 767px) {
  body.pk-sitio .elementor-widget,
  body.pk-sitio .elementor-widget-container {
    column-count: 1 !important;
  }
}

/* No se toca el relleno horizontal de `.e-con-inner`: en el heroe de la
   portada ES el que crea el margen del texto respecto al borde de la banda
   roja. Anularlo desplazaba el titular 40 px a la izquierda del logo, peor
   que el desfase de 6 px que se pretendia corregir. */

/* Una sección declarada a sangre completa debe llegar de verdad al borde. */
body.pk-sitio .elementor-section-full_width > .elementor-container {
  max-width: none;
  padding-inline: 0;
}

/* --- 2. Cabecera -------------------------------------------------------- */

body.pk-sitio #header-section,
body.pk-sitio .header-main-wrap {
  background: var(--pk-n0);
  border-bottom: 1px solid var(--pk-n100);
  box-shadow: none;
}

/* Altura deliberada y estable: ni cabecera gigante ni comprimida. */
body.pk-sitio .header-main .navbar-nav > li > .nav-link,
body.pk-sitio #main-nav .nav-link {
  color: var(--pk-txt);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
  letter-spacing: .01em;
  padding-inline: var(--pk-e3);
  transition: color var(--pk-t);
}
body.pk-sitio #main-nav .nav-link:hover,
body.pk-sitio #main-nav .nav-link:focus-visible { color: var(--pk-primario); }

/*
 * D-3 · The mobile drawer is a SEPARATE DOM tree from the desktop bar
 * (`.offcanvas-mobile-menu` / `.mobile-navbar-nav`, not `#main-nav`), so none
 * of the rules above ever reached it. Measured: `.nav-link`,
 * `.dropdown-toggle` and `.dropdown-item` inside it computed
 * `rgb(0, 66, 116)` — Houzez's navy `#004274`, never a Propeka colour and not
 * in the palette. Same fix, same values, the other selector.
 */
body.pk-sitio .offcanvas-mobile-menu .nav-link,
body.pk-sitio .offcanvas-mobile-menu .dropdown-item,
body.pk-sitio .offcanvas-mobile-menu .dropdown-toggle,
body.pk-sitio .offcanvas-mobile-menu .nav-mobile-trigger,
body.pk-sitio .offcanvas-mobile-menu .houzez-icon {
  color: var(--pk-txt);
}
body.pk-sitio .offcanvas-mobile-menu .nav-link:hover,
body.pk-sitio .offcanvas-mobile-menu .nav-link:focus-visible,
body.pk-sitio .offcanvas-mobile-menu .dropdown-item:hover,
body.pk-sitio .offcanvas-mobile-menu .dropdown-item:focus-visible {
  color: var(--pk-primario);
}

/* WordPress keeps its administration toolbar fixed above the public site.
   Without this offset, the drawer's own title and close control sit behind the
   toolbar for an administrator reviewing the customer journey. */
:where(body.pk-sitio.admin-bar) .offcanvas.offcanvas-mobile-menu {
  top: 32px;
  height: calc(100dvh - 32px);
}
/* En pantallas estrechas la barra de administracion usa
   `position: absolute`, de modo que se va con el desplazamiento. Medido el
   2026-09-21 a 390 px en staging: #wpadminbar computa `absolute` (46 px de
   alto) mientras el cajon computa `fixed`. Reservarle 46 px a algo que ya no
   esta en pantalla deja una banda vacia permanente encima del menu en cuanto
   se baja un poco; Carlos la reporto. El cajon y su fondo deben superar el
   z-index: 99999 de la barra para cubrirla cuando el scroll esta arriba. */
@media (max-width: 782px) {
  :where(body.pk-sitio.admin-bar) .offcanvas.offcanvas-mobile-menu {
    top: 0;
    height: 100dvh;
    z-index: 100001;
  }
  :where(body.pk-sitio.admin-bar) #nav-mobile > .offcanvas-backdrop { z-index: 100000; }
}

/* Elemento activo: subrayado propio, no un fondo pesado. */
body.pk-sitio #main-nav .current-menu-item > .nav-link,
body.pk-sitio #main-nav .current_page_item > .nav-link {
  color: var(--pk-primario);
  position: relative;
}
body.pk-sitio #main-nav .current-menu-item > .nav-link::after,
body.pk-sitio #main-nav .current_page_item > .nav-link::after {
  content: ""; position: absolute; left: var(--pk-e3); right: var(--pk-e3); bottom: -2px;
  height: 2px; background: var(--pk-primario); border-radius: 2px;
}

/* Disparadores de la cabecera: objetivo táctil real.
   Medido en la línea base: `menu-btn`, `vist-btn` y `crose-btn` quedaban por
   debajo de 40 px de alto en 48 capturas. Son los controles de menú, de acceso
   y de cierre del panel: los tres primarios de la cabecera móvil. */
body.pk-sitio .mobile-menu-btn,
body.pk-sitio .navbar-toggler,
body.pk-sitio .header-mobile .toggle-menu,
body.pk-sitio .menu-btn,
body.pk-sitio .vist-btn,
body.pk-sitio .crose-btn,
body.pk-sitio .close-compare-panel {
  min-width: var(--pk-alto-ctl);
  min-height: var(--pk-alto-ctl);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pk-r-sm);
}
body.pk-sitio .menu-btn:hover,
body.pk-sitio .vist-btn:hover { background: var(--pk-n50); }

/* El logotipo no debe encogerse hasta perder legibilidad en móvil. */
body.pk-sitio .navbar-brand img,
body.pk-sitio .logo img { max-height: 40px; width: auto; }
@media (max-width: 575.98px) {
  body.pk-sitio .navbar-brand img,
  body.pk-sitio .logo img { max-height: 32px; }
}

/* Authoritative marketplace shell for /propiedades/.
   The route adopts Funda's 60px header geometry with Propeka's negative mark. */
/* ---------------------------------------------------------------------------
   Cabecera clara.
   ---------------------------------------------------------------------------
   Era una barra roja llena de 70 px con NUEVE colores dentro (5 de texto y 4 de
   fondo). Una barra saturada compite con la fotografía de los anuncios, que es
   lo que tiene que mandar en la pantalla de un portal inmobiliario.

   Nota honesta sobre la referencia: funda.nl **sí** usa una barra naranja
   saturada, así que esta dirección no sale de ella. Lo que sí se toma de la
   referencia es la disciplina: su cabecera entera usa DOS colores de texto y
   ningún fondo interior. Ese es el hallazgo aplicable, no el tono.

   La identidad pasa a estar en el logotipo, la tipografía, un único rojo de
   acción y la contención de todo lo demás. Ver DECISIONS D-10.
   --------------------------------------------------------------------------- */
body.pk-sitio .header-main-wrap,
body.pk-sitio #header-section,
body.pk-sitio #header-mobile {
  min-height: 64px;
  /* La cabecera es la cima de la cromática del sitio.
     Estaba en `z-index: 4` mientras la barra de búsqueda vive en `z-index: 40`.
     Como la cabecera crea contexto de apilamiento, su menú desplegable quedaba
     encerrado en el nivel 4 por mucho que el panel declarase 1000, y la barra lo
     tapaba entera. Ésa era «la barra que bloquea el menú». 50 la deja por
     encima de la barra y por debajo de la barra de administración (99999). */
  position: relative;
  z-index: 50;
  background: var(--pk-n0);
  /* Un filete O una sombra, nunca las dos. Se elige el filete: es más nítido y
     no ensucia el borde superior de la fotografía que va justo debajo. */
  border-bottom: 1px solid var(--pk-n200);
  box-shadow: none;
}

body.pk-sitio #header-section.header-v4,
body.pk-sitio .header-v4 .header-inner-wrap,
body.pk-sitio #header-mobile {
  height: 64px;
}

/*
 * Marco horizontal del SITIO.
 *
 * Nacio acotado a `.pk-vista-resultados` porque `/propiedades/` era la unica
 * pagina redisenada. En V3 el sistema es el del sitio entero: cabecera, barra,
 * contenido y pie comparten el mismo marco en todas las rutas, que es lo que
 * hace que la web se lea como UN producto y no como una pagina buena pegada a
 * un sitio viejo. El ambito pasa a `body.pk-sitio`.
 *
 * La cabecera se servia dentro del contenedor de 1200 px de Houzez mientras la
 * columna de resultados medía 728: medido a 1440, el logotipo caía en x=136,4
 * y la cuenta empezaba en x=1163,9, un marco 180 px más ancho que el de la
 * referencia. La cabecera se leía como el tema y no como la página.
 *
 * La corrección se hace en UN SOLO SITIO: el propio token de ancho. La regla
 * unificada de contenedores de esta hoja ya reparte `--pk-ancho` con
 * `!important` a `.container`, `.pk-contenedor` y los contenedores de
 * Elementor —esa es la razón de que fijar la anchura pieza a pieza no tuviera
 * ningún efecto—, así que redefinir el token en la ruta alinea de golpe
 * cabecera, barra de búsqueda, contenido y pie sobre el mismo marco de
 * 1010 px de contenido que se midió en la referencia (x=200 a x=1210).
 *
 * Se declara con el relleno sumado porque el token gobierna la caja exterior y
 * lo que hay que hacer coincidir es el CONTENIDO.
 */
body.pk-sitio {
  --pk-ancho: calc(var(--pk-results-shell) + var(--pk-pad) + var(--pk-pad));
}

/* Logotipo — SIN filtro.
   Corrección de D-11: el archivo se llama `propeka-logo-blanco.png`, y por el
   nombre di por hecho que era la versión blanca y que sobre una barra clara
   quedaría invisible, así que le aplicaba `brightness(0)` para llevarlo a negro.
   Decodificada la paleta del PNG, el logotipo es **rojo `#EC1B2D`** con fondo
   transparente. Nunca hizo falta el filtro: quitarlo devuelve el rojo de marca
   a la cabecera, que es justo la deuda que yo mismo había anotado.

   (El archivo está mal nombrado. Tres rojos casi idénticos conviven ya:
   `#EC1B2D` del logotipo, `#EC0028` del manual y `#ED0028` del token.)

   Tamaño ÓPTICO, no matemático: 26 px de alto hacen que la altura de las
   mayúsculas del logotipo case con la del texto de navegación de 16 px. A 32 px
   el logotipo pesaba más que toda la fila. */
body.pk-sitio #header-section .logo-desktop img,
body.pk-sitio #header-mobile .logo-mobile img {
  width: auto;
  max-height: 26px;
  filter: none;
}

/* Navegación: un solo color de texto, peso normal.
   Estaba en 14 px con peso 600 y blanco sobre rojo. El peso 600 en toda la fila
   hacía que ningún elemento pudiera destacarse como activo. */
body.pk-sitio #main-nav .nav-link,
body.pk-sitio .btn-phone-number a,
body.pk-sitio #navi-user > a,
body.pk-sitio #header-mobile .toggle-button-left,
body.pk-sitio #header-mobile .toggle-button-right {
  color: var(--pk-n700);
}

body.pk-sitio #main-nav .nav-link {
  min-height: 44px;
  padding-inline: 12px;
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-normal);
  background: none;
}

/* Reposo → foco/hover: sólo cambia el color, sin relleno. El relleno rojo de
   antes convertía cada hover en un bloque de color. */
body.pk-sitio #main-nav .nav-link:hover,
body.pk-sitio #main-nav .nav-link:focus-visible {
  color: var(--pk-primario-osc);
  background: none;
}

/* Estado activo inequívoco: color de marca MÁS subrayado. Sólo el color no
   basta para quien no distingue rojo de gris. */
body.pk-sitio #main-nav .current-menu-item > .nav-link,
body.pk-sitio #main-nav .current_page_item > .nav-link,
body.pk-sitio #main-nav .current-menu-ancestor > .nav-link,
body.pk-sitio #main-nav .current-menu-parent > .nav-link {
  color: var(--pk-primario-osc);
  background: none;
  font-weight: var(--pk-fw-semi);
}

body.pk-sitio #main-nav .current-menu-item > .nav-link::after,
body.pk-sitio #main-nav .current_page_item > .nav-link::after,
body.pk-sitio #main-nav .current-menu-ancestor > .nav-link:not(.dropdown-toggle)::after,
body.pk-sitio #main-nav .current-menu-parent > .nav-link:not(.dropdown-toggle)::after {
  bottom: 2px;
  height: 2px;
  background: var(--pk-primario);
}

/* En un padre con submenú el `::after` ES el cheurón. Pintarle el subrayado
   lo convertía en una raya roja de 10×2 px, estática, arriba de la cabecera
   (visto en /planes/ con «Vender» activo). Allí el subrayado va como fondo,
   a la misma altura y con el mismo sangrado que el de «Inmobiliarias». */
body.pk-sitio #main-nav .current-menu-ancestor > .nav-link.dropdown-toggle,
body.pk-sitio #main-nav .current-menu-parent > .nav-link.dropdown-toggle {
  background: linear-gradient(var(--pk-primario), var(--pk-primario)) no-repeat;
  background-size: calc(100% - 2 * var(--pk-e3)) 2px;
  background-position: var(--pk-e3) calc(100% - 2px);
}

/* Fuera el teléfono de la cabecera.
   Propeka no intermedia: no hay centralita a la que llamar, y un número en la
   barra promete una atención telefónica que no existe. Además competía con la
   única acción primaria. El contacto vive en la ficha, con el anunciante que
   corresponde. */
body.pk-sitio .btn-phone-number,
body.pk-sitio .header-contact-phone,
body.pk-sitio .phone-number-wrap { display: none !important; }

/* El botón flotante de «volver arriba» de Houzez: un círculo rojo fijo en la
   esquina que no pertenece a ningún sistema de esta página, tapa la última
   tarjeta y repite el rojo de la acción principal en algo que no es una acción
   principal. */
body.pk-sitio .scrollToTop,
body.pk-sitio #scrollToTop,
body.pk-sitio .back-to-top,
body.pk-sitio .back-to-top-wrap { display: none !important; }

/*
 * La llamada a la accion de la cabecera.
 *
 * Se redisenaron los enlaces, el estado activo, el logotipo, el boton de
 * telefono y los disparadores del movil, pero NO este boton, que es el unico
 * elemento relleno de la barra. Al quedarse fuera heredaba el acento de la
 * demostracion de Houzez —`#00aeff`, inyectado en linea desde las opciones del
 * tema—, de modo que la accion mas prominente del sitio salia en cian sobre el
 * rojo de Propeka. Ademas incumple el registro de marca: el azul de Propeka es
 * `#3F99E7` y esta reservado a local comercial y oficinas.
 *
 * Tratamiento inverso: superficie blanca y rotulo en rojo. Sobre una barra ya
 * roja, un boton rojo seria invisible y uno de color ajeno, ruido. El rojo se
 * mantiene como el color de la accion, que es lo que dice el registro.
 *
 * El rotulo usa el rojo oscuro y no el primario: sobre blanco, `#ed0028` se
 * queda en 4,4:1 y no llega al 4,5:1 que pide AA para texto normal; `#c50021`
 * lo supera y se lee como el mismo rojo.
 */
/*
 * Centrado: NO se pelea con las utilidades de Bootstrap.
 *
 * El boton lleva `d-none d-md-block`, y las utilidades de Bootstrap 5 se
 * declaran con `!important`, asi que `display: block` gana siempre. Con
 * `display: block`, `align-items` es inerte: el rotulo se quedaba pegado al
 * borde superior de una caja de 44 px con un hueco vacio debajo. Ese era el
 * «renderiza mal» que se veia en la esquina.
 *
 * Se centra con `line-height` igual a la altura interior (44 menos los dos
 * bordes de 1 px) y `text-align`, que funciona con cualquier valor de
 * `display` y no depende de ganarle una guerra de especificidad a una
 * utilidad.
 */
/* Con la barra ya clara, el tratamiento se invierte otra vez: el botón vuelve a
   ser rojo relleno con rótulo blanco. Es el ÚNICO elemento relleno de la
   cabecera, y por eso funciona: en una fila por lo demás neutra, un solo bloque
   de color dirige la mirada sin competir con nada.
   Blanco sobre `#ed0028` mide 4,53:1 y cumple AA para texto normal. */
/* Relleno horizontal en la escala (16, no 18) y rótulo en el paso de la
   navegación. La acción sigue siendo inequívocamente la principal —es el único
   elemento relleno de la barra— pero por COLOR, no por tamaño: al dejar de
   competir en volumen con el resto de la fila, empieza a dirigir en vez de
   gritar. */
body.pk-sitio .btn.btn-create-listing {
  min-height: 44px;
  height: 44px;
  padding-block: 0;
  padding-inline: var(--pk-e4);
  font-size: var(--pk-fs-sm);
  line-height: 42px;
  text-align: center;
  white-space: nowrap;
  background: var(--pk-primario);
  color: var(--pk-n0);
  border: 1px solid var(--pk-primario);
  border-radius: var(--pk-r-sm);
  font-weight: var(--pk-fw-semi);
  box-shadow: none;
  transition: background-color var(--pk-t), color var(--pk-t);
}

/* Sobre barra clara el botón se OSCURECE al apuntarlo, en vez de aclararse.
   Aclararlo sobre blanco lo hacía desaparecer. */
body.pk-sitio .btn.btn-create-listing:hover,
body.pk-sitio .btn.btn-create-listing:focus-visible {
  background: var(--pk-primario-osc);
  border-color: var(--pk-primario-osc);
  color: var(--pk-n0);
}

body.pk-sitio .btn.btn-create-listing:active {
  background: var(--pk-primario-osc);
  border-color: var(--pk-primario-osc);
}

/*
 * El anillo de foco se dibuja con `box-shadow`, no con `outline`.
 *
 * Houzez retira el contorno de los enlaces mas abajo en la cascada, de modo
 * que la anchura y el desplazamiento de un `outline` propio sobrevivian pero
 * el estilo acababa en `none`: el boton se enfocaba sin ninguna senal visible
 * salvo el cambio de fondo, que sobre esta barra no basta. `box-shadow` no lo
 * puede anular un `outline: none`.
 *
 * El anillo va POR DENTRO y en rojo: la pastilla es blanca sobre una barra
 * roja, asi que un halo blanco exterior seria invisible contra el boton y un
 * halo rojo exterior lo seria contra la barra.
 */
/* Con la barra clara el anillo vuelve al EXTERIOR: la pastilla es roja sobre
   blanco, así que un halo interior blanco se perdería dentro del propio botón.
   Fuera, y en el mismo rojo oscuro, se lee contra el blanco de la barra. */
body.pk-sitio .btn.btn-create-listing:focus-visible {
  box-shadow: 0 0 0 2px var(--pk-n0), 0 0 0 4px var(--pk-primario-osc);
}

/*
 * C-2 · The CTA, resized from a measurement of its OWN rendering — not the
 * master brief's figures, which were wrong on every count (see D-24):
 * measured 44px tall (not 48), 16px horizontal padding (already the target,
 * not ~28), a 14px label SMALLER than the 16px nav rather than larger, and
 * 180,6px wide (not ~224).
 *
 * Target: 40px on desktop, 44px only from 768 down — the 44px floor is an
 * accessibility minimum for touch, not a desktop requirement, so desktop can
 * sit below it. Label steps up to the nav's own 16px at weight 600, so it
 * reads as the SAME typographic register as the links beside it instead of
 * a smaller, denser one. Width is not set directly: it falls out of the
 * padding and the label, which is exactly why "Listar propiedad" (16
 * characters) narrows the button on its own, without a hard-coded target
 * that would need re-tuning if the label ever changes again.
 */
body.pk-sitio .btn.btn-create-listing {
  height: 40px;
  min-height: 40px;
  line-height: 38px;
  font-size: var(--pk-fs-base);
}

@media (max-width: 767.98px) {
  body.pk-sitio .btn.btn-create-listing {
    height: 44px;
    min-height: 44px;
    line-height: 42px;
  }
}

/*
 * Header distribution — logo and nav together on the left, CTA and account
 * as one cluster on the right.
 *
 * MEASURED on staging at 1707 before the change (staging, not local: local
 * renders `header_style` 4 and staging renders 1, so they are different
 * partials — see D-36/B-23):
 *
 *   .logo-desktop            343.5 → 446.7
 *   NAV.main-nav             466.7 → 1138.4   (671.7 wide)
 *   #main-nav > li «Comprar» 803.6 → 921.2
 *
 * 356.9px of dead space between the brand and the first menu item, with the
 * whole nav bunched against the CTA.
 *
 * The cause is TWO Bootstrap utility classes the parent template puts on
 * these elements, and nothing else:
 *
 *   NAV.main-nav  .flex-grow-1        → stretches the nav across the gap
 *   UL#main-nav   .justify-content-end → throws its items to that box's far end
 *
 * The nav correctly fills the space between logo and CTA, then pushes its
 * own contents to the right edge of the space it just claimed.
 *
 * NOT fixed by making `.header-desktop` a flex row. It is `display: block`,
 * but so are the three wrappers below it (`.container`,
 * `.header-inner-wrap`), and their job is the 1020px frame every other
 * section shares (D-12). The real flex row is `.navbar` inside them, which
 * is ALREADY `display: flex` with `justify-content: space-between` — it was
 * never the problem. Turning the outer block into a flex row would have
 * broken the frame to fix something one level down.
 *
 * `!important` is deliberate and is the only thing that works here: both
 * offending declarations are Bootstrap utilities carrying `!important`
 * themselves (`.flex-grow-1{flex-grow:1!important}`,
 * `.justify-content-end{justify-content:flex-end!important}` — read from the
 * parent theme's bundled CSS, not assumed). No amount of specificity beats
 * an `!important` from a normal-origin sheet.
 *
 * `margin-left: auto` on the right cluster is what does the positioning:
 * auto margins absorb all free space BEFORE `justify-content` distributes
 * any, so `space-between` is left with nothing to spread and logo and nav
 * end up adjacent, while the cluster is pushed to the frame's right edge.
 * This is the shape Funda's own header uses: brand, menu immediately after
 * it, account affordances far right.
 *
 * Scoped to `.header-desktop` because the mobile drawer is a separate DOM
 * tree (D-37) and this header is `display: none` below 992px — verified at
 * 390, not assumed.
 */
body.pk-sitio .header-desktop nav.main-nav {
  flex-grow: 0 !important;
}

body.pk-sitio .header-desktop #main-nav {
  justify-content: flex-start !important;
}

body.pk-sitio .header-desktop .login-register {
  margin-left: auto;
}

/*
 * The gap between the brand and the first menu item. Houzez already sets
 * 20px here and 20px is `--pk-e5`, so this changes no pixel — it names the
 * value so the gap is legible as a scale step instead of a vendor
 * coincidence, the same reason D-38 tokenised the homepage's correct-but-
 * literal spacing.
 */
body.pk-sitio .header-desktop .logo-desktop {
  margin-right: var(--pk-e5);
}

/*
 * C-2 · The account control, brought into the CTA's cluster.
 *
 * Measured before: a bare outlined circle 42px tall, sitting 10px from the
 * CTA — off the 4px spacing scale because that gap came from each `<li>`'s
 * own Bootstrap margin, not a deliberate value. `gap` on the shared flex
 * row replaces those margins with one value FROM the scale, and the two
 * controls already share a vertical centre via Houzez's own
 * `align-items-center` on this same row — confirmed in the parent template,
 * not assumed.
 */
body.pk-sitio .login-register-nav {
  gap: var(--pk-e3);
}

body.pk-sitio .login-register-nav > li {
  margin: 0;
  padding: 0;
}

body.pk-sitio .btn.btn-icon-login-register {
  color: var(--pk-txt-sec);
  border-color: var(--pk-n200);
}

body.pk-sitio .btn.btn-icon-login-register:hover,
body.pk-sitio .btn.btn-icon-login-register:focus-visible {
  color: var(--pk-tinta);
  border-color: var(--pk-n300);
}

/* ---------------------------------------------------------------------------
   EL MENÚ QUE NO APARECÍA
   ---------------------------------------------------------------------------
   No era z-index, ni el recorte de `overflow: clip` del body, ni la barra de
   administración. Eran DOS reglas del tema padre que se contradicen:

     @media (min-width: 991px) {
       .on-hover-menu:not(...) .dropdown-menu { position: fixed; }
     }
     .header-main-wrap .main-nav .nav-item.show > .dropdown-menu { top: 100%; }

   `top: 100%` está escrito para `position: absolute`, donde el bloque
   contenedor es el `<li>` y significa «justo debajo del disparador». Con
   `position: fixed` el bloque contenedor es el VIEWPORT, así que `100%` pasa a
   valer el alto de la ventana: medido, el panel abría en `top: 739,6px` sobre
   un viewport de 730. Es decir, entero por debajo del pliegue. En una pantalla
   más alta asoma un trozo por abajo, y por eso se describía como «un menú que
   no aparece» o «tapado por una barra».

   El arreglo devuelve la coherencia entre las dos declaraciones en vez de
   inventar un `top` en píxeles: se vuelve a `position: absolute`, que es lo que
   `top: 100%` presupone. El `<li>` ya es `position: relative`, así que ancla
   donde debe. No se toca el tema padre.
   --------------------------------------------------------------------------- */
@media only screen and (min-width: 991px) {
  body.pk-sitio .header-main-wrap .main-nav .dropdown-menu,
  body.pk-sitio #main-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    margin-top: 0;
  }
}

/*
 * J-1 · El desplegable era SÓLO para ratón. Los cinco enlaces de «Comprar»
 * no existían para quien navega con teclado.
 *
 * Medido en staging a 1440, sobre el propio elemento:
 *
 *   en reposo               opacity 0, visibility hidden
 *   con el ratón encima     opacity 1, visibility visible   ← funciona
 *   con el foco del teclado opacity 0, visibility hidden    ← no se abre
 *   al pulsar Intro         la página NAVEGA
 *
 * Las dos primeras líneas son la regla del tema padre, que sólo contempla
 * `li:hover`. La tercera es el defecto. La cuarta no lo es: el disparador es
 * un `<a href="/propiedades-en-venta-guatemala/">` de verdad, así que Intro
 * lleva a una página que existe y eso está bien.
 *
 * `visibility: hidden` saca a los enlaces del orden de tabulación, así que no
 * es que el foco cayera en enlaces invisibles —eso habría sido peor—: es que
 * los cinco destinos eran INALCANZABLES con el teclado. Tabular desde
 * «Comprar» saltaba directamente a «Alquilar».
 *
 * El arreglo es reflejar la regla de `:hover` con `:focus-within`, con los
 * mismos selectores y las mismas declaraciones. Al enfocar «Comprar» el
 * panel se muestra, `visibility: visible` devuelve sus enlaces al orden de
 * tabulación, y seguir tabulando entra en ellos. Sin JavaScript, sin estado
 * que sincronizar y sin tocar la plantilla del padre.
 *
 * La especificidad copia la del padre —(0,3,3)— y le añade `body.pk-sitio`,
 * así que gana sin `!important`.
 */
body.pk-sitio .on-hover-menu:not(.houzez-nav-menu-layout-dropdown) ul li:focus-within > ul.dropdown-menu,
body.pk-sitio .on-hover-menu:not(.houzez-nav-menu-layout-dropdown) ul li:focus-within > .dropdown-menu.megamenu,
body.pk-sitio .on-hover-menu:not(.houzez-nav-menu-layout-dropdown) ul ul li:focus-within > ul.dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 1px);
  position: absolute;
}

/* El panel no tenía superficie: era transparente y el contenido de detrás
   —la barra de búsqueda, los rótulos de los filtros, las fotos— se leía a
   través de los enlaces. Un panel flotante necesita fondo propio.
   Un radio de la escala, UNA sombra de la escalera de elevación, y un filete
   para que el borde no dependa sólo de la sombra sobre fondos claros. */
body.pk-sitio .header-main-wrap .dropdown-menu,
body.pk-sitio #main-nav .dropdown-menu {
  min-width: 250px;
  padding: var(--pk-e2);
  background: var(--pk-n0);
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-sm);
  box-shadow: var(--pk-s3);
}

body.pk-sitio .header-main-wrap .dropdown-menu > li > a,
body.pk-sitio #main-nav .dropdown-menu > li > a,
body.pk-sitio .header-main-wrap .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--pk-e3);
  border-radius: var(--pk-r-sm);
  color: var(--pk-n700);
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-base);
  /* Una línea por opción. Con `normal`, «Ver todas las propiedades en venta»
     se partía dentro de los 250 px mínimos y su fila de dos líneas quedaba
     pegada al filete de «Terrenos» (medido a 1440 el 15-09-2026). El panel es
     absoluto, así que crece hasta el rótulo más largo. */
  white-space: nowrap;
}

body.pk-sitio .header-main-wrap .dropdown-menu > li > a:hover,
body.pk-sitio .header-main-wrap .dropdown-menu > li > a:focus-visible,
body.pk-sitio #main-nav .dropdown-menu > li > a:hover,
body.pk-sitio #main-nav .dropdown-menu > li > a:focus-visible {
  background: var(--pk-n50);
  color: var(--pk-primario-osc);
}

/*
 * El acceso a la cuenta.
 *
 * Houzez pinta ahi su marcador de retrato —`houzez/img/profile-avatar.png`—
 * cuando la persona no ha subido foto: un cuadro gris de 42 px que sobre la
 * barra roja se lee como una imagen rota. Se sustituye por un glifo propio y
 * se deja el circulo; cuando SI hay retrato real, la regla no se aplica y la
 * foto sale como debe.
 */
body.pk-sitio .navbar-logged-in-wrap .dropdown-toggle img[src$="/houzez/img/profile-avatar.png"] {
  width: 36px;
  height: 36px;
  /* El marcador lleva la utilidad `.rounded` de Bootstrap, que se declara con
     `!important` y fija 6 px. Un cuadrado redondeado junto a la pastilla de la
     accion principal se leia como dos rectangulos iguales; el circulo
     distingue el acceso a la cuenta de la llamada a la accion. Sobrescribir
     una utilidad de Bootstrap exige `!important`: es el mecanismo previsto,
     no un atajo. */
  border-radius: 50% !important;
  box-sizing: border-box;
  /* El glifo y el aro eran BLANCOS, para una barra roja. Sobre la barra clara
     desaparecían por completo: el acceso a la cuenta se volvía invisible aunque
     el control seguía ahí y era pulsable. Pasan al gris de texto, que mide
     10,45:1 sobre blanco. */
  border: 1.5px solid var(--pk-n300);
  background: transparent;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%2333414f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='18' cy='14' r='5'/%3E%3Cpath d='M9 28c1.8-4 5-6 9-6s7.2 2 9 6'/%3E%3C/svg%3E");
}

/* Un solo color de texto en la fila de navegación.
   La cabecera renderizaba SEIS colores de texto: `--pk-txt`, `--pk-n700`, el
   `#212529` que se fuga de Bootstrap, el azul `#004274`, el rojo y el blanco.
   La referencia usa dos en toda su cabecera. Aquí se unifica todo lo que no sea
   el estado activo ni el botón. */
body.pk-sitio #header-section a,
body.pk-sitio #header-section span,
body.pk-sitio .header-main-wrap a,
body.pk-sitio .header-main-wrap span {
  color: var(--pk-n700);
}
body.pk-sitio #header-section .btn.btn-create-listing,
body.pk-sitio .header-main-wrap .btn.btn-create-listing { color: var(--pk-n0); }
body.pk-sitio #main-nav .current-menu-item > .nav-link,
body.pk-sitio #main-nav .current_page_item > .nav-link,
body.pk-sitio #main-nav .current-menu-ancestor > .nav-link,
body.pk-sitio #main-nav .current-menu-parent > .nav-link { color: var(--pk-primario-osc); }

/*
 * Foco del acceso a la cuenta.
 *
 * El contorno del navegador se dibuja sobre la caja del enlace, que es
 * cuadrada, de modo que un control circular quedaba rodeado por un rectangulo.
 * Se traslada el anillo al propio circulo con `box-shadow` —blanco, por fuera,
 * que es lo que contrasta contra el rojo de la barra— y se retira el contorno
 * cuadrado, ya sustituido por una senal equivalente.
 */
body.pk-sitio .navbar-logged-in-wrap .dropdown-toggle:focus-visible {
  outline: none;
}

body.pk-sitio .navbar-logged-in-wrap .dropdown-toggle:focus-visible img {
  box-shadow: 0 0 0 3px #fff;
}

body.pk-sitio #header-mobile .toggle-button-left:hover,
body.pk-sitio #header-mobile .toggle-button-right:hover {
  background: var(--pk-primario-osc);
}

@media (max-width: 767.98px) {
  body.pk-sitio #header-mobile > .container {
    padding-inline: 16px;
  }
}

@media (max-width: 380px) {
  body.pk-sitio #header-mobile > .container {
    padding-inline: 12px;
  }
}

/* --- 3. Pie ------------------------------------------------------------- */

body.pk-sitio .footer-wrap,
body.pk-sitio footer.footer {
  background: var(--pk-n25);
  border-top: 1px solid var(--pk-n100);
  color: var(--pk-txt-sec);
}
body.pk-sitio .footer-wrap h3,
body.pk-sitio .footer-wrap h4,
body.pk-sitio .footer-wrap .widget-title {
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-fuerte);
  color: var(--pk-tinta);
  letter-spacing: .02em;
  text-transform: none;
  margin-bottom: var(--pk-e3);
}
body.pk-sitio .footer-wrap a { color: var(--pk-txt-sec); transition: color var(--pk-t); }
body.pk-sitio .footer-wrap a:hover,
body.pk-sitio .footer-wrap a:focus-visible { color: var(--pk-primario); }
body.pk-sitio .footer-wrap ul li { margin-bottom: var(--pk-e2); line-height: var(--pk-lh-normal); }
body.pk-sitio .footer-top-wrap { padding-block: var(--pk-e10); }
body.pk-sitio .footer-bottom-wrap {
  border-top: 1px solid var(--pk-n100);
  padding-block: var(--pk-e5) !important;
}
body.pk-sitio .footer-bottom-wrap img {
  width: min(140px, 42vw);
  filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(6546%) hue-rotate(345deg) brightness(95%) contrast(113%);
}
body.pk-sitio .copyright,
body.pk-sitio .footer-bottom {
  border-top: 1px solid var(--pk-n100);
  font-size: var(--pk-fs-sm);
  color: var(--pk-txt-ter);
  padding-block: var(--pk-e4);
}
@media (max-width: 767.98px) {
  body.pk-sitio .footer-wrap .widget,
  body.pk-sitio .footer-wrap [class*="col-"] { margin-bottom: var(--pk-e6); }
  body.pk-sitio .footer-top-wrap { padding-block: var(--pk-e8); }
}

/* --- 3b. Tarjetas de propiedad de Houzez en páginas compuestas -----------
   La portada usa los widgets de listado del tema padre. Medido a 768 px: sus
   tarjetas (`item-header-2`, `item-v10-image`, `img-fluid`) conservaban una
   anchura fija de 480 px y terminaban en x=972 sobre un viewport de 768 —
   se salían de la página casi 200 px.

   Se les devuelve un comportamiento fluido sin tocar su marcado. */
body.pk-sitio .item-header-2,
body.pk-sitio .item-v10-image,
body.pk-sitio .item-listing-wrap,
body.pk-sitio .item-wrap {
  max-width: 100%;
  min-width: 0;
}
body.pk-sitio .item-v10-image img,
body.pk-sitio .item-header-2 img,
body.pk-sitio .img-fluid {
  max-width: 100%;
  height: auto;
}
/* Los carruseles del padre deben desplazarse dentro de su caja, nunca empujar
   la página. */
body.pk-sitio .swiper-container,
body.pk-sitio .swiper-wrapper,
body.pk-sitio [class*="carousel"] { max-width: 100%; min-width: 0; }

/* --- 3c. Un solo lenguaje de tarjeta de propiedad ------------------------
 *
 * El sitio pintaba la MISMA cosa —una propiedad— de dos maneras distintas: la
 * portada con la tarjeta nativa de Houzez (`item-wrap-v10`) y los resultados
 * con la tarjeta Propeka. Distinta tipografia, distintas insignias, distintos
 * botones y distinto tratamiento de imagen en la misma sesion de navegacion.
 *
 * Referencia vinculante, medida sobre funda.nl a 1440 y a 390 px:
 *   - mosaico de imagenes (una grande + dos apiladas) con MUCHO peso visual:
 *     ocupa alrededor del 71 % del area de la tarjeta;
 *   - insignias superpuestas sobre la imagen, arriba a la izquierda;
 *   - texto sobrio debajo: direccion, ciudad y precio en una jerarquia corta;
 *   - nombre de la agencia al pie, separado por una linea.
 *
 * La tarjeta de Houzez ya trae ese mosaico, asi que NO se reescribe su
 * marcado: se le aplican los tokens de Propeka y se le sube el peso de la
 * imagen. Asi la portada y los resultados hablan el mismo idioma sin perder
 * ninguna funcionalidad del tema padre (favoritos, comparar, llamar, correo,
 * WhatsApp siguen siendo suyos).
 */

/* Contenedor: mismo papel que `.pk-tarjeta`. */
body.pk-sitio .item-listing-wrap {
  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);
}
body.pk-sitio .item-listing-wrap:hover {
  box-shadow: var(--pk-s3);
  border-color: var(--pk-n200);
}

/*
 * Forma de la tarjeta: mosaico ARRIBA, contenido DEBAJO.
 *
 * Es la disposicion de la referencia. Houzez apila en movil y pasa a fila en
 * escritorio (`flex-column flex-lg-row`), lo que dejaba la imagen reducida a
 * una columna lateral. Fijando la direccion en columna, el mosaico que el
 * propio tema ya construye —una imagen grande mas dos apiladas— pasa a ocupar
 * el ancho completo de la tarjeta y el texto queda debajo, exactamente como en
 * funda.nl. No se cambia una sola linea del marcado.
 *
 * Las utilidades de Bootstrap declaran `flex-direction` con `!important`, de
 * modo que aqui es obligatorio usarlo para poder ganarles.
 */
body.pk-sitio .item-wrap-v10 .item-wrap {
  flex-direction: column !important;
}
/* Dentro del mosaico: imagen principal a dos tercios, miniaturas apiladas al
   tercio restante. Es la proporcion medida en la referencia. */
body.pk-sitio .item-wrap-v10 .item-header-wrap {
  flex-direction: row !important;
  width: 100%;
  gap: 2px;
}
body.pk-sitio .item-wrap-v10 .item-header-wrap-left { flex: 2 1 0; min-width: 0; }
body.pk-sitio .item-wrap-v10 .item-header-wrap-right {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column !important;
  gap: 2px;
}
/* Altura del mosaico: la imagen es el elemento con mas peso de la tarjeta. */
body.pk-sitio .item-wrap-v10 .item-header-1,
body.pk-sitio .item-wrap-v10 .item-header-wrap-left,
body.pk-sitio .item-wrap-v10 .item-header-wrap-right { height: 300px; }
body.pk-sitio .item-wrap-v10 .item-header-2 { flex: 1 1 0; min-height: 0; }
body.pk-sitio .item-wrap-v10 .item-header-1 .item-v10-image,
body.pk-sitio .item-wrap-v10 .item-header-2 .item-v10-image { height: 100%; }
body.pk-sitio .item-wrap-v10 .item-body-wrap { width: 100%; }

@media (max-width: 640px) {
  body.pk-sitio .item-wrap-v10 .item-header-1,
  body.pk-sitio .item-wrap-v10 .item-header-wrap-left,
  body.pk-sitio .item-wrap-v10 .item-header-wrap-right { height: 210px; }
}

/* Imagenes del mosaico: recorte uniforme.
   Medido antes: una miniatura de 218x199 dentro de una caja de 218x163, es
   decir 36 px de imagen fuera de su hueco y un recorte distinto en cada
   tarjeta. Con `object-fit: cover` todas recortan igual. */
body.pk-sitio .item-v10-image,
body.pk-sitio .item-header-2 .item-v10-image {
  overflow: hidden;
}
body.pk-sitio .item-v10-image img,
body.pk-sitio .item-header-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Insignias superpuestas sobre la imagen, arriba a la izquierda: es donde las
   pone la referencia y donde ya las pone la tarjeta Propeka.
   Houzez imprime DOS juegos de insignias y alterna cual se ve segun el ancho
   (`d-block d-lg-none` en la cabecera, `d-md-none d-lg-block` en el cuerpo).
   Se usa siempre el de la cabecera, que es el que esta sobre la imagen, y se
   oculta el del cuerpo. Las utilidades de Bootstrap usan `!important`. */
body.pk-sitio .item-wrap-v10 .item-header-1 { position: relative; }
body.pk-sitio .item-wrap-v10 .item-header-1 .labels-wrap {
  display: block !important;
  position: absolute;
  /* Por debajo de 992 px el tema ancla estas insignias a la DERECHA con
     `!important`, de modo que a 390 px la misma insignia salia a la derecha y
     en blanco mientras a 1280 salia a la izquierda y en oscuro: la misma
     tarjeta con dos aspectos distintos segun el ancho. Se fija el anclaje. */
  top: var(--pk-e3) !important;
  left: var(--pk-e3) !important;
  right: auto !important;
  z-index: 3;
  margin-bottom: 0;
}
body.pk-sitio .item-wrap-v10 .item-body .labels-wrap {
  display: none !important;
}
/* Sobre fotografia la pastilla rosa palido no tiene contraste suficiente: se
   usa el mismo tratamiento opaco que `.pk-badge`. */
body.pk-sitio .item-wrap-v10 .item-header-1 .label-status {
  background-color: rgba(13, 35, 56, .82) !important;
  color: #fff !important;
  backdrop-filter: blur(4px);
}

/*
 * Mismo anclaje de insignia por debajo de 768 px.
 *
 * Un snippet propio del sitio ancla ahi las insignias a la DERECHA y les
 * devuelve la pastilla rosa, con selectores de especificidad 0-5-0 y 0-6-0 y
 * `!important` en cada propiedad. El resultado medido era la misma tarjeta con
 * dos aspectos: insignia oscura arriba a la izquierda en escritorio (x=84) y
 * pastilla blanca arriba a la derecha en movil (x=300).
 *
 * Se igualan los selectores desde el tema hijo —0-5-1 y 0-7-1— para no dejar
 * el estilo de la tarjeta repartido entre dos sitios. Si algun dia se retira
 * ese snippet, estas reglas siguen siendo correctas por si solas.
 */
@media (max-width: 767px) {
  body.pk-sitio .item-listing-wrap .labels-wrap.d-block.d-lg-none {
    left: var(--pk-e3) !important;
    right: auto !important;
    top: var(--pk-e3) !important;
  }
  body.pk-sitio .item-listing-wrap .labels-wrap.d-block.d-lg-none > .label.label-status {
    background: rgba(13, 35, 56, .82) !important;
    background-color: rgba(13, 35, 56, .82) !important;
    color: #fff !important;
  }
}

/* Tipografia: la misma escala y los mismos colores que `.pk-tarjeta`. */
body.pk-sitio .item-title {
  font-size: var(--pk-fs-h4, 1.0625rem);
  font-weight: var(--pk-fw-semi, 600);
  line-height: 1.35;
  color: var(--pk-tinta);
}
body.pk-sitio .item-title a { color: inherit; text-decoration: none; }
body.pk-sitio .item-title a:hover { color: var(--pk-primario); }
/* El titulo se cortaba a una linea con puntos suspensivos («Casa en Venta en
   Arrazola, Km. 16…»), escondiendo justo la parte que identifica el inmueble.
   La referencia muestra la direccion completa; aqui se permiten dos lineas.
   `text-truncate` de Bootstrap declara con `!important`. */
/* No se condiciona a `.text-truncate`: esa clase no siempre esta presente en
   el marcado, de modo que la regla anterior no llegaba a aplicarse. */
body.pk-sitio .item-wrap-v10 .item-body .item-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: initial !important;
  /* El titulo llevaba una anchura FIJA —250 px a 768 y 360 px a 1280— con
     `flex: 0 0 auto`. Con la tarjeta ya a todo el ancho, esa anchura fija era
     la que seguia cortando el titulo con puntos suspensivos aunque hubiera
     745 px libres al lado. */
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto;
}

body.pk-sitio .item-address {
  font-size: var(--pk-fs-sm);
  color: var(--pk-txt-ter);
}
body.pk-sitio .item-address i { color: var(--pk-txt-ter); }

body.pk-sitio .item-price,
body.pk-sitio .item-price .price {
  font-size: var(--pk-fs-lg);
  font-weight: var(--pk-fw-bold, 700);
  color: var(--pk-tinta);
}

body.pk-sitio .item-amenities {
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
}
body.pk-sitio .item-amenities i { color: var(--pk-txt-ter); }
/* El tipo de propiedad («Casas») es un dato de contexto, no un titular. */
body.pk-sitio .item-amenities .h-type span {
  font-size: var(--pk-fs-xs);
  font-weight: var(--pk-fw-semi, 600);
  letter-spacing: .06em;
  color: var(--pk-txt-ter);
}

/* Pie de tarjeta: separado por una linea, como en la tarjeta Propeka. */
body.pk-sitio .item-footer-author-tool-wrap {
  border-top: 1px solid var(--pk-n100);
  padding-top: var(--pk-e3);
}
body.pk-sitio .item-author,
body.pk-sitio .item-author a {
  font-size: var(--pk-fs-sm);
  color: var(--pk-txt-ter);
}
body.pk-sitio .item-author img {
  border-radius: var(--pk-r-sm);
}

/* --- 4. Formularios ----------------------------------------------------- */
/* Un solo lenguaje de formulario en todo el sitio. */

body.pk-sitio .form-control,
body.pk-sitio input[type="text"],
body.pk-sitio input[type="email"],
body.pk-sitio input[type="password"],
body.pk-sitio input[type="tel"],
body.pk-sitio input[type="number"],
body.pk-sitio input[type="search"],
body.pk-sitio input[type="url"],
body.pk-sitio select,
body.pk-sitio textarea {
  min-height: var(--pk-alto-ctl);
  padding: var(--pk-e2) var(--pk-e3);
  font-size: var(--pk-fs-base);
  color: var(--pk-txt);
  background: var(--pk-n0);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r);
  box-shadow: none;
  transition: border-color var(--pk-t), box-shadow var(--pk-t);
}
body.pk-sitio textarea { min-height: 120px; line-height: var(--pk-lh-normal); }
body.pk-sitio .form-control:hover,
body.pk-sitio select:hover { border-color: var(--pk-n300); }
body.pk-sitio .form-control:focus,
body.pk-sitio input:focus,
body.pk-sitio select:focus,
body.pk-sitio textarea:focus {
  border-color: var(--pk-navy);
  box-shadow: var(--pk-foco);
  outline: none;
}
body.pk-sitio .form-control::placeholder,
body.pk-sitio input::placeholder,
body.pk-sitio textarea::placeholder { color: var(--pk-txt-ter); opacity: 1; }

/* Modal de acceso: el lenguaje global de campos no debe anular el espacio
 * reservado por Houzez para sus iconos. La regla general de arriba era más
 * específica que la del tema padre y dejaba icono y placeholder superpuestos.
 */
body.pk-sitio .login-register-form .login-form-wrap,
body.pk-sitio .login-register-form .register-form-wrap {
  display: grid;
  gap: var(--pk-e3);
  border: 0;
  background: transparent;
}

body.pk-sitio .login-register-form .login-form-wrap .form-group,
body.pk-sitio .login-register-form .register-form-wrap .form-group {
  margin: 0;
  border: 0;
}

body.pk-sitio .login-register-form .form-group-field { position: relative; }

body.pk-sitio .login-register-form .login-form-wrap .form-group-field::after,
body.pk-sitio .login-register-form .register-form-wrap .form-group-field::after {
  top: 50%;
  left: 16px;
  z-index: 1;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

body.pk-sitio .login-register-form .login-form-wrap .form-group-field input,
body.pk-sitio .login-register-form .register-form-wrap .form-group-field input {
  padding: 10px var(--pk-e3) 10px 48px;
  border: 1px solid var(--pk-n300);
  border-radius: var(--pk-r-sm);
}

body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-tabs {
  gap: 0;
  border: 0;
}

body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-link {
  display: flex;
  min-height: 54px;
  align-items: center;
  padding: 12px var(--pk-e4);
  color: rgba(255, 255, 255, .82);
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .2);
  border-bottom: 3px solid transparent;
}

body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-link:hover,
body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-link:focus-visible {
  color: #fff;
  background: rgba(14, 25, 45, .1);
}

body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-link.active {
  color: #fff;
  background: rgba(14, 25, 45, .18);
  border-bottom-color: #fff;
}

/* A 320 px las dos pestañas («Iniciar sesión», «Crear cuenta») no cabían junto
   al botón de cerrar y se apilaban en dos filas con un hueco rojo al lado
   (medido el 22-09-2026 como visitante). Con menos relleno y un cuerpo menor
   entran en una fila; de 360 en adelante no cambia nada. */
@media (max-width: 359.98px) {
  body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-tabs { flex-wrap: nowrap; }
  body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px var(--pk-e3);
    font-size: var(--pk-fs-sm);
    white-space: nowrap;
  }
}

/* Houzez pone `.control.control--checkbox { flex-direction: column }`. Sin
   fijar la direccion, `align-items: center` centraba el rotulo en HORIZONTAL:
   «No cerrar sesion» quedaba a 63 px de su casilla y 11 px por encima de ella
   (medido el 19-09 a 1366 y 390). */
body.pk-sitio .login-register-form .form-tools .control,
body.pk-sitio .login-register-form .register-form .control {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  min-height: 44px;
  align-items: center;
  margin-bottom: 0;
  padding-left: 34px;
  line-height: 1.5;
}

body.pk-sitio .login-register-form .form-tools .d-flex {
  align-items: center;
  gap: var(--pk-e3);
}

body.pk-sitio .login-register-form .form-tools .control__indicator,
body.pk-sitio .login-register-form .register-form .control__indicator { top: 12px; }

body.pk-sitio .login-register-form .form-tools a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

body.pk-sitio .offcanvas-login-register .btn-close {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 575.98px) {
  body.pk-sitio .login-register-form .modal-dialog {
    width: calc(100% - 24px);
    margin: 12px auto;
  }

  body.pk-sitio .login-register-form .modal-body { padding: var(--pk-e4); }

  body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-link {
    padding-inline: var(--pk-e3);
  }
}

/*
 * `.pk-opcion` queda fuera de este reseteo. La regla existe para domar las
 * etiquetas de formulario de Bootstrap, pero `body.pk-sitio label` (0,2,1)
 * tambien gana a `.pk-opcion { display: flex }` (0,1,0) de propeka.css, que es
 * el componente de las facetas, y le imponia cuatro cosas: 14px en vez de
 * 16px, peso 600, `margin-bottom` y sobre todo `display: inline-block`.
 *
 * Aplanada a inline-block la fila se encoge al contenido (132 px medidos), las
 * opciones se embaldosan de dos y de tres por linea y el `flex: 1` de
 * `.pk-opcion__txt` no puede empujar el recuento al borde: la cifra queda
 * pegada a la etiqueta. Con zonas numeradas eso es ilegible — «Zona 10 7» y
 * «Zona 1 1» se leen como un solo numero.
 *
 * funda.nl resuelve exactamente este caso con una sola columna y
 * `justify-content: space-between`: medido en su filtro «Woningtype», fila de
 * 256 px, etiqueta a la izquierda en #333 y recuento pegado al borde derecho
 * en #666, 160 px de separacion entre los dos. Al quitar el reseteo, el
 * componente ya hacia eso por su cuenta.
 */
body.pk-sitio label:not(.pk-opcion),
body.pk-sitio .form-label {
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
  color: var(--pk-txt);
  margin-bottom: 6px;
  display: inline-block;
}
body.pk-sitio .form-text,
body.pk-sitio .help-block,
body.pk-sitio small.text-muted {
  font-size: var(--pk-fs-sm);
  color: var(--pk-txt-ter);
  line-height: var(--pk-lh-normal);
}

/* Campo obligatorio: marcado también con texto, no sólo con color. */
body.pk-sitio label .required,
body.pk-sitio label abbr[title="required"] {
  color: var(--pk-primario);
  text-decoration: none;
  margin-left: 2px;
}

/* Estado de error accesible. */
body.pk-sitio .is-invalid,
body.pk-sitio .form-control.error,
body.pk-sitio input[aria-invalid="true"] {
  border-color: var(--pk-error);
  background: var(--pk-error-suave);
}
body.pk-sitio .invalid-feedback,
body.pk-sitio label.error {
  display: block;
  font-size: var(--pk-fs-sm);
  color: var(--pk-error);
  margin-top: 4px;
  font-weight: var(--pk-fw-semi);
}

body.pk-sitio [disabled],
body.pk-sitio .disabled { opacity: .55; cursor: not-allowed; }

/*
 * Una sola escala de altura de control.
 *
 * Medido: los botones de contacto del padre fijaban `height: 40px`, los campos
 * de Elementor `height: 48px` y sus campos grandes `height: 60px`, frente a los
 * 44 px del sistema. Cuatro alturas conviviendo en la misma página se leen como
 * descuido.
 *
 * Se neutraliza la altura FIJA —no basta `min-height`, porque `height` gana— y
 * se deja que el relleno defina la caja. Los campos declarados «grandes» por
 * Elementor conservan una altura mayor, pero la del sistema, no una arbitraria.
 */
body.pk-sitio .elementor-field-textual,
body.pk-sitio .elementor-field-group .elementor-field,
body.pk-sitio .elementor-button,
body.pk-sitio .elementor-select-wrapper select {
  height: auto;
  min-height: var(--pk-alto-ctl);
  border-radius: var(--pk-r);
  font-size: var(--pk-fs-base);
}
/* Campos declarados grandes por Elementor: se respeta la intención de tamaño,
   pero con la altura grande DEL SISTEMA (52 px), no con 60 px arbitrarios. */
/* `!important` acotado a la ALTURA.
   Comprobado midiendo el estilo calculado: el relleno que declaro sí se aplica
   (pad 0/0) pero `min-height` seguía en 40 px, es decir, el padre y Elementor
   declaran la altura con `!important`. Sin igualarlo no hay forma de que estos
   controles alcancen el objetivo táctil de 44 px. Sólo se marca la altura. */
body.pk-sitio [class*="elementor-size-lg"],
body.pk-sitio [class*="elementor-size-xl"] {
  height: auto !important;
  min-height: var(--pk-alto-ctl-lg) !important;
  padding-block: var(--pk-e2);
}

/* Botones de contacto y de envío del tema padre.
   `padding-block` se anula: con relleno propio más la altura mínima el control
   se iba a 48 px. Con relleno cero la caja la define exactamente la altura del
   sistema y el texto se centra por flexbox. */
body.pk-sitio .btn-primary-outlined,
body.pk-sitio .hz-call-popup-js,
body.pk-sitio .hz-email-popup-js,
body.pk-sitio .hz-btn-whatsapp,
body.pk-sitio .btn.btn-primary-outlined,
body.pk-sitio .houzez-submit-button,
body.pk-sitio .houzez-contact-form-js {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
  min-height: var(--pk-alto-ctl) !important;
  padding-block: 0;
  line-height: 1.2;
  border-radius: var(--pk-r);
}

/* --- Botones ------------------------------------------------------------ */

body.pk-sitio .btn,
body.pk-sitio .button,
body.pk-sitio input[type="submit"],
body.pk-sitio button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-e2);
  min-height: var(--pk-alto-ctl);
  padding: 0 var(--pk-e5);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
  line-height: 1;
  border-radius: var(--pk-r);
  border: 1px solid transparent;
  text-align: center;
  transition: background var(--pk-t), border-color var(--pk-t), color var(--pk-t), transform var(--pk-t);
}
body.pk-sitio .btn-primary,
body.pk-sitio input[type="submit"],
body.pk-sitio button[type="submit"],
body.pk-sitio .btn-primary-outlined:hover {
  background: var(--pk-primario);
  border-color: var(--pk-primario);
  color: #fff;
}
body.pk-sitio .btn-primary:hover,
body.pk-sitio input[type="submit"]:hover,
body.pk-sitio button[type="submit"]:hover {
  background: var(--pk-primario-osc);
  border-color: var(--pk-primario-osc);
  color: #fff;
}
body.pk-sitio .btn-secondary,
body.pk-sitio .btn-default,
body.pk-sitio .btn-outline {
  background: var(--pk-n0);
  border-color: var(--pk-n200);
  color: var(--pk-txt);
}
body.pk-sitio .btn-secondary:hover,
body.pk-sitio .btn-default:hover,
body.pk-sitio .btn-outline:hover { border-color: var(--pk-n400); background: var(--pk-n25); }
body.pk-sitio .btn:active { transform: translateY(1px); }

/* --- 5. Acceso y recuperación (wp-login.php) ---------------------------- */

body.login {
  background: var(--pk-n50);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.login #login { width: 100%; max-width: 400px; padding: var(--pk-e12) var(--pk-e5); }
body.login h1 a {
  background-image: none !important;
  width: auto !important; height: auto !important;
  text-indent: 0 !important;
  font-size: var(--pk-fs-xl) !important;
  font-weight: var(--pk-fw-fuerte);
  color: var(--pk-primario) !important;
  letter-spacing: -.02em;
  line-height: 1.1;
}
body.login #login form {
  background: var(--pk-n0);
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-lg);
  box-shadow: var(--pk-s2);
  padding: var(--pk-e6);
  margin-top: var(--pk-e5);
}
body.login #login form label { font-size: var(--pk-fs-sm); font-weight: var(--pk-fw-semi); color: var(--pk-txt); }
body.login #login form input[type="text"],
body.login #login form input[type="password"],
body.login #login form input[type="email"] {
  min-height: var(--pk-alto-ctl);
  padding: var(--pk-e2) var(--pk-e3);
  font-size: var(--pk-fs-base);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r);
  box-shadow: none;
}
body.login #login form input:focus {
  border-color: var(--pk-navy);
  box-shadow: var(--pk-foco);
  outline: none;
}
body.login .wp-pwd .button.wp-hide-pw {
  min-height: var(--pk-alto-ctl); min-width: var(--pk-alto-ctl);
  display: inline-flex; align-items: center; justify-content: center;
}
body.login #login .button-primary {
  background: var(--pk-primario);
  border-color: var(--pk-primario);
  border-radius: var(--pk-r);
  min-height: var(--pk-alto-ctl);
  padding-inline: var(--pk-e5);
  font-weight: var(--pk-fw-semi);
  text-shadow: none;
  box-shadow: none;
  float: none; width: 100%;
}
body.login #login .button-primary:hover { background: var(--pk-primario-osc); border-color: var(--pk-primario-osc); }
body.login #login #nav,
body.login #login #backtoblog {
  padding-inline: 0;
  margin-top: var(--pk-e4);
  font-size: var(--pk-fs-sm);
}
body.login #login #nav a,
body.login #login #backtoblog a { color: var(--pk-txt-sec); }
body.login #login #nav a:hover,
body.login #login #backtoblog a:hover { color: var(--pk-primario); }
body.login .message,
body.login #login_error {
  border-radius: var(--pk-r);
  border-left-width: 4px;
  box-shadow: none;
  font-size: var(--pk-fs-sm);
}
body.login #login_error { border-left-color: var(--pk-error); }
body.login .message { border-left-color: var(--pk-navy); }
body.login :focus-visible { outline: 2px solid var(--pk-navy); outline-offset: 2px; }

/* --- 6. Panel de usuario ------------------------------------------------ */

body.pk-sitio .dashboard-content,
body.pk-sitio .dashboard-right {
  background: var(--pk-n50);
}
body.pk-sitio .dashboard-content { padding: var(--pk-e6); }
@media (max-width: 767.98px) {
  body.pk-sitio .dashboard-content { padding: var(--pk-e4); }
}

body.pk-sitio .dashboard-content .heading h2,
body.pk-sitio .dashboard-content > .heading-text h2 {
  font-size: var(--pk-fs-xl);
  font-weight: var(--pk-fw-fuerte);
  color: var(--pk-tinta);
  letter-spacing: -.01em;
  line-height: var(--pk-lh-ajustado);
}

/* Navegación lateral del panel. */
body.pk-sitio .dashboard-sidebar,
body.pk-sitio .dashboard-nav {
  background: var(--pk-n0);
  border-right: 1px solid var(--pk-n100);
}
body.pk-sitio .dashboard-nav a,
body.pk-sitio .dashboard-sidebar a {
  display: flex; align-items: center; gap: var(--pk-e3);
  min-height: var(--pk-alto-ctl);
  padding: var(--pk-e2) var(--pk-e4);
  border-radius: var(--pk-r-sm);
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
  transition: background var(--pk-t), color var(--pk-t);
}
body.pk-sitio .dashboard-nav a:hover,
body.pk-sitio .dashboard-sidebar a:hover { background: var(--pk-n50); color: var(--pk-txt); }
body.pk-sitio .dashboard-nav li.active > a,
body.pk-sitio .dashboard-sidebar li.active > a,
body.pk-sitio .dashboard-nav a[aria-current="page"] {
  background: var(--pk-primario-suave);
  color: var(--pk-primario-osc);
  font-weight: var(--pk-fw-semi);
}

/* --- 7. Tablas y tarjetas del panel ------------------------------------- */

body.pk-sitio .houzez-data-content,
body.pk-sitio .houzez-data-table,
body.pk-sitio .stats-box,
body.pk-sitio .dashboard-content .card {
  background: var(--pk-n0);
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-lg);
  box-shadow: none;
  overflow: hidden;
}
body.pk-sitio .houzez-data-table table { margin: 0; }
body.pk-sitio .houzez-data-table thead th {
  background: var(--pk-n25);
  border-bottom: 1px solid var(--pk-n100);
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-xs);
  font-weight: var(--pk-fw-fuerte);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--pk-e3) var(--pk-e4);
  white-space: nowrap;
}
body.pk-sitio .houzez-data-table tbody td {
  border-top: 1px solid var(--pk-n100);
  padding: var(--pk-e4);
  font-size: var(--pk-fs-base);
  color: var(--pk-txt);
  vertical-align: middle;
}
body.pk-sitio .houzez-data-table tbody tr:hover td { background: var(--pk-n25); }
body.pk-sitio .houzez-data-table img { border-radius: var(--pk-r-sm); }
body.pk-sitio .houzez-data-table a { color: var(--pk-txt); font-weight: var(--pk-fw-semi); }
body.pk-sitio .houzez-data-table a:hover { color: var(--pk-primario); }

/* La tabla se desplaza dentro de su caja; la página nunca. */
body.pk-sitio .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- 8. Estados vacíos y mensajes --------------------------------------- */

body.pk-sitio .stats-box {
  padding: var(--pk-e10) var(--pk-e6);
  text-align: center;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
}
/* Las fichas de cifras de /estadisticas/ también llevan `.stats-box` (con
   `bg-light`), y el centrado pensado para los estados vacíos les dejaba el
   rótulo centrado sobre una cifra alineada a la izquierda; a 390 se nota
   (medido el 21-09-2026 con una cuenta de anunciante). Cifra y rótulo, ambos
   a la izquierda. */
body.pk-sitio .stats-box.bg-light { text-align: left; padding: var(--pk-e4); }
body.pk-sitio .alert {
  border-radius: var(--pk-r);
  border: 1px solid var(--pk-n200);
  border-left-width: 4px;
  padding: var(--pk-e3) var(--pk-e4);
  font-size: var(--pk-fs-base);
  box-shadow: none;
}
body.pk-sitio .alert-success { background: var(--pk-exito-suave); border-left-color: var(--pk-exito); color: #14532d; }
body.pk-sitio .alert-danger,
body.pk-sitio .alert-error   { background: var(--pk-error-suave); border-left-color: var(--pk-error); color: #7f1d1d; }
body.pk-sitio .alert-warning { background: var(--pk-aviso-suave); border-left-color: var(--pk-aviso); color: #713f12; }
body.pk-sitio .alert-info    { background: var(--pk-n50); border-left-color: var(--pk-navy); color: var(--pk-txt); }

/* --- 9. Utility-page introductions ------------------------------------- */

:where(body.pk-sitio) .pk-page-intro {
  padding-block: clamp(var(--pk-e8), 5vw, var(--pk-e12));
  background:
    linear-gradient(135deg, rgba(237,0,40,.06), rgba(255,255,255,0) 58%),
    var(--pk-n25);
  border-bottom: 1px solid var(--pk-n100);
}
:where(body.pk-sitio) .pk-page-intro .container {
  width: min(100% - (2 * var(--pk-pad)), var(--pk-ancho));
  max-width: var(--pk-ancho);
  padding-inline: 0;
}
:where(body.pk-sitio) .pk-page-intro__eyebrow {
  margin: 0 0 var(--pk-e2);
  color: var(--pk-primario);
  font-size: var(--pk-fs-xs);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: .12em;
  text-transform: uppercase;
}
:where(body.pk-sitio) .pk-page-intro h1 {
  max-width: 760px;
  margin: 0;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-hero);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: -.025em;
  line-height: var(--pk-lh-ajustado);
}
:where(body.pk-sitio) .pk-page-intro__deck {
  max-width: 680px;
  margin: var(--pk-e3) 0 0;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-lg);
  line-height: var(--pk-lh-normal);
}
:where(body.pk-sitio) .pk-page-intro__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pk-alto-ctl);
  margin-top: var(--pk-e5);
  padding-inline: var(--pk-e5);
  color: var(--pk-n0);
  background: var(--pk-primario);
  border: 1px solid var(--pk-primario);
  border-radius: var(--pk-r);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
  text-decoration: none;
  transition: background var(--pk-t), border-color var(--pk-t), transform var(--pk-t);
}
:where(body.pk-sitio) .pk-page-intro__action:hover,
:where(body.pk-sitio) .pk-page-intro__action:focus-visible {
  color: var(--pk-n0);
  background: var(--pk-primario-osc);
  border-color: var(--pk-primario-osc);
}
:where(body.pk-sitio) .pk-page-intro__action:active { transform: translateY(1px); }
body.pk-sitio.pk-reset-idle .frontend-submission-page { display: none; }

/* --- 10. Static Elementor pages ---------------------------------------- */

body.pk-sitio.page-id-16650 .elementor-element.elementor-element-5b81e21,
body.pk-sitio.page-id-16941 .elementor-element.elementor-element-125aa3d {
  min-height: clamp(180px, 18vw, 260px);
  background-color: var(--pk-primario);
  background-image:
    linear-gradient(135deg, rgba(69,0,12,.78), rgba(237,0,40,.88)),
    linear-gradient(45deg, transparent 42%, rgba(255,255,255,.08) 42%, rgba(255,255,255,.08) 43%, transparent 43%);
  background-size: auto, 220px 220px;
}
body.pk-sitio.page-id-16650 .elementor-element.elementor-element-5b81e21 .elementor-background-overlay,
body.pk-sitio.page-id-16941 .elementor-element.elementor-element-125aa3d .elementor-background-overlay {
  display: none;
}
body.pk-sitio.page-id-16650 .elementor-element.elementor-element-5b81e21 h1,
body.pk-sitio.page-id-16941 .elementor-element.elementor-element-125aa3d h1 {
  color: var(--pk-n0);
  font-size: var(--pk-fs-hero);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: -.025em;
  line-height: var(--pk-lh-ajustado);
}
body.pk-sitio.page-id-16650 .elementor-element.elementor-element-09038dc,
body.pk-sitio.page-id-16941 .elementor-element.elementor-element-d0b02e7 {
  padding-block: clamp(var(--pk-e8), 5vw, var(--pk-e16));
}

/* --- 11. 404 ------------------------------------------------------------ */

:where(body.pk-sitio) .pk-error-page {
  padding: clamp(var(--pk-e12), 10vw, 120px) var(--pk-pad);
  background:
    radial-gradient(circle at 50% 0, rgba(237,0,40,.08), transparent 48%),
    var(--pk-n25);
}
:where(body.pk-sitio) .pk-error-page__inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
:where(body.pk-sitio) .pk-error-page__code {
  margin: 0 0 var(--pk-e3);
  color: var(--pk-primario);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: .18em;
}
:where(body.pk-sitio) .pk-error-page h1 {
  font-size: var(--pk-fs-hero);
  font-weight: var(--pk-fw-fuerte);
  color: var(--pk-tinta);
  letter-spacing: -.02em;
  line-height: var(--pk-lh-ajustado);
  margin-bottom: var(--pk-e3);
}
:where(body.pk-sitio) .pk-error-page__inner > p:not(.pk-error-page__code) {
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-lg);
  line-height: var(--pk-lh-normal);
}
:where(body.pk-sitio) .pk-error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pk-e3);
  margin-top: var(--pk-e6);
}
:where(body.pk-sitio) .pk-error-page__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pk-alto-ctl);
  padding-inline: var(--pk-e5);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
  text-decoration: none;
}
:where(body.pk-sitio) .pk-error-page__primary {
  color: var(--pk-n0);
  background: var(--pk-primario);
  border-color: var(--pk-primario) !important;
}
:where(body.pk-sitio) .pk-error-page__primary:hover,
:where(body.pk-sitio) .pk-error-page__primary:focus-visible {
  color: var(--pk-n0);
  background: var(--pk-primario-osc);
}
:where(body.pk-sitio) .pk-error-page__secondary {
  color: var(--pk-txt);
  background: var(--pk-n0);
}
:where(body.pk-sitio) .pk-error-page__secondary:hover,
:where(body.pk-sitio) .pk-error-page__secondary:focus-visible {
  color: var(--pk-primario);
  border-color: var(--pk-n400);
}

/* --- 12. Portada -------------------------------------------------------- */

body.pk-sitio.home {
  color: var(--pk-txt);
  background: var(--pk-n0);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.pk-sitio.home .elementor-element-3146293 {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 520px;
  margin: 0;
  padding: 72px var(--pk-pad) 68px;
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(118deg, #260007 0%, #8f0018 50%, var(--pk-primario) 100%);
  box-shadow: none;
}
body.pk-sitio.home .elementor-element-3146293::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.16) 48.2% 48.6%, transparent 48.8%),
    linear-gradient(45deg, transparent 0 72%, rgba(255,255,255,.10) 72.2% 72.5%, transparent 72.7%);
  background-size: 520px 520px, 360px 360px;
}
body.pk-sitio.home .elementor-element-3146293 > .e-con-inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--pk-ancho));
  max-width: var(--pk-ancho);
  margin-inline: auto;
  padding-inline: 0;
  overflow: visible;
}
body.pk-sitio.home .elementor-element-9dd8ce8 .elementor-widget-container::before {
  display: block;
  margin-bottom: var(--pk-e4);
  content: "PROPIEDADES EN GUATEMALA";
  color: rgba(255,255,255,.82);
  font-size: var(--pk-fs-xs);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: .16em;
}
body.pk-sitio.home .elementor-element-3146293 .elementor-element-9dd8ce8 .elementor-heading-title {
  max-width: 850px;
  color: var(--pk-n0);
  font-family: inherit;
  font-size: clamp(3rem, 5vw, 4.25rem);
  font-weight: var(--pk-fw-fuerte);
  line-height: 1.04;
  letter-spacing: -.045em;
}
body.pk-sitio.home .elementor-element-3146293 .elementor-heading-title a { color: inherit; }
body.pk-sitio.home .elementor-element-9dd8ce8 .elementor-widget-container::after {
  display: block;
  max-width: 650px;
  margin-top: var(--pk-e5);
  content: "Compra, alquila o publica una propiedad con asesoría local en cada paso.";
  color: rgba(255,255,255,.9);
  font-size: var(--pk-fs-lg);
  line-height: var(--pk-lh-amplio);
}

body.pk-sitio.home .propeka-discovery {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 64px;
  align-items: center;
  width: min(100%, 960px);
  margin-top: var(--pk-e10);
  padding: var(--pk-e2);
  border: 1px solid rgba(13,35,56,.08);
  border-radius: var(--pk-r-pill);
  background: var(--pk-n0);
  box-shadow: 0 16px 40px rgba(28,0,5,.22);
}
body.pk-sitio.home .propeka-discovery-item {
  min-width: 0;
  padding: 10px 22px;
  color: var(--pk-txt);
  border-right: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-pill);
  text-decoration: none;
}
body.pk-sitio.home .propeka-discovery-item:hover,
body.pk-sitio.home .propeka-discovery-item:focus-visible {
  color: var(--pk-txt);
  background: var(--pk-n50);
}
body.pk-sitio.home .propeka-discovery-item span {
  display: block;
  margin-bottom: 2px;
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-fuerte);
}
body.pk-sitio.home .propeka-discovery-item small {
  display: block;
  overflow: hidden;
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-xs);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.pk-sitio.home .propeka-discovery-search {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--pk-primario);
  color: var(--pk-n0);
  transition: background var(--pk-t), transform var(--pk-t);
}
body.pk-sitio.home .propeka-discovery-search:hover,
body.pk-sitio.home .propeka-discovery-search:focus-visible {
  color: var(--pk-n0);
  background: var(--pk-primario-osc);
  transform: scale(1.04);
}
body.pk-sitio.home .propeka-discovery-search svg { width: 20px; height: 20px; }

body.pk-sitio.home .elementor-element-5a33796 {
  padding-top: 72px;
  padding-bottom: var(--pk-e4);
}
body.pk-sitio.home .elementor-element-5a33796 > .e-con-inner,
body.pk-sitio.home .elementor-element-be2c721 > .e-con-inner,
body.pk-sitio.home .elementor-element-84a2184 > .e-con-inner,
body.pk-sitio.home .elementor-element-7ef3134 > .e-con-inner,
body.pk-sitio.home .elementor-element-c744991 > .e-con-inner {
  width: min(100%, var(--pk-ancho));
  max-width: var(--pk-ancho);
}
body.pk-sitio.home .propeka-featured-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pk-e8);
  width: 100%;
  margin-bottom: var(--pk-e6);
}
body.pk-sitio.home .propeka-eyebrow {
  display: block;
  margin-bottom: var(--pk-e2);
  color: var(--pk-primario);
  font-size: var(--pk-fs-xs);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: .13em;
  text-transform: uppercase;
}
body.pk-sitio.home .propeka-featured-heading h2 {
  margin: 0;
  color: var(--pk-tinta);
  font-size: clamp(1.875rem, 2.8vw, 2.5rem);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: -.035em;
}
body.pk-sitio.home .propeka-featured-heading p {
  max-width: 620px;
  margin: var(--pk-e2) 0 0;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  line-height: var(--pk-lh-amplio);
}
body.pk-sitio.home .propeka-text-link {
  flex: none;
  color: var(--pk-txt);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-fuerte);
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.pk-sitio.home .propeka-text-link:hover { color: var(--pk-primario); }
body.pk-sitio.home .elementor-element-be2c721,
body.pk-sitio.home .elementor-element-7ef3134 {
  min-height: 0;
  margin: 0;
  padding-top: var(--pk-e10);
  padding-bottom: var(--pk-e4);
}
body.pk-sitio.home .elementor-element-be2c721 .elementor-heading-title,
body.pk-sitio.home .elementor-element-7ef3134 .elementor-heading-title {
  color: var(--pk-tinta);
  font-family: inherit;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: -.035em;
}

body.pk-sitio.home .elementor-element-23d2b4b6 {
  margin-top: var(--pk-e8);
  padding: 72px var(--pk-pad);
  /* Elementor conserva una imagen y un overlay con !important en esta página
     heredada; estas dos declaraciones son el límite de esa excepción. */
  background-color: var(--pk-primario-suave) !important;
  background-image: none !important;
}
body.pk-sitio.home .elementor-element-23d2b4b6 > .elementor-container {
  max-width: var(--pk-ancho);
}
body.pk-sitio.home .elementor-element-23d2b4b6 > .elementor-background-overlay,
body.pk-sitio.home .elementor-element-1165713 > .elementor-background-overlay {
  display: none !important;
}
body.pk-sitio.home .elementor-element-23d2b4b6 .houzez_section_title {
  color: var(--pk-tinta) !important;
  font-family: inherit;
  font-size: clamp(2.125rem, 4vw, 3.125rem);
  font-weight: var(--pk-fw-fuerte);
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.pk-sitio.home .elementor-element-23d2b4b6 .houzez_section_subtitle {
  color: var(--pk-txt-sec) !important;
  font-size: var(--pk-fs-base);
  line-height: 1.7;
}
body.pk-sitio.home .elementor-element-725333c6 > .elementor-widget-wrap {
  padding: 28px;
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-xl);
  background: var(--pk-n0);
  box-shadow: var(--pk-s2);
}

body.pk-sitio.home .elementor-element-1165713 {
  padding: 72px var(--pk-pad);
  background-color: var(--pk-n50) !important;
  background-image: none !important;
}
body.pk-sitio.home .elementor-element-7de4c5ee > .elementor-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pk-e6);
  max-width: var(--pk-ancho);
}
body.pk-sitio.home .elementor-element-7de4c5ee > .elementor-container > .elementor-column {
  width: 100%;
}
body.pk-sitio.home .elementor-element-a5453 {
  grid-column: 1 / -1;
  margin-bottom: var(--pk-e4);
  text-align: center;
}
body.pk-sitio.home .elementor-element-a5453 .elementor-widget-divider {
  display: none;
}
body.pk-sitio.home .elementor-element-a5453 .houzez_section_title_wrap {
  text-align: center;
}
body.pk-sitio.home .elementor-element-a5453 .houzez_section_title {
  color: var(--pk-tinta) !important;
  font-size: clamp(2.125rem, 4vw, 3rem);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: -.04em;
}
body.pk-sitio.home .elementor-element-a5453 .houzez_section_subtitle {
  max-width: 680px;
  margin-inline: auto;
  color: var(--pk-txt-sec) !important;
  line-height: 1.7;
}
body.pk-sitio.home .elementor-element-2e6e8b69 > .elementor-widget-wrap,
body.pk-sitio.home .elementor-element-693ea993 > .elementor-widget-wrap,
body.pk-sitio.home .elementor-element-774ff0a > .elementor-widget-wrap {
  height: 100%;
  padding: 30px;
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r-lg);
  background: var(--pk-n0);
}
body.pk-sitio.home .elementor-element-7de4c5ee .elementor-heading-title {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--pk-e4);
  border-radius: 50%;
  background: var(--pk-primario) !important;
  color: var(--pk-n0) !important;
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-fuerte);
  line-height: 44px;
}
body.pk-sitio.home .elementor-element-7de4c5ee .houzez_section_title {
  color: var(--pk-tinta) !important;
  font-size: var(--pk-fs-lg);
  font-weight: var(--pk-fw-fuerte);
  line-height: 1.3;
}
body.pk-sitio.home .elementor-element-7de4c5ee .houzez_section_subtitle {
  color: var(--pk-txt-sec) !important;
  font-size: var(--pk-fs-sm);
  line-height: 1.65;
}

body.pk-sitio.home .footer-top-wrap {
  padding-top: 54px;
  padding-bottom: 42px;
  background: #9d001b;
}
body.pk-sitio.home .footer-bottom-wrap {
  padding-block: var(--pk-e5);
  border-top: 1px solid rgba(255,255,255,.14);
  background: #790015;
}
body.pk-sitio.home .footer-top-wrap,
body.pk-sitio.home .footer-top-wrap h1,
body.pk-sitio.home .footer-top-wrap h2,
body.pk-sitio.home .footer-top-wrap h3,
body.pk-sitio.home .footer-top-wrap p,
body.pk-sitio.home .footer-top-wrap a,
body.pk-sitio.home .footer-bottom-wrap,
body.pk-sitio.home .footer-bottom-wrap a {
  color: var(--pk-n0);
}

@media (max-width: 1024px) {
  body.pk-sitio.home .elementor-element-3146293 {
    min-height: 470px;
    padding-top: var(--pk-e16);
  }
  body.pk-sitio.home .propeka-discovery {
    grid-template-columns: 1fr 1fr 1.1fr 60px;
  }
  body.pk-sitio.home .elementor-element-27be6082 > .elementor-container {
    display: flex;
    flex-direction: column;
  }
  body.pk-sitio.home .elementor-element-27be6082 > .elementor-container > .elementor-column {
    width: 100%;
  }
  body.pk-sitio.home .elementor-element-725333c6 {
    width: 100%;
    max-width: 680px;
    margin: var(--pk-e8) auto 0;
  }
  body.pk-sitio.home .elementor-element-7de4c5ee > .elementor-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  body.pk-sitio.home .elementor-element-3146293 {
    min-height: 0;
    padding: 52px var(--pk-pad) 48px;
  }
  body.pk-sitio.home .elementor-element-3146293 .elementor-element-9dd8ce8 .elementor-heading-title {
    font-size: clamp(2.25rem, 10.2vw, 2.625rem);
    line-height: 1.06;
  }
  body.pk-sitio.home .elementor-element-9dd8ce8 .elementor-widget-container::before {
    margin-bottom: var(--pk-e3);
    font-size: var(--pk-fs-xs);
  }
  body.pk-sitio.home .elementor-element-9dd8ce8 .elementor-widget-container::after {
    margin-top: var(--pk-e4);
    font-size: var(--pk-fs-base);
  }
  body.pk-sitio.home .propeka-discovery {
    grid-template-columns: 1fr 1fr;
    gap: var(--pk-e1);
    margin-top: var(--pk-e8);
    border-radius: var(--pk-r-xl);
    box-shadow: 0 12px 28px rgba(28,0,5,.18);
  }
  body.pk-sitio.home .propeka-discovery-item {
    min-height: 68px;
    padding: 10px var(--pk-e3);
    border: 0;
    border-radius: var(--pk-r-lg);
  }
  body.pk-sitio.home .propeka-discovery-search {
    width: 100%;
    height: 52px;
    margin: 0;
    border-radius: var(--pk-r-lg);
  }
  body.pk-sitio.home .elementor-element-5a33796 {
    padding-top: var(--pk-e12);
  }
  body.pk-sitio.home .propeka-featured-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--pk-e4);
    margin-bottom: var(--pk-e5);
  }
  body.pk-sitio.home .propeka-featured-heading h2 { font-size: var(--pk-fs-hero); }
  body.pk-sitio.home .elementor-element-be2c721,
  body.pk-sitio.home .elementor-element-7ef3134 {
    padding-top: var(--pk-e8);
  }
  body.pk-sitio.home .elementor-element-23d2b4b6 {
    margin-top: var(--pk-e10);
    padding-block: var(--pk-e16);
  }
  body.pk-sitio.home .elementor-element-725333c6 > .elementor-widget-wrap {
    padding: var(--pk-e5);
    border-radius: var(--pk-r-lg);
  }
  body.pk-sitio.home .elementor-element-1165713 {
    padding-block: var(--pk-e16);
  }
  body.pk-sitio.home .elementor-element-2e6e8b69 > .elementor-widget-wrap,
  body.pk-sitio.home .elementor-element-693ea993 > .elementor-widget-wrap,
  body.pk-sitio.home .elementor-element-774ff0a > .elementor-widget-wrap {
    padding: var(--pk-e6);
  }
  body.pk-sitio.home .footer-top-wrap {
    padding-top: var(--pk-e10);
    padding-bottom: var(--pk-e6);
  }
}

/* --- 12. Contacto ------------------------------------------------------ */

/* El editor heredado añadía 50 px en los cuatro lados del texto de entrada,
   duplicando el ritmo vertical de la sección y estrechando el contenido. */
body.pk-sitio.page-id-16941
  .elementor-element-8ff1404
  > .elementor-widget-container {
  padding: var(--pk-e5) 0 0;
}

/* --- 13. Utilidades ----------------------------------------------------- */

/* Imágenes de contenido: nunca desbordan ni deforman. */
body.pk-sitio img { max-width: 100%; height: auto; }
/* =========================================================================
   14. Pie del sitio
   =========================================================================
   Componente propio, no el pie de la demo de Houzez. El heredado tenia dos
   grupos de contenido, una ubicacion de menu vacia y un bloque de logotipo
   centrado: 573,8 px en escritorio y 778 en movil frente a los 436,8 y 472 de
   la referencia, y sin navegacion util. Ahora se construye con el menu
   `footer-menu` —descubrimiento, publicacion, empresa, legal y contacto— y
   adopta el ritmo medido: columnas compactas en escritorio y acordeones en
   movil, sin rellenar con espacio en blanco.
   ========================================================================= */
:where(body.pk-sitio) .pk-pie {
  margin-top: var(--pk-e12);
  color: var(--pk-txt-sec);
  background: var(--pk-n25);
  border-top: 1px solid var(--pk-n100);
  font-size: var(--pk-fs-sm);
  line-height: 22px;
}

:where(body.pk-sitio) .pk-pie__interior { padding-block: 48px 0; }

/*
 * Batch C footer regroup added a fifth menu group ("Mi cuenta"), so the
 * footer now carries six columns total: five from the `footer-menu` nav menu
 * plus the one hard-coded "Contacto" block `propeka-pie.php` renders
 * separately. Was `repeat(5, …)`; a sixth grid item with only five explicit
 * tracks would auto-place onto an orphaned second row instead of sitting
 * beside the rest.
 */
/*
 * Búsquedas populares: la banda que va justo encima del pie.
 *
 * Copiada en intención de «Populaire steden» de funda, medida el 10-09-2026:
 * una rejilla ancha de enlaces reales encima del pie, sobre fondo claro y
 * separada del pie por un filete. Es navegación de verdad —lleva a páginas que
 * ya existen— y no decoración: nuestro pie sólo ofrecía «Todas las
 * propiedades», que obliga a filtrar a mano lo que ya está publicado.
 *
 * `auto-fill` con mínimo de 210 px: con doce enlaces caben cuatro por fila en
 * escritorio y bajan a dos y a una sin dejar huérfanas, porque el número de
 * entradas depende de qué páginas existan y no es fijo.
 */
:where(body.pk-sitio) .pk-populares {
  padding: 40px 0 32px;
  border-top: 1px solid var(--pk-n200);
  background: var(--pk-n0);
}

:where(body.pk-sitio) .pk-populares__titulo {
  margin: 0 0 16px;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
  line-height: 20px;
}

:where(body.pk-sitio) .pk-populares__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(body.pk-sitio) .pk-populares__rejilla a {
  /* Lista de navegación, no un enlace dentro de una frase: la excepción de
     WCAG 2.5.8 para enlaces en línea no aplica y medía 19 px de alto. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--pk-enlace);
  font-size: var(--pk-fs-sm);
  line-height: 22px;
  text-decoration: none;
}

:where(body.pk-sitio) .pk-populares__rejilla a:hover,
:where(body.pk-sitio) .pk-populares__rejilla a:focus-visible {
  color: var(--pk-primario-osc);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*
 * El pie, en gris de verdad. Estaba en #fbfcfd, a un pelo del blanco de la
 * pagina, asi que no se leia como una zona distinta sino como mas pagina.
 * funda usa #f2f2f2 y por eso su pie se ve como un pie.
 */
:where(body.pk-sitio) .pk-pie { background: var(--pk-n100); }

/* Cuatro columnas, no seis. Con seis en 1200 px tocaban a ~165 px y cuatro de
   las seis partían el texto en dos líneas («Todas las propiedades»,
   «Búsquedas guardadas», «Términos y condiciones», la dirección): el pie se
   leía como un amasijo. El 09-09-2026 se retiró el grupo «Mi cuenta» —sus
   cuatro enlaces exigen sesión y el pie no distingue si la hay, así que a un
   visitante anónimo, que es la mayoría, le ofrecían un muro de acceso— y la
   columna «Contacto», que era un solo correo repetido del enlace que ya
   estaba en el grupo «Propeka». Quedan Buscar · Publicar · Propeka · Legal. */
:where(body.pk-sitio) .pk-pie__rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 40px;
}

:where(body.pk-sitio) .pk-pie__titulo {
  margin: 0 0 12px;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
  line-height: 20px;
}

/* El disparador es un `<button>` real para que el acordeon de movil funcione
   con teclado. En escritorio no hay nada que plegar, asi que se reinicia por
   completo y se lee como el titulo que sustituye. */
:where(body.pk-sitio) .pk-pie__disparo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

/* El disparador del acordeón del pie es un `button` sin borde ni fondo, y en
   la práctica llegaba al foco de teclado sin anillo visible: medido con Tab,
   `:focus-visible` daba `outline-style: none`. Se le da el anillo del sitio de
   forma explícita en lugar de depender de la regla global. */
:where(body.pk-sitio) .pk-pie__disparo:focus-visible {
  outline: 2px solid var(--pk-enlace);
  outline-offset: 2px;
  border-radius: var(--pk-r-sm);
}

:where(body.pk-sitio) .pk-pie__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(body.pk-sitio) .pk-pie__lista li + li { margin-top: 8px; }

/*
 * Los enlaces del pie en `--pk-enlace`, no en gris.
 *
 * Estaban en `--pk-txt-sec`, el mismo gris del texto secundario, asi que una
 * columna entera de enlaces se leia como una lista de palabras muertas: nada
 * parecia pulsable. Medido en la referencia el 10-09-2026, funda pinta TODOS
 * los enlaces de su pie en su azul de marca sobre fondo gris. Es el mismo
 * arreglo que D-61 hizo en la tarjeta, aplicado donde mas enlaces hay juntos.
 */
/*
 * ...pero ese azul no llega al minimo de contraste SOBRE este gris.
 *
 * Medido el 2026-09-21 con los colores CALCULADOS del DOM, no muestreando
 * pixeles: `--pk-enlace` (#5366c9) sobre `--pk-n100` (rgb 233,237,241) da
 * **4.34:1**, y este texto son 14 px, que exige 4.5:1. Fallaban los 13 enlaces
 * de navegacion del pie y el pie sale en TODAS las paginas, asi que era el
 * defecto de contraste mas repetido del sitio.
 *
 * Ni el gris ni la decision de arriba cambian: el pie sigue siendo una zona
 * distinta y sus enlaces siguen siendo azules. Lo que se ajusta es el tono, y
 * solo aqui: un 6 % mas oscuro, #4e60bd, que da **4.78:1** y a simple vista es
 * el mismo indigo. Sobre blanco `--pk-enlace` ya cumple, asi que el token
 * global no se toca.
 *
 * Se cambia el valor de ESTA regla en vez de anadir otra que la gane: una regla
 * nueva con `body.pk-sitio` incumple B-1 —la capa generica no puede ganarle a
 * su propio componente, y `tools/validate-source.ps1` lo bloquea— y una con
 * `:where()` empata en peso y dependeria del orden del archivo. Los otros seis
 * enlaces del pie, redes y linea legal, son grises a proposito
 * (rgb 86,101,115), ya cumplen, y no entran aqui.
 *
 * Medido despues, en una ventana real: los 13 pasan a 4.78:1, cero por debajo
 * del minimo, y los seis grises quedan intactos.
 */
:where(body.pk-sitio) .pk-pie__lista a {
  display: inline-block;
  /* Caja de 24 px: el mismo mínimo que ya tienen las búsquedas populares del
     pie (medido el 21-09-2026: 19 px aquí, 24 px allí). */
  min-height: 24px;
  line-height: 24px;
  color: #4e60bd;
  text-decoration: none;
}

:where(body.pk-sitio) .pk-pie__lista a:hover,
:where(body.pk-sitio) .pk-pie__lista a:focus-visible {
  color: var(--pk-primario-osc);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(body.pk-sitio) .pk-pie__dato { color: var(--pk-txt-ter); }

:where(body.pk-sitio) .pk-pie__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  gap: 16px;
  /* n200, no n100: desde que el pie es n100 el filete era del mismo color
     que el fondo y la fila del copyright flotaba bajo las columnas sin nada
     que la separara. */
  border-top: 1px solid var(--pk-n200);
  flex-wrap: wrap;
}

/* El correo baja aquí desde su antigua columna. Va junto al copyright porque
   es un dato de cierre, no una sección: una columna entera para un enlace
   obligaba a las otras cinco a estrecharse. */
:where(body.pk-sitio) .pk-pie__sep { margin-inline: 6px; color: var(--pk-n300); }

:where(body.pk-sitio) .pk-pie__correo {
  color: var(--pk-txt-sec);
  text-decoration: none;
}
:where(body.pk-sitio) .pk-pie__correo:hover { color: var(--pk-primario-osc); text-decoration: underline; }

:where(body.pk-sitio) .pk-pie__aviso {
  margin: 0;
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-sm);
  line-height: 20px;
}

/* La fila de redes envuelve. Hasta el 03-08-2026 el pie no llegaba a
   pintarla —buscaba las claves equivocadas de Houzez—, asi que nunca se
   habia medido; con las cinco redes reales de Propeka la fila mide 360 px
   dentro de un contenedor de 336 y desbordaba 12 px a lo ancho a 360 px de
   viewport. Envolver es lo correcto: el numero de redes lo decide la
   configuracion, no la hoja de estilos. */
:where(body.pk-sitio) .pk-pie__redes {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  /* Sin hueco entre filas: la altura de toque del enlace ya las separa. */
  gap: 0 20px;
  list-style: none;
}

/* Medido en staging a 390 px: los enlaces salian a 62x19 px. La altura de
   toque minima de WCAG 2.5.8 (AA) es 24 px, y 19 no llega. Se lleva la caja
   a 44 px —el alto de control del sistema, `--pk-alto-ctl`— en vez de a 24,
   porque es la misma medida que ya usan los botones del producto y aqui no
   cuesta nada: la fila del pie no compite por espacio vertical. El texto no
   cambia de tamano ni de posicion; solo crece el area pulsable. */
:where(body.pk-sitio) .pk-pie__redes a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pk-alto-ctl);
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
  text-decoration: none;
}

:where(body.pk-sitio) .pk-pie__redes a:hover { color: var(--pk-primario-osc); }

/* El pie heredado de Houzez desaparece: su marcado sigue en el DOM del padre
   en las rutas que no pasan por el gancho, y dos pies seguidos serian peor
   que uno feo. */
body.pk-sitio .footer-wrap,
body.pk-sitio footer.footer-wrap-v1 { display: none !important; }

/* --- Acordeones del pie en movil ---------------------------------------
   El script convierte cada grupo en un revelador. Sin JavaScript el pie se
   queda abierto, que es el comportamiento por defecto: nada se pierde. */
@media (max-width: 767.98px) {
  :where(body.pk-sitio) .pk-pie__interior { padding-block: 8px 0; }

  :where(body.pk-sitio) .pk-pie__rejilla {
    display: block;
    padding-bottom: 8px;
  }

  :where(body.pk-sitio) .pk-pie__grupo {
    border-bottom: 1px solid var(--pk-n100);
  }

  :where(body.pk-sitio) .pk-pie__titulo { margin: 0; }

  :where(body.pk-sitio) .pk-pie__disparo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    gap: 12px;
    font-size: var(--pk-fs-base);
    line-height: 22px;
    cursor: pointer;
  }

  :where(body.pk-sitio) .pk-pie__disparo::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--pk-t);
  }

  :where(body.pk-sitio) .pk-pie__disparo[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
  }

  :where(body.pk-sitio) .pk-pie__lista[hidden] { display: none; }
  :where(body.pk-sitio) .pk-pie__lista { padding-bottom: 14px; }

  :where(body.pk-sitio) .pk-pie__base {
    justify-content: flex-start;
    padding-block: 18px;
    gap: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  :where(body.pk-sitio) .pk-pie__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


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

/* =========================================================================
   15. Superficies heredadas de Houzez: cuenta, formularios, comercial
   =========================================================================
   El panel de usuario, la publicacion de anuncios, los planes, las facturas y
   las paginas de confirmacion siguen sirviendose con el marcado del tema. No
   se reescriben plantilla a plantilla: se traduce su vocabulario de
   componentes al sistema de Propeka —mismos tokens, mismos controles, mismo
   marco— para que dejen de parecer otra web.

   Se estilan CLASES DEL TEMA, no de Propeka, y siempre bajo `body.pk-sitio`:
   nada de esto se escapa al area de administracion.
   ========================================================================= */

/* --- Tipografia de pagina ---------------------------------------------- */
body.pk-sitio .page-title-wrap,
body.pk-sitio .breadcrumb-wrap {
  padding-block: var(--pk-e5);
  background: none;
  border-bottom: 1px solid var(--pk-n100);
}

body.pk-sitio .page-title,
body.pk-sitio h1.entry-title {
  color: var(--pk-tinta);
  font-size: var(--pk-fs-xl);
  font-weight: var(--pk-fw-semi);
  line-height: 1.3;
}

/* --- Botones ------------------------------------------------------------ */
body.pk-sitio .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pk-alto-ctl);
  padding-inline: var(--pk-e5);
  gap: var(--pk-e2);
  border-radius: var(--pk-r-sm);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
  line-height: 1.2;
  box-shadow: none;
  transition: background-color var(--pk-t), border-color var(--pk-t), color var(--pk-t);
}

body.pk-sitio .btn-primary,
body.pk-sitio .btn-secondary-color {
  color: #fff;
  background-color: var(--pk-primario);
  border-color: var(--pk-primario);
}

body.pk-sitio .btn-primary:hover,
body.pk-sitio .btn-primary:focus-visible,
body.pk-sitio .btn-secondary-color:hover {
  color: #fff;
  background-color: var(--pk-primario-osc);
  border-color: var(--pk-primario-osc);
}

body.pk-sitio .btn-outline,
body.pk-sitio .btn-grey-outlined,
body.pk-sitio .btn-secondary {
  color: var(--pk-txt-sec);
  background-color: var(--pk-n0);
  border: 1px solid var(--pk-n300);
}

body.pk-sitio .btn-outline:hover,
body.pk-sitio .btn-grey-outlined:hover,
body.pk-sitio .btn-secondary:hover {
  color: var(--pk-tinta);
  border-color: var(--pk-n400);
  background-color: var(--pk-n50);
}

/* --- Campos de formulario ----------------------------------------------- */
body.pk-sitio .form-control,
body.pk-sitio .form-select,
/* `select` a secas: sin esto, un <select> sin clase caía al bloque de campos
   anterior y salía con radio 10px y borde --pk-n200 mientras el <input> de al
   lado salía con 6px y --pk-n300. Medido en la barra de /mis-propiedades/:
   dos esquinas distintas y dos bordes distintos en el mismo renglón. Los
   controles con tratamiento propio y más específico, como el de orden de
   /propiedades/ (`.pk-resultados .pk-orden select`, 0-2-1), siguen ganando. */
body.pk-sitio select,
body.pk-sitio select.form-control,
body.pk-sitio input[type="text"],
body.pk-sitio input[type="email"],
body.pk-sitio input[type="tel"],
body.pk-sitio input[type="url"],
body.pk-sitio input[type="number"],
body.pk-sitio input[type="password"],
body.pk-sitio input[type="search"],
body.pk-sitio textarea {
  min-height: var(--pk-alto-ctl);
  padding: 10px var(--pk-e3);
  border: 1px solid var(--pk-n300);
  border-radius: var(--pk-r-sm);
  color: var(--pk-txt);
  background-color: var(--pk-n0);
  font-size: var(--pk-fs-base);
  line-height: 22px;
  box-shadow: none;
}

body.pk-sitio textarea { min-height: 120px; }

/* Un <select> no toma la `line-height` del bloque de campos: computa `normal`,
   asi que con el mismo relleno salia a 46 px mientras el <input> de al lado
   salia a 44. Dos px de diferencia en el mismo renglon se ven. Se fija la
   altura de control. Los <select multiple> quedan fuera. */
body.pk-sitio select:not([multiple]) { height: var(--pk-alto-ctl); }

body.pk-sitio .form-control:focus,
body.pk-sitio .form-select:focus,
body.pk-sitio input:focus,
body.pk-sitio textarea:focus {
  border-color: var(--pk-navy);
  box-shadow: var(--pk-foco);
  outline: 0;
}

body.pk-sitio .control-label {
  display: block;
  margin-bottom: 6px;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
  line-height: 20px;
}

/* --- Panel de usuario ---------------------------------------------------- */
body.pk-sitio .dashboard-content-wrap,
body.pk-sitio .dashboard-content-inner,
body.pk-sitio .dashboard-content {
  background: none;
}

body.pk-sitio .dashboard-side-wrap,
body.pk-sitio .dashboard-sidebar {
  border-right: 1px solid var(--pk-n100);
  background: var(--pk-n25);
}

body.pk-sitio .dashboard-side-menu a,
body.pk-sitio .dashboard-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--pk-e4);
  gap: var(--pk-e3);
  border-radius: var(--pk-r-sm);
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  text-decoration: none;
}

body.pk-sitio .dashboard-side-menu a:hover,
body.pk-sitio .dashboard-nav a:hover {
  color: var(--pk-tinta);
  background: var(--pk-n50);
}

body.pk-sitio .dashboard-side-menu .active > a,
body.pk-sitio .dashboard-nav .active > a {
  color: var(--pk-primario-osc);
  background: var(--pk-primario-suave);
  font-weight: var(--pk-fw-semi);
}

/* Bloques y tarjetas del panel */
body.pk-sitio .dashboard-content-block,
body.pk-sitio .dashboard-widget,
body.pk-sitio .panel,
body.pk-sitio .card {
  padding: var(--pk-e5);
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r);
  background: var(--pk-n0);
  box-shadow: none;
}

body.pk-sitio .dashboard-content-block h3,
body.pk-sitio .panel-title,
body.pk-sitio .card-title {
  margin-bottom: var(--pk-e4);
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
}

/*
 * «Pagada» en celeste, y verde dos palmos más allá.
 *
 * Houzez pinta el estado de la factura en la TABLA con `bg-info` —el cian de
 * Bootstrap, `rgb(13,202,240)`— y el MISMO estado dentro del detalle con
 * `bg-success`, `rgb(25,135,84)`. Medido el 2026-09-21 en `/facturas/`: dos
 * insignias que dicen «Pagada» en la misma pantalla y no se parecen. El celeste
 * además no significa nada: informativo para un cobro que sí se completó.
 *
 * Se iguala a la verde que esa misma pantalla ya usa, en vez de introducir un
 * tercer verde. El alcance es la tabla de facturas y sólo ella: en `/mi-plan/`
 * `bg-info` rotula el cupo del plan («10 propiedades»), que no es un estado de
 * pago y no debe volverse verde.
 */
body.page-template-user_dashboard_invoices table tbody td .dashboard-label.bg-info {
  background-color: #198754 !important;
  color: #fff;
}

/* --- Tablas: facturas, propiedades, paquetes ---------------------------- */
body.pk-sitio table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--pk-fs-sm);
}

body.pk-sitio table.table th {
  padding: 12px var(--pk-e3);
  border-bottom: 1px solid var(--pk-n200);
  color: var(--pk-txt-sec);
  background: var(--pk-n25);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
  text-align: left;
  white-space: nowrap;
}

body.pk-sitio table.table td {
  padding: 14px var(--pk-e3);
  border-bottom: 1px solid var(--pk-n100);
  color: var(--pk-txt);
  vertical-align: middle;
}

body.pk-sitio table.table tr:hover td { background: var(--pk-n25); }

/* En movil una tabla ancha se desplaza dentro de su caja, no rompe la pagina. */
body.pk-sitio .table-responsive {
  overflow-x: auto;
  border: 1px solid var(--pk-n100);
  border-radius: var(--pk-r);
}

/* --- Avisos y estados ---------------------------------------------------- */
body.pk-sitio .alert {
  padding: var(--pk-e4);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r-sm);
  color: var(--pk-txt);
  font-size: var(--pk-fs-sm);
}

body.pk-sitio .alert-success { color: var(--pk-exito); background: var(--pk-exito-suave); border-color: var(--pk-exito); }
body.pk-sitio .alert-danger,
body.pk-sitio .alert-error { color: var(--pk-error); background: var(--pk-error-suave); border-color: var(--pk-error); }
body.pk-sitio .alert-warning { color: var(--pk-aviso); background: var(--pk-aviso-suave); border-color: var(--pk-aviso); }
body.pk-sitio .alert-info { color: var(--pk-navy); background: var(--pk-n50); }

/* Estado vacio: tarjeta centrada con titulo, explicacion y salida, que es el
   patron que usa la referencia cuando una busqueda no devuelve nada. */
body.pk-sitio .no-results,
body.pk-sitio .not-found,
body.pk-sitio .empty-state {
  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;
}

/* --- Pestanas ------------------------------------------------------------ */
body.pk-sitio .nav-tabs {
  border-bottom: 1px solid var(--pk-n100);
  gap: 4px;
}

body.pk-sitio .nav-tabs .nav-link {
  padding: 12px var(--pk-e4);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
}

body.pk-sitio .nav-tabs .nav-link:hover { color: var(--pk-tinta); }

body.pk-sitio .nav-tabs .nav-link.active {
  color: var(--pk-primario-osc);
  background: none;
  border-bottom-color: var(--pk-primario);
}

/* --- Planes y precios ---------------------------------------------------- */
body.pk-sitio .package-item,
body.pk-sitio .packages-wrap .package {
  padding: var(--pk-e6);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r-lg);
  background: var(--pk-n0);
  box-shadow: none;
}

body.pk-sitio .package-item .package-price,
body.pk-sitio .package-price {
  color: var(--pk-tinta);
  font-size: var(--pk-fs-hero);
  font-weight: var(--pk-fw-fuerte);
  letter-spacing: -.02em;
}

/* --- Objetivos tactiles en movil ---------------------------------------- */
@media (max-width: 767.98px) {
  body.pk-sitio .btn,
  body.pk-sitio .dashboard-side-menu a,
  body.pk-sitio .nav-tabs .nav-link { min-height: 44px; }

  body.pk-sitio .dashboard-side-wrap,
  body.pk-sitio .dashboard-sidebar { border-right: 0; border-bottom: 1px solid var(--pk-n100); }
}

/* =========================================================================
   R-01 · The grey band above the footer
   =========================================================================
   Carlos saw a third surface tone between the page and the footer — two
   horizontal edges where there should be one. Measured on property detail at
   1440, walking every element that paints a background near the footer:

     white   `.pk-ficha`      ends at y=4074
     #F8F8F8 `MAIN.main-wrap` 4074 -> 4122   <- the band
     #FBFCFD `.pk-pie`        4122 ->

   The footer carries `margin-top: 48px`. A margin sits OUTSIDE the element's
   own background, so those 48px expose whatever the parent paints — and the
   parent is Houzez's `main-wrap`, whose default grey is `#F8F8F8`.

   Fixed at the exposed surface rather than by removing the margin: `.pk-pie`
   is global and its separation is wanted on every route, whereas the grey is
   wanted on none. `#F8F8F8` is not in the palette either — the neutral ramp
   uses `#F4F6F8` — so this is one more stray colour leaving the product.
   ========================================================================= */
body.pk-sitio .main-wrap {
  background: var(--pk-n0);
}

/* La banda volvió el 10-09-2026 por otro camino. La sección «Búsquedas
   populares» se añadió como hija directa de `body`, DESPUÉS de `main-wrap`, así
   que el margen de 48 px del pie ya no expone `main-wrap` (blanco) sino `body`
   (#F8F8F8). Medido el 15-09-2026 en /contacto/ y /planes/ a 1440: populares
   termina en y=1172, el pie empieza en y=1220 y nada pinta en medio.

   Cuando la banda precede al pie, su propio relleno (40/32) y el filete
   superior del pie ya separan las dos superficies: el margen sobra. */
:where(body.pk-sitio) .pk-populares + .pk-pie {
  margin-top: 0;
}

/* =========================================================================
   16. Primitivas compartidas: botón, aviso, marca de estado, oculto visual
   =========================================================================
   Estas cuatro piezas estaban definidas sólo en `propeka.css`, que se carga en
   resultados, ficha, portada y directorio pero NO en las pantallas de cuenta.
   El resultado era que cualquier marcado nuevo del panel —publicar, editar,
   facturas— salía con botones sin estilo.

   Se promueven aquí, en la capa de sitio, porque son primitivas del sistema y
   no de una página.

   `--pk-r-md` no existe en la hoja de tokens: la definición original de
   `.pk-aviso` lo usaba y el radio caía a 0. Aquí se usa `--pk-r`.

   -------------------------------------------------------------------------
   B-1 · POR QUÉ ESTAS PRIMITIVAS VAN EN `:where(body.pk-sitio)`
   -------------------------------------------------------------------------
   Tres veces una regla de componente perdió contra una regla de esta hoja: el
   filete rojo de «Todos los filtros», los rótulos del panel a 1,73:1 y el caso
   B-04. No eran accidentes: eran el mismo defecto de arquitectura.

   Medido sobre las cinco hojas propias: **32 conflictos reales**, todos con la
   misma forma —`body.pk-sitio .pk-COMPONENTE` a (0,2,1) o (0,3,1) contra la
   regla del componente a (0,1,0) o (0,2,0)—. La capa genérica ganaba a la capa
   específica, que es justo al revés de lo que debe pasar.

   Nótese además que la nota original de arriba decía que «sus reglas son las
   mismas, así que la cascada no cambia nada». **No lo eran**: `.pk-btn` fijaba
   `min-height: var(--pk-alto-ctl)` aquí y `44px` allí, y `.pk-btn--fantasma`
   usaba `--pk-txt-sec` aquí y `--pk-navy` allí. La versión de `propeka.css`
   llevaba desde entonces sin renderizarse nunca.

   `:where()` aporta **cero** especificidad y no cambia a qué elementos alcanza:

     - esta hoja se carga DESPUÉS de `propeka.css` —comprobado en el documento,
       no supuesto—, así que a igualdad de especificidad estas primitivas siguen
       ganando y el render no se mueve ni un píxel;
     - pero una regla contextual de componente, como
       `.pk-resultados .pk-btn--secundario` a (0,2,0), pasa a ganar a ésta, que
       ahora es (0,1,0). Que es lo que debió ocurrir siempre.

   La escalada `body.pk-sitio` SÍ se conserva en los otros 466 selectores de
   esta hoja: los que visten superficies de Houzez, Bootstrap y Elementor. Ahí
   es exactamente para lo que existe.

   `tools/validate-source.ps1` falla si reaparece un `body.pk-sitio .pk-…` sin
   `:where()`, para que la clase de defecto no pueda volver en silencio.
   ========================================================================= */
:where(body.pk-sitio) .pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pk-alto-ctl);
  padding: 0 var(--pk-e5);
  gap: var(--pk-e2);
  border: 1px solid transparent;
  border-radius: var(--pk-r);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--pk-t), border-color var(--pk-t), color var(--pk-t), box-shadow var(--pk-t);
}

:where(body.pk-sitio) .pk-btn--primario { color: #fff; background: var(--pk-primario); }
:where(body.pk-sitio) .pk-btn--primario:hover,
:where(body.pk-sitio) .pk-btn--primario:focus-visible { color: #fff; background: var(--pk-primario-osc); }

:where(body.pk-sitio) .pk-btn--secundario {
  color: var(--pk-tinta);
  background: var(--pk-n0);
  border-color: var(--pk-n200);
  box-shadow: var(--pk-s1);
}
:where(body.pk-sitio) .pk-btn--secundario:hover,
:where(body.pk-sitio) .pk-btn--secundario:focus-visible { border-color: var(--pk-n400); background: var(--pk-n25); }

:where(body.pk-sitio) .pk-btn--fantasma { color: var(--pk-txt-sec); background: none; border-color: transparent; }
:where(body.pk-sitio) .pk-btn--fantasma:hover,
:where(body.pk-sitio) .pk-btn--fantasma:focus-visible { color: var(--pk-primario); background: var(--pk-n25); border-color: var(--pk-n200); }

:where(body.pk-sitio) .pk-btn--peligro { color: var(--pk-primario-osc); background: var(--pk-n0); border-color: #f2c4cb; }
:where(body.pk-sitio) .pk-btn--peligro:hover { color: #fff; background: var(--pk-primario); border-color: var(--pk-primario); }

:where(body.pk-sitio) .pk-btn--sm { min-height: var(--pk-alto-ctl-sm); padding-inline: var(--pk-e3); font-size: var(--pk-fs-sm); }
:where(body.pk-sitio) .pk-btn--bloque { width: 100%; }
:where(body.pk-sitio) .pk-btn[disabled],
:where(body.pk-sitio) .pk-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
:where(body.pk-sitio) .pk-btn:focus-visible { outline: 2px solid var(--pk-navy); outline-offset: 2px; }

/* Aviso: el canal de «ha pasado esto» de todo el sitio. */
:where(body.pk-sitio) .pk-aviso {
  margin-bottom: var(--pk-e4);
  padding: var(--pk-e3) var(--pk-e4);
  border-radius: var(--pk-r);
  font-size: var(--pk-fs-base);
  line-height: 1.5;
}
:where(body.pk-sitio) .pk-aviso strong { display: block; font-weight: var(--pk-fw-semi); }
:where(body.pk-sitio) .pk-aviso--exito { color: #1c6b3a; background: #eaf7ef; border: 1px solid #b9e3c8; }
:where(body.pk-sitio) .pk-aviso--error { color: var(--pk-primario-osc); background: var(--pk-primario-suave); border: 1px solid #f2c4cb; }
:where(body.pk-sitio) .pk-aviso--info { color: var(--pk-navy); background: var(--pk-n25); border: 1px solid var(--pk-n200); }

/* Marca de estado. Un anuncio en borrador, pendiente o expirado no puede
   distinguirse sólo por el color: cada estado lleva su palabra. */
:where(body.pk-sitio) .pk-marca {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: 8px;
  border-radius: var(--pk-r-sm);
  font-size: var(--pk-fs-xs);
  font-weight: var(--pk-fw-semi);
  letter-spacing: .01em;
  text-transform: uppercase;
}
:where(body.pk-sitio) .pk-marca--publicado { color: #1c6b3a; background: #eaf7ef; }
:where(body.pk-sitio) .pk-marca--pendiente  { color: #8a5a00; background: #fdf3e0; }
:where(body.pk-sitio) .pk-marca--borrador   { color: var(--pk-txt-sec); background: var(--pk-n50); }
:where(body.pk-sitio) .pk-marca--expirado   { color: var(--pk-primario-osc); background: var(--pk-primario-suave); }

:where(body.pk-sitio) .pk-oculto-visual {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Caja de estado vacío. Nació en el directorio profesional y ya la usan «Mis
   anuncios», las búsquedas guardadas y los resultados sin coincidencias, así
   que pasa a ser una primitiva del sistema y no de una página. */
:where(body.pk-sitio) .pk-vacio-caja {
  max-width: 460px;
  margin: var(--pk-e12) auto;
  padding: var(--pk-e6);
  border: 1px solid var(--pk-n200);
  border-radius: var(--pk-r);
  background: var(--pk-n0);
  text-align: center;
}
:where(body.pk-sitio) .pk-vacio-caja__titulo {
  margin: 0 0 var(--pk-e2);
  color: var(--pk-tinta);
  font-size: var(--pk-fs-lg);
  font-weight: var(--pk-fw-semi);
  line-height: 1.3;
}
:where(body.pk-sitio) .pk-vacio-caja__texto { margin: 0; color: var(--pk-txt-sec); line-height: 1.55; }
:where(body.pk-sitio) .pk-vacio-caja__acc {
  display: flex;
  justify-content: center;
  margin: var(--pk-e5) 0 0;
  gap: var(--pk-e3);
  flex-wrap: wrap;
}

/* Pestañas de sección. Nacieron en el directorio profesional y ya las usan
   «Mis anuncios» y las pantallas de cuenta, así que suben a la capa de sitio.
   Sin esto salían como una fila de enlaces sueltos sin separación. */
:where(body.pk-sitio) .pk-dir-pestanas {
  display: flex;
  margin-bottom: var(--pk-e6);
  gap: 4px;
  border-bottom: 1px solid var(--pk-n100);
}

:where(body.pk-sitio) .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;
  white-space: nowrap;
}
:where(body.pk-sitio) .pk-dir-pestana:hover { color: var(--pk-tinta); }
:where(body.pk-sitio) .pk-dir-pestana--activa { color: var(--pk-primario-osc); border-bottom-color: var(--pk-primario); }

:where(body.pk-sitio) .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);
}
:where(body.pk-sitio) .pk-dir-pestana--activa .pk-dir-pestana__n { color: var(--pk-primario-osc); background: var(--pk-primario-suave); }

/* --- 13b. Anillo de foco de Bootstrap ----------------------------------- */

/* Al tabular por la cabecera salen DOS indicadores superpuestos: el contorno
   navy de Propeka y, debajo, el halo azul de Bootstrap
   (`rgba(13,110,253,.25)`, que es #0d6efd — un azul que no está en la paleta).
   Se veía como un borrón de dos colores y desafinaba con la marca.

   Se corrige por la variable del propio Bootstrap y no reescribiendo sus
   reglas: así el arreglo sobrevive a una actualización del tema padre o del
   propio Bootstrap, que es justo donde se pierden estos parches. Un solo
   punto de verdad, y el token de Propeka manda. */
:where(body.pk-sitio) {
  --bs-focus-ring-color: rgba(0, 66, 116, .28);
}

/* --- 14. Resultados de búsqueda ---------------------------------------- */

/* `/?s=` caía en la plantilla del padre. La lista es sobria a propósito: la
   búsqueda real del producto es `/propiedades/` con sus facetas, y ésta es la
   red que recoge lo que se busca por texto. Mismo marco y mismo paso
   tipográfico que el resto del sitio para que no parezca otra página. */
:where(body.pk-sitio) .pk-busqueda {
  padding-block: var(--pk-e10) var(--pk-e12);
}
:where(body.pk-sitio) .pk-busqueda__cab {
  padding-bottom: var(--pk-e6);
  border-bottom: 1px solid var(--pk-n200);
}
:where(body.pk-sitio) .pk-busqueda__titulo {
  margin: 0;
  color: var(--pk-tinta);
  font-size: var(--pk-fs-xl);
  font-weight: var(--pk-fw-fuerte);
  line-height: var(--pk-lh-ajustado);
  letter-spacing: -.01em;
  /* El término lo escribe el visitante: puede venir sin espacios y no debe
     empujar la página a lo ancho. */
  overflow-wrap: anywhere;
}
:where(body.pk-sitio) .pk-busqueda__conteo {
  margin: var(--pk-e2) 0 0;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
}
:where(body.pk-sitio) .pk-busqueda__forma {
  display: flex;
  flex-wrap: wrap;
  /* A 1280 px el campo se estiraba los 1200 px del marco y quedaba una caja
     de texto enorme para una consulta de tres palabras. Se limita al ancho
     de lectura; en movil sigue ocupando la fila entera. */
  max-width: 560px;
  margin-top: var(--pk-e5);
  gap: var(--pk-e2);
}
:where(body.pk-sitio) .pk-busqueda__campo {
  flex: 1 1 240px;
  min-width: 0;
  min-height: var(--pk-alto-ctl);
  padding-inline: var(--pk-e3);
  border: 1px solid var(--pk-n300);
  border-radius: var(--pk-r-sm);
  color: var(--pk-txt);
  background: var(--pk-n0);
  font: inherit;
  font-size: var(--pk-fs-base);
}
:where(body.pk-sitio) .pk-busqueda__campo:focus-visible {
  outline: none;
  border-color: var(--pk-navy);
  box-shadow: var(--pk-foco);
}

:where(body.pk-sitio) .pk-busqueda__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(body.pk-sitio) .pk-busqueda__item {
  padding-block: var(--pk-e5);
  border-bottom: 1px solid var(--pk-n100);
}
:where(body.pk-sitio) .pk-busqueda__tipo {
  margin: 0 0 var(--pk-e1);
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-xs);
  font-weight: var(--pk-fw-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
}
:where(body.pk-sitio) .pk-busqueda__item-t {
  margin: 0;
  font-size: var(--pk-fs-lg);
  font-weight: var(--pk-fw-semi);
  line-height: var(--pk-lh-ajustado);
}
:where(body.pk-sitio) .pk-busqueda__item-t a {
  color: var(--pk-tinta);
  text-decoration: none;
}
:where(body.pk-sitio) .pk-busqueda__item-t a:hover { color: var(--pk-primario-osc); text-decoration: underline; }
:where(body.pk-sitio) .pk-busqueda__item-t a:focus-visible {
  outline: none;
  border-radius: var(--pk-r-sm);
  box-shadow: var(--pk-foco);
}
:where(body.pk-sitio) .pk-busqueda__extracto {
  margin: var(--pk-e2) 0 0;
  max-width: 68ch;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
  line-height: var(--pk-lh-amplio);
}

/*
 * Enlace al DTE en la tabla de facturas. Va en color de enlace porque es una
 * descarga real; «Pendiente» va apagado y SIN aspecto de enlace, para que no
 * se pulse algo que todavia no existe.
 */
:where(body.pk-sitio) .pk-fel { color: var(--pk-enlace); font-size: var(--pk-fs-sm); text-decoration: none; }
:where(body.pk-sitio) .pk-fel:hover { color: var(--pk-primario-osc); text-decoration: underline; text-underline-offset: 2px; }
:where(body.pk-sitio) .pk-fel--pendiente { color: var(--pk-txt-ter); cursor: default; }

/*
 * AVISO DE VIGENCIA en «Mi plan».
 *
 * Houzez no ensena la caducidad en ninguna parte, asi que este bloque es lo
 * primero que se ve al entrar: cuando vence y que hacer al respecto. Tres
 * estados, y el color NO es la unica senal —el titular ya dice literalmente si
 * queda tiempo, vence hoy o ya vencio—, porque un aviso que solo se distingue
 * por el color no llega a quien no distingue esos colores.
 */
:where(body.pk-sitio) .pk-vigencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-e3) var(--pk-e4);
  margin: 0 0 var(--pk-e4);
  padding: var(--pk-e4);
  border: 1px solid var(--pk-n100);
  border-left: 4px solid var(--pk-n300);
  border-radius: var(--pk-r);
  background: var(--pk-n25);
}
:where(body.pk-sitio) .pk-vigencia__txt { flex: 1 1 22rem; min-width: 0; }
:where(body.pk-sitio) .pk-vigencia__titulo {
  margin: 0;
  color: var(--pk-txt);
  font-size: var(--pk-fs-lg);
  font-weight: 600;
  line-height: var(--pk-lh-ajustado);
}
:where(body.pk-sitio) .pk-vigencia__detalle {
  margin: var(--pk-e1) 0 0;
  max-width: 62ch;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
  line-height: var(--pk-lh-amplio);
}
:where(body.pk-sitio) .pk-vigencia__acc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-e2);
  margin: 0;
  flex: 0 0 auto;
}

/* Al corriente: informa, no alarma. */
:where(body.pk-sitio) .pk-vigencia--ok { border-left-color: var(--pk-exito); }

/* Siete dias o menos. */
:where(body.pk-sitio) .pk-vigencia--pronto {
  border-color: #f0e2bd;
  border-left-color: var(--pk-aviso);
  background: var(--pk-aviso-suave);
}
:where(body.pk-sitio) .pk-vigencia--pronto .pk-vigencia__detalle { color: var(--pk-aviso); }

/* Ya vencio: los anuncios estan fuera. */
:where(body.pk-sitio) .pk-vigencia--vencido {
  border-color: #f3cdc9;
  border-left-color: var(--pk-error);
  background: var(--pk-error-suave);
}
:where(body.pk-sitio) .pk-vigencia--vencido .pk-vigencia__titulo,
:where(body.pk-sitio) .pk-vigencia--vencido .pk-vigencia__detalle { color: var(--pk-error); }

@media (max-width: 575.98px) {
  :where(body.pk-sitio) .pk-vigencia { padding: var(--pk-e3); }
  :where(body.pk-sitio) .pk-vigencia__acc { width: 100%; }
  :where(body.pk-sitio) .pk-vigencia__acc .pk-btn { flex: 1 1 auto; text-align: center; }
}

/*
 * El DTE dentro del detalle de la factura. Va en su propia caja y no como una
 * fila mas de la tabla de importes: no es un importe, es el documento fiscal, y
 * en Guatemala es lo unico con validez ante la SAT. Cuando aun no ha llegado se
 * dice, en gris y sin boton, para que no se pulse algo que todavia no existe.
 */
:where(body.pk-sitio) .pk-fel-caja {
  padding: var(--pk-e3) var(--pk-e4);
  border: 1px solid var(--pk-n100);
  border-left: 4px solid var(--pk-primario);
  border-radius: var(--pk-r);
  background: var(--pk-n25);
}
:where(body.pk-sitio) .pk-fel-caja__tit {
  margin: 0;
  color: var(--pk-txt);
  font-size: var(--pk-fs-sm);
  font-weight: 600;
}
:where(body.pk-sitio) .pk-fel-caja__txt {
  margin: var(--pk-e1) 0 var(--pk-e3);
  max-width: 62ch;
  color: var(--pk-txt-sec);
  font-size: var(--pk-fs-sm);
  line-height: var(--pk-lh-amplio);
}
:where(body.pk-sitio) .pk-fel-caja__txt--pendiente { margin-bottom: 0; color: var(--pk-txt-ter); }

/* =========================================================================
   Pasada 2026-09-22 · Modal de acceso en el idioma del sitio
   =========================================================================
   Era la única superficie que seguía en el traje de Houzez: barra roja
   maciza, pestaña activa en un rojo más oscuro, separadores blancos y un
   cierre con su propio filete. En el resto del sitio el rojo es sólo
   acción, las superficies son blancas y las pestañas son las del buscador de
   la portada: texto en tinta y la activa en rojo con subrayado. */
body.pk-sitio :is(.login-register-form, .reset-password-form) .modal-content {
  border: 0;
  border-radius: var(--pk-r-lg);
  box-shadow: 0 24px 56px rgba(14, 25, 45, .28);
  overflow: hidden;
}
body.pk-sitio :is(.login-register-form, .reset-password-form) .modal-header {
  align-items: stretch;
  padding: 0 var(--pk-e2) 0 var(--pk-e6);
  border: 0;
  border-bottom: 1px solid var(--pk-n200);
  border-radius: 0;
  background: var(--pk-n0);
}
body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-tabs { gap: var(--pk-e6); }
body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-link {
  min-height: 56px;
  margin: 0 0 -1px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--pk-txt-sec);
  background: transparent;
  font-weight: var(--pk-fw-semi);
}
body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-link:hover,
body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-link:focus-visible {
  color: var(--pk-tinta);
  background: transparent;
}
body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-link.active {
  color: var(--pk-primario);
  background: transparent;
  border-bottom-color: var(--pk-primario);
}
body.pk-sitio :is(.login-register-form, .reset-password-form) .modal-header .close {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--pk-txt-sec);
  background: transparent;
  font-size: 26px;
  font-weight: var(--pk-fw-normal);
  line-height: 1;
  opacity: 1;
}
body.pk-sitio :is(.login-register-form, .reset-password-form) .modal-header .close:hover,
body.pk-sitio :is(.login-register-form, .reset-password-form) .modal-header .close:focus-visible {
  color: var(--pk-tinta);
  background: var(--pk-n100);
}
body.pk-sitio :is(.login-register-form, .reset-password-form) .modal-body { padding: var(--pk-e6); }
/* La ventana hermana «Recuperar contraseña» lleva título en vez de pestañas:
   mismo peso y tinta que la pestaña activa, y el alto de la cabecera. */
/* «Borrador guardado» (#modal-save-draft, en footer-dashboard.php) sigue el
   mismo título que las otras dos ventanas. */
body.pk-sitio #modal-save-draft .modal-title { color: var(--pk-tinta); font-weight: var(--pk-fw-semi); }
body.pk-sitio .reset-password-form .modal-header .modal-title {
  align-self: center;
  padding-block: var(--pk-e4);
  color: var(--pk-tinta);
  font-size: var(--pk-fs-lg);
  font-weight: var(--pk-fw-semi) !important; /* gana a .fw-normal de Bootstrap, que es !important */
}
@media (max-width: 575.98px) {
  body.pk-sitio :is(.login-register-form, .reset-password-form) .modal-header { padding-left: var(--pk-e4); }
  body.pk-sitio .login-register-form .modal-header .login-register-tabs .nav-tabs { gap: var(--pk-e5); }
  body.pk-sitio .login-register-form .modal-body { padding: var(--pk-e4); }
}

/* Objetivos táctiles que el barrido de 2026-09-22 midió por debajo de 24 px
   en las 19 rutas públicas y los seis anchos: el logotipo (103×22) y los
   enlaces del pie (19 px en portada, legales, terrenos y 404). Crece el área
   pulsable, no el texto; el hueco entre enlaces baja lo mismo que crecen, así
   que las columnas del pie conservan su altura. */
body.pk-sitio header .logo > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
:where(body.pk-sitio) .pk-pie__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
:where(body.pk-sitio) .pk-pie__lista li + li { margin-top: 3px; }
/* A partir de 768 el título de cada columna del pie es sólo un título
   (`tabindex="-1"`, la lista siempre abierta), pero conservaba el cursor de
   mano del acordeón móvil: parecía pulsable y no hacía nada. */
@media (min-width: 768px) {
  :where(body.pk-sitio) .pk-pie__disparo { cursor: default; pointer-events: none; }
}
/* A 320 px el marcador «Usuario o correo electrónico» se cortaba en
   «…electrónic» y la casilla y «¿Olvidaste tu contraseña?» se partían los
   dos en dos renglones, lado a lado. En teléfonos estrechos el icono cede
   4 px, el cuerpo 4 px por lado, y las dos herramientas van una bajo otra. */
@media (max-width: 374.98px) {
  body.pk-sitio .login-register-form .modal-body { padding: var(--pk-e4) var(--pk-e3); }
  body.pk-sitio .login-register-form .login-form-wrap .form-group-field input,
  body.pk-sitio .login-register-form .register-form-wrap .form-group-field input { padding-left: 44px; padding-right: 8px; }
  body.pk-sitio .login-register-form .login-form-wrap .form-group-field::after,
  body.pk-sitio .login-register-form .register-form-wrap .form-group-field::after { left: 14px; }
  body.pk-sitio .login-register-form .form-tools .d-flex { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* =========================================================================
   Pasada 2026-09-22 · Cajón del menú móvil
   =========================================================================
   Medido a 390: título «Menú» a 16/400, cierre de trazo fino gris claro,
   enlaces a 15 px con sangría de 15 frente a los 16 del título, cheurones
   en el marino de Houzez y ninguna acción: 560 px de blanco bajo cuatro
   enlaces. Ahora habla como la cabecera: título en tinta, enlaces a 16 en
   seminegrita con 52 px de toque, y las acciones al pie del cajón. */
body.pk-sitio .offcanvas-mobile-menu { display: flex; flex-direction: column; }
body.pk-sitio .offcanvas-mobile-menu .offcanvas-header {
  min-height: 64px;
  padding: var(--pk-e2) var(--pk-e2) var(--pk-e2) var(--pk-e5);
  border-bottom: 1px solid var(--pk-n200);
}
body.pk-sitio .offcanvas-mobile-menu .offcanvas-title {
  color: var(--pk-tinta);
  font-size: var(--pk-fs-lg) !important;
  font-weight: var(--pk-fw-semi);
}
body.pk-sitio .offcanvas-mobile-menu .offcanvas-header .btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 0 auto;
  padding: 0;
  border-radius: 50%;
  background: none;
  opacity: 1;
}
body.pk-sitio .offcanvas-mobile-menu .offcanvas-header .btn-close .houzez-icon { color: var(--pk-txt-sec); font-size: 16px; }
body.pk-sitio .offcanvas-mobile-menu .offcanvas-header .btn-close:hover { background: var(--pk-n100); }
body.pk-sitio .offcanvas-mobile-menu .offcanvas-mobile-menu-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-y: auto;
}
body.pk-sitio .offcanvas-mobile-menu #mobile-main-nav > li > .nav-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: var(--pk-e3) var(--pk-e5);
  color: var(--pk-tinta);
  font-size: var(--pk-fs-base);
  font-weight: var(--pk-fw-semi);
}
body.pk-sitio .offcanvas-mobile-menu #mobile-main-nav .nav-mobile-trigger,
body.pk-sitio .offcanvas-mobile-menu #mobile-main-nav .nav-mobile-trigger .houzez-icon { color: var(--pk-txt-sec); }
body.pk-sitio .offcanvas-mobile-menu #mobile-main-nav .dropdown-item {
  min-height: 44px;
  padding: var(--pk-e3) var(--pk-e5) var(--pk-e3) var(--pk-e8);
  font-size: var(--pk-fs-base);
}
body.pk-sitio .offcanvas-mobile-menu .pk-menu-acciones {
  display: grid;
  gap: var(--pk-e3);
  margin-top: auto;
  padding: var(--pk-e5);
  border-top: 1px solid var(--pk-n200);
}
body.pk-sitio .offcanvas-mobile-menu .pk-menu-acciones .pk-btn { width: 100%; justify-content: center; }

/* 404 en teléfono: las dos acciones apiladas medían 154 y 208 px, dos
   anchos sin relación. Van al mismo ancho, el de la más larga. */
@media (max-width: 575.98px) {
  :where(body.pk-sitio) .pk-error-page__actions { display: grid; justify-content: center; grid-template-columns: minmax(0, 240px); }
  :where(body.pk-sitio) .pk-error-page__actions > a { justify-content: center; text-align: center; }
}

/* `icon-share-2` no existe en la fuente de iconos de Houzez 4.4: el
   `::before` sale vacío y el hueco queda en blanco. Lo usan «Ver mi perfil
   público» (16 px de nada delante del texto), el botón SÓLO-icono de cada
   factura y «Detalle» del CRM. Se dibuja con máscara en `currentColor`. */
body.pk-sitio .houzez-icon.icon-share-2::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98'/%3E%3C/svg%3E") center / contain no-repeat;
}