/* Efecto "luz de la tarde": haces de sol que respiran + micropartículas en el aire.
   Uso: <div class="luz-tarde" data-luz-tarde> con la foto de fondo (background-image o <img class="luz-tarde__foto">). */
.luz-tarde { position: relative; overflow: hidden; isolation: isolate; background-size: cover; background-position: center; }
.luz-tarde__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.luz-tarde::before, .luz-tarde::after {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; mix-blend-mode: soft-light;
}
/* haces diagonales desde arriba a la derecha, como el sol que entra entre las hojas */
.luz-tarde::before {
  background:
    linear-gradient(112deg, transparent 38%, rgba(255, 236, 190, .22) 44%, transparent 50%),
    linear-gradient(118deg, transparent 52%, rgba(255, 228, 170, .16) 57%, transparent 62%),
    linear-gradient(108deg, transparent 64%, rgba(255, 240, 200, .12) 68%, transparent 72%);
  animation: luz-haces 14s ease-in-out infinite alternate;
}
/* calidez general que sube y baja muy suave */
.luz-tarde::after {
  background: radial-gradient(60% 50% at 78% 18%, rgba(255, 214, 140, .28), transparent 70%);
  animation: luz-calidez 9s ease-in-out infinite alternate;
}
.luz-tarde__polvo { position: absolute; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }
@keyframes luz-haces { from { transform: translateX(-2%) rotate(0deg); opacity: .75; } to { transform: translateX(2%) rotate(.6deg); opacity: 1; } }
@keyframes luz-calidez { from { opacity: .6; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .luz-tarde::before, .luz-tarde::after { animation: none; } .luz-tarde__polvo { display: none; } }