/* ============================================================
   COMPONENTES — styleguide.md §3
   ============================================================ */

/* Botão primário de conversão */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-height: var(--touch-rec);
  padding: 1.8rem 4.2rem;
  background: var(--accent);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  font-size: 1.3rem;
  border-radius: var(--radius-btn);
  transition: background var(--t-touch) ease, color var(--t-touch) ease, transform var(--t-touch) ease;
}
.btn-primary:active {
  background: var(--accent-bright);
  color: #1B1917;
  transform: scale(0.985);
}

/* Botão secundário / navegação */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-height: var(--touch-rec);
  padding: 1.8rem 4.2rem;
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--cream);
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  font-size: 1.3rem;
  border-radius: var(--radius-btn);
  transition: background var(--t-touch) ease, transform var(--t-touch) ease;
}
.btn-secondary:active {
  background: rgba(229, 224, 211, 0.08);
  transform: scale(0.985);
}

/* Botão fantasma (ícone/voltar) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-width: var(--touch-rec);
  min-height: var(--touch-rec);
  padding: 0 1.6rem;
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-radius: var(--radius-btn);
  transition: background var(--t-touch) ease;
}
.btn-ghost:active { background: rgba(229, 224, 211, 0.08); }

/* Cards */
.card {
  background: var(--bg-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 2.8rem 3.2rem;
  transition: background var(--t-touch) ease, transform var(--t-touch) ease;
}
.card:active {
  background: var(--surface-2);
  transform: scale(0.985);
}
.card h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}
.card p { color: var(--text-2); font-size: var(--fs-body); }

/* Painel translúcido (glassmorphism quente) */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

/* Chips de camada/filtro */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: var(--touch-min);
  padding: 0.8rem 2rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: background var(--t-touch) ease, color var(--t-touch) ease, border-color var(--t-touch) ease;
}
.chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--cream);
}
.chip.is-active[data-layer="emDesenvolvimento"] { background: var(--olive); border-color: var(--olive); }
.chip.is-active[data-layer="residencial"] { background: var(--cream); border-color: var(--cream); color: #1B1917; }

/* Status de unidade */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.status::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: currentColor;
}
.status--disponivel { color: var(--status-disponivel); }
.status--indisponivel { color: var(--status-indisponivel); }

/* Selo EM PROJETO / status de pasta */
.selo {
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.4rem 1.4rem;
  border: 1px solid var(--accent-bright);
  border-radius: 999px;
  color: var(--accent-bright);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.selo--projeto { border-color: var(--olive); color: #9BA07B; }

/* Tag pílula de distância */
.tag-distancia {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.3rem;
  border: 1px solid var(--accent-bright);
  border-radius: 999px;
  color: var(--cream);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Indicadores de carrossel: traços 16×2 */
.dots { display: flex; gap: 1rem; justify-content: center; align-items: center; }
.dots i {
  width: 1.6rem;
  height: 2px;
  background: rgba(229, 224, 211, 0.25);
  transition: background var(--t-touch) ease;
}
.dots i.is-active { background: var(--accent-bright); }

/* Setas de galeria: círculo hairline 64px */
.arrow-btn {
  width: var(--touch-rec);
  height: var(--touch-rec);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  transition: background var(--t-touch) ease;
  flex: none;
}
.arrow-btn:active { background: rgba(229, 224, 211, 0.08); }
.arrow-btn svg { width: 2.2rem; height: 2.2rem; }

/* Hairline divisor */
.hr { border: none; border-top: 1px solid var(--hairline); }

/* Ícones de linha */
.icon { width: 2.6rem; height: 2.6rem; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }
.icon--sm { width: 2rem; height: 2rem; }

/* Marca d'água do monograma */
.watermark {
  position: absolute;
  right: -6%;
  bottom: -10%;
  width: 42rem;
  opacity: 0.05;
  pointer-events: none;
  filter: invert(92%) sepia(8%) saturate(200%) hue-rotate(10deg);
}

/* Logo recolorido para creme via mask (fonte PNG preta) */
.logo-cream {
  display: inline-block;
  background-color: var(--cream);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}