, o <section id="comprovante"> e o <script> do fim do arquivo.
  2. Foto de fundo: troque a URL em --mde-f-foto (no .mde-f-card) ou deixe vazio para fundo verde liso.
  3. Envio real: defina window.mdeEnviarComprovante = async (dados, arquivo) => { ... } antes do script.
     Ela recebe os dados do formulário e o File do comprovante; deve retornar uma Promise.
     Se não existir, o envio é simulado (1,8s).
  4. Upload do comprovante: defina window.mdeUploadComprovante = async (arquivo) => { ... } (opcional).
     Se não existir, o upload é simulado (1,6s).
  5. Abrir o formulário a partir de outro botão: window.mdeAbrirFormulario().
  6. Para redirecionar a uma página de obrigado em vez da tela interna, defina window.mdeUrlObrigado = '...'.

  Fluxo: Doação → Contato → (Homenageado, se "em nome de alguém") → Vínculo
  Vínculo é perguntado em partes: vínculo → turma (ex-aluno, aluno, docente, residente, TAE, servidor HSP)
  → identificação (docente, residente, TAE, servidor HSP) → como aparecer na campanha (com prévia do balão).
  Desktop/tablet: pílulas de etapas. Celular (<600px): barra de progresso compacta.
-->
<style>
  .mde-f-wrap { max-width: 1240px; margin: 0 auto; padding: 40px 20px; box-sizing: border-box; }
  .mde-f-wrap *, .mde-f-wrap *::before, .mde-f-wrap *::after { box-sizing: border-box; }

  .mde-f-card { --mde-f-foto: url(''); position: relative; border-radius: 32px; overflow: hidden; background: #134015 var(--mde-f-foto) center/cover no-repeat; color: #fff; }
  .mde-f-card::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(13,46,15,.88) 0%, rgba(13,46,15,.72) 32%, rgba(19,64,21,.3) 55%, rgba(19,64,21,0) 75%); }
  .mde-f-inner { position: relative; padding: clamp(28px,4.5vw,56px); max-width: 640px; display: flex; flex-direction: column; gap: 22px; }

  .mde-f-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .mde-f-tag { display: inline-block; padding: 8px 14px; border-radius: 8px; background: rgba(255,255,255,.12); color: #dbe9a6; font: 600 14px 'Work Sans', sans-serif; }
  .mde-f-title { margin: 12px 0 0; font: 700 clamp(26px,3.4vw,40px)/1.12 'Lora', serif; color: #fff; text-wrap: balance; }
  .mde-f-close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-size: 22px; cursor: pointer; }

  .mde-f-steps { display: flex; gap: 8px; flex-wrap: wrap; }
  .mde-f-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.06); color: #c9d6c5; font: 600 14px 'Work Sans', sans-serif; border: 0; transition: background .4s; cursor: default; }
  .mde-f-step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.25); color: #134015; font-size: 13px; }
  .mde-f-step.is-on { background: rgba(159,191,22,.18); color: #fff; }
  .mde-f-step.is-on span { background: #9fbf16; }
  .mde-f-step.is-past { cursor: pointer; }
  .mde-f-prog { display: none; flex-direction: column; gap: 10px; }
  .mde-f-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 14px 'Work Sans', sans-serif; }
  .mde-f-prog-top em { font-style: normal; color: #c9d6c5; font-variant-numeric: tabular-nums; }
  .mde-f-prog-bar { display: flex; gap: 6px; }
  .mde-f-prog-bar i { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.25); transition: background .4s; }
  .mde-f-prog-bar i.is-on { background: #9fbf16; }

  .mde-f-viewport { overflow: hidden; overflow-anchor: none; margin: -6px; padding: 6px; transition: height .45s cubic-bezier(.2,.7,.2,1); box-sizing: content-box !important; }
  .mde-f-screen { display: flex; flex-direction: column; gap: 20px; }

  .mde-f-q { display: flex; flex-direction: column; gap: 6px; }
  .mde-f-q h4 { margin: 0; font: 700 clamp(22px,2.6vw,26px)/1.2 'Lora', serif; color: #fff; text-wrap: balance; outline: none; }
  .mde-f-q p { margin: 0; font: 400 15px/1.45 'Work Sans', sans-serif; color: #c9d6c5; text-wrap: pretty; }

  .mde-f-field { display: flex; flex-direction: column; gap: 8px; font: 500 15px 'Work Sans', sans-serif; color: #e4ece1; transition: color .2s; }
  .mde-f-help { font-size: 14px; color: #c9d6c5; }
  .mde-f-help a { color: #dbe9a6; }
  .mde-f-input, .mde-f-select { width: 100%; min-height: 58px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font: 500 18px 'Work Sans', sans-serif; outline: none; transition: border-color .2s, background .2s; }
  .mde-f-input::placeholder { color: rgba(255,255,255,.55); }
  .mde-f-input:focus, .mde-f-select:focus { border-color: #9fbf16; background: rgba(255,255,255,.16); }
  .mde-f-selwrap { position: relative; display: block; }
  .mde-f-select { padding-right: 52px; appearance: none; -webkit-appearance: none; cursor: pointer; }
  .mde-f-select option { color: #134015; }
  .mde-f-selwrap::after { content: '▼'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #dbe9a6; font-size: 14px; }

  .mde-f-field.has-err { color: #ffb4a6; }
  .has-err .mde-f-input, .has-err .mde-f-select { border-color: #ff7a66; background: rgba(255,122,102,.12); }

  .mde-f-toggle { display: flex; background: rgba(255,255,255,.1); border-radius: 999px; padding: 5px; gap: 4px; }
  .mde-f-toggle button { flex: 1; min-height: 50px; padding: 0 10px; line-height: 1.2; border: 0; border-radius: 999px; cursor: pointer; font: 600 16px 'Work Sans', sans-serif; background: transparent; color: #fff; transition: background .3s; }
  .mde-f-toggle button.is-on { background: #fff; color: #134015; }
  .mde-f-short { display: none; }

  .mde-f-file { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 24px; border: 1.5px dashed rgba(255,255,255,.3); background: rgba(255,255,255,.05); cursor: pointer; transition: border-color .3s, background .3s; }
  .mde-f-file:hover { background: rgba(255,255,255,.09); }
  .mde-f-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .mde-f-file-ico { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; font-size: 20px; transition: background .3s, border-color .3s; }
  .mde-f-file-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mde-f-file-txt b { font: 600 15px 'Work Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
  .mde-f-file-txt span { font: 500 14px/1.35 'Work Sans', sans-serif; color: #dbe9a6; overflow-wrap: anywhere; }
  .mde-f-file.is-done .mde-f-file-ico { background: #9fbf16; color: #134015; border-color: #9fbf16; }
  .mde-f-file.is-busy { cursor: progress; }
  .mde-f-file.has-err { border-color: #ff7a66; }
  .mde-f-file.has-err .mde-f-file-ico { border-color: #ff7a66; background: rgba(255,122,102,.12); }
  .mde-f-file.has-err .mde-f-file-txt b, .mde-f-file.has-err .mde-f-file-txt span { color: #ffb4a6; }

  .mde-f-spin { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.25); border-top-color: #fff; animation: mdeFSpin .75s linear infinite; }
  .mde-f-spin--dark { border-color: rgba(19,64,21,.25); border-top-color: #134015; }
  @keyframes mdeFSpin { to { transform: rotate(360deg); } }

  .mde-f-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .mde-f-chip { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; font: 600 15px 'Work Sans', sans-serif; cursor: pointer; transition: background .25s, border-color .25s; }
  .mde-f-chip.is-on { background: #9fbf16; border-color: #9fbf16; color: #134015; }
  .has-err .mde-f-chip:not(.is-on) { border-color: #ff7a66; background: rgba(255,122,102,.12); }

  .mde-f-radios { display: flex; flex-direction: column; gap: 10px; }
  .mde-f-radio { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px 20px; border-radius: 22px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; text-align: left; cursor: pointer; transition: background .25s, border-color .25s; font-family: 'Work Sans', sans-serif; }
  .mde-f-radio > i { flex: none; margin-top: 2px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; }
  .mde-f-radio > i::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
  .mde-f-radio b { display: block; font: 700 16px 'Work Sans', sans-serif; }
  .mde-f-radio small { display: block; margin-top: 4px; font: 400 14px/1.4 'Work Sans', sans-serif; color: #c9d6c5; text-wrap: pretty; }
  .mde-f-radio.is-on { background: #9fbf16; border-color: #9fbf16; color: #134015; }
  .mde-f-radio.is-on > i::after { background: #134015; }
  .mde-f-radio.is-on small { color: #2f402f; }
  .has-err .mde-f-radio:not(.is-on) { border-color: #ff7a66; background: rgba(255,122,102,.12); }

  .mde-f-exib { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .mde-f-exib .mde-f-chip { min-height: 52px; padding: 10px 18px; border-radius: 18px; text-align: left; line-height: 1.25; }

  .mde-f-prev { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 24px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
  .mde-f-prev-lbl { font: 600 13px 'Work Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #dbe9a6; }
  .mde-f-prev-hint { font-size: 14px; color: #c9d6c5; text-wrap: pretty; }
  .mde-f-bal { position: relative; max-width: 380px; display: flex; flex-direction: column; gap: 4px; padding: 14px 44px 14px 16px; border-radius: 14px; background: #f7faee; border: 1px solid rgba(19,64,21,.12); box-shadow: 0 10px 28px -16px rgba(0,0,0,.45); }
  .mde-f-bal-t { display: flex; align-items: center; gap: 8px; font: 700 16px 'Work Sans', sans-serif; color: #134015; overflow-wrap: anywhere; }
  .mde-f-bal-t svg { flex: none; }
  .mde-f-bal-b { font: 400 15px/1.45 'Work Sans', sans-serif; color: #3f5240; text-wrap: pretty; }
  .mde-f-bal-b strong { color: #134015; }
  .mde-f-bal-w { font: 400 13px 'Work Sans', sans-serif; color: #8a968b; }
  .mde-f-bal-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; color: #5f6d60; font-size: 18px; line-height: 1; }

  .mde-f-nav { padding-top: 6px; display: flex; flex-direction: column; gap: 14px; }
  .mde-f-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 18px; background: rgba(255,122,102,.14); border: 1px solid rgba(255,122,102,.55); color: #ffe1da; font: 500 15px/1.45 'Work Sans', sans-serif; }
  .mde-f-alert i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #ff7a66; color: #134015; display: grid; place-items: center; font: 700 14px 'Work Sans', sans-serif; font-style: normal; }
  .mde-f-alert[hidden] { display: none; }
  .mde-f-btns { display: flex; gap: 12px; align-items: center; }
  .mde-f-back { flex: none; min-height: 58px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: 600 15px 'Work Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
  .mde-f-next { flex: 0 0 auto; min-height: 58px; padding: 0 32px; border-radius: 999px; border: 0; background: #fff; color: #134015; font: 700 15px 'Work Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform .2s; }
  .mde-f-next:hover, .mde-f-submit:hover { transform: translateY(-2px); }
  .mde-f-submit { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 0 18px; border-radius: 999px; border: 0; background: #9fbf16; color: #134015; font: 700 17px/1.2 'Work Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: center; cursor: pointer; transition: transform .2s; }
  .mde-f-submit[disabled] { cursor: progress; }

  .mde-f-done { display: flex; flex-direction: column; gap: 18px; }
  .mde-f-done h4 { margin: 0; font: 700 clamp(24px,2.6vw,30px)/1.25 'Lora', serif; color: #fff; }
  .mde-f-done p { margin: 0; font-size: 18px; color: #e4ece1; }
  .mde-f-done-btns { display: flex; flex-wrap: wrap; gap: 12px; }
  .mde-f-done-btns a, .mde-f-done-btns button { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 60px; padding: 0 28px; border-radius: 999px; font: 700 15px 'Work Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
  .mde-f-done-btns a { background: #9fbf16; color: #134015; border: 0; }
  .mde-f-done-btns button { border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-weight: 600; }

  /* Celular */
  @media (max-width: 599px) {
    .mde-f-wrap { padding: 24px 12px; }
    .mde-f-card { border-radius: 24px; }
    .mde-f-card::before { background: linear-gradient(180deg, rgba(13,46,15,.78), rgba(13,46,15,.86)); }
    .mde-f-inner { padding: 22px 18px 24px; gap: 20px; }
    .mde-f-steps { display: none; }
    .mde-f-prog { display: flex; }
    .mde-f-long { display: none; }
    .mde-f-short { display: inline; }
    .mde-f-btns { gap: 10px; }
    .mde-f-back { padding: 0 18px; }
    .mde-f-next { flex: 1 1 auto; }
    .mde-f-submit { min-height: 58px; font-size: 15px; }
    .mde-f-exib .mde-f-chip { padding: 10px 14px; font-size: 14px; }
    .mde-f-prev { padding: 16px; }
    .mde-f-radio { padding: 14px 16px; }
    .mde-f-done-btns a, .mde-f-done-btns button { flex: 1 1 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mde-f-viewport { transition: none; }
  }

.mde-f-wrap[hidden]{display:none!important}.mde-f-card{--mde-f-foto:url(/assets/claude/form-bg.webp)}.mde-f-close{display:grid;place-items:center;padding:0}.mde-f-field.has-err input,.mde-f-field.has-err select{border-color:#ffaaa1!important;background:rgba(137,32,32,.48)!important}.mde-f-field-error{color:#ffd5ce;font:600 14px/1.4 Work Sans}

/* Keep the native form isolated from legacy #como-doar button rules. */
#como-doar #formulario .mde-f-radio{justify-content:flex-start!important;text-align:left!important;align-items:flex-start;white-space:normal!important}
#como-doar #formulario .mde-f-radio>span{flex:1 1 0!important;min-width:0;width:auto;white-space:normal;overflow-wrap:break-word}
#como-doar #formulario .mde-f-radio>i{flex:0 0 22px;display:grid;visibility:visible}
#como-doar #formulario .mde-f-radio b,#como-doar #formulario .mde-f-radio small{white-space:normal!important;overflow-wrap:break-word;text-align:left}
.mde-f-bal{color:#134015;font:500 15px/1.5 'Work Sans',sans-serif}
@media(max-width:767px){
 #como-doar #formulario .mde-f-wrap{padding:20px 0 0!important;width:100%;max-width:100%}
 #como-doar #formulario .mde-f-inner{padding:22px 18px 24px!important;gap:20px;max-width:none}
 #como-doar #formulario .mde-f-head{gap:12px;align-items:flex-start}
 #como-doar #formulario .mde-f-head>div{min-width:0;flex:1}
 #como-doar #formulario .mde-f-title{font-size:27px!important;line-height:1.16!important;text-align:left;text-wrap:pretty}
 #como-doar #formulario .mde-f-tag{font-size:12px;padding:7px 10px}
 #como-doar #formulario .mde-f-close{width:44px!important;height:44px!important;padding:0!important;flex:0 0 44px;min-height:44px!important}
 #como-doar #formulario .mde-f-steps{display:none}
 #como-doar #formulario .mde-f-prog{display:flex;gap:8px}
 #como-doar #formulario .mde-f-prog-top{font-size:13px;line-height:1.4;gap:8px}
 #como-doar #formulario .mde-f-prog-top em{white-space:nowrap}
 #como-doar #formulario .mde-f-viewport{height:auto!important;overflow:visible;transition:none}
 #como-doar #formulario .mde-f-screen{gap:18px;min-width:0}
 #como-doar #formulario .mde-f-q h4{font-size:23px!important;line-height:1.22!important;text-align:left;text-wrap:pretty}
 #como-doar #formulario .mde-f-q p{font-size:14px!important;line-height:1.5!important}
 #como-doar #formulario .mde-f-field{font-size:14px;gap:7px}
 #como-doar #formulario .mde-f-input,#como-doar #formulario .mde-f-select{min-height:52px!important;font-size:16px!important;line-height:1.4!important;padding:12px 14px!important;border-radius:14px!important}
 #como-doar #formulario .mde-f-select{padding-right:42px!important}
 #como-doar #formulario .mde-f-selwrap::after{right:16px;font-size:12px}
 #como-doar #formulario .mde-f-toggle{border-radius:16px;padding:4px}
 #como-doar #formulario .mde-f-toggle button{font-size:13px!important;min-height:48px!important;padding:10px 8px!important;line-height:1.3!important;border-radius:12px}
 #como-doar #formulario .mde-f-long{display:none}
 #como-doar #formulario .mde-f-short{display:inline}
 #como-doar #formulario .mde-f-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #como-doar #formulario .mde-f-chip{width:100%;height:100%;min-height:52px!important;padding:11px 10px!important;font-size:14px!important;line-height:1.35!important;letter-spacing:0!important;text-align:center!important;white-space:normal;border-radius:14px}
 #como-doar #formulario .mde-f-exib{grid-auto-rows:1fr;align-items:stretch}
 #como-doar #formulario .mde-f-exib .mde-f-chip{min-height:64px!important;font-size:13px!important}
 #como-doar #formulario .mde-f-radio{gap:10px;padding:14px!important;min-height:76px!important;border-radius:18px;align-items:flex-start}
 #como-doar #formulario .mde-f-radio b{font-size:15px!important;line-height:1.35!important}
 #como-doar #formulario .mde-f-radio small{font-size:13px!important;line-height:1.45!important;margin-top:5px}
 #como-doar #formulario .mde-f-prev{padding:14px;gap:12px;border-radius:18px;min-width:0}
 #como-doar #formulario .mde-f-prev-lbl{font-size:11px;line-height:1.4;letter-spacing:.04em}
 #como-doar #formulario .mde-f-prev-hint{font-size:13px!important;line-height:1.5!important}
 #como-doar #formulario .mde-f-bal{width:100%;max-width:100%;padding:14px;color:#134015;font-size:14px;line-height:1.5;overflow-wrap:break-word}
 #como-doar #formulario .mde-f-bal-t{font-size:14px;padding-right:22px;min-width:0}
 #como-doar #formulario .mde-f-bal-b{font-size:13px;line-height:1.45}
 #como-doar #formulario .mde-f-bal-w{font-size:11px}
 #como-doar #formulario .mde-f-bal-x{right:4px;top:8px}
 #como-doar #formulario .mde-f-nav{padding-top:4px;gap:12px}
 #como-doar #formulario .mde-f-btns{display:flex;align-items:stretch;gap:10px}
 #como-doar #formulario .mde-f-btns>button{height:56px!important;min-height:56px!important;max-height:56px;min-width:0;display:flex;align-items:center;justify-content:center;margin:0;padding:8px 10px!important;font-size:13px!important;line-height:1.25!important;letter-spacing:0!important;border-radius:16px}
 #como-doar #formulario .mde-f-back{flex:0 0 34%;white-space:nowrap!important}
 #como-doar #formulario .mde-f-next,#como-doar #formulario .mde-f-submit{flex:1 1 0}
 #como-doar #formulario .mde-f-file{padding:12px;gap:10px;border-radius:18px}
 #como-doar #formulario .mde-f-file-ico{width:40px;height:40px}
 #como-doar #formulario .mde-f-file-txt b{font-size:13px;letter-spacing:0}
 #como-doar #formulario .mde-f-file-txt span{font-size:12px}
 #como-doar #formulario .mde-f-alert{font-size:14px;line-height:1.45;padding:12px;gap:8px}
}

/* Match the public notification without truncating tribute names. */
#como-doar #formulario .mde-f-bal{gap:4px;padding:12px 14px;line-height:1.32}
#como-doar #formulario .mde-f-bal-t{align-items:flex-start;font:400 14px/1.28 'Work Sans',sans-serif;white-space:normal;padding-right:24px;min-width:0}
#como-doar #formulario .mde-f-bal-t svg{margin-top:2px}
#como-doar #formulario .mde-f-bal-name{min-width:0;white-space:normal;overflow-wrap:anywhere;font-weight:400}
#como-doar #formulario .mde-f-bal-name strong{font-weight:700}
#como-doar #formulario .mde-f-bal-b{font:400 13px/1.32 'Work Sans',sans-serif;white-space:normal;overflow-wrap:anywhere}
#como-doar #formulario .mde-f-bal-b strong{font-size:14px;font-weight:700;white-space:nowrap}
#como-doar #formulario .mde-f-bal-w{font:400 11px/1.25 'Work Sans',sans-serif}

#como-doar #formulario .mde-f-bal-t{font-size:15px;line-height:18px}
#como-doar #formulario .mde-f-bal-b{font-size:14px;line-height:17px}
#como-doar #formulario .mde-f-bal-b strong{font-size:inherit}
#como-doar #formulario .mde-f-bal-w{display:inline-block;white-space:nowrap;margin-left:6px;font-size:11px;line-height:13px}
@media(max-width:767px){
 #como-doar #formulario .mde-f-bal-t{font-size:14px;line-height:16px}
 #como-doar #formulario .mde-f-bal-b{font-size:13px;line-height:15px}
}

/* Separate the opened form from the donation action buttons. */
#como-doar #formulario .mde-f-wrap:not([hidden]){margin-top:40px!important;padding-top:0!important}
@media(max-width:767px){
 #como-doar #formulario .mde-f-wrap:not([hidden]){margin-top:24px!important}
}