.volunteer-why { grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:100px; }
.volunteer-signup { grid-template-columns:minmax(0,.7fr) minmax(0,1.4fr); }
.volunteer-signup a { overflow-wrap:anywhere; }
.vol-form { min-width:0; }
.vol-form fieldset { min-width:0; margin:0; padding:0; border:0; }
.vol-form .vol-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-block:28px; }
.vol-fields label,.vol-comment { display:grid; gap:10px; }
.vol-form input:not([type=checkbox]):not([type=radio]),.vol-form select,.vol-form textarea { width:100%; min-width:0; min-height:44px; padding:10px; border:1px solid #c8c8be; border-radius:0; color:var(--color-text); background:transparent; font:inherit; }
.vol-form option { color:var(--color-text); background:var(--color-background); }
.vol-options-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-block:30px; }
.vol-options legend { margin-bottom:16px; }
.vol-options label,.vol-consent { display:flex; align-items:start; gap:8px; padding-block:6px; }
.vol-options input,.vol-consent input { flex-shrink:0; margin-top:4px; }
.vol-form textarea { resize:vertical; min-height:125px; }
.vol-consent { margin-block:24px; }
.vol-form :disabled { opacity:1; cursor:not-allowed; }
.vol-form button:disabled { opacity:.65; }
.vol-form-note { border-left:2px solid #c8c8be; padding-left:16px; }
@media(max-width:1000px) { .volunteer-why,.volunteer-signup { grid-template-columns:minmax(0,1fr); gap:36px; } }
@media(max-width:600px) { .vol-form .vol-fields,.vol-options-grid { grid-template-columns:minmax(0,1fr); } }

/* Revisión responsive 21/10/2026. */
@media(max-width:700px) {
 .volunteer-gallery { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; }
 .volunteer-gallery .participation-triptych,.volunteer-gallery .participation-wide { display:contents; }
 .volunteer-gallery img { width:85%; flex:0 0 85%; height:480px; max-width:none; margin:0; object-fit:cover; scroll-snap-align:start; }
}

/* Galería de voluntariado: zoom en hover y el resto en blanco y negro */
.volunteer-gallery img {
  position: relative;
  transition: filter .35s ease, transform .35s ease;
  will-change: filter, transform;
}
@media(hover:hover) {
  .volunteer-gallery img:hover {
    filter: grayscale(0);
    transform: scale(1.015);
    z-index: 2;
  }
  .volunteer-gallery:has(img:hover) img:not(:hover) {
    filter: grayscale(1);
    transform: scale(1);
  }
}
@media(prefers-reduced-motion:reduce) {
  .volunteer-gallery img { transition:none; }
  .volunteer-gallery img:hover { transform:none; }
}