/* IvaniaPhoto · publico/assets/css/peliculas.css
 * Sección «Películas» de /quinceanera y /boda (lib/peliculas.php, 10/10/2026).
 * Usa los tokens del tema de la página (--humo, --arena, --cine) con respaldo a los del sitio.
 * Ocampo-Infra Agent System · autor Roberto Ocampo
 */
.pv { padding: clamp(48px, 8vh, 96px) 0 clamp(24px, 4vh, 48px); }
.pv-caja { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.pv-kicker { margin: 0 0 6px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--arena, var(--ip-oro)); }
.pv h2 { margin: 0 0 28px; font-weight: 400; font-size: var(--fs-h2); line-height: 1.15; }
.pv h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); }
.pv-nota { margin: 2px 0 16px; font-size: var(--fs-caption); color: var(--humo-60, var(--ip-humo)); }
.pv-grupo { margin-top: clamp(36px, 6vh, 64px); }

.pv-pieza { margin: 0; }
.pv-pieza figcaption { margin-top: 10px; font-size: var(--fs-caption); letter-spacing: .02em; }
.pv-dur { color: var(--humo-60, var(--ip-humo)); margin-left: 6px; font-variant-numeric: tabular-nums; }
.pv-pieza--destacada figcaption { color: var(--arena, var(--ip-oro)); }

.pv-tarjeta {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000;
  outline-offset: 4px;
}
.pv-tarjeta img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease), opacity .4s; }
.pv-tarjeta:hover img, .pv-tarjeta:focus-visible img { transform: scale(1.03); opacity: .92; }
.pv-tarjeta:focus-visible { outline: 2px solid var(--arena, var(--ip-oro)); }
.pv-pieza--destacada .pv-tarjeta { box-shadow: 0 0 0 1px var(--arena, var(--ip-oro)); }

/* Botón de reproducir en la esquina, para no tapar la portada que ya trae el video. */
.pv-play {
  position: absolute; left: 14px; bottom: 14px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(11, 10, 9, .55); border: 1px solid rgba(245, 241, 234, .7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .3s, transform .3s var(--ease);
}
.pv-play::after {
  content: ''; position: absolute; left: 18px; top: 14px;
  border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #F5F1EA;
}
.pv-tarjeta:hover .pv-play, .pv-tarjeta:focus-visible .pv-play { background: var(--arena, var(--ip-oro)); transform: scale(1.06); }
.pv-pieza--intro .pv-play { width: 64px; height: 64px; left: 22px; bottom: 22px; }
.pv-pieza--intro .pv-play::after { left: 25px; top: 19px; border-width: 13px 0 13px 20px; }

.pv-rejilla { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.pv-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .pv-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .pv-rejilla, .pv-rejilla--2 { grid-template-columns: 1fr; gap: 24px; }
  .pv-caja { padding: 0 12px; }
}

/* Reproductor: fondo negro a toda la ventana; el video además pide pantalla completa. */
.pv-dialogo {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #000; color: #F5F1EA;
}
.pv-dialogo::backdrop { background: #000; }
.pv-escenario { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pv-escenario video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.pv-cerrar {
  position: absolute; top: 14px; right: 14px; z-index: 2; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(245, 241, 234, .5); background: rgba(0, 0, 0, .5); color: #F5F1EA;
  font: inherit; font-size: .875rem; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .pv-tarjeta img, .pv-play { transition: none; } }