/* ============================================================
   FILM-STRIP.CSS - ESTRUCTURA Y ESCENARIO
   ============================================================ */

.film-vault {
    padding-top: 50px !important; 
    padding-bottom: 50px !important; /* Si también necesitas espacio abajo */
    display: flex;
    flex-direction: column;
    gap: 120px;
    background-color: #000;
}

.film-strip {
    background: #111; 
    padding: 20px 0;
    width: 140vw !important; 
    margin-left: -20vw !important;
    position: relative;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    cursor: col-resize;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); 
}

.film-strip:hover {
    background: #151515;
    /* Este es el color del glow: rgba(255, 255, 255, 0.25) */
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.25); 
}

.film-strip::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
    z-index: 5;
}

@media (max-width: 768px) {
    .film-vault { padding-top: 100px; gap: 60px; }
    .frames-row img { height: 220px !important; }
}