/**
 * Voluntariado Vietnam (node 14) — galería + vídeo responsivo + CTA.
 * Solo lo que NO existe ya en design-system-v2. Hereda .page-hero, .page-content,
 * .breadcrumb-v2, .btn, .btn--gold.
 */

/* Cuerpo: tipografía cómoda para texto largo editorial */
.voluntariado-body {
  max-width: 720px;
  margin: 0 auto;
  color: #1A1A1A;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.voluntariado-body p { margin: 0 0 1em; }

/* Galería simple, sin dependencia de JS */
.voluntariado-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 48px 0;
}
.voluntariado-gallery__item {
  margin: 0;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: #f4f4f1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.voluntariado-gallery__item img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.voluntariado-gallery__caption {
  padding: 10px 14px;
  font-size: 0.9375rem;
  color: #1A1A1A;
  background: #ffffff;
}

/* Vídeo responsivo 16:9 sin JS */
.voluntariado-video {
  margin: 48px auto;
  max-width: 960px;
}
.voluntariado-video__frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: #000;
}
.voluntariado-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* CTA — reutiliza .btn .btn--gold del DS, solo wrapper */
.voluntariado-cta {
  margin: 56px auto 16px;
  padding: 32px;
  text-align: center;
  background: var(--green-bg, #f1f5e8);
  border-radius: var(--radius-lg, 12px);
  max-width: 720px;
}
.voluntariado-cta__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-dark, #2D5016);
  margin: 0 0 8px;
}
.voluntariado-cta__text {
  color: var(--text-sec, #4a4a4a);
  margin: 0 0 20px;
}
.voluntariado-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Mobile */
@media (max-width: 576px) {
  .voluntariado-gallery { gap: 12px; }
  .voluntariado-gallery__item img { height: 180px; }
  .voluntariado-cta { padding: 24px 18px; }
}

/* ============================================================================
   v3fix B5 (2026-07-22) — hero legible (velo excesivo + subtítulo gris).
   ============================================================================ */
.page-hero__overlay {
  background:
    linear-gradient(185deg, rgba(39,39,37,0) 24%, rgba(34,64,31,.62) 100%),
    linear-gradient(180deg, rgba(34,64,31,.35) 0%, rgba(34,64,31,0) 34%) !important;
}
.page-hero__subtitle,
.page-hero__subtitle p {
  color: var(--crema, #FDF8EE) !important;
  text-shadow: 0 1px 16px rgba(34,64,31,.5);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}
.page-hero__bg { background-size: cover; background-position: center 40%; }