/* =========================================================
   BORDE ONDULADO — solo hero y cierre
   ========================================================= */
.wave-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 50px;
  display: block;
  pointer-events: none;
}
.wave-edge path {
  fill: var(--cream, #FAF5EC);
}
.wave-edge--dark path {
  fill: var(--ink, #2B2420);
}
@media (min-width: 720px) {
  .wave-edge { height: 70px; }
}


/* =========================================================
   DIFUMINADO — fotos-cita (con texto encima)
   Capa de degradado superpuesta (compatible con todos los
   navegadores, incluido el navegador interno de WhatsApp).
   ========================================================= */

/* IMPORTANTE: la foto original ya tiene un ::after oscuro
   para que el texto se lea bien; le damos z-index explícito
   para poder poner nuestro degradado por encima con seguridad */
.quote-photo::after {
  z-index: 1;
}

.photo-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--cream, #FAF5EC) 85%);
}
.photo-fade--alt {
  background: linear-gradient(to bottom, transparent, var(--cream-2, #F2EAD9) 85%);
}

/* el texto de la cita debe quedar SIEMPRE por encima del degradado */
.quote-photo figcaption {
  z-index: 3;
}

@media (max-width: 480px) {
  .photo-fade { height: 20%; }
}