/* =========================================================================
   URAL Bienes Raíces — Estilos del frontend
   Diseño sobrio, inmobiliario y profesional. Namespace .ural-*
   Las variables --ural-primary y --ural-accent se inyectan desde los ajustes.
   ========================================================================= */

:root {
  --ural-primary: #002B5C;
  --ural-accent:  #00A3FF;

  --ural-ink:      #16202E;
  --ural-muted:    #64748B;
  --ural-line:     #E2E8F0;
  --ural-bg-soft:  #F6F8FB;
  --ural-white:    #FFFFFF;

  --ural-radius:   14px;
  --ural-radius-sm:9px;
  --ural-shadow:   0 6px 24px rgba(16, 32, 54, 0.08);
  --ural-shadow-lg:0 18px 48px rgba(16, 32, 54, 0.16);
  --ural-shadow-sm:0 1px 3px rgba(16, 32, 54, 0.08);

  --ural-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ural-trans: 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Contenedor general del plugin */
.ural-wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
  font-family: var(--ural-font);
  color: var(--ural-ink);
}
.ural-listing { font-family: var(--ural-font); color: var(--ural-ink); }

.ural-wrap *, .ural-listing * { box-sizing: border-box; }

/* -------------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------------- */
.ural-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ural-font);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.8rem 1.3rem;
  border-radius: var(--ural-radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--ural-trans), box-shadow var(--ural-trans), background var(--ural-trans), color var(--ural-trans);
}
.ural-btn svg { width: 1.1em; height: 1.1em; }
.ural-btn--primary { background: var(--ural-primary); color: #fff; }
.ural-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--ural-shadow); filter: brightness(1.08); }
.ural-btn--outline { background: #fff; color: var(--ural-primary); border-color: var(--ural-line); }
.ural-btn--outline:hover { border-color: var(--ural-primary); transform: translateY(-2px); }
.ural-btn--wa { background: #25D366; color: #06351a; }
.ural-btn--wa:hover { background: #1ebe5a; color: #06351a; transform: translateY(-2px); }
.ural-btn--block { width: 100%; }

/* -------------------------------------------------------------------------
   Rejilla y tarjetas
   ------------------------------------------------------------------------- */
.ural-grid { display: grid; gap: 1.6rem; }
.ural-cols-1 { grid-template-columns: 1fr; }
.ural-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ural-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ural-cols-4 { grid-template-columns: repeat(4, 1fr); }

.ural-card {
  background: #fff;
  border: 1px solid var(--ural-line);
  border-radius: var(--ural-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--ural-trans), box-shadow var(--ural-trans);
}
.ural-card:hover { transform: translateY(-6px); box-shadow: var(--ural-shadow-lg); }

.ural-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--ural-primary);
}
.ural-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.ural-card:hover .ural-card-media img { transform: scale(1.06); }
.ural-card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.5); }
.ural-card-placeholder svg { width: 64px; height: 64px; }

.ural-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.38rem 0.75rem; border-radius: 999px; color: #fff;
  box-shadow: var(--ural-shadow-sm);
}
.ural-badge--disponible     { background: #16895a; }
.ural-badge--vendida        { background: #9aa3af; }
.ural-badge--reservada      { background: #d08700; }
.ural-badge--en-negociacion { background: var(--ural-primary); }

.ural-badge-featured {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.34rem 0.7rem; border-radius: 999px;
  background: var(--ural-accent); color: #04233f;
}
.ural-badge-featured svg { width: 13px; height: 13px; }

.ural-card-type {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  font-size: 0.76rem; font-weight: 600;
  background: rgba(10, 37, 64, 0.82); color: #fff;
  padding: 0.32rem 0.7rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}

.ural-card-body { padding: 1.3rem; display: flex; flex-direction: column; flex: 1; }
.ural-card-price { font-size: 1.45rem; font-weight: 800; color: var(--ural-primary); margin: 0 0 0.3rem; letter-spacing: -0.01em; }
.ural-card-price small { font-size: 0.8rem; font-weight: 500; color: var(--ural-muted); }
.ural-card-title { font-size: 1.12rem; font-weight: 700; margin: 0 0 0.4rem; line-height: 1.3; }
.ural-card-title a { color: var(--ural-ink); text-decoration: none; }
.ural-card-title a:hover { color: var(--ural-primary); }
.ural-card-loc { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--ural-muted); margin: 0 0 0.6rem; }
.ural-card-loc svg { width: 16px; height: 16px; color: var(--ural-accent); flex: none; }
.ural-card-excerpt { font-size: 0.9rem; color: var(--ural-muted); margin: 0 0 1rem; line-height: 1.55; }

.ural-card-features {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem;
  list-style: none; padding: 1rem 0 0; margin: auto 0 1.1rem;
  border-top: 1px solid var(--ural-line);
}
.ural-card-features li { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--ural-ink); }
.ural-card-features svg { width: 17px; height: 17px; color: var(--ural-accent); }

.ural-card-actions { display: flex; gap: 0.6rem; }
.ural-card-actions .ural-btn--primary { flex: 1; }
.ural-card-actions .ural-btn--wa { padding-inline: 0.9rem; }

/* -------------------------------------------------------------------------
   Buscador / filtros
   ------------------------------------------------------------------------- */
.ural-search {
  background: #fff;
  border: 1px solid var(--ural-line);
  border-radius: var(--ural-radius);
  box-shadow: var(--ural-shadow-sm);
  padding: 1.3rem;
  margin-bottom: 2rem;
}
.ural-search-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr auto;
  gap: 1rem;
  align-items: end;
}
.ural-search-field { display: flex; flex-direction: column; gap: 0.4rem; }
.ural-search-field label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ural-muted); }
.ural-search-field select,
.ural-search-field input {
  font-family: var(--ural-font); font-size: 0.92rem;
  padding: 0.62rem 0.7rem; border: 1px solid var(--ural-line);
  border-radius: var(--ural-radius-sm); background: var(--ural-bg-soft); color: var(--ural-ink);
  width: 100%;
}
.ural-search-field select:focus,
.ural-search-field input:focus { outline: none; border-color: var(--ural-primary); background: #fff; }
.ural-search-input { position: relative; }
.ural-search-input svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ural-muted); }
.ural-search-input input { padding-left: 2.1rem; }
.ural-price-range { display: flex; align-items: center; gap: 0.4rem; }
.ural-price-range span { color: var(--ural-muted); }
.ural-search-submit .ural-btn { width: 100%; }

/* -------------------------------------------------------------------------
   Buscador por categorías
   ------------------------------------------------------------------------- */
.ural-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2.2rem;
}
.ural-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 1.4rem 1rem;
  background: #fff;
  border: 1px solid var(--ural-line);
  border-radius: var(--ural-radius);
  text-decoration: none;
  transition: transform var(--ural-trans), box-shadow var(--ural-trans), border-color var(--ural-trans);
}
.ural-cat:hover {
  transform: translateY(-5px);
  box-shadow: var(--ural-shadow);
  border-color: var(--ural-accent);
}
.ural-cat-ic {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ural-bg-soft);
  color: var(--ural-primary);
  border: 1px solid var(--ural-line);
  transition: background var(--ural-trans), color var(--ural-trans);
}
.ural-cat:hover .ural-cat-ic { background: var(--ural-primary); color: #fff; }
.ural-cat-ic svg { width: 28px; height: 28px; }
.ural-cat-name { font-weight: 700; color: var(--ural-ink); font-size: 0.98rem; line-height: 1.2; }
.ural-cat-count { font-size: 0.8rem; color: var(--ural-muted); }

/* -------------------------------------------------------------------------
   Paginación
   ------------------------------------------------------------------------- */
.ural-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 2.5rem; }
.ural-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 0.7rem;
  border: 1px solid var(--ural-line); border-radius: var(--ural-radius-sm);
  color: var(--ural-primary); font-weight: 600; text-decoration: none;
}
.ural-pagination .page-numbers.current,
.ural-pagination .page-numbers:hover { background: var(--ural-primary); color: #fff; border-color: var(--ural-primary); }

.ural-empty { text-align: center; color: var(--ural-muted); padding: 3rem 1rem; }

/* -------------------------------------------------------------------------
   Archivo
   ------------------------------------------------------------------------- */
.ural-archive-head { text-align: center; margin-bottom: 2rem; }
.ural-archive-title { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--ural-primary); margin: 0 0 0.4rem; }
.ural-archive-sub { color: var(--ural-muted); margin: 0; }

/* -------------------------------------------------------------------------
   Vista individual
   ------------------------------------------------------------------------- */
.ural-single-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.ural-single-type { display: inline-block; margin-left: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--ural-muted); }
.ural-single-title { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--ural-primary); margin: 0.6rem 0 0.4rem; line-height: 1.15; }
.ural-single-loc { display: flex; align-items: center; gap: 0.4rem; color: var(--ural-muted); margin: 0; }
.ural-single-loc svg { width: 18px; height: 18px; color: var(--ural-accent); }
.ural-single-price { text-align: right; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; color: var(--ural-primary); }
.ural-single-code { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ural-muted); margin-top: 0.2rem; }

/* Galería */
.ural-gallery-view { margin-bottom: 2.5rem; }
.ural-gallery-main { border-radius: var(--ural-radius); overflow: hidden; box-shadow: var(--ural-shadow); aspect-ratio: 16 / 9; background: var(--ural-bg-soft); }
.ural-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.ural-gallery-thumbs { display: flex; gap: 0.7rem; margin-top: 0.8rem; flex-wrap: wrap; }
.ural-gallery-thumb {
  width: 92px; height: 66px; padding: 0; border: 2px solid transparent; border-radius: var(--ural-radius-sm);
  overflow: hidden; cursor: pointer; background: none;
}
.ural-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ural-gallery-thumb.is-active { border-color: var(--ural-accent); }

/* Layout de detalle */
.ural-single-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; }

.ural-feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem;
  background: var(--ural-bg-soft); border: 1px solid var(--ural-line);
  border-radius: var(--ural-radius); padding: 1.4rem; margin-bottom: 2rem;
}
.ural-feature { text-align: center; }
.ural-feature-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ural-primary); border: 1px solid var(--ural-line); margin-bottom: 0.5rem; }
.ural-feature-ic svg { width: 22px; height: 22px; }
.ural-feature-val { display: block; font-size: 1.2rem; font-weight: 800; color: var(--ural-primary); line-height: 1; }
.ural-feature-lbl { display: block; font-size: 0.78rem; color: var(--ural-muted); margin-top: 0.2rem; }

.ural-section-block { margin-bottom: 2rem; }
.ural-section-block h2 { font-size: 1.3rem; color: var(--ural-primary); margin: 0 0 0.9rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ural-line); }
.ural-description { line-height: 1.7; color: var(--ural-ink); }
.ural-description p { margin: 0 0 1rem; }

.ural-amenities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem; }
.ural-amenities li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.ural-amenities svg { width: 20px; height: 20px; color: var(--ural-accent); flex: none; }

/* Barra lateral: contacto */
.ural-single-aside { position: sticky; top: 90px; }
.ural-contact-box { background: #fff; border: 1px solid var(--ural-line); border-radius: var(--ural-radius); box-shadow: var(--ural-shadow); padding: 1.6rem; }
.ural-contact-title { font-size: 1.2rem; color: var(--ural-primary); margin: 0 0 0.3rem; }
.ural-contact-agent { color: var(--ural-muted); margin: 0 0 1.2rem; font-weight: 600; }
.ural-contact-actions { display: grid; gap: 0.7rem; }

.ural-share { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.2rem; font-size: 0.9rem; color: var(--ural-muted); }
.ural-share a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--ural-bg-soft); color: var(--ural-primary); border: 1px solid var(--ural-line); transition: all var(--ural-trans); }
.ural-share a:hover { background: var(--ural-primary); color: #fff; transform: translateY(-2px); }
.ural-share svg { width: 18px; height: 18px; }

.ural-related { margin-top: 3rem; }
.ural-related h2 { font-size: 1.5rem; color: var(--ural-primary); margin-bottom: 1.3rem; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ural-cols-3, .ural-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .ural-single-layout { grid-template-columns: 1fr; }
  .ural-single-aside { position: static; }
  .ural-search-row { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 600px) {
  .ural-cols-2, .ural-cols-3, .ural-cols-4 { grid-template-columns: 1fr; }
  .ural-search-row { grid-template-columns: 1fr; }
  .ural-single-head { flex-direction: column; }
  .ural-single-price { text-align: left; }
}