/* ============================================================
   COMIENZO · ajustes propios de la landing de lanzamiento
   Se carga DESPUÉS de cine-full.css. Solo corrige lo que en
   esta página se comporta distinto: su contenido es bastante
   más largo que el de crecer.html, y algunas piezas de la capa
   de cine estaban calculadas para aquel texto.
   ============================================================ */

/* ------------------------------------------------------------
   1 · HERO — la firma y las cápsulas se tocaban
   .fnote (foto pequeña + texto) y .chips quedaban pegadas sin
   un solo píxel de aire, y los bordes redondeados se solapaban.
   ------------------------------------------------------------ */
.hero .chips { margin-top: clamp(20px, 2.6vh, 34px); }
.cinefilm .hero .chips,
.cinemix .hero .chips { margin-top: clamp(24px, 3.4vh, 42px); }

/* y que respiren entre ellas cuando saltan de línea */
.hero .chips { row-gap: 12px; }

/* ------------------------------------------------------------
   2 · Un acordeón suelto fuera de la sección de preguntas
   No puede llevar la clase .faq: app.js busca el PRIMER .faq de
   la página para decidir cuándo asoma la barrita flotante de
   móvil, y con un .faq a mitad de página aparecía muchísimo
   antes de tiempo, tapando texto. Misma pinta, otra clase.
   ------------------------------------------------------------ */
.qa-suelto {
  margin-top: 38px;
  max-width: 820px;
  border-top: 1px solid var(--hair);
}

/* ------------------------------------------------------------
   3 · QUIÉN SOY — la foto es fondo, el texto manda
   El velo original oscurecía solo la franja de abajo, porque en
   crecer el texto cabía ahí. Aquí el texto ocupa toda la altura
   y caía sobre la parte clara de la foto: no se leía.
   Solución: velo en dos capas. Una vertical que oscurece de
   arriba abajo, y otra horizontal que oscurece la columna de
   texto (izquierda) y deja respirar el retrato (derecha).
   ------------------------------------------------------------ */
.cinefilm #quien .foto__img {
  object-position: center 18%;
  filter: grayscale(1) contrast(1.02) brightness(.62);
}

.cinefilm #quien .foto::after {
  background:
    linear-gradient(90deg,
      rgba(8, 8, 10, .95) 0%,
      rgba(8, 8, 10, .9) 44%,
      rgba(8, 8, 10, .45) 72%,
      rgba(8, 8, 10, .3) 100%),
    linear-gradient(180deg,
      rgba(8, 8, 10, .55) 0%,
      rgba(8, 8, 10, .74) 26%,
      rgba(8, 8, 10, .9) 70%,
      rgba(8, 8, 10, .99) 100%);
}

/* En estrecho el texto ocupa todo el ancho: velo parejo, sin degradado lateral */
@media (max-width: 980px) {
  .cinefilm #quien .foto::after {
    background: linear-gradient(180deg,
      rgba(8, 8, 10, .84) 0%,
      rgba(8, 8, 10, .91) 40%,
      rgba(8, 8, 10, .98) 100%);
  }
}

/* El cierre y el hueco del vídeo quedaban POR DEBAJO del velo de la foto:
   no están posicionados, y .foto sí lo está. Se suben al mismo plano
   que el resto del texto. */
.cinefilm #quien .closer,
.cinefilm #quien > .wrap > .ph-block { position: relative; z-index: 2; }

/* La columna de texto no debe irse hasta el borde del retrato */
.cinefilm #quien .quien__body,
.cinefilm #quien .closer { max-width: 56ch; }

/* El hueco del vídeo, con la foto detrás, necesita fondo propio para leerse */
.cinefilm #quien > .wrap > .ph-block {
  max-width: 56ch;
  background-color: rgba(8, 8, 10, .82);
}