/* ══════════════════════════════════════════════════════════════
   bienes-raices.css — Estilos de /bienes-raices
   ES: Colores de marca: navy #0B1F33 · coral var(--coral) · cream #F7F5F0
   EN: Brand colors: navy #0B1F33 · coral var(--coral) · cream #F7F5F0
   ══════════════════════════════════════════════════════════════ */

:root {
  --navy:   #0B1F33;
  --navy2:  #1C3A57;
  --cream:  #F7F5F0;
  --gray:   #8A94A6;
  --white:  #FFFFFF;
  --radius: 16px;
  --shadow: 0 4px 24px rgba(11,31,51,.12);
}

/* ES: Animación de entrada — los elementos aparecen deslizándose hacia arriba */
/* EN: Entrance animation — elements appear by sliding up */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--delay, 0ms);
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Sección eyebrow (etiqueta naranja pequeña encima de los títulos) ── */
.section-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════
   ES: HERO — la sección grande con foto de fondo y búsqueda
   EN: HERO — large section with background photo and search
   ══════════════════════════════════════════════════════════════ */
.br-hero {
  position: relative;
  min-height: 35vh;
  background: var(--navy) url('/img/hero.jpg') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h, 72px);
  padding-bottom: 0;
}

/* ES: Capa oscura sobre la foto para que el texto sea legible */
/* EN: Dark overlay on the photo so the text is readable */
.br-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(11,31,51,.82) 0%,
    rgba(11,31,51,.72) 60%,
    rgba(11,31,51,.90) 100%
  );
}

.br-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 32px 24px 20px;
}

.br-hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 12px;
}

.br-hero-title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 10px;
}

.br-hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,.72);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   ES: BARRA DE BÚSQUEDA — el elemento más importante de la página
   EN: SEARCH BAR — the most important element on the page
   ══════════════════════════════════════════════════════════════ */
.br-search-bar-wrap {
  position: relative;
  z-index: 10;
  padding: 0 24px 0;
  margin-top: 8px;
  transform: translateY(28px); /* ES: La barra se "monta" sobre la sección siguiente */
}

.br-search-bar {
  max-width: 1160px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(11,31,51,.22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 8px 8px 0;
  gap: 0;
}

.br-search-field {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 140px;
  border-right: 1px solid #e8e8e8;
  padding: 0 14px;
  height: 52px;
}

.br-search-text {
  min-width: 220px;
  flex: 2;
}

.br-field-icon {
  width: 18px;
  height: 18px;
  color: var(--gray);
  flex-shrink: 0;
  margin-right: 8px;
}

.br-search-field input,
.br-search-field select {
  width: 100%;
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--navy);
  background: transparent;
  cursor: pointer;
}

.br-search-field input::placeholder { color: var(--gray); }

/* ES: Campos numéricos libres del buscador — sin flechas spinner para un look limpio */
/* EN: Free numeric search fields — no spinner arrows for a clean look */
.br-num::-webkit-outer-spin-button,
.br-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.br-num { -moz-appearance: textfield; appearance: textfield; }

.br-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--coral);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .9375rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 14px 24px;
  cursor: pointer;
  transition: background .2s, transform .15s;
  margin: 4px 4px 4px 8px;
  white-space: nowrap;
}
.br-search-btn:hover { background: #e85a38; transform: translateY(-1px); }
.br-search-btn svg { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════════════
   BANNER HERRAMIENTAS — fila de pills ghost
   ══════════════════════════════════════════════════════════════ */
.br-herr-banner {
  background: #10233A;
  padding: 12px 20px;
}
.br-herr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.br-herr-pill {
  position: relative;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid rgba(255,107,74,0.5);
  background: transparent;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.br-herr-pill:hover {
  background: rgba(255,107,74,0.15);
  border-color: var(--coral);
  color: #fff;
}
.br-herr-pill--coral {
  background: var(--coral);
  border-color: var(--coral);
}
.br-herr-pill--coral:hover {
  background: #e85a38;
  border-color: #e85a38;
}
/* Tooltips — pills de herramientas y botón de enlaces útiles */
.br-herr-pill[data-tooltip]::after,
.br-recursos-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #10233A;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  border: 1px solid rgba(255,107,74,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 100;
}
.br-herr-pill[data-tooltip]:hover::after,
.br-recursos-btn[data-tooltip]:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   ES: BARRA DE CONTROL — contador de resultados y toggle lista/mapa
   EN: CONTROL BAR — results count and list/map toggle
   ══════════════════════════════════════════════════════════════ */
.br-results-bar {
  background: var(--cream);
  border-bottom: 1px solid #e0ddd8;
  padding: 52px 0 14px; /* ES: El padding top compensa el translateY de la barra de búsqueda */
}

.br-results-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.br-results-count {
  font-family: 'Inter', sans-serif;
  font-size: .9375rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}

.br-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--navy);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 10px 3px 10px;
  border-radius: 99px;
  text-transform: capitalize;
}

.br-clear-tag {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 4px;
}
.br-clear-tag:hover { color: #fff; }

.br-view-toggle {
  display: flex;
  gap: 4px;
}

.br-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #d8d5d0;
  border-radius: 10px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray);
  cursor: pointer;
  transition: all .2s;
}
.br-toggle-btn svg { width: 18px; height: 18px; }
.br-toggle-btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.br-toggle-btn:hover:not(.is-active) { border-color: var(--navy); color: var(--navy); }

/* ══════════════════════════════════════════════════════════════
   ES: ZONA PRINCIPAL — fondo crema, contiene el grid y el mapa
   EN: MAIN AREA — cream background, contains grid and map
   ══════════════════════════════════════════════════════════════ */
.br-main {
  background: var(--cream);
  padding: 36px 24px 60px;
  min-height: 400px;
}

/* ══════════════════════════════════════════════════════════════
   ES: GRID DE TARJETAS — 3 columnas en desktop
   EN: CARD GRID — 3 columns on desktop
   ══════════════════════════════════════════════════════════════ */
.br-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ES: Tarjeta de propiedad — el "producto" de la página */
/* EN: Property card — the "product" of this page */
.br-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  color: inherit;
}
.br-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(11,31,51,.18); }

/* ES: Contenedor de la foto — relación de aspecto 3:2 */
/* EN: Photo container — 3:2 aspect ratio */
.br-card-img-wrap {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.br-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.br-card:hover .br-card-img { transform: scale(1.04); }

/* ES: Badges de estado encima de la foto */
/* EN: Status badges over the photo */
.br-card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.br-badge {
  font-family: 'Inter', sans-serif;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
}
.br-badge-dest { background: var(--coral); color: #fff; }
.br-badge-demo { background: rgba(0,0,0,.55); color: #fff; }
.br-badge-pend { background: #F59E0B; color: #fff; }

/* ES: Puntitos del carrusel de fotos */
/* EN: Photo carousel dots */
.br-card-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}

.br-card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: background .2s;
}
.br-card-dot.is-active { background: #fff; }

/* ES: Cuerpo de la tarjeta — precio, specs, dirección, broker */
/* EN: Card body — price, specs, address, broker */
.br-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.br-card-precio {
  font-family: 'Archivo', sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}
.br-price-mo {
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray);
}

.br-card-specs {
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.br-card-specs span { display: flex; align-items: center; gap: 3px; }
.br-card-tipo { color: var(--gray); text-transform: capitalize; }

.br-card-dir {
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: var(--gray);
  margin: 0;
}

/* ES: Atribución del broker — letra chica, obligatoria por reglas IDX */
/* EN: Broker attribution — small text, required by IDX rules */
.br-card-broker {
  font-family: 'Inter', sans-serif;
  font-size: .6875rem;
  color: #aaa;
  margin: 4px 0 0;
  border-top: 1px solid #f0eee9;
  padding-top: 8px;
}

/* ES: Estado vacío — cuando no hay resultados */
/* EN: Empty state — when there are no results */
.br-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  color: var(--gray);
}
.br-empty svg { width: 64px; height: 64px; margin-bottom: 16px; opacity: .4; }
.br-empty p { font-family: 'Inter', sans-serif; font-size: 1.0625rem; margin: 0 0 20px; }
.br-empty-reset {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 10px;
  text-decoration: none;
}

/* ES: Paginación */
/* EN: Pagination */
.br-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.br-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid #d8d5d0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  color: var(--navy);
  text-decoration: none;
  transition: all .2s;
}
.br-page-btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.br-page-btn:hover:not(.is-active) { border-color: var(--navy); }

/* ══════════════════════════════════════════════════════════════
   ES: MAPA — contenedor de Leaflet
   EN: MAP — Leaflet container
   ══════════════════════════════════════════════════════════════ */
.br-map-container {
  width: 100%;
  height: 560px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ES: Popup del mapa al hacer clic en un pin */
/* EN: Map popup when clicking a pin */
.br-map-popup { font-family: 'Inter', sans-serif; min-width: 200px; }
.br-map-popup img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.br-map-popup .mp-precio { font-family: 'Archivo', sans-serif; font-size: 1.125rem; font-weight: 800; color: var(--navy); margin: 0 0 4px; }
.br-map-popup .mp-dir   { font-size: .8125rem; color: var(--gray); margin: 0 0 10px; }
.br-map-popup a { display: block; background: var(--coral); color: #fff; text-align: center; padding: 8px; border-radius: 8px; font-weight: 700; font-size: .875rem; text-decoration: none; }

/* ES: Estilo del pin del mapa — precio en una burbuja */
/* EN: Map pin style — price in a bubble */
.br-map-pin {
  background: var(--navy);
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: .75rem;
  padding: 5px 10px;
  border-radius: 99px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(11,31,51,.3);
  border: 2px solid #fff;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.br-map-pin:hover { background: var(--coral); transform: scale(1.1); }

/* ══════════════════════════════════════════════════════════════
   ES: AVISO IDX — atribución legal siempre visible
   EN: IDX DISCLAIMER — always-visible legal attribution
   ══════════════════════════════════════════════════════════════ */
.br-idx-disclaimer {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  color: var(--gray);
  text-align: center;
  padding: 16px 24px 24px;
  border-top: 1px solid #e0ddd8;
  background: var(--cream);
}

/* ══════════════════════════════════════════════════════════════
   ES: SECCIONES INFORMATIVAS — conocimiento y formulario
   EN: INFO SECTIONS — knowledge center and contact form
   ══════════════════════════════════════════════════════════════ */
.br-section { padding: 72px 0; }
.br-section-title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.2;
}
.br-section-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--gray);
  margin: 0 0 40px;
}

/* ES: Centro de conocimiento — grid de 3 tarjetas de artículos */
/* EN: Knowledge center — 3-column article card grid */
.br-conocimiento { background: var(--white); }

.br-art-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.br-art-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .2s, box-shadow .2s;
  border: 1.5px solid transparent;
}
.br-art-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--coral); }

.br-art-icon { font-size: 2rem; line-height: 1; }
.br-art-title {
  font-family: 'Archivo', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.35;
}
.br-art-desc {
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: var(--gray);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.br-art-link {
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  color: var(--coral);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   ES: FORMULARIO — igual que /inspecciones y /multimedia
   EN: FORM — same as /inspecciones and /multimedia
   ══════════════════════════════════════════════════════════════ */
.br-form-section { background: var(--navy2); }
.br-form-section .section-eyebrow { color: var(--coral); }
.br-form-section .br-section-title { color: #fff; }

.br-form-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: start;
}

.br-form-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 16px 0 28px;
}

.br-form {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-family: 'Inter', sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--navy);
}
.form-group input,
.form-group select,
.form-group textarea {
  font-family: 'Inter', sans-serif;
  font-size: .9375rem;
  color: var(--navy);
  border: 1.5px solid #d8d5d0;
  border-radius: 10px;
  padding: 11px 14px;
  background: #fff;
  outline: none;
  transition: border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--coral); }

.req { color: var(--coral); }

.btn-form-submit {
  background: var(--coral);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 16px 28px;
  cursor: pointer;
  transition: background .2s, transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-form-submit:hover { background: #e85a38; transform: translateY(-1px); }
.btn-form-submit.is-loading .btn-text { display: none; }
.btn-form-submit:not(.is-loading) .btn-loading { display: none; }
.btn-form-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.form-error-msg {
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
}

/* ES: Mensaje de éxito al enviar el formulario */
/* EN: Success message after form submission */
.form-success {
  background: #fff;
  border-radius: var(--radius);
  padding: 40px 28px;
  text-align: center;
}
.success-icon svg { width: 48px; height: 48px; color: #22c55e; margin-bottom: 16px; }
.form-success h3 { font-family: 'Archivo', sans-serif; font-size: 1.375rem; color: var(--navy); margin: 0 0 8px; }
.form-success p  { font-family: 'Inter', sans-serif; font-size: .9375rem; color: var(--gray); margin: 0; }

/* ES: Tarjeta de contacto lateral — igual que /inspecciones y /multimedia */
/* EN: Contact sidebar card — same as /inspecciones and /multimedia */
.br-contact-col { padding-top: 8px; }

.mm-contact-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 28px 24px; }
.mm-contact-title { font-family: 'Archivo', sans-serif; font-size: 1.125rem; font-weight: 700; color: #fff; margin: 0 0 6px; }
.mm-contact-sub { font-family: 'Inter', sans-serif; font-size: .875rem; color: rgba(255,255,255,.6); margin: 0 0 24px; line-height: 1.5; }
.mm-contact-items { display: flex; flex-direction: column; gap: 16px; }
.mm-contact-item { display: flex; align-items: center; gap: 14px; text-decoration: none; color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; transition: background .2s, border-color .2s; }
.mm-contact-item:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.mm-contact-static { cursor: default; }
.mm-contact-static:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.mm-contact-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mm-contact-icon svg { width: 18px; height: 18px; }
.mm-wa-icon { background: rgba(37,211,102,.15); }
.mm-wa .mm-contact-icon svg { color: #25D366; }
.mm-contact-label { display: block; font-family: 'Inter', sans-serif; font-size: .75rem; color: rgba(255,255,255,.5); line-height: 1; margin-bottom: 3px; }
.mm-contact-value { display: block; font-family: 'Inter', sans-serif; font-size: .9375rem; font-weight: 600; color: #fff; line-height: 1.2; }

/* ══════════════════════════════════════════════════════════════
   ES: BOTÓN "ENLACES ÚTILES" + PANEL COMPACTO
       El botón es "hermano menor" del buscador: mismo radio (18px) y
       sombra, fondo blanco, texto navy. El panel es una tarjeta flotante
       alineada al ancho del buscador, con 3 categorías en columnas y
       solo el nombre del enlace visible (descripción como tooltip/title).
   EN: "USEFUL LINKS" BUTTON + COMPACT PANEL
       Button is the search bar's "little brother": same radius (18px) and
       shadow, white background, navy text. Panel is a floating card aligned
       to the search bar width, 3 categories in columns, link name only
       visible (description as tooltip/title attribute).
   ══════════════════════════════════════════════════════════════ */

/* ── BANDA NAVY + BOTÓN "ENLACES ÚTILES" ────────────────────────────────── */

.br-recursos-hero-ext {
  background: var(--navy);
  display: flex;
  justify-content: flex-start;
  padding: 14px 24px 16px;
}

.br-recursos-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 20px;
  color: rgba(255,255,255,.78);
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  line-height: 1;
  white-space: nowrap;
}
.br-recursos-btn:hover {
  border-color: rgba(255,255,255,.55);
  color: #fff;
  background: rgba(255,255,255,.07);
}
.br-recursos-btn[aria-expanded="true"] {
  border-color: rgba(255,255,255,.55);
  color: #fff;
  background: rgba(255,255,255,.1);
}
.br-recursos-chevron {
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform .2s ease;
}
.br-recursos-btn[aria-expanded="true"] .br-recursos-chevron {
  transform: rotate(180deg);
}

/* ── PANEL CONTENEDOR ────────────────────────────────────────────────────── */

.br-recursos-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0 24px;
  transition: max-height .16s ease-in, opacity .14s ease-in, padding .16s ease-in;
}
.br-recursos-panel.is-open {
  max-height: 960px;
  opacity: 1;
  pointer-events: auto;
  padding: 14px 24px 28px;
  transition: max-height .26s ease-out, opacity .18s ease-out, padding .18s ease-out;
}

/* ── TARJETA FLOTANTE ────────────────────────────────────────────────────── */

.br-eu-card {
  max-width: 1160px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(11,31,51,.22);
  display: flex;
  overflow: hidden;
  transform: translateY(-6px);
  transition: transform .2s ease-out .04s, opacity .18s ease-out .04s;
  opacity: 0;
}
.br-recursos-panel.is-open .br-eu-card {
  transform: translateY(0);
  opacity: 1;
}

/* ── COLUMNAS ────────────────────────────────────────────────────────────── */

/* ES: Izquierda — 10 enlaces de Florida, siempre visibles */
.br-eu-fl-col {
  flex: 0 0 42%;
  padding: 22px 20px 22px 22px;
  border-right: 1px solid #f0ece4;
}

/* ES: Derecha — selector de condado + enlaces del condado activo */
.br-eu-county-col {
  flex: 1;
  padding: 22px 22px 22px 20px;
  min-width: 0;
}

/* ── ENCABEZADOS DE SECCIÓN ─────────────────────────────────────────────── */

.br-eu-section-hdr {
  font-family: 'Inter', sans-serif;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9ca3af;
  margin: 0 0 12px;
  padding: 0 6px;
}

/* ── GRID DE ENLACES FLORIDA (2 columnas) ───────────────────────────────── */

.br-eu-fl-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* ── ENLACE COMPARTIDO (Florida + condado) ──────────────────────────────── */

.br-eu-link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 7px;
  border-radius: 7px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--navy);
  transition: background .13s, color .13s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.br-eu-link:hover { background: #f4f1eb; color: var(--coral); }
.br-eu-emoji { font-size: .9rem; flex-shrink: 0; }
.br-eu-ext {
  flex-shrink: 0;
  color: #c4bfb5;
  transition: color .13s;
  margin-left: auto;
}
.br-eu-link:hover .br-eu-ext { color: var(--coral); }

/* ── PASTILLAS DE CONDADO ───────────────────────────────────────────────── */

.br-eu-pills {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 7px;
  margin-bottom: 14px;
}
.br-eu-pill:nth-child(5) { grid-column: 2 / span 2; }
.br-eu-pill:nth-child(6) { grid-column: 4 / span 2; }
.br-eu-pill:nth-child(7) { grid-column: 6 / span 2; }

.br-eu-pill {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1.5px solid #e8e3da;
  background: #faf8f5;
  color: var(--navy);
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s, box-shadow .14s;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}
.br-eu-pill:hover {
  border-color: var(--coral);
  background: #fff5f3;
  color: var(--coral);
}
.br-eu-pill.is-active {
  border-color: var(--coral);
  background: var(--coral);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,107,74,.3);
}
.br-eu-pill-ico { font-size: .95rem; flex-shrink: 0; }
.br-eu-pill-name { }


/* ── BLOQUE DESPLEGABLE DEL CONDADO ─────────────────────────────────────── */

.br-eu-county-block {
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease-out;
}
.br-eu-county-block.is-open {
  max-height: 480px;
}

.br-eu-county-hdr {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  color: var(--navy);
  margin: 4px 0 10px;
  padding: 10px 8px 0;
  border-top: 1px solid #f0ece4;
}

.br-eu-county-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .br-recursos-panel { padding-left: 16px; padding-right: 16px; }
  .br-recursos-panel.is-open { padding-left: 16px; padding-right: 16px; }
  .br-eu-pills { grid-template-columns: repeat(4, 1fr); }
  .br-eu-pill,
  .br-eu-pill:nth-child(5),
  .br-eu-pill:nth-child(6),
  .br-eu-pill:nth-child(7) { grid-column: span 1; }
}

@media (max-width: 900px) {
  .br-grid { grid-template-columns: repeat(2, 1fr); }
  .br-art-grid { grid-template-columns: 1fr; gap: 16px; }
  .br-form-layout { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .br-search-bar { flex-direction: column; padding: 12px; border-radius: 14px; gap: 2px; }
  .br-search-field { border-right: none; border-bottom: 1px solid #e8e8e8; width: 100%; min-width: unset; padding: 10px 12px; height: 48px; }
  .br-search-field:last-of-type { border-bottom: none; }
  .br-search-btn { width: 100%; justify-content: center; margin: 8px 0 0; }
  .br-search-bar-wrap { padding: 0 16px; transform: translateY(20px); }
  .br-results-bar { padding-top: 38px; }
  .br-results-bar-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .br-hero-content { padding: 28px 16px 16px; }
  .form-row { grid-template-columns: 1fr; }

  /* ES: Panel mobile — columna única, pastillas táctiles */
  .br-recursos-hero-ext { padding: 28px 16px 18px; }
  .br-recursos-panel { padding: 0 12px; }
  .br-recursos-panel.is-open { padding: 10px 12px 20px; }
  .br-eu-card { flex-direction: column; border-radius: 14px; }
  .br-eu-fl-col {
    flex: none;
    border-right: none;
    border-bottom: 1px solid #f0ece4;
    padding: 16px 14px;
  }
  .br-eu-county-col { padding: 16px 14px; }
  .br-eu-fl-grid { grid-template-columns: 1fr 1fr; }
  .br-eu-link { min-height: 44px; font-size: .875rem; }
  .br-eu-pills { grid-template-columns: 1fr; gap: 8px; }
  .br-eu-pill,
  .br-eu-pill:nth-child(5),
  .br-eu-pill:nth-child(6),
  .br-eu-pill:nth-child(7) { grid-column: 1 / -1; min-height: 44px; font-size: .8125rem; }
  .br-eu-county-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .br-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .br-hero { min-height: 40vh; }
  .br-card-body { padding: 15px 16px 17px; }
  .br-card-specs { gap: 8px 10px; }
}

/* ── Portal: botón de corazón en tarjetas de listing ───────── */
.br-card-img-wrap { position: relative; }
.br-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .15s, transform .15s;
  color: #5C6B7C;
}
.br-fav-btn:hover { background: #fff; transform: scale(1.1); color: #EF4444; }
.br-fav-btn.is-fav { color: #EF4444; }
.br-fav-btn.is-fav svg { fill: #EF4444; stroke: #EF4444; }

/* ── Guardar búsqueda ── */
.br-guardar-busqueda-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .5rem auto 0;
  max-width: 1280px;
  padding: 0 20px;
}
.br-guardar-bus-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: .45rem 1rem;
  border-radius: 50px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.br-guardar-bus-btn:hover { background: rgba(255,255,255,.22); }
.br-guardar-bus-ok {
  font-size: .82rem;
  color: rgba(255,255,255,.85);
}
.br-guardar-bus-ok a { color: var(--coral); }