:root{
  /* Color primario de la sucursal. `includes/header.php` lo pisa con el que
     publica Bravo en `/site/home` (`config.color`, la columna
     `tenant_branches.color_primario`); este valor es el de reserva. Toda la
     paleta de marca se deriva de él. */
  --brand-primary: #875e3a;

  --ink: #0b1220;            /* negro elegante */
  --navy: var(--brand-primary);
  --orange: var(--brand-primary);
  --gold: color-mix(in srgb, var(--brand-primary) 55%, #fff);   /* acento claro */
  --bg-soft: #f8fafc;
  --border-soft: #e2e8f0;
  --text-muted: #64748b;

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

  /* Filetes del logotipo de la barra, tomados de logos/logo.ai. Son acentos
     del dibujo, no de la paleta: el texto va en --brand-primary. */
  --brand-red:   #7c1319;   /* la línea bajo «ZYCH» */
  --brand-green: #9cb03b;   /* la línea fina bajo «Home Sweet Home» */
}

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 el rótulo de logos/logo.ai sin el árbol y
   sin usar la imagen, para que la marca siga siendo texto —se lee, se escala
   y se busca—. Mismo orden que el logo: «ZYCH», filete guinda, «Home Sweet
   Home» en versalitas, filete verde fino y el subtítulo. El ancho del bloque
   lo marca «Home Sweet Home», como en el dibujo. */
.brand-name{
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  line-height: 1;
  color: var(--brand-primary);
}

/* En el logo «ZYCH» no va centrado: arranca a media línea y termina antes del
   borde derecho, donde lo deja el tronco del árbol. */
.brand-zych{
  align-self: flex-end;
  margin-right: 13%;
  font-family: "Goudy Bookletter 1911", Georgia, serif;
  font-size: 1.5rem;
  line-height: .78;
  letter-spacing: .01em;
}

/* El filete guinda va por encima como `::before`, con los extremos
   redondeados del logo; el verde, por debajo como borde. */
.brand-hsh{
  font-family: "Goudy Bookletter 1911", Georgia, serif;
  font-variant-caps: small-caps;
  font-size: 1.22rem;
  line-height: .9;
  letter-spacing: .015em;
  white-space: nowrap;
  padding-bottom: .1rem;
  border-bottom: 1px solid var(--brand-green);
}
.brand-hsh::before{
  content: "";
  display: block;
  height: .2rem;
  margin: .1rem 0 .12rem;
  border-radius: 999px;
  background: var(--brand-red);
}

/* El subtítulo ocupa el mismo ancho que «Home Sweet Home»: se justifica la
   única línea que tiene para repartir el sobrante entre palabras. */
.brand-sub{
  font-family: "Ubuntu", system-ui, sans-serif;
  font-weight: 500;
  font-size: .5rem;
  line-height: 1;
  margin-top: .16rem;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
}


/* 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 color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.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.
   El de HSH ZYCH es vertical: se acota por altura para que ocupe el mismo
   espacio que ocupaba el apaisado, y `object-fit` evita que lo deforme el
   ancho fijo que la portada le da en móvil. */
.brand-logo{
  width: auto;
  max-width: min(420px, 100%);
  height: auto;
  max-height: 260px;
  object-fit: contain;
  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: auto;
  max-width: min(260px, 62%);
  height: auto;
  max-height: 180px;
  display: block;
  margin-bottom: 1.25rem;
}

/* El logotipo ocupando su propia columna, con el texto al lado (servicios).
   Llena el ancho de la columna, sin pasar de un tamaño que lo pixele. */
.brand-logo-columna{
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* ===== 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;
}