/* ============================================================
   Donate page — estilos propios
   Todas las clases prefijadas con .donate-
   Variables de main.css: --color-primary, --color-secondary,
   --color-light, --color-white, --transition
   ============================================================ */

/* --- Intro destacada ---------------------------------------- */
.donate-intro {
  background: linear-gradient(135deg,
    rgba(45, 106, 79, 0.08) 0%,
    rgba(64, 145, 108, 0.12) 100%);
  border-left: 4px solid var(--color-primary);
  border-radius: 1rem;
  padding: 1.75rem 2rem;
}

.donate-intro p {
  font-size: 1.1rem;
  color: #2c3e2d;
  line-height: 1.7;
  margin: 0;
}

/* --- Grid de métodos de pago (3 columnas en md+) ------------ */
.donate-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 767.98px) {
  .donate-methods-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Recuadro "Comparte la guía" (bloque independiente) ----- */
.donate-share-block {
  background: var(--color-light);
  border-left: 4px solid var(--color-secondary);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
}

.donate-share-block__title {
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--color-dark, #1B1B2F);
}

/* --- Fix botón invisible en bloque "¡Muchas gracias!" ------- */
.donate-thanks .btn-outline-custom {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}
.donate-thanks .btn-outline-custom:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}

/* --- Íconos dentro de tarjetas de método (bi-* en lugar de emoji) */
.donate-method-icon {
  font-size: 1.5rem;
  color: #fff;
  line-height: 1;
}

.donate-share-block__sub {
  font-size: .85rem;
  color: #6c757d;
  margin-bottom: 1rem;
}