/* ═══ Donaciones y WCoins (R-44) ══════════════════════════════════════
   Maqueta: maquetas/r30/d-mix/wcoins.html. Una tarjeta por medio de pago
   (base.css), la tasa en dorado porque es lo que recibís (valioso), y los
   diálogos de QR y transferencia con el markup de §4. Mobile-first. */

.donations-description {
  margin-bottom: var(--space-lg);
  color: var(--color-text-muted);
}

/* ── Medios de pago ───────────────────────────────────────────────── */
.donations-methods {
  display: grid;
  gap: var(--space-md);
}
.donation-method {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  height: 100%;
}
.donation-method__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.donation-method__icon {
  font-size: var(--font-size-heading-md);
  line-height: var(--line-height-none);
}
.donation-method__rate {
  color: var(--color-valuable);
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-bold);
}
/* La acción queda abajo aunque las notas tengan largos distintos */
.donation-method__action { margin-top: auto; }
.donation-method__promo,
.donation-method__contacts {
  display: grid;
  gap: var(--space-sm);
  width: 100%;
}

@media (min-width: 700px) {
  .donations-methods { grid-template-columns: 1fr 1fr; }
}

.donations-note { margin-block: var(--space-lg); }
.donations-how {
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
}

/* ── Diálogo del QR de Binance ────────────────────────────────────── */
.donations-qr__image {
  width: 100%;
  height: auto;
  margin-block: var(--space-md);
  border-radius: var(--radius-md);
}
.donations-qr__rate {
  color: var(--color-valuable);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

/* ── Diálogo de transferencia ─────────────────────────────────────── */
.donations-promos {
  display: grid;
  gap: var(--space-xs);
  margin-block: var(--space-md);
}
.donations-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.donations-promo__amount {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-bold);
}
.donations-promo__wcoins {
  color: var(--color-valuable);
  font-weight: var(--font-weight-bold);
}
.donations-transfer__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.donations-alias {
  margin-block: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-valuable-border);
  border-radius: var(--radius-md);
  background: var(--color-valuable-tint);
}
.donations-alias__label {
  margin-bottom: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.donations-alias__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
/* El alias va en <code>: se lee y se copia letra por letra */
.donations-alias__value {
  color: var(--color-valuable);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

/* Alias, CBU y titular llegan de la API (R-65): mientras tanto, un esqueleto en su lugar */
.donations-alias__group + .donations-alias__group { margin-top: var(--space-md); }
.donations-alias__skeleton {
  flex: 1;
  min-width: 0;
}
.donations-alias__holder {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.donations-payment-error { margin-block: var(--space-md); }

/* Los dos pasos van numerados: es la parte que más se saltean */
.donations-steps {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  counter-reset: donations-step;
}
.donations-steps__item {
  display: grid;
  grid-template-columns: var(--chip-height) 1fr;
  align-items: start;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  counter-increment: donations-step;
}
.donations-steps__item::before {
  content: counter(donations-step);
  display: grid;
  place-items: center;
  width: var(--chip-height);
  height: var(--chip-height);
  border: 1px solid var(--color-data);
  border-radius: var(--radius-pill);
  color: var(--color-data);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.donations-steps__item strong { color: var(--color-text); }

.donations-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}