/* 10 fotos de presas encontradas en assets/presas/: mandan ellas. */
.btn-amazon::before {
  background-color: transparent;
  /* Dos capas: la sombra que hace legible el texto y, debajo, la foto
     de la presa. Medido en pantalla, el texto blanco sobre la presa
     amarilla se quedaba en 1,7:1 de contraste; la norma pide 4,5:1. */
  background-image:
    radial-gradient(ellipse 76% 42% at 50% 50%,
      rgba(250, 248, 244, 0.93) 0%,
      rgba(250, 248, 244, 0.88) 46%,
      rgba(250, 248, 244, 0.44) 70%,
      rgba(250, 248, 244, 0) 84%),
    var(--presa-foto);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 100%, contain;
  /* La sombra se recorta con la silueta de la propia foto, para que no
     asome ningun rectangulo oscuro por fuera de la presa: debajo de
     ella la pagina tiene que quedar limpia. El recorte usa el canal
     alfa del PNG, que ya viene degradado en el borde. */
  -webkit-mask-image: var(--presa-foto);
  mask-image: var(--presa-foto);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  inset: 0;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.5));
}
.grid-products .card:nth-child(10n + 1) .btn-amazon { --presa-foto: url('/assets/presas/presa-22xxl.webp'); }
.grid-products .card:nth-child(10n + 2) .btn-amazon { --presa-foto: url('/assets/presas/presa-aas.webp'); }
.grid-products .card:nth-child(10n + 3) .btn-amazon { --presa-foto: url('/assets/presas/presa-billows-pu-feature.webp'); }
.grid-products .card:nth-child(10n + 4) .btn-amazon { --presa-foto: url('/assets/presas/presa-blox-1-pu.webp'); }
.grid-products .card:nth-child(10n + 5) .btn-amazon { --presa-foto: url('/assets/presas/presa-dunes-xxl.webp'); }
.grid-products .card:nth-child(10n + 6) .btn-amazon { --presa-foto: url('/assets/presas/presa-fat-tube.webp'); }
.grid-products .card:nth-child(10n + 7) .btn-amazon { --presa-foto: url('/assets/presas/presa-liston-azul.webp'); }
.grid-products .card:nth-child(10n + 8) .btn-amazon { --presa-foto: url('/assets/presas/presa-luna-verde.webp'); }
.grid-products .card:nth-child(10n + 9) .btn-amazon { --presa-foto: url('/assets/presas/presa-spine-2-feature.webp'); }
.grid-products .card:nth-child(10n + 10) .btn-amazon { --presa-foto: url('/assets/presas/presa-straight-pinches-xl.webp'); }
.ficha-actions-row .btn-amazon, .cta-band .btn-amazon { --presa-foto: url('/assets/presas/presa-22xxl.webp'); }
.hero-actions .btn-amazon { --presa-foto: url('/assets/presas/presa-aas.webp'); }
.oferta-row .btn-amazon { --presa-foto: url('/assets/presas/presa-billows-pu-feature.webp'); }
.nav-destacado { --presa-foto: url('/assets/presas/presa-straight-pinches-xl.webp'); }
.nav-cta { --presa-foto: url('/assets/presas/presa-blox-1-pu.webp'); }
.hero-actions .btn-amazon { --presa-foto: url('/assets/presas/presa-aas.webp'); }
.hero-asesor-cta .btn-amazon { --presa-foto: url('/assets/presas/presa-liston-azul.webp'); }
.banda-test-cta .btn-amazon { --presa-foto: url('/assets/presas/presa-luna-verde.webp'); }
.btn-ghost::before { background-image: var(--presa-foto, url('/assets/presas/presa-22xxl.webp')); }
:root { --presa-regleta-foto: url('/assets/presas/presa-straight-pinches-xl.webp'); }
:root { --presas-total: 10; }

/* El hero va sin foto de fondo: no hay ningun assets/fondo-*.jpg.
   Deja una ahi, regenera, y esta regla aparece sola. */