/* ═══════════════════════════════════════════════════════════════════════════
   PW-DONATION-CARD — Colaboración económica · Tarjeta Premium
   Fase 3.3 · Componente visual definitivo · Reutilizable
   Requiere tokens :root del sitio (Fraunces, crema, ámbar, umber)
   Sin lógica de pago · Sin JavaScript · Visual documental únicamente
═══════════════════════════════════════════════════════════════════════════ */

/* ── Grid contenedor ─────────────────────────────────────────────────────── */
.pw-donation-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2vw, 18px);
}

.pw-donation-card-grid > .pw-donation-card--featured {
  border-color: rgba(192, 144, 64, .45);
}

@media (max-width: 900px) {
  .pw-donation-card-grid { grid-template-columns: repeat(2, 1fr); }
  .pw-donation-card-grid > .pw-donation-card--redsys {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .pw-donation-card-grid { grid-template-columns: 1fr; }
  .pw-donation-card-grid > .pw-donation-card--redsys {
    grid-column: auto;
  }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
.pw-donation-card {
  --pw-dc-radius: 3px;
  --pw-dc-pad: clamp(18px, 3vw, 26px) clamp(14px, 2.5vw, 22px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(6px, 1.2vw, 10px);
  min-height: 200px;
  padding: var(--pw-dc-pad);
  padding-top: clamp(22px, 3.5vw, 28px);
  border-radius: var(--pw-dc-radius);
  border: 1px solid var(--brand-line, rgba(160, 120, 86, .18));
  background: linear-gradient(160deg, var(--cream-soft, #F9F4EA) 0%, var(--parchment, #EDE3D2) 100%);
  box-shadow: var(--s-sm, 0 1px 3px rgba(40, 22, 14, .04), 0 8px 24px rgba(40, 22, 14, .08));
  text-decoration: none;
  text-align: center;
  color: inherit;
  transition: transform var(--ease, .28s cubic-bezier(.4, 0, .2, 1)),
              box-shadow var(--ease, .28s cubic-bezier(.4, 0, .2, 1)),
              border-color var(--ease, .28s cubic-bezier(.4, 0, .2, 1));
  overflow: hidden;
}

.pw-donation-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.pw-donation-card > * {
  position: relative;
  z-index: 1;
}

a.pw-donation-card:hover,
button.pw-donation-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--s-md, 0 2px 6px rgba(40, 22, 14, .06), 0 14px 40px rgba(40, 22, 14, .12));
  border-color: var(--sienna, #A07230);
}

a.pw-donation-card:active,
button.pw-donation-card:active {
  transform: translateY(-1px);
}

/* ── Badge destacado ──────────────────────────────────────────────────────── */
.pw-donation-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 0 0 4px 4px;
  font-size: clamp(.76rem, 1.15vw, .84rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--gold-deep, #9E6E28), var(--gold-warm, #C09040));
  color: var(--ink, #1c120c);
}

/* ── Tag editorial ──────────────────────────────────────────────────────────── */
.pw-donation-card__tag {
  display: inline-block;
  align-self: center;
  padding: 3px 9px;
  border-radius: 2px;
  font-size: .84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  background: rgba(160, 120, 86, .08);
  color: var(--umber, #6A4E2C);
  border: 1px solid rgba(160, 120, 86, .14);
}

/* ── Icono ─────────────────────────────────────────────────────────────────── */
.pw-donation-card__icon {
  width: 48px;
  height: 48px;
  margin: 4px auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sienna, #A07230);
  flex-shrink: 0;
}

.pw-donation-card__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* ── Tipografía ─────────────────────────────────────────────────────────────── */
.pw-donation-card__title {
  font-family: var(--f-serif, 'Fraunces', Georgia, serif);
  font-size: clamp(.95rem, 1.8vw, 1.12rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--espresso, #3A251A);
  margin: 0;
}

.pw-donation-card__impact {
  font-family: var(--f-serif, 'Fraunces', Georgia, serif);
  font-size: clamp(.8rem, 1.35vw, .9rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--umber, #6A4E2C);
  margin: 0;
}

.pw-donation-card__detail {
  font-size: clamp(.82rem, 1.4vw, .92rem);
  line-height: 1.45;
  color: var(--umber, #6A4E2C);
  margin: 0;
}

.pw-donation-card__trust {
  font-size: .72rem;
  line-height: 1.4;
  color: rgba(106, 78, 44, .72);
  margin-top: auto;
  padding-top: 6px;
}

/* ── Importes (Redsys · visual) ───────────────────────────────────────────── */
.pw-donation-card__amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 4px 0 2px;
}

.pw-donation-card__amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 6px 10px;
  border-radius: 2px;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--f-body, 'Source Sans 3', sans-serif);
  border: 1px solid var(--sand, #D8C9B2);
  background: var(--cream-soft, #F9F4EA);
  color: var(--umber, #6A4E2C);
  cursor: default;
}

.pw-donation-card__amount--active {
  border-color: var(--sienna, #A07230);
  background: rgba(160, 114, 48, .12);
  color: var(--espresso, #3A251A);
  box-shadow: 0 0 0 1px rgba(160, 114, 48, .2);
}

.pw-donation-card__amount--custom {
  font-size: .76rem;
  letter-spacing: .02em;
}

/* ── CTA ───────────────────────────────────────────────────────────────────── */
.pw-donation-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: clamp(4px, 1vw, 8px);
  padding: clamp(8px, 1.2vw, 10px) clamp(16px, 2.5vw, 22px);
  min-height: 38px;
  border: none;
  border-radius: 2px;
  font-family: var(--f-body, 'Source Sans 3', sans-serif);
  font-size: clamp(.78rem, 1.25vw, .86rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(135deg, var(--umber, #6A4E2C), var(--sienna, #A07230));
  color: var(--cream-soft, #F9F4EA);
  transition: background var(--ease, .28s ease), transform .2s, box-shadow .2s;
}

.pw-donation-card__cta:hover {
  background: linear-gradient(135deg, var(--sienna, #A07230), var(--gold-warm, #C09040));
  color: var(--ink, #1c120c);
}

.pw-donation-card__cta--ghost {
  background: transparent;
  border: 1px solid var(--sand, #D8C9B2);
  color: var(--umber, #6A4E2C);
}

.pw-donation-card__cta--ghost:hover {
  border-color: var(--sienna, #A07230);
  background: rgba(160, 114, 48, .06);
  color: var(--espresso, #3A251A);
}

/* ── IBAN display ─────────────────────────────────────────────────────────── */
.pw-donation-card__iban {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: clamp(.72rem, 1.15vw, .8rem);
  letter-spacing: .04em;
  word-break: break-all;
  padding: 8px 10px;
  border-radius: 2px;
  background: rgba(160, 120, 86, .06);
  border: 1px dashed rgba(160, 120, 86, .22);
  color: var(--umber, #6A4E2C);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VARIANTES — tipo de colaboración
═══════════════════════════════════════════════════════════════════════════ */

.pw-donation-card--bizum.pw-donation-card--featured {
  border-width: 1.5px;
  border-color: rgba(192, 144, 64, .4);
  background: linear-gradient(165deg, var(--cream-soft, #F9F4EA) 0%, var(--beige, #E3D5C0) 55%, var(--parchment, #EDE3D2) 100%);
}

.pw-donation-card--bizum .pw-donation-card__icon {
  color: var(--gold-warm, #C09040);
}

.pw-donation-card--redsys {
  min-height: 280px;
  text-align: left;
  align-items: stretch;
}

.pw-donation-card--redsys .pw-donation-card__icon,
.pw-donation-card--redsys .pw-donation-card__tag {
  align-self: flex-start;
}

.pw-donation-card--redsys .pw-donation-card__title,
.pw-donation-card--redsys .pw-donation-card__impact,
.pw-donation-card--redsys .pw-donation-card__detail {
  text-align: left;
}

.pw-donation-card--redsys .pw-donation-card__amounts {
  justify-content: flex-start;
}

.pw-donation-card--redsys .pw-donation-card__cta {
  align-self: flex-start;
}

.pw-donation-card--transfer .pw-donation-card__iban {
  text-align: left;
}

.pw-donation-card--teaming {
  background: linear-gradient(160deg, var(--parchment, #EDE3D2) 0%, var(--sand, #D8C9B2) 100%);
}

.pw-donation-card--teaming .pw-donation-card__detail strong {
  font-family: var(--f-serif, 'Fraunces', Georgia, serif);
  font-size: 1.1em;
  color: var(--sienna, #A07230);
}

.pw-donation-card--kofi .pw-donation-card__icon,
.pw-donation-card--paypal .pw-donation-card__icon {
  color: var(--umber, #6A4E2C);
}

/* Variante genérica futura */
.pw-donation-card--warm {
  background: linear-gradient(155deg, var(--cream, #F5EEE2) 0%, var(--parchment, #EDE3D2) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADOS — data-pw-state
═══════════════════════════════════════════════════════════════════════════ */

.pw-donation-card[data-pw-state="featured"] {
  border-color: rgba(192, 144, 64, .38);
  box-shadow: var(--s-md), 0 0 0 1px rgba(192, 144, 64, .1);
}

.pw-donation-card[data-pw-state="expanded"] {
  min-height: 300px;
}

.pw-donation-card[data-pw-state="unavailable"] {
  opacity: .55;
  filter: grayscale(.2);
  pointer-events: none;
}

.pw-donation-card[data-pw-state="unavailable"] .pw-donation-card__cta {
  opacity: .6;
}

.pw-donation-card[data-pw-state="success"] .pw-donation-card__cta {
  background: linear-gradient(135deg, #3a6a3a, #4a8a4a);
  color: #eef6ee;
}

.pw-donation-card[data-pw-state="recurring"] .pw-donation-card__tag {
  background: rgba(160, 114, 48, .1);
  border-color: rgba(160, 114, 48, .22);
  color: var(--sienna, #A07230);
}

/* ── Accesibilidad ────────────────────────────────────────────────────────── */
.pw-donation-card:focus-visible {
  outline: 2px solid var(--gold-warm, #C09040);
  outline-offset: 3px;
}

.pw-donation-card__cta:focus-visible {
  outline: 2px solid var(--gold-warm, #C09040);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pw-donation-card,
  .pw-donation-card__cta {
    transition: none;
  }

  a.pw-donation-card:hover,
  button.pw-donation-card:hover {
    transform: none;
  }
}