/* ============================================================
   COMPONENTS — RTR v2 (zero borders, soft shadows, Google-style)
   ============================================================ */

/* ─── Buttons ─────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.875em 1.75em;
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  line-height: 1;
}

.btn--primary {
  background: var(--text);
  color: var(--bg);
}
.btn--primary:hover {
  background: var(--gold-deep);
  color: var(--bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.btn--gold {
  background: var(--gold-deep);
  color: var(--bg);
}
.btn--gold:hover {
  background: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
}
.btn--ghost:hover {
  background: var(--bg-soft);
  color: var(--gold-deep);
}

.btn--text {
  background: transparent;
  color: var(--gold-deep);
  padding: 0.5em 0.25em;
  border-radius: 0;
  font-weight: var(--fw-medium);
}
.btn--text:hover {
  color: var(--text);
}

.btn--lg {
  padding: 1em 2em;
  font-size: var(--fs-body);
}

.btn__arrow {
  transition: transform var(--t);
}
.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* ─── Cards (sem borders, só padding + shadow on hover) ─── */

.card {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  transition: all var(--t);
}

.card--soft {
  background: var(--bg-soft);
}

.card--shadow {
  box-shadow: var(--shadow-1);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

/* ─── Number / Metric ─────────────────────────────────── */

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0;
}

.metric__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}
.metric__value .gold { color: var(--gold-deep); }

.metric__label {
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-medium);
}

.metric__sub {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

/* ─── Grid utilities ──────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--sp-7);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.grid--gap-sm { gap: var(--sp-5); }
.grid--gap-lg { gap: var(--sp-8); }

@media (max-width: 880px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ─── Logo strip ──────────────────────────────────────── */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  align-items: center;
  justify-content: center;
}
.logo-strip__item {
  height: 32px;
  width: auto;
  filter: grayscale(100%) opacity(0.55);
  transition: filter var(--t);
}
.logo-strip__item:hover {
  filter: grayscale(0%) opacity(1);
}

/* ─── Pills / chips ───────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4em 0.9em;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--gold-soft-bg);
  color: var(--gold-deep);
}

.chip--navy {
  background: var(--navy-soft-bg);
  color: var(--navy-deep);
}

.chip--soft {
  background: var(--bg-soft);
  color: var(--text-muted);
}

/* ─── Section header (eyebrow + title + lead pattern) ──── */

.section-head {
  text-align: center;
  margin-bottom: var(--sp-9);
}
.section-head h2 {
  margin-bottom: var(--sp-4);
  max-width: 22ch;
  margin-inline: auto;
}
.section-head .lead {
  margin-inline: auto;
}

/* ─── Footer ──────────────────────────────────────────── */

.site-footer {
  background: var(--bg-soft);
  padding: var(--sp-10) 0 var(--sp-6);
  margin-top: var(--sp-12);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-9);
}
.site-footer__col h4 {
  font-size: var(--fs-eyebrow);
  color: var(--text);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  font-weight: var(--fw-medium);
}
.site-footer__col ul li {
  margin-bottom: var(--sp-3);
}
.site-footer__col ul a {
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}
.site-footer__col ul a:hover {
  color: var(--gold-deep);
}
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-body-sm);
  color: var(--text-dim);
}

@media (max-width: 880px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}