/* HB Donations 0.2.4 - diseño integrado con Fundación Hogares Bethel */
.hb-donation{
  --hb-navy:#154f84;
  --hb-navy-dark:#123f6c;
  --hb-blue:#268bd8;
  --hb-blue-hover:#1c74ba;
  --hb-blue-soft:#eef7fd;
  --hb-blue-soft-2:#f7fbfe;
  --hb-border:#d6e5f1;
  --hb-border-strong:#9fc9e8;
  --hb-ink:#173754;
  --hb-muted:#667b8f;
  --hb-white:#ffffff;
  max-width:680px;
  margin:28px auto;
  padding:30px;
  border:1px solid var(--hb-border);
  border-radius:18px;
  background:var(--hb-white);
  box-shadow:0 12px 34px rgba(20,79,132,.08);
  font-family:inherit;
  color:var(--hb-ink);
}
.hb-donation [hidden]{display:none!important}
.hb-donation *{box-sizing:border-box}
.hb-donation__title{font-size:28px;font-weight:700;line-height:1.2;margin:0 0 18px;color:var(--hb-navy-dark)}

.hb-progress{margin:0 0 24px}
.hb-progress__meta{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.hb-progress__meta strong{font-size:22px;color:var(--hb-navy-dark)}
.hb-progress__meta span,.hb-progress__percent{font-size:13px;color:var(--hb-muted)}
.hb-progress__bar{height:10px;background:#e8f1f8;border-radius:999px;overflow:hidden;margin:9px 0 5px}
.hb-progress__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--hb-navy),var(--hb-blue));border-radius:999px;transition:width .25s ease}

.hb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}
.hb-tab,.hb-amount,.hb-submit,.hb-paymethod{font:inherit;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .06s ease}
.hb-tab{padding:13px 14px;border:1px solid var(--hb-border);background:var(--hb-blue-soft-2);color:var(--hb-navy-dark);border-radius:11px;font-weight:600}
.hb-tab:hover{border-color:var(--hb-border-strong);background:var(--hb-blue-soft)}
.hb-tab.is-active{background:var(--hb-navy);color:var(--hb-white);border-color:var(--hb-navy);box-shadow:0 5px 14px rgba(21,79,132,.16)}

.hb-amounts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.hb-amount{padding:12px 8px;border:1px solid var(--hb-border);border-radius:10px;background:var(--hb-white);color:var(--hb-ink)}
.hb-amount:hover{border-color:var(--hb-border-strong);background:var(--hb-blue-soft-2)}
.hb-amount.is-active{border:2px solid var(--hb-blue);background:var(--hb-blue-soft);color:var(--hb-navy-dark);font-weight:700;box-shadow:0 0 0 2px rgba(38,139,216,.08)}


.hb-frequency-note{margin:4px 0 14px;padding:10px 12px;border-left:3px solid var(--hb-blue);background:var(--hb-blue-soft-2);color:var(--hb-muted);font-size:13px;line-height:1.45;border-radius:0 8px 8px 0}

.hb-custom,.hb-fields label{display:block;font-size:14px;font-weight:600;color:var(--hb-ink)}
.hb-custom input,.hb-fields input{width:100%;box-sizing:border-box;margin-top:7px;padding:12px 13px;border:1px solid var(--hb-border);border-radius:9px;background:var(--hb-white);color:var(--hb-ink);font:inherit;outline:none;box-shadow:none}
.hb-custom input:focus,.hb-fields input:focus{border-color:var(--hb-blue);box-shadow:0 0 0 3px rgba(38,139,216,.12)}
.hb-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.hb-payment-methods{margin:18px 0}
.hb-payment-methods__title{font-weight:700;margin-bottom:9px;color:var(--hb-navy-dark)}
.hb-payment-methods__single{display:grid;grid-template-columns:1fr 1.45fr;gap:10px}
.hb-paymethod{appearance:none;border:1px solid var(--hb-border);background:var(--hb-white);border-radius:10px;padding:13px 14px;font-weight:700;color:var(--hb-navy-dark)}
.hb-paymethod:hover{border-color:var(--hb-border-strong);background:var(--hb-blue-soft-2)}
.hb-paymethod.is-active{border-color:var(--hb-blue);background:var(--hb-blue-soft);color:var(--hb-navy-dark);box-shadow:0 0 0 2px rgba(38,139,216,.10)}
.hb-payment-methods__monthly{border:1px solid var(--hb-border);border-radius:10px;padding:12px 14px;background:var(--hb-blue-soft-2);color:var(--hb-muted);font-size:14px;line-height:1.45}

.hb-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;margin:18px 0;color:var(--hb-muted)}
.hb-consent input{margin-top:3px;accent-color:var(--hb-blue)}
.hb-submit{width:100%;padding:15px 18px;border:0;border-radius:10px;background:var(--hb-blue);color:var(--hb-white);font-weight:700;font-size:16px;box-shadow:0 8px 18px rgba(38,139,216,.18)}
.hb-submit:hover{background:var(--hb-blue-hover);transform:translateY(-1px)}
.hb-submit:active{transform:translateY(0)}
.hb-submit:focus-visible{outline:3px solid rgba(38,139,216,.22);outline-offset:2px}
.hb-submit:disabled{opacity:.6;cursor:wait;transform:none}
.hb-status{min-height:22px;margin-top:10px;font-size:14px;color:var(--hb-ink)}
.hb-secure{text-align:center;color:var(--hb-muted);font-size:12px;line-height:1.5;margin-top:12px}

.hb-notice{padding:12px 14px;margin:0 0 16px;border:1px solid var(--hb-border);border-radius:9px;background:var(--hb-blue-soft-2);font-size:14px;color:var(--hb-ink)}
.hb-notice--success{border-color:#a9d7bd;background:#f3fbf6;color:#235c3a}

@media(max-width:620px){
  .hb-payment-methods__single{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hb-donation{padding:20px 16px;border-radius:14px;margin:20px auto}
  .hb-amounts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-fields{grid-template-columns:1fr}
  .hb-donation__title{font-size:23px}
}