/* ============================================================
   RESPONSIVE.CSS
   Ajustes de layout para pantallas medianas y chicas.
   Mobile-first "suave": base pensada para desktop, se adapta
   hacia abajo con breakpoints simples.
   ============================================================ */

/* ---------- Tablets / pantallas medianas ---------- */
@media (max-width: 960px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "donation"
      "social";
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-md);
  }

  .brand-column {
    align-items: center;
    text-align: center;
  }

  .cafecito-block {
    align-items: center;
  }

  .donation-card {
    max-width: 480px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  .page {
    padding: var(--space-md) var(--space-sm);
  }

  .brand-title {
    max-width: none;
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .donation-card {
    padding: var(--space-md);
  }

  .amount-card {
    font-size: 1.15rem;
    min-height: 74px;
  }

  .social-row {
    gap: var(--space-sm);
  }
}

/* ---------- Mobile chico ---------- */
@media (max-width: 360px) {
  .amount-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
  }

  .amount-card {
    font-size: 1rem;
    min-height: 68px;
  }
}