/* ==========================================================================
   Fondos de las tarjetas de terapias
   Compartido por los 3 bocetos: acá viven sólo las rutas y la geometría.
   La intensidad y el tinte los define cada boceto en su propio styles.css,
   con las variables --fondo-op y --fondo-op-hover.

   Ojo: las rutas de url() son relativas a ESTE archivo (assets/),
   no al HTML que lo incluye.
   ========================================================================== */

.card {
  position: relative; overflow: hidden; isolation: isolate;
  /* Altura de la franja inferior reservada para la textura. Un solo valor
     gobierna el aire al pie y hasta dónde llega la imagen, así no pueden
     desincronizarse. Cada boceto puede ajustarlo. */
  --fondo-banda: 6rem;
}

/* El párrafo llegaba casi al borde inferior, así que la textura caía siempre
   detrás del texto. Esta franja le da a la imagen su propia zona. */
.terapias .card,
.ceremonias .card { padding-bottom: var(--fondo-banda); }

/* La textura se pinta encima del fondo de la tarjeta y debajo del contenido.
   Un pseudoelemento posicionado se dibuja por encima del texto en flujo
   normal, así que el contenido necesita subir de capa (regla de abajo). */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--fondo-op, 0.14);
  transition: opacity .45s ease;
  pointer-events: none;

  /* La textura se desvanece hacia arriba y muere justo donde termina la
     franja, así el texto nunca la pisa. Va en píxeles y no en porcentajes
     a propósito: las tarjetas no miden todas lo mismo (la ancha es mucho
     más baja que las de la grilla) y con porcentajes la franja se corría
     hasta meterse debajo del párrafo. */
  -webkit-mask-image: linear-gradient(to top, #000 0,
                        #000 calc(var(--fondo-banda) * 0.55), transparent var(--fondo-banda));
          mask-image: linear-gradient(to top, #000 0,
                        #000 calc(var(--fondo-banda) * 0.55), transparent var(--fondo-banda));
}

.card:hover::before,
.card:focus-within::before { opacity: var(--fondo-op-hover, 0.26); }

.card > * { position: relative; z-index: 1; }

/* La tarjeta ancha es mucho más baja que las de la grilla y su textura tiene
   el motivo (el libro abierto) en el centro, no al pie: con la franja normal
   quedaba fuera de cuadro. */
.card-wide { --fondo-banda: 10rem; }

/* Cada textura acumula el detalle en la franja inferior y deja aire arriba,
   que es donde caen el icono, el título y el texto. De ahí el bottom. */
.card-reiki::before          { background-image: url("img/fondo-reiki.jpg"); }
.card-medicina-china::before { background-image: url("img/fondo-medicina-china.jpg"); }
.card-reflexologia::before   { background-image: url("img/fondo-reflexologia.jpg"); }
.card-terapia-floral::before { background-image: url("img/fondo-terapia-floral.jpg"); }
.card-herboristeria::before  { background-image: url("img/fondo-herboristeria.jpg"); }
.card-aromaterapia::before   { background-image: url("img/fondo-aromaterapia.jpg"); }
.card-registros::before      { background-image: url("img/fondo-registros.jpg"); }
.card-temazcal::before       { background-image: url("img/fondo-temazcal.jpg"); }
.card-ceremonia-medicina::before {
  background-image: url("img/fondo-ceremonia-medicina.jpg");
}
.card-hoponopono::before     { background-image: url("img/fondo-hoponopono.jpg"); }

/* Si alguien pidió menos movimiento, la textura se queda quieta en su
   estado visible en lugar de aparecer con el hover. */
@media (prefers-reduced-motion: reduce) {
  .card::before { transition: none; }
}