/* ============================================================
   ACATHI — pantalla: Voluntariado (patterns/volunteer.php)
   ============================================================ */

/* ═══════════════════ HÉROE editorial a sangre ═══════════════════ */
.ac-volunteer-hero {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  background:
    radial-gradient(120% 130% at 50% 0%, #4a148c 0%, transparent 60%),
    linear-gradient(160deg, #1a1228 0%, #310065 65%, #4a148c 100%);
  padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(56px, 8vw, 100px);
}
.ac-volunteer-hero__rainbow { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--rainbow-gradient); z-index: 4; }
.ac-volunteer-hero__inner { position: relative; z-index: 2; max-width: 880px; }
.ac-volunteer-hero__inner .ac-eyebrow { justify-content: center; }
.ac-volunteer-hero__title {
  color: #fff; font-family: var(--font-display); font-weight: var(--weight-extra);
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.9rem); line-height: 1.05; letter-spacing: -0.025em;
  margin: 18px auto 0; max-width: 820px; text-wrap: balance;
}
.ac-volunteer-hero__lead { color: rgba(255,255,255,0.86); margin: 22px auto 32px; max-width: 600px; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; }

.ac-volunteer-stats { padding: var(--stack-md) 0; }

.ac-volunteer-areas { padding: var(--stack-md) 0 var(--stack-lg); }
.ac-volunteer-areas__head { text-align: center; margin: 0 auto 48px; max-width: 620px; }
.ac-volunteer-areas__head h2 { margin: 0 0 8px; }
.ac-volunteer-areas__head p { margin: 0; }

.ac-volunteer-how { padding: 0 0 var(--stack-lg); }
.ac-volunteer-steps {
  background: var(--surface-container-low); border-radius: var(--radius-2xl);
  padding: 48px var(--gutter);
}
.ac-volunteer-steps h2 {
  font-family: var(--font-display); font-weight: var(--weight-extra);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); color: var(--primary); text-align: center; margin: 0 0 40px;
}
.ac-volunteer-step__icon { transition: transform var(--dur-base) var(--ease-out); }
.ac-volunteer-step:hover .ac-volunteer-step__icon { transform: translateY(-4px) scale(1.05); }
.ac-volunteer-step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ac-volunteer-step__icon {
  position: relative; width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--primary-fixed); display: flex; align-items: center; justify-content: center;
}
.ac-volunteer-step__icon > .material-symbols-outlined { font-size: 30px; color: var(--primary); }
.ac-volunteer-step__num {
  position: absolute; top: -6px; right: -6px; width: 26px; height: 26px;
  border-radius: var(--radius-full); background: var(--secondary); color: #fff;
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.ac-volunteer-step h3 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 19px; color: var(--on-surface); margin: 0;
}
.ac-volunteer-step p { font-size: 14px; line-height: 20px; color: var(--on-surface-variant); margin: 0; max-width: 240px; }

.ac-volunteer-join { padding: 0 0 var(--stack-lg); }
.ac-volunteer-form {
  position: relative; overflow: hidden;
  max-width: 680px; margin: 0 auto; background: var(--surface-container-lowest);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); padding: 44px 40px 40px;
  border: 1px solid var(--border-subtle); scroll-margin-top: 160px;
}
.ac-volunteer-form__rainbow { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--rainbow-gradient); }
.ac-volunteer-form__head { text-align: center; margin-bottom: 26px; }
.ac-volunteer-form__head h2 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 26px; color: var(--on-surface); margin: 0 0 6px;
}
.ac-volunteer-form__head p { font-size: 15px; color: var(--on-surface-variant); margin: 0; }
.ac-volunteer-form .ac-form-grid { margin-bottom: 22px; }
.ac-volunteer-form__label {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 14px; color: var(--on-surface); margin: 0 0 10px;
}
.ac-volunteer-form__chips { gap: 10px; margin-bottom: 22px; }
.ac-volunteer-form .ac-consent { margin: 4px 0 18px; }
.ac-volunteer-form__alert { margin-top: 18px; }
.ac-volunteer-form [data-form-success] { margin-top: 18px; }

@media (max-width: 680px) {
  .ac-volunteer-form { padding: 28px 20px; }
}