:root{
  /* Color primario de la sucursal. `includes/header.php` lo pisa con el que
     publica Bravo en `/site/home` (`config.color`); este valor es el de
     reserva, el que rige mientras la sucursal no lo tenga cargado. */
  --brand-primary: #b88025;

  --ink: #0b1220;            /* negro elegante */
  --navy: var(--brand-primary);
  --orange: var(--brand-primary);
  --gold: #c8a45d;           /* dorado sobrio */
  --bg-soft: #f8fafc;
  --border-soft: #e2e8f0;
  --text-muted: #64748b;

  /* Aliases para compatibilidad con clases previas */
  --primary-color: var(--navy);
  --accent-color:  var(--gold);

  /* Colores del logotipo (/logos/logo.svg). Se leen del propio SVG y viven
     aparte de --orange/--gold, que gobiernan botones y acentos de todo el
     sitio: la marca se retoca sin repintar el resto. */
  --brand-brown:  #5a2e11;   /* «Dreams Land» */
  --brand-orange: #ed6a07;   /* «Inmobiliaria» y el lema */
  --brand-gold:   #d0900f;   /* la casa y la llave del logo */
}

body{
  background: var(--bg-soft);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--ink);
}

/* ===== NAVBAR ===== */
.navbar{
  border-bottom: 1px solid var(--border-soft) !important;
}
.navbar::after{
  content:"";
  display:block;
  height:3px;
  background: linear-gradient(90deg, var(--orange), var(--gold));
}

.navbar .navbar-brand{
  display:flex;
  align-items: baseline;
  gap:.6rem;
  text-decoration: none;
}

/* Logotipo tipográfico: reproduce /logos/logo.svg sin usar la imagen, para
   que la marca siga siendo texto —se lee, se escala y se busca—. El SVG tiene
   el rótulo trazado en curvas, así que la tipografía se aproxima: Fira Sans en
   versalitas para el nombre y Caveat Brush para el lema de pincel. */
.brand-name{
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  line-height: 1;
}

/* «Dreams Land»: la D y la L a caja alta y el resto en versalitas, que es
   como está dibujado en el logo. Se consigue con `small-caps` sobre el texto
   capitalizado, no escribiendo dos tamaños a mano. */
.brand-text{
  font-family: "Fira Sans", system-ui, sans-serif;
  font-weight: 700;
  font-variant-caps: small-caps;
  font-size: 1.6rem;
  letter-spacing: .05em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  color: var(--brand-brown);
}

.brand-dreams,
.brand-land{ color: var(--brand-brown); }

/* «INMOBILIARIA» va debajo y alineada a la derecha, ocupando casi el mismo
   ancho que el nombre: es así en el logo. El margen negativo compensa el
   espacio que `letter-spacing` deja colgando tras la última letra. */
.brand-inmobiliaria{
  font-family: "Fira Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .53em;
  text-transform: uppercase;
  text-align: right;
  color: var(--brand-orange);
  margin-top: .22rem;
  margin-right: -.53em;
}


/* Mobile: subtítulo abajo para que no se salga */
@media (max-width: 575.98px){
  .navbar .navbar-brand{
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
  }
}

/* ===== BOTONES DE MARCA ===== */
.btn-brand{
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
}

.btn-brand-primary{
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
.btn-brand-primary:hover{
  background: var(--ink);
  color:#fff;
}

.btn-brand-accent{
  background: linear-gradient(90deg, var(--orange), var(--gold));
  border: 0;
  color: #111827;
}
.btn-brand-accent:hover{
  filter: brightness(.97);
  color:#111827;
}

/* ===== HERO TOP (logos + buscador) con imagen de fondo ===== */
.section-hero-soft{
  position: relative;
  background:
    linear-gradient(
      60deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.86) 35%,
      rgba(255,255,255,0.70) 100%
    ),
    url("/assets/images/fondo.jpeg");
  background-size: cover;
  background-position: center right;
  border-bottom: 1px solid var(--border-soft);
}

/* ===== BUSCADOR ===== */
.search-card{
  background:#fff;
  border-radius: 1.25rem;
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 14px 45px rgba(15,23,42,.35);
  padding: 1rem;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.96);
}

.search-label{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
  margin-bottom: .25rem;
}

.search-card .form-control,
.search-card .form-select{
  border-radius: 999px;
  border-color: #cbd5e1;
  font-size: .9rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.search-card .form-control:focus,
.search-card .form-select:focus{
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px rgba(200,164,93,.28);
}

.btn-search-main{
  border-radius: 999px;
  font-size: .95rem;
  padding-inline: 1.4rem;
  background: var(--primary-color);
  border: 1px solid rgba(255,255,255,.08);
}
.btn-search-main:hover{
  background: var(--ink);
}

.pill-meta{
  display:inline-flex;
  align-items:center;
  padding:.18rem .65rem;
  border-radius:999px;
  border:1px solid #e5e7eb;
  font-size:.72rem;
  color:#6b7280;
  gap:.35rem;
  background:#fff;
}

.pill-dot{
  width:5px;
  height:5px;
  border-radius:999px;
  background: var(--accent-color);
  opacity:.9;
}

/* ===== Logotipo de la portada =====
   Sustituye a las tres tarjetas de afiliación. Va sin marco ni fondo blanco:
   el PNG tiene canal alfa y se apoya directamente sobre el hero, como haría
   el logotipo impreso. */
.brand-logo{
  width: min(420px, 100%);
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* El mismo logotipo, pero encabezando una tarjeta de contenido: más contenido
   que en el hero, porque ahí compite con el texto que va debajo. */
.brand-logo-inline{
  width: min(260px, 62%);
  height: auto;
  display: block;
  margin-bottom: 1.25rem;
}

/* ===== GRID PROPIEDADES ===== */
.property-card{
  border-radius: 1.25rem;
  border: 1px solid var(--border-soft);
  background:#fff;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
  cursor: pointer;
}
.property-card:hover{
  background:#f9fafb;
  border-color:#cbd5e1;
  transform: translateY(-2px);
}

.property-img-wrapper{
  border-radius: 1.25rem;
  overflow:hidden;
}
.property-img-wrapper img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* Píldora de operación.
   «Venta» venía con el `bg-dark-subtle` de Bootstrap —un gris #ced4da— que no
   decía nada de la marca. Se tiñe con el color primario, pero manteniendo la
   fórmula «fondo claro + texto oscuro del mismo tono» que Bootstrap usa para
   la de «Renta» (`bg-success-subtle text-success`): así las dos píldoras se
   leen igual y el contraste aguanta aunque la sucursal cargue en Bravo un
   color mucho más oscuro o mucho más claro que este. */
.property-card .badge.bg-dark-subtle{
  background-color: color-mix(in srgb, var(--brand-primary) 18%, #fff) !important;
  color: color-mix(in srgb, var(--brand-primary) 78%, #000) !important;
}

.badge-operacion{
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .68rem;
}
.price-text{
  font-size: 1.05rem;
  font-weight: 700;
}
.colonia-text{
  font-size:.95rem;
  color: var(--text-muted);
}

/* ===== MAPA ===== */
#mapHero{
  width: 100%;
  height: 520px;
}

.leaflet-popup-content-wrapper{
  border-radius: 14px;
}
.leaflet-popup-content{
  margin: 12px 14px;
  font-size: .92rem;
}
.map-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.72rem;
  padding:.14rem .55rem;
  border-radius: 999px;
  border:1px solid rgba(148,163,184,.35);
  background:#fff;
  color: var(--navy);
}

/* ===== WHATSAPP FLOAT ===== */
/* Botón de WhatsApp de las páginas de servicios y contacto.
   Venía con el `btn-success` de Bootstrap, un verde que no es ni el de
   WhatsApp ni el de la marca. Toma el color de la sucursal, como el resto de
   los botones de acción. El botón FLOTANTE de abajo a la derecha conserva a
   propósito el verde de WhatsApp: es la convención por la que se reconoce sin
   leerlo. */
.btn-whatsapp{
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color:#fff;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus{
  background-color: color-mix(in srgb, var(--brand-primary) 85%, #000);
  border-color: color-mix(in srgb, var(--brand-primary) 85%, #000);
  color:#fff;
}

.whatsapp-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:#25D366;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 1.6rem;
  text-decoration:none;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 1050;
}
.whatsapp-float:hover{ background:#1ebe5c; color:#fff; }

/* ===== FOOTER ===== */
footer{
  background:#f9fafb;
}
.footer-bottom{
  border-top: 1px solid #e5e7eb;
  padding-top: .75rem;
  margin-top: .75rem;
}

/* ===== RESPONSIVE (map height) ===== */
@media (max-width: 991.98px){
  #mapHero{ height: 460px; }
}
@media (max-width: 767.98px){
  #mapHero{ height: 520px; }
}
/* Teléfono del header: oculto en mobile */
@media (max-width: 991.98px){
  .phone-link{
    display: none !important;
  }
}
.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  background: #25D366; /* WhatsApp green */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 999;
  transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float:hover{
  transform: scale(1.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}

.whatsapp-float svg{
  width: 28px;
  height: 28px;
  display: block;
}