/*
 * EXCEPCIÓN A LA REGLA DE TRANSPARENCIAS: solo el hero de la portada.
 * Todo degradado, rgba() y opacity del tema vive en este archivo; tools/check-rules.sh lo excluye
 * y el resto del tema sigue sin transparencias.
 */

/* Sombreado: lado izquierdo para leer el título y fundido inferior hacia la sección siguiente (mist) */
.lx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(0deg, #F5F3F8 0, rgba(245, 243, 248, 0) 14%),
    linear-gradient(90deg, rgba(35, 27, 46, 0.88) 0, rgba(35, 27, 46, 0.72) 50%, rgba(35, 27, 46, 0) 100%);
}

/* En pantallas angostas el texto ocupa todo el ancho: sombreado uniforme desde abajo */
@media (max-width: 899px) {
  .lx-hero::after {
    background:
      linear-gradient(0deg, #F5F3F8 0, rgba(245, 243, 248, 0) 10%),
      linear-gradient(0deg, rgba(35, 27, 46, 0.88) 0, rgba(35, 27, 46, 0.7) 60%, rgba(35, 27, 46, 0.45) 100%);
  }
}

/* Entrada: la foto aparece con un fundido suave y un leve acercamiento */
@media (prefers-reduced-motion: no-preference) {
  .lx-hero__media img { animation: lx-hero-in 1200ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes lx-hero-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
}