/* ============================================================
   Fondo de Hazte un Hit — lo comparten la página del museo (hazte-un-hit.php)
   y la ficha de cada agrupación (agrupacion.php). Va DESPUÉS de estilo.css.

   La imagen principal de la sección (el Panecillo, de fondo-panecillo.jpg) queda FIJA
   detrás de todo el contenido: al hacer scroll el contenido pasa por encima y la imagen
   se queda en su lugar, así no se corta aunque la página sea larga (el museo lista 100+
   agrupaciones). Sobre ella van tres capas oscuras —un halo suave detrás del título, una
   viñeta que enmarca los lados y un degradado que la funde hacia abajo— para que el
   texto siempre se lea y el naranja de la flecha no compita con él.
   El elemento fijo es el pseudo-elemento de .fondo-textura (estilo.css), no
   background-attachment: fixed, que en Safari de iOS no funciona bien.
   ============================================================ */
.fondo-hazte-un-hit::before {
    background:
        radial-gradient(ellipse 46% 26% at 50% 25%, rgba(14, 9, 28, 0.62), transparent 100%),
        radial-gradient(ellipse 88% 64% at 50% 30%, transparent 34%, rgba(14, 9, 28, 0.78) 100%),
        linear-gradient(180deg, rgba(18, 12, 34, 0.12) 0, rgba(18, 12, 34, 0.46) 36%, rgba(18, 12, 34, 0.86) 70%, rgba(18, 12, 34, 0.96) 100%),
        linear-gradient(rgba(10, 6, 22, 0.34), rgba(10, 6, 22, 0.34)),
        var(--fondo) url('../img/hazte-un-hit/fondo-panecillo.jpg') 50% 14% / cover no-repeat;
}
/* Las ondas y los resplandores del encabezado se salen de la columna: que no generen scroll horizontal. */
body.fondo-hazte-un-hit { overflow-x: clip; }
@media (max-width: 640px) {
    .fondo-hazte-un-hit::before { background-position: 50% 14%; }
}