/* Sponsor form (/patrocinadors/): one page built on the volunteer form's fields. Tokens only. */
.sp-form, .sponsor .reg-intro, .sp-success, .sp-org { max-inline-size: 46rem; }
.sp-layout { display: grid; gap: var(--s4); }
.sp-form { display: grid; gap: var(--s4); }
.sp-lead { display: grid; gap: var(--s2); color: var(--text-dim); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.sp-lead p { margin: 0; }
.sp-lead strong { color: var(--text); font-weight: var(--w-semibold); }

.sp-form fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: var(--s3); }
.sp-form legend { display: flex; align-items: center; gap: var(--s1); padding: 0; margin-block-end: var(--s2); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--w-bold); letter-spacing: var(--track-snug); }
.sp-step { display: inline-grid; place-items: center; inline-size: 1.75em; block-size: 1.75em; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-small); font-weight: var(--w-bold); }

/* Options read as one list: radio, what you get, price. Same shape at every width. */
.sp-tier-grid { display: grid; gap: var(--s2); }
.sp-tier { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "radio title price" "radio detail detail"; align-items: center; column-gap: var(--s2); row-gap: var(--s1); padding: var(--s2); border: 1px solid var(--rule-strong); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease); }
.sp-tier input { grid-area: radio; align-self: start; display: grid; place-content: center; inline-size: 1.25rem; block-size: 1.25rem; margin: .1rem 0 0; appearance: none; border: 2px solid var(--rule-strong); border-radius: var(--r-pill); cursor: inherit; transition: border-color var(--t-micro) var(--ease); }
.sp-pay__option input { display: grid; place-content: center; appearance: none; border: 2px solid var(--rule-strong); border-radius: var(--r-pill); cursor: inherit; transition: border-color var(--t-micro) var(--ease); }
.sp-tier input::before, .sp-pay__option input::before { content: ""; inline-size: .55rem; block-size: .55rem; border-radius: var(--r-pill); background: var(--accent); transform: scale(0); transition: transform var(--t-micro) var(--ease); }
.sp-tier input:checked, .sp-pay__option input:checked { border-color: var(--accent); }
.sp-tier input:checked::before, .sp-pay__option input:checked::before { transform: scale(1); }
.sp-tier__title { grid-area: title; font-weight: var(--w-semibold); line-height: var(--lh-snug); }
.sp-tier__price { grid-area: price; justify-self: end; font-family: var(--font-display); font-size: var(--fs-lead); font-weight: var(--w-bold); letter-spacing: var(--track-snug); line-height: var(--lh-snug); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-tier__detail { grid-area: detail; color: var(--text-dim); font-size: var(--fs-small); line-height: var(--lh-snug); }
.sp-tier:hover { border-color: var(--text-dim); }
.sp-tier:has(input:checked) { border-color: var(--accent); background: var(--reg-surface-selected); }
.sp-tier:has(input:checked) .sp-tier__price { color: var(--accent); }
.sp-tier:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-tiers.vol-invalid .sp-tier { border-color: var(--error); }

/* Payment method, only for paid options. */
.sp-form .sp-pay { gap: var(--s1); margin-block-start: var(--s2); }
.sp-form .sp-pay legend { margin-block-end: var(--s1); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--w-semibold); letter-spacing: normal; }
.sp-pay__options { display: flex; flex-wrap: wrap; gap: var(--s1); }
.sp-pay__option { display: inline-flex; align-items: center; gap: var(--s1); min-block-size: var(--reg-control-height); padding: 0 var(--s2); border: 1px solid var(--rule-strong); border-radius: var(--r-pill); cursor: pointer; font-size: var(--fs-small); transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease); }
.sp-pay__option:hover { border-color: var(--text-dim); }
.sp-pay__option input { inline-size: 1.1rem; block-size: 1.1rem; margin: 0; }
.sp-pay__option:has(input:checked) { border-color: var(--accent); background: var(--reg-surface-selected); }
.sp-pay__option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-pay.vol-invalid .sp-pay__option { border-color: var(--error); }
.sp-pay.vol-invalid legend { color: var(--error); }

.sp-wide { grid-column: 1 / -1; }
.sp-wide textarea { inline-size: 100%; min-inline-size: 0; padding: var(--s2); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit; resize: vertical; }
.sp-wide textarea:focus { border-color: var(--accent); outline: none; }

.sp-logo { display: grid; gap: var(--s1); font-size: var(--fs-small); }
.sp-logo small { color: var(--text-dim); }
.sp-drop { position: relative; display: grid; place-items: center; min-block-size: 8rem; padding: var(--s3); border: 1px dashed var(--rule-strong); border-radius: var(--r-md); text-align: center; color: var(--text-dim); cursor: pointer; transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease); }
.sp-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sp-drop:hover, .sp-drop.is-over { border-color: var(--accent); background: var(--reg-surface-selected); }
.sp-drop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-drop__empty strong { color: var(--text); font-weight: var(--w-semibold); }
.sp-drop__preview { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s2); color: var(--text); }
.sp-drop__preview img { max-inline-size: min(100%, 16rem); max-block-size: 7rem; object-fit: contain; padding: var(--s2); border-radius: var(--r-sm); background: var(--moon); }
.sp-logo.vol-invalid .sp-drop { border-color: var(--error); }
.sp-logo.vol-invalid > .vol-field-label { color: var(--error); }

.sp-pay-note { margin: 0 0 calc(-1 * var(--s3)); color: var(--text-dim); font-size: var(--fs-small); }
.vol-error-summary a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Pinned while the form is on screen, then it stops with the form (the volunteer flow fixes it to the viewport). */
.sponsor .sp-actions { position: sticky; inset: auto 0 0; z-index: 2; display: flex; justify-content: flex-end; align-items: center; gap: var(--s2); margin: 0; padding: var(--s2) 0 calc(var(--s2) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--rule); background: var(--ink); }
.sp-bank { display: grid; gap: var(--s2); margin: var(--s3) 0 0; padding: var(--s3); border: 1px solid var(--rule-strong); border-radius: var(--r-md); }
.sp-bank div { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s2); align-items: baseline; }
.sp-bank dt { color: var(--text-dim); font-size: var(--fs-small); }
.sp-bank dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-org { margin-block: var(--s4) var(--s5); color: var(--text-dim); font-size: var(--fs-caption); line-height: var(--lh-body); text-wrap: balance; }
.sp-org span { white-space: nowrap; }

@media (max-width: 40rem) {
  .sp-form .vol-fields { grid-template-columns: 1fr; }
  .sp-bank div { grid-template-columns: 1fr; gap: 0; }
}
/* The volunteer flow pads the page for its fixed bar; this bar is sticky, so no reserve is needed. */
body.sponsor-page { padding-block-end: 0; }

/* Desktop: the right column shows what was picked and what happens next. */
.sp-aside { display: none; }
.sp-aside__card { display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--rule-strong); border-radius: var(--r-md); }
.sp-aside__card .reg-eyebrow { margin: 0; }
.sp-aside__pick { margin: 0; font-weight: var(--w-semibold); line-height: var(--lh-snug); }
.sp-aside__pick.is-empty { color: var(--text-dim); font-weight: var(--w-regular); }
.sp-aside__price { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--w-bold); letter-spacing: var(--track-snug); line-height: var(--lh-heading); color: var(--accent); }
.sp-aside__price:empty { display: none; }
.sp-how { display: grid; gap: var(--s2); margin: var(--s1) 0 0; padding: var(--s2) 0 0; border-block-start: 1px solid var(--rule); list-style: none; counter-reset: how; font-size: var(--fs-small); color: var(--text-dim); line-height: var(--lh-snug); }
.sp-how li { position: relative; padding-inline-start: 1.5rem; counter-increment: how; }
.sp-how li::before { content: counter(how); position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: var(--w-bold); }
.sp-how strong { color: var(--text); font-weight: var(--w-semibold); }
.sp-aside__help { margin: 0; padding-block-start: var(--s2); border-block-start: 1px solid var(--rule); font-size: var(--fs-small); color: var(--text-dim); }
.sp-aside__help a { color: var(--text); }
@media (min-width: 64rem) {
  .sp-layout { grid-template-columns: minmax(0, 46rem) minmax(16rem, 21rem); column-gap: var(--s5); align-items: start; }
  .sp-aside:not([hidden]) { display: block; position: sticky; inset-block-start: calc(var(--header-h) + var(--s3)); }
  .sp-actions .sp-choice { display: none; }
}

/* The bar names the pick on narrow screens, next to the button. */
.sp-choice { display: grid; min-inline-size: 0; margin-inline-end: auto; line-height: var(--lh-snug); }
.sp-choice small { color: var(--text-dim); font-size: var(--fs-caption); }
.sp-choice strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); font-weight: var(--w-semibold); }
@media (max-width: 26rem) { .sp-choice small { display: none; } }

/* After the level: money or material, then the fields that apply. */
.sp-sub { display: grid; gap: var(--s2); margin-block-start: var(--s1); }
.sp-sub[hidden], .sp-amount[hidden] { display: none; }
.sp-amount { max-inline-size: 16rem; }
.sp-amount small { color: var(--text-dim); }
.sp-amount__input { position: relative; display: block; }
.sp-amount__input input { padding-inline-end: 2.25rem; font-variant-numeric: tabular-nums; }
.sp-amount__input > span { position: absolute; inset-block: 0; inset-inline-end: var(--s2); display: grid; place-items: center; color: var(--text-dim); pointer-events: none; }
.sp-form .sp-pay.vol-invalid .sp-pay__option, .sp-amount.vol-invalid input { border-color: var(--error); }

/* Sponsor / Partner as the volunteer area cards: no radio circle, an icon tile that turns solid accent
   when chosen, the price as a caption under the title. The radio stays for keyboards and screen readers. */
.sp-tier-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--s2); }
.sp-tier {
  position: relative; grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: "icon title" "icon price" "detail detail";
  align-items: center; column-gap: var(--s2); row-gap: .15rem; padding: var(--s3) var(--s3) var(--s2);
  transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease), box-shadow .25s var(--ease);
}
.sp-tier input { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sp-tier__icon {
  grid-area: icon; align-self: start; box-sizing: border-box; inline-size: 2.75rem; block-size: 2.75rem; padding: .65rem;
  border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), transform .35s cubic-bezier(.34, 1.36, .64, 1);
}
.sp-tier__title { grid-area: title; align-self: end; padding: 0; font-size: var(--fs-lead); font-weight: var(--w-bold); letter-spacing: var(--track-snug); }
.sp-tier__price { grid-area: price; align-self: start; justify-self: start; font-family: inherit; font-size: var(--fs-small); font-weight: var(--w-semibold); letter-spacing: normal; font-variant-numeric: normal; word-spacing: normal; line-height: var(--lh-snug); color: var(--text-dim); }
.sp-tier__detail { grid-area: detail; margin-block-start: var(--s2); }
.sp-tier:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 70%);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -18px var(--accent);
}
.sp-tier:has(input:checked) .sp-tier__icon { background: var(--accent); color: var(--on-accent); transform: scale(1.04); }
.sp-tier:has(input:checked) .sp-tier__price { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sp-tier, .sp-tier__icon { transition: none; } }