:root {
    /* Fondo del Popup (negro semitransparente) */
    --lff-popup-bg-color: rgba(0, 0, 0, 0.85);
    /* Desenfoque del fondo (efecto cristal) */
    --lff-popup-blur: 10px;
    
    /* Redondeo de las fotos del popup */
    --lff-popup-border-radius: 12px;
    
    /* Color de los textos en el popup */
    --lff-popup-title-color: #ffffff;
    --lff-popup-date-color: #dddddd;
    
    /* Botones de navegación inferiores */
    --lff-popup-btn-color: #ffffff;
    --lff-popup-btn-border: 2px solid #ffffff;
    --lff-popup-btn-bg-hover: #ffffff;
    --lff-popup-btn-color-hover: #000000;
}

.lff-cartelera-container { position: relative; width: 100%; max-width: 100vw; min-width: 0; margin: 2rem auto var(--space-xl, 40px) auto; padding: 0; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-xl, 40px); }
.lff-cartelera-grid { display: grid; grid-template-rows: repeat(var(--lff-filas, 2), 1fr); grid-auto-flow: column; gap: var(--space-s, 15px); overflow-x: auto; scroll-behavior: auto; scrollbar-width: none; -ms-overflow-style: none; padding: var(--space-s, 12px) var(--space-m, 10px) 0 var(--space-m, 10px); width: 100%; max-width: 100%; box-sizing: border-box; }
.lff-cartelera-grid::-webkit-scrollbar { display: none; }
.lff-cartelera-item {  border-radius: var(--radius-m, 12px); overflow: hidden; cursor: pointer; aspect-ratio: 7/10; width: clamp(155px, 18vw, 180px); background-color: var(--gris-l-4, #2a2a2a); position: relative; transition: transform 0.3s ease;  -webkit-user-select: none; user-select: none; }
.lff-cartelera-item:hover { transform: scale(1.03); }

/* Fade in for lazy loaded images */
.lff-cartelera-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease; }
.lff-cartelera-item img.lff-lazy { opacity: 0; }
.lff-cartelera-item img.lff-loaded { opacity: 1; }
.lff-cartelera-item:hover img { transform: scale(1.04); }

.lff-popup-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; height: 100dvh; background: var(--lff-popup-bg-color); backdrop-filter: blur(var(--lff-popup-blur)); -webkit-backdrop-filter: blur(var(--lff-popup-blur)); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.lff-popup-overlay.lff-show { opacity: 1; }
.lff-popup-content { display: flex; flex-direction: column; align-items: center; justify-content: space-between; max-width: 90vw; height: 95%; max-height: 95%; padding: 2vh 0 3vh 0; box-sizing: border-box; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.lff-popup-overlay.lff-show .lff-popup-content { transform: scale(1); }
.lff-popup-body { background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-s, 15px); flex: 1 1 auto; min-height: 0; width: 100%; }
#lff-popup-img { flex: 0 1 auto; min-height: 0; max-height: 100%; width: auto; max-width: 100%; border-radius: var(--lff-popup-border-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.5); object-fit: contain; }
@media (max-width: 768px) {
    .lff-popup-content { max-width: 96vw; }
}
#lff-popup-title { color: var(--lff-popup-title-color); font-size: var(--text-l, clamp(1.1rem, 3vw, 1.5rem)); text-align: center; margin: 0; font-weight: 600; }
.lff-popup-actions { display: flex; gap: var(--space-s, 15px); margin-bottom: var(--space-m, clamp(1rem, 2vw, 1.5rem)); }
.lff-popup-nav-bar { display: flex; align-items: center; justify-content: center; gap: clamp(15px, 4vw, 30px); margin-top: 10px; }
.lff-popup-nav-btn, .lff-popup-close-btn { background: transparent; color: var(--lff-popup-btn-color); border: var(--lff-popup-btn-border); border-radius: 50%; width: clamp(45px, 10vw, 55px); height: clamp(45px, 10vw, 55px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; }
@media (hover: hover) {
    .lff-popup-nav-btn:hover, .lff-popup-close-btn:hover { transform: scale(1.1); }
    .lff-popup-close-btn:hover { transform: scale(1.1) rotate(90deg); }
}
.lff-popup-nav-btn:active, .lff-popup-close-btn:active { background: var(--lff-popup-btn-bg-hover); color: var(--lff-popup-btn-color-hover); transform: scale(0.95) !important; transition: all 0.1s ease; }
.lff-popup-nav-btn svg, .lff-popup-close-btn svg { width: 50%; height: 50%; }