/* =====================================================================
   LISTAS (films.html y comercials.html)
   Rejilla regular desde arriba, cada portada en formato cine.
   Columnas y formato: ajustes.css sección 4 (--lista-...)
   La rejilla en sí está en base.css (.rejilla-cine)
   ===================================================================== */

.lista-cine {
  --cols: var(--lista-columnas);
  --formato: var(--lista-formato);
}
@media (max-width: 700px) { .lista-cine { --cols: var(--lista-columnas-movil); } }

.celda-proyecto { cursor: pointer; }
.celda-proyecto.oculta { display: none; }
/* Fichas con tráiler y sin fotografías: tarjeta lisa, sin imagen rota. */
.celda__fondo-sin-foto { position: absolute; inset: 0; background: #000; }
.celda-proyecto.sin-portada .celda-proyecto__txt,
.modo-cartel .celda-proyecto.sin-portada .celda__texto {
  display: flex; align-items: center; justify-content: center;
  inset: 0; width: 100%; max-width: none; padding: 1rem;
  text-align: center; color: var(--color-tinta); font: 400 1rem Arial, sans-serif;
}
.celda-proyecto.sin-portada .celda__ficha { width: 100%; }
.celda-proyecto.sin-portada .celda__ano { margin-top: .7em; }

/* Al pasar el ratón: la elegida se acerca, las demás bajan un poco la luz
   (cuánto: ajustes.css → --hover-luz) */
@media (hover: hover) {
  .lista-cine:not(.modo-cartel):hover .celda-proyecto.visible img { filter: brightness(var(--hover-luz)); }
  .lista-cine:not(.modo-cartel) .celda-proyecto.visible:hover img { filter: none; transform: scale(1.035); }
}

/* Info: Título / labor / año, un párrafo alineado a la izquierda.
   Tamaño y distancia al cursor: ajustes.css sección 4 (--etiqueta-...) */
.celda-proyecto__txt,
.etiqueta-cursor {
  font-family: var(--fuente-etiqueta);
  font-size: var(--etiqueta-tam);
  line-height: 1.3;
  text-align: left;
  color: var(--dif-letra); mix-blend-mode: normal;
  -webkit-text-stroke: 0;
  pointer-events: none;
}
.celda-proyecto__txt span, .etiqueta-cursor span { display: block; }
.celda__titulo {
  font-family: var(--titulo-fuente);
  font-size: calc(var(--titulo-tam) * .65);
  font-weight: var(--titulo-peso);
  font-style: var(--titulo-estilo);
  font-synthesis: weight style;
  letter-spacing: var(--titulo-espaciado);
  text-transform: uppercase;
}

/* En móvil: fija abajo a la izquierda de cada portada */
.celda-proyecto__txt { position: absolute; z-index: 2; left: .8rem; bottom: .7rem; right: .8rem; }

/* Con ratón: sale a las 4 del cursor (abajo a la derecha) */
@media (hover: hover) and (pointer: fine) {
  .celda-proyecto__txt { display: none; }
}
.etiqueta-cursor {
  position: fixed; z-index: 70; left: 0; top: 0;
  margin: var(--etiqueta-separacion) 0 0 var(--etiqueta-separacion);
  opacity: 0; transition: opacity .35s;
  white-space: nowrap;
}
.etiqueta-cursor.visible { opacity: 1; }
@media not all and (hover: hover) { .etiqueta-cursor { display: none; } }

.lista-vacia { padding: calc(var(--margen) * 4) var(--margen); color: var(--color-suave); }

/* =====================================================================
   CON CARTELES  (lista.js añade .modo-cartel; ajustes en ajustes.css 4b)
   ---------------------------------------------------------------------
   capa 0  la portada (todo el rectángulo), apenas oscurecida
   capa 1  el cartel, a la izquierda y a todo lo alto
   capa 2  el texto, encima de la portada
   Al pasar el ratón: el cartel se desvanece y la portada vuelve a su luz,
   los dos a la vez, con la misma curva y sin zoom.
   ===================================================================== */
.modo-cartel .celda__cartel {
  position: absolute; z-index: 1; left: 0; top: 0;
  width: auto; height: 100%;
  aspect-ratio: var(--cartel-formato);
  object-fit: cover;
}
/* Sin ningún movimiento: cada imagen va en su propia capa fija desde el
   principio (translateZ), así al desvanecerse el cartel no se recoloca ni
   «tiembla» medio píxel. Solo cambian la opacidad del cartel y la luz de
   la portada, a la vez y con la misma curva. */
.modo-cartel .celda-proyecto img,
.modo-cartel .celda-proyecto.visible img {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.modo-cartel .celda__cartel { will-change: opacity; }
.modo-cartel .celda__fondo  { will-change: filter; }
.modo-cartel .celda__fondo,
.modo-cartel .celda__cartel {
  transition:
    opacity 1.2s var(--curva),
    filter  var(--t-cartel) cubic-bezier(.4, 0, .2, 1);
}
.modo-cartel .con-cartel.visible .celda__fondo { filter: brightness(var(--cartel-oscuro)); }
@media (hover: hover) {
  .modo-cartel .con-cartel.visible:is(:hover, :focus-visible) .celda__cartel {
    opacity: 0;
    transition: opacity var(--t-cartel) cubic-bezier(.4, 0, .2, 1);
  }
  .modo-cartel .con-cartel.visible:is(:hover, :focus-visible) .celda__fondo { filter: brightness(1); }
}

/* Texto: Título / directed by … / produced by … y el año abajo.
   La columna derecha conserva el bloque junto al borde derecho. */
.modo-cartel .celda__texto {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--cartel-texto-hueco);
  left: auto; right: var(--cartel-texto-margen); bottom: var(--cartel-texto-abajo);
  width: max-content; max-width: calc(62% - 2 * var(--cartel-texto-margen));
  font-family: var(--cartel-texto-fuente);
  font-size: var(--cartel-texto-tam);
  font-weight: var(--cartel-texto-peso, 400);
  font-style: var(--cartel-texto-estilo, normal);
  text-transform: var(--cartel-texto-transform, none);
  line-height: var(--cartel-texto-linea);
  letter-spacing: .01em;
}
.modo-cartel .celda__ficha span, .modo-cartel .celda__ano { display: block; }
/* En escritorio, la posición en la rejilla decide el lado: si una película
   cambia de lugar, su texto cambia con ella. En la izquierda, el bloque va
   junto al borde izquierdo y sus líneas quedan alineadas a la derecha. */
@media (min-width: 701px) {
  .lista-cine.modo-cartel > .celda-proyecto:nth-child(odd):not(.sin-portada) .celda__texto {
    left: var(--cartel-texto-margen);
    right: auto;
    text-align: right;
  }
}
@media (hover: hover) and (pointer: fine) {
  .modo-cartel .celda-proyecto__txt { display: flex; }
}
/* En el móvil todos los textos empiezan en la misma línea: a 1/3 de la
   imagen (si hay cartel, justo después del cartel). Así quedan alineados. */
@media (max-width: 700px) {
  .modo-cartel .celda__texto {
    font-size: var(--cartel-texto-tam-movil);
    gap: 1em;
    left: var(--cartel-texto-izq-movil); right: var(--cartel-texto-margen);
    width: auto; max-width: none;
  }
  .modo-cartel .con-cartel .celda__texto { left: calc(37.84% + var(--cartel-texto-margen)); }
}