/* =======================================================
   Front UI – Elementor-driven (sin --hn-)
   Usa variables del Kit:
   - Colores:   --e-global-color-{primary,secondary,text,accent}
   - Tipos:     --e-global-typography-{primary,secondary,text,accent}-*
   ======================================================= */

/* ===================== Fallbacks (si Elementor no está cargado) ===================== */
:root{
  --ui-text: #0f172a;
  --ui-primary: #1A56DB;
  --ui-secondary: #ffffff;
  --ui-accent: #f59e0b;

  --ui-muted: color-mix(in srgb, var(--ui-text) 60%, transparent);
  --ui-border: color-mix(in srgb, var(--ui-text) 14%, #fff);
  --ui-surface: #fff;

  --ui-radius: 12px;
  --ui-shadow: 0 6px 20px rgba(17,24,39,.06);

  /* hook opcional por si el theme expone un radio global */
  --radius-from-kit: var(--e-global-border-radius, var(--ui-radius));
}

/* ===================== Mapear desde el Elementor Kit activo ===================== */
:where(body[class*="elementor-kit-"]){
  /* Colores del kit */
  --ui-text: var(--e-global-color-text);
  --ui-primary: var(--e-global-color-primary);
  --ui-secondary: var(--e-global-color-secondary);
  --ui-accent: var(--e-global-color-accent);

  /* Derivados */
  --ui-muted: color-mix(in srgb, var(--ui-text) 60%, transparent);
  --ui-border: color-mix(in srgb, var(--ui-text) 14%, #fff);
  --ui-surface: #fff;

  /* Tipografías del kit (para usar en bloques clave)
  --font-text-family: var(--e-global-typography-text-font-family);
  --font-text-weight: var(--e-global-typography-text-font-weight);
  --font-text-size:   var(--e-global-typography-text-font-size);
  --font-text-line:   var(--e-global-typography-text-line-height);
  --font-text-ls:     var(--e-global-typography-text-letter-spacing);
  --font-text-tt:     var(--e-global-typography-text-text-transform);

  --font-primary-family: var(--e-global-typography-primary-font-family);
  --font-primary-weight: var(--e-global-typography-primary-font-weight);
  --font-primary-size:   var(--e-global-typography-primary-font-size);
  --font-primary-line:   var(--e-global-typography-primary-line-height);
  --font-primary-ls:     var(--e-global-typography-primary-letter-spacing);
  --font-primary-tt:     var(--e-global-typography-primary-text-transform);

  --font-secondary-family: var(--e-global-typography-secondary-font-family);
  --font-secondary-weight: var(--e-global-typography-secondary-font-weight);
  --font-secondary-size:   var(--e-global-typography-secondary-font-size);
  --font-secondary-line:   var(--e-global-typography-secondary-line-height);
  --font-secondary-ls:     var(--e-global-typography-secondary-letter-spacing);
  --font-secondary-tt:     var(--e-global-typography-secondary-text-transform);

  --font-accent-family: var(--e-global-typography-accent-font-family);
  --font-accent-weight: var(--e-global-typography-accent-font-weight);
  --font-accent-size:   var(--e-global-typography-accent-font-size);
  --font-accent-line:   var(--e-global-typography-accent-line-height);
  --font-accent-ls:     var(--e-global-typography-accent-letter-spacing);
  --font-accent-tt:     var(--e-global-typography-accent-text-transform);
  */
}

/* ===================== Global ===================== 
body{
  background: #F8F8F8;
  color: var(--ui-text);
  font-family: var(--font-text-family, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: var(--font-text-size, 16px);
  line-height: var(--font-text-line, 1.6);
  font-weight: var(--font-text-weight, 400);
  letter-spacing: var(--font-text-ls, normal);
  text-transform: var(--font-text-tt, none);
}
*/

body.single-hn_property{
  background: #F8F8F8;
}

.hn-wrap-single{
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px;
}

.hn-wrap{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0px;
}

.chip{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  background: color-mix(in srgb, var(--ui-text) 6%, #fff);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  padding: 6px 10px;
  margin-right: 6px;
}

/* Énfasis de texto acorde al Kit */
strong,b{
  color: color-mix(in srgb, var(--ui-text) 20%, var(--ui-primary));
}
em,i{
  opacity: .95;
}

/* ===================== Breadcrumb ===================== */
.hn-breadcrumb{
  color: var(--ui-primary);
  background: transparent;
  margin: 15px 0;
  padding: 0;
  font-size: 12px;
}
.hn-breadcrumb a{
  color: var(--ui-primary);
  text-decoration: none;
}
.hn-breadcrumb a:hover{
  text-decoration: underline;
}
.hn-breadcrumb .sep{
  margin: 0 6px;
  opacity: .6;
}
.hn-breadcrumb .current{
  opacity: .85;
}

/* ===================== Botones – tipografía ACCENT del Kit ===================== */
.hn-filter button,
.hn-actions .act,
.hn-searchbar .sb-btn{
  font-family: var(--font-accent-family, inherit);
  font-weight: var(--font-accent-weight, 600);
  font-size: var(--font-accent-size, inherit);
  line-height: var(--font-accent-line, normal);
  letter-spacing: var(--font-accent-ls, normal);
  text-transform: var(--font-accent-tt, none);
  outline: none;
}

.hn-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}
.hn-filter select,
.hn-filter input{
  padding: 10px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-from-kit);
}
.hn-filter button{
  padding: 10px 14px;
  border: 1px solid var(--ui-primary);
  border-radius: var(--radius-from-kit);
  background: var(--ui-primary);
  color: var(--ui-secondary);
  cursor: pointer;
}

.hn-actions .act{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-from-kit);
  padding: 8px 12px;
  background: var(--ui-surface);
  color: var(--ui-text);
  text-decoration: none;
}
.hn-actions .act:hover{
  filter: brightness(.97);
}

/* Focus accesible con Primary */
.hn-filter button:focus-visible,
.hn-actions .act:focus-visible,
.hn-searchbar .sb-btn:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 30%, transparent);
  border-color: var(--ui-primary);
}

/* ===================== Grid (listado) — resistente a Elementor ===================== */
.hn-wrap .hn-grid{
  display: grid;
  gap: 16px;
}
.hn-wrap .hn-grid.cols-1{ grid-template-columns: 1fr; }
.hn-wrap .hn-grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hn-wrap .hn-grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hn-wrap .hn-grid.cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hn-wrap .hn-grid.cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hn-wrap .hn-grid.cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hn-wrap .hn-grid > .hn-grid-item{
  min-width: 0;
}

@media (max-width:1024px){
  .hn-wrap .hn-grid:not(.cols-1){
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:768px){
  .hn-wrap .hn-grid,
  .hn-wrap .hn-grid[class*="cols-"]{
    grid-template-columns: 1fr;
  }
}
/* Títulos compartidos */
.hn-title{
  font-family: var(--font-primary-family, inherit);
  font-weight: var(--font-primary-weight, 700);
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: var(--font-primary-line, 1.3);
  letter-spacing: var(--font-primary-ls, normal);
  text-transform: var(--font-primary-tt, none);
  margin: 0 0 6px;
}
.hn-title a{
  text-decoration: none;
  color: var(--ui-text);
}
.hn-title a:hover{
  color: color-mix(in srgb, var(--ui-primary) 85%, black);
}
.hn-price{
  font-weight: 700;
  margin: 6px 0;
  color: var(--ui-primary);
}
.hn-excerpt{
  font-size: 14px;
  color: color-mix(in srgb, var(--ui-text) 70%, #fff);
  margin: 6px 0;
}
.hn-feats{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 8px 0 6px;
  list-style: none;
  font-size: 14px;
  color: var(--ui-primary);
}

/* ===================== Pagination ===================== */
.hn-pagination{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.hn-pagination a,
.hn-pagination span{
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-from-kit);
  text-decoration: none;
  color: var(--ui-text);
}
.hn-pagination .current{
  background: var(--ui-primary);
  color: var(--ui-secondary);
  border-color: var(--ui-primary);
}

/* ===================== SINGLE – Header/Resumen ===================== */
.hn-ref-bar{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--ui-border);
  margin-bottom: 12px;
}
.hn-ref-title{
  color: var(--ui-text);
  margin: 6px 0;
  font-family: var(--font-primary-family, inherit);
  font-weight: var(--font-primary-weight, 700);
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: var(--font-primary-line, 1.25);
  letter-spacing: var(--font-primary-ls, normal);
  text-transform: var(--font-primary-tt, none);
}
.hn-ref-bar .right{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
@media (max-width:900px){
  .hn-ref-bar{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hn-ref-bar .right{
    align-items: flex-start;
  }
}

.hn-share{ position: relative; }
.hn-share .share-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: none;
  min-width: 230px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 8px;
  z-index: 50;
  box-shadow: var(--ui-shadow);
}
.hn-share:hover .share-menu,
.hn-share.open .share-menu{
  display: block;
}
.share-menu li{ list-style: none; }
.share-menu li + li{ margin-top: 6px; }
.share-menu a,
.share-menu button{
  width: 100%;
  text-align: left;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--ui-surface);
  color: var(--ui-text);
  text-decoration: none;
  cursor: pointer;
}
.share-menu a:hover,
.share-menu button:hover{
  background: color-mix(in srgb, var(--ui-text) 6%, #fff);
  border-color: var(--ui-border);
}

/* Precios header */
.hn-ref-price.inline{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Compartir e imprimir header */
.hn-actions.top-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Layout 2 columnas */
.hn-layout-ref{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
@media (max-width:1024px){
  .hn-layout-ref{
    grid-template-columns: 1fr;
  }
}
.hn-aside .hn-sticky{
  position: sticky;
  top: 90px;
}

/* Secciones */
.hn-section{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-from-kit);
  padding: 16px;
  box-shadow: none;
  margin-bottom: 16px;
}


/* Solo la sección de la galería sin fondo */
.hn-section.hn-section--transparent{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ===================== Atributos ===================== */
.hn-attrs{
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hn-attrs li{
  list-style: none;
  margin: 0;
  padding: 0;
}
.hn-attrs.icons li,
.hn-attrs .attr-inline{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: auto;
}
.hn-attrs i{
  font-size: 16px;
  color: var(--ui-primary);
  line-height: 1;
  margin: 0;
}
.hn-attrs .k{
  font-size: 12px;
  color: var(--ui-muted);
}
.hn-attrs .v{
  font-weight: 700;
  color: var(--ui-text);
}
.hn-section .hn-attrs.only-value{
  row-gap: 12px;
}

/* ===================== GALERÍA (hero + miniaturas) ===================== */
.hn-gallery-ref{
  display: grid;
  gap: 10px;
}
.hn-gallery-ref .hn-hero{
  position: relative;
  aspect-ratio: 16/9;
  background: color-mix(in srgb, var(--ui-text) 6%, #fff);
  border-radius: var(--radius-from-kit);
  overflow: hidden;
}
.hn-gallery-ref .hn-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.hn-gallery-ref .hn-hero .nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  border: none;
  background: rgba(0,0,0,.45);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.hn-gallery-ref .hn-hero .nav.prev{ left: 10px; }
.hn-gallery-ref .hn-hero .nav.next{ right: 10px; }

.hn-hero .open-lightbox{
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  z-index: 5;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 12px;
}
@media print{
  .hn-hero .open-lightbox{ display: none; }
}

.hn-hero-tags{
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 4;
}
.hn-hero-tags .tag{
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 10px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.hn-gallery-ref .hn-thumbs{
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  margin-top: 8px;
}
.hn-gallery-ref .hn-thumbs::-webkit-scrollbar{
  display: none;
}
.hn-gallery-ref .hn-thumbs .thumb{
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-from-kit);
  overflow: hidden;
  background: var(--ui-surface);
  cursor: pointer;
  opacity: .95;
}
.hn-gallery-ref .hn-thumbs .thumb.is-active{
  outline: 2px solid var(--ui-primary);
  opacity: 1;
}
.hn-gallery-ref .hn-thumbs .thumb img{
  width: 96px;
  height: 66px;
  object-fit: cover;
  display: block;
}

/* ===================== LIGHTBOX ===================== */
.hn-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.9);
  z-index: 1000;
}
.hn-lightbox.open{
  display: flex;
}
.hn-lightbox .lb-stage{
  position: relative;
  width: 90vw;
  height: 82vh;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}
.hn-lightbox .lb-img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(1);
  transform-origin: center center;
  max-width: none;
  max-height: none;
  user-select: none;
  -webkit-user-drag: none;
}
.hn-lightbox .lb-close,
.hn-lightbox .lb-prev,
.hn-lightbox .lb-next{
  position: absolute;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
}
.hn-lightbox .lb-close{
  top: 16px;
  right: 16px;
  font-size: 26px;
}
.hn-lightbox .lb-prev{
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
}
.hn-lightbox .lb-next{
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
}
.hn-lightbox .lb-tools{
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.hn-lightbox .lb-tools button{
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.hn-lightbox .lb-count{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 600;
}
@media (max-width:640px){
  .hn-lightbox .lb-stage{
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  .hn-lightbox .lb-close,
  .hn-lightbox .lb-prev,
  .hn-lightbox .lb-next{
    width: 48px;
    height: 48px;
    font-size: 24px;
    background: rgba(0,0,0,.65);
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
    z-index: 1002;
  }
  .hn-lightbox .lb-close{
    top: calc(10px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
  }
  .hn-lightbox .lb-prev{
    left: calc(10px + env(safe-area-inset-left));
    top: 50%;
    transform: translateY(-50%);
  }
  .hn-lightbox .lb-next{
    right: calc(10px + env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
  }
}
@supports not (top: env(safe-area-inset-top)){
  @media (max-width:640px){
    .hn-lightbox .lb-close{ top: 10px; right: 10px; }
    .hn-lightbox .lb-prev{ left: 10px; }
    .hn-lightbox .lb-next{ right: 10px; }
  }
}

/* ===================== Títulos de bloques reutilizables ===================== */
.hn-block-title{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--ui-text);
  font-family: var(--font-secondary-family, inherit);
  font-weight: var(--font-secondary-weight, 700);
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: var(--font-secondary-line, 1.3);
  letter-spacing: var(--font-secondary-ls, normal);
  text-transform: var(--font-secondary-tt, none);
}

/* ===================== Documentos ===================== */
.hn-docs{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

/* ===================== Searchbar ===================== */
.hn-searchbar{
  --sb-bg: rgba(255, 255, 255, .85);
  --sb-border: var(--ui-border);
  --sb-radius: 6px;
  --sb-gap: 10px;
  padding: 24px;
  backdrop-filter: blur(4px);
    background: var(--sb-bg);
    background-color: #fff;
    padding: 26px 22px 30px 23px;
    border-color: #fff;
    border-radius: 5px 5px 5px 5px;
}
.hn-searchbar .sb-row{
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sb-gap);
  align-items: center;
}
.hn-searchbar .sb-field,
.hn-searchbar .sb-actions{
  border: 0 solid var(--sb-border);
  border-radius: 10px;
  padding: 6px;
}
.hn-searchbar .sb-lbl{
  display: block;
  font-size: 12px;
  color: var(--ui-muted);
  margin: 2px 6px 4px;
}
.hn-searchbar .sb-input {
    appearance: auto;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e3e8ef;
    background: #fafcff;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    margin-top: 0px;
}

.hn-searchbar .sb-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.hn-searchbar .sb-btn{
  width: 100%;
  gap: 8px;
  align-items: center;
  border-radius: 10px;
  padding: 10px 16px;
  border: 1px solid var(--ui-primary);
  background: var(--ui-primary);
  color: var(--ui-secondary);
  cursor: pointer;
}
.hn-searchbar .sb-btn:hover{
  filter: brightness(.95);
}
@media (min-width:768px){
  .hn-searchbar .sb-row{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
@media (max-width:480px){
  .hn-searchbar .sb-row{
    grid-template-columns: 1fr;
  }
}

/* Menú Compartir centrado en móvil */
@media (max-width:640px){
  .hn-share .share-menu{
    left: 100%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
  }
}

/* Print: ocultar lightbox si alguien imprime abierto */
@media print{
  .hn-lightbox{ display: none; }
}

/* ===================== Carrusel (props) — estado final según cascada ===================== */
.hn-props.is-carousel{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0;
}
.hn-props.is-carousel .rail-track{
  display: flex;
  gap: var(--hn-gap, 20px);
  overflow-x: auto;
  scroll-behavior: auto; /* último override del archivo original */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
}
.hn-props.is-carousel .rail-track::-webkit-scrollbar{
  display: none;
}
.hn-props.is-carousel .rail-item{
  flex: 0 0 var(--hn-slide-w, 33.333%);
  min-width: var(--hn-slide-w, 33.333%);
  margin: 0;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Botones de navegación */
.hn-props.is-carousel .rail-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: rgba(255,255,255,.95);
  color: #111827;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: all .2s ease;
  font-size: 0;
}
.hn-props.is-carousel .rail-btn:hover{
  background: #111827;
  color: #fff;
  border-color: #111827;
}
.hn-props.is-carousel .rail-btn.prev{ left: 10px; }
.hn-props.is-carousel .rail-btn.next{ right: 10px; }
.hn-props.is-carousel .rail-btn.prev::before{
  content: "‹";
  font-size: 18px;
  line-height: 1;
}
.hn-props.is-carousel .rail-btn.next::before{
  content: "›";
  font-size: 18px;
  line-height: 1;
}
@media (max-width:640px){
  .hn-props.is-carousel .rail-btn{
    width: 30px;
    height: 30px;
  }
  .hn-props.is-carousel .rail-btn.prev{ left: 5px; }
  .hn-props.is-carousel .rail-btn.next{ right: 5px; }
}

/* ===================== Botón "Cargar más" (AJAX) ===================== */
.hn-props-more{
  text-align: center !important;
  margin: 24px 0 8px !important;
}
.hn-props-load{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: var(--ui-primary) !important;
  color: var(--ui-secondary) !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--radius-from-kit) !important;
  font-family: var(--font-accent-family, inherit) !important;
  font-weight: var(--font-accent-weight, 600) !important;
  font-size: var(--font-accent-size, 14px) !important;
  line-height: var(--font-accent-line, 1.2) !important;
  letter-spacing: var(--font-accent-ls, normal) !important;
  text-transform: var(--font-accent-tt, none) !important;
  cursor: pointer !important;
  transition: filter .25s ease, box-shadow .25s ease !important;
}
.hn-props-load:hover:not(:disabled){
  filter: brightness(.95);
}
.hn-props-load:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 30%, transparent);
  border-color: var(--ui-primary);
}
.hn-props-load:disabled{
  opacity: .6;
  cursor: not-allowed;
}
.hn-loading[hidden]{ display: none; }
.hn-loading{
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
  position: relative;
}
.hn-loading::after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid color-mix(in srgb, var(--ui-text) 30%, #fff);
  border-right-color: transparent;
  border-radius: 50%;
  animation: hnspin .8s linear infinite;
}
@keyframes hnspin{
  to{ transform: rotate(360deg); }
}

/* ===================== Precios en hoja de propiedad ===================== */
.price-pill{
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  padding: 6px 12px;
}
.price-pill .cur,
.price-pill .suf{
  font-size: 12px;
  color: color-mix(in srgb, var(--ui-text) 75%, #fff);
  background: color-mix(in srgb, var(--ui-text) 6%, #fff);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 1px 6px;
}
.price-pill .val{
  font-weight: 800;
  font-size: 18px;
}



/* HN Searchbar – normalizar selects en iOS/Android */
.hn-searchbar select.sb-input{
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  border: 1px solid #e3e8ef !important;
  background-color: #fafcff !important;
  border-radius: 8px !important;
  padding: 10px 36px 10px 12px !important; /* espacio para la flecha */
  font-size: 14px !important;
  line-height: 1.3 !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  color: var(--ui-text) !important; /* o var(--e-global-color-text) si prefieres */
}

/* Flecha “custom” del select */
.hn-searchbar .sb-field{
  position: relative !important;
}
.hn-searchbar .sb-field::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 12px; height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  /* chevron en SVG para máxima compatibilidad */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23343a40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  opacity: .75;
}

/* Estado focus accesible */
.hn-searchbar select.sb-input:focus{
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 30%, transparent) !important;
}

/* IE/Edge heredado: ocultar flecha nativa si aplica */
.hn-searchbar select.sb-input::-ms-expand{ display:none; }