/* ══════════════════════════════════════════════════════════════
   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: var(--esp-12);
}

/* ══════════════════════════════════════════════════════════════
   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: var(--esp-32) var(--esp-24) var(--esp-20);
}

.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 var(--esp-12);
}

.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 var(--esp-10);
}

.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 var(--esp-24) 0;
  margin-top: var(--esp-8);
  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: var(--card-radius);
  box-shadow: 0 8px 40px rgba(11,31,51,.22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: var(--esp-8) var(--esp-8) var(--esp-8) 0;
  gap: 0;
}

.br-search-field {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 140px;
  border-right: 1px solid #e8e8e8;
  padding: 0 var(--esp-12);
  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: var(--esp-8);
}

.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; min-height: 44px; }  /* táctil 44 */

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

/* ES: Aquí vivía el BANNER DE HERRAMIENTAS: una banda navy con cinco pastillas
       sueltas debajo del botón de enlaces útiles. Lo sustituye el menú
       desplegable "Herramientas" (L5), hermano del de enlaces útiles, cuyos
       estilos están abajo junto a los del panel que comparten.
       No es un borrado a la ligera: las pastillas enseñaban CUATRO de las ocho
       herramientas y obligaban a adivinar qué había en "Ver todas". El menú
       las enseña todas, agrupadas por a quién sirven.
   EN: The TOOLS BANNER lived here — a navy strip with five loose pills under
       the useful-links button. Replaced by the "Herramientas" dropdown (L5),
       twin of the useful-links one; its styles sit further down next to the
       panel they share. The pills showed FOUR of the eight tools and left
       "see all" to guesswork; the menu shows every one, grouped by who they
       serve. */

/* Tooltips — botones de los dos menús de la cabecera */
.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: var(--esp-6) var(--esp-10);
  border-radius: var(--radio-8);
  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-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 var(--esp-12); /* 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: var(--esp-16);
  flex-wrap: wrap;
}

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

.br-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-4);
  background: var(--navy);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: var(--esp-2) var(--esp-10) var(--esp-2) var(--esp-10);
  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 var(--esp-4);
}
.br-clear-tag:hover { color: #fff; }

.br-view-toggle {
  display: flex;
  gap: var(--esp-4);
}

.br-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  background: #fff;
  border: 1.5px solid #d8d5d0;
  border-radius: var(--radio-10);
  padding: var(--esp-8) var(--esp-12);
  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: var(--esp-32) var(--esp-24) 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: var(--esp-24);
}

/* 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: var(--esp-6);
  z-index: 2;
}

.br-badge {
  font-family: 'Inter', sans-serif;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: var(--esp-4) var(--esp-10);
  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: var(--esp-4);
  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: var(--esp-16) var(--esp-16) var(--esp-16);
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
  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: var(--esp-12);
  margin: 0;
}
.br-card-specs span { display: flex; align-items: center; gap: var(--esp-2); }
.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: var(--esp-4) 0 0;
  border-top: 1px solid #f0eee9;
  padding-top: var(--esp-8);
}

/* 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: var(--esp-64) var(--esp-24);
  color: var(--gray);
}
.br-empty svg { width: 64px; height: 64px; margin-bottom: var(--esp-16); opacity: .4; }
.br-empty p { font-family: 'Inter', sans-serif; font-size: 1.0625rem; margin: 0 0 var(--esp-20); }
.br-empty-reset {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  padding: var(--esp-12) var(--esp-24);
  border-radius: var(--radio-10);
  text-decoration: none;
}

/* ES: Paginación */
/* EN: Pagination */
.br-pagination {
  display: flex;
  justify-content: center;
  gap: var(--esp-8);
  margin-top: var(--esp-40);
}
.br-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio-10);
  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: var(--radio-8); margin-bottom: var(--esp-8); }
.br-map-popup .mp-precio { font-family: 'Archivo', sans-serif; font-size: 1.125rem; font-weight: 800; color: var(--navy); margin: 0 0 var(--esp-4); }
.br-map-popup .mp-dir   { font-size: .8125rem; color: var(--gray); margin: 0 0 var(--esp-10); }
.br-map-popup a { display: block; background: var(--coral); color: #fff; text-align: center; padding: var(--esp-8); border-radius: var(--radio-8); 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: var(--esp-4) var(--esp-10);
  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: var(--esp-16) var(--esp-24) var(--esp-24);
  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 var(--esp-12);
  line-height: 1.2;
}
.br-section-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--gray);
  margin: 0 0 var(--esp-40);
}

/* 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: var(--esp-24);
}

.br-art-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: var(--esp-32) var(--esp-24);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--esp-10);
  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: var(--esp-4);
}

/* ══════════════════════════════════════════════════════════════
   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: var(--esp-64);
  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: var(--esp-16) 0 var(--esp-24);
}

.br-form {
  background: #fff;
  border-radius: var(--radius);
  padding: var(--esp-32) var(--esp-24);
  display: flex;
  flex-direction: column;
  gap: var(--esp-16);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-16); }

.form-group { display: flex; flex-direction: column; gap: var(--esp-6); }
.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: var(--radio-10);
  padding: var(--esp-10) var(--esp-12);
  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: var(--radio-12);
  padding: var(--esp-16) var(--esp-24);
  cursor: pointer;
  transition: background .2s, transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
}
.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: var(--radio-8);
  padding: var(--esp-10) var(--esp-12);
}

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

.mm-contact-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: var(--esp-24) var(--esp-24); }
.mm-contact-title { font-family: 'Archivo', sans-serif; font-size: 1.125rem; font-weight: 700; color: #fff; margin: 0 0 var(--esp-6); }
.mm-contact-sub { font-family: 'Inter', sans-serif; font-size: .875rem; color: rgba(255,255,255,.6); margin: 0 0 var(--esp-24); line-height: 1.5; }
.mm-contact-items { display: flex; flex-direction: column; gap: var(--esp-16); }
.mm-contact-item { display: flex; align-items: center; gap: var(--esp-12); 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: var(--radio-12); padding: var(--esp-12) var(--esp-16); 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: var(--radio-8); 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: var(--esp-2); }
.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);
  /* ES: 44px arriba, y el número NO es decorativo: la tarjeta del buscador
         lleva transform: translateY(28px) para montarse sobre esta franja
         (línea 111), así que sus 28px caen DENTRO de aquí. Con los 12px que
         había, los botones nacían a 432px y el borde de la tarjeta blanca
         terminaba en 448 — es decir, quedaban metidos por debajo de ella y se
         leía como un error de montaje. 28 del vuelo + 16 de aire = 44.
         Si alguien cambia ese translateY, este número cambia con él.
     EN: 44px on top, and the number is not decorative: the search card carries
         transform: translateY(28px) to sit over this strip (line 111), so its
         28px land INSIDE here. With the previous 12px the buttons began at
         432px while the white card's edge ended at 448 — tucked underneath it,
         reading as a layout mistake. 28 of overhang + 16 of air = 44.
         If anyone changes that translateY, this number changes with it. */
  padding: 44px var(--esp-24) var(--esp-16);
}

/* ES: EL CARRIL DE LOS BOTONES. Mismo max-width y mismo centrado que la tarjeta
       del buscador (línea 115), para que el borde izquierdo de "Enlaces útiles"
       caiga en la MISMA vertical que el borde izquierdo de la tarjeta blanca.
       Antes arrancaban a 24px del filo de la pantalla mientras la tarjeta
       empezaba a 140 en escritorio: 116px de desalineación que se leía como
       descuido. Copiar el número en vez de inventar otro es lo que hace que
       sigan alineados a cualquier ancho, y si un día la tarjeta cambia de
       carril, este se cambia con ella.
   EN: THE BUTTON LANE. Same max-width and centring as the search card (line
       115) so that "Enlaces útiles"'s left edge falls on the SAME vertical as
       the white card's. They used to start 24px from the screen edge while the
       card started at 140 on desktop — 116px of misalignment that read as
       carelessness. Reusing the number rather than inventing another is what
       keeps them aligned at any width. */
.br-recursos-fila {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  /* ES: aire entre los dos y permiso para bajar de línea en pantallas
         estrechas antes que salirse.
     EN: room between them, and permission to wrap rather than overflow. */
  flex-wrap: wrap;
  gap: var(--esp-8);
}

.br-recursos-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-6);
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radio-20);
  color: rgba(255,255,255,.78);
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  padding: var(--esp-6) var(--esp-12);
  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 var(--esp-24);
  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: var(--esp-12) var(--esp-24) var(--esp-24);
  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: var(--card-radius);
  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;
}

/* ══════════════════════════════════════════════════════════════
   ES: MENÚ DE HERRAMIENTAS (L5)
       Reaprovecha la tarjeta flotante de los enlaces útiles —mismo blanco,
       mismo radio, misma sombra y misma animación— y solo cambia lo de
       dentro. Que los dos menús se abran igual no es capricho: quien ya
       aprendió a usar uno no tiene que aprender el otro.
       Las herramientas van en columnas porque son ocho y en una sola fila
       vertical la tarjeta se haría más alta que la pantalla.
   EN: TOOLS MENU (L5). Reuses the useful-links floating card — same white,
       radius, shadow and animation — changing only the contents, so whoever
       learned one menu need not learn the other. Laid out in columns because
       eight items in a single vertical run would outgrow the screen.
   ══════════════════════════════════════════════════════════════ */
/* ES: EL TECHO DEL PANEL, aparte. El panel comparte estilos con el de enlaces
       útiles, que abre hasta 960px porque su contenido es fijo. El de
       herramientas NO es fijo: su lista sale de cfg.herramientas, y existe
       justo para que el día de mañana se le añada una línea. Con ocho
       herramientas mide 788px en móvil, a 172 del techo — tres herramientas
       más y la última quedaría cortada SIN AVISO, porque el panel recorta con
       overflow:hidden y no aparece ninguna barra que lo delate.
       1600px cubre el doble de la lista actual. El desplegado no se nota más
       lento: la animación va contra el alto real del contenido, no contra el
       techo.
   EN: THE PANEL'S CEILING, set apart. The shared panel opens to 960px because
       the useful-links content is fixed. The tools list is NOT: it comes from
       cfg.herramientas and exists precisely so a line can be added later. At
       eight tools it measures 788px on mobile — 172 from the ceiling. Three
       more and the last one would be cut off SILENTLY, since the panel clips
       with overflow:hidden and shows no scrollbar to give it away. 1600px
       covers twice the current list; the open animation runs against the real
       content height, not the ceiling, so nothing feels slower.

   ES: Y por si algún día se pasa igual: overflow-y auto SOLO cuando está
       abierto. Mientras quepa no se ve ninguna barra y nada cambia; si algún
       día no cabe, la lista se desplaza en vez de cortarse a escondidas. El
       cerrado sigue con overflow hidden, que es lo que hace el plegado.
       Medido: 8 herramientas 788px, 16 herramientas 1361px, techo 1600px.
   EN: And in case it is ever exceeded anyway: overflow-y auto ONLY while open.
       While it fits, no scrollbar appears and nothing changes; if one day it
       does not fit, the list scrolls instead of being cut off unseen. The
       closed state keeps overflow hidden, which is what makes the collapse
       work. Measured: 8 tools 788px, 16 tools 1361px, ceiling 1600px. */
#br-herramientas-panel.is-open { max-height: 1600px; overflow-y: auto; }

.br-eu-card--herr {
  /* ES: esta tarjeta no reparte columnas ella misma; lo hace su hijo.
     EN: this card does not do the columns itself; its child does. */
  display: block;
  padding: var(--esp-20) var(--esp-24);
}
.br-herr-menu {
  columns: 2;
  column-gap: var(--esp-32);
}
.br-herr-grupo {
  /* ES: un encabezado nunca puede quedarse solo al final de una columna con
         sus herramientas en la siguiente.
     EN: a heading must never be stranded at a column's foot with its tools in
         the next one. */
  break-after: avoid;
  break-inside: avoid;
  margin: 0 0 var(--esp-8);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-medio, #8A94A6);
}
.br-herr-grupo + .br-herr-item { margin-top: 0; }
.br-herr-menu .br-herr-grupo:not(:first-child) { margin-top: var(--esp-16); }

.br-herr-item {
  break-inside: avoid;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-10);
  padding: var(--esp-8) var(--esp-10);
  margin: 0 0 2px;
  border-radius: var(--radio-8);
  text-decoration: none;
  color: var(--navy);
  transition: background .14s;
}
.br-herr-item:hover { background: #F7F5F0; }
.br-herr-ico { font-size: 1rem; line-height: 1.35; flex-shrink: 0; }
.br-herr-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.br-herr-nombre { font-size: .84rem; font-weight: 600; }
.br-herr-desc {
  font-size: .74rem;
  color: var(--gris-medio, #8A94A6);
  line-height: 1.4;
}
.br-herr-flecha {
  margin-left: auto;
  color: var(--coral);
  opacity: 0;
  transition: opacity .14s;
  flex-shrink: 0;
}
.br-herr-item:hover .br-herr-flecha { opacity: 1; }

/* ES: La salida al catálogo completo. Cruza las dos columnas y va separada por
       una línea: no es una herramienta más, es la puerta a las que no caben.
   EN: The way out to the full catalogue. Spans both columns, set off by a rule:
       it is not one more tool but the door to the ones that did not fit. */
.br-herr-todas {
  column-span: all;
  display: block;
  margin-top: var(--esp-16);
  padding-top: var(--esp-12);
  border-top: 1px solid #EFEBE3;
  font-size: .8rem;
  font-weight: 600;
  color: var(--coral);
  text-decoration: none;
}
.br-herr-todas:hover { text-decoration: underline; }

/* ES: En móvil, una sola columna: dos de 160px no las lee nadie.
   EN: One column on mobile — two 160px columns are unreadable. */
@media (max-width: 720px) {
  .br-eu-card--herr { padding: var(--esp-16); }
  .br-herr-menu { columns: 1; }
}

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

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

/* ES: Derecha — selector de condado + enlaces del condado activo */
.br-eu-county-col {
  flex: 1;
  padding: var(--esp-20) var(--esp-20) var(--esp-20) var(--esp-20);
  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 var(--esp-12);
  padding: 0 var(--esp-6);
}

/* ── 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: var(--esp-2);
}

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

.br-eu-link {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  min-height: 34px;
  padding: var(--esp-4) var(--esp-6);
  border-radius: var(--radio-8);
  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: var(--esp-6);
  margin-bottom: var(--esp-12);
}
.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: var(--esp-4);
  min-height: 38px;
  padding: var(--esp-6) var(--esp-10);
  border-radius: var(--radio-10);
  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: var(--esp-4) 0 var(--esp-10);
  padding: var(--esp-10) var(--esp-8) 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: var(--esp-2);
}

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

@media (max-width: 1023px) {
  .br-recursos-panel { padding-left: var(--esp-16); padding-right: var(--esp-16); }
  .br-recursos-panel.is-open { padding-left: var(--esp-16); padding-right: var(--esp-16); }
  .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: 1023px) {
  .br-grid { grid-template-columns: repeat(2, 1fr); }
  .br-art-grid { grid-template-columns: 1fr; gap: var(--esp-16); }
  .br-form-layout { grid-template-columns: 1fr; gap: var(--esp-32); }
}

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

  /* ES: Panel mobile — columna única, pastillas táctiles */
  /* ES: aquí el vuelo de la tarjeta es de 20px (línea 1146), no de 28, así que
         el aire de arriba se recalcula: 20 + 16 = 36. Con los 24 que había solo
         quedaban 4px libres bajo el borde blanco.
     EN: here the card's overhang is 20px (line 1146), not 28, so the top air is
         recomputed: 20 + 16 = 36. The previous 24 left just 4px of clearance. */
  .br-recursos-hero-ext { padding: 36px var(--esp-16) var(--esp-16); }
  .br-recursos-panel { padding: 0 var(--esp-12); }
  .br-recursos-panel.is-open { padding: var(--esp-10) var(--esp-12) var(--esp-20); }
  .br-eu-card { flex-direction: column; border-radius: var(--radio-12); }
  .br-eu-fl-col {
    flex: none;
    border-right: none;
    border-bottom: 1px solid #f0ece4;
    padding: var(--esp-16) var(--esp-12);
  }
  .br-eu-county-col { padding: var(--esp-16) var(--esp-12); }
  .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: var(--esp-8); }
  .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: 767px) {
  .br-grid { grid-template-columns: 1fr; }
}

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

/* ── 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 var(--esp-20);
}
.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); }

/* ES: táctil mínimo 44 (Tanda 2b). Heredaba de las pastillas de herramientas,
       que ya no existen; la garantía pasa a lo que las sustituye — cada
       herramienta del menú— y alcanza además a los DOS botones de menú de la
       cabecera, que nunca la habían tenido y son lo primero que se toca al
       llegar desde un teléfono.
   EN: 44px minimum touch target (Batch 2b). Inherited from the tool pills,
       now gone; the guarantee moves to what replaced them — each tool row in
       the menu — and now also covers BOTH header menu buttons, which never had
       it and are the first thing a phone user touches. */
.br-herr-item { min-height: 44px; box-sizing: border-box; }
.br-recursos-btn { min-height: 44px; box-sizing: border-box; }

/* ES: filtros de búsqueda y favorito — táctil 44 (Tanda 2b, ronda 2). */
.br-filtros input:not([type=hidden]), .br-filtros select,
.br-search input:not([type=hidden]), .br-search select,
.br-scope input:not([type=hidden]), .br-scope select { min-height: 44px; box-sizing: border-box; }
.br-fav-btn { min-width: 44px; min-height: 44px; }

/* ES: buscador de propiedades (.br-search-bar) — táctil 44 (Tanda 2b, ronda 3). */
.br-search-bar input:not([type=hidden]), .br-search-bar select { min-height: 45px; box-sizing: border-box; }  /* 45: el borde redondeaba a 43 */

/* ES: form de contacto del pie (.form-group, campos bc-*) — táctil 44 (ronda 4). */
.form-group input:not([type=hidden]), .form-group select, .form-group textarea { min-height: 44px; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════
   ES: LAS CINTAS DE LAS PROPIEDADES (L4)
       Dos familias con trabajos distintos y por eso con aspecto distinto:
         · "Exclusiva" — coral de marca. Dice "esto es nuestro" y es lo bueno
           que se quiere destacar.
         · el ESTADO (pendiente, bajo contrato, vendida, rentada) — navy sobrio.
           Es información, no celebración: avisa a quien busca de que llega
           tarde, y ponerla en coral sería vender una mala noticia como si
           fuera una oferta.
       Van sobre la foto, arriba a la izquierda, y no tapan el corazón de
       favoritos, que vive arriba a la derecha.
   EN: PROPERTY RIBBONS (L4). Two families with different jobs and therefore
       different looks: "Exclusiva" in brand coral — it says "this is ours" and
       is the good news; the STATUS ribbon in sober navy — information, not
       celebration. Selling bad news in coral would be dishonest. They sit top
       left over the photo, clear of the favourites heart at top right.
   ══════════════════════════════════════════════════════════════ */
.br-cinta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  padding: 5px 11px;
  border-radius: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(11,31,51,.22);
}
.br-cinta--exclusiva {
  background: var(--coral, #FF6B4A);
  color: var(--coral-boton-texto, #10233A);
}
/* ES: si conviven las dos, la de estado baja para no pisarse con la otra.
   EN: when both appear, the status one drops so they do not overlap. */
.br-cinta--exclusiva + .br-cinta--estado { top: 44px; }
.br-cinta--estado {
  background: var(--navy, #0B1F33);
  color: #fff;
}

/* ES: En la ficha las cintas van DENTRO de la galería, flotando sobre la foto
       arriba a la izquierda. Se agrupan en una fila horizontal (aquí sí hay
       sitio de sobra a lo ancho, al revés que en la tarjeta) y por eso los
       hijos vuelven a colocación normal: manda la fila, no el absoluto de cada
       uno. La galería ya es position:relative en detalle-propiedad.css, que es
       lo que sostiene este absoluto.
   EN: On the sheet the ribbons live INSIDE the gallery, floating over the photo
       top-left. They line up in a row — there is width to spare here, unlike on
       the card — so the children go back to static and the row does the
       placing. The gallery is already position:relative in
       detalle-propiedad.css, which is what anchors this. */
.dp-cintas {
  position: absolute;
  /* ES: 20px, no los 12 de la tarjeta: aquí la galería va de borde a borde de
         la pantalla y con 12 la cinta queda pegada al filo. 20 es además el
         mismo aire lateral que usa el resto de la página.
     EN: 20px rather than the card's 12: the gallery here is full-bleed and 12
         leaves the ribbon stuck to the screen edge. 20 also matches the page's
         own side padding. */
  top: 20px;
  left: 20px;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
}
.dp-cintas .br-cinta { position: static; top: auto; left: auto; }
.dp-cintas .br-cinta--exclusiva + .br-cinta--estado { top: auto; }