/* Cierre (#cierre). La última escena: el río de polvo de Magnific a sangre, en bucle, y encima la frase de
   cierre y el último «Pedir propuesta». El texto va a la izquierda, sobre la parte oscura del vídeo, con un velo
   que lo deja leer. Todos los selectores empiezan por #cierre. */

#cierre {
  position: relative;
  display: grid; align-items: center;
  min-height: min(88vh, 900px);
  padding-block: clamp(96px, 12vw, 168px);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

#cierre .cie-media { position: absolute; inset: 0; z-index: -1; }
#cierre .cie-poster,
#cierre .cie-video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 72% 50%;
}
/* El vídeo entra con un fundido largo sobre su propia primera imagen: no hay salto. */
#cierre .cie-video { opacity: 0; transition: opacity 1.4s var(--ease-out); }
#cierre .cie-video.is-on { opacity: 1; }
/* Velo: oscuro a la izquierda (el texto) y arriba y abajo (se funde con las secciones vecinas). */
#cierre .cie-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(7, 8, 15, 0.86) 34%, rgba(7, 8, 15, 0.2) 68%, rgba(7, 8, 15, 0) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(7, 8, 15, 0) 20%, rgba(7, 8, 15, 0) 78%, var(--ink) 100%);
}

#cierre .cie-inner { position: relative; display: grid; gap: clamp(20px, 2.4vw, 32px); justify-items: start; }
/* Primera frase en fino y gris; la segunda, la que importa, en grueso. */
#cierre .cie-title {
  max-width: 15ch;
  font-size: clamp(2.5rem, 0.9rem + 5.2vw, 5.75rem);
  font-weight: 300; line-height: 0.98; letter-spacing: -0.04em;
  color: var(--text-2); text-wrap: balance;
}
#cierre .cie-t2 { display: block; margin-top: 0.12em; font-weight: 800; color: var(--text); }
#cierre .cie-lead { max-width: 40ch; color: var(--text-2); }
#cierre .cie-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* ---------- Móvil: el texto va encima del vídeo entero; velo más uniforme ---------- */
@media (max-width: 767px) {
  #cierre { min-height: 82svh; padding-block: 88px; }
  #cierre .cie-poster, #cierre .cie-video { object-position: 82% 50%; }
  #cierre .cie-media::after {
    background:
      linear-gradient(180deg, var(--ink) 0%, rgba(7, 8, 15, 0.55) 26%, rgba(7, 8, 15, 0.7) 60%, var(--ink) 100%);
  }
  #cierre .cie-ctas, #cierre .cie-ctas .btn { width: 100%; }
}