/* =============================================================
   BRAUNY VELOZ — Extensiones de paleta semántica
   WhatsApp (#25D366) y badges de estado (verde/ámbar/azul)
   ============================================================= */

/* Variables semánticas */
:root {
  --wa-green: #25d366;        /* WhatsApp oficial */
  --wa-green-hover: #1da851;
  --status-launch: #82a0bc;   /* LANZAMIENTO — usa acento de marca */
  --status-building: #f59e0b; /* EN CONSTRUCCIÓN — ámbar */
  --status-ready: #25d366;    /* ENTREGA PRÓXIMA — verde go */
  --status-sold: #9da1aa;     /* VENDIDO/AGOTADO — gris */
}

/* ============================================
   A. BOTONES DE WHATSAPP — verde oficial
   ============================================ */
/* OJO: .bv-contact-row se EXCLUYE a propósito. Las filas del menú de contacto
   NO llevan relleno verde — se les da realce por color (tinte + tile) más abajo.
   Sin este :not(), el bloque verde tapa el texto y el subtítulo queda ilegible. */
a[href*="wa.me"]:not(.no-wa-style):not(.bv-contact-row),
.bv-wa-btn,
.bv-quiz-btn-whatsapp,
.bv-floating-wa {
  background-color: var(--wa-green) !important;
  color: #ffffff !important;
  border-color: var(--wa-green) !important;
  transition: background-color .2s ease;
}
a[href*="wa.me"]:not(.no-wa-style):not(.bv-contact-row):hover,
.bv-wa-btn:hover {
  background-color: var(--wa-green-hover) !important;
  border-color: var(--wa-green-hover) !important;
}

/* Variante outline sobre fondo oscuro */
a.bv-wa-outline,
.bv-wa-outline {
  background-color: transparent !important;
  color: var(--wa-green) !important;
  border: 1.5px solid var(--wa-green) !important;
}
a.bv-wa-outline:hover {
  background-color: var(--wa-green) !important;
  color: #ffffff !important;
}

/* Footer WhatsApp link — verde con flecha */
.footer-wa-link {
  background-color: var(--wa-green) !important;
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 500 !important;
  transition: background-color .2s ease !important;
}
.footer-wa-link:hover {
  background-color: var(--wa-green-hover) !important;
}

/* Botón flotante "Contacto" — WhatsApp destacado */
.bv-floating-wa,
.bv-contact-panel a[href*="wa.me"] {
  background-color: var(--wa-green) !important;
  color: #ffffff !important;
}
.bv-contact-panel a[href*="wa.me"]:hover {
  background-color: var(--wa-green-hover) !important;
}

/* ============================================
   B. BADGES DE ESTADO DE PROYECTOS
   ============================================ */
.pj-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}
.pj-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.pj-badge-launch   { background: var(--status-launch); color: #0e1217; }
.pj-badge-building { background: var(--status-building); color: #0e1217; }
.pj-badge-ready    { background: var(--status-ready); color: #0e1217; }
.pj-badge-sold     { background: var(--status-sold); color: #0e1217; }

/* Variante sutil para fondos oscuros */
.pj-badge-outline {
  padding: 4px 10px;
  font-size: 10px;
  background: transparent;
  border: 1px solid currentColor;
}

/* En las cards de proyecto el pill de categoría ocupa arriba-izquierda:
   el badge de estado va abajo-izquierda para no solaparse. */
.pjc-media .pj-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(14, 18, 23, 0.28);
}

/* Badge de estado en el hero de cada proyecto */
.proj-status-badge {
  display: flex;
  width: fit-content;
  margin: 14px 0 6px;
}