/* Página "Seja voluntário": pensada para o celular (o desktop herda o story.css). */
.volunteer-page .choice .ico{font-style:normal;font-size:1.15rem;line-height:1;display:block;margin-bottom:6px}
.volunteer-page .choice.any{background:#fbf6e7;border-color:#e8cf8a}
.volunteer-page .choice.any:has(input:checked){background:#f8eccb;border-color:#9a7324;box-shadow:inset 0 0 0 1px #9a7324}
.volunteer-page .wa-grid{grid-template-columns:1.6fr 1fr}

@media(max-width:820px){
  /* campo focado / com erro nunca fica embaixo do botão fixo */
  html:has(.volunteer-page){scroll-padding-bottom:96px;scroll-padding-top:90px}
  /* topo enxuto: o formulário aparece já na primeira tela */
  .volunteer-page .topline,.volunteer-page .back-link{display:none}
  .volunteer-page .story-heading{padding:18px 0 16px}
  .volunteer-page .story-heading .eyebrow{margin-bottom:6px}
  .volunteer-page .story-heading h1{font-size:2.1rem;line-height:1.1;margin-bottom:8px}
  .volunteer-page .story-heading p:not(.eyebrow){font-size:.9375rem;line-height:1.5}
  .volunteer-page .story-heading p br{display:none}
  .volunteer-page .story-section{padding:0 0 40px;border-top:0;background:#fff}
  .volunteer-page .story-section>.container{width:100%}
  .volunteer-page .story-grid{gap:0}
  .volunteer-page .form-panel{border:0;border-radius:0;padding:4px 20px 0}
  .volunteer-page .form-introduction{display:none}
  .volunteer-page .form-section{margin-bottom:18px;padding-bottom:18px}
  .volunteer-page .form-section>legend{font-size:1.2rem;margin-bottom:14px;gap:10px}
  .volunteer-page .form-section>legend>span{width:26px;height:26px;font-size:.6875rem}
  .volunteer-page .field{margin-bottom:14px}
  .volunteer-page .field>label{margin-bottom:6px}
  .volunteer-page .field input,.volunteer-page .field select{min-height:48px;padding:11px 12px;font-size:16px}
  .volunteer-page .field textarea{min-height:92px;font-size:16px}
  .volunteer-page .fields-grid.wa-grid,.volunteer-page .fields-grid.city-grid{grid-template-columns:1.6fr 1fr;gap:10px}
  .volunteer-page .fields-grid.wa-grid .field,.volunteer-page .fields-grid.city-grid .field{margin-bottom:14px}
  .volunteer-page #whatsapp-hint{display:none}
  /* formas de ajudar: botões em 2 colunas, "qualquer demanda" na linha toda */
  .volunteer-page .choice-fieldset{margin-bottom:16px}
  .volunteer-page .choice-fieldset>legend{font-size:.8125rem;color:var(--muted);margin-bottom:10px}
  .volunteer-page #ajuda-group{grid-template-columns:1fr 1fr;gap:8px}
  .volunteer-page #ajuda-group .choice{flex-direction:column;align-items:flex-start;position:relative;padding:12px 12px 12px;min-height:84px;gap:0}
  .volunteer-page #ajuda-group .choice input{position:absolute;top:10px;right:10px;margin:0}
  .volunteer-page #ajuda-group .choice strong{font-size:.875rem;padding-right:20px}
  .volunteer-page #ajuda-group .choice small{display:none}
  .volunteer-page #ajuda-group .choice.any{grid-column:1/-1;min-height:0;padding:12px 44px 12px 12px}
  .volunteer-page #ajuda-group .choice.any input{top:50%;transform:translateY(-50%);right:14px}
  .volunteer-page #ajuda-group .choice.any span{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
  .volunteer-page #ajuda-group .choice.any .ico{margin:0;grid-row:1/3}
  .volunteer-page #ajuda-group .choice.any strong{padding:0}
  .volunteer-page #ajuda-group .choice.any small{display:block;margin:2px 0 0;font-size:.75rem}
  /* horários: 3 botões por linha, sem descrição */
  .volunteer-page #disponibilidade-group{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .volunteer-page #disponibilidade-group .choice{padding:0;min-height:46px;position:relative;align-items:stretch;border-radius:999px}
  .volunteer-page #disponibilidade-group .choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
  .volunteer-page #disponibilidade-group .choice span{display:flex;align-items:center;justify-content:center;width:100%;text-align:center;padding:6px 4px}
  .volunteer-page #disponibilidade-group .choice strong{font-size:.8125rem;line-height:1.2}
  .volunteer-page #disponibilidade-group .choice small{display:none}
  .volunteer-page #disponibilidade-group .choice:has(input:checked){background:var(--navy);border-color:var(--navy)}
  .volunteer-page #disponibilidade-group .choice:has(input:checked) strong{color:#fff}
  .volunteer-page #disponibilidade-group .choice:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
  .volunteer-page .volunteer-notice{font-size:.8125rem;padding:12px 14px;margin-bottom:14px}
  .volunteer-page .consent-hint{margin-top:6px}
  /* botão sempre à mão, no rodapé da tela */
  .volunteer-page .form-submit{position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--line);margin:0 -20px;padding:10px 20px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -8px 20px rgba(11,39,65,.08)}
  .volunteer-page .form-submit>p{display:none}
  .volunteer-page .story-submit{min-height:52px}
  /* "como funciona" depois do formulário, compacto */
  .volunteer-page .story-aside{padding:24px 20px 0}
  .volunteer-page .aside-intro{padding:22px 20px}
  .volunteer-page .aside-intro h2{font-size:1.45rem}
  .volunteer-page .aside-intro>p:not(.eyebrow):not(.aside-note){display:none}
  .volunteer-page .success-panel{border:0;padding:28px 20px}
  .volunteer-page .success-panel h2{font-size:2.2rem}
}
@media(max-width:360px){
  .volunteer-page #disponibilidade-group{grid-template-columns:1fr 1fr}
}