/* --- Fondos de «Sigue escuchando»: imagen a la derecha que se funde con el verde de la tarjeta --- */
/* La imagen va en su propia capa (::after, en lugar de los anillos) con su proporción 21:9 y anclada a la derecha:
   en tarjetas normales ocupa el 72 % del ancho; en pantallas muy anchas no se estira más allá de su proporción
   (así no se recorta a una franja ni se ve «ampliada»). Su borde izquierdo se desvanece en el verde. */
.hero-inicio.con-fondo::after { content: ''; position: absolute; z-index: -2; pointer-events: none;
  top: 0; right: 0; bottom: 0; left: auto; width: auto; height: 100%; aspect-ratio: 21 / 9; max-width: 72%; border-radius: 0;
  background: var(--fondo) center 40% / cover no-repeat; opacity: 0; transition: opacity .5s;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 26%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 26%, #000 58%); }
.hero-inicio.con-fondo.fondo-listo::after { opacity: 1; }
.hero-inicio.con-fondo::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(7, 21, 18, .3), transparent 40%); }
.hero-inicio.con-fondo h2 { text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }

@media (max-width: 760px) {
  /* En el teléfono la imagen llena la tarjeta; lo importante queda arriba y abajo se oscurece para el texto */
  .hero-inicio.con-fondo::after { left: 0; aspect-ratio: auto; max-width: none; -webkit-mask-image: none; mask-image: none;
    background-position: var(--foco-x, 78%) 30%; }
  .hero-inicio.con-fondo::before { background: linear-gradient(180deg, rgba(11, 30, 25, .08) 0%, rgba(11, 30, 25, .42) 38%,
    rgba(11, 30, 25, .88) 72%, rgba(11, 30, 25, .94) 100%); }
}