/* 📖 sections/before-after.css — Seção: Antes × Depois
   ⚠️  Alterar? Seção de comparação visual antes/depois do Hubit */

.before-after {
  padding: var(--section-py-sm) 0;
  background: linear-gradient(180deg, var(--color-bg-base) 0%, #0b1019 50%, var(--color-bg-base) 100%);
}

.before-after__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

@media (min-width: 768px) {
  .before-after__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

/* ─── Colunas ─── */

.ba-col {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}

.ba-col--before {
  background: rgba(248,81,73,0.04);
  border: 1px solid rgba(248,81,73,0.18);
}

.ba-col--after {
  background: rgba(63,185,80,0.04);
  border: 1px solid rgba(63,185,80,0.18);
}

.ba-col--before::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(248,81,73,0.08) 0%, transparent 70%);
}

.ba-col--after::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(63,185,80,0.08) 0%, transparent 70%);
}

.ba-col__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.ba-col__badge {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.ba-col--before .ba-col__badge {
  background: rgba(248,81,73,0.12);
  color: var(--color-error);
  border: 1px solid rgba(248,81,73,0.25);
}

.ba-col--after .ba-col__badge {
  background: rgba(63,185,80,0.12);
  color: var(--color-success);
  border: 1px solid rgba(63,185,80,0.25);
}

.ba-col__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

/* ─── Items da lista ─── */

.ba-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.ba-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.ba-item__icon {
  flex-shrink: 0;
  font-size: 15px;
  margin-top: 1px;
}

.ba-col--before .ba-item__icon { filter: grayscale(0.3); }