/* ---------- Proyectos Red Rural GEA · galería de vídeos ---------- */
.rrg-videos {
  background: var(--gea-papel);
  padding: 56px 0 64px;
}
.rrg-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.rrg-titulo {
  font-family: 'Averia Serif Libre', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.15;
  color: var(--gea-verde);
  margin: 0 0 8px;
}
.rrg-titulo em { color: var(--gea-mostaza); font-style: italic; }
.rrg-wave { max-width: 260px; margin: 0 0 14px; }
.rrg-wave svg { display: block; width: 100%; height: 10px; }
.rrg-intro {
  font-family: 'Averia Serif Libre', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  color: var(--gea-verde);
  line-height: 1.5;
  margin: 0 0 10px;
  max-width: 860px;
}
.rrg-intro strong { font-weight: 700; color: var(--gea-verde); font-style: italic; }
.rrg-nota {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 1.02rem;
  color: var(--gea-suave);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 680px;
}

/* Rejilla: 4 columnas en escritorio (2 filas visibles = 8 vídeos). */
.rrg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 20px;
}
.rrg-card { min-width: 0; }
.rrg-card.rrg-hidden { display: none; }

/* Fachada: miniatura + play (rápida); al pulsar se carga el reproductor. */
.rrg-facade {
  display: block; position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  border: 0; padding: 0; margin: 0; cursor: pointer;
  border-radius: 0; overflow: hidden;
  background: var(--gea-verde) center / cover no-repeat;
  box-shadow: 0 3px 14px rgba(31, 58, 46, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Velo verde sutil + degradado inferior para dar profundidad y cohesión de marca */
.rrg-facade::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(31,58,46,0.05) 0%, rgba(31,58,46,0) 45%, rgba(31,58,46,0.42) 100%);
  transition: background 0.25s;
}
.rrg-card:hover .rrg-facade { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(31, 58, 46, 0.26); }
.rrg-facade--noimg {
  background: linear-gradient(135deg, var(--gea-verde), var(--gea-verde2));
}
.rrg-facade--link.rrg-facade--noimg {
  background: linear-gradient(135deg, var(--gea-verde), var(--gea-verde2));
  text-decoration: none;
}

/* Botón de play circular, centrado, verde → mostaza al pasar */
.rrg-play {
  position: absolute; z-index: 2; top: 50%; left: 50%;
  width: 62px; height: 62px; transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}
.rrg-play svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.rrg-play-bg { fill: rgba(31, 58, 46, 0.82); stroke: rgba(255,255,255,0.92); stroke-width: 1.5; transition: fill 0.2s; }
.rrg-facade:hover .rrg-play-bg { fill: var(--gea-mostaza); }
.rrg-card:hover .rrg-play { transform: translate(-50%, -50%) scale(1.08); }

/* Etiqueta de plataforma (BitChute sin portada, o «Ver en … ↗») abajo */
.rrg-facade-plat {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 10px;
  font-family: 'Barlow', system-ui, sans-serif; font-weight: 600;
  font-size: 0.85rem; color: var(--gea-papel); text-align: center; padding: 0 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.rrg-facade--noimg .rrg-facade-plat { bottom: 16px; }

/* Reproductor incrustado (sustituye a la fachada al pulsar) */
.rrg-video {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 0; overflow: hidden; background: #000;
  box-shadow: 0 2px 10px rgba(31, 58, 46, 0.14);
}
.rrg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.rrg-card-titulo {
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 600; font-size: 0.98rem; line-height: 1.3;
  color: var(--gea-verde); margin: 12px 2px 0;
  transition: color 0.2s;
}
.rrg-card:hover .rrg-card-titulo { color: var(--gea-mostaza); }
.rrg-card-ponente {
  font-family: 'Barlow', system-ui, sans-serif; font-size: 0.85rem;
  color: var(--gea-suave); margin: 2px 2px 0;
}
.rrg-videos--dark .rrg-card-ponente { color: rgba(244, 240, 231, 0.75); }
.rrg-mas--link { display: inline-block; text-decoration: none; }

/* Botón «Ver más» */
.rrg-mas-wrap { text-align: center; margin-top: 34px; }
.rrg-mas {
  font-family: 'Barlow', system-ui, sans-serif; font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--gea-papel); background: var(--gea-verde);
  border: none; border-radius: 0; padding: 0.7rem 1.6rem; cursor: pointer;
  transition: background 0.2s;
}
.rrg-mas:hover { background: var(--gea-mostaza); }

/* ---------- Variante OSCURA: dentro de la caja verde de la Home ---------- */
.mh-rrg__inner > .mh-rrg__videos { grid-column: 1 / -1; }
.rrg-videos--dark {
  background: transparent;
  padding: 0;
  margin-top: 20px;
  border-top: 1px solid rgba(244, 240, 231, 0.18);
}
.rrg-videos--dark .rrg-inner { padding: 32px 0 4px; max-width: none; }
@media (min-width: 1025px) {
  .rrg-videos--dark .rrg-grid { grid-template-columns: repeat(3, 1fr); }
}
.rrg-videos--dark .rrg-titulo { color: var(--gea-papel); }
.rrg-videos--dark .rrg-titulo em { color: var(--gea-mostaza); }
.rrg-videos--dark .rrg-intro { color: var(--gea-papel); }
.rrg-videos--dark .rrg-intro strong { color: var(--gea-papel); }
.rrg-videos--dark .rrg-nota { color: rgba(244, 240, 231, 0.8); }
.rrg-videos--dark .rrg-card-titulo { color: var(--gea-papel); }
.rrg-videos--dark .rrg-card:hover .rrg-card-titulo { color: var(--gea-mostaza); }
.rrg-videos--dark .rrg-mas {
  background: var(--gea-mostaza); color: var(--gea-verde);
}
.rrg-videos--dark .rrg-mas:hover { background: var(--gea-papel); color: var(--gea-verde); }

/* Tablet y móvil: filas de 2 vídeos */
@media (max-width: 1024px) {
  .rrg-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
}
@media (max-width: 600px) {
  .rrg-videos { padding: 36px 0 44px; }
  .rrg-inner { padding: 0 16px; }
  .rrg-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .rrg-play { width: 46px; height: 46px; }
  .rrg-card-titulo { font-size: 0.86rem; margin-top: 9px; }
  .rrg-facade-plat { font-size: 0.72rem; bottom: 8px; }
  .rrg-facade { border-radius: 0; }
}