/* ---------------------------------------------------
   Theme tokens + modern polish layer.
   Loaded before style.css/header.css, which now reference
   these custom properties instead of hardcoded hex values.
--------------------------------------------------- */

:root {
  --color-primary: #1B5A72;       /* deep teal-blue, professional */
  --color-primary-dark: #0F3A4B;  /* utility bar / dark backgrounds, replaces #1c1c1c */
  --color-accent: #E08E45;        /* warm amber for CTAs, price highlights */
  --color-ink: #1F2937;           /* body text, replaces #111111 */
  --color-muted: #64748B;         /* secondary text, replaces #666666 */
  --color-bg-soft: #F7F9FA;
  --shadow-card: 0 8px 24px rgba(15, 58, 75, 0.08);
  --shadow-card-hover: 0 14px 32px rgba(15, 58, 75, 0.16);
  --radius-card: 12px;
}

/* ---- Hero: darken image so text stays legible ---- */
.hero-section .hs-item {
  position: relative;
}
.hero-section .hs-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 58, 75, 0.15) 0%, rgba(15, 58, 75, 0.75) 100%);
}
.hero-section .hs-item .row {
  position: relative;
  z-index: 1;
}

/* ---- Property cards: soft shadow + hover lift ---- */
.property-item {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  background: #ffffff;
}
.property-item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.property-item .pi-pic {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.pt-price {
  color: var(--color-accent) !important;
  font-weight: 700;
}

/* ---- Buttons: match new palette ---- */
.search-btn,
.site-btn,
.cta-btn {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.search-btn:hover,
.site-btn:hover,
.cta-btn:hover {
  filter: brightness(0.92);
  transform: translateY(-2px);
}

/* ---- "Invista no seu futuro" icons: Font Awesome instead of PNG ----
   .cf-pic keeps the template's existing 80px white circle (style.css);
   this just centers the glyph inside it and colors it with the brand. */
.chooseus-features .cf-item .cf-pic {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chooseus-features .cf-item .cf-pic i {
  font-size: 30px;
  color: var(--color-primary);
}

/* ---- Stats section: swap icon accent to warm accent for variety ---- */
.stats-section .stat-item i {
  color: var(--color-accent);
}

/* ---- Testimonial cards: subtle card treatment ---- */
.testimonial-item {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: #ffffff;
}
.ta-rating i {
  color: var(--color-accent);
}